/* ==========================================================================
   campaign_wide.css: layout for PUBLIC BRAND PAGES only (public/<brand>/,
   e.g. baised.co/cintage). Every rule is scoped to html[data-draw-id], which
   only a brand page sets, so the LINE web (/th/mini/) never matches any of it.

   On a phone the page is the LINE draw page (draw_page.js render()) and looks
   exactly like LINE. Opened 900px or wider it is the LANDING layout
   (renderLanding(), `.lp*` at the bottom of this file). The side-by-side
   rules just below are the wide fallback for the draws the landing does not
   take (winners out, baht_spent): the hero, countdown, entries and order ID
   bar in a sticky left column (`.dside`, brandLayout()), the tabs, rules,
   prizes and FAQ on the right.
   ========================================================================== */

/* No feed to go back to: the brand page is the landing page. */
html[data-draw-id] .dback{display:none}

/* Laptop or desktop only: 900px+ AND a mouse or trackpad, so a phone turned
   sideways keeps the phone layout. Same query as WIDE in draw_page.js. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html[data-draw-id] .shell{
    max-width:1180px;
    padding:32px 32px 56px;
  }

  /* Two columns. Both the hero (before brandLayout() runs) and the wrapper it
     moves into sit in column 1 at the same width, so the hero is laid out at
     its final width from the first frame and the countdown position measured
     at render time stays right. */
  /* The art column takes a bit more than half the page (about 590px on a
     1280px laptop, up from a fixed 420px) so the campaign artwork reads at
     a desktop size. The details column keeps the rest. */
  html[data-draw-id] .dwrap{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    column-gap:40px;
    align-items:start;
    padding-bottom:0;
  }
  html[data-draw-id] .dwrap > .dhero,
  html[data-draw-id] .dwrap > .dside{
    grid-column:1;
    grid-row:1 / span 60;
  }
  html[data-draw-id] .dwrap > :not(.dhero):not(.dside){
    grid-column:2;
    min-width:0;
  }

  /* Left column: sticky, the hero as a rounded card, the bar under it. */
  html[data-draw-id] .dside{
    position:sticky;
    top:32px;
  }
  html[data-draw-id] .dside .dhero,
  html[data-draw-id] .dwrap > .dhero{
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
  }
  html[data-draw-id] .dside .dbar{
    position:static;
    max-width:none;
    margin:16px 0 0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }

  /* Squircles, the landing's pairing (see SQUIRCLES below): R x 2.29 with
     superellipse(2.2) where the browser draws it, the plain radii above
     elsewhere. */
  @supports (corner-shape: superellipse(2.2)){
    html[data-draw-id] .dside .dhero,
    html[data-draw-id] .dwrap > .dhero{border-radius:55px;corner-shape:superellipse(2.2)}
    html[data-draw-id] .dside .dbar{border-radius:46px;corner-shape:superellipse(2.2)}
  }

  /* Not-available / not-found screen: centred in the wide page. */
  html[data-draw-id] .centre{
    max-width:520px;
    margin:12vh auto 0;
  }
}

/* ==========================================================================
   LANDING LAYOUT (draw_page.js renderLanding): layout C of the 2026-10-03 web
   sketches. It only exists on a brand page opened 900px or wider, and
   `html.lp-on` is set when it renders, so nothing here reaches the LINE web
   or the side-by-side fallback above. Sizes from the sketch: header 64, art
   band about 560, card 560 wide, countdown boxes 96 x 80, main button 64
   tall, content 960 wide, FAQ 720, footer 120.
   ========================================================================== */
