/*
 * Lion Express component layer.
 * Component class names are reserved in docs/renewal/DESIGN.md §7.
 */
/*
 * BudouX fallback (lx.js initPhrases, Safari/Firefox only) moves every child of a target into
 * one <budoux-ja>. Without a box of its own, the children stay grid/flex items of the target
 * (facts strip, member benefits); word-break and overflow-wrap still inherit through it.
 */
budoux-ja {
  display: contents;
}

.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lx-control-h);
  padding: 0 var(--lx-s-6);
  border: 1.5px solid transparent;
  border-radius: var(--lx-radius-pill);
  background: transparent;
  color: var(--lx-deep);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--lx-track-body);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--lx-dur-fast) var(--lx-ease), border-color var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease), transform var(--lx-dur-fast) var(--lx-ease);
}

.lx-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.lx-btn--primary {
  background: var(--lx-amber);
  color: var(--lx-deep);
}

.lx-btn--primary:hover {
  background: var(--lx-amber-hover);
}

.lx-btn--secondary {
  border-color: var(--lx-deep);
  background: var(--lx-paper);
  color: var(--lx-deep);
}

.lx-btn--secondary:hover {
  background: var(--lx-mist);
}

.lx-btn--text {
  min-height: var(--lx-touch);
  padding-inline: 0;
  color: var(--lx-link);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.lx-btn--text:hover {
  background: transparent;
  text-decoration-thickness: max(2px, .1em);
  transform: none;
}

.lx-btn--block {
  width: 100%;
}

.lx-btn:disabled,
.lx-btn[aria-disabled="true"] {
  border-color: var(--lx-fog);
  background: var(--lx-fog);
  color: var(--lx-muted);
  transform: none;
}

.lx-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-mist);
  color: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
  white-space: nowrap;
}

.lx-tone {
  gap: var(--lx-s-2);
}

.lx-tone::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lx-tone, var(--lx-deep));
}

/* Native <small> defaults to sub-14px in browsers; lx components keep the design-system floor. */
.lx-page :where([class^="lx-"], [class*=" lx-"]) small {
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-notice {
  display: grid;
  grid-template-columns: var(--lx-touch) 1fr;
  gap: var(--lx-s-3);
  align-items: start;
  padding: var(--lx-s-5);
  border-radius: var(--lx-radius-card);
  background: var(--lx-fog);
  color: var(--lx-body);
}

.lx-notice > :is(p, ul, ol, div) {
  grid-column: 2;
  min-width: 0;
  margin-block: 0;
}


.lx-notice--info {
  background: var(--lx-fog);
}

.lx-notice svg {
  width: var(--lx-s-6);
  height: var(--lx-s-6);
  margin: var(--lx-s-2) auto 0;
  color: var(--lx-deep);
}

.lx-notice > span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  width: var(--lx-touch);
  height: var(--lx-touch);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-mist);
  color: var(--lx-deep);
  font-family: var(--lx-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.lx-notice > span[aria-hidden="true"]:empty::before {
  content: "i";
}

.lx-notice--error > span[aria-hidden="true"] {
  background: var(--lx-error-wash);
  color: var(--lx-error);
}

.lx-notice--error > span[aria-hidden="true"]:empty::before {
  content: "!";
}

.lx-notice--important {
  border: 1.5px solid var(--lx-deep);
  background: var(--lx-paper);
}

.lx-notice--error {
  background: var(--lx-error-wash);
  color: var(--lx-error);
}

.lx-notice--error svg {
  color: var(--lx-error);
}

@media (max-width: 767px) {
  .lx-notice {
    grid-template-columns: 1fr;
    gap: var(--lx-s-2);
    padding: var(--lx-s-4);
  }

  .lx-notice svg {
    margin: 0;
  }

  .lx-notice > span[aria-hidden="true"] {
    width: var(--lx-s-7);
    height: var(--lx-s-7);
  }

  .lx-notice > :is(p, ul, ol, div) {
    grid-column: 1;
  }
}


.lx-field {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-field__label {
  display: flex;
  gap: var(--lx-s-2);
  align-items: center;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 500;
  line-height: 1.5;
}

.lx-field__req {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: var(--lx-s-2);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-mist);
  color: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: 1.2;
}

.lx-field__help,
.lx-field__error {
  margin: 0;
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-field__help {
  color: var(--lx-muted);
}

.lx-field__help a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
}

.lx-field__error {
  display: flex;
  gap: var(--lx-s-2);
  align-items: flex-start;
  color: var(--lx-error);
  font-weight: 500;
}

.lx-field__input,
.lx-field__select,
.lx-field textarea {
  width: 100%;
  min-height: var(--lx-control-h);
  padding: var(--lx-s-3) var(--lx-s-4);
  border: 1.5px solid var(--lx-field);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  line-height: 1.5;
  transition: border-color var(--lx-dur-fast) var(--lx-ease), background-color var(--lx-dur-fast) var(--lx-ease);
}

.lx-field textarea {
  min-height: 144px;
  resize: vertical;
}

.lx-field__select {
  padding-inline-end: var(--lx-s-9);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lx-deep) 50%), linear-gradient(135deg, var(--lx-deep) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-repeat: no-repeat;
  background-size: 7px 7px, 7px 7px;
}

.lx-field__input:focus,
.lx-field__select:focus,
.lx-field textarea:focus {
  border-color: var(--lx-deep);
}

.lx-field__input[aria-invalid="true"],
.lx-field__select[aria-invalid="true"],
.lx-field textarea[aria-invalid="true"] {
  border-color: var(--lx-error);
  background: var(--lx-error-wash);
}

.lx-check {
  display: grid;
  grid-template-columns: var(--lx-touch) 1fr;
  gap: var(--lx-s-2);
  align-items: start;
  min-height: var(--lx-touch);
  color: var(--lx-body);
  cursor: pointer;
}

.lx-check input {
  width: var(--lx-s-5);
  height: var(--lx-s-5);
  margin: 12px;
  border: 1.5px solid var(--lx-field);
  accent-color: var(--lx-deep);
}

.lx-check span {
  padding-block: 8px;
}

.lx-radio-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--lx-touch) 1fr auto;
  gap: var(--lx-s-3);
  align-items: center;
  min-height: 72px;
  padding: var(--lx-s-4);
  border: 1.5px solid var(--lx-line);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
  color: var(--lx-body);
  cursor: pointer;
  transition: background-color var(--lx-dur-fast) var(--lx-ease), border-color var(--lx-dur-fast) var(--lx-ease), box-shadow var(--lx-dur-fast) var(--lx-ease);
}

.lx-radio-card:hover {
  background: var(--lx-fog);
}

.lx-radio-card input {
  width: var(--lx-s-5);
  height: var(--lx-s-5);
  accent-color: var(--lx-deep);
}

.lx-radio-card strong {
  display: block;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  line-height: 1.5;
}

