.other-products{display:flex;gap:8px;overflow-x:auto;padding:11px 18px;white-space:nowrap}.other-products[hidden]{display:none}.other-products a{display:inline-block;border:1px solid #b7cfe8;border-radius:22px;padding:7px 14px;color:#28588c;text-decoration:none;font-size:14px}.other-products a[aria-current=page]{background:#eaf2ff;border-color:#3478ca}.store-admin-link{display:block;color:#abcbe9;font-size:13px;margin-top:15px;padding-bottom:20px}body.editing-store .edit-icon{display:none;position:fixed;z-index:10020;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid #b3c4d8;border-radius:8px;background:#fff;color:#294b70;font-size:16px;line-height:1;box-shadow:none;cursor:pointer}body.editing-store .edit-icon.is-active{display:inline-flex}body.editing-store .edit-icon.edit-image{background:#fff;color:#294b70}body.editing-store .edit-icon:focus-visible{outline:2px solid #3478c9;outline-offset:2px}body.editing-store [data-editor-target]{cursor:pointer}body.editing-store [data-editor-target]:hover{outline:1px solid #82acd844;outline-offset:3px}.edit-floating{position:fixed;z-index:10001;bottom:12px;left:12px;right:12px;max-width:560px;margin:auto;padding:15px;background:#fff;color:#152840;border:2px solid #317ac8;box-shadow:0 12px 36px #13253c66;border-radius:14px}.edit-floating[hidden]{display:none}.edit-floating label{display:block;font-weight:700}.edit-floating textarea{display:block;width:100%;box-sizing:border-box;min-height:105px;margin:7px 0;font:inherit;font-size:16px;line-height:1.5}.edit-floating>div{display:flex;justify-content:flex-end;gap:10px}.edit-floating button{padding:9px 15px;border:1px solid #2d6bb5;border-radius:8px;background:#eaf3fe}.edit-floating [data-save]{background:#246bb6;color:white}.editing-store [data-buy]:disabled{opacity:.55}body.editing-store{--editor-primary:#3378c5;--editor-navy:#1c3765}body.editing-store .solid,body.editing-store .pill-button{background:var(--editor-navy)!important}body.editing-store h1,body.editing-store h2{color:var(--editor-primary)}body:not(.editing-store) .solid{background:var(--editor-navy,#1c3765)}body:not(.editing-store) .pill-button{background:var(--editor-primary,#3378c5)}

body{background:var(--editor-background,#fff)}
[hidden]{display:none!important}

.custom-section img:not([src]){display:none}.custom-section img{width:100%;max-height:560px;object-fit:contain;border-radius:18px;margin-top:20px}.custom-section p{font-size:17px;line-height:1.7}

/* One gentle entrance per section; controls and the checkout always stay visible. */
.motion-ready .motion-item{transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-item:not(.motion-visible){opacity:0;transform:translate3d(0,16px,0)}
.motion-ready .motion-item.motion-visible{opacity:1;transform:translate3d(0,0,0)}
.motion-ready #campaign-banner img.motion-item.motion-visible{transform:translate3d(0,var(--banner-shift,0px),0) scale(1.025);transition:opacity .55s ease,transform .25s ease-out}
.motion-ready #campaign-banner img.motion-item:not(.motion-visible){transform:translate3d(0,16px,0) scale(1.025)}
#reviews .review-card[data-extra]:not([hidden]){animation:review-appear .38s ease both}
@keyframes review-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.accordion details[open] > :not(summary){animation:accordion-appear .28s ease both}
@keyframes accordion-appear{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .motion-ready .motion-item,.motion-ready .motion-item:not(.motion-visible),.motion-ready #campaign-banner img.motion-item{opacity:1;transform:none;transition:none}
  #reviews .review-card[data-extra]:not([hidden]),.accordion details[open] > :not(summary){animation:none}
}
body.editing-store .motion-item,body.editing-store .motion-item:not(.motion-visible),body.editing-store #campaign-banner img.motion-item{opacity:1;transform:none;transition:none}

/* Compact mobile handoff from the offer card to the blue product story. */
.perk-guarantee .guarantee-line{display:block}
@media(max-width:850px){.product-top{padding-bottom:18px}}
@media(max-width:650px){
  .product-top{padding-bottom:12px}
  .perks{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.25fr)}
  .perk{min-width:0}
  .perk-guarantee{font-size:10px;letter-spacing:-.02em}
  .perk-guarantee .guarantee-line{white-space:nowrap}
}
@media(max-width:350px){.perk-guarantee{font-size:9px}}

.product-activity{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:14px;line-height:1.5}
.product-activity:empty,.product-activity:not(:has(span:not([hidden]))){display:none}
.product-activity #live-viewers{color:#3275bf}
.product-activity #live-stock{color:#b45b35;font-weight:600}
.product-activity #live-stock.is-out{color:#a43434}
@media(max-width:650px){.product-activity{font-size:13px;gap:4px 12px;margin-top:9px}}
/* Show the chosen section without changing the customer-facing page. */
body.editing-store .editor-section-highlight{outline:3px solid #3b82d3;outline-offset:-3px;scroll-margin-top:130px;transition:outline-color .3s}

/* Photo-led sections: two highlight cards at a time, with controls below. */
.highlights .benefit-grid.media-track,.usage-track.media-track,.comfort-track.media-track{display:flex;gap:14px;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;touch-action:pan-x pan-y}
.media-track::-webkit-scrollbar{display:none}
.highlights .benefit-grid .benefit-card{flex:0 0 calc((100% - 14px)/2);scroll-snap-align:start;max-width:none}
.highlights .benefit-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.highlights .benefit-card div{padding:15px}
.highlights .benefit-card h3{margin:0 0 5px;font-size:clamp(15px,1.6vw,19px);line-height:1.4}
.highlights .benefit-card p{margin:0;color:#617287;font-size:14px;line-height:1.55}
.media-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:23px;color:#667a93;font-size:14px}
.media-controls[hidden]{display:none}
.media-controls button{width:45px;height:45px;border:0;border-radius:50%;display:grid;place-items:center;background:#e7eef8;color:#1b4778;font-size:29px;line-height:1}
.media-controls button:hover,.media-controls button:focus-visible{background:#cbdef2;outline-offset:3px}
.comfort-section .split{align-items:center}
.comfort-carousel{min-width:0;width:100%;max-width:650px;margin-inline:auto}
.comfort-track .comfort-photo{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.comfort-track .comfort-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22px}
.comfort-photo figcaption{padding:11px 5px 0;color:#415c79;font-size:14px;text-align:center}
.usage-section{background:#f4f8fd}
.usage-section .container{max-width:1120px}
.usage-section .eyebrow{display:block;color:#3679b9;font-weight:700;letter-spacing:.1em}
.usage-section h2{margin:5px 0 8px;color:#20334d;font-size:clamp(25px,3vw,36px)}
.usage-section .intro{margin:0 0 26px;color:#667486}
.usage-track .benefit-card{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
.usage-track .benefit-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.usage-track .benefit-card div{padding:15px}
.usage-track .benefit-card h3{margin:0 0 4px;font-size:18px}
.usage-track .benefit-card p{margin:0;font-size:14px;line-height:1.6;color:#617287}
@media(max-width:650px){.highlights .benefit-grid.media-track{gap:9px}.highlights .benefit-grid .benefit-card{flex-basis:calc((100% - 9px)/2)}.highlights .benefit-card div{padding:10px}.highlights .benefit-card p{font-size:12px}.comfort-section .comfort-carousel{order:-1}.usage-track .benefit-card{flex-basis:80%}.usage-section{padding-block:44px}.media-controls{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.media-track{scroll-behavior:auto!important}}
@media(max-width:850px){.product-top{padding-bottom:18px}}
@media(max-width:650px){
  .product-top{padding-bottom:12px}
  .perks{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.25fr)}
  .perk{min-width:0}
  .perk-guarantee{font-size:10px;letter-spacing:-.02em}
  .perk-guarantee .guarantee-line{white-space:nowrap}
}
@media(max-width:350px){.perk-guarantee{font-size:9px}}

.product-activity{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:14px;line-height:1.5}
.product-activity:empty,.product-activity:not(:has(span:not([hidden]))){display:none}
.product-activity #live-viewers{color:#3275bf}
.product-activity #live-stock{color:#b45b35;font-weight:600}
.product-activity #live-stock.is-out{color:#a43434}
@media(max-width:650px){.product-activity{font-size:13px;gap:4px 12px;margin-top:9px}}

/* Keep the highlight headline balanced on narrow phones. */
.highlights h2{text-wrap:balance;max-width:680px;margin-inline:auto}
@media(max-width:650px){.highlights h2{font-size:clamp(25px,6.3vw,29px);line-height:1.28}}

/* Keep product selection in the existing mobile menu and preserve the shared layout. */
.menu-products{padding:8px 0;border-bottom:1px solid #e5eaf2}.menu-products[hidden]{display:none}.menu-products span{display:block;padding:7px 20px;color:#60748d;font-size:12px}.menu-panel .menu-products a[aria-current=page]{background:#eaf3ff;color:#1c5eaa;font-weight:600}
.weighted-active .benefit-card,.weighted-active .comfort-photo{min-width:0}.weighted-active .benefit-card img,.weighted-active .comfort-photo img,.weighted-active .usage-track img{max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#f4f8fc}
/* Product links open under the existing สินค้า menu item. */
.menu-panel .menu-product-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 20px;border:0;background:#fff;color:#1c3355;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.menu-panel .menu-product-toggle:hover,.menu-panel .menu-product-toggle[aria-expanded="true"]{background:#f0f6fe}
.menu-panel .menu-product-toggle::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:3px}
.menu-panel .menu-product-toggle[aria-expanded="true"]::after{transform:rotate(225deg)}
.menu-panel .menu-product-toggle:focus-visible{outline:2px solid #3375cc;outline-offset:-2px}
.menu-products{padding:2px 0 8px;background:#f7faff}
.menu-panel .menu-products a{padding-left:34px}
.menu-products[hidden]{display:none!important}