/* Carefree Grid #24 v114 cgrid_card.css. One-card product tiles. Linked as cgrid_card.css?v=114b only when the
   card mode shows (staff preview or On); the html element then carries class cgrid-card, set before cgrid.js.
   Every rule is scoped html.cgrid-card #content, so the QAP popup and anything outside the page body is untouched.
   Styles only: no button behaviour, no pointer-events, visibility, transform or filter on the card, its caption,
   price or wrapper, and no display value on any button or flag. Bump ?v= and this line with every change. */
@supports selector(:has(a)) {

/* C1. CARD: white, rounded, thin warm border. No overflow clip: the in-cart line sits under the card (top 100%). */
html.cgrid-card #content .product-thumb {
    --cg-top: 6px; --cg-step: 24px; --cg-gap: 4px; --cg-ph: 20px; --cg-in: 6px; --cg-band: 30px; --cg-r: .75; --cg-cap: 100000px;
    container-type: inline-size;
    container-name: cgcard;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #ece3da !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: box-shadow .15s, border-color .15s;
}
html.cgrid-card #content .product-thumb:hover {
    border-color: #ddd0c3 !important;
    box-shadow: 0 4px 14px rgba(60, 40, 20, .09) !important;
}
/* the plain wrapper round caption + buttons (listing pages) steps aside so both sit in the card's own column;
   home-page module tiles have no wrapper (their caption follows the photo directly) and are left as they are */
html.cgrid-card #content .product-thumb > .image + div:not(.caption) { display: contents !important; }

/* C2. PHOTO: a 4:3 box (a short laptop screen also caps its height, C2a) known before the picture arrives;
   the picture is centred and never enlarged. The band on top holds the flag pills. */
html.cgrid-card #content .product-thumb .image {
    flex: none !important;
    box-sizing: border-box !important;
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    max-height: var(--cg-cap) !important;
    margin: 0 !important;
    padding: var(--cg-band) 14px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 11px 11px 0 0 !important;
}
html.cgrid-card #content .product-thumb .image > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
html.cgrid-card #content .product-thumb .image img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* C2a. SHORT LAPTOP SCREENS AND ZOOMED-IN WINDOWS (owner 2026-10-28: a whole card, pills to button, fits under
   the sticky header; browser zoom lands here too, and the photo must not shrink while the cards widen): from 768px
   wide and at most 800px tall the photo box is at most 62% of the card width high, never under 176px (a 142px
   picture) nor over 210px, and never over the 4:3 box. Not a share of the screen height, so a card is the same
   height at every height in the band. The cap is an unregistered property, so 62cqw is worked out where it is
   used (.image and its picture, C9), against this card's own container (C1). cgrid.js keys its remembered
   heights on the same media query. */
@media (min-width: 768px) and (max-height: 800px) {
    html.cgrid-card #content .product-thumb { --cg-cap: clamp(176px, 62cqw, 210px); }
}

/* C3. NAME AND PRICE. The name takes the lines it needs, two at most; the size line follows it; the price
   (with the line under it) stands at the foot of the caption, above the button, so a row is only as tall
   as its fullest card. cgrid.js lines the prices of a row up from the bottom. */
html.cgrid-card #content .product-thumb .caption {
    position: static !important;
    flex: 1 1 auto !important;
    padding: 6px 10px 8px !important;
    text-align: left !important;
}
html.cgrid-card #content .product-thumb .caption h4 {
    height: auto !important;
    max-height: 38px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font: 600 14px/19px 'Montserrat', Arial, sans-serif !important;
    text-align: left !important;
    text-transform: none !important;
}
html.cgrid-card #content .product-thumb .caption h4 a { color: #252525 !important; text-decoration: none !important; }
/* the size line (VTT's byline) sits close under the name: its own 6px gap below becomes 2px */
html.cgrid-card #content .product-thumb .caption .vtt-byline { margin-bottom: 2px !important; }
html.cgrid-card #content .product-thumb .caption h4 a:hover { color: #c2185b !important; }
html.cgrid-card #content .product-thumb .caption > .price {
    position: static !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 2px 8px !important;
    margin: auto 0 0 0 !important;
    padding: 0 !important;
    font: 700 20px/24px 'Montserrat', Arial, sans-serif !important;
    color: #252525 !important;
    text-align: left !important;
}
/* the flag line break and the held Save gap of cgrid.css are not needed: flags are out of flow here */
html.cgrid-card #content .product-thumb .caption > .price::before { content: none !important; display: none !important; height: 0 !important; }
html.cgrid-card #content .product-thumb .caption .price-new { color: #c2185b !important; font-weight: 700 !important; }
html.cgrid-card #content .product-thumb .caption .price-old {
    color: #6f665e !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: line-through !important;
}
html.cgrid-card #content .product-thumb .caption > .price + div:not(.ge-pop) {
    margin: 2px 0 0 0 !important;
    font: 600 12px/16px 'Montserrat', Arial, sans-serif !important;
    color: #555 !important;
    text-align: left !important;
}
html.cgrid-card #content .product-thumb .caption .oc-badges-wrap { display: contents !important; position: static !important; }

