:root {
    --sun: #FF7A1A;
    --sun-deep: #EF5F06;
    --ember: #FF3D2E;
    --gold: #FFB23E;
    --cream: #F5F6F8;
    --cream-2: #FFF1E8;
    --paper: #FFFFFF;
    --ink: #181A1D;
    --ink-2: #565C64;
    --muted: #98A0A8;
    --line: #E7E9EE;
    --clay: #C8692B;
    --clay-soft: #FFF1E8;
    --leaf: #1E9E6A;
    --leaf-soft: #E7F7EF;
    --fd: 'Mitr',sans-serif;
    --fb: 'Prompt',sans-serif;
    --fm: 'Prompt',monospace;
    --sh: 0 1px 2px rgba(20,25,35,.04),0 14px 34px -20px rgba(20,25,35,.20);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html,body {
    margin: 0;
    overflow-x: hidden
}

body {
    font-family: var(--fb);
    color: var(--ink);
    background: var(--cream);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

h1,h2,h3,.disp {
    font-family: var(--fd);
    font-weight: 600;
    line-height: 1.2;
    margin: 0
}

.wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto
}

/* content wrapper (shared design-system hook — shared/css/layout.css loads first).
   Storefront = full-bleed colored bands + inner .wrap centering, so .page adds NO
   padding here (bands must reach the screen edges; .wrap keeps the 1180 rail). */
main.page {
    padding: 0
}

/* ---------- header ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,248,242,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

.hd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 13px
}

.burger {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink)
}

.logo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    margin-right: auto
}

.logo .mark {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 16px -6px var(--sun)
}

.hicon {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-2);
    position: relative
}

.hicon .dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ember);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: grid;
    place-items: center;
    font-family: var(--fb)
}

/* ---------- search ---------- */
.searchband {
    background: linear-gradient(135deg,#FF8A2B,#F0590A);
    padding: 16px 16px 20px;
    color: #fff
}

.sbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    box-shadow: 0 12px 30px -14px rgba(150,60,0,.6)
}

.sbar svg {
    color: var(--sun);
    flex: none
}

.sbar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--fb);
    font-size: 14.5px;
    color: var(--ink);
    background: transparent;
    min-width: 0
}

.sbar input::placeholder {
    color: #C6B4A4
}

.sbar button {
    border: none;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    font-family: var(--fd);
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 11px;
    cursor: pointer;
    flex: none
}

.plats {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px
}

.plats::-webkit-scrollbar {
    display: none
}

.plat {
    flex: none;
    border: 1.5px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap
}

.plat.on {
    background: #fff;
    color: var(--sun-deep);
    border-color: #fff;
    font-weight: 600
}

.shint {
    margin-top: 11px;
    font-size: 12px;
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    gap: 6px
}

.sysbtn.shop {
    background: linear-gradient(150deg,#FF9A3D,#EA5A08)
}

.sysbtn .ic {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 30px;
    opacity: .9
}

.sysbtn .t {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 18px
}

.sysbtn .s {
    font-size: 12px;
    opacity: .92;
    margin-top: 2px
}

/* ---------- section shells ---------- */
section {
    padding: 6px 0 4px
}

.sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px 20px 0px;
    gap: 10px
}

.sechead .lft {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.sechead .emo {
    font-size: 20px
}

.sechead h2 {
    font-size: 18px
}

.sechead .more {
    font-size: 12.5px;
    color: var(--sun-deep);
    font-weight: 500;
    flex: none;
    font-family: var(--fb)
}

.band {
    background: #ffffff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.prow {
    display: flex;
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 16px 14px
}

.prow::-webkit-scrollbar {
    display: none
}

.pgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    background: transparent;
    padding: 2px 16px 16px
}