html[data-draw-id].lp-on body{background:#F7F7F9}
html[data-draw-id].lp-on .shell{
  max-width:none;min-height:100vh;padding:0;
  background:transparent;box-shadow:none;
}
/* The content column: 1120 wide, 32px clear of the window edge (owner,
   2026-10-06: every section as wide as Where to buy; was 960 / 24px). */
.lp{--lp-w:min(1120px,calc(100% - 64px));color:#1A1A1A}

/* ── header ─────────────────────────────────────────────────────────────── */
.lp-top{
  position:sticky;top:0;z-index:30;height:64px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.lp-top__in{
  width:min(1200px,calc(100% - 48px));height:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.lp-logo{display:flex;align-items:center;height:48px;padding:0}
/* baised.co's lockup; 40 tall (137 wide) inside the 64 header. */
.lp-logo img{height:40px;width:auto;display:block}
.lp-top__r{display:flex;align-items:center;gap:12px}
.lp-lang{display:flex;height:36px;padding:3px;border-radius:999px;background:#F1F2F4}
.lp-lang button{
  min-width:41px;padding:0 10px;border-radius:999px;
  font-size:13px;font-weight:800;color:rgba(0,0,0,.55);
}
.lp-lang button[aria-pressed="true"]{background:#fff;color:#1A1A1A;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lp-acct{position:relative}
.lp-acct__btn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 10px;
  border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;
  font-size:14px;font-weight:800;
}
.lp-acct__btn svg{width:24px;height:24px;fill:currentColor;flex:none}
/* The button carries the username; a long one ellipsizes. */
.lp-acct__btn span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-acct__menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:280px;max-width:calc(100vw - 32px);
  padding:6px;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.16);
}
/* "Signed in as": the sign-in email / Apple ID / phone, the method under it,
   then any other linked sign-in and the username. */
.lp-acct__who{padding:12px 12px 12px;margin-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}
.lp-acct__cap{display:block;font-size:12px;font-weight:700;color:rgba(0,0,0,.5)}
.lp-acct__name{display:block;margin-top:2px;font-size:17px;line-height:1.3;font-weight:900;color:#1A1A1A;overflow-wrap:anywhere}
.lp-acct__row{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
  margin-top:10px;font-size:13px;line-height:1.4;
}
.lp-acct__row span{color:rgba(0,0,0,.55)}
.lp-acct__row b{font-weight:700;color:#1A1A1A;text-align:right;overflow-wrap:anywhere}
.lp-acct__via{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--lp-ink,#1A1A1A)}
.lp-acct__menu[hidden]{display:none}
.lp-acct__out{
  display:block;width:100%;height:44px;padding:0 12px;
  text-align:left;font-size:15px;font-weight:700;color:#D23B3B;
}
.lp-acct__out:hover{background:#F6F6F8}

/* The header outside the landing (brandHeader({ page: true })): the phone
   brand page, which is what the LINE rich menu link opens, the not-available
   screen, and the wide side-by-side fallback. Same parts at phone size, and
   it scrolls away, since LINE's in-app browser already has a bar on top.
   Edge to edge, so no corners; its menu takes the squircle list below. */
.lp-top--page{position:relative;z-index:5;height:56px}
.lp-top--page .lp-top__in{width:calc(100% - 32px)}
.lp-top--page .lp-logo img{height:34px}
.lp-top--page .lp-top__r{gap:8px}
.lp-top--page .lp-lang{height:34px}
.lp-top--page .lp-acct__btn{height:36px;padding:0 12px 0 8px;font-size:13px}
@media (max-width:359px){
  .lp-top--page .lp-acct__btn{padding:0 6px}
  .lp-top--page .lp-acct__btn span{display:none}
}
/* The side-by-side shell pads 32 all round; the header spans its top edge. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html[data-draw-id]:not(.lp-on) .lp-top--page{margin:-32px -32px 24px}
}

/* ── hero: art band, then the card on its lower edge ────────────────────── */
.lp-hero{position:relative}
.lp-hero__band{
  position:relative;height:clamp(380px,44vw,600px);overflow:hidden;
  display:flex;justify-content:center;
  background:radial-gradient(120% 90% at 50% 35%,var(--hero-a,#FFF0F7) 0%,var(--hero-b,#FF70B7) 100%);
}
/* The same art, blurred, filling the band either side of the real one. */
.lp-hero__amb{
  position:absolute;top:-48px;left:-48px;width:calc(100% + 96px);height:calc(100% + 96px);
  max-width:none;object-fit:cover;filter:blur(32px) saturate(1.15);opacity:.6;
}
/* Sized by the band's height at the art's own ratio (top fifth trimmed for
   app art, set inline by renderLanding), anchored to the bottom. */
.lp-hero__frame{position:relative;height:100%;max-width:100%;overflow:hidden;aspect-ratio:868 / 603}
.lp-hero__art{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.lp-hero__cardwrap{
  position:relative;z-index:2;display:flex;justify-content:center;
  padding:0 24px;margin-top:-180px;
}
/* Real wide art (`webHeroImage`): edge to edge, the card centred on it. */
.lp-hero--wide .lp-hero__band{height:clamp(420px,50vw,680px)}
.lp-hero--wide .lp-hero__frame{position:absolute;inset:0;width:100%;aspect-ratio:auto}
.lp-hero--wide .lp-hero__cardwrap{position:absolute;inset:0;margin:0;align-items:center}
/* Web banner (`webBannerImage` on the draw doc): the whole banner, never
   cropped, the cards below it so nothing covers the art. Owner 2026-10-08:
   "NOT this big". Full width it filled a laptop screen, so it is now a
   rounded card exactly as wide as the cards under it (the content column,
   --lp-w; owner 2026-10-08: "same width as the other container"), its
   height following its own ratio.
   The frame's inline aspect-ratio (renderLanding) is a load placeholder for
   the old full-width layout; the img's own size rules here instead. */
.lp-hero--banner .lp-hero__band{display:block;height:auto;overflow:visible;background:none;padding-top:24px}
.lp-hero--banner .lp-hero__frame{
  display:flex;justify-content:center;width:var(--lp-w);height:auto;max-width:none;
  margin:0 auto;overflow:visible;aspect-ratio:auto !important;
}
.lp-hero--banner .lp-hero__art{
  display:block;width:100%;height:auto;max-width:100%;
  object-fit:contain;border-radius:calc(24 * 1.14px);
}
@supports (corner-shape: superellipse(2.2)){
  .lp-hero--banner .lp-hero__art{border-radius:calc(24 * 2.29px);corner-shape:superellipse(2.2)}
}
.lp-hero--banner .lp-hero__cardwrap{margin-top:24px}
/* Layout D (owner, 2026-10-04): two cards side by side under the banner,
   across the content column. Left: brand, headline, prize, how-to link.
   Right: countdown + order ID button. Equal heights, content centred. */
.lp-hero__cardwrap--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
  width:var(--lp-w);margin-left:auto;margin-right:auto;padding:0;
}
.lp-hero__cardwrap--split .lp-card{width:auto;display:flex;flex-direction:column;justify-content:center;padding:28px}
/* Scoped under the wrap: the base .lp-card rule (text-align:center) comes later in this file. */
.lp-hero__cardwrap--split .lp-card--info{text-align:left;align-items:flex-start}
.lp-card--info .lp-card__h{text-wrap:balance}
.lp-card__prize{
  margin-top:12px;font-size:15px;line-height:1.55;color:rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-card--info .lp-link{margin-top:12px;padding:0;height:36px}
.lp-card--act .lp-cd{margin-top:0}
/* The four boxes share the card's width (up to the full 96px each). */
.lp-card--act .lp-cd__row i{flex:1 1 0;width:auto;max-width:96px;min-width:0}

.lp-card{
  width:min(560px,100%);padding:32px 32px 20px;text-align:center;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04);
}
.lp-card__eyebrow{
  display:inline-block;padding:4px 12px;border-radius:999px;
  background:var(--lp-soft);color:var(--lp-ink);
  font-size:13px;font-weight:800;letter-spacing:.02em;
}
.lp-card__h{
  margin-top:12px;font-size:32px;line-height:1.25;font-weight:900;
  letter-spacing:-.01em;color:#1A1A1A;text-wrap:balance;
}

/* Countdown: the draw's own box and number colours (countdownBoxColor /
   countdownTextColor, else the theme on white), with the app's hard lip. */
.lp-cd{margin-top:24px}
.lp-cd__lbl{margin-bottom:8px;font-size:13px;font-weight:800;color:rgba(0,0,0,.55)}
.lp-cd__row{display:flex;justify-content:center;align-items:flex-start;gap:8px}
.lp-cd__row i{
  font-style:normal;width:96px;height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--lp-cd-box);color:var(--lp-cd-ink);box-shadow:0 4px 0 var(--lp-cd-lip);
}
.lp-cd__row b{font-size:32px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.lp-cd__row i span{margin-top:6px;font-size:12px;font-weight:700;opacity:.85}
.lp-cd__row s{
  align-self:center;margin-top:-4px;text-decoration:none;
  font-size:24px;font-weight:900;color:var(--lp-cd-box);
}

/* Main button: order_id.js's pill, grown from 48 to 64 tall. */
.lp-cta{margin-top:24px}
.lp .lp-cta .oidp{width:100%;height:69px}
.lp .lp-cta .oidp__sh,
.lp .lp-cta .oidp__face{height:64px}
.lp .lp-cta .oidp__lbl{font-size:20px}
.lp .lp-cta .oidp[disabled] .oidp__lbl{font-size:16px}
.lp-btn{
  display:flex;align-items:center;justify-content:center;height:64px;border-radius:999px;
  background:var(--theme);color:#fff;font-size:20px;font-weight:900;
}
.lp-closed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:64px;padding:10px 16px;background:#FFF6E5;color:var(--lp-ink);
}
.lp-closed b{font-size:18px;font-weight:900;line-height:1.3}
.lp-closed span{font-size:13px;font-weight:600;opacity:.85}
.lp-link{
  margin-top:8px;height:44px;padding:0 12px;
  font-size:15px;font-weight:800;color:var(--lp-ink);
  text-decoration:underline;text-underline-offset:3px;
}

/* ── content column ─────────────────────────────────────────────────────── */
.lp-wrap{width:var(--lp-w);margin:0 auto}
.lp-sec{margin-top:64px;scroll-margin-top:88px}  /* clears the sticky header */
.lp-sec__head{margin-bottom:20px}
.lp-h2{font-size:24px;line-height:1.3;font-weight:900;color:#1A1A1A}
.lp-sub{margin-top:4px;font-size:15px;line-height:1.5;color:rgba(0,0,0,.6)}

.lp-steps__grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.lp-step{min-height:140px;padding:20px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.lp-step__n{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--theme);color:#fff;font-size:16px;font-weight:900;
}
.lp-step p{margin-top:12px;font-size:16px;line-height:1.5;font-weight:600;color:#1A1A1A}

/* "Your entries": a card whose header row toggles the history open INSIDE
   it (owner 2026-10-04: the card grows, no pop-up). The panel animates on
   grid rows (0fr to 1fr), so a list that loads or changes after opening
   just grows with it; draw_page.js sets the drawer's own open/close timing. */
.lp-ent{
  width:100%;margin-top:24px;overflow:hidden;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.lp-wrap > .lp-ent:first-child{margin-top:48px}
.lp-ent:not(.is-open):hover{box-shadow:0 0 0 1.5px var(--theme)}
.lp-ent__head{
  display:flex;align-items:center;gap:12px;width:100%;height:64px;padding:0 20px;
  background:none;border:0;text-align:left;cursor:pointer;
}
.lp-ent__ticket{height:36px;width:auto}
.lp-ent__lbl{font-size:16px;font-weight:700}
.lp-ent__n{font-size:24px;font-weight:900;color:var(--lp-ink);font-variant-numeric:tabular-nums}
/* Your entries, always in view (owner, 2026-10-05): a chip fixed to the
   bottom right with the draw's ticket, the label and the live count, the
   card above in miniature. Under every overlay (order ID popup 200, result
   screen 95), over the page and its sticky header (30). */
.lp-float{
  position:fixed;right:24px;bottom:24px;z-index:35;
  display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 14px;
  background:#fff;border-radius:999px;cursor:pointer;color:#1A1A1A;
  box-shadow:0 10px 30px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.04);
  transition:box-shadow .2s ease;
}
.lp-float:hover{box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 0 1.5px var(--theme)}
.lp-float__ticket{height:32px;width:auto;display:block}
.lp-float__lbl{font-size:15px;font-weight:700}
.lp-float__n{font-size:22px;font-weight:900;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.lp-ent__go{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:15px;font-weight:800;color:var(--lp-ink)}
.lp-ent__chev{width:22px;height:22px;fill:currentColor;transition:transform .42s cubic-bezier(.645,0,.355,.955)}
.lp-ent.is-open .lp-ent__chev{transform:rotate(180deg);transition-duration:.52s}
.lp-ent__panel{display:grid;grid-template-rows:0fr}
.lp-ent.is-open .lp-ent__panel{grid-template-rows:1fr}
.lp-ent__panelin{min-height:0;overflow:hidden}
.lp-ent.is-open .lp-ent__panelin{border-top:1px solid rgba(0,0,0,.06)}
/* The inline history (entry_history.js mountEntryHistoryInline): the
   drawer's head (back arrow on a detail + "ประวัติการรับสิทธิ์" 16 w900), its
   list padding LTRB 20,4,20,20 and its detail padding 20,4,12,18, each part
   scrolling on its own past min(560px, 62vh) so the card stays in reach. */
.ehin__head{display:flex;align-items:center;gap:4px;padding:12px 12px 4px 20px;min-height:44px}
.ehin__back{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:-10px;
  border:0;background:none;border-radius:50%;cursor:pointer;
}
.ehin__back[hidden]{display:none}   /* only on a detail */
.ehin__back svg{width:18px;height:18px;fill:#1A1A1A}
.ehin__back:hover{background:rgba(0,0,0,.05)}
.ehin__title{font-size:16px;font-weight:900;color:#1A1A1A}
.ehin__list{max-height:min(560px,62vh);overflow-y:auto;padding:4px 20px 20px}
.ehin__det{max-height:min(560px,62vh);overflow-y:auto;padding:4px 12px 18px 20px}
@media (prefers-reduced-motion: reduce){ .lp-ent__chev{transition:none} }

/* Products: a grid of BIG tiles (owner, 2026-10-03: "make the participating
   product size bigger"), not the phone's 124px scrolling strip. Five across
   the 960 column (about 173 each), fewer on a narrower window. The deck
   keeps the app's geometry, scaled: the front card is 104/124 of the box at
   10/124 in, and the cards behind sit 8 and 16 of 104 down and right, all
   restated as percentages so the stack grows with the tile. */
/* Product types + "See all" (landingProducts; the app's titled type rows at
   13.5/800 with a 12.5 black45 caption, and its #F4F2F5 stadium toggle, at the
   landing's scale). The toggle is white with a hairline: #F4F2F5 vanishes on
   this page's own grey. */
.lp-prods__gh{margin:30px 0 12px}
.lp-prods__gh:first-child{margin-top:6px}
.lp-prods__gt{margin:0;font-size:18px;font-weight:800;line-height:1.3;color:#1A1A1A}
.lp-prods__gc{margin:4px 0 0;font-size:14px;font-weight:500;color:rgba(0,0,0,.45)}
.lp-prods__more{
  display:flex;align-items:center;gap:6px;margin:22px auto 0;padding:12px 22px;
  border:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);
  font:inherit;font-size:15px;font-weight:700;color:#1A1A1A;cursor:pointer;
  transition:box-shadow .15s ease,transform .15s ease;
}
.lp-prods__more:hover{box-shadow:0 0 0 1px rgba(0,0,0,.14),0 6px 16px rgba(0,0,0,.06)}
.lp-prods__more:active{transform:scale(.98)}
.lp-prods__more:focus-visible{outline:2px solid var(--theme);outline-offset:2px}
.lp-prods__more svg{width:20px;height:20px;fill:currentColor;transition:transform .28s ease}
.lp-prods__more.is-open svg{transform:rotate(180deg)}
.lp .prodrow{
  /* Five to a row at every laptop width (the 960 column always held five;
     at 1120 auto-fill made six and left the 5-product preview a gap). */
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 24px;
  overflow:visible;margin:0;padding:6px 0 12px;
}
.lp .prodrow>li{width:auto;min-width:0}
.lp .prodrow .skudeck{width:100%;height:auto;aspect-ratio:1 / 1}
.lp .prodrow .skudeck .card{top:8.06%;left:8.06%;width:83.87%;height:83.87%}
/* `deckOffset` and `tileBorder` are points on the phone's 104 card, so here
   they are fractions of the card: (n / 104) of its own size. */
.lp .prodrow .skudeck .card.b1{
  transform:translate(calc(var(--off,8) * 100% / 104),calc(var(--off,8) * 100% / 104))}
.lp .prodrow .skudeck .card.b2{
  transform:translate(calc(var(--off,8) * 200% / 104),calc(var(--off,8) * 200% / 104))}
.lp .prodrow .skudeck .card__in{inset:calc(var(--tb,0) * 100% / 104);corner-shape:inherit}
.lp .prodrow>li:active .skudeck .card{transform:translate(0,0) scale(.97)}
.lp .prodrow .skudeck{transition:transform .2s ease}
.lp .prodrow>li:hover .skudeck{transform:translateY(-4px)}
.lp .prodrow .nm{font-size:15px;line-height:1.35;margin:14px 0 0 8.06%}

.lp-shops__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:24px}
.lp-shop{display:flex;flex-direction:column;padding:24px;background:var(--lp-shop)}
.lp-shop__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lp-shop__logo{
  display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;
  background:#fff;overflow:hidden;font-size:24px;
}
.lp-shop__logo img{width:36px;height:36px;object-fit:contain}
.lp-shop__head h3{font-size:20px;line-height:1.3;font-weight:900}
.lp-shop__rules{padding:14px 16px 14px 32px;background:#fff;font-size:14px;line-height:1.5}
.lp-shop__foot{margin-top:auto;padding-top:2px}
.lp-shop__foot .howto{min-height:52px;font-size:15px}
.lp-shop__foot .shopbtn{min-height:52px;padding:14px 16px;font-size:15px}
/* Bigger text in the store cards on a laptop (owner, 2026-10-06: "the text in
   these two containers is too small"). The rule rows and the spend table are
   the phone's (mini.css .ruler / .btab, 14 / 12.5 / 13 / 10.5); here: rule
   titles 17, their lines 15, table 16 with 13 headings, the tiles, tickets
   and both buttons scaled to suit. Laptop landing only (.lp-shop). */
.lp-shop__head h3{font-size:24px}
.lp-shop .ruler{padding:0 18px}
.lp-shop .ruler__row{gap:14px;padding:14px 0}
.lp-shop .ruler__tile,.lp-shop .ruler__tick{width:36px;height:36px}
.lp-shop .ruler__tile svg{width:20px;height:20px}
.lp-shop .ruler__tile b{font-size:15px}
.lp-shop .ruler__tick img{width:36px;height:calc(36px * 637 / 1038)}
.lp-shop .ruler__tx b{font-size:17px}
.lp-shop .ruler__tx span{margin-top:4px;font-size:15px;line-height:1.45}
.lp-shop .btab{margin-top:18px}
.lp-shop .ruler__div + .btab{margin-top:16px}
.lp-shop .btab th{padding-bottom:11px;font-size:13px}
.lp-shop .btab td{padding:14px 0;font-size:16px}
.lp-shop .btab__get{gap:8px;padding:14px 0}
.lp-shop .btab__glyphs img{height:14px}
.lp-shop__foot .howto,.lp-shop__foot .shopbtn{min-height:58px;font-size:17px}
.lp-shop__foot .howto__l{font-size:17px}
.lp-shop__foot .howto__g{width:24px;height:24px}
/* Every entry ticket on the landing gets a white outline that follows the
   art's shape (notches included), so a pale ticket still reads on a tinted
   card (owner, 2026-10-06). 2px, the app's sticker edge (owner, same day:
   "like how it is in the app"). On white it changes nothing. */
.lp .btab__glyphs img,.lp .ruler__tick img,.lp .anim__ticket,.lp-ent__ticket,.lp-float__ticket{
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

.lp-prizes__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.lp-prizes__grid--one{grid-template-columns:minmax(0,1fr)}
.lp-prizes__img{margin:0;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.lp-prizes__img img{width:100%;height:auto;cursor:zoom-in}
/* fitPrizeRow (draw_page.js) sizes the poster column so poster and details
   are the same height; when it cannot (clamped), the shorter one centres. */
.lp-prizes__grid.is-fit{grid-template-columns:var(--lp-pw) minmax(0,1fr)}
.lp-prizes__grid.is-fig-short .lp-prizes__img,
.lp-prizes__grid.is-side-short .lp-prizes__tx{align-self:center}
.lp-prizes__sum{font-size:18px;line-height:1.55;font-weight:800;color:#1A1A1A}
.lp-prizes__tx .ptable{margin-top:20px}
.lp-prizes__tx .ptable:first-child{margin-top:0}
/* The Lucky Fans table a size up on a laptop (owner, 2026-10-06: "a bit
   bigger, without changing the width"): the phone's 16 / 13 / 13 / 10.5 / 14
   (mini.css .ptable) become 19 / 15 / 16 / 12.5 / 16, the icons and hearts
   24 -> 28, and every row gets more room. The column width is untouched. */
.lp-prizes .ptable__title{margin-bottom:16px;font-size:19px}
.lp-prizes .ptable__grid thead th{padding:16px 8px;font-size:15px}
.lp-prizes .ptable__perk{padding:16px 12px 16px 16px}
.lp-prizes .ptable__pin{gap:12px}
.lp-prizes .ptable__glyph,.lp-prizes .ptable__glyph svg{width:28px;height:28px}
.lp-prizes .ptable__glyph b{font-size:9.5px}
.lp-prizes .ptable__ptx b{font-size:16px}
.lp-prizes .ptable__ptx span{margin-top:3px;font-size:12.5px}
.lp-prizes .ptable__val span{padding:16px 6px;font-size:16px}
.lp-prizes .ptable__heart{width:28px;height:28px}
.lp-prizes .ptable__foot{margin-top:14px;font-size:14px}

/* ── the second call to action ──────────────────────────────────────────── */
.lp-band{margin-top:80px;background:var(--lp-band);color:#fff}
.lp-band__in{
  width:var(--lp-w);min-height:200px;margin:0 auto;padding:36px 0;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.lp-band__tx h2{max-width:540px;font-size:26px;line-height:1.3;font-weight:900;color:#fff}
.lp-band .lp-cta{flex:0 0 360px;margin-top:0}
.lp-cd--band{margin-top:16px}
.lp-cd--band .lp-cd__lbl{color:rgba(255,255,255,.8)}
.lp-cd--band .lp-cd__row{justify-content:flex-start}
.lp-cd--band .lp-cd__row i{width:64px;height:56px;background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.lp-cd--band .lp-cd__row b{font-size:22px}
.lp-cd--band .lp-cd__row i span{margin-top:4px;font-size:11px}
.lp-cd--band .lp-cd__row s{font-size:18px;color:rgba(255,255,255,.6)}

/* ── FAQ and help rows, one 720 column ──────────────────────────────────── */
/* Two columns since 2026-10-06 (owner: "two column instead of just ONE"), so
   it takes Where to buy's width (up to 1120, 32px clear of the window edge)
   rather than the old 720 single column. */
.lp-faq{width:min(1120px,calc(100% - 64px));margin:64px auto 0}
/* The phone FAQ bleeds to the edge with a rule on top; here it is the column. */
.lp-faq .faq{margin:0;padding:0;border-top:0}
.lp-faq .faq__head{min-height:56px}
.lp-faq .faq__title{font-size:24px}
.lp-faq .faq__qbtn{min-height:56px}
/* Bigger on a laptop (owner, 2026-10-06: "faq could be bigger, the text is
   too small"): questions 14 -> 17, answers 13 -> 16 with more line height,
   the group pill 12 -> 14, and a little more room inside each card. */
.lp-faq .faq__title{font-size:28px}
.lp-faq .faq__q{margin-bottom:12px}
.lp-faq .faq__qbtn{padding:18px 16px 18px 22px}
.lp-faq .faq__qt{font-size:17px;line-height:1.4}
.lp-faq .faq__qchev,.lp-faq .faq__qchev svg{width:24px;height:24px}
.lp-faq .faq__ai p{padding:0 22px 20px;font-size:16px;line-height:1.6}
.lp-faq .faq__grp span{padding:6px 14px;font-size:14px}
/* The questions in two columns, left to right then down; a group pill
   spans both. Each card keeps its own height (align-items:start), so opening
   one does not stretch its neighbour. Web-only: the app is a phone, one
   column. */
.lp-faq .faq.open .faq__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:start;
}
.lp-faq .faq__grp{grid-column:1 / -1}
/* Key dates and help (landingFacts): a 2x2 grid of cards, the dates on top,
   the two ways to get help underneath (owner, 2026-10-04). */
.lp-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:32px}
.lp-facts__card{display:flex;align-items:center;gap:14px;padding:20px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.lp-facts__ic{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lp-soft)}
.lp-facts__ic svg{width:22px;height:22px;fill:var(--lp-ink)}
.lp-facts__ic--chat{background:rgba(6,199,85,.12)}
.lp-facts__ic--chat svg{fill:#06C755}
.lp-facts__tx{display:flex;flex-direction:column;min-width:0}
.lp-facts__label{font-size:13px;font-weight:700;color:rgba(0,0,0,.55)}
.lp-facts__value{margin-top:2px;font-size:17px;font-weight:800;line-height:1.35;color:#1A1A1A}
.lp-facts__card--star .lp-facts__value{color:var(--lp-ink)}
/* Help cards: head row on top, full-width button pinned to the foot (grid rows
   stretch both cards to one height, so the two buttons line up). Tinted, not
   solid, so they sit below the hero's Enter order ID; hover fills them. */
.lp-facts__card--help{flex-direction:column;align-items:stretch;gap:18px}
.lp-facts__head{display:flex;align-items:center;gap:14px}
.lp-facts__title{font-size:16px;font-weight:800;line-height:1.35;color:#1A1A1A}
.lp-facts__btn{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:0 20px;border:0;border-radius:999px;
  font:inherit;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.lp-facts__btn svg{flex:none;width:20px;height:20px;fill:currentColor}
/* A shade under --lp-ink: bright themes (Cintage pink) read 3.4:1 on the tint. */
.lp-facts__btn--theme{background:var(--lp-soft);color:color-mix(in srgb,var(--lp-ink),#000 22%)}
.lp-facts__btn--theme:hover{background:var(--theme);color:#fff}
.lp-facts__btn--line{background:rgba(6,199,85,.12);color:#037A33}
.lp-facts__btn--line:hover{background:#06C755;color:#fff}
.lp-facts__btn:active{transform:scale(.98)}
.lp-facts__btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Terms: a centred outline pill under the help cards (owner pick "C", 2026-10-08).
   White face, brand ring and label in the help buttons' shade (3.4:1+ on Cintage
   pink), 18px document icon, label, 16px open-in-new icon; hover tints like them. */
.lp-facts__terms{
  display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:24px auto 0;
  min-height:44px;padding:0 20px;border:1.5px solid color-mix(in srgb,var(--lp-ink),#000 22%);
  border-radius:999px;background:#fff;color:color-mix(in srgb,var(--lp-ink),#000 22%);
  font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;
  transition:background-color .16s ease,transform .16s ease;
}
.lp-facts__termsic,.lp-facts__termsgo{flex:none;display:flex}
.lp-facts__termsic svg{width:18px;height:18px;display:block;fill:currentColor}
.lp-facts__termsgo svg{width:16px;height:16px;display:block;fill:currentColor}
.lp-facts__termstx{min-width:0}
.lp-facts__terms:hover{background:var(--lp-soft)}
.lp-facts__terms:active{transform:scale(.98)}
.lp-facts__terms:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ── footer: baised.co's ────────────────────────────────────────────────
   lucky-draw.css `.app-footer` and friends, restated under .lp-foot (this
   page does not load that 540 KB stylesheet) with its literals: the navy
   ground, the two text tiers, the hairline, the overscroll shadow. And its
   type: baised.co sets Thai in Sarabun (fonts.css), the mini in Anuphan, so
   the four weights the footer uses are declared here. Absolute URLs, so
   they resolve the same from /th/mini/ and from a brand folder. */
@font-face{font-family:'Sarabun';src:url('/fonts/web/Sarabun-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Sarabun';src:url('/fonts/web/Sarabun-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Sarabun';src:url('/fonts/web/Sarabun-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Sarabun';src:url('/fonts/web/Sarabun-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
.lp-foot{
  margin-top:80px;padding:64px 6vw 32px;background:#1C2436;color:#EEF1F8;
  font-family:'Switzer','Sarabun',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.65;
  /* Paints the rubber-band strip below the page navy, as baised.co does. */
  box-shadow:0 100vh 0 100vh #1C2436;
}
.lp-foot h2{font-family:inherit;letter-spacing:-.02em;line-height:1.13;font-weight:700}
.lp-foot__top{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  border-bottom:1px solid rgba(238,241,248,.16);padding-bottom:40px;margin-bottom:28px;
}
.lp-foot__app{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:360px}
.lp-foot__qr{display:flex;align-items:center;gap:16px}
.lp-foot__qr img{width:88px;height:88px;background:#fff;padding:7px}
.lp-foot__qr h2{font-size:1.1rem;color:#EEF1F8;margin-bottom:4px}
.lp-foot__qr p{font-size:.86rem;color:rgba(238,241,248,.70)}
/* .btn .btn--ghost .btn--sm with the footer's inline colours. */
.lp-foot__line{
  display:inline-block;padding:9px 20px;border-radius:100px;
  border:1px solid rgba(238,241,248,.45);color:#EEF1F8;
  font-size:.8rem;font-weight:500;text-align:center;
  transition:background .2s,border-color .2s;
}
.lp-foot__line:hover{background:rgba(238,241,248,.06);border-color:rgba(238,241,248,.7)}
.lp-foot__links{display:flex;gap:64px;flex-wrap:wrap}
.lp-foot__col{display:flex;flex-direction:column;gap:12px}
.lp-foot__col h2{
  font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;
  color:#EEF1F8;margin-bottom:4px;
}
.lp-foot__col a{color:rgba(238,241,248,.70);font-size:.86rem;transition:color .2s}
/* baised.co's Thai headings: no tracking, taller line, 600 (lucky-draw.css
   html[lang="th"] h2, which outranks the column rule there too). */
html[lang="th"] .lp-foot h2{letter-spacing:0;line-height:1.35;font-weight:600}
.lp-foot__col a:hover{color:#EEF1F8}
.lp-foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.lp-foot__bottom img{height:34px;width:auto;display:block}
.lp-foot__bottom p{font-size:.76rem;color:rgba(238,241,248,.70)}
@media (max-width:980px){ .lp-foot__links{gap:40px} }

/* ── SQUIRCLES: every container on the landing ────────────────────────────
   Owner, 2026-10-03. The same fitted pair as the draw cards (.ldcard in
   mini.css): a design radius R draws as R x 2.29 with superellipse(2.2),
   which tracks the app's figma_squircle (smoothing 1.0) outline, and falls
   back to a plain R x 1.14 arc where corner-shape is missing (older LINE /
   Safari). Each box only states its design radius, --lp-r.

   Pills and circles stay round, as on baised.co: a stadium is already
   smooth and a squircle would flatten its ends (the order ID button, the
   TH | EN switch, the account button, step numbers, the LINE button).
   Already squircled by mini.css and left alone: the store rule box, shop
   link, how-to and e-receipt buttons, and every dialog. */
.lp-card,.lp-shop,.lp-prizes__img{--lp-r:24}
.lp-step,.lp-facts__card{--lp-r:20}
.lp-cd__row i,.lp-closed,.lp .faq__q{--lp-r:16}
.lp .prodrow .skudeck .card{--lp-r:22}  /* the phone's 16 at the bigger tile's scale */
.lp-shop__rules{--lp-r:15}
.lp-ent,.lp-shop__logo,.lp-acct__menu,.lp .ptable__frame{--lp-r:14}
.lp-cd--band .lp-cd__row i{--lp-r:12}
.lp-acct__out,.lp-foot__qr img{--lp-r:10}
.lp-card,.lp-shop,.lp-prizes__img,.lp-step,.lp-facts__card,.lp-cd__row i,.lp-closed,
.lp .faq__q,.lp .prodrow .skudeck .card,.lp-shop__rules,.lp-ent,.lp-shop__logo,
.lp-acct__menu,.lp .ptable__frame,.lp-acct__out,.lp-foot__qr img{
  border-radius:calc(var(--lp-r) * 1.14px);
}
@supports (corner-shape: superellipse(2.2)){
  .lp-card,.lp-shop,.lp-prizes__img,.lp-step,.lp-facts__card,.lp-cd__row i,.lp-closed,
  .lp .faq__q,.lp .prodrow .skudeck .card,.lp-shop__rules,.lp-ent,.lp-shop__logo,
  .lp-acct__menu,.lp .ptable__frame,.lp-acct__out,.lp-foot__qr img{
    border-radius:calc(var(--lp-r) * 2.29px);
    corner-shape:superellipse(2.2);
  }
}

/* A window narrowed after load reloads into the phone layout (draw_page.js
   boot, 250ms after crossing 900px); until then the landing stacks. */
@media (max-width:899px){
  .lp-hero__cardwrap{margin-top:-120px}
  .lp-card__h{font-size:26px}
  .lp-cd__row i{width:72px;height:64px}
  .lp-cd__row b{font-size:24px}
  .lp-shops__grid,
  .lp-prizes__grid,
  .lp-faq .faq.open .faq__body,
  .lp-hero__cardwrap--split,
  .lp-facts{grid-template-columns:minmax(0,1fr)}
  .lp-band__in{flex-direction:column;align-items:stretch;text-align:center}
  .lp-band .lp-cta{flex:none}
  .lp-cd--band .lp-cd__row{justify-content:center}
  .lp-foot__bottom{justify-content:center;text-align:center}
}

/* ── a product's SKU panel, laptop ─────────────────────────────────────────
   Owner, 2026-10-06: "too small". The app's 420 wide panel with 104px tiles
   (mini.css .skusheet, :9166) is a phone's size; on a laptop the same dialog
   opens up to 840 wide with 176px tiles (four to a row) and type to match.
   Phones keep the app's numbers. The panel is appended to <body>, so it is
   scoped by the brand page's html[data-draw-id]; `.skusheet__body .skugrid`
   leaves the rules deck's grid alone. Same query as WIDE in draw_page.js. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html[data-draw-id] .skusheet__body{
    width:calc(100vw - 96px);max-width:840px;max-height:86vh;
    padding:32px 32px 36px;margin-bottom:6vh;
  }
  html[data-draw-id] .skusheet__head{margin-bottom:26px;padding:0 44px}
  html[data-draw-id] .skusheet__title{font-size:28px;letter-spacing:-.4px}
  html[data-draw-id] .skusheet__sub{margin-top:6px;font-size:15px}
  html[data-draw-id] .skusheet__x{top:16px;right:18px;width:40px;height:40px;padding:8px}
  html[data-draw-id] .skusheet__x svg{width:22px;height:22px}
  html[data-draw-id] .skusheet__body .skugrid{gap:24px 20px}
  html[data-draw-id] .skusheet__body .skugrid>div{width:176px}
  html[data-draw-id] .skusheet__body .skugrid .tile{width:176px;height:176px;border-radius:24px}
  html[data-draw-id] .skusheet__body .skugrid .nm{margin-top:10px;font-size:15px}
}

/* ── the Verify order ID popup, laptop ───────────────────────────────────
   Owner, 2026-10-06: "too small". The app's 420 wide card (mini.css .oids,
   order_id.js) is a phone's size; on a laptop it opens 600 wide with
   everything inside scaled to match: title 18 -> 26, line 13 -> 16, a 60 tall
   field at 18 (paste button 60, logo inset to suit), a 60 tall button at 19,
   the "?" 28 -> 36. The open/close morph measures the card at run time, so it
   follows. Phones keep the app's numbers. Same query as WIDE. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html[data-draw-id] .oids__card{max-width:600px}
  html[data-draw-id] .oids__scroll{padding:36px 36px 32px}
  html[data-draw-id] .oids__t{font-size:26px}
  html[data-draw-id] .oids__help{width:36px;height:36px}
  html[data-draw-id] .oids__helpg{width:19px;height:19px}
  html[data-draw-id] .oids__tuts{margin-top:14px;gap:12px}
  html[data-draw-id] .oids__tut{padding:14px}
  html[data-draw-id] .oids__tutlogo{width:24px;height:24px}
  html[data-draw-id] .oids__tutl{font-size:15px}
  html[data-draw-id] .oids__tutg{width:22px;height:22px}
  html[data-draw-id] .oids__s{margin-top:10px;font-size:16px;line-height:1.5}
  html[data-draw-id] .oids__field{margin-top:22px}
  html[data-draw-id] .oids__in{font-size:18px;line-height:24px;padding:18px 78px 18px 18px;border-radius:16px}
  html[data-draw-id] .oids__field.has-logo .oids__in{padding-left:56px}
  html[data-draw-id] .oids__logo{left:16px;top:18px}
  html[data-draw-id] .oids__paste{width:60px;height:60px}
  html[data-draw-id] .oids__pasteg{width:22px;height:22px}
  html[data-draw-id] .oids__ferr{font-size:14px;line-height:19px;padding:0 18px}
  html[data-draw-id] .oids__go{margin-top:22px;height:60px;font-size:19px}
  html[data-draw-id] .oids__err{font-size:14px}
}