/* C4. FLAGS AS PILLS ON THE PHOTO BAND. Each pill is placed against the card (nothing between them is positioned);
   the pills are not moved in the page, so the shipping and saving scripts keep finding them where they put them.
   No display value is set: a pill another mod hides stays hidden. */
html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-saving,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-pre-order {
    position: absolute !important;
    z-index: 3;
    top: var(--cg-top) !important;
    left: var(--cg-in) !important;
    right: auto !important;
    bottom: auto !important;
    order: 0 !important;
    box-sizing: border-box !important;
    height: var(--cg-ph) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font: 700 10.5px/var(--cg-ph) 'Montserrat', Arial, sans-serif !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    vertical-align: top !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
}
/* the small (i) stays on the pills that open a note when tapped (Ships Free, Pre-Order): sized to the pill text */
html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship > i,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free > i,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-pre-order > i {
    margin: 0 0 0 3px !important; font-size: 1em !important; line-height: inherit !important; vertical-align: top !important; color: inherit !important;
}
html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free { background: #15803d !important; color: #fff !important; }
/* greyed Ships Free (not available for this cart) stays grey, never green */
html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship.fs-flag-disabled,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free.fs-flag-disabled {
    background: #6b7280 !important; color: #fff !important; opacity: 1 !important; filter: none !important; box-shadow: none !important;
}
html.cgrid-card #content .product-thumb .caption .price .oc-tile-saving { background: #dc2626 !important; color: #fff !important; }
html.cgrid-card #content .product-thumb .caption .price .oc-tile-pre-order { background: #6d28d9 !important; color: #fff !important; }
/* #108 Top items: the rank badge holds the top-left corner, so the left slot starts after it */
html.cgrid-card #content .product-thumb.ge-tile { --cg-in: 40px; }

/* C4a. PILL ROWS, stacked on the left (the safe layout for any card width): Ships Free first, then Pre-Order,
   then Save; each later pill drops one row; the band grows by a row per extra pill, inside the same square box */
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)) .caption .price .oc-tile-pre-order,
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)) .caption .price .oc-tile-saving {
    top: calc(var(--cg-top) + var(--cg-step)) !important;
}
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .caption .price .oc-tile-saving {
    top: calc(var(--cg-top) + var(--cg-step) * 2) !important;
}
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order),
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)):has(.caption .price .oc-tile-saving) {
    --cg-band: calc(var(--cg-top) + var(--cg-step) + var(--cg-ph) + var(--cg-gap));
}
html.cgrid-card #content .product-thumb:has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) {
    --cg-band: calc(var(--cg-top) + var(--cg-step) * 2 + var(--cg-ph) + var(--cg-gap));
}

/* C4b. WIDE CARDS: when the card is wide enough for the two widest pills side by side (measured with the (i):
   Ships Free* 104.1px + Pre-Order 105.6px at 10.5px; 90.8 + 92.2 at 9.5px; plus insets and a 6px gap), Save (and Pre-Order
   next to Ships Free) take the top-right corner and the band stays one row unless all three flags are present.
   Without container queries the stacked layout above stays. :not(#cgrid-none) only lifts these over C4a. */
