/* Mobile storefront: loaded after component styles. Desktop layouts remain unchanged. */
@media (max-width:699px) {
 html{scroll-padding-top:148px}
 .container{width:calc(100% - 28px);min-width:0}
 /* One useful row: business name and direct LINE contact. Hours remain in Contact/Footer. */
 .utility>.container{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;min-height:29px;padding-top:3px;padding-bottom:3px}
 .utility .utility-identity{display:flex;min-width:0;flex:1;line-height:1.5;font-size:11px;white-space:nowrap}
 .utility .utility-company{display:inline!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .utility :is(.utility-tagline,.utility-identity i,.utility-hours,.utility-phone,.utility-service,.demo-badge){display:none!important}
 .utility .utility-links{display:flex;flex:none;flex-wrap:nowrap;gap:0;margin:0;font-size:11px;line-height:1.5}
 .utility .utility-line{min-height:23px;white-space:nowrap}
 .utility .line-brand{width:14px;height:14px}
 .site-header .main-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:49px 42px;height:auto;column-gap:10px;row-gap:6px;padding-top:4px;padding-bottom:9px}
 .site-header .main-header>.logo{min-width:0;max-width:135px}
 .site-header .main-header>.logo img{width:120px;height:42px;object-fit:contain;max-width:100%}
 .site-header .header-actions{min-width:0;gap:9px;margin-left:0}
 .site-header .header-actions .customer-link{font-size:13px;white-space:nowrap}
 .site-header .header-icon{width:37px;min-width:37px;min-height:42px;padding:7px}
 .site-header .header-cart{padding-left:8px;gap:4px;min-height:42px}
 .site-header .search-form{height:42px;min-width:0}
 .site-header .search-form input{font-size:16px;min-width:0}
 .site-header .search-form>button{height:34px;font-size:13px;padding-inline:12px}
 .site-header .nav-row{height:43px;gap:11px;min-width:0}
 .site-header .nav-row>.browse-link{padding-inline:11px;font-size:13px;min-height:43px}
 .site-header .nav-scroll{min-width:0;gap:16px;scrollbar-width:none;overscroll-behavior-inline:contain}
 .site-header .nav-scroll>a{font-size:13px;min-height:43px}
 .jdc-home{padding-top:0}

 /* Compact horizontal campaign layouts replace the tall text + picture stacks. */
 .promo167-opening{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px;margin-bottom:14px}
 .promo167-hero{height:auto;min-width:0}
 .promo167-viewport{flex:none;align-items:stretch}
 .promo167-slide{display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%);grid-template-areas:'copy art';min-height:230px;height:auto;align-items:stretch}
 .promo167-hero-copy{padding:15px 0 14px 15px;min-width:0;justify-content:center;gap:0}
 .promo167-hero .promo169-brand{width:96px;min-height:28px;padding:3px 6px;margin-bottom:7px;border-radius:5px}
 .promo167-hero .promo169-brand img{width:83px;height:23px}
 .promo167-hero .promo167-product{font-size:18px;line-height:1.2;margin-bottom:6px}
 .promo167-hero :is(h1,h2){font-size:19px;line-height:1.45;margin-bottom:7px;letter-spacing:-.02em;text-wrap:pretty}
 .promo167-hero p{display:none}
 .promo167-hero small{font-size:10px;line-height:1.5;margin-top:7px}
 .promo167-hero .promo167-cta{font-size:12px;min-height:40px;padding:8px 10px;gap:8px}
 .promo167-slide>.promo169-visual{grid-area:art;order:initial;height:auto;min-height:0;width:100%;margin:0;flex:initial;mask-image:linear-gradient(90deg,transparent,#000 8%,#000)}
 .promo167-slide .promo169-visual .promo167-art{height:100%;width:200%;object-fit:contain;object-position:right center}
 .promo167-controls{height:43px;padding:3px 8px}
 .promo167-controls>span{font-size:8px;letter-spacing:.03em}
 .promo167-controls>div{gap:4px}
 .promo167-controls button{width:38px;height:37px;font-size:20px}
 .promo167-controls [data-carousel-status]{font-size:10px;min-width:58px}
 .promo167-side,.promo167-side:has(.is-backdrop){height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:10px}
 .promo167-side :is(.promo167-shop,.promo167-coin),.promo167-side article:has(.is-backdrop){display:block;aspect-ratio:auto;min-height:136px;height:auto;width:100%;min-width:0;border-radius:10px}
 .promo167-side .promo167-side-copy,.promo167-side article:has(.is-backdrop) .promo167-side-copy{min-height:136px;height:100%;padding:12px 14px;justify-content:center;background:linear-gradient(90deg,#06152ef2,#06152ec9 52%,#06152e10 78%)}
 .promo167-side .promo167-kicker,.promo167-side article:has(.is-backdrop) .promo167-kicker{position:static;font-size:10px;line-height:1.35;padding:3px 6px;max-width:75%;margin:0 0 6px;letter-spacing:0}
 .promo167-side h2,.promo167-side article:has(.is-backdrop) h2,.promo167-side .promo167-coin:has(.is-backdrop) h2{font-size:18px;line-height:1.45;max-width:66%;margin:0 0 7px;letter-spacing:-.02em;text-wrap:pretty}
 .promo167-side .promo167-shop:has(.is-backdrop) h2>span{display:inline;white-space:normal}
 .promo167-side .promo167-shop:has(.is-backdrop) h2>span+span:before{content:' '}
 .promo167-side .promo167-shop:has(.is-backdrop) h2 strong{font-size:1.15em}
 .promo167-side p{display:none}
 .promo167-side .promo167-cta,.promo167-side article:has(.is-backdrop) .promo167-cta{font-size:12px;line-height:1.5;min-height:40px;padding:8px 10px;max-width:74%;gap:8px}
 .promo167-side .promo167-terms,.promo167-side article:has(.is-backdrop) .promo167-terms{font-size:12px;min-height:36px;line-height:1.5;max-width:74%;padding:5px 0}
 .promo167-side .promo169-visual{position:absolute;right:0;top:0;bottom:0;width:42%;height:auto;mask-image:none}
 .promo167-side .promo169-visual.is-full{right:6px;top:7px;bottom:7px;width:35%}
 .promo167-side .promo169-visual.is-backdrop{inset:0;width:100%;height:100%}
 .promo167-side .is-backdrop .promo167-art{object-fit:cover;object-position:right 78%}
 /* Coin copy has two lines: tighten spacing, not the information or the artwork. */
 .promo167-side .promo167-coin .promo167-side-copy,.promo167-side .promo167-coin:has(.is-backdrop) .promo167-side-copy{padding:10px 14px;min-height:136px}
 .promo167-side .promo167-coin .promo167-kicker,.promo167-side .promo167-coin:has(.is-backdrop) .promo167-kicker{padding-block:2px;margin-bottom:4px}
 .promo167-side .promo167-coin h2,.promo167-side .promo167-coin:has(.is-backdrop) h2{font-size:17px;line-height:1.4;margin-bottom:4px}
 .promo167-side .promo167-coin .promo167-terms,.promo167-side .promo167-coin:has(.is-backdrop) .promo167-terms{min-height:40px;padding-block:6px}
 .promo167-pair{grid-template-columns:minmax(0,1fr);margin-top:16px;margin-bottom:16px;gap:12px}
 .promo167-product-card,.promo167-product-card.is-apple{display:grid;grid-template-columns:minmax(0,61%) minmax(0,39%);grid-template-areas:'copy art';min-height:190px;height:auto;border-radius:11px}
 .promo167-product-copy,.is-apple .promo167-product-copy{grid-area:copy;padding:14px 0 14px 15px;min-width:0;justify-content:center;position:relative;z-index:1}
 .promo167-product-copy .promo167-kicker,.is-apple .promo167-product-copy .promo167-kicker{font-size:9px;line-height:1.4;letter-spacing:.02em;padding:4px 6px;margin-bottom:7px;max-width:100%}
 .promo167-product-copy h2,.is-apple .promo167-product-copy h2{font-size:19px;line-height:1.45;letter-spacing:-.02em;margin-bottom:9px;text-wrap:pretty}
 .promo167-product-copy p{display:none}
 .promo167-product-copy .promo167-cta,.is-apple .promo167-cta{font-size:12px;line-height:1.45;min-height:40px;gap:6px;padding:8px 9px;box-shadow:none}
 .promo167-product-card>.promo169-visual,.is-apple>.promo169-visual{grid-area:art;order:initial;width:100%;height:auto;min-height:0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000)}
 .promo167-product-card .promo169-visual .promo167-art{width:200%;height:100%;object-fit:contain;object-position:right center}
 .is-apple>.promo169-visual.is-scene .promo167-art{width:185%;height:100%;object-fit:contain;object-position:right center}
 .is-apple .promo168-sale,.promo168-sale{display:flex;max-width:100%;margin:0 0 9px;border-radius:7px;box-shadow:none}
 .is-apple .promo169-sale-label,.promo169-sale-label{width:auto;max-width:68px;padding:6px;gap:3px;font-size:8px;letter-spacing:.025em;line-height:1.2}
 .is-apple .promo169-sale-label svg,.promo169-sale-label svg{width:15px;height:15px}
 .is-apple .promo168-sale>strong,.promo168-sale>strong{display:flex;flex-direction:row;align-items:center;gap:5px;padding:7px 8px;white-space:normal}
 .is-apple .promo168-sale>strong>span,.promo168-sale>strong>span{font-size:10px;line-height:1.4;max-width:32px}
 .is-apple .promo168-sale b,.promo168-sale b{font-size:32px;line-height:1;letter-spacing:-.045em;white-space:nowrap}
 .is-apple .promo168-sale b small,.promo168-sale b small{font-size:17px;margin-left:1px}
 .promo167-dialog{width:calc(100% - 28px);max-height:calc(100dvh - 28px);padding:22px 18px}
 .promo167-dialog h2{font-size:23px;padding-right:16px}

 /* Keep cards useful on narrow screens rather than shrinking touch targets and text. */
 .home-merchandising{padding-top:18px;padding-bottom:24px}
 .home-merchandising .section-head{gap:10px;margin-bottom:13px;flex-wrap:wrap}
 .home-merchandising .section-head h2{font-size:23px}
 .home-merchandising .latest-products{grid-auto-columns:83%;gap:12px;scroll-snap-type:x mandatory}
 .home-merchandising .featured-card .product-photo{aspect-ratio:1.25/1}
 .home-merchandising .featured-card .product-info{padding:14px}
 .home-merchandising .featured-card h3{font-size:19px;height:57px;min-height:57px;line-height:28.5px}
 .home-merchandising .featured-card .stock.warranty-badge{font-size:14px;min-height:0;padding:8px 9px}
 .home-merchandising .product-grid.recommendations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 .home-merchandising .recommendations-grid .product-info{padding:10px}
 .home-merchandising .recommendations-grid .product-card h3{font-size:15px;height:49px;min-height:49px;line-height:24.5px}
 .home-merchandising .recommendations-grid .product-card .product-subtitle{font-size:12px;height:22px;min-height:22px;line-height:22px;margin:3px 0 9px}
 .home-merchandising .recommendations-grid .stock.warranty-badge{font-size:12px;line-height:1.6;min-height:55px;padding:7px 6px;gap:4px}
 .home-merchandising .product-card .product-buy{flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:9px}
 .home-merchandising .recommendations-grid .price{font-size:23px;line-height:1.4}
 .home-merchandising .product-card .add-cart{min-width:40px;width:40px;height:40px;min-height:40px;margin-left:auto}
 .home-merchandising .recommendations-grid .vat{font-size:11px;line-height:1.6;white-space:normal}
 .home-merchandising .product-card .brand-logo,.home-merchandising .product-card .brand{height:27px;min-height:27px}
 .home-merchandising .product-card .brand-logo img{height:27px;width:90px}
 .home-merchandising .home-price-offer{min-height:22px;line-height:20px}
 #catalog .home-price-original{font-size:12px;margin-right:3px}
 #catalog .home-price-saving{font-size:10px;padding:1px 3px}
 .shop-product-card,.shop-product-body,.shop-results,.pd-content-panel,.member-card,.checkout-panel{min-width:0}
 .shop-search>input,.shop-price-inputs input,.shop-brand-search,.shop-results-toolbar select,.member-card input:not([type=checkbox]):not([type=radio]),.member-card select,.member-card textarea,.checkout-page input:not([type=checkbox]):not([type=radio]),.checkout-page select,.checkout-page textarea{font-size:16px}
 .shop-results-toolbar{align-items:flex-start;flex-wrap:wrap;gap:10px}
 .shop-results-toolbar>label{margin-left:auto;max-width:100%}
 .shop-results-toolbar select{max-width:155px}
 .shop-product-body h2 a,.pd-info h1,.member-card :is(h1,h2,h3),.checkout-product h3,.account-identity :is(h2,p),.account-order :is(strong,small){overflow-wrap:anywhere}
 .shop-buy{min-height:43px}
 .shop-wish,.home-merchandising .product-photo .wish{width:44px;height:44px;min-width:44px;min-height:44px}
 .shop-wish{top:4px;right:5px}
 .shop-product-card .shop-card-price strong{font-size:23px}
 .pd-main-photo{aspect-ratio:1.12/1;max-height:370px}
 .pd-gallery-arrow{width:44px;height:44px;min-height:44px;font-size:29px}
 .pd-info h1{font-size:23px;line-height:1.55}
 .pd-price{font-size:32px}
 .pd-section-nav{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;flex-wrap:nowrap}
 .pd-section-nav a{flex:none;min-height:42px;display:flex;align-items:center;font-size:13px}
 .pd-variant-label select{max-width:100%;font-size:16px}
 .pd-purchase select{font-size:16px;max-width:100%}
 .product-rich img{max-width:100%;height:auto}
 .pd-table-scroll,.privacy-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
 .privacy-nav nav a{min-height:42px;padding-block:9px}
 .privacy-table-wrap:before{content:'เลื่อนตารางซ้าย–ขวาเพื่ออ่านข้อมูลทั้งหมด';display:block;position:sticky;left:0;padding:8px 12px;background:#edf3f7;border-bottom:1px solid #d3dfe9;color:#526b7e;font-size:12px;line-height:1.7}
 .privacy-prose h2{font-size:20px}
 .privacy-prose section{scroll-margin-top:154px}
 .about-page .identity-title,.editorial-heading{padding-top:25px;padding-bottom:22px}
 .about-page .about-photo>img{height:auto;aspect-ratio:4/3;object-fit:cover}
 .about-page .network-card-head{min-height:105px;padding:17px}
 .about-page .network-card-head h3{font-size:22px}
 .article-prose{overflow-wrap:anywhere;min-width:0}
 .article-prose img{max-width:100%;height:auto}
 .article-prose table{display:block;max-width:100%;overflow-x:auto}
 .article-heading h1{font-size:28px}
 .guide-heading h1{font-size:27px}
 .checkout-heading h1{font-size:27px;line-height:1.5}
 .checkout-heading p{font-size:15px}
 .checkout-panel{padding:17px;border-radius:12px}
 .checkout-panel h2{font-size:21px}
 .checkout-steps{gap:10px;font-size:12px;flex-wrap:wrap}
 .checkout-product{gap:10px;align-items:flex-start}
 .checkout-product>img{width:56px;height:56px}
 .checkout-product h3{font-size:15px}
 .checkout-product>strong{font-size:18px;max-width:100%;white-space:normal}
 .checkout-totals dd{white-space:normal;overflow-wrap:anywhere;text-align:right}
 .checkout-grand-total dd{font-size:30px;text-align:left}
 .checkout-help{padding:15px;gap:10px}
 .account-shortcuts .account-service-grid>a{min-height:125px;padding:13px 11px}
 .account-shortcuts .account-service-grid strong{font-size:15px}
 .account-shortcuts .account-service-grid span{font-size:12px}
 .member-dashboard .account-order .account-payment-actions{padding:14px;gap:12px}
 .account-payment-actions .account-pay-button{width:100%;max-width:100%;min-height:48px}
 .account-pay-button small{white-space:normal}
 .account-order>header{flex-wrap:wrap!important;gap:9px}
 .account-order>header>div,.account-order-items>div,.account-order-items>div>div{min-width:0;max-width:100%}
 .account-order-items :is(p,strong,small){overflow-wrap:anywhere}
 .member-card .google-signin{max-width:100%;font-size:15px}
 .cart-line{grid-template-columns:55px minmax(0,1fr) 44px;gap:10px;padding-block:17px}
 .cart-line>img{width:55px;height:62px}
 .cart-line h3{font-size:14px;overflow-wrap:anywhere}
 .cart-items{padding-inline:16px}
 .cart-line .cart-remove{min-width:44px;min-height:44px}
 .cart-line .qty-picker{height:42px}
 .cart-line .qty-picker button{width:42px;min-width:42px;min-height:42px}
 .payment-confirm-dialog{max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;padding:22px 18px}
 .payment-confirm-actions{flex-wrap:wrap;gap:9px}
 .payment-confirm-actions button{min-height:44px;white-space:normal}
 .footer-grid{gap:22px;padding-top:25px;padding-bottom:25px}
 .footer-about{padding:20px}
 .footer-contact{min-height:58px}
 .footer-contact strong{font-size:20px}
 .footer-nav>a{min-height:34px;margin-top:6px}
 .footer-bottom{gap:9px;flex-wrap:wrap}
 .footer-payments{flex-wrap:wrap;max-width:100%}
}
@media (max-width:359px) {
 .site-header .header-actions{gap:5px}
 .site-header .header-actions .customer-link{font-size:12px}
 .site-header .main-header>.logo img{width:107px;height:37px}
 .site-header .header-icon{width:33px;min-width:33px}
 .promo167-slide{grid-template-columns:minmax(0,62%) minmax(0,38%);min-height:235px}
 .promo167-hero-copy{padding-left:12px}
 .promo167-hero :is(h1,h2){font-size:18px}
 .promo167-side h2,.promo167-side article:has(.is-backdrop) h2,.promo167-side .promo167-coin:has(.is-backdrop) h2{font-size:17px;max-width:71%}
 .promo167-side .promo167-side-copy,.promo167-side article:has(.is-backdrop) .promo167-side-copy{padding-inline:12px}
 .promo167-product-card,.promo167-product-card.is-apple{grid-template-columns:minmax(0,66%) minmax(0,34%)}
 .promo167-product-copy,.is-apple .promo167-product-copy{padding-left:12px}
 .promo167-product-copy h2,.is-apple .promo167-product-copy h2{font-size:18px}
 .home-merchandising .recommendations-grid .price{font-size:21px}
 .home-merchandising .recommendations-grid .product-info{padding:9px}
 .shop-product-body{padding:9px}
 .shop-product-body h2{font-size:14px}
 .shop-card-price strong{font-size:21px}
 .shop-stock{white-space:normal;font-size:10px}
 .shop-bottom-help{flex-wrap:wrap}
 .guide-provider-mark{display:none}
 .checkout-totals>div{font-size:13px;gap:7px;padding-inline:8px}
}

/* V1.79: mobile campaign scenes fill the card instead of letterboxing in a narrow cell. */
@media (max-width:699px) {
 .promo167-product-card,.promo167-product-card.is-apple{position:relative;display:block;isolation:isolate;overflow:hidden;min-height:190px}
 .promo167-product-card>.promo169-visual,.promo167-product-card.is-apple>.promo169-visual{position:absolute;inset:0;grid-area:auto;order:initial;width:100%;height:100%;min-height:0;mask-image:none;z-index:0}
 .promo167-product-card .promo169-visual .promo167-art,.promo167-product-card.is-apple>.promo169-visual.is-scene .promo167-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
 .promo167-product-card .promo167-product-copy,.promo167-product-card.is-apple .promo167-product-copy{width:56%;min-height:190px;height:100%;padding:15px 0 15px 15px;position:relative;z-index:1}
 .promo167-product-card.is-spotlight .promo167-product-copy{background:linear-gradient(90deg,#cde5f8f0,#cde5f8d9 82%,transparent)}
 .promo167-product-card.is-jisulife .promo167-product-copy{background:linear-gradient(90deg,#d8f8f8f2,#d8f8f8dc 82%,transparent)}
 .promo167-product-card.is-apple .promo167-product-copy{width:59%;background:linear-gradient(90deg,#071c35fa,#071c35e6 75%,transparent)}
 .promo167-product-card .promo167-product-copy h2{max-width:95%;text-wrap:balance}
 .promo167-product-card .promo167-product-copy .promo167-cta{max-width:94%;min-height:42px}
}
@media (max-width:359px) {
 .promo167-product-card .promo167-product-copy{width:57%;padding-left:12px}
 .promo167-product-card.is-apple .promo167-product-copy{width:64%;padding-left:12px}
}
@media (max-width:699px) {
 .promo167-slide{display:block;position:relative;isolation:isolate;overflow:hidden}
 .promo167-slide>.promo169-visual{position:absolute;inset:0;width:100%;height:100%;min-height:0;mask-image:none;z-index:0}
 .promo167-slide .promo169-visual .promo167-art{width:100%;height:100%;object-fit:cover;object-position:80% center}
 .promo167-hero-copy{position:relative;z-index:1;width:61%;min-height:230px;background:linear-gradient(90deg,#f8f1e8fa,#f8f1e8ee 62%,#f8f1e800);padding:15px 12px 15px 15px}
 .is-quicksnap .promo167-hero-copy{background:linear-gradient(90deg,#f5f3e7fa,#f5f3e7ed 62%,#f5f3e700)}
 .promo167-hero :is(h1,h2){text-wrap:balance}
 .promo167-hero small{font-size:11px;line-height:1.5;color:#526577}
}

/* Compact quotation CTA with breathing room inside the mobile navigation. */
@media(max-width:699px){
 .site-header .nav-scroll>a.nav-quote{flex:none;align-self:center;height:33px;min-height:33px;margin:0 8px 0 2px;padding:0 11px;gap:6px;border:1px solid #e9b948;border-radius:9px;background:#ffd268;box-shadow:0 2px 5px #00000012;font-size:12px;line-height:1.4;font-weight:650;color:#172338}
 .site-header .nav-scroll>a.nav-quote:is(:hover,:focus,:active,.current){color:#172338;background:#ffdc85}
 .site-header .nav-scroll>a.nav-quote .icon{width:14px;height:14px}
 .site-header .nav-scroll>a.nav-quote:after{display:none}
 /* Give the native Facebook plugin a readable width rather than a half column. */
 .site-footer .footer-nav.footer-products204{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
 .site-footer .footer-nav.footer-products204>h3{grid-column:1/-1}
 .site-footer .footer-nav.footer-products204>a{margin-top:4px}
 .site-footer .footer-facebook192{grid-column:1/-1;width:100%;max-width:340px;justify-self:center;margin-top:20px}
 .site-footer .footer-facebook192 h3{font-size:16px;margin-bottom:10px}
}