/* หจก.วี อลูมิเนียม, v-aluminium.com
   Built for a Thai trade audience on a phone. Big tap targets, the phone
   number never more than a thumb away, photographs of the real shop rather
   than stock imagery. The orange is taken from the ALUMET film on the
   shop's own stock, so the site and the yard match. */

:root{
  --ink:#1c1917;
  --ink-2:#44403c;
  --ink-3:#6b645f;          /* 5.25:1 on --paper-3 behind the gallery captions. #78716c was 4.33:1 */
  --line:#e7e5e4;
  --paper:#ffffff;
  --paper-2:#faf9f7;
  --paper-3:#f5f3f0;
  --brand:#e8590c;
  --brand-dark:#c2410c;
  --brand-tint:#fff4ed;
  --control:#8f8883;        /* outline-button border, 3.49:1 on white. --line was 1.26:1 */
  --line-green:#06c755;
  --radius:10px;
  --wrap:1080px;
}

*{box-sizing:border-box}
/* The sticky header is 63px. Without the padding, a link that the browser
   scrolls to the top edge on focus lands underneath it. The bottom bar gets
   the same treatment in its own block. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{
  margin:0;
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark)}
/* One focus ring for everything a keyboard reaches. Ink rather than orange,
   so it shows against the orange buttons as well as the white page. */
a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(8px);
}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
/* Scoped to .txt on purpose. A bare ".brand span" also matches .mark, which
   outranks the .mark rule on specificity and silently renders the logo letter
   at 12.5px in grey on orange. Caught on the first local screenshot. */
.brand .txt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.brand .txt span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;line-height:1.3}
.brand .mark{
  width:36px;height:36px;flex:none;border-radius:8px;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:18px;line-height:1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.call{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:999px;font-weight:600;font-size:15.5px;
  white-space:nowrap;
}
.call:hover{background:var(--brand-dark)}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--paper-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;white-space:nowrap}
.nav a{
  display:block;padding:11px 9px;text-decoration:none;
  color:var(--ink-2);font-size:15px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--brand-dark)}
.nav a[aria-current="page"]{color:var(--brand-dark);border-bottom-color:var(--brand);font-weight:600}
/* Inset, because .nav scrolls and would clip a ring drawn outside the link. */
.nav a:focus-visible{outline-offset:-3px}
/* Below 1024px the nine items do not fit. The list used to stop in a clean cut
   that read as the end of the menu: at 360px two of nine were on screen and
   nothing said the rest were there. The fade says so. width:max-content makes
   the list's own right padding count as scroll distance, so the last item can
   scroll clear of the fade instead of stopping underneath it. The snap padding
   matches .wrap, so the list still opens at its left edge. The fade is 40px,
   not wider: at 390px the third item ends 22px from the edge, and on
   /aluminium-cut-to-length that item is the current page. */
@media(max-width:1023px){
  .nav{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
    scroll-snap-type:x proximity;scroll-padding-inline:20px;
  }
  .nav ul{width:max-content;padding-right:44px}
  .nav li{scroll-snap-align:start}
}

/* ---------- hero ---------- */
/* Vertical only. ".hero" shares specificity with ".wrap" and comes later, so
   the padding shorthand here silently zeroes .wrap's "padding:0 20px" and the
   whole hero sits flush against the screen edge on any viewport narrower than
   --wrap. Invisible on desktop because the auto margins fake the gutter.
   Measured at 390px: h1 left=0, width=390. */
.hero{padding-top:44px;padding-bottom:8px}
.hero h1{
  font-size:clamp(28px,5.2vw,44px);line-height:1.28;margin:0 0 14px;
  letter-spacing:-.015em;font-weight:700;
}
.lede{font-size:clamp(18px,2.4vw,20px);color:var(--ink-2);margin:0 0 8px;max-width:44ch}
.lede + .lede{margin-top:0}

.hero-figure{margin:28px 0 0;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.hero-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}

.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:16.5px;border:1.5px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-line{background:var(--line-green);color:#fff}
.btn-ghost{border-color:var(--control);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink-3)}

/* ---------- sections ---------- */
section{padding:44px 0}
section + section{border-top:1px solid var(--line)}
h2{font-size:clamp(22px,3.4vw,29px);line-height:1.35;margin:0 0 18px;letter-spacing:-.01em;font-weight:700}
h3{font-size:19px;margin:0 0 8px;font-weight:600;line-height:1.4}
p{margin:0 0 14px;max-width:60ch}
.muted{color:var(--ink-3)}

