/* ============================================================
   CORLIX / Graffiti Street Commerce
   ------------------------------------------------------------
   DESIGN SYSTEM
   The palette intentionally avoids luxury gold/black language.
   Instead it uses energetic spectrum accents lifted from the logo:
   orange → magenta → violet → blue → cyan → green.
   ============================================================ */

:root {
  --bg: #fffdf3;
  --surface: #ffffff;
  --ink: #101014;
  --muted: #6d6d78;
  --line: rgba(16, 16, 20, 0.11);
  --orange: #ff7a00;
  --red: #ff334f;
  --pink: #ff008c;
  --violet: #7a36ff;
  --blue: #1264ff;
  --cyan: #13cfd1;
  --green: #b5ea00;
  --yellow: #ffd400;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --shadow: 0 22px 70px rgba(22, 22, 32, 0.12);
  --max: 1085px;
  --grad: linear-gradient(100deg, var(--cyan), var(--pink) 34%, var(--yellow) 65%, var(--orange));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Prompt", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .28;
  background-image: radial-gradient(rgba(0,0,0,.09) .55px, transparent .55px);
  background-size: 7px 7px;
}
.ambient { position: fixed; width: 460px; height: 460px; border-radius: 50%; filter: blur(110px); opacity: .14; z-index: -2; pointer-events:none; }
.ambient-a { background: var(--pink); top: 6%; right: -180px; }
.ambient-b { background: var(--cyan); top: 42%; left: -220px; }

.section-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