@media (min-width: 768px) {
    @container cgcard (min-width: 234px) {
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-saving,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)) .caption .price .oc-tile-pre-order {
            top: var(--cg-top) !important; left: auto !important; right: 8px !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving) .caption .price .oc-tile-pre-order {
            top: calc(var(--cg-top) + var(--cg-step)) !important; left: var(--cg-in) !important; right: auto !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .image,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-ph) + var(--cg-gap));
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-step) + var(--cg-ph) + var(--cg-gap));
        }
    }
    @container cgcard (min-width: 266px) {
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none) .caption .price .oc-tile-saving,
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)) .caption .price .oc-tile-pre-order {
            top: var(--cg-top) !important; left: auto !important; right: 8px !important;
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving) .caption .price .oc-tile-pre-order {
            top: calc(var(--cg-top) + var(--cg-step)) !important; left: var(--cg-in) !important; right: auto !important;
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .image,
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-ph) + var(--cg-gap));
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-step) + var(--cg-ph) + var(--cg-gap));
        }
    }
}
@media (max-width: 767px) {
    @container cgcard (min-width: 204px) {
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-saving,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)) .caption .price .oc-tile-pre-order {
            top: var(--cg-top) !important; left: auto !important; right: 8px !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving) .caption .price .oc-tile-pre-order {
            top: calc(var(--cg-top) + var(--cg-step)) !important; left: var(--cg-in) !important; right: auto !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .image,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-ph) + var(--cg-gap));
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-step) + var(--cg-ph) + var(--cg-gap));
        }
    }
    @container cgcard (min-width: 236px) {
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none) .caption .price .oc-tile-saving,
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)) .caption .price .oc-tile-pre-order {
            top: var(--cg-top) !important; left: auto !important; right: 8px !important;
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving) .caption .price .oc-tile-pre-order {
            top: calc(var(--cg-top) + var(--cg-step)) !important; left: var(--cg-in) !important; right: auto !important;
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .image,
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free, .oc-tile-pre-order)):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-ph) + var(--cg-gap));
        }
        html.cgrid-card #content .product-thumb.ge-tile:not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-step) + var(--cg-ph) + var(--cg-gap));
        }
    }
}

/* C4c. SHIPS FREE AND SAVE SIDE BY SIDE ON NARROWER CARDS (v112): Save is short (measured 65.6 to 73.1px at
   10.5px), so with Ships Free and Save but no Pre-Order, Save takes the top-right corner from 200px card width
   (Ships Free 104.1px + Save + 6px left inset, 6px gap, 8px right inset) and the band stays one row, so the photo
   is not squeezed on a short screen. Save is never wider than the space left (124.2px less than the card), so
   the two can never touch (a longer label ends in dots). Top items cards (rank badge) keep C4b. */
@media (min-width: 768px) {
    @container cgcard (min-width: 200px) {
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):not(:has(.caption .price .oc-tile-pre-order)) .caption .price .oc-tile-saving {
            top: var(--cg-top) !important; left: auto !important; right: 8px !important; max-width: calc(100cqw - 124.2px) !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving):not(:has(.caption .price .oc-tile-pre-order)) .image {
            --cg-band: calc(var(--cg-top) + var(--cg-ph) + var(--cg-gap));
        }
    }
}

/* C5. ADD TO CART IS THE BOTTOM EDGE: full width, one line, same height on every card (40px; 44px on phones, C6) */
html.cgrid-card #content .product-thumb .button-group {
    flex: none !important;
    margin: auto 0 0 0 !important;
    border: 0 !important;
    border-radius: 0 0 11px 11px !important;
}
html.cgrid-card #content .product-thumb .button-group > button:first-child {
    box-sizing: border-box !important;
    flex: 0 0 40px !important; /* QAP's flex:1 has a zero basis, which in the column group outranks the height */
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 0 11px 11px !important;
    background: #d81b60 !important;
    color: #fff !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font: 600 14px/20px 'Montserrat', Arial, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html.cgrid-card #content .product-thumb .button-group > button:first-child:hover { background: #c2185b !important; }
