/* สไตล์ของหน้าสาธารณะทั้งหมด (หน้าแรก · หน้าประกาศงาน · หน้าเงื่อนไข)
   ชื่อไฟล์ยังเป็น job.css เพราะถูกอ้างจากเซิร์ฟเวอร์และเทสต์อยู่แล้ว
   🪤 CSP ตั้ง style-src 'self' — ห้ามใช้ style= ในสคริปต์ ทุกค่าที่ต้องเปลี่ยนตามข้อมูลให้ทำเป็น data- attribute */
@font-face{font-family:Prompt;src:url('/assets/Prompt-Regular.ttf');font-display:swap}
@font-face{font-family:Prompt;src:url('/assets/Prompt-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:Prompt;src:url('/assets/Prompt-SemiBold.ttf');font-weight:600;font-display:swap}

/* ชุดสีเดียวกับระบบหลังล็อกอิน (public/style.css) — ก่อนหน้านี้สองฝั่งใช้คนละชุด เลยดูเหมือนคนละเว็บ */
:root{
 --navy:#062541;--navy-2:#0d3a5e;--ink:#13344b;--muted:#657585;--faint:#8b9aa6;
 --orange:#e7663e;--orange-dark:#c84f29;--orange-soft:#fff2ec;
 --green:#237359;--green-soft:#e7f3ee;--amber-soft:#fff7ec;--amber-line:#f0dcc0;
 --red:#a8443c;--red-soft:#fbeceb;
 --line:#e3eaee;--bg:#f4f7f8;--white:#fff;
 --r-sm:10px;--r:14px;--r-lg:20px;
 --shadow:0 1px 2px #0625410d,0 10px 30px #0625410a;
 --shadow-lift:0 4px 10px #06254112,0 18px 40px #06254114;
 --page:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.85 Prompt,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.45;letter-spacing:-.2px;text-wrap:balance}
p{margin:0}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ── แถบบน ─────────────────────────────────────────────── */
.site-bar{position:sticky;top:0;z-index:20;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-inner{max-width:var(--page);margin:auto;padding:12px 20px;display:flex;align-items:center;gap:22px}
.bar-brand{display:flex;align-items:center}
.bar-brand img{width:112px;height:auto;display:block}
.bar-nav{display:flex;gap:20px;margin-left:auto;font-size:13.5px}
.bar-nav a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.bar-nav a:hover{color:var(--ink);border-color:var(--orange)}

/* ── ปุ่ม ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:12px;font-weight:500;font-size:14px;text-decoration:none;border:1px solid transparent;line-height:1.5;transition:background .15s,border-color .15s,transform .15s}
.btn-sm{min-height:38px;padding:7px 16px;font-size:13px}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 16px #e7663e33}
.btn-primary:hover{background:var(--orange-dark)}
.btn-outline{border-color:var(--line);background:var(--white);color:var(--ink)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange-dark)}
.btn-light{background:#ffffff1f;color:#fff;border-color:#ffffff40}
.btn-light:hover{background:#ffffff2e}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn-line{background:#06c755;color:#fff;font-weight:500}
.btn-google{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:500}
.btn-google:hover{background:#f7f8f8;border-color:#c6cacd}
.btn-line:hover{background:#05a948}
.or{display:flex;align-items:center;gap:14px;margin:22px 0 4px;color:var(--faint);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-ghost:hover{border-color:var(--orange)}

/* ── หัวเว็บแบบเข้ม ─────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:56px 20px 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:#e7663e1f}
.hero-inner{max-width:var(--page);margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:1}
.eyebrow{font-size:11px;letter-spacing:2.4px;color:#f0a98e;margin-bottom:14px;font-weight:500}
.hero h1{font-size:40px;line-height:1.3;margin-bottom:16px}
.hero .lead{color:#c5d6e2;font-size:15.5px;max-width:34rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-stats{display:flex;gap:34px;list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid #ffffff21}
.hero-stats strong{display:block;font-size:24px;line-height:1.3;font-weight:600}
.hero-stats span{font-size:12px;color:#9fb6c6}
.hero-art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:118px 118px;gap:10px}
.hero-art figure{margin:0;border-radius:var(--r);overflow:hidden;line-height:0;box-shadow:0 14px 34px #00000038}
.hero-art figure:first-child{grid-row:span 2}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art figcaption{position:absolute;left:-9999px}
.art-note{grid-column:1/-1;font-size:11px;color:#8fa8ba;line-height:1.6;margin-top:2px}

/* ── โครงหน้า ──────────────────────────────────────────── */
main{display:block}
.section{max-width:var(--page);margin:auto;padding:56px 20px 8px}
.section.band{max-width:none;background:var(--white);border-block:1px solid var(--line);margin-top:56px;padding:52px 20px}
.band-inner{max-width:var(--page);margin:auto}
.section-head{margin-bottom:26px}
.section-head h2{font-size:24px}
.section-head p{color:var(--muted);font-size:14px;margin-top:6px}
.count-chip{display:inline-block;background:var(--orange-soft);color:var(--orange-dark);border-radius:999px;font-size:12.5px;padding:3px 12px;margin-left:10px;vertical-align:middle;font-weight:500}

/* ── การ์ดงาน ──────────────────────────────────────────── */
.job-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.job-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;overflow:hidden;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s}
.job-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#d5e0e6}
.card-photo{position:relative;line-height:0}
.card-photo img{width:100%;height:158px;object-fit:cover;display:block}
.card-photo .ai-tag{position:absolute;right:9px;bottom:9px;background:#062541cc;color:#fff;font-size:10.5px;padding:2px 9px;border-radius:999px;line-height:1.8}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.job-card h2{font-size:16.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.job-card .brand{font-size:12.5px;color:var(--faint);margin-top:-4px}
.card-reward{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;font-weight:500;color:#8a5a22}
.card-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;font-size:12.5px;border-top:1px solid var(--line);padding-top:12px}
.card-meta dt{color:var(--faint);font-size:11.5px;margin:0}
.card-meta dd{margin:0;font-weight:500;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:#f1f5f7;color:#5d7181;border-radius:6px;font-size:11.5px;padding:2px 8px;line-height:1.7}
.card-go{margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--orange-dark);font-weight:500}
.job-card:hover .card-go{text-decoration:underline}

/* ── ป้ายสถานะ ─────────────────────────────────────────── */
.badges{display:flex;flex-wrap:wrap;gap:7px}
.badge{display:inline-block;border-radius:999px;font-size:11.5px;padding:4px 11px;background:#eef2f5;color:#55697a;line-height:1.7}
.badge.code{background:var(--navy);color:#fff;letter-spacing:1.4px;font-weight:600}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--red-soft);color:var(--red)}
.badge.soft{background:var(--orange-soft);color:var(--orange-dark)}

/* ── ขั้นตอนการสมัคร ───────────────────────────────────── */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.steps li{counter-increment:s;position:relative;padding:22px 20px 22px 20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font-weight:600;font-size:14px;margin-bottom:12px}
.steps h3{font-size:15.5px;margin-bottom:5px}
.steps p{font-size:13.5px;color:var(--muted);line-height:1.8}

/* ── คำถามที่พบบ่อย ────────────────────────────────────── */
.faq{display:grid;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:2px 18px}
.faq summary{cursor:pointer;padding:15px 0;font-weight:500;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:20px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.9}
.faq a{color:var(--orange-dark)}

/* ── หน้าประกาศงาน ─────────────────────────────────────── */
.job-page{max-width:var(--page);margin:auto;padding:22px 20px 60px}
.backlink{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:14px}
.backlink:hover{color:var(--orange-dark)}
.job-layout{display:grid;grid-template-columns:1fr 20.5rem;gap:24px;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.job-main{overflow:hidden}
.hero-photo{margin:0;position:relative;line-height:0}
.hero-photo img{width:100%;height:290px;object-fit:cover;display:block}
.hero-photo figcaption{position:absolute;right:12px;bottom:12px;background:#062541cc;color:#fff;font-size:11px;padding:3px 10px;border-radius:999px;line-height:1.7}
.job-head{padding:24px 30px 0}
.job-head h1{font-size:27px;margin:14px 0 6px}
.job-head .brand{font-size:13px;color:var(--faint)}
.job-body{padding:0 30px 30px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:24px 0 8px}
.facts>div{background:var(--white);padding:13px 16px}
.facts dt{font-size:11.5px;color:var(--faint);margin-bottom:2px}
.facts dd{margin:0;font-size:13.5px;font-weight:500;line-height:1.6}
.job-body section{margin-top:28px}
.job-body h2{font-size:18px;margin-bottom:10px}
.body-text{white-space:pre-wrap;font-size:14px;line-height:1.95;color:#3d5464}
.product-box{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:14px;background:#fafcfc}
.product-box h3{font-size:16px;margin:10px 0 4px}
.product-box .btn{margin-top:12px}
.banned{margin-top:16px}
.banned h3{font-size:14px;margin-bottom:8px}
.note{background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r);padding:16px 18px;font-size:12.5px;color:#7b6448;line-height:1.9;margin-top:26px}
.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--faint);line-height:1.8}

/* ── กล่องสมัครด้านข้าง ────────────────────────────────── */
.apply-rail{position:sticky;top:86px;display:grid;gap:14px}
.apply-card{padding:22px}
.apply-card .label{font-size:11.5px;letter-spacing:1.4px;color:var(--faint);margin-bottom:6px}
.reward-big{font-size:21px;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:4px}
.apply-facts{list-style:none;margin:18px 0;padding:0;display:grid;gap:9px;font-size:13px}
.apply-facts li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:9px}
.apply-facts li:last-child{border:0;padding:0}
.apply-facts span:first-child{color:var(--faint)}
.apply-facts span:last-child{font-weight:500;text-align:right}
.seats{margin:4px 0 18px}
.seat-bar{height:7px;border-radius:999px;background:#e8eef1;overflow:hidden}
.seat-bar i{display:block;height:100%;background:var(--orange);border-radius:999px}
.seat-bar[data-fill="0"] i{width:0}
.seat-bar[data-fill="10"] i{width:10%}
.seat-bar[data-fill="20"] i{width:20%}
.seat-bar[data-fill="30"] i{width:30%}
.seat-bar[data-fill="40"] i{width:40%}
.seat-bar[data-fill="50"] i{width:50%}
.seat-bar[data-fill="60"] i{width:60%}
.seat-bar[data-fill="70"] i{width:70%}
.seat-bar[data-fill="80"] i{width:80%}
.seat-bar[data-fill="90"] i{width:90%}
.seat-bar[data-fill="100"] i{width:100%}
.seats p{font-size:12px;color:var(--faint);margin-top:7px}
.rail-help{padding:18px 20px;font-size:12.5px;color:var(--muted);line-height:1.9}
.rail-help h3{font-size:13.5px;margin-bottom:6px;color:var(--ink)}

/* แถบสมัครติดขอบล่างบนมือถือ — บนจอเล็กกล่องด้านข้างจะไหลไปอยู่ท้ายหน้า คนเลื่อนไม่ถึงปุ่ม */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fffffff2;backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;box-shadow:0 -6px 20px #06254112}
.sticky-cta div{display:grid;line-height:1.4;min-width:0}
.sticky-cta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta span{font-size:11.5px;color:var(--faint)}
.sticky-cta .btn{margin-left:auto;flex:none}

/* ── หน้าเงื่อนไข ──────────────────────────────────────── */
.doc{max-width:48rem;margin:auto;padding:26px 20px 70px}
.doc-card{padding:32px 34px}
.doc h1{font-size:26px;margin-bottom:6px}
.doc-nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.doc section{margin-top:30px}
.doc h2{font-size:19px;margin:26px 0 12px;padding-top:8px}
.doc h3{font-size:15px;margin:20px 0 6px}
.doc p,.doc li{font-size:14px;color:#3d5464;line-height:1.95}
.doc ul{padding-left:1.2rem;margin:6px 0}
.doc .meta{font-size:12.5px;color:var(--faint)}

/* ── ฟอร์มสมัครเข้าร่วม ────────────────────────────────── */
.signup-form{display:grid;gap:16px;margin-top:22px}
.field{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);width:100%}
.field textarea{line-height:1.8;resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px #e7663e22}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red)}
.field small{font-size:12px;color:var(--faint)}
.field .opt,.check .opt{font-size:11.5px;color:var(--faint)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.75;cursor:pointer}
.check input{margin:4px 0 0;width:18px;height:18px;flex:none;accent-color:var(--orange)}
.check a{color:var(--orange-dark);text-decoration:underline}
/* ช่องล่อบอท — ต้องอยู่ในสายตาของเครื่องอ่านหน้าจอไม่ได้และคนต้องมองไม่เห็น แต่ห้าม display:none เพราะบอทบางตัวข้ามให้ */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.doc .form-error,.form-error{color:var(--red);font-size:13px;min-height:1px;font-weight:600}
.form-error:empty{display:none}
.keep-link{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.keep-link h2{font-size:16px;margin-bottom:6px}
.link-box{font:inherit;font-size:13px;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);margin:10px 0}

/* ── ท้ายหน้า ──────────────────────────────────────────── */
.site-foot{background:var(--navy);color:#a9c0d0;margin-top:64px;padding:44px 20px 26px}
.foot-inner{max-width:var(--page);margin:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot-logo{width:104px;height:auto;display:block;margin-bottom:12px}
.foot-brand p{font-size:13px;line-height:1.9;max-width:26rem}
.foot-col h3{font-size:12px;letter-spacing:1.6px;color:#fff;margin-bottom:12px;font-weight:500}
.foot-col{display:grid;gap:8px;align-content:start}
.foot-col a{font-size:13px;color:#a9c0d0;text-decoration:none;width:fit-content}
.foot-col a:hover{color:#fff}
.foot-legal{max-width:var(--page);margin:30px auto 0;padding-top:20px;border-top:1px solid #ffffff1a;font-size:12px;color:#7e95a6}

/* ── สถานะกำลังโหลด / ผิดพลาด ──────────────────────────── */
.loading{max-width:var(--page);margin:auto;padding:60px 20px;color:var(--faint);text-align:center}
.skeleton{max-width:var(--page);margin:auto;padding:40px 20px;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.skeleton i{display:block;height:250px;border-radius:var(--r-lg);background:linear-gradient(100deg,#e9eef1 30%,#f3f7f9 50%,#e9eef1 70%);background-size:300% 100%;animation:sweep 1.3s infinite linear}
@keyframes sweep{to{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){.skeleton i{animation:none}}
.page-error{max-width:34rem;margin:70px auto;padding:34px;text-align:center}
.page-error h1{font-size:21px;margin-bottom:8px}
.page-error p{color:var(--muted);font-size:14px;margin-bottom:20px}

/* ── ตำแหน่งครอปของภาพประกอบ (ค่าจาก campaign-art.js) ──── */
.hero-photo img[data-pos="50-40"],.card-photo img[data-pos="50-40"],.hero-art img[data-pos="50-40"]{object-position:50% 40%}
.hero-photo img[data-pos="65-42"],.card-photo img[data-pos="65-42"],.hero-art img[data-pos="65-42"]{object-position:65% 42%}
.hero-photo img[data-pos="50-45"],.card-photo img[data-pos="50-45"],.hero-art img[data-pos="50-45"]{object-position:50% 45%}
.hero-photo img[data-pos="60-57"],.card-photo img[data-pos="60-57"],.hero-art img[data-pos="60-57"]{object-position:60% 57%}

/* ── จอกลาง ────────────────────────────────────────────── */
@media(max-width:980px){
 .hero-inner{grid-template-columns:1fr;gap:34px}
 .hero h1{font-size:33px}
 .hero-art{grid-template-rows:104px 104px}
 .job-layout{grid-template-columns:1fr}
 .apply-rail{position:static}
 .foot-inner{grid-template-columns:1fr 1fr;gap:26px}
 .foot-brand{grid-column:1/-1}
}
/* ── มือถือ ────────────────────────────────────────────── */
@media(max-width:640px){
 body{font-size:14.5px}
 .bar-inner{padding:10px 16px;gap:12px}
 .bar-nav{display:none}
 .bar-brand{margin-right:auto}
 .hero{padding:38px 16px 44px}
 .hero h1{font-size:27px;line-height:1.38}
 .hero .lead{font-size:14.5px}
 .hero-cta .btn{flex:1 1 100%}
 .hero-stats{gap:20px;margin-top:26px;padding-top:20px;justify-content:space-between}
 .hero-stats strong{font-size:20px}
 .hero-art{grid-template-rows:92px 92px;gap:8px}
 .section{padding:40px 16px 4px}
 .section.band{margin-top:40px;padding:38px 16px}
 .section-head h2{font-size:20px}
 .job-grid{grid-template-columns:1fr;gap:14px}
 .card-photo img{height:172px}
 .job-page{padding:16px 16px 92px}
 .job-head{padding:20px 20px 0}
 .job-head h1{font-size:22px}
 .job-body{padding:0 20px 24px}
 .hero-photo img{height:210px}
 .facts{grid-template-columns:1fr}
 .doc{padding:18px 16px 60px}
 .doc-card{padding:22px 20px}
 .doc h1{font-size:21px}
 .sticky-cta{display:flex}
 .site-foot{margin-top:44px;padding:34px 16px 22px}
 .foot-inner{grid-template-columns:1fr;gap:22px}
}

/* 🏷 ประตูของแบรนด์ (/brand) — แบรนด์ส่งข้อมูลสินค้าและเอกสารเข้ามาเอง */
.badge.stop{background:#fbeceb;color:var(--red)}
.brandbar{display:flex;align-items:center;gap:16px;padding:14px 22px;background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brandbar img{height:30px;display:block}
.brandwho{margin-left:auto;text-align:right;font-size:13px;line-height:1.45}
.product-card{margin:20px auto;max-width:760px;padding:24px 26px}
.product-head h3{margin:8px 0 0;font-size:19px;line-height:1.45}
.product-head .tiny{margin-left:8px}
.warnline{color:var(--red);font-weight:600}
.notice{display:flex;gap:11px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--faint);border-radius:var(--r);padding:13px 15px;margin:14px 0;font-size:13.5px;line-height:1.65}
.notice.warm{background:#fdf4f1;border-left-color:var(--orange)}
.content-text{white-space:pre-wrap;line-height:1.75;margin:12px 0}
.row-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}
.docs{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.docs h4{margin:0 0 10px;font-size:14px}
.doclist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px;font-size:13.5px}
.doclist li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.doclist .tiny{color:var(--faint)}
.product-form,.doc-form{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.doc-form{display:grid;gap:10px;max-width:420px}
@media(max-width:640px){.product-card{padding:20px 17px;border-radius:0;margin:14px 0}.brandbar{padding:12px 16px}}
.brandtabs{display:flex;flex-wrap:wrap;gap:8px;max-width:760px;margin:20px auto 0}
.brandtabs button{border:1px solid var(--line);background:var(--white);color:var(--muted);border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer}
.brandtabs button.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.brandtabs .tiny{opacity:.7}
@media(max-width:640px){.brandtabs{margin:14px 16px 0}}