and no
* override, that left the card confined to Astra's first grid TRACK
* (measured live: 178px) inside a 340px container, with three empty phantom
* columns beside it — not a card that was too small, a card trapped in 1/4
* of the space it should have had. Confirmed by inspecting
* getComputedStyle(...).gridTemplateColumns directly against the live page,
* not assumed from how it looked. The "Crowd Pleasers" 4-column grid below
* needs the exact same override for the same reason, or Astra's 4-column
* default silently wins there too the moment it loads after this file.
*/
/* 380px here, matching .cc-gf-results__top's 400px less its breathing room.
This inner cap is the one that actually sizes the card — widening only
the outer wrapper does nothing, which is exactly the bug shipped in
c159813 (verified live 2026-08-16: outer said 400px, the card still
measured 340px). */
.woocommerce .cc-gf-results__top-list{grid-template-columns:1fr!important;max-width:380px;margin:0 auto}
/*
* Top Match goes HORIZONTAL from 781px up (Moiz, 2026-08-16: "this card is
* huge and a lot of whitespace is being left on sides"). A 380px portrait
* card in a 1180px row left roughly 800px empty either side — the product
* photos are 4:5 portrait, so a vertical featured card is unavoidably tall.
* Horizontal: square 300px image left, summary right, card 1180x327.
*
* Below 781px nothing here applies and the card falls back to Astra's own
* stacked flex layout, unchanged. That is the same breakpoint the grid
* already steps at.
*
* Three specificity fights had to be won here, all confirmed live against
* the real page rather than guessed — record them so the next person does
* not rediscover them:
*
* 1. `.woocommerce ul.products li.product` sets `display:flex!important`.
* Ours needs `!important` too, AND the `ul.products` qualifier: without
* it our selector scores one element lower than theirs and loses the
* tie even with `!important` on both.
* 2. `.woocommerce ul.products li.product .button` sets `width:100%`,
* which stretched the gold button across the full 821px column.
* 3. The brand product-card CSS sets `height:auto!important` and
* `aspect-ratio:4/5!important` on the image, so the square crop needs
* `!important` on both or the image stays 300x375 and gets clipped by
* the wrapper instead of filling it.
*
* The `.astra-shop-thumbnail-wrap` / `.astra-shop-summary-wrap` names are
* Astra's, which makes this theme-coupled — acceptable because it is a
* layout override of markup Astra itself renders, not a re-built card (see
* this file's header for why we never rebuild the card). If the theme ever
* changes, this block degrades to the stacked layout rather than breaking.
*/
@media(min-width:781px){
.cc-gf-results__top{max-width:none}
.woocommerce ul.products.cc-gf-results__top-list{max-width:none}
.woocommerce ul.products.cc-gf-results__top-list li.product{
display:grid!important;grid-template-columns:300px minmax(0,1fr);gap:32px;
align-items:center;justify-items:stretch;text-align:left;padding:20px}
.woocommerce ul.products.cc-gf-results__top-list li.product>.astra-shop-thumbnail-wrap{
grid-column:1;width:100%;margin:0;aspect-ratio:1;overflow:hidden;border-radius:14px}
.woocommerce ul.products.cc-gf-results__top-list li.product .astra-shop-thumbnail-wrap>a{
display:block;width:100%;height:100%}
.woocommerce ul.products.cc-gf-results__top-list li.product .astra-shop-thumbnail-wrap img{
width:100%!important;height:100%!important;aspect-ratio:auto!important;
object-fit:cover;object-position:center;border-radius:0}
.woocommerce ul.products.cc-gf-results__top-list li.product>.astra-shop-summary-wrap{
grid-column:2;width:100%}
.woocommerce ul.products.cc-gf-results__top-list li.product .ast-loop-product__link{
font-size:22px;line-height:1.3;display:block;max-width:38ch}
.woocommerce ul.products.cc-gf-results__top-list li.product .price{
font-size:19px;margin:0 0 22px;padding-top:0;border-top:0}
.woocommerce ul.products.cc-gf-results__top-list li.product .button{width:auto;margin:0}
}
/*
* The description column.
*
* CC_Gift_Finder::card() prints .cc-gf-desc inside EVERY pooled product,
* because the winner is chosen client-side. It must therefore be hidden by
* default and switched on only in the Top Match slot — a Crowd Pleasers
* tile has nowhere to put 500 characters.
*/
.cc-gf-desc{display:none}
/*
* Three columns only at 1100px and up. Between 781 and 1100 the card is
* already horizontal but only ~750–1070px wide; a third column there
* squeezes the title column below a readable width, so the description
* stays hidden and the two-column layout above still applies.
*
* The height cap is max-height, not -webkit-line-clamp: the excerpt is
* wp_kses_post'd post content and can legitimately contain , which
* stops line-clamp working (it needs inline content in a -webkit-box).
* 8 x 1.6em lands exactly on a line boundary, so the cut looks deliberate
* and needs no fade. Measured against the real catalogue on 2026-08-16:
* excerpts run 119–966 characters, median 564, so most show in full and
* only the longest few are trimmed.
*/
@media(min-width:1100px){
.woocommerce ul.products.cc-gf-results__top-list li.product{
grid-template-columns:300px minmax(0,1fr) minmax(0,1.2fr)}
.woocommerce ul.products.cc-gf-results__top-list li.product>.cc-gf-desc{
display:block;grid-column:3;align-self:center;
font-size:13.5px;line-height:1.6;color:var(--cc-text-muted,#6a6a6a);
max-height:12.8em;overflow:hidden}
.woocommerce ul.products.cc-gf-results__top-list li.product>.cc-gf-desc>*{margin:0 0 .7em}
.woocommerce ul.products.cc-gf-results__top-list li.product>.cc-gf-desc>*:last-child{margin-bottom:0}
}
.cc-gf-results__more{margin-top:8px}
.cc-gf-results__more>h2{margin:0 0 22px;text-align:center;font-family:var(--cc-font-heading,inherit)}
.woocommerce .cc-gf-results__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px}
/* 4 columns only once there is genuinely room for them. Measured live in a
width-controlled iframe against the real cards (2026-08-16): at a 800px
viewport a 4-column grid gives 169px cards — narrow enough that product
names wrap to two lines and the image dominates the tile. The same width
at 3 columns gives 242px. So the 4-column step is held back to 1100px,
where a card is ~250px, and 781–1100px keeps the old 3-column layout. */
@media(max-width:1100px){
.woocommerce .cc-gf-results__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:780px){
.woocommerce .cc-gf-results__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
.woocommerce .cc-gf-results__grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
.cc-gf-sheet__backdrop,.cc-gf-sheet__panel,.cc-gf__submit{transition:none}
}