@media(min-width: 560px) {
    .pgrid {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(min-width: 820px) {
    .pgrid {
        grid-template-columns:repeat(4,1fr)
    }
}

/* world-class e-commerce density on wide desktop (container = .wrap 1180 → ~212px cards) */
@media(min-width: 1280px) {
    .pgrid {
        grid-template-columns:repeat(5,1fr)
    }
}

.pcard {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 10px 12px;
    cursor: pointer;
    position: relative
}

.prow .pcard {
    flex: none;
    width: 150px;
    scroll-snap-align: start
}

.pimg {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    background: repeating-linear-gradient(45deg,#faf3ea,#faf3ea 10px,#f4ebe0 10px,#f4ebe0 20px);
    display: grid;
    place-items: center;
    color: #CBB9A6
}

.pimg .ph-ic {
    width: 30px;
    height: 30px;
    opacity: .7
}

.pbadge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: var(--ember);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 7px;
    font-family: var(--fb)
}

.pfav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: grid;
    place-items: center;
    color: #C9B4A2
}

.ptit {
    font-size: 12.5px;
    color: var(--ink);
    margin-top: 8px;
    line-height: 1.35;
    height: 34px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.pmeta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px
}

.pprice {
    font-family: var(--fd);
    font-weight: 600;
    color: var(--sun-deep);
    font-size: 15px
}

.pold {
    font-size: 11px;
    color: var(--muted);
    text-decoration: line-through
}

.pshop {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--muted)
}

.pshop .tag {
    background: var(--cream-2);
    color: var(--clay);
    padding: 1px 6px;
    border: 0;
    border-radius: 6px;
    font-weight: 500;
    font-size: 10.5px;
    display: inline-block
}

.padd {
    position: absolute;
    bottom: 11px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px var(--sun)
}

/* flash sale */
.flash {
    background: linear-gradient(135deg,#FF7A45 0%,#F5321F 52%,#DA1414 100%);
    color: #fff;
    position: relative
}

.flashhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px
}

.flashhead .ft {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 7px
}

.cd {
    display: flex;
    gap: 5px;
    margin-left: auto;
    align-items: center;
    font-family: var(--fm);
    font-weight: 600
}

.cd b {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.38);
    padding: 4px 9px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    min-width: 30px;
    text-align: center
}

.flash .prow .pcard {
    background: #fff
}

/* categories */
.cats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px 4px;
    padding: 6px 12px 16px;
    background: transparent
}

@media(min-width: 560px) {
    .cats {
        grid-template-columns:repeat(6,1fr)
    }
}

.cat {
    background: transparent;
    padding: 12px 4px 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 16px;
    transition: background .18s,transform .16s;
    opacity: 0;
    animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) forwards
}

@media(hover: hover) {
    .cat:hover {
        background:var(--cream)
    }
}

.cat:active {
    transform: scale(.94)
}

.cat .ci {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    border-radius: 16px;
    background: linear-gradient(150deg,#FFF3E7,var(--cream-2));
    color: var(--sun-deep);
    display: grid;
    place-items: center;
    font-size: 23px;
    box-shadow: 0 7px 16px -9px rgba(239,95,6,.45);
    overflow: hidden;
    position: relative
}

.cat .ci::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 22%,rgba(255,255,255,.6),transparent 55%);
    opacity: .7;
    pointer-events: none
}

.cat .ci img {
    width: 33px;
    height: 33px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
    transition: transform .24s cubic-bezier(.34,1.56,.5,1)
}

.cat span {
    font-size: 11.5px;
    color: var(--ink-2);
    display: block;
    line-height: 1.2;
    font-weight: 500
}