html.cgrid-card #content .product-thumb .button-group > button:first-child:focus-visible { outline: 2px solid #252525 !important; outline-offset: -4px !important; }
html.cgrid-card #content .product-thumb .button-group > button:first-child > span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* needs a choice first (Choose size): same edge, white with a pink outline */
html.cgrid-card #content .product-thumb .button-group > button:first-child:has(.vtt-cta) {
    background: #fff !important;
    color: #c2185b !important;
    box-shadow: inset 0 0 0 2px #e91e63 !important;
}
html.cgrid-card #content .product-thumb .button-group > button:first-child:has(.vtt-cta):hover { background: #fdf0f5 !important; }

/* C6. PHONES */
@media (max-width: 767px) {
    html.cgrid-card #content .product-thumb { --cg-top: 6px; --cg-step: 21px; --cg-gap: 4px; --cg-ph: 18px; --cg-in: 6px; --cg-band: 28px; }
    html.cgrid-card #content .product-thumb.ge-tile { --cg-in: 38px; }
    html.cgrid-card #content .product-thumb .image { padding: var(--cg-band) 10px 4px !important; }
    html.cgrid-card #content .product-thumb .caption { padding: 5px 9px 8px !important; }
    html.cgrid-card #content .product-thumb .caption h4 { height: auto !important; max-height: 36px !important; font-size: 13px !important; line-height: 18px !important; }
    html.cgrid-card #content .product-thumb .caption > .price { font-size: 17px !important; line-height: 21px !important; }
    html.cgrid-card #content .product-thumb .caption .price-old { font-size: 12px !important; }
    html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship,
    html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free,
    html.cgrid-card #content .product-thumb .caption .price .oc-tile-saving,
    html.cgrid-card #content .product-thumb .caption .price .oc-tile-pre-order {
        padding: 0 6px !important; font-size: 9.5px !important; letter-spacing: .02em !important;
    }
    html.cgrid-card #content .product-thumb .button-group > button:first-child { flex-basis: 44px !important; height: 44px !important; padding: 0 4px !important; font-size: 13px !important; }
    html.cgrid-card #content .product-thumb .button-group > button:first-child > span { font-size: 13px !important; }
}

/* C7. TRADE-ONLY TILE (Trade #97 puts its blue notice first in the button group and hides the price and the
   first button): the notice is the card's bottom edge, filling the space under the name, with even padding
   and the card's own corners. Nothing else on the tile or the notice's links is changed. */
html.cgrid-card #content .product-thumb:has(.opstrade-tile) .caption { flex: 0 0 auto !important; }
html.cgrid-card #content .product-thumb:has(.opstrade-tile) .button-group { flex: 1 1 auto !important; margin: 0 !important; }
html.cgrid-card #content .product-thumb .button-group > .opstrade-tile {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 0 !important;
    border-top: 1px solid #bce8f1 !important;
    border-radius: 0 0 11px 11px !important;
}
@media (max-width: 767px) {
    html.cgrid-card #content .product-thumb .button-group > .opstrade-tile { padding: 4px 10px !important; }
}

/* C8. NARROW CARDS (under 140px wide: the Customers Also Bought strip on phones; listing cards stay wider): the
   price line fits in at most two lines, the same way on every card. A smaller price and From, a price that never
   breaks inside, so a From price and its was-price wrap once (the was-price drops), never three ways. */
@container cgcard (max-width: 139px) {
    html.cgrid-card #content .product-thumb .caption > .price { gap: 0 4px !important; font-size: 14px !important; line-height: 19px !important; }
    html.cgrid-card #content .product-thumb .caption .price .vtt-from { margin-right: 0 !important; font-size: 11px !important; }
    html.cgrid-card #content .product-thumb .caption .price-new { white-space: nowrap !important; }
    html.cgrid-card #content .product-thumb .caption .price-old { white-space: nowrap !important; font-size: 11px !important; line-height: 15px !important; }
    /* #108 Top items: after the rank badge a pill with its (i) is wider than such a card; tighter pill text */
    html.cgrid-card #content .product-thumb.ge-tile .caption .price .oc-tile-free-ship,
    html.cgrid-card #content .product-thumb.ge-tile .caption .price .oc-tile-abs-free,
    html.cgrid-card #content .product-thumb.ge-tile .caption .price .oc-tile-saving,
    html.cgrid-card #content .product-thumb.ge-tile .caption .price .oc-tile-pre-order {
        padding: 0 5px !important; font-size: 9px !important; letter-spacing: 0 !important;
    }
}

