/* ════════════════════════════════════════════════════════════════════════════ Aira Product Listing — VARIANT B ("rich card" layout) VWO A/B test ──────────────────────────────────────────────────────────────────────────── Scope: every rule is prefixed with body.aira-layout-b (added server-side by the staging harness for the B bucket, and by main.js as a fallback). Turns the control table/grid (A) into image + specs + actions CARDS on every screen width. Layout per card: image (top-left badges) · title + specs + More Info · full-width bottom bar (price/delivery/multi-purchase + qty + ATC). Presentational only — does NOT modify the aira-table-filter-category plugin. Placeholder/JS-injected elements use the b- prefix. Load this as a stylesheet (harness enqueues it for B / VWO Custom CSS box). main.js no longer injects CSS. ════════════════════════════════════════════════════════════════════════════ */ /* ── ANTI-FLICKER GUARD ────────────────────────────────────────────────────── While a host has opted into the layout () but main.js hasn't built the cards yet, hide the product grid so the control TABLE never flashes before the cards appear. main.js removes the class the moment decoration finishes (hard failsafe reveal at 4s, so it can never stay hidden). Control visitors never get the class → this rule is inert for them. */ html.aira-layout-on .aira-products-grid { visibility: hidden !important; } /* ── Container: vertical list; NO gap between header/filter/pills, only between cards ── */ body.aira-layout-b .aira-products-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; grid-template-columns: none !important; overflow: visible !important; border-left: none !important; padding: 0 !important; } /* Spacing lives on the cards (and banner) so header/filter/pills stay flush */ body.aira-layout-b .aira-products-grid > .product-card, body.aira-layout-b .aira-products-grid > .gabion-banner-row { margin-top: 14px; } /* ── Header bar: keep ONLY the attribute (sort/filter) columns ────────────── */ body.aira-layout-b .aira-products-grid .grid-header { display: flex !important; background: #03ba48; color: #fff; font-weight: 700; border-radius: 4px 4px 0 0; overflow: hidden; } body.aira-layout-b .grid-header > .gh-cell { flex: 1 1 0 !important; min-width: 0 !important; position: static !important; border-left: none !important; border-right: 1px solid rgba(255, 255, 255, .2) !important; padding: 10px 8px !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.aira-layout-b .grid-header > .gh-cell:last-child { border-right: none !important; } body.aira-layout-b .grid-header > .gh-cell:not([data-sort-key^="attr-"]) { display: none !important; } body.aira-layout-b .grid-header > .gh-cell .sort_category { display: inline; } body.aira-layout-b .grid-header > .gh-cell b { font-size: 13px; line-height: 1.4; } /* ── Filter bar: row of attribute multiselects under the header ───────────── */ body.aira-layout-b .aira-filter-bar { display: flex !important; flex-wrap: wrap; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); overflow: hidden; margin: 0 !important; } body.aira-layout-b .aira-filter-bar .filter-cell { display: none !important; } body.aira-layout-b .aira-filter-bar .filter-cell-attr { display: flex !important; flex: 1 1 0; min-width: 0; padding: 6px 4px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: none; } body.aira-layout-b .aira-filter-bar .filter-cell-attr:last-of-type { border-right: none; } body.aira-layout-b .aira-filter-bar .aira-multiselect-wrapper { max-width: none; width: 100%; } /* ── Pills: flush under the filter bar, hidden when empty ─────────────────── */ body.aira-layout-b .aira-selected-filters-pills { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 0 !important; padding: 8px 10px; background: #e0e0e0; border-bottom: 1px solid #ddd; } body.aira-layout-b .aira-filter-pill-group { border: 0; } body.aira-layout-b .aira-selected-filters-pills:empty, body.aira-layout-b .aira-selected-filters-pills.hidden { display: none !important; } /* ════ CARD (same layout at all widths: bottom bar sits at the bottom) ═══════ */ body.aira-layout-b .aira-products-grid .product-card { position: relative; display: grid !important; grid-template-columns: 120px 1fr; grid-template-areas: "image name" "image specs" "bottom bottom"; align-content: start; border: 1px solid #e0e0e0 !important; border-radius: 8px; padding: 15px !important; background: #fff !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); content-visibility: visible; } /* Reset table-cell styling on all cells */ body.aira-layout-b .product-card .cell { border: none !important; padding: 0 !important; margin: 0; text-align: left !important; background: transparent !important; transform: none !important; cursor: default; display: block; align-self: auto; font-size: 14px; color: #444; } /* Kill control zebra striping AND the orange hover border (all variants/cells) */ body.aira-layout-b .aira-products-grid .product-card.odd-visible .cell, body.aira-layout-b .aira-products-grid .product-card.even-visible .cell { background: transparent !important; } body.aira-layout-b .aira-products-grid .product-card:hover .cell, body.aira-layout-b .aira-products-grid .product-card:hover > .cell, body.aira-layout-b .aira-products-grid .product-card:hover > .cell:first-child, body.aira-layout-b .aira-products-grid .product-card:hover > .cell:last-child, body.aira-layout-b .aira-products-grid .product-card:hover .card-specs > .cell, body.aira-layout-b .aira-products-grid .product-card:hover .card-bottom > .cell, body.aira-layout-b .aira-products-grid .product-card:hover .card-bottom:last-child > .cell:last-child { border: none !important; } /* Wrappers */ body.aira-layout-b .product-card .card-specs { grid-area: specs; display: flex !important; flex-direction: column; gap: 0; padding-left: 15px; } body.aira-layout-b .product-card .card-bottom { grid-area: bottom; display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "mp actions" "del actions" "price actions"; align-items: center; column-gap: 12px; row-gap: 2px; border-top: 1px solid #e0e0e0; padding-top: 10px !important; margin-top: 12px; } /* ── Badges: top-left of the CARD (not inside the image) ──────────────────── */ body.aira-layout-b .b-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; align-items: flex-start; pointer-events: none; } body.aira-layout-b .b-badge { font-size: 10px; font-weight: 700; color: #fff; line-height: 1.2; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } body.aira-layout-b .b-badge--nextday { background: #1273c6; } body.aira-layout-b .b-badge--free { background: #03ba48; } /* ── Image ───────────────────────────────────────────────────────────────── */ body.aira-layout-b .product-card .cell-image { grid-area: image; width: 120px; align-self: flex-end; padding: 0 !important; } body.aira-layout-b .product-card .cell-image a { display: block; } body.aira-layout-b .product-card .cell-image img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; max-width: none; display: block; } body.aira-layout-b .product-card .cell-image .video-wrapper { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; font-size: 1em; font-weight: 600; color: #035aba; cursor: pointer; } body.aira-layout-b .product-card .cell-image .video-wrapper:hover { text-decoration: underline; } body.aira-layout-b .product-card .cell-image .video-wrapper i {line-height: 1; font-size: 1.1em;} /* ── Name / title ────────────────────────────────────────────────────────── */ body.aira-layout-b .product-card .cell-name { grid-area: name; padding: 0 0 6px 15px !important; font-size: 16px; font-weight: 700; color: #222; line-height: 1.3; } body.aira-layout-b .product-card .cell-name a { font-size: 16px; font-weight: 700; color: #222 !important; } body.aira-layout-b .product-card .cell-name a:hover { color: #035aba !important; } body.aira-layout-b .cell-name.desktop-hidden { display: block !important; } /* ── Specs (green bullet + label + value) ────────────────────────────────── */ body.aira-layout-b .product-card .cell-attr { display: block; font-size: 14px; color: #444; line-height: 1.4; padding: 0; } body.aira-layout-b .product-card .cell-attr:empty { display: none; } body.aira-layout-b .product-card .cell-attr::before { content: "\2022\00a0\00a0" attr(data-mobile-label) ":\00a0"; font-weight: 700; background: linear-gradient(90deg, #03ba48 0, #03ba48 .5em, #444 .5em, #444 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #444; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { body.aira-layout-b .product-card .cell-attr::before { color: #444; -webkit-text-fill-color: #444; } } /* ── More Info link (end of specs) ───────────────────────────────────────── */ body.aira-layout-b .b-more-info { display: inline-block; margin-top: 4px; align-self: flex-start; color: #035aba; font-size: 13px; font-weight: 600; text-decoration: none; } body.aira-layout-b .b-more-info:hover { text-decoration: underline; color: #035aba; } /* ── Bottom bar: price / delivery / multi-purchase + actions ─────────────── */ body.aira-layout-b .product-card .cell-price { grid-area: price; display: flex; flex-direction: row; align-items: baseline; gap: 4px; font-size: 18px; font-weight: 700; color: #03ba48; white-space: nowrap; } body.aira-layout-b .product-card .cell-price del { display: none; } body.aira-layout-b .product-card .cell-price ins { text-decoration: none; background: transparent; } body.aira-layout-b .product-card .cell-price .woocommerce-Price-amount, body.aira-layout-b .product-card .cell-price ins .woocommerce-Price-amount { font-size: 18px; font-weight: 700; color: #03ba48; } body.aira-layout-b .product-card .cell-price .woocommerce-price-suffix { font-size: 12px; font-weight: 600; color: #03ba48; } body.aira-layout-b .b-delivery-date { grid-area: del; font-size: 12px; color: #555; } body.aira-layout-b .b-delivery-date strong { color: #222; font-weight: 700; } body.aira-layout-b .b-multi-purchase { grid-area: mp; color: #035aba; font-size: 12px; font-weight: 600; text-decoration: none; } body.aira-layout-b .b-multi-purchase:hover { text-decoration: underline; } /* Actions = quantity + add to cart */ body.aira-layout-b .product-card .b-actions { grid-area: actions; display: flex; align-items: center; gap: 8px; } body.aira-layout-b .product-card .cell-qty { padding: 0 !important; flex-shrink: 0; } body.aira-layout-b .product-card .cell-qty input { width: 56px; max-width: 56px; min-height: 38px; padding: 8px; text-align: center; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } body.aira-layout-b .product-card .cell-atc { padding: 0 !important; min-width: 0 !important; flex-shrink: 0; } body.aira-layout-b .product-card .cell-atc .product-buttons { display: flex; align-items: center; } body.aira-layout-b .product-card .cell-atc .product-buttons button, body.aira-layout-b.woocommerce ul.products .aira-products-grid .product-buttons .product-cart button { width: auto; min-width: 120px; height: 38px !important; padding: 8px 16px; margin: 0 !important; border-radius: 4px; background: #ff8400; color: #fff; border: 1px solid #222; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; font-family: inherit; text-indent: 0 !important; line-height: 1.2; } body.aira-layout-b .product-card .cell-atc .product-buttons button:hover { background: #5aa1e3; } body.aira-layout-b .product-card .cell-atc .stock-info { display: none; } body.aira-layout-b .product-card .cell-atc .quickview-button { display: none; } body.aira-layout-b .product-card .cell-atc a.added_to_cart { display: none !important; } /* Hide the spyglass "View" cell (replaced by the More Info link) */ body.aira-layout-b .product-card .cell-view { display: none !important; } /* Keep filtering / pagination hiding working */ body.aira-layout-b .product-card.hide, body.aira-layout-b .product-card.paged-hidden { display: none !important; } /* Gabion banner row spans full width */ body.aira-layout-b .aira-products-grid .gabion-banner-row { grid-column: auto; width: 100%; } /* ════ DESKTOP (≥1025px): 3-column card; right column bottom-aligned ═════════ */ @media (min-width: 1025px) { body.aira-layout-b .aira-products-grid .product-card { grid-template-columns: 150px minmax(0, 1fr) 250px; grid-template-areas: "image name bottom" "image specs bottom"; column-gap: 18px; padding: 16px !important; } body.aira-layout-b .product-card .cell-image { width: 150px; } body.aira-layout-b .product-card .cell-image img { height: 130px; } /* Right column: price / delivery / multi-purchase / actions, pinned to the BOTTOM of the card (justify-content:flex-end), right-aligned. */ body.aira-layout-b .product-card .card-bottom { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; gap: 2px; border-top: none; padding-top: 0 !important; margin-top: 0; } body.aira-layout-b .product-card .cell-price { order: 0; } body.aira-layout-b .b-delivery-date { order: 1; text-align: right; } body.aira-layout-b .b-multi-purchase { order: 2; } body.aira-layout-b .product-card .b-actions { order: 3; margin-top: 6px; } } /* ════ GABION override — control forces a table even on mobile; force cards ═══ */ body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; grid-template-columns: none !important; overflow: visible !important; border-left: none !important; padding: 0 !important; } .table-holder.has-grid.has-cards { width: 100% !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid > .product-card { margin-top: 14px; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .grid-header { display: flex !important; } body.aira-layout-b .table-holder.gabion-no-cards .grid-header > .gh-cell { position: static !important; flex: 1 1 0 !important; min-width: 0 !important; border-left: none !important; border-right: 1px solid rgba(255, 255, 255, .2) !important; } body.aira-layout-b .table-holder.gabion-no-cards .grid-header > .gh-cell:not([data-sort-key^="attr-"]) { display: none !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card { position: relative; display: grid !important; grid-template-columns: 120px 1fr; grid-template-areas: "image name" "image specs" "bottom bottom"; border: 1px solid #e0e0e0 !important; border-radius: 8px; padding: 15px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card .cell { border: none !important; background: transparent !important; transform: none !important; padding: 0 !important; text-align: left !important; display: block; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card:hover .cell, body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card:hover > .cell:first-child, body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card:hover > .cell:last-child { border: none !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .card-specs { display: flex !important; flex-direction: column; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .card-bottom { display: grid !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card .cell-image { display: block !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card .cell-view { display: none !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card .cell-attr::before { content: "\2022\00a0\00a0" attr(data-mobile-label) ":\00a0" !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .filter-cell { display: none !important; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .filter-cell-attr { display: flex !important; flex: 1 1 0; } @media (min-width: 1025px) { body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .product-card { grid-template-columns: 150px minmax(0, 1fr) 250px; grid-template-areas: "image name bottom" "image specs bottom"; column-gap: 18px; } body.aira-layout-b .table-holder.gabion-no-cards .aira-products-grid .card-bottom { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; border-top: none; padding-top: 0 !important; margin-top: 0; } } @media (max-width: 767px) { body.aira-layout-b .product-card .cell-image { align-self: start; } body.aira-layout-b .product-card .card-bottom { grid-template-areas: "price actions" "mp actions" "del actions"; } .has-cards .aira-products-grid .product-card .cell-name a { font-size: 14px; line-height: 18px; } } @media (max-width: 420px) { body.aira-layout-b .b-delivery-date {font-size: 10px;} body.aira-layout-b .b-multi-purchase {font-size: 10px;} }