/* a list of short Thai lines, which is how this reads best */
.lines{list-style:none;margin:0 0 18px;padding:0;max-width:56ch}
.lines li{
  position:relative;padding:0 0 0 26px;margin:0 0 11px;
}
.lines li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:2px;background:var(--brand);
}

/* ---------- cards ---------- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}
.card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);text-decoration:none;color:inherit;display:flex;flex-direction:column;
}
.card:hover{border-color:var(--brand);box-shadow:0 2px 14px rgba(232,89,12,.09)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* The body fills the card and .go takes the slack above it, so every
   "ดูรายละเอียด" in a row sits on the same line however long the text is. */
.card .body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
.card h3{margin:0 0 6px}
.card p{font-size:15.5px;color:var(--ink-2);margin:0}
.card .go{margin-top:auto;padding-top:12px;color:var(--brand-dark);font-weight:600;font-size:15px}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{padding:9px 12px 12px;font-size:14.5px;color:var(--ink-3);line-height:1.5}

/* ---------- facts / contact ---------- */
.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.facts{display:grid;gap:0;margin:0;grid-template-columns:1fr}
.facts div{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.facts div:last-child{border-bottom:0}
.facts dt{flex:0 0 108px;color:var(--ink-3);font-size:15px;margin:0}
.facts dd{margin:0;font-weight:500}
.facts a{font-weight:600}

.split{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:820px){ .split{grid-template-columns:1.05fr .95fr;gap:40px;align-items:start} }

/* Grid items default to min-width:auto, so a long Thai line with few break
   opportunities widens its own track and pushes the page 8px past the
   viewport. Measured at 390px on / and /contact. min-width:0 lets the track
   hold its share and the text wrap instead. Applied to the grid children
   rather than as a global overflow-wrap, which has broken a title mid-word
   here before. */
.split > *, .cards > .card, .gallery > figure{min-width:0}

.note{
  border-left:3px solid var(--brand);background:var(--brand-tint);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 18px;
}
.note p{margin:0;max-width:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--paper-2);padding:34px 0 96px;font-size:15px;color:var(--ink-2)}
footer .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer h4{margin:0 0 8px;font-size:15.5px;color:var(--ink);font-weight:600}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 5px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--brand-dark);text-decoration:underline}
.copy{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-3);font-size:14px}

/* ---------- sticky call bar, phones only ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.callbar a{
  flex:1;text-align:center;padding:14px 6px;text-decoration:none;
  font-weight:600;font-size:16px;background:var(--paper);color:var(--ink);
}
.callbar a.p{background:var(--brand);color:#fff}
.callbar a.l{background:var(--line-green);color:#fff}
/* Inset: the bar sits on the bottom edge and its cells touch. */
.callbar a:focus-visible{outline-offset:-4px}
@media(min-width:820px){ .callbar{display:none} footer{padding-bottom:34px} }
/* While the bar shows, it carries the call and the header pill steps aside.
   With both, a phone had two persistent call buttons and no shop name. */
@media(max-width:819px){
  .top .call{display:none}
  html{scroll-padding-bottom:72px}
}

@media(max-width:520px){
  body{font-size:16.5px}
  /* The subtitle only. This read ".brand span", which also matches .txt and
     hid the shop name on every phone: the trap the note above .brand .txt
     describes, one level up. */
  .brand .txt span{display:none}
  .brand .txt b{font-size:17px}
  section{padding:34px 0}
  .hero{padding-top:30px;padding-bottom:4px}
}

/* ---------- FAQ ----------
   Open by default. A <details> that starts closed hides its answer from the
   rendered text, and the whole point of these blocks is that the answer is
   readable to a person and to whatever is reading the page on their behalf. */
.faqs{max-width:64ch}
.faq{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin:0 0 10px;background:var(--paper);
}
.faq[open]{background:var(--paper-2)}
.faq summary{
  font-weight:600;cursor:pointer;list-style:none;
  display:flex;align-items:flex-start;gap:10px;line-height:1.55;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"";flex:none;margin-top:.55em;
  width:9px;height:9px;border-radius:2px;background:var(--brand);
}
.faq p{margin:10px 0 0 19px;color:var(--ink-2);max-width:none}

