/* ===== NRC Cart & Badge Pack — Aug 25 (v2) ===== */ /* Remove any leftover dev banner */ #nrc-proof, #nrc-debug-banner, .nrc-debug-banner { display:none !important; } /* Pinned corner badges (left & right stay fixed) */ #nrc-badges .nrc-pin-left, #nrc-badges .nrc-pin-right{ position: fixed !important; top: 12px !important; z-index: 99999 !important; } #nrc-badges .nrc-pin-left { left: 12px !important; } #nrc-badges .nrc-pin-right{ right: 12px !important; } /* HOME: center badge shows at top center but is NOT pinned */ .template-index #nrc-badges .nrc-pin-center{ position: static !important; display: block !important; margin: 8px auto 0 !important; text-align: center; z-index: auto !important; } .template-index #nrc-badges .nrc-pin-center img{ max-height:110px; width:auto; } /* ---------- CART LAYOUT ---------- */ /* Constrain page width */ body.template-cart .page-width{ max-width:1200px; margin:0 auto; padding:0 16px; } /* Hide any table header rows that create weird labels */ body.template-cart .cart-items__heading, body.template-cart .cart-items thead, body.template-cart table.cart__items thead { display:none !important; } /* Make each line item a grid (works for div or tr implementations) */ body.template-cart .cart-item, body.template-cart .cart__row, body.template-cart tr[class*="cart-item"], body.template-cart tr[id^="CartItem-"]{ display: grid !important; grid-template-columns: minmax(220px,1.6fr) .6fr .8fr .7fr; /* Product | Price | Qty | Total */ column-gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); } body.template-cart .cart-item:last-child, body.template-cart .cart__row:last-child, body.template-cart tr[class*="cart-item"]:last-child { border-bottom:1px solid rgba(255,255,255,.12); } /* Ensure the product area (media + title/options) sits in column 1 */ body.template-cart .cart-item__media, body.template-cart .cart__image-wrapper, body.template-cart .cart__media, body.template-cart .cart-item__details, body.template-cart .cart-item__name { grid-column: 1; } /* Put unit price in column 2 (cover common class names) */ body.template-cart .cart-item__price, body.template-cart .cart-item__prices, body.template-cart .cart__price, body.template-cart [class*="discounted-price"] { grid-column: 2; justify-self: end; } /* Quantity goes in column 3 */ body.template-cart .cart-item__quantity, body.template-cart .cart__qty, body.template-cart .quantity { grid-column: 3; justify-self: center; } /* Line total in column 4 */ body.template-cart .cart-item__totals, body.template-cart .cart-item__final-price, body.template-cart .cart__final-price, body.template-cart [class*="line-total"], body.template-cart [class*="final-price"] { grid-column: 4; justify-self: end; } /* Keep thumbnails tidy */ body.template-cart .cart-item__media img, body.template-cart .cart__image-wrapper img, body.template-cart .cart__media img { max-width: 120px; height: auto; } /* Tame huge +/- controls (cart + product pages) */ .quantity{ --nrc-q-size:34px; } .quantity__button{ width:var(--nrc-q-size); height:var(--nrc-q-size); line-height:var(--nrc-q-size); font-size:16px; padding:0; } .quantity__input{ height:var(--nrc-q-size); min-width:56px; text-align:center; font-size:16px; } /* Mobile: simple two-column stack */ @media (max-width: 749px){ body.template-cart .cart-item, body.template-cart .cart__row, body.template-cart tr[class*="cart-item"], body.template-cart tr[id^="CartItem-"]{ grid-template-columns: 1fr 1fr; grid-template-areas: "prod total" "qty total"; row-gap: 10px; } body.template-cart .cart-item__media, body.template-cart .cart__image-wrapper, body.template-cart .cart__media, body.template-cart .cart-item__details, body.template-cart .cart-item__name{ grid-area: prod; } body.template-cart .cart-item__quantity, body.template-cart .cart__qty, body.template-cart .quantity{ grid-area: qty; justify-self:start; } body.template-cart .cart-item__price, body.template-cart .cart__price{ display:none; } /* hide unit price on small screens */ body.template-cart .cart-item__totals, body.template-cart .cart__final-price{ grid-area: total; justify-self:end; } }