/* C9. SIDEWAYS STRIPS (Customers Also Bought and Top items on product pages scroll sideways): each card is its
   own layer, so its pills move and paint with the card and never over a neighbour, an arrow or a bar; the
   photo height is worked out from the card width (3/4 of it, or the short-screen cap), not from the box round
   it, so the photo can never grow up into the pill band; the picture fills the space under the band, whole
   (object-fit: contain), so a square photo is as tall as that space; a pill is never wider than its card (a label too long for it ends in dots). */
html.cgrid-card #content .product-thumb { isolation: isolate; }
html.cgrid-card #content .product-thumb .image img {
    width: 100% !important;
    height: calc(min(calc(var(--cg-r) * 100cqw), var(--cg-cap)) - var(--cg-band) - 4px) !important;
    max-height: calc(min(calc(var(--cg-r) * 100cqw), var(--cg-cap)) - var(--cg-band) - 4px) !important;
    object-fit: contain !important;
}
html.cgrid-card #content .product-thumb .caption .price .oc-tile-free-ship,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-abs-free,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-saving,
html.cgrid-card #content .product-thumb .caption .price .oc-tile-pre-order {
    max-width: calc(100% - var(--cg-in) - 6px) !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* C10. THE WHOLE CARD OPENS THE PRODUCT: the name link's own box is stretched over the card (the name link
   stays the one link and the one tab stop; the card is the box it is placed against). The button group
   (Add to Cart, Choose, the Trade notice and its links, wishlist and compare) sits above it; the flag pills
   already sit above it (z-index 3), so their taps still open their notes. Styles only: no display value. */
html.cgrid-card #content .product-thumb .caption h4,
html.cgrid-card #content .product-thumb .caption h4 a { position: static !important; }
html.cgrid-card #content .product-thumb .caption h4 a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    z-index: 1 !important;
    border-radius: 12px !important;
}
html.cgrid-card #content .product-thumb .button-group { position: relative !important; z-index: 2 !important; }

} /* end supports has() */

/* C5. TABLET COLUMNS (owner ruling 2026-10-28): three cards a row from 768 to 991px on listing pages
   (category, search, specials), but only where the product area is full width: no side column, or the
   restyle has emptied the right column (Carefree mainbar.css widens #content then). With a side column the
   area is about 490px and three cards would be narrower than a phone card, so it stays two a row. The home
   page keeps two a row: its rows are fixed sets of four and three a row would leave one card alone.
   Two rules, not one list: a browser without :has() drops only the second (no :has() inside :has(), which is invalid). The row-height memory is keyed
   by width and card mode and checks the count per row, so it never reuses a two-a-row height here. */
@media (min-width: 768px) and (max-width: 991px) {
    html.cgrid-card body:not(.common-home) #content.col-sm-12 .row > .product-layout {
        flex: 0 0 33.3333% !important; max-width: 33.3333% !important; width: 33.3333% !important;
    }
    html.cgrid-card.crf-restyle body:not(.common-home) .row > #content:has(~ #column-right):not(:has(~ #column-right > *)) .row > .product-layout {
        flex: 0 0 33.3333% !important; max-width: 33.3333% !important; width: 33.3333% !important;
    }
}

/* C5b. FIVE A ROW (owner rulings 2026-10-28): from 992px wide, listing pages (category, search, specials) AND the
   home page's product blocks show five cards a row, only where the product area is full width (no side column, or
   the restyle has emptied the right column), same two-rule form as C5. With a side column the area is too narrow and
   it stays four. A five-up card is about 178px at 992 to 1199px and about 218px from 1200px. The row-height memory
   keeps the count per row in its saved rows and its key moved on, so no four-a-row height is reused. */