.lx-radio-card small {
  display: block;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-radio-card:has(input:checked) {
  border-color: var(--lx-amber);
  background: var(--lx-mist);
  box-shadow: inset 0 0 0 1px var(--lx-amber);
}

.lx-radio-card:has(input:focus-visible) {
  outline: var(--lx-focus);
  outline-offset: var(--lx-focus-offset);
}

.lx-stepper {
  display: inline-grid;
  grid-template-columns: var(--lx-touch) minmax(48px, auto) var(--lx-touch);
  align-items: center;
  min-height: var(--lx-touch);
  border: 1.5px solid var(--lx-deep);
  border-radius: var(--lx-radius-pill);
  overflow: hidden;
  background: var(--lx-paper);
  color: var(--lx-deep);
}

.lx-stepper button {
  display: grid;
  place-items: center;
  width: var(--lx-touch);
  height: var(--lx-touch);
  border: 0;
  background: transparent;
  color: inherit;
}

.lx-stepper button:hover {
  background: var(--lx-mist);
}

.lx-stepper :is(button, a):focus-visible {
  outline: var(--lx-focus);
  outline-offset: -3px;
}

.lx-stepper input,
.lx-stepper output {
  width: 64px;
  border: 0;
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.lx-steps {
  display: grid;
  gap: var(--lx-s-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.lx-steps li {
  display: grid;
  grid-template-columns: var(--lx-touch) 1fr;
  gap: var(--lx-s-2);
  align-items: center;
  min-height: var(--lx-touch);
  margin: 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 500;
}

.lx-steps li::before {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--lx-line);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-paper);
  color: var(--lx-muted);
  content: counter(step);
  counter-increment: step;
  font-variant-numeric: tabular-nums;
  font-family: var(--lx-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lx-steps {
  counter-reset: step;
}

.lx-steps [aria-current="step"] {
  color: var(--lx-deep);
}

.lx-steps [aria-current="step"]::before {
  border-color: var(--lx-deep);
  background: var(--lx-deep);
  color: var(--lx-paper);
}

.lx-steps .is-done {
  color: var(--lx-deep);
}

/* Done steps show the inline check icon (labelled 「完了」) instead of the number.
   The ::before is dropped, so the step counter moves onto the item itself. */
.lx-steps .is-done {
  counter-increment: step;
}

.lx-steps .is-done::before {
  display: none;
}

.lx-steps__check {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1.5px solid var(--lx-deep);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-paper);
  color: var(--lx-deep);
}

.lx-steps__position,
.lx-steps__mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lx-steps__label {
  min-width: 0;
}


@media (max-width: 767px) {
  /* Compact step row on SP: show the same "N/4 current → next" phone copy
     as the cart while preserving all steps for assistive technology. */
  .lx-steps {
    grid-template-columns: 1fr;
  }

  .lx-steps li:not([aria-current="step"]) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lx-steps li[aria-current="step"] {
    grid-template-columns: 1fr;
  }

  .lx-steps li[aria-current="step"]::before,
  .lx-steps li[aria-current="step"] .lx-steps__label {
    display: none;
  }

  .lx-steps li[aria-current="step"] .lx-steps__mobile {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--lx-deep);
    font-size: var(--lx-text-small);
    font-weight: 500;
    line-height: var(--lx-lh-small);
    white-space: nowrap;
  }
}

.lx-acc {
  border-block: var(--lx-hairline);
}

.lx-acc + .lx-acc {
  border-block-start: 0;
}

.lx-acc > summary,
.lx-acc__button {
  display: grid;
  grid-template-columns: 1fr var(--lx-touch);
  gap: var(--lx-s-3);
  align-items: center;
  min-height: 56px;
  padding: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-h4);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.lx-acc > summary::-webkit-details-marker {
  display: none;
}

.lx-acc > summary::after,
.lx-acc__button::after {
  display: grid;
  place-items: center;
  width: var(--lx-touch);
  height: var(--lx-touch);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  content: "+";
  font-size: var(--lx-text-h3);
  font-weight: 400;
}

.lx-acc[open] > summary::after,
.lx-acc__button[aria-expanded="true"]::after {
  content: "−";
}

.lx-acc__body {
  padding-block: 0 var(--lx-s-5);
  color: var(--lx-body);
}

.lx-head {
  margin-block-end: var(--lx-s-7);
}

.lx-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lx-s-4);
}

.lx-head__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--lx-s-3);
  color: var(--lx-link);
  font-family: var(--lx-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
}


.lx-head__title {
  margin: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-display);
  font-feature-settings: "palt";
  font-weight: var(--lx-w-display);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-wrap: balance;
}

.lx-head__lead {
  max-width: 640px;
  margin: var(--lx-s-3) 0 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-body);
}

.lx-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--lx-s-2);
  min-height: var(--lx-touch);
  color: var(--lx-deep);
  font-size: 15px;
  font-weight: var(--lx-w-label);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lx-more svg {
  width: 18px;
  height: 18px;
  transition: transform var(--lx-dur) var(--lx-ease);
}

.lx-more:hover svg {
  transform: translateX(4px);
}

.lx-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lx-s-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.lx-card-grid > li {
  min-width: 0;
  margin-block-start: 0;
}

.lx-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--lx-s-3);
  height: 100%;
  color: var(--lx-body);
  text-decoration: none;
}

.lx-card:hover {
  text-decoration: none;
}

.lx-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--lx-radius-card);
  background: var(--lx-fog);
  overflow: hidden;
}

.lx-card__media img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lx-card__body {
  display: grid;
  grid-template-rows: auto minmax(3.1em, auto) auto;
  gap: var(--lx-s-2);
  align-content: start;
}

.lx-card__spec {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-card__name {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 700;
  line-height: 1.55;
  text-wrap-style: pretty;
  word-break: auto-phrase;
}

@media (max-width: 767px) {
  .lx-card__name {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.58;
  }
}

.lx-card__price {
  align-self: end;
}


.lx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lx-s-4);
}

.lx-tile {
  display: grid;
  gap: var(--lx-s-3);
  color: var(--lx-body);
  text-decoration: none;
}

.lx-tile:hover {
  text-decoration: none;
}

.lx-tile__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--lx-radius-card);
  background: var(--lx-fog);
  overflow: hidden;
}

.lx-tile__image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lx-tile__name {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-wrap: balance;
  word-break: auto-phrase;
}