/* ---------- NAV / APP SHELL ---------- */
.topbar {
  position: sticky; top: 16px; z-index: 50;
  width: min(calc(100% - 32px), 1115px); margin: 16px auto 0;
  min-height: 72px; padding: 10px 12px 10px 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  border: 1px solid rgba(255,255,255,.6); border-radius: 24px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(22,22,30,.08);
  transition: min-height .25s ease, transform .25s ease, background .25s ease;
}
.topbar.is-scrolled { min-height: 62px; background: rgba(255,255,255,.9); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; }
.brand-name { font-family: "Kanit", sans-serif; font-weight: 900; font-style: italic; font-size: 1.18rem; letter-spacing: -.03em; }
.brand-mark { width: 38px; height: 38px; position: relative; display: inline-block; }
.petal { position: absolute; width: 12px; height: 25px; border-radius: 90% 10% 90% 20%; transform-origin: 50% 90%; bottom: 4px; left: 13px; }
.p1 { background: var(--orange); transform: rotate(0deg) translateY(-7px); }
.p2 { background: var(--pink); transform: rotate(-36deg); }
.p3 { background: var(--violet); transform: rotate(-70deg) scale(.86); }
.p4 { background: var(--blue); transform: rotate(36deg); }
.p5 { background: var(--green); transform: rotate(70deg) scale(.86); }
.desktop-nav { display: flex; align-items: center; gap: 26px; font-size: .86rem; font-weight: 600; }
.desktop-nav a { position: relative; color: #34343c; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px; background:var(--grad); transition:right .2s ease; }
.desktop-nav a:hover::after { right:0; }
.topbar-actions { justify-self: end; display:flex; align-items:center; gap:10px; }
.lang-switch { display:flex; background:#f0f0ed; border-radius:999px; padding:3px; }
.lang-btn { border:0; background:transparent; border-radius:999px; padding:8px 10px; font-weight:800; font-size:.72rem; color:#777780; }
.lang-btn.is-active { background:#111116; color:white; }
.cart-trigger { border:0; background:#111116; color:white; border-radius:999px; padding:10px 11px 10px 15px; display:flex; gap:9px; align-items:center; font-weight:700; }
.cart-count { min-width:26px; height:26px; padding:0 7px; border-radius:999px; display:grid; place-items:center; background:var(--grad); font-size:.76rem; }

/* ---------- HERO ---------- */
.hero { min-height: 690px; padding: 74px 0 60px; display:grid; grid-template-columns: .92fr 1.08fr; gap: 54px; align-items:center; }
.eyebrow, .kicker { font-size:.73rem; letter-spacing:.14em; font-weight:800; text-transform:uppercase; }
.eyebrow { display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 7px rgba(102,197,28,.13); }
.hero h1 { margin:0; font-family:"Kanit",sans-serif; font-weight:900; font-style:italic; line-height:.88; letter-spacing:-.055em; font-size:clamp(4rem, 8.2vw, 7.05rem); }
.hero h1 span { display:block; }
.hero-gradient { color:transparent; -webkit-background-clip:text; background-clip:text; background-image:var(--grad); padding-right:.08em; }
.hero-copy > p { max-width: 500px; color:var(--muted); line-height:1.8; font-size:1rem; margin:28px 0 30px; }
.hero-cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { min-height:52px; border-radius:999px; padding:0 20px; display:inline-flex; gap:20px; align-items:center; justify-content:center; font-weight:700; border:1px solid transparent; transition:transform .22s ease, box-shadow .22s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:var(--grad); box-shadow:0 12px 30px rgba(115,54,255,.2); }
.btn-ghost { border-color:var(--line); background:rgba(255,255,255,.5); }
.btn-light { background:white; color:#111116; }
.btn-dark { background:#111116; color:white; }
.btn-arrow { font-size:1.2rem; }
.hero-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:42px; }
.hero-stats > div { border-top:1px solid var(--line); padding-top:13px; display:grid; gap:4px; }
.hero-stats strong { font:800 .75rem "Kanit"; letter-spacing:.08em; }
.hero-stats span { color:var(--muted); font-size:.75rem; }

.hero-stage { position:relative; min-height:570px; display:grid; place-items:center; }
.hero-shoe-card { position:relative; width:min(100%, 515px); aspect-ratio:.88; border-radius:44px; overflow:hidden; background:#fff; box-shadow:var(--shadow); transform:rotate(2.2deg); }
.hero-shoe-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(12,12,16,.66)); z-index:1; }
.hero-shoe-card img { width:100%; height:100%; object-fit:cover; }
.shoe-card-caption { position:absolute; z-index:2; left:26px; right:26px; bottom:22px; color:white; display:flex; justify-content:space-between; align-items:end; }
.shoe-card-caption div { display:grid; gap:4px; }
.shoe-card-caption small { opacity:.75; }
.shoe-card-caption strong { font:800 1.15rem "Kanit"; }
.shoe-card-caption > span { font-weight:800; }
.floating-chip { position:absolute; z-index:4; font:800 .7rem "Kanit"; letter-spacing:.08em; border-radius:999px; padding:10px 14px; box-shadow:0 10px 25px rgba(0,0,0,.12); }
.chip-new { top:26px; left:20px; background:#fff; color:#111; transform:rotate(-7deg); }
.chip-wholesale { right:20px; top:78px; background:var(--green); color:#0b1703; transform:rotate(6deg); }
.motion-ribbon { position:absolute; border-radius:999px; z-index:-1; background:var(--grad); filter:saturate(1.1); }
.ribbon-a { width:650px; height:64px; transform:rotate(-20deg); }
.ribbon-b { width:430px; height:26px; transform:rotate(24deg); opacity:.75; }
.hero-orbit { position:absolute; border:1px solid rgba(16,16,20,.13); border-radius:50%; z-index:-2; }
.orbit-one { width:570px; height:570px; }
.orbit-two { width:410px; height:410px; }
.thai-spark { position:absolute; right:-4px; bottom:44px; width:78px; height:78px; border-radius:24px; background:var(--yellow); display:grid; place-items:center; font-size:2rem; transform:rotate(12deg); box-shadow:0 18px 35px rgba(255,196,0,.25); }

/* ---------- BUSINESS LANES ---------- */
.business-lanes { display:grid; grid-template-columns:1.05fr .92fr 1.08fr; gap:14px; padding:20px 0 92px; }
.lane { min-height:205px; position:relative; overflow:hidden; border-radius:30px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease; }
.lane:hover { transform:translateY(-5px) rotate(-.4deg); }
.lane::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-65px; bottom:-75px; border:24px solid rgba(255,255,255,.18); }
.lane-new { background:linear-gradient(135deg,#ff6a00,#ff354c); color:white; transform:rotate(-1.1deg); }
.lane-used { background:linear-gradient(135deg,#6d34ff,#195dff); color:white; transform:translateY(22px) rotate(1.1deg); }
.lane-b2b { background:linear-gradient(135deg,#0eafd1,#72c91d); color:#071112; transform:rotate(-.5deg); }
.lane-index { font-size:.72rem; opacity:.78; }
.lane-content small { font:800 .72rem "Kanit"; letter-spacing:.1em; }
.lane h2 { margin:4px 0 2px; font:800 1.7rem "Kanit"; }
.lane p { margin:0; max-width:250px; font-size:.8rem; opacity:.82; line-height:1.55; }
.lane > a { position:absolute; right:22px; top:20px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; }

/* ---------- SHOP / PRODUCT FLOW ---------- */
.shop { padding:35px 0 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:30px; }
.section-heading h2, .wholesale h2, .trust h2, .hub h2, .final-cta h2 { margin:5px 0 0; font:900 clamp(2.6rem,6vw,4.9rem)/.92 "Kanit"; letter-spacing:-.045em; }
.filter-tabs { display:flex; padding:4px; border-radius:999px; background:#eaeae6; }
.filter-btn { border:0; background:transparent; border-radius:999px; padding:10px 15px; color:#686871; font-weight:700; font-size:.78rem; }
.filter-btn.is-active { background:#111116; color:white; }
.product-flow { display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; align-items:start; }
.product-card { grid-column:span 4; background:#fff; border-radius:28px; overflow:hidden; border:1px solid rgba(0,0,0,.05); transition:transform .25s ease, box-shadow .25s ease; }
.product-card.feature { grid-column:span 6; }
.product-card:nth-child(2) { margin-top:34px; }
.product-card:nth-child(4) { margin-top:-12px; }
.product-card:hover { transform:translateY(-7px); box-shadow:0 22px 48px rgba(20,20,30,.1); }
.product-image { position:relative; aspect-ratio:1.02; overflow:hidden; background:#ececec; }
.product-card.feature .product-image { aspect-ratio:1.45; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-image img { transform:scale(1.04); }
.product-badge { position:absolute; top:14px; left:14px; border-radius:999px; padding:8px 11px; background:white; font:800 .66rem "Kanit"; box-shadow:0 7px 20px rgba(0,0,0,.1); }
.product-badge.used { background:#111116; color:#fff; }
.condition-tag { position:absolute; right:14px; top:14px; background:var(--yellow); border-radius:999px; padding:8px 11px; font-weight:800; font-size:.68rem; }
.product-info { padding:18px; }
.product-info h3 { margin:0; font:800 1.05rem "Kanit"; }
.product-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.72rem; margin-top:4px; }
.price-row { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:18px; }
.prices { display:grid; gap:2px; }
.prices small { color:var(--muted); font-size:.62rem; }
.prices strong { font-size:1.02rem; }
.prices em { color:var(--green); font-style:normal; font-size:.69rem; font-weight:700; }
.add-btn { width:44px; height:44px; border-radius:50%; border:0; background:#111116; color:white; font-size:1.45rem; transition:transform .2s ease, background .2s ease; }
.add-btn:hover { transform:rotate(8deg) scale(1.05); background:var(--blue); }

/* ---------- WHOLESALE ---------- */
.wholesale { padding:20px 0 105px; }
.wholesale-card { position:relative; overflow:hidden; border-radius:42px; padding:48px; background:#101014; color:white; display:grid; grid-template-columns:.85fr 1.15fr; gap:38px; }
.wholesale-card::before { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--grad); filter:blur(100px); opacity:.25; right:-120px; top:-170px; }
.wholesale-intro { position:relative; z-index:1; }
.wholesale-intro p { color:#bdbdc7; max-width:430px; line-height:1.75; }
.wholesale-dashboard { position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.metric-card, .tier-list { border:1px solid rgba(255,255,255,.13); border-radius:24px; background:rgba(255,255,255,.055); backdrop-filter:blur(12px); padding:20px; }
.metric-main { grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end; background:var(--grad); color:#fff; border:0; }
.metric-card small { opacity:.65; font-size:.62rem; letter-spacing:.08em; }
.metric-card strong { font:900 2.5rem "Kanit"; line-height:1; margin-top:8px; }
.metric-main strong { font-size:5.2rem; }
.metric-card span { font-size:.72rem; opacity:.8; }
.tier-list { grid-column:1/-1; display:grid; gap:0; }
.tier-list div { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.tier-list div:last-child { border-bottom:0; }
.tier-list em { font-style:normal; opacity:.65; font-size:.75rem; }

/* ---------- TRUST ---------- */
.trust { padding:15px 0 110px; display:grid; grid-template-columns:1fr 1fr; gap:62px; align-items:center; }
.trust-visual { min-height:520px; position:relative; }
.trust-visual img { width:100%; height:520px; object-fit:cover; border-radius:38px; transform:rotate(-2deg); box-shadow:var(--shadow); }
.condition-badge { position:absolute; right:-16px; top:34px; width:100px; height:100px; border-radius:31px; background:var(--yellow); display:grid; place-items:center; font:900 1.6rem "Kanit"; transform:rotate(9deg); }
.trust-copy > p { color:var(--muted); line-height:1.8; max-width:480px; }
.trust-list { margin-top:30px; border-top:1px solid var(--line); }
.trust-list div { display:flex; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.trust-list span { color:var(--muted); font-size:.72rem; }
.trust-list strong { font:700 .92rem "Kanit"; }

/* ---------- HUB ---------- */
.hub { padding:15px 0 90px; }
.hub-card { border-radius:42px; background:#fff; padding:18px; display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; box-shadow:0 24px 80px rgba(22,22,30,.08); }
.hub-info { padding:32px 24px 28px 28px; display:flex; flex-direction:column; justify-content:space-between; min-height:530px; }
.contact-grid { display:grid; gap:8px; margin:28px 0; }
.contact-grid a { display:grid; grid-template-columns:105px 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.contact-grid small { color:var(--muted); }
.contact-grid strong { font:700 .86rem "Kanit"; overflow-wrap:anywhere; }
.address-block small { color:var(--muted); }
.address-block p { margin:5px 0 0; line-height:1.65; font-size:.85rem; }
.map-panel { position:relative; overflow:hidden; min-height:530px; border-radius:30px; background:#ddd; }
.map-panel iframe { width:100%; height:100%; min-height:530px; border:0; filter:saturate(.25) contrast(1.05); }
.map-overlay { position:absolute; left:18px; right:18px; bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:rgba(17,17,22,.88); backdrop-filter:blur(14px); color:#fff; font-size:.75rem; font-weight:700; }
.map-overlay i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:6px; box-shadow:0 0 0 6px rgba(102,197,28,.12); }

/* ---------- FINAL / FOOTER ---------- */
.final-cta { position:relative; overflow:hidden; min-height:340px; border-radius:42px; padding:48px; margin-bottom:50px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:linear-gradient(120deg,#ff6a00,#ff2f69 28%,#7136ff 58%,#0da6dc 82%,#68c51b); color:#fff; }
.final-cta > * { position:relative; z-index:2; }
.final-cta > span { font:900 .72rem "Kanit"; letter-spacing:.18em; }
.final-cta h2 { max-width:650px; margin-bottom:24px; }
.final-wave { position:absolute; width:700px; height:180px; border-radius:50%; border:34px solid rgba(255,255,255,.18); right:-170px; bottom:-90px; transform:rotate(-17deg); }
.footer { padding:0 0 120px; display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:.76rem; }
.footer div { display:flex; gap:16px; }
.footer strong { color:var(--ink); }
.footer p { margin:0; }

/* ---------- CART BOTTOM SHEET ---------- */
.sheet-backdrop { position:fixed; inset:0; z-index:98; background:rgba(10,10,14,.45); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.sheet-backdrop.is-open { opacity:1; }
.cart-sheet { position:fixed; z-index:99; left:50%; bottom:0; width:min(100%, 560px); max-height:min(86vh, 820px); transform:translate(-50%, 105%); background:#fff; border-radius:34px 34px 0 0; box-shadow:0 -20px 70px rgba(10,10,14,.22); padding:12px 22px 20px; display:flex; flex-direction:column; transition:transform .34s cubic-bezier(.2,.9,.2,1); }
.cart-sheet.is-open { transform:translate(-50%, 0); }
.sheet-handle { width:52px; height:5px; border-radius:999px; background:#ddd; margin:0 auto 14px; }
.sheet-head { display:flex; justify-content:space-between; align-items:center; padding:0 2px 14px; border-bottom:1px solid var(--line); }
.sheet-head small { font:800 .66rem "Kanit"; letter-spacing:.14em; color:var(--muted); }
.sheet-head h2 { margin:2px 0 0; font:800 1.5rem "Kanit"; }
.sheet-close { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fafafa; font-size:1.4rem; }
.cart-items { overflow:auto; padding-right:3px; }
.cart-row { display:grid; grid-template-columns:76px 1fr auto; gap:12px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); }
.cart-row img { width:76px; height:72px; object-fit:cover; border-radius:16px; }
.cart-row h4 { margin:0 0 2px; font:700 .88rem "Kanit"; }
.cart-row p { margin:0; color:var(--muted); font-size:.68rem; }
.qty-row { display:flex; gap:7px; align-items:center; margin-top:7px; }
.qty-row button { width:26px; height:26px; border:1px solid var(--line); border-radius:9px; background:#f7f7f4; }
.cart-price { text-align:right; }
.cart-price strong { display:block; font-size:.85rem; }
.remove-btn { border:0; background:transparent; color:#999; font-size:.68rem; padding:4px 0; }
.cart-empty { text-align:center; padding:44px 20px 36px; }
.cart-empty > span { width:58px; height:58px; border-radius:18px; background:var(--grad); color:#fff; display:grid; place-items:center; margin:0 auto 16px; font-size:1.4rem; transform:rotate(-8deg); }
.cart-empty h3 { margin:0; font:800 1.15rem "Kanit"; }
.cart-empty p { color:var(--muted); font-size:.78rem; max-width:330px; margin:8px auto 0; }
.cart-summary { padding-top:15px; margin-top:auto; border-top:1px solid var(--line); }
.cart-summary > div { display:flex; justify-content:space-between; padding:4px 0; color:var(--muted); font-size:.8rem; }
.total-line { color:var(--ink)!important; font-weight:800; font-size:1rem!important; margin-bottom:10px; }
.checkout-btn { width:100%; min-height:56px; border:0; border-radius:18px; color:#fff; background:var(--grad); display:flex; justify-content:space-between; align-items:center; padding:0 18px; font-weight:800; }
.checkout-btn:disabled { filter:grayscale(1); opacity:.45; cursor:not-allowed; }
.cart-summary > p { text-align:center; color:var(--muted); font-size:.65rem; margin:8px 0 0; }

.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:120; background:#111116; color:#fff; border-radius:999px; padding:11px 16px; font-size:.75rem; opacity:0; pointer-events:none; transition:.25s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

.mobile-dock { display:none; }

/* ---------- REVEAL MOTION ---------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .topbar { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; gap:28px; padding-top:58px; }
  .hero-stage { min-height:510px; }
  .hero-shoe-card { width:min(92%, 560px); }
  .business-lanes { grid-template-columns:1fr 1fr; }
  .lane-b2b { grid-column:1/-1; }
  .product-card, .product-card.feature { grid-column:span 6; }
  .product-card.feature .product-image { aspect-ratio:1.02; }
  .wholesale-card, .trust, .hub-card { grid-template-columns:1fr; }
  .trust { gap:32px; }
  .hub-info { min-height:auto; }
  .wholesale-dashboard { margin-top:10px; }
}

/* ---------- MOBILE / APP-LIKE MODE ---------- */
@media (max-width: 640px) {
  :root { --radius-lg:28px; }
  .section-shell { width:min(calc(100% - 24px), var(--max)); }
  .topbar { top:8px; width:calc(100% - 16px); margin-top:8px; min-height:60px; border-radius:20px; padding:8px 9px 8px 12px; }
  .brand-name { font-size:1rem; }
  .brand-mark { width:32px; height:32px; transform:scale(.84); transform-origin:left center; margin-right:-4px; }
  .cart-trigger { display:none; }
  .lang-btn { padding:7px 9px; }

  .hero { min-height:auto; padding:52px 0 40px; }
  .hero h1 { font-size:clamp(3.5rem, 18vw, 5.5rem); }
  .hero-copy > p { margin:20px 0 24px; font-size:.9rem; }
  .hero-cta-row .btn { min-height:48px; flex:1 1 auto; padding-inline:15px; }
  .hero-stats { margin-top:30px; gap:7px; }
  .hero-stats span { font-size:.64rem; }
  .hero-stage { min-height:430px; }
  .hero-shoe-card { width:91%; border-radius:30px; }
  .motion-ribbon.ribbon-a { width:470px; height:42px; }
  .motion-ribbon.ribbon-b { width:330px; }
  .orbit-one { width:430px; height:430px; }
  .orbit-two { width:310px; height:310px; }
  .thai-spark { right:4px; width:62px; height:62px; border-radius:20px; }

  .business-lanes { grid-template-columns:1fr; padding-bottom:70px; }
  .lane, .lane-used, .lane-b2b { grid-column:auto; transform:none; min-height:165px; border-radius:25px; }

  .shop { padding-bottom:80px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading h2, .wholesale h2, .trust h2, .hub h2, .final-cta h2 { font-size:3rem; }
  .filter-tabs { width:100%; }
  .filter-btn { flex:1; }
  .product-flow { gap:10px; }
  .product-card, .product-card.feature { grid-column:span 6; border-radius:20px; }
  .product-card:nth-child(2), .product-card:nth-child(4) { margin-top:0; }
  .product-image, .product-card.feature .product-image { aspect-ratio:.9; }
  .product-info { padding:12px; }
  .product-info h3 { font-size:.87rem; }
  .product-meta { display:grid; gap:2px; font-size:.62rem; }
  .price-row { margin-top:12px; }
  .prices strong { font-size:.9rem; }
  .prices em { display:none; }
  .add-btn { width:38px; height:38px; }

  .wholesale-card { border-radius:30px; padding:28px 20px; }
  .wholesale-dashboard { grid-template-columns:1fr 1fr; }
  .metric-card { padding:15px; }
  .metric-main strong { font-size:4rem; }

  .trust { padding-bottom:82px; }
  .trust-visual, .trust-visual img { min-height:420px; height:420px; }
  .condition-badge { right:4px; width:82px; height:82px; border-radius:25px; }

  .hub-card { border-radius:30px; padding:10px; }
  .hub-info { padding:20px 14px 18px; }
  .contact-grid a { grid-template-columns:78px 1fr auto; }
  .map-panel, .map-panel iframe { min-height:390px; }

  .final-cta { border-radius:30px; min-height:320px; padding:32px 24px; }
  .footer { padding-bottom:110px; flex-direction:column; }
  .footer div { justify-content:space-between; }

  .mobile-dock { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; z-index:70; left:10px; right:10px; bottom:10px; min-height:66px; border-radius:22px; padding:6px; background:rgba(17,17,22,.9); backdrop-filter:blur(16px); box-shadow:0 18px 40px rgba(0,0,0,.24); }
  .mobile-dock a, .mobile-dock button { position:relative; border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:17px; }
  .mobile-dock small { font-size:.58rem; opacity:.75; }
  .mobile-dock span { font-size:1.1rem; }
  .mobile-dock b { position:absolute; right:11px; top:5px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--pink); display:grid; place-items:center; font-size:.55rem; }

  .cart-sheet { width:100%; max-height:88vh; border-radius:28px 28px 0 0; padding-inline:15px; padding-bottom:22px; }
  .toast { bottom:88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}


/* ============================================================
   PRODUCT MARKET V2 — REAL STOCK CATALOG
   ------------------------------------------------------------
   These overrides deliberately make the product area denser and
   more editorial than the original concept. Real stock photos are
   visually inconsistent by nature, so every card gets a controlled
   image stage, strong information hierarchy and category color rail.
   ============================================================ */

.shop {
  position: relative;
  padding-top: 56px;
}

.shop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 340px;
  z-index: -1;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,94,31,.16), transparent 31%),
    radial-gradient(circle at 70% 6%, rgba(50,115,255,.13), transparent 28%),
    radial-gradient(circle at 92% 42%, rgba(111,210,24,.12), transparent 24%);
  pointer-events: none;
}

.section-heading {
  align-items: flex-start;
}

.section-heading > div:first-child {
  max-width: 700px;
}

.shop-lead {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.75;
}

.shop-tools {
  position: sticky;
  top: 92px;
  z-index: 12;
}

.filter-tabs {
  gap: 3px;
  box-shadow: 0 10px 32px rgba(25,25,32,.08);
  background: rgba(241,241,236,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.filter-btn {
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.filter-btn:hover {
  transform: translateY(-1px);
}

.catalog-note {
  margin: 4px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(20,20,25,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  display: flex;
  gap: 16px;
  align-items: center;
}

.catalog-note span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #111116;
  color: #fff;
  font: 800 .62rem "Kanit";
  letter-spacing: .08em;
}

.catalog-note p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.55;
}

.product-flow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
  align-items: start;
}

.product-card,
.product-card.feature {
  position: relative;
  grid-column: span 4;
  margin-top: 0 !important;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(15,15,20,.07);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 40px rgba(30,30,40,.055);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}

.product-card.feature {
  grid-column: span 6;
}

.product-card:nth-child(5n + 2):not(.feature) {
  transform: translateY(26px);
}

.product-card:nth-child(5n + 2):not(.feature):hover {
  transform: translateY(18px);
}

.product-card:hover {
  box-shadow: 0 25px 70px rgba(27,27,38,.13);
  transform: translateY(-7px);
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: .88;
  background: linear-gradient(#ff5a1f,#ff1f8e);
}

.product-card.type-used::after {
  background: linear-gradient(#6758ff,#17b9d5);
}

.product-card.type-wholesale::after {
  background: linear-gradient(#16b7d3,#7bd317);
}

.product-image,
.product-card.feature .product-image {
  aspect-ratio: 1.12 / 1;
  background: #eee;
  overflow: hidden;
}

.product-card.type-wholesale .product-image {
  aspect-ratio: .95 / 1;
}

.product-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(0,0,0,.18));
  pointer-events: none;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.055);
}

.product-badge-row {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #111116;
  box-shadow: 0 7px 22px rgba(0,0,0,.09);
  font: 800 .61rem "Kanit";
  letter-spacing: .05em;
}

.product-badge.used {
  background: #111116;
  color: #fff;
}

.product-badge.wholesale {
  background: #b7ff36;
  color: #101312;
}

.condition-tag {
  position: static;
  background: #ffe100;
  box-shadow: 0 7px 22px rgba(0,0,0,.09);
}

.product-category {
  position: absolute;
  z-index: 2;
  left: 15px;
  bottom: 13px;
  max-width: calc(100% - 30px);
  color: #fff;
  font: 700 .72rem "Kanit";
  text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.product-info {
  padding: 20px 20px 21px;
}

.product-title-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.product-info h3 {
  max-width: 85%;
  font: 800 1.13rem/1.25 "Kanit";
  letter-spacing: -.015em;
}

.product-number {
  color: #b7b7bd;
  font: 800 .67rem "Kanit";
  letter-spacing: .08em;
}

.product-description {
  min-height: 48px;
  margin: 10px 0 14px;
  color: #686873;
  font-size: .76rem;
  line-height: 1.65;
}

.product-specs {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 8px;
}

.product-specs > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 15px;
  background: #f5f5f1;
}

.product-specs small {
  display: block;
  margin-bottom: 3px;
  color: #92929b;
  font-size: .58rem;
  text-transform: uppercase;
}

.product-specs strong {
  display: block;
  overflow-wrap: anywhere;
  font: 700 .69rem/1.4 "Kanit";
  color: #25252b;
}

.price-row {
  align-items: center;
  padding-top: 17px;
  margin-top: 16px;
  border-top: 1px solid rgba(15,15,20,.07);
}

.prices {
  gap: 0;
}

.prices small {
  margin-bottom: 1px;
}

.prices strong {
  font: 900 1.35rem "Kanit";
  letter-spacing: -.02em;
}

.prices em {
  margin-top: 2px;
  color: #129f6a;
  font-size: .67rem;
}

.add-btn {
  width: auto;
  min-width: 74px;
  height: 44px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.add-btn span {
  font-size: 1.2rem;
  line-height: 1;
}

.add-btn small {
  color: inherit;
  font: 700 .65rem "Kanit";
}

.type-wholesale .add-btn {
  background: #161a19;
}

.type-wholesale .prices strong {
  color: #101312;
}

.type-wholesale .prices em {
  color: #249b23;
}

@media (max-width: 980px) {
  .section-heading {
    display: block;
  }
  .shop-tools {
    position: static;
    margin-top: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .filter-tabs {
    width: max-content;
  }
  .product-card,
  .product-card.feature {
    grid-column: span 6;
  }
  .product-card:nth-child(5n + 2):not(.feature) {
    transform: none;
  }
}

@media (max-width: 640px) {
  .shop {
    padding-top: 34px;
  }
  .shop-lead {
    font-size: .82rem;
  }
  .catalog-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .product-flow {
    gap: 10px;
  }
  .product-card,
  .product-card.feature {
    grid-column: span 12;
    border-radius: 23px;
  }
  .product-image,
  .product-card.feature .product-image,
  .product-card.type-wholesale .product-image {
    aspect-ratio: 1.22 / 1;
  }
  .product-info {
    padding: 16px 16px 17px;
  }
  .product-info h3 {
    font-size: 1.06rem;
  }
  .product-description {
    min-height: 0;
  }
  .product-specs {
    grid-template-columns: .8fr 1.2fr;
  }
}


/* ============================================================
   CURATED CATALOGUE / PAGINATION
   The catalogue intentionally does not follow source numbering.
   The first two pages act as visual merchandising windows, then the
   remaining stock follows a deterministic mixed order.
   ============================================================ */
.catalog-meta {
  margin: 18px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #767681;
  font: 600 .72rem/1.4 "Kanit";
}
.catalog-curation-note {
  padding: 8px 12px;
  border: 1px solid rgba(20,20,25,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
}
.catalog-pagination {
  margin: 34px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(15,15,20,.09);
  border-radius: 999px;
  background: #fff;
  color: #26262d;
  font: 800 .76rem "Kanit";
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.page-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,20,30,.09); }
.page-btn.is-active { color: #fff; border-color: transparent; background: linear-gradient(115deg,#ff5d19,#f72585 35%,#5b4bdb 64%,#00a9d6); }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-gap { color: #9b9ba2; padding: 0 2px; }
.page-arrow { min-width: 50px; }

/* The first card of each catalogue page gets extra breathing room and image emphasis. */
.product-card.feature { box-shadow: 0 18px 44px rgba(20,20,30,.07); }
.product-card.feature .product-info h3 { font-size: clamp(1.1rem,1.6vw,1.48rem); }

@media (max-width: 640px) {
  .catalog-meta { align-items: flex-start; flex-direction: column; margin-top: 12px; }
  .catalog-curation-note { border-radius: 14px; }
  .catalog-pagination { gap: 6px; margin-top: 24px; }
  .page-btn { min-width: 38px; height: 38px; }
}

/* ---------- PRODUCT IMAGE PERFORMANCE / SKELETON ----------
   The product frame keeps its final dimensions before the photo arrives, so the layout
   never jumps. A subtle shimmer communicates loading without visually competing with
   CORLIX's colorful cards. */
.product-image { isolation: isolate; }
.product-image .image-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, transparent 34%, rgba(255,255,255,.72) 48%, transparent 62%),
    linear-gradient(135deg, #ececf0 0%, #f6f6f4 48%, #e8e8ec 100%);
  background-size: 230% 100%, 100% 100%;
  animation: productSkeleton 1.25s ease-in-out infinite;
  transition: opacity .25s ease;
}
.product-image img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .28s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.product-image.is-loaded img { opacity: 1; }
.product-image.is-loaded .image-skeleton { opacity: 0; animation: none; }
.product-image.is-error .image-skeleton {
  animation: none;
  background: linear-gradient(135deg,#efeff2,#e4e4e8);
}
@keyframes productSkeleton {
  0% { background-position: 115% 0, 0 0; }
  100% { background-position: -115% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-image .image-skeleton { animation: none; }
}


/* ============================================================
   CORLIX GRAFFITI BRAND OVERRIDES
   Derived from the supplied CORLIX logo: ink-black outlines,
   aerosol cyan/pink/yellow/orange splashes, off-white paper base.
   Product data and catalog structure remain unchanged.
   ============================================================ */
body{background:
  radial-gradient(circle at 10% 8%,rgba(19,207,209,.10),transparent 22%),
  radial-gradient(circle at 91% 17%,rgba(255,0,140,.09),transparent 24%),
  radial-gradient(circle at 65% 72%,rgba(255,212,0,.08),transparent 25%),var(--bg)}
.page-noise{opacity:.42;background-image:radial-gradient(rgba(0,0,0,.12) .65px,transparent .65px);background-size:6px 6px}
.topbar{border:2px solid #101014;border-radius:18px;box-shadow:6px 7px 0 #101014;background:rgba(255,253,243,.92)}
.topbar.is-scrolled{background:rgba(255,253,243,.96)}
.brand{gap:8px}.brand-logo-wrap{width:58px;height:47px;overflow:hidden;display:grid;place-items:center;transform:rotate(-3deg)}
.brand-logo{width:72px;max-width:none}.brand-name{font-size:1.06rem;letter-spacing:.04em;text-shadow:2px 2px 0 rgba(19,207,209,.35)}
.desktop-nav a{font-weight:800}.desktop-nav a::after{height:4px;transform:rotate(-2deg)}
.lang-switch{border:1.5px solid #111;background:#fff}.cart-trigger{border:2px solid #111;box-shadow:3px 3px 0 var(--cyan)}
.hero{padding-top:92px}.hero-copy{position:relative}.hero-copy::before{content:"CORLIX // STREET FOOTWEAR";position:absolute;top:-44px;left:-12px;font:900 .72rem "Kanit";letter-spacing:.16em;transform:rotate(-3deg);background:var(--yellow);padding:5px 10px;border:2px solid #111;box-shadow:3px 3px 0 #111}
.hero h1{font-style:italic;text-transform:uppercase;-webkit-text-stroke:1.2px #101014;text-shadow:5px 5px 0 rgba(19,207,209,.38),-4px -2px 0 rgba(255,0,140,.18)}
.hero-gradient{-webkit-text-stroke:2px #101014;filter:saturate(1.2)}
.hero-stage{isolation:isolate}.hero-logo-decal{position:absolute;width:390px;top:-64px;right:-50px;z-index:5;transform:rotate(5deg);filter:drop-shadow(7px 9px 0 rgba(16,16,20,.14));pointer-events:none}.hero-logo-decal img{width:100%}
.hero-shoe-card{border:4px solid #111;border-radius:22px;box-shadow:12px 14px 0 #101014;transform:rotate(2deg)}
.hero-shoe-card::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(255,255,255,.65);z-index:2;pointer-events:none}
.floating-chip{border:2px solid #111;box-shadow:4px 4px 0 #111;border-radius:8px}.chip-wholesale{background:var(--yellow)}
.motion-ribbon{border:3px solid #111;box-shadow:5px 6px 0 #111}.thai-spark{border:3px solid #111;border-radius:8px;box-shadow:5px 6px 0 #111}
.lane{border:3px solid #111;border-radius:18px;box-shadow:7px 8px 0 #111}.lane-new{background:linear-gradient(135deg,var(--pink),#ff6b00)}.lane-used{background:linear-gradient(135deg,var(--cyan),#0c83a0)}.lane-b2b{background:linear-gradient(135deg,var(--yellow),var(--green))}
.section-heading h2,.wholesale h2,.trust h2,.hub h2,.final-cta h2{text-transform:uppercase;-webkit-text-stroke:.7px #111;text-shadow:3px 3px 0 rgba(19,207,209,.22)}
.kicker{display:inline-block;background:#111;color:white;padding:5px 10px;transform:rotate(-1deg)}
.filter-btn{border:2px solid #111!important;box-shadow:2px 3px 0 #111}.filter-btn.is-active{background:var(--yellow)!important;color:#111!important}
.catalog-note{border:2px dashed #111;background:rgba(255,255,255,.76)}
.product-card{border:2px solid #111!important;box-shadow:6px 7px 0 rgba(16,16,20,.95)!important;border-radius:18px!important;background:#fffdf7!important}
.product-card:nth-child(4n+1){transform:rotate(-.35deg)}.product-card:nth-child(4n+2){transform:rotate(.25deg)}
.product-image{border-bottom:2px solid #111}.product-badge,.condition-tag,.product-category{border:1.5px solid #111!important;box-shadow:2px 2px 0 #111;border-radius:7px!important}
.add-btn{border:2px solid #111!important;box-shadow:3px 3px 0 #111!important;background:var(--cyan)!important;color:#111!important}.add-btn:hover{background:var(--yellow)!important}
.wholesale-card{border:4px solid #111!important;border-radius:22px!important;box-shadow:12px 13px 0 #111!important;background:linear-gradient(135deg,#101014 0 48%,var(--pink) 48% 50%,var(--cyan) 50% 100%)!important}
.metric-card,.tier-list{border:2px solid #111!important;box-shadow:4px 4px 0 #111!important}.trust-visual,.hub-card{border:4px solid #111!important;box-shadow:10px 11px 0 #111!important;border-radius:20px!important}
.contact-grid a{border:2px solid #111!important;box-shadow:4px 4px 0 #111!important}.company-reg{display:block;margin-top:10px;font-weight:800;color:#111}
.map-panel{border-left:3px solid #111}.final-cta{border:4px solid #111!important;box-shadow:10px 11px 0 #111!important;border-radius:20px!important;background:linear-gradient(112deg,var(--yellow),#fff 32%,var(--cyan) 64%,var(--pink))!important}
.footer{border-top:4px solid #111}.mobile-dock{border:3px solid #111!important;box-shadow:0 -5px 0 #111!important;background:#fffdf3!important}
.cart-sheet{border-left:4px solid #111!important}.toast{border:2px solid #111;box-shadow:4px 4px 0 #111}
@media(max-width:820px){.brand-logo-wrap{width:46px;height:40px}.brand-logo{width:60px}.brand-name{display:none}.hero-logo-decal{width:250px;top:-34px;right:-24px}.hero h1{-webkit-text-stroke:.8px #111}.topbar{box-shadow:4px 5px 0 #111}.hero-shoe-card{box-shadow:7px 8px 0 #111}.lane{box-shadow:5px 6px 0 #111}}
@media(max-width:560px){.hero-logo-decal{width:205px;top:-12px;right:-12px}.hero-copy::before{left:0}.hero h1{font-size:clamp(3.5rem,17vw,5.5rem)}}