/* Carefree Grid #24 v108 cgrid.css. Moved verbatim out of the header.tpl inline style block (was v107 lines 148-354). Linked as cgrid.css?v=108; bump ?v= and this line with every change. */
/* 1. HIDES */
.price-tax { display: none !important; }
.product-thumb .caption > p:not([class]) { display: none !important; }

/* 2-5 apply only where the browser understands has(); elsewhere the
   theme default tile and QAP's in-flow in-cart line stay untouched */
@supports selector(:has(a)) {

/* 2. ROWS: equal-height rows on listing grids */
#content .row:has(> .product-layout),
.common-home #content .row:has(> div > .product-thumb) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* 3. TILE COLUMN: flex column so the card fills the row height
   without height:100% (that pairing swallowed the card's own
   margin-bottom and showed it as a gap above the price) */
#content .row > div:has(> .product-thumb) {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 8px !important;
    margin: 0 0 22px 0 !important; /* 22 = gutter that carries the in-cart line */
}

/* 4. CARD */
.product-thumb {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
.product-thumb .image { margin: 0 !important; padding: 0 !important; }
.product-thumb .image img { margin: 0 auto 6px auto !important; }
.product-thumb > .image + div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product-thumb .caption {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 4px !important;
}
.product-thumb .caption h4 {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
.product-thumb .caption .price {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
/* caption grows to fill the row, so leftover height sits under the
   price, above the button; buttons stay aligned across the row */
.product-thumb .caption + .button-group {
    margin-top: 6px !important;
    flex-shrink: 0 !important;
}

/* 4b. IN-CART LINE: moved out of flow into the row gutter.
   QAP always reserved 23px under every button (blank unless the item
   is in the cart). Absolute positioning puts the text in the gap
   between rows instead, so it costs no height and causes no shift
   when it fills in. QAP's ::after first-paint reservation is retired
   for the same reason: nothing in flow changes size any more. */
.product-thumb { position: relative !important; overflow: visible !important; }
.product-thumb::after { display: none !important; }
.product-thumb .oc-incart-line {
    position: absolute !important;
    left: 0; right: 0; top: 100%;
    margin: 2px 0 0 0 !important;
    min-height: 0 !important;
    line-height: 18px !important;
    pointer-events: none;
}

/* 4c. FLAG LINE (v102): flags forced onto their own line under the price
   (a zero-height full-width pseudo breaks the line before them), the As low
   as line follows. The script below lines each of these up across the row. */
.product-thumb .caption > .price {
    flex: 1 1 auto !important;
    align-content: flex-start !important;
    row-gap: 0 !important; /* R3: TGC's 8px gap also hit the invisible line break, about 20px of dead space */
}
.product-thumb .caption > .price:has(> .oc-tile-free-ship, > .oc-tile-abs-free, > .oc-tile-saving, > .oc-tile-pre-order, > .oc-badges-wrap)::before {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 1;
}
.product-thumb .caption > .price > .oc-tile-free-ship,
.product-thumb .caption > .price > .oc-tile-abs-free,
.product-thumb .caption > .price > .oc-tile-saving,
.product-thumb .caption > .price > .oc-tile-pre-order,
.product-thumb .caption > .price > .oc-badges-wrap {
    order: 2 !important;
    margin-bottom: 0 !important;
    margin-top: 6px !important;
}
.product-thumb .caption > .price > .oc-badges-wrap > * { margin-bottom: 0 !important; }

/* 5. GRID WIDTHS: listing rows only (product-page carousel belongs to SAR CAB) */
@media (min-width: 992px) {
    #content .row > .product-layout,
    .common-home #content .row > div:has(> .product-thumb) {
        flex: 0 0 25% !important; max-width: 25% !important; width: 25% !important;
    }
}
@media (max-width: 991px) {
    #content .row > .product-layout,
    .common-home #content .row > div:has(> .product-thumb) {
        flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
    }
    #content .row > div:has(> .product-thumb) { padding: 0 4px !important; }
}

/* 4d. v103 SAVE SLOT: price line is a centred flex line from the head
   (the Tile Conductor sets the same values later from the footer). While the
   tiles are held, a sale tile keeps a Save-sized gap where the Save pill will
   land; outside the hold there is never a gap, so a sale tile that gets no
   Save pill (rounds to 0%, Tile Conductor off) never shows a blank line. */
.product-thumb .caption > .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px;
}
html.cgrid-hold .product-thumb .caption > .price:has(> .price-old)::before {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 1;
}
html.cgrid-hold .product-thumb .caption > .price:has(> .price-old):not(:has(.oc-tile-saving))::before {
    height: 37px;
}
@media (max-width: 767px) {
    html.cgrid-hold .product-thumb .caption > .price:has(> .price-old):has(> .oc-tile-pre-order):not(:has(.oc-tile-saving))::before {
        height: 0;
    }
    html.cgrid-hold .product-thumb .caption > .price:has(> .price-old):has(> .oc-tile-pre-order):not(:has(.oc-tile-saving)) {
        padding-bottom: 32px !important;
    }
}

/* 4e. v103 HOLD: tiles keep their space but stay invisible until the
   script below has lined them up once (class removed by script). */
html.cgrid-hold #content .product-thumb { visibility: hidden !important; }

/* 4f. v103 IMAGE BOX: home-page and product-page module tiles print their
   200x200 image with no width/height, so on a first visit each image grew
   from nothing as it arrived and pushed the tile down. Give those a square
   box of the module image size up front (an image that has width/height
   attributes, as on category and search pages, is left alone). The theme
   gives these images a 1px border and counts borders inside the width, so
   the 200px goes on the picture itself (content-box) with the border outside
   it, and the narrow-tile cap leaves room for the border: the same size the
   loaded image has always drawn at. */
.product-thumb .image img:not([width]) {
    box-sizing: content-box;
    width: 200px;
    max-width: calc(100% - 2px);
    height: auto;
    aspect-ratio: 1 / 1;
}

/* 4g. v104 SCROLL ANCHOR: while held, leave the tile rows out of the
   browser's scroll anchoring, so a reload part-way down anchors on visible
   content and the hidden tiles' growth is absorbed above it instead of
   pushing it down. Normal behaviour returns at the reveal. */
html.cgrid-hold #content .row:has(> .product-layout),
html.cgrid-hold .common-home #content .row:has(> div > .product-thumb) {
    overflow-anchor: none;
}

/* 4h. v106 STRIP DOTS SPACE: on desktop the Customers Also Bought strip
   (SAR CAB Carousel) gives its row an 18px bottom margin for its page dots
   once its script runs; before that the row had none and everything below
   dropped 8px. Print the same 18px from the first paint. Same row and same
   desktop width test as the strip's own code; on phones the strip clears
   its margin and this does not apply. */
@media (min-width: 768px) {
    body[class*="product-product"] .row:has(.product-thumb):not(:has(#content)) {
        margin-bottom: 18px;
    }
}

/* 4i. v107 RETURN COVER: on a reload or Back part-way down a tile page the
   page stays plain until the script below has put the shopper back in
   place (at most 2s; class removed by script). */
html.cgrid107-cover body { visibility: hidden !important; }

} /* end supports has() */