.lx-tile__spec {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-label {
  width: 100%;
  border-collapse: collapse;
  border-block: var(--lx-hairline);
  font-size: var(--lx-text-body);
}

.lx-label th,
.lx-label td {
  padding: var(--lx-s-3) 0;
  border-block-end: var(--lx-hairline);
  text-align: start;
  vertical-align: top;
}

.lx-label th {
  width: 8em;
  padding-inline-end: var(--lx-s-4);
  color: var(--lx-muted);
  font-weight: 500;
}

.lx-label td {
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
}

.lx-price {
  color: var(--lx-ink);
  font-size: var(--lx-text-price);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.lx-price--lg {
  font-size: var(--lx-text-price-lg);
  line-height: 1.1;
}

/*
 * The per-unit line renders only when the variant name is an exact count
 * (e.g. "60錠"); count = <digits><unit>, price02IncTax / count rounded half up.
 */
.lx-price__unit {
  display: block;
  margin-block-start: var(--lx-s-1);
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 400;
  line-height: var(--lx-lh-small);
}

/* display:block above would override the UA [hidden] rule; keep it hidden. */
.lx-price__unit[hidden] {
  display: none;
}

/* Tax-included label (総額表示): every storefront price carries「税込」. */
.lx-price__tax {
  margin-inline-start: var(--lx-s-1);
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 500;
}

.lx-panel {
  padding: var(--lx-card-pad);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
}

.lx-panel--fog {
  border-color: transparent;
  background: var(--lx-fog);
}

.lx-panel--large {
  border-radius: var(--lx-radius-panel);
}


.lx-coupon {
  display: grid;
  gap: var(--lx-s-4);
}

.lx-coupon__head {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-coupon__head .lx-head__kicker {
  margin-bottom: 0;
}

.lx-coupon__body,
.lx-coupon__meta {
  display: grid;
  gap: var(--lx-s-3);
}

.lx-coupon__status {
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-body);
  line-height: var(--lx-lh-body);
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-coupon__meta {
  margin: 0;
  border-top: var(--lx-hairline);
}

.lx-coupon__meta > div {
  display: grid;
  gap: var(--lx-s-2);
  padding-top: var(--lx-s-3);
}

.lx-coupon__meta dt {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
}

.lx-coupon__meta dd {
  margin: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 700;
  line-height: var(--lx-lh-body);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.lx-breadcrumb,
.lx-breadcrumb-slot .l-pankz {
  margin-bottom: var(--lx-s-5);
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
}

.lx-breadcrumb ol,
.lx-breadcrumb ul,
.lx-breadcrumb-slot .l-pankz ol,
.lx-breadcrumb-slot .l-pankz ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lx-breadcrumb li,
.lx-breadcrumb-slot .l-pankz li {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-s-2);
  /* A long product name (e.g. one katakana word) must wrap, not widen the page. */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lx-breadcrumb li:not(:last-child)::after,
.lx-breadcrumb-slot .l-pankz li:not(:last-child)::after {
  color: var(--lx-muted);
  content: "/";
}

.lx-breadcrumb a,
.lx-breadcrumb-slot .l-pankz a {
  color: var(--lx-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 767px) {
  .lx-breadcrumb a,
  .lx-breadcrumb-slot .l-pankz a {
    display: inline-flex;
    align-items: center;
    min-height: var(--lx-touch);
  }
}

.l-pankz.l-pankz ul li a::after {
  content: none;
}

.lx-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* base.css spaces stacked list items (li + li); in this row it pushed every item
   but the first 4px down, so the first page sat above the rest. */
.lx-pager > li {
  margin: 0;
}

.lx-pager a,
.lx-pager span {
  display: grid;
  place-items: center;
  min-width: var(--lx-touch);
  min-height: var(--lx-touch);
  padding-inline: var(--lx-s-3);
  border: 1.5px solid var(--lx-line);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  font-weight: 700;
  text-decoration: none;
}

.lx-pager [aria-current="page"] {
  border-color: var(--lx-amber);
  background: var(--lx-amber);
  color: var(--lx-deep);
}

.lx-toast {
  display: inline-flex;
  gap: var(--lx-s-2);
  align-items: center;
  max-width: min(420px, 100%);
  padding: var(--lx-s-4) var(--lx-s-5);
  border-radius: var(--lx-radius-card);
  background: var(--lx-deep);
  color: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
  font-weight: 700;
}

.lx-cookie {
  position: fixed;
  inset-inline: var(--lx-gutter);
  inset-block-end: calc(var(--lx-gutter) + var(--lx-safe-bottom));
  z-index: 50;
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--lx-s-3);
  padding: var(--lx-s-4);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
}

.lx-buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: grid;
  /* Price takes its content width (amount + tax label never split); the CTA fills the rest. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lx-s-3);
  align-items: center;
  padding: var(--lx-s-3) var(--lx-gutter) calc(var(--lx-s-3) + var(--lx-safe-bottom));
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
}

.lx-buybar .lx-btn {
  justify-self: stretch;
  min-width: 0;
  padding-inline: var(--lx-s-4);
  white-space: nowrap;
}

.lx-header {
  border-block-end: var(--lx-hairline);
  background: var(--lx-paper);
}

.lx-header__utility {
  display: flex;
  gap: var(--lx-s-4);
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding-inline: var(--lx-gutter);
  background: var(--lx-deep);
  color: var(--lx-paper);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-small);
}

.lx-header__main {
  display: grid;
  gap: var(--lx-s-4);
  align-items: center;
  min-height: 80px;
  padding-block: var(--lx-s-4);
}

.lx-search {
  position: relative;
  display: flex;
  align-items: center;
}

.lx-search svg {
  position: absolute;
  inset-inline-start: var(--lx-s-4);
  width: var(--lx-s-5);
  height: var(--lx-s-5);
  color: var(--lx-deep);
  pointer-events: none;
}

.lx-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--lx-s-4) 0 var(--lx-s-10);
  border: 1.5px solid var(--lx-field);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-paper);
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
}

.lx-nav {
  display: flex;
  gap: var(--lx-s-2);
  align-items: center;
  overflow-x: auto;
  padding-block: var(--lx-s-3);
}

.lx-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
  padding-inline: var(--lx-s-4);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lx-nav a:hover,
.lx-nav a[aria-current="page"] {
  background: var(--lx-mist);
}

.lx-sheet {
  display: grid;
  align-content: start;
  gap: var(--lx-s-5);
  width: min(100%, 360px);
  min-height: 100dvh;
  padding: var(--lx-s-6);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
}

.lx-sheet nav a {
  display: flex;
  align-items: center;
  min-height: var(--lx-touch);
}

.lx-footer {
  padding-block: var(--lx-section-gap);
  background: var(--lx-deep);
  color: var(--lx-paper);
}

.lx-footer h1,
.lx-footer h2,
.lx-footer h3,
.lx-footer h4,
.lx-footer .lx-price {
  color: var(--lx-paper);
}

.lx-footer a {
  color: var(--lx-paper);
}

.lx-footer__grid {
  display: grid;
  gap: var(--lx-s-6);
}

/* Horizontal scrolling chip row (category quick links on home and list pages). */
.lx-chips {
  display: flex;
  gap: var(--lx-s-2);
  margin-inline: calc(var(--lx-gutter) * -1);
  padding-inline: var(--lx-gutter);
  overflow-x: auto;
  scrollbar-width: thin;
}

.lx-chips__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
  text-decoration: none;
  white-space: nowrap;
}

.lx-chips__item:hover {
  background: var(--lx-mist);
  text-decoration: none;
}

/* Segmented tab control (single active tab, amber active state per DESIGN). */
.lx-tabs__list {
  display: flex;
  gap: var(--lx-s-1);
  margin-block-end: var(--lx-s-6);
  padding: var(--lx-s-1);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-pill);
  overflow-x: auto;
  scrollbar-width: none;
}

.lx-tabs__list::-webkit-scrollbar {
  display: none;
}

.lx-tabs__tab {
  flex: 1 0 auto;
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border: 0;
  border-radius: var(--lx-radius-pill);
  background: transparent;
  color: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 700;
  white-space: nowrap;
}

.lx-tabs__tab:hover {
  background: var(--lx-mist);
}

.lx-tabs__tab[aria-selected="true"] {
  background: var(--lx-amber);
  color: var(--lx-deep);
}

.lx-tabs__panel[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .lx-card-grid,
  .lx-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lx-s-6);
  }

  .lx-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lx-cookie {
    inset-inline: var(--lx-gutter) auto;
    width: 360px;
  }

  .lx-buybar {
    display: none;
  }

  .lx-header__main {
    grid-template-columns: auto minmax(320px, 1fr) auto;
  }

  .lx-footer__grid {
    grid-template-columns: 1.3fr repeat(3, 1fr);
  }
}

/* -- Frame chrome (T-1000 / issue #7) -------------------------------------
   Production frame overrides for the renewal default_frame/header/footer/
   menu sheet/cookie markup. These rules intentionally refine the
   component-library defaults above; the base .lx-* blocks stay canonical
   for the styleguide, while the selectors below match the shipped frame
   DOM (e.g. .lx-search__input/.lx-nav__link carry the refined styles). */

body.lx-sheet-open {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.ec-role,
.ec-registerRole,
.ec-cartRole,
.ec-mypageRole {
  width: min(100% - (var(--lx-gutter) * 2), var(--lx-content-max));
  margin-inline: auto;
}

.lx-layout {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.lx-main {
  flex: 1 0 auto;
  padding-block: var(--lx-s-7) var(--lx-s-10);
}

.lx-breadcrumb-slot:empty {
  display: none;
}

.lx-maintenance {
  padding: var(--lx-s-3) var(--lx-gutter);
  color: var(--lx-paper);
  background: var(--lx-error);
  text-align: center;
  font-size: var(--lx-text-small);
  font-weight: 700;
}

/* EC-CUBE compatibility (plugins/core JS keep these hooks) */
.ec-pageHeader {
  margin-bottom: var(--lx-s-7);
}

.ec-pageHeader h1 {
  margin-bottom: 0;
}

.ec-layoutRole__main,
.ec-layoutRole__mainWithColumn,
.ec-layoutRole__mainBetweenColumn {
  width: 100%;
}

.ec-blockBtn--action,
.ec-blockBtn--cancel,
.ec-blockBtn,
.ec-inlineBtn,
.ec-blockBtn--top {
  min-height: var(--lx-touch);
  border-radius: var(--lx-radius-pill);
}

.ec-blockTopBtn {
  position: fixed;
  right: calc(var(--lx-s-4) + var(--lx-safe-right));
  bottom: calc(var(--lx-s-4) + var(--lx-safe-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lx-touch);
  height: var(--lx-touch);
  padding: 0;
  border: var(--lx-hairline);
  border-radius: 50%;
  color: var(--lx-deep);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
  cursor: pointer;
}

/* Icon-only (named by aria-label) so it never covers a line of text. */
.ec-blockTopBtn svg {
  width: 20px;
  height: 20px;
}

/* While the cookie notice is open it owns the bottom edge; the button returns after consent. */
body:has(.lx-cookie:not([hidden])) .ec-blockTopBtn {
  display: none !important;
}

.ec-overlayRole {
  display: none;
}

/* Skip link */
.lx-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lx-skip:focus,
.lx-skip:focus-visible {
  position: fixed;
  top: calc(var(--lx-s-3) + var(--lx-safe-top));
  left: calc(var(--lx-s-3) + var(--lx-safe-left));
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: var(--lx-s-2) var(--lx-s-4);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-paper);
  background: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 700;
  text-decoration: none;
}

/* Header */
.lx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lx-paper);
  border-bottom: var(--lx-hairline);
  padding-top: var(--lx-safe-top);
}

.lx-header__utility {
  display: none;
  color: var(--lx-paper);
  background: var(--lx-deep);
  font-size: var(--lx-text-small);
}

.lx-header__utility-inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-4);
}

.lx-header__utility p {
  margin: 0;
}

.lx-header__mobile-bar {
  min-height: var(--lx-header-h);
  display: grid;
  grid-template-columns: var(--lx-touch) 1fr var(--lx-touch);
  align-items: center;
  gap: var(--lx-s-2);
  padding-inline: var(--lx-gutter);
  background: var(--lx-paper);
}

.lx-header__menu-button,
.lx-header__search-toggle,
.lx-sheet__close,
.lx-footer__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.lx-header__menu-button,
.lx-header__search-toggle {
  width: var(--lx-touch);
  height: var(--lx-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
}

.lx-header__menu-button {
  flex-direction: column;
  gap: 5px;
}

.lx-header__menu-button span {
  width: 22px;
  height: 2px;
  border-radius: var(--lx-radius-pill);
  background: currentColor;
}

.lx-header__mobile-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
  justify-self: center;
  line-height: 1;
}