/* trending chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 16px
}

.chip {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px
}

.chip .rank {
    font-family: var(--fd);
    color: var(--ember);
    font-weight: 600
}

/* compare feature */
.compare {
    margin: 6px 16px 16px;
    background: linear-gradient(135deg,#FFF3E8,#FFE9D6);
    border: 1px solid var(--cream-2);
    border-radius: 18px;
    padding: 18px
}

.compare h3 {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px
}

.compare p {
    font-size: 13px;
    color: var(--ink-2);
    margin: 6px 0 12px
}

.cmprow {
    display: flex;
    gap: 8px
}

.cmp {
    flex: 1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center
}

.cmp .p {
    font-family: var(--fd);
    font-weight: 600;
    color: var(--sun-deep);
    font-size: 14px;
    margin: 0;
    line-height: 1.2
}

.cmp.best {
    border-color: var(--leaf);
    background: var(--leaf-soft)
}

.cmp.best .p {
    color: var(--leaf)
}

.cmp small {
    font-size: 10px;
    color: var(--muted);
    display: block
}

@media(min-width: 640px) {
    .impgrid {
        grid-template-columns:repeat(3,1fr)
    }
}

.rateteaser .rh .t {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 17px
}

.rateteaser .rh .s {
    font-size: 12px;
    opacity: .9
}

.addr {
    margin: 6px 16px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px
}

.addr .at {
    font-family: var(--fd);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px
}

.addr .abox {
    background: var(--cream);
    border-radius: 11px;
    padding: 12px 14px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6
}

.addr .copy {
    margin-top: 10px;
    background: var(--cream-2);
    color: var(--clay);
    border: none;
    border-radius: 10px;
    padding: 9px 14px;
    font-family: var(--fb);
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer
}

.svtoggle {
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px;
    box-shadow: var(--sh);
}

.svt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink-2);
    transition: transform .15s,background .18s,box-shadow .18s
}

.svt .svt-ic {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--cream-2);
    color: var(--sun-deep);
    transition: transform .18s,background .18s
}

.svt .svt-ic svg {
    width: 20px;
    height: 20px
}

.svt .svt-tx {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0
}

.svt .svt-tx b {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em
}

.svt .svt-tx small {
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.svt.ship .svt-ic {
    background: #FDEBE7;
    color: var(--ember)
}

.svt.on {
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    box-shadow: 0 12px 26px -14px var(--sun)
}

.svt.on .svt-ic {
    background: rgba(255,255,255,.24);
    color: #fff
}

.svt.on .svt-tx small {
    color: rgba(255,255,255,.9)
}

@media(hover: hover) {
    .svt:not(.on):hover {
        background:var(--cream)
    }

    .svt:not(.on):hover .svt-ic {
        transform: scale(1.06)
    }
}

.svt:active {
    transform: scale(.97)
}

.guide-all {
    display: flex;
    align-items: center;
    gap: 13px;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(239,95,6,.75);
    transition: transform .16s,box-shadow .16s
}

@media(hover: hover) {
    .guide-all:hover {
        transform:translateY(-3px);
        box-shadow: 0 18px 34px -14px rgba(239,95,6,.7)
    }
}

.guide-all:active {
    transform: scale(.985)
}

.guide-all .ga-ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,.22);
    display: grid;
    place-items: center;
    flex: none
}

.guide-all .ga-ic svg {
    width: 24px;
    height: 24px
}

.guide-all .ga-tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.guide-all .ga-tx b {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.2
}

.guide-all .ga-tx small {
    font-size: 11.5px;
    color: rgba(255,255,255,.92);
    line-height: 1.4
}

.guide-all .ga-arrow {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center
}

.guide-all .ga-arrow svg {
    width: 18px;
    height: 18px
}

/* faq */
.faq {
    padding: 6px 0 20px
}

.qa {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    margin-bottom: 9px;
    overflow: hidden
}

.qa .q {
    padding: 14px 16px;
    font-family: var(--fd);
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer
}

.qa .q .cv {
    transition: .2s;
    flex: none;
    color: var(--sun)
}

.qa .a {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: .25s;
    font-size: 13px;
    color: var(--ink-2)
}

.qa.open .a {
    max-height: 200px;
    padding: 0 16px 14px
}

.qa.open .q .cv {
    transform: rotate(180deg)
}

