/* SURSATT — sursatt.shop
   สีประจำลายอยู่ใน index.html ที่แต่ละลาย (--breed / --tint) */

:root {
  --ink: #000;
  --chalk: #f1eee7;
  --smoke: #a19e96;
  --rule: rgba(241, 238, 231, 0.16);
  --panel: #121212;
  --signal: #fb7a00;
  --line: #06c755;
  --font: "Kanit", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --dock-h: 72px;
  --measure: 36rem;
  --gutter: clamp(1.1rem, 4.5vw, 3rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--chalk); color: var(--ink); padding: .5rem 1rem; border-radius: 4px;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- ข้อความรอข้อมูลจากผู้ใช้ (ลบออกก่อนขึ้นเว็บจริง) ---------- */
.pending { outline: 1px dashed var(--signal); outline-offset: 4px; }
.pending-tag {
  display: inline-block; margin-left: .4rem; padding: 0 .45rem;
  font-size: .75rem; font-weight: 400; line-height: 1.6;
  color: var(--ink); background: var(--signal); border-radius: 3px; vertical-align: middle;
}

/* ---------- Header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.wordmark {
  font-weight: 800; font-style: italic; font-size: 1.35rem; letter-spacing: .02em;
  text-decoration: none; line-height: 1;
}
.wordmark img { height: 46px; width: auto; }
.foot .wordmark img { height: 56px; }
.top__line {
  font-size: .9375rem; font-weight: 400; text-decoration: none;
  padding: .35rem .9rem; border: 1px solid var(--rule); border-radius: 999px;
}
.top__line:hover { border-color: var(--line); color: var(--line); }

/* ---------- Chrome type (ตัวอักษรโครมยุค 90s เหมือนบนเสื้อ) ---------- */
.chrome {
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .95;
  padding-right: .14em; /* กันปลายตัวเอียงโดนตัด */
  color: var(--tint, var(--chalk));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome {
    background-image:
      linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.95) 48%, transparent 56% 100%),
      linear-gradient(180deg,
        #ffffff 0%,
        var(--tint) 44%,
        #ffffff 49%,
        var(--breed) 51%,
        var(--breed) 60%,
        var(--tint) 84%,
        #ffffff 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--tint) 55%, transparent);
  }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(1.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 8vw, 5rem); }
.hero__drop { font-size: .875rem; color: var(--smoke); letter-spacing: .04em; }
.hero__title { margin-top: .4rem; font-size: clamp(1.3rem, 4.6vw, 1.9rem); max-width: 22em; }

.lineup { margin: clamp(1.4rem, 5vw, 2.6rem) 0; }
.lineup ol { list-style: none; margin: 0; padding: 0; }
.lineup a {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .9rem;
  text-decoration: none; padding: .12em 0;
}
.lineup .chrome { font-size: clamp(2.35rem, 10.4vw, 5.75rem); }
.lineup__thai { font-size: clamp(.9rem, 2.6vw, 1.05rem); color: var(--smoke); font-weight: 400; }
.lineup a:hover .lineup__thai,
.lineup a:focus-visible .lineup__thai { color: var(--tint); }

@media (prefers-reduced-motion: no-preference) {
  .lineup .chrome { animation: shine 1.6s cubic-bezier(.3,.6,.3,1) .25s 1 both; }
  .lineup li:nth-child(2) .chrome { animation-delay: .37s; }
  .lineup li:nth-child(3) .chrome { animation-delay: .49s; }
  .lineup li:nth-child(4) .chrome { animation-delay: .61s; }
  .lineup li:nth-child(5) .chrome { animation-delay: .73s; }
}
@keyframes shine {
  from { background-position: 160% 0, 0 0; }
  to   { background-position: -60% 0, 0 0; }
}

