/* Rewards and compact, touch-friendly layouts. */
[hidden] { display:none !important; }
html { scroll-padding-top:100px; }
main, .container, .section-head>div, .product-info>div { min-width:0; }
input, textarea, select { min-width:0; max-width:100%; }
button, a { -webkit-tap-highlight-color:transparent; }
.reward-wallet { margin-top:36px; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--mint); }
.reward-wallet-heading { display:flex; align-items:center; gap:16px; }
.reward-wallet-heading>span { color:var(--amber); font-size:42px; }
.reward-wallet h3 { margin:0; color:var(--olive); font-size:28px; }
.reward-wallet p { margin:5px 0; font-size:18px; }
.reward-rule { color:var(--muted); font-size:16px!important; line-height:1.8; margin-top:16px!important; }
#rewardCoupons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.reward-coupon { margin-top:18px; padding:20px; background:var(--surface); border:1px dashed var(--olive); border-radius:16px; }
.reward-coupon h4 { font-size:24px; color:var(--olive); margin:0; }
.reward-code { display:block; font-weight:700; font-size:22px; direction:ltr; text-align:right; letter-spacing:.08em; overflow-wrap:anywhere; margin:8px 0; }
.reward-coupon-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.reward-coupon-actions .btn { font-size:17px; min-height:44px; padding:8px 20px; }
.reward-copy { background:transparent; border:0; text-decoration:underline; color:var(--olive); cursor:pointer; padding:10px; }
.coupon-box { padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:16px; }
.coupon-box h2 { margin:0 0 12px; font-size:23px; color:var(--olive); }
.coupon-entry { display:flex; gap:10px; align-items:stretch; }
.coupon-entry input { flex:1; width:100%; direction:ltr; text-align:right; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:18px; }
.coupon-entry .btn { min-width:80px; padding:8px 18px; font-size:17px; }
.coupon-suggestions { display:flex; gap:8px; flex-wrap:wrap; margin-block:12px; }
.coupon-suggestions button { cursor:pointer; padding:8px 12px; border:1px solid var(--olive); border-radius:12px; background:var(--mint); font-size:17px; min-height:44px; }
.order-summary>div { display:flex; justify-content:space-between; gap:16px; margin:8px 0; }
.order-summary { border-top:1px solid var(--line); padding-top:14px; }
.order-summary .summary-discount { color:var(--success); }
.order-summary .summary-total { font-weight:700; color:var(--olive); border-top:1px solid var(--line); padding-top:12px; }
#couponMsg { margin:10px 0 0; font-size:17px; }
.success-text { color:var(--success); }
@media (max-width:800px) {
  html { scroll-padding-top:76px; }
  body { font-size:17px; padding-bottom:calc(76px + var(--safe-bottom)); line-height:1.75; }
  .container { width:calc(100% - 32px); }
  .announcement { font-size:12px; line-height:1.6; padding:6px 10px; }
  .announcement span { margin-inline:4px; }
  .topbar { height:68px; padding-inline:16px; }
  .brand-mark { height:50px; width:22px; }
  .brand { gap:9px; }
  .brand-name { font-size:29px; }
  .brand-en { font-size:10px; letter-spacing:1.1px; }
  .header-actions { gap:10px; }
  .icon-btn { width:44px; height:44px; }
  .bottom-nav { padding:5px 8px calc(5px + var(--safe-bottom)); }
  .bottom-nav a { min-height:54px; font-size:14px; padding:4px; gap:1px; }
  .bottom-nav svg { width:21px; height:21px; }
  .editorial-hero { padding:27px 20px 40px; }
  .hero-word { font-size:25vw; top:-6px; opacity:.65; }
  .hero-story h1 { font-size:clamp(35px,10vw,44px); line-height:1.3; margin:12px 0; }
  .hero-story p { font-size:18px; line-height:1.8; margin:10px auto; max-width:32ch; }
  .hero-story .cta-row { margin-top:18px; }
  .hero-story .cta-row .btn { min-height:48px; font-size:18px; padding:10px 8px; }
  .hero-note { margin-top:12px; font-size:15px; }
  .play-invite { font-size:17px; margin-top:10px; min-height:44px; }
  .hero-visual { margin-top:22px; height:280px; width:68%; max-width:300px; }
  .hero-visual>img { border-radius:140px 140px 25px 25px; }
  .brand-charm { width:64px; height:108px; right:-26px; bottom:18px; }
  .brand-charm img { width:24px; height:67px; }
  .brand-charm span { font-size:14px; }
  .brand-charm:before { height:35px; top:-35px; }
  .hero-collect { top:100px; left:-30px; font-size:42px; min-width:48px; min-height:48px; }
  .orbit-one { font-size:48px; right:-32px; }
  .orbit-two { font-size:66px; left:-40px; }
  .hero-bottom>span { font-size:9px; letter-spacing:0; }
  .hero-bottom a { font-size:14px; }
  .ribbon { font-size:17px; padding:10px 0; }
  .section { padding:40px 0; }
  .section-head { margin-bottom:24px; align-items:flex-start; gap:12px; }
  .section-head h2 { font-size:30px; line-height:1.5; margin:7px 0; }
  .section-head p { font-size:17px; line-height:1.8; }
  .section-symbol { flex-shrink:0; font-size:40px; }
  .eyebrow { font-size:14px; }
  .product-grid { gap:24px; }
  .product-photo { aspect-ratio:4/4; }
  .product-tag { top:12px; right:12px; font-size:11px; }
  .photo-cta { bottom:14px; right:14px; left:14px; padding:10px 14px; font-size:17px; }
  .product-info { display:block; padding:13px 0 0; }
  .product-info h3 { font-size:27px; }
  .product-info p { font-size:17px; margin:3px 0; }
  .product-info .price { font-size:20px; margin-top:7px; }
  .js-scroll-story.scroll-story { height:190svh; padding-inline:20px; }
  .js-scroll-story .scroll-scene { top:68px; min-height:calc(100svh - 140px); padding:12px 0; gap:8px; }
  .js-scroll-story .story-heading h2 { font-size:28px; line-height:1.35; }
  .js-scroll-story .story-art { min-height:215px; }
  .js-scroll-story .story-product { width:120px; }
  .js-scroll-story .story-product img { height:140px; }
  .story-ring { width:160px; height:160px; }
  .js-scroll-story .story-copy { height:185px; }
  .story-step h3 { font-size:26px; margin:5px 0; }
  .story-step p { font-size:17px; line-height:1.7; margin-bottom:12px; }
  .story-dots { bottom:0; }
  .story-collect { left:0; bottom:6px; min-height:48px; min-width:48px; }
  .living-logo { height:65px; width:23px; }
  .star-pocket { position:relative; left:auto; bottom:auto; margin:22px 16px 0; width:calc(100% - 32px); max-width:none; z-index:2; }
  .pocket-toggle { width:100%; justify-content:center; min-height:48px; font-size:17px; box-shadow:none; }
  .star-pocket #pocketPanel { position:static; margin-top:10px; width:100%; max-width:none; box-shadow:none; padding:18px; }
  .style-quiz { gap:24px; }
  .quiz-fields fieldset { margin-bottom:22px; min-width:0; }
  .quiz-fields legend { font-size:21px; }
  .quiz-options { gap:10px 8px; }
  .quiz-options label>span { font-size:17px; padding:9px 13px; min-height:46px; }
  .quiz-fields>.btn { width:100%; min-height:50px; }
  .color-picks label { flex:1; }
  .color-picks label>span { text-align:center; padding-inline:6px; }
  .quiz-result { padding:20px; border-radius:90px 90px 20px 20px; }
  .quiz-result>img { height:240px; }
  .quiz-collect { top:210px; }
  .result-copy h3 { font-size:27px; }
  .result-copy p { font-size:17px; }
  .play-spark { font-size:42px; flex-shrink:0; }
  .reward-wallet { padding:18px; margin-top:24px; }
  .reward-wallet-heading { align-items:flex-start; gap:10px; }
  .reward-wallet h3 { font-size:24px; }
  .reward-wallet p { font-size:17px; }
  #rewardCoupons { grid-template-columns:1fr; gap:0; }
  .reward-coupon { padding:16px; }
  .reward-coupon h4 { font-size:22px; }
  .campaign-film { padding:32px 0; gap:18px; }
  .film-heading h2 { font-size:35px; margin:10px 0; }
  .film-heading p { font-size:18px; }
  .film-heading .btn { min-height:48px; }
  .film-frame { border-radius:20px; }
  .film-stamp { font-size:10px; letter-spacing:0; }
  .fabric-media { min-height:240px; }
  .fabric-copy { padding:28px 22px; }
  .fabric-copy h2 { font-size:30px; line-height:1.6; }
  .fabric-copy p { font-size:18px; line-height:1.85; }
  .mood { flex-basis:88%; padding:22px; min-height:340px; }
  .mood h3 { font-size:27px; }
  .mood p { font-size:17px; }
  .mood img { height:180px; }
  .carousel-controls { gap:6px; flex-shrink:0; }
  .carousel-controls button { width:44px; height:44px; }
  .guide-grid h3 { font-size:25px; }
  .guide-grid p,.faq-items p { font-size:18px; line-height:1.85; }
  .guide-flower { font-size:40px; flex-shrink:0; }
  .faq-section h2 { font-size:30px; }
  .faq-items summary { font-size:20px; min-height:44px; }
  .footer-brand { gap:15px; padding-bottom:24px; }
  .footer-brand strong { font-size:26px; }
  .footer-brand img { height:80px; width:23px; }
  .footer-brand>span { font-size:40px; }
  .footer-brand p { font-size:16px; }
  .footer-links { gap:12px 20px; font-size:16px; }
  .site-footer { padding-top:40px; padding-bottom:24px; }
  .section h1 { font-size:30px!important; }
  .panel { padding:20px; }
  .field input,.field textarea,.field select { font-size:18px; min-height:48px; padding:11px 13px; }
  #checkoutForm { display:block; padding:20px; }
  #checkoutForm .field { margin-bottom:18px; }
  #checkoutForm .field label { font-size:18px; }
  .coupon-box { padding:16px; margin-block:16px; }
  .coupon-entry { gap:8px; }
  .coupon-entry input { font-size:17px; padding-inline:10px; }
  .coupon-entry .btn { padding-inline:12px; min-width:70px; }
  .btn { min-height:48px; }
  .product-detail { padding-top:20px!important; }
  .product-detail>div:first-child { aspect-ratio:4/4.5!important; max-height:420px; }
  .product-detail .size-opt,.product-detail .color-opt { width:48px; height:48px; flex-shrink:0; }
  .size-row,.color-row { gap:8px; flex-wrap:wrap; }
  .product-detail .product-gallery { gap:8px; padding-bottom:8px; }
  .gallery-thumb { flex-basis:68px; }
  .gallery-thumb img { width:68px; height:88px; }
  .product-detail .sticky-buy { padding:16px; border:1px solid var(--line); border-radius:18px; }
  .sticky-buy .btn { margin-bottom:8px; }
  .product-notes { margin-top:16px; padding-top:28px; }
  .product-notes h2 { font-size:28px; }
  .product-notes p { font-size:18px; }
  .product-note-box { padding:20px; }
  .cart-item { grid-template-columns:72px minmax(0,1fr); }
  .cart-item img { width:72px; height:94px; }
  .cart-item .price { font-size:18px; }
  .qty-ctrl button { min-width:44px; min-height:44px; }
  .chips { gap:8px; flex-wrap:wrap; }
  .chip { padding:8px 16px; font-size:17px; min-height:44px; }
  .toast { left:16px; right:16px; width:auto; max-width:none; bottom:calc(80px + var(--safe-bottom)); font-size:17px; }
}
@media (max-width:360px) {
  .hero-visual { height:245px; }
  .hero-story h1 { font-size:35px; }
  .tiny-star { font-size:20px; }
  .section-head h2 { font-size:27px; }
  .section-symbol { font-size:32px; }
  .quiz-options label>span { font-size:16px; padding-inline:11px; }
  .color-picks label>span { padding-inline:4px; }
  .story-top { left:0; }
  .story-tee { right:0; }
}
@media (max-width:800px) and (max-height:700px), (prefers-reduced-motion:reduce) {
  .js-scroll-story.scroll-story { height:auto; padding:32px 20px; }
  .js-scroll-story .scroll-scene { position:relative; top:0; min-height:0; }
  .js-scroll-story .story-copy { height:auto; }
  .js-scroll-story .story-step { position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto; margin-bottom:24px; }
  .story-dots { display:none; }
  .story-collect { bottom:auto; top:0; }
}