/* ---------- articles ---------- */
/* Long-form buying guides under /articles. They reuse the header, nav,
   footer, hero, .lines, .gallery and .faq blocks unchanged. Only the three
   things a guide needs and a product page does not are new: the phone CTA
   block, a comparison table, and a small dateline. */

.artmeta{color:var(--ink-3);font-size:15px;margin:0 0 10px}
.artmeta a{color:var(--ink-3)}

/* The phone CTA. Appears mid-article and again at the end. Full width on a
   phone so it is a thumb target rather than a link to aim at. */
.cta-box{
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  background:var(--brand-tint);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 26px;margin:30px 0;
}
.cta-box p{margin:0 0 6px;font-size:18.5px;font-weight:700;line-height:1.5;max-width:44ch}
.cta-box p.sub{font-weight:400;font-size:16.5px;color:var(--ink-2);margin:0 0 18px}
.call-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;text-decoration:none;
  padding:15px 28px;border-radius:999px;
  font-weight:700;font-size:17.5px;line-height:1.2;
  min-height:54px;border:1.5px solid transparent;white-space:nowrap;
}
.call-cta:hover{background:var(--brand-dark)}
@media(max-width:520px){
  .cta-box{padding:20px 18px;margin:24px 0}
  .cta-box p{font-size:17.5px}
  .call-cta{display:flex;width:100%;white-space:normal;text-align:center}
}

/* Comparison table. Wrapped in .table-scroll because a Thai table cell has
   few break opportunities and will otherwise push the page sideways on a
   phone, the same failure .split > * {min-width:0} was added for. */
.table-scroll{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:16px;min-width:460px}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.cmp thead th{background:var(--paper-2);font-size:15px;color:var(--ink-2);font-weight:600}
.cmp tbody th{font-weight:600;width:26%}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}

/* Below 560px three columns cannot fit, and a clipped third column reads as a
   broken table rather than a scrollable one. Stack each row instead: the row
   label on its own line, then the two options each prefixed by which one it is.
   The header row stays in the DOM for assistive tech and is only hidden. */
@media(max-width:560px){
  .table-scroll{overflow-x:visible}
  .cmp{min-width:0;font-size:16px}
  .cmp thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .cmp tr:last-child{border-bottom:0}
  .cmp tbody th{display:block;width:auto;padding:0 0 7px;border:0}
  .cmp td{display:block;padding:0;border:0;color:var(--ink-2)}
  .cmp td + td{margin-top:7px}
  .cmp td[data-l]::before{content:attr(data-l) "  ";font-weight:600;color:var(--ink)}
}

/* Article list on the hub and the "อ่านต่อ" block at the foot of a guide. */
.arts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.arts > *{min-width:0}
.art{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;background:var(--paper);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
}
.art:hover{border-color:var(--brand);box-shadow:0 2px 14px rgba(232,89,12,.09)}
.art h3{margin:0 0 6px;color:var(--ink)}
.art p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:none}
/* Same as .card .go: the link lines up across a row. */
.art .go{margin-top:auto;padding-top:12px;color:var(--brand-dark);font-weight:600;font-size:15px}

/* ---------- product catalogue (/products) ----------
   One page, one article per product, each with a stable id so a link or an
   answer engine can point at a single product. Photos are portrait (3:4) shelf
   shots, so on a phone the image is capped rather than run full width, which
   would push the name and the call button a whole screen down. */
.crumbs{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:14px;color:var(--ink-3);line-height:1.6}
.crumbs li + li::before{content:"›";margin:0 7px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs [aria-current]{color:var(--ink-2)}

.jump{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:15px;background:var(--paper-2)}
.jump a:hover{border-color:var(--brand);color:var(--brand-dark)}

.product{display:grid;gap:16px;grid-template-columns:1fr;padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:76px}
.product > *{min-width:0}
.product figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--paper-3);max-width:240px}
@media(min-width:720px){ .product figure{max-width:none} }
.product figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.product figcaption{padding:9px 12px 12px;font-size:14.5px;color:var(--ink-3);line-height:1.5}
.product h3{font-size:clamp(20px,2.6vw,23px);margin:0 0 8px}
.product .cta-row{margin-top:18px}
.spec{margin:6px 0 0;max-width:46ch}
.spec div{padding:9px 0}
.spec dt{flex-basis:132px}
@media(min-width:720px){ .product{grid-template-columns:300px 1fr;gap:32px;align-items:start} }