/* Shops — /shops (directory) and /shops/{uuid}/{tab} (one shop's storefront: * hero (+ the shop's banners and colour from แต่งหน้าร้าน), tab bar, promo codes, * home rails, product filters + drawer, about). last13's page set on the theme-v2 * tokens; every class is sf-shops-*. Markup: storefront/shops/*. * Behaviour: js/pkg-shops.js. */ /* ---------- Directory ---------- */ .filter-tab b, .sf-shops-facets b { font: 700 10px var(--v2-mono); opacity: .7; margin-left: 4px; } .sf-shops-tile-id { min-width: 0; padding-bottom: 4px; } .sf-shops-tile-id h3 { padding-bottom: 2px !important; } .sf-shops-tile-spec { display: block; font-size: 11px; color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-shop-tile-badge.sf-shops-tile-review { color: #ffcf00; border-color: #ffcf0066; } .sf-shop-tile-stats dd.sf-shops-muted { color: var(--v2-muted); } .sf-shop-tile-stats dd .icon.sf-shops-star-off { color: #ffffff40; fill: none; } .sf-shop-tile-stats dd.sf-shops-ok { color: #3ee8a0; } .sf-shops-tile-since { display: flex; align-items: center; gap: 6px; margin: -6px 20px 16px; font-size: 11px; color: var(--v2-muted); } .sf-shops-tile-since .icon { width: 13px; height: 13px; } /* ---------- Hero ---------- */ .sf-shops-hero { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(260px, 340px); gap: 22px 26px; align-items: center; margin-bottom: 0; } .sf-shops-hero-logo { position: relative; align-self: start; } .sf-shops-hero-logo > img, .sf-shops-hero-logo > span { width: 104px; height: 104px; display: grid; place-items: center; object-fit: cover; background: #0d0719; border: 1px solid #00f0ff59; box-shadow: 0 12px 26px #000b; font: 800 38px var(--v2-display); color: var(--v2-accent); } .sf-shops-hero-logo em { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; white-space: nowrap; font: 700 10px/1.2 var(--v2-mono); font-style: normal; letter-spacing: .5px; color: #07170f; background: #3ee8a0; box-shadow: 0 4px 12px #000a; } .sf-shops-hero-logo em.is-review { color: #1b1300; background: #ffcf00; font-family: 'Noto Sans Thai', sans-serif; } .sf-shops-hero-logo em .icon { width: 11px; height: 11px; stroke-width: 3; } .sf-shops-hero-main { min-width: 0; } .sf-shops-hero-main h1 { margin: 6px 0 4px; font: 900 clamp(24px, 3.2vw, 38px)/1.15 'Noto Sans Thai', var(--v2-display); word-break: break-word; } .sf-shops-hero-bio { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #cfc6dd; white-space: pre-line; } .sf-shops-hero-bio .text-link { font-size: 12px; color: var(--v2-accent); } .sf-shops-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; font-size: 12.5px; color: var(--v2-muted); } .sf-shops-facts li { display: inline-flex; align-items: center; gap: 6px; } .sf-shops-facts .icon { width: 15px; height: 15px; color: var(--v2-accent); } .sf-shops-facts .icon.is-star { color: #ffcf00; fill: #ffcf00; } .sf-shops-facts .icon.is-star-off { color: #ffffff4d; } .sf-shops-facts b { font: 700 14px var(--v2-mono); color: var(--v2-text); } /* the head's right column = ONE tidy stack (2026-10-11, owner on the search + a tall pill + a tiny link beside it: "เหมือนต้องวาง ตำแหน่งให้ดีกว่านี้"): the search and the main button the same width and height (44px) and the same corners, the report link small under them on the right */ /* Same day, the three made nicer (owner: "ช่วยจัดการทำ 3 อันนี้ จัดทำให้ดูดีกว่า" — a grey box split by a line, a thin outline pill, a stray grey link): the search = ONE field (border tinted by the shop colour, a ring in it while typing, the native × redrawn) with the submit as a key INSIDE it (shop colour, fills on hover); the chat button = the head's filled main button (button-primary, like the owner's จัดการร้านค้า); the report link = a quiet chip that turns red on hover. Corners follow the shop's BUTTON shape (the theme's, or แต่งหน้าร้าน → รูปทรง). :not(#sf-hs) out-ranks the theme / light-page rules for .sf-search-inline. Check `node ai_test/scripts/hero-side-look.mjs `. */ .sf-shops-hero-side { --hs-h: 46px; --hs-c: var(--shop-accent, var(--shop-c, var(--sf-action, #00f0ff))); --hs-r: var(--t-btn-r, var(--t-r, 0px)); --hs-field: #00000038; display: grid; gap: 10px; align-self: center; } body:is([data-shop-btn="square"], [data-shop-btn="notch"], [data-shop-btn="slant"]) .sf-shops-hero-side { --hs-r: 0px; } body[data-shop-btn="round"] .sf-shops-hero-side { --hs-r: 10px; } body[data-shop-btn="pill"] .sf-shops-hero-side { --hs-r: 999px; } body[data-shop-tone="light"] .sf-shops-hero-side { --hs-field: #fff; } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline { display: flex; align-items: center; gap: 2px; width: 100%; min-width: 0; height: var(--hs-h); padding: 4px; overflow: hidden; background: var(--hs-field); border: 1.5px solid color-mix(in srgb, var(--hs-c) 30%, var(--sf-border-strong, #ffffff2e)); border-radius: var(--hs-r); box-shadow: inset 0 1px 3px #0000000f; transition: border-color .15s ease, box-shadow .15s ease; } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline:focus-within { border-color: var(--hs-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-c) 22%, transparent); } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline .sf-input { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; padding: 0 4px 0 14px; font-size: 14px; color: var(--v2-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; } .sf-shops-hero-side .sf-search-inline .sf-input::placeholder { color: var(--v2-muted); opacity: .85; } /* the browser's own × (blue on Chrome) as a soft round one; the shop colour on hover */ .sf-shops-hero-side .sf-search-inline .sf-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0 2px 0 6px; cursor: pointer; opacity: .55; background: var(--v2-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='18' height='18' fill='%23fff'/%3E%3Cpath d='M6.3 6.3l5.4 5.4M11.7 6.3l-5.4 5.4' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='9' cy='9' r='9' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='18' height='18' fill='%23fff'/%3E%3Cpath d='M6.3 6.3l5.4 5.4M11.7 6.3l-5.4 5.4' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='9' cy='9' r='9' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat; } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 100%; min-width: 0; margin: 0; padding: 0; color: var(--hs-c); background: color-mix(in srgb, var(--hs-c) 15%, transparent); border: 0; border-radius: max(0px, calc(var(--hs-r) - 4px)); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease; } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button .icon { width: 18px; height: 18px; stroke-width: 2.4; } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button:focus-visible { color: var(--shop-c-ink, #07070d); background: var(--hs-c); } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--hs-field), inset 0 0 0 4px var(--hs-c); } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button:active { transform: scale(.93); } .sf-shops-hero-actions { display: grid; gap: 8px; } .sf-shops-hero-actions .button { gap: 9px; width: 100%; height: var(--hs-h); min-height: 0; padding-block: 0; justify-content: center; font-size: 15px; font-weight: 700; } .sf-shops-hero-actions .button .icon { width: 18px; height: 18px; } .sf-shops-report-link { display: inline-flex; align-items: center; justify-self: end; gap: 6px; margin-right: -2px; padding: 5px 10px; font-size: 12.5px; line-height: 1.3; color: var(--v2-muted); border-radius: var(--hs-r); transition: color .15s ease, background-color .15s ease; } .sf-shops-report-link:focus-visible { color: var(--sf-danger, #ff4757); background: color-mix(in srgb, var(--sf-danger, #ff4757) 11%, transparent); } .sf-shops-report-link:focus-visible { outline: 2px solid var(--sf-danger, #ff4757); outline-offset: 1px; } .sf-shops-report-link .icon { width: 14px; height: 14px; } /* hover looks for a mouse only (a tapped link keeps :hover on a phone) */ @media (hover: hover) and (pointer: fine) { .sf-shops-hero-side:not(#sf-hs) .sf-search-inline:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--hs-c) 60%, transparent); } .sf-shops-hero-side .sf-search-inline .sf-input::-webkit-search-cancel-button:hover { opacity: 1; background: var(--hs-c); } .sf-shops-hero-side:not(#sf-hs) .sf-search-inline button:hover { color: var(--shop-c-ink, #07070d); background: var(--hs-c); } .sf-shops-report-link:hover { color: var(--sf-danger, #ff4757); background: color-mix(in srgb, var(--sf-danger, #ff4757) 11%, transparent); } } /* ---------- Tab bar (sticky on desktop; mini identity once the hero is gone) ---------- */ .sf-shops-tabbar { --top: 0px; position: relative; z-index: 20; display: flex; align-items: stretch; gap: 14px; margin: 22px 0 26px; background: #0a0014e6; backdrop-filter: blur(14px); border-bottom: 1px solid var(--v2-line); } .sf-shops-tabs { flex: 1; min-width: 0; margin: 0; border-bottom: 0; } .sf-shops-tabs a { display: inline-flex; align-items: center; gap: 7px; } .sf-shops-tabs .icon { width: 15px; height: 15px; } .sf-shops-tabbar-id { display: none; align-items: center; gap: 10px; max-width: 260px; padding-right: 14px; border-right: 1px solid var(--v2-line); } .sf-shops-tabbar-id img, .sf-shops-tabbar-id span { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; object-fit: cover; border: 1px solid #00f0ff59; font: 800 13px var(--v2-display); color: var(--v2-accent); background: #0d0719; } .sf-shops-tabbar-id b { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 901px) { .sf-shops-tabbar { position: sticky; top: var(--top); } .sf-shops-tabbar.is-stuck .sf-shops-tabbar-id { display: flex; } } /* Scroll target after an in-place change (pkg-shops.js), and the dim while the Livewire page is fetching (wire:loading.delay.class="is-busy"). */ .sf-shops-anchor { display: block; height: 0; } .sf-shops-body, .sf-shops-dir .sf-shop-grid { transition: opacity .15s ease; } .sf-shops-page.is-busy .sf-shops-body, .sf-shops-dir.is-busy .sf-shop-grid { opacity: .55; } /* ---------- Section heads + rails ---------- */ .sf-shops-sec { margin-bottom: 34px; } .sf-shops-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; } .sf-shops-sec-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 16px/1.3 'Noto Sans Thai', var(--v2-display); letter-spacing: .3px; } .sf-shops-sec-head h2 .icon { width: 18px; height: 18px; color: var(--v2-accent); } .sf-shops-sec-head .text-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-muted); } .sf-shops-sec-head .text-link:hover { color: var(--v2-accent); } .sf-shops-sec-head .text-link .icon { width: 14px; height: 14px; } .sf-shops-sec-note { font-size: 12px; color: var(--v2-muted); } .sf-shops-arrows { display: inline-flex; gap: 6px; } .sf-shops-sec-head .text-link + .sf-shops-arrows { margin-left: 0; } .sf-shops-sec-head h2 + .sf-shops-arrows { margin-left: auto; } .sf-shops-arrows button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ffffff24; color: var(--v2-muted); transition: color .2s, border-color .2s; } .sf-shops-arrows button:hover { color: var(--v2-accent); border-color: #00f0ff66; } .sf-shops-arrows button[disabled] { opacity: .35; pointer-events: none; } .sf-shops-arrows button[hidden] { display: none; } .sf-shops-arrows .icon { width: 15px; height: 15px; } .sf-shops-strip-products .product-card:nth-child(even) { padding-top: 0; } /* ---------- Promo codes ---------- */ .sf-shops-promos { margin-bottom: 30px; padding: 16px 18px 12px; border: 1px dashed #00f0ff4d; background: linear-gradient(180deg, #00f0ff0d, transparent 70%); } .sf-shops-promos .sf-shops-sec-head { margin-bottom: 12px; } .sf-shops-promo-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #00f0ff55 transparent; } .sf-shops-promo { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left; color: inherit; background: var(--v2-surface-2); border: 1px dashed #00f0ff55; transition: transform .2s, border-color .2s, box-shadow .2s; } .sf-shops-promo:hover { transform: translateY(-2px); border-color: var(--v2-accent); box-shadow: 0 8px 22px #00f0ff1f; } .sf-shops-promo strong { font: 800 16px/1.2 'Noto Sans Thai', var(--v2-display); color: var(--v2-pink); } .sf-shops-promo-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-shops-promo small { font-size: 10.5px; color: var(--v2-muted); } .sf-shops-promo-code { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 5px 8px; border: 1px dashed #00f0ff66; background: #00f0ff0f; } .sf-shops-promo-code code { font: 700 13px var(--v2-mono); letter-spacing: 1px; color: var(--v2-accent); } .sf-shops-promo-code .icon { width: 14px; height: 14px; color: var(--v2-accent); } .sf-shops-promo.is-copied { border-color: #3ee8a0; } .sf-shops-promo.is-copied .sf-shops-promo-code { border-color: #3ee8a0; background: #3ee8a014; } /* ---------- Home: categories ---------- */ .sf-shops-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; } .sf-shops-cat { --c: var(--v2-accent); position: relative; display: flex; align-items: center; gap: 16px; padding: 14px; overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--v2-surface); border: 1px solid #ffffff1a; transition: border-color .2s, transform .25s; } .sf-shops-cat:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-2px); } .sf-shops-cat-art { flex: 0 0 132px; height: 72px; display: grid; place-items: center; color: var(--v2-muted); } .sf-shops-cat-art .icon { width: 30px; height: 30px; } .sf-shops-cat-art img.is-logo { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px #000a); } .sf-shops-fan { position: relative; width: 112px; height: 72px; } .sf-shops-fan img { position: absolute; top: 2px; width: 48px; height: 67px; object-fit: cover; border: 1px solid #ffffff33; box-shadow: 0 6px 12px #000b; transition: transform .25s; } .sf-shops-fan img:nth-child(1) { left: 6px; transform: rotate(-12deg); } .sf-shops-fan img:nth-child(2) { left: 32px; z-index: 1; } .sf-shops-fan img:nth-child(3) { left: 58px; transform: rotate(12deg); } .sf-shops-cat:hover .sf-shops-fan img { transform: translateY(-3px); } .sf-shops-cat-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sf-shops-cat-body b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-shops-cat-body small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; color: var(--v2-muted); } .sf-shops-cat-body em { font: 700 9.5px var(--v2-mono); font-style: normal; padding: 1px 5px; border: 1px solid #ffffff2e; color: #d9d0e6; } .sf-shops-cat-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--c); } .sf-shops-cat-go .icon { width: 13px; height: 13px; } /* ---------- Home: shop news ---------- */ .sf-shops-news { grid-auto-columns: minmax(280px, 1fr); } @media (min-width: 1200px) { .sf-shops-news { grid-auto-columns: calc((100% - 40px) / 3); } } .sf-shops-news-card { display: flex; flex-direction: column; overflow: hidden; } .sf-shops-news-art { aspect-ratio: 21 / 9; display: grid; place-items: center; background: linear-gradient(135deg, #1c1230, #0d0719); color: var(--v2-accent); overflow: hidden; } .sf-shops-news-art img { width: 100%; height: 100%; object-fit: cover; } .sf-shops-news-art .icon { width: 38px; height: 38px; opacity: .45; } .sf-shops-news-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; } .sf-shops-news-body b { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-shops-news-body b .is-pin { width: 13px; height: 13px; margin-right: 5px; color: #ffcf00; vertical-align: -1px; } .sf-shops-news-body small { font-size: 12px; color: var(--v2-muted); line-height: 1.6; } .sf-shops-news-body time { display: inline-flex; align-items: center; gap: 5px; font: 400 11px var(--v2-mono); color: var(--v2-muted); } .sf-shops-news-body time .icon { width: 12px; height: 12px; } /* ---------- List tabs: filters ---------- */ .sf-shops-filters { margin-bottom: 18px; } .sf-shops-toolbar { margin-bottom: 14px; } .sf-shops-toolbar .filter-tabs { order: 0; flex: 1 1 420px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .sf-shops-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; } .sf-shops-subbar .sf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sf-shops-subbar-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; font-size: 12px; color: var(--v2-muted); } .sf-shops-subbar-label .icon { width: 14px; height: 14px; color: var(--v2-accent); } .sf-shops-fd-btn { cursor: pointer; } .sf-shops-fd-btn .icon { width: 14px; height: 14px; } .sf-shops-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; font: 700 10px var(--v2-mono); opacity: 1 !important; color: var(--v2-bg); background: var(--v2-pink); } .sf-shops-subsearch { margin-left: auto; width: min(320px, 100%); } .sf-shops-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--v2-muted); background: #00f0ff0a; border: 1px solid #00f0ff33; } .sf-shops-x { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; color: var(--v2-text); background: #ffffff0d; border: 1px solid #ffffff24; } .sf-shops-x b { color: var(--v2-accent); } .sf-shops-x .icon { width: 12px; height: 12px; color: var(--v2-muted); } .sf-shops-x:hover { border-color: #ff006e88; } .sf-shops-x:hover .icon { color: var(--v2-pink); } .sf-shops-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--v2-muted); } .sf-shops-clear:hover { color: var(--v2-pink); } .sf-shops-clear .icon { width: 12px; height: 12px; } .sf-shops-count { margin: 0 0 18px; font: 400 11px var(--v2-mono); letter-spacing: 1px; color: var(--v2-muted); } .sf-shops-cards { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); } /* ---------- Drawer (ตัวกรองละเอียด) ---------- */ .sf-shops-drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; color: var(--v2-text); background: var(--v2-surface); border: 0; border-left: 1px solid #00f0ff55; box-shadow: -20px 0 60px #000c; } .sf-shops-drawer::backdrop { background: #05000acc; backdrop-filter: blur(3px); } .sf-shops-drawer[open] { animation: sf-shops-slide .25s ease-out; } @keyframes sf-shops-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sf-shops-drawer[open] { animation: none; } } .sf-shops-drawer-form { height: 100%; display: flex; flex-direction: column; } .sf-shops-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--v2-line); } .sf-shops-drawer-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 15px var(--v2-display); letter-spacing: .5px; } .sf-shops-drawer-head h2 .icon { width: 18px; height: 18px; color: var(--v2-accent); } .sf-shops-drawer-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #ffffff24; color: var(--v2-muted); } .sf-shops-drawer-x:hover { color: var(--v2-pink); border-color: #ff006e88; } .sf-shops-drawer-x .icon { width: 16px; height: 16px; } .sf-shops-drawer-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; scrollbar-width: thin; } .sf-shops-drawer-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--v2-line); } .sf-shops-drawer-foot > * { flex: 1; justify-content: center; } .sf-shops-fd-sec { padding: 14px 0; border-bottom: 1px dashed #ffffff1a; } .sf-shops-fd-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; } .sf-shops-fd-sec h3 .icon { width: 15px; height: 15px; color: var(--v2-accent); } .sf-shops-fd-hint { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; background: #ffffff08; border: 1px solid var(--v2-line); } .sf-shops-fd-hint .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--v2-accent); } .sf-shops-dd { position: relative; } .sf-shops-dd summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; background: #ffffff08; border: 1px solid #ffffff24; font-size: 13px; } .sf-shops-dd summary::-webkit-details-marker { display: none; } .sf-shops-dd summary .icon { width: 14px; height: 14px; transition: transform .2s; } .sf-shops-dd[open] summary { border-color: #00f0ff66; } .sf-shops-dd[open] summary .icon { transform: rotate(180deg); } .sf-shops-dd-list { display: grid; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--v2-surface-2); border: 1px solid #ffffff24; } .sf-shops-dd-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; color: #d9d0e6; } .sf-shops-dd-list a b { font: 700 10px var(--v2-mono); color: var(--v2-muted); } .sf-shops-dd-list a:hover { background: #00f0ff12; color: var(--v2-accent); } .sf-shops-dd-list a.is-on { color: var(--v2-accent); background: #00f0ff1a; } .sf-shops-fd-find { width: 100%; margin-bottom: 10px; } .sf-shops-fd-series { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; } .sf-shops-fd-ser { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 12.5px; cursor: pointer; } .sf-shops-fd-ser:hover { background: #ffffff08; } .sf-shops-fd-ser input { accent-color: var(--v2-accent); flex: 0 0 auto; transform: translateY(2px); } .sf-shops-fd-ser code { font: 700 12px var(--v2-mono); color: var(--v2-accent); } .sf-shops-fd-ser span { color: var(--v2-muted); } .sf-shops-fd-ser[hidden] { display: none; } .sf-shops-fd-opts { display: flex; flex-wrap: wrap; gap: 6px; } .sf-shops-fd-opt { position: relative; cursor: pointer; } .sf-shops-fd-opt input { position: absolute; opacity: 0; pointer-events: none; } .sf-shops-fd-opt span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 12px; color: #c7bdd6; border: 1px solid #ffffff24; transition: color .15s, border-color .15s, background .15s; } .sf-shops-fd-opt span i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px #ffffff55; } .sf-shops-fd-opt:hover span { color: var(--v2-accent); border-color: #00f0ff66; } .sf-shops-fd-opt input:checked + span { color: var(--v2-bg); background: var(--v2-accent); border-color: var(--v2-accent); } .sf-shops-fd-opt input:focus-visible + span { outline: 2px solid var(--v2-accent); outline-offset: 2px; } .sf-shops-fd-price { display: flex; align-items: center; gap: 10px; } .sf-shops-fd-price .sf-input { flex: 1; min-width: 0; } html.sf-shops-lock { overflow: hidden; } /* ---------- About ---------- */ .sf-shops-about { display: grid; gap: 18px; max-width: 900px; } .sf-shops-about-rows { display: grid; margin: 0; } .sf-shops-about-rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); font-size: 13.5px; } .sf-shops-about-rows > div:last-child { border-bottom: 0; } .sf-shops-about-rows dt { color: var(--v2-muted); font-size: 13px; } .sf-shops-about-rows dd { margin: 0; min-width: 0; line-height: 1.7; } .sf-shops-about-rows dd.is-pre { white-space: pre-line; } .sf-shops-about-rows .sf-tags { display: flex; flex-wrap: wrap; gap: 6px; } .sf-shops-stars { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: -2px; } .sf-shops-stars .icon { width: 15px; height: 15px; color: #ffffff40; } .sf-shops-stars .icon.is-on { color: #ffcf00; fill: #ffcf00; } .sf-shops-report { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; --sf-edge: #ff006e55; } .sf-shops-report strong { display: flex; align-items: center; gap: 8px; font-size: 14px; } .sf-shops-report strong .icon { width: 17px; height: 17px; color: var(--v2-pink); } .sf-shops-report p { margin: 6px 0 0; font-size: 12.5px; color: var(--v2-muted); max-width: 560px; } .sf-shops-report .button { gap: 8px; } .sf-shops-report .button .icon { width: 15px; height: 15px; } /* ---------- Re-verification chip + notice (reusable) ---------- */ .sf-shops-review-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; white-space: nowrap; font: 700 12px/1.2 'Noto Sans Thai', sans-serif; color: #ffcf00; background: #ffcf0014; border: 1px solid #ffcf0066; } .sf-shops-review-chip.is-sm { padding: 2px 6px; font-size: 10.5px; } .sf-shops-review-chip .icon { width: 13px; height: 13px; } .sf-shops-review-notice { background: linear-gradient(90deg, #ffcf001f, #ffcf000a); border-bottom: 1px solid #ffcf0055; } .sf-shops-review-notice-inner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; } .sf-shops-review-notice-ic { flex: 0 0 34px; height: 34px; display: grid; place-items: center; color: #1b1300; background: #ffcf00; } .sf-shops-review-notice-ic .icon { width: 18px; height: 18px; } .sf-shops-review-notice strong { display: block; font-size: 14px; color: #ffe27a; } .sf-shops-review-notice p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: #e9dfb8; } /* ---------- Phones ---------- */ @media (max-width: 900px) { .sf-shops-hero { grid-template-columns: 80px minmax(0, 1fr); } .sf-shops-hero-logo > img, .sf-shops-hero-logo > span { width: 80px; height: 80px; font-size: 30px; } .sf-shops-hero-side { grid-column: 1 / -1; } .sf-shops-subsearch { margin-left: 0; width: 100%; } } @media (max-width: 680px) { .sf-shops-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; } .sf-shops-hero-logo > img, .sf-shops-hero-logo > span { width: 64px; height: 64px; font-size: 24px; } .sf-shops-hero-logo em { font-size: 9px; padding: 2px 5px; } .sf-shops-facts { gap: 6px 14px; font-size: 12px; } .sf-shops-tabbar { margin: 18px 0 20px; } .sf-shops-tabs a { padding: 10px 11px; font-size: 12.5px; } .sf-shops-sec-head .text-link { margin-left: 0; } .sf-shops-arrows { display: none; } .sf-shops-cat { gap: 12px; padding: 12px; } .sf-shops-cat-art { flex-basis: 100px; height: 60px; } .sf-shops-fan { transform: scale(.85); transform-origin: left center; } .sf-shops-promo { flex-basis: 190px; } .sf-shops-about-rows > div { grid-template-columns: 1fr; gap: 4px; } .sf-shops-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sf-shops-drawer { width: 100vw; border-left: 0; } } /* ---------- แต่งหน้าร้าน: the shop's own colour + banners (App\Support\ShopLook, set at /seller/storefront; markup shops/show + shops/_hero) ---------- Colour = --shop-c inline on .sf-shops-page.has-color (the server keeps it ≥ 4.5:1 on the panel, so it may be used as text). It tints the hero frame + glow, the logo frames, the kicker, the fact icons, the active tab and the section-head icons. Buttons and prices keep the site's colour roles. */ .sf-shops-page.has-color .sf-shops-hero { --sf-edge: color-mix(in srgb, var(--shop-c) 60%, transparent); box-shadow: inset 0 0 48px color-mix(in srgb, var(--shop-c) 10%, transparent); } .sf-shops-page.has-color .sf-shops-hero .sf-kicker { color: var(--shop-c); } .sf-shops-page.has-color .sf-shops-hero-logo > img, .sf-shops-page.has-color .sf-shops-hero-logo > span, .sf-shops-page.has-color .sf-shops-tabbar-id img, .sf-shops-page.has-color .sf-shops-tabbar-id span { border-color: color-mix(in srgb, var(--shop-c) 70%, transparent); } .sf-shops-page.has-color .sf-shops-hero-logo > span, .sf-shops-page.has-color .sf-shops-tabbar-id span { color: var(--shop-c); } .sf-shops-page.has-color .sf-shops-facts .icon:not(.is-star):not(.is-star-off) { color: var(--shop-c); } .sf-shops-page.has-color .sf-shops-tabs .is-on { color: var(--shop-c); border-bottom-color: var(--shop-c); } .sf-shops-page.has-color .sf-shops-sec-head h2 .icon { color: var(--shop-c); } /* Banners: one 4:1 strip across the top of the hero (same shape on every screen — the seller's page shows exactly this). Several = a swipe / arrow / dot slide show that turns every 6 s (pkg-shops.js; held on hover, focus, an off-screen or hidden page, and never under reduced motion). */ .sf-shops-hero { --hp: 24px; } .sf-shops-banner { position: relative; grid-column: 1 / -1; margin: calc(var(--hp) * -1) calc(var(--hp) * -1) 0; aspect-ratio: 4 / 1; overflow: hidden; background: #0d0719; border-bottom: 1px solid var(--sf-edge); } .sf-shops-banner-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .sf-shops-banner-track::-webkit-scrollbar { display: none; } .sf-shops-banner-track:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; } /* one slide per picture; it clips the picture's zoom (ShopLook::bannerStyle = object-position + scale about that point) */ .sf-shops-banner-slide { flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; } .sf-shops-banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The banner covers the panel's top-right notch, where .sf-panel paints the diagonal on its own background — paint it again above the banner. */ .sf-shops-hero.has-banner::after { content: ''; position: absolute; top: -1px; right: -1px; z-index: 3; width: var(--sf-cut); height: var(--sf-cut); pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)); } /* The logo sits half over the banner, like a profile cover. */ .sf-shops-hero.has-banner .sf-shops-hero-logo { z-index: 2; margin-top: -74px; } .sf-shops-banner-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; color: #fff; background: #0a0014b3; border: 1px solid #ffffff3d; backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s, border-color .2s, color .2s; } .sf-shops-banner-btn.is-prev { left: 12px; } .sf-shops-banner-btn.is-next { right: 12px; } .sf-shops-banner-btn.is-prev .icon { transform: scaleX(-1); } .sf-shops-banner-btn .icon { width: 18px; height: 18px; } .sf-shops-banner:hover .sf-shops-banner-btn, .sf-shops-banner-btn:focus-visible { opacity: 1; } .sf-shops-banner-btn:hover { color: var(--shop-c, var(--v2-accent)); border-color: var(--shop-c, var(--v2-accent)); } .sf-shops-banner-dots { position: absolute; right: 10px; bottom: 6px; z-index: 2; display: flex; gap: 2px; } .sf-shops-banner-dots button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; } .sf-shops-banner-dots button::before { content: ''; width: 9px; height: 9px; background: #ffffffa6; box-shadow: 0 1px 4px #000c; transition: width .2s, background .2s; } .sf-shops-banner-dots button.is-on::before { width: 20px; background: var(--shop-c, var(--v2-accent)); } @media (hover: none) { .sf-shops-banner-btn { display: none; } } @media (max-width: 900px) { .sf-shops-hero.has-banner .sf-shops-hero-logo { margin-top: -62px; } } @media (max-width: 680px) { .sf-shops-hero { --hp: 18px; } /* A phone banner is ~90px tall: the logo only dips into its foot. */ .sf-shops-hero.has-banner .sf-shops-hero-logo { margin-top: -38px; } .sf-shops-banner-dots { right: 4px; bottom: 2px; } } /* Background (แต่งหน้าร้าน › สีพื้นหลัง): --shop-bg + --v2-surface(-2) are set on .sf-shops-page.has-bg, so every panel / tile of the shop takes the tint; the body gets the colour from an inline