/* ═══════════════════════════════════════════════════════════════
NOVA TRADING — TABLE DESIGN SYSTEM v3 (PREMIUM)
Loads on every page via base.css @import (after home/article CSS,
via a tag in each page's ).
Sections:
1. Article table containers (.table-scroll, .overflow-x)
2. Base table reset
3. Column headers
4. Body rows — zebra + hover
5. Emoji-based cell tinting (applied via tables.js)
6. Comparison table column hover
7. Stock badges
8. Class / quality badges
9. Price card wrappers (.price-card)
10. Price grid layout
11. Homepage product panel size-table
12. Homepage master table
13. Row selection state
14. Scroll-shadow hint
15. Brand-tab upgrade
16. Quote / action buttons
17. Mobile scroll-hint banner
18. Responsive overrides
19. Reduced motion
═══════════════════════════════════════════════════════════════ */
/* Fraunces — a premium display serif with clean LINING figures, used
only for price numerals. Fraunces's old-style figures
(uneven baseline on 2/3/4/7/9) read as broken in a price table, so
numerals get their own typeface while headings keep Cormorant. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
/* ── 1. ARTICLE TABLE CONTAINERS ────────────────────────────── */
.table-scroll,
.overflow-x {
border-radius: 16px;
overflow: hidden;
box-shadow:
0 1px 3px rgba(15,23,42,.05),
0 6px 28px rgba(15,23,42,.09);
border: 1px solid rgba(15,23,42,.09);
border-top: 3px solid var(--gold) !important;
position: relative;
margin-bottom: 2px;
}
/* Disable inner border when nested inside price-card */
.price-card .table-scroll,
.price-card .overflow-x {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* ── 2. BASE TABLE RESET ────────────────────────────────────── */
.table-scroll table,
.overflow-x table {
width: 100%;
border-collapse: collapse;
background: #fff;
table-layout: auto;
}
/* ── 3. COLUMN HEADERS ──────────────────────────────────────── */
.table-scroll table thead tr,
.overflow-x table thead tr {
background: var(--navy) !important;
}
.table-scroll table th,
.overflow-x table th {
background: var(--navy) !important;
color: rgba(255,255,255,.88) !important;
font-size: .6rem !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
padding: 15px 18px !important;
border-bottom: 2px solid rgba(232,103,14,.6) !important;
white-space: nowrap;
text-align: left;
}
/* First column header: slightly muted */
.table-scroll table th:first-child,
.overflow-x table th:first-child {
color: rgba(255,255,255,.65) !important;
letter-spacing: .18em !important;
}
/* Comparison tables: second & later data columns get a faint divider */
.overflow-x table th:not(:first-child) {
border-left: 1px solid rgba(255,255,255,.07) !important;
}
/* ── 4. BODY ROWS — ZEBRA + HOVER ───────────────────────────── */
.table-scroll table td,
.overflow-x table td {
padding: 13px 18px !important;
font-size: .875rem !important;
color: var(--navy-soft);
border-bottom: 1px solid rgba(15,23,42,.05) !important;
vertical-align: middle;
transition:
background .18s ease,
box-shadow .18s ease,
color .15s ease !important;
}
/* Alternating row stripe */
.table-scroll table tbody tr:nth-child(even),
.overflow-x table tbody tr:nth-child(even) {
background: #F8FAFC;
}
/* Hover — warm amber wash */
.table-scroll table tbody tr:hover,
.overflow-x table tbody tr:hover {
background: rgba(232,103,14,.055) !important;
}
/* Gold left-bar accent on hover */
.table-scroll table tbody tr:hover td:first-child,
.overflow-x table tbody tr:hover td:first-child {
box-shadow: inset 4px 0 0 var(--gold) !important;
}
/* No border on last row */
.table-scroll table tbody tr:last-child td,
.overflow-x table tbody tr:last-child td {
border-bottom: none !important;
}
/* First column — property name: bold anchor */
.table-scroll table td:first-child,
.overflow-x table td:first-child {
font-weight: 700 !important;
color: var(--navy) !important;
font-size: .9rem !important;
letter-spacing: .01em;
}
/* Price cells (3rd & 4th columns in standard layout) */
.table-scroll table td:nth-child(3),
.table-scroll table td:nth-child(4),
.overflow-x table td:nth-child(3),
.overflow-x table td:nth-child(4) {
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.05rem !important;
font-weight: 600 !important;
color: var(--navy) !important;
white-space: nowrap;
}
/* Modern price chip — used in the homepage size-table price cells */
.price-chip {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.12rem;
font-weight: 600;
color: var(--navy);
white-space: nowrap;
letter-spacing: -.02em;
}
.price-chip-unit {
font-family: 'DM Sans', sans-serif;
font-size: .58rem;
font-weight: 400;
color: var(--muted);
letter-spacing: .01em;
margin-left: 1px;
}
/* ── STACKED PRICE BLOCK — used in home.js priceCell() ─────────── */
.pc-block {
display: flex;
flex-direction: column;
gap: 3px;
}
.pc-num {
font-family: 'Fraunces', serif;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.12rem;
font-weight: 600;
color: var(--navy);
letter-spacing: -.02em;
line-height: 1.15;
white-space: nowrap;
}
.pc-unit {
font-family: 'DM Sans', sans-serif;
font-size: .58rem;
font-weight: 400;
color: var(--muted);
letter-spacing: .01em;
margin-left: 1px;
}
.pc-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: .62rem;
color: var(--muted);
line-height: 1;
}
.pc-dot {
color: rgba(15,23,42,.18);
font-size: .55rem;
}
.pc-len {
font-size: .62rem;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
}
.pc-ok {
display: inline-flex;
align-items: center;
gap: 3px;
color: #16a34a;
font-size: .6rem;
font-weight: 600;
letter-spacing: .03em;
white-space: nowrap;
}
.pc-ok::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #16a34a;
flex-shrink: 0;
animation: tbl-pulse 2.4s ease-in-out infinite;
}
.pc-lim {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--gold-dark);
font-size: .6rem;
font-weight: 600;
background: rgba(232,103,14,.10);
padding: 1px 6px;
border-radius: 4px;
white-space: nowrap;
}
/* Cursor pointer — conveys clickability */
.table-scroll table tbody tr,
.overflow-x table tbody tr {
cursor: pointer;
}
/* Column dividers for multi-column comparisons */
.overflow-x table td:not(:first-child) {
border-left: 1px solid rgba(15,23,42,.04) !important;
}
/* ── 5. EMOJI-BASED CELL TINTING (applied by tables.js) ─────── */
/* ✅ Yes / Recommended / Good */
td.cell-yes {
background: rgba(22,163,74,.07) !important;
color: #14532d !important;
}
.table-scroll table tbody tr:hover td.cell-yes,
.overflow-x table tbody tr:hover td.cell-yes {
background: rgba(22,163,74,.12) !important;
}
/* ❌ No / Not recommended */
td.cell-no {
background: rgba(220,38,38,.07) !important;
color: #991b1b !important;
}
.table-scroll table tbody tr:hover td.cell-no,
.overflow-x table tbody tr:hover td.cell-no {
background: rgba(220,38,38,.12) !important;
}
/* ⚠️ Caution / With caveats */
td.cell-warn {
background: rgba(251,191,36,.10) !important;
color: #78350f !important;
}
.table-scroll table tbody tr:hover td.cell-warn,
.overflow-x table tbody tr:hover td.cell-warn {
background: rgba(251,191,36,.16) !important;
}
/* ── 6. COMPARISON TABLE COLUMN HOVER (applied by tables.js) ── */
/* When JS adds .col-active to a | , its whole column is highlighted */
.overflow-x table td.col-active {
background: rgba(232,103,14,.06) !important;
}
.overflow-x table th.col-active-header {
color: rgba(255,255,255,1) !important;
background: rgba(30,41,59,.96) !important;
}
/* ── 7. STOCK BADGES ────────────────────────────────────────── */
/* In-Stock — green pulsing dot */
.table-scroll .badge-green,
.overflow-x .badge-green,
.table-scroll span.badge-green,
.overflow-x span.badge-green,
.size-table .badge-green,
.master-table-wrap .badge-green {
display: inline-flex !important;
align-items: center;
gap: 5px;
background: rgba(22,163,74,.08) !important;
color: #166534 !important;
font-size: .6rem !important;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 9px !important;
border-radius: 5px !important;
font-weight: 500;
border: 1px solid rgba(22,163,74,.16) !important;
white-space: nowrap;
}
.table-scroll .badge-green::before,
.overflow-x .badge-green::before,
.size-table .badge-green::before,
.master-table-wrap .badge-green::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #16a34a;
flex-shrink: 0;
animation: tbl-pulse 2.4s ease-in-out infinite;
}
/* Limited — amber */
.table-scroll .badge-gold,
.overflow-x .badge-gold,
.table-scroll span.badge-gold,
.overflow-x span.badge-gold,
.size-table .badge-gold,
.master-table-wrap .badge-gold {
display: inline-flex !important;
align-items: center;
gap: 5px;
background: rgba(232,103,14,.08) !important;
color: var(--gold-dark) !important;
font-size: .6rem !important;
letter-spacing: .06em;
text-transform: uppercase;
padding: 3px 9px !important;
border-radius: 5px !important;
font-weight: 500;
border: 1px solid rgba(232,103,14,.20) !important;
white-space: nowrap;
}
.table-scroll .badge-gold::before,
.overflow-x .badge-gold::before,
.size-table .badge-gold::before,
.master-table-wrap .badge-gold::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
@keyframes tbl-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .38; transform: scale(.7); }
}
/* ── 8. CLASS / QUALITY BADGES ──────────────────────────────── */
/* A Class · Light — green */
.class-badge-a {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(22,163,74,.08);
color: #166534;
font-size: .64rem !important;
font-weight: 500;
padding: 3px 9px;
border-radius: 5px;
letter-spacing: .03em;
border: 1px solid rgba(22,163,74,.18);
white-space: nowrap;
}
.class-badge-a::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #16a34a;
flex-shrink: 0;
}
/* B Class · Medium — amber */
.class-badge-b {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(232,103,14,.08);
color: #9a3412;
font-size: .64rem !important;
font-weight: 500;
padding: 3px 9px;
border-radius: 5px;
letter-spacing: .03em;
border: 1px solid rgba(232,103,14,.20);
white-space: nowrap;
}
.class-badge-b::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* C Class · Heavy — navy */
.class-badge-c {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(15,23,42,.06);
color: var(--navy-soft);
font-size: .64rem !important;
font-weight: 500;
padding: 3px 9px;
border-radius: 5px;
letter-spacing: .03em;
border: 1px solid rgba(15,23,42,.12);
white-space: nowrap;
}
.class-badge-c::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--navy-soft);
flex-shrink: 0;
}
/* Thickness mm sub-label */
.class-badge-mm {
display: block;
font-size: .63rem !important;
color: var(--muted) !important;
margin-top: 3px;
font-weight: 400;
letter-spacing: .01em;
}
/* ── 9. PRICE CARD WRAPPERS ─────────────────────────────────── */
.price-card {
background: #fff;
border: 1px solid rgba(15,23,42,.09) !important;
border-radius: 14px !important;
box-shadow:
0 1px 4px rgba(15,23,42,.06),
0 8px 28px rgba(15,23,42,.09) !important;
overflow: hidden;
transition: box-shadow .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
padding: 0 !important;
}
.price-card:hover {
box-shadow:
0 4px 8px rgba(15,23,42,.08),
0 16px 44px rgba(15,23,42,.13) !important;
transform: translateY(-3px);
}
.price-card > h3 {
padding: 14px 20px 12px !important;
margin: 0 !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--navy) !important;
border-bottom: 1px solid rgba(15,23,42,.07) !important;
background: linear-gradient(to right, rgba(15,23,42,.02), rgba(248,250,252,.6));
display: flex !important;
align-items: center;
gap: 10px;
}
.price-card > h3::before {
content: '';
display: block;
width: 4px;
height: 18px;
background: var(--gold);
border-radius: 999px;
flex-shrink: 0;
}
.price-meta {
padding: 8px 20px 9px !important;
font-size: .76rem !important;
color: var(--muted) !important;
line-height: 1.5;
border-bottom: 1px solid rgba(15,23,42,.05) !important;
background: rgba(248,250,252,.65);
}
/* ── 10. PRICE GRID ─────────────────────────────────────────── */
.price-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 28px 0;
}
@media (max-width: 820px) {
.price-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ── 11. HOMEPAGE SIZE-TABLE ────────────────────────────────── */
/* Container */
.size-table-wrap {
padding: 0 !important;
background: #fff;
}
/* Table */
.size-table {
width: 100%;
border-collapse: collapse;
}
/* Override inline thead bg from home.js */
.size-table thead tr {
background: var(--navy) !important;
}
.size-table thead th {
background: var(--navy) !important;
color: rgba(255,255,255,.7) !important;
font-size: .56rem !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
padding: 13px 14px !important;
border-bottom: 1px solid rgba(232,103,14,.4) !important;
white-space: nowrap;
text-align: left !important;
}
/* DIA cell — the diameter anchor */
.size-table td.sz {
background: rgba(15,23,42,.022) !important;
font-family: 'Fraunces', serif !important;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--navy) !important;
border-right: 1px solid rgba(15,23,42,.08) !important;
text-align: center !important;
letter-spacing: -.02em !important;
padding: 16px 12px !important;
vertical-align: middle;
white-space: nowrap !important;
position: relative;
}
/* Gold left-edge accent on the DIA pillar */
.size-table td.sz::before {
content: '';
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 2.5px;
border-radius: 999px;
background: var(--gold);
}
/* Standard body cells */
.size-table tbody tr td {
padding: 15px 14px !important;
font-size: .84rem !important;
color: var(--navy-soft);
border-bottom: 1px solid rgba(15,23,42,.045) !important;
vertical-align: middle;
transition: background .16s ease !important;
}
/* Row separator between diameter groups */
.size-table tbody tr.dia-group-start td {
border-top: 1px solid rgba(15,23,42,.09) !important;
}
/* Subtle alternating rows */
.size-table tbody tr:nth-child(even) {
background: rgba(248,250,252,.6);
}
/* Row hover — very gentle gold wash */
.size-table tbody tr:hover {
background: rgba(232,103,14,.04) !important;
}
/* Price cells */
.size-table td.pr {
font-family: 'Fraunces', serif !important;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.15rem !important;
font-weight: 600 !important;
color: var(--navy) !important;
white-space: nowrap;
}
.size-table td.pr .u {
font-family: 'DM Sans', sans-serif !important;
font-size: .68rem !important;
color: var(--muted) !important;
font-weight: 300 !important;
margin-left: 2px;
}
/* Action cells */
.size-table td.ac {
text-align: right;
white-space: nowrap;
}
/* ── 12. HOMEPAGE MASTER TABLE ──────────────────────────────── */
.master-table-wrap {
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 50px rgba(15,23,42,.06);
border-top: 3px solid var(--gold) !important;
}
.master-table thead th {
font-size: .6rem !important;
letter-spacing: .2em !important;
font-weight: 600 !important;
padding: 15px 18px !important;
border-bottom: 2px solid rgba(232,103,14,.45) !important;
}
/* Zebra */
.master-table tbody tr:nth-child(even) {
background: #F8FAFC;
}
/* Hover */
.master-table tbody tr:hover {
background: rgba(232,103,14,.06) !important;
}
/* Category separator rows */
.master-table tbody tr.cat-header-row {
background: linear-gradient(to right, rgba(232,103,14,.04), rgba(248,250,252,.8)) !important;
border-top: 2px solid rgba(15,23,42,.08) !important;
}
.master-table tbody tr.cat-header-row td {
font-size: .78rem !important;
font-weight: 700 !important;
color: var(--navy) !important;
letter-spacing: .06em;
text-transform: uppercase;
border-bottom: 1px solid rgba(15,23,42,.07) !important;
}
.master-table td.t-price {
font-family: 'Fraunces', serif !important;
font-optical-sizing: auto;
font-variant-numeric: lining-nums tabular-nums;
font-size: 1.12rem !important;
font-weight: 600 !important;
}
/* ── 13. ROW SELECTION STATE (toggled by tables.js) ─────────── */
.table-scroll table tbody tr.row-selected,
.overflow-x table tbody tr.row-selected {
background: rgba(232,103,14,.09) !important;
box-shadow: inset 4px 0 0 var(--gold) !important;
}
.size-table tbody tr.row-selected {
background: rgba(232,103,14,.09) !important;
}
/* ── 14. SCROLL-SHADOW HINT ─────────────────────────────────── */
.table-scroll.has-scroll::after,
.overflow-x.has-scroll::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 52px;
background: linear-gradient(to right, transparent, rgba(255,255,255,.88));
pointer-events: none;
z-index: 3;
border-radius: 0 14px 14px 0;
}
/* ── 15. BRAND TABS ─────────────────────────────────────────── */
.brand-tabs {
background: #fff !important;
border-bottom: 1px solid rgba(15,23,42,.06) !important;
gap: 8px !important;
padding: 14px 16px 12px !important;
flex-wrap: wrap;
}
.brand-tab {
padding: 9px 20px !important;
font-size: .72rem !important;
letter-spacing: .07em !important;
font-weight: 500 !important;
border: 1px solid rgba(15,23,42,.10) !important;
border-radius: 8px !important;
color: var(--navy-soft) !important;
background: var(--cream-dark) !important;
margin-bottom: 0 !important;
position: relative;
text-align: left;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease,
transform .18s ease !important;
}
.brand-tab::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted);
margin-right: 8px;
vertical-align: middle;
transition: background .2s ease;
flex-shrink: 0;
}
.brand-tab:hover {
border-color: rgba(232,103,14,.35) !important;
background: #fff !important;
color: var(--navy) !important;
transform: translateY(-1px);
box-shadow: 0 2px 10px rgba(15,23,42,.07) !important;
}
.brand-tab.active {
color: #fff !important;
background: var(--navy) !important;
border-color: var(--navy) !important;
font-weight: 600 !important;
box-shadow: 0 4px 14px rgba(15,23,42,.18) !important;
transform: translateY(-1px);
}
.brand-tab.active::before {
background: var(--gold);
box-shadow: 0 0 0 2px rgba(232,103,14,.3);
}
.brand-tab .tab-sub {
display: block !important;
font-size: .6rem !important;
opacity: .62;
font-weight: 400 !important;
letter-spacing: .02em !important;
font-style: normal;
margin-top: 2px;
margin-left: 14px;
}
.brand-tab.active .tab-sub {
opacity: .75;
}
@media (max-width: 640px) {
.brand-tabs { padding: 10px 12px 9px !important; gap: 6px !important; }
.brand-tab { padding: 8px 14px !important; font-size: .67rem !important; }
}
/* ── 16. QUOTE / ACTION BUTTONS ─────────────────────────────── */
/* Quick Quote button in size-table */
.qbtn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 12px !important;
border-radius: 6px !important;
background: transparent !important;
border: 1px solid rgba(15,23,42,.14) !important;
color: var(--navy-soft) !important;
font-size: .6rem !important;
font-weight: 600 !important;
letter-spacing: .09em !important;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition:
background .18s ease,
color .18s ease,
border-color .18s ease,
transform .16s ease,
box-shadow .18s ease !important;
}
.qbtn:hover {
background: #25D366 !important;
border-color: #25D366 !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(37,211,102,.25) !important;
}
.qbtn.added {
background: #25D366 !important;
border-color: #25D366 !important;
color: #fff !important;
pointer-events: none;
}
/* Master-table action-cell button */
.atq-btn {
display: inline-flex !important;
align-items: center;
gap: 4px;
background: transparent !important;
border: 1px solid rgba(15,23,42,.14) !important;
color: var(--navy-soft) !important;
font-size: .6rem !important;
letter-spacing: .09em !important;
font-weight: 600 !important;
padding: 5px 12px !important;
border-radius: 6px !important;
white-space: nowrap;
transition:
background .18s ease,
color .18s ease,
border-color .18s ease,
transform .16s ease,
box-shadow .18s ease !important;
}
.atq-btn::after {
content: '→';
font-size: .6rem;
opacity: 0;
transform: translateX(-3px);
transition: opacity .18s ease, transform .18s ease;
display: inline-block;
}
.atq-btn:hover {
background: #25D366 !important;
border-color: #25D366 !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(37,211,102,.25) !important;
}
.atq-btn:hover::after {
opacity: 1;
transform: translateX(0);
color: #fff;
}
.atq-btn.added {
background: #25D366 !important;
border-color: #25D366 !important;
color: #fff !important;
pointer-events: none;
}
/* ── 17. MOBILE SCROLL-HINT BANNER ──────────────────────────── */
.tbl-scroll-hint {
display: none;
align-items: center;
justify-content: center;
gap: 6px;
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
padding: 7px 0 4px;
animation: tbl-hint-fade 2.5s ease 1.2s forwards;
opacity: 0;
}
.tbl-scroll-hint svg {
width: 14px;
height: 14px;
animation: tbl-hint-slide 1.2s ease-in-out 1.2s infinite;
}
@keyframes tbl-hint-fade {
0% { opacity: 0; }
10% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; display: none; }
}
@keyframes tbl-hint-slide {
0%,100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
@media (max-width: 680px) {
.tbl-scroll-hint { display: flex; }
}
/* ── 18. RESPONSIVE OVERRIDES ───────────────────────────────── */
@media (max-width: 640px) {
.table-scroll table th,
.overflow-x table th {
padding: 11px 11px !important;
font-size: .56rem !important;
letter-spacing: .12em !important;
}
.table-scroll table td,
.overflow-x table td {
padding: 10px 11px !important;
font-size: .82rem !important;
}
.table-scroll table td:first-child,
.overflow-x table td:first-child {
font-size: .85rem !important;
}
.table-scroll table td:nth-child(3),
.table-scroll table td:nth-child(4),
.overflow-x table td:nth-child(3),
.overflow-x table td:nth-child(4) {
font-size: .95rem !important;
}
.price-card > h3 {
font-size: .9rem !important;
padding: 12px 16px 10px !important;
}
.price-meta {
font-size: .72rem !important;
padding: 7px 16px 8px !important;
}
.size-table td.sz {
font-size: 1.1rem !important;
padding: 12px 10px !important;
}
.size-table thead th {
padding: 11px 10px !important;
font-size: .54rem !important;
letter-spacing: .1em !important;
}
}
/* ── 19. REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.table-scroll table tbody tr,
.overflow-x table tbody tr,
.size-table tbody tr,
.price-card,
.atq-btn,
.qbtn {
transition: none !important;
}
.table-scroll .badge-green::before,
.overflow-x .badge-green::before,
.size-table .badge-green::before {
animation: none !important;
}
.tbl-scroll-hint { animation: none !important; opacity: 1; }
.tbl-scroll-hint svg { animation: none !important; }
}
|