.lx-header__mobile-logo img,
.lx-header__logo img,
.lx-footer__logo img {
  object-fit: contain;
}

.lx-header__main {
  display: none;
}

/* Search (scoped input/button selectors refine the component default above) */
.lx-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  padding: var(--lx-s-2);
  border: 1.5px solid var(--lx-field);
  border-radius: var(--lx-radius-pill);
  background: var(--lx-paper);
}

.lx-search--mobile {
  position: absolute;
  top: calc(100% + var(--lx-s-2));
  right: var(--lx-gutter);
  left: var(--lx-gutter);
  z-index: 1;
  margin: 0;
  box-shadow: var(--lx-shadow-float);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--lx-dur) var(--lx-ease), visibility var(--lx-dur) var(--lx-ease), transform var(--lx-dur) var(--lx-ease);
  visibility: hidden;
}

@media (max-width: 767px) {
  .lx-page:not(.lx-home-page) .lx-main {
    --lx-mobile-search-space: 76px;
    padding-block-start: calc(var(--lx-s-7) + var(--lx-mobile-search-space));
  }
}

.lx-header.is-search-open .lx-search--mobile {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.lx-search:focus-within {
  border-color: var(--lx-deep);
  outline: var(--lx-focus);
  outline-offset: var(--lx-focus-offset);
}

.lx-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lx-search .lx-search__input {
  min-width: 0;
  flex: 1;
  min-height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lx-ink);
  font-size: 16px;
}

.lx-search .lx-search__input::placeholder {
  color: var(--lx-muted);
  opacity: 1;
}

.lx-search .lx-search__button {
  min-width: var(--lx-touch);
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border: 0;
  border-radius: var(--lx-radius-pill);
  color: var(--lx-paper);
  background: var(--lx-deep);
  font-weight: 700;
  cursor: pointer;
}

/* Header quick actions */
.lx-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
}

.lx-header__action,
.lx-header__cart {
  min-height: var(--lx-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-s-2);
  border: 1.5px solid var(--lx-line);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  background: var(--lx-paper);
  font-size: var(--lx-text-small);
  font-weight: 700;
  text-decoration: none;
}

.lx-header__action {
  min-width: 96px;
  padding: var(--lx-s-2) var(--lx-s-4);
  line-height: 1.25;
}

.lx-header__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.lx-header__cart {
  position: relative;
  padding: var(--lx-s-2) var(--lx-s-4);
}

.lx-header__cart--mobile {
  width: var(--lx-touch);
  height: var(--lx-touch);
  padding: 0;
  justify-self: end;
}

.lx-header__cart-label {
  white-space: nowrap;
}

.lx-header__cart-label--mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lx-header__cart-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--lx-s-1);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-paper);
  background: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 700;
  line-height: 1;
}

.lx-header__cart--mobile .lx-header__cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
}

/* Category nav (mobile: sheet-only; the desktop bar styles are in the
   min-width media query below) */
.lx-nav {
  display: none;
}

/* SP menu sheet */
.lx-sheet[hidden] {
  display: none;
}

.lx-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* The legacy .lx-sheet rule above caps the width at 360px; the backdrop must span the screen. */
  width: auto;
  block-size: 100vh;
  block-size: 100svh;
  block-size: 100dvh;
  overscroll-behavior: contain;
}

.lx-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lx-ink) 56%, transparent);
}

.lx-sheet__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(88vw, calc(380px + var(--lx-safe-left)));
  max-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--lx-safe-top);
  padding-left: var(--lx-safe-left);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
  overscroll-behavior: contain;
}

.lx-sheet__head {
  min-height: var(--lx-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-3);
  padding: var(--lx-s-3) var(--lx-s-4);
  border-bottom: var(--lx-hairline);
}

.lx-sheet__head h2,
.lx-sheet__heading {
  margin: 0;
}

.lx-sheet__close {
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border: 1.5px solid var(--lx-deep);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  font-weight: 700;
}

.lx-sheet__body {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--lx-s-5) var(--lx-s-4) var(--lx-s-8);
  padding-bottom: calc(var(--lx-s-8) + var(--lx-safe-bottom));
}

.lx-sheet__section + .lx-sheet__section {
  margin-top: var(--lx-s-7);
  padding-top: var(--lx-s-7);
  border-top: var(--lx-hairline);
}

.lx-sheet__heading {
  color: var(--lx-deep);
  font-size: var(--lx-text-h4);
}

.lx-sheet__links,
.lx-sheet__category-list {
  list-style: none;
  margin: var(--lx-s-3) 0 0;
  padding: 0;
}

.lx-sheet__links li + li,
.lx-sheet__category-list li + li {
  margin-block-start: 0;
}

.lx-sheet__links a,
.lx-sheet__category-link {
  min-height: var(--lx-touch);
  display: flex;
  align-items: center;
  padding: var(--lx-s-2) 0;
  color: var(--lx-ink);
  font-weight: 700;
  text-decoration: none;
}

.lx-sheet__category-more {
  margin-top: var(--lx-s-3);
  padding-top: var(--lx-s-3);
  border-top: var(--lx-hairline);
}

.lx-sheet__category-summary {
  min-height: var(--lx-touch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-3);
  color: var(--lx-deep);
  font-weight: 700;
  cursor: pointer;
}

.lx-sheet__category-summary::-webkit-details-marker {
  display: none;
}

.lx-sheet__category-summary::after {
  content: "＋";
  font-weight: 500;
}

.lx-sheet__category-more[open] .lx-sheet__category-summary::after {
  content: "−";
}

.lx-sheet__category-list--child {
  margin-top: 0;
  margin-left: var(--lx-s-4);
  padding-left: var(--lx-s-4);
  border-left: var(--lx-hairline);
}

.lx-sheet__category-item--level2 .lx-sheet__category-link,
.lx-sheet__category-item--level3 .lx-sheet__category-link {
  color: var(--lx-body);
  font-size: var(--lx-text-small);
  font-weight: 500;
}

/* Footer */
.lx-footer {
  color: var(--lx-paper);
  background: var(--lx-deep);
}

.lx-footer a {
  color: var(--lx-paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lx-footer__grid {
  display: grid;
  gap: var(--lx-s-8);
  padding-block: var(--lx-s-9);
}

.lx-footer__logo {
  display: inline-flex;
  margin-bottom: var(--lx-s-5);
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
}

.lx-footer__statement {
  margin-bottom: var(--lx-s-3);
  color: var(--lx-paper);
  font-size: var(--lx-text-body);
}

/* Footer prose breaks between phrases only (Chromium); Safari gets BudouX via lx.js. */
.lx-footer__statement,
.lx-footer__note {
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-footer__statement a {
  font-weight: 700;
}

.lx-footer__nowrap {
  white-space: nowrap;
}

.lx-footer__note,
.lx-footer__contact p,
.lx-footer__bottom {
  color: var(--lx-mist);
}

.lx-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  margin-top: var(--lx-s-5);
}

.lx-footer__pay span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--lx-s-3);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  background: var(--lx-mist);
  font-size: var(--lx-text-small);
  font-weight: 700;
}

.lx-footer__nav ul,
.lx-footer__contact ul {
  list-style: none;
  margin: var(--lx-s-3) 0 0;
  padding: 0;
}

.lx-footer__nav li + li,
.lx-footer__contact li + li {
  margin-top: var(--lx-s-2);
}

@media (max-width: 767px) {
  .lx-footer__nav a,
  .lx-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: var(--lx-touch);
  }
}

.lx-footer__toggle,
.lx-footer__contact h2 {
  width: 100%;
  min-height: var(--lx-touch);
  padding: 0;
  color: var(--lx-paper);
  font-size: var(--lx-text-h4);
  font-weight: 700;
  text-align: left;
}

.lx-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lx-footer__contact h2 {
  margin-bottom: var(--lx-s-3);
}

.lx-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--lx-paper) 20%, transparent);
  font-size: var(--lx-text-small);
}

.lx-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-3);
  padding-block: var(--lx-s-5);
}

.lx-footer__bottom p {
  margin: 0;
}

.lx-footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-4);
}

.lx-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
}

/* Cookie notice */
.lx-cookie[hidden] {
  display: none;
}

.lx-cookie {
  position: fixed;
  right: var(--lx-gutter);
  bottom: calc(var(--lx-gutter) + var(--lx-safe-bottom));
  left: var(--lx-gutter);
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-4);
  padding: var(--lx-s-4);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-float);
}

