/* LINE campaign preview: neutral storefront, green only for LINE actions. */

.member-announcement{display:flex;align-items:center;justify-content:center;gap:24px;padding:10px 24px;background:#e9e1d4;border-bottom:1px solid #d6cbb9}
.member-announcement>span{font:11px Georgia,serif;letter-spacing:.16em}
.member-announcement button{background:#292927;color:white;border:0;min-height:44px;padding:10px 24px;font-size:13px;letter-spacing:.04em;display:flex;gap:28px;align-items:center;justify-content:center}

#hair-diagnosis{margin-top:70px;margin-bottom:56px;padding:44px;gap:30px;background:#eee7dc;scroll-margin-top:20px}
#hair-diagnosis h2{font-size:clamp(25px,2.5vw,35px)}
#hair-diagnosis .model-film{max-height:460px;width:100%}
.diagnosis-details{display:block;font-size:12px;margin-top:16px;text-decoration:underline;text-underline-offset:5px}
.button.line-button{background:#06c755;color:#102b18;border:1px solid #06c755;font-weight:700;justify-content:center;min-height:50px;white-space:normal;text-align:center}
.diagnosis-intro .line-button{margin-top:22px}
.demo-caption{font-size:11px;color:#67645e;line-height:1.8;margin-top:16px;letter-spacing:0;overflow-wrap:anywhere}
#line-welcome{width:min(480px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #d5cbbd;padding:52px 36px 34px;background:#fffdf9;color:#30302e;text-align:center;border-radius:4px;margin:auto;box-shadow:0 22px 80px #0003}
#line-welcome::backdrop{background:#0008}
.line-close{position:absolute;right:10px;top:10px;width:44px;height:44px;background:transparent;border:0;font-size:28px;color:#30302e;line-height:1}
#line-welcome h2{font-size:30px;line-height:1.65;letter-spacing:.04em}#line-welcome h2 strong{font-size:44px;font-family:Arial,sans-serif;letter-spacing:-.02em}
#line-welcome-body{font-size:14px;line-height:1.9;margin:20px 0 24px}#line-welcome .line-button{display:flex;width:100%}#line-welcome .eyebrow{font-size:10px}
.line-landing{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:56px 0 90px;align-items:center;max-width:1080px}.line-lead h1{font-size:40px;margin-bottom:24px}.line-lead h1 strong{font-family:Arial,sans-serif;font-size:56px}.line-lead>p:not(.eyebrow){max-width:400px;font-size:15px}
.line-entry{text-align:center;background:#eee7dc;padding:30px;min-width:0}.qr-demo{width:260px;max-width:100%;aspect-ratio:1;margin:auto;background:white;border:1px solid #bcb7ac;position:relative;display:grid;place-items:center}.qr-demo>div{display:grid;gap:8px}.qr-demo b{font:22px Georgia,serif;letter-spacing:.12em}.qr-demo span{font-size:13px}.qr-demo small{font-size:10px;color:#777}.qr-corner{position:absolute;width:40px;height:40px;border:5px solid #30302e}.corner-a{left:16px;top:16px}.corner-b{right:16px;top:16px}.corner-c{left:16px;bottom:16px}.qr-note{font-size:12px;margin-top:18px}.mobile-line-add{display:none}.line-feedback{font-size:12px;margin-top:14px}
.line-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:32px 0 0;margin:0;border-top:1px solid #d9d5ca}.line-steps li>span{font:italic 32px Georgia,serif;color:#9b8462}.line-steps h2{font-size:20px;margin:12px 0}.line-steps p{font-size:13px}.line-next{grid-column:1/-1;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.cart-offer{display:flex;align-items:center;justify-content:center;gap:16px;background:#e9e1d4;padding:12px 18px;margin-top:25px}.cart-offer>a{font-size:15px;border-bottom:1px solid #a99b84}.cart-offer small{font-size:10px;white-space:nowrap}
.checkout-demo{max-width:620px;padding:48px 0 90px}.checkout-demo h1{font-size:clamp(25px,3vw,36px)}.checkout-demo>p:not(.eyebrow){font-size:14px;margin-top:16px}.checkout-card{background:var(--paper);border:1px solid var(--line);padding:32px;margin:28px 0}.checkout-card>.demo-caption{margin-top:0}#checkout-form{margin-top:24px}#checkout-form>label{display:block;font-size:13px;margin-bottom:8px}#checkout-email{width:100%;min-width:0;padding:12px;border:1px solid #aaa49b;background:white;font-size:16px;color:#30302e}#checkout-form .consent{display:flex;gap:10px;align-items:flex-start;margin-top:24px;font-size:12px}#checkout-form .consent input{width:18px;height:18px;flex-shrink:0;margin:3px 0;accent-color:#30302e}#checkout-form .button{width:100%;margin-top:24px;justify-content:center;font-size:14px;white-space:normal}.policy-link{font-size:11px;text-decoration:underline;text-underline-offset:4px}#checkout-feedback{font-size:13px;margin-top:20px}#checkout-feedback:empty{display:none}.bottom-navigation a[aria-current],.bottom-navigation a.section-active{color:#30302e;background:#eee7dc}.art-02{background:#e3ded3}
@media(max-width:800px){.member-announcement{padding:8px 20px}.member-announcement>span{display:none}.member-announcement button{width:100%;font-size:12px}#hair-diagnosis{width:100%;padding:28px 24px;gap:26px}#hair-diagnosis .model-film{max-height:500px}#hair-diagnosis>.steps{gap:0}.line-landing{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}.line-lead h1{font-size:30px}.line-lead h1 strong{font-size:44px}.qr-demo,.qr-note{display:none}.mobile-line-add{display:flex;width:100%}.line-entry{padding:24px 20px}.line-steps{grid-template-columns:1fr;gap:24px}.line-steps li{padding-bottom:24px;border-bottom:1px solid var(--line)}.line-steps h2{font-size:21px;margin:6px 0}.checkout-card{padding:22px}.cart-offer{gap:10px;padding:12px}.cart-offer>a{font-size:13px}}
@media(max-width:380px){#line-welcome{padding:52px 22px 28px}#line-welcome h2{font-size:26px}#line-welcome h2 strong{font-size:38px}}
/* Reference-inspired left menu and a compact, always available header. */
header{position:sticky;top:0;z-index:70;gap:22px;height:100px;padding:0 4%;background:var(--paper)}
header .menu-toggle{position:static;flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border:1px solid #ccc7bc;background:transparent;box-shadow:none;border-radius:0;color:var(--ink)}
header .menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}.header-icon{display:grid;place-items:center;background:none;border:0;color:var(--ink);width:40px;height:44px;padding:7px}.header-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
header nav{margin-left:auto;white-space:nowrap}header .brand{flex-shrink:0}
#menu-drawer{inset:0 auto 0 0;width:460px;max-width:calc(100% - 24px);padding:62px 40px 32px;background:#fff;color:#222;box-shadow:16px 0 60px #0002}#menu-drawer::backdrop{background:#0006}#menu-drawer .drawer-close{top:12px;right:18px}.store-menu{display:block}.store-menu>a,.store-menu summary{display:block;padding:16px 0;font-size:21px;line-height:1.6;letter-spacing:.04em;border:0;color:#222}.store-menu>a>span,.store-menu summary>span{float:right}.store-menu small{display:inline;margin-left:12px;font-size:10px;color:#777}#menu-drawer .store-menu details{border:0;padding:0}.store-menu summary{list-style:none;cursor:pointer}.store-menu summary::-webkit-details-marker{display:none}.store-menu details[open] summary>span{transform:rotate(45deg)}.menu-subcategories{padding:0 18px 12px;border-left:1px solid #d9d5ca}.menu-subcategories a{display:block;padding:12px 0;font-size:15px}.menu-account{margin:26px -40px -32px;padding:24px 40px;background:#f5f3ee}.menu-account>a{display:inline-block;font-size:13px;margin-right:24px}#menu-drawer .menu-account .button{margin:0 0 20px}.member-announcement button{background:var(--ink)}
/* Black coupon card, with the green reserved for the LINE action. */
#line-welcome{width:340px;background:#111;color:white;border:0;border-radius:0;padding:48px 28px 28px;box-shadow:0 20px 70px #0004}#line-welcome .line-close{color:#111;background:#fff;border:1px solid #ddd;border-radius:50%;top:10px;right:10px;width:36px;height:36px;font-size:24px}.line-wordmark{display:block;font:bold 24px Arial,sans-serif;letter-spacing:.04em;margin:5px 0 24px}.coupon-eyebrow{color:#bcbcbc;font-size:18px;letter-spacing:.18em;line-height:1.8;margin-bottom:12px}#line-welcome h2{font-family:inherit;line-height:1.5}#line-welcome h2>span{display:block;font-size:15px;letter-spacing:.03em}#line-welcome h2 strong{display:block;font:bold 46px Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap}.coupon-label{font-size:17px;letter-spacing:.06em;color:#bcbcbc;margin-bottom:20px}#line-welcome-body{font-size:12px;color:#d0d0d0;margin:16px 0 22px}#line-welcome .demo-caption{color:#bcbcbc;font-size:10px}.button.line-button{background:#06c755;border-color:#06c755;color:#102b18}#line-welcome .button{font-size:14px}
.hero-film-links .button:first-child{background:#262626;border-color:#262626;color:white}.hero-film-links .hero-secondary{background:#fff;color:#262626;border:2px solid #262626}
@media(min-width:1000px){#hair-diagnosis{max-width:1440px;width:calc(100% - 80px);padding:64px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:55px}#hair-diagnosis .model-film{max-height:760px}#hair-diagnosis h2{font-size:clamp(30px,3vw,46px)}#hair-diagnosis .diagnosis-intro{align-self:center}#hair-diagnosis .diagnosis-intro .button{font-size:18px;padding:22px 30px;min-height:72px}#hair-diagnosis .film-caption h3{font-size:38px}.split-editorial{max-width:1440px;width:calc(100% - 80px);gap:60px}.split-editorial>img{width:100%;min-height:620px;object-fit:cover}.split-editorial .button{font-size:18px;min-height:72px;padding:22px 30px}}
@media(max-width:1250px){header nav{display:none}header{gap:16px}.header-actions{gap:8px}}
@media(max-width:600px){header{height:76px;padding:0 12px;gap:9px}header .menu-toggle{width:32px;height:38px;min-height:38px;padding:6px}header .brand{gap:5px;font-size:13px;letter-spacing:0}header .brand-mark{font-size:32px}header .brand small{font-size:6px;letter-spacing:0}.header-actions{gap:0}.header-icon{width:30px;height:40px;padding:5px}.header-icon svg{width:20px;height:20px}#menu-drawer{padding:62px 26px 28px;width:370px}.store-menu>a,.store-menu summary{font-size:18px;padding:13px 0}.menu-account{margin:24px -26px -28px;padding:24px 26px}#hair-diagnosis{margin-top:50px}.hero-film-links .button{font-size:12px}}
@media(max-width:350px){header{gap:5px;padding:0 8px}.header-icon{width:27px}header .brand-mark{display:none}}
@media(max-width:800px){.hero.hero-film{height:calc(100svh - 240px - env(safe-area-inset-bottom));min-height:400px}}
@media(min-width:1000px){#hair-diagnosis h2{font-size:clamp(28px,2.5vw,38px);letter-spacing:.04em}}
html{scroll-padding-top:110px}
@media(max-width:600px){html{scroll-padding-top:86px}}