/* =============================================================================
   Responsive — subpages + top page (home-page)
   - PC layout stays in `styles.css` (do not edit from here).
   - All `@media` rules live here.
   Pages: index (home-page) | guide-flow | guide-design-tool | guide-data-submission | guide-print-method
   + site footer (all pages)
   + hamburger / menu drawer (≤480px, all pages)
   Breakpoints (max-width): 1440px → 1180px → 1024px → 768px → 480px
   TOP FV PC scale: 769px–1919px (1920 design lock in styles.css)
   TOP sec2 PC scale: 769px+ (1920 design lock)
   TOP sec3 PC scale: 769px+ (1920 design lock, 1440px inner)
   TOP sec4 PC scale: 769px+ (1920 design lock)
   TOP sec5 PC scale: 769px+ (1920 design lock, 1440px hero)
   TOP sec6 PC scale: 769px+ (1920 lock); 769–1024 type/pill lock at 1024 scale
   TOP sec7 PC scale: 769px+ (1920 design lock, 1440px grid)
   TOP sec8 PC scale: 769px+ (1920 design lock, 1200px inner)
   TOP sec9 PC scale: 769px+ (1920 design lock, 1320px inner)
   TOP sec9 contact: 320–768 (768px mobile lock; enlarged hero + scaled type)
   TOP sec9 staff aside: 320–768 (768px size lock; no card overlap)
   Site footer PC scale: 769px+ (1920 design lock, 1440px inner)
   Site footer type lock: 769px–1920 (font-size fixed at 1920; layout scales)
   PDP PC scale: 426px–1919 (1920 design lock, s = 100vw / 1920)
   PDP type lock: 426px–1919 (body font-size fixed at 1920; hero title scales)
   Header brand logo lock: 1440px size from 426–1440 (PDP) / 769–1440 (home)
   PDP sec9: 426–768 contact padding + stacked ship-aside (staff 1440 lock; margins scale)
   PDP mobile scale: ≤425 (425px design lock, final cascade at file end)
   PLP / PDP header contacts hidden: ≤1440 (phone, mail, LINE)
   ============================================================================= */

/* =============================================================================
   Top page — FV (mobile mockup)
   ============================================================================= */
@media (max-width: 1024px) {
  .home-page .sec3-inner {
    width: calc(100% - 32px);
  }

  .home-page .sec3-deco {
    top: -42%;
    width: 30vw;
  }

  .home-page .sec3-title {
    left: 50%;
    width: 56vw;
  }

  .home-page .sec3-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px 14px;
    margin-top: -18px;
  }

  .home-page .sec4-kicker {
    left: 10%;
    width: 32vw;
  }

  .home-page .sec4-title {
    width: 78vw;
  }

  .home-page .sec4-list {
    --sec4-gap: 14px;
    --sec4-col: calc((100vw - 16px - 3 * var(--sec4-gap)) / 4);
  }

  .home-page .sec5 {
    padding-bottom: 120px;
  }

  .home-page .sec5-body {
    padding: 0 32px;
  }

  .home-page .sec5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .sec6-overlap {
    margin-top: -172px;
  }

  .home-page .sec6-overlap__copy {
    left: 8%;
    max-width: 54%;
  }

  .home-page .sec6-grid {
    gap: 16px 48px;
  }

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

  .home-page .sec8-store {
    margin-top: -120px;
  }

  .home-page .sec8-store__cols {
    grid-template-columns: 1fr 38%;
  }
}