.lx-cookie p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-small);
}

.lx-cookie p a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lx-touch);
  min-height: var(--lx-touch);
}

/* The accept action must never collapse: a shrunken button wraps CJK text one
   glyph per line, which reads as broken UI on both PC cards and SP bars. */
.lx-cookie .lx-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Renewal homepage sections (shipped with the frame index) */
.lx-home-hero {
  padding-block: var(--lx-s-8);
  background: var(--lx-fog);
}

.lx-home-hero__inner {
  display: grid;
  gap: var(--lx-s-6);
}

.lx-home-hero__copy {
  max-width: 760px;
}

.lx-home-hero__eyebrow {
  margin-bottom: var(--lx-s-2);
  color: var(--lx-deep);
  font-size: var(--lx-text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lx-home-hero h1 {
  margin-bottom: var(--lx-s-4);
  font-size: var(--lx-text-display);
  line-height: var(--lx-lh-display);
  font-weight: 700;
  letter-spacing: var(--lx-track-display);
}

.lx-home-hero p {
  margin-bottom: 0;
  font-size: var(--lx-text-body-lg);
}

.lx-home-hero__search {
  max-width: 720px;
  min-height: var(--lx-control-h);
}

.lx-home-hero__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
}

.lx-home-hero__categories a {
  min-height: var(--lx-touch);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--lx-s-4);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  background: var(--lx-paper);
  font-size: var(--lx-text-small);
  font-weight: 700;
  text-decoration: none;
}

.lx-home-facts {
  padding-block: var(--lx-s-8);
}

.lx-home-facts__grid {
  display: grid;
  gap: var(--lx-s-4);
}

.lx-home-facts article {
  padding: var(--lx-card-pad);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
}

.lx-home-facts h2 {
  margin-bottom: var(--lx-s-2);
  font-size: var(--lx-text-h3);
}

.lx-home-facts p {
  margin-bottom: var(--lx-s-3);
}

/* Frame chrome responsive */
@media (max-width: 767px) {
  .lx-footer__nav ul {
    display: none;
  }

  .lx-footer__toggle[aria-expanded="true"] + ul {
    display: block;
  }

  .lx-footer__toggle::after {
    margin-left: var(--lx-s-3);
    color: var(--lx-mist);
    font-weight: 700;
    content: "+";
  }

  .lx-footer__toggle[aria-expanded="true"]::after {
    content: "−";
  }

  .lx-cookie {
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    height: auto;
    min-height: calc(56px + var(--lx-safe-bottom));
    padding: 5px max(var(--lx-s-3), var(--lx-safe-right)) calc(5px + var(--lx-safe-bottom)) max(var(--lx-s-3), var(--lx-safe-left));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--lx-radius-card) var(--lx-radius-card) 0 0;
    gap: var(--lx-s-2);
  }

  .lx-cookie p {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--lx-s-2);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .lx-cookie__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lx-cookie p a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .lx-cookie .lx-btn {
    min-height: var(--lx-touch);
    padding-inline: var(--lx-s-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-search--mobile {
    transition: none;
  }
}

@media (min-width: 768px) {
  .lx-main {
    padding-block: var(--lx-s-9) var(--lx-s-11);
  }

  .lx-header__utility,
  .lx-header__main,
  .lx-nav {
    display: block;
  }

  .lx-header__mobile-bar,
  .lx-search--mobile {
    display: none;
  }

  .lx-header__main-inner {
    min-height: 80px;
    display: grid;
    grid-template-columns: 190px minmax(280px, 1fr) auto;
    align-items: center;
    gap: var(--lx-s-6);
    transition: min-height var(--lx-dur) var(--lx-ease);
  }

  .lx-header.is-compact .lx-header__main-inner {
    min-height: 64px;
  }

  /* Tablets and landscape iPhones (gutter widened by the notch insets) cannot fit the
     190px logo + 280px search + actions; let the logo and search give way instead of
     pushing the cart past the container edge. */
  @media (max-width: 1023px) {
    .lx-header__main-inner {
      grid-template-columns: minmax(120px, 160px) minmax(160px, 1fr) auto;
      gap: var(--lx-s-4);
    }

    .lx-header__logo img {
      width: 100%;
      height: auto;
    }
  }

  .lx-header__logo {
    line-height: 1;
  }

  .lx-nav {
    border-top: var(--lx-hairline);
    background: var(--lx-paper);
  }

  .lx-nav__inner {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: var(--lx-s-2);
    overflow-x: auto;
  }

  .lx-nav .lx-nav__link {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding-inline: var(--lx-s-3);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-deep);
    font-size: var(--lx-text-small);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .lx-nav .lx-nav__link:hover,
  .lx-nav .lx-nav__link--all {
    background: var(--lx-mist);
  }

  .lx-footer__grid {
    grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, 1fr));
    padding-block: var(--lx-s-11);
  }

  /* 260px + 3 x 160px + gaps overflows the container below 1024px and clips the contact
     column; use two rows of two there. */
  @media (max-width: 1023px) {
    .lx-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .lx-footer__toggle {
    pointer-events: none;
  }

  .lx-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .lx-cookie {
    right: auto;
    left: var(--lx-gutter);
    width: min(480px, calc(100% - (var(--lx-gutter) * 2)));
  }

  .lx-home-hero {
    padding-block: var(--lx-s-11);
  }

  .lx-home-facts {
    padding-block: var(--lx-s-11);
  }

  .lx-home-facts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Product review and plugin block fragments --------------------------------
   Shared by ProductReview4 front pages/snippets and issue #29 block routes. */
.lx-review,
.lx-review__body,
.lx-review-list__items,
.lx-review-form__panel,
.lx-review-form__actions,
.lx-review-post,
.lx-rank__body,
.lx-favorites {
  display: grid;
  gap: var(--lx-s-6);
}

.lx-review {
  padding-block: var(--lx-s-8) var(--lx-s-10);
}

.lx-review__hero {
  margin-block-start: var(--lx-s-5);
}

.lx-review__product {
  display: grid;
  gap: var(--lx-s-5);
}

.lx-review__image {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--lx-s-5);
  background: var(--lx-paper);
  border-radius: var(--lx-radius-card);
}

.lx-review__image img {
  max-height: 260px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lx-review__product-copy,
.lx-review__head,
.lx-review-card,
.lx-review-card__meta,
.lx-review-complete__panel {
  display: grid;
  gap: var(--lx-s-3);
}

.lx-review__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-s-2);
  margin: 0;
}

.lx-review__summary strong {
  color: var(--lx-ink);
  font-size: var(--lx-text-price);
  line-height: 1.2;
}

.lx-review-stars {
  color: var(--lx-deep);
  font-size: var(--lx-text-body);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lx-review-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-review-list__items--compact {
  gap: var(--lx-s-4);
}

.lx-review-card {
  padding: var(--lx-card-pad);
  background: var(--lx-paper);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
}

.lx-review-card h3 {
  margin: 0;
  font-size: var(--lx-text-h4);
}

.lx-review-card__meta {
  grid-template-columns: 1fr;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
}

.lx-review-card__meta p,
.lx-review-card__comment {
  margin: 0;
}

.lx-review-card__comment {
  color: var(--lx-body);
}

.lx-review-embed {
  margin-block: var(--lx-s-8);
  padding-block: 0;
}

.lx-review-post {
  padding: var(--lx-card-pad);
}

.lx-review-post h3 {
  margin: 0;
}

.lx-review-form__panel {
  padding: var(--lx-card-pad);
}

.lx-review-form__product {
  padding: var(--lx-s-4);
  background: var(--lx-fog);
  border-radius: var(--lx-radius-card);
}

.lx-review-form__product p {
  margin: var(--lx-s-1) 0 0;
  color: var(--lx-ink);
  font-weight: 700;
}

.lx-review-form__fieldset {
  display: grid;
  gap: var(--lx-s-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lx-review-form__choices {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-review-form__choices > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-3);
}

.lx-review-form__choices input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--lx-deep);
}

.lx-review-form__choices label {
  min-height: var(--lx-touch);
  padding-block: var(--lx-s-2);
}

.lx-review-form__actions {
  justify-items: start;
}

.lx-review-confirm {
  display: grid;
  gap: var(--lx-s-3);
  margin: 0;
}

.lx-review-confirm > div {
  display: grid;
  gap: var(--lx-s-2);
  padding-block-end: var(--lx-s-3);
  border-block-end: var(--lx-hairline);
}

.lx-review-confirm dt {
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
  font-weight: 700;
}

.lx-review-confirm dd {
  margin: 0;
  color: var(--lx-body);
}

