/*
  AD SHIRT SHOP — RAW TEXTILE / METROPOLITAN WHOLESALE
  ----------------------------------------------------
  The page deliberately avoids the familiar centered ecommerce template.
  Its visual system borrows from textile labels, warehouse manifests and
  fashion editorials: asymmetric blocks, oversized type, hard dividers and
  floating app controls. The layout remains responsive without losing that
  high-density poster character on a 1085 × 1451 viewport.
*/

:root {
  --bg: #111111;
  --bg-soft: #181818;
  --panel: #1e1e1e;
  --panel-2: #242424;
  --paper: #e8e4dc;
  --muted: #a6a29b;
  --line: rgba(232, 228, 220, 0.18);
  --accent: #ff5a36;
  --accent-2: #f2ff44;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
  --radius-lg: 32px;
  --radius-md: 22px;
  --rail-width: 112px;
  --sans: "Manrope", "Noto Sans Thai", sans-serif;
  --thai: "Noto Sans Thai", "Manrope", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 90, 54, 0.08), transparent 34%),
    radial-gradient(circle at 85% 45%, rgba(242, 255, 68, 0.035), transparent 30%),
    var(--bg);
  font-family: var(--thai);
  overflow-x: hidden;
}
body.sheet-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.eyebrow,
.mono-label {
  margin: 0;
  color: var(--muted);
  font: 600 0.72rem/1.3 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(0.98); }
