@import url('design-tokens.css');
/* Approved home identity, shared by the product, creation and service screens.
   Print artwork retains its own palette and typography. */




body{font-family:Poppins,'Noto Sans JP',Arial,sans-serif;font-size:16px;line-height:24px;background:#fff;color:var(--ink)}
h1,h2,h3,.brand,.service-nav>p,.controls h2,.service-content h1,.order-panel h1{font-family:inherit;letter-spacing:normal;color:var(--ink)}
h1,.service-content h1,.order-panel h1{font-size:48px;line-height:1.08;font-weight:700;margin-bottom:28px}
h2,.service-content h2{font-size:30px;line-height:1.25;font-weight:600}h3,.service-content h3{font-size:22px;line-height:1.4;font-weight:600}
p{line-height:1.6}.note,figcaption,.tax-note,.gallery-caption{color:var(--muted);font-size:14px;line-height:20px}
button,.button,input,select,textarea{font-family:inherit}button,.button{border-radius:0;min-height:48px;font-size:16px;line-height:24px;font-weight:400}
button:hover,.button:hover{background:var(--action-hover);color:#fff}.secondary{background:#fff;color:var(--ink);border-color:var(--control-line)}.secondary:hover{background:var(--soft);color:var(--ink);border-color:var(--action)}
a{text-underline-offset:4px}input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--control-line);border-radius:0;background:#fff;color:var(--ink);min-height:48px}input[type=radio],input[type=checkbox]{min-height:0;accent-color:var(--action)}
:focus-visible{outline:3px solid var(--action-hover);outline-offset:4px}label,legend{font-weight:400}legend{font-weight:600}
.announcement{background:var(--action);color:#fff;font-size:12px;line-height:16px;padding:10px 20px;letter-spacing:0}
header{display:flex;justify-content:space-between;align-items:center;padding:22px max(24px,calc((100vw - 1440px)/2));gap:28px;border-bottom:1px solid var(--line);min-height:93px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:34px;line-height:1;white-space:nowrap;text-decoration:none;letter-spacing:-1.5px}.brand:hover{color:var(--ink);text-decoration:none}.brand-mark{display:block;width:38px;height:38px;color:var(--action);transform:rotate(-14deg);flex-shrink:0}.brand-mark svg{width:100%;height:100%;fill:currentColor}.wordmark>span{font-weight:400;margin-left:5px;color:var(--muted)}
header nav{gap:26px;font-size:16px}header .button{font-size:16px;padding:12px 20px;min-height:48px}header a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
main{max-width:1440px;padding:60px 40px 88px}.breadcrumb{max-width:1440px;margin:auto;padding-inline:40px}
.product-detail.hero{max-width:1440px;padding:28px 40px 72px;gap:6%}.product-info h1{font-size:48px;line-height:1.08;font-weight:700}.product-info .price{font-size:26px;line-height:36px;color:var(--action);font-weight:600}.product-info>.button{min-height:64px;padding:20px}.product-info .section-kicker{color:var(--muted)}
.gallery-display{background:var(--soft)}.gallery-display>img{object-fit:contain}.gallery-thumbs button{background:var(--soft)}.gallery-zoom:hover{background:var(--action)}.gallery-thumbs [aria-pressed=true]{outline-color:var(--action)}
.finish-picker .choice,.choice{border-radius:0;border-color:var(--control-line)}.choice:has(:checked){background:var(--soft);outline-color:var(--action)}.finish-picker small{margin-top:4px}.product-palettes .palette-sample{font-size:13px;color:var(--ink)}.palette-sample:hover{background:var(--soft);color:var(--ink)}.product-info summary{font-weight:600}.size-line{padding-block:18px}
.shop-section,.how-section{max-width:1440px;padding:64px 40px;border-top:1px solid var(--line);background:white}.section-heading h2{font-size:30px;font-weight:600}.steps li:before{font-family:inherit;color:var(--action);border-color:var(--control-line)}.steps h3{font-weight:600}.text-link{color:var(--action)}
body[data-page=how-it-works] main>h1{max-width:20ch}body[data-page=how-it-works] .steps{padding:16px 0 36px}body[data-page=how-it-works] .split{margin-bottom:48px}.process-image{background:var(--soft);object-fit:contain}
body:has(.editor-shell){background:var(--workspace)}body:has(.editor-shell) header{padding:16px 28px;min-height:76px}body:has(.editor-shell) header .brand{font-size:28px}body:has(.editor-shell) header .brand-mark{width:30px;height:30px}
.editor-shell{padding:0 28px 40px}.editor-title{font-family:Poppins,'Noto Sans JP',sans-serif!important;font-weight:600;font-size:20px;line-height:28px;letter-spacing:0}.controls h2{font-size:18px;font-weight:600}.controls .settings-title{font-size:20px;line-height:28px}.controls .note{font-size:13px}.controls fieldset{padding-bottom:20px;border-bottom:1px solid var(--line)}.controls .choices{gap:10px}.controls .choice{font-size:14px}.stepnav a{font-size:14px}.preview-column{border-left:1px solid var(--line)}.preview-column .actions button:hover{color:var(--action-hover);background:transparent}.buybar .price{color:var(--action);font-size:24px}.toolbar button{font-size:14px}
.notice{background:var(--soft)}.error-box{background:#fff0eb}.field-error{color:#963d2d}.progress li{background:var(--soft);color:var(--ink);border-bottom:2px solid var(--action)}
.service-shell{max-width:1320px;gap:72px;padding-block:64px}.service-nav>p{font-size:22px;font-weight:600;line-height:30px}.service-nav a{text-decoration:none;padding:12px}.service-nav a:hover{background:var(--soft);color:var(--action-hover)}.service-content{max-width:760px}.service-content p,.service-content li{line-height:1.8}.service-content h2{margin-top:36px}.service-content form{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.service-content summary{font-weight:600;padding-block:14px}.service-content>.notice{margin-bottom:32px}
.order-shell{max-width:1120px;background:#fff;padding-top:40px}.order-panel{border:0;border-top:1px solid var(--line);padding:40px 0 0}.order-panel h1{max-width:22ch}.order-breadcrumb{color:var(--muted)}.order-panel .totals{max-width:640px}.totals .total{color:var(--action);padding-top:20px}.parcel{padding-block:28px}.order-panel table th{font-weight:600}.order-panel .actions{margin-top:28px}
.delivery-shell{max-width:1280px}.delivery-shell h1{max-width:20ch}.delivery-shell .split{gap:64px}.delivery-shell aside{background:var(--soft);padding:32px}.delivery-shell aside h2{font-size:24px;font-weight:600}.delivery-shell aside .stage{background:transparent}.checkout-steps{gap:28px;font-size:14px}.checkout-steps li{padding-bottom:12px}.delivery-shell form>button{width:100%;margin-top:20px}#agreement>button{width:100%}
dialog{border:1px solid var(--line);border-radius:0;padding:32px;box-shadow:0 16px 64px #3b302b26}dialog::backdrop{background:#3b302b80}dialog h2{font-size:28px}.link-button{color:var(--action)}.link-button:hover{color:var(--action-hover);background:transparent}
footer{background:#fff;border-top:1px solid var(--line);padding:56px max(24px,calc((100vw - 1360px)/2)) 28px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px}.footer-brand{font-size:inherit;letter-spacing:normal;margin:0}.footer-brand p{font-weight:400;font-size:16px;color:var(--muted);line-height:24px;margin-top:20px;max-width:30ch}footer nav{display:flex;align-items:start;flex-direction:column;gap:10px}footer nav h2{font-size:16px;margin:0 0 10px}footer nav a,footer nav button{font-size:14px}footer .link-button{padding:0;min-height:32px}footer .poc{margin-top:40px;font-size:12px;line-height:20px}.purchase-dock{border-color:var(--line)}
@media(max-width:1100px){header{gap:20px;padding:20px 24px}header nav{gap:16px;font-size:14px}.brand{font-size:28px}.brand-mark{width:30px;height:30px}.product-info h1{font-size:38px}.service-shell{gap:40px}}
@media(max-width:899px){header{flex-wrap:wrap;gap:14px;padding:18px 24px}.nav-left{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px}.nav-right>a:not(.button){display:none}header .button{font-size:14px}.service-shell{gap:24px}.preview-column{border-left:0}.editor-title{font-size:18px;line-height:24px;margin:0}.controls .settings-title{font-size:18px}.editor-shell{padding:0 24px 40px}.service-content h1{font-size:38px}.footer-grid{gap:30px;grid-template-columns:1.2fr 1fr 1fr}.footer-brand .brand{font-size:26px}.footer-brand .brand-mark{width:26px}.delivery-shell .split{gap:28px}}
@media(max-width:599px){
 body{font-size:16px}header{padding:16px 18px 8px;gap:12px}.brand{font-size:25px;gap:6px}.brand-mark{width:26px;height:26px}header .button{font-size:13px;padding:10px 12px;min-height:44px}header nav{gap:20px;font-size:14px}.nav-left{justify-content:flex-start;flex-wrap:wrap}.nav-right{margin-left:auto}
 main{padding:32px 20px 48px}h1,.service-content h1,.order-panel h1{font-size:34px;line-height:40px;margin-bottom:24px}h2,.service-content h2{font-size:24px;line-height:32px}.breadcrumb{padding:20px 20px 0}.product-detail.hero{padding:20px 20px 40px;gap:28px}.product-info h1{font-size:36px;line-height:40px}.product-info>.button{min-height:56px;padding:16px}.product-info .price{font-size:24px}.gallery-display>img{height:auto;max-height:480px}.shop-section,.how-section{padding:40px 20px}.section-heading h2{font-size:24px;line-height:32px}.steps h3{font-size:20px;line-height:28px}
 body:has(.editor-shell) header{padding:12px;min-height:64px;gap:8px}body:has(.editor-shell) header .brand{font-size:21px}body:has(.editor-shell) header .brand-mark{width:24px;height:24px}body:has(.editor-shell) header nav{font-size:12px;gap:12px}.editor-shell{padding:0 12px 32px}.editor-title{font-size:17px;line-height:24px;margin:0;padding:10px 0}.controls{padding:20px 16px}.controls fieldset{padding-bottom:12px}.stepnav a{font-size:13px;padding-inline:6px}.controls .settings-title{margin-bottom:12px}.preview-column .actions button{font-size:14px}.preview-column .paper{height:230px}
 .service-shell{padding-top:24px}.service-nav nav{flex-wrap:wrap}.service-content p,.service-content li{line-height:1.65}.service-content form{margin-top:24px}.order-shell{padding:24px 20px 48px}.order-panel{padding-top:24px}.delivery-shell aside{padding:24px 20px}.checkout-steps{gap:16px;font-size:12px}.checkout-steps li{flex:1}.delivery-shell h1{font-size:34px;line-height:40px}.purchase-dock .price{font-size:16px}.purchase-dock .button{font-size:14px;padding:10px 16px}.footer-grid{grid-template-columns:1fr 1fr;gap:32px 20px}.footer-brand{grid-column:1/-1}footer{padding:40px 20px 24px}footer nav{display:flex}footer .poc{padding-inline:0}dialog{padding:24px 20px}dialog h2{font-size:24px;line-height:32px}
}
@media print{.announcement{display:none}.order-panel{border:0}.preview-column{border:0}}

[aria-disabled="true"]{cursor:not-allowed}[aria-disabled="true"]:hover{text-decoration:none}

/* Use the approved home's type scale across customer pages. */
body{font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--line-body)}
p,.service-content p,.service-content li{line-height:var(--line-body)}
h1,.service-content h1,.order-panel h1,.product-info h1,.delivery-shell h1{font-size:var(--text-display);line-height:var(--line-display)}
h2,.service-content h2,.section-heading h2{font-size:var(--text-heading);line-height:var(--line-heading)}
h3,.service-content h3,.steps h3{font-size:var(--text-subheading);line-height:var(--line-subheading)}
.note,figcaption,.tax-note,.gallery-caption{font-size:var(--text-small);line-height:var(--line-small)}
footer nav h2{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.7px;text-transform:uppercase}
footer nav a,footer nav button{font-size:16px;line-height:24px}
.editor-shell h1.editor-title,.controls .settings-title{font-size:20px;line-height:28px}
.controls h2,.delivery-shell aside h2{font-size:24px;line-height:32px}
.product-info>.button{min-height:72px;padding:24px 40px}
@media(max-width:1023px){.product-info>.button{min-height:56px;padding:16px 20px}}

/* Gift guide, story and bag pages share the same editorial rhythm. */
.eyebrow{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:12px}
.page-intro{max-width:800px;margin-bottom:48px}.page-intro>p{max-width:640px}
.editorial-shell{max-width:1440px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.guide-image{display:block;aspect-ratio:4/5;overflow:hidden;margin-bottom:24px}.guide-image img{width:100%;height:100%;object-fit:cover}
.guide-grid h2{font-size:24px;line-height:32px;margin-bottom:16px}.guide-grid p{margin-bottom:20px}
.article-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;margin:24px 0 64px}.article-hero>img{width:100%;height:auto;max-height:620px;object-fit:contain}.article-hero h1{margin-bottom:24px}.article-hero p{margin-bottom:28px}
.article-body{max-width:760px;margin:0 auto}.article-body section{margin-bottom:40px}.article-body h2{margin-bottom:20px}.article-action{border-top:1px solid var(--line);padding-block:40px}.article-body>a{display:inline-block;margin-top:24px}
.cart-shell{max-width:1280px}.cart-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.cart-layout .stage{background:var(--soft)}.cart-layout .price{font-size:24px;line-height:32px;color:var(--action)}.cart-layout .actions{margin-top:28px}.empty-bag{max-width:720px;padding:48px;background:var(--soft)}.empty-bag p{margin-block:24px}.empty-bag>a{margin-right:24px}.nav-right>a.bag-link{display:inline-block}
@media(max-width:899px){.guide-grid{gap:24px}.article-hero{gap:32px}.cart-layout{gap:32px}}
@media(max-width:599px){.guide-grid,.article-hero,.cart-layout{grid-template-columns:1fr}.article-hero{margin-bottom:40px}.article-hero>img{max-height:none}.guide-image{max-height:420px}.page-intro{margin-bottom:32px}.empty-bag{padding:28px}.empty-bag>a{display:block;margin:16px 0}.nav-right .bag-link{font-size:14px}header .brand{font-size:23px}}

@media(max-width:599px){header .nav-right{gap:12px}header:has(.nav-right) .brand{margin-right:auto}.nav-right .button{padding-inline:10px}}

/* Map creation is intentionally an empty, non-interactive area until UX is defined. */
.route-placeholder-shell{max-width:1600px;padding:40px 28px}
.placeholder-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.map-placeholder{width:100%;height:clamp(420px,68vh,800px);border:1px solid var(--line);background:var(--canvas)}
@media(max-width:599px){.route-placeholder-shell{padding:24px 18px}.map-placeholder{height:65vh;min-height:360px}}

/* Plain native fields record the required information without prescribing map UX. */
.route-input-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:stretch}
.route-inputs{min-width:0}.route-inputs fieldset{margin:24px 0;padding:0;border:0}.route-inputs legend{font-size:16px;line-height:24px;margin-bottom:12px;font-weight:600}
.route-inputs label{font-size:14px;line-height:20px;margin-top:0;margin-bottom:6px}.route-inputs .check{margin:16px 0 8px}.route-inputs input,.route-inputs select{font-family:var(--font-ui);font-size:14px;line-height:20px;min-height:44px;margin-bottom:0}
.route-inputs input[type=checkbox]{min-height:0}.route-inputs :disabled{opacity:1;color:var(--muted);background:var(--canvas);cursor:default}.route-inputs input::placeholder{color:var(--muted);opacity:1}
.route-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.route-field-pair>div{min-width:0}.route-input-layout .map-placeholder{height:100%;min-height:560px}
@media(max-width:767px){.route-input-layout{grid-template-columns:1fr;gap:24px}.route-input-layout .map-placeholder{grid-row:1;height:50vh;min-height:360px}.route-inputs{max-width:520px;width:100%;margin:auto}}

/* One route from design to payment, with previous steps available for changes. */
.purchase-steps{display:flex;gap:24px;list-style:none;padding:0;margin:0 0 28px;font-size:14px;color:var(--muted)}
.purchase-steps li{flex:1;border-bottom:2px solid var(--line);padding:12px 0}
.purchase-steps [aria-current=step]{color:var(--action);border-color:var(--action);font-weight:600}
.purchase-steps a{color:inherit;text-decoration:none}.purchase-steps a:hover{text-decoration:underline}
.route-continue{margin-top:24px}.route-continue button{width:100%}.route-continue .note{margin:12px 0 0}
.address-extra{margin:8px 0 16px}.address-extra summary{font-size:14px;cursor:pointer}
@media(max-width:767px){.purchase-steps{gap:10px;font-size:12px;margin-bottom:20px}.editor-header nav{flex-wrap:wrap}}

.nav-right>a.design-link{display:inline-flex;align-items:center;gap:6px;min-width:32px;min-height:44px;justify-content:center}.design-link svg{flex-shrink:0}@media(max-width:1100px){.design-link span{display:none}}

.purchase-steps li{flex:1 0 auto;white-space:nowrap}@media(max-width:599px){.purchase-steps{gap:8px;font-size:11px}}
.purchase-steps a,.purchase-steps span{display:flex;align-items:center;min-height:44px;padding:0}

/* Future provider-owned checkout surface, represented locally with fixed fields. */
.payment-shell{max-width:1200px}.payment-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}.payment-design{position:sticky;top:24px}.payment-design .stage{background:var(--soft)}.payment-design h2,.embedded-checkout h2{font-size:20px;line-height:28px;font-weight:600}.embedded-checkout{border:1px solid var(--line);border-radius:12px;padding:28px;background:white}.embedded-checkout label{font-size:13px;margin:12px 0 6px}.embedded-checkout input{min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#faf9f7;color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink)}.embedded-checkout h2:not(:first-child){margin-top:28px}.payment-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-field-pair>div{min-width:0}.payment-consent{font-size:12px;line-height:20px}.embedded-checkout #pay{width:100%;margin-top:12px}.embedded-checkout .totals{margin-top:24px}.embedded-checkout>.note{font-size:12px;text-align:center;margin-bottom:0}
@media(max-width:767px){.payment-layout{grid-template-columns:1fr;gap:24px}.payment-design{position:static}.payment-design .paper{height:auto;max-width:150px}.payment-design .paper.landscape{max-width:210px}.embedded-checkout{padding:20px}.payment-shell{padding:24px 16px 48px}.payment-design .actions{margin-block:12px}}
