@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800;850;900&family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:light;--bg:#f6f7ff;--bg2:#fff;--ink:#101632;--ink2:#283052;--muted:#767e9c;--line:#e1e5f5;--surface:#fff;--soft:#f1f2ff;--purple:#6f25ef;--purple2:#9b3ef8;--navy:#101a47;--red:#d90d2f;--shadow:0 8px 22px rgba(63,58,157,.085);--glow:0 7px 24px rgba(107,71,225,.16);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 16% 0%,#f1ebff 0,transparent 40%),linear-gradient(180deg,#f3f4ff 0%,#fafbff 52%,#f6f7ff 100%);color:var(--ink);font-family:'Inter','Noto Sans Thai',Tahoma,Arial,sans-serif;font-size:14px;line-height:1.5}body.dark{color-scheme:dark;--bg:#121629;--bg2:#141a30;--ink:#f5f4ff;--ink2:#d7d9f4;--muted:#a6acc9;--line:#313751;--surface:#1e243b;--soft:#242c4b;--purple:#9b64ff;--purple2:#c17aff;--navy:#0c1025;--red:#ff6377;--shadow:0 8px 25px rgba(0,0,0,.19);background:linear-gradient(160deg,#12172e 0%,#1b203a 40%,#111628 100%)}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #a682f9;outline-offset:3px}a{text-decoration:none;color:inherit}button svg{pointer-events:none}button,.product-card,.mission-card{transition:background .19s,border-color .19s,box-shadow .19s,transform .2s}button:active:not(:disabled){transform:scale(.98)}[hidden]{display:none!important}svg.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{display:block;max-width:100%}.container{width:min(1464px,calc(100% - 76px));margin:auto}.demo-bar{height:27px;background:#191e49;color:#e9e9ff;display:flex;align-items:center;justify-content:center;font-size:10.5px;letter-spacing:.04px;position:relative;gap:6px;padding:0 22px;text-align:center}.demo-dot{width:5px;height:5px;border-radius:50%;background:#b88dff;box-shadow:0 0 8px #af7afa}.demo-bar button{position:absolute;right:13px;background:none;color:#d9d5fa;font-size:20px;line-height:1}.site-header{position:sticky;top:0;z-index:35;background:rgba(250,250,255,.93);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,225,246,.85)}body.dark .site-header{background:rgba(20,23,42,.95);border-color:var(--line)}.site-header-inner{width:min(1464px,calc(100% - 76px));margin:auto;height:60px;display:flex;gap:20px;align-items:center;justify-content:space-between}.logo{display:flex;align-items:baseline;white-space:nowrap;gap:2px;line-height:1}.logo-mark{font-weight:900;font-style:italic;background:linear-gradient(135deg,#00b0ff 17%,#7a32e6 75%);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:36px;letter-spacing:-7px;padding-right:9px;transform:skewX(-8deg)}.logo strong{font-weight:900;font-size:26px;letter-spacing:-1.8px}.logo-sub{font-size:16px;letter-spacing:-.7px;margin-left:4px;font-weight:600}.main-nav{display:flex;gap:23px;align-items:center;margin-left:auto}.main-nav button,.head-tools button,.crumb button{display:flex;align-items:center;gap:4px;background:none;color:var(--ink);font-size:13px;font-weight:750;white-space:nowrap}.main-nav button .icon{width:13px;height:13px}.main-nav button:hover,.head-tools button:hover{color:var(--purple)}.header-search{margin-left:auto;background:var(--surface);border:1px solid #e0e4f3;border-radius:28px;height:40px;display:flex;align-items:center;padding:0 6px 0 16px;width:315px;min-width:170px;position:relative;box-shadow:0 4px 15px rgba(54,68,134,.06)}body.dark .header-search{border-color:var(--line)}.header-search>.icon{color:var(--muted);width:16px}.header-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:9px;color:var(--ink);font-size:11.5px}.header-search input::placeholder{color:#8f95ac}.header-search button{background:transparent;color:var(--ink);display:flex;padding:5px}.header-search button .icon{width:18px}.head-tools{display:flex;align-items:center;gap:18px}.head-tools button{padding:4px 0}.head-tools .icon{width:21px;height:21px}.icon-button{border:0;border-radius:50%;display:grid;place-items:center;width:34px;height:34px;background:transparent;color:var(--ink)}.icon-button:hover{background:var(--soft)}.head-tools .branch-head,.head-tools .account-head{gap:5px}.head-tools .cart-head{position:relative}.cart-count{position:absolute;right:-10px;top:-7px;background:linear-gradient(135deg,#bb40f5,#8224eb);border-radius:50%;width:18px;height:18px;display:grid;place-items:center;color:white;font-size:10px;box-shadow:0 3px 7px #a557e985}.mobile-menu{display:none!important}.search-suggestions{position:absolute;z-index:50;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:14px;top:46px;left:0;right:0;overflow:hidden;padding:8px}.search-suggestions button{width:100%;text-align:left;padding:10px 11px;border-radius:7px;color:var(--ink);display:flex;gap:7px;align-items:center;font-size:12px}.search-suggestions button:hover{background:var(--soft)}
/* HERO mirrors the approved light premium composition */
.hero{min-height:294px;background:linear-gradient(123deg,#f5f0ff 0%,#eeeafd 33%,#dfe7ff 59%,#b8cef6 76%,#d2d0ff 100%);overflow:hidden;position:relative;isolation:isolate}.hero:before{content:"";position:absolute;width:39%;height:130%;left:24%;top:-20%;background:linear-gradient(125deg,transparent 0 42%,rgba(255,255,255,.76) 43%,rgba(255,255,255,.18) 47%,transparent 48%);transform:skew(-10deg)}.hero:after{content:"";position:absolute;inset:auto 0 0;height:38px;background:linear-gradient(0deg,rgba(194,190,232,.2),transparent)}body.dark .hero{background:linear-gradient(115deg,#24213a,#20254c 48%,#262963 86%,#292654)}.hero-inner{width:min(1464px,calc(100% - 76px));margin:auto;display:grid;grid-template-columns:32% 36% 32%;gap:0;position:relative;min-height:294px;align-items:center}.hero-copy{position:relative;z-index:3;padding:24px 0 12px 28px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:11px;letter-spacing:3px;color:#515779;font-weight:700}.hero-copy h1{font-size:clamp(30px,3vw,47px);line-height:1.22;margin:12px 0 7px;font-weight:900;letter-spacing:-1.8px}.hero-copy h1>span:first-of-type{color:var(--purple)}.scribble{display:inline-block;vertical-align:middle;margin-left:10px;width:106px;height:20px;border-top:5px solid #9045ff;border-radius:55% 90% 0 0;transform:rotate(-9deg) translateY(9px)}.hero-copy p{font-size:13px;margin:3px 0 20px;color:var(--ink2)}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:white;background:linear-gradient(130deg,#a44afa,#611be2 86%);font-weight:800;border-radius:13px;padding:11px 19px;min-height:42px;box-shadow:0 7px 17px rgba(126,56,229,.18);white-space:nowrap}.primary-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#362967;background:rgba(255,255,255,.75);font-weight:800;border-radius:12px;padding:10px 15px;min-height:42px;border:1px solid #e5defe;white-space:nowrap}body.dark .secondary-btn{background:#333551;color:#f1eaff;border-color:#4c4972}.primary-btn .icon,.secondary-btn .icon{width:16px;height:16px}.secondary-btn .icon{color:var(--purple)}.hero-dots{display:flex;gap:8px;align-items:center;margin-top:19px}.hero-dots .dot{width:11px;height:11px;border-radius:50%;background:#b7bfdc}.hero-dots .active{background:var(--purple)}.hero-visual{position:absolute;width:42%;left:30%;top:1%;height:99%;object-fit:contain;object-position:center bottom;mix-blend-mode:multiply;opacity:.98;z-index:1}body.dark .hero-visual{mix-blend-mode:screen;opacity:.75}.ai-panel{z-index:4;align-self:center;justify-self:end;width:98%;padding:16px 17px 17px;border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 35px rgba(83,83,156,.16);background:linear-gradient(135deg,rgba(233,233,255,.86),rgba(221,224,255,.93));border-radius:23px;backdrop-filter:blur(10px)}body.dark .ai-panel{background:linear-gradient(145deg,rgba(70,66,110,.91),rgba(43,45,89,.92));border-color:#565681}.ai-panel-top{display:flex;align-items:center;gap:5px;justify-content:space-between}.ai-title{font-weight:850;font-size:19px;white-space:nowrap;letter-spacing:-.7px}.star{color:#a257f2}.ai-chip{font-size:10px;color:white;background:linear-gradient(90deg,#ac4bef,#6226e0);padding:7px 9px;border-radius:18px;white-space:nowrap;font-weight:700}.ai-panel-body{display:flex;align-items:center;gap:8px;margin:10px 0}.ai-panel-body img{width:96px;max-width:34%;height:94px;object-fit:contain;mix-blend-mode:multiply}body.dark .ai-panel-body img{mix-blend-mode:screen}.ai-bubble{flex:1;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8);padding:14px 13px;border-radius:17px;font-size:12px;font-weight:800;line-height:1.7;box-shadow:0 4px 12px rgba(53,47,138,.07)}body.dark .ai-bubble{background:#3e426d;border-color:#525684}.ai-bubble span{font-weight:500;color:var(--ink2);font-size:11px}.ai-entry{display:flex;background:var(--surface);border-radius:25px;padding:5px 6px 5px 12px;align-items:center;min-height:45px;border:1px solid #e5e4f8;box-shadow:0 4px 14px rgba(41,44,110,.08)}.ai-entry>.icon{color:var(--purple);width:20px}.ai-entry input{width:100%;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-size:11.5px;padding:7px 9px}.ai-entry button{flex-shrink:0;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#9e45f2,#651be5);color:white}.ai-entry button .icon{width:16px}
/* Category */
.category-strip{min-height:92px;margin-top:13px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) 1.5fr;align-items:center;background:rgba(255,255,255,.68);border:1px solid rgba(221,221,250,.88);border-radius:19px;box-shadow:var(--shadow);padding:12px 14px;gap:0;overflow:hidden}body.dark .category-strip{background:var(--surface)}.category-item{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;color:var(--ink);border-right:1px solid #dfe1f0;font-size:11px;font-weight:750;white-space:nowrap}.category-item:hover,.category-item.active{color:var(--purple)}body.dark .category-item{border-color:var(--line)}.category-item .icon{width:27px;height:27px;stroke-width:1.75}.category-item:last-child{border-right:0}.category-item.all{margin-left:9px;border-radius:14px;height:57px;background:linear-gradient(105deg,#f7f7ff,#e8ddff);color:#35219c;display:flex;flex-direction:row;font-size:12px;gap:8px;box-shadow:0 4px 8px rgba(107,76,187,.08)}.category-item.all .icon{color:#5d20df;width:23px;height:23px}
/* DEAL + MISSION */
.split-feature{margin-top:26px;display:grid;grid-template-columns:47.8% 1fr;gap:27px;min-height:216px}.deal-feature{background:linear-gradient(120deg,#2b1c65 0%,#5b3bc6 52%,#283c70 100%);border-radius:23px;position:relative;color:white;min-height:214px;padding:14px 25px 10px;overflow:hidden;isolation:isolate}.deal-feature:after{content:"";z-index:-1;position:absolute;inset:0;background:radial-gradient(ellipse at 30% 120%,rgba(215,184,255,.5),transparent 45%);opacity:.8}.deal-head>div{display:flex;align-items:center;gap:12px}.deal-flash{color:#ffa33f;font-size:39px;line-height:1}.deal-head strong{font-size:23px;font-weight:850;letter-spacing:-.6px}.online-pill{padding:4px 12px;background:#593ab9;font-weight:700;font-size:11px;border-radius:17px}.deal-sub{display:block;padding-left:50px;font-size:12px;opacity:.86}.deal-product{display:flex;align-items:center;background:transparent;color:white;width:100%;gap:13px;text-align:left;padding:0;min-height:115px}.deal-product img{width:47%;height:115px;object-fit:contain;mix-blend-mode:screen}.deal-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.deal-text>b{font-size:18px;white-space:nowrap}.deal-text small{font-size:11px;color:#e5dbff;line-height:1.4}.deal-text>strong{font-size:27px;color:#f6e9ff;white-space:nowrap;font-weight:900}.deal-text del{color:#d0c7e3;font-size:12px;font-weight:500}.deal-text em{background:#f792c6;color:white;font-size:10px;border-radius:14px;padding:5px;font-style:normal;vertical-align:middle}.deal-bottom{position:absolute;bottom:10px;left:48%;right:24px;display:flex;justify-content:space-between;align-items:center}.deal-dots{display:flex;gap:7px}.deal-dots i{width:8px;height:8px;background:#a7a3cb;border-radius:50%}.deal-dots i:first-child{background:#edb6ff}.deal-link{display:flex;align-items:center;gap:4px;border-radius:25px;padding:5px 11px;background:#fff;color:#3f249e;font-weight:800;font-size:11px}.deal-link .icon{width:14px;height:14px}.section-heading{display:flex;align-items:center;justify-content:space-between;min-height:31px;gap:8px}.section-heading>div{display:flex;align-items:center;gap:9px}.section-heading .icon{color:var(--purple);width:22px}.section-heading h2{font-size:20px;font-weight:900;margin:0;letter-spacing:-.5px}.section-heading h2 span{font-size:12px;font-weight:700}.section-heading>button{background:transparent;font-size:12px;font-weight:750;color:#361c9d;display:flex;align-items:center;gap:3px;white-space:nowrap}.section-heading>button .icon{width:15px}body.dark .section-heading>button{color:#bb9bff}.mission-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:12px}.mission-card{border-radius:15px;background:var(--surface);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);min-width:0;text-align:left;color:var(--ink);padding:0}.mission-card:hover{transform:translateY(-3px);box-shadow:var(--glow)}.mission-card img{width:100%;height:82px;object-fit:cover}.mission-info{padding:8px 9px 10px}.mission-info b{display:block;font-size:11.5px;white-space:nowrap}.mission-info b .icon{color:var(--purple);width:18px;height:18px;vertical-align:-4px;margin-right:5px}.mission-info small{display:block;text-align:center;font-size:10px;line-height:1.4;margin-top:3px;color:var(--ink2);white-space:nowrap}
/* RECOMMENDED & SERVICES */
.home-bottom{margin-top:17px;display:grid;grid-template-columns:1fr 265px;gap:24px;align-items:start}.reco-heading{min-height:42px;margin-bottom:13px}.reco-heading>div{gap:9px;flex-wrap:wrap}.section-sparkle{color:#8b4cf5;font-size:30px;line-height:1}.heading-meta{font-size:11px;color:var(--muted);margin-left:4px;white-space:nowrap}.rec-tabs{display:flex;align-items:center;gap:5px}.rec-tabs button{border-radius:18px;padding:6px 16px;background:rgba(255,255,255,.6);font-size:11px;min-height:31px;color:var(--ink);box-shadow:0 2px 8px rgba(85,75,150,.045)}.rec-tabs button.active{background:linear-gradient(130deg,#a54cf6,#681ce1);color:white;font-weight:700}.rec-tabs button.circle{width:30px;height:30px;padding:3px;display:grid;place-items:center;border-radius:50%}.rec-tabs button.circle .icon{width:16px;height:16px}.recommend-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.product-card{position:relative;background:rgba(255,255,255,.86);border:1px solid rgba(230,231,246,.88);border-radius:17px;min-width:0;box-shadow:var(--shadow);overflow:hidden;padding:9px 13px 13px}.product-card:hover{box-shadow:0 13px 25px rgba(66,53,147,.13);transform:translateY(-2px)}body.dark .product-card{background:var(--surface);border-color:var(--line)}.card-image{width:100%;height:92px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:9px;cursor:pointer}body.dark .card-image{mix-blend-mode:normal;border-radius:7px}.heart-btn{position:absolute;right:7px;top:8px;border:0;background:transparent;color:#637092;display:grid;place-items:center;width:27px;height:27px;z-index:3}.heart-btn .icon{width:19px}.heart-btn.liked{color:#f04b82}.product-name{font-size:11.7px;font-weight:850;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;padding:0;color:var(--ink);text-align:left;max-width:100%}.product-spec{font-size:10px;color:var(--ink2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.product-price-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:28px;margin-top:8px}.product-price{font-size:17px;font-weight:900;color:#c91528;white-space:nowrap}.product-old{font-size:9.5px;color:var(--muted);text-decoration:line-through}.discount{font-size:9px;background:#ffdeec;color:#ee3565;border-radius:12px;padding:3px 5px}.quick-add{position:absolute;right:10px;bottom:11px;background:linear-gradient(120deg,#f4efff,#e5dcff);border:1px solid #e4d9ff;color:#5e20dc;width:31px;height:31px;border-radius:50%;display:grid;place-items:center}.quick-add .icon{width:18px;height:18px}.quick-add:hover{background:#6f25ef;color:#fff}.service-panel{background:linear-gradient(150deg,#eee9ff 0%,#e6e9ff 100%);padding:12px 13px 13px;border:1px solid #e1ddf7;border-radius:18px;box-shadow:var(--shadow)}body.dark .service-panel{background:var(--surface);border-color:var(--line)}.service-panel h2{font-size:17px;display:flex;align-items:center;gap:7px;margin:2px 0 9px;font-weight:900}.service-panel h2 .icon{color:var(--purple);width:23px}.service-panel>button{display:flex;text-align:left;align-items:center;gap:8px;width:100%;background:rgba(255,255,255,.75);color:var(--ink);padding:10px 9px;border-bottom:1px solid #e5e6f2;min-height:56px}.service-panel>button:first-of-type{border-radius:13px 13px 0 0}.service-panel>button:last-child{border-radius:0 0 13px 13px;border-bottom:0}body.dark .service-panel>button{background:#2a304c;border-color:var(--line)}.service-panel>button:hover{background:var(--surface)}.service-panel>button>.icon:first-child{color:#5e25e5;width:24px;height:24px}.service-panel>button>.icon:last-child{width:14px;height:14px;color:var(--purple)}.service-panel>button span{flex:1}.service-panel>button b{display:block;font-size:11.5px}.service-panel>button small{display:block;font-size:10px;color:var(--ink2)}.delivery-band{display:flex;justify-content:space-around;margin:25px 0 34px;padding:15px 10px;background:var(--surface);border:1px solid var(--line);border-radius:15px;gap:12px}.delivery-band>div{display:flex;align-items:center;gap:8px}.delivery-band .icon{color:var(--purple)}.delivery-band b{font-size:12px}.delivery-band span{color:var(--muted);font-size:10px}
/* Global supplementary pages */
.page{min-height:520px}.catalog-container,.product-page-container,.checkout-container{padding-top:25px;padding-bottom:55px}.crumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.crumb button{font-size:12px;font-weight:500;color:var(--muted)}.crumb .icon{width:14px;height:14px}.catalog-title,.checkout-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:23px 0}.catalog-title h1,.checkout-title h1{font-size:31px;letter-spacing:-1px;margin:2px 0 3px}.catalog-title p,.checkout-title p{font-size:13px;color:var(--muted);margin:0}.eyebrow.purple{color:var(--purple);letter-spacing:2px}.catalog-layout{display:grid;grid-template-columns:235px 1fr;gap:20px}.filters,.checkout-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px}.filters{align-self:start}.filters>b{font-size:15px}.filters>div:first-of-type{display:grid;gap:4px;margin:13px 0}.filters button{background:transparent;color:var(--ink2);text-align:left;border-radius:8px;padding:8px 10px}.filters button.active,.filters button:hover{background:var(--soft);color:var(--purple);font-weight:800}.filters hr{height:1px;border:0;background:var(--line);margin:18px 0}.price-range input{width:100%;accent-color:#8234e8}.price-range span{display:block;font-size:12px;margin-top:9px}.muted-sm{font-size:11px;color:var(--muted);line-height:1.8}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;color:var(--muted);font-size:12px}.catalog-toolbar select{padding:8px 13px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:var(--surface)}.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.catalog-grid .product-card{min-height:270px;padding:14px}.catalog-grid .card-image{height:155px;margin-bottom:12px}.catalog-grid .product-name{font-size:13px}.catalog-grid .product-spec{font-size:11px}.catalog-grid .product-price{font-size:19px}.empty-state{padding:50px 25px;background:var(--surface);color:var(--muted);text-align:center;border-radius:17px}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px;align-items:start}.detail-gallery,.detail-info,.detail-extra{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:var(--shadow)}.detail-gallery>img{width:100%;height:350px;object-fit:contain;background:#fff;border-radius:13px;mix-blend-mode:multiply}.detail-small{display:flex;gap:10px;margin-top:15px}.detail-small img{width:70px;height:60px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:white}.detail-info h1{font-size:27px;line-height:1.3;margin:10px 0}.detail-info p{color:var(--muted);margin:0 0 13px}.detail-info .big-price{font-size:34px;font-weight:900;color:#d31630}.detail-info .old{font-size:15px;color:var(--muted);text-decoration:line-through;margin-left:10px}.detail-info .stock-note{padding:12px;background:var(--soft);border-radius:10px;color:var(--ink2);font-size:12px;margin:20px 0}.detail-info .detail-actions{display:flex;gap:12px}.detail-info .detail-actions button{flex:1}.detail-info .delivery-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.detail-info .delivery-choices>div{background:var(--soft);padding:13px;border-radius:11px;font-size:12px}.detail-info .delivery-choices .icon{color:var(--purple)}.detail-extra{margin-top:20px}.detail-extra h2{font-size:18px}.detail-extra table{border-collapse:collapse;width:100%;font-size:12px}.detail-extra td{border-bottom:1px solid var(--line);padding:10px 8px}.detail-extra td:first-child{color:var(--muted);width:130px}.checkout-layout{display:grid;grid-template-columns:1fr 330px;gap:20px}.checkout-left{display:grid;gap:16px}.checkout-card h2{margin:0 0 19px;font-size:18px}.fulfillment-options{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px}.fulfillment-option{padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;border:1.5px solid var(--line);border-radius:13px}.fulfillment-option.selected{border-color:#914bee;background:var(--soft)}.fulfillment-option input{position:absolute;opacity:0;pointer-events:none}.fulfillment-option .icon:first-of-type{color:var(--purple);width:26px;height:26px}.fulfillment-option span{flex:1}.fulfillment-option b{font-size:13px;display:block}.fulfillment-option small{font-size:11px;display:block;color:var(--muted)}.fulfillment-option .icon:last-child{width:18px;color:var(--purple);opacity:0}.fulfillment-option.selected .icon:last-child{opacity:1}.checkout-card label:not(.fulfillment-option){display:grid;gap:7px;font-size:12px;font-weight:750}.checkout-card textarea,.checkout-card select{border:1px solid var(--line);border-radius:11px;padding:12px;width:100%;background:var(--bg2);color:var(--ink);resize:vertical}.checkout-summary{height:fit-content;position:sticky;top:80px}.summary-line{display:flex;justify-content:space-between;gap:10px;padding:12px 0;font-size:13px;color:var(--ink2)}.summary-line.total{border-top:1px solid var(--line);font-weight:850;font-size:17px;color:var(--ink)}.summary-line.total b{color:#cb1a35}.checkout-disclaimer{background:var(--soft);padding:12px;border-radius:10px;font-size:11px;color:var(--ink2);line-height:1.7}.checkout-summary>.primary-btn,.checkout-summary>.secondary-btn{width:100%;margin-top:10px}.checkout-item{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.checkout-item img{width:76px;height:55px;object-fit:contain;background:#fff;border-radius:8px}.checkout-item .item-text{flex:1}.checkout-item b{display:block;font-size:13px}.checkout-item small{display:block;font-size:11px;color:var(--muted)}.qty{display:flex;align-items:center;gap:8px}.qty button{width:27px;height:27px;display:grid;place-items:center;background:var(--soft);color:var(--ink);border-radius:6px}.qty .icon{width:13px}.footer{border-top:1px solid var(--line);background:rgba(255,255,255,.55);margin-top:10px}body.dark .footer{background:rgba(0,0,0,.2)}.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:35px;padding:40px 0}.footer-logo{margin-bottom:15px}.footer p,.footer span,.footer button{color:var(--muted);font-size:12px;line-height:1.9}.footer b{display:block;margin-bottom:9px}.footer button,.footer span:not(.logo-mark):not(.logo-sub){display:block;background:none;padding:0;text-align:left}.footer .logo-sub{color:var(--ink)}
/* Drawers, dialog, overlays */
.shade{position:fixed;inset:0;background:rgba(15,17,39,.49);z-index:70;backdrop-filter:blur(2px)}.cart-drawer{position:fixed;z-index:71;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--surface);padding:25px 25px 18px;box-shadow:-15px 0 40px rgba(22,18,60,.25);display:flex;flex-direction:column}.drawer-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px}.drawer-head h2{font-size:22px;margin:0}.drawer-head h2 span{font-size:13px;color:var(--muted)}.drawer-head p{font-size:12px;color:var(--muted);margin:5px 0}.drawer-items{flex:1;overflow:auto;padding:10px 0}.drawer-bottom{border-top:1px solid var(--line);padding-top:12px}.drawer-bottom>p{font-size:11px;color:var(--muted)}.drawer-bottom .primary-btn{width:100%}.cart-item-row{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.cart-item-row img{width:85px;height:76px;object-fit:contain;border-radius:12px;background:white}.cart-item-row .item-text{flex:1}.cart-item-row b{font-size:12px;display:block}.cart-item-row small{font-size:11px;color:var(--muted);display:block;margin:3px 0}.cart-item-row .qty{margin-top:8px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:100;color:white;background:#161e40;border-radius:16px;padding:12px 20px;box-shadow:0 12px 24px rgba(25,20,66,.25);font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(92vw,500px)}.toast.show{opacity:1;transform:translate(-50%,0)}.floating-ai{position:fixed;right:17px;bottom:20px;background:radial-gradient(circle at 35% 20%,#8b9bff,#392173 73%);width:55px;height:55px;border:3px solid #c6b8ff;border-radius:50%;color:#d6caff;display:grid;place-items:center;box-shadow:0 9px 22px rgba(77,45,147,.35);z-index:33}.floating-ai .icon{width:27px;height:27px}.floating-ai:hover{transform:scale(1.06)}dialog{border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);width:min(510px,calc(100% - 32px));box-shadow:0 20px 70px rgba(15,20,60,.3);padding:21px}dialog::backdrop{background:rgba(10,13,40,.5);backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.dialog-top strong{font-size:18px}#infoBody{font-size:13px;color:var(--ink2);line-height:1.85;padding-top:13px}#infoBody ul{padding-left:20px}.fly-dot{position:fixed;z-index:98;width:26px;height:26px;border-radius:50%;background:var(--purple);box-shadow:0 6px 18px rgba(100,46,199,.4);pointer-events:none;color:white;display:grid;place-items:center}
/* Responsive */
@media(max-width:1400px){.site-header-inner,.hero-inner,.container{width:min(1360px,calc(100% - 50px))}.main-nav{gap:13px}.head-tools{gap:10px}.header-search{width:245px}.logo strong{font-size:23px}.logo-sub{font-size:14px}.hero-copy{padding-left:12px}.hero-copy h1{font-size:39px}.ai-title{font-size:16px}.ai-chip{font-size:9px}.mission-info b{font-size:10px}.mission-info small{font-size:9px}.reco-heading h2{font-size:18px}.heading-meta{display:none}}
@media(max-width:1160px){.main-nav button:nth-child(5),.branch-head span,.account-head span{display:none}.hero-inner{grid-template-columns:36% 35% 29%}.hero-visual{left:31%;width:42%}.hero-copy h1{font-size:36px}.ai-panel{padding:12px}.ai-bubble{padding:9px;font-size:10px}.ai-bubble span{font-size:9px}.ai-panel-body img{width:70px;height:75px}.category-strip{grid-template-columns:repeat(9,minmax(80px,1fr)) 150px;overflow:auto;scrollbar-width:thin}.split-feature{grid-template-columns:1fr;gap:21px}.deal-feature{min-height:215px}.deal-product img{width:34%}.deal-bottom{left:35%}.mission-grid{gap:14px}.mission-card img{height:110px}.mission-info b{font-size:13px}.mission-info small{font-size:11px}.home-bottom{grid-template-columns:1fr 248px}.recommend-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.recommend-grid .product-card:nth-child(5){display:none}.rec-tabs button{padding:6px 10px}}
@media(max-width:850px){.container,.site-header-inner,.hero-inner{width:calc(100% - 30px)}.site-header-inner{height:65px;gap:10px;flex-wrap:wrap}.main-nav{display:none}.header-search{flex:1;width:auto}.account-head,.branch-head{display:none!important}.mobile-menu{display:flex!important}.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px;padding-bottom:18px}.hero-copy{grid-column:1;min-height:265px}.hero-visual{position:absolute;left:36%;width:59%;top:0;height:255px;object-fit:contain}.ai-panel{grid-column:1/-1;width:100%;max-width:100%;justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px}.ai-panel-top{grid-column:1/-1}.ai-panel-body{margin:0}.ai-entry{align-self:center}.category-strip{margin-top:11px}.split-feature{margin-top:20px}.mission-grid{grid-template-columns:repeat(4,1fr)}.mission-card img{height:95px}.home-bottom{grid-template-columns:1fr}.recommend-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.recommend-grid .product-card:nth-child(5){display:block}.service-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.service-panel h2{grid-column:1/-1}.service-panel>button{border-radius:10px!important;border:0}.catalog-layout{grid-template-columns:1fr}.filters{display:block}.filters>div:first-of-type{grid-template-columns:repeat(4,1fr)}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.checkout-layout{grid-template-columns:1fr}.checkout-summary{position:static}}
@media(max-width:600px){.site-header-inner{height:58px;gap:6px}.logo strong{font-size:21px}.logo-mark{font-size:29px;padding-right:8px}.logo-sub{font-size:12px}.header-search{position:absolute;top:65px;left:15px;right:15px;width:auto;z-index:8;height:40px;background:#fff}.site-header{padding-bottom:50px}body.dark .header-search{background:var(--surface)}.head-tools{margin-left:auto;gap:9px}.head-tools .icon-button{width:25px}.hero{min-height:0}.hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:0}.hero-copy{min-height:0;display:block;padding:23px 18px 10px;max-width:100%;width:100%}.eyebrow{font-size:9px;letter-spacing:2px}.hero-copy h1{font-size:31px;letter-spacing:-1px;margin:8px 0 6px}.hero-copy p{font-size:11.5px;margin-bottom:13px}.scribble{width:60px;height:12px;border-width:3px}.hero-buttons .primary-btn,.hero-buttons .secondary-btn{font-size:11px;padding:7px 10px;min-height:36px}.hero-dots{margin-top:5px;gap:5px}.hero-dots .dot{width:7px;height:7px}.hero-visual{position:relative;left:auto;top:auto;width:100%;height:150px;object-fit:contain;object-position:center;order:2;z-index:1}.ai-panel{order:3;width:calc(100% - 30px);margin:10px 15px 18px;border-radius:18px;padding:12px;display:block}.ai-title{font-size:16px}.ai-chip{font-size:9px;padding:5px 8px}.ai-panel-body{min-height:70px;margin:4px 0 8px}.ai-panel-body img{width:64px;height:64px}.ai-bubble{font-size:11px;padding:8px 10px}.ai-bubble span{font-size:10px}.ai-entry{min-height:40px}.category-strip{display:flex;gap:0;overflow:auto;min-height:80px;padding:5px 0;margin:10px 0 0;border-radius:14px;scroll-snap-type:x proximity}.category-item{min-width:82px;height:59px;font-size:10px;padding:4px 8px;scroll-snap-align:start}.category-item .icon{width:24px;height:24px}.category-item.all{min-width:140px;height:54px;margin:0 6px}.split-feature{margin-top:18px}.deal-feature{min-height:208px;padding:14px 15px}.deal-head strong{font-size:19px}.deal-flash{font-size:31px}.deal-sub{font-size:10px;padding-left:38px}.deal-product{min-height:115px}.deal-product img{width:45%;height:110px}.deal-text>b{font-size:13px}.deal-text small{font-size:9px}.deal-text>strong{font-size:20px}.deal-text del{font-size:10px}.deal-bottom{left:46%;right:13px}.mission-heading h2{font-size:16px}.mission-heading h2 span{font-size:11px}.mission-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px}.mission-card{min-width:154px;max-width:154px;scroll-snap-align:start}.mission-card img{height:75px}.mission-info b{font-size:11px}.mission-info small{font-size:9px}.home-bottom{margin-top:12px}.reco-heading{display:block}.reco-heading h2{font-size:19px}.rec-tabs{overflow:auto;margin-top:10px}.rec-tabs button{white-space:nowrap}.recommend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.recommend-grid .product-card:nth-child(5){display:none}.product-card{min-height:230px;padding:12px}.card-image{height:118px}.product-name{font-size:12px}.product-spec{font-size:10px}.product-price{font-size:17px}.service-panel{grid-template-columns:1fr;padding:12px}.service-panel>button{min-height:54px}.delivery-band{display:grid;grid-template-columns:1fr 1fr;gap:13px}.delivery-band>div{flex-wrap:wrap;gap:5px}.delivery-band span{width:100%}.catalog-title{display:block}.catalog-title h1,.checkout-title h1{font-size:23px}.catalog-title>.secondary-btn{margin-top:15px}.filters>div:first-of-type{grid-template-columns:repeat(2,1fr)}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-grid .product-card{min-height:230px;padding:10px}.catalog-grid .card-image{height:105px}.catalog-grid .product-name{font-size:11px}.catalog-grid .product-price{font-size:17px}.catalog-toolbar{gap:8px}.detail-layout{grid-template-columns:1fr;gap:15px}.detail-gallery,.detail-info{padding:15px}.detail-gallery>img{height:220px}.detail-info h1{font-size:22px}.fulfillment-options{grid-template-columns:1fr}.checkout-card{padding:16px}.footer-inner{grid-template-columns:1fr 1fr;gap:25px}.footer-inner>div:first-child{grid-column:1/-1}.footer .logo-sub{font-size:14px}.footer-inner>div:last-child{grid-column:1/-1}.floating-ai{width:48px;height:48px}.demo-bar{font-size:9px;height:auto;min-height:26px;padding:5px 25px 5px 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
/* Desktop hero fixed panel position per approved master composition */
@media(min-width:851px){.ai-panel{grid-column:3}}
/* Prevent min-content expansion from long Thai product names on small screens */
@media(max-width:600px){.split-feature{grid-template-columns:minmax(0,1fr)}.split-feature>*{min-width:0;width:100%;max-width:100%}.deal-product{min-width:0}.deal-product img{min-width:0;flex-shrink:1}.deal-text{min-width:0}.deal-text small{white-space:normal}.deal-text>strong{font-size:17px}}

/* Final pixel-alignment pass against approved ABC homepage reference */
@media(min-width:601px){.category-strip{margin-top:0}}
@media(min-width:1401px){.main-nav button{font-size:14px}.hero-copy h1{font-size:50px}.hero-copy p{font-size:14px}.reco-heading h2{font-size:20px}.product-name{font-size:12.5px}.product-spec{font-size:11px}.service-panel h2{font-size:19px}}
@media(min-width:851px){.recommend-grid .card-image{height:105px}}