/* Home: campaign banners, service strip, popular categories, brands, product rails, shop grid. */

.section-tight { padding-block: var(--s8) 0; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.row-head h2 { font-size: var(--fs-xl); }
.row-head a { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
.row-head a:hover { color: var(--blue); }

/* ---------- campaign banners ---------- */
.banners { position: relative; margin-top: var(--s4); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); }
.banner-track::-webkit-scrollbar { display: none; }
.banner {
  flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; min-height: 0;
  background: var(--b-bg, var(--ink)); color: var(--b-fg, #fff); text-decoration: none; overflow: hidden;
}
.banner .b-media { position: relative; aspect-ratio: 16 / 10; order: -1; background: #E9ECF2; }
.banner .b-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner .b-text { padding: var(--s5) var(--s5) var(--s6); display: grid; gap: var(--s2); align-content: center; }
.banner .b-brand { font-size: var(--fs-sm); opacity: .8; font-weight: 600; }
.banner .b-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.15; }
.banner .b-price { font-family: var(--font-display); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.banner .b-price strong { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; }
.banner .b-price s { opacity: .7; }
.banner .b-off { display: inline-block; background: var(--sale); color: #fff; font-family: var(--font-display); font-weight: 600; padding: 2px 10px; border-radius: 6px; }
.banner .b-sub { font-size: var(--fs-sm); opacity: .85; }
.banner .btn { justify-self: start; margin-top: var(--s2); }
.banner[data-tone="light"] .btn-dark { --bg: var(--ink); }
.banner[data-tone="dark"] .btn-dark { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.banner-static { --b-bg: var(--ice); --b-fg: var(--ink); }
@media (min-width: 768px) {
  .banner { grid-template-columns: 1fr 1.25fr; grid-template-rows: none; height: clamp(320px, 34vw, 440px); }
  .banner .b-media { order: 0; aspect-ratio: auto; }
  .banner .b-text { padding: var(--s10) var(--s10); }
}
.banner-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.banner-ctrl .dot { width: var(--tap); height: var(--tap); border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.banner-ctrl .dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #C9CCD6; transition: width var(--t-med) var(--ease), background var(--t-med); }
.banner-ctrl .dot[aria-current="true"]::before { width: 24px; background: var(--ink); }
.banner-ctrl .icon-btn { background: transparent; width: 36px; height: 36px; }
.banner-ctrl .icon-btn svg { width: 16px; height: 16px; }
/* arrows sit together in the photo's bottom-right corner, clear of the text */
.banner-arrow { position: absolute; z-index: 2; background: rgba(255, 255, 255, .92); display: none; }
.banner-arrow.prev { right: calc(var(--s4) + 52px); }
.banner-arrow.prev svg { transform: rotate(180deg); }
.banner-arrow.next { right: var(--s4); }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .banner-arrow { display: grid; bottom: calc(var(--tap) + var(--s3) + var(--s4)); } }

/* ---------- service strip ---------- */
.perks ul { list-style: none; margin: var(--s5) auto 0; padding: var(--s3) 0; display: grid; grid-template-columns: 1fr; gap: var(--s3); border-block: 1px solid var(--line); }
.perks li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.perks strong { color: var(--ink); font-weight: 600; }
.perks svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 1px; }
@media (min-width: 768px) { .perks ul { grid-template-columns: repeat(3, 1fr); } .perks ul:has(li[data-trust-contact]:not([hidden])) { grid-template-columns: repeat(4, 1fr); } }

/* ---------- popular categories ---------- */
.quick-cats { display: grid; grid-auto-flow: column; grid-auto-columns: 88px; gap: var(--s3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
.quick-cats::-webkit-scrollbar { display: none; }
.quick-cats a { display: grid; justify-items: center; gap: var(--s2); text-decoration: none; text-align: center; font-size: var(--fs-sm); line-height: 1.25; }
.quick-cats .qc-img { width: 80px; height: 80px; border-radius: 50%; background: #F3F4F7; display: grid; place-items: center; overflow: hidden; transition: background var(--t-fast); }
.quick-cats .qc-img img { width: 72%; height: 72%; object-fit: contain; transition: transform var(--t-med) var(--ease-out); }
.quick-cats a:hover .qc-img { background: var(--ice); }
.quick-cats a:hover .qc-img img { transform: scale(1.08); }
@media (min-width: 1080px) {
  .quick-cats { grid-auto-flow: row; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; }
  .quick-cats .qc-img { width: min(96px, 100%); height: auto; aspect-ratio: 1; }
}

/* ---------- brands ---------- */
.brand-row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
.brand-row::-webkit-scrollbar { display: none; }
.brand-row a {
  flex: none; display: grid; gap: 2px; min-width: 120px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; transition: border-color var(--t-fast);
}
.brand-row a:hover { border-color: var(--ink); }
.brand-row strong { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); }
.brand-row span { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- product rails ---------- */
.rail-section { padding-top: var(--s12); }
.rail-wrap { position: relative; }
.rail-arrow { position: absolute; top: 30%; z-index: 3; background: #fff; border: 1px solid var(--line); display: none; }
.rail-arrow.prev { left: -20px; }
.rail-arrow.prev svg { transform: rotate(180deg); }
.rail-arrow.next { right: -20px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1080px) { .rail-arrow { display: grid; } }
.rail-arrow[disabled] { opacity: 0; pointer-events: none; }
.home-rail { grid-auto-columns: minmax(150px, 44%); gap: var(--s4); }
@media (min-width: 768px) { .home-rail { grid-auto-columns: calc(25% - 12px); } }
@media (min-width: 1280px) { .home-rail { grid-auto-columns: calc(20% - 13px); } }

/* ---------- shop ---------- */
.shop { scroll-margin-top: 64px; }
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s3); }
.shop-title { min-width: 0; }
.shop-head h2 { font-size: var(--fs-xl); }
.shop-head #resultCount { font-size: var(--fs-sm); margin-top: 2px; }
.sort-select { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.sort-label { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 599px) { .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* one light toolbar: lifestyle chips + filters, all the same height */
.filters { position: sticky; top: 64px; z-index: 5; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); margin-inline: calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter); display: grid; gap: var(--s2); margin-bottom: var(--s4); border-block: 1px solid var(--line); }
.filters.stuck { box-shadow: 0 6px 16px rgba(23, 33, 59, .06); }
.filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filters .chip, .filters .toggle, .select select {
  min-height: 40px; height: 40px; border-width: 1px; font-size: var(--fs-sm);
}
.filters .chip { flex: none; padding: 0 var(--s4); font-weight: 500; color: var(--ink-2); border-color: var(--line-strong); }
.filters .chip[aria-pressed="true"], .filters .chip[aria-checked="true"] { color: #fff; font-weight: 600; }
.filter-row { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.select select {
  padding: 0 34px 0 14px; border-radius: var(--r-pill); border-style: solid; border-color: var(--line-strong); background: #fff; appearance: none; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2317213B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; font-weight: 500; max-width: 200px; cursor: pointer;
}
.select select:hover, .filters .toggle:hover { border-color: var(--ink-3); }
.toggle { display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.toggle input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }
.toggle:has(input:checked) { border-color: var(--blue); background: var(--blue-50); color: var(--ink); }
@media (min-width: 1080px) {
  .filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-inline: 0; padding-inline: 0; }
  .filter-row { flex: none; }
  .active-filters { flex-basis: 100%; }
  .filters:has(.active-filters:not(:empty)) { flex-wrap: wrap; }
}
.active-filters { display: flex; flex-wrap: wrap; gap: var(--s2); }
.active-filters:empty { display: none; }
.active-filters .chip { min-height: 36px; background: var(--lilac-50); border-color: transparent; }
@media (min-width: 1080px) { .filters { top: 72px; } .shop { scroll-margin-top: 72px; } }
.grid-state { text-align: center; padding: var(--s12) var(--s4); color: var(--ink-3); display: grid; gap: var(--s3); justify-items: center; }
.more { display: flex; justify-content: center; margin-top: var(--s8); }


/* ---------- WAVY Picks banner: pastel, playful, real products ---------- */
.pk-banner { padding-top: var(--s12); }
.pk-inner {
  position: relative; overflow: hidden; border-radius: var(--r-xl); display: grid; gap: var(--s4);
  padding: var(--s6) var(--s5) var(--s5);
  background:
    radial-gradient(60% 80% at 100% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(70% 90% at 0% 100%, var(--ice) 0%, rgba(221, 244, 250, 0) 70%),
    linear-gradient(135deg, #E9E7FF 0%, #F3F1FF 55%, #E6F6FB 100%);
}
.pk-copy { position: relative; z-index: 2; display: grid; gap: var(--s3); align-content: center; }
.pk-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; color: var(--blue); }
.pk-heart svg { width: 18px; height: 18px; fill: #F28BB0; display: block; }
.pk-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.15; }
.pk-sub { color: var(--ink-2); max-width: 34ch; }
.pk-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pk-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .85); border: 1.5px solid #fff; text-decoration: none; font-family: var(--font-display);
  font-size: var(--fs-sm); color: var(--ink); box-shadow: 0 4px 12px rgba(63, 92, 232, .10);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.pk-chip:hover { background: #fff; transform: translateY(-2px); }
.pk-chip:active { transform: scale(.96); }
.pk-copy .btn { justify-self: start; }

.pk-art { position: relative; min-height: 0; aspect-ratio: 1.35; }
.pk-bubble {
  position: absolute; display: block; height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff;
  border: 6px solid var(--ring, #fff); box-shadow: 0 16px 36px rgba(63, 92, 232, .16); animation: pk-float 5s ease-in-out infinite;
}
/* the photo sits inside a fixed circle, so tall products can't stretch it */
.pk-bubble img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; border-radius: 12px; transition: transform var(--t-med) var(--ease-out); }
.pk-bubble:hover img { transform: scale(1.08) rotate(-3deg); }
.pk-tag {
  position: absolute; bottom: 4%; right: -6%; background: var(--ink); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 13px; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.pk-bubble.b0 { width: 46%; aspect-ratio: 1; left: 2%; top: 8%; }
.pk-bubble.b1 { width: 34%; aspect-ratio: 1; right: 6%; top: 0; animation-delay: -1.2s; --ring: #FFE1EC; }
.pk-bubble.b2 { width: 30%; aspect-ratio: 1; right: 22%; bottom: 2%; animation-delay: -2.4s; --ring: var(--ice); }
.pk-bubble.b3 { width: 24%; aspect-ratio: 1; left: 40%; bottom: 0; animation-delay: -3.3s; --ring: #E4E1FF; }
.pk-spark { position: absolute; color: var(--blue); animation: pk-twinkle 2.8s ease-in-out infinite; }
.pk-spark svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.pk-spark.s0 { width: 22px; height: 22px; left: 44%; top: 4%; }
.pk-spark.s1 { width: 14px; height: 14px; right: 2%; top: 46%; color: #9C93FF; animation-delay: -1s; }
.pk-spark.s2 { width: 18px; height: 18px; left: 0; bottom: 18%; color: #F28BB0; animation-delay: -1.8s; }
.pk-dot { position: absolute; border-radius: 50%; background: #fff; opacity: .9; }
.pk-dot.d0 { width: 10px; height: 10px; left: 30%; top: 0; }
.pk-dot.d1 { width: 8px; height: 8px; right: 40%; top: 40%; background: var(--lilac); }
@keyframes pk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pk-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } }
.lite .pk-bubble, .lite .pk-spark { animation: none; }
@media (prefers-reduced-motion: reduce) { .pk-bubble, .pk-spark { animation: none; } }

@media (min-width: 768px) {
  .pk-inner { grid-template-columns: 1fr 1fr; padding: var(--s10) var(--s10); min-height: 360px; }
  .pk-art { aspect-ratio: auto; min-height: 300px; }
}
@media (min-width: 1280px) { .pk-inner { grid-template-columns: 1fr 1.1fr; } .pk-art { min-height: 340px; } }
.pk-bubble { z-index: 1; }
.pk-tag { z-index: 2; }
.pk-bubble.b0 .pk-tag { right: auto; left: -4%; }
@media (max-width: 767px) {
  .pk-bubble.b3 { display: none; }
  .pk-bubble.b2 { right: 30%; bottom: 0; }
}
.pk-copy h2 .pk-line { display: block; }
.pk-copy h2 .pk-line:first-child { white-space: nowrap; letter-spacing: -.02em; }

/* ---------- brand intent: Midnight Ink band with wave edges ---------- */
.intent { margin-top: var(--s16); color: #fff; }
.intent-edge { display: block; width: 100%; height: clamp(28px, 4vw, 64px); fill: var(--ink); }
.intent-edge-top { margin-bottom: -1px; }
.intent-edge-bottom { margin-top: -1px; }
.intent-band { position: relative; overflow: hidden; background: var(--ink); padding-block: var(--s10) var(--s12); }
/* soft light at the bottom in the CI colours (instead of illustrated clouds) */
.intent-glow i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
/* glows sit behind the cards and fade out before the bottom wave, so the band and its edge stay one colour */
.intent-glow i:nth-child(1) { width: 38%; height: 38%; left: 2%; bottom: 16%; background: var(--blue); opacity: .45; }
.intent-glow i:nth-child(2) { width: 34%; height: 34%; left: 34%; bottom: 12%; background: var(--lilac); opacity: .28; }
.intent-glow i:nth-child(3) { width: 34%; height: 36%; right: 2%; bottom: 16%; background: var(--ice); opacity: .2; }
.intent-glow { position: absolute; inset: 0; z-index: 0; }
.intent-inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--s3); }
.intent-mark { width: 56px; height: auto; margin-bottom: var(--s2); }
.intent .eyebrow { color: var(--lilac); letter-spacing: .04em; }
.intent h2 { font: 600 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: -.01em; color: #fff; max-width: 34ch; text-wrap: balance; }
.intent h2 span { display: block; color: var(--ice); }
.intent-th { font: 500 var(--fs-lg)/1.6 var(--font-display); color: #C9CEDD; }
.intent-th span { display: inline-block; } /* break between the two phrases, never inside ทุกคน */
.intent-th .nw { white-space: nowrap; }
.intent-cards { list-style: none; margin: var(--s8) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.intent-cards li {
  display: grid; justify-items: center; align-content: start; gap: var(--s2); padding: var(--s6) var(--s4);
  border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(8, 12, 30, .25);
}
.intent-cards svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ice); fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intent-cards h3 { font: 600 var(--fs-md)/1.35 var(--font-display); }
.intent-cards p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.intent-cards .phrase { display: inline-block; }
.intent-cards .nw { white-space: nowrap; } /* Thai: break between phrases, not inside words */
@media (min-width: 900px) {
  .intent-band { padding-block: var(--s12) var(--s16); }
  .intent-cards { grid-template-columns: repeat(4, 1fr); max-width: 1040px; gap: var(--s4); }
  .intent-cards li { padding: var(--s8) var(--s5); }
}
/* phones: one card per row, icon on the left */
@media (max-width: 599px) {
  .intent-cards { grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s6); }
  .intent-cards li { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: var(--s4); row-gap: 2px; text-align: left; padding: var(--s4) var(--s5); }
  .intent-cards svg { grid-row: span 2; }
  .intent-cards p { text-wrap: pretty; }
}