@media (min-width: 992px) {
    html.cgrid-card body:not(.common-home) #content.col-sm-12 .row > .product-layout,
    html.cgrid-card body.common-home #content.col-sm-12 .row > div:has(> .product-thumb) {
        flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important;
    }
    html.cgrid-card.crf-restyle body:not(.common-home) .row > #content:has(~ #column-right):not(:has(~ #column-right > *)) .row > .product-layout,
    html.cgrid-card.crf-restyle body.common-home .row > #content:has(~ #column-right):not(:has(~ #column-right > *)) .row > div:has(> .product-thumb) {
        flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important;
    }
}

/* C11. LESS WHITE SPACE (owner 2026-10-28, from 768px wide; phones keep the C6 look): a 3:2 photo box instead of 4:3
   (the picture is still contained whole, never cropped), tighter padding and gaps between photo, name, price and
   button, a smaller name and a price that scales with the card under 200px. The pill band (--cg-band) and the 40px
   Add to Cart are unchanged. Only sizes and spacing: no display or visibility value. */
@media (min-width: 768px) {
    html.cgrid-card #content .product-thumb { --cg-r: .6667; }
    html.cgrid-card #content .product-thumb .image { aspect-ratio: 3 / 2; padding: var(--cg-band) 10px 2px !important; }
    html.cgrid-card #content .product-thumb .caption { padding: 4px 8px 6px !important; }
    html.cgrid-card #content .product-thumb .caption h4 { margin: 0 0 2px 0 !important; }
    html.cgrid-card #content .product-thumb .caption > .price + div:not(.ge-pop) { margin: 1px 0 0 0 !important; }
    @container cgcard (max-width: 199px) {
        html.cgrid-card #content .product-thumb .caption h4 { max-height: 34px !important; font-size: 13px !important; line-height: 17px !important; }
        html.cgrid-card #content .product-thumb .caption > .price { font-size: clamp(15px, 9cqw, 20px) !important; line-height: 1.2 !important; gap: 0 6px !important; }
        html.cgrid-card #content .product-thumb .caption .price-old { font-size: 12px !important; }
        html.cgrid-card #content .product-thumb .caption > .price + div:not(.ge-pop) { font-size: 11px !important; line-height: 14px !important; }
    }
}

/* C12. NARROW CARDS FROM 768px WIDE (owner 2026-10-28: five a row from 992px gives cards about 178px wide, and the
   Customers Also Bought strip shows six, about 150 to 195px): under 200px of card width the card is a smaller copy
   of a wide one. Smaller pill row (17px pills, 20px step, 25px band), the name 12 to 13px and the price 15 to 20px
   scaling with the card (C11), Add to Cart 38px high with its 14px text on one line. From 172px Ships Free and Save
   sit side by side (Ships Free* 90.8px at 9.5px plus Save about 60px plus insets); narrower, the pills stack as in
   C4a and never touch. Every struck price and "As low as" line stays shown. Sizes and positions only: no display or
   visibility value. The container query cannot restyle the card itself, so the values are set on the parts. */
@media (min-width: 768px) {
    @container cgcard (max-width: 199px) {
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption { --cg-top: 5px; --cg-ph: 17px; --cg-step: 20px; --cg-in: 5px; }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .image { --cg-band: 25px; }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order) .image,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving) .image,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image { --cg-band: 45px; }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-pre-order):has(.caption .price .oc-tile-saving) .image { --cg-band: 65px; }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-free-ship,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-abs-free,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-saving,
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption .price .oc-tile-pre-order {
            padding: 0 6px !important; font-size: 9.5px !important; letter-spacing: .01em !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none) .caption h4 { font-size: clamp(12px, 7cqw, 13px) !important; }
        html.cgrid-card #content .product-thumb .button-group > button:first-child { flex-basis: 38px !important; height: 38px !important; }
    }
    @container cgcard (min-width: 172px) and (max-width: 199px) {
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):not(:has(.caption .price .oc-tile-pre-order)) .caption .price .oc-tile-saving {
            top: 5px !important; left: auto !important; right: 6px !important; max-width: calc(100cqw - 106px) !important;
        }
        html.cgrid-card #content .product-thumb:not(.ge-tile):not(#cgrid-none):has(.caption .price :is(.oc-tile-free-ship, .oc-tile-abs-free)):has(.caption .price .oc-tile-saving):not(:has(.caption .price .oc-tile-pre-order)) .image { --cg-band: 25px; }
    }
}