/* Inner pages (catalogs, product cards, order). Complements the compiled Tailwind styles.css,
   which only contains the utilities used by the home page. Colours match the design tokens. */
:root { --pg-brand: #262D5B; --pg-accent: #B50A6A; --pg-line: #e4e4e7; --pg-soft: #fafafa; }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: #71717a; }
.crumbs a:hover { color: var(--pg-brand); }

.lede { max-width: 56rem; line-height: 1.75; }
.lede p + p { margin-top: .75rem; }
.lede a { color: var(--pg-accent); text-decoration: underline; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--pg-line); margin-top: 1.5rem; }
.tabs a { padding: .625rem 1rem; font-size: .9375rem; font-weight: 500; color: #52525b; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--pg-brand); }
.tabs a[aria-current="page"] { color: var(--pg-brand); border-bottom-color: var(--pg-accent); }

.grid-mount { margin-top: 1.5rem; min-height: 10rem; }

/* Two-column catalog layout: filters + results */
.cat-layout { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 64rem) { .cat-layout { grid-template-columns: 17rem 1fr; gap: 2.5rem; } }
.filter-group { margin-top: 1.5rem; }
.filter-group h3 { font-weight: 600; color: var(--pg-brand); margin-bottom: .5rem; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .375rem 0; font-size: .875rem; }
.filter-row input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--pg-accent); flex-shrink: 0; }

/* Product tiles */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tile { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border: 1px solid var(--pg-line); border-radius: .75rem; background: #fff; font-size: .875rem; line-height: 1.5; transition: background-color .15s; }
.tile:hover { background: var(--pg-soft); }
.tile h3 { font-weight: 600; color: var(--pg-brand); overflow-wrap: anywhere; }
.tile-img { display: flex; align-items: center; justify-content: center; height: 9rem; border-radius: .5rem; background: var(--pg-soft); }
.tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tile .stock { color: var(--pg-accent); font-weight: 600; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: .875rem; }
.pager input[type=number] { width: 4.5rem; height: 2.25rem; border: 1px solid var(--pg-line); border-radius: .5rem; padding: 0 .5rem; margin: 0 .25rem; }

/* Product page */
.pp-grid { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .pp-grid { grid-template-columns: 3fr 2fr; } }
.pp-spec { padding: 1.25rem; }
.spec-row { display: grid; gap: .25rem; padding: .625rem 0; border-bottom: 1px solid var(--pg-line); font-size: .9375rem; }
.spec-row:last-child { border-bottom: 0; }
@media (min-width: 40rem) { .spec-row { grid-template-columns: 12rem 1fr; gap: 1rem; } }
.spec-k { color: #71717a; }
.spec-v { color: var(--pg-brand); overflow-wrap: anywhere; }
.pp-image { display: flex; align-items: center; justify-content: center; padding: 1.5rem; min-height: 14rem; }
.pp-image img { max-width: 100%; max-height: 22rem; object-fit: contain; }
.prose-x { max-width: 56rem; line-height: 1.75; }
.prose-x p + p { margin-top: .75rem; }

.pp-order { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .pp-order { grid-template-columns: 3fr 2fr; } }
.pp-table-wrap { overflow-x: auto; border: 1px solid var(--pg-line); border-radius: .75rem; }
.ptable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ptable th, .ptable td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--pg-line); white-space: nowrap; }
.ptable th { background: var(--pg-soft); color: var(--pg-brand); font-weight: 600; }
.ptable tbody tr:last-child td { border-bottom: 0; }
.qty { width: 5rem; height: 2.5rem; border: 1px solid var(--pg-line); border-radius: .75rem; padding: 0 .625rem; color: #18181b; }
.pp-notes { font-size: .875rem; line-height: 1.5rem; }
.pp-notes > * + * { margin-top: .75rem; }
.pp-notes h3 { font-weight: 600; color: var(--pg-brand); font-size: 1rem; }
.pp-notes .field { margin-top: .25rem; }
.pp-notes label { font-weight: 500; color: var(--pg-brand); }
.pp-fineprint { margin-top: 2rem; font-size: .75rem; line-height: 1.25rem; color: #71717a; max-width: 56rem; }
.pp-fineprint p + p { margin-top: .5rem; }

/* Vendor listing */
.vendor-row { display: grid; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--pg-line); }
@media (min-width: 48rem) { .vendor-row { grid-template-columns: 12rem 1fr auto; align-items: start; gap: 2rem; } }
.vendor-logo { max-width: 12rem; max-height: 6rem; object-fit: contain; }
.vendor-descr.collapsed { max-height: 6.25rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.link-btn { margin-top: .5rem; font-size: .875rem; font-weight: 500; color: var(--pg-accent); cursor: pointer; background: none; }

/* Cart page (the cart script renders rows into #elcart-items-container) */
.order-wrapper h3 { font-weight: 600; color: var(--pg-brand); }
#elcart-items-container > * { padding: .75rem 0; border-bottom: 1px solid var(--pg-line); }
.total-price-number { font-weight: 600; color: var(--pg-brand); }
.line-sep { border-top: 1px solid var(--pg-line); margin: 1rem 0; }

/* Utilities missing from the compiled Tailwind build */
.content-start { align-content: start; }
.gap-8 { gap: 2rem; }
.max-w-full { max-width: 100%; }
.max-w-md { max-width: 28rem; }
.mt-12 { margin-top: 3rem; }
.pb-2 { padding-bottom: .5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
@media (min-width: 40rem) { .sm\:items-start { align-items: flex-start; } }