/* * SPDX-License-Identifier: GPL-2.0-or-later * * Cinatra Woodmart child theme — design rules. * * Applies the Cinatra design system (design-system.html) on top of WoodMart * for the WooCommerce + Dokan marketplace. Enqueued AFTER woodmart-style (see * functions.php), so plain-specificity overrides win. The critical --wd-* * custom-property remap lives in functions.php's late wp_head block; this * sheet carries the component-level styling + editorial touches. * * Aesthetic target: editorial / newspaper. Warm paper canvas, deep navy ink, * gold brand accents, indigo primary actions, hairline rules, italic display * headings (Archivo), restrained shadows, generous whitespace. Adapted to an * online-shop layout for free + commercial Cinatra extensions. */ :root { --cin-radius: 10px; --cin-radius-sm: 7px; --cin-shadow-card: 0 1px 0 rgba(21, 33, 58, 0.04), 0 1px 2px rgba(21, 33, 58, 0.04); --cin-shadow-lift: 0 2px 8px rgba(21, 33, 58, 0.08); --cin-font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif; --cin-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --cin-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* F33 — full colour palette mirrored here so this sheet is self-contained (a fallback contract). The wp_head priority-99999 :root block in functions.php overrides the load-bearing ones at runtime. */ --cin-paper: #f1f1ed; --cin-surface: #f7f7f3; --cin-surface-strong: #ffffff; --cin-surface-muted: #e8e8e3; --cin-sidebar: #eceeea; --cin-toolbar: #dcddd5; --cin-ink: #15213a; --cin-blue: #364e81; --cin-muted: #5a6477; --cin-line: rgba(21, 33, 58, 0.14); --cin-line-strong: #15213a; --cin-gold: #c79545; --cin-burgundy: #7a2e3a; --cin-red: #a6384f; --cin-green: #3f6e6b; --cin-rust: #b0613a; --cin-olive: #6c6a3a; --cin-clay: #a86b72; --cin-plum: #574a68; --cin-stripe-light: #e3e8ee; --cin-stripe-mid: #b8c4d4; --cin-topbar-h: 34px; /* Web Shell spec: fixed 34px; composable by other chrome */ } /* ── Sticky footer (R17) ────────────────────────────────────────────────── Make the page a min-height flex column so the footer sits at the viewport bottom on short pages (no white gap below it). The only in-flow body children are `.cin-topbar` + `.wd-page-wrapper` (all WoodMart overlays are fixed / absolute, so they don't participate in flex layout). `dvh` avoids the mobile URL-bar jump; the admin-bar offsets cancel WP's logged-in `html` shift. */ html { min-height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body.admin-bar { min-height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { body.admin-bar { min-height: calc(100dvh - 46px); } } .wd-page-wrapper.website-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; } .wd-page-content.main-page-wrapper { flex: 1 0 auto; } /* ── Canvas + base typography ─────────────────────────────────────────── */ body, .woocommerce, .wd-page-wrapper, .site-content { background-color: var(--cin-paper); color: var(--cin-ink); font-family: var(--cin-font-body); } h1, h2, h3, h4, h5, h6, .entry-title, .product_title, .woocommerce-loop-product__title, .wd-entities-title, .section-title, .dokan-dashboard h1, .dokan-store-info h2 { font-family: var(--cin-font-sans); color: var(--cin-ink); letter-spacing: -0.012em; } /* Editorial display headings — italic 800, like the Cinatra masthead. */ h1, .entry-title, .product_title, .page-title { font-weight: 800; font-style: italic; letter-spacing: -0.018em; } code, kbd, pre, samp, .sku, .price del, .post-meta { font-family: var(--cin-font-mono); } /* Inline code sits on --surface-muted (§II/§VIII: an allowed surface token, no introduced off-whites). Block 
 is excluded — it keeps its own
   ground (the README dark code block sets background: var(--cin-ink)). */
code, kbd, samp {
	background: var(--cin-surface-muted);
}

a { color: var(--cin-blue); }
a:hover { color: var(--cin-ink); }

/* ── Header / masthead ───────────────────────────────────────────────── */
.whb-header,
.whb-general-header,
.site-header {
	background-color: var(--cin-paper);
	border-bottom: 1px solid var(--cin-line);
}
/* R2 (F18): the visible header rows (.whb-general-header / .whb-header-bottom)
   carry .whb-color-dark, which WoodMart's header-base.min.css paints pure white
   via `.whb-color-dark:not(.whb-with-bg){background:#fff}` (specificity 0-2-0).
   The 0-1-0 paper rule above loses that cascade, so beat it with a matching
   compound selector + !important. The grey inline hairline comes from
   `.whb-border-fullwidth` (rgba(129,129,129,0.2)) — recolour to navy --cin-line. */
.whb-general-header.whb-color-dark,
.whb-header-bottom.whb-color-dark {
	background-color: var(--cin-paper) !important;
}
.whb-general-header.whb-border-fullwidth,
.whb-header-bottom.whb-border-fullwidth {
	border-bottom-color: var(--cin-line) !important;
}
.whb-header a:not(.btn):not(.button),
.wd-nav > li > a {
	color: var(--cin-ink);
}
/* Active main-nav item — marks the current extension-kind archive (WordPress
   adds current-menu-item to the matching custom-link item). Blue text + a 2px
   underline drawn with inset box-shadow (no layout shift), matching the
   detail-view tab active treatment. */
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a,
.whb-header .wd-nav-main > li.current_page_item > a {
	color: var(--cin-ink);
	/* M3 (F28): no weight reduction — active must not render LIGHTER than
	   inactive siblings (WoodMart default 700). Inherit the sibling weight. */
}
/* L4 (F28): anchor the 2px indigo underline to the inner label span so it sits
   ~2px under the text, not floating ~12px below it at the bottom of the tall
   flex . */
.whb-header .wd-nav-main > li.current-menu-item > a .nav-link-text,
.whb-header .wd-nav-main > li.current-menu-ancestor > a .nav-link-text,
.whb-header .wd-nav-main > li.current_page_item > a .nav-link-text {
	color: var(--cin-ink);
	box-shadow: inset 0 -2px 0 0 var(--cin-blue);
}
/* WoodMart's factory top-bar is replaced by the Cinatra announcement strip
   (cinatra_woodmart_topbar(), hooked to woodmart_after_body_open). Hide
   WoodMart's empty band entirely so there's no blank ink strip + no demo
   placeholder ("ADD ANYTHING HERE…"). */
.whb-top-bar,
.whb-row.whb-top-bar {
	display: none;
}

/* ── Cinatra announcement strip (ink masthead rule) ───────────────────── */
.cin-topbar {
	/* Web Shell spec VI: sticky at the very top, above the property's own
	   header (WoodMart's .whb-main-header is z-index 390) and its mobile
	   switcher dropdown must layer above it too. */
	position: sticky;
	top: 0;
	z-index: 400;
	background-color: var(--cin-ink);
	color: var(--cin-paper);
}
/* When WoodMart's header goes sticky it pins to top:0 — offset it below the
   shell so the two stack instead of overlapping. */
.whb-header.whb-sticked {
	top: var(--cin-topbar-h);
}
.cin-topbar-inner {
	/* Full-width ink masthead, matching docs.cinatra.ai (the shared Cinatra
	   top-bar): the dark bar AND its content span edge-to-edge with 24px
	   gutters, not capped to the page container. The page content below stays
	   centered — full-width chrome over centered content is the canonical
	   Cinatra masthead treatment. */
	max-width: none;
	margin: 0 auto;
	height: var(--cin-topbar-h);
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
/* Breadcrumb trail (left) — the in-page WoodMart breadcrumb is hidden globally
   (see below); the trail lives only here. Own classes so that hide can't catch
   it. */
.cin-topbar-crumbs {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--cin-font-sans);
	font-size: 11.5px;
}
.cin-topbar-crumbs .cin-crumb {
	color: rgba(241, 241, 237, 0.6);
	text-decoration: none;
}
.cin-topbar-crumbs a.cin-crumb:hover { color: #ffffff; }
.cin-topbar-crumbs .cin-crumb-current {
	color: rgba(241, 241, 237, 0.92);
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cin-topbar-crumbs .cin-crumb-home {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cin-topbar-crumbs .cin-crumb-sep {
	color: rgba(241, 241, 237, 0.3);
	display: inline-flex;
	align-items: center;
}
/* Documentation link (right). */
.cin-topbar-doc {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 2px;
	font-family: var(--cin-font-sans);
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(241, 241, 237, 0.6);
	text-decoration: none;
	white-space: nowrap;
}
/* Web Shell spec: hover brightens to white on the ink ground — mustard is brand-only. */
a.cin-topbar-doc:hover { color: #ffffff; }
/* Property switcher + GitHub (right) — Web Shell spec III/IV. */
.cin-topbar-links {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.cin-switch-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.cin-topbar-div {
	width: 1px;
	height: 13px;
	background: rgba(241, 241, 237, 0.2);
	flex-shrink: 0;
}
.cin-topbar-div--strong {
	height: 15px;
	background: rgba(241, 241, 237, 0.18);
}
.cin-gh {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--cin-font-sans);
	font-size: 11px;
	font-weight: 600;
	color: rgba(241, 241, 237, 0.6);
	text-decoration: none;
	white-space: nowrap;
}
.cin-gh:hover,
.cin-gh:hover .cin-gh-count {
	color: #ffffff;
}
.cin-gh-count {
	display: flex;
	align-items: center;
	gap: 3px;
	color: rgba(241, 241, 237, 0.45);
	font-weight: 500;
}
/* Focus on the navy ground: cream ring (Web Shell spec VI). */
.cin-topbar a:focus-visible,
.cin-switch-menu summary:focus-visible {
	outline: 2px solid rgba(241, 241, 237, 0.92);
	outline-offset: 2px;
}
/* Switcher collapse (<480px) and breadcrumb truncation (<720px). */
.cin-switch-menu {
	display: none;
	position: relative;
}
.cin-switch-menu summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cin-switch-menu summary::-webkit-details-marker { display: none; }
.cin-switch-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 14px;
	background: var(--cin-ink);
	border: 1px solid rgba(241, 241, 237, 0.18);
	border-radius: 8px;
	z-index: 2;
}
@media (max-width: 720px) {
	.cin-topbar-crumbs .cin-crumb:not(.cin-crumb-current),
	.cin-topbar-crumbs .cin-crumb-sep {
		display: none;
	}
}
@media (max-width: 480px) {
	.cin-switch-row { display: none; }
	.cin-switch-menu { display: block; }
	.cin-gh-label { display: none; }
	.cin-topbar-links { gap: 10px; }
}
/* Active property — white at weight 600, not a link (Web Shell spec III);
   the location cue is brightness, never the brand mustard. */
.cin-topbar-doc--active {
	color: #ffffff;
}

/* In-page breadcrumb removed globally (R20) — it now lives only in the top bar
   (.cin-topbar-crumbs, a distinct class, is unaffected). */
.wd-breadcrumbs,
.woocommerce-breadcrumb {
	display: none;
}

/* Page-title band (e.g. shop/archive "Blog" header). WoodMart defaults to a
   near-black band; the Cinatra editorial look is ink title on paper, not
   white-on-dark. Reset the band to paper + ink italic title. */
.page-title,
.wd-page-title,
.title-size-default.page-title {
	background-color: var(--cin-paper) !important;
	border-bottom: 0;
	padding-top: 26px;
	padding-bottom: 14px;
}
/* Match the whitespace below the header band to the whitespace above the title:
   WoodMart's content wrapper adds ~40px on top, which dwarfs the 26px above the
   title. Tighten it only where the wrapper follows the page-title band. */
.page-title + .wd-content-layout,
.page-title + .content-layout-wrapper {
	padding-top: 12px;
}

/* STANDING RULE — remove the GREY thin dividing lines from page content, but
   KEEP the navy etched design rules.
   REMOVE: the soft grey hairlines (var(--cin-line) ≈ rgba(21,33,58,.14), or
   WoodMart's rgba(0,0,0,~.1)) that separate regions — e.g. the lower rule under
   the product-detail description, the my-account nav row dividers + section-title
   underline, the checkout terms-and-conditions rule, the README 
. Plus the
   one navy band ABOVE the product tablist (the explicitly-removed "upper section
   rule").
   KEEP: the navy etched paired-line design motif (var(--cin-line-strong)) — the
   product-tablist flanks, the .cin-sect-head section-head rule, and the WoodMart
   section-title divider — together with all component boundaries (card / input /
   button box borders, notice boxes, table structure, the active-tab indigo
   underline) and header / footer / top-bar chrome.
   Do NOT remove the navy etched design rules; do NOT reintroduce grey content
   dividers. */
.product_meta { border-top: 0 !important; }
.product-tabs-wrapper { border-top: 0 !important; border-bottom: 0 !important; }
/* Checkout: strip WooCommerce's default rule above the terms-and-conditions
   block — a content divider hairline. */
.woocommerce-terms-and-conditions-wrapper { border-top: 0; }
.single-product .summary > hr,
.woocommerce-tabs > hr,
.wd-single-tabs > hr { display: none; }
.whb-general-header,
.whb-header-bottom,
.whb-sticky-row { box-shadow: none; }
.site-footer,
.wd-footer-h,
.footer-container { border-top: 0; }
.page-title .entry-title,
.wd-page-title .entry-title,
.page-title .liner-title,
.page-title h1 {
	/* F26: pin the archive/account page-title band heading to §IX h1
	   (Archivo italic 800 / 44px / 1.05 / -0.018em / ink). The band itself
	   stays paper + centered (set above); this fixes the oversized
	   "Extensions" / "My account" / "Agents" titles. */
	font-family: var(--cin-font-sans);
	font-style: italic;
	font-weight: 800;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.018em;
	color: var(--cin-ink);
	text-wrap: balance;
}

/* ── Cinatra wordmark (header-elements/logo.php override) ─────────────── */
.cinatra-brand {
	display: inline-flex;
	/* Canonical lockup: the fedora and the wordmark are CENTRE-aligned, never
	   baseline. A baseline-set fedora sinks below the wordmark because the hat is
	   bottom-weighted (wide brim), so it reads oversized and detached. Fedora→
	   wordmark gap = 0.4C (≈8px at the 28px / 20px-cap wordmark), matching the
	   wordmark→sub-brand gap so the lockup reads as one even rhythm. */
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.cinatra-brand .cinatra-mark {
	display: inline-flex;
	align-items: center;
}
.cinatra-brand .cinatra-wordgroup {
	display: inline-flex;
	align-items: center;
	/* M2 (F21): anchor the em-gap to the word size (no font-size = em resolves
	   against inherited 14px → 4px). At 28px, 0.29em ≈ 8px, matching the
	   fedora→wordmark gap above. */
	font-size: 28px;
	gap: 0.29em;
}
.cinatra-brand .cinatra-word {
	font-family: var(--cin-font-sans);
	font-style: italic;
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.022em;
	color: var(--cin-gold);
}
.cinatra-brand:hover .cinatra-word { color: var(--cin-gold); }
/* "Marketplace" suffix — same Archivo italic-800 attrs, but ink not gold (R4),
   and stays ink on hover (the gold-on-hover rule above must not catch it). */
.cinatra-brand .cinatra-word-mp,
.cinatra-brand:hover .cinatra-word-mp {
	color: var(--cin-ink);
	text-shadow: none;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
/* WoodMart's generated option-CSS prints an inline `.wd-footer{background:#fff}`
   rule. Match the compound `.wd-footer.footer-container` (specificity 0-2-0) so
   the Cinatra ink band wins on plain specificity — no !important. The copyright
   strip is a separate `.wd-copyrights` element that must be styled too, else its
   text renders as faint ink on the (previously white) ground. */
.wd-footer.footer-container,
.wd-copyrights {
	background-color: var(--cin-ink);
	color: var(--cin-paper);
}
.wd-footer.footer-container a,
.wd-copyrights,
.wd-copyrights a,
.wd-copyrights p,
.wd-copyrights .copyright-text { color: var(--cin-paper); }
/* F27 / §VIII r3: footer link hover brightens to cream on the ink footer. */
.wd-footer.footer-container a:hover,
.wd-copyrights a:hover { color: var(--cin-paper); }

/* ── Buttons (§VI/§X) ─────────────────────────────────────────────────
   Wave 4 variant system. Base metrics are pinned on the shared button rule
   (inline-flex, gap 7px, 7px 14px padding, 500 13px sans, radius-sm, 1px
   border); variants are then assigned by WooCommerce / WoodMart / Dokan
   class. ONLY the explicit primary set is indigo — generic .button is the
   white "default" variant. Hover never swaps a variant's colour: primary
   deepens to ink (the one sanctioned darken); default/outline get a faint
   surface/tint lift, NOT a full ink fill. */
.btn:not(.wd-skip-navigation):not(.wd-skip-content):not(.wd-action-btn):not(.wd-role-btn),
button:not(.wd-skip-navigation):not(.wd-skip-content):not(.wd-action-btn):not(.wd-role-btn),
input[type="button"],
input[type="submit"],
.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.dokan-btn,
.dokan-btn-theme,
.dokan-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--cin-line-strong);
	border-radius: var(--cin-radius-sm);
	font-family: var(--cin-font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.01em;
	/* Spec button metrics (#199 item 2): height derives from padding +
	   line-height alone. WoodMart's min-height:42px floor and 1.2
	   line-height inflated every .button/.btn/