/* footer */
footer {
    background: #2A2016;
    color: #EAD9C7;
    padding: 26px 16px 30px;
    margin-top: 12px
}

.fcta {
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    margin-bottom: 22px
}

.fcta .t {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 18px;
    color: #fff
}

.fcta .s {
    font-size: 13px;
    color: rgba(255,255,255,.92);
    margin: 4px 0 12px
}

.fcta .b {
    display: inline-block;
    background: #fff;
    color: var(--sun-deep);
    font-family: var(--fd);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 26px;
    border-radius: 12px
}

.fcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 14px;
    font-size: 13px
}

.fcols h4 {
    font-family: var(--fd);
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    margin: 0 0 8px
}

.fcols a {
    display: block;
    color: #C3AF9C;
    margin: 5px 0
}

.fbar {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 22px;
    padding-top: 16px;
    font-size: 11.5px;
    color: #9A8672;
    text-align: center;
    font-family: var(--fm)
}

/* section anchor spacing under sticky header */
#shop,#import {
    scroll-margin-top: 64px
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none!important;
        animation: none!important
    }
}

:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: 2px
}

/* desktop niceties */
@media(min-width: 820px) {
    .searchband,.systems,.sechead,.chips,.faq {
        margin-left:auto;
        margin-right: auto
    }

    .sbar {
        /* max-width:720px; */
    }
}

/* ============ motion / liveliness ============ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes floaty {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@keyframes bpulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

@keyframes shine {
    0% {
        transform: translateX(-130%) skewX(-18deg)
    }

    60%,100% {
        transform: translateX(260%) skewX(-18deg)
    }
}

@keyframes gshift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes bob {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-3px) rotate(-7deg)
    }
}

@keyframes glowband {
    0%,100% {
        box-shadow: inset 0 0 0 rgba(255,255,255,0)
    }

    50% {
        box-shadow: inset 0 0 44px rgba(255,255,255,.2)
    }
}

@keyframes floatblob {
    0%,100% {
        transform: translate(0,0)
    }

    33% {
        transform: translate(14px,-16px)
    }

    66% {
        transform: translate(-12px,10px)
    }
}

/* scroll reveal */
.reveal {
    opacity: 0
}

.reveal.in {
    animation: fadeUp .6s cubic-bezier(.2,.7,.3,1) forwards
}

/* animated search band + floating blobs */
.searchband {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,#FF8A2B,#F0590A,#FF7A1A,#F0590A);
    background-size: 300% 300%;
    animation: gshift 11s ease infinite
}

.searchband .blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    filter: blur(3px);
    animation: floatblob 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 0
}

.searchband .wrap {
    position: relative;
    z-index: 1
}

.bannerwrap {
    padding: 14px 0 4px
}

.bside {
    display: none
}

/* โปรโมชันข้าง: มือถือซ่อน · โชว์เฉพาะ desktop (ดู shopping.desktop.css) */
.banner {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 1180/460
}

.bslide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease
}

.bslide.on {
    opacity: 1
}

.bimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2
}

.bvid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    background: #000
}

.bplay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.48);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .15s,background .15s;
    box-shadow: 0 6px 18px -4px rgba(0,0,0,.5)
}

.bplay:active {
    transform: translate(-50%,-50%) scale(.9)
}

.bplay svg {
    width: 27px;
    height: 27px;
    margin-left: 3px
}

.bvlabel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-family: var(--fd);
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 8px
}

@media(hover: hover) {
    .bplay:hover {
        background:var(--ember)
    }
}

.bph {
    width: 100%;
    height: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(45deg,#FFEEDD,#FFEEDD 14px,#FFE4CE 14px,#FFE4CE 28px)
}

.bph::after {
    content: "" attr(data-label) "  ·  1600×600";
    font-family: var(--fm);
    font-size: 12px;
    color: #C89A6E;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 12px
}

.bph .sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
    background-size: 220% 100%;
    animation: shimmer 2.6s linear infinite
}

.bdots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 4
}

.bdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(200,150,90,.5);
    cursor: pointer;
    transition: .25s
}

.bdot.on {
    width: 22px;
    border-radius: 4px;
    background: var(--sun)
}

/* promo slide (เทียบราคา) ในแบนเนอร์ */
.bpromo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 18px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(130deg,#FF8A2B,#EF5F06 58%,#C6420A);
    overflow: hidden
}

.bpromo::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    top: -58px;
    right: -38px;
    pointer-events: none
}

.bpromo>* {
    position: relative;
    z-index: 1
}

.bpromo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: var(--fd);
    font-weight: 500;
    font-size: 11px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.34);
    padding: 4px 11px;
    border-radius: 99px
}

.bpromo-eyebrow svg {
    width: 13px;
    height: 13px
}

.bpromo b {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: .2px
}

.bpromo-sub {
    font-size: 11px;
    color: rgba(255,255,255,.9);
    line-height: 1.45;
    max-width: 96%
}

.bpromo-cmp {
    display: flex;
    gap: 6px;
    margin-top: 2px
}

.bpc {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 10px;
    padding: 7px 4px;
    text-align: center
}

.bpc small {
    display: block;
    font-size: 9px;
    color: rgba(255,255,255,.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.bpc .p {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 13.5px;
    margin: 2px 0 0;
    line-height: 1.2
}

.bpc.best {
    background: rgba(30,158,106,.92);
    border-color: rgba(255,255,255,.55)
}

/* product placeholder shimmer + hover lift */
.pimg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
    background-size: 220% 100%;
    animation: shimmer 2.4s linear infinite;
    pointer-events: none
}

.pimg .ph-ic {
    position: relative;
    z-index: 1
}

.pcard {
    transition: transform .18s ease,box-shadow .18s ease
}

@media(hover: hover) {
    .pcard:hover {
        transform:translateY(-5px);
        box-shadow: 0 18px 32px -18px rgba(150,80,20,.55);
        z-index: 2
    }
}

.padd {
    transition: transform .14s ease
}

.padd:active {
    transform: scale(.82)
}

.pfav {
    transition: transform .15s,color .15s
}

@media(hover: hover) {
    .pcard:hover .pfav {
        color:var(--ember)
    }
}

/* real product image + skeleton (Just One API) */
.pimg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transition: opacity .35s
}

.pimg img.ok {
    opacity: 1
}

.pthb {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 5px
}

.pfav.on {
    color: var(--ember)
}

.pcard.skel {
    pointer-events: none
}

.pcard.skel .pimg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite
}

.pcard.skel .ptit {
    background: #efe4d6;
    color: transparent;
    border-radius: 4px
}

.pcard.skel .pprice {
    color: #e6d8c8
}

.needapi {
    width: calc(100% - 32px);
    box-sizing: border-box;
    flex: none;
    margin: 2px 16px 14px;
    padding: 20px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
    background: var(--cream);
    border: 1px dashed var(--line);
    border-radius: 12px;
    cursor: pointer
}

.pgrid .needapi {
    grid-column: 1/-1;
    width: auto;
    margin: 14px 16px
}

.cat .ci {
    transition: transform .2s,box-shadow .2s
}

@media(hover: hover) {
    .cat:hover .ci {
        transform:translateY(-4px);
        box-shadow: 0 12px 22px -10px rgba(239,95,6,.55)
    }

    .cat:hover .ci img {
        transform: scale(1.16) rotate(-5deg)
    }
}

.chip {
    transition: transform .15s,border-color .15s
}

@media(hover: hover) {
    .chip:hover {
        transform:translateY(-2px);
        border-color: var(--sun)
    }
}

/* flash sale liveliness */
.flash {
    animation: glowband 2.8s ease-in-out infinite
}

.flashhead .ft .z {
    display: inline-block;
    animation: bpulse 1s ease-in-out infinite;
    transform-origin: center
}