.lx-review-complete__panel {
  justify-items: start;
  padding: var(--lx-s-7);
}

.lx-mini-search {
  display: grid;
  gap: var(--lx-s-2);
}

.lx-mini-search__note {
  margin: 0;
  color: var(--lx-muted);
  font-size: var(--lx-text-small);
}

.lx-rank {
  padding: var(--lx-card-pad);
}

.lx-rank h2,
.lx-favorites h2 {
  margin: 0;
  font-size: var(--lx-text-h3);
}

.lx-rank p {
  margin: 0;
}

.lx-rank strong {
  color: var(--lx-deep);
}

.lx-rank__next {
  display: grid;
  gap: var(--lx-s-2);
  padding: var(--lx-s-4);
  background: var(--lx-paper);
  border-radius: var(--lx-radius-card);
}

.lx-favorites__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--lx-s-4);
}

.lx-favorites__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .lx-review__product,
  .lx-review__head {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: center;
  }

  .lx-review__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lx-review-card__meta {
    grid-template-columns: auto auto 1fr;
    align-items: center;
  }

  .lx-review-form__actions {
    grid-template-columns: auto auto;
  }

  .lx-review-confirm > div {
    grid-template-columns: 14em minmax(0, 1fr);
  }
}

/* ---------- Header refinement (renewal v2) ----------
   Lighter chrome: text+icon actions without pill borders, underline nav,
   one hairline search field. Later rules here override the defaults above. */

.lx-header__action,
.lx-header__cart {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lx-ink);
  font-weight: var(--lx-w-label);
  letter-spacing: 0.04em;
  transition: background-color var(--lx-dur) var(--lx-ease);
}

.lx-header__action:hover,
.lx-header__cart:hover {
  background: var(--lx-fog);
}

.lx-header__action {
  min-width: 0;
  padding: var(--lx-s-2) var(--lx-s-3);
}

.lx-header__cart-count {
  min-width: 20px;
  height: 20px;
  background: var(--lx-deep);
  color: var(--lx-paper);
  font-size: 12px;
  font-weight: 500;
}

.lx-header__cart-count:empty {
  display: none;
}

/* Mobile bar: menu | search | logo | LINE | cart — logo stays centred. */
.lx-header__mobile-bar {
  grid-template-columns: var(--lx-touch) var(--lx-touch) 1fr var(--lx-touch) var(--lx-touch);
}

.lx-header__mobile-logo {
  grid-column: 3;
  justify-self: center;
}

.lx-header__line--mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lx-touch);
  height: var(--lx-touch);
  border-radius: 10px;
  color: var(--lx-ink);
}

.lx-header__line--mobile:hover {
  background: var(--lx-fog);
}

.lx-header__line--mobile {
  flex-direction: column;
  gap: 1px;
}

.lx-header__line--mobile .lx-header__icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.lx-header__line-label {
  font-family: var(--lx-font);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.lx-footer :focus-visible {
  outline-color: var(--lx-amber);
}

/* Footer: reversed logo, quiet links, aligned headings */
.lx-footer__logo {
  padding: 0;
  background: transparent;
}

.lx-footer__logo img {
  filter: brightness(0) invert(1);
}

.lx-footer__nav a,
.lx-footer__contact a,
.lx-footer__bottom a {
  text-decoration: none;
}

.lx-footer__nav a:hover,
.lx-footer__contact a:hover,
.lx-footer__bottom a:hover {
  text-decoration: underline;
}

.lx-footer__contact h2 {
  display: flex;
  align-items: center;
  margin: 0;
}

.lx-search {
  border: 1px solid var(--lx-line);
  border-radius: 14px;
  background: var(--lx-paper);
  transition: border-color var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}

.lx-search:focus-within {
  border-color: var(--lx-deep);
  box-shadow: 0 0 0 3px rgba(14, 59, 56, 0.12);
}

.lx-search .lx-search__button {
  border-radius: 10px;
  font-weight: var(--lx-w-label);
  letter-spacing: 0.08em;
}

@media (min-width: 768px) {
  .lx-header__actions {
    gap: var(--lx-s-1);
  }

  .lx-header__main {
    padding-block: 4px;
  }

  .lx-header__main-inner {
    min-height: 68px;
  }

  .lx-nav {
    padding-block: 2px;
  }

  .lx-nav__inner {
    min-height: 44px;
  }

  .lx-nav .lx-nav__link {
    position: relative;
    padding-inline: var(--lx-s-3);
    border-radius: 0;
    color: var(--lx-body);
    font-weight: var(--lx-w-label);
    letter-spacing: 0.06em;
  }

  .lx-nav .lx-nav__link::after {
    content: "";
    position: absolute;
    right: var(--lx-s-3);
    bottom: 2px;
    left: var(--lx-s-3);
    height: 1.5px;
    background: var(--lx-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lx-dur-slow) var(--lx-ease);
  }

  .lx-nav .lx-nav__link:hover,
  .lx-nav .lx-nav__link--all {
    background: transparent;
    color: var(--lx-ink);
  }

  .lx-nav .lx-nav__link:hover::after,
  .lx-nav .lx-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .lx-nav .lx-nav__link--all {
    font-weight: 700;
  }

  /* Text edges line up with the content column. */
  .lx-nav .lx-nav__link:first-child {
    margin-left: calc(var(--lx-s-3) * -1);
  }

  .lx-header__actions {
    margin-right: calc(var(--lx-s-3) * -1);
  }

  /* Home: the hero carries the search until the header turns compact on scroll. */
  .lx-home-page .lx-header:not(.is-compact) .lx-header__main .lx-search {
    visibility: hidden;
    opacity: 0;
  }

  .lx-home-page .lx-header .lx-header__main .lx-search {
    transition: opacity var(--lx-dur-slow) var(--lx-ease);
  }
}


/* ---------- Shared v2 components (from the home page; DESIGN.md §4 v2) ----------
   lx-head (section head), lx-card / lx-card-grid (product card), lx-more (text link
   with arrow), lx-contact-card (contact card). */

.lx-head {
  margin-bottom: 28px;
}

.lx-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.lx-head--row .lx-head__title {
  white-space: nowrap;
}

.lx-head__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--lx-link);
  font-family: var(--lx-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
}

.lx-head__no {
  color: var(--lx-ink);
}

.lx-head__no::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-left: 10px;
  background: currentColor;
  vertical-align: middle;
  opacity: 0.5;
}

.lx-head--deep .lx-head__no {
  color: #fff;
}

.lx-head__title {
  margin: 0;
  color: var(--lx-ink);
  font-size: 28px;
  font-weight: var(--lx-w-display);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-wrap-style: balance;
}

.lx-head__lead {
  margin: 12px 0 0;
  color: var(--lx-muted);
  font-size: 16px;
}

.lx-head--deep .lx-head__kicker {
  color: rgba(150, 205, 196, 0.95);
}

.lx-head--deep .lx-head__title {
  color: #fff;
}

.lx-head--deep .lx-head__lead {
  color: var(--lx-on-deep);
}

.lx-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: var(--lx-touch);
  color: var(--lx-deep);
  font-size: 15px;
  font-weight: var(--lx-w-label);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.lx-more svg {
  width: 18px;
  height: 18px;
  transition: transform var(--lx-dur) var(--lx-ease);
}

.lx-more:hover svg {
  transform: translateX(4px);
}

.lx-more--back::before,
.lx-more--forward::after {
  font-family: var(--lx-font-mono);
  font-size: 14px;
  line-height: 1;
  transition: transform var(--lx-dur) var(--lx-ease);
}

.lx-more--back::before {
  content: "←";
}

.lx-more--forward::after {
  content: "→";
}

.lx-more--back:hover::before {
  transform: translateX(-4px);
}

.lx-more--forward:hover::after {
  transform: translateX(4px);
}

.lx-more--block {
  justify-content: center;
  width: 100%;
}

.lx-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  color: var(--lx-ink);
  text-decoration: none;
}

.lx-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f5f4;
}

.lx-card,
.lx-card__body {
  min-width: 0;
}

.lx-card__media img {
  position: absolute;
  inset: 0;
  width: 74%;
  height: 74%;
  margin: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--lx-ease);
}

.lx-card:hover .lx-card__media img {
  transform: scale(1.05);
}

.lx-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(1lh, auto) minmax(3lh, auto) 1fr auto;
  gap: 4px;
  flex: 1;
}

.lx-card__meta {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--lx-s-2);
  align-items: center;
  align-content: start;
  min-height: 1lh;
}