@media (max-width: 768px) {
  .home-page .fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    padding: 10px 0 10px 12px;
    pointer-events: none;
  }

  .home-page .fv-header a,
  .home-page .fv-header button {
    pointer-events: auto;
  }

  .home-page .fv-logo {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    pointer-events: auto;
  }

  .home-page .fv-logo img {
    width: 52vw;
    height: auto;
  }

  .home-page .fv-header__right {
    position: static;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .home-page .fv-header__actions {
    align-items: center;
    --fv-sp-icon: 34px;
    --fv-sp-icon-gap: 10px;
    gap: var(--fv-sp-icon-gap);
  }

  .home-page .fv-header__main {
    display: none;
  }

  .home-page .fv-header__compact {
    display: flex;
    align-items: center;
    gap: var(--fv-sp-icon-gap);
    margin: 0;
    padding: 0;
    height: auto;
    filter: none;
  }

  .home-page .fv-compact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  .home-page .fv-compact-action span {
    display: none;
  }

  .home-page .fv-compact-action img {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  .home-page .fv-compact-action--phone {
    color: #111;
  }

  .home-page .fv-compact-action--mail {
    color: #d8001a;
  }

  .home-page .fv-compact-action--line {
    color: #06c755;
  }

  .home-page .fv-header .menu-btn {
    width: var(--fv-sp-icon, 34px);
    height: var(--fv-sp-icon, 34px);
    gap: 6px;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  .home-page .fv-header .menu-btn span {
    width: 100%;
    height: 3px;
    margin: 0;
    background: #f15a24;
  }

  .home-page .fv-header .menu-btn:hover span {
    width: 100%;
  }

  .home-page .fv-header__left {
    display: contents;
  }

  .home-page .fv-header__brand {
    display: none;
  }

  .home-page .fv {
    --fv-mobile-header-clear: 100px;
    --fv-shirts-pad: 16px;
    --fv-shirts-available-h: calc(100svh - var(--fv-mobile-header-clear) - var(--fv-shirts-pad) * 2);
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: visible;
    margin-bottom: 0;
  }

  .home-page .shirts-layer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    padding-top: calc(var(--fv-mobile-header-clear) + var(--fv-shirts-pad));
    padding-bottom: var(--fv-shirts-pad);
    inset: 0;
    height: 100%;
    --shirt-gap: 10px;
    --shirt-col: calc((var(--fv-shirts-available-h) - 2 * var(--shirt-gap)) / 3);
    --marquee-duration: 44s;
  }

  .home-page .marquee {
    flex: 0 0 auto;
    margin: 0;
    min-height: 0;
    display: flex;
    align-items: center;
  }

  .home-page .shirt-card {
    border-radius: 10px;
    padding: 12px;
  }

  .home-page .fv-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .home-page .fv-foreground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: fit-content;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 12;
    pointer-events: none;
  }

  .home-page .fv-maincopy-wrap {
    position: relative;
    flex: 0 0 auto;
    z-index: 13;
    display: flex;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    margin: 0;
    transform: none;
    left: auto;
    top: auto;
  }

  .home-page .fv-maincopy {
    display: block;
    width: 96%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    position: static;
    transform: none;
  }

  /* Height follows people image; phone layers on top (absolute) */
  .home-page .fv-foreground__figures {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    height: fit-content;
    overflow: visible;
    pointer-events: none;
  }

  .home-page .fv-people {
    position: relative;
    display: block;
    z-index: 14;
    margin-left: 2%;
    width: 72%;
    max-width: none;
    height: auto;
    transform: none;
  }

  .home-page .fv-mobilephone {
    position: absolute;
    z-index: 24;
    right: -9%;
    bottom: 0;
    top: auto;
    width: 74%;
    max-width: none;
    height: auto;
    transform: translateY(24%);
  }

  .home-page .sec2 {
    margin-top: 0;
    overflow: visible;
  }

  .home-page .sec2-inner {
    display: block;
    position: relative;
    height: auto;
    min-height: 330px;
    padding: 0;
    overflow: visible;
  }

  .home-page .sec2-col--left,
  .home-page .sec2-col--right {
    display: block;
  }

  .home-page .sec2-maincopy-wrap {
    position: absolute;
    z-index: 20;
    left: 4%;
    top: 40px;
    display: block;
    width: 64vw;
  }

  .home-page .sec2-choicecopy-wrap {
    position: absolute;
    z-index: 8;
    left: 6%;
    top: 226px;
    display: block;
    width: 48vw;
  }

  .home-page .sec2-col--right {
    position: absolute;
    z-index: 3;
    inset: 0;
    min-height: 0;
  }

  .home-page .sec2-maincopy-wrap .sec2-maincopy,
  .home-page .sec2-choicecopy-wrap .sec2-choicecopy {
    display: block;
    width: 100%;
    height: auto;
  }

  .home-page .sec2-maincopy {
    position: static;
    left: auto;
    top: auto;
    max-width: none;
  }

  .home-page .sec2-choicecopy {
    position: static;
    left: auto;
    bottom: auto;
    margin: 0;
    max-width: none;
  }

  .home-page .sec2-shirts {
    position: absolute;
    z-index: 3;
    top: 64px;
    right: -3%;
    left: auto;
    transform: none;
    width: 50vw;
    height: auto;
  }

  .home-page .sec2-people {
    position: absolute;
    z-index: 5;
    top: 56px;
    right: -3%;
    left: auto;
    bottom: auto;
    width: 43vw;
    height: auto;
  }

  .home-page .sec2-computer-wrap {
    position: absolute;
    z-index: 6;
    top: 198px;
    right: 1%;
    bottom: auto;
    width: 42vw;
    display: block;
  }

  .home-page .sec2-computer-wrap .sec2-computer {
    display: block;
    width: 100%;
    height: auto;
  }

  .home-page .sec2-computer {
    position: static;
    max-width: none;
  }

  .home-page .sec2-badge {
    display: block;
    position: absolute;
    top: 142px;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 22vw;
    height: auto;
    z-index: 12;
    pointer-events: none;
  }

  .home-page .sec2-middle-confetti {
    display: none;
  }

  .home-page .sec2-products-marquee {
    margin-top: 8px;
  }

  .home-page .sec2-products {
    --sec2-card-gap: 10px;
    --sec2-card-pad: 12px;
    --sec2-card-width: calc((100vw - var(--sec2-card-pad) * 2 - var(--sec2-card-gap)) * 0.46);
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--sec2-card-gap);
    width: max-content;
    padding: 0 var(--sec2-card-pad) 84px;
  }

  .home-page .sec2-products .product-card {
    flex: 0 0 var(--sec2-card-width);
    width: var(--sec2-card-width);
    min-width: var(--sec2-card-width);
    max-width: var(--sec2-card-width);
    box-sizing: border-box;
  }

  .home-page .sec3 {
    margin-top: -24px;
    padding: 24px 0 60px;
    overflow: visible;
  }

  .home-page .sec3-inner {
    width: calc(100% - 24px);
    padding-bottom: 0;
  }

  .home-page .sec3-top {
    position: relative;
    min-height: 88px;
    margin-bottom: 4px;
  }

  .home-page .sec3-deco {
    left: -56px;
    top: -108px;
    width: 50vw;
  }

  .home-page .sec3-title {
    position: absolute;
    z-index: 4;
    right: -4px;
    left: auto;
    top: -60px;
    width: 66vw;
    margin: 0;
    transform: none;
  }

  .home-page .sec3-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
    margin-top: -18px;
  }

  .home-page .sec3-card__link {
    width: 100%;
    min-height: 34px;
    margin-top: 8px;
    padding: 9px 22px 9px 12px;
    font-size: 12px;
    font-weight: normal;
  }

  .home-page .sec3-card__link::after {
    right: 10px;
  }

  .home-page .sec4 {
    margin-top: 0;
    overflow: visible;
  }

  .home-page .sec4-inner {
    padding: 0 0 34px;
  }

  .home-page .sec4-kicker {
    position: absolute;
    left: 12px;
    top: -18px;
    width: 44vw;
    margin: 0;
  }

  .home-page .sec4-title {
    position: relative;
    top: 16px;
    display: block;
    width: 96vw;
    max-width: 100%;
    margin: 0 auto 34px;
  }

  .home-page .sec4-list {
    --sec4-gap: 10px;
    --sec4-col: calc((100vw - 20px - var(--sec4-gap)) / 2.25);
    padding: 0 10px;
  }

  .home-page .sec4-card__link {
    width: 88%;
    min-height: 34px;
    margin-top: -18px;
    padding: 10px 20px 10px 12px;
    font-size: 12px;
  }

  .home-page .sec4-bottom-confetti {
    left: 50%;
    width: 70%;
    margin-top: -12px;
    padding-bottom: 38px;
  }

  .home-page .sec5 {
    overflow: visible;
    padding: 0 0 96px;
  }

  .home-page .sec5-hero-wrap {
    width: 100%;
  }

  .home-page .sec5-body {
    padding: 0 12px;
  }

  .home-page .sec5-hero {
    min-height: 184px;
    overflow: visible;
  }

  .home-page .sec5-people {
    left: -13%;
    bottom: -118px;
    width: 60vw;
    transform: none;
    z-index: 3;
  }

  .home-page .sec5-maincopy {
    position: absolute;
    left: 22%;
    top: -28px;
    width: 71vw;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 4;
  }

  .home-page .sec5-badge {
    display: block;
    position: absolute;
    z-index: 5;
    top: -64px;
    right: 1%;
    width: 29vw;
    height: auto;
    pointer-events: none;
  }

  .home-page .sec5-intro {
    max-width: none;
    margin: -28px auto 34px;
    padding: 22px 18px;
    border-radius: 12px;
  }

  .home-page .sec5-intro__lead {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.55;
  }

  .home-page .sec5-intro__body {
    font-size: 14px;
    line-height: 1.7;
  }

  .home-page .sec5-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-page .sec5-card {
    min-height: 126px;
    gap: 12px;
    padding: 14px 16px 4px 12px;
    border-radius: 16px;
  }

  .home-page .sec5-card::before {
    top: -12px;
    left: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    box-shadow: 3px 3px 0 0 #000;
  }

  .home-page .sec5-card__media {
    flex: 0 0 40%;
    border-radius: 14px 0 0 14px;
  }

  .home-page .sec5-card__media img {
    max-height: 140px;
  }

  .home-page .sec5-card__text {
    padding: 10px 0 12px;
    font-size: 13px;
    line-height: 1.55;
  }

  .home-page .sec5-cta {
    margin: 32px auto 0;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: normal;
  }

  .home-page .sec6 {
    overflow: visible;
    padding: 48px 0 130px;
  }

  .home-page .sec6::before {
    top: -16px;
    height: 16px;
    background-size: 84px 18px;
  }

  .home-page .sec6-overlap {
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    margin: -104px 0 0;
    padding: 0 24px;
  }

  .home-page .sec6-overlap__copy {
    left: auto;
    max-width: 72%;
    transform: translateY(-24px);
  }

  .home-page .sec6-kicker-img {
    width: 42vw;
    margin-bottom: 4px;
  }

  .home-page .sec6-title-img {
    width: 76vw;
  }

  .home-page .sec6-people {
    left: auto;
    right: -6px;
    bottom: calc(12px * var(--sec67-m-s));
    width: 48vw;
    transform: none;
  }

  .home-page .sec6-panel {
    width: calc(100% - 48px);
    margin-top: -12px;
    padding: 18px 14px;
    border-width: 3px;
  }

  .home-page .sec6-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-page .sec6-copy {
    margin: 6px 0 2px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: normal;
  }

  .home-page .sec7 {
    margin-top: 0;
    padding: 0 0 64px;
    overflow: visible;
  }

  .home-page .sec7-head {
    margin: -42px auto 18px;
    padding: 0 24px;
    text-align: left;
  }

  .home-page .sec7-title-img {
    position: relative;
    top: -40px;
    width: 86vw;
  }

  .home-page .sec7-marquee {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }

  .home-page .sec7-track {
    --sec7-loop-translate: -50%;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    animation: sec7-staff-left 34s linear infinite;
  }

  .home-page .sec7-grid {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    margin: 0;
    gap: 32px;
    padding: 0 24px;
  }

  .home-page .sec7-grid[data-loop-clone="true"] {
    display: flex;
  }

  .home-page .sec7-card {
    flex: 0 0 64vw;
  }

  .home-page .sec7-card__name {
    margin: 10px 0 5px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 21px;
  }

  .home-page .sec7-card__role {
    display: inline;
    margin-left: 8px;
    font-size: 16px;
    font-weight: normal;
  }

  .home-page .sec7-card__text {
    font-size: 13px;
    line-height: 1.55;
    font-weight: normal;
  }

  @keyframes sec7-staff-left {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(var(--sec7-loop-translate), 0, 0);
    }
  }

  .home-page .sec8 {
    margin-top: 0;
  }

  .home-page .sec8-wave__svg {
    height: 32px;
  }

  .home-page .sec8-inner {
    padding: 10px 16px 72px;
  }

  .home-page .sec8-store {
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0 auto 36px;
    padding: 40px 28px 52px;
    border-radius: 24px;
    overflow: hidden;
  }

  .home-page .sec8-store__title-picture {
    order: 1;
    position: relative;
    z-index: 4;
    width: 51vw;
    margin: 0 0 -10px;
  }

  .home-page .sec8-store__title-img {
    width: 100%;
    margin: 0;
  }

  .home-page .sec8-store__cols {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .home-page .sec8-store__intro {
    display: contents;
  }

  .home-page .sec8-store__figures {
    order: 2;
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: -4px;
  }

  .home-page .sec8-dl {
    order: 3;
    margin-top: 34px;
  }

  .home-page .sec8-dl__row {
    grid-template-columns: 6.2em 1fr;
    gap: 0 14px;
    padding: 6px 0;
    font-size: 18px;
    line-height: 1.6;
  }

  .home-page .sec8-dl dt {
    white-space: nowrap;
  }

  .home-page .sec8-dl dd {
    margin: 0;
    color: #1A1A1A;
    font-weight: normal;
    line-height: 1.7;
  }

  .home-page .sec8-collage {
    width: 100%;
    max-width: none;
    min-height: 252px;
    margin: 0;
  }

  .home-page .sec8-collage__building {
    position: absolute;
    left: 0;
    top: 60px;
    width: 58vw;
    margin: 0;
  }

  .home-page .sec8-collage__work {
    right: 0;
    bottom: -24px;
    width: 45vw;
  }

  .home-page .sec8-collage__woman {
    right: -7%;
    top: -100px;
    width: 38vw;
  }

  .home-page .sec8-btn {
    width: 100%;
    margin-top: 28px;
    padding: 18px 18px;
    font-size: 15px;
    font-weight: normal;
  }

  .home-page .sec8-faq__head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .home-page .sec8-faq__title-img {
    max-width: 58vw;
    margin: 0 auto;
  }

  .home-page .sec8-details {
    border-radius: 12px;
  }

  .home-page .sec8-summary {
    align-items: flex-start;
    padding: 13px 14px;
    font-size: 13px;
    font-weight: normal;
  }

  .home-page .sec8-details__body {
    padding: 13px 14px 16px;
    font-size: 13px;
  }

  :is(.home-page, .product-detail-page) .sec9, .product-detail-page .sec9 {
    overflow: visible;
    padding: 64px 16px 0;
  }

  :is(.home-page, .product-detail-page) .sec9 {
    --sec9-m-s: calc((100vw - 32px) / 768px);
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);
    --sec9-aside-w: var(--sec9-aside-lock-w);
  }

  :is(.home-page, .product-detail-page) .sec9-inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact {
    margin-bottom: calc(28px * var(--sec9-m-s));
    padding-top: 0;
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__hero,
  :is(.home-page, .product-detail-page) .sec9-contact__woman-wrap {
    display: contents;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__woman {
    position: absolute;
    left: calc(-140px * var(--sec9-m-s));
    top: calc(-240px * var(--sec9-m-s));
    bottom: auto;
    width: calc(469px * var(--sec9-m-s));
    height: auto;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact picture {
    display: block;
    position: absolute;
    left: calc(101px * var(--sec9-m-s));
    top: calc(-76px * var(--sec9-m-s));
    bottom: auto;
    width: calc(100% - 274px * var(--sec9-m-s));
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 3;
    pointer-events: none;
    flex: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__title {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
    transform: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__panel {
    z-index: 1;
    border-radius: calc(18px * var(--sec9-m-s));
    padding: calc(108px * var(--sec9-m-s)) calc(24px * var(--sec9-m-s)) calc(22px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-contact__main {
    padding-top: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: calc(4px * var(--sec9-m-s));
    width: 82%;
    margin-bottom: calc(20px * var(--sec9-m-s));
    margin-left: auto;
    margin-right: auto;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets {
    display: contents;
    padding-left: 0;
    list-style: none;
    font-size: max(calc(15px * var(--sec9-m-s)), 13px);
    line-height: 1.65;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets li {
    position: relative;
    padding-left: 1em;
    margin-bottom: calc(8px * var(--sec9-m-s));
    font-size: max(calc(15px * var(--sec9-m-s)), 13px);
  }

  :is(.home-page, .product-detail-page) .sec9-bullets li::before {
    content: "・";
    position: absolute;
    left: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets:first-child li:nth-child(1) {
    order: 1;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets:nth-child(2) li:nth-child(1) {
    order: 2;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets:first-child li:nth-child(2) {
    order: 3;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets:nth-child(2) li:nth-child(2) {
    order: 4;
  }

  :is(.home-page, .product-detail-page) .sec9-bullets:first-child li:nth-child(3) {
    order: 5;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__actions {
    grid-template-columns: 1fr;
    gap: calc(10px * var(--sec9-m-s));
    width: 100%;
  }

  :is(.home-page, .product-detail-page) .sec9-action {
    min-height: calc(72px * var(--sec9-m-s));
    padding: calc(14px * var(--sec9-m-s)) calc(12px * var(--sec9-m-s));
    border-radius: calc(12px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__main {
    font-size: max(calc(26px * var(--sec9-m-s)), 22px);
  }

  :is(.home-page, .product-detail-page) .sec9-action__sub {
    font-size: max(calc(12px * var(--sec9-m-s)), 11px);
  }

  :is(.home-page, .product-detail-page) .sec9-action__label {
    font-size: max(calc(22px * var(--sec9-m-s)), 18px);
  }

  :is(.home-page, .product-detail-page) .sec9-sub,
  .product-detail-page .sec9-sub {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .product-detail-page .sec9-wave__svg {
    height: 40px;
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    position: relative;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 12px 0 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    position: relative;
    top: auto;
    right: 0;
    left: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }

  :is(.home-page, .product-detail-page) .sec9-card {
    width: 100%;
    max-width: 444px;
    margin: 0 auto;
    padding-bottom: 26px;
    border-radius: 18px;
    overflow: hidden;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 64px;
    padding: 10px 28px;
    border-radius: 18px 18px 0 0;
    gap: 8px;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-main {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-pill {
    flex: 0 0 auto;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list {
    width: auto;
    margin: 26px 28px 0;
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list li {
    gap: 16px;
    margin-bottom: 10px;
    font-size: 16px;
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list li::before {
    flex-basis: 32px;
    height: 32px;
    line-height: 32px;
  }

  :is(.home-page, .product-detail-page) .sec9-card__logos {
    display: block;
    width: auto;
    max-width: calc(100% - 56px);
    height: auto;
    margin: 20px 28px 28px;
  }

  :is(.home-page, .product-detail-page) .sec9-card--ship .sec9-card__body {
    margin: 26px 28px 0;
    width: auto;
  }

  :is(.home-page, .product-detail-page) .sec9-ship__lead {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.45;
  }

  :is(.home-page, .product-detail-page) .sec9-ship__note {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.45;
  }

  :is(.home-page, .product-detail-page) .sec9-ship__ems {
    margin-bottom: 28px;
    font-size: 17px;
    line-height: 1.45;
  }

  :is(.home-page, .product-detail-page) .sec9-card__btn {
    width: 76%;
    max-width: calc(100% - 56px);
    padding: 13px 18px;
    font-size: 14px;
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-card .sec9-card__btn {
    margin-top: auto;
  }
}

@media (max-width: 480px) {
  .home-page .fv {
    --fv-shirts-pad: 12px;
  }

  .home-page .shirts-layer {
    --shirt-gap: 14px;
    --marquee-duration: 40s;
  }

  .home-page .fv-foreground {
    gap: 8px;
  }

  .home-page .fv-maincopy {
    width: min(98%, 400px);
  }

  .home-page .fv-people {
    width: 70%;
    margin-left: 2%;
  }

  .home-page .fv-mobilephone {
    width: 74%;
    right: -9%;
    transform: translateY(24%);
  }

  .home-page .sec2 {
    --sec2-480-s: calc(100vw / 480px);
  }

  .home-page .sec2-inner {
    min-height: calc(316px * var(--sec2-480-s));
    padding: 0;
  }

  .home-page .sec2-maincopy-wrap {
    left: 3%;
    top: calc(73px * var(--sec2-480-s));
    width: calc(270px * var(--sec2-480-s));
  }

  .home-page .sec2-choicecopy-wrap {
    left: 6%;
    top: calc(228px * var(--sec2-480-s));
    width: calc(220px * var(--sec2-480-s));
  }

  .home-page .sec2-shirts {
    top: calc(70px * var(--sec2-480-s));
    right: -4%;
    width: calc(240px * var(--sec2-480-s));
  }

  .home-page .sec2-people {
    top: calc(56px * var(--sec2-480-s));
    right: -3%;
    width: calc(190px * var(--sec2-480-s));
  }

  .home-page .sec2-computer-wrap {
    top: calc(202px * var(--sec2-480-s));
    right: 3%;
    bottom: auto;
    width: calc(190px * var(--sec2-480-s));
  }

  .home-page .sec2-badge {
    width: calc(64px * var(--sec2-480-s));
    top: calc(146px * var(--sec2-480-s));
    left: 50%;
    z-index: 12;
  }

  .home-page .sec2-products {
    --sec2-card-gap: calc(8px * var(--sec2-480-s));
    --sec2-card-pad: calc(10px * var(--sec2-480-s));
    --sec2-card-width: calc((100vw - var(--sec2-card-pad) * 2 - var(--sec2-card-gap)) * 0.48);
    padding-bottom: calc(78px * var(--sec2-480-s));
  }

  .home-page .sec3-inner {
    width: calc(100% - 20px);
  }

  .home-page .sec3 {
    padding-bottom: 56px;
  }

  .home-page .sec3-top {
    min-height: 48px;
  }

  .home-page .sec3-deco {
    left: -52px;
    top: -104px;
    width: 54vw;
  }

  .home-page .sec3-title {
    right: -6px;
    top: -58px;
    width: 65vw;
  }

  .home-page .sec3-grid {
    gap: 18px 10px;
    margin-top: -16px;
  }

  .home-page .sec3-card__link {
    min-height: 32px;
    padding: 8px 20px 8px 10px;
    font-size: 11px;
  }

  .home-page .sec4-inner {
    padding: 0 0 28px;
  }

  .home-page .sec4-kicker {
    left: 10px;
    top: -18px;
    width: min(46vw, 180px);
  }

  .home-page .sec4-title {
    width: 96vw;
    max-width: 100%;
    top: -16px;
    margin: 0 auto;
  }

  .home-page .sec4-list {
    --sec4-col: calc((100vw - 20px - var(--sec4-gap)) / 2.08);
  }

  .home-page .sec4-card__link {
    width: 92%;
    min-height: 32px;
    font-size: 11px;
    font-weight: normal;
  }

  .home-page .sec5 {
    padding-top: 0;
    padding-bottom: 60px;
  }

  .home-page .sec5-hero {
    min-height: clamp(164px, 42vw, 188px);
  }

  .home-page .sec5-people {
    left: -16%;
    bottom: -128px;
    width: min(66vw, 260px);
  }

  .home-page .sec5-maincopy {
    left: 23%;
    top: clamp(-34px, -7vw, -24px);
    width: min(73vw, 310px);
  }

  .home-page .sec5-badge {
    right: -3%;
    top: clamp(-66px, -15vw, -52px);
    width: min(28vw, 112px);
  }

  .home-page .sec5-intro {
    padding: 18px 14px;
    border-radius: 10px;
  }

  .home-page .sec5-intro__lead {
    font-size: 15px;
  }

  .home-page .sec5-intro__body {
    font-size: 13px;
  }

  .home-page .sec5-card {
    gap: 10px;
    padding: 16px 12px 4px;
  }

  .home-page .sec5-card__media {
    flex-basis: 38%;
  }

  .home-page .sec5-card__text {
    font-size: 13px;
    font-weight: normal;
  }

  .home-page .sec6-overlap {
    min-height: 128px;
    margin: -86px 0 0;
  }

  .home-page .sec6-title-img {
    width: min(78vw, 300px);
  }

  .home-page .sec6-panel {
    width: calc(100% - 48px);
    padding: 16px 12px;
  }

  .home-page .sec7 {
    padding-bottom: 56px;
  }

  .home-page .sec7 {
    padding-bottom: 36px;
  }

  .home-page .sec7-head {
    margin: -20px auto 18px;
  }

  .home-page .sec7-grid {
    gap: 28px;
    padding: 0 20px;
  }

  .home-page .sec7-card {
    flex-basis: min(66vw, 248px);
  }

  .home-page .sec8-inner {
    padding: 8px 12px 72px;
  }

  .home-page .sec8-store {
    width: calc(100% - 24px);
    padding: 34px 28px 44px;
    border-radius: 22px;
  }

  .home-page .sec8-store__title-picture {
    width: min(50vw, 198px);
    margin-bottom: -8px;
  }

  .home-page .sec8-dl__row {
    grid-template-columns: 5.7em 1fr;
    gap: 0 12px;
    padding: 5px 0;
    font-size: 14px;
  }

  .home-page .sec8-dl dt {
    white-space: nowrap;
    font-weight: normal;
  }

  .home-page .sec8-dl {
    margin-top: 38px;
  }

  .home-page .sec8-collage {
    min-height: 246px;
  }

  .home-page .sec8-collage__building {
    top: 42px;
    width: 50vw;
  }

  .home-page .sec8-collage__work {
    right: -5%;
    bottom: -8%;
    width: 43vw;
  }

  .home-page .sec8-collage__woman {
    right: -32%;
    top: -118px;
    width: 58vw;
  }

  .home-page .sec8-summary {
    padding: 12px;
    font-size: 12px;
    font-weight: normal;
  }

  :is(.home-page, .product-detail-page) .sec9, .product-detail-page .sec9 {
    padding: 50px 16px 0;
  }

  :is(.home-page, .product-detail-page) .sec9-contact,
  .product-detail-page .sec9-contact {
    margin-bottom: 28px;
    padding-top: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols,
  .product-detail-page .sec9-contact__cols {
    width: min(86%, 315px);
  }

  :is(.home-page, .product-detail-page) .sec9-action--phone img {
    width: 20px;
    height: 20px;
  }

  :is(.home-page, .product-detail-page) .sec9-action__main {
    font-size: 22px;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 10px 26px;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-main {
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-pill {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.2;
    padding: 8px 10px;
    text-align: center;
    white-space: normal;
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    min-height: 0;
    margin-top: 12px;
    margin-bottom: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }
}

/* TOP header — 426–768: lock 768 layout; scale 60% at 426 → 100% at 768. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .fv {
    --fv-header-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --fv-mobile-header-clear: 100px;
  }

  .home-page .fv-header {
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--fv-header-s));
    min-height: calc(76px * var(--fv-header-s));
    padding: calc(12px * var(--fv-header-s)) calc(16px * var(--fv-header-s))
      calc(12px * var(--fv-header-s)) calc(16px * var(--fv-header-s));
  }

  .home-page .fv-header__left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: calc(8px * var(--fv-header-s));
  }

  .home-page .fv-logo {
    flex: 0 0 auto;
    width: calc(56px * var(--fv-header-s));
    height: calc(52px * var(--fv-header-s));
    overflow: hidden;
  }

  .home-page .fv-logo img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: left center;
  }

  .home-page .fv-header__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .home-page .fv-header__brand-lead {
    font-size: calc(11px * var(--fv-header-s));
    font-weight: 500;
    line-height: 1.35;
    color: #111;
    white-space: nowrap;
  }

  .home-page .fv-header__brand-name {
    font-size: calc(22px * var(--fv-header-s));
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .home-page .fv-header__right {
    flex: 0 0 auto;
  }

  .home-page .fv-header__actions {
    align-items: center;
    --fv-sp-icon: calc(34px * var(--fv-header-s));
    --fv-sp-icon-gap: calc(10px * var(--fv-header-s));
    gap: var(--fv-sp-icon-gap);
  }

  .home-page .fv-header__compact {
    align-items: center;
    gap: var(--fv-sp-icon-gap);
  }

  .home-page .fv-compact-action {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
    font-size: calc(10px * var(--fv-header-s));
  }

  .home-page .fv-compact-action span {
    display: none;
  }

  .home-page .fv-compact-action img {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
  }

  .home-page .fv-header .menu-btn {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    gap: calc(6px * var(--fv-header-s));
  }

  .home-page .fv-header .menu-btn span {
    width: 100%;
    height: calc(3px * var(--fv-header-s));
    margin: 0;
  }
}

/* TOP FV — 426–768: 60% canvas at 426 vs 768; viewport-center clip when canvas is wider than screen. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .fv-content {
    width: 100%;
    overflow-x: clip;
  }

  .home-page .fv-foreground {
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
  }

  .home-page .fv-maincopy-wrap {
    transform: none;
    align-self: flex-start;
    width: calc(768px * (0.6 + 0.4 * (100vw - 426px) / (768px - 426px)));
    max-width: none;
    margin-left: calc(
      50vw - 384px * (0.6 + 0.4 * (100vw - 426px) / (768px - 426px))
    );
    margin-right: 0;
  }

  .home-page .fv-maincopy {
    width: 61%;
    max-width: none;
    margin: -6% auto 0;
  }

  .home-page .fv-foreground__figures {
    transform: none;
    position: relative;
    align-self: flex-start;
    width: calc(768px * (0.6 + 0.4 * (100vw - 426px) / (768px - 426px)));
    max-width: none;
    margin-left: calc(
      50vw - 384px * (0.6 + 0.4 * (100vw - 426px) / (768px - 426px))
    );
    margin-right: 0;
    height: fit-content;
    overflow: visible;
  }

  .home-page .fv-people {
    position: relative;
    width: 46%;
    max-width: none;
    margin-left: 16%;
    transform: none;
  }

  .home-page .fv-mobilephone {
    width: 45%;
    max-width: none;
    left: auto;
    right: 15%;
    top: auto;
    bottom: 0;
    margin: 0;
    transform: translateY(24%);
  }
}

/* TOP sec2 — 481–768: 768px canvas scales only within this range. */
@media (min-width: 481px) and (max-width: 768px) {
  .home-page .sec2 {
    --sec2-768-s: calc(100vw / 768px);
    overflow-x: clip;
  }

  .home-page .sec2-inner {
    width: 100vw;
    max-width: none;
    min-height: calc(316px * var(--sec2-768-s));
    margin-left: 0;
    margin-right: 0;
  }

  .home-page .sec2-maincopy-wrap {
    left: 7%;
    top: 14.13%;
    width: 34%;
  }

  .home-page .sec2-choicecopy-wrap {
    left: 7%;
    top: 65.32%;
    width: 33%;
  }

  .home-page .sec2-shirts {
    top: 21.52%;
    right: 12%;
    width: 44.2%;
  }

  .home-page .sec2-people {
    top: 18.99%;
    right: 13%;
    width: 39%;
  }

  .home-page .sec2-computer-wrap {
    top: 75%;
    right: 20%;
    width: 28%;
  }

  .home-page .sec2-badge {
    top: 60.25%;
    left: 47%;
    width: 11.2%;
  }

  .home-page .sec2-products-marquee {
    margin-top: calc(10px * var(--sec2-768-s));
  }

  .home-page .sec2-products {
    --sec2-card-gap: calc(8px * var(--sec2-768-s));
    --sec2-card-pad: calc(10px * var(--sec2-768-s));
    --sec2-card-width: calc(
      (100vw - var(--sec2-card-pad) * 2 - var(--sec2-card-gap) * 2) / 3
    );
    padding-bottom: calc(72px * var(--sec2-768-s));
  }

  .home-page .sec2-products .product-card {
    padding-bottom: calc(12px * var(--sec2-768-s));
  }

  .home-page .sec2-products .product-image-wrap {
    background: #ececec;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-page .sec2-products .product-image-wrap img {
    width: 62%;
    height: 62%;
    object-fit: contain;
  }
}

/* TOP sec2 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec2 {
    --sec2-pc-s: calc(100vw / 1920px);
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec2-inner {
    width: calc(1920px * var(--sec2-pc-s));
    height: calc(460px * var(--sec2-pc-s));
    max-width: none;
    margin-left: calc(50vw - 960px * var(--sec2-pc-s));
    margin-right: 0;
  }

  .home-page .sec2-products-marquee {
    margin-top: calc(48px * var(--sec2-pc-s));
  }

  .home-page .sec2-products {
    column-gap: calc(16px * var(--sec2-pc-s));
    padding: 0 calc(16px * var(--sec2-pc-s)) calc(64px * var(--sec2-pc-s)) 0;
  }

  .home-page .sec2-products .product-card {
    padding-bottom: calc(16px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-rank {
    padding: calc(5px * var(--sec2-pc-s)) calc(12px * var(--sec2-pc-s));
    font-size: calc(10px * var(--sec2-pc-s));
    transform: translateY(calc(8px * var(--sec2-pc-s)));
    margin-left: calc(6px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-chip {
    margin: calc(9px * var(--sec2-pc-s)) 0 0 calc(8px * var(--sec2-pc-s));
    font-size: calc(9px * var(--sec2-pc-s));
    padding: calc(4px * var(--sec2-pc-s)) calc(8px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-name {
    margin: calc(8px * var(--sec2-pc-s)) calc(6px * var(--sec2-pc-s)) 0;
    font-size: calc(16px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-price {
    margin: calc(6px * var(--sec2-pc-s)) calc(6px * var(--sec2-pc-s)) 0;
    font-size: calc(44px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-price span {
    font-size: calc(12px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-tags {
    margin: calc(10px * var(--sec2-pc-s)) calc(6px * var(--sec2-pc-s)) 0;
    gap: calc(6px * var(--sec2-pc-s)) calc(10px * var(--sec2-pc-s));
  }

  .home-page .sec2-products .product-tags li {
    font-size: calc(12px * var(--sec2-pc-s));
  }
}

/* TOP sec3 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec3 {
    --sec3-pc-s: calc(100vw / 1920px);
    padding: calc(18px * var(--sec3-pc-s)) 0 calc(28px * var(--sec3-pc-s));
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec3-inner {
    width: calc(1440px * var(--sec3-pc-s));
    max-width: none;
    margin-left: calc(50vw - 720px * var(--sec3-pc-s));
    margin-right: 0;
    padding-bottom: calc(64px * var(--sec3-pc-s));
  }

  .home-page .sec3-top {
    min-height: calc(148px * var(--sec3-pc-s));
  }

  .home-page .sec3-deco {
    width: calc(370px * var(--sec3-pc-s));
    top: -84%;
    left: 0;
  }

  .home-page .sec3-title {
    left: 37%;
    top: calc(-48px * var(--sec3-pc-s));
    width: calc(440px * var(--sec3-pc-s));
    transform: translateX(-50%);
  }

  .home-page .sec3-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: calc(64px * var(--sec3-pc-s)) calc(16px * var(--sec3-pc-s));
    margin-top: calc(-44px * var(--sec3-pc-s));
  }

  .home-page .sec3-card__link {
    margin-top: calc(12px * var(--sec3-pc-s));
    width: calc(100% - 8px * var(--sec3-pc-s));
    min-height: calc(28px * var(--sec3-pc-s));
    font-size: calc(13px * var(--sec3-pc-s));
    padding: calc(8px * var(--sec3-pc-s)) calc(8px * var(--sec3-pc-s)) calc(8px * var(--sec3-pc-s))
      calc(10px * var(--sec3-pc-s));
  }

  .home-page .sec3-card__link::after {
    right: calc(12px * var(--sec3-pc-s));
    border-top-width: calc(3px * var(--sec3-pc-s));
    border-bottom-width: calc(3px * var(--sec3-pc-s));
    border-left-width: calc(5px * var(--sec3-pc-s));
  }
}

/* TOP sec4 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec4 {
    --sec4-pc-s: calc(100vw / 1920px);
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec4-inner {
    padding: calc(34px * var(--sec4-pc-s)) 0 calc(52px * var(--sec4-pc-s));
  }

  .home-page .sec4-kicker {
    width: calc(380px * var(--sec4-pc-s));
    left: 18%;
    top: calc(-44px * var(--sec4-pc-s));
  }

  .home-page .sec4-title {
    width: calc(1080px * var(--sec4-pc-s));
    max-width: 100%;
    margin: calc(8px * var(--sec4-pc-s)) auto calc(48px * var(--sec4-pc-s));
  }

  .home-page .sec4-list {
    --sec4-gap: calc(16px * var(--sec4-pc-s));
    --sec4-col: calc((1920px - 16px - 6 * 16px) / 7 * var(--sec4-pc-s));
    padding: 0 calc(8px * var(--sec4-pc-s));
  }

  .home-page .sec4-card {
    padding-bottom: calc(10px * var(--sec4-pc-s));
  }

  .home-page .sec4-card__image {
    padding: calc(14px * var(--sec4-pc-s));
  }

  .home-page .sec4-card__link {
    margin-top: calc(-24px * var(--sec4-pc-s));
    width: calc(80% - 8px * var(--sec4-pc-s));
    min-height: calc(32px * var(--sec4-pc-s));
    font-size: calc(13px * var(--sec4-pc-s));
    padding: calc(16px * var(--sec4-pc-s)) calc(16px * var(--sec4-pc-s)) calc(16px * var(--sec4-pc-s))
      calc(10px * var(--sec4-pc-s));
  }

  .home-page .sec4-card__link::after {
    right: calc(10px * var(--sec4-pc-s));
    border-top-width: calc(3px * var(--sec4-pc-s));
    border-bottom-width: calc(3px * var(--sec4-pc-s));
    border-left-width: calc(5px * var(--sec4-pc-s));
  }

  .home-page .sec4-bottom-confetti {
    left: 53%;
    width: 64%;
    margin-top: calc(-30px * var(--sec4-pc-s));
    padding-bottom: calc(24px * var(--sec4-pc-s));
  }
}

/* TOP sec5 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec5 {
    --sec5-pc-s: calc(100vw / 1920px);
    padding: calc(28px * var(--sec5-pc-s)) 0 calc(200px * var(--sec5-pc-s));
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec5-hero-wrap {
    width: calc(1440px * var(--sec5-pc-s));
    max-width: none;
    margin-left: calc(50vw - 720px * var(--sec5-pc-s));
    margin-right: 0;
  }

  .home-page .sec5-body {
    padding: 0 calc(64px * var(--sec5-pc-s));
  }

  .home-page .sec5-maincopy {
    width: calc(760px * var(--sec5-pc-s));
    max-width: 100%;
  }

  .home-page .sec5-intro {
    max-width: calc(1168px * var(--sec5-pc-s));
    margin: calc(-88px * var(--sec5-pc-s)) auto calc(48px * var(--sec5-pc-s));
    padding: calc(56px * var(--sec5-pc-s)) calc(48px * var(--sec5-pc-s)) calc(48px * var(--sec5-pc-s))
      calc(48px * var(--sec5-pc-s));
    border-radius: calc(14px * var(--sec5-pc-s));
  }

  .home-page .sec5-intro__lead {
    margin-bottom: calc(14px * var(--sec5-pc-s));
    font-size: calc(23px * var(--sec5-pc-s));
  }

  .home-page .sec5-intro__body {
    font-size: calc(19px * var(--sec5-pc-s));
  }

  .home-page .sec5-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(24px * var(--sec5-pc-s));
  }

  .home-page .sec5-card {
    gap: 0 calc(16px * var(--sec5-pc-s));
    border-radius: calc(24px * var(--sec5-pc-s));
    padding: calc(16px * var(--sec5-pc-s)) calc(24px * var(--sec5-pc-s)) 0 calc(14px * var(--sec5-pc-s));
    min-height: calc(168px * var(--sec5-pc-s));
  }

  .home-page .sec5-card::before {
    top: calc(-16px * var(--sec5-pc-s));
    left: calc(20px * var(--sec5-pc-s));
    width: calc(48px * var(--sec5-pc-s));
    height: calc(48px * var(--sec5-pc-s));
    font-size: calc(22px * var(--sec5-pc-s));
    box-shadow: calc(4px * var(--sec5-pc-s)) calc(4px * var(--sec5-pc-s)) 0 0 #000000;
  }

  .home-page .sec5-card__media {
    border-radius: calc(34px * var(--sec5-pc-s)) 0 0 calc(34px * var(--sec5-pc-s));
  }

  .home-page .sec5-card__media img {
    max-height: calc(200px * var(--sec5-pc-s));
  }

  .home-page .sec5-card__text {
    padding: calc(8px * var(--sec5-pc-s)) 0 calc(14px * var(--sec5-pc-s)) calc(4px * var(--sec5-pc-s));
    font-size: calc(18px * var(--sec5-pc-s));
    font-weight: 600;
  }

  .home-page .sec5-cta {
    width: calc(476px * var(--sec5-pc-s));
    max-width: 92%;
    margin: calc(48px * var(--sec5-pc-s)) auto calc(64px * var(--sec5-pc-s));
    padding: calc(20px * var(--sec5-pc-s));
    font-size: calc(15px * var(--sec5-pc-s));
  }
}

/* TOP sec5 — 769–1024: 2 cards per row; shrink media so text has more room */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-page .sec5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .sec5-card__media {
    flex: 0 0 32%;
  }

  .home-page .sec5-card__media img {
    max-height: calc(180px * var(--sec5-pc-s));
  }

  .home-page .sec5-card__text {
    padding: calc(8px * var(--sec5-pc-s)) 0 calc(14px * var(--sec5-pc-s)) calc(4px * var(--sec5-pc-s));
    font-size: calc(25px * var(--sec5-pc-s));
    font-weight: 600;
  }
}

/* TOP sec6 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec6 {
    --sec6-pc-s: calc(100vw / 1920px);
    padding: calc(74px * var(--sec6-pc-s)) 0 calc(160px * var(--sec6-pc-s));
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec6::before {
    top: calc(-20px * var(--sec6-pc-s));
    height: calc(20px * var(--sec6-pc-s));
    background-size: calc(112px * var(--sec6-pc-s)) calc(24px * var(--sec6-pc-s));
  }

  .home-page .sec6-overlap {
    margin: calc(-228px * var(--sec6-pc-s)) 0 0;
    padding: 0 calc(64px * var(--sec6-pc-s));
    min-height: calc(152px * var(--sec6-pc-s));
  }

  .home-page .sec6-overlap__copy {
    max-width: calc(520px * var(--sec6-pc-s));
    left: 18%;
    transform: translateY(calc(-42px * var(--sec6-pc-s)));
  }

  .home-page .sec6-kicker-img {
    width: calc(320px * var(--sec6-pc-s));
    margin-bottom: calc(6px * var(--sec6-pc-s));
  }

  .home-page .sec6-title-img {
    width: calc(520px * var(--sec6-pc-s));
  }

  .home-page .sec6-people {
    width: calc(320px * var(--sec6-pc-s));
  }

  .home-page .sec6-panel {
    width: calc(1280px * var(--sec6-pc-s));
    max-width: none;
    margin-left: calc(50vw - 640px * var(--sec6-pc-s));
    margin-right: 0;
    padding: calc(38px * var(--sec6-pc-s)) calc(84px * var(--sec6-pc-s));
    border-width: calc(4px * var(--sec6-pc-s));
    box-shadow: 0 calc(2px * var(--sec6-pc-s)) 0 #111;
  }

  .home-page .sec6-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(18px * var(--sec6-pc-s)) calc(128px * var(--sec6-pc-s));
  }

  .home-page .sec6-pill {
    gap: calc(12px * var(--sec6-pc-s));
    min-height: calc(40px * var(--sec6-pc-s));
    border-width: calc(3px * var(--sec6-pc-s));
    padding: 0 calc(12px * var(--sec6-pc-s));
  }

  .home-page .sec6-num {
    width: calc(30px * var(--sec6-pc-s));
    height: calc(30px * var(--sec6-pc-s));
    border-width: calc(2px * var(--sec6-pc-s));
    font-size: calc(22px * var(--sec6-pc-s));
  }

  .home-page .sec6-label {
    font-size: calc(20px * var(--sec6-pc-s));
  }

  .home-page .sec6-arrow {
    font-size: calc(12px * var(--sec6-pc-s));
  }

  .home-page .sec6-copy {
    padding: 0 calc(36px * var(--sec6-pc-s));
    padding-top: calc(10px * var(--sec6-pc-s));
    font-size: calc(18px * var(--sec6-pc-s));
  }
}

/* TOP sec6 — 769–1024: lock scale to 1024px (pills + copy stay legible). */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-page .sec6 {
    --sec6-pc-s: calc(1024px / 1920px);
  }
}

/* TOP sec7 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec7 {
    --sec7-pc-s: calc(100vw / 1920px);
    margin-top: calc(-36px * var(--sec7-pc-s));
    padding: calc(96px * var(--sec7-pc-s)) calc(48px * var(--sec7-pc-s)) calc(200px * var(--sec7-pc-s));
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec7-head {
    width: calc(1148px * var(--sec7-pc-s));
    max-width: none;
    margin: 0 auto calc(28px * var(--sec7-pc-s));
    margin-left: calc(50vw - 574px * var(--sec7-pc-s));
    margin-right: 0;
  }

  .home-page .sec7-title-img {
    width: calc(380px * var(--sec7-pc-s));
    top: calc(-84px * var(--sec7-pc-s));
  }

  .home-page .sec7-marquee {
    width: calc(1440px * var(--sec7-pc-s));
    max-width: none;
    margin-left: calc(50vw - 720px * var(--sec7-pc-s));
    margin-right: 0;
  }

  .home-page .sec7-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(28px * var(--sec7-pc-s));
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-page .sec7-card__name {
    margin: calc(12px * var(--sec7-pc-s)) 0 calc(6px * var(--sec7-pc-s));
    font-size: calc(18px * var(--sec7-pc-s));
  }

  .home-page .sec7-card__role {
    margin-left: calc(8px * var(--sec7-pc-s));
    font-size: calc(14px * var(--sec7-pc-s));
  }

  .home-page .sec7-card__text {
    font-size: calc(13px * var(--sec7-pc-s));
  }
}

/* TOP sec7 cards — 769–1920: lock font size to 1920 design (no viewport scale) */
@media (min-width: 769px) and (max-width: 1920px) {
  .home-page .sec7-card__name {
    font-size: 18px;
  }

  .home-page .sec7-card__role {
    font-size: 14px;
  }

  .home-page .sec7-card__text {
    font-size: 13px;
  }
}

/* TOP sec8 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .home-page .sec8 {
    --sec8-pc-s: calc(100vw / 1920px);
    margin-top: calc(198px * var(--sec8-pc-s));
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-page .sec8-wave {
    margin-top: calc(-20px * var(--sec8-pc-s));
  }

  .home-page .sec8-wave__svg {
    height: calc(56px * var(--sec8-pc-s));
  }

  .home-page .sec8-inner {
    width: calc(1200px * var(--sec8-pc-s));
    max-width: none;
    margin-left: calc(50vw - 600px * var(--sec8-pc-s));
    margin-right: 0;
    padding: calc(20px * var(--sec8-pc-s)) calc(48px * var(--sec8-pc-s)) calc(96px * var(--sec8-pc-s));
  }

  .home-page .sec8-store {
    border-radius: calc(40px * var(--sec8-pc-s));
    padding: calc(44px * var(--sec8-pc-s));
    margin-top: calc(-356px * var(--sec8-pc-s));
    margin-bottom: calc(77px * var(--sec8-pc-s));
    overflow: visible;
  }

  .home-page .sec8-store__cols {
    grid-template-columns: 1fr calc(380px * var(--sec8-pc-s));
    gap: calc(36px * var(--sec8-pc-s));
  }

  .home-page .sec8-store__title-img {
    width: calc(520px * var(--sec8-pc-s));
    max-width: 100%;
    margin-bottom: calc(28px * var(--sec8-pc-s));
  }

  .home-page .sec8-dl__row {
    gap: calc(12px * var(--sec8-pc-s)) calc(18px * var(--sec8-pc-s));
    padding: calc(6px * var(--sec8-pc-s)) 0;
    font-size: calc(15px * var(--sec8-pc-s));
  }

  .home-page .sec8-collage {
    min-height: calc(260px * var(--sec8-pc-s));
  }

  .home-page .sec8-collage__building {
    left: calc(-66px * var(--sec8-pc-s));
  }

  .home-page .sec8-collage__work {
    width: calc(240px * var(--sec8-pc-s));
  }

  .home-page .sec8-collage__woman {
    right: -23%;
    top: -76%;
    width: min(100%, 360px);
  }

  .home-page .sec8-btn {
    width: calc(560px * var(--sec8-pc-s));
    max-width: 100%;
    margin-top: calc(32px * var(--sec8-pc-s));
    padding: calc(24px * var(--sec8-pc-s));
    font-size: calc(18px * var(--sec8-pc-s));
  }

  .home-page .sec8-faq__head {
    gap: calc(40px * var(--sec8-pc-s));
  }

  .home-page .sec8-faq__title-img {
    max-width: calc(280px * var(--sec8-pc-s));
    margin-top: calc(12px * var(--sec8-pc-s));
  }

  .home-page .sec8-details {
    margin-bottom: calc(12px * var(--sec8-pc-s));
    border-radius: calc(16px * var(--sec8-pc-s));
  }

  .home-page .sec8-summary {
    gap: calc(12px * var(--sec8-pc-s));
    padding: calc(14px * var(--sec8-pc-s)) calc(18px * var(--sec8-pc-s));
    font-size: calc(16px * var(--sec8-pc-s));
  }

  .home-page .sec8-summary::after {
    width: calc(28px * var(--sec8-pc-s));
    height: calc(28px * var(--sec8-pc-s));
    font-size: calc(10px * var(--sec8-pc-s));
    line-height: calc(28px * var(--sec8-pc-s));
  }

  .home-page .sec8-details__body {
    padding: calc(14px * var(--sec8-pc-s)) calc(18px * var(--sec8-pc-s)) calc(18px * var(--sec8-pc-s));
    font-size: calc(15px * var(--sec8-pc-s));
  }

  .home-page .sec8-faq > .sec8-btn {
    margin-top: calc(36px * var(--sec8-pc-s));
  }
}

/* TOP sec8 FAQ list — 769+: lock font size to 1920 design (no viewport scale) */
@media (min-width: 769px) {
  .home-page .sec8-faq__list .sec8-summary {
    font-size: 16px;
  }

  .home-page .sec8-faq__list .sec8-details__body {
    font-size: 15px;
  }

  .home-page .sec8-faq > .sec8-btn {
    font-size: 16px;
    padding: 1.333em;
  }
}

/* TOP sec8 store — 769–1440: lock font size to 1920 design (no viewport scale) */
@media (min-width: 769px) and (max-width: 1440px) {
  .home-page .sec8-store .sec8-dl__row {
    font-size: 15px;
  }

  .home-page .sec8-store > .sec8-btn {
    font-size: 18px;
  }
}

/* TOP sec8 store — 769–1439: wrap dd text before building image overlap */
@media (min-width: 769px) and (max-width: 1439px) {
  .home-page .sec8-store .sec8-dl dd {
    max-width: calc(100% - 30px * var(--sec8-pc-s));
  }
}
/* TOP sec9 — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  :is(.home-page, .product-detail-page) .sec9, .product-detail-page .sec9 {
    --sec9-pc-s: calc(100vw / 1920px);
    padding: calc(79px * var(--sec9-pc-s)) calc(48px * var(--sec9-pc-s)) calc(48px * var(--sec9-pc-s));
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-inner {
    width: calc(1320px * var(--sec9-pc-s));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact,
  .product-detail-page .sec9-contact {
    margin-bottom: calc(48px * var(--sec9-pc-s));
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__hero,
  .product-detail-page .sec9-contact__hero {
    display: contents;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__woman-wrap,
  .product-detail-page .sec9-contact__woman-wrap {
    display: contents;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__woman,
  .product-detail-page .sec9-contact__woman {
    left: calc(-178px * var(--sec9-pc-s));
    bottom: calc(100% - 76px * var(--sec9-pc-s));
    width: calc(600px * var(--sec9-pc-s));
    top: calc(-320px * var(--sec9-pc-s));
    transform: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact picture,
  .product-detail-page .sec9-contact picture {
    position: absolute;
    left: calc(137px * var(--sec9-pc-s));
    bottom: calc(100% - 76px * var(--sec9-pc-s));
    top: calc(-76px * var(--sec9-pc-s));
    width: calc(568px * var(--sec9-pc-s));
    max-width: calc(100% - 300px * var(--sec9-pc-s));
    transform: none;
    flex: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__panel,
  .product-detail-page .sec9-contact__panel {
    border-radius: calc(36px * var(--sec9-pc-s));
    padding: calc(126px * var(--sec9-pc-s)) calc(40px * var(--sec9-pc-s)) calc(44px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-contact__title,
  .product-detail-page .sec9-contact__title {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
    transform: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__main,
  .product-detail-page .sec9-contact__main {
    padding-top: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols,
  .product-detail-page .sec9-contact__cols {
    width: 80%;
    gap: calc(36px * var(--sec9-pc-s));
    margin-bottom: calc(34px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-bullets,
  .product-detail-page .sec9-bullets {
    font-size: calc(15px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-bullets li,
  .product-detail-page .sec9-bullets li {
    margin-bottom: calc(10px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-contact__actions,
  .product-detail-page .sec9-contact__actions {
    width: 96%;
    gap: calc(18px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action,
  .product-detail-page .sec9-action {
    gap: calc(10px * var(--sec9-pc-s));
    min-height: calc(76px * var(--sec9-pc-s));
    padding: calc(24px * var(--sec9-pc-s)) calc(14px * var(--sec9-pc-s));
    border-radius: calc(16px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action img,
  .product-detail-page .sec9-action img {
    width: calc(40px * var(--sec9-pc-s));
    height: calc(40px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action--phone img,
  .product-detail-page .sec9-action--phone img {
    width: calc(24px * var(--sec9-pc-s));
    height: calc(24px * var(--sec9-pc-s));
    margin-top: calc(8px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__body,
  .product-detail-page .sec9-action__body {
    gap: calc(4px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__main,
  .product-detail-page .sec9-action__main {
    font-size: calc(36px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__sub,
  .product-detail-page .sec9-action__sub {
    font-size: calc(14px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__label,
  .product-detail-page .sec9-action__label {
    font-size: calc(32px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-sub,
  .product-detail-page .sec9-sub {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.16fr) minmax(0, 0.78fr);
    gap: calc(28px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside,
  .product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
    min-height: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff,
  .product-detail-page .sec9-ship-aside__staff {
    left: calc(34px * var(--sec9-pc-s));
    bottom: calc(-48px * var(--sec9-pc-s));
    max-width: 100%;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside,
  .product-detail-page .sec9-ship-aside {
    gap: calc(12px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__vertical {
    font-size: calc(13px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card {
    border-radius: calc(32px * var(--sec9-pc-s));
    padding-bottom: calc(36px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card__head,
  .product-detail-page .sec9-card__head {
    gap: calc(12px * var(--sec9-pc-s));
    padding: calc(16px * var(--sec9-pc-s)) calc(56px * var(--sec9-pc-s));
    border-radius: calc(30px * var(--sec9-pc-s)) calc(30px * var(--sec9-pc-s)) 0 0;
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-main {
    font-size: calc(24px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card__head-pill {
    font-size: calc(18px * var(--sec9-pc-s));
    padding: calc(8px * var(--sec9-pc-s)) calc(14px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list {
    margin: calc(26px * var(--sec9-pc-s)) calc(56px * var(--sec9-pc-s)) 0;
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list li {
    gap: calc(12px * var(--sec9-pc-s));
    margin-bottom: calc(14px * var(--sec9-pc-s));
    font-size: calc(24px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-pay-list li::before {
    flex: 0 0 calc(38px * var(--sec9-pc-s));
    width: calc(38px * var(--sec9-pc-s));
    height: calc(38px * var(--sec9-pc-s));
    font-size: calc(15px * var(--sec9-pc-s));
    line-height: calc(38px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card__logos {
    width: calc(380px * var(--sec9-pc-s));
    max-width: 88%;
    margin: calc(10px * var(--sec9-pc-s)) auto calc(24px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card__btn {
    width: calc(320px * var(--sec9-pc-s));
    max-width: 92%;
    margin-top: calc(28px * var(--sec9-pc-s));
    padding: calc(14px * var(--sec9-pc-s)) calc(24px * var(--sec9-pc-s));
    font-size: calc(15px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-card--ship .sec9-card__body {
    margin: calc(26px * var(--sec9-pc-s)) calc(56px * var(--sec9-pc-s)) 0;
  }

  :is(.home-page, .product-detail-page) .sec9-ship__lead {
    margin-bottom: calc(14px * var(--sec9-pc-s));
    font-size: calc(24px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-ship__note {
    margin-bottom: calc(14px * var(--sec9-pc-s));
    font-size: calc(16px * var(--sec9-pc-s));
  }

  :is(.home-page, .product-detail-page) .sec9-ship__ems {
    font-size: calc(24px * var(--sec9-pc-s));
  }
}

/* Site footer — 769+: proportional scale from 1920px design lock (same as FV). */
@media (min-width: 769px) {
  .site-footer {
    --footer-pc-s: calc(100vw / 1920px);
    padding: calc(72px * var(--footer-pc-s)) calc(48px * var(--footer-pc-s)) calc(128px * var(--footer-pc-s));
  }

  .site-footer__inner {
    width: calc(1440px * var(--footer-pc-s));
    max-width: none;
    margin-left: calc(50vw - 720px * var(--footer-pc-s));
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(44px * var(--footer-pc-s));
    align-items: start;
  }

  .site-footer__logo {
    width: calc(360px * var(--footer-pc-s));
    max-width: 100%;
    margin-bottom: calc(24px * var(--footer-pc-s));
  }

  .site-footer__company {
    margin-bottom: calc(8px * var(--footer-pc-s));
    font-size: calc(22px * var(--footer-pc-s));
    white-space: nowrap;
  }

  .site-footer__address,
  .site-footer__tel {
    margin-bottom: calc(8px * var(--footer-pc-s));
    font-size: 14px;
  }

  .site-footer__title {
    margin-bottom: calc(12px * var(--footer-pc-s));
    font-size: 18px;
  }

  .site-footer__title--section {
    margin-bottom: calc(8px * var(--footer-pc-s));
    font-size: 20px;
  }

  .site-footer__lead {
    margin-bottom: calc(8px * var(--footer-pc-s));
  }

  .site-footer__leadlink {
    font-size: 16px;
  }

  .site-footer__list li {
    margin-bottom: calc(8px * var(--footer-pc-s));
  }

  .site-footer__list a {
    font-size: 14px;
  }

  .site-footer__list--dash li {
    margin-bottom: calc(10px * var(--footer-pc-s));
  }

  .site-footer__list--dash a {
    font-size: 14px;
  }

  .site-footer__list--corp li {
    margin-bottom: calc(8px * var(--footer-pc-s));
  }

  .site-footer__list--corp a {
    font-size: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .site-footer__company {
    margin-bottom: calc(8px * var(--footer-pc-s));
    font-size: calc(40px * var(--footer-pc-s));
    white-space: nowrap;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .site-footer__company {
    margin-bottom: calc(8px * var(--footer-pc-s));
    font-size: calc(30px * var(--footer-pc-s));
    white-space: nowrap;
  }
}
/* TOP sec3 — 426–768: 60% image scale at 426; positions interpolate 768↔426 (no canvas clip). */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec3 {
    overflow-x: visible;
  }

  .home-page .sec3-top {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: calc(48px + 40px * (100vw - 426px) / (768px - 426px));
    margin-bottom: 4px;
    overflow: visible;
  }

  .home-page .sec3-deco {
    --sec3-scale: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    width: calc(768px * 0.38 * var(--sec3-scale));
    top: auto;
    /* 426: top -78px (arm visible). 768: raised ~15px so arm stays above grid overlap. */
    bottom: calc(-136.904px - 105.096px * (100vw - 426px) / (768px - 426px));
    /* Offset PNG left transparency (93/746); fully expanded — no var() in left. */
    left: calc(-768px * 0 * 93 / 746 * (0.4 + 0.4 * (100vw - 426px) / (768px - 426px)));
  }

  .home-page .sec3-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 10px;
    margin-top: calc(-16px - 2px * (100vw - 426px) / (768px - 426px));
  }

  .home-page .sec3-title {
    right: calc(26px + 10px * (100vw - 426px) / (768px - 426px));
    top: calc(-40px - 13px * (100vw - 426px) / (768px - 426px));
    width: calc(768px * 0.52 * (0.6 + 0.4 * (100vw - 426px) / (768px - 426px)));
    left: auto;
    margin: 0;
    transform: none;
  }
}

/* TOP sec4 — 426–768: keep 480 marquee layout; prevent 481px breakpoint jump. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec4 {
    --sec4-t: calc((100vw - 426px) / (768px - 426px));
    margin-top: 0;
    overflow: visible;
  }

  .home-page .sec4-inner {
    padding: 0 0 calc(28px + 6px * var(--sec4-t));
  }

  .home-page .sec4-kicker {
    position: absolute;
    left: calc(10px + 2px * var(--sec4-t));
    top: -18px;
    width: min(46vw, calc(180px + 24px * var(--sec4-t)));
    margin: 0;
  }

  .home-page .sec4-title {
    position: relative;
    top: calc(-16px + 8px * var(--sec4-t));
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto calc(28px + 6px * var(--sec4-t));
  }

  .home-page .sec4-list {
    --sec4-gap: 10px;
    --sec4-col: calc((100vw - 20px - var(--sec4-gap)) / 2.08);
    padding: 0 10px;
  }

  .home-page .sec4-card__link {
    width: calc(92% - 4% * var(--sec4-t));
    min-height: calc(32px + 2px * var(--sec4-t));
    margin-top: -18px;
    padding: calc(8px + 2px * var(--sec4-t)) 20px calc(8px + 2px * var(--sec4-t)) 12px;
    font-size: calc(11px + 1px * var(--sec4-t));
    font-weight: normal;
  }

  .home-page .sec4-bottom-confetti {
    left: 50%;
    width: calc(70% + 8% * var(--sec4-t));
    margin-top: -12px;
    padding-bottom: calc(38px + 4px * var(--sec4-t));
  }
}

/* TOP sec5 — 426–768: lock exact 768px composition; scale whole section to fit. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec5 {
    /* Freeze 768px layout values, then scale the section to the viewport */
    --sec5-t: 1;
    --sec5-lock-s: calc(100vw / 768px);
    width: 768px;
    max-width: none;
    box-sizing: border-box;
    zoom: var(--sec5-lock-s);
    overflow: visible;
    padding: 0 20px calc(60px + 36px * var(--sec5-t));
  }

  .home-page .sec5-hero-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-page .sec5-body {
    padding: 0 12px 45px 12px;
  }

  .home-page .sec5-hero {
    min-height: calc(179px + 21px * var(--sec5-t));
    overflow: visible;
  }

  .home-page .sec5-people,
  .home-page .sec5-people-mobile {
    left: -9%;
    bottom: 0;
    width: 55%;
    transform: translateY(35%);
    z-index: 3;
  }

  .home-page .sec5-maincopy {
    position: absolute;
    left: calc(23% + 1% * var(--sec5-t));
    top: calc(-30px - 4px * var(--sec5-t));
    width: calc(310px + 90px * var(--sec5-t));
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 4;
  }

  .home-page .sec5-badge {
    display: block;
    position: absolute;
    z-index: 5;
    right: calc(-3% + 3% * var(--sec5-t));
    top: calc(-64px - 6px * var(--sec5-t));
    width: calc(112px + 18px * var(--sec5-t));
    height: auto;
    pointer-events: none;
  }

  .home-page .sec5-intro {
    max-width: none;
    margin: calc(-28px - 4px * var(--sec5-t)) auto calc(34px + 4px * var(--sec5-t));
    padding: calc(18px + 4px * var(--sec5-t)) calc(14px + 4px * var(--sec5-t));
    border-radius: calc(10px + 2px * var(--sec5-t));
  }

  .home-page .sec5-intro__lead {
    margin-bottom: 10px;
    font-size: calc(20px + 2px * var(--sec5-t));
    line-height: 1.55;
    font-weight: 400;
  }

  .home-page .sec5-intro__body {
    font-size: calc(15px + 4px * var(--sec5-t));
    line-height: 1.7;
    font-weight: normal;
  }

  .home-page .sec5-grid {
    grid-template-columns: 1fr;
    gap: calc(18px + 2px * var(--sec5-t));
  }

  .home-page .sec5-card {
    min-height: calc(126px + 14px * var(--sec5-t));
    gap: calc(10px + 2px * var(--sec5-t));
    padding: calc(16px + 2px * var(--sec5-t)) calc(12px + 4px * var(--sec5-t)) 4px;
    border-radius: calc(16px + 2px * var(--sec5-t));
  }

  .home-page .sec5-card::before {
    top: -12px;
    left: 16px;
    width: calc(40px + 4px * var(--sec5-t));
    height: calc(40px + 4px * var(--sec5-t));
    font-size: calc(18px + 2px * var(--sec5-t));
    box-shadow: 3px 3px 0 0 #000;
  }

  .home-page .sec5-card__media {
    flex: 0 0 calc(38% + 2% * var(--sec5-t));
    border-radius: 14px 0 0 14px;
  }

  .home-page .sec5-card__media img {
    max-height: calc(140px + 20px * var(--sec5-t));
  }

  .home-page .sec5-card__text {
    padding: 10px 0 12px;
    font-size: calc(18px + 2.9px * var(--sec5-t));
    line-height: 1.55;
    font-weight: normal;
  }

  .home-page .sec5-cta {
    margin: calc(32px + 4px * var(--sec5-t)) auto 0;
    padding: calc(16px + 2px * var(--sec5-t)) 18px;
    font-size: calc(14px + 1px * var(--sec5-t));
    font-weight: normal;
  }
}

/* TOP sec5-cta — 320 only. */
@media (max-width: 320px) {
  .home-page .sec5-cta {
    margin: 32px auto 0;
    padding: 16px 18px;
    font-size: 12px;
  }
}

/* TOP sec6-copy — 426–768 only: 16px@426 → ~18.9px@768; weight normal. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec6-copy {
    --sec5-t: calc((100vw - 426px) / (768px - 426px));
    margin: 6px 0 2px;
    padding: 0 12px;
    font-size: calc(16px + 2.9px * var(--sec5-t));
    line-height: 1.55;
    font-weight: normal;
  }
}

/* TOP sec7-card__text — 426–768 only. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec7-card__text {
    font-size: 15px;
    line-height: 1.55;
    font-weight: normal;
  }
}

/* TOP sec7-list — ≤425 only. */
@media (max-width: 425px) {
  .home-page .sec7-list {
    grid-template-columns: 1fr;
    margin: 0 auto;
    padding: 0 24px;
  }
}

/* TOP sec8 — 426–768: 768px collage ratios; work covers half of woman with whitespace. */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .sec8-store {
    --sec8-t: calc((100vw - 426px) / (768px - 426px));
    --sec8-s: calc(0.6 + 0.4 * var(--sec8-t));
    overflow: visible;
  }

  .home-page .sec8-store__title-picture {
    position: relative;
    z-index: 10;
    width: min(calc(360px * var(--sec8-s)), 46%);
    margin: 0 0 calc(20px * var(--sec8-s));
  }

  .home-page .sec8-store__figures {
    order: 2;
    z-index: 2;
    margin-top: 0;
    width: 100%;
    padding-top: calc(48px * var(--sec8-s));
    overflow: visible;
  }

  .home-page .sec8-dl {
    position: relative;
    z-index: 10;
    margin-top: calc(38px - 56px * var(--sec8-t));
  }

  .home-page .sec8-collage {
    position: relative;
    width: 100%;
    max-width: none;
    height: calc(400px * var(--sec8-s));
    min-height: calc(400px * var(--sec8-s));
    margin: 0;
  }

  .home-page .sec8-collage__building {
    left: 0;
    top: calc(-44px * var(--sec8-s));
    width: calc(377 / 660 * 100%);
    z-index: 3;
  }

  .home-page .sec8-collage__woman {
    right: -10%;
    top: calc(-284px * var(--sec8-s));
    width: calc(370 / 660 * 100%);
    z-index: 4;
  }

  .home-page .sec8-collage__work {
    right: 0%;
    top: calc(20px + 40px * var(--sec8-t));
    bottom: auto;
    width: calc(320 / 660 * 100%);
    z-index: 6;
  }
}

/* TOP sec9 — 426–768: lock 768 layout; scale 60% at 426 → 100% at 768. */
@media (min-width: 426px) and (max-width: 768px) {
  :is(.home-page, .product-detail-page) .sec9, .product-detail-page .sec9 {
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact,
  .product-detail-page .sec9-contact {
    --sec9-t: calc((100vw - 426px) / (768px - 426px));
    --sec9-s: calc(0.6 + 0.4 * var(--sec9-t));
  }

  .product-detail-page .sec9-contact__panel {
    padding: calc(88px - 4px * var(--sec9-t)) 20px 20px;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols,
  .product-detail-page .sec9-contact__cols {
    width: min(calc(86% + 2% * var(--sec9-t)), 315px);
  }

  :is(.home-page, .product-detail-page) .sec9,
  .product-detail-page .sec9 {
    --sec9-scale-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --sec9-aside-w: calc(var(--sec9-aside-lock-w) * var(--sec9-scale-s));
  }

  :is(.home-page, .product-detail-page) .sec9-sub {
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);

    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 12px 0 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside {
    height: auto;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    position: relative;
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-top: calc(48px * var(--sec9-scale-s));
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }
}

/* TOP FV — 320–425: 425px design lock; same people+phone arrangement scaled to 320. */
@media (max-width: 425px) {
  .home-page .fv,
  .home-page .fv-content,
  .home-page .fv-foreground,
  .home-page .fv-foreground__figures {
    overflow: visible;
  }

  /* FV height lock (580px @425) — shortens header→text gap; shirts scale with same factor */
  .home-page .fv {
    --fv-sp-s: calc(100vw / 425px);
    --fv-sp-h: calc(580px * var(--fv-sp-s));
    height: var(--fv-sp-h);
    min-height: var(--fv-sp-h);
    max-height: var(--fv-sp-h);
    --fv-shirts-pad: calc(12px * var(--fv-sp-s));
    --fv-shirts-available-h: calc(
      var(--fv-sp-h) - var(--fv-mobile-header-clear) - var(--fv-shirts-pad) * 2
    );
  }

  .home-page .shirts-layer {
    gap: calc(8px * var(--fv-sp-s));
    padding-top: calc(var(--fv-mobile-header-clear) + var(--fv-shirts-pad));
    padding-bottom: var(--fv-shirts-pad);
    --shirt-gap: calc(10px * var(--fv-sp-s));
    --shirt-col: calc((var(--fv-shirts-available-h) - 2 * var(--shirt-gap)) / 3);
  }

  .home-page .shirt-card {
    padding: calc(12px * var(--fv-sp-s));
    border-radius: calc(10px * var(--fv-sp-s));
  }

  .home-page .fv-foreground {
    align-items: flex-start;
    width: 100%;
  }

  /* 425 lock: 326px wide; scales linearly to 320 (326 × vw / 425) */
  .home-page .fv-maincopy {
    display: block;
    width: calc(326px * 100vw / 425px);
    max-width: 93%;
    height: auto;
    margin: 0 auto;
    position: static;
    transform: none;
  }

  .home-page .fv-foreground__figures {
    /* 1.42 = 1.29 (phone right:-29%) + 0.13 (people ml); width fits viewport with equal side gaps */
    --fv-side-gap: 5px;
    --fv-fig-span: 1.42;
    --fv-fig-w: calc((100% - 2 * var(--fv-side-gap)) / var(--fv-fig-span));
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
    width: var(--fv-fig-w);
    max-width: none;
    margin-left: var(--fv-side-gap);
    margin-right: var(--fv-side-gap);
    height: fit-content;
    transform: none;
  }

  .home-page .fv-people {
    position: relative;
    display: block;
    z-index: 14;
    width: 72%;
    margin-left: 13%;
    max-width: none;
    height: auto;
    transform: none;
  }

  .home-page .fv-mobilephone {
    position: absolute;
    z-index: 24;
    width: 76%;
    right: -29%;
    bottom: 0;
    top: auto;
    left: auto;
    max-width: none;
    height: auto;
    transform: translateY(24%);
  }

  /* TOP sec3 — 425 lock; 3 columns; scales to 320 */
  .home-page .sec3 {
    --sec3-sp-s: calc(100vw / 425px);
  }

  .home-page .sec3-top {
    min-height: calc(48px * var(--sec3-sp-s));
  }

  .home-page .sec3-deco {
    left: calc(-8px * var(--sec3-sp-s));
    top: calc(-104px * var(--sec3-sp-s));
    width: 54vw;
  }

  .home-page .sec3-title {
    right: calc(-5px * var(--sec3-sp-s));
    top: calc(-54px * var(--sec3-sp-s));
    width: 55vw;
    left: auto;
  }

  .home-page .sec3-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(18px * var(--sec3-sp-s)) calc(10px * var(--sec3-sp-s));
    margin-top: calc(-16px * var(--sec3-sp-s));
  }

  .home-page .sec3-card__link {
    min-height: calc(32px * var(--sec3-sp-s));
    padding: calc(8px * var(--sec3-sp-s)) calc(20px * var(--sec3-sp-s))
      calc(8px * var(--sec3-sp-s)) calc(10px * var(--sec3-sp-s));
    font-size: calc(11px * var(--sec3-sp-s));
  }

  /* TOP sec4 — 425 lock; scales to 320 */
  .home-page .sec4 {
    --sec4-sp-s: calc(100vw / 425px);
  }

  .home-page .sec4-bottom-confetti {
    left: 50%;
    width: 72%;
    margin-top: calc(-11px * var(--sec4-sp-s));
    padding-bottom: calc(58px * var(--sec4-sp-s));
  }

  /* TOP sec5 — 425 lock; scales to 320 */
  .home-page .sec5 {
    --sec5-sp-s: calc(100vw / 425px);
    padding-bottom: calc(60px * var(--sec5-sp-s));
  }

  .home-page .sec5-body {
    padding: 0 calc(24px * var(--sec5-sp-s));
    padding-bottom: 26px;
  }

  .home-page .sec5-hero {
    min-height: calc(179px * var(--sec5-sp-s));
    overflow: visible;
  }

  .home-page .sec5-people {
    left: -16%;
    bottom: calc(-84px * var(--sec5-sp-s));
    width: min(66vw, calc(260px * var(--sec5-sp-s)));
    transform: none;
  }

  .home-page .sec5-maincopy {
    position: absolute;
    left: 27%;
    top: calc(-50px * var(--sec5-sp-s));
    width: min(73vw, calc(240px * var(--sec5-sp-s)));
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 4;
  }

  .home-page .sec5-badge {
    display: block;
    position: absolute;
    right: 2%;
    top: calc(-64px * var(--sec5-sp-s));
    width: min(28vw, calc(98px * var(--sec5-sp-s)));
    height: auto;
    pointer-events: none;
    z-index: 5;
  }

  .home-page .sec5-intro {
    margin: calc(-96px * var(--sec5-sp-s)) auto calc(34px * var(--sec5-sp-s));
    padding: calc(57px * var(--sec5-sp-s)) calc(33px * var(--sec5-sp-s));
    border-radius: calc(17px * var(--sec5-sp-s));
    max-width: none;
  }

  .home-page .sec5-intro__lead {
    margin-bottom: calc(10px * var(--sec5-sp-s));
    font-size: calc(16px * var(--sec5-sp-s));
    line-height: 1.55;
    font-weight: normal;
  }

  .home-page .sec5-intro__body {
    font-size: calc(14px * var(--sec5-sp-s));
    line-height: 1.7;
    font-weight: normal;
  }
  .home-page .sec8 {
    --sec8-sp-s: calc(100vw / 425px);
  }

  .home-page .sec8-store {
    width: calc(100% - 24px * var(--sec8-sp-s));
    padding: calc(50px * var(--sec8-sp-s)) calc(36px * var(--sec8-sp-s)) calc(42px * var(--sec8-sp-s));
    border-radius: calc(22px * var(--sec8-sp-s));
    overflow: visible;
  }

  .home-page .sec8-collage {
    min-height: calc(246px * var(--sec8-sp-s));
  }

  .home-page .sec8-collage__building {
    top: calc(42px * var(--sec8-sp-s));
    width: 50vw;
  }

  .home-page .sec8-collage__work {
    right: -5%;
    bottom: calc(-20px * var(--sec8-sp-s));
    width: 43vw;
  }

  .home-page .sec8-collage__woman {
    right: -17%;
    top: calc(-153px * var(--sec8-sp-s));
    width: 48vw;
  }

  /* TOP sec9 — 425 lock; scales to 320 */
  :is(.home-page, .product-detail-page) .sec9, .product-detail-page .sec9 {
    --sec9-sp-s: calc(100vw / 425px);
    padding: calc(50px * var(--sec9-sp-s)) calc(16px * var(--sec9-sp-s)) 0;
  }

  :is(.home-page, .product-detail-page) .sec9 {
    --sec9-m-s: calc((100vw - 32px) / 768px);
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);
    --sec9-aside-w: var(--sec9-aside-lock-w);
  }

  :is(.home-page, .product-detail-page) .sec9-sub {
    gap: calc(28px * var(--sec9-m-s));
    margin-bottom: 0;
  }

  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 12px 0 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    position: relative;
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }

  :is(.home-page, .product-detail-page) .sec9-contact {
    margin-bottom: calc(28px * var(--sec9-m-s, calc((100vw - 32px) / 768px)));
  }

  .product-detail-page .sec9-contact {
    margin-bottom: calc(28px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-contact__panel {
    padding: calc(88px * var(--sec9-sp-s)) calc(18px * var(--sec9-sp-s)) calc(20px * var(--sec9-sp-s));
    border-radius: calc(18px * var(--sec9-sp-s));
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols,
  .product-detail-page .sec9-contact__cols {
    width: min(86%, calc(315px * var(--sec9-sp-s)));
    margin-bottom: calc(20px * var(--sec9-sp-s));
  }

  /* Product list / detail — 320–425 */
  .product-list-page .plp-hero {
    background-color: var(--plp-header-bg, #efce0a);
    padding: calc(88px + 12px * var(--sec9-sp-s, 1)) 20px calc(28px * var(--sec9-sp-s, 1)) 0;
  }

  .product-list-page .plp-hero__title-sm {
    font-size: calc(17px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-hero__title-lg {
    font-size: calc(31px * var(--sec9-sp-s, 1));
  }

  .product-detail-page .pdp-hero {
    background-color: var(--pdp-header-bg, #efce0a);
    padding: calc(88px + 12px * var(--sec9-sp-s, 1)) 12px calc(28px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-intro {
    padding: 24px 0 20px;
  }

  .product-list-page .plp-intro__catch {
    font-size: calc(16px * var(--sec9-sp-s, 1));
    line-height: 1.5;
    margin-inline: 16px;
  }

  .product-list-page .plp-intro__body {
    font-size: calc(12px * var(--sec9-sp-s, 1));
    line-height: 1.75;
    margin: 14px 16px 0;
  }

  .product-list-page .plp-ranking__slider {
    padding: 20px 36px 24px;
  }

  .product-list-page .plp-ranking__track {
    padding-top: 24px;
    gap: 12px;
  }

  .product-list-page .plp-ranking__banner {
    padding: 11px 18px;
  }

  .product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 4px);
  }

  .product-list-page .plp-ranking__nav {
    width: 40px;
    height: 40px;
  }

  .product-list-page .plp-ranking__nav--prev {
    left: 0;
    transform: translate(-50%, -50%);
  }

  .product-list-page .plp-ranking__nav--next {
    right: 0;
    transform: translate(50%, -50%);
  }

  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc(100cqw - 8px);
    width: calc(100cqw - 8px);
    flex-direction: row;
    align-items: flex-start;
    gap: calc(8px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-ranking__track .plp-rank-card__media {
    flex: 0 0 42%;
    width: 42%;
  }

  .product-list-page .plp-ranking__track .plp-rank-card__body {
    flex: 1 1 58%;
    width: 58%;
    min-width: 0;
  }

  .product-list-page .plp-ranking__track .plp-rank-badge {
    left: 0;
    transform: translate(0, -50%);
    font-size: max(calc(10px * var(--sec9-sp-s, 1)), 8px);
  }

  .product-list-page .plp-ranking__track .product-image-wrap {
    padding-top: calc(8px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-ranking__track .product-chip {
    font-size: max(calc(9px * var(--sec9-sp-s, 1)), 8px);
  }

  .product-list-page .plp-ranking__track .product-name {
    font-size: max(calc(11px * var(--sec9-sp-s, 1)), 10px);
    line-height: 1.3;
  }

  .product-list-page .plp-ranking__track .product-price {
    font-size: max(calc(22px * var(--sec9-sp-s, 1)), 18px);
  }

  .product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: calc(2px * var(--sec9-sp-s, 1)) calc(8px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-ranking__track .product-tags li {
    font-size: max(calc(8px * var(--sec9-sp-s, 1)), 7px);
  }

  .product-list-page .plp-ranking__track .tag-hash {
    color: #f15a24;
  }

  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }

  .product-list-page .plp-subcat__link {
    font-size: calc(11px * var(--sec9-sp-s, 1));
  }

  .product-list-page .plp-hero__inner,
  .product-detail-page .pdp-hero__inner,
  .product-list-page .plp-inner,
  .product-detail-page .pdp-inner {
    width: min(1440px, calc(100% - 24px));
    padding-inline: 12px;
  }

  .product-list-page .plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .product-detail-page .pdp-body__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-detail-page .pdp-gallery__thumbs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .product-detail-page .pdp-size__tables {
    gap: 20px;
  }

  .product-detail-page .pdp-actions {
    flex-direction: column;
  }

  .product-detail-page .pdp-btn {
    width: 100%;
  }
}

/* =============================================================================
   TOP FV — 769–1919: proportional scale from 1920px design lock (s = 100vw / 1920).
   At 1920+ styles.css is unchanged. All px offsets use 1920 reference values × s.
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1919px) {
  .home-page .fv {
    --fv-pc-s: calc(100vw / 1920px);
    --fv-pc-h: calc(1080px * var(--fv-pc-s));
    min-height: var(--fv-pc-h);
    height: var(--fv-pc-h);
    overflow: visible;
    background-size: 100% 100%;
  }

  .home-page .shirts-layer {
    height: 100%;
  }

  .home-page .fv-content {
    min-height: var(--fv-pc-h);
    height: var(--fv-pc-h);
  }

  .home-page .fv-foreground {
    min-height: var(--fv-pc-h);
    height: var(--fv-pc-h);
  }

  .home-page .fv-foreground__figures {
    height: 100%;
  }

  /* Foreground — % widths unchanged; replace vh/vw/clamp tops with 1920 px × s */
  .home-page .fv-maincopy-wrap {
    top: calc(240px * var(--fv-pc-s));
  }
}

/* TOP FV phone — all PC (769+): 22.5% of rendered phone height overlaps sec2 (design lock). */
@media (min-width: 769px) {
  .home-page .fv,
  .home-page .fv-content,
  .home-page .fv-foreground,
  .home-page .fv-foreground__figures {
    overflow: visible;
  }

  /* Shirt grid — height-fill to artboard (48px bottom gap at 1920); applies at 1920+ too. */
  .home-page .fv {
    --fv-shirt-s: calc(100vw / 1920px);
    --fv-shirt-canvas-h: var(--fv-pc-h, calc(1080px * var(--fv-shirt-s)));
    --shirt-grid-bottom-gap: calc(48px * var(--fv-shirt-s));
    --shirt-gap: calc(16px * var(--fv-shirt-s));
    --shirt-col: calc(
      (
          var(--fv-shirt-canvas-h) - calc(120px * var(--fv-shirt-s)) -
            calc(80px * var(--fv-shirt-s)) - var(--shirt-grid-bottom-gap)
        ) / 3
    );
  }

  .home-page .shirts-layer {
    padding-top: calc(120px * var(--fv-shirt-s));
  }

  .home-page .marquee {
    margin: calc(20px * var(--fv-shirt-s)) 0;
  }

  .home-page .shirt-card {
    padding: calc(14px * var(--fv-shirt-s));
    border-radius: calc(10px * var(--fv-shirt-s));
  }

  .home-page .fv-mobilephone {
    --fv-phone-s: calc(100vw / 1920px);
    /* 1920: 36% × (1535÷1162) × 22.5% ≈ 205px — matches design comp overlap */
    --fv-phone-overlap: calc(1920px * 0.36 * 1535 / 1162 * 0.225 * var(--fv-phone-s));
    top: auto;
    bottom: 0;
    right: calc(-38.4px * var(--fv-phone-s));
    width: var(--fv-mobile-w);
    transform: translate3d(0, var(--fv-phone-overlap), 0);
  }
}

/* --- guide-flow: large laptop (below design max) --- */
@media (max-width: 1440px) {
  .guide-flow-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-flow-page .guide-flow-steps__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .guide-flow-page .guide-flow-order3__staff {
    display: none;
  }

  .guide-flow-page .guide-flow-hero,
  .guide-flow-page .guide-hero {
    padding: 120px 0 42px;
  }

  .guide-flow-page .guide-flow-hero .guide-flow-inner,
  .guide-flow-page .guide-hero .guide-flow-inner {
    padding: 26px 28px;
  }

  .guide-flow-page .guide-flow-steps {
    padding: 64px 0 48px;
  }

  .guide-flow-page .guide-flow-order3__inner {
    padding: 64px 36px 28px;
  }

  .guide-flow-page .guide-flow-order3__title-wrap {
    margin: 0 32px 64px;
  }

  .guide-flow-page .guide-design-flow {
    padding: 0 0 56px;
  }

  .guide-flow-page .guide-template-flow {
    padding: 48px 0 56px;
  }

  .guide-flow-page .guide-post-submission-flow {
    padding: 48px 0 56px;
  }

  .guide-flow-page .guide-design-flow__panel,
  .guide-flow-page .guide-template-flow__panel,
  .guide-flow-page .guide-post-submission-flow__panel {
    padding: 44px 0 52px;
  }
}

/* --- guide-flow: tablet landscape --- */
@media (max-width: 1024px) {
  .guide-flow-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-flow-page .guide-flow-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .guide-flow-page .guide-flow-hero,
  .guide-flow-page .guide-hero {
    padding: 108px 0 38px;
  }

  .guide-flow-page .guide-flow-hero .guide-flow-inner,
  .guide-flow-page .guide-hero .guide-flow-inner {
    padding: 22px 24px;
  }

  .guide-flow-page .guide-flow-steps {
    padding: 52px 0 42px;
  }

  .guide-flow-page .guide-flow-steps__card {
    padding-inline: 26px;
  }

  .guide-flow-page .guide-flow-order3__inner {
    padding: 56px 28px 22px;
  }

  .guide-flow-page .guide-flow-order3__title-wrap {
    margin: 0 24px 52px;
  }

  .guide-flow-page .guide-design-flow {
    padding: 0 0 52px;
  }

  .guide-flow-page .guide-template-flow {
    padding: 44px 0 52px;
  }

  .guide-flow-page .guide-post-submission-flow {
    padding: 44px 0 52px;
  }

  .guide-flow-page .guide-design-flow__panel,
  .guide-flow-page .guide-template-flow__panel,
  .guide-flow-page .guide-post-submission-flow__panel {
    padding: 38px 0 48px;
  }
}

/* --- guide-flow: tablet portrait / large phone --- */
@media (max-width: 768px) {
  .guide-flow-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-flow-page .guide-flow-hero,
  .guide-flow-page .guide-hero {
    padding: 96px 0 32px;
    min-height: 0;
  }

  .guide-flow-page .guide-flow-hero .guide-flow-inner,
  .guide-flow-page .guide-hero .guide-flow-inner {
    padding: 18px 20px;
  }

  .guide-flow-page .guide-flow-steps {
    padding: 44px 0 36px;
  }

  .guide-flow-page .guide-flow-steps__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .guide-flow-page .guide-flow-steps__card {
    padding-block: 44px 36px;
    padding-inline: 22px;
  }

  .guide-flow-page .guide-flow-order3__inner {
    padding: 48px 22px 18px;
  }

  .guide-flow-page .guide-flow-order3__title-wrap {
    margin: 0 0 44px;
    justify-content: center;
  }

  .guide-flow-page .guide-flow-order3__cards {
    grid-template-columns: 1fr;
    top: 0;
    gap: 14px;
  }

  .guide-flow-page .guide-design-flow__panel,
  .guide-flow-page .guide-template-flow__panel,
  .guide-flow-page .guide-post-submission-flow__panel {
    padding: 30px 0 36px;
  }

  .guide-flow-page .guide-design-flow {
    padding: 0 0 48px;
  }

  .guide-flow-page .guide-template-flow {
    padding: 40px 0 48px;
  }

  .guide-flow-page .guide-post-submission-flow {
    padding: 40px 0 48px;
  }

  .guide-flow-page .guide-design-flow__text,
  .guide-flow-page .guide-template-flow__text,
  .guide-flow-page .guide-post-submission-flow__text {
    height: auto;
    justify-content: flex-start;
  }

  .guide-flow-page .guide-design-flow__row,
  .guide-flow-page .guide-template-flow__row,
  .guide-flow-page .guide-post-submission-flow__row {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  .guide-flow-page .guide-design-flow__row:last-child {
    width: 100%;
    gap: 18px;
  }

  .guide-flow-page .guide-design-flow__row--finale {
    grid-template-columns: 1fr;
  }

  .guide-flow-page .guide-design-flow__shot--plain {
    justify-content: center;
  }

  .guide-flow-page .guide-design-flow__heading,
  .guide-flow-page .guide-template-flow__heading,
  .guide-flow-page .guide-post-submission-flow__heading {
    padding-block: 14px 10px;
    font-size: 19px;
  }

  .guide-flow-page .guide-design-flow__cta-stack {
    padding: 24px 16px;
  }

  .guide-flow-page .guide-design-flow__cta-card {
    width: 100%;
    padding: 20px 16px 24px;
  }

  .guide-flow-page .fv-header__util {
    height: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    border-radius: 0;
  }

  .guide-flow-page .fv-header__util .menu-btn {
    width: 28px;
    height: 28px;
    gap: 5px;
    background: transparent;
    border-radius: 0;
  }

  .guide-flow-page .fv-header__util .menu-btn span {
    height: 3px;
    width: 100%;
    margin: 0;
    background: #f15a24;
  }

  /* Tap to zoom flow screenshots (see app.js) */
  .guide-flow-page .guide-design-flow__card-inner img,
  .guide-flow-page .guide-template-flow__card-inner img,
  .guide-flow-page .guide-post-submission-flow__card-inner img,
  .guide-flow-page .guide-design-flow__media-img {
    cursor: zoom-in;
  }
}

/* --- guide-flow: small phone --- */
@media (max-width: 480px) {
  .guide-flow-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-flow-page .guide-flow-hero,
  .guide-flow-page .guide-hero {
    padding: 88px 0 26px;
  }

  .guide-flow-page .guide-flow-hero .guide-flow-inner,
  .guide-flow-page .guide-hero .guide-flow-inner {
    padding: 14px 16px;
  }

  .guide-flow-page .guide-flow-hero__inner {
    gap: 10px;
  }

  .guide-flow-page .guide-flow-steps {
    padding: 40px 0 28px;
  }

  .guide-flow-page .guide-flow-steps__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .guide-flow-page .guide-flow-steps__card {
    --guide-step-badge: 40px;
    padding-block: 38px 26px;
    padding-inline: 18px;
    border-radius: 16px;
  }

  .guide-flow-page .guide-flow-steps__num {
    font-size: 17px;
  }

  .guide-flow-page .guide-flow-steps__icon {
    width: 80px;
    height: 80px;
  }

  .guide-flow-page .guide-flow-steps__heading {
    font-size: 17px;
  }

  .guide-flow-page .guide-flow-steps__text {
    font-size: 13px;
  }

  .guide-flow-page .guide-flow-steps__notes p {
    font-size: 13px;
  }

  .guide-flow-page .guide-flow-order3__inner {
    padding: 40px 16px 14px;
    border-radius: 18px;
  }

  .guide-flow-page .guide-flow-order3__title-wrap {
    margin: 0 0 36px;
  }

  .guide-flow-page .guide-flow-order3__card {
    min-height: 0;
    padding: 18px 14px;
  }

  .guide-flow-page .guide-design-flow {
    padding: 0px;
  }

  .guide-flow-page .guide-template-flow {
    padding: 36px 0 0;
  }

  .guide-flow-page .guide-post-submission-flow {
    padding: 36px 0 0;
  }

  .guide-flow-page .guide-design-flow__panel,
  .guide-flow-page .guide-template-flow__panel,
  .guide-flow-page .guide-post-submission-flow__panel {
    padding: 22px 0 28px;
  }

  .guide-flow-page .guide-design-flow__page-title,
  .guide-flow-page .guide-template-flow__page-title,
  .guide-flow-page .guide-post-submission-flow__page-title {
    margin-bottom: 24px;
  }

  .guide-flow-page .guide-design-flow__body,
  .guide-flow-page .guide-template-flow__body,
  .guide-flow-page .guide-post-submission-flow__body {
    font-size: 14px;
  }

  .guide-flow-page .guide-design-flow__card,
  .guide-flow-page .guide-template-flow__card,
  .guide-flow-page .guide-post-submission-flow__card {
    padding: 14px;
  }

  .guide-flow-page .guide-design-flow__card-inner,
  .guide-flow-page .guide-template-flow__card-inner,
  .guide-flow-page .guide-post-submission-flow__card-inner {
    height: auto;
    min-height: min(300px, 58vw);
  }

  .guide-flow-page .guide-design-flow__cta-title {
    font-size: 15px;
  }

  .guide-flow-page .guide-design-flow__cta-btn {
    min-width: 0;
    width: 100%;
    font-size: 15px;
    padding: 12px 16px;
  }
}

/* =============================================================================
   guide-design-tool.html (body.guide-design-tool-page)
   ============================================================================= */

@media (max-width: 1440px) {
  .guide-design-tool-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-design-tool-page .guide-design-tool-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 1024px) {
  .guide-design-tool-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-design-tool-page .guide-hero,
  .guide-design-tool-page .guide-flow-hero {
    padding: 108px 0 38px;
  }

  .guide-design-tool-page .guide-hero .guide-flow-inner,
  .guide-design-tool-page .guide-flow-hero .guide-flow-inner {
    padding: 22px 24px;
  }

  .guide-design-tool-page .guide-design-tool-nav {
    padding: 56px 0 40px;
  }

  .guide-design-tool-page .guide-design-tool-nav__lead {
    margin-bottom: 36px;
    font-size: 14px;
  }

  .guide-design-tool-page .text-guide__inner,
  .guide-design-tool-page .transform-guide__inner,
  .guide-design-tool-page .image-guide__inner,
  .guide-design-tool-page .stamp-guide__inner,
  .guide-design-tool-page .save-guide__inner {
    padding-inline: 0;
  }

  .guide-design-tool-page .design-simulator {
    padding: 12px 0 56px;
  }

  .guide-design-tool-page .design-simulator__block {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }

  .guide-design-tool-page .text-guide,
  .guide-design-tool-page .transform-guide,
  .guide-design-tool-page .image-guide,
  .guide-design-tool-page .stamp-guide,
  .guide-design-tool-page .save-guide {
    padding: 44px 0 64px;
  }

  .guide-design-tool-page .text-guide__list,
  .guide-design-tool-page .image-guide__list,
  .guide-design-tool-page .save-guide__list {
    gap: 56px;
  }

  .guide-design-tool-page .text-guide__card,
  .guide-design-tool-page .image-guide__card,
  .guide-design-tool-page .save-guide__card {
    padding: 36px 28px;
  }

  .guide-design-tool-page .text-guide__title-img,
  .guide-design-tool-page .transform-guide__title-img,
  .guide-design-tool-page .image-guide__title-img,
  .guide-design-tool-page .stamp-guide__title-img,
  .guide-design-tool-page .save-guide__title-img {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .guide-design-tool-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-design-tool-page .guide-hero,
  .guide-design-tool-page .guide-flow-hero {
    padding: 96px 0 32px;
    min-height: 0;
  }

  .guide-design-tool-page .guide-hero .guide-flow-inner,
  .guide-design-tool-page .guide-flow-hero .guide-flow-inner {
    padding: 18px 20px;
  }

  .guide-design-tool-page .guide-design-tool-nav {
    padding: 44px 0 32px;
  }

  .guide-design-tool-page .guide-design-tool-nav__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .guide-design-tool-page .guide-design-tool-nav__card {
    min-height: 56px;
    padding: 14px 40px 14px 16px;
    font-size: 15px;
  }

  .guide-design-tool-page .text-guide__title-img,
  .guide-design-tool-page .transform-guide__title-img,
  .guide-design-tool-page .stamp-guide__title-img {
    width: min(240px, 100%);
  }

  .guide-design-tool-page .save-guide__title-img {
    width: min(476px, 90%);
  }

  .guide-design-tool-page .transform-guide__title {
    margin: 0;
  }

  .guide-design-tool-page .design-simulator__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .guide-design-tool-page .design-simulator__head-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .guide-design-tool-page .design-simulator__head-icon {
    width: 56px;
    height: 56px;
  }

  .guide-design-tool-page .design-simulator__head-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 19px;
  }

  .guide-design-tool-page .design-simulator__desc {
    font-size: 15px;
  }

  .guide-design-tool-page .design-simulator__screen {
    padding: 12px;
    display: flex;
    justify-content: center;
  }

  .guide-design-tool-page .design-simulator__screen img,
  .guide-design-tool-page .design-simulator__screen--phone img {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .guide-design-tool-page .text-guide__card-title,
  .guide-design-tool-page .transform-guide__card-title,
  .guide-design-tool-page .image-guide__card-title,
  .guide-design-tool-page .stamp-guide__card-title,
  .guide-design-tool-page .save-guide__card-title {
    font-size: 18px;
  }

  .guide-design-tool-page .text-guide__card-text,
  .guide-design-tool-page .transform-guide__card-text,
  .guide-design-tool-page .image-guide__card-text,
  .guide-design-tool-page .stamp-guide__card-text,
  .guide-design-tool-page .save-guide__card-text {
    font-size: 15px;
  }

  .guide-design-tool-page .text-guide__media {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .guide-design-tool-page .text-guide__media-img,
  .guide-design-tool-page .text-guide__list > .text-guide__card:nth-child(1) .text-guide__media-img:nth-child(2),
  .guide-design-tool-page .text-guide__list > .text-guide__card:nth-child(2) .text-guide__media-img:nth-child(1) {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .guide-design-tool-page .stamp-guide__media {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .guide-design-tool-page .stamp-guide__media-img {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .guide-design-tool-page .transform-guide__media-img {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  .guide-design-tool-page .image-guide__media {
    align-items: center;
  }

  .guide-design-tool-page .image-guide__media-img {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .guide-design-tool-page .image-guide__media--file-types {
    justify-content: flex-start;
    gap: 10px;
  }

  .guide-design-tool-page .image-guide__file-type-img {
    max-width: min(88px, 28vw);
  }

  .guide-design-tool-page img[src="https://print-world.jp/resource/a5cf2a20c446ff4403d6b232e8b9d01784079427"] {
    max-width: 100%;
  }

  .guide-design-tool-page .text-guide__card,
  .guide-design-tool-page .image-guide__card,
  .guide-design-tool-page .save-guide__card {
    padding: 28px 20px;
  }

  .guide-design-tool-page .text-guide__card {
    padding: 28px 28px;
  }

  .guide-design-tool-page .text-guide__list,
  .guide-design-tool-page .image-guide__list,
  .guide-design-tool-page .save-guide__list {
    gap: 40px;
  }

  .guide-design-tool-page .text-guide,
  .guide-design-tool-page .transform-guide,
  .guide-design-tool-page .image-guide,
  .guide-design-tool-page .stamp-guide,
  .guide-design-tool-page .save-guide {
    padding: 36px 0 56px;
  }

  .guide-design-tool-page .design-simulator {
    padding: 8px 0 48px;
  }

  .guide-design-tool-page .fv-header__util {
    height: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    border-radius: 0;
  }

  .guide-design-tool-page .fv-header__util .menu-btn {
    width: 28px;
    height: 28px;
    gap: 5px;
    background: transparent;
    border-radius: 0;
  }

  .guide-design-tool-page .fv-header__util .menu-btn span {
    height: 3px;
    width: 100%;
    margin: 0;
    background: #f15a24;
  }

  .guide-design-tool-page .design-simulator__screen img,
  .guide-design-tool-page .text-guide__media-img,
  .guide-design-tool-page .transform-guide__media-img,
  .guide-design-tool-page .image-guide__media-img,
  .guide-design-tool-page .image-guide__file-type-img,
  .guide-design-tool-page .stamp-guide__media-img,
  .guide-design-tool-page .save-guide__media-img {
    cursor: zoom-in;
  }
}

@media (max-width: 480px) {
  .guide-design-tool-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-design-tool-page .guide-hero,
  .guide-design-tool-page .guide-flow-hero {
    padding: 88px 0 24px;
  }

  .guide-design-tool-page .guide-hero .guide-flow-inner,
  .guide-design-tool-page .guide-flow-hero .guide-flow-inner {
    padding: 14px 16px;
  }

  .guide-design-tool-page .guide-design-tool-nav {
    padding: 36px 0 28px;
  }

  .guide-design-tool-page .guide-design-tool-nav__lead {
    margin-bottom: 28px;
    font-size: 13px;
  }

  .guide-design-tool-page .guide-design-tool-nav__card {
    font-size: 14px;
    padding: 12px 36px 12px 14px;
  }

  .guide-design-tool-page .design-simulator__head-title {
    font-size: 17px;
  }

  .guide-design-tool-page .text-guide__card,
  .guide-design-tool-page .image-guide__card,
  .guide-design-tool-page .save-guide__card {
    padding: 24px 16px;
  }

  .guide-design-tool-page .text-guide__card {
    padding: 24px 24px;
  }

  .guide-design-tool-page .text-guide__list,
  .guide-design-tool-page .image-guide__list,
  .guide-design-tool-page .save-guide__list {
    gap: 32px;
  }

  .guide-design-tool-page .text-guide,
  .guide-design-tool-page .transform-guide,
  .guide-design-tool-page .image-guide,
  .guide-design-tool-page .stamp-guide,
  .guide-design-tool-page .save-guide {
    padding: 28px 0 48px;
  }

  .guide-design-tool-page .design-simulator {
    padding: 4px 0 40px;
  }
}

/* =============================================================================
   guide-data-submission.html (body.guide-data-submission-page)
   ============================================================================= */

@media (max-width: 1440px) {
  .guide-data-submission-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-data-submission-page .data-submission-guide__file-type-img {
    max-width: min(120px, 22vw);
  }
}

@media (max-width: 1024px) {
  .guide-data-submission-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-data-submission-page .guide-hero,
  .guide-data-submission-page .guide-flow-hero {
    padding: 108px 0 38px;
  }

  .guide-data-submission-page .guide-hero .guide-flow-inner,
  .guide-data-submission-page .guide-flow-hero .guide-flow-inner {
    padding: 22px 24px;
  }

  .guide-data-submission-page .data-submission-guide__inner,
  .guide-data-submission-page .data-submission-spec__inner,
  .guide-data-submission-page .data-submission-print-method__inner {
    padding-inline: 0;
  }

  .guide-data-submission-page .data-submission-guide {
    padding: 56px 0 72px;
  }

  .guide-data-submission-page .data-submission-guide__intro {
    margin-bottom: 48px;
    font-size: 15px;
  }

  .guide-data-submission-page .data-submission-guide__block {
    margin-bottom: 48px;
  }

  .guide-data-submission-page .data-submission-guide__heading {
    font-size: 20px;
  }

  .guide-data-submission-page .data-submission-spec {
    padding-bottom: 72px;
  }

  .guide-data-submission-page .data-submission-spec__chapter {
    margin-bottom: 44px;
  }

  .guide-data-submission-page .data-submission-spec__chapter-title {
    font-size: 20px;
  }

  .guide-data-submission-page .data-submission-print-method {
    padding: 56px 0 72px;
  }
}

@media (max-width: 768px) {
  .guide-data-submission-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-data-submission-page .guide-hero,
  .guide-data-submission-page .guide-flow-hero {
    padding: 96px 0 32px;
    min-height: 0;
  }

  .guide-data-submission-page .guide-hero .guide-flow-inner,
  .guide-data-submission-page .guide-flow-hero .guide-flow-inner {
    padding: 18px 20px;
  }

  .guide-data-submission-page .data-submission-guide {
    padding: 44px 0 56px;
  }

  .guide-data-submission-page .data-submission-guide__intro {
    margin-bottom: 36px;
    font-size: 15px;
  }

  .guide-data-submission-page .data-submission-guide__body {
    font-size: 15px;
  }

  .guide-data-submission-page .data-submission-guide__file-types {
    gap: 12px 16px;
  }

  .guide-data-submission-page .data-submission-guide__file-type-img {
    max-width: min(100px, 26vw);
  }

  .guide-data-submission-page .data-submission-spec__lead {
    margin-bottom: 28px;
    font-size: 15px;
  }

  .guide-data-submission-page .data-submission-spec__row,
  .guide-data-submission-page .data-submission-print-method__row {
    grid-template-columns: 1fr;
    gap: 12px 0;
    padding: 16px 0;
  }

  .guide-data-submission-page .data-submission-spec__pill,
  .guide-data-submission-page .data-submission-print-method__pill {
    justify-self: start;
  }

  .guide-data-submission-page .data-submission-print-method__title-img {
    padding-inline: 0;
  }

  .guide-data-submission-page .data-submission-print-method {
    padding: 44px 0 56px;
  }

  .guide-data-submission-page .fv-header__util {
    height: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    border-radius: 0;
  }

  .guide-data-submission-page .fv-header__util .menu-btn {
    width: 28px;
    height: 28px;
    gap: 5px;
    background: transparent;
    border-radius: 0;
  }

  .guide-data-submission-page .fv-header__util .menu-btn span {
    height: 3px;
    width: 100%;
    margin: 0;
    background: #f15a24;
  }

  .guide-data-submission-page .data-submission-guide__file-type-img,
  .guide-data-submission-page .data-submission-spec__title-img,
  .guide-data-submission-page .data-submission-print-method__title-img {
    cursor: zoom-in;
  }
}

@media (max-width: 480px) {
  .guide-data-submission-page .guide-hero,
  .guide-data-submission-page .guide-flow-hero {
    padding: 88px 0 24px;
  }

  .guide-data-submission-page .guide-hero .guide-flow-inner,
  .guide-data-submission-page .guide-flow-hero .guide-flow-inner {
    padding: 14px 16px;
  }

  .guide-data-submission-page .data-submission-guide {
    padding: 36px 0 0;
  }

  .guide-data-submission-page .data-submission-guide__heading {
    font-size: 18px;
  } 

  .guide-data-submission-page .data-submission-spec {
    padding-bottom: 0px;
  }

  .guide-data-submission-page .data-submission-spec__chapter-title {
    font-size: 18px;
  }

  .guide-data-submission-page .data-submission-spec__bullets,
  .guide-data-submission-page .data-submission-print-method__bullets {
    font-size: 14px;
  }

  .guide-data-submission-page .data-submission-print-method {
    padding: 36px 0 48px;
  }
}

/* =============================================================================
   guide-print-method.html (body.guide-print-method-page)
   ============================================================================= */

@media (max-width: 1440px) {
  .guide-print-method-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }
}

@media (max-width: 1024px) {
  .guide-print-method-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-print-method-page .guide-hero,
  .guide-print-method-page .guide-flow-hero {
    padding: 108px 0 38px;
  }

  .guide-print-method-page .guide-hero .guide-flow-inner,
  .guide-print-method-page .guide-flow-hero .guide-flow-inner {
    padding: 22px 24px;
  }

  .guide-print-method-page .print-method-intro__inner,
  .guide-print-method-page .print-method-inkjet__inner,
  .guide-print-method-page .data-submission-caution__inner,
  .guide-print-method-page .print-method-finish__inner {
    padding-inline: 0;
  }

  .guide-print-method-page .print-method-intro {
    padding: 56px 0 40px;
  }

  .guide-print-method-page .print-method-intro__lead {
    margin-bottom: 48px;
    font-size: 15px;
  }

  .guide-print-method-page .print-method-inkjet {
    padding: 20px 0 72px;
  }

  .guide-print-method-page .print-method-inkjet__body {
    margin-bottom: 48px;
    font-size: 15px;
  }

  .guide-print-method-page .print-method-inkjet__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
  }

  /* 769-1024: center the feature copy under the icon (title is already
     centered). At <=768 the text is centered by the mobile block below. */
  .guide-print-method-page .print-method-feature__text {
    text-align: center;
  }

  .guide-print-method-page .print-method-finish {
    padding: 56px 0 72px;
  }

  .guide-print-method-page .data-submission-caution {
    padding: 48px 0 64px;
  }
}

@media (max-width: 768px) {
  .guide-print-method-page .guide-flow-inner {
    width: min(1440px, calc(100% - 48px));
  }

  .guide-print-method-page .guide-hero,
  .guide-print-method-page .guide-flow-hero {
    padding: 96px 0 32px;
    min-height: 0;
  }

  .guide-print-method-page .guide-hero .guide-flow-inner,
  .guide-print-method-page .guide-flow-hero .guide-flow-inner {
    padding: 18px 20px;
  }

  .guide-print-method-page .print-method-intro {
    padding: 44px 0 32px;
  }

  .guide-print-method-page .print-method-intro__lead {
    margin-bottom: 36px;
    font-size: 15px;
  }

  .guide-print-method-page .guide-design-tool-nav__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .guide-print-method-page .guide-design-tool-nav__card {
    min-height: 56px;
    padding: 14px 40px 14px 16px;
    font-size: 15px;
  }

  .guide-print-method-page .print-method-inkjet {
    padding: 16px 0 56px;
  }

  .guide-print-method-page .print-method-inkjet__page-title-img {
    width: min(280px, 100%);
  }

  .guide-print-method-page .print-method-inkjet__subheading {
    font-size: 19px;
  }

  .guide-print-method-page .print-method-inkjet__features {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .guide-print-method-page .print-method-inkjet__photos {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .guide-print-method-page .print-method-inkjet__photos li {
    border-radius: 8px;
  }

  .guide-print-method-page .print-method-embroidery {
    padding: 16px 0 56px;
    border-top-width: 6px;
  }

  .guide-print-method-page .print-method-embroidery__title-img {
    width: 109px;
    height: auto;
  }

  .guide-print-method-page .print-method-embroidery__lead {
    margin-bottom: 48px;
    font-size: 15px;
  }

  .guide-print-method-page .print-method-embroidery__photos {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .guide-print-method-page .print-method-embroidery__photos li {
    border-radius: 8px;
  }

  .guide-print-method-page .print-method-embroidery__notes {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }

  .guide-print-method-page .print-method-embroidery__desktop-break {
    display: none;
  }

  .guide-print-method-page .print-method-feature__title {
    font-size: 17px;
  }

  .guide-print-method-page .print-method-feature__text {
    text-align: center;
  }

  .guide-print-method-page .data-submission-caution {
    padding: 40px 0 56px;
  }

  .guide-print-method-page .data-submission-caution__list {
    gap: 40px;
  }

  .guide-print-method-page .data-submission-caution__title-img {
    width: min(420px, 100%);
    padding: 0 16px;
  }

  .guide-print-method-page .data-submission-caution__card {
    padding: 24px 28px;
  }

  .guide-print-method-page .data-submission-caution__media-img {
    max-width: 100%;
    padding-inline: 0;
  }

  .guide-print-method-page .print-method-finish {
    padding: 44px 0 56px;
  }

  .guide-print-method-page .print-method-finish__title-img {
    padding: 0 16px; 
  } 

  .guide-print-method-page .print-method-finish__lead,
  .guide-print-method-page .print-method-finish__subheading {
    font-size: 19px;
    padding-inline: 0;
  }

  .guide-print-method-page .print-method-finish__media-img {
    padding: 20px 0;
    max-width: 100%;
  }

  .guide-print-method-page .fv-header__util {
    height: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    border-radius: 0;
  }

  .guide-print-method-page .fv-header__util .menu-btn {
    width: 28px;
    height: 28px;
    gap: 5px;
    background: transparent;
    border-radius: 0;
  }

  .guide-print-method-page .fv-header__util .menu-btn span {
    height: 3px;
    width: 100%;
    margin: 0;
    background: #f15a24;
  }

  .guide-print-method-page .print-method-feature__icon img,
  .guide-print-method-page .data-submission-caution__media-img,
  .guide-print-method-page .print-method-finish__media-img {
    cursor: zoom-in;
  }
}

@media (max-width: 480px) {
  .guide-print-method-page .guide-hero,
  .guide-print-method-page .guide-flow-hero {
    padding: 88px 0 24px;
  }

  .guide-print-method-page .guide-hero .guide-flow-inner,
  .guide-print-method-page .guide-flow-hero .guide-flow-inner {
    padding: 14px 16px;
  }

  .guide-print-method-page .print-method-intro {
    padding: 36px 0 28px;
  }

  .guide-print-method-page .print-method-inkjet {
    padding: 12px 0 48px;
  }

  .guide-print-method-page .print-method-embroidery {
    padding: 12px 0 48px;
  }

  .guide-print-method-page .print-method-inkjet__subheading {
    font-size: 17px;
  }

  .guide-print-method-page .data-submission-caution__card-title {
    font-size: 17px;
  }

  .guide-print-method-page .data-submission-caution__card {
    padding: 20px 24px;
  }

  .guide-print-method-page .print-method-finish__text {
    font-size: 13px;
  }

  .guide-print-method-page .data-submission-caution__list {
    gap: 28px;
  }
}

/* Full-width drawer on phone (reference: corporate JP mobile nav) */
@media (max-width: 768px) {
  .site-menu__panel {
    width: 100%;
    max-width: none;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }
}

/* --- Global mobile: menu drawer padding (≤480px, all pages) --- */
@media (max-width: 480px) {
  .site-menu__panel {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
}

/* =============================================================================
   Site footer (all pages)
   ============================================================================= */

/* Mobile type: do not optically thicken vs PC (iOS Hiragino reads heavier). */
@media (max-width: 768px) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media (max-width: 768px) {
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .site-footer__company {
    font-size: 22px;
  }

  .site-footer {
    padding: 56px 32px 88px;
  }
}

/* Footer 320–768 only: full opacity + normal weight on all text/parts. */
@media (min-width: 320px) and (max-width: 768px) {
  .site-footer,
  .site-footer * {
    opacity: 1 !important;
    font-weight: normal !important;
  }
}

/* Sec9 320–768 only: all text normal weight (pay/ship cards + contact actions). */
@media (min-width: 320px) and (max-width: 768px) {
  .sec9,
  .sec9 * {
    font-weight: normal !important;
  }
}

/* Sec2 products 320–768 only: all text normal weight inside .sec2-products. */
@media (min-width: 320px) and (max-width: 768px) {
  .home-page .sec2-products,
  .home-page .sec2-products * {
    font-weight: normal !important;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 40px 20px 64px;
  }
}

/* --- Product list / detail: tablet (426–767) --- */
@media (min-width: 426px) and (max-width: 767px) {
  .product-list-page .plp-hero {
    padding: 108px 20px 32px 0;
  }

  .product-list-page .plp-intro {
    padding: 28px 0 24px;
  }

  .product-list-page .plp-ranking__slider {
    padding: 24px 52px 28px;
  }

  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc((100cqw - 16px) / 2);
    width: calc((100cqw - 16px) / 2);
  }

  .product-list-page .plp-inner {
    width: min(1440px, calc(100% - 32px));
  }

  .product-list-page .plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

/* --- Product list / detail: small laptop --- */
@media (max-width: 1024px) {
  .product-list-page .plp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .product-list-page .plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .product-list-page .plp-intro__catch {
    margin-inline: 16px;
  }

  .product-list-page .plp-intro__body {
    margin: 16px 16px 0;
  }

  .product-list-page .plp-ranking__banner-row {
    padding: 0 12px;
  }

  .product-list-page .plp-ranking__panel {
    padding-top: 32px;
  }

  .product-list-page .plp-ranking__banner {
    max-width: calc(100% - 16px);
    padding: 13px 20px;
  }

  .product-list-page .plp-ranking__banner-title {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 6px;
    gap: 0.8em;
    font-size: 13px;
  }
}

/* --- Product list: subcategory grid narrow tablet (426–767) --- */
@media (min-width: 426px) and (max-width: 767px) {
  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Product list: mobile-only ranking track (≤767) --- */
@media (max-width: 767px) {
  .product-list-page .plp-ranking__track {
    padding-top: 24px;
    gap: 12px;
  }
}

/* --- Product list: narrow tablet layout (426–560) --- */
@media (min-width: 426px) and (max-width: 560px) {
  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc(100cqw - 8px);
    width: calc(100cqw - 8px);
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .product-list-page .plp-ranking__track .plp-rank-card__media {
    flex: 0 0 42%;
    width: 42%;
  }

  .product-list-page .plp-ranking__track .plp-rank-card__body {
    flex: 1 1 58%;
    width: 58%;
    min-width: 0;
  }

  .product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }

  .product-list-page .plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Product list: mid tablet layout (561–767) --- */
@media (min-width: 561px) and (max-width: 767px) {
  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc((100cqw - 12px) / 2);
    width: calc((100cqw - 12px) / 2);
  }

  .product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}

/* --- Product list: tablet layout tuning (426–767) --- */
@media (min-width: 426px) and (max-width: 767px) {
  .product-list-page .plp-hero {
    padding: 100px 16px 32px 0;
  }

  .product-list-page .plp-hero__inner {
    padding-inline: 16px;
  }

  .product-list-page .plp-hero__title-sm {
    font-size: clamp(19px, 3.8vw, 26px);
  }

  .product-list-page .plp-hero__title-lg {
    font-size: clamp(34px, 7.2vw, 50px);
  }

  .product-list-page .plp-intro__catch {
    margin-inline: 20px;
    font-size: clamp(17px, 3vw, 22px);
  }

  .product-list-page .plp-intro__body {
    margin: 16px 20px 0;
    font-size: 13px;
    line-height: 1.75;
  }

  .product-list-page .plp-ranking {
    padding: 24px 0 32px;
  }

  .product-list-page .plp-ranking__slider {
    padding: 28px 36px 24px;
  }

  .product-list-page .plp-ranking__nav {
    width: 44px;
    height: 44px;
  }

  .product-list-page .plp-ranking__banner {
    padding: 12px 28px;
  }

  .product-list-page .plp-ranking__banner-title {
    font-size: clamp(12px, 2.1vw, 15px);
    gap: 0.9em;
  }

  .product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 4px);
  }

  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .product-list-page .plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

/* --- Product list: preserve 1920px layout from 769px up (margins scale only).
   425–768 uses the tablet block at file end (1-up ranking + 3-col grids). --- */
@media (min-width: 769px) {
  .product-list-page .plp-inner {
    width: min(1440px, calc(100% - clamp(20px, 2.5vw, 48px)));
    padding-inline: 0;
  }

  .product-list-page .plp-ranking__panel {
    padding-top: 40px;
  }

  .product-list-page .plp-ranking__track {
    gap: 16px;
    padding: 32px 4px 16px;
  }

  .product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }

  .product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .product-list-page .plp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px 16px;
  }
}

/* Three-up cqw cards only at true 1920+ (do not shrink 768–1919) */
@media (min-width: 1920px) {
  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc((100cqw - 32px) / 3);
    width: calc((100cqw - 32px) / 3);
  }
}

/* --- Product list: hero band — 768–1919 proportional scale (1920 lock in styles.css) --- */
@media (min-width: 768px) and (max-width: 1919px) {
  .product-list-page .plp-hero {
    --plp-hero-s: calc(100vw / 1920px);
    padding: calc(240px * var(--plp-hero-s)) calc(29px * var(--plp-hero-s)) calc(80px * var(--plp-hero-s)) 0;
  }

  .product-list-page .plp-hero__inner {
    width: min(calc(1440px * var(--plp-hero-s)), calc(100% - 48px * var(--plp-hero-s)));
    padding-inline: calc(29px * var(--plp-hero-s));
  }

  .product-list-page .plp-hero__title-sm {
    font-size: calc(47px * var(--plp-hero-s));
  }

  .product-list-page .plp-hero__title-lg {
    font-size: calc(91px * var(--plp-hero-s));
  }
}

@media (min-width: 1920px) {
  .product-list-page .plp-hero__inner {
    padding-inline: 29px;
  }
}

/* --- Product list: intro copy — 768–1919 proportional scale (1920 lock in styles.css) --- */
@media (min-width: 768px) and (max-width: 1919px) {
  .product-list-page .plp-intro {
    --plp-intro-s: calc(100vw / 1920px);
  }

  .product-list-page .plp-intro__inner {
    width: min(calc(1440px * var(--plp-intro-s)), calc(100% - 48px * var(--plp-intro-s)));
    padding-inline: 0;
  }

  .product-list-page .plp-intro__catch {
    margin-inline: calc(32px * var(--plp-intro-s));
    font-size: calc(26px * var(--plp-intro-s));
  }

  .product-list-page .plp-intro__body {
    margin: calc(20px * var(--plp-intro-s)) calc(35px * var(--plp-intro-s)) 0;
  }
}

/* --- Product list: ranking panel — 769–1919: lock image/type to 1920 size (no shrink) --- */
@media (min-width: 769px) and (max-width: 1919px) {
  .product-list-page .plp-ranking {
    /* Keep panel width fluid; do NOT scale content with viewport */
    --plp-ranking-s: 1;
    --plp-ranking-card-w: 488px; /* 1920 three-up card width */
    --plp-ranking-w: min(
      calc(1440px * 1.1),
      calc(100% - 36px)
    );
  }

  .product-list-page .plp-ranking__outer {
    width: var(--plp-ranking-w);
    padding-inline: 0;
  }

  .product-list-page .plp-ranking__panel {
    padding-top: calc(40px * var(--plp-ranking-s));
    border-radius: calc(16px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__banner-row {
    padding-inline: calc(32px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__banner {
    max-width: calc(100% - 24px * var(--plp-ranking-s));
    padding: calc(17px * var(--plp-ranking-s)) calc(58px * var(--plp-ranking-s));
    margin-left: 0;
    margin-right: auto;
    box-sizing: border-box;
  }

  .product-list-page .plp-ranking__banner-title {
    flex-wrap: nowrap;
    white-space: nowrap;
    row-gap: 0;
    gap: 1.4em;
    font-size: 24px;
  }

  /* 1025–1919: keep banner at 1920 size; 679–1024 scales in final block below */
  @media (min-width: 1025px) {
    .product-list-page .plp-ranking__banner-title {
      font-size: 24px;
    }
  }

  .product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 6px);
  }

  .product-list-page .plp-ranking__slider {
    padding: calc(8px * var(--plp-ranking-s)) calc(44px * var(--plp-ranking-s)) calc(24px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__track {
    gap: calc(12px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 var(--plp-ranking-card-w);
    width: var(--plp-ranking-card-w);
    min-width: var(--plp-ranking-card-w);
    box-sizing: border-box;
  }

  .product-list-page .plp-ranking__track .plp-rank-card__body {
    min-width: 0;
    overflow-x: clip;
  }

  .product-list-page .plp-ranking__track .product-name {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .product-list-page .plp-ranking__track .product-tags li {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .product-list-page .plp-ranking__track .plp-rank-badge {
    font-size: 12px;
  }

  .product-list-page .plp-ranking__track .product-chip {
    font-size: 14px;
  }

  .product-list-page .plp-ranking__track .product-name {
    font-size: 18px;
    line-height: 1.3;
  }

  .product-list-page .plp-ranking__track .product-price {
    font-size: 36px;
  }

  .product-list-page .plp-ranking__track .product-tags li {
    font-size: 12px;
  }

  .product-list-page .plp-ranking__nav {
    width: calc(52px * var(--plp-ranking-s));
    height: calc(52px * var(--plp-ranking-s));
    border-width: calc(2px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__nav span {
    width: calc(10px * var(--plp-ranking-s));
    height: calc(10px * var(--plp-ranking-s));
    border-bottom-width: calc(2.5px * var(--plp-ranking-s));
    border-left-width: calc(2.5px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__nav--prev span {
    margin-left: calc(4px * var(--plp-ranking-s));
  }

  .product-list-page .plp-ranking__nav--next span {
    margin-right: calc(4px * var(--plp-ranking-s));
  }

  /* 769–1439: 2 cards visible, same locked card size as 1920 */
  @media (max-width: 1439px) {
    .product-list-page .plp-ranking__track .product-card {
      flex: 0 0 var(--plp-ranking-card-w);
      width: var(--plp-ranking-card-w);
      min-width: var(--plp-ranking-card-w);
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
    }

    .product-list-page .plp-ranking__track .plp-rank-card__media {
      flex: 0 0 40%;
      width: 40%;
      margin-inline: 0;
    }

    .product-list-page .plp-ranking__track .plp-rank-card__body {
      flex: 1 1 60%;
      width: 60%;
      min-width: 0;
    }

    .product-list-page .plp-ranking__track .product-tags {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, auto);
      grid-auto-flow: column;
    }
  }

  /* 1440–1919: 3 cards, same locked card size */
  @media (min-width: 1440px) {
    .product-list-page .plp-ranking__track {
      padding-top: 38px;
    }

    .product-list-page .plp-ranking__track .product-card {
      display: grid;
      grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
      column-gap: 8px;
      flex: 0 0 var(--plp-ranking-card-w);
      width: var(--plp-ranking-card-w);
      min-width: var(--plp-ranking-card-w);
      align-items: start;
      overflow: visible;
      padding-top: 8px;
      box-sizing: border-box;
    }

    .product-list-page .plp-ranking__track .plp-rank-card__media {
      grid-column: 1;
      flex: unset;
      width: auto;
      min-width: 0;
      overflow: visible;
      position: relative;
      z-index: 1;
    }

    .product-list-page .plp-ranking__track .product-image-wrap {
      overflow: visible;
      padding-top: 10px;
      box-sizing: border-box;
    }

    .product-list-page .plp-ranking__track .plp-rank-badge {
      top: 10px;
      left: 0;
      transform: translate(0, -50%);
    }

    .product-list-page .plp-ranking__track .plp-rank-card__body {
      grid-column: 2;
      flex: unset;
      width: auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.12em;
      overflow: visible;
      position: relative;
      z-index: 2;
    }

    .product-list-page .plp-ranking__track .product-chip {
      flex-shrink: 0;
      font-size: 14px;
    }

    .product-list-page .plp-ranking__track .product-name {
      font-size: 18px;
      line-height: 1.25;
    }

    .product-list-page .plp-ranking__track .product-price {
      font-size: 36px;
      flex-shrink: 0;
    }

    .product-list-page .plp-ranking__track .product-tags {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, auto);
      grid-auto-flow: column;
      margin-top: 0.2em;
      flex-shrink: 1;
      min-height: 0;
    }
  }
}

/* --- Product list: subcategory + product grid — 768–1919 proportional scale (1920 lock in styles.css) --- */
@media (min-width: 768px) and (max-width: 1919px) {
  .product-list-page .plp-subcat,
  .product-list-page .plp-grid-section {
    --plp-content-s: calc(100vw / 1920px);
  }

  .product-list-page .plp-subcat .plp-inner,
  .product-list-page .plp-grid-section .plp-inner {
    width: min(calc(1440px * var(--plp-content-s)), calc(100% - 48px * var(--plp-content-s)));
    padding-inline: 0;
    margin-inline: auto;
  }

  .product-list-page .plp-subcat__link {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .product-list-page .plp-subcat__title {
    font-size: max(calc(18px * var(--plp-content-s)), 16px);
  }

  /* 768–1023: 3 columns — keeps # + label on one line */
  @media (max-width: 1023px) {
    .product-list-page .plp-subcat__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 8px;
    }

    .product-list-page .plp-subcat__link {
      font-size: 13px;
    }
  }

  /* 1024–1439: 4 columns */
  @media (min-width: 1024px) and (max-width: 1439px) {
    .product-list-page .plp-subcat__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px 10px;
    }

    .product-list-page .plp-subcat__link {
      font-size: 13px;
    }

    .product-list-page .plp-subcat__title {
      font-size: 17px;
    }
  }

  /* 1440–1919: 6 columns */
  @media (min-width: 1440px) {
    .product-list-page .plp-subcat__grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px 12px;
    }

    .product-list-page .plp-subcat__link {
      font-size: max(calc(13px * var(--plp-content-s)), 13px);
    }

    .product-list-page .plp-subcat__title {
      font-size: max(calc(18px * var(--plp-content-s)), 17px);
    }
  }

  /* Product grid — tags + price stay on one line */
  .product-list-page .plp-card__tags {
    flex-wrap: nowrap;
    gap: 4px 6px;
  }

  .product-list-page .plp-card__tags li {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .product-list-page .plp-card__price {
    white-space: nowrap;
  }

  /* 768–1023: 2 columns */
  @media (max-width: 1023px) {
    .product-list-page .plp-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 12px;
    }

    .product-list-page .plp-card__chip {
      font-size: 10px;
    }

    .product-list-page .plp-card__name {
      font-size: 13px;
    }

    .product-list-page .plp-card__price {
      font-size: 24px;
    }

    .product-list-page .plp-card__price span,
    .product-list-page .plp-card__tags li {
      font-size: 10px;
    }
  }

  /* 1024–1439: 3 columns */
  @media (min-width: 1024px) and (max-width: 1439px) {
    .product-list-page .plp-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px 14px;
    }

    .product-list-page .plp-card__chip {
      font-size: 10px;
    }

    .product-list-page .plp-card__name {
      font-size: 14px;
    }

    .product-list-page .plp-card__price {
      font-size: 28px;
    }

    .product-list-page .plp-card__price span,
    .product-list-page .plp-card__tags li {
      font-size: 10px;
    }
  }

  /* 1440–1919: 4 columns */
  @media (min-width: 1440px) {
    .product-list-page .plp-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px 16px;
    }

    .product-list-page .plp-card__chip {
      font-size: max(calc(10px * var(--plp-content-s)), 10px);
    }

    .product-list-page .plp-card__name {
      font-size: max(calc(15px * var(--plp-content-s)), 14px);
    }

    .product-list-page .plp-card__price {
      font-size: max(calc(36px * var(--plp-content-s)), 30px);
    }

    .product-list-page .plp-card__price span,
    .product-list-page .plp-card__tags li {
      font-size: max(calc(10px * var(--plp-content-s)), 10px);
    }
  }
}

/* --- Product list: mobile header — 320–425 (425px design lock) --- */
@media (max-width: 425px) {
  .product-list-page {
    --plp-header-s: calc(100vw / 425px);
    --plp-mobile-header-clear: calc(76px * var(--plp-header-s));
  }

  .product-list-page .fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--plp-header-s));
    min-height: var(--plp-mobile-header-clear);
    padding: calc(12px * var(--plp-header-s));
    pointer-events: none;
  }

  .product-list-page .fv-header a,
  .product-list-page .fv-header button {
    pointer-events: auto;
  }

  .product-list-page .fv-header__main {
    display: none;
  }

  .product-list-page .fv-header__left {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    gap: calc(8px * var(--plp-header-s));
    position: static;
  }

  .product-list-page .fv-logo {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: calc(56px * var(--plp-header-s));
    height: calc(52px * var(--plp-header-s));
    overflow: hidden;
  }

  .product-list-page .fv-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .product-list-page .fv-header__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .product-list-page .fv-header__brand-lead {
    font-size: calc(11px * var(--plp-header-s));
    font-weight: 500;
    line-height: 1.35;
    color: #111;
    white-space: nowrap;
  }

  .product-list-page .fv-header__brand-name {
    font-size: calc(22px * var(--plp-header-s));
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .product-list-page .fv-header__right {
    position: static;
    right: auto;
    flex: 0 0 auto;
  }

  .product-list-page .fv-header__actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .product-list-page .fv-header__compact {
    display: flex;
    align-items: flex-end;
    gap: calc(6px * var(--plp-header-s));
    margin: 0;
    padding: 0;
    height: auto;
    filter: none;
  }

  .product-list-page .fv-compact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: calc(3px * var(--plp-header-s));
    min-width: calc(44px * var(--plp-header-s));
    padding: 0 calc(2px * var(--plp-header-s));
    text-decoration: none;
    font-size: calc(10px * var(--plp-header-s));
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  .product-list-page .fv-compact-action img {
    width: calc(32px * var(--plp-header-s));
    height: calc(32px * var(--plp-header-s));
    object-fit: contain;
  }

  .product-list-page .fv-compact-action--phone {
    color: #111;
  }

  .product-list-page .fv-compact-action--mail {
    color: #d8001a;
  }

  .product-list-page .fv-compact-action--line {
    color: #06c755;
  }

  body.product-list-page .fv-header .menu-btn {
    width: calc(48px * var(--plp-header-s));
    height: calc(56px * var(--plp-header-s));
    gap: calc(5px * var(--plp-header-s));
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  body.product-list-page .fv-header .menu-btn span {
    width: calc(22px * var(--plp-header-s));
    height: calc(3px * var(--plp-header-s));
    margin: 0 auto;
    background: #f15a24;
  }

  body.product-list-page .fv-header .menu-btn:hover {
    filter: none;
  }

  body.product-list-page .fv-header .menu-btn:hover span {
    width: calc(22px * var(--plp-header-s));
  }

  .product-list-page .plp-hero {
    background-color: var(--plp-header-bg, #efce0a);
    padding: calc(var(--plp-mobile-header-clear) + 12px * var(--plp-header-s)) 20px
      calc(28px * var(--plp-header-s)) 0;
  }

  @media (max-width: 375px) {
    .product-list-page .fv-header {
      gap: calc(6px * var(--plp-header-s));
      padding: calc(10px * var(--plp-header-s));
    }

    .product-list-page .fv-header__compact {
      gap: calc(4px * var(--plp-header-s));
    }

    .product-list-page .fv-compact-action {
      min-width: calc(36px * var(--plp-header-s));
      font-size: calc(9px * var(--plp-header-s));
    }

    .product-list-page .fv-compact-action img {
      width: calc(28px * var(--plp-header-s));
      height: calc(28px * var(--plp-header-s));
    }

    body.product-list-page .fv-header .menu-btn {
      width: calc(44px * var(--plp-header-s));
      height: calc(52px * var(--plp-header-s));
    }
  }
}

/* --- Product detail: mobile header — 320–425 (425px design lock) --- */
@media (max-width: 425px) {
  .product-detail-page {
    --pdp-header-s: calc(100vw / 425px);
    --pdp-mobile-header-clear: calc(76px * var(--pdp-header-s));
  }

  .product-detail-page .fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--pdp-header-s));
    min-height: var(--pdp-mobile-header-clear);
    padding: calc(12px * var(--pdp-header-s));
    pointer-events: none;
  }

  .product-detail-page .fv-header a,
  .product-detail-page .fv-header button {
    pointer-events: auto;
  }

  .product-detail-page .fv-header__main {
    display: none;
  }

  .product-detail-page .fv-header__left {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    gap: calc(8px * var(--pdp-header-s));
    position: static;
  }

  .product-detail-page .fv-logo {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: calc(56px * var(--pdp-header-s));
    height: calc(52px * var(--pdp-header-s));
    overflow: hidden;
  }

  .product-detail-page .fv-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .product-detail-page .fv-header__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .product-detail-page .fv-header__brand-lead {
    font-size: calc(11px * var(--pdp-header-s));
    font-weight: 500;
    line-height: 1.35;
    color: #111;
    white-space: nowrap;
  }

  .product-detail-page .fv-header__brand-name {
    font-size: calc(22px * var(--pdp-header-s));
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .product-detail-page .fv-header__right {
    position: static;
    right: auto;
    flex: 0 0 auto;
  }

  .product-detail-page .fv-header__actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .product-detail-page .fv-header__compact {
    display: flex;
    align-items: flex-end;
    gap: calc(6px * var(--pdp-header-s));
    margin: 0;
    padding: 0;
    height: auto;
    filter: none;
  }

  .product-detail-page .fv-compact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: calc(3px * var(--pdp-header-s));
    min-width: calc(44px * var(--pdp-header-s));
    padding: 0 calc(2px * var(--pdp-header-s));
    text-decoration: none;
    font-size: calc(10px * var(--pdp-header-s));
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  .product-detail-page .fv-compact-action img {
    width: calc(32px * var(--pdp-header-s));
    height: calc(32px * var(--pdp-header-s));
    object-fit: contain;
  }

  .product-detail-page .fv-compact-action--phone {
    color: #111;
  }

  .product-detail-page .fv-compact-action--mail {
    color: #d8001a;
  }

  .product-detail-page .fv-compact-action--line {
    color: #06c755;
  }

  body.product-detail-page .fv-header .menu-btn {
    width: calc(48px * var(--pdp-header-s));
    height: calc(56px * var(--pdp-header-s));
    gap: calc(5px * var(--pdp-header-s));
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  body.product-detail-page .fv-header .menu-btn span {
    width: calc(22px * var(--pdp-header-s));
    height: calc(3px * var(--pdp-header-s));
    margin: 0 auto;
    background: #f15a24;
  }

  body.product-detail-page .fv-header .menu-btn:hover {
    filter: none;
  }

  body.product-detail-page .fv-header .menu-btn:hover span {
    width: calc(22px * var(--pdp-header-s));
  }

  .product-detail-page .pdp-hero {
    background-color: var(--pdp-header-bg, #efce0a);
    padding: calc(var(--pdp-mobile-header-clear) + 16px * var(--pdp-header-s)) 12px
      calc(32px * var(--pdp-header-s));
  }

  .product-detail-page .pdp-hero__inner {
    width: min(1440px, calc(100% - 24px));
    padding-inline: calc(12px * var(--pdp-header-s));
  }

  .product-detail-page .pdp-hero__title {
    font-size: calc(17px * var(--pdp-header-s));
    line-height: 1.35;
  }

  @media (max-width: 375px) {
    .product-detail-page .fv-header {
      gap: calc(6px * var(--pdp-header-s));
      padding: calc(10px * var(--pdp-header-s));
    }

    .product-detail-page .fv-header__compact {
      gap: calc(4px * var(--pdp-header-s));
    }

    .product-detail-page .fv-compact-action {
      min-width: calc(36px * var(--pdp-header-s));
      font-size: calc(9px * var(--pdp-header-s));
    }

    .product-detail-page .fv-compact-action img {
      width: calc(28px * var(--pdp-header-s));
      height: calc(28px * var(--pdp-header-s));
    }

    body.product-detail-page .fv-header .menu-btn {
      width: calc(44px * var(--pdp-header-s));
      height: calc(52px * var(--pdp-header-s));
    }
  }
}

/* --- Product detail: body — 320–425 proportional scale (425px design lock) --- */
@media (max-width: 425px) {
  .product-detail-page .pdp-body {
    --pdp-body-s: calc(100vw / 425px);
    padding: calc(24px * var(--pdp-body-s)) 0 calc(36px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-body__inner {
    gap: calc(20px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-gallery__nav {
    width: calc(32px * var(--pdp-body-s));
    height: calc(32px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-gallery__nav--prev {
    left: 0;
  }

  .product-detail-page .pdp-gallery__nav--next {
    right: 0;
  }

  .product-detail-page .pdp-gallery__nav span {
    width: calc(7px * var(--pdp-body-s));
    height: calc(7px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-gallery__meta {
    margin-top: calc(8px * var(--pdp-body-s));
    font-size: max(calc(10px * var(--pdp-body-s)), 9px);
  }

  .product-detail-page .pdp-gallery__thumbs {
    margin-top: calc(10px * var(--pdp-body-s));
    gap: 0;
  }

  .product-detail-page .pdp-point__label {
    padding: calc(14px * var(--pdp-body-s)) calc(28px * var(--pdp-body-s));
    font-size: max(calc(12px * var(--pdp-body-s)), 11px);
  }

  .product-detail-page .pdp-headline {
    margin-bottom: calc(14px * var(--pdp-body-s));
    font-size: max(calc(18px * var(--pdp-body-s)), 16px);
    line-height: 1.4;
  }

  .product-detail-page .pdp-desc p {
    font-size: max(calc(13px * var(--pdp-body-s)), 12px);
  }

  .product-detail-page .pdp-related {
    margin-bottom: calc(18px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-related__link {
    font-size: max(calc(13px * var(--pdp-body-s)), 12px);
  }

  .product-detail-page .pdp-actions {
    gap: calc(10px * var(--pdp-body-s));
    margin-bottom: calc(22px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-btn {
    padding: calc(15px * var(--pdp-body-s)) calc(18px * var(--pdp-body-s));
    font-size: max(calc(14px * var(--pdp-body-s)), 13px);
  }

  .product-detail-page .pdp-spec {
    border-radius: calc(8px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-spec th,
  .product-detail-page .pdp-spec td {
    padding: calc(12px * var(--pdp-body-s)) calc(14px * var(--pdp-body-s));
  }

  .product-detail-page .pdp-spec th {
    font-size: max(calc(12px * var(--pdp-body-s)), 11px);
  }

  .product-detail-page .pdp-spec td {
    font-size: max(calc(13px * var(--pdp-body-s)), 12px);
  }

  .product-detail-page .pdp-spec__price {
    font-size: max(calc(24px * var(--pdp-body-s)), 22px);
  }

  .product-detail-page .pdp-spec__price-note {
    font-size: max(calc(12px * var(--pdp-body-s)), 11px);
  }

  .product-detail-page .pdp-spec__material-note {
    font-size: max(calc(10px * var(--pdp-body-s)), 9px);
  }

  .product-detail-page .pdp-spec__tags li {
    font-size: max(calc(12px * var(--pdp-body-s)), 11px);
  }

  .product-detail-page .pdp-spec__brand {
    font-size: max(calc(26px * var(--pdp-body-s)), 24px);
  }

  .product-detail-page .pdp-price,
  .product-detail-page .pdp-size {
    --pdp-table-s: calc(100vw / 425px);
    padding: calc(28px * var(--pdp-table-s)) 0 calc(32px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-price {
    padding-bottom: calc(18px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-section-title,
  .product-detail-page .pdp-caution__title {
    margin-bottom: calc(8px * var(--pdp-table-s));
    font-size: max(calc(23px * var(--pdp-table-s)), 21px);
  }

  .product-detail-page .pdp-table-block__head {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8px * var(--pdp-table-s));
    margin-bottom: calc(8px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-table-block__lead,
  .product-detail-page .pdp-table-block__meta {
    font-size: max(calc(16px * var(--pdp-table-s)), 15px);
  }

  .product-detail-page .pdp-data-table {
    min-width: calc(520px * var(--pdp-table-s));
    font-size: max(calc(16px * var(--pdp-table-s)), 15px);
  }

  .product-detail-page .pdp-data-table th,
  .product-detail-page .pdp-data-table td {
    padding: calc(10px * var(--pdp-table-s)) calc(8px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-data-table thead th {
    font-size: max(calc(16px * var(--pdp-table-s)), 15px);
  }

  .product-detail-page .pdp-size__tables {
    gap: calc(12px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-caution {
    margin-top: calc(24px * var(--pdp-table-s));
  }

  .product-detail-page .pdp-caution__list li {
    font-size: max(calc(16px * var(--pdp-table-s)), 15px);
  }
}

/* --- Product list: ranking — 320–425 proportional scale (425px design lock) --- */
@media (max-width: 425px) {
  .product-list-page .plp-ranking {
    --plp-ranking-sp-s: calc(100vw / 425px);
  }

  .product-list-page .plp-ranking__panel {
    padding-top: calc(32px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__banner-row {
    padding-inline: calc(12px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__banner {
    max-width: calc(100% - calc(16px * var(--plp-ranking-sp-s)));
    padding: calc(11px * var(--plp-ranking-sp-s)) calc(16px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__banner-title {
    gap: 0.65em;
    row-gap: calc(4px * var(--plp-ranking-sp-s));
    font-size: calc(13px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + calc(4px * var(--plp-ranking-sp-s)));
  }

  .product-list-page .plp-ranking__slider {
    padding: calc(18px * var(--plp-ranking-sp-s)) calc(26px * var(--plp-ranking-sp-s))
      calc(22px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__nav {
    width: calc(32px * var(--plp-ranking-sp-s));
    height: calc(32px * var(--plp-ranking-sp-s));
    border-width: calc(1.5px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__nav span {
    width: calc(7px * var(--plp-ranking-sp-s));
    height: calc(7px * var(--plp-ranking-sp-s));
    border-bottom-width: calc(2px * var(--plp-ranking-sp-s));
    border-left-width: calc(2px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__nav--prev {
    left: calc(2px * var(--plp-ranking-sp-s));
    transform: translate(0, -50%);
  }

  .product-list-page .plp-ranking__nav--next {
    right: calc(2px * var(--plp-ranking-sp-s));
    transform: translate(0, -50%);
  }

  .product-list-page .plp-ranking__nav--prev span {
    margin-left: calc(3px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__nav--next span {
    margin-right: calc(3px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track {
    padding-top: calc(22px * var(--plp-ranking-sp-s));
    gap: calc(10px * var(--plp-ranking-sp-s));
    padding-inline: calc(2px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-card {
    flex: 0 0 calc(100cqw - calc(4px * var(--plp-ranking-sp-s)));
    width: calc(100cqw - calc(4px * var(--plp-ranking-sp-s)));
    gap: calc(6px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .plp-rank-card__media {
    flex: 0 0 40%;
    width: 40%;
  }

  .product-list-page .plp-ranking__track .plp-rank-card__body {
    flex: 1 1 60%;
    width: 60%;
    min-width: 0;
  }

  .product-list-page .plp-ranking__track .plp-rank-badge {
    font-size: calc(9px * var(--plp-ranking-sp-s));
    padding: calc(3px * var(--plp-ranking-sp-s)) calc(7px * var(--plp-ranking-sp-s))
      calc(3px * var(--plp-ranking-sp-s)) calc(5px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-image-wrap {
    padding-top: calc(6px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-chip {
    font-size: calc(9px * var(--plp-ranking-sp-s));
    padding: calc(3px * var(--plp-ranking-sp-s)) calc(6px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-name {
    margin-top: calc(3px * var(--plp-ranking-sp-s));
    font-size: calc(11px * var(--plp-ranking-sp-s));
    line-height: 1.25;
  }

  .product-list-page .plp-ranking__track .product-price {
    margin-top: calc(2px * var(--plp-ranking-sp-s));
    font-size: calc(20px * var(--plp-ranking-sp-s));
    line-height: 1;
  }

  .product-list-page .plp-ranking__track .product-price span {
    font-size: calc(7px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    margin-top: calc(4px * var(--plp-ranking-sp-s));
    gap: calc(1px * var(--plp-ranking-sp-s)) calc(5px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .product-tags li {
    font-size: calc(8px * var(--plp-ranking-sp-s));
  }

  .product-list-page .plp-ranking__track .tag-hash {
    color: #f15a24;
  }
}

/* --- Product list: pagination — 320–425 (show 3 page numbers + ellipsis) --- */
@media (max-width: 425px) {
  .product-list-page .plp-pagination {
    --plp-pagination-s: calc(100vw / 425px);
    gap: calc(10px * var(--plp-pagination-s));
    margin-top: calc(32px * var(--plp-pagination-s));
    flex-wrap: nowrap;
  }

  .product-list-page .plp-pagination__prev,
  .product-list-page .plp-pagination__next {
    flex-shrink: 0;
    padding: calc(10px * var(--plp-pagination-s)) calc(16px * var(--plp-pagination-s));
    font-size: max(calc(13px * var(--plp-pagination-s)), 12px);
  }

  .product-list-page .plp-pagination__pages {
    flex-shrink: 1;
    min-width: 0;
    justify-content: center;
    gap: calc(6px * var(--plp-pagination-s));
  }

  .product-list-page .plp-pagination__page:nth-child(n + 4) {
    display: none;
  }

  .product-list-page .plp-pagination__page {
    min-width: calc(34px * var(--plp-pagination-s));
    height: calc(34px * var(--plp-pagination-s));
    font-size: max(calc(13px * var(--plp-pagination-s)), 12px);
  }

  .product-list-page .plp-pagination__ellipsis {
    min-width: calc(34px * var(--plp-pagination-s));
    height: calc(34px * var(--plp-pagination-s));
    padding: 0 calc(8px * var(--plp-pagination-s));
    font-size: max(calc(13px * var(--plp-pagination-s)), 12px);
  }
}

/* --- Guide subpages: tap-to-zoom lightbox (app.js, ≤768px) --- */
.guide-flow-zoom {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.guide-flow-zoom.is-open {
  opacity: 1;
  visibility: visible;
}

.guide-flow-zoom__viewport {
  position: relative;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.guide-flow-zoom__pinch {
  transform-origin: center center;
  will-change: transform;
}

.guide-flow-zoom__pinch img {
  display: block;
  max-width: min(100vw - 32px, 100%);
  max-height: calc(100dvh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.guide-flow-zoom__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.guide-flow-zoom__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

html.is-guide-flow-zoom-open body {
  overflow: hidden;
}

/* --- Product detail: 426–1919 — 1920 design lock (final cascade) --- */
@media (min-width: 426px) and (max-width: 1919px) {
  .product-detail-page {
    --pdp-pc-s: calc(100vw / 1920px);
    --sec9-pc-s: calc(100vw / 1920px);
  }

    /* Hero + main content */
  .product-detail-page .pdp-inner {
    width: min(calc(1440px * var(--pdp-pc-s)), calc(100% - calc(48px * var(--pdp-pc-s))));
    padding-inline: 0;
  }

  .product-detail-page .pdp-hero {
    padding: calc(200px * var(--pdp-pc-s)) 0 calc(48px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-hero__title {
    font-size: calc(52px * var(--pdp-pc-s));
    line-height: 1.2;
  }

  .product-detail-page .pdp-body {
    padding: calc(36px * var(--pdp-pc-s)) 0 calc(52px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-body__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: calc(40px * var(--pdp-pc-s));
    align-items: start;
  }

  .product-detail-page .pdp-gallery__nav {
    width: 36px;
    height: 36px;
    box-shadow: 0 calc(2px * var(--pdp-pc-s)) calc(8px * var(--pdp-pc-s)) rgba(0, 0, 0, 0.12);
  }

  .product-detail-page .pdp-gallery__nav span {
    width: 8px;
    height: 8px;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }

  .product-detail-page .pdp-gallery__meta {
    margin-top: calc(10px * var(--pdp-pc-s));
    font-size: calc(11px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-gallery__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(10px * var(--pdp-pc-s));
    margin-top: calc(12px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-gallery__thumb {
    border-width: calc(2px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-point {
    margin-bottom: calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-point__label {
    padding: calc(14px * var(--pdp-pc-s)) calc(28px * var(--pdp-pc-s));
    font-size: calc(13px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-headline {
    margin-bottom: calc(18px * var(--pdp-pc-s));
    font-size: calc(28px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-desc {
    margin-bottom: calc(16px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-desc p {
    margin-bottom: calc(12px * var(--pdp-pc-s));
    font-size: calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-related {
    margin-bottom: calc(22px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-related__link {
    font-size: calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-actions {
    flex-direction: column;
    gap: calc(12px * var(--pdp-pc-s));
    margin-bottom: calc(28px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-btn {
    width: 100%;
    padding: calc(18px * var(--pdp-pc-s)) calc(24px * var(--pdp-pc-s));
    border-width: calc(2px * var(--pdp-pc-s));
    border-radius: calc(4px * var(--pdp-pc-s));
    font-size: calc(16px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec {
    border-width: calc(1px * var(--pdp-pc-s));
    border-radius: calc(8px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec th,
  .product-detail-page .pdp-spec td {
    padding: calc(14px * var(--pdp-pc-s)) calc(18px * var(--pdp-pc-s));
    border-bottom-width: calc(1px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec th {
    font-size: calc(13px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec td {
    font-size: calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__price {
    font-size: calc(32px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__price-note {
    font-size: calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__material-note {
    margin-top: calc(8px * var(--pdp-pc-s));
    font-size: calc(11px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__tags {
    gap: calc(8px * var(--pdp-pc-s)) calc(14px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__tags li {
    font-size: calc(13px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-spec__brand {
    font-size: calc(38px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-price,
  .product-detail-page .pdp-size {
    padding: calc(44px * var(--pdp-pc-s)) 0 calc(52px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-price {
    padding-bottom: calc(28px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-section-title {
    margin-bottom: calc(10px * var(--pdp-pc-s));
    font-size: calc(27px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-table-block__head {
    flex-direction: row;
    align-items: flex-end;
    gap: calc(20px * var(--pdp-pc-s));
    margin-bottom: calc(10px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-table-block__lead {
    font-size: calc(17px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-table-block__lead + .pdp-table-block__lead {
    margin-top: calc(2px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-table-block__meta {
    font-size: calc(17px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-data-table {
    min-width: calc(520px * var(--pdp-pc-s));
    font-size: calc(18px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-data-table th,
  .product-detail-page .pdp-data-table td {
    padding: calc(12px * var(--pdp-pc-s)) calc(10px * var(--pdp-pc-s));
    border-width: calc(1px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-data-table thead th {
    font-size: calc(18px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-size__tables {
    gap: calc(16px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-caution {
    margin-top: calc(36px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-caution__title {
    margin-bottom: calc(14px * var(--pdp-pc-s));
    font-size: calc(27px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-caution__list li {
    font-size: calc(17px * var(--pdp-pc-s));
  }

  .product-detail-page .pdp-caution__list li + li {
    margin-top: calc(6px * var(--pdp-pc-s));
  }

  /* Sec9 — same 1920 lock as desktop */
  .product-detail-page .sec9 {
    padding: calc(79px * var(--sec9-pc-s)) calc(48px * var(--sec9-pc-s)) calc(48px * var(--sec9-pc-s));
    overflow: visible;
  }

  .product-detail-page .sec9-inner {
    width: calc(1320px * var(--sec9-pc-s));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
  }

  .product-detail-page .sec9-wave__svg {
    height: calc(54px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-contact {
    margin-bottom: calc(48px * var(--sec9-pc-s));
    overflow: visible;
    padding-top: 0;
  }

  .product-detail-page .sec9-contact__hero {
    display: contents;
  }

  .product-detail-page .sec9-contact__woman-wrap {
    display: contents;
  }

  .product-detail-page .sec9-contact__woman {
    position: absolute;
    left: calc(-142px * var(--sec9-pc-s));
    bottom: calc(100% - 76px * var(--sec9-pc-s));
    width: calc(600px * var(--sec9-pc-s));
    top: calc(-320px * var(--sec9-pc-s));
    transform: none;
  }

  .product-detail-page .sec9-contact picture {
    position: absolute;
    left: calc(156px * var(--sec9-pc-s));
    bottom: calc(100% - 76px * var(--sec9-pc-s));
    top: calc(-76px * var(--sec9-pc-s));
    width: calc(568px * var(--sec9-pc-s));
    max-width: calc(100% - 300px * var(--sec9-pc-s));
    transform: none;
    flex: none;
  }

  .product-detail-page .sec9-contact__panel {
    border-radius: calc(36px * var(--sec9-pc-s));
    padding: calc(126px * var(--sec9-pc-s)) calc(40px * var(--sec9-pc-s)) calc(44px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-contact__title {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
    transform: none;
  }

  .product-detail-page .sec9-contact__main {
    padding-top: 0;
  }

  .product-detail-page .sec9-contact__cols {
    width: 80%;
    gap: calc(36px * var(--sec9-pc-s));
    margin-bottom: calc(34px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-bullets {
    font-size: calc(15px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-bullets li {
    margin-bottom: calc(10px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-contact__actions {
    width: 96%;
    gap: calc(18px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action {
    gap: calc(10px * var(--sec9-pc-s));
    min-height: calc(76px * var(--sec9-pc-s));
    padding: calc(24px * var(--sec9-pc-s)) calc(14px * var(--sec9-pc-s));
    border-radius: calc(16px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action img {
    width: calc(75px * var(--sec9-pc-s));
    height: calc(75px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action--phone img {
    width: calc(24px * var(--sec9-pc-s));
    height: calc(24px * var(--sec9-pc-s));
    margin-top: calc(8px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action__body {
    gap: calc(4px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action__main {
    font-size: calc(36px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action__sub {
    font-size: calc(14px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-action__label {
    font-size: calc(32px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-sub {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.16fr) minmax(0, 0.78fr);
    gap: calc(28px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
    min-height: 0;
  }

  .product-detail-page .sec9-ship-aside {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: calc(12px * var(--sec9-pc-s));
    height: 100%;
  }

  .product-detail-page .sec9-ship-aside__staff {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    left: calc(34px * var(--sec9-pc-s));
    bottom: calc(-48px * var(--sec9-pc-s));
    transform: scale(1.4);
    transform-origin: 50% 100%;
  }

  .product-detail-page .sec9-ship-aside__vertical {
    font-size: calc(13px * var(--sec9-pc-s));
    padding-bottom: calc(10px * var(--sec9-pc-s));
  }

  .product-detail-page .sec9-card__head {
    gap: calc(12px * var(--sec9-pc-s));
    padding: calc(16px * var(--sec9-pc-s)) calc(56px * var(--sec9-pc-s));
    border-radius: calc(30px * var(--sec9-pc-s)) calc(30px * var(--sec9-pc-s)) 0 0;
  }
}

/* --- Product detail: 426–1919 — typography locked to 1920px (layout still scales) --- */
@media (min-width: 426px) and (max-width: 1919px) {
  .product-detail-page .pdp-gallery__meta {
    font-size: 11px;
  }

  .product-detail-page .pdp-point__label {
    font-size: 13px;
  }

  .product-detail-page .pdp-headline {
    font-size: 28px;
  }

  .product-detail-page .pdp-desc p {
    font-size: 14px;
  }

  .product-detail-page .pdp-related__link {
    font-size: 14px;
  }

  .product-detail-page .pdp-btn {
    font-size: 16px;
  }

  .product-detail-page .pdp-spec th {
    font-size: 13px;
  }

  .product-detail-page .pdp-spec td {
    font-size: 14px;
  }

  .product-detail-page .pdp-spec__price {
    font-size: 32px;
  }

  .product-detail-page .pdp-spec__price-note {
    font-size: 14px;
  }

  .product-detail-page .pdp-spec__material-note {
    font-size: 11px;
  }

  .product-detail-page .pdp-spec__tags li {
    font-size: 13px;
  }

  .product-detail-page .pdp-spec__brand {
    font-size: 38px;
  }

  .product-detail-page .pdp-section-title,
  .product-detail-page .pdp-caution__title {
    font-size: 27px;
  }

  .product-detail-page .pdp-table-block__lead,
  .product-detail-page .pdp-table-block__meta {
    font-size: 17px;
  }

  .product-detail-page .pdp-data-table,
  .product-detail-page .pdp-data-table thead th {
    font-size: 18px;
  }

  .product-detail-page .pdp-caution__list li {
    font-size: 17px;
  }
}


/* --- Header: brand logo locked to 1440px size (layout still scales below) --- */
@media (min-width: 426px) and (max-width: 1440px) {
  .product-detail-page .fv-logo img {
    width: calc(360px * 1440px / 1920px);
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  .home-page .fv-logo img {
    width: calc(360px * 1440px / 1920px);
    max-width: none;
  }
}

/* --- Product detail: 426–1024 — scaled side margins (smaller than 1440 lock) --- */
@media (min-width: 426px) and (max-width: 1024px) {
  .product-detail-page {
    --pdp-side-inset: calc(12px + 10px * (100vw - 426px) / (1024px - 426px));
  }

  .product-detail-page .pdp-inner {
    width: min(calc(1440px * var(--pdp-pc-s)), calc(100% - 2 * var(--pdp-side-inset)));
  }

  .product-detail-page .sec9 {
    padding-left: var(--pdp-side-inset);
    padding-right: var(--pdp-side-inset);
  }

  .product-detail-page .sec9-contact {
    margin-bottom: calc(28px + 20px * (100vw - 426px) / (1024px - 426px));
  }

  .product-detail-page .sec9-sub {
    gap: calc(20px + 8px * (100vw - 426px) / (1024px - 426px));
  }
}

/* --- Product detail sec9: 426–768 — contact padding + stacked ship aside --- */
@media (min-width: 426px) and (max-width: 768px) {
  .product-detail-page .sec9-sub {
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);

    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  .product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-lock-w);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin-right: calc(6px + 6px * (100vw - 426px) / (768px - 426px));
    margin-bottom: 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .product-detail-page .sec9-ship-aside {
    height: auto;
  }

  .product-detail-page .sec9-ship-aside__staff {
    position: relative;
    left: auto;
    right: calc(4px + 6px * (100vw - 426px) / (768px - 426px));
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }
}

/* --- Product detail: 320–425 — final mobile cascade (425px design lock) --- */
@media (max-width: 425px) {
  .product-detail-page {
    --pdp-mobile-s: calc(100vw / 425px);
  }

  .product-detail-page .pdp-inner,
  .product-detail-page .pdp-hero__inner {
    width: min(1440px, calc(100% - 24px * var(--pdp-mobile-s)));
    padding-inline: calc(12px * var(--pdp-mobile-s));
  }

  .product-detail-page .pdp-body__inner {
    grid-template-columns: 1fr;
    gap: calc(24px * var(--pdp-mobile-s));
  }

  .product-detail-page .pdp-hero {
    padding: calc(var(--pdp-mobile-header-clear, calc(76px * var(--pdp-mobile-s))) + 16px * var(--pdp-mobile-s))
      calc(12px * var(--pdp-mobile-s)) calc(32px * var(--pdp-mobile-s));
  }

  .product-detail-page .sec9-wave__svg {
    height: calc(34px * var(--pdp-mobile-s));
  }

  .product-detail-page .sec9-inner {
    overflow: visible;
  }

  .product-detail-page .sec9-contact__cols {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--sec9-sp-s));
    width: 92%;
    margin-bottom: calc(20px * var(--sec9-sp-s));
    margin-left: auto;
    margin-right: auto;
  }

  .product-detail-page .sec9-bullets {
    display: contents;
    font-size: max(calc(13px * var(--sec9-sp-s)), 12px);
    line-height: 1.65;
  }

  .product-detail-page .sec9-bullets li {
    font-size: max(calc(13px * var(--sec9-sp-s)), 12px);
    margin-bottom: calc(8px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-contact__actions {
    grid-template-columns: 1fr;
    gap: calc(10px * var(--sec9-sp-s));
    width: 100%;
  }

  .product-detail-page .sec9-action {
    min-height: calc(72px * var(--sec9-sp-s));
    padding: calc(14px * var(--sec9-sp-s)) calc(12px * var(--sec9-sp-s));
    border-radius: calc(12px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-action__main {
    font-size: max(calc(26px * var(--sec9-sp-s)), 22px);
  }

  .product-detail-page .sec9-action__sub {
    font-size: max(calc(12px * var(--sec9-sp-s)), 11px);
  }

  .product-detail-page .sec9-action__label {
    font-size: max(calc(22px * var(--sec9-sp-s)), 18px);
  }

  .product-detail-page .sec9-sub {
    grid-template-columns: 1fr;
    gap: calc(28px * var(--sec9-sp-s));
    margin-bottom: 0;
  }

  .product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: 1;
    position: relative;
    justify-self: stretch;
    width: calc(100% + 32px * var(--sec9-sp-s));
    max-width: none;
    min-height: 0;
    height: auto;
    margin: calc(-28px * var(--sec9-sp-s)) calc(-16px * var(--sec9-sp-s)) 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .product-detail-page .sec9-ship-aside__staff {
    position: relative;
    top: auto;
    right: -4%;
    left: auto;
    bottom: 0;
    width: min(56vw, calc(360px * var(--sec9-sp-s)));
    max-width: none;
    transform: none;
  }

  .product-detail-page .sec9-card {
    width: 100%;
    max-width: calc(444px * var(--sec9-sp-s));
    margin: 0 auto;
    padding-bottom: calc(26px * var(--sec9-sp-s));
    border-radius: calc(18px * var(--sec9-sp-s));
    overflow: hidden;
  }

  .product-detail-page .sec9-card__head {
    min-height: calc(64px * var(--sec9-sp-s));
    padding: 0 calc(28px * var(--sec9-sp-s));
    border-radius: calc(18px * var(--sec9-sp-s)) calc(18px * var(--sec9-sp-s)) 0 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(18px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-card__head-main {
    font-size: max(calc(20px * var(--sec9-sp-s)), 17px);
    line-height: 1;
  }

  .product-detail-page .sec9-card__head-pill {
    padding: calc(10px * var(--sec9-sp-s)) calc(12px * var(--sec9-sp-s));
    font-size: max(calc(12px * var(--sec9-sp-s)), 10px);
    line-height: 1.35;
    overflow: visible;
  }

  .product-detail-page .sec9-pay-list {
    width: 78%;
    margin: calc(20px * var(--sec9-sp-s)) auto 0;
  }

  .product-detail-page .sec9-pay-list li {
    gap: calc(16px * var(--sec9-sp-s));
    margin-bottom: calc(10px * var(--sec9-sp-s));
    font-size: max(calc(16px * var(--sec9-sp-s)), 14px);
  }

  .product-detail-page .sec9-pay-list li::before {
    flex-basis: calc(32px * var(--sec9-sp-s));
    height: calc(32px * var(--sec9-sp-s));
    line-height: calc(32px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-card__logos {
    width: 78%;
    margin: calc(14px * var(--sec9-sp-s)) auto calc(26px * var(--sec9-sp-s));
  }

  .product-detail-page .sec9-card--ship .sec9-card__body {
    margin: calc(22px * var(--sec9-sp-s)) auto 0;
    width: 78%;
  }

  .product-detail-page .sec9-ship__lead {
    margin-bottom: calc(12px * var(--sec9-sp-s));
    font-size: max(calc(17px * var(--sec9-sp-s)), 15px);
    line-height: 1.45;
  }

  .product-detail-page .sec9-ship__note {
    margin-bottom: calc(10px * var(--sec9-sp-s));
    font-size: max(calc(12px * var(--sec9-sp-s)), 11px);
    line-height: 1.45;
  }

  .product-detail-page .sec9-ship__ems {
    margin-bottom: calc(26px * var(--sec9-sp-s));
    font-size: max(calc(17px * var(--sec9-sp-s)), 15px);
    line-height: 1.45;
  }

  .product-detail-page .sec9-card__btn {
    width: 76%;
    padding: calc(13px * var(--sec9-sp-s)) calc(18px * var(--sec9-sp-s));
    font-size: max(calc(14px * var(--sec9-sp-s)), 12px);
  }

  .product-detail-page .site-footer {
    padding: calc(40px * var(--pdp-mobile-s)) calc(20px * var(--pdp-mobile-s))
      calc(64px * var(--pdp-mobile-s));
  }
}

/* TOP sec9 contact — 320–768 final cascade (768px mobile design lock) */
@media (max-width: 768px) {
  :is(.home-page, .product-detail-page) .sec9 {
    --sec9-m-s: calc((100vw - 32px) / 768px);
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);
    --sec9-aside-w: var(--sec9-aside-lock-w);
  }

  :is(.home-page, .product-detail-page) .sec9-inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact {
    margin-bottom: calc(28px * var(--sec9-m-s));
    padding-top: 0;
    overflow: visible;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__hero,
  :is(.home-page, .product-detail-page) .sec9-contact__woman-wrap {
    display: contents;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__woman {
    position: absolute;
    left: calc(-161px * var(--sec9-m-s));
    top: calc(-276px * var(--sec9-m-s));
    bottom: auto;
    width: calc(540px * var(--sec9-m-s));
    height: auto;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact picture {
    display: block;
    position: absolute;
    left: calc(116px * var(--sec9-m-s));
    top: calc(-87px * var(--sec9-m-s));
    bottom: auto;
    width: calc(100% - 315px * var(--sec9-m-s));
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 3;
    pointer-events: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__title {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__panel {
    border-radius: calc(18px * var(--sec9-m-s));
    padding: calc(108px * var(--sec9-m-s)) calc(24px * var(--sec9-m-s)) calc(22px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-contact__cols {
    gap: calc(4px * var(--sec9-m-s));
    margin-bottom: calc(20px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-bullets li {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: medium;
  }

  :is(.home-page, .product-detail-page) .sec9-contact__actions {
    gap: calc(10px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action {
    min-height: calc(72px * var(--sec9-m-s));
    padding: calc(14px * var(--sec9-m-s)) calc(12px * var(--sec9-m-s));
    border-radius: calc(12px * var(--sec9-m-s));
  }

  :is(.home-page, .product-detail-page) .sec9-action__main {
    font-size: max(calc(26px * var(--sec9-m-s)), 22px);
  }

  :is(.home-page, .product-detail-page) .sec9-action__sub {
    font-size: max(calc(12px * var(--sec9-m-s)), 11px);
  }

  :is(.home-page, .product-detail-page) .sec9-action__label {
    font-size: max(calc(22px * var(--sec9-m-s)), 18px);
  }

  /* Staff figure — constrained width, right-aligned; no card overlap (320–768) */
  :is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    margin-top: 12px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: auto;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  :is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    position: relative;
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }
}

/* =============================================================================
   Sitewide fixed header — Excel 全体的に ④ (final cascade)
   PC (769+): transparent · SP (≤768): white bar
   ============================================================================= */
@media (max-width: 768px) {
  .fv-header {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }
}

@media (min-width: 769px) {
  .fv-header {
    background: transparent;
  }
}

/* =============================================================================
   Unified mobile header — Excel 全体的に ② (Step 3, final cascade)
   All pages match TOP: logo + brand + TEL/mail/LINE + orange menu (≤768)
   ============================================================================= */
@media (max-width: 425px) {
  body {
    --sp-header-s: calc(100vw / 425px);
    --sp-header-clear: calc(76px * var(--sp-header-s));
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  body {
    --sp-header-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --sp-header-clear: calc(76px * var(--sp-header-s));
  }
}

@media (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--sp-header-s, 1));
    min-height: var(--sp-header-clear, 76px);
    padding: calc(12px * var(--sp-header-s, 1)) calc(16px * var(--sp-header-s, 1));
    pointer-events: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    a,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    button {
    pointer-events: auto;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__main {
    display: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__left {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    gap: calc(8px * var(--sp-header-s, 1));
    position: static;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-logo {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: calc(56px * var(--sp-header-s, 1));
    height: calc(52px * var(--sp-header-s, 1));
    overflow: hidden;
    pointer-events: auto;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-logo
    img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: left center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__brand-lead {
    font-size: calc(11px * var(--sp-header-s, 1));
    font-weight: 500;
    line-height: 1.35;
    color: #111;
    white-space: nowrap;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__brand-name {
    font-size: calc(22px * var(--sp-header-s, 1));
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__right {
    position: static;
    right: auto;
    flex: 0 0 auto;
    pointer-events: auto;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__actions {
    display: flex;
    align-items: center;
    --fv-sp-icon: calc(34px * var(--sp-header-s, 1));
    --fv-sp-icon-gap: calc(10px * var(--sp-header-s, 1));
    gap: var(--fv-sp-icon-gap);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__compact {
    display: flex;
    align-items: center;
    gap: var(--fv-sp-icon-gap);
    margin: 0;
    padding: 0;
    height: auto;
    filter: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
    text-decoration: none;
    font-size: calc(10px * var(--sp-header-s, 1));
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action
    span {
    display: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action
    img {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util {
    height: auto;
    padding: 0;
    gap: var(--fv-sp-icon-gap);
    background: transparent !important;
    border-radius: 0;
    align-items: center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec {
    flex-direction: row;
    align-items: center;
    gap: var(--fv-sp-icon-gap);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec
    .header__item {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-label {
    display: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-link {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-icon {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    background-color: #f15a24 !important;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .header__login
    .btn--login {
    min-width: var(--fv-sp-icon);
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    padding: 0;
    border: 0;
    font-size: 0;
    color: transparent;
    background: transparent !important;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-login-icon {
    display: block;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action--phone {
    color: #111;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action--mail {
    color: #d8001a;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action--line {
    color: #06c755;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    gap: calc(6px * var(--sp-header-s, 1));
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    filter: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn
    span {
    width: 100%;
    height: calc(3px * var(--sp-header-s, 1));
    margin: 0;
    background: #f15a24;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn:hover {
    filter: none;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn:hover
    span {
    width: 100%;
  }

  body:is(
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page
    )
    .guide-flow-hero,
  body:is(
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page
    )
    .guide-hero {
    padding-top: calc(var(--sp-header-clear, 76px) + 20px);
    min-height: 0;
  }

  body.product-detail-page .pdp-hero {
    padding-top: calc(var(--sp-header-clear, 76px) + 12px * var(--sp-header-s, 1));
  }
}

@media (max-width: 375px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header {
    gap: calc(6px * var(--sp-header-s, 1));
    padding: calc(10px * var(--sp-header-s, 1)) calc(12px * var(--sp-header-s, 1));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__actions {
    --fv-sp-icon: calc(30px * var(--sp-header-s, 1));
    --fv-sp-icon-gap: calc(8px * var(--sp-header-s, 1));
    gap: var(--fv-sp-icon-gap);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__compact,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec {
    gap: var(--fv-sp-icon-gap);
  }
}

/* =============================================================================
   Step 4 — SVG logo + final SP header QA (final cascade)
   ============================================================================= */
@media (max-width: 768px) {
  :is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-logo
    picture {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* =============================================================================
   TOP sec1 — 426–768: scale entire 768 lock by --fv-sec1-s (60%@426 → 100%@768).
   768 lock: 100svh · shirts padding-top 116px · padding-bottom 16px.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  .home-page .fv {
    --fv-sec1-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --fv-sec1-h: calc(100svh * var(--fv-sec1-s));
    --fv-shirts-pad-top: calc(116px * var(--fv-sec1-s));
    --fv-shirts-pad: calc(16px * var(--fv-sec1-s));
    height: var(--fv-sec1-h);
    min-height: var(--fv-sec1-h);
    max-height: var(--fv-sec1-h);
    overflow: visible;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .home-page .shirts-layer {
    inset: 0;
    height: 100%;
    padding-top: var(--fv-shirts-pad-top);
    padding-bottom: var(--fv-shirts-pad);
    gap: calc(8px * var(--fv-sec1-s));
    --shirt-gap: calc(10px * var(--fv-sec1-s));
    --fv-shirts-available-h: calc(
      var(--fv-sec1-h) - var(--fv-shirts-pad-top) - var(--fv-shirts-pad)
    );
    --shirt-col: calc((var(--fv-shirts-available-h) - 2 * var(--shirt-gap)) / 3);
  }

  .home-page .shirt-card {
    padding: calc(12px * var(--fv-sec1-s));
    border-radius: calc(10px * var(--fv-sec1-s));
  }

  .home-page .fv-content {
    height: var(--fv-sec1-h);
    min-height: var(--fv-sec1-h);
  }

  .home-page .fv-foreground {
    bottom: 0;
    top: auto;
    gap: calc(10px * var(--fv-sec1-s));
  }
}

/* TOP header — 426–768: lock 768 layout; scale header with --fv-sec1-s */
@media (min-width: 426px) and (max-width: 768px) {
  body.home-page {
    --fv-sec1-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --sp-header-s: 1;
    --sp-header-clear: 100px;
  }

  body.home-page .fv-header {
    gap: calc(8px * var(--fv-sec1-s));
    min-height: calc(76px * var(--fv-sec1-s));
    padding: calc(22px * var(--fv-sec1-s)) calc(22px * var(--fv-sec1-s));
  }

  body.home-page .fv-header__left {
    flex: 0 1 auto;
    overflow: visible;
    gap: calc(8px * var(--fv-sec1-s));
  }

  body.home-page .fv-logo {
    flex: 0 0 auto;
    width: calc(56px * var(--fv-sec1-s));
    height: calc(52px * var(--fv-sec1-s));
    overflow: hidden;
  }

  /* Clip to yellow mark only — logo.png includes text that must not overlap .fv-header__brand */
  body.home-page .fv-logo img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: left center;
  }

  body.home-page .fv-header__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
    overflow: visible;
    min-width: 0;
  }

  body.home-page .fv-header__brand-lead {
    font-size: calc(11px * var(--fv-sec1-s));
  }

  body.home-page .fv-header__brand-name {
    font-size: calc(22px * var(--fv-sec1-s));
  }

  body.home-page .fv-header__compact {
    gap: var(--fv-sp-icon-gap, calc(10px * var(--fv-sec1-s)));
  }

  body.home-page .fv-header__actions {
    --fv-sp-icon: calc(34px * var(--fv-sec1-s));
    --fv-sp-icon-gap: calc(10px * var(--fv-sec1-s));
  }

  body.home-page .fv-header__util,
  body.home-page .fv-header__util .mt-ec {
    gap: var(--fv-sp-icon-gap);
  }

  body.home-page .fv-compact-action,
  body.home-page .fv-header__util .mt-ec .header__item,
  body.home-page .fv-cart-link,
  body.home-page .fv-header__util .header__login .btn--login,
  body.home-page .fv-header .menu-btn {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
  }

  body.home-page .fv-compact-action img,
  body.home-page .fv-cart-icon,
  body.home-page .fv-login-icon {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
  }

  body.home-page .fv-header .menu-btn {
    gap: calc(6px * var(--fv-sec1-s));
  }

  body.home-page .fv-header .menu-btn span {
    width: 100%;
    height: calc(3px * var(--fv-sec1-s));
  }

  /* Pull icons toward logo as width narrows — frees room for brand text (0 at 767 ≈ 768) */
  body.home-page .fv-header__right {
    flex-shrink: 0;
    margin-left: calc(-1 * (140px * (768px - 100vw) / (768px - 426px)));
  }
}

/* =============================================================================
   TOP sec9 cards — 320–768 final cascade (standard form + current margin ratio)
   768 lock: card 444px in 736px content (16px sec9 padding each side).
   Smaller widths keep the same side-margin ratio; internals scale with --sec9-card-s.
   ============================================================================= */
@media (max-width: 768px) {
  body:is(.home-page, .product-detail-page) .sec9 {
    --sec9-content-w: calc(100vw - 32px);
    --sec9-card-w: calc(var(--sec9-content-w) * 444 / 736);
    --sec9-card-s: calc(var(--sec9-card-w) / 444px);
  }

  body:is(.home-page, .product-detail-page) .sec9-sub {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(28px * var(--sec9-card-s));
    align-items: stretch;
    justify-items: stretch;
  }

  body:is(.home-page, .product-detail-page) .sec9-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--sec9-card-w);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc(26px * var(--sec9-card-s));
    border-radius: calc(18px * var(--sec9-card-s));
    overflow: hidden;
    min-height: 0;
  }

  body:is(.home-page, .product-detail-page) .sec9-card--pay {
    overflow: hidden;
  }

  body:is(.home-page, .product-detail-page) .sec9-card--pay .sec9-card__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body:is(.home-page, .product-detail-page) .sec9-card__head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: calc(8px * var(--sec9-card-s));
    min-height: calc(64px * var(--sec9-card-s));
    padding: calc(10px * var(--sec9-card-s)) calc(28px * var(--sec9-card-s));
    border-radius: calc(18px * var(--sec9-card-s)) calc(18px * var(--sec9-card-s)) 0 0;
    background: var(--sec9-orange);
  }

  body:is(.home-page, .product-detail-page) .sec9-card__head-main {
    flex: 0 0 auto;
    width: 100%;
    max-width: 50%;
    text-align: center;
    font-size: calc(20px * var(--sec9-card-s));
    line-height: 1.2;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 900;
  }

  body:is(.home-page, .product-detail-page) .sec9-card__head-pill {
    flex: 0 0 auto;
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: calc(10px * var(--sec9-card-s)) calc(12px * var(--sec9-card-s));
    font-size: calc(12px * var(--sec9-card-s));
    line-height: 1.35;
    border-radius: 2px;
    background: #fff;
    color: #ff6700 !important;
    -webkit-text-fill-color: #ff6700 !important;
    font-weight: 800;
    text-align: center;
    white-space: normal;
    overflow: visible;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list {
    width: auto;
    margin: calc(26px * var(--sec9-card-s)) calc(28px * var(--sec9-card-s)) 0;
    padding: 0;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list li {
    gap: calc(16px * var(--sec9-card-s));
    margin-bottom: calc(10px * var(--sec9-card-s));
    font-size: calc(16px * var(--sec9-card-s));
    font-weight: 900;
    color: #222;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list li::before {
    flex: 0 0 calc(32px * var(--sec9-card-s));
    width: calc(32px * var(--sec9-card-s));
    height: calc(32px * var(--sec9-card-s));
    line-height: calc(32px * var(--sec9-card-s));
    font-size: calc(14px * var(--sec9-card-s));
    border-radius: 50%;
    background: var(--sec9-orange);
    color: #fff;
    font-weight: 900;
    text-align: center;
  }

  body:is(.home-page, .product-detail-page) .sec9-card__logos {
    display: block;
    width: auto;
    max-width: min(380px, calc(100% - 56px * var(--sec9-card-s)));
    height: auto;
    margin: calc(20px * var(--sec9-card-s)) calc(28px * var(--sec9-card-s))
      calc(28px * var(--sec9-card-s));
    align-self: flex-start;
  }

  body:is(.home-page, .product-detail-page) .sec9-card--ship .sec9-card__body {
    flex: 1 1 auto;
    width: auto;
    margin: calc(26px * var(--sec9-card-s)) calc(28px * var(--sec9-card-s)) 0;
    text-align: center;
  }

  body:is(.home-page, .product-detail-page) .sec9-card--ship .sec9-ship__lead {
    margin-bottom: calc(12px * var(--sec9-card-s));
    font-size: calc(17px * var(--sec9-card-s));
    line-height: 1.45;
    color: #ff6700 !important;
    -webkit-text-fill-color: #ff6700 !important;
    font-weight: 900;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__note {
    margin-bottom: calc(10px * var(--sec9-card-s));
    font-size: calc(12px * var(--sec9-card-s));
    line-height: 1.45;
    color: #222;
    font-weight: 400;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__ems {
    margin-bottom: calc(28px * var(--sec9-card-s));
    font-size: calc(17px * var(--sec9-card-s));
    line-height: 1.45;
    color: var(--sec9-orange);
    font-weight: 900;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card .sec9-card__btn {
    flex-shrink: 0;
    width: 76%;
    max-width: calc(100% - 56px * var(--sec9-card-s));
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: calc(13px * var(--sec9-card-s)) calc(18px * var(--sec9-card-s));
    font-size: calc(14px * var(--sec9-card-s));
    border-radius: 999px;
    background: var(--sec9-peach);
    color: #fff;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
  }
}

/* =============================================================================
   Mobile header logo — 768 lock → 320 gradual scale (final cascade)
   768px: 270px (same as 769–1440). Scales linearly down to 320px viewport.
   ============================================================================= */
@media (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    ) {
    --fv-logo-w: calc(
      360px * 1440px / 1920px * clamp(320px, 100vw, 768px) / 768px
    );
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__left {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__right {
    flex: 0 0 auto;
    margin-left: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-logo {
    width: auto;
    max-width: 100%;
    height: auto;
    overflow: visible;
    flex: 0 1 auto;
    min-width: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-logo
    img {
    display: block;
    width: var(--fv-logo-w);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__brand {
    display: none;
  }
}

/* =============================================================================
   Mobile header icons — 768→320: ALL 6 icons share one size (--fv-sp-icon).
   Fixes cascade that enlarged only .fv-compact-action img (50px) while util
   cart/login stayed at 34px and menu used a third size.
   Desktop 769+ untouched.
   ============================================================================= */
@media (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    ) {
    --sp-header-icons-s: calc(clamp(320px, 100vw, 768px) / 768px);
    --fv-sp-icon: calc(34px * var(--sp-header-icons-s));
    --fv-sp-icon-gap: calc(10px * var(--sp-header-icons-s));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__actions {
    --fv-sp-icon: calc(34px * var(--sp-header-icons-s));
    --fv-sp-icon-gap: calc(10px * var(--sp-header-icons-s));
    gap: var(--fv-sp-icon-gap);
    align-items: center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__compact,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec {
    gap: var(--fv-sp-icon-gap);
    align-items: center;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec
    .header__item,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-link,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .header__login
    .btn--login,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    box-sizing: border-box;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action
    img,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-icon,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-login-icon {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    gap: calc(6px * var(--sp-header-icons-s));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn
    span,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn:hover
    span {
    width: 100%;
    height: calc(3px * var(--sp-header-icons-s));
  }
}

/* =============================================================================
   Narrow phones 320–425 — same equal icon size via --fv-sp-icon.
   ============================================================================= */
@media (max-width: 425px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    ) {
    --fv-logo-w: calc(158px * var(--sp-header-s, 1));
    --fv-sp-icon: calc(34px * 0.8 * var(--sp-header-s, 1));
    --fv-sp-icon-gap: calc(14px * 0.8 * var(--sp-header-s, 1));
  }

  body.home-page .fv-header__right {
    margin-left: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header {
    gap: calc(8px * var(--sp-header-s, 1));
    min-height: calc(76px * var(--sp-header-s, 1));
    padding: calc(10px * var(--sp-header-s, 1)) calc(16px * var(--sp-header-s, 1));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__left {
    gap: calc(8px * var(--sp-header-s, 1));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__actions {
    --fv-sp-icon: calc(34px * 0.8 * var(--sp-header-s, 1));
    --fv-sp-icon-gap: calc(14px * 0.8 * var(--sp-header-s, 1));
    gap: var(--fv-sp-icon-gap);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__compact,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec {
    gap: var(--fv-sp-icon-gap);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec
    .header__item,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-link,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .header__login
    .btn--login,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action
    img,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-icon,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-login-icon {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    gap: calc(6px * 0.8 * var(--sp-header-s, 1));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn
    span,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn:hover
    span {
    width: 100%;
    height: calc(5.5px * 0.85 * var(--sp-header-s, 1));
  }
}

/* =============================================================================
   TOP sec9 cards — 320–425 proportional lock (final cascade)
   Cards match contact panel width (full sec9 content); scale with --sec9-sp-s.
   ============================================================================= */
@media (max-width: 425px) {
  body:is(.home-page, .product-detail-page) .sec9 {
    --sec9-m-s: calc((100vw - 32px) / 768px);
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1000px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);
    --sec9-aside-w: var(--sec9-aside-lock-w);
    --sec9-content-w: calc((320px - 32px) * var(--sec9-sp-s, 1));
    --sec9-card-w: var(--sec9-content-w);
    --sec9-card-s: calc(var(--sec9-card-w) / (320px - 32px));
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    margin-top: -7px;
    margin-right: -18px;
    margin-bottom: 0;
    margin-left: auto;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    width: 100%;
    gap: calc(28px * var(--sec9-card-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card,
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--pay,
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--ship {
    grid-column: 1 / -1;
    justify-self: stretch;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    overflow: hidden;
  }
}

/* =============================================================================
   TOP sec9 cards — 426–768 margin fix (final cascade)
   Stack cards in one column (smartphone column drop); full content width.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(.home-page, .product-detail-page) .sec9 {
    --sec9-content-w: calc(100vw - 32px);
    --sec9-card-gap: calc(28px * var(--sec9-content-w) / (768px - 32px));
    --sec9-card-w: var(--sec9-content-w);
    --sec9-card-s: calc(var(--sec9-card-w) / 444px);
  }

  body:is(.home-page, .product-detail-page) .sec9-sub {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: var(--sec9-card-gap);
    align-items: stretch;
    justify-items: stretch;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--pay,
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--ship {
    grid-column: 1;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
  }

  body:is(.home-page, .product-detail-page) .sec9-card,
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--pay,
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card--ship {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body:is(.home-page, .product-detail-page) .sec9 {
    --sec9-card-type-s: calc(var(--sec9-content-w) / (768px - 32px));
    --sec9-card-pad: calc(28px * var(--sec9-card-type-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-card {
    border-radius: calc(18px * var(--sec9-card-type-s));
    padding-bottom: calc(26px * var(--sec9-card-type-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: calc(8px * var(--sec9-card-type-s));
    min-height: calc(64px * var(--sec9-card-type-s));
    padding: calc(10px * var(--sec9-card-type-s)) var(--sec9-card-pad);
    border-radius: calc(18px * var(--sec9-card-type-s)) calc(18px * var(--sec9-card-type-s)) 0 0;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head > .sec9-card__head-main {
    display: block;
    flex: 0 0 auto;
    width: 50%;
    max-width: 100%;
    text-align: center;
    font-size: max(calc(20px * var(--sec9-card-type-s)), 16px);
    line-height: 1.2;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head > .sec9-card__head-pill {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
    margin-inline: auto;
    font-size: max(calc(12px * var(--sec9-card-type-s)), 10px);
    line-height: 1.35;
    padding: calc(10px * var(--sec9-card-type-s)) calc(12px * var(--sec9-card-type-s));
    border-radius: 2px;
    text-align: center;
    white-space: normal;
    overflow: visible;
  }

  body:is(.home-page, .product-detail-page) .sec9-card--pay .sec9-card__main {
    align-items: stretch;
    text-align: left;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list {
    width: auto;
    max-width: none;
    margin: calc(26px * var(--sec9-card-type-s)) var(--sec9-card-pad) 0;
    padding: 0;
    text-align: left;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list li {
    gap: calc(16px * var(--sec9-card-type-s));
    margin-bottom: calc(15px * var(--sec9-card-type-s));
    font-size: max(calc(20px * var(--sec9-card-type-s)), 13px);
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list li::before {
    flex: 0 0 calc(32px * var(--sec9-card-type-s));
    width: calc(32px * var(--sec9-card-type-s));
    height: calc(32px * var(--sec9-card-type-s));
    line-height: calc(32px * var(--sec9-card-type-s));
    font-size: max(calc(14px * var(--sec9-card-type-s)), 11px);
    border-radius: 50%;
    background: #ff9b64;
    color: #fff;
  }

  body:is(.home-page, .product-detail-page) .sec9-card__logos {
    align-self: flex-start;
    display: block;
    width: auto;
    max-width: calc(100% - 2 * var(--sec9-card-pad));
    height: auto;
    margin: calc(20px * var(--sec9-card-type-s)) var(--sec9-card-pad)
      calc(28px * var(--sec9-card-type-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-card--ship .sec9-card__body {
    margin: calc(26px * var(--sec9-card-type-s)) var(--sec9-card-pad) 0;
    text-align: center;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__lead,
  body:is(.home-page, .product-detail-page) .sec9-ship__ems {
    font-size: max(calc(17px * var(--sec9-card-type-s)), 14px);
    line-height: 1.45;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__note {
    margin-bottom: calc(10px * var(--sec9-card-type-s));
    font-size: max(calc(16px * var(--sec9-card-type-s)), 11px);
    line-height: 1.45;
    color: #222;
    font-weight: 400;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__lead {
    margin-bottom: calc(12px * var(--sec9-card-type-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-ship__ems {
    margin-bottom: calc(28px * var(--sec9-card-type-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card .sec9-card__btn {
    width: 76%;
    max-width: calc(100% - 2 * var(--sec9-card-pad));
    margin-inline: auto;
    padding: calc(13px * var(--sec9-card-type-s)) calc(18px * var(--sec9-card-type-s));
    font-size: max(calc(14px * var(--sec9-card-type-s)), 12px);
    border-radius: 999px;
  }
}

/* TOP sec9 ship note + pay list — ≤425 only (final cascade). */
@media (max-width: 425px) {
  body:is(.home-page, .product-detail-page) .sec9-ship__note {
    margin-bottom: calc(10px * var(--sec9-card-s));
    font-size: calc(14px * var(--sec9-card-s));
    line-height: 1.45;
    color: #222;
    font-weight: 400;
  }

  body:is(.home-page, .product-detail-page) .sec9-pay-list li {
    gap: calc(16px * var(--sec9-card-s));
    margin-bottom: calc(10px * var(--sec9-card-s));
    font-size: calc(16px * var(--sec9-card-s));
    font-weight: 600;
    color: #222;
  }
}

/* =============================================================================
   TOP sec9 card header — 426–768 row layout (absolute final override)
   Title and pill side-by-side; title width 50%.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: calc(8px * var(--sec9-card-type-s));
    min-height: calc(64px * var(--sec9-card-type-s));
    padding: calc(10px * var(--sec9-card-type-s)) var(--sec9-card-pad);
    border-radius: calc(18px * var(--sec9-card-type-s)) calc(18px * var(--sec9-card-type-s)) 0 0;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head > .sec9-card__head-main {
    display: block;
    flex: 0 0 auto;
    width: 50%;
    max-width: 100%;
    text-align: center;
    font-size: max(calc(20px * var(--sec9-card-type-s)), 16px);
    line-height: 1.2;
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-card > header.sec9-card__head > .sec9-card__head-pill {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
    margin-inline: auto;
    font-size: max(calc(12px * var(--sec9-card-type-s)), 10px);
    line-height: 1.35;
    padding: calc(10px * var(--sec9-card-type-s)) calc(12px * var(--sec9-card-type-s));
    border-radius: 2px;
    text-align: center;
    white-space: normal;
    overflow: visible;
  }
}

/* =============================================================================
   Product list — 320–768 only: header shadow, 40px top gap
   ============================================================================= */
@media (max-width: 768px) {
  body.product-list-page .plp-hero {
    padding-top: calc(var(--sp-header-clear, 76px) + 40px * var(--sp-header-s, 1));
  }

  body.product-list-page .fv-header {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* =============================================================================
   Product detail — pdp-hero__inner padding scale (320–768 only)
   ============================================================================= */
@media (max-width: 768px) {
  .product-detail-page {
    --pdp-pc-s: calc(100vw / 1920px);
  }

  body.product-detail-page .pdp-hero__inner {
    padding: calc(60px * var(--pdp-pc-s)) calc(24px * var(--pdp-pc-s)) calc(8px * var(--pdp-pc-s));
  }
}

/* =============================================================================
   Product detail — pdp-hero__inner padding scale (769–1919)
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1919px) {
  .product-detail-page .pdp-hero__inner {
    padding: calc(24px * var(--pdp-pc-s)) calc(24px * var(--pdp-pc-s)) calc(8px * var(--pdp-pc-s));
  }
}

/* =============================================================================
   Product detail — header shadow (320–768 only)
   ============================================================================= */
@media (max-width: 768px) {
  body.product-detail-page .fv-header {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* =============================================================================
   TOP sec7 — title overlap sec6, scaled from 768px lock (320–768 only)
   fv z-index 20 (header) · sec7 z-index 19 · sec6 z-index 18
   ============================================================================= */
@media (max-width: 768px) {
  body.home-page {
    --sec67-m-s: calc(100vw / 768px);
  }

  body.home-page .fv {
    z-index: 20;
  }

  body.home-page .sec6 {
    overflow: visible;
    padding: calc(80px * var(--sec67-m-s)) 0 calc(130px * var(--sec67-m-s));
  }

  body.home-page .sec6-overlap {
    margin: calc(-104px * var(--sec67-m-s)) 0 0;
    min-height: calc(150px * var(--sec67-m-s));
    padding: 0 calc(24px * var(--sec67-m-s));
  }

  body.home-page .sec6-panel {
    margin-top: calc(-12px * var(--sec67-m-s));
  }

  body.home-page .sec7 {
    position: relative;
    z-index: 19;
    margin-top: 0;
    padding: 0 0 calc(64px * var(--sec67-m-s));
    overflow: visible;
  }

  body.home-page .sec7-head {
    position: relative;
    z-index: 1;
    margin: calc(-42px * var(--sec67-m-s)) auto calc(18px * var(--sec67-m-s));
    padding: 0 calc(24px * var(--sec67-m-s));
  }

  body.home-page .sec7-title-img {
    position: relative;
    top: calc(-40px * var(--sec67-m-s));
    z-index: 2;
    width: 86vw;
  }
}

/* =============================================================================
   TOP FV — header-to-shirts gap lock from 768px reference (320–768 only)
   768 lock: header bottom ~95px · shirts-layer padding-top 116px · gap ~21px
   ============================================================================= */
@media (max-width: 768px) {
  body.home-page {
    --fv-mobile-header-clear: 100px;
    --fv-shirts-header-gap: 21px;
  }

  body.home-page .fv {
    --fv-mobile-header-clear: 100px;
    --fv-shirts-pad: 16px;
  }

  body.home-page .fv-header {
    box-sizing: border-box;
    /* min-height: 95px; */
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  /* Re-assert 768-lock scale after max-width:768 block resets vars to fixed px */
  body.home-page .fv {
    --fv-shirts-pad-top: calc(116px * var(--fv-sec1-s));
    --fv-shirts-pad: calc(16px * var(--fv-sec1-s));
  }

  body.home-page .shirts-layer {
    padding-top: var(--fv-shirts-pad-top);
    padding-bottom: var(--fv-shirts-pad);
    --fv-shirts-available-h: calc(
      var(--fv-sec1-h) - var(--fv-shirts-pad-top) - var(--fv-shirts-pad)
    );
    --shirt-col: calc((var(--fv-shirts-available-h) - 2 * var(--shirt-gap)) / 3);
  }
}

@media (max-width: 425px) {
  body.home-page .fv {
    --fv-sp-s: calc(100vw / 425px);
    --fv-sp-h: calc(580px * var(--fv-sp-s));
    --fv-shirts-pad: calc(12px * var(--fv-sp-s));
    --fv-shirts-header-gap: calc(21px * var(--fv-sp-s));
    height: var(--fv-sp-h);
    min-height: var(--fv-sp-h);
    max-height: var(--fv-sp-h);
  }

  body.home-page .shirts-layer {
    padding-top: calc(
      76px * var(--sp-header-s, var(--fv-sp-s)) + var(--fv-shirts-header-gap)
    );
    padding-bottom: var(--fv-shirts-pad);
    gap: calc(8px * var(--fv-sp-s));
    --shirt-gap: calc(10px * var(--fv-sp-s));
    --fv-shirts-available-h: calc(
      var(--fv-sp-h)
        - 76px * var(--sp-header-s, var(--fv-sp-s))
        - var(--fv-shirts-header-gap)
        - var(--fv-shirts-pad) * 2
    );
    --shirt-col: calc((var(--fv-shirts-available-h) - 2 * var(--shirt-gap)) / 3);
  }

  body.home-page .shirt-card {
    padding: calc(12px * var(--fv-sp-s));
    border-radius: calc(10px * var(--fv-sp-s));
  }

  body.home-page .fv-content {
    height: var(--fv-sp-h);
    min-height: var(--fv-sp-h);
  }

  body.home-page .fv-foreground {
    gap: calc(10px * var(--fv-sp-s));
  }

  body.home-page .fv-maincopy {
    width: calc(326px * var(--fv-sp-s));
    max-width: 93%;
  }

  body.home-page .fv-foreground__figures {
    --fv-side-gap: calc(5px * var(--fv-sp-s));
    --fv-fig-span: 1.42;
    width: calc((100% - 2 * var(--fv-side-gap)) / var(--fv-fig-span));
    margin-left: var(--fv-side-gap);
    margin-right: var(--fv-side-gap);
  }
}

/* =============================================================================
   PDP sec9 — final cascade (425px design comp; scales down 320→425, capped ≥426)
   ============================================================================= */
@media (max-width: 768px) {
  body.product-detail-page .sec9-wave {
    display: block;
  }

  body.product-detail-page .sec9 {
    /* 425 lock: scale down to 320 only — never upscale above comp width */
    --pdp-mobile-s: min(1, calc(100vw / 425px));
    --sec9-pdp-side: calc(16px * var(--pdp-mobile-s));
    --sec9-m-s: calc((100vw - 32px) / 768px);
    --sec9-staff-lock-s: calc(1440px / 1920px);
    --sec9-aside-lock-w: calc((1320px * var(--sec9-staff-lock-s) - 2 * 28px * var(--sec9-staff-lock-s)) * 0.78 / 3.1);
    --sec9-aside-w: var(--sec9-aside-lock-w);
    overflow: visible;
    padding-top: calc(50px * var(--pdp-mobile-s));
    padding-right: var(--sec9-pdp-side);
    padding-bottom: 0;
    padding-left: var(--sec9-pdp-side);
  }

  body.product-detail-page .sec9-wave__svg {
    height: calc(34px * var(--pdp-mobile-s));
  }

  body.product-detail-page .sec9-contact {
    position: relative;
    margin-top: calc(-28px * var(--pdp-mobile-s));
    margin-bottom: calc(28px * var(--pdp-mobile-s));
    padding-top: calc(134px * var(--pdp-mobile-s));
    overflow: visible;
  }

  body.product-detail-page .sec9-contact__hero,
  body.product-detail-page .sec9-contact__woman-wrap {
    display: contents;
  }

  body.product-detail-page .sec9-contact__woman {
    position: absolute;
    left: calc(-133px * var(--pdp-mobile-s));
    top: calc(-175px * var(--pdp-mobile-s));
    bottom: auto;
    /* Scale by width only — fixed height + object-fit:cover was cropping when enlarged */
    width: calc(506px * var(--pdp-mobile-s));
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }

  body.product-detail-page .sec9-contact picture {
    display: block;
    position: absolute;
    left: calc(103px * var(--pdp-mobile-s));
    top: calc(63px * var(--pdp-mobile-s));
    bottom: auto;
    width: calc(100% - 114px * var(--pdp-mobile-s));
    max-width: calc(461px * var(--pdp-mobile-s));
    margin: 0;
    transform: none;
    z-index: 3;
    pointer-events: none;
  }

  body.product-detail-page .sec9-contact__title {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    pointer-events: none;
  }

  body.product-detail-page .sec9-contact__panel {
    z-index: 1;
    border-radius: calc(18px * var(--pdp-mobile-s));
    padding: calc(78px * var(--pdp-mobile-s)) calc(20px * var(--pdp-mobile-s)) calc(20px * var(--pdp-mobile-s));
  }

  body.product-detail-page .sec9-contact__main {
    padding-top: 0;
  }

  body.product-detail-page .sec9-contact__cols {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--sec9-m-s));
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(52px * var(--pdp-mobile-s));
    box-sizing: border-box;
    margin-bottom: calc(20px * var(--sec9-m-s));
  }

  body.product-detail-page .sec9-sub {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  body.product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
    justify-self: end;
    width: var(--sec9-aside-w);
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 12px 0 0;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  body.product-detail-page .sec9-ship-aside__staff {
    position: relative;
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    margin-right: 0;
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  body.product-detail-page .sec9 {
    --sec9-pdp-side: calc(16px + 20px * (100vw - 426px) / (768px - 426px));
    --sec9-content-w: calc(100vw - 2 * var(--sec9-pdp-side));
    --sec9-card-gap: calc(28px * var(--sec9-content-w) / (768px - 32px));
    --sec9-m-s: calc(var(--sec9-content-w) / (768px - 32px));
  }

  body.product-detail-page .sec9-sub {
    grid-template-columns: 1fr;
  }

  body.product-detail-page .sec9-sub > .sec9-ship-aside {
    grid-column: 1 / -1;
  }
}

/* Guide pages — header shadow on mobile (320–768) */
@media (max-width: 768px) {
  body:is(
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page
    )
    .fv-header {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* =============================================================================
   TOP sec9 staff — 426–768 final cascade (scale 768 lock: 60%@426 → 100%@768)
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(.home-page, .product-detail-page) .sec9 {
    --sec9-scale-s: calc(0.6 + 0.4 * (100vw - 426px) / (768px - 426px));
    --sec9-aside-w: calc(var(--sec9-aside-lock-w) * var(--sec9-scale-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    width: var(--sec9-aside-w);
    margin-top: calc(12px * var(--sec9-scale-s));
  }

  body:is(.home-page, .product-detail-page) .sec9-ship-aside__staff {
    margin-top: calc(48px * var(--sec9-scale-s));
    transform: scale(1.4);
    transform-origin: 100% 100%;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship-aside__vertical {
    font-size: max(calc(13px * var(--sec9-scale-s)), 10px);
    padding-bottom: calc(10px * var(--sec9-scale-s));
  }
}

/* sec9-contact: 320〜425px 専用（768pxルールを上書き）。他の範囲は不変 */
@media (min-width: 320px) and (max-width: 425px) {
  :is(.home-page, .product-detail-page) .sec9-contact__woman {
    position: absolute;
    left: calc(-176px * var(--sec9-m-s));
    top: calc(-310px * var(--sec9-m-s));
    bottom: auto;
    width: calc(600px * var(--sec9-m-s));
    height: auto;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }
  :is(.home-page, .product-detail-page) .sec9-contact picture {
    display: block;
    position: absolute;
    left: calc(128px * var(--sec9-m-s));
    top: calc(-76px * var(--sec9-m-s));
    bottom: auto;
    width: calc(100% - 274px * var(--sec9-m-s));
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 3;
    pointer-events: none;
  }
}

/* PDP sec9 woman — ≤425 only (DevTools-tuned; home rule above unchanged) */
@media (max-width: 425px) {
  body.product-detail-page .sec9-contact__woman {
    position: absolute;
    left: calc(-120px * var(--pdp-mobile-s));
    top: calc(-146px * var(--pdp-mobile-s));
    bottom: auto;
    width: calc(446px * var(--pdp-mobile-s));
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    max-width: none;
    margin: 0;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }
}

/* スマホ(320-768px): ヘッダー部分は白（MT側でbody*の背景リセットを外した後の担保。赤/緑ボタンの色は残すためコンテナのみ） */
@media (min-width: 320px) and (max-width: 768px) {
  .fv-header {
    background-color: #ffffff !important;
  }
}

/* =============================================================================
   Header — 769–1919: keep 1920 desktop composition (header only, final cascade)
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1919px) {
  .fv-header {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 108px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .fv-header a,
  .fv-header button {
    pointer-events: auto;
  }

  .fv-header__left {
    display: contents !important;
  }

  .fv-header__brand {
    display: none !important;
  }

  .fv-logo {
    position: absolute !important;
    top: 24px !important;
    left: 24px !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto;
  }

  .fv-logo img {
    width: 360px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .fv-header__right {
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    flex: none !important;
    pointer-events: auto;
  }

  .fv-header__actions {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 50px !important;
  }

  .fv-header__main {
    display: flex !important;
  }

  .fv-header__compact {
    display: none !important;
  }
}

/* =============================================================================
   Header -- 426-768 ONLY: match design size/gap for the 5 right icons
   (phone / mail / LINE / cart / user). Logo, hamburger, and other ranges untouched.
   Design@~768: icon ~48px, gap ~26px (equal across all five icon boxes).
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    ) {
    --pw-hdr-5icon-s: calc(100vw / 768px);
    --pw-hdr-5icon: calc(48px * var(--pw-hdr-5icon-s));
    --pw-hdr-5icon-gap: calc(26px * var(--pw-hdr-5icon-s));
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__actions,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__compact,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .mt-ec {
    gap: var(--pw-hdr-5icon-gap);
    align-items: center;
    margin: 0;
    margin-left: 0;
    padding: 0;
  }

  /* 5 icons only - do not touch .menu-btn size/bars */
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .mt-ec
    .header__item,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-link,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header__util
    .header__login
    .btn--login {
    box-sizing: border-box;
    width: var(--pw-hdr-5icon);
    height: var(--pw-hdr-5icon);
    min-width: var(--pw-hdr-5icon);
    min-height: var(--pw-hdr-5icon);
    margin: 0;
    padding: 0;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-compact-action
    img,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-cart-icon,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .fv-header__util
    .header__login
    .btn--login
    .fv-login-icon {
    width: var(--pw-hdr-5icon);
    height: var(--pw-hdr-5icon);
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

/* =============================================================================
   Header logo image — 426-768 ONLY: slightly smaller (header chrome untouched).
   Base lock remains 270px@768; apply 90% so only .fv-logo img shrinks.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    ) {
    --fv-logo-w: calc(
      360px * 1440px / 1920px * clamp(426px, 100vw, 768px) / 768px * 0.9
    );
  }
}

/* =============================================================================
   Header menu-btn — 426-768 ONLY: match other icons (48x48) + thicker bars.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn {
    box-sizing: border-box;
    width: var(--pw-hdr-5icon, 48px);
    height: var(--pw-hdr-5icon, 48px);
    min-width: var(--pw-hdr-5icon, 48px);
    min-height: var(--pw-hdr-5icon, 48px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: calc(4px * var(--pw-hdr-5icon-s, 1)) 0;
    margin: 0;
    overflow: visible;
    background: transparent;
  }

  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn
    span,
  body:is(
      .home-page,
      .guide-flow-page,
      .guide-design-tool-page,
      .guide-data-submission-page,
      .guide-print-method-page,
      .product-list-page,
      .product-detail-page
    )
    .fv-header
    .menu-btn:hover
    span {
    flex: 0 0 auto;
    width: 100%;
    height: calc(6px * var(--pw-hdr-5icon-s, 1));
    min-height: calc(6px * var(--pw-hdr-5icon-s, 1));
    margin: 0;
    background: #f15a24;
  }
}

/* PDP thumbnails: 10 columns on every screen wider than the mobile breakpoint
   (>=769px, no upper bound so 4K/ultrawide match); <=768px keeps 4 columns. */
@media (min-width: 769px) {
  .product-detail-page .pdp-gallery__thumbs {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

/* PDP thumbnails: 8 columns on tablet / large phone (426-768px).
   Ladder: <=425px = 4, 426-768px = 8, >=769px = 10. */
@media (min-width: 426px) and (max-width: 768px) {
  .product-detail-page .pdp-gallery__thumbs {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* PDP: from tablet down (<=768px) stack image over info like the mobile layout,
   instead of the 426-1919 two-column rule. (<=425px already stacks.) */
@media (min-width: 426px) and (max-width: 768px) {
  .product-detail-page .pdp-body__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Sec9 phone icon ONLY — 320–768: larger size, same row as phone number,
   content group centered in the white box. */
@media (min-width: 320px) and (max-width: 768px) {
  body:is(.home-page, .product-detail-page) a.sec9-action.sec9-action--phone {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
    justify-content: center;
    justify-items: start;
  }

  body:is(.home-page, .product-detail-page) a.sec9-action.sec9-action--phone > img {
    grid-column: 1;
    grid-row: 1;
    width: 28px !important;
    height: 28px !important;
    margin-top: 0 !important;
    align-self: center;
    object-fit: contain;
  }

  body:is(.home-page, .product-detail-page) a.sec9-action.sec9-action--phone > .sec9-action__body {
    display: contents;
  }

  body:is(.home-page, .product-detail-page) a.sec9-action.sec9-action--phone .sec9-action__main {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: left;
  }

  body:is(.home-page, .product-detail-page) a.sec9-action.sec9-action--phone .sec9-action__sub {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}

/* PDP sec9 woman — ≤768: never crop when scaled (override any cover/fixed-height). */
@media (max-width: 768px) {
  body.product-detail-page .sec9,
  body.product-detail-page .sec9-inner,
  body.product-detail-page .sec9-contact {
    overflow: visible;
  }

  body.product-detail-page .sec9-contact__woman {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* Sec9 staff (two women) ONLY — 320–425: lock to exact size at 426px.
   At 426, --sec9-scale-s = 0.6 and aside width = lock-w * 0.6; staff uses scale(1.4). */
@media (min-width: 320px) and (max-width: 425px) {
  body:is(.home-page, .product-detail-page) .sec9-sub > .sec9-ship-aside {
    --sec9-staff-lock-s-426: calc(1440px / 1920px);
    --sec9-aside-lock-w-426: calc(
      (1320px * var(--sec9-staff-lock-s-426) - 2 * 28px * var(--sec9-staff-lock-s-426)) * 0.78 / 3.1
    );
    width: calc(var(--sec9-aside-lock-w-426) * 0.6) !important;
    max-width: none !important;
  }

  body:is(.home-page, .product-detail-page) .sec9-ship-aside__staff,
  body.product-detail-page .sec9-ship-aside__staff {
    width: 100% !important;
    max-width: 100% !important;
    transform: scale(1.4) !important;
    transform-origin: 100% 100% !important;
  }
}

/* =============================================================================
   PLP ranking (おすすめ) FINAL — 769–1919 ONLY
   Cause of no-op: (1) product-list.block loaded uncached old mobile.css after header
   (2) @media (min-width:768) forced 3×(100cqw) cards. Lock card + type here.
   425–768 uses the tablet block below (1-up + scale).
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1919px) {
  .plp-main .plp-ranking,
  body.product-list-page .plp-ranking {
    --plp-ranking-s: 1;
    --plp-ranking-card-w: 488px;
  }

  .plp-main .plp-ranking__track .product-card,
  body.product-list-page .plp-ranking__track .product-card {
    flex: 0 0 488px !important;
    width: 488px !important;
    min-width: 488px !important;
    max-width: 488px !important;
  }

  .plp-main .plp-ranking__track .product-chip,
  body.product-list-page .plp-ranking__track .product-chip {
    font-size: 14px !important;
  }

  .plp-main .plp-ranking__track .product-name,
  body.product-list-page .plp-ranking__track .product-name {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .plp-main .plp-ranking__track .product-price,
  body.product-list-page .plp-ranking__track .product-price {
    font-size: 36px !important;
  }

  .plp-main .plp-ranking__track .product-tags li,
  body.product-list-page .plp-ranking__track .product-tags li {
    font-size: 12px !important;
  }

  .plp-main .plp-ranking__track .plp-rank-badge,
  body.product-list-page .plp-ranking__track .plp-rank-badge {
    font-size: 12px !important;
  }
}

/* PLP ranking banner ONLY — 679–1024: shrink gradually so it is not clipped */
@media (min-width: 679px) and (max-width: 1024px) {
  .plp-main .plp-ranking,
  body.product-list-page .plp-ranking {
    --plp-banner-s: calc(0.72 + 0.28 * (100vw - 679px) / (1024px - 679px));
  }

  .plp-main .plp-ranking__banner-row,
  body.product-list-page .plp-ranking__banner-row {
    padding-inline: calc(12px + 12px * var(--plp-banner-s)) !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .plp-main .plp-ranking__banner,
  body.product-list-page .plp-ranking__banner {
    max-width: calc(100% - 8px) !important;
    width: max-content;
    padding: calc(17px * var(--plp-banner-s)) calc(58px * var(--plp-banner-s)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__banner-title,
  body.product-list-page .plp-ranking__banner-title {
    font-size: calc(24px * var(--plp-banner-s)) !important;
    gap: calc(1.4em * var(--plp-banner-s)) !important;
    white-space: nowrap;
  }

  .plp-main .plp-ranking__banner-part + .plp-ranking__banner-part,
  body.product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 6px * var(--plp-banner-s)) !important;
  }
}

/* =============================================================================
   PLP tablet ONLY — 426–768
   - Ranking: 1 card, gradual scale (not too small), nav buttons stay on-screen
   - Subcategory tags + product grid: 3 columns
   Does not affect ≤425 or ≥769.
   ============================================================================= */
@media (min-width: 426px) and (max-width: 768px) {
  .plp-main .plp-ranking,
  body.product-list-page .plp-ranking {
    /* 768 → 1.0 ; 426 → ~0.84 (gentle — text stays readable) */
    --plp-tab-s: calc(0.84 + 0.16 * (100vw - 426px) / (768px - 426px));
  }

  .plp-main .plp-inner,
  body.product-list-page .plp-inner {
    width: min(1440px, calc(100% - 24px)) !important;
    padding-inline: 12px !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__outer,
  body.product-list-page .plp-ranking__outer {
    width: min(1440px, calc(100% - 24px)) !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__panel,
  body.product-list-page .plp-ranking__panel {
    overflow: visible !important;
    padding-top: calc(28px * var(--plp-tab-s)) !important;
    border-radius: calc(14px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__banner-row,
  body.product-list-page .plp-ranking__banner-row {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: calc(10px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__banner,
  body.product-list-page .plp-ranking__banner {
    max-width: 100% !important;
    width: fit-content !important;
    padding: calc(12px * var(--plp-tab-s)) calc(18px * var(--plp-tab-s)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__banner-title,
  body.product-list-page .plp-ranking__banner-title {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center !important;
    row-gap: calc(4px * var(--plp-tab-s)) !important;
    gap: calc(0.7em * var(--plp-tab-s)) !important;
    font-size: calc(15px * var(--plp-tab-s)) !important;
    line-height: 1.35 !important;
  }

  .plp-main .plp-ranking__banner-part + .plp-ranking__banner-part,
  body.product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 4px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__slider,
  body.product-list-page .plp-ranking__slider {
    /* Keep room for in-bounds nav buttons */
    padding: calc(20px * var(--plp-tab-s)) calc(48px * var(--plp-tab-s))
      calc(22px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__viewport,
  body.product-list-page .plp-ranking__viewport {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .plp-main .plp-ranking__track,
  body.product-list-page .plp-ranking__track {
    gap: calc(12px * var(--plp-tab-s)) !important;
    padding: calc(20px * var(--plp-tab-s)) 0 calc(12px * var(--plp-tab-s)) !important;
  }

  /* 1 recommended product visible (100cqw = ranking viewport width) */
  .plp-main .plp-ranking__track .product-card,
  body.product-list-page .plp-ranking__track .product-card {
    flex: 0 0 100cqw !important;
    width: 100cqw !important;
    min-width: 0 !important;
    max-width: 100cqw !important;
    flex-direction: row !important;
    /* Design: text column vertically centered vs image */
    align-items: center !important;
    /* Design: clear gutter between image and text */
    gap: calc(22px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
    padding-inline: calc(4px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__track .plp-rank-card__media,
  body.product-list-page .plp-ranking__track .plp-rank-card__media {
    flex: 0 0 36% !important;
    width: 36% !important;
    max-width: 36% !important;
    min-width: 0 !important;
  }

  .plp-main .plp-ranking__track .plp-rank-card__body,
  body.product-list-page .plp-ranking__track .plp-rank-card__body {
    /* Hug content width — leave yellow space on the right like the design */
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(64% - 22px * var(--plp-tab-s)) !important;
    min-width: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .plp-main .plp-ranking__track .product-chip,
  body.product-list-page .plp-ranking__track .product-chip {
    margin: 0 !important;
    font-size: max(calc(13px * var(--plp-tab-s)), 12px) !important;
  }

  .plp-main .plp-ranking__track .product-name,
  body.product-list-page .plp-ranking__track .product-name {
    margin: calc(6px * var(--plp-tab-s)) 0 0 !important;
    font-size: max(calc(16px * var(--plp-tab-s)), 13px) !important;
    line-height: 1.3 !important;
    /* Keep「Tシャツ」together; wrap only at natural breaks */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .plp-main .plp-ranking__track .product-price,
  body.product-list-page .plp-ranking__track .product-price {
    margin: calc(4px * var(--plp-tab-s)) 0 0 !important;
    font-size: max(calc(30px * var(--plp-tab-s)), 22px) !important;
    line-height: 1 !important;
  }

  .plp-main .plp-ranking__track .product-tags,
  body.product-list-page .plp-ranking__track .product-tags {
    /* Compact 2-col auto width — do NOT stretch with 1fr */
    margin: calc(6px * var(--plp-tab-s)) 0 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, auto) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-flow: column !important;
    justify-content: start !important;
    gap: calc(2px * var(--plp-tab-s)) calc(12px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__track .product-tags li,
  body.product-list-page .plp-ranking__track .product-tags li {
    font-size: max(calc(11px * var(--plp-tab-s)), 10px) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  .plp-main .plp-ranking__track .plp-rank-badge,
  body.product-list-page .plp-ranking__track .plp-rank-badge {
    font-size: max(calc(11px * var(--plp-tab-s)), 10px) !important;
  }

  /* Round nav: keep fully inside the panel (no ±50% overhang) */
  .plp-main .plp-ranking__nav,
  body.product-list-page .plp-ranking__nav {
    width: calc(40px * var(--plp-tab-s)) !important;
    height: calc(40px * var(--plp-tab-s)) !important;
    border-width: calc(2px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__nav span,
  body.product-list-page .plp-ranking__nav span {
    width: calc(8px * var(--plp-tab-s)) !important;
    height: calc(8px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__nav--prev,
  body.product-list-page .plp-ranking__nav--prev {
    left: calc(4px * var(--plp-tab-s)) !important;
    transform: translateY(-50%) !important;
  }

  .plp-main .plp-ranking__nav--next,
  body.product-list-page .plp-ranking__nav--next {
    right: calc(4px * var(--plp-tab-s)) !important;
    transform: translateY(-50%) !important;
  }

  /* Subcategory + product grid: 3 per row */
  .plp-main .plp-subcat__grid,
  body.product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: calc(12px * var(--plp-tab-s)) calc(10px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-subcat__link,
  body.product-list-page .plp-subcat__link {
    font-size: max(calc(13px * var(--plp-tab-s)), 12px) !important;
    overflow-wrap: anywhere !important;
  }

  .plp-main .plp-grid,
  body.product-list-page .plp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: calc(16px * var(--plp-tab-s)) calc(12px * var(--plp-tab-s)) !important;
  }
}

/* =============================================================================
   PLP phone ONLY — 320–425
   Same ranking treatment as tablet (1 card, in-bounds nav, gentle scale),
   but subcategory + product grid: 2 columns.
   Does not affect ≥426.
   ============================================================================= */
@media (min-width: 320px) and (max-width: 425px) {
  .plp-main .plp-ranking,
  body.product-list-page .plp-ranking {
    /* 425 → 0.84 ; 320 → ~0.78 (gentle — do not shrink too far) */
    --plp-tab-s: calc(0.78 + 0.06 * (100vw - 320px) / (425px - 320px));
  }

  .plp-main .plp-inner,
  body.product-list-page .plp-inner {
    width: min(1440px, calc(100% - 24px)) !important;
    padding-inline: 12px !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__outer,
  body.product-list-page .plp-ranking__outer {
    width: min(1440px, calc(100% - 24px)) !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__panel,
  body.product-list-page .plp-ranking__panel {
    overflow: visible !important;
    padding-top: calc(28px * var(--plp-tab-s)) !important;
    border-radius: calc(14px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__banner-row,
  body.product-list-page .plp-ranking__banner-row {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: calc(10px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__banner,
  body.product-list-page .plp-ranking__banner {
    max-width: 100% !important;
    width: fit-content !important;
    padding: calc(12px * var(--plp-tab-s)) calc(16px * var(--plp-tab-s)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__banner-title,
  body.product-list-page .plp-ranking__banner-title {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center !important;
    row-gap: calc(4px * var(--plp-tab-s)) !important;
    gap: calc(0.65em * var(--plp-tab-s)) !important;
    font-size: max(calc(14px * var(--plp-tab-s)), 12px) !important;
    line-height: 1.35 !important;
  }

  .plp-main .plp-ranking__banner-part + .plp-ranking__banner-part,
  body.product-list-page .plp-ranking__banner-part + .plp-ranking__banner-part {
    font-size: calc(1em + 3px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__slider,
  body.product-list-page .plp-ranking__slider {
    padding: calc(18px * var(--plp-tab-s)) calc(44px * var(--plp-tab-s))
      calc(20px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__viewport,
  body.product-list-page .plp-ranking__viewport {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .plp-main .plp-ranking__track,
  body.product-list-page .plp-ranking__track {
    gap: calc(10px * var(--plp-tab-s)) !important;
    padding: calc(18px * var(--plp-tab-s)) 0 calc(10px * var(--plp-tab-s)) !important;
  }

  /* 1 recommended product visible */
  .plp-main .plp-ranking__track .product-card,
  body.product-list-page .plp-ranking__track .product-card {
    flex: 0 0 100cqw !important;
    width: 100cqw !important;
    min-width: 0 !important;
    max-width: 100cqw !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: calc(8px * var(--plp-tab-s)) !important;
    box-sizing: border-box !important;
  }

  .plp-main .plp-ranking__track .plp-rank-card__media,
  body.product-list-page .plp-ranking__track .plp-rank-card__media {
    flex: 0 0 42% !important;
    width: 42% !important;
    min-width: 0 !important;
  }

  .plp-main .plp-ranking__track .plp-rank-card__body,
  body.product-list-page .plp-ranking__track .plp-rank-card__body {
    flex: 1 1 58% !important;
    width: 58% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .plp-main .plp-ranking__track .product-chip,
  body.product-list-page .plp-ranking__track .product-chip {
    font-size: max(calc(11px * var(--plp-tab-s)), 10px) !important;
  }

  .plp-main .plp-ranking__track .product-name,
  body.product-list-page .plp-ranking__track .product-name {
    font-size: max(calc(14px * var(--plp-tab-s)), 12px) !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .plp-main .plp-ranking__track .product-price,
  body.product-list-page .plp-ranking__track .product-price {
    font-size: max(calc(24px * var(--plp-tab-s)), 20px) !important;
  }

  .plp-main .plp-ranking__track .product-tags,
  body.product-list-page .plp-ranking__track .product-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-flow: column !important;
    gap: calc(2px * var(--plp-tab-s)) calc(6px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__track .product-tags li,
  body.product-list-page .plp-ranking__track .product-tags li {
    font-size: max(calc(10px * var(--plp-tab-s)), 9px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .plp-main .plp-ranking__track .plp-rank-badge,
  body.product-list-page .plp-ranking__track .plp-rank-badge {
    font-size: max(calc(10px * var(--plp-tab-s)), 9px) !important;
  }

  /* Round nav: keep fully inside the panel */
  .plp-main .plp-ranking__nav,
  body.product-list-page .plp-ranking__nav {
    width: calc(36px * var(--plp-tab-s)) !important;
    height: calc(36px * var(--plp-tab-s)) !important;
    border-width: calc(2px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__nav span,
  body.product-list-page .plp-ranking__nav span {
    width: calc(7px * var(--plp-tab-s)) !important;
    height: calc(7px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-ranking__nav--prev,
  body.product-list-page .plp-ranking__nav--prev {
    left: calc(4px * var(--plp-tab-s)) !important;
    transform: translateY(-50%) !important;
  }

  .plp-main .plp-ranking__nav--next,
  body.product-list-page .plp-ranking__nav--next {
    right: calc(4px * var(--plp-tab-s)) !important;
    transform: translateY(-50%) !important;
  }

  /* Subcategory + product grid: 2 per row (320–425 only) */
  .plp-main .plp-subcat__grid,
  body.product-list-page .plp-subcat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(10px * var(--plp-tab-s)) calc(8px * var(--plp-tab-s)) !important;
  }

  .plp-main .plp-subcat__link,
  body.product-list-page .plp-subcat__link {
    font-size: max(calc(12px * var(--plp-tab-s)), 11px) !important;
    overflow-wrap: anywhere !important;
  }

  .plp-main .plp-grid,
  body.product-list-page .plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: calc(14px * var(--plp-tab-s)) calc(10px * var(--plp-tab-s)) !important;
  }
}