@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap");

:root { --ink:#18211b; --muted:#68716b; --line:#e7ebe7; --cream:#f7f7f2; --lime:#ccff4a; --green:#193c2d; --white:#fff; --font-geist-sans:"Geist"; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:var(--font-geist-sans), "Noto Sans Thai", Arial, sans-serif; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
.mobile-upload-header { display:none; }
.upload-helper { max-width:1290px; margin:18px auto 0; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#18211b; color:white; border-radius:4px; }
.upload-helper>div { display:flex; flex-direction:column; gap:3px; }
.upload-helper b { font-size:12px; }
.upload-helper span { color:#b9c4bd; font-size:9px; }
.upload-helper button { min-height:40px; padding:0 18px; border:0; border-radius:3px; background:var(--lime); color:#18211b; font-size:10px; font-weight:850; cursor:pointer; white-space:nowrap; }
.floating-upload { position:fixed; right:22px; bottom:22px; z-index:55; min-height:52px; padding:0 18px 0 9px; border:0; border-radius:100px; background:#18211b; color:white; box-shadow:0 14px 35px rgba(24,33,27,.3); display:flex; align-items:center; gap:9px; cursor:pointer; }
.floating-upload b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:#18211b; font-size:20px; }
.floating-upload span { font-size:10px; font-weight:800; }

.site-header { width:min(1440px,100%); height:86px; margin:auto; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(231,235,231,.85); position:sticky; top:0; z-index:40; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:var(--lime); color:#142118; font-size:22px; font-weight:900; box-shadow:inset 0 -2px 0 rgba(0,0,0,.08); }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:14px; letter-spacing:.045em; }
.brand-copy small { margin-top:5px; font-size:9px; letter-spacing:.19em; text-transform:uppercase; color:#89908b; }
.main-nav { display:flex; align-items:center; gap:34px; margin-left:8%; }
.main-nav a { position:relative; font-size:13px; font-weight:600; color:#58615b; }
.main-nav a:after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--ink); transition:.25s; }
.main-nav a:hover:after { right:0; }
.header-actions { display:flex; align-items:center; gap:10px; }
.text-button { border:0; background:transparent; font-size:12px; font-weight:700; cursor:pointer; }
.text-button:hover { text-decoration:underline; }
.icon-button,.menu-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:white; display:grid; place-items:center; cursor:pointer; position:relative; font-size:20px; }
.icon-button b { width:16px; height:16px; border-radius:50%; background:var(--lime); position:absolute; right:-2px; top:-2px; display:grid; place-items:center; font-size:9px; }
.menu-button { display:none; font-size:25px; }

.hero { min-height:670px; max-width:1440px; margin:auto; padding:58px 5vw 72px; display:grid; grid-template-columns:.92fr 1.08fr; gap:7%; align-items:center; overflow:hidden; }
.eyebrow { color:#667069; font-size:10px; font-weight:800; letter-spacing:.2em; }
.eyebrow i { width:24px; height:1px; background:var(--ink); display:inline-block; vertical-align:middle; margin-right:10px; }
.hero h1 { margin:24px 0 22px; font-size:clamp(52px,5.6vw,86px); line-height:.94; letter-spacing:-.06em; font-weight:720; }
.hero h1 em { color:transparent; -webkit-text-stroke:1.5px var(--ink); font-style:normal; white-space:nowrap; }
.hero-copy>p { max-width:510px; margin:0; font-size:16px; line-height:1.9; color:var(--muted); }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.primary-button,.ghost-button,.secondary-button,.branch-button,.cta-button { min-height:50px; border:0; border-radius:100px; padding:0 25px; display:inline-flex; align-items:center; justify-content:center; gap:20px; cursor:pointer; font-weight:750; font-size:13px; transition:.22s ease; }
.primary-button { background:var(--ink); color:white; box-shadow:0 12px 28px rgba(24,33,27,.14); }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(24,33,27,.2); }
.primary-button span { font-size:18px; }
.ghost-button,.secondary-button { border:1px solid var(--line); background:white; }
.ghost-button:hover,.secondary-button:hover { border-color:var(--ink); }
.hero-proof { display:flex; align-items:center; gap:21px; margin-top:46px; }
.hero-proof div { display:flex; flex-direction:column; }
.hero-proof strong { font-size:18px; }
.hero-proof span { margin-top:4px; font-size:10px; color:#89908b; }
.hero-proof>i { height:29px; width:1px; background:var(--line); }
.hero-stage { min-height:520px; position:relative; border-radius:50% 50% 45% 55% / 46% 45% 55% 54%; background:linear-gradient(145deg,#dcff84,#c9fb4b 58%,#b9eb3b); box-shadow:inset -20px -25px 60px rgba(72,114,12,.12); }
.hero-orb { position:absolute; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(1px); }
.orb-one { width:92px; height:92px; top:10%; left:13%; }
.orb-two { width:44px; height:44px; right:7%; bottom:13%; }
.hero-card { position:absolute; background:#f6f5f0; border:7px solid white; border-radius:28px; box-shadow:0 30px 55px rgba(46,69,32,.2); overflow:hidden; }
.hero-card-main { width:55%; aspect-ratio:.9; top:12%; left:21%; transform:rotate(-5deg); }
.hero-card-main .product-visual { height:100%; }
.hero-card-side { width:25%; aspect-ratio:1; right:4%; bottom:10%; transform:rotate(8deg); }
.floating-label { position:absolute; left:16px; bottom:16px; right:16px; padding:13px 15px; display:grid; grid-template-columns:1fr auto; background:rgba(255,255,255,.82); backdrop-filter:blur(8px); border-radius:14px; }
.floating-label small { grid-column:1/-1; font-size:7px; letter-spacing:.18em; color:#708078; }
.floating-label strong { margin-top:3px; font-size:13px; }
.floating-label span { align-self:end; font-size:8px; color:#707a74; }
.hero-sticker { width:82px; height:82px; display:grid; place-content:center; text-align:center; position:absolute; top:8%; right:6%; border-radius:50%; background:var(--ink); color:white; font-size:10px; line-height:1.2; transform:rotate(11deg); }
.hero-sticker b { color:var(--lime); font-size:13px; }

.service-strip { max-width:1290px; margin:0 auto; padding:30px 3%; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-strip>div { display:flex; align-items:center; justify-content:center; gap:14px; border-right:1px solid var(--line); }
.service-strip>div:last-child { border-right:0; }
.service-strip b,.detail-service b { width:33px; height:33px; display:grid; place-items:center; border-radius:50%; background:#f2f5ef; color:#31503f; font-size:13px; }
.service-strip span,.detail-service span { display:flex; flex-direction:column; }
.service-strip strong,.detail-service strong { font-size:12px; }
.service-strip small,.detail-service small { margin-top:3px; color:#919a94; font-size:9px; }

.category-section,.product-section,.related-section { max-width:1290px; margin:auto; padding:105px 3%; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:38px; }
.section-heading h2 { margin:10px 0 0; font-size:clamp(32px,3.2vw,47px); letter-spacing:-.045em; }
.section-heading>p { max-width:480px; margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }
.category-grid button { min-height:195px; padding:20px; border:1px solid var(--line); background:#fff; border-radius:20px; text-align:left; display:flex; flex-direction:column; position:relative; cursor:pointer; transition:.25s; }
.category-grid button:hover { transform:translateY(-5px); border-color:#cdd4ce; box-shadow:0 20px 42px rgba(41,54,45,.09); }
.category-grid button>b { position:absolute; right:18px; top:18px; font-size:18px; }
.category-icon { width:68px; height:68px; margin:auto; border-radius:23px; display:grid; place-items:center; font-size:26px; background:#e3f7d8; }
.category-icon.c2 { background:#ece9ff; }.category-icon.c3 { background:#ffe8d8; }.category-icon.c4 { background:#dff3ff; }.category-icon.c5 { background:#fff0c7; }
.category-grid strong { font-size:14px; }.category-grid small { color:#929a95; font-size:9px; margin-top:4px; }

.product-section { padding-top:84px; }
.product-heading { margin-bottom:24px; }
.mobile-edit { padding:11px 16px; border-radius:100px; border:1px solid var(--line); background:white; cursor:pointer; font-size:11px; font-weight:700; }
.catalog-tools { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 0 30px; border-top:1px solid var(--line); }
.category-tabs { display:flex; gap:7px; overflow:auto; scrollbar-width:none; }
.category-tabs button { white-space:nowrap; height:38px; padding:0 16px; border:0; background:transparent; border-radius:100px; color:#777f7a; cursor:pointer; font-size:11px; font-weight:700; }
.category-tabs button.active { background:var(--ink); color:white; }
.filter-tools { display:flex; align-items:center; gap:8px; }
.search-box { width:170px; height:40px; border:1px solid var(--line); border-radius:100px; display:flex; align-items:center; padding:0 13px; gap:7px; }
.search-box span { font-size:18px; }.search-box input { min-width:0; border:0; outline:0; font-size:11px; background:transparent; }
.filter-tools select { height:40px; border:1px solid var(--line); border-radius:100px; padding:0 30px 0 14px; background:white; color:#5d6660; font-size:10px; outline:0; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px 16px; }
.product-card { min-width:0; display:block; }
.card-image-wrap { position:relative; aspect-ratio:1; overflow:hidden; border-radius:20px; background:var(--cream); }
.product-card:hover .product-visual>div { transform:translate(-50%,-50%) scale(1.04) rotate(-2deg); }
.product-badge { position:absolute; top:13px; left:13px; z-index:3; background:#fff; border-radius:100px; padding:7px 10px; font-size:8px; font-weight:800; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.orig-wrap { display:inline-flex; align-items:center; gap:4px; }
.tag-orig2 { display:inline-block; background:#111; color:#fff; font-size:9px; font-weight:800; letter-spacing:.06em; padding:2px 8px; border-radius:4px; line-height:1.5; }
.orig-star { color:#f5c518; font-size:12px; font-weight:800; }
.card-heart { width:31px; height:31px; position:absolute; top:11px; right:11px; z-index:3; border:0; border-radius:50%; background:rgba(255,255,255,.84); font-size:17px; cursor:pointer; }
.card-info { padding:16px 3px; }
.card-category { color:#919993; font-size:8px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.card-info h3 { margin:5px 0 8px; font-size:14px; letter-spacing:-.015em; }
.card-description { margin:0 0 12px; min-height:34px; color:#7c8580; font-size:9px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price-row { display:flex; align-items:center; gap:8px; }
.price-row strong { font-size:14px; }.price-row s { color:#aaa; font-size:9px; }.price-row>span { margin-left:auto; font-size:9px; color:#6f7772; }.price-row>span b { font-size:12px; }
.empty-state { min-height:300px; display:grid; place-content:center; text-align:center; border:1px dashed #d8ded9; border-radius:24px; }.empty-state strong { font-size:20px; }.empty-state p { color:var(--muted); font-size:12px; }

.product-visual { position:relative; width:100%; height:100%; overflow:hidden; background:linear-gradient(145deg,#f6f6f1,#eaede7); }
.uploaded-product-image { width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.product-visual.mint { background:linear-gradient(145deg,#e9f7ec,#cde8d5); }.product-visual.peach { background:linear-gradient(145deg,#fff3e8,#f1d6c2); }.product-visual.blue { background:linear-gradient(145deg,#e7f4fa,#cadfe9); }.product-visual.lilac { background:linear-gradient(145deg,#f2effc,#d9d2ed); }.product-visual.smoke { background:linear-gradient(145deg,#eee,#d5d8d7); }.product-visual.lime { background:linear-gradient(145deg,#edfad7,#d2eda7); }.product-visual.coral { background:linear-gradient(145deg,#fff0e8,#f2c8ba); }.product-visual.sand { background:linear-gradient(145deg,#f6f0e5,#dfd1ba); }
.visual-glow { width:58%; height:58%; position:absolute; top:19%; left:21%; border-radius:50%; background:rgba(255,255,255,.8); filter:blur(28px); }
.product-visual>div { transition:.35s ease; }
.visual-caption { position:absolute; left:0; right:0; bottom:6%; text-align:center; font-size:6px; font-weight:800; letter-spacing:.18em; color:rgba(24,33,27,.35); }
.earbuds-shape { width:42%; height:34%; position:absolute; left:50%; top:50%; transform:translate(-50%,-42%); border-radius:34% 34% 40% 40%; background:linear-gradient(145deg,#fff,#d9dddb); box-shadow:0 18px 30px rgba(49,66,54,.2), inset -5px -5px 10px rgba(0,0,0,.08); }
.earbuds-shape:before { content:""; position:absolute; top:-6%; left:4%; right:4%; height:28%; border-radius:50%; background:#fbfcfb; box-shadow:0 2px 3px rgba(0,0,0,.18); }
.earbuds-shape i { width:18%; height:58%; position:absolute; top:-50%; left:18%; border-radius:50% 50% 40% 40%; background:linear-gradient(90deg,#eee,#fff); box-shadow:0 7px 8px rgba(0,0,0,.12); transform:rotate(-8deg); }.earbuds-shape i:nth-child(2) { left:auto; right:18%; transform:rotate(8deg); }.earbuds-shape b { width:12%; height:4%; position:absolute; bottom:9%; left:44%; border-radius:10px; background:#9ad8a7; }
.powerbank-shape { width:38%; height:58%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-7deg); border-radius:15%; background:linear-gradient(135deg,#fefefe,#dce1df); box-shadow:14px 20px 28px rgba(72,64,58,.2), inset -7px -7px 15px rgba(0,0,0,.08); }.powerbank-shape i { width:44%; aspect-ratio:1; border:2px solid rgba(33,43,36,.18); border-radius:50%; position:absolute; top:20%; left:28%; }.powerbank-shape b { position:absolute; left:0; right:0; bottom:17%; text-align:center; font-size:13px; color:#516158; }.powerbank-shape b:after { content:"%"; font-size:6px; }
.case-shape { width:38%; height:65%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(5deg); border:5px solid rgba(255,255,255,.82); border-radius:18%; background:rgba(255,255,255,.18); box-shadow:12px 20px 28px rgba(46,60,51,.18), inset 0 0 0 2px rgba(63,87,73,.13); }.case-shape i { width:32%; height:20%; position:absolute; top:5%; left:7%; border-radius:25%; background:#26322b; box-shadow:inset 0 0 0 5px rgba(255,255,255,.8); }.case-shape b { width:58%; aspect-ratio:1; position:absolute; left:21%; top:31%; border:3px solid rgba(255,255,255,.8); border-radius:50%; }
.charger-shape { width:38%; height:45%; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(-8deg); border-radius:20%; background:linear-gradient(145deg,#fff,#dfe0e3); box-shadow:12px 20px 30px rgba(58,52,70,.2), inset -5px -5px 13px rgba(0,0,0,.08); }.charger-shape i { width:8%; height:35%; position:absolute; top:-32%; right:23%; border-radius:3px; background:#c0c3c6; }.charger-shape i:nth-child(2) { right:38%; }.charger-shape b { position:absolute; left:0; right:0; top:32%; text-align:center; font-size:27px; letter-spacing:-.08em; }.charger-shape b span { font-size:9px; margin-left:2px; }
.cable-shape { width:53%; aspect-ratio:1; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:8px solid #f6f6f3; border-radius:50%; box-shadow:8px 14px 22px rgba(48,63,49,.17), inset 0 0 0 2px #c9cfca; }.cable-shape i,.cable-shape b { width:17%; height:28%; position:absolute; top:35%; left:-11%; border-radius:5px; background:#f5f5f2; box-shadow:0 4px 9px rgba(0,0,0,.14); }.cable-shape b { left:auto; right:-11%; }
.stand-shape { width:38%; height:46%; position:absolute; left:50%; top:49%; transform:translate(-50%,-50%) rotate(-5deg); border-radius:18%; background:linear-gradient(135deg,#373d3a,#111613); box-shadow:13px 20px 27px rgba(55,47,43,.26); }.stand-shape i { width:9%; height:65%; background:#b9bdbb; position:absolute; left:45.5%; bottom:-44%; }.stand-shape b { width:75%; height:8%; border-radius:50%; background:#555d59; position:absolute; left:12.5%; bottom:-48%; }

.cta-banner { max-width:1210px; margin:30px auto 110px; min-height:275px; padding:60px 6%; border-radius:30px; background:var(--green); color:white; display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.cta-banner:after { content:"P"; position:absolute; right:25%; top:-75%; color:rgba(204,255,74,.06); font-size:420px; font-weight:900; line-height:1; transform:rotate(-11deg); }
.cta-banner>div,.cta-button { position:relative; z-index:1; }.cta-banner>div>span { color:var(--lime); font-size:9px; letter-spacing:.18em; font-weight:800; }.cta-banner h2 { margin:12px 0 8px; font-size:36px; letter-spacing:-.035em; }.cta-banner p { margin:0; color:#bed0c5; font-size:12px; }.cta-button { background:var(--lime); color:var(--ink); white-space:nowrap; }
.site-footer { max-width:1290px; margin:auto; min-height:200px; padding:48px 3%; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-items:start; gap:30px; }.footer-brand { display:flex; gap:13px; align-items:center; }.footer-brand strong { font-size:13px; letter-spacing:.04em; }.footer-brand p { margin:4px 0 0; color:#858e88; font-size:9px; }.footer-links { display:flex; gap:30px; font-size:10px; font-weight:700; }.copyright { grid-column:1/-1; align-self:end; margin:18px 0 0; color:#a2a9a4; font-size:9px; }

.editor-backdrop { position:fixed; inset:0; z-index:100; background:rgba(13,20,16,.52); backdrop-filter:blur(5px); display:flex; justify-content:flex-end; }.editor-panel { width:min(520px,100%); height:100%; overflow:auto; padding:38px; background:white; box-shadow:-20px 0 55px rgba(0,0,0,.16); animation:slide-in .3s ease; }.editor-head { display:flex; align-items:flex-start; justify-content:space-between; }.editor-head span { color:#7a847e; font-size:9px; font-weight:800; letter-spacing:.15em; }.editor-head h2 { margin:6px 0 0; font-size:27px; }.editor-head button { width:38px; height:38px; border:1px solid var(--line); background:white; border-radius:50%; font-size:23px; cursor:pointer; }.editor-note { margin:22px 0; padding:13px 15px; background:#f2f7e8; color:#617054; border-radius:12px; font-size:10px; line-height:1.65; }.editor-panel form { display:grid; gap:15px; }.editor-panel label { display:flex; flex-direction:column; gap:7px; font-size:10px; font-weight:750; }.editor-panel input,.editor-panel select,.editor-panel textarea { width:100%; border:1px solid #dfe5df; border-radius:12px; background:white; padding:12px 13px; outline:0; font-size:12px; resize:vertical; }.editor-panel input:focus,.editor-panel select:focus,.editor-panel textarea:focus { border-color:#83a034; box-shadow:0 0 0 3px rgba(204,255,74,.25); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.editor-actions { display:flex; gap:10px; margin-top:12px; }.editor-actions button { flex:1; padding-inline:12px; }
.image-uploader { display:grid; grid-template-columns:130px 1fr; gap:15px; padding:14px; border:1px solid #dfe5df; border-radius:14px; background:#fafbf8; }.image-upload-preview { width:130px; aspect-ratio:1; overflow:hidden; border:1px solid #e3e7e3; border-radius:10px; background:white; }.image-upload-copy { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }.image-upload-copy>strong { font-size:11px; }.image-upload-copy>span { color:#7d8781; font-size:8px; line-height:1.6; }.image-upload-copy>input { display:none; }.upload-button { min-height:34px; padding:0 12px; border:0; border-radius:7px; background:#18211b; color:white; font-size:9px; font-weight:800; cursor:pointer; }.remove-image { padding:0; border:0; background:transparent; color:#b54a3f; font-size:8px; text-decoration:underline; cursor:pointer; }.image-upload-copy>em { color:#c44337; font-size:8px; font-style:normal; }
.multi-image-uploader { grid-template-columns:1fr; }.upload-gallery-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.upload-gallery-preview>div { aspect-ratio:1; position:relative; overflow:hidden; border:1px solid #dfe5df; border-radius:8px; background:white; }.upload-gallery-preview img { width:100%; height:100%; object-fit:contain; }.upload-gallery-preview span { position:absolute; left:4px; bottom:4px; padding:3px 5px; border-radius:3px; background:rgba(24,33,27,.86); color:white; font-size:7px; }.upload-gallery-preview button { position:absolute; right:4px; top:4px; width:21px; height:21px; border:0; border-radius:50%; background:rgba(24,33,27,.85); color:white; cursor:pointer; }.editor-panel label>small { color:#89928c; font-size:8px; font-weight:500; }
@keyframes slide-in { from { transform:translateX(100%); } to { transform:none; } }

.detail-shell { max-width:1290px; margin:auto; padding:28px 3% 100px; }.breadcrumb { display:flex; gap:10px; align-items:center; padding:5px 0 28px; color:#929a95; font-size:9px; }.breadcrumb b { color:#515a54; font-weight:650; }.detail-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:7%; align-items:start; }.detail-main-image { aspect-ratio:1; border-radius:28px; overflow:hidden; position:relative; background:white; cursor:zoom-in; }.gallery-zoom-image { width:100%; height:100%; display:block; object-fit:contain; transition:transform .18s ease; }.detail-main-image.is-zooming .gallery-zoom-image { transform:scale(2.15); }.zoom-hint { position:absolute; left:16px; bottom:14px; padding:7px 10px; border-radius:20px; background:rgba(24,33,27,.78); color:white; font-size:8px; pointer-events:none; opacity:.85; }.gallery-arrow { width:42px; height:42px; position:absolute; top:50%; transform:translateY(-50%); border:0; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 4px 16px rgba(0,0,0,.12); font-size:28px; cursor:pointer; }.gallery-arrow.prev { left:14px; }.gallery-arrow.next { right:14px; }.gallery-status { height:22px; margin-top:9px; display:flex; align-items:center; gap:8px; color:#7f8982; font-size:8px; }.gallery-status>span { font-weight:800; color:#253028; }.gallery-status>i { width:34px; height:3px; overflow:hidden; border-radius:3px; background:#e4e8e4; position:relative; }.gallery-status>i:after { content:""; position:absolute; inset:0; background:#668b31; transform-origin:left; animation:gallery-progress 4s linear infinite; }.gallery-status>i.paused:after { animation-play-state:paused; }.thumb-row { display:flex; gap:10px; margin-top:7px; padding-bottom:4px; overflow-x:auto; scrollbar-width:thin; }.thumb-row button { width:76px; min-width:76px; aspect-ratio:1; overflow:hidden; padding:0; border:1px solid var(--line); background:#f5f6f3; border-radius:12px; cursor:pointer; }.thumb-row button.active { border:2px solid var(--ink); }.detail-placeholder { height:100%; display:grid; place-items:center; color:#9aa19d; font-size:8px; }.ratio-note { display:flex; align-items:center; gap:9px; color:#8c948f; font-size:9px; }.ratio-note span { padding:4px 7px; border-radius:5px; background:#f1f3ef; color:#526058; font-weight:800; }.detail-info { padding:12px 0; }.detail-category { color:#7a847e; font-size:9px; font-weight:800; letter-spacing:.15em; }.detail-info h1 { margin:13px 0 10px; font-size:clamp(36px,4vw,58px); line-height:1.05; letter-spacing:-.05em; }.detail-rating { display:flex; align-items:center; gap:8px; font-size:9px; }.detail-rating>span { color:#e0ad25; letter-spacing:.1em; }.detail-rating i { width:1px; height:14px; background:var(--line); }.detail-rating a { color:#718078; text-decoration:underline; }.detail-price { display:flex; align-items:center; gap:11px; margin:28px 0 20px; }.detail-price strong { font-size:27px; }.detail-price s { color:#a3aaa5; font-size:12px; }.detail-price em { padding:6px 9px; border-radius:6px; background:#ebf8cc; color:#456329; font-size:8px; font-style:normal; font-weight:800; }.detail-description { max-width:520px; color:var(--muted); font-size:13px; line-height:1.85; }.product-options { margin:22px 0; display:grid; gap:15px; }.product-options fieldset { margin:0; padding:0; border:0; }.product-options legend { width:100%; margin-bottom:8px; display:flex; justify-content:space-between; font-size:10px; font-weight:800; }.product-options legend b { color:#6d7771; font-size:8px; }.product-options fieldset>div { display:flex; flex-wrap:wrap; gap:7px; }.product-options button { min-height:37px; padding:0 12px; display:flex; align-items:center; gap:6px; border:1px solid #dbe1dc; border-radius:5px; background:white; font-size:9px; cursor:pointer; }.product-options button.active { border:2px solid #18211b; background:#f3f6ef; font-weight:800; }.product-options button i { width:14px; height:14px; border:1px solid #d3d8d3; border-radius:50%; }.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }.feature-list div { display:flex; align-items:center; gap:8px; font-size:10px; }.feature-list b { width:21px; height:21px; border-radius:50%; background:#eff7e0; color:#476128; display:grid; place-items:center; font-size:9px; }.stock-line { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:8px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:10px; }.stock-dot { width:8px; height:8px; border-radius:50%; background:#75b83a; box-shadow:0 0 0 4px #ecf6e3; }.stock-line small { justify-self:end; color:#8c958f; font-size:8px; }.purchase-row { display:flex; gap:10px; margin-top:24px; }.quantity { height:50px; display:flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden; }.quantity button { width:42px; height:100%; border:0; background:white; cursor:pointer; }.quantity span { min-width:26px; text-align:center; font-size:11px; font-weight:800; }.grow { flex:1; }.branch-button { width:100%; margin-top:10px; border:1px solid var(--ink); background:white; }.branch-button:hover { background:#f5f7f4; }.detail-service { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:24px; }.detail-service>div { display:flex; gap:10px; align-items:center; }.spec-section { margin-top:100px; padding:55px 5%; background:#f7f8f4; border-radius:28px; display:grid; grid-template-columns:.8fr 1.2fr; gap:9%; }.spec-section h2 { margin:10px 0 14px; font-size:35px; }.spec-section>div>p { color:var(--muted); font-size:11px; line-height:1.8; }.spec-section dl { margin:0; }.spec-section dl div { display:grid; grid-template-columns:130px 1fr; padding:16px 0; border-bottom:1px solid #dfe4dd; font-size:10px; }.spec-section dt { color:#818a84; }.spec-section dd { margin:0; font-weight:650; }.related-section { padding:100px 0 0; }.related-section .section-heading>a { font-size:10px; font-weight:800; }.related-grid { grid-template-columns:repeat(3,1fr); max-width:940px; }.not-found { min-height:70vh; display:grid; place-content:center; text-align:center; }.not-found span { font-size:13px; color:#96a09a; letter-spacing:.2em; }.not-found h1 { margin:10px 0 18px; font-size:45px; }.not-found a { text-decoration:underline; font-size:12px; }.image-lightbox { position:fixed; inset:0; z-index:150; padding:4vh 8vw; display:grid; place-items:center; background:rgba(7,10,8,.94); }.image-lightbox img { max-width:85vw; max-height:88vh; object-fit:contain; }.image-lightbox>button { position:absolute; z-index:2; border:0; color:white; background:transparent; cursor:pointer; }.lightbox-close { right:26px; top:20px; font-size:40px; }.lightbox-prev,.lightbox-next { top:50%; transform:translateY(-50%); font-size:60px; }.lightbox-prev { left:25px; }.lightbox-next { right:25px; }.image-lightbox>span { position:absolute; bottom:17px; color:white; font-size:10px; }.image-lightbox .product-visual { display:none; }
@keyframes gallery-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width:980px) { .main-nav { gap:18px; margin-left:2%; }.hero { grid-template-columns:1fr 1fr; gap:3%; min-height:590px; }.hero-stage { min-height:420px; }.hero-proof { gap:12px; }.category-grid { grid-template-columns:repeat(3,1fr); }.product-grid { grid-template-columns:repeat(3,1fr); }.detail-grid { gap:4%; }.desktop-edit { display:none; } }
@media (max-width:720px) { .site-header { height:70px; padding:0 18px; }.brand-mark { width:36px; height:36px; border-radius:11px; }.brand-copy strong { font-size:11px; }.brand-copy small { font-size:7px; }.menu-button { display:grid; }.main-nav { display:none; position:absolute; top:70px; left:0; right:0; margin:0; padding:24px; background:white; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; box-shadow:0 18px 30px rgba(0,0,0,.08); }.main-nav.open { display:flex; }.hero { min-height:auto; grid-template-columns:1fr; padding:52px 18px 48px; gap:45px; }.hero h1 { font-size:54px; }.hero-copy>p { font-size:13px; }.hero-stage { min-height:390px; }.hero-proof { justify-content:space-between; }.hero-proof span { font-size:8px; }.service-strip { grid-template-columns:1fr 1fr; gap:0; padding:0 18px; }.service-strip>div { justify-content:flex-start; padding:19px 7px; border-bottom:1px solid var(--line); }.service-strip>div:nth-child(2) { border-right:0; }.service-strip>div:nth-child(3),.service-strip>div:nth-child(4) { border-bottom:0; }.category-section,.product-section { padding:70px 18px; }.section-heading { align-items:flex-start; flex-direction:column; gap:12px; }.section-heading>p { font-size:11px; }.category-grid { grid-template-columns:1fr 1fr; }.category-grid button { min-height:165px; }.category-grid button:last-child { grid-column:1/-1; }.catalog-tools { align-items:stretch; flex-direction:column; }.filter-tools { width:100%; }.search-box { flex:1; }.product-grid { grid-template-columns:1fr 1fr; gap:24px 10px; }.card-info h3 { font-size:12px; }.price-row>span { display:none; }.cta-banner { margin:10px 18px 70px; padding:44px 28px; border-radius:24px; flex-direction:column; align-items:flex-start; }.cta-banner h2 { font-size:30px; }.site-footer { margin:0 18px; grid-template-columns:1fr; }.footer-links { gap:20px; }.copyright { grid-column:1; }.editor-panel { padding:28px 20px; }.detail-shell { padding:18px 18px 70px; }.detail-grid { grid-template-columns:1fr; gap:32px; }.detail-info h1 { font-size:42px; }.stock-line { grid-template-columns:auto 1fr; }.stock-line small { grid-column:1/-1; justify-self:start; }.spec-section { margin-top:70px; padding:35px 24px; grid-template-columns:1fr; gap:30px; }.related-section { padding:70px 0 0; }.related-grid { grid-template-columns:1fr 1fr; }.detail-service { grid-template-columns:1fr 1fr; }.ratio-note { line-height:1.5; } }
@media (max-width:420px) { .hero h1 { font-size:47px; }.hero-actions { align-items:stretch; flex-direction:column; }.hero-actions a { width:100%; }.hero-proof { gap:8px; }.hero-proof>i { display:none; }.hero-stage { min-height:340px; }.category-grid button { min-height:150px; }.category-icon { width:58px; height:58px; }.product-grid { grid-template-columns:1fr 1fr; }.card-description { display:none; }.detail-service { grid-template-columns:1fr; }.feature-list { grid-template-columns:1fr; }.purchase-row { flex-direction:column; }.quantity { width:130px; justify-content:space-between; }.form-grid { grid-template-columns:1fr; }.editor-actions { flex-direction:column-reverse; }.spec-section dl div { grid-template-columns:1fr; gap:5px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* บังคับให้รูปสินค้าสไลด์ได้เสมอ แม้เครื่องปิดแอนิเมชัน (เครื่องสาขาบางตัว) */
@media (prefers-reduced-motion:reduce) { .product-visual img, .product-visual .hov-img, .pimg img, .pimg .hov-img, .hov-img { transition: transform .5s cubic-bezier(.33,0,.15,1) !important; } }
/* คลิปรูปที่เลื่อนออกนอกกรอบ (สไลด์แบบ 425) */
.product-visual, .pimg { overflow: hidden; }

/* Marketplace storefront — structured from modern specialist retail patterns */
.top-announcement { min-height:34px; padding:7px 5vw; background:#172019; color:white; display:flex; align-items:center; justify-content:center; gap:22px; font-size:9px; letter-spacing:.03em; }
.top-announcement a { color:var(--lime); font-weight:800; }
.marketplace-header { max-width:none; width:100%; height:140px; padding:0 max(4vw,22px); gap:3vw; }
.marketplace-header .brand { min-width:215px; }
.header-search { flex:1; max-width:620px; height:43px; padding-left:15px; border:1px solid #dce2dc; border-radius:7px; background:#f7f8f5; display:flex; align-items:center; gap:9px; overflow:hidden; }
.header-search>span { color:#69736d; font-size:20px; }.header-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:11px; }.header-search button { align-self:stretch; padding:0 19px; border:0; background:var(--lime); font-size:10px; font-weight:800; cursor:pointer; }
.header-icon { min-width:46px; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; cursor:pointer; }.header-icon>span { font-size:19px; line-height:1; }.header-icon>small { font-size:7px; color:#6e7771; }.cart-header b { position:absolute; top:-6px; right:3px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:var(--lime); font-size:8px; }
.commerce-nav { min-height:46px; padding:0 4vw; display:flex; align-items:center; justify-content:center; gap:clamp(19px,2.3vw,40px); border-bottom:1px solid var(--line); background:#fff; position:sticky; top:82px; z-index:35; }.commerce-nav a { font-size:10px; font-weight:700; white-space:nowrap; }.commerce-nav a:hover { color:#62901f; }.commerce-nav .sale-link { color:#e24b3d; }

.market-hero { max-width:1440px; margin:auto; padding:20px 4vw 45px; display:grid; grid-template-columns:2.15fr .85fr; gap:14px; }
.market-slide { min-height:490px; border-radius:3px; position:relative; overflow:hidden; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; background:linear-gradient(115deg,#dfff86,#bdff38); }.market-slide.slide-2 { background:linear-gradient(115deg,#ffe7d4,#ffc28e); }.market-slide.slide-3 { background:linear-gradient(115deg,#dff6ef,#b9e7d7); }
.market-hero-copy { padding:68px 0 68px 7%; position:relative; z-index:2; }.market-kicker,.market-section-head span,.device-copy>span,.store-band>div>span { font-size:8px; font-weight:850; letter-spacing:.18em; }.market-hero-copy h1 { margin:17px 0 18px; font-size:clamp(47px,5vw,73px); line-height:.93; letter-spacing:-.065em; }.market-hero-copy h1 em { font-style:normal; color:#477020; }.slide-2 .market-hero-copy h1 em { color:#9f4722; }.slide-3 .market-hero-copy h1 em { color:#26715b; }.market-hero-copy p { max-width:430px; color:#526057; font-size:11px; line-height:1.8; }.market-cta { min-height:46px; margin-top:18px; padding:0 22px; border-radius:3px; display:inline-flex; align-items:center; gap:28px; background:#18211b; color:white; font-size:10px; font-weight:800; }.market-cta span { font-size:17px; }
.market-product-stage { width:78%; aspect-ratio:1; justify-self:center; position:relative; transform:rotate(3deg); border:8px solid rgba(255,255,255,.76); box-shadow:0 30px 50px rgba(44,78,25,.16); }.market-product-stage .product-visual { height:100%; }.offer-bubble { width:88px; height:88px; position:absolute; top:-27px; right:-36px; display:grid; place-content:center; text-align:center; border-radius:50%; background:#18211b; color:white; font-size:8px; line-height:1.2; transform:rotate(9deg); }.offer-bubble b { display:block; margin-top:4px; color:var(--lime); font-size:8px; max-width:70px; }
.hero-dots { position:absolute; left:7%; bottom:28px; display:flex; gap:7px; }.hero-dots button { width:25px; height:3px; padding:0; border:0; background:rgba(24,33,27,.25); cursor:pointer; }.hero-dots button.active { background:#18211b; }
.market-side-promos { display:grid; grid-template-rows:1fr 1fr; gap:14px; }.side-promo { min-height:230px; padding:34px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.side-promo:after { content:"P"; position:absolute; right:-8px; bottom:-42px; font-size:190px; line-height:1; font-weight:900; opacity:.07; }.side-promo>span { font-size:8px; letter-spacing:.16em; font-weight:800; }.side-promo h2 { margin:11px 0 7px; font-size:29px; line-height:1.05; letter-spacing:-.04em; }.side-promo p { margin:0 0 17px; font-size:9px; opacity:.68; }.side-promo a { font-size:9px; font-weight:800; text-decoration:underline; }.promo-dark { background:#172019; color:white; }.promo-dark>span { color:var(--lime); }.promo-light { background:#f1f2ef; }
.quick-service { max-width:1290px; margin:0 auto 55px; padding:22px 2.5%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); }.quick-service a { display:flex; align-items:center; justify-content:center; gap:10px; border-right:1px solid var(--line); }.quick-service a:last-child { border:0; }.quick-service b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#eff4e9; font-size:12px; }.quick-service span { display:flex; flex-direction:column; }.quick-service strong { font-size:10px; }.quick-service small { margin-top:2px; color:#8d958f; font-size:7px; }

.device-finder { max-width:1210px; min-height:305px; margin:38px auto 28px; padding:45px 5%; display:grid; grid-template-columns:.72fr 1.28fr; gap:8%; align-items:center; background:#19231c; color:white; border-radius:3px; }.device-copy>span { color:var(--lime); }.device-copy h2 { margin:12px 0; font-size:35px; line-height:1.05; letter-spacing:-.04em; }.device-copy p { margin:0; color:#aebeb3; font-size:9px; line-height:1.7; }.device-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.device-tabs { grid-column:1/-1; display:flex; gap:6px; }.device-tabs button { min-width:83px; height:35px; border:1px solid #526058; color:#b9c4bd; background:transparent; cursor:pointer; font-size:9px; }.device-tabs button.active { background:var(--lime); color:#172019; border-color:var(--lime); font-weight:800; }.device-panel label { display:flex; flex-direction:column; gap:7px; color:#91a097; font-size:8px; }.device-panel select { height:47px; padding:0 13px; border:1px solid #536158; background:#223028; color:white; outline:0; font-size:10px; }.device-button { grid-column:1/-1; min-height:47px; display:grid; place-items:center; background:white; color:#18211b; font-size:10px; font-weight:800; }
.market-section { max-width:1290px; margin:auto; padding:40px 3%; }.market-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:17px; }.market-section-head span { color:#849087; }.market-section-head h2 { margin:6px 0 0; font-size:31px; letter-spacing:-.04em; }.market-section-head>a,.market-section-head>button { border:0; background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.shop-category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.shop-category-grid>a { min-height:154px; padding:15px; border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; text-align:center; transition:.22s; }.shop-category-grid>a:hover { border-color:#9ba69e; transform:translateY(-3px); box-shadow:0 12px 25px rgba(33,48,38,.07); }.shop-icon { width:69px; height:69px; margin:8px auto 11px; display:grid; place-items:center; border-radius:50%; background:#edf7df; font-size:25px; }.shop-icon.lime { background:#e8f8bc; }.shop-icon.blue { background:#e2eff9; }.shop-icon.lilac { background:#ece9fa; }.shop-icon.peach { background:#fbe7db; }.shop-icon.sand { background:#f3ecd9; }.shop-icon.mint { background:#dff1e8; }.shop-icon.coral { background:#f6ddd5; }.shop-icon.smoke { background:#e9ecea; }.shop-category-grid strong { font-size:10px; }.shop-category-grid small { margin-top:4px; color:#919993; font-size:7px; }
.market-product-grid .card-image-wrap { border-radius:3px; }.market-product-grid .product-card { border-bottom:1px solid #e3e7e3; }.market-product-grid .card-info { padding:14px 2px 18px; }.market-product-grid .card-info h3 { min-height:35px; line-height:1.4; }.market-product-grid .product-badge { border-radius:2px; background:#18211b; color:white; }.market-product-grid .card-heart { border-radius:2px; }
.campaign-grid { max-width:1210px; margin:28px auto; display:grid; grid-template-columns:1fr 1fr; gap:15px; }.campaign { min-height:330px; padding:42px 6%; display:grid; grid-template-columns:1fr .75fr; align-items:center; overflow:hidden; }.campaign>div:first-child { position:relative; z-index:2; }.campaign>div>span { font-size:8px; font-weight:800; letter-spacing:.15em; }.campaign h2 { margin:11px 0 9px; font-size:33px; line-height:1.05; letter-spacing:-.045em; }.campaign p { margin:0 0 17px; font-size:9px; color:#647168; }.campaign a { font-size:9px; font-weight:850; text-decoration:underline; }.campaign .product-visual { width:150%; aspect-ratio:1; margin-left:-25%; box-shadow:0 18px 35px rgba(0,0,0,.12); transform:rotate(6deg); }.campaign-one { background:#e8f7c8; }.campaign-two { background:#e2eef7; }
.product-listing-section { padding-top:75px; }.marketplace-tools { border-top:0; }.review-proof { max-width:1210px; margin:35px auto; padding:45px 5%; display:grid; grid-template-columns:.7fr 1.15fr 1.15fr; gap:22px; background:#f4f5f2; }.review-score>span { font-size:8px; letter-spacing:.13em; font-weight:800; }.review-score>strong { display:block; margin:8px 0 0; font-size:51px; line-height:1; }.review-score>b { color:#e5af1f; font-size:12px; letter-spacing:.1em; }.review-score p { margin:8px 0 0; color:#8b948e; font-size:8px; }.quote-card { padding:25px; background:white; border-left:3px solid var(--lime); }.quote-card p { margin:0 0 18px; font-size:11px; line-height:1.75; }.quote-card span { color:#8a938d; font-size:7px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.guide-grid article { border:1px solid var(--line); padding-bottom:20px; }.guide-art { aspect-ratio:1.65; display:flex; align-items:center; justify-content:center; gap:20px; overflow:hidden; }.guide-art span { font-size:45px; font-weight:850; letter-spacing:-.07em; }.guide-art b { font-size:75px; opacity:.48; transform:rotate(9deg); }.guide-lime { background:#e1f5b5; }.guide-blue { background:#dcecf7; }.guide-orange { background:#f7dfcd; }.guide-grid article>small,.guide-grid article>h3,.guide-grid article>a { display:block; margin-left:18px; margin-right:18px; }.guide-grid article>small { margin-top:18px; color:#8a948e; font-size:7px; font-weight:800; letter-spacing:.12em; }.guide-grid article>h3 { min-height:44px; margin-top:7px; margin-bottom:12px; font-size:14px; line-height:1.55; }.guide-grid article>a { font-size:8px; font-weight:800; }
.store-band { max-width:1210px; min-height:370px; margin:50px auto 90px; padding:58px 6%; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; background:#18211b; color:white; overflow:hidden; }.store-band>div>span { color:var(--lime); }.store-band h2 { margin:12px 0 13px; font-size:40px; line-height:1.03; letter-spacing:-.045em; }.store-band p { max-width:390px; color:#b1c1b5; font-size:10px; line-height:1.7; }.store-band button { margin-top:17px; min-height:43px; padding:0 18px; border:0; background:var(--lime); font-size:9px; font-weight:800; }.store-map { height:250px; position:relative; border-radius:50%; background:radial-gradient(circle at 48% 42%,#4b6355 0 7%,transparent 8%),linear-gradient(145deg,#304238,#223028); box-shadow:inset 0 0 0 1px #526359; transform:rotate(-3deg); }.store-map:before,.store-map:after { content:""; position:absolute; inset:18% 10%; border:1px dashed #708177; border-radius:48% 52% 42% 58%; transform:rotate(9deg); }.store-map:after { inset:34% 22%; transform:rotate(-10deg); }.store-map span,.store-map b,.store-map em { position:absolute; color:#8fa097; font-size:8px; font-style:normal; letter-spacing:.12em; }.store-map span { top:20%; left:22%; }.store-map b { top:57%; left:57%; }.store-map em { bottom:15%; left:32%; }.pin { width:14px; height:14px; position:absolute; z-index:2; border-radius:50%; background:var(--lime); box-shadow:0 0 0 6px rgba(204,255,74,.16); }.pin:after { content:"P"; position:absolute; inset:0; display:grid; place-items:center; color:#18211b; font-size:6px; font-weight:900; }.p1 { top:28%; left:36%; }.p2 { top:48%; left:65%; }.p3 { bottom:20%; left:46%; }.p4 { top:19%; right:23%; }
.marketplace-footer { max-width:none; padding:60px 5vw 35px; grid-template-columns:1.3fr repeat(3,.7fr); background:#f4f5f2; }.footer-intro { align-items:flex-start; }.footer-intro>div { max-width:310px; }.social-row { display:flex; gap:6px; margin-top:17px; }.social-row b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#18211b; color:white; font-size:9px; }.footer-column { display:flex; flex-direction:column; gap:10px; font-size:9px; color:#6e7771; }.footer-column>strong { margin-bottom:4px; color:#18211b; font-size:10px; }.marketplace-footer .copyright { border-top:1px solid #dfe3df; padding-top:25px; }
.delivery-card { margin-top:12px; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; background:#f2f5ef; }.delivery-card b { font-size:9px; }.delivery-card span { color:#7d8781; font-size:8px; }.delivery-card a { grid-column:2; font-size:8px; font-weight:800; }

.listing-hero { min-height:245px; padding:46px max(6vw,30px); display:flex; align-items:center; justify-content:space-between; background:#eef3e9; overflow:hidden; }.listing-hero>div:first-child { position:relative; z-index:2; }.listing-hero span { font-size:8px; letter-spacing:.17em; font-weight:800; }.listing-hero h1 { margin:10px 0; font-size:49px; letter-spacing:-.055em; }.listing-hero p { max-width:510px; margin:0; color:#6d7771; font-size:10px; }.listing-hero-mark { margin-right:8%; color:#d8e8cf; font-size:210px; line-height:.6; font-weight:900; transform:rotate(-9deg); }.listing-toolbar { max-width:1290px; height:65px; margin:auto; padding:0 3%; display:flex; align-items:center; gap:25px; border-bottom:1px solid var(--line); font-size:9px; }.listing-toolbar>span { margin-right:auto; }.listing-toolbar>button { display:none; }.listing-toolbar label { display:flex; align-items:center; gap:9px; }.listing-toolbar select { height:38px; padding:0 35px 0 13px; border:1px solid var(--line); background:white; font-size:9px; }.listing-layout { max-width:1290px; margin:auto; padding:35px 3% 90px; display:grid; grid-template-columns:210px 1fr; gap:36px; }.listing-filter h3 { margin:0 0 18px; font-size:18px; }.listing-filter>div { padding:18px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }.listing-filter strong { margin-bottom:5px; font-size:10px; }.listing-filter a { display:flex; justify-content:space-between; color:#707a74; font-size:9px; }.listing-filter a.active { color:#2a4b38; font-weight:850; }.listing-filter label { display:flex; align-items:center; gap:7px; color:#69736d; font-size:9px; }.listing-filter input { accent-color:#5d8128; }.listing-grid { grid-template-columns:repeat(3,1fr); }.pagination { margin-top:45px; display:flex; justify-content:center; gap:5px; }.pagination button { width:35px; height:35px; border:1px solid var(--line); background:white; font-size:9px; }.pagination button.active { background:#18211b; color:white; }

@media (max-width:980px) {
  .marketplace-header .brand { min-width:auto; }.header-search { max-width:420px; }.commerce-nav { justify-content:flex-start; overflow:auto; scrollbar-width:none; }.market-hero { grid-template-columns:1.6fr .8fr; }.market-slide { grid-template-columns:1fr .8fr; }.market-side-promos { display:block; }.side-promo { min-height:100%; }.market-side-promos .promo-light { display:none; }.shop-category-grid { grid-template-columns:repeat(4,1fr); }.campaign { grid-template-columns:1fr .6fr; }.marketplace-footer { grid-template-columns:1.2fr repeat(3,.8fr); }.listing-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px) {
  .detail-main-image.is-zooming .gallery-zoom-image { transform:none; }
  .zoom-hint { font-size:7px; }
  .gallery-arrow { width:36px; height:36px; }
  .product-options button { min-height:40px; }
  .image-lightbox { padding:3vh 3vw; }
  .image-lightbox img { max-width:94vw; max-height:84vh; }
  .mobile-upload-header { display:inline-flex; min-height:36px; padding:0 11px; align-items:center; border:0; border-radius:4px; background:var(--lime); font-size:9px; font-weight:850; white-space:nowrap; }
  .upload-helper { margin:10px 12px 0; padding:13px; align-items:flex-start; }
  .upload-helper span { max-width:200px; line-height:1.5; }
  .upload-helper button { min-height:38px; padding:0 11px; }
  .floating-upload { right:12px; bottom:12px; }
  .top-announcement { padding:7px 13px; justify-content:space-between; }.marketplace-header { height:69px; padding:0 15px; gap:9px; }.marketplace-header .brand-copy small { display:none; }.marketplace-header .brand-copy strong { max-width:90px; line-height:1.2; }.header-search { height:38px; max-width:none; padding:0 10px; }.header-search input { font-size:9px; }.header-search button,.header-icon,.desktop-edit { display:none; }.commerce-nav { display:none; position:fixed; inset:103px 0 auto 0; padding:22px; background:white; flex-direction:column; align-items:flex-start; z-index:60; box-shadow:0 20px 40px rgba(0,0,0,.15); }.commerce-nav.open { display:flex; }.market-hero { padding:12px 0 30px; grid-template-columns:1fr; gap:8px; }.market-slide { min-height:510px; border-radius:0; grid-template-columns:1fr; align-content:start; }.market-hero-copy { padding:46px 24px 0; }.market-hero-copy h1 { font-size:51px; }.market-product-stage { width:49%; margin:18px 7% 30px auto; }.offer-bubble { width:70px; height:70px; right:-30px; }.hero-dots { left:24px; bottom:19px; }.market-side-promos { display:grid; grid-template-columns:1fr 1fr; padding:0 12px; }.market-side-promos .promo-light { display:flex; }.side-promo { min-height:190px; padding:22px; }.side-promo h2 { font-size:23px; }.quick-service { margin:0; padding:0 15px; grid-template-columns:repeat(5,125px); overflow:auto; }.quick-service a { justify-content:flex-start; min-height:75px; }.device-finder { margin:55px 15px 25px; padding:35px 25px; grid-template-columns:1fr; gap:28px; }.device-copy h2 { font-size:32px; }.device-panel { grid-template-columns:1fr; }.device-tabs,.device-button { grid-column:1; overflow:auto; }.market-section { padding:52px 15px; }.market-section-head h2 { font-size:27px; }.shop-category-grid { grid-template-columns:repeat(3,1fr); gap:7px; }.shop-category-grid>a { min-height:133px; padding:10px 5px; }.shop-icon { width:58px; height:58px; }.market-product-grid { grid-template-columns:1fr 1fr; }.campaign-grid { margin:25px 15px; grid-template-columns:1fr; }.campaign { min-height:290px; padding:34px 25px; }.review-proof { margin:25px 15px; padding:30px 22px; grid-template-columns:1fr; }.guide-grid { grid-template-columns:1fr; }.guide-grid article>h3 { min-height:auto; }.store-band { margin:30px 15px 65px; padding:40px 25px; grid-template-columns:1fr; gap:32px; }.store-band h2 { font-size:35px; }.store-map { height:210px; }.marketplace-footer { padding:45px 20px 30px; grid-template-columns:1fr 1fr; }.footer-intro { grid-column:1/-1; }.marketplace-footer .copyright { grid-column:1/-1; }.listing-hero { min-height:210px; padding:35px 20px; }.listing-hero h1 { font-size:40px; }.listing-hero-mark { font-size:125px; margin-right:0; }.listing-toolbar { padding:0 20px; }.listing-toolbar>button { display:block; border:0; background:transparent; font-size:9px; font-weight:800; }.listing-toolbar label { margin-left:auto; }.listing-layout { padding:25px 15px 70px; grid-template-columns:1fr; }.listing-filter { display:none; }.listing-filter.open { display:block; padding:20px; border:1px solid var(--line); }.listing-grid { grid-template-columns:1fr 1fr; }.delivery-card { grid-template-columns:1fr; }.delivery-card a { grid-column:1; }
}
@media (max-width:420px) {
  .top-announcement span { max-width:255px; font-size:7px; }.top-announcement a { font-size:7px; }.header-search button { display:none; }.marketplace-header .brand-copy { display:none; }.market-product-stage { width:57%; }.market-side-promos { grid-template-columns:1fr; }.market-side-promos .promo-light { display:none; }.shop-category-grid { grid-template-columns:repeat(3,1fr); }.shop-category-grid>a { min-height:123px; }.shop-icon { width:52px; height:52px; }.market-product-grid .card-info h3 { min-height:31px; }.campaign { grid-template-columns:1fr .5fr; }.campaign h2 { font-size:28px; }.marketplace-footer { grid-template-columns:1fr; }.footer-intro,.marketplace-footer .copyright { grid-column:1; }.listing-hero-mark { display:none; }.listing-grid { grid-template-columns:1fr 1fr; }
}

/* Phone storefront tuned to a 425px-wide viewport */
@media (max-width:425px) {
  html,body { width:100%; overflow-x:hidden; }
  body { padding-bottom:66px; }
  .top-announcement { min-height:28px; padding:5px 12px; gap:8px; }
  .top-announcement span { max-width:290px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:7px; }
  .top-announcement a { flex:none; font-size:7px; }
  .marketplace-header { height:58px; padding:0 12px; gap:8px; top:0; }
  .marketplace-header .brand { min-width:39px; }
  .marketplace-header .brand-mark { width:38px; height:38px; font-size:19px; border-radius:9px; }
  .marketplace-header .brand-copy { display:none; }
  .header-search { height:36px; padding:0 9px; border-radius:5px; gap:6px; }
  .header-search>span { font-size:16px; }
  .header-search input { font-size:9px; }
  .mobile-upload-header { min-height:34px; padding:0 9px; font-size:8px; }
  .menu-button { width:34px; height:34px; }
  .commerce-nav { inset:86px 0 auto; }
  .upload-helper { margin:9px 12px 0; padding:10px 11px; gap:8px; border-radius:6px; }
  .upload-helper div span { display:none; }
  .upload-helper div b { font-size:9px; }
  .upload-helper button { min-height:32px; padding:0 10px; font-size:8px; white-space:nowrap; }

  .market-hero { padding:9px 12px 18px; gap:8px; }
  .market-slide { min-height:0; aspect-ratio:1.38; border-radius:7px; grid-template-columns:1.08fr .92fr; align-items:center; align-content:normal; }
  .market-hero-copy { padding:24px 0 26px 18px; }
  .market-kicker { font-size:6px; letter-spacing:.12em; }
  .market-hero-copy h1 { margin:9px 0 8px; font-size:clamp(27px,8vw,34px); line-height:.96; }
  .market-hero-copy p { max-width:165px; font-size:7px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .market-cta { min-height:32px; margin-top:10px; padding:0 12px; gap:15px; font-size:8px; }
  .market-cta span { font-size:13px; }
  .market-product-stage { width:78%; margin:0 auto; border-width:4px; }
  .offer-bubble { width:48px; height:48px; top:-15px; right:-17px; font-size:6px; }
  .offer-bubble b { max-width:41px; font-size:5px; }
  .hero-dots { left:18px; bottom:11px; gap:4px; }
  .hero-dots button { width:16px; height:2px; }
  .market-side-promos { display:none; }

  .quick-service { margin:0 0 18px; padding:0 12px 8px; grid-template-columns:repeat(5,78px); gap:6px; }
  .quick-service a { min-height:58px; padding:7px 5px; border:1px solid var(--line); border-radius:5px; flex-direction:column; gap:4px; text-align:center; }
  .quick-service b { width:25px; height:25px; font-size:9px; }
  .quick-service strong { font-size:7px; white-space:nowrap; }
  .quick-service small { display:none; }

  .device-finder { margin:20px 12px 15px; padding:22px 18px; gap:18px; border-radius:7px; }
  .device-copy h2 { margin:8px 0; font-size:25px; }
  .device-copy p { font-size:8px; }
  .device-panel { gap:8px; }
  .device-tabs button { min-width:72px; height:32px; }
  .device-panel select,.device-button { height:42px; min-height:42px; }

  .market-section { padding:30px 12px; }
  .market-section-head { margin-bottom:15px; padding-bottom:11px; gap:10px; }
  .market-section-head span { font-size:6px; }
  .market-section-head h2 { margin-top:4px; font-size:22px; }
  .market-section-head>a,.market-section-head>button { font-size:7px; white-space:nowrap; }
  .shop-category-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
  .shop-category-grid>a { min-height:101px; padding:8px 3px; border-radius:5px; }
  .shop-icon { width:44px; height:44px; margin:4px auto 7px; font-size:18px; }
  .shop-category-grid strong { font-size:7px; line-height:1.3; }
  .shop-category-grid small { display:none; }

  .market-product-grid,.listing-grid,.related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 8px; }
  .card-image-wrap { border-radius:6px; }
  .market-product-grid .card-info { padding:9px 1px 12px; }
  .card-category { font-size:6px; }
  .market-product-grid .card-info h3,.card-info h3 { min-height:31px; margin:5px 0 7px; font-size:10px; line-height:1.45; }
  .card-description { display:none; }
  .price-row strong { font-size:12px; }
  .price-row s { font-size:8px; }
  .product-badge { top:7px; left:7px; padding:5px 6px; font-size:6px; }
  .card-heart { width:28px; height:28px; top:6px; right:6px; }

  .campaign-grid { margin:8px 12px 18px; gap:8px; }
  .campaign { min-height:220px; padding:24px 18px; border-radius:6px; }
  .campaign h2 { font-size:23px; }
  .campaign p,.campaign a { font-size:7px; }
  .review-proof { margin:18px 12px; padding:22px 18px; gap:10px; border-radius:6px; }
  .review-score>strong { font-size:38px; }
  .quote-card { padding:17px; }
  .quote-card p { font-size:9px; }
  .guide-grid { gap:8px; }
  .guide-grid article>h3 { font-size:11px; }
  .store-band { margin:18px 12px 35px; padding:30px 22px; border-radius:7px; }
  .store-band h2 { font-size:29px; }
  .marketplace-footer { margin:0; padding:34px 18px 24px; }

  .detail-shell { padding:10px 12px 55px; }
  .breadcrumb { font-size:7px; }
  .detail-grid { gap:22px; }
  .detail-main-image { border-radius:7px; }
  .gallery-thumbnails { gap:6px; }
  .gallery-thumbnails button { width:52px; height:52px; border-radius:5px; }
  .detail-info h1 { font-size:28px; line-height:1.15; }
  .detail-price strong { font-size:25px; }
  .product-options button { min-height:38px; padding:0 11px; font-size:8px; }
  .purchase-row { position:sticky; bottom:7px; z-index:20; padding:8px; margin:12px -5px 0; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); flex-direction:row; }
  .purchase-row .quantity { width:105px; }
  .purchase-row .add-cart { min-height:44px; }
  .spec-section { margin-top:38px; padding:24px 18px; }
  .detail-service { grid-template-columns:1fr 1fr; }

  .floating-upload { right:12px; bottom:12px; }
}

/* PAY-425b: home product cards 5-per-row (match reference density) */
@media(min-width:981px){.market-product-grid{grid-template-columns:repeat(5,1fr);gap:26px 12px}}

/* PAY: keep cart icon visible on every screen size (was hidden < 720px) */
.cart-header{display:flex!important}
@media(max-width:720px){.header-actions{gap:6px}.cart-header>small{display:none}.cart-header>span{font-size:22px}}

/* PAY: product-card add-to-cart (compact, matches 425degree) */
.padd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding:0 2px}
.padd{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;background:#111;color:#fff;border:0;border-radius:6px;padding:11px 17px;font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s}
.padd:hover{background:#000}
.padd:active{transform:scale(.97)}
.padd.ok{background:#3a7d34}
.padd .bagi{width:17px;height:17px;flex:0 0 auto}
.pheart{flex:0 0 auto;border:0;background:transparent;color:#1c1c1c;font-size:23px;line-height:1;cursor:pointer;padding:0 6px;transition:.15s}
.pheart:hover{color:#e0245e}
.pheart.on{color:#e0245e}
@media(max-width:720px){.padd{padding:9px 11px;font-size:11px;gap:6px}.padd .bagi{width:15px;height:15px}.pheart{font-size:20px;padding:0 3px}}

/* PAY: logo bigger on desktop, capped on small screens */
@media(max-width:720px){.marketplace-header .brand img{height:56px!important}}
@media(max-width:520px){.marketplace-header .brand img{height:46px!important}}

/* PAY: hover zoom on every product card (feedback even for single-image) */
.market-product-grid .product-visual{overflow:hidden}
.market-product-grid .uploaded-product-image{transition:transform .35s ease}
.market-product-grid .product-card:hover .uploaded-product-image{transform:scale(1.07)}

/* PAY: red SALE ribbon (downward arrow) top-right on product cards */
.market-product-grid .card-image-wrap{position:relative}
.sale-ribbon{position:absolute;top:0;right:12px;z-index:3;background:#ff2020;color:#fff;font-size:11px;font-weight:800;line-height:1.06;text-align:center;padding:7px 9px 15px;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);box-shadow:0 3px 7px rgba(255,32,32,.35)}

/* PAY: smaller SALE ribbon */
.sale-ribbon{right:10px;font-size:8.5px;padding:5px 6px 10px;line-height:1.05;box-shadow:0 2px 5px rgba(255,32,32,.3)}

/* PAY: SALE ribbon = 425 style (flat top, notched bottom = two tails) */
.sale-ribbon{top:0;right:12px;font-size:10.5px;font-weight:800;line-height:1.12;padding:7px 10px 13px;background:#ef1c1c;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* PAY: SALE ribbon exact size measured from 425degree (w~38px, 12px/500, narrow) */
.sale-ribbon{box-sizing:border-box;width:39px;right:12px;font-size:12px;font-weight:500;line-height:1.15;padding:7px 4px 13px;background:#e03e2d}

/* PAY: horizontal slide hover (like 425) — clip inside the image box */
.market-product-grid .product-visual{position:relative;overflow:hidden}

/* PAY: frame stays still on hover — only the inner image slides (remove zoom that fought the slide = jitter) */
.market-product-grid .product-card:hover .uploaded-product-image{transform:none}
.market-product-grid .product-card:hover .product-visual>div{transform:none}
.market-product-grid .product-card{transition:box-shadow .2s ease}

/* PAY: hero = full banner image only (no overlay text, square banner on white) */
.market-hero{grid-template-columns:1fr;max-width:1120px;padding:16px 0 34px}
.market-side-promos{display:none}
.market-slide{grid-template-columns:1fr;min-height:0;background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.market-hero-copy{display:none}
.market-product-stage{width:100}
.market-product-stage{width:100%;aspect-ratio:auto;height:clamp(330px,44vw,540px);justify-self:stretch;transform:none;border:0;box-shadow:none;margin:0}
.market-product-stage .offer-bubble{display:none}
.market-product-stage .product-visual{width:100%;height:100%;background:#fff}
.market-product-stage .uploaded-product-image{width:100%;height:100%;object-fit:contain}
.hero-dots{left:50%;transform:translateX(-50%);bottom:14px;z-index:4}
.hero-dots button.active{background:#111}

/* PAY: RESTORE original split hero (revert full-banner change) */
.market-hero{grid-template-columns:2.15fr .85fr;max-width:1440px;padding:20px 4vw 45px}
.market-side-promos{display:grid}
.market-slide{grid-template-columns:1.08fr .92fr;min-height:490px;border:0;border-radius:3px;background:linear-gradient(115deg,#dfff86,#bdff38)}
.market-hero-copy{display:block}
.market-product-stage{width:78%;aspect-ratio:1;height:auto;justify-self:center;transform:rotate(3deg);border:8px solid rgba(255,255,255,.76);box-shadow:0 30px 50px rgba(44,78,25,.16);margin:0}
.market-product-stage .offer-bubble{display:grid}
.hero-dots{left:7%;transform:none;bottom:28px}

/* PAY: 3 banners fill the hero slide (background), hide overlay text+stage, keep side promos */
.market-slide{background-size:cover;background-position:center;background-repeat:no-repeat}
.market-slide .market-hero-copy,.market-slide .market-product-stage{display:none}
.market-hero .market-slide{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

/* full-width hero banner + promo band below service row */
.market-hero{grid-template-columns:1fr}
.market-hero .market-side-promos{display:none}
.promo-band{max-width:1290px;margin:0 auto 55px;padding:0 2.5%;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.promo-band .side-promo{min-height:150px;border-radius:4px;padding:30px 34px}
.promo-band .side-promo h2{font-size:26px;margin:9px 0 6px}
@media(max-width:760px){.promo-band{grid-template-columns:1fr 1fr;padding:0 12px;gap:10px;margin:0 0 30px}.promo-band .side-promo{min-height:120px;padding:20px}.promo-band .side-promo h2{font-size:19px}}

/* PAY: even product cards — lock title to 2 lines so every card is same height (fix uneven row gaps) */
.market-product-grid .card-info h3{min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0 6px}
.market-product-grid .card-description{min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:981px){.market-product-grid{gap:22px 12px}}
@media(max-width:980px){.market-product-grid .card-info h3{min-height:34px}.market-product-grid .card-description{min-height:28px}}

/* PAY: hero slide = fixed 2.6:1 on every screen -> full banner, no crop, no distortion (mobile fix) */
.market-hero .market-slide{aspect-ratio:2.6;min-height:0;height:auto;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:6px}
@media(max-width:760px){.market-hero{padding:10px 12px 20px}.market-hero .market-slide{aspect-ratio:2.6;border-radius:8px}}

/* PAY: compact vertical rhythm (match 425degree ~50px between blocks) */
.market-hero{padding:16px 4vw 26px}
.quick-service{margin:0 auto 8px;padding:18px 2.5%}
.market-section{padding:26px 3% 30px}
.market-section-head{margin-bottom:20px;padding-bottom:13px}
.campaign-grid{margin:14px auto}
.review-proof{margin:30px auto}
.store-band{margin-bottom:40px}
@media(max-width:760px){.market-section{padding:20px 12px}.quick-service{margin-bottom:4px}}

/* PAY: campaign card 1 = full custom banner image (square shows full, no crop) */
.campaign.campaign-img{display:block;padding:0;min-height:0;background:#fff;overflow:hidden}
.campaign.campaign-img img{width:100%;height:100%;object-fit:cover;display:block}
.campaign-grid{align-items:stretch}

/* PAY: campaign cards locked to 425degree spec 1200x800 (3:2) */
.campaign.campaign-img{aspect-ratio:3/2;min-height:0}
.campaign.campaign-img img{width:100%;height:100%;object-fit:cover;object-position:center}

/* PAY: category tiles compact — colored rounded-SQUARE icon (no circle), smaller cards, 8/row desktop */
.shop-category-grid{grid-template-columns:repeat(8,1fr);gap:8px}
.shop-category-grid>a{min-height:104px;padding:12px 6px}
.shop-icon{width:44px;height:44px;margin:2px auto 8px;border-radius:10px;font-size:17px}
.shop-category-grid strong{font-size:9.5px}
.shop-category-grid small{display:none}
@media(max-width:1200px){.shop-category-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.shop-category-grid{grid-template-columns:repeat(4,1fr);gap:6px}.shop-category-grid>a{min-height:92px;padding:10px 4px}.shop-icon{width:38px;height:38px;border-radius:8px;font-size:14px}.shop-category-grid strong{font-size:8.5px}}

/* PAY: category tile = flat pastel card, no icon shape, name bottom-left, round view-button top-right, image slot ready */
.shop-category-grid>a{position:relative;border:0;border-radius:10px;min-height:118px;padding:14px;align-items:flex-start;text-align:left;justify-content:flex-end;overflow:hidden}
.shop-category-grid>a:has(.shop-icon.lime){background:#e8f8bc}
.shop-category-grid>a:has(.shop-icon.blue){background:#e2eff9}
.shop-category-grid>a:has(.shop-icon.lilac){background:#ece9fa}
.shop-category-grid>a:has(.shop-icon.peach){background:#fbe7db}
.shop-category-grid>a:has(.shop-icon.sand){background:#f3ecd9}
.shop-category-grid>a:has(.shop-icon.mint){background:#dff1e8}
.shop-category-grid>a:has(.shop-icon.coral){background:#f6ddd5}
.shop-category-grid>a:has(.shop-icon.smoke){background:#e9ecea}
.shop-category-grid .shop-icon{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;background:transparent!important;font-size:0;display:block}
.shop-category-grid .shop-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.shop-category-grid strong{position:relative;z-index:2;font-size:10.5px}
.shop-category-grid>a::after{content:"→";position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);font-size:12px;font-weight:800;color:#18211b;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.shop-category-grid>a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(33,48,38,.12)}
@media(max-width:760px){.shop-category-grid>a{min-height:96px;padding:10px}.shop-category-grid>a::after{width:20px;height:20px;font-size:10px}}

/* PAY: category tile — image zone stops above the name strip (no overlap) */
.shop-category-grid>a{min-height:128px}
.shop-category-grid .shop-icon{inset:0 0 32px 0}
.shop-category-grid .shop-icon img{object-fit:cover}
.shop-category-grid strong{position:absolute;left:14px;bottom:10px;z-index:2}
@media(max-width:760px){.shop-category-grid>a{min-height:104px}.shop-category-grid .shop-icon{inset:0 0 26px 0}.shop-category-grid strong{left:10px;bottom:8px}}

/* PAY: category tile fine-tune — product perfectly centered, name lower */
.shop-category-grid .shop-icon{inset:6px 0 26px 0}
.shop-category-grid .shop-icon img{object-fit:contain}
.shop-category-grid strong{bottom:7px}
@media(max-width:760px){.shop-category-grid .shop-icon{inset:4px 0 22px 0}.shop-category-grid strong{bottom:5px}}

/* PAY: รูปสินค้าแบบ 425 — พื้นขาว + ขอบขาวรอบเท่ากันทุกใบ (ลงตัว) */
.market-product-grid .card-image-wrap{background:#fff;border:0.5px solid #ececec;border-radius:8px;padding:14%;box-sizing:border-box}
.market-product-grid .product-visual{background:#fff}
.market-product-grid .uploaded-product-image{background:#fff}
@media(max-width:760px){.market-product-grid .card-image-wrap{padding:12%}}

/* PAY: โลโก้มุมบนซ้าย + ชื่อแบรนด์บนกลาง (แบบ 425) */
.card-logo{position:absolute;top:8px;left:8px;z-index:4;background:#fff;border:0.5px solid #ececec;border-radius:6px;padding:2px 5px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;line-height:0}
.card-logo img{height:15px;width:auto;display:block}
.card-brand{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#18211b}
@media(max-width:760px){.card-logo img{height:12px}.card-brand{font-size:10px;top:7px}.card-logo{top:6px;left:6px;padding:2px 4px}}

/* ===================== แถบโปรฯ carousel เลื่อนเอง ===================== */
.promo-carousel{position:relative;max-width:1200px;margin:24px auto;padding:0 12px}
.promo-viewport{overflow:hidden;border-radius:14px}
.promo-track{display:flex;gap:14px;transition:transform .55s cubic-bezier(.33,0,.15,1);will-change:transform}
.promo-slide{flex:0 0 calc(50% - 7px);display:block;border-radius:14px;overflow:hidden;background:#f4f4f6}
.promo-slide img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
@media(max-width:760px){ .promo-slide{flex:0 0 88%} }
.promo-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:1.5rem;line-height:1;color:#222;cursor:pointer;display:flex;align-items:center;justify-content:center}
.promo-arrow.prev{left:20px} .promo-arrow.next{right:20px}
.promo-arrow:hover{background:#fff}
.promo-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.promo-dots button{width:9px;height:9px;border-radius:50%;border:0;background:#d3d3d8;cursor:pointer;padding:0}
.promo-dots button.active{background:#18211b;width:22px;border-radius:5px}

/* ===================== ฮีโร่โปรฯ: แบนเนอร์เต็มใบ ตัด overlay (วน 3 สไลด์) ===================== */
.market-hero{grid-template-columns:1fr !important;max-width:1440px}
#heroSlide{grid-template-columns:1fr !important;min-height:0 !important;aspect-ratio:2.6/1;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;border-radius:10px}
#heroSlide .market-hero-copy,#heroSlide .market-product-stage{display:none !important}