.lx-card__badges,
.lx-tile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lx-card__badge,
.lx-tile__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  background: var(--lx-mist);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.lx-card__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: baseline;
  align-content: start;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  color: var(--lx-link);
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  line-break: strict;
  text-wrap-style: pretty;
  word-break: auto-phrase;
}

.lx-card__spec-part {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lx-card__name {
  display: -webkit-box;
  grid-row: 2;
  min-height: 3lh;
  max-height: 3lh;
  align-self: start;
  overflow: hidden;
  color: var(--lx-ink);
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: var(--lx-w-label);
  line-height: 1.58;
  letter-spacing: 0;
  line-break: strict;
  text-overflow: ellipsis;
  text-wrap-style: pretty;
  word-break: auto-phrase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* A katakana word moves to the next line as a whole instead of splitting
   (メガマックスコンドー / ム). Only a word wider than the whole line breaks, inside
   its own box, with strict kinsoku (no ー or small kana at a line start). */
/* A fixed phrase that must not break inside (#157 footer, #171 home trust, cart contact). */
.lx-nowrap {
  white-space: nowrap;
}

.lx-card__kana {
  display: inline-block;
  max-width: 100%;
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* #154/#171: every product card shows the whole name, so a trailing flavour, dose
   or capacity is never clamped away; prices in a row still share one baseline. */
.lx-card-grid .lx-card__body {
  grid-template-rows: minmax(1lh, auto) auto 1fr auto;
}

.lx-card-grid .lx-card__name {
  display: block;
  min-height: 0;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: none;
}

.lx-card__range {
  margin-left: 1px;
  font-size: 14px;
}

.lx-card__price {
  grid-row: 4;
  margin-top: auto;
  color: var(--lx-ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.lx-card__pack {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-inline-end: 6px;
  padding-inline: 7px;
  border-radius: var(--lx-radius-pill);
  color: var(--lx-deep);
  background: var(--lx-mist);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.lx-card__rank {
  display: block;
  margin-block-end: 2px;
  color: var(--lx-link);
  font-size: var(--lx-text-small);
  font-weight: 500;
  line-height: var(--lx-lh-small);
  letter-spacing: 0.04em;
}


.lx-card__yen {
  margin-left: 1px;
  font-size: 14px;
}

.lx-card__tax {
  margin-left: 6px;
  color: var(--lx-muted);
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 359px) {
  .lx-card__price {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    align-items: baseline;
    line-height: 1.35;
  }

  .lx-card__pack,
  .lx-card__range,
  .lx-card__tax {
    margin: 0;
  }
}

.lx-contact-card {
  align-self: start;
  padding: 28px 24px;
  border-radius: 16px;
  background-color: var(--lx-deep);
  background-image: radial-gradient(rgba(150, 205, 196, 0.13) 1px, transparent 1.4px);
  background-size: 16px 16px;
  color: #fff;
}

.lx-contact-card__label {
  margin: 0 0 12px;
  color: rgba(150, 205, 196, 0.95);
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.lx-contact-card__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: 24px;
  font-weight: var(--lx-w-display);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.lx-contact-card__hours {
  margin: 0 0 20px;
  color: var(--lx-on-deep);
  font-size: 14px;
}

.lx-contact-card__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-contact-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: var(--lx-w-label);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background-color var(--lx-dur) var(--lx-ease), color var(--lx-dur) var(--lx-ease);
}

.lx-contact-card__btn:hover {
  background: #fff;
  color: var(--lx-deep);
}

.lx-contact-card__btn--primary {
  border-color: var(--lx-amber);
  background: var(--lx-amber);
  color: var(--lx-ink);
}

.lx-contact-card__btn--primary:hover {
  border-color: var(--lx-amber-hover);
  background: var(--lx-amber-hover);
  color: var(--lx-ink);
}

/* Shared purchase facts strip (home hero + product page). */
.lx-facts {
  display: grid;
  margin: 0;
}

.lx-facts__item {
  --lx-fact: var(--lx-link);
}

.lx-facts__item--ship {
  --lx-fact: var(--lx-coral);
}

.lx-facts__item--time {
  --lx-fact: var(--lx-sky);
}

.lx-facts__item--pack {
  --lx-fact: var(--lx-mint);
}

.lx-facts__item--pay {
  --lx-fact: var(--lx-sun);
}

.lx-facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--lx-s-1);
  color: var(--lx-link);
  font-size: var(--lx-text-small);
  font-weight: var(--lx-w-label);
  line-height: var(--lx-lh-small);
  letter-spacing: 0.08em;
}

.lx-facts--deep dt {
  color: var(--lx-fact);
}

.lx-facts__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--lx-fact);
}

.lx-facts dd {
  margin: 0;
}

.lx-facts a {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.lx-facts strong small {
  margin-left: 4px;
  font-size: var(--lx-text-small);
  font-weight: 400;
}


.ec-orderCoupon {
  display: grid;
  gap: var(--lx-s-4);
  padding: var(--lx-card-pad);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
}

.ec-orderCoupon .ec-rectHeading {
  display: grid;
  gap: var(--lx-s-2);
  margin: 0;
}

.ec-orderCoupon .ec-rectHeading h2 {
  margin: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-h3);
  font-weight: 700;
  line-height: var(--lx-lh-heading);
}

.ec-orderCoupon .column,
.ec-orderCoupon p {
  display: grid;
  gap: var(--lx-s-3);
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-body);
  line-height: var(--lx-lh-body);
}

.ec-orderCoupon .text-danger {
  color: var(--lx-error);
}

.ec-orderCoupon #coupon_button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: var(--lx-touch);
  color: var(--lx-deep);
  font-size: 15px;
  font-weight: var(--lx-w-label);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.ec-orderCoupon #coupon_button::after {
  content: "→";
  font-family: var(--lx-font-mono);
  font-size: 14px;
  line-height: 1;
  transition: transform var(--lx-dur) var(--lx-ease);
}

.ec-orderCoupon #coupon_button:hover::after {
  transform: translateX(4px);
}


/* The EC-CUBE user_data guide injects legacy inline styles after component CSS; keep the
   production guide route accessible until the cutover can drop the root user_data template. */
.nd-guide a,
.nd-guide-toc a {
  color: var(--lx-deep) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.16em !important;
}

/* Legacy guide TOC links are inline 14px text (17px tall); give them the 44px target (#259). */
.nd-guide-toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
}

.nd-guide-toc li {
  margin-bottom: 0 !important;
}

.nd-guide-section h2 {
  color: var(--lx-deep) !important;
}

.nd-guide-section p {
  color: var(--lx-body) !important;
}

.nd-guide-section#support > p {
  color: var(--lx-muted) !important;
  font-size: 14px !important;
}

.nd-guide-cta a {
  background: var(--lx-amber) !important;
  color: var(--lx-deep) !important;
}



@media (min-width: 768px) {
  .lx-head {
    margin-bottom: 44px;
  }

  .lx-head__title {
    font-size: 40px;
  }

  .lx-card-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 24px;
  }

  .lx-card__body {
    grid-template-rows: minmax(1lh, auto) minmax(3.2em, auto) 1fr auto;
  }

  .lx-card__name {
    min-height: 3.2em;
    max-height: 3.2em;
    font-size: 16px;
    -webkit-line-clamp: 2;
  }

  .lx-card__price {
    font-size: 21px;
  }

  .lx-contact-card {
    position: sticky;
    top: 160px;
    padding: 36px 32px;
  }
}

/* ---------- Category tones (v2.2) ---------- */
/* One colour per curated group (Block/_category_groups.twig) for orientation: nav dots,
   hero chips and the home category index. Values live in tokens.css. */
.lx-tone-ed { --lx-tone: var(--lx-tone-ed); --lx-tone-tint: var(--lx-tone-ed-tint); --lx-tone-bright: var(--lx-tone-ed-bright); }
.lx-tone-diet { --lx-tone: var(--lx-tone-diet); --lx-tone-tint: var(--lx-tone-diet-tint); --lx-tone-bright: var(--lx-tone-diet-bright); }
.lx-tone-hair { --lx-tone: var(--lx-tone-hair); --lx-tone-tint: var(--lx-tone-hair-tint); --lx-tone-bright: var(--lx-tone-hair-bright); }
.lx-tone-skin { --lx-tone: var(--lx-tone-skin); --lx-tone-tint: var(--lx-tone-skin-tint); --lx-tone-bright: var(--lx-tone-skin-bright); }
.lx-tone-dental { --lx-tone: var(--lx-tone-dental); --lx-tone-tint: var(--lx-tone-dental-tint); --lx-tone-bright: var(--lx-tone-dental-bright); }
.lx-tone-supple { --lx-tone: var(--lx-tone-supple); --lx-tone-tint: var(--lx-tone-supple-tint); --lx-tone-bright: var(--lx-tone-supple-bright); }

