/* Homepage refresh. Scoped to .yh-refresh to preserve shopping/account screens. */
.yh-refresh{--yh-ink:#11244b;--yh-muted:#53617a;--yh-blue:#007ac2;--yh-paper:#fff;--yh-line:#e5edf4;color:var(--yh-ink);background:#fbfdff}
.yh-refresh *, .yh-refresh *::before,.yh-refresh *::after{box-sizing:border-box}
.yh-refresh .yh-intro{padding-top:20px}
.yh-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.1fr;min-height:440px;border-radius:28px;overflow:hidden;background:radial-gradient(ellipse at 0 0,#f8dce4,transparent 55%),#fff3f3}
.yh-hero::before{content:"";position:absolute;width:260px;height:260px;left:-140px;bottom:-170px;border:36px solid #f6cdd5;border-radius:50%;z-index:-1}
.yh-copy{position:relative;z-index:2;align-self:center;padding:44px 0 50px 40px}
.yh-refresh .yh-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--yh-muted);margin:0 0 18px}
.yh-refresh .yh-copy h1{font-size:clamp(32px,3.45vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1.12;margin:0 0 20px;color:var(--yh-ink)}
.yh-refresh .yh-lead{max-width:360px;font-size:18px;line-height:1.6;color:#34486c;margin:0 0 28px}
.yh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.yh-refresh .yh-primary{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:50px;padding:14px 22px;border-radius:16px;background:var(--yh-blue);color:white;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 7px 16px #007ac21c;transition:background .2s,transform .2s}
.yh-refresh .yh-primary:hover{background:#005f98;transform:translateY(-2px)}
.yh-refresh .yh-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#006ba8;font-size:13px;line-height:1.4;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.yh-scene{position:relative;min-width:0;min-height:440px;overflow:hidden}
.yh-big-type{position:absolute;top:22px;left:0;font-size:clamp(90px,10vw,144px);font-weight:800;letter-spacing:-.075em;line-height:1;color:#a2d9ef;white-space:nowrap;z-index:0}
.yh-original-art{position:absolute;inset:100px 0 0;background-image:url('../images/banner1.jpg');background-size:228% auto;background-repeat:no-repeat;background-position:left bottom;mask-image:linear-gradient(to bottom,transparent 0,#000 6%),linear-gradient(to right,transparent 0,#000 12%);mask-composite:intersect}
.yh-scene-note{position:absolute;right:20px;top:24px;color:#69758b;font-size:12px;line-height:1.6;transform:rotate(8deg);background:#fff8;padding:12px;border-radius:50%}
.yh-guide{position:relative;display:flex;align-items:center;gap:18px;margin:24px 0 30px;padding:22px 22px 22px 118px;border:1px solid #e3f1fa;border-radius:24px;background:linear-gradient(110deg,#eaf7ff,#f6fbff);scroll-margin-top:160px}
.yh-bunny{position:absolute;left:5px;bottom:0;width:112px;height:128px;object-fit:contain;filter:drop-shadow(0 6px 6px #2047670c)}
.yh-refresh .yh-guide h2{font-size:23px;letter-spacing:-.035em;line-height:1.2;margin:0 0 7px;color:var(--yh-ink)}
.yh-refresh .yh-guide p{font-size:12px;line-height:1.5;margin:0;color:#465c79}
.yh-guide-copy{flex:1;min-width:200px}
.yh-shortcuts{display:flex;gap:10px;flex:1.7;min-width:0}
.yh-shortcuts a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:60px;border:1px solid #badbf0;border-radius:16px;background:#ffffffd9;padding:10px 12px;color:#173557;text-decoration:none;font-size:12px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.yh-shortcuts i{font-size:21px;color:#006ba8}.yh-shortcuts b{margin-left:auto;color:#006ba8;font-size:16px}
.yh-shortcuts a:hover{border-color:var(--yh-blue);box-shadow:0 4px 12px #007ac215}
.yh-discovery{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;margin-bottom:12px;align-items:start}
.yh-picks{min-width:0}.yh-section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 20px}
.yh-refresh .yh-section-top .yh-eyebrow{margin-bottom:6px}
.yh-refresh .yh-section-top h2{font-size:28px;letter-spacing:-.04em;line-height:1.2;margin:0 0 8px;color:var(--yh-ink)}
.yh-refresh .yh-section-top p{font-size:14px;line-height:1.5;margin:0;color:var(--yh-muted)}
.yh-refresh .yh-picks .yens-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.yh-refresh .yens-product-card{border:1px solid var(--yh-line);border-radius:18px;box-shadow:none;overflow:hidden}
.yh-refresh .yens-card-img-wrap{background:#f8f5f3;aspect-ratio:1;border-radius:12px;margin:8px 8px 0;height:auto;width:auto;padding:0;flex-shrink:0}
.yh-refresh .yens-card-img{object-fit:contain;padding:0;mix-blend-mode:normal}
.yh-refresh .yens-card-body{padding:14px;gap:8px}
.yh-refresh .yens-card-brand{display:none}
.yh-refresh .yens-card-title{margin:0;min-height:0;height:auto}
.yh-refresh .yens-card-title a{font-size:14px;line-height:1.5;font-weight:500;color:var(--yh-ink)}
.yh-refresh .yens-card-price-row{min-height:0;padding-top:4px}
.yh-refresh .yens-card-price{font-size:16px;color:var(--yh-ink);font-weight:750;font-variant-numeric:tabular-nums}
.yh-refresh .yens-card-add-btn{border-color:#cde5f3;background:#f2faff;border-radius:10px;min-height:44px}
.yh-category-panel{border:1px solid var(--yh-line);padding:22px;border-radius:24px;background:#fff}
.yh-refresh .yh-category-panel h2{font-size:22px;line-height:1.25;letter-spacing:-.035em;margin:0 0 20px;color:var(--yh-ink)}
.yh-category-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yh-category-tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:112px;padding:12px 6px;border-radius:14px;background:#edf7ff;color:#203758;font-size:12px;line-height:1.5;text-decoration:none}
.yh-category-tiles a:nth-child(2){background:#fff0f4}.yh-category-tiles a:nth-child(3){background:#fff6e8}.yh-category-tiles a:nth-child(4){background:#eaf8f1}
.yh-category-tiles i{font-size:28px;color:#46647b}
.yh-refresh a:focus-visible,.yh-refresh button:focus-visible{outline:3px solid #007ac2;outline-offset:4px}
.yh-refresh .yens-section{padding:32px 0}.yh-refresh .yens-section-title{color:var(--yh-ink);letter-spacing:-.035em;font-size:28px;line-height:1.25}
.yh-refresh .yens-cat-card{box-shadow:none;border:1px solid var(--yh-line);border-radius:18px}
.yh-refresh .yens-bundle-banner-wrap{background:#edf7ff;border:1px solid #dcecf5;box-shadow:none}
.yh-refresh .yens-bundle-header .yens-section-title{color:var(--yh-ink)!important}.yh-refresh .yens-bundle-header .yens-section-subtitle{color:var(--yh-muted)!important}
@media(min-width:1500px){.yh-refresh .yh-intro{max-width:1320px}.yh-refresh .yh-copy h1{font-size:50px}}
@media(max-width:1100px){.yh-guide{flex-wrap:wrap}.yh-guide-copy{flex-basis:100%}.yh-shortcuts{flex-basis:100%}.yh-discovery{grid-template-columns:minmax(0,1fr) 210px;gap:18px}.yh-refresh .yh-picks .yens-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.yh-copy{padding-left:28px}.yh-scene-note{display:none}}
@media(max-width:767px){.yh-refresh .yh-intro{padding:12px 14px 0}.yh-hero{display:flex;flex-direction:column;border-radius:22px;min-height:0}.yh-copy{text-align:center;padding:28px 18px 8px}.yh-refresh .yh-copy h1{font-size:clamp(29px,7.7vw,42px);letter-spacing:-.045em;margin-bottom:14px}.yh-refresh .yh-eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:14px}.yh-refresh .yh-lead{font-size:15px;line-height:1.55;margin:0 auto 18px;max-width:290px}.yh-actions{justify-content:center;gap:4px 16px}.yh-refresh .yh-primary{font-size:14px;min-height:46px;padding:12px 22px}.yh-scene{height:265px;min-height:265px;width:100%;margin-top:6px}.yh-big-type{font-size:86px;top:0;left:50%;transform:translateX(-50%)}.yh-original-art{inset:58px 0 0;background-size:228% auto}.yh-guide{margin:18px 0 28px;padding:18px 14px 18px 90px;gap:14px;border-radius:20px;scroll-margin-top:130px}.yh-bunny{left:-5px;top:12px;width:92px;height:116px}.yh-guide-copy{min-width:0}.yh-refresh .yh-guide h2{font-size:21px}.yh-shortcuts{flex-direction:column;gap:8px}.yh-shortcuts a{min-height:48px;padding:9px 12px;border-radius:12px;font-size:12px}.yh-shortcuts i{font-size:18px}.yh-discovery{grid-template-columns:1fr;gap:24px}.yh-section-top{gap:10px;align-items:flex-start;margin-bottom:16px}.yh-refresh .yh-section-top h2{font-size:25px}.yh-refresh .yh-section-top p{font-size:12px}.yh-section-top .yh-text-link{font-size:12px;white-space:nowrap}.yh-refresh .yh-picks .yens-product-grid{gap:12px}.yh-refresh .yens-card-body{padding:11px}.yh-refresh .yens-card-title a{font-size:14px!important;line-height:1.5}.yh-refresh .yens-card-price{font-size:14px!important}.yh-category-panel{padding:20px}.yh-refresh .yh-category-panel h2 br{display:none}.yh-category-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.yh-category-tiles a{font-size:10px;min-height:100px}.yh-category-tiles i{font-size:24px}.yh-refresh .yens-section-title{font-size:24px}.yh-refresh .yens-section{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.yh-refresh *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.yh-refresh .yh-intro>.yh-guide:first-child{margin-top:4px}
/* 2026-10-15 featured product banner: the existing pink hero surface, now one real product; the whole banner is one link. */
.yh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.yh-hero.yh-feature{display:block;min-height:0}
.yh-feature-link{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;min-height:380px;color:inherit;text-decoration:none!important;border-radius:inherit}
.yh-feature-link:focus-visible{outline:3px solid var(--yh-blue);outline-offset:-3px}
.yh-feature .yh-copy{padding:40px 8px 44px 44px}
.yh-refresh .yh-feature .yh-eyebrow{margin:0 0 14px}
.yh-refresh .yh-feature-title{font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:0 0 14px;color:var(--yh-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yh-refresh .yh-feature-price{font-size:22px;font-weight:800;color:var(--yh-ink);margin:0 0 24px;font-variant-numeric:tabular-nums}
.yh-refresh .yh-feature-price del{font-size:15px;font-weight:500;color:#6b7280;margin-right:8px}.yh-refresh .yh-feature-price ins{text-decoration:none}
.yh-feature-media{padding:28px 28px 28px 0}
.yh-feature-img{display:block;width:min(100%,340px);height:auto;aspect-ratio:1;margin:0 auto;object-fit:contain;background:#fff;border-radius:22px;box-shadow:0 14px 34px #b9566a26}
.yh-feature-link:hover .yh-primary{background:#005f98}
@media(max-width:767px){.yh-feature-link{grid-template-columns:1fr;min-height:0;gap:0}.yh-feature .yh-copy{padding:24px 18px 4px;text-align:center}.yh-feature-media{padding:14px 18px 20px}.yh-feature-img{width:min(100%,260px)}.yh-refresh .yh-feature-title{font-size:clamp(24px,6.6vw,32px)}.yh-refresh .yh-feature-price{margin-bottom:16px}}

/* Product cards on the homepage (transition only declared inside the mouse media query, on rest AND :hover selectors, so entry and exit both animate): gentle zoom OUT (1 -> .97, so the whole contained photo always stays visible) + a 2px lift,
   mouse only. Base resets include the :hover states (0,4,1) so they beat design-system/ecommerce '.yens-product-card:hover
   .yens-card-img' (0,3,0) and responsive.css: touch, hover:none, coarse pointers and reduced motion always compute scale 1 / no
   lift. The mouse rule below has equal specificity and comes later, so it wins only inside its media query. Transform only. */
body .yh-refresh .yens-product-card,body .yh-refresh .yens-product-card:hover,body .yh-refresh .ym-card,body .yh-refresh .ym-card:hover{transform:none}
body .yh-refresh .yens-product-card .yens-card-img,body .yh-refresh .yens-product-card:hover .yens-card-img,
body .yh-refresh .ym-card .ym-image-link img,body .yh-refresh .ym-card:hover .ym-image-link img{transform:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body .yh-refresh .yens-product-card,body .yh-refresh .ym-card{transition:transform .25s cubic-bezier(.23,1,.32,1)}
  body .yh-refresh .yens-product-card .yens-card-img,body .yh-refresh .yens-product-card:hover .yens-card-img,
  body .yh-refresh .ym-card .ym-image-link img,body .yh-refresh .ym-card:hover .ym-image-link img{transition:transform .45s cubic-bezier(.23,1,.32,1)}
  body .yh-refresh .yens-product-card:hover,body .yh-refresh .ym-card:hover{transform:translateY(-2px)}
  body .yh-refresh .yens-product-card:hover .yens-card-img,body .yh-refresh .ym-card:hover .ym-image-link img{transform:scale(.97)}
}
/* 2026-10-16 approved soft 3D category icons: compact image in place of the emoji (80px desktop, 64px phone). */
.yh-refresh .yens-cat-icon--img{font-size:0;line-height:0;margin-bottom:8px}
.yh-refresh .yens-cat-img{display:block;width:80px;height:80px;object-fit:contain}
@media(max-width:767px){.yh-refresh .yens-cat-img{width:64px;height:64px}.yh-refresh .yens-cat-icon--img{margin-bottom:6px}}