.hero__lede { font-size: clamp(1.05rem, 3vw, 1.25rem); max-width: var(--measure); }
.facts {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: .55rem; max-width: var(--measure);
}
.facts li { padding-left: 1.1rem; position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .45rem; height: .45rem; background: var(--signal); transform: rotate(45deg);
}

/* ---------- Section heads ---------- */
.section { padding-top: clamp(3rem, 9vw, 6rem); }
.section__head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.section__head h2 { font-size: clamp(1.6rem, 5vw, 2.25rem); }
.section__head p { margin-top: .5rem; color: var(--smoke); }

/* ---------- Product ---------- */
.product {
  border-top: 2px solid var(--breed);
  padding: clamp(1.6rem, 5vw, 3rem) 0 clamp(2.4rem, 7vw, 4.5rem);
  display: grid; gap: 1.6rem;
}
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .product:nth-of-type(even) .product__media { order: 2; }
  .product__media { position: sticky; top: 1.5rem; }
}

.shots { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #e3e3e3; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot[hidden] { display: none; }
.shot--placeholder {
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background:
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--breed) 55%, transparent), transparent 70%),
    var(--panel);
  border: 1px dashed color-mix(in srgb, var(--tint) 45%, transparent);
  border-radius: 6px;
  color: var(--smoke); font-size: .9375rem;
}
.shot--placeholder strong { display: block; color: var(--chalk); font-weight: 400; font-size: 1.05rem; }