.sysbtn.shop {
    background: #EA5A08
}

.sysbtn.shop .ov {
    background: linear-gradient(150deg,rgba(255,154,61,.82),rgba(234,90,8,.92))
}

.sysbtn>.ic,.sysbtn>.t,.sysbtn>.s {
    position: relative;
    z-index: 2
}

.sysbtn .ic {
    animation: floaty 3.6s ease-in-out infinite
}

@media(hover: hover) {
    .sysbtn:hover {
        transform:translateY(-4px) scale(1.012);
        box-shadow: 0 20px 40px -18px rgba(120,60,10,.6)
    }

    .sysbtn:hover::after {
        animation: shine 1s ease
    }
}

.fcta .b {
    transition: transform .15s
}

@media(hover: hover) {
    .fcta .b:hover {
        transform:scale(1.04)
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none!important
    }

    .reveal {
        opacity: 1!important
    }

    .searchband {
        background: linear-gradient(120deg,#FF8A2B,#F0590A)
    }
}

.compare,.rateteaser,.warncard,.addr {
    width: auto;
    max-width: none
}

.ptdrop {
    position: fixed;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 44px -14px rgba(80,40,10,.42);
    z-index: 200;
    display: none;
    overflow: hidden;
    min-width: 210px
}

.ptdrop.open {
    display: block;
    animation: ptd .16s ease
}

@keyframes ptd {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ptdrop.lang {
    min-width: 158px;
    padding: 5px
}

.ptdrop.lang button {
    display: block;
    width: 100%;
    border: none;
    background: none;
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--ink);
    padding: 11px 13px;
    border-radius: 9px;
    cursor: pointer;
    text-align: left
}

.ptdrop.lang button.on {
    background: var(--cream-2);
    color: var(--sun-deep);
    font-weight: 500
}

.udhead {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 15px 13px;
    background: linear-gradient(135deg,var(--cream-2),#fff)
}

.uav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    box-shadow: var(--sh)
}

.uav svg {
    width: 100%;
    height: 100%;
    display: block
}

.udhead .un {
    font-family: var(--fd);
    font-weight: 500;
    font-size: 14px
}

.udhead .ue {
    font-size: 11px;
    color: var(--muted)
}

.uwallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 12px 8px;
    padding: 11px 13px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px
}

.uwallet .wl {
    font-size: 11px;
    color: var(--ink-2)
}

.uwallet .wv {
    font-family: var(--fd);
    font-weight: 600;
    color: var(--sun-deep);
    font-size: 17px;
    line-height: 1.1
}

.uwallet button {
    border: none;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    font-family: var(--fb);
    font-size: 12px;
    padding: 8px 13px;
    border-radius: 9px;
    cursor: pointer;
    flex: none
}

.uitems {
    padding: 2px 6px
}

.uitems button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    border: none;
    background: none;
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--ink);
    padding: 11px 12px;
    border-radius: 9px;
    cursor: pointer;
    text-align: left
}

.uitems button svg {
    width: 17px;
    height: 17px;
    color: var(--ink-2);
    flex: none
}

.uitems button:active {
    background: var(--cream-2)
}

.ulogout {
    display: flex;
    align-items: center;
    gap: 11px;
    width: calc(100% - 12px);
    border: none;
    background: none;
    font-family: var(--fb);
    font-size: 13.5px;
    color: var(--ember);
    padding: 12px;
    margin: 4px 6px 8px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    text-align: left
}

.ulogout svg {
    width: 17px;
    height: 17px;
    color: var(--ember);
    flex: none
}

.hicon.hasav {
    padding: 0
}

.hicon.hasav .uav {
    width: 30px;
    height: 30px;
    box-shadow: none
}