@media(max-width:800px){main{overflow-x:clip}.ribbon{transform:none}.footer-brand>div{min-width:0}.footer-brand>span{flex-shrink:0}}
@media(max-width:360px){.hero-bottom{gap:5px}.hero-bottom>span{font-size:8px}.hero-bottom a{font-size:13px}.footer-brand>span{display:none}.footer-brand strong{font-size:24px}.js-scroll-story .story-copy{height:220px}.js-scroll-story .story-art{min-height:185px}}

.footer-top{display:flex;align-items:center;gap:20px;padding-bottom:40px}
.footer-top>.footer-brand{flex:1;min-width:0;padding-bottom:0}
.footer-top>a{display:block;flex:none;line-height:0}
.footer-top>a img{width:auto;height:auto;max-width:125px}
@media(max-width:800px){
  .footer-top{gap:12px;padding-bottom:24px}
  .footer-top>a img{max-width:96px}
}
@media(max-width:800px){.announcement span{display:none}.hero-bottom{gap:10px}.reward-code{font-size:20px}}
@media(max-width:360px){.coupon-entry{display:grid;grid-template-columns:1fr}.coupon-entry input{min-height:48px}.coupon-entry .btn{min-height:44px}.coupon-box h2{font-size:21px}}

.table-scroll{overflow-x:auto;max-width:100%;padding-bottom:8px}.table-scroll table{min-width:340px}.admin-orders .panel{overflow-wrap:anywhere}.admin-orders form{display:flex;gap:10px;flex-wrap:wrap}.admin-orders select{max-width:100%;padding:10px;min-height:48px;border:1px solid var(--line);border-radius:12px}.reward-code{user-select:all}