.lx-tag.lx-tone {
  background: var(--lx-tone-tint);
  color: var(--lx-tone);
  text-decoration: none;
}

.lx-tag.lx-tone::before {
  background: var(--lx-tone);
}

/* header nav: a small tone dot before each category; on PC the hover underline takes the tone */
.lx-nav .lx-nav__link[class*="lx-tone-"]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--lx-tone);
}

.lx-nav .lx-nav__link[class*="lx-tone-"]::after {
  background: var(--lx-tone);
}

/* PayPayRelay renders namespaced plugin templates, so the renewal theme can
   only bring those payment pages into v2 through the shared frame stylesheet. */
#page_paypay_instruction .ec-off1Grid__cell > div,
#page_paypay_complete .ec-off1Grid__cell > div {
  max-width: 760px !important;
  margin: var(--lx-s-7) auto !important;
  padding: var(--lx-card-pad) !important;
  border: var(--lx-hairline) !important;
  border-radius: var(--lx-radius-panel) !important;
  background: var(--lx-paper) !important;
  box-shadow: none !important;
  color: var(--lx-body) !important;
  font-family: var(--lx-font) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div [style],
#page_paypay_complete .ec-off1Grid__cell > div [style] {
  box-shadow: none !important;
  font-family: var(--lx-font) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div h1,
#page_paypay_complete .ec-off1Grid__cell > div h1 {
  color: var(--lx-ink) !important;
  font-size: var(--lx-text-h2) !important;
  font-weight: 500 !important;
  line-height: var(--lx-lh-heading) !important;
  letter-spacing: var(--lx-track-heading) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div p,
#page_paypay_instruction .ec-off1Grid__cell > div li,
#page_paypay_complete .ec-off1Grid__cell > div p,
#page_paypay_complete .ec-off1Grid__cell > div li {
  color: var(--lx-body) !important;
  font-size: var(--lx-text-body) !important;
  line-height: var(--lx-lh-body) !important;
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

#page_paypay_instruction .ec-off1Grid__cell > div > div:first-child > div:first-child,
#page_paypay_complete .ec-off1Grid__cell > div span[style*="background: #FF0033"] {
  border: 1.5px solid var(--lx-deep) !important;
  background: var(--lx-paper) !important;
  color: var(--lx-deep) !important;
  font-size: var(--lx-text-small) !important;
  font-weight: var(--lx-w-label) !important;
  letter-spacing: 0.08em !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div > div:nth-child(3),
#page_paypay_complete .ec-off1Grid__cell > div > div:nth-child(4) {
  border: 1.5px solid var(--lx-deep) !important;
  background: var(--lx-fog) !important;
  animation: none !important;
}

#page_paypay_instruction #js-amount,
#page_paypay_complete .ec-off1Grid__cell > div span[style*="font-size: 20px"] {
  color: var(--lx-ink) !important;
  font-size: var(--lx-text-price-lg) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div button,
#page_paypay_instruction .ec-off1Grid__cell > div a[style],
#page_paypay_complete .ec-off1Grid__cell > div a[style] {
  min-height: var(--lx-touch) !important;
  border: 1.5px solid var(--lx-deep) !important;
  border-radius: var(--lx-radius-pill) !important;
  background: var(--lx-paper) !important;
  color: var(--lx-deep) !important;
  font-size: var(--lx-text-small) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div a[style*="background: #FF0033"],
#page_paypay_complete .ec-off1Grid__cell > div a[style*="background: #1a1a1a"] {
  border-color: var(--lx-amber) !important;
  background: var(--lx-amber) !important;
  color: var(--lx-deep) !important;
}

#page_paypay_instruction #js-payment-status,
#page_paypay_complete .ec-off1Grid__cell > div > div:nth-last-child(3) {
  border: var(--lx-hairline) !important;
  background: var(--lx-fog) !important;
  color: var(--lx-deep) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div > div[style*="fff5f5"] {
  border: 1.5px solid var(--lx-error) !important;
  background: var(--lx-error-wash) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div > div[style*="f7f7f7"],
#page_paypay_complete .ec-off1Grid__cell > div > div[style*="f8f9fa"],
#page_paypay_complete .ec-off1Grid__cell > div > div[style*="f0f8f0"] {
  border: var(--lx-hairline) !important;
  border-radius: var(--lx-radius-card) !important;
  background: var(--lx-fog) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div div[style*="background: #4CAF50"],
#page_paypay_instruction .ec-off1Grid__cell > div div[style*="background: #FF0033"],
#page_paypay_complete .ec-off1Grid__cell > div div[style*="background: #4CAF50"] {
  background: var(--lx-deep) !important;
  color: var(--lx-paper) !important;
}

#page_paypay_instruction .ec-off1Grid__cell > div div[style*="background: #ddd"],
#page_paypay_instruction .ec-off1Grid__cell > div div[style*="background: #e0e0e0"] {
  background: var(--lx-line) !important;
  color: var(--lx-muted) !important;
}

/* ---------- v3 award pass: product stage, page transitions, cart flight (2026-10-05) ---------- */
/* Supplier photos differ in background and light. Every product now stands on the same studio
   sweep with a soft contact shadow; white photo backgrounds melt into it (multiply). */
.lx-card__media,
.lx-pdp__image {
  isolation: isolate;
  background: radial-gradient(120% 85% at 50% 30%, #ffffff 0%, #f4f7f6 52%, #e5edeb 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 59, 56, 0.05);
}

.lx-card__media::after,
.lx-pdp__image::after {
  content: "";
  position: absolute;
  right: 25%;
  bottom: 10%;
  left: 25%;
  z-index: -1;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7, 26, 51, 0.24), rgba(7, 26, 51, 0));
  transition: transform 0.6s var(--lx-ease), opacity 0.6s var(--lx-ease);
}

.lx-pdp__image {
  position: relative;
}

.lx-card__media img {
  transform: translateY(-3%);
}

/* the product lifts off its shadow on hover (pointer devices only) */
@media (hover: hover) {
  .lx-card {
    transition: transform 0.5s var(--lx-ease);
  }

  .lx-card:hover {
    transform: translateY(-4px);
  }

  .lx-card:hover .lx-card__media img {
    transform: translateY(-7%) scale(1.05);
  }

  .lx-card:hover .lx-card__media::after {
    transform: scaleX(1.15);
    opacity: 0.7;
  }
}

/* Cross-document page transitions are Chromium-only for this shop; Safari/WebKit
   and Firefox must keep normal navigation instead of receiving partial effects. */
@supports (-webkit-app-region: inherit) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: var(--lx-ease);
  }

  ::view-transition-group(lx-product) {
    animation-duration: 0.5s;
    animation-timing-function: var(--lx-ease);
  }
}

/* Cart flight: a small kraft parcel flies from the add-to-cart button to the cart icon. */
.lx-parcel-flight {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 18px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(90deg, #cf9f66 0 42%, #a97b45 42% 58%, #cf9f66 58%);
  box-shadow: 0 6px 14px rgba(7, 26, 51, 0.25);
  pointer-events: none;
}

.lx-cart-bump {
  animation: lx-cart-bump 0.45s var(--lx-ease);
}

@keyframes lx-cart-bump {
  30% { transform: scale(1.22); }
  60% { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .lx-card,
  .lx-card__media img,
  .lx-card__media::after {
    transition: none;
  }
}


/* ---------- v3 award pass phase 3b: photos shot on a grey backdrop (2026-10-05) ----------
   lx.js marks them .is-boxed and passes the drawn size; the edges fade into the lit stage
   instead of showing a box. White-backdrop photos (about 94 %) are untouched. */
.lx-card__media img.is-boxed,
.lx-pdp__image img.is-boxed {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: var(--lx-photo-w, 100%) var(--lx-photo-h, 100%);
  mask-size: var(--lx-photo-w, 100%) var(--lx-photo-h, 100%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Print (#263): customers print or save order and payment pages. Paper keeps
   only the page content: no site chrome, floating controls or toasts. */
@media print {
  @page {
    margin: 12mm;
  }

  .lx-skip,
  .skip-link,
  .lx-maintenance,
  .lx-header,
  .lx-sheet,
  .lx-breadcrumb-slot,
  .lx-footer,
  .lx-cookie,
  .lx-buybar,
  .ec-blockTopBtn,
  .lx-parcel-flight {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
  }

  /* Screen spacing would push a blank last page. */
  body,
  .lx-layout {
    min-height: 0;
  }

  .lx-main {
    padding-block: 0;
  }
}