.ptov {
    position: fixed;
    inset: 0;
    background: rgba(30,18,8,.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 210
}

.ptov.open {
    display: flex
}

.ptsheet {
    background: #fff;
    width: 100%;
    max-width: 480px;
    border-radius: 22px 22px 0 0;
    padding: 18px 18px 24px;
    animation: ptup .25s ease
}

@keyframes ptup {
    from {
        transform: translateY(40px);
        opacity: .5
    }

    to {
        transform: none;
        opacity: 1
    }
}

.ptsheet h3 {
    font-family: var(--fd);
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    margin: 0 0 14px
}

.ptsheet input,.ptsheet select,.ptsheet textarea {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    padding: 11px 13px;
    font-family: var(--fb);
    font-size: 14px;
    margin-bottom: 10px;
    background: var(--cream);
    color: var(--ink);
    outline: none
}

.ptsheet input:focus,.ptsheet select:focus,.ptsheet textarea:focus {
    border-color: var(--sun)
}

.ptsheet .bigbtn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 13px;
    font-family: var(--fd);
    font-weight: 500;
    font-size: 15px;
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    cursor: pointer
}

.ptsheet .ghostbtn {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 11px;
    font-family: var(--fb);
    font-size: 14px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    margin-top: 9px
}

.leofab {
    position: fixed;
    right: 16px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 30px -8px rgba(200,90,10,.5);
    z-index: 150;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 2px solid #fff;
    animation: fabIn .4s ease
}

@keyframes fabIn {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.leofab svg {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.leofab img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
    display: block
}

.leofab .leodot {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    background: var(--leaf);
    border: 2.5px solid #fff;
    border-radius: 50%;
    z-index: 3;
    animation: leoblink 1.2s ease-in-out infinite
}

.leofab.has-msg .leodot {
    display: block
}

@keyframes leoblink {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .35;
        transform: scale(.72)
    }
}

.ptnavov {
    position: fixed;
    inset: 0;
    background: rgba(30,18,8,.5);
    z-index: 220;
    opacity: 0;
    visibility: hidden;
    transition: .25s
}

.ptnavov.open {
    opacity: 1;
    visibility: visible
}

.ptnav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 330px;
    background: #fff;
    z-index: 230;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px -10px rgba(0,0,0,.4)
}

.ptnav.open {
    transform: none
}

.ptnav-hd {
    background: linear-gradient(135deg,var(--sun),var(--sun-deep));
    color: #fff;
    padding: 18px 15px 15px;
    display: flex;
    align-items: center;
    gap: 11px
}

.ptnav-hd .mk {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255,255,255,.22);
    display: grid;
    place-items: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 18px;
    flex: none
}

.ptnav-hd .bd {
    flex: 1;
    font-family: var(--fd);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.1
}

.ptnav-hd .bd span {
    font-size: 10.5px;
    font-weight: 400;
    opacity: .9;
    display: block;
    font-family: var(--fb)
}

.ptnav-hd .cx {
    border: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    display: grid;
    place-items: center;
    flex: none
}

.ptnav-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 20px
}

.ptnav-sec {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    padding: 13px 12px 5px;
    letter-spacing: .03em
}

.ptnav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-family: var(--fb)
}

.ptnav a:active {
    background: var(--cream-2)
}

.ptnav a svg {
    width: 19px;
    height: 19px;
    color: var(--sun-deep);
    flex: none
}

/* หัวข้อ section (จริง: .sechead > .lft > .emo + h2): ไอคอนใส่ชิปพื้นส้มอ่อน + แท่ง accent */
.sechead .lft {
    display: flex;
    align-items: center;
    gap: 9px
}

.sechead .lft::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 99px;
    background: linear-gradient(180deg,var(--sun),var(--sun-deep));
    flex: none
}

.sechead .emo {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #FFF0E2;
    color: var(--sun-deep);
    flex: none
}

.sechead h2 {
    letter-spacing: .1px
}

.sechead .more {
    padding: 5px 11px;
    border-radius: 99px;
    background: #FFF4E9;
    transition: background .15s,color .15s
}

@media(hover: hover) {
    .sechead .more:hover {
        background:#FFE4CB;
        color: var(--sun)
    }
}

