/* ========================================================================== line-in-light — Direction 02 "Light Engineering" Source of truth: design/02-light-engineering.html (+04/05/06) Fallback hex first, oklch for modern browsers. ========================================================================== */ /* ── 1. Design tokens ─────────────────────────────────────────────────── */ :root { --bg: #F9FBFC; --bg: oklch(98.6% 0.003 250); --surface: #FFFFFF; --surface: oklch(100% 0 0); --bg-2: #EFF2F5; --bg-2: oklch(96% 0.005 250); --fg: #0D1218; --fg: oklch(18% 0.014 250); --ink-2: #333A41; --ink-2: oklch(33% 0.015 250); --muted: #444B53; --muted: oklch(41% 0.015 250); --border: #D2D8DF; --border: oklch(88% 0.012 250); --border-hover:#C4CBD2; --border-hover:oklch(80% 0.02 250); --accent: #D01D21; --accent: oklch(55% 0.21 27); --accent-hover:#A50008; --accent-hover:oklch(45% 0.19 27); --on-accent: #FFFFFF; --on-accent: oklch(100% 0 0); --ok: #0B764D; --ok: oklch(50% 0.11 160); --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --radius: 4px; --max: 1280px; --ease: cubic-bezier(.22, .61, .36, 1); --shadow-card: 0 6px 24px oklch(20% 0.02 250 / 0.08); --shadow-menu: 0 16px 40px oklch(20% 0.02 250 / 0.14); --shadow-fab: 0 4px 20px oklch(20% 0.02 250 / 0.08); --wrap-pad: 1.5rem; } /* ── 2. Base ──────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body, body.linein-light { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Neutralise Astra's default layout wrappers so our custom templates win. */ body.linein-light .ast-container { max-width: none; padding: 0; } body.linein-light #primary, body.linein-light #secondary { padding: 0; } /* Our custom templates carry their own .wrap container — centre it. Include the #primary id: Astra's `#primary` rules for ast-left-sidebar (width:70%, border-left separator) would otherwise out-specify our classes and shrink or frame the catalogue. */ body.linein-light #primary.linein-main.wrap, body.linein-light main#line-primary.linein-main.wrap { max-width: var(--max); margin-inline: auto !important; width: 100%; border-left: none !important; border-right: none !important; } /* Full-width sections (.alignfull) use 100vw which includes the scrollbar. Clip on (not html — that would break position:sticky on the header) so the horizontal overflow never shows. It must NOT go on main: clipping main would cut the hero cover, which deliberately bleeds out of the wrapped container via negative margins. */ body.linein-light { overflow-x: clip; } /* Only the hero cover and CTA band span the full viewport; their inner content is centred by Gutenberg's is-layout-constrained (contentSize 1280px). Every other section stays inside the wrapped container. */ body.linein-light .linein-entry-content > .wp-block-cover.alignfull, body.linein-light .linein-entry-content > .wp-block-group.alignfull.linein-hero, body.linein-light .linein-entry-content > .wp-block-group.alignfull.linein-band { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Keep the text/content inside the full-bleed hero centred to the container width (Gutenberg's cover inner container stretches full-width, which would pin the text to the image edge on wide screens). */ body.linein-light .linein-entry-content > .wp-block-cover.alignfull .wp-block-cover__inner-container { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; } body.linein-light .entry-content, body.linein-light .post-content { margin: 0; } body.linein-light img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--fg); } a { color: var(--fg); text-decoration: none; transition: color .2s; } a:hover { color: var(--accent); } /* ── 3. Utility helpers ───────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .kicker::before { content: ""; width: 14px; height: 2px; background: var(--accent); } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--wrap-pad); } @media (max-width: 560px) { :root { --wrap-pad: 1.1rem; } } /* ── 4. Buttons ───────────────────────────────────────────────────────── */ /* High-specificity overrides so Astra's default (blue) button styles lose. */ body.linein-light .wp-block-button__link, body.linein-light .wp-element-button, body.linein-light .wc-block-components-button, body.linein-light .button, body.linein-light .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-mono); font-size: 1rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .9rem 1.4rem !important; border-radius: var(--radius) !important; border: 1px solid var(--accent) !important; background: var(--accent) !important; color: var(--on-accent) !important; cursor: pointer; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); } body.linein-light .wp-block-button__link:hover, body.linein-light .wp-element-button:hover, body.linein-light .button:hover, body.linein-light .btn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--on-accent) !important; } body.linein-light .wp-block-button__link:active, body.linein-light .btn:active { transform: translateY(1px); } /* Ghost / outline button style (WP button "outline" style + our .btn--ghost). */ body.linein-light .wp-block-button.is-style-outline .wp-block-button__link, body.linein-light .wp-block-button.is-style-linein-ghost .wp-block-button__link, body.linein-light .btn--ghost { background: transparent !important; border-color: var(--border) !important; color: var(--fg) !important; font-family: var(--font-mono) !important; } body.linein-light .wp-block-button.is-style-outline .wp-block-button__link:hover, body.linein-light .wp-block-button.is-style-linein-ghost .wp-block-button__link:hover, body.linein-light .btn--ghost:hover { background: transparent !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* ── 5. Block editor base styles ──────────────────────────────────────── */ /* Sections + section heads with mono index ("01", "02"...) */ .wp-block-group.linein-section { padding-block: 2.5rem; } .wp-block-group.linein-section.is-style-border-top, .wp-block-group.linein-section.linein-border-top { border-top: 1px solid var(--border); } .wp-block-group.linein-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; } .wp-block-group.linein-sec-head .wp-block-group.linein-sec-ttl { display: flex; align-items: baseline; gap: 1rem; } .wp-block-group.linein-sec-head .linein-idx { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em; color: var(--accent); font-weight: 700; } .wp-block-group.linein-sec-head .linein-meta { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .wp-block-group.linein-sec-head .linein-link { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .wp-block-group.linein-sec-head .linein-link a { text-decoration: none !important; color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 2px; } .wp-block-group.linein-sec-head .linein-link a:hover { color: var(--accent-hover); border-bottom-color: var(--accent); } /* Spec row (hero stats / product specs): 1px-bordered strip of cells. */ .wp-block-group.linein-spec-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .wp-block-group.linein-spec-row > * { min-width: 0; padding: .7rem .9rem; border-right: 1px solid var(--border); background: var(--surface); margin: 0; } .wp-block-group.linein-spec-row > *:last-child { border-right: none; } .wp-block-group.linein-spec-row .linein-k { display: block; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .wp-block-group.linein-spec-row .linein-v { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .wp-block-group.linein-spec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wp-block-group.linein-spec-row > *:nth-child(2n) { border-right: none; } .wp-block-group.linein-spec-row > * { border-bottom: 1px solid var(--border); } } /* Dark band (CTA) */ .wp-block-group.linein-band { background: var(--fg); color: #E5E8EB; padding-block: 4rem; text-align: center; } .wp-block-group.linein-band h2, .wp-block-group.linein-band .wp-block-heading { color: #FFFFFF; font-size: clamp(1.6rem, 3.4vw, 2.5rem) !important; max-width: 24ch; margin: 1rem auto 1.25rem; } .wp-block-group.linein-band p { color: #B4B9BE; max-width: 58ch; margin: 0 auto 2rem; } .wp-block-group.linein-band .kicker { color: var(--accent); } .wp-block-group.linein-band .wp-block-buttons { justify-content: center; } /* Solid buttons inherit the base red from §4; only ghost needs the dark-band variant (transparent + light border, readable on --fg). */ .wp-block-group.linein-band .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-group.linein-band .wp-block-button.is-style-linein-ghost .wp-block-button__link { background: transparent !important; border-color: #7C8186 !important; color: #FFFFFF !important; } .wp-block-group.linein-band .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-group.linein-band .wp-block-button.is-style-linein-ghost .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); } /* Product-line cards (A/B/C/D) — used by the "Product lines" pattern. */ .wp-block-group.linein-lines { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; gap: 0; } .wp-block-group.linein-lines.linein-lines--3 { grid-template-columns: repeat(3, 1fr); } /* Guides (G1/G2/G3): spaced cards like product cards, not a connected strip. */ .wp-block-group.linein-lines.linein-lines--3 { gap: 1.25rem; border: none; border-radius: 0; overflow: visible; } .wp-block-group.linein-lines.linein-lines--3 > .wp-block-group.linein-line { border: 1px solid var(--border); border-radius: var(--radius); border-right: 1px solid var(--border); overflow: hidden; transition: box-shadow .2s, border-color .2s, background .2s; } .wp-block-group.linein-lines.linein-lines--3 > .wp-block-group.linein-line:hover { box-shadow: var(--shadow-card); border-color: var(--border-hover); background: var(--bg-2); } .wp-block-group.linein-lines.linein-lines--3 > .wp-block-group.linein-line:last-child { border-right: 1px solid var(--border); } .wp-block-group.linein-lines > .wp-block-group.linein-line { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; padding: 0; margin: 0; } .wp-block-group.linein-lines > .wp-block-group.linein-line:last-child { border-right: none; } .wp-block-group.linein-line { position: relative; transition: background .2s; } .wp-block-group.linein-lines > .wp-block-group.linein-line:hover, .wp-block-group.linein-lines--3 > .wp-block-group.linein-line:hover { background: var(--bg-2) !important; } /* Whole card clickable via stretched link on the h3 anchor. */ .wp-block-group.linein-line h3 a { position: static; text-decoration: none !important; } .wp-block-group.linein-line h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wp-block-group.linein-line h3 a:hover { color: var(--accent); text-decoration: none !important; } .wp-block-group.linein-line .linein-ph a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wp-block-group.linein-line .linein-no { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .12em; color: var(--accent); font-weight: 700; margin-bottom: .7rem; } .wp-block-group.linein-line h3 { font-size: 1.05rem; margin: .7rem 0 .45rem; } .wp-block-group.linein-line p { font-size: .9rem; color: var(--ink-2); } .wp-block-group.linein-line .linein-cnt { display: inline-block; margin-top: auto; padding-top: 1rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .6rem; align-self: flex-start; } .wp-block-group.linein-line .linein-ph { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .wp-block-group.linein-line .linein-ph img { width: 100%; height: 100%; object-fit: cover; } .wp-block-group.linein-line .linein-bd { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; } /* Facts (field specs) */ .wp-block-group.linein-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; } .wp-block-group.linein-fact { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.4rem; height: 100%; display: flex; flex-direction: column; margin: 0; } .wp-block-group.linein-fact .linein-lab { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .wp-block-group.linein-fact .linein-val { font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem; margin: .5rem 0 .3rem; font-variant-numeric: tabular-nums; } .wp-block-group.linein-fact p { font-size: .88rem; color: var(--ink-2); } /* Mics we fit — zebra list */ ul.linein-mics { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0; padding: 0; } ul.linein-mics > li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; background: var(--surface); border-bottom: 1px solid var(--border); margin: 0; } ul.linein-mics > li:last-child { border-bottom: none; } ul.linein-mics > li:nth-child(even) { background: var(--bg-2); } ul.linein-mics .linein-mk { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } ul.linein-mics .linein-mk small { display: block; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; } ul.linein-mics .mono { font-size: .8rem; } /* FAQ — native details block styled as bordered accordion */ .wp-block-details.linein-faq { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0 0 .65rem; } .wp-block-details.linein-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--fg); } .wp-block-details.linein-faq summary::-webkit-details-marker { display: none; } .wp-block-details.linein-faq summary::after { content: "Q"; font-family: var(--font-mono); color: var(--accent); font-weight: 700; font-size: .8rem; flex: none; } .wp-block-details.linein-faq summary:hover { color: var(--accent); } .wp-block-details.linein-faq[open] summary { border-bottom: 1px solid var(--border); color: var(--fg); } .wp-block-details.linein-faq .wp-block-details__summary-wrapper { display: block; } .wp-block-details.linein-faq > div, .wp-block-details.linein-faq .wp-block-details-content, .wp-block-details.linein-faq > p, .wp-block-details.linein-faq > .wp-block-paragraph, .wp-block-details.linein-faq > :not(summary):not(.wp-block-details__summary-wrapper) { padding: 1.1rem 1.3rem 1.3rem; color: var(--ink-2); font-size: .95rem; max-width: 72ch; } .wp-block-details.linein-faq > p, .wp-block-details.linein-faq > .wp-block-paragraph { margin: 0; } /* Trusted-by strip — full-width white band with bordered inner content. */ .wp-block-group.linein-trusted { border: 1px solid var(--border); background: var(--surface); padding: 1.6rem 2rem; width: 100% !important; max-width: none !important; margin-inline: 0 !important; } .wp-block-group.linein-trusted .linein-tl { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-right: 1.5rem; margin-bottom: 0; } .wp-block-group.linein-trusted .wp-block-group.linein-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 0; max-width: var(--max); margin-inline: auto; } .wp-block-group.linein-trusted .linein-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--fg); margin: 0; padding-inline: 2.5rem; border-left: 1px solid var(--border); } .wp-block-group.linein-trusted .linein-brand:first-of-type { padding-left: 2.5rem; border-left: 1px solid var(--border); } .wp-block-group.linein-trusted .linein-brand small { display: block; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; } .wp-block-group.linein-trusted .linein-more { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; padding-left: 2.5rem; border-left: 1px solid var(--border); } .wp-block-group.linein-trusted .linein-more a { color: var(--accent) !important; text-decoration: none !important; } .wp-block-group.linein-trusted .linein-more a:hover { color: var(--accent-hover) !important; } /* Hero */ .wp-block-group.linein-hero { border-bottom: 1px solid var(--border); } .wp-block-group.linein-hero .wp-block-columns { gap: 3rem; align-items: center; } .wp-block-group.linein-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 700; margin: 1.1rem 0 1.25rem; letter-spacing: -0.025em; line-height: 1.12 !important; } .wp-block-group.linein-hero h1 em { color: var(--accent); font-style: normal; } .wp-block-group.linein-hero .linein-lede { color: var(--ink-2); font-size: 1.08rem; max-width: 52ch; } .wp-block-group.linein-hero .linein-stage { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); } .wp-block-group.linein-hero .linein-stage img { width: 100%; height: 460px; object-fit: cover; display: block; } .wp-block-group.linein-hero .linein-tick { position: absolute; top: 1rem; left: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .75rem; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); font-weight: 700; } .wp-block-group.linein-hero .linein-tick b, .wp-block-group.linein-hero .linein-tick strong { color: var(--accent); } /* Compat split */ .wp-block-group.linein-compat .wp-block-columns { gap: 3.5rem; } .wp-block-group.linein-compat h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin: .9rem 0 .8rem; } .wp-block-group.linein-compat .linein-lead { color: var(--ink-2); max-width: 46ch; } /* ── 5c. Shop catalogue (WooCommerce archive) ─────────────────────────── */ .linein-archive-head { padding-block: 1.5rem 2.25rem; } /* Static page entry head — same title treatment as the archive head. */ .linein-entry-head { padding-block: 1.5rem 2.25rem; border-bottom: 1px solid var(--border); margin-bottom: 2.25rem; } .linein-entry-title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; margin: 0; letter-spacing: -0.025em; max-width: 20ch; line-height: 1.12; } .linein-entry-content { max-width: none; } .linein-archive-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .linein-archive-title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; margin: 1rem 0 .6rem; letter-spacing: -0.025em; max-width: 20ch; } .linein-archive-lede, .linein-archive-desc { color: var(--muted); max-width: 62ch; font-size: .98rem; } .linein-archive-stat { text-align: right; } .linein-archive-stat .big { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; } .linein-archive-stat .big small { font-size: .82rem; color: var(--muted); display: block; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; } .linein-catalog { --toolbar-h: 3.65rem; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 2.25rem; align-items: start; padding-block: 2.25rem 4rem; } /* ── Shop sidebar / filters ──────────────────────────────────────────── */ .linein-filters { display: grid; gap: 1.75rem; position: sticky; top: 90px; } /* The first widget's title acts as the column "header": it spans the same height as the results toolbar so the divider under "Categories" sits exactly level with the toolbar's bottom line. */ .linein-widget:first-child { border-top: none; padding-top: 0; } .linein-widget:first-child .linein-widget-title { display: flex; align-items: center; min-height: var(--toolbar-h); padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .linein-widget { border-top: 1px solid var(--border); padding-top: 1.1rem; } .linein-widget-title { font-family: var(--font-mono); font-size: .84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: .75rem; } .linein-widget ul.product-categories { list-style: none; margin: 0; padding: 0; } .linein-widget ul.product-categories li { padding: .42rem 0; font-size: .96rem; color: var(--fg); } .linein-widget ul.product-categories li a { color: var(--fg); } .linein-widget ul.product-categories li a:hover, .linein-widget ul.product-categories li.current-cat a { color: var(--accent); } .linein-widget ul.product-categories ul { list-style: none; margin: 0 0 0 1rem; padding: 0; } .linein-widget ul.product-categories .count { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); } /* Nested category items: keep the WooCommerce chevron but anchor it to the vertical centre of the whole item (as WC intended) and push the text in with padding on the li instead of WC's margin-left (which only indents the first line, so a wrap fell under the arrow). The padding also leaves a gap between the chevron and the text so they never merge. Tighten line-height so a multi-line name reads as one item. */ .linein-widget ul.product-categories li { line-height: 1.5; } .linein-widget ul.product-categories ul.children > li { padding-left: 20px; } .woocommerce ul.product-categories > li ul li::before { top: 50%; left: 2px; margin-top: -3px; } .woocommerce ul.product-categories > li ul li a { margin-left: 0; } .linein-widget select, .linein-widget .dropdown_product_cat { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .55rem .7rem; width: 100%; font-size: .9rem; color: var(--fg); } .linein-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-height: var(--toolbar-h); box-sizing: border-box; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .linein-toolbar .woocommerce-result-count { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .linein-toolbar .woocommerce-ordering { margin: 0 0 0 auto; } .linein-toolbar .woocommerce-ordering select { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .5rem .7rem; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .06em; color: var(--fg); cursor: pointer; } .linein-prods { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; } /* Article card grid (blog index / archive) — same visual language as the product grid: surface card, 1px border, 4px radius, hover shadow. */ .linein-posts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 0 2rem; padding: 0; } li.linein-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s, background .2s; margin: 0; padding: 0 !important; position: relative; } li.linein-post:hover { box-shadow: var(--shadow-card); border-color: var(--border-hover); background: var(--bg-2); } .linein-post-ph { display: block; aspect-ratio: 16/10; overflow: hidden; border-bottom: none; position: relative; background: var(--bg-2); } .linein-post-ph img { width: 100%; height: 100%; object-fit: cover; } .linein-post-bd { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; } .linein-post-spec { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .linein-post-title { font-size: 1.1rem; margin: 0; } .linein-post-title a { color: var(--fg); } .linein-post-title a:hover { color: var(--accent); } /* Make the whole card clickable: stretch the title link over the card. */ .linein-post-title a::after { content: ""; position: absolute; inset: 0; } .linein-post-excerpt { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; } /* Post navigation (prev / next article) — two sides, inside the container. */ .linein-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.5rem; } .linein-post-nav-link { display: flex; flex-direction: column; gap: .3rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, box-shadow .2s; text-decoration: none !important; } .linein-post-nav-link:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card); } .linein-post-nav-link.is-next { text-align: right; align-items: flex-end; } .linein-post-nav-link.is-empty { visibility: hidden; } .linein-post-nav-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .linein-post-nav-title { font-size: .95rem; color: var(--fg); line-height: 1.4; } .linein-post-nav-link:hover .linein-post-nav-title { color: var(--accent); } /* Related articles block at the bottom of a single post. */ .linein-related { margin-top: 3rem; } .linein-related-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.4rem; } li.linein-prod { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s, background .2s; margin: 0; padding: 0 !important; width: 100%; max-width: none; } body.linein-light.woocommerce ul.products li.product, body.linein-light.woocommerce-page ul.products li.product { padding: 0 !important; margin: 0 !important; width: auto !important; } body.linein-light li.linein-prod:hover, body.linein-light.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-card); border-color: var(--border-hover); background: var(--bg-2) !important; } .linein-prod-ph { display: block; aspect-ratio: 4/3; overflow: hidden; border-bottom: 1px solid var(--border); position: relative; background: var(--bg-2); } .linein-prod-ph img { width: 100%; height: 100%; object-fit: cover; } .linein-prod-ph .badge { position: absolute; top: .7rem; left: .7rem; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius); padding: .25rem .55rem; z-index: 2; } .linein-prod-ph .badge.b--dark { background: var(--fg); } .linein-prod-ph .linein-imgblk { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .linein-prod-bd { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } .linein-prod-spec { font-family: var(--font-mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .linein-prod-spec a { color: inherit; } .linein-prod-title { font-size: 1.1rem; margin: 0; } .linein-prod-title a { color: var(--fg); } .linein-prod-title a:hover { color: var(--accent); } .linein-prod-sku { font-family: var(--font-mono); font-size: .84rem; color: var(--ink-2); } .linein-prod-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .linein-prod-price { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Price suffix ("with incl. VAT") is hidden on compact homepage cards, shown in the catalogue archive (body.linein-archive). */ body:not(.linein-archive) .linein-prod-price .woocommerce-price-suffix, body:not(.linein-archive) li.linein-prod .woocommerce-price-suffix, body:not(.linein-archive) li.linein-prod .price .woocommerce-Price-suffix { display: none !important; } body.linein-archive .linein-prod-price .woocommerce-price-suffix { display: inline !important; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-left: .25rem; } /* Add-to-cart button in loop cards */ body.linein-light li.linein-prod .button, body.linein-light li.linein-prod .add_to_cart_button, body.linein-light li.linein-prod a.added_to_cart { background: var(--fg) !important; border: 1px solid var(--fg) !important; border-radius: var(--radius) !important; color: var(--bg) !important; font-family: var(--font-mono); font-size: .9rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .6rem .95rem !important; cursor: pointer; text-decoration: none !important; transition: background .2s, border-color .2s, color .2s; } body.linein-light li.linein-prod .button:hover, body.linein-light li.linein-prod .add_to_cart_button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; } /* WooCommerce pagination → square pages */ .woocommerce nav.woocommerce-pagination { border-top: 1px solid var(--border); margin-top: 1.75rem; padding-top: 1.4rem; } .woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: .4rem; margin: 0; padding: 0; } .woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); transition: all .2s; background: var(--surface); } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus { color: var(--fg); border-color: var(--border-hover); background: var(--surface); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--fg); color: #fff; border-color: var(--fg); } /* Standard WP posts pagination (article grid) → same square mono pages */ .navigation.pagination { border-top: 1px solid var(--border); margin-top: 1.75rem; padding-top: 1.4rem; } .navigation.pagination .nav-links { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .navigation.pagination .nav-links .page-numbers { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); transition: all .2s; background: var(--surface); } .navigation.pagination .nav-links .page-numbers:hover, .navigation.pagination .nav-links .page-numbers:focus { color: var(--fg); border-color: var(--border-hover); background: var(--surface); } .navigation.pagination .nav-links .page-numbers.current { background: var(--fg); color: #fff; border-color: var(--fg); } .navigation.pagination .nav-links .page-numbers.next, .navigation.pagination .nav-links .page-numbers.prev { padding-inline: 1rem; } /* ── 5d. Single product ──────────────────────────────────────────────── */ .linein-product-single { padding-block: 2rem 4rem; background: transparent !important; } /* Neutralise Astra's article box so the product flows on the page bg. */ body.linein-light .ast-separate-container .ast-article-single, body.linein-light.woocommerce div.product { background: transparent !important; box-shadow: none !important; border: none !important; } /* Breadcrumbs at the top of the product page, full content width. */ .linein-crumbs, main.linein-main > .woocommerce-breadcrumb { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-block: 1.25rem 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .linein-crumbs a, main.linein-main > .woocommerce-breadcrumb a { color: var(--muted); } .linein-crumbs a:hover, main.linein-main > .woocommerce-breadcrumb a:hover { color: var(--accent); } .linein-crumbs .breadcrumb_last, main.linein-main > .woocommerce-breadcrumb .breadcrumb_last { color: var(--fg); } /* Hide Astra's duplicate breadcrumb inside the product buy-box — the canonical one is printed at the top of the page. */ .linein-info > .woocommerce-breadcrumb, .linein-info .woocommerce-breadcrumb { display: none !important; } .linein-product-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; } /* Gallery — custom flexslider-free layout (05-product.html) */ .linein-gallery .woocommerce-product-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .75rem; align-content: start; width: 100% !important; float: none !important; } .linein-gallery-thumbs { display: grid; gap: .6rem; grid-auto-rows: 76px; } .linein-gallery-thumbs .linein-thumb { border: none; border-radius: var(--radius); overflow: hidden; background: var(--surface); padding: 0; cursor: pointer; transition: border-color .2s; } .linein-gallery-thumbs .linein-thumb:hover { background: var(--bg-2); } .linein-gallery-thumbs .linein-thumb.on { outline: 2px solid var(--fg); outline-offset: -2px; } .linein-gallery-thumbs .linein-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .linein-gallery-main { border: none; border-radius: var(--radius); background: var(--bg); overflow: hidden; position: relative; } /* When the product has no image the placeholder is absolute — give the box an aspect ratio so it isn't a zero-height empty hole. */ /* No-image placeholder: give the box a square aspect and fill it like the catalogue card. Covers both the image placeholder (.linein-gallery-ph) and the text fallback (.linein-gallery-placeholder). */ .linein-gallery-main:has(.linein-gallery-placeholder), .linein-gallery-main:has(.linein-gallery-ph) { aspect-ratio: 1/1; } .linein-gallery-ph { width: 100%; height: 100%; object-fit: cover; display: block; } /* Show the full image (no crop): width fixed by the column, height auto. */ .linein-gallery-main img { width: 100%; height: auto; display: block; object-fit: contain; } .linein-gallery-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* Lightbox — full-size product image overlay. */ .linein-lightbox { position: fixed; inset: 0; z-index: 95; background: oklch(18% 0.014 250 / 0.85); display: grid; place-items: center; padding: 1.5rem; } .linein-lightbox[hidden] { display: none; } .linein-lightbox-img { max-width: min(92vw, 1200px); max-height: 88vh; object-fit: contain; border-radius: var(--radius); } .linein-lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: none; border: none; border-radius: var(--radius); color: #fff; cursor: pointer; transition: background .2s, color .2s; } .linein-lightbox-close:hover { background: oklch(50% 0.02 250 / 0.4); color: var(--accent); } .linein-lightbox-close svg { width: 22px; height: 22px; } /* Out-specifies WooCommerce's `.woocommerce span.onsale` (blue circle). */ body.linein-light .linein-gallery-main .onsale { position: absolute; top: .75rem; left: .75rem; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius); padding: .3rem .6rem; z-index: 2; } /* Buy box */ .linein-info { display: grid; gap: 1rem; align-content: start; } .linein-info .single-product-category { display: inline-block; font-family: var(--font-mono); font-size: .84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .linein-info .single-product-category a { color: var(--accent); } .linein-info .single-product-category a:hover { color: var(--accent-hover); } .linein-info .product_title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; } .linein-info .price { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .linein-info .price .woocommerce-price-suffix { display: block; font-family: var(--font-mono); font-size: .84rem; font-weight: 500; color: var(--muted); } /* Qty-based price note from "Price by Quantity" plugin — compact hint. */ body.linein-light.woocommerce.single-product .alg-wc-wholesale-pricing-price-display-by-qty { display: block; margin: 0; font-family: var(--font-mono); font-size: .84rem; font-weight: 600; color: var(--ink-2); } body.linein-light.woocommerce.single-product .alg-wc-wholesale-pricing-table-wrap { margin-top: .75rem; } /* When moved next to the quantity box (see theme.js): inline hint. */ body.linein-light.woocommerce.single-product .linein-unit-price { display: inline-flex; align-items: center; margin-left: 1rem; } .linein-info .woocommerce-product-details__short-description { color: var(--ink-2); } .linein-info .quantity { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .linein-info .quantity .qty { width: 52px; text-align: center; border: none; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1rem .4rem; -moz-appearance: textfield; appearance: textfield; } .linein-info .quantity .qty::-webkit-outer-spin-button, .linein-info .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .linein-info .quantity .minus, .linein-info .quantity .plus { width: 44px; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; color: var(--ink-2); background: none; border: none; cursor: pointer; text-decoration: none !important; transition: background .2s, color .2s; } .linein-info .quantity .minus { border-right: 1px solid var(--border); } .linein-info .quantity .plus { border-left: 1px solid var(--border); } .linein-info .quantity .minus:hover, .linein-info .quantity .plus:hover { background: var(--accent); color: var(--on-accent); } /* Add-to-cart button */ .linein-info .cart { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } /* Quantity + unit-price hint share ONE bordered box spanning the same width as the price box; Add + Quote on the next row. */ .linein-info .cart .linein-qty-row { flex: 1 1 100%; display: flex; align-items: center; gap: 0; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .linein-info .cart .quantity { flex: 0 0 auto; border: none; background: none; margin: 0 !important; } .linein-info .cart .linein-unit-price, body.linein-light.woocommerce.single-product .linein-info .cart .linein-unit-price { padding-left: 1rem; padding-right: 1rem; border-left: 1px solid var(--border); white-space: nowrap; display: inline-flex; align-items: center; line-height: 1; font-weight: 700; color: var(--fg); margin-left: 0; align-self: center; } .linein-info .cart .linein-unit-price .woocommerce-Price-amount { white-space: nowrap; } .linein-info .cart .single_add_to_cart_button, .linein-info .cart .linein-quote-btn { vertical-align: middle !important; margin: 0 !important; align-self: center; } .linein-quote-btn { flex: 1 1 calc(50% - .4rem); display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--border) !important; color: var(--fg) !important; font-family: var(--font-mono); font-size: 1rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1 !important; padding: 1rem 1.6rem !important; border-radius: var(--radius); text-decoration: none !important; transition: color .2s, border-color .2s; } .linein-quote-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: transparent !important; } /* "Request a quote" inside a catalogue card (product without a price): match the sibling loop buttons — solid dark, same size. */ body.linein-light li.linein-prod .linein-prod-price .linein-quote-btn { background: var(--fg) !important; border: 1px solid var(--fg) !important; color: var(--bg) !important; font-size: .9rem !important; font-weight: 700; letter-spacing: .08em; line-height: 1 !important; padding: .6rem .95rem !important; flex: 0 0 auto; } body.linein-light li.linein-prod .linein-prod-price .linein-quote-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; } /* "Request a quote" inside the price box on the single product page: solid red (like the native Add button), left-aligned in the box. */ body.linein-light .linein-info .price:has(.linein-quote-btn) { display: block; } body.linein-light .linein-info .price .linein-quote-btn { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--on-accent) !important; flex: 0 1 auto; } body.linein-light .linein-info .price .linein-quote-btn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--on-accent) !important; } body.linein-light .linein-info .single_add_to_cart_button, body.linein-light.woocommerce div.product form.cart .button.single_add_to_cart_button, body.linein-light .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 calc(50% - .4rem); } body.linein-light .linein-info .single_add_to_cart_button:hover, body.linein-light .woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } /* Meta (sku, categories, tags) */ .linein-info .product_meta { display: grid; gap: .4rem; border-top: 1px solid var(--border); padding-top: 1.2rem; font-size: .9rem; } .linein-info .product_meta > span, .woocommerce div.product .linein-info .product_meta > span, body.linein-light.woocommerce div.product .product_meta > span, body.linein-light.woocommerce div.product .product_meta > span.sku_wrapper, body.linein-light.woocommerce div.product .product_meta > span.posted_in, body.linein-light.woocommerce div.product .product_meta > span.tagged_as { display: flex; flex-wrap: wrap; gap: .4rem; font-family: var(--font-mono); font-size: .9rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .linein-info .product_meta a { color: var(--fg); font-family: var(--font-body); font-size: .9rem; text-transform: none; letter-spacing: 0; } .linein-info .product_meta a:hover { color: var(--accent); } /* Tabs */ .woocommerce div.product .woocommerce-tabs { margin-block: 0 4rem; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); padding: 0; margin: 0 0 0; list-style: none; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { border: none; display: none; content: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font-mono); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.1rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; display: block; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--fg); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fg); border-bottom-color: var(--accent); } .woocommerce div.product .woocommerce-tabs .panel { max-width: none; padding: 1.8rem 0; color: var(--ink-2); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.15rem; margin-bottom: .8rem; } /* Related products */ .woocommerce div.product .related.products, .woocommerce div.product .upsells.products { padding-top: 2rem; } .woocommerce div.product .related.products > h2, .woocommerce div.product .upsells.products > h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.4rem; } .woocommerce div.product .related.products ul.products, .woocommerce div.product .upsells.products ul.products { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0; padding: 0; } .woocommerce div.product .related.products ul.products li.product, .woocommerce div.product .upsells.products ul.products li.product { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; width: auto; margin: 0; transition: box-shadow .2s, transform .2s var(--ease); } .woocommerce div.product .related.products ul.products li.product:hover { box-shadow: 0 10px 30px oklch(20% 0.02 250 / 0.08); transform: translateY(-2px); } .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__link { display: block; } .woocommerce div.product .related.products ul.products li.product img, .woocommerce div.product .upsells.products ul.products li.product img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-bottom: 1px solid var(--border); margin: 0; } .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .upsells.products ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; padding: 1rem 1.15rem .25rem; color: var(--fg); } .woocommerce div.product .related.products ul.products li.product .price, .woocommerce div.product .upsells.products ul.products li.product .price { border: none; background: none; padding: 0 1.15rem; font-size: 1.05rem; } .woocommerce div.product .related.products ul.products li.product .button, .woocommerce div.product .upsells.products ul.products li.product .button { display: block; text-align: center; margin: .6rem 1.15rem 1.2rem; background: none; border: 1px solid var(--border); color: var(--fg); font-family: var(--font-mono); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .8rem; border-radius: var(--radius); transition: all .15s; } .woocommerce div.product .related.products ul.products li.product .button:hover, .woocommerce div.product .upsells.products ul.products li.product .button:hover { background: var(--fg); color: #fff; border-color: var(--fg); } /* In our loop cards the button lives in .linein-prod-foot next to the price (or the quote button for price-less products) — reset the outer margin so both sit on the same baseline. */ .woocommerce div.product .related.products ul.products li.product .linein-prod-foot .button, .woocommerce div.product .upsells.products ul.products li.product .linein-prod-foot .button { margin: 0; } /* ── 5b. Header & footer (custom templates) ──────────────────────────── */ /* Announcement bar (above the dark utility bar, Customizer-driven). */ .linein-announce { background: var(--accent); color: var(--on-accent); font-size: .9rem; font-weight: 600; text-align: center; } .linein-announce .wrap { padding-block: .55rem; } .linein-announce a, .linein-announce span { color: var(--on-accent); text-decoration: none; font-family: var(--font-display); letter-spacing: .01em; } .linein-announce a:hover { text-decoration: underline; } .linein-util { background: var(--fg); color: #DBDEE1; font-size: .84rem; } .linein-util .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; } .linein-util .mono { color: #A9AFB4; } .linein-util .mono b { color: #DBDEE1; font-weight: 500; } .linein-header { position: sticky; top: 0; z-index: 50; background: oklch(98.6% 0.003 250 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .linein-header .wrap { display: flex; align-items: center; gap: 2rem; padding-block: .85rem; } .linein-logo { display: flex; align-items: center; gap: .65rem; flex: none; } .linein-logo img { width: 38px; height: 38px; flex: none; background: var(--fg); border-radius: 6px; padding: 8px; object-fit: contain; } .linein-logo-badge { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--fg); color: #fff; border-radius: 6px; font-family: var(--font-display); font-weight: 700; } .linein-logo-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; color: var(--fg); } .linein-logo-name em { font-style: normal; color: var(--accent); } .linein-nav { margin-left: auto; } .linein-menu { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; } .linein-menu a { font-size: .92rem; color: var(--ink-2); padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .linein-menu a:hover { color: var(--fg); } .linein-menu li.current-menu-item > a, .linein-menu li.current_page_item > a, .linein-menu li.current_page_parent > a { color: var(--fg); border-bottom-color: var(--accent); } /* Dropdown submenus (Astra renders