@import url("./more.css");
.ph-hero__title { width: min(calc(100% - 32px), 640px); margin: 0; line-height: 0; }
.ph-hero__title img { display: block; width: 100%; height: auto; }
.ph-home-layout { display: grid; grid-template-columns: 305px minmax(0,1fr); margin-inline: auto; background: #fff url("images/content-background.svg") center top / 100% auto repeat-y; }
.ph-main { min-width: 0; }
.ph-home-layout *, .ph-home-layout *::before, .ph-home-layout *::after { box-sizing: border-box; }
.ph-home-layout .ph-sidebar { align-self: start; }
.ph-home-layout button,.ph-home-layout input { font: inherit; }
.ph-home-layout button,.ph-home-layout a { -webkit-tap-highlight-color: transparent; }
.ph-home-layout :is(button,input,a):focus-visible { outline: 3px solid var(--ph-focus); outline-offset: 3px; }
.ph-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ph-skip { position: absolute; top: -100px; left: 16px; z-index: 10; background: white; padding: 12px; }
.ph-skip:focus { top: 8px; }
.ph-hero { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0 70px; overflow: clip; background: url('images/hero/background.png') top left / 100% auto; }
.ph-utilities { display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%; padding: 0 20px; }
.ph-utilities__character { flex: none; }
.ph-search { display: flex; align-items: center; min-width: 0; flex: 1; max-width: 440px; height: 45px; border: 2px solid var(--ph-border-light); border-radius: 30px; background: white; overflow: hidden; }
.ph-search>img { margin-left: 10px; flex: none; }
.ph-search input { width: 100%; min-width: 0; padding: 10px 5px; border: 0; font-size: 12px; color: var(--ph-text-primary); background: white; }
.ph-home-layout .ph-search input:focus-visible { outline: none; }
.ph-search:focus-within { border-color: var(--ph-focus); }
.ph-search button { flex: none; white-space: nowrap; align-self: stretch; padding: 0 20px; border: 0; background: var(--ph-blue-bright); color: white; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: inset -1px 8px 6px #ffffff33,inset 0 -3px 6px #5c5c5c66; }
.ph-guide { display: flex; gap: 5px; align-items: center; flex: none; min-height: 44px; padding: 10px 20px; border: 2px solid var(--ph-green); border-radius: 30px; background: var(--ph-green-soft); color: var(--ph-green); font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 5px #00000040; }

.ph-carousel { width: 100%; min-width: 0; }
.ph-carousel__track { display: flex; gap: 28px; overflow-x: auto; padding: 5px max(20px,calc((100% - 400px)/2)) 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ph-carousel__slide { flex: 0 0 400px; width: 400px; height: 400px; border: 5px solid white; box-shadow: 0 0 0 4px #00000080; scroll-snap-align: center; background: white; }
.ph-carousel__slide > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ph-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.ph-carousel__controls[hidden] { display: none; }
.ph-carousel__controls button { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
.ph-carousel__controls button:disabled { opacity: .4; cursor: default; }
.ph-carousel__position { font-size: 12px; font-variant-numeric: tabular-nums; }
.ph-manufacturers { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 0 50px; }
.ph-manufacturers a { flex: 0 1 auto; min-width: 0; }
.ph-manufacturers img { display: block; max-width: 100%; height: auto; }
.ph-content { display: flex; flex-direction: column; gap: 70px; padding: 70px 50px; overflow: clip; }
.ph-introduction { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 50px; }
.ph-introduction__art { position: relative; justify-self: center; width: min(100%,346px); height: 310px; }
.ph-introduction__glow { position: absolute; max-width: none; }
.ph-introduction__glow--pink { left: -136.5px; top: -136.5px; }
.ph-introduction__glow--green { left: 6.5px; top: -106.5px; }
.ph-introduction__glow--blue { left: -70.5px; top: 19.5px; }
.ph-introduction__character { position: absolute; left: 25px; top: 0; width: 295px; height: 295px; }
.ph-introduction__copy { position: relative; min-width: 0; }
.ph-introduction h2 { margin: 0; font-size: 24px; line-height: 1.8; color: var(--ph-pink-light); }
.ph-introduction__english { margin: 0 0 20px; color: var(--ph-pink-light); font-size: 16px; }
.ph-introduction__copy>p:last-child { margin: 0; font-size: 14px; line-height: 30px; }
.ph-section-heading { display: flex; align-items: center; margin-bottom: 20px; }
.ph-section-heading span { font-size: 16px; }.ph-section-heading h2 { font-size: 32px; line-height: 1.1; margin: 0; }
.ph-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
@media (min-width:768px) and (max-width:1100px) {
 .ph-utilities { flex-wrap: wrap; }.ph-utilities__character { display: none; }.ph-content { padding-inline: 24px; }.ph-introduction { grid-template-columns: minmax(0,1fr); gap: 20px; }.ph-introduction__art { width: min(100%,346px); }.ph-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ph-manufacturers { flex-wrap: wrap; justify-content: center; padding-inline: 24px; }.ph-manufacturers img { height: 65px; width: auto; }
}
@media (max-width:767px) {
 .ph-home-layout { display: block; }.ph-hero { padding: 16px 0 32px; }.ph-utilities { flex-wrap: wrap; padding-inline: 16px; gap: 10px; }.ph-utilities__character { display: none; }.ph-search { flex-basis: 100%; max-width: none; }.ph-guide { padding: 8px 16px; }.ph-carousel__track { gap: 20px; padding-inline: 10%; }.ph-carousel__slide { flex-basis: 100%; width: auto; height: auto; aspect-ratio: 1; }.ph-carousel__slide > img { aspect-ratio: 1; height: auto; }.ph-manufacturers { flex-wrap: wrap; justify-content: center; padding-inline: 16px; gap: 8px; }.ph-manufacturers a { flex: 0 1 calc((100% - 24px)/4); }.ph-content { gap: 40px; padding: 40px 16px; }.ph-introduction { grid-template-columns: minmax(0,1fr); gap: 20px; }.ph-introduction__art { width: min(100%,295px); height: 295px; }.ph-introduction__character { left: 0; }.ph-introduction h2 { font-size: 20px; }.ph-introduction__english { font-size: 12px; }.ph-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ph-section-heading h2 { font-size: 26px; }
}
@media(max-width:359px) { .ph-card-grid { grid-template-columns: 1fr; } }

/* Active pagination expands into a timer track with room around the face. */
.ph-carousel__controls { flex-wrap: wrap; padding-inline: 12px; }
.ph-carousel__dots { flex-basis: 100%; display: flex; align-items: center; justify-content: center; --ph-progress: 0; }
.ph-carousel__controls .ph-carousel__dot { position: relative; flex: none; width: 26px; padding: 0; overflow: hidden; transition: width .35s ease,margin .35s ease; }
.ph-carousel__dot span { display: block; width: 15px; height: 15px; border-radius: 50%; background: #c8cdd8; transition: width .35s ease,border-radius .35s ease,background-color .35s ease; }
.ph-carousel__dot img { display: block; position: absolute; width: 33px; height: 24px; left: calc(var(--ph-progress) * (100% - 41px)); top: calc(50% - 14px); opacity: 0; }
.ph-carousel__controls .ph-carousel__dot.is-expanded { width: 130px; margin-inline: 12px; }
.ph-carousel__dot.is-expanded span { width: 100%; border: .5px solid var(--ph-border); border-radius: 10px; background: #f0f2f7; }
.ph-carousel__dot.is-expanded img { opacity: 1; transition: opacity .1s ease .25s; }
.ph-carousel__control-icon { position: relative; display: block; width: 40px; height: 40px; border: .5px solid var(--ph-border); border-radius: 50%; background: radial-gradient(circle at 30% 25%,#ffffff59,transparent 75%),var(--ph-pink-bright); box-shadow: 0 2px 2px #00000059,inset 0 -3px 4px #80004080,inset 0 3px 3px #ffffff99; }
/* Material-inspired sizing: 20px symbol, 40px face, 48px hit area. */
.ph-carousel__controls :is([data-step],.ph-carousel__playback) { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; }
.ph-carousel__control-icon .ph-icon { position: absolute; width: 20px; height: 20px; left: 50%; top: 50%; transform: translate(-50%,-50%); color: white; }
.ph-carousel__playback .ph-icon--player-play { display: none; }
.ph-carousel__playback[data-paused="true"] .ph-icon--player-play { display: block; }
.ph-carousel__playback[data-paused="true"] .ph-icon--player-pause { display: none; }
@media (max-width:767px) {
 .ph-carousel__controls .ph-carousel__dot { width: 24px; }
 .ph-carousel__controls .ph-carousel__dot.is-expanded { width: 110px; margin-inline: 10px; }
}
/* Keep the native horizontal list until Swiper has initialized. */
.ph-carousel__viewport { position: relative; width: 100%; overflow: hidden; }
.ph-carousel__viewport.swiper-initialized { padding-block: 5px 12px; }
.ph-carousel__viewport.swiper-initialized .ph-carousel__track { gap: 0; overflow: visible; padding: 0; scroll-snap-type: none; transition-timing-function: cubic-bezier(.65,0,.35,1); }
.ph-carousel__viewport.swiper-initialized .ph-carousel__slide { flex: 0 0 auto; scroll-snap-align: none; }
@media (max-width:767px) { .ph-carousel__viewport.swiper-initialized .ph-carousel__slide { width: 80%; } }

@media (prefers-reduced-motion:reduce) { .ph-carousel__controls .ph-carousel__dot,.ph-carousel__dot span,.ph-carousel__dot.is-expanded img { transition: none; } }

/* Original products reuse the existing card and carousel controls. */
.ph-original-items { min-width: 0; }
.ph-original-items .ph-section-heading { margin-bottom: 16px; }
.ph-original-items .ph-section-heading > img { flex: none; width: 63px; height: 53px; object-fit: contain; }
.ph-original-items .ph-section-heading > div { min-width: 0; }
.ph-card-carousel .ph-carousel__track { gap: 10px; padding: 0 0 8px; }
.ph-card-carousel .ph-carousel__slide { flex: 0 0 calc((100% - 30px)/4); width: calc((100% - 30px)/4); height: auto; aspect-ratio: auto; border: 0; box-shadow: none; background: none; }
.ph-card-carousel .ph-card { height: 100%; }
.ph-card-carousel .ph-card__image { flex-shrink: 0; }
.ph-card-carousel .ph-carousel__viewport.swiper-initialized { padding: 0; }
.ph-card-carousel .ph-carousel__viewport.swiper-initialized .ph-carousel__track { align-items: stretch; }
.ph-original-items__footer { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 16px; }
.ph-original-items__footer .ph-more { flex: none; margin: 0 auto; }
.ph-original-items__footer .ph-carousel__controls { margin: 0; padding: 0; }
.ph-original-items__footer .ph-carousel__dots { flex-basis: auto; }
.ph-original-items__footer .ph-carousel__controls { width: min(100%,360px); display: grid; grid-template-columns: repeat(3,48px); justify-items: center; justify-content: center; }
.ph-original-items__footer .ph-carousel__controls[hidden] { display: none; }
.ph-original-items__footer .ph-carousel__dots { grid-column: 1 / -1; }
@media (max-width: 1023px) { .ph-card-carousel .ph-carousel__slide { flex-basis: calc((100% - 10px)/2); width: calc((100% - 10px)/2); } }
@media (max-width: 767px) {
    .ph-original-items .ph-section-heading h2 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
    .ph-original-items .ph-section-heading span { font-size: 12px; }
    .ph-original-items__footer { justify-content: center; }
    .ph-original-items__footer .ph-carousel__controls { flex-basis: 100%; }
    .ph-original-items__footer .ph-more { margin: 0 auto; }
}
@media (max-width: 359px) { .ph-card-carousel .ph-carousel__slide { flex-basis: 100%; width: 100%; } }

@media (max-width: 359px) { .ph-original-items__footer .ph-carousel__dot { width: 20px; } }

.ph-carousel__controls .ph-carousel__dot[hidden] { display: none; }

@media (min-width: 768px) {
    .ph-original-items__footer .ph-carousel__controls { display: flex; flex-wrap: nowrap; width: auto; max-width: 100%; }
    .ph-original-items__footer .ph-carousel__dots { flex-basis: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ph-original-items__footer .ph-carousel__dot { width: 18px; }
    .ph-original-items__footer .ph-carousel__dot.is-expanded { width: 90px; margin-inline: 4px; }
}

/* Suggestions remain inside the mobile dialog when the search form is moved. */
.ph-search { position: relative; overflow: visible; }
.ph-search > button { border-radius: 0 28px 28px 0; }
.ph-search-dropdown { position: absolute; z-index: 20; top: calc(100% + 6px); left: -2px; right: -2px; padding-block: 6px; overflow: hidden; border: 2px solid var(--ph-border-light); border-radius: 14px; background: white; box-shadow: 0 8px 20px #15203826; }
.ph-search-dropdown:has(.ph-search-results[hidden]) { display: none; }
.ph-search-results { max-height: min(304px,calc(45dvh - 16px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ph-border-light) transparent; }
.ph-search-results[hidden] { display: none; }
.ph-search-results a { display: block; padding: 12px 14px; color: var(--ph-text-primary); font-size: 14px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.ph-search-results a + a { border-top: 1px solid var(--ph-border-light); }
.ph-search-results a:hover,.ph-search-results a[aria-selected="true"] { background: var(--ph-blue-soft); }

.ph-search-status { position: absolute; z-index: 20; top: calc(100% + 6px); left: -2px; right: -2px; padding: 12px 14px; border: 2px solid var(--ph-border-light); border-radius: 14px; background: white; color: var(--ph-text-primary); font-size: 14px; line-height: 1.5; box-shadow: 0 8px 20px #15203826; }
.ph-search-status[hidden] { display: none; }