.wa-page-yoshi-shimmer { background:#090909; color:#f8f5ef; }
.wa-page-yoshi-shimmer .webapp-main { max-width:none; padding:0; }
.ys-promo { --ys-gold:#d9ab48; --ys-silver:#d9dce2; --ys-ink:#090909; --ys-panel:#151515; overflow:hidden; }
.ys-hero { min-height:680px; position:relative; display:grid; align-items:center; isolation:isolate; }
.ys-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.22) 67%,rgba(0,0,0,.18) 100%); }
.ys-hero__image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; }
.ys-hero__copy { width:min(650px,92vw); margin-left:max(5vw,calc((100vw - 1240px)/2)); padding:90px 0; }
.ys-hero--creative { min-height:0; display:block; background:#000; }
.ys-hero--creative::after { display:none; }
.ys-hero__creative-link,.ys-hero__creative-link picture { display:block; }
.ys-hero__creative-image { display:block; width:100%; height:auto; object-fit:contain; }
.ys-kicker { margin:0 0 14px; color:var(--ys-gold); font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.ys-hero h1 { max-width:620px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3rem,6vw,6.2rem); line-height:.92; letter-spacing:-.04em; }
.ys-hero h1 span { display:block; color:var(--ys-gold); }
.ys-lead { max-width:570px; margin:28px 0 22px; color:#e8e2da; font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.55; }
.ys-price { display:flex; align-items:center; gap:18px; margin:0 0 26px; }
.ys-price strong { font-size:clamp(3rem,5vw,5rem); line-height:1; color:#fff; }
.ys-price span { max-width:100px; color:#d2c9bc; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; }
.ys-btn { border:1px solid var(--ys-gold); border-radius:2px; background:linear-gradient(135deg,#e6bf66,#a97522); color:#0a0907!important; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding:14px 24px; box-shadow:0 12px 32px rgba(191,138,40,.2); }
.ys-btn:hover,.ys-btn:focus { background:#f1d28b; transform:translateY(-1px); }
.ys-btn:disabled { opacity:.45; filter:grayscale(.6); transform:none; }
.ys-micro { margin:14px 0 0; color:#aaa39a; font-size:.86rem; }
.ys-benefits { display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:-35px auto 0; position:relative; z-index:2; background:#121212; border:1px solid #2d2923; box-shadow:0 22px 55px rgba(0,0,0,.4); }
.ys-benefits article { min-height:155px; padding:28px; display:grid; gap:7px; align-content:center; border-right:1px solid #2d2923; }
.ys-benefits article:last-child { border:0; }
.ys-benefits i { color:var(--ys-gold); font-size:1.5rem; }
.ys-benefits strong { font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; }
.ys-benefits span { color:#a9a49d; font-size:.9rem; line-height:1.45; }
.ys-picker { max-width:1240px; margin:0 auto; padding:110px 0 150px; }
.ys-mobile-guide { display:none; }
.ys-picker__head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.ys-picker h2,.ys-final h2 { margin:0 0 12px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.3rem,4.5vw,4.6rem); line-height:1; }
.ys-picker__head p:last-child { max-width:760px; color:#aaa39a; margin:0; }
.ys-counter { flex:0 0 auto; width:125px; height:125px; display:grid; place-content:center; text-align:center; border-radius:50%; border:2px solid var(--ys-gold); box-shadow:0 0 40px rgba(217,171,72,.12); }
.ys-counter strong { color:var(--ys-gold); font-size:3rem; line-height:.9; }
.ys-counter span { margin-top:6px; color:#bbb4aa; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
.ys-toolbar { height:56px; display:flex; align-items:center; gap:12px; padding:0 14px 0 20px; background:#151515; border:1px solid #34302a; margin-bottom:18px; }
.ys-toolbar i { color:var(--ys-gold); }
.ys-toolbar input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:#fff; font-size:1rem; }
.ys-toolbar input::placeholder { color:#78736c; }
.ys-toolbar .btn { color:#d6d0c7; border:1px solid #3e3932; }
.ys-selected { min-height:66px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; margin-bottom:22px; border:1px dashed #474139; background:#0e0e0e; }
.ys-selected__empty { color:#827d76; font-size:.9rem; padding:0 5px; }
.ys-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid #665638; background:#211b12; color:#f2e4c7; padding:8px 10px; font-size:.82rem; }
.ys-chip button { appearance:none; border:0; background:transparent; color:#e4b95d; padding:0; line-height:1; }
.ys-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.ys-color { position:relative; display:grid; grid-template-rows:180px auto; min-width:0; padding:0; overflow:hidden; border:1px solid #302d28; background:#151515; color:#f5f2ed; text-align:left; transition:.18s ease; }
.ys-color:hover { border-color:#867040; transform:translateY(-2px); }
.ys-color[aria-pressed="true"] { border-color:var(--ys-gold); box-shadow:0 0 0 1px var(--ys-gold),0 14px 35px rgba(217,171,72,.14); }
.ys-color[hidden] { display:none; }
.ys-color__image { display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#2c2a27,#0f0f0f 68%); overflow:hidden; }
.ys-color__image img { width:100%; height:100%; object-fit:contain; }
.wa-page-ilak-kit .ys-color { grid-template-rows:auto 1fr; }
.wa-page-ilak-kit .ys-color__image { position:relative; display:block; aspect-ratio:1 / 1; background:#fff; }
.wa-page-ilak-kit .ys-color__bottle { position:absolute; z-index:1; left:6%; bottom:5%; width:42%; height:90%; object-fit:contain; }
.wa-page-ilak-kit .ys-color__bottle-tint { position:absolute; z-index:2; left:6%; bottom:5%; width:42%; height:90%; background:var(--ilak-shade,#eee); opacity:.92; mix-blend-mode:multiply; -webkit-mask:url('../images/promo/ilak-neutral-bottle-20260718.png') center/contain no-repeat; mask:url('../images/promo/ilak-neutral-bottle-20260718.png') center/contain no-repeat; pointer-events:none; }
.wa-page-ilak-kit .ys-color__swatch { position:absolute; inset:4% 2% 4% 56%; overflow:hidden; }
.wa-page-ilak-kit .ys-color__swatch img { position:absolute; display:block; max-width:none; width:auto; height:100%; object-fit:contain; }
.wa-page-ilak-kit .ys-color--bottle-source .ys-color__swatch img { right:0; }
.wa-page-ilak-kit .ys-color--swatch-only .ys-color__swatch img { left:50%; transform:translateX(-50%); }
.ys-color--no-image .ys-color__image::before { content:"YOSHI"; color:#5c5852; letter-spacing:.2em; }
.ys-color__name { min-height:68px; display:flex; align-items:center; padding:12px 36px 12px 13px; font-size:.83rem; line-height:1.35; }
.ys-color__check { position:absolute; right:11px; bottom:21px; width:22px; height:22px; display:grid; place-items:center; border:1px solid #5b554c; border-radius:50%; color:transparent; }
.ys-color[aria-pressed="true"] .ys-color__check { color:#111; border-color:var(--ys-gold); background:var(--ys-gold); }
.ys-color[data-selection-order]::after { content:attr(data-selection-order); position:absolute; top:10px; right:10px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--ys-gold); color:#080705; font-weight:900; box-shadow:0 4px 16px rgba(0,0,0,.45); }
.ys-no-results { color:#aaa39a; text-align:center; padding:50px; }
.ys-sticky { position:fixed; z-index:1040; left:50%; bottom:18px; transform:translateX(-50%); width:min(1000px,calc(100vw - 30px)); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px 14px 22px; border:1px solid #4d4332; background:rgba(13,13,13,.95); backdrop-filter:blur(14px); box-shadow:0 18px 60px rgba(0,0,0,.55); }
.ys-sticky>div { display:grid; }
.ys-sticky span { color:#938c82; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.ys-sticky strong { color:#fff; }
.ys-status { min-height:30px; color:#e5c579; text-align:center; margin-top:22px; }
.ys-final { padding:115px max(5vw,calc((100vw - 1240px)/2)); text-align:center; background:radial-gradient(circle at 50% 0,rgba(217,171,72,.2),transparent 45%),linear-gradient(180deg,#17130e,#070707); border-top:1px solid #332b20; }
.ys-final p:not(.ys-kicker) { max-width:760px; margin:0 auto 28px; color:#b9b1a6; font-size:1.08rem; }
.ys-btn--light { background:#f3e6cd; border-color:#f3e6cd; }
@media (max-width:991.98px) {
  .ys-hero { min-height:760px; align-items:end; }
  .ys-hero--creative { min-height:0; }
  .ys-hero::after { background:linear-gradient(0deg,#050505 3%,rgba(5,5,5,.9) 46%,rgba(5,5,5,.1) 82%); }
  .ys-hero__image { object-position:65% center; }
  .ys-hero__copy { margin:0; padding:310px 24px 58px; width:100%; }
  .ys-benefits { grid-template-columns:repeat(2,1fr); margin:0 18px; }
  .ys-benefits article:nth-child(2) { border-right:0; }
  .ys-benefits article:nth-child(-n+2) { border-bottom:1px solid #2d2923; }
  .ys-picker { padding:80px 20px 145px; }
  .ys-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
  .ys-hero { min-height:690px; }
  .ys-hero--creative { min-height:0; }
  .ys-hero__copy { padding:250px 20px 46px; }
  .ys-hero h1 { font-size:3.15rem; }
  .ys-benefits { display:none; }
  .ys-mobile-guide { display:grid; gap:6px; margin:0 0 18px; padding:16px; border:1px solid var(--ys-gold); background:#1d180f; }
  .ys-mobile-guide strong { color:var(--ys-gold); font-size:1rem; }
  .ys-mobile-guide span { color:#f3eee5; font-size:.86rem; }
  .ys-picker { padding-top:28px; }
  .ys-picker__head { position:sticky; top:58px; z-index:20; margin:0 -20px 16px; padding:14px 20px; background:rgba(9,9,9,.97); border-bottom:1px solid #3f3524; backdrop-filter:blur(10px); }
  .ys-picker__head h2 { font-size:1.7rem; }
  .ys-picker__head p:last-child { font-size:.82rem; line-height:1.35; }
  .ys-benefits article { min-height:145px; padding:20px 16px; }
  .ys-picker__head { align-items:start; }
  .ys-counter { width:82px; height:82px; }
  .ys-counter strong { font-size:2rem; }
  .ys-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .ys-color { grid-template-rows:145px auto; }
  .wa-page-ilak-kit .ys-color { grid-template-rows:auto 1fr; }
  .ys-sticky { bottom:66px; padding:10px; flex-direction:column; gap:8px; }
  .ys-sticky>div { display:flex; width:100%; justify-content:space-between; align-items:center; }
  .ys-sticky .ys-btn { width:100%; font-size:.82rem; padding:13px 10px; }
}