.views { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.views__note { margin-left: auto; font-size: .8125rem; color: var(--smoke); }
.views button {
  font: inherit; font-size: .9375rem; font-weight: 400; color: var(--chalk);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem 1rem; cursor: pointer;
}
.views button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

.product__name { font-size: clamp(2.3rem, 8.4vw, 3.9rem); }
.product__tagline { margin-top: .35rem; font-style: italic; font-weight: 400; color: var(--tint); font-size: 1.15rem; }
.product__breed { margin-top: .9rem; max-width: var(--measure); }
.print { margin: 1rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; color: var(--smoke); font-size: .9375rem; }
.print dt { color: var(--chalk); font-weight: 400; }
.print dd { margin: 0; }

/* ---------- Order form ---------- */
.order { margin-top: 1.8rem; display: grid; gap: 1.4rem; }
.order fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.order legend { font-weight: 600; margin-bottom: .55rem; padding: 0; }
.order legend a { font-weight: 300; font-size: .9375rem; color: var(--smoke); margin-left: .6rem; }

.fabrics { display: grid; gap: .5rem; }
.fabric { position: relative; display: block; cursor: pointer; }
.fabric input, .size input { position: absolute; opacity: 0; pointer-events: none; }
.fabric__box {
  display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: baseline;
  padding: .7rem .95rem; border: 1px solid var(--rule); border-radius: 6px;
}
.fabric__name { font-weight: 400; }
.fabric__note { grid-column: 1; color: var(--smoke); font-size: .875rem; line-height: 1.45; }
.fabric__price { grid-row: 1; grid-column: 2; color: var(--signal); font-weight: 600; white-space: nowrap; }
.fabric input:checked + .fabric__box { border-color: var(--tint); box-shadow: inset 0 0 0 1px var(--tint); }
.fabric input:focus-visible + .fabric__box { outline: 3px solid var(--signal); outline-offset: 2px; }

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.size { cursor: pointer; }
.size span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.3rem; height: 2.9rem; padding: 0 .9rem;
  border: 1px solid var(--rule); border-radius: 6px; font-weight: 400;
}
.size--help span { font-size: .9375rem; }
.size input:checked + span { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.size input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.sizes.is-missing .size span { border-color: var(--signal); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 6px; }
.qty button {
  font: inherit; font-size: 1.3rem; width: 2.9rem; height: 2.9rem;
  background: transparent; color: var(--chalk); border: 0; cursor: pointer;
}
.qty output { min-width: 2.4rem; text-align: center; font-weight: 600; }

.btn-line {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.4rem; padding: .6rem 1.2rem; border-radius: 8px;
  background: var(--line); color: #000; text-decoration: none;
  font-weight: 600; font-size: 1.1rem;
}
.btn-line:hover { filter: brightness(1.08); }
.btn-line svg { width: 1.35rem; height: 1.35rem; flex: none; }
.order__hint { min-height: 1.4em; color: var(--signal); font-size: .9375rem; }
.order__ship { color: var(--smoke); font-size: .9375rem; }

/* ---------- Size guide ---------- */
.sizer { display: grid; gap: 2rem; }
@media (min-width: 900px) { .sizer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.height { padding: 1.4rem; border: 1px solid var(--rule); border-radius: 8px; }
.height label { font-weight: 600; display: block; }
.height input[type="range"] { width: 100%; margin: 1rem 0 .4rem; accent-color: var(--signal); height: 2rem; }
.height__scale { display: flex; justify-content: space-between; color: var(--smoke); font-size: .8125rem; }
.height__out { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pick { padding: .9rem 1rem; background: var(--panel); border-radius: 6px; }
.pick span { display: block; color: var(--smoke); font-size: .875rem; }
.pick strong { font-size: 2rem; font-weight: 800; font-style: italic; line-height: 1.1; }
.height__cm { font-size: 1.05rem; margin-top: .2rem; }
.height__cm b { font-weight: 600; color: var(--signal); }

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table caption { text-align: left; font-weight: 600; margin-bottom: .6rem; }
.table th, .table td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--rule); }
.table thead th { color: var(--smoke); font-weight: 400; font-size: .875rem; }
.table tbody th { font-weight: 600; }
.notes { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--smoke); font-size: .9375rem; display: grid; gap: .35rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: step; max-width: 46rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: .1rem .9rem; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  font-weight: 800; font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--signal);
}
.steps strong { font-weight: 600; }
.steps span { color: var(--smoke); }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 400; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.4rem; color: var(--smoke);
}
.faq details[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 1.2rem; display: grid; gap: .6rem; color: #d6d2c9; }
.faq__body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(4rem, 10vw, 7rem); padding-top: 2.5rem; padding-bottom: 2rem; border-top: 1px solid var(--rule); }
.foot__grid { display: grid; gap: 1.8rem; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.2fr 1fr 1.4fr; } }
.foot h2 { font-size: 1rem; margin-bottom: .5rem; }
.foot p, .foot li { color: var(--smoke); font-size: .9375rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.foot a { text-decoration-color: var(--rule); text-underline-offset: 3px; }
.foot a:hover { color: var(--chalk); text-decoration-color: currentColor; }
.foot__legal { margin-top: 2rem; font-size: .8125rem; color: var(--smoke); }
.linkbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }

/* ---------- Dock: ปุ่ม LINE ติดล่างจอ ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}
.dock__in { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: .9rem; }
.dock__sum { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; color: var(--smoke); }
.dock__sum b { display: block; color: var(--chalk); font-weight: 400; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .btn-line { min-height: 3rem; font-size: 1rem; padding: .5rem 1.1rem; white-space: nowrap; }

/* ---------- Cookie consent (แสดงเมื่อใส่ Pixel ID แล้วเท่านั้น) ---------- */
.consent {
  position: fixed; left: var(--gutter); right: var(--gutter); z-index: 45;
  bottom: calc(var(--dock-h) + .8rem + env(safe-area-inset-bottom));
  max-width: 34rem; margin: 0 auto;
  background: #1b1b1b; border: 1px solid var(--rule); border-radius: 10px;
  padding: 1rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.consent[hidden] { display: none; }
.consent p { font-size: .9375rem; }
.consent__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.consent button {
  font: inherit; font-weight: 400; padding: .6rem; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--chalk); border: 1px solid var(--chalk);
}

@media (min-width: 900px) {
  .dock__sum { font-size: .9375rem; }
}