.button-primary { background: var(--accent); color: #111; }
.button-primary:hover { background: #ff704f; }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,0.03); }
.button-ghost:hover { border-color: rgba(232,228,220,.45); }
.full-width { width: 100%; }

.control-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--rail-width);
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: rgba(17,17,17,.72);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.rail-brand {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
}
.rail-brand img { width: 100%; height: 100%; object-fit: contain; }
.rail-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.rail-nav a {
  color: var(--muted);
  font: 600 0.72rem var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.rail-nav a:hover { color: var(--paper); }
.rail-actions { display: grid; gap: 10px; width: 100%; }
.lang-toggle, .cart-trigger {
  width: 100%;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.lang-toggle:hover, .cart-trigger:hover { transform: translateY(-2px); border-color: rgba(232,228,220,.42); background: rgba(255,255,255,.04); }
.lang-toggle { font: 600 .68rem var(--mono); }
.cart-trigger { display: grid; gap: 4px; text-transform: uppercase; font: 600 .64rem var(--mono); }
.cart-trigger strong { color: var(--accent-2); font-size: 1rem; }

.hero-shell,
main,
.site-footer { margin-left: var(--rail-width); }
.hero-shell { min-height: 100vh; padding: 24px; }
.hero-grid {
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
}
.hero-title-block {
  position: relative;
  padding: clamp(32px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}
.hero-title-block h1 {
  margin: 40px 0;
  font: 800 clamp(4.8rem, 12vw, 10rem)/.76 var(--sans);
  letter-spacing: -.09em;
  text-transform: uppercase;
}
.hero-title-block h1 span { display: block; }
.hero-title-block h1 span:nth-child(2) { color: transparent; -webkit-text-stroke: 1px var(--paper); transform: translateX(10%); }
.hero-index { display: flex; align-items: end; justify-content: space-between; font-family: var(--mono); }
.hero-index span { color: var(--muted); letter-spacing: .16em; }
.hero-index strong { color: var(--accent); font-size: 4rem; line-height: .8; }

.hero-visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #252525;
}
.hero-photo { position: absolute; background-size: cover; background-position: center; filter: saturate(.62) contrast(1.06); }
.hero-photo-main {
  inset: 0;
  background-image:
    linear-gradient(to top, rgba(0,0,0,.48), transparent 50%),
    url("https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1400&q=85");
  transform: scale(1.03);
}
.hero-photo-detail {
  right: 6%; bottom: 6%; width: 36%; height: 32%;
  border: 1px solid rgba(255,255,255,.42);
  background-image: url("https://images.unsplash.com/photo-1598033129183-c4f50c736f10?auto=format&fit=crop&w=900&q=85");
  box-shadow: var(--shadow);
}
.logo-stamp {
  position: absolute;
  top: 28px; right: 28px;
  width: 150px;
  padding: 12px;
  background: rgba(232,228,220,.92);
  color: #111;
  box-shadow: var(--shadow);
  transform: rotate(3deg);
}
.logo-stamp img { aspect-ratio: 1; object-fit: contain; }
.logo-stamp span { display: block; margin-top: 8px; font: 600 .58rem var(--mono); text-align: center; letter-spacing: .1em; }
.fabric-code {
  position: absolute;
  left: 22px; bottom: 22px;
  padding: 10px 14px;
  background: var(--accent-2);
  color: #111;
  font: 700 .68rem var(--mono);
  letter-spacing: .12em;
}
.hero-company-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.1fr auto;
  gap: 28px;
  align-items: end;
  padding: 28px clamp(30px, 4vw, 64px);
  border-top: 1px solid var(--line);
  background: #151515;
}
.hero-company-card h2 { margin: 8px 0 0; font-size: clamp(1.5rem, 2.2vw, 2.7rem); line-height: 1.15; }
.hero-company-card > p:not(.mono-label) { margin: 0; color: var(--muted); }
.hero-copy { color: var(--muted); max-width: 48ch; }
.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.metric-strip {
  margin: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-top: 0;
}
.metric-strip article { padding: 28px; border-right: 1px solid var(--line); }
.metric-strip article:last-child { border-right: 0; }
.metric-strip span { display: block; color: var(--accent); font: 700 1.5rem var(--mono); }
.metric-strip strong { display: block; margin-top: 18px; font-size: 1.15rem; }
.metric-strip p { color: var(--muted); margin-bottom: 0; }

.collection-section { padding: 120px clamp(24px, 6vw, 94px); }
.section-intro { display: grid; grid-template-columns: .6fr 1.5fr 1fr; gap: 32px; align-items: end; margin-bottom: 54px; }
.section-intro h2,
.wholesale-heading h2,
.company-poster h2,
.contact-card h2 { margin: 0; font-size: clamp(2.6rem, 6vw, 6.6rem); line-height: .96; letter-spacing: -.055em; }
.section-intro > p:last-child { color: var(--muted); max-width: 42ch; }
.category-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.category-filter button {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: 600 .72rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all 180ms ease;
}
.category-filter button:hover, .category-filter button.is-active { color: #111; background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-2px); }

.product-stream {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.product-card {
  position: relative;
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
  transition: transform 220ms ease, border-color 220ms ease;
}
.product-card:hover { transform: translateY(-6px); border-color: rgba(232,228,220,.42); }
.product-card:nth-child(6n+1) { grid-column: span 7; min-height: 720px; }
.product-card:nth-child(6n+2) { grid-column: span 5; min-height: 420px; }
.product-card:nth-child(6n+3) { grid-column: 8 / span 5; min-height: 280px; }
.product-card:nth-child(6n+4) { grid-column: span 4; min-height: 520px; }
.product-card:nth-child(6n+5) { grid-column: span 4; min-height: 520px; }
.product-card:nth-child(6n+6) { grid-column: span 4; min-height: 520px; }
.product-media { position: absolute; inset: 0; }
.product-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 300ms ease; }
.product-card:hover .product-media img { transform: scale(1.045); filter: saturate(.95); }
.product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.12) 66%); }
.product-code { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 8px 10px; background: var(--paper); color: #111; font: 700 .65rem var(--mono); }
.product-content { position: absolute; z-index: 2; inset: auto 0 0; padding: 24px; }
.product-content h3 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2.4rem); line-height: 1.02; }
.product-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; color: rgba(255,255,255,.66); font: 500 .68rem var(--mono); text-transform: uppercase; }
.product-buy { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-price { display: grid; }
.product-price span { color: var(--muted); font-size: .72rem; }
.product-price strong { font-size: 1.4rem; }
.add-button { min-width: 132px; }

.wholesale-panel { margin: 0 24px 120px; padding: clamp(30px, 6vw, 84px); border-radius: var(--radius-lg); background: var(--paper); color: #111; }
.wholesale-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 30px; align-items: start; }
.wholesale-heading .eyebrow { color: #65615b; }
.purchase-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 62px; }
.mode-card { min-height: 210px; padding: 22px; border: 1px solid rgba(17,17,17,.18); border-radius: 24px; text-align: left; color: #111; background: transparent; cursor: pointer; display: flex; flex-direction: column; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.mode-card:hover { transform: translateY(-4px); }
.mode-card.is-selected { background: #111; color: var(--paper); }
.mode-card span { font: 700 .78rem var(--mono); }
.mode-card strong { margin-top: auto; font-size: 1.8rem; }
.mode-card small { margin-top: 5px; color: inherit; opacity: .64; }
.supply-console { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(17,17,17,.18); border-radius: 24px; overflow: hidden; }
.supply-console div { padding: 24px; border-right: 1px solid rgba(17,17,17,.18); }
.supply-console div:last-child { border-right: 0; }
.supply-console span { display: block; color: #666; font: 600 .65rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.supply-console strong { display: block; margin-top: 10px; }

.company-section { padding: 0 clamp(24px, 6vw, 94px) 120px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.company-poster, .company-record { border-radius: var(--radius-lg); overflow: hidden; }
.company-poster { min-height: 640px; padding: clamp(30px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; background: var(--accent); color: #111; }
.poster-number { margin: 0; font: 700 clamp(1rem, 2vw, 1.6rem) var(--mono); }
.company-poster p:last-child { max-width: 56ch; font-size: 1.05rem; }
.company-record { padding: clamp(28px, 5vw, 62px); background: var(--panel); border: 1px solid var(--line); }
.record-row { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; }
.record-row span { color: var(--muted); font: 600 .68rem var(--mono); text-transform: uppercase; }
.record-row strong { text-align: right; }
details { margin-top: 24px; }
summary { cursor: pointer; color: var(--accent-2); font-weight: 700; }
details p { color: var(--muted); line-height: 1.75; }

.contact-node { position: relative; min-height: 760px; margin: 0 24px 24px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-field { position: absolute; inset: 0; filter: grayscale(1) invert(.9) contrast(.8); opacity: .65; }
.map-field iframe { width: 100%; height: 100%; border: 0; }
.contact-node::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.96) 0%, rgba(17,17,17,.72) 42%, rgba(17,17,17,.2) 100%); pointer-events: none; }
.contact-card { position: relative; z-index: 2; width: min(610px, calc(100% - 48px)); margin: 24px; padding: clamp(30px, 5vw, 62px); border-radius: 28px; background: rgba(20,20,20,.88); backdrop-filter: blur(18px); border: 1px solid var(--line); }
.contact-card h2 { margin-top: 24px; }
.contact-card address { margin: 26px 0; color: var(--muted); font-style: normal; line-height: 1.7; }
.contact-links { display: grid; margin-bottom: 24px; }
.contact-links a { padding: 18px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; transition: color 180ms ease, padding 180ms ease; }
.contact-links a:hover { color: var(--accent-2); padding-left: 8px; }
.contact-links span { color: var(--muted); font: 600 .65rem var(--mono); text-transform: uppercase; }

.site-footer { padding: 28px 42px 110px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.site-footer div { display: flex; align-items: center; gap: 12px; font: 600 .7rem var(--mono); }
.site-footer img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: var(--paper); }

.mobile-dock { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.cart-sheet {
  position: fixed;
  z-index: 80;
  left: var(--rail-width);
  right: 0;
  bottom: 0;
  max-height: 88vh;
  padding: 0 clamp(22px, 4vw, 54px) 32px;
  border-top: 1px solid var(--line);
  border-radius: 30px 30px 0 0;
  background: #171717;
  box-shadow: 0 -30px 100px rgba(0,0,0,.52);
  transform: translateY(104%);
  transition: transform 380ms cubic-bezier(.22,.78,.23,1);
  display: grid;
  grid-template-rows: auto auto minmax(100px, 1fr) auto;
}
.cart-sheet.is-open { transform: translateY(0); }
.sheet-grabber { height: 28px; display: grid; place-items: center; cursor: grab; }
.sheet-grabber span { width: 54px; height: 5px; border-radius: 999px; background: rgba(232,228,220,.25); }
.sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 22px; border-bottom: 1px solid var(--line); }
.sheet-header h2 { margin: 6px 0 0; font-size: 2rem; }
.sheet-close { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); background: transparent; font-size: 1.6rem; cursor: pointer; }
.cart-items { overflow: auto; padding: 6px 0; }
.cart-row { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.cart-row h3 { margin: 0 0 5px; font-size: 1rem; }
.cart-row small { color: var(--muted); font: 500 .66rem var(--mono); }
.quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.quantity-control button { width: 34px; height: 34px; border: 0; color: var(--paper); background: transparent; cursor: pointer; }
.quantity-control span { min-width: 26px; text-align: center; font: 600 .76rem var(--mono); }
.cart-price { min-width: 90px; text-align: right; }
.remove-item { display: block; margin-top: 6px; border: 0; padding: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; }
.cart-empty { min-height: 180px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.cart-empty strong { color: var(--paper); font-size: 1.3rem; }
.sheet-footer { padding-top: 20px; border-top: 1px solid var(--line); }
.cart-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cart-summary div { padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; display: flex; justify-content: space-between; }
.cart-summary span { color: var(--muted); }
.checkout-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12px; margin-top: 14px; }
.checkout-note { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 26px; padding: 12px 18px; border-radius: 999px; color: #111; background: var(--accent-2); font-weight: 800; transform: translate(-50%, 130px); transition: transform 250ms ease; }
.toast.is-visible { transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  :root { --rail-width: 0px; }
  .control-rail { display: none; }
  .hero-shell, main, .site-footer { margin-left: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-title-block { min-height: 620px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-visual { min-height: 620px; }
  .hero-company-card { grid-template-columns: 1fr 1fr; }
  .hero-cta-row { justify-content: flex-start; }
  .section-intro { grid-template-columns: 1fr; }
  .product-card:nth-child(n) { grid-column: span 6; min-height: 520px; }
  .product-card:nth-child(3n+1) { grid-column: span 12; min-height: 680px; }
  .mobile-dock {
    position: fixed;
    z-index: 60;
    left: 14px; right: 14px; bottom: 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(18,18,18,.9);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
  }
  .mobile-dock a, .mobile-dock button { min-height: 46px; border: 0; border-radius: 15px; color: var(--paper); background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 .72rem var(--mono); }
  .mobile-dock button:last-child { background: var(--accent); color: #111; }
  .cart-sheet { left: 0; }
}

@media (max-width: 760px) {
  .hero-shell { padding: 10px; }
  .hero-grid { min-height: auto; border-radius: 24px; }
  .hero-title-block { min-height: 520px; padding: 28px 22px; }
  .hero-title-block h1 { font-size: clamp(4rem, 22vw, 7rem); }
  .hero-title-block h1 span:nth-child(2) { transform: translateX(3%); }
  .hero-visual { min-height: 520px; }
  .hero-photo-detail { width: 42%; height: 28%; }
  .logo-stamp { width: 112px; top: 18px; right: 18px; }
  .hero-company-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .metric-strip { margin: 0 10px; grid-template-columns: 1fr; }
  .metric-strip article { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-strip article:last-child { border-bottom: 0; }
  .collection-section { padding: 84px 14px; }
  .product-stream { gap: 12px; }
  .product-card:nth-child(n) { grid-column: span 12; min-height: 510px; }
  .wholesale-panel { margin: 0 10px 84px; padding: 28px 18px; border-radius: 24px; }
  .wholesale-heading { grid-template-columns: 1fr; }
  .purchase-mode { grid-template-columns: 1fr; margin-top: 36px; }
  .mode-card { min-height: 150px; }
  .supply-console { grid-template-columns: 1fr; }
  .supply-console div { border-right: 0; border-bottom: 1px solid rgba(17,17,17,.18); }
  .company-section { padding: 0 10px 84px; grid-template-columns: 1fr; }
  .company-poster { min-height: 520px; padding: 28px 22px; }
  .company-record { padding: 28px 22px; }
  .record-row { grid-template-columns: 1fr; }
  .record-row strong { text-align: left; }
  .contact-node { min-height: 760px; margin: 0 10px 10px; }
  .contact-node::after { background: linear-gradient(180deg, rgba(17,17,17,.45), rgba(17,17,17,.95) 58%); }
  .contact-card { position: absolute; left: 0; right: 0; bottom: 0; width: auto; margin: 12px; padding: 28px 22px; }
  .contact-links a { flex-direction: column; gap: 5px; }
  .site-footer { padding: 28px 18px 110px; flex-direction: column; }
  .cart-sheet { max-height: 92vh; padding: 0 16px 20px; border-radius: 24px 24px 0 0; }
  .cart-row { grid-template-columns: 58px 1fr auto; }
  .cart-row img { width: 58px; height: 58px; }
  .cart-price { grid-column: 2 / -1; text-align: left; }
  .checkout-actions { grid-template-columns: 1fr; }
  .cart-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ================================================================
   CATALOG DISCOVERY LAYER
   Search, category filtering and pagination are grouped as one compact
   control surface. The cards become denser so each page can show 8–16
   products without losing the original editorial/industrial identity.
   ================================================================ */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.catalog-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; margin:0 0 14px; }
.catalog-search { position:relative; display:block; }
.catalog-search input { width:100%; min-height:54px; padding:0 54px 0 18px; border:1px solid var(--line); background:rgba(16,16,16,.72); color:var(--paper); font:600 .9rem/1.2 var(--sans); outline:none; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.catalog-search input:focus { border-color:var(--accent-2); background:#151515; transform:translateY(-1px); }
.catalog-search input::placeholder { color:rgba(232,228,220,.46); }
.search-mark { position:absolute; right:18px; top:50%; transform:translateY(-50%); font:1.6rem/1 var(--mono); color:var(--accent-2); pointer-events:none; }
.page-size-control { min-width:140px; min-height:54px; display:flex; align-items:center; gap:12px; padding:0 12px 0 16px; border:1px solid var(--line); background:rgba(16,16,16,.72); color:var(--muted); font:600 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.page-size-control select { margin-left:auto; border:0; background:#202020; color:var(--paper); padding:9px 28px 9px 10px; font:600 .85rem var(--mono); cursor:pointer; }
.catalog-status { margin:16px 0 18px; color:var(--muted); font:600 .74rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; scroll-margin-top:90px; }
.product-stream { grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.product-card:nth-child(n) { grid-column:span 3; min-height:470px; }
.product-card:nth-child(8n+1), .product-card:nth-child(8n+6) { grid-column:span 6; }
.product-card:nth-child(8n+4), .product-card:nth-child(8n+7) { grid-column:span 3; }
.product-card { background:#151515; }
.product-content { padding:18px; }
.product-content h3 { font-size:clamp(1.05rem,1.5vw,1.55rem); line-height:1.16; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-category { display:inline-flex; margin-bottom:8px; color:var(--accent-2); font:600 .64rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.product-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:8px 0 0; color:rgba(232,228,220,.7); font-size:.78rem; line-height:1.55; }
.product-meta { margin-top:12px; }
.product-buy { margin-top:14px; align-items:flex-end; }
.product-price strong { font-size:1.15rem; }
.add-button { padding:11px 13px; font-size:.72rem; }
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; margin:30px 0 0; }
.pagination button, .page-gap { min-width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); background:#151515; color:var(--paper); font:600 .78rem/1 var(--mono); transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.pagination button:hover:not(:disabled), .pagination button.is-current { transform:translateY(-2px); color:#111; background:var(--accent-2); border-color:var(--accent-2); }
.pagination button:disabled { opacity:.35; cursor:not-allowed; }
.page-gap { border-color:transparent; background:transparent; color:var(--muted); }
@media (max-width:1180px) {
  .product-card:nth-child(n), .product-card:nth-child(8n+1), .product-card:nth-child(8n+6) { grid-column:span 4; min-height:470px; }
}
@media (max-width:760px) {
  .catalog-toolbar { grid-template-columns:1fr; }
  .page-size-control { min-width:0; }
  .product-card:nth-child(n), .product-card:nth-child(8n+1), .product-card:nth-child(8n+6) { grid-column:span 6; min-height:440px; }
  .product-description { -webkit-line-clamp:2; }
}
@media (max-width:520px) {
  .product-card:nth-child(n), .product-card:nth-child(8n+1), .product-card:nth-child(8n+6) { grid-column:span 12; min-height:500px; }
}