/* Etminan — product cards, archive grid, filters. */ /* Product cards. The title is an

, and Blocksy only styles .woocommerce-loop-product__title:is(p, span) — it never sizes the h2 variant, so the theme's document scale landed on every card. Scope beats the bare `h2` rule in style.css without !important. */ ul.products li.product { background: var(--etminan-surface); border: 1px solid var(--etminan-line); border-radius: var(--etminan-radius-lg); padding: 0; /* was var(--etminan-space): 32px of padding on a 200px card left 136px of content */ overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ul.products li.product:hover { border-color: var(--etminan-line-strong); box-shadow: 0 2px 12px rgb(22 24 26 / 7%); } ul.products li.product > figure, ul.products li.product .ct-media-container { margin: 0; display: block; background: var(--etminan-surface); } /* Product renders ship with a baked-in light-grey backdrop. `mix-blend-mode: multiply` was meant to hide the seam, but multiply(grey, white) returns grey — the boxes stayed visible in every screenshot. `contain` plus breathing room inside a square frame is what actually removes it. */ ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: normal; background: var(--etminan-surface); padding: 6%; box-sizing: border-box; } ul.products li.product > *:not(figure):not(.ct-media-container) { padding-inline: 0.9rem; } ul.products li.product > *:last-child { padding-bottom: 0.9rem; margin-top: auto; } ul.products li.product h2.woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { font-size: var(--etminan-ui-md); line-height: 1.55; font-weight: 600; letter-spacing: 0; margin: 0.85rem 0 0.35rem; /* Two lines always — a clamp alone still leaves one-line cards shorter than two-line ones, and the measured grid had three different row heights (519/563/607). min-height fixes the block. */ min-height: calc(2 * 1.55em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Titles are links, and `a { color: accent }` made every card title teal — measured rgb(15, 118, 110) on all of them, a wall of accent text. The card itself is the affordance; the title is content. */ ul.products li.product .woocommerce-loop-product__title a, ul.products li.product .woocommerce-loop-product__link { color: var(--etminan-ink); text-decoration: none; } ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--etminan-accent-deep); } /* Price was 15px under a 30px title. In this category price is the decision, so it outranks the title. */ ul.products li.product .price { display: block; font-size: 1.15rem; font-weight: 700; color: var(--etminan-ink); margin: 0 0 0.75rem; font-variant-numeric: tabular-nums; } ul.products li.product .price del { display: none; } /* The loop button wrapped to two lines (77px tall) inside a 200px card. */ ul.products li.product a.button, ul.products li.product button.button { display: block; width: 100%; text-align: center; padding: 0.7em 0.5em; font-size: 0.9375rem; white-space: nowrap; } /* Blocksy's per-card category row duplicates the sidebar taxonomy and puts 18px tap targets inside a card that is already one link. */ ul.products li.product ul.entry-meta, ul.products li.product .entry-meta { display: none; } /* Measured: `grid-template-columns: 343.188px` on a 390px viewport despite the `columns-4` class — one product per screen, and a 5316px-tall home page. */ @media (max-width: 689.98px) { .woocommerce ul.products, ul.products, ul.products.columns-3, ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } ul.products li.product h2.woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { font-size: 0.9375rem; } ul.products li.product .price { font-size: 1rem; } ul.products li.product a.button, ul.products li.product button.button { font-size: 0.875rem; padding: 0.65em 0.4em; } } /* Header cart ---------------------------------------------------------- */ .etminan-cart-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--etminan-tap); } .etminan-cart-link__icon { display: inline-flex; align-items: center; } .etminan-cart-link__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 100px; background: var(--etminan-accent); color: #fff; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } @media (max-width: 999.98px) { .etminan-cart-link__label { font-size: 1rem; } } /* Filter drawer -------------------------------------------------------- */ .etminan-filters { margin-bottom: 1rem; } .etminan-filters__toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; justify-content: center; } .etminan-filters__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 100px; background: #fff; color: var(--etminan-accent-deep); font-size: 0.8125rem; font-weight: 700; } .etminan-filters__body { margin-top: 0.75rem; padding: 1rem; background: var(--etminan-surface); border: 1px solid var(--etminan-line); border-radius: var(--etminan-radius-lg); } /* Chips ---------------------------------------------------------------- */ .etminan-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .etminan-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.3rem 0.75rem; border-radius: 100px; background: var(--etminan-accent-wash); border: 1px solid var(--etminan-accent); color: var(--etminan-accent-deep); font-size: var(--etminan-ui-sm); font-weight: 600; text-decoration: none; } .etminan-chip:hover { background: var(--etminan-accent); color: #fff; } .etminan-chip--clear { background: transparent; border-color: var(--etminan-line-strong); color: var(--etminan-ink-soft); } .etminan-chip__x { font-size: 1.1em; line-height: 1; } /* The colour widget measured 917px tall with 33 terms — taller than the product grid beside it. Cap it and let it scroll. */ .widget_layered_nav ul, .woocommerce-widget-layered-nav-list { max-height: 320px; overflow-y: auto; padding-inline-start: 0; list-style: none; } .woocommerce-widget-layered-nav-list__item { padding: 0.15rem 0; } .woocommerce-widget-layered-nav-list__item a { display: inline-block; min-height: 32px; line-height: 32px; text-decoration: none; } .woocommerce-widget-layered-nav-list__item.chosen a { font-weight: 700; color: var(--etminan-accent-deep); } /* Pagination — last off-brand blue on the storefront ------------------- Measured: .page-numbers.current background rgb(21, 89, 237), from Blocksy's --theme-link-hover-color; the same rule also puts a matching blue border on :hover. Separately, every page-number/prev/next gets a *second*, different Blocksy blue (rgb(40, 114, 250), --theme-palette- color-1) as its keyboard focus-visible outline — main.min.css's `a:focus-visible{outline:2px solid var(--theme-palette-color-1)}` (specificity 0,1,1) beats this theme's sitewide `:where(a, button,...):focus-visible` ring (0,1,0 — :where() zeroes its argument's specificity), so the global teal ring never reaches these links. Both pagination.min.css and main.min.css print after this file, so an equal-specificity rule would still lose the cascade; `nav.ct-pagination` as an extra ancestor outranks Blocksy's selectors without !important. No disabled state exists to style — Blocksy omits the prev/next control entirely rather than rendering a disabled one. Verified with CSS.forcePseudoState( hover / focus-visible ), not assumed. */ nav.ct-pagination .page-numbers.current { background: var(--etminan-accent); border-color: var(--etminan-accent); color: #fff; } nav.ct-pagination .page-numbers:not(.dots):hover { border-color: var(--etminan-accent); } nav.ct-pagination a.page-numbers:focus-visible { outline: 3px solid var(--etminan-accent); outline-offset: 2px; border-radius: 3px; } /* Category widget — count orphaned from its label in RTL --------------- WooCommerce ships `.count{float:left}` from an LTR-era default, and Blocksy's own RTL stylesheet keeps the same *physical* left (main-rtl.min.css: `.rtl .widget_product_categories li .count{float: left}`) instead of flipping it for RTL. A physical float ignores writing direction, so the count anchors to the visual left edge while the RTL label sits at the right — measured: label 348→423px, count 75→95px, li 75→423px — roughly 250px of dead space between a term and its own count, with the next row's count directly beneath it. The working reference is the colour widget right above this one, whose count was never floated: measured 355→423px for the label and 332→351px for the count — the two sit right next to each other, hugging the inline-start (right, in RTL) edge, with the unused space trailing at the inline end. That is the target, not a label-vs-count split across the full row: `justify-content: flex-start` (the flex default) plus a small `column-gap` keeps the label and its count together as one unit, the same way the colour widget already reads, instead of pushing the count out to the opposite edge with `space-between`. Flex items ignore `float` outright (it has no effect on a flex item's layout regardless of cascade), so the reset below is for clarity, not because it's load-bearing. li.cat-parent nests a