/* ===== Hero v2: streetwear ===== */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); }
.ticker { overflow: hidden; background: var(--signal); color: #000; border-block: 2px solid #000; }
.ticker__track { display: flex; width: max-content; animation: tick 28s linear infinite; }
.ticker span { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: .95rem; padding: .45rem 1.1rem; white-space: nowrap; }
.ticker span::after { content: "★"; margin-left: 2.2rem; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

.hero { padding-top: clamp(1.4rem, 5vw, 3rem); padding-bottom: clamp(2rem, 6vw, 4rem); }
.hero__head { position: relative; }
.hero__big { margin: .6rem 0 0; display: grid; font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: clamp(3.4rem, 17vw, 10rem); line-height: .86; letter-spacing: -.035em; }
.hero__big span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px var(--chalk); }
.hero__big span:nth-child(3) { color: var(--signal); }
.sticker { position: absolute; right: var(--gutter); top: 2.2rem; transform: rotate(8deg);
  background: var(--chalk); color: #000; font-weight: 800; font-size: clamp(.9rem, 3vw, 1.2rem);
  padding: .35rem .8rem; border-radius: 4px; box-shadow: 4px 4px 0 var(--signal); }
.hero__title { margin-top: 1.2rem; font-size: clamp(1.15rem, 4vw, 1.6rem); }
.hero__lede { margin-top: .3rem; color: var(--smoke); }

.rail { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1.6rem var(--gutter) .6rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(68vw, 300px); scroll-snap-align: start; text-decoration: none;
  background: #111; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 0 var(--breed); transition: box-shadow .2s, transform .2s; }
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 30px -8px var(--breed); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #e3e3e3; border-bottom: 3px solid var(--breed); }
.card__name { display: block; font-size: 1.5rem; padding: .7rem .9rem 0; }
.card__meta { display: block; padding: .2rem .9rem .9rem; color: var(--smoke); font-size: .9rem; }

.hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn-main, .btn-ghost { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 1.5rem;
  border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.btn-main { background: var(--signal); color: #000; box-shadow: 4px 4px 0 var(--chalk); }
.btn-ghost { border: 1.5px solid var(--chalk); }
.chips { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; }
@media (min-width: 900px) { .rail { padding-left: max(var(--gutter), calc((100vw - 76rem) / 2 + var(--gutter))); } }
.rail { scroll-padding-inline: var(--gutter); }
@media (min-width: 900px) { .rail { scroll-padding-inline: max(var(--gutter), calc((100vw - 76rem) / 2 + var(--gutter))); } }

/* ===== Size finder ===== */
.sizer__label { display: block; font-weight: 600; margin: 1.1rem 0 .5rem; }
.sizer__label:first-child { margin-top: 0; }
.sizer__label b { color: var(--signal); }
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.tab { font: inherit; font-size: .9rem; color: var(--chalk); background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .85rem; }
.tab[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #000; font-weight: 600; }
.pick--main { background: var(--signal); color: #000; }
.pick--main span { color: #000; }
.table tr.is-pick th, .table tr.is-pick td { color: var(--signal); font-weight: 600; }
.size.is-off span { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
[data-size-note] { color: var(--signal); }

/* ===== Scroll motion ===== */
.motion .section__head h2, .motion .product__name { clip-path: inset(0 100% 0 0); transform: skewX(-8deg) translateX(-12px);
  transition: clip-path .7s cubic-bezier(.7,0,.2,1) var(--d,0ms), transform .7s cubic-bezier(.7,0,.2,1) var(--d,0ms); }
.motion .section__head h2.is-in, .motion .product__name.is-in { clip-path: inset(0 -10% 0 0); transform: none; }
.motion .section__head p, .motion .product__tagline, .motion .steps li, .motion .faq details, .motion .chips li {
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease var(--d,0ms), transform .5s ease var(--d,0ms); }
.motion .section__head p.is-in, .motion .product__tagline.is-in, .motion .steps li.is-in, .motion .faq details.is-in, .motion .chips li.is-in { opacity: 1; transform: none; }
.motion .card, .motion .pick { opacity: 0; transform: scale(.86) rotate(-3deg);
  transition: opacity .45s ease var(--d,0ms), transform .55s cubic-bezier(.3,1.6,.5,1) var(--d,0ms); }
.motion .card.is-in, .motion .pick.is-in { opacity: 1; transform: none; }
.motion .card.is-in:hover { transform: translateY(-3px); }
.motion .sticker { animation: stick .6s cubic-bezier(.3,1.7,.5,1) .5s both; }
@keyframes stick { from { transform: rotate(-30deg) scale(0); } to { transform: rotate(8deg) scale(1); } }

/* ===== Color, price, promo ===== */
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.order__price { font-weight: 600; font-size: 1.15rem; color: var(--signal); }
.order__price span { color: var(--smoke); font-weight: 300; font-size: .85rem; margin-left: .4rem; }
.promo { display: grid; gap: .9rem; margin-top: clamp(1rem, 4vw, 2rem); }
@media (min-width: 900px) { .promo { grid-template-columns: 1.3fr 1fr; } }
.promo__card { position: relative; border: 2px solid var(--chalk); border-radius: 12px; padding: 1.3rem 1.2rem 1.1rem;
  background: #0f0f0f; box-shadow: 6px 6px 0 var(--chalk); }
.promo__card--hot { background: var(--signal); color: #000; border-color: #000; box-shadow: 6px 6px 0 var(--chalk); }
.promo__card p { margin-top: .3rem; font-size: .95rem; }
.promo__big { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(1.9rem, 8vw, 2.8rem); line-height: 1; }
.promo__big b { display: inline-block; background: #000; color: var(--signal); padding: 0 .3em; transform: rotate(-2deg); }
.promo__card:not(.promo__card--hot) .promo__big b { background: var(--chalk); color: #000; }
.promo__tag { position: absolute; top: -.8rem; right: 1rem; background: #000; color: var(--chalk); border: 2px solid var(--chalk);
  font-weight: 800; font-size: .8rem; padding: .1rem .6rem; border-radius: 999px; transform: rotate(6deg); }
.motion .promo__card { opacity: 0; transform: translateY(20px) rotate(-1.5deg); transition: opacity .5s ease var(--d,0ms), transform .6s cubic-bezier(.3,1.6,.5,1) var(--d,0ms); }
.motion .promo__card.is-in { opacity: 1; transform: none; }

.top__right { display: flex; align-items: center; gap: .6rem; }
.lang { font-weight: 800; font-style: italic; text-decoration: none; padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .9rem; }
.lang:hover { border-color: var(--signal); color: var(--signal); }

/* ===== AI images ===== */
.hero__photo { position: relative; margin: 1.4rem 0 0; }
.hero__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-block: 2px solid var(--signal); }
@media (min-width: 900px) { .hero__photo { max-width: 76rem; margin-inline: auto; padding: 0 var(--gutter); } .hero__photo img { border: 2px solid var(--signal); border-radius: 12px; } }
.hero__photo figcaption, .breed__note { font-size: .75rem; color: var(--smoke); }
.hero__photo figcaption { position: absolute; right: calc(var(--gutter) + .6rem); bottom: .5rem; background: rgba(0,0,0,.6); padding: 0 .5rem; border-radius: 4px; }
.breed { display: flex; gap: .9rem; align-items: center; margin-top: .9rem; }
.breed__img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--breed); flex: none; }
.breed .product__breed { margin-top: 0; }
.breed__note { display: block; }
.shot--wear { object-position: center 30%; }

/* ===== Lookbook ===== */
.look { padding-top: clamp(3rem, 9vw, 6rem); }
.look .section__head { margin-bottom: 0; }
.rail--look { padding-top: 1rem; }
.look__item { flex: 0 0 min(62vw, 280px); scroll-snap-align: start; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); }
.look__item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease; }
.look__item:hover img { transform: scale(1.04); }
.look__note { font-size: .8rem; color: var(--smoke); margin-top: .4rem; }
.motion .look__item { opacity: 0; transform: translateY(24px) rotate(1.5deg); transition: opacity .5s ease var(--d,0ms), transform .6s cubic-bezier(.3,1.5,.5,1) var(--d,0ms); }
.motion .look__item.is-in { opacity: 1; transform: none; }

/* ===== ขั้นตอนการทำเสื้อ (การ์ตูน 4 ภาพ) ===== */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; counter-reset: proc; }
@media (min-width: 52rem) { .process { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.process li { counter-increment: proc; display: grid; gap: .35rem; align-content: start; }
.process img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--rule); background: #000; }
.process strong { font-weight: 600; font-size: 1.05rem; margin-top: .35rem; }
.process strong::before { content: counter(proc, decimal-leading-zero) " "; color: var(--signal, #FB7A00); font-style: italic; font-weight: 800; margin-right: .2rem; }
.process span { color: var(--smoke); font-size: .9375rem; }

/* ===== ลิงก์นโยบายในหน้าสินค้า ===== */
.order__policy { margin-top: .4rem; font-size: .875rem; }
.order__policy a { color: var(--smoke); text-underline-offset: 3px; }
.order__policy a:hover { color: var(--chalk); }

/* ===== หน้านโยบายเปลี่ยน/คืน ===== */
.policy { max-width: 46rem; padding-top: 1.5rem; }
.policy h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.2; margin: .8rem 0 .6rem; }
.policy__back { color: var(--smoke); text-decoration: none; font-size: .9375rem; }
.policy__back:hover { color: var(--chalk); }
.policy__lede { color: var(--smoke); margin-bottom: 1.5rem; }
.policy__case { border-top: 1px solid var(--rule); padding: 1.3rem 0; }
.policy__case h2 { font-size: 1.2rem; display: flex; gap: .7rem; align-items: baseline; }
.policy__case h2 span { color: #FB7A00; font-style: italic; font-weight: 800; }
.policy__sub { color: var(--smoke); margin: .3rem 0 .5rem; font-size: .9375rem; }
.policy__case ul, .policy__case ol { margin: .4rem 0 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.policy__tip { margin-top: .7rem; font-size: .9375rem; color: var(--smoke); }
.policy__time { margin: .9rem 0 1rem; font-weight: 600; }
.policy__case--how .btn-line { display: inline-flex; }
.policy__facts { border-top: 1px solid var(--rule); padding-top: 1rem; color: var(--smoke); font-size: .875rem; }
.policy .pending { display: inline; outline-offset: 2px; }
.policy-page .foot { margin-top: 2.5rem; }
.motion .process li { opacity: 0; transform: translateY(20px); transition: opacity .5s ease var(--d,0ms), transform .6s cubic-bezier(.3,1.4,.5,1) var(--d,0ms); }
.motion .process li.is-in { opacity: 1; transform: none; }

/* ===== ปุ่ม LINE ล่างจอย้ายไปซ้าย: Netlify Free แสดงป้าย "Powered by Netlify" มุมขวาล่าง ปิดไม่ได้ =====
   ถ้าย้ายไปโฮสต์ที่ไม่มีป้าย ลบบล็อกนี้ได้ */
.dock__in { flex-direction: row-reverse; }
.dock__sum { text-align: right; }
.dock .btn-line { padding: .5rem 1rem; }

/* ===== เหตุผลเรื่องราคา (ใต้หัว "เลือกลาย ผ้า และไซซ์") ===== */
.why { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.why li { font-size: .875rem; padding: .3rem .75rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--chalk); }
.why li::before { content: "✓ "; color: var(--signal); font-weight: 600; }