/* ช่องค้นหา (จริง: .sbar): focus ring ชัดเจน (a11y) */
.sbar {
    transition: box-shadow .18s ease
}

.sbar:focus-within {
    box-shadow: 0 0 0 3px rgba(255,255,255,.55),0 12px 30px -14px rgba(150,60,0,.6)
}

/* banner: ขอบไล่แสง + เงาลึกขึ้นให้ดูพรีเมียม */
.banner {
    box-shadow: 0 16px 34px -16px rgba(150,70,10,.55),inset 0 0 0 1px rgba(255,255,255,.28)
}

/* การ์ดสินค้า (จริง: .pcard/.ptit/.pprice/.pshop): ราคาสีธีมเด่นขึ้น ชื่อสินค้าอ่านสบายขึ้น */
.pcard .pprice {
    color: var(--sun-deep);
    font-size: 15px;
    letter-spacing: .1px
}

.pcard .ptit {
    line-height: 1.42
}

.pcard .pshop {
    opacity: .85
}

/* ชิปแพลตฟอร์ม + ชิปเทรนด์ (จริง: .plat / .chip จาก JS): hover ติดธีม + กดยุบ */
.plat,.chip {
    transition: background .15s,border-color .15s,color .15s,transform .12s
}

@media(hover: hover) {
    .plat:hover,.chip:hover {
        background:#FFF0E2;
        border-color: var(--sun);
        color: var(--sun-deep)
    }
}

.plat:active,.chip:active {
    transform: scale(.95)
}

/* การ์ดเปรียบเทียบ (จริง: .cmp): ยกรับ hover */
.cmp {
    transition: transform .16s ease,box-shadow .16s ease
}

@media(hover: hover) {
    .cmp:hover {
        transform:translateY(-4px);
        box-shadow: 0 16px 28px -16px rgba(150,80,20,.5)
    }
}

/* flash sale: เรืองแสงหายใจเบา ๆ ให้รู้สึกสด */
@keyframes xglow {
    0%,100% {
        box-shadow: 0 10px 26px -14px rgba(224,31,31,.55)
    }

    50% {
        box-shadow: 0 14px 36px -12px rgba(224,31,31,.8)
    }
}

.flash {
    animation: xglow 3.2s ease-in-out infinite
}

/* FAQ (จริง: .qa): hover ขอบติดสีธีม */
.qa {
    transition: border-color .15s
}

@media(hover: hover) {
    .qa:hover {
        border-color:#F3C9A2
    }
}

/* แถวเลื่อนแนวนอน (จริง: .prow): scrollbar เส้นบางสีธีมบนเดสก์ท็อป */
.prow {
    scrollbar-width: thin;
    scrollbar-color: #F0B27E transparent
}

.prow::-webkit-scrollbar {
    height: 6px
}

.prow::-webkit-scrollbar-thumb {
    background: #F0B27E;
    border-radius: 99px
}

.prow::-webkit-scrollbar-track {
    background: transparent
}

/* a11y: เส้น focus ชัดเจนเมื่อใช้คีย์บอร์ด */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {
    outline: 2.5px solid var(--sun);
    outline-offset: 2px;
    border-radius: 8px
}

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน */
@media(prefers-reduced-motion:reduce) {
    .flash {
        animation: none
    }

    .plat,.chip,.cmp,.sbar,.sechead .more {
        transition: none
    }
}

.bnavbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(25,12,2,.38);
    backdrop-filter: blur(3px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 6;
    transition: background .15s,transform .15s
}

.bnavbtn svg {
    width: 18px;
    height: 18px
}

.bnavbtn.prev {
    left: 10px
}

.bnavbtn.next {
    right: 10px
}

@media(hover: hover) {
    .bnavbtn:hover {
        background:rgba(240,89,10,.85)
    }
}

.bnavbtn:active {
    transform: translateY(-50%) scale(.88)
}