// css
.hhd-footer-button {
width: 100%;
margin-top: 1rem;
}
/* Two-column grid for Billing vs. Shipping/Collection */
.woocommerce-customer-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
/* Stack on narrow screens */
@media (max-width: 600px) {
.woocommerce-customer-details-grid {
grid-template-columns: 1fr;
}
}
/* hhd-cart.css */
.hhd-custom-cart {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
table-layout: fixed;
}
/* Column widths */
.hhd-custom-cart thead th:first-child { width: 50%; }
.hhd-custom-cart thead th:nth-child(2),
.hhd-custom-cart thead th:nth-child(3) { width: 25%; }
/* Headers: base styles */
.hhd-custom-cart thead th {
padding: 0;
margin: 0;
text-align: center;
vertical-align: top;
}
/* Product header: white background, left-aligned label */
.hhd-custom-cart thead th:first-child {
width: 50%;
background-color: #ffffff;
color: #00205C;
border-bottom: 2px solid #002B5C;
text-align: left;
padding: 16px;
font-weight: bold;
vertical-align: bottom;
}
/* Click & Collect and Home Delivery header container */
.hhd-custom-cart thead th:nth-child(2),
.hhd-custom-cart thead th:nth-child(3) {
width: 25%;
padding: 0;
}
/* Divider between headers 2 & 3 */
.hhd-custom-cart thead th:nth-child(2) {
border-right: 1px solid #cddae0;
}
/* Dark blue top row header text */
.hhd-custom-cart thead th:nth-child(2) > strong,
.hhd-custom-cart thead th:nth-child(3) > strong {
display: block;
background-color: #002B5C;
color: #ffffff;
font-size: 19px;
text-transform: capitalize;
text-align: center;
padding: 12px 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 2px solid #002B5C;
}
/* Light blue below header background and content */
.hhd-custom-cart thead th:nth-child(2),
.hhd-custom-cart thead th:nth-child(3) {
background-color: #F0F6FC;
border-bottom: 2px solid #002B5C;
}
/* Selected store/postcode text */
.hhd-custom-cart thead th:nth-child(2) .hhd-store-name,
.hhd-custom-cart thead th:nth-child(3) .hhd-postcode {
display: block;
font-size: 17px;
text-transform: capitalize;
text-align: center;
color: #00205C;
margin: 2px 0 2px;
}
/* Under the store name in the cart header */
.hhd-store-address {
display: block;
font-size: 12px;
color: #666;
margin-bottom: 2px;
line-height: 1;
text-align: center;
}
.hhd-custom-cart thead th:nth-child(2) .hhd-collect-summary,
.hhd-custom-cart thead th:nth-child(3) .hhd-delivery-summary {
display: block;
font-size: 14px;
text-transform: initial ;
text-align: center;
color: #626262;
margin: 4px 0 2px;
}
/* Delivery message under the postcode in cart header */
.hhd-delivery-message {
display: block;
font-size: 12px;
color: #666;
margin-bottom: 2px;
line-height: 1;
text-align:center;
}
/* Change links styling */
.hhd-custom-cart thead th:nth-child(2) a.change-store-link,
.hhd-custom-cart thead th:nth-child(3) a.change-postcode-link {
display: block;
font-size: 12px;
text-transform: lowercase;
text-align: center;
color: #c00;
font-weight: 400;
margin-bottom: 2px;
text-decoration: none;
}
/* Divider between columns 2 & 3 for body & footer */
.hhd-custom-cart tbody td:nth-child(2),
.hhd-custom-cart tfoot td:nth-child(2) {
border-right: 1px solid #cddae0;
}
/* Body rows */
.hhd-custom-cart tbody tr td:first-child {
background-color: #ffffff;
border-right: 1px solid #cddae0;
text-align: left;
vertical-align: bottom;
padding: 16px;
}
.hhd-custom-cart tbody tr td:nth-child(2),
.hhd-custom-cart tbody tr td:nth-child(3) {
background-color: #F0F6FC;
text-align: center;
vertical-align: top;
padding: 16px;
}
.hhd-custom-cart tbody tr:nth-child(even) td:nth-child(2),
.hhd-custom-cart tbody tr:nth-child(even) td:nth-child(3) {
background-color: #e4eef8;
}
.hhd-custom-cart tbody tr:hover td:nth-child(2),
.hhd-custom-cart tbody tr:hover td:nth-child(3) {
background-color: #dbeaf6;
}
/* Thumbnail height override */
.hhd-custom-cart td img {
height: 90px !important;
width: auto !important;
vertical-align: center;
}
/* Quantity controls inline size restored */
.hhd-custom-cart .hhd-qty-control {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 4px;
}
.hhd-custom-cart .hhd-qty-input {
width: 50px !important;
text-align: center;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
/* Footer row: three columns */
.hhd-custom-cart tfoot td:first-child { width: 50%; text-align: right; vertical-align: middle; padding: 6px; }
.hhd-custom-cart tfoot td:nth-child(2),
.hhd-custom-cart tfoot td:nth-child(3) { width: 25%; text-align: center; vertical-align: middle; padding: 2px; }
/* Footer buttons fill their cells with custom colors */
.hhd-custom-cart .hhd-footer-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 12px;
box-sizing: border-box;
text-align: center !important;
font-size: 14px;
background-color: #7AB800 !important;
color: #ffffff !important;
text-decoration: none;
border: none;
border-radius: 2px;
text-transform: capitalize;
font-weight: 600;
}
.hhd-custom-cart .hhd-footer-button:hover {
background-color: #699E00 !important;
color: #ffffff !important;
}
/* Subtotal styling */
.hhd-custom-cart .hhd-footer-subtotal { font-weight: bold; color: #002B5C; margin-left: 4px; font-size:18px; }
/* ===== Desktop: match mobile styling ===== */
/* Qty pill + buttons */
.hhd-custom-cart .hhd-qty-control {
display: inline-flex;
align-items: center;
gap: 8px; /* same as mobile */
margin-top: 6px;
}
.hhd-custom-cart .hhd-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border: 1px solid #cbd5e1;
background: #fff;
border-radius: 4px;
line-height: 1;
cursor: pointer;
}
.hhd-custom-cart .hhd-qty-input {
appearance: none;
background: #fff;
border: 1px solid #cbd5e1; /* mobile tone */
border-radius: 4px;
padding: 8px 14px;
min-width: 50px;
font-weight: 600;
font-size: .95rem;
line-height: 1;
box-shadow: 0 1px 0 rgba(0,0,0,.03);
text-align: center;
}
.hhd-custom-cart .hhd-qty-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
/* remove spinners */
.hhd-custom-cart .hhd-qty-input::-webkit-outer-spin-button,
.hhd-custom-cart .hhd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hhd-custom-cart .hhd-qty-input[type="number"] { -moz-appearance: textfield; }
/* SKU: tiny, grey (matches mobile .hhd-msku) */
.hhd-custom-cart .hhd-sku {
display: block;
font-size: 10px;
color: #6b7280;
margin-top: 2px;
letter-spacing: 0;
}
/* Price: bold, navy, 20px; multiplier lighter */
.hhd-custom-cart .hhd-price-line {
display: flex;
align-items: baseline;
gap: 6px;
margin: 4px 0 2px;
}
.hhd-custom-cart .hhd-unit-price {
font-weight: 700;
white-space: nowrap;
color: #00205c;
font-size: 20px; /* same visual weight as mobile card price */
line-height: 1.1;
}
.hhd-custom-cart .hhd-price-multiplier {
font-size: 0.9rem;
color: #6b7280;
}
/*MOBILE-ONLY LAYOUT FOR HHD-CART */
/* default: show desktop, hide mobile */
.hhd-desktop-cart { display: block; }
.hhd-mobile-cart { display: none; }
@media (max-width: 768px) {
/* hide desktop, show mobile */
.hhd-desktop-cart { display: none !important; }
.hhd-mobile-cart { display: block !important; }
/* Only active panel visible */
.hhd-mobile-content { display: none !important; }
.hhd-mobile-content.active { display: block !important; }
/* Tabs */
.hhd-mobile-tabs {
display: flex;
gap: 4px;
border-radius: 4px 4px 0 0;
overflow: hidden;
margin-bottom: 0;
}
.hhd-mobile-tab {
flex: 1;
padding: .75rem 0;
background: #00205c;
border: 2px solid #00205c;
border-bottom: none;
text-align: center;
font-weight: 700;
color: #fff;
margin: 0;
}
.hhd-mobile-tab.active {
background: #fff;
color: #00205c;
border: 2px solid #00205c;
border-bottom: none;
}
/* Header under tabs */
.hhd-mobile-panel-header {
border: 2px solid #00205c;
border-top: none;
background: #fff;
padding: 1rem;
border-radius: 0 0 4px 4px;
margin-top: -2px;
}
.hhd-store-name,
.hhd-postcode {
font-size: 1.125rem;
font-weight: 600;
color: #00205c;
margin: .25rem 0;
text-transform: capitalize;
}
.hhd-postcode { text-transform: uppercase; }
.hhd-collect-summary,
.hhd-delivery-summary {
font-size: 12px;
color: #666;
margin: .5rem 0 0;
}
.change-store-link,
.change-postcode-link {
display: block;
font-size: .85rem;
color: #c00;
text-decoration: none;
margin-top: .5rem;
}
/* Items container: white background per your spec */
.hhd-mobile-items {
background: #fff;
}
/* ????????? style item card ????????? */
.hhd-mcard{
display:grid;
grid-template-columns: 90px 1fr;
grid-template-areas:
"thumb body"
"controls controls"
"avail avail";
gap: 12px;
background:#fff;
border:2px solid #ebf3fb;
border-radius:4px;
padding:12px;
margin:12px 0;
}
.hhd-mthumb{ grid-area: thumb; }
.hhd-mthumb img{ width:90px; height:auto; display:block; border-radius:3px; }
.hhd-mbody{ grid-area: body; min-width:0; }
.hhd-mtitle{
display:block;
font-weight:600;
color:#002B5C;
text-decoration:none;
line-height:1.25;
word-break: break-word; /* ensure wrapping */
overflow-wrap: anywhere; /* long words don't overflow */
}
.hhd-msku{ font-size:10px; color:#6b7280; margin-top:2px; }
/* Controls row: Qty (left) | Remove (middle) | Price (right) */
.hhd-mcontrols{
grid-area: controls;
display:grid;
grid-template-columns: 1fr auto auto;
align-items:center;
gap:30px;
width:100%;
padding-top:4px;
}
/* Qty pill */
.hhd-mqty{ display:flex; align-items:center; gap:8px; }
.hhd-mqty label{ font-size:.85rem; color:#374151; }
.hhd-mobile-qty-input{
appearance:none;
background:#fff;
border:1px solid #cbd5e1;
border-radius:4px;
padding:8px 14px;
min-width:50px;
font-weight:600;
font-size:.95rem;
line-height:1;
box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.hhd-mobile-qty-input:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
/* Remove button */
.hhd-remove-item-inline{
display:inline-block;
padding:8px 10px;
border:1px solid #ef4444;
border-radius:8px;
background:#fff;
color:#b91c1c;
font-size:.85rem;
text-decoration:none;
line-height:1;
}
/* Price (right aligned) */
.hhd-mprice{
font-weight:700;
white-space:nowrap;
color:#00205c;
font-size:20px;
justify-self:end;
}
/* Full-width availability band */
.hhd-mavailability{
grid-area: avail;
width:100%;
margin-top:4px;
padding:10px 12px;
background:#ebf3fb;
border-radius:0px;
color:#0a1f44;
font-size:.95rem;
display:flex;
align-items:flex-start;
gap:8px;
}
.hhd-mavailability::before{
content:"";
width:18px; height:18px; flex:0 0 18px;
margin-top:2px;
background-repeat:no-repeat;
background-size:contain;
}
/* ? In stock (green tick) */
.hhd-mavailability:has(.stock-msg.in)::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* ? Waiting/Back-order/Collect from date (amber clock)
Your PHP uses class 'low' for messages like 'Order now, collect from ...' */
.hhd-mavailability:has(.stock-msg.low)::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* ? Out/Unavailable (red cross) */
.hhd-mavailability:has(.stock-msg.out)::before{
background-image:url("data:image/svg+xml;utf8,");
}
.hhd-mavailability:has(.stock-msg.out) {
color: #d00303; /* set text colour when out of stock/unavailable */
}
/* Optional: default icon if no class matched (keeps the clock) */
.hhd-mavailability:not(:has(.stock-msg.in)):not(:has(.stock-msg.low)):not(:has(.stock-msg.out))::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* Subtotal + checkout button */
.hhd-mobile-subtotal {
text-align: center;
font-size: 18px;
margin: .75rem 0;
color: #00205c;
}
.hhd-mobile-subtotal strong { font-weight: 700; }
.hhd-footer-button {
display: block !important;
width: 100% !important;
padding: .75rem !important;
background: #7AB800 !important;
color: #fff !important;
font-size: 1rem !important;
border: none !important;
border-radius: 2px !important;
text-transform: uppercase !important;
margin-bottom: 1.5rem !important;
}
.hhd-footer-button:disabled {
opacity: .5 !important;
pointer-events: none !important;
}
/* generic tooltip text (if used anywhere on mobile) */
.hhd-tip { margin: 6px 0 8px; font-size: 14px; line-height: 1.4; }
}
/* Pre-cart postcode check box */
.hhd-pre-cart-check {
background: #f5f7fa;
border: 1px solid #d8e1e8;
padding: 28px 20px;
margin: 0 0 20px;
text-align: center;
}
.hhd-pre-cart-check h3 {
margin: 0 0 12px;
color: #002B5C;
font-size: 28px;
font-weight: 700;
}
.hhd-pre-cart-check p {
margin: 0 0 20px;
color: #2f4c73;
font-size: 14px;
}
.hhd-pre-cart-form {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
#hhd-pre-postcode {
width: 220px;
max-width: 100%;
padding: 11px 12px;
border: 1px solid #c4ced8;
border-radius: 0;
background: #fff;
}
#hhd-check-availability {
background: #3e67b1;
color: #fff;
border: none;
padding: 12px 22px;
cursor: pointer;
font-weight: 600;
}
#hhd-check-availability:hover {
background: #33589a;
}
/* Deals display */
.hhd-deal-line {
margin-top: 8px;
font-size: 13px;
line-height: 1.4;
}
.hhd-deal-badge {
display: inline-block;
background: #ffe066;
color: #222;
font-weight: 700;
font-size: 12px;
line-height: 1;
padding: 6px 8px;
border-radius: 4px;
margin-bottom: 6px;
text-transform: uppercase;
}
.hhd-deal-pricing {
margin-top: 2px;
}
.hhd-deal-price-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
color: #1f2937;
}
.hhd-deal-price-row del {
color: #7a7a7a;
}
.hhd-deal-price-row strong {
color: #2e7d32;
font-weight: 700;
}
.hhd-deal-price-row--leftover {
color: #1f2937;
}
.hhd-deal-msg {
margin-top: 4px;
color: #2e7d32;
font-weight: 700;
}
.hhd-deal-progress {
margin-top: 5px;
font-size: 12px;
color: #5f6b7a;
}
.hhd-deal-progress strong {
color: inherit;
}
.hhd-deal-progress--incomplete {
color: #b42318;
font-weight: 600;
}
.hhd-footer-saving { margin-top: 6px; font-weight: 600; color: #1f7a1f; }
.hhd-cart-footnote-mobile,
.hhd-cart-footnote-desktop {
margin-top: 12px;
font-size: 13px;
color: #444;
line-height: 1.4;
}
.hhd-cart-footnote-mobile {
display: none;
}
.hhd-cart-footnote-desktop {
display: block;
}
@media (max-width: 767px) {
.hhd-cart-footnote-mobile {
display: block;
}
.hhd-cart-footnote-desktop {
display: none;
}
}
.hhd-product-cell {
display: flex;
align-items: center;
gap: 14px;
}
.hhd-product-thumb {
flex: 0 0 auto;
}
.hhd-product-main {
min-width: 0;
}
.hhd-product-title {
color: #002B5C;
font-weight: 600;
text-decoration: none;
}
.hhd-deal-group-row td {
padding: 8px 0 0 !important;
border: 0 !important;
background: #fff !important;
}
.hhd-deal-group-cell {
padding: 8px 0 0 8px !important;
border-right: 1px solid #cddae0 !important;
}
.hhd-deal-group-fill {
background: #fff !important;
}
.hhd-deal-group-box {
background: #f7f9fc;
border: 1px solid #d9e1ea;
border-left: 6px solid #f0c83c;
border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 12px 14px;
margin: 0;
}
.hhd-deal-group-summary,
.hhd-deal-group-progress {
margin-top: 8px;
font-size: 14px;
line-height: 1.45;
}
.hhd-deal-group-summary {
color: #1f6b2a;
font-weight: 600;
}
.hhd-deal-group-progress {
color: #002B5C;
}
.hhd-deal-group-progress--incomplete {
color: #c0392b;
font-weight: 600;
}
.hhd-cart-row--deal-member td:first-child {
border-left: 6px solid #f0c83c;
background: #fffdf5;
padding-left: 8px !important;
}
.hhd-cart-row--deal-first td:first-child {
border-top: 1px solid #d9e1ea;
}
.hhd-cart-row--deal-last td:first-child {
border-bottom: 1px solid #d9e1ea;
border-radius: 0 0 10px 0;
}
.hhd-cart-row--deal-member .hhd-product-cell {
position: relative;
}
.hhd-cart-row--deal-member .hhd-product-main {
padding-top: 2px;
}
.hhd-cart-row--deal-member .hhd-deal-badge {
margin-bottom: 10px;
}
.hhd-cart-spacer-row {
display: none !important;
}
.hhd-cart-spacer-row td,
.hhd-cart-spacer-cell--fill {
padding: 0 !important;
border: 0 !important;
height: 0 !important;
background: transparent !important;
}
.hhd-price-line--deal {
gap: 8px;
flex-wrap: wrap;
}
.hhd-line-price-old {
color: #7a7a7a;
text-decoration: line-through;
font-size: 16px;
font-weight: 600;
}
.hhd-price-line--deal .hhd-unit-price {
color: #002B5C;
}
@media (max-width: 768px) {
.hhd-deal-group-row,
.hhd-cart-spacer-row {
display: none !important;
}
}
.hhd-deal-group-row + .hhd-cart-row--deal-member td:first-child {
border-top: 1px solid #d9e1ea;
}
.hhd-deal-group-row + .hhd-cart-row--deal-member .hhd-product-cell {
padding-top: 0;
}
.hhd-deal-group-row td {
padding-top: 8px !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
}
.hhd-deal-group-box {
margin-bottom: 0;
}
.hhd-cart-row--deal-member td:first-child {
border-top: 0;
}
.hhd-cart-row--deal-first td:first-child {
padding-top: 0 !important;
}
.hhd-cart-row--deal-first .hhd-product-cell {
padding-top: 8px;
}
.hhd-deal-badge--row {
display: inline-block;
margin: 8px 0 10px;
}
.hhd-deal-theme-1 {
--hhd-deal-accent: #f0c83c;
--hhd-deal-bg: #fffdf5;
--hhd-deal-panel: #f7f9fc;
}
.hhd-deal-theme-2 {
--hhd-deal-accent: #84cc16;
--hhd-deal-bg: #f7fee7;
--hhd-deal-panel: #f8fff1;
}
.hhd-deal-theme-3 {
--hhd-deal-accent: #38bdf8;
--hhd-deal-bg: #f0f9ff;
--hhd-deal-panel: #f6fbff;
}
.hhd-deal-theme-4 {
--hhd-deal-accent: #c084fc;
--hhd-deal-bg: #faf5ff;
--hhd-deal-panel: #fcf8ff;
}
.hhd-deal-group-row td {
padding-top: 8px !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
}
.hhd-deal-group-cell {
padding: 8px 0 0 0 !important;
border-right: 1px solid #cddae0 !important;
}
.hhd-deal-group-box {
background: var(--hhd-deal-panel, #f7f9fc);
border: 1px solid #d9e1ea;
border-left: 6px solid var(--hhd-deal-accent, #f0c83c);
border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 12px 14px;
margin: 0;
}
.hhd-cart-row--deal-member td:first-child {
border-left: 6px solid var(--hhd-deal-accent, #f0c83c);
background: var(--hhd-deal-bg, #fffdf5);
padding-left: 8px !important;
}
.hhd-cart-row--deal-member .hhd-deal-badge,
.hhd-deal-group-box .hhd-deal-badge {
background: var(--hhd-deal-accent, #f0c83c);
}
.hhd-cart-row--deal-member td:first-child,
.hhd-deal-group-cell {
box-sizing: border-box;
}
.hhd-price-line--secondary {
margin-top: 2px;
}
.hhd-price-line--leftover .hhd-unit-price,
.hhd-price-line--leftover .hhd-price-multiplier {
font-size: 17px;
}
.hhd-mprice {
display: flex;
align-items: baseline;
gap: 6px;
justify-self: end;
flex-wrap: wrap;
}
.hhd-mprice--secondary {
margin-top: 4px;
}
.hhd-mprice .hhd-unit-price {
font-size: 20px;
}
.hhd-mprice .hhd-price-multiplier {
font-size: 0.9rem;
color: #6b7280;
}
/* Deal group visual cleanup */
.hhd-deal-theme-1 {
--hhd-deal-accent: #ffd100;
--hhd-deal-bg: #fffdf2;
--hhd-deal-panel: #fffdf4;
}
.hhd-deal-theme-2 {
--hhd-deal-accent: #e1bbcf;
--hhd-deal-bg: #fff5f5;
--hhd-deal-panel: #fff7f7;
}
.hhd-deal-theme-3 {
--hhd-deal-accent: #e4eef8;
--hhd-deal-bg: #f4f7fc;
--hhd-deal-panel: #f7f9fd;
}
.hhd-deal-theme-4 {
--hhd-deal-accent: #8bcf8a;
--hhd-deal-bg: #f4fbf4;
--hhd-deal-panel: #f7fcf7;
}
/* Use the same inner gutter for header and deal rows so the accent line actually aligns */
.hhd-deal-group-cell {
padding: 8px 0 0 0 !important;
border-right: 1px solid #cddae0 !important;
background: var(--hhd-deal-bg, #fffdf5);
}
.hhd-deal-group-box {
position: relative;
margin: 0 0 0 14px;
border: 1px solid #d9e1ea;
border-left: 0;
border-bottom: 0;
border-radius: 0 10px 0 0;
background: var(--hhd-deal-panel, #fffdf4);
padding: 12px 14px 12px 18px;
}
.hhd-deal-group-box::before {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
left: -6px;
width: 6px;
background: var(--hhd-deal-accent, #ffd100);
border-radius: 6px 0 0 0;
}
.hhd-cart-row--deal-member td:first-child {
border-left: 0 !important;
background: var(--hhd-deal-bg, #fffdf5) !important;
padding-left: 8px !important;
}
.hhd-cart-row--deal-member .hhd-product-cell {
position: relative;
margin-left: 14px;
padding: 8px 0 8px 18px;
background: transparent;
}
.hhd-cart-row--deal-member .hhd-product-cell::before {
content: "";
position: absolute;
top: -8px;
bottom: -8px;
left: -6px;
width: 6px;
background: var(--hhd-deal-accent, #ffd100);
}
.hhd-cart-row--deal-first .hhd-product-cell::before {
top: 0;
}
.hhd-cart-row--deal-last .hhd-product-cell::before {
bottom: 0;
border-radius: 0 0 0 6px;
}
.hhd-deal-group-box .hhd-deal-badge,
.hhd-cart-row--deal-member .hhd-deal-badge {
background: var(--hhd-deal-accent, #ffd100);
color: #111;
}
/* v1.7.3 deal border alignment fix */
.hhd-deal-group-cell,
.hhd-cart-row--deal-member td:first-child {
position: relative;
padding-left: 0 !important;
}
.hhd-deal-group-cell::before,
.hhd-cart-row--deal-member td:first-child::before {
content: "";
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 6px;
background: var(--hhd-deal-accent, #ffd100);
}
.hhd-deal-group-cell::before {
border-radius: 6px 0 0 0;
}
.hhd-cart-row--deal-last td:first-child::before {
border-radius: 0 0 0 6px;
}
.hhd-deal-group-box {
margin-left: 14px;
border-left: 0 !important;
}
.hhd-deal-group-box::before {
display: none !important;
}
.hhd-cart-row--deal-member td:first-child {
border-left: 0 !important;
}
.hhd-cart-row--deal-member .hhd-product-cell {
margin-left: 14px;
padding: 8px 0 8px 18px;
}
.hhd-cart-row--deal-member .hhd-product-cell::before {
display: none !important;
}
.hhd-cart-row--deal-first td:first-child {
padding-top: 0 !important;
}
/* v1.7.4 mobile deal layout polish - mobile only */
@media (max-width: 768px) {
.hhd-mcard {
grid-template-columns: 84px minmax(0, 1fr);
gap: 14px;
padding: 14px;
border-radius: 8px;
}
.hhd-mthumb img {
width: 84px;
}
.hhd-mtitle {
font-size: 1.05rem;
line-height: 1.2;
}
.hhd-msku {
margin-top: 4px;
}
.hhd-mcontrols {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
row-gap: 10px;
align-items: start;
padding-top: 8px;
}
.hhd-mqty {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.hhd-remove-item-inline {
grid-column: 1;
grid-row: 2;
justify-self: start;
margin: 0;
}
.hhd-mprice {
grid-column: 2;
justify-self: end;
text-align: right;
min-width: max-content;
white-space: nowrap;
margin: 0;
line-height: 1.1;
}
.hhd-mprice:not(.hhd-mprice--secondary) {
grid-row: 1;
}
.hhd-mprice--secondary {
grid-row: 2;
margin-top: 0;
}
.hhd-mprice .hhd-unit-price {
font-size: 18px;
}
.hhd-mprice .hhd-price-multiplier {
display: inline-block;
margin-left: 2px;
}
.hhd-deal-line--mobile {
grid-column: 1 / -1;
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #ebf3fb;
}
.hhd-deal-line--mobile .hhd-deal-badge {
margin-bottom: 10px;
}
.hhd-deal-line--mobile .hhd-deal-msg,
.hhd-deal-line--mobile .hhd-deal-progress {
margin-top: 6px;
font-size: 13px;
line-height: 1.45;
max-width: none;
}
.hhd-deal-line--mobile .hhd-deal-progress strong,
.hhd-deal-line--mobile .hhd-deal-msg strong {
display: inline;
}
.hhd-mavailability {
margin-top: 12px;
padding: 12px;
}
}
/* Alternative: keep spacing, but move the stripe down to match the header */
.hhd-deal-group-row td {
padding-top: 8px !important;
}
.hhd-deal-group-cell {
padding-top: 8px !important;
}
.hhd-deal-group-cell::before {
top: 8px !important;
border-radius: 6px 0 0 0;
}
@media (max-width: 768px) {
.hhd-remove-item-inline {
display: inline-block;
margin-top: 16px !important; /* increase space above */
}
}
/* --------------------------------------------------------------------------
HHD custom cart tidy-up and checkout-state safety styles
-------------------------------------------------------------------------- */
#hhd-cart-root {
font-size: 14px;
color: #00205c;
}
.hhd-button-disabled,
.hhd-button-disabled:hover,
.hhd-button-disabled:focus {
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.hhd-custom-cart {
border-collapse: collapse !important;
width: 100%;
table-layout: fixed;
}
.hhd-custom-cart th,
.hhd-custom-cart td {
vertical-align: middle !important;
}
.hhd-custom-cart thead th {
padding: 0 8px 12px !important;
border-bottom: 2px solid #00205c;
}
.hhd-custom-cart thead th:first-child {
width: 50% !important;
text-align: left !important;
vertical-align: bottom !important;
color: #00205c;
}
.hhd-custom-cart thead th:nth-child(2),
.hhd-custom-cart thead th:nth-child(3) {
width: 25% !important;
padding: 8px !important;
background: #eef5fc;
border-left: 1px solid #d6e2ef;
border-right: 1px solid #d6e2ef;
text-align: center !important;
}
.hhd-custom-cart thead th:nth-child(2) > strong,
.hhd-custom-cart thead th:nth-child(3) > strong {
display: block;
background: #003b70;
color: #fff;
font-size: 19px;
font-weight: 700;
line-height: 1.2;
padding: 14px 10px;
margin: 0 0 16px;
text-align: center;
}
.hhd-custom-cart .hhd-store-name,
.hhd-custom-cart .hhd-postcode,
.hhd-mobile-panel-header .hhd-store-name,
.hhd-mobile-panel-header .hhd-postcode {
display: block;
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
color: #00205c;
}
.hhd-collect-summary,
.hhd-delivery-summary {
max-width: 230px;
margin: 0 auto 6px !important;
font-size: 13px;
line-height: 1.35;
color: #3f4f63;
}
.hhd-cart-dispatch-countdown {
max-width: 235px;
margin: 0 auto 8px !important;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
color: #1e293b;
}
.change-store-link,
.change-postcode-link {
display: inline-block;
margin-top: 2px;
font-size: 12px;
color: #d00303;
text-decoration: none;
}
.change-store-link:hover,
.change-postcode-link:hover {
text-decoration: underline;
}
.hhd-cart-row td {
padding: 18px 8px !important;
border-bottom: 1px solid #e2e8f0;
}
.hhd-cart-row td:nth-child(2),
.hhd-cart-row td:nth-child(3),
.hhd-deal-group-fill,
.hhd-cart-spacer-cell--fill {
background: #eef5fc;
border-left: 1px solid #d6e2ef;
text-align: center;
}
.hhd-product-cell {
display: grid;
grid-template-columns: 24px 70px 1fr;
gap: 12px;
align-items: center;
}
.hhd-product-main {
min-width: 0;
}
.hhd-product-title {
display: block;
font-size: 15px;
line-height: 1.25;
font-weight: 700;
color: #00205c;
margin: 0 0 4px;
}
.hhd-sku,
.hhd-product-sku {
display: block;
font-size: 11px;
color: #64748b;
margin: 0 0 4px;
}
.hhd-price-line {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.hhd-stock-msg {
display: inline-block;
max-width: 190px;
font-size: 12px;
line-height: 1.35;
}
.hhd-stock--in {
color: #009b34;
}
.hhd-stock--soon {
color: #c47a00;
}
.hhd-stock--out {
color: #c00000;
}
.hhd-stock--unknown {
color: #475569;
}
.hhd-custom-cart tfoot td {
padding: 8px !important;
border-top: 1px solid #d6e2ef;
}
.hhd-footer-button {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 48px;
width: 100%;
border-radius: 3px;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.hhd-footer-subtotal {
font-size: 16px;
font-weight: 700;
color: #00205c;
}
.hhd-cart-footnote {
margin-top: 12px;
font-size: 12px;
line-height: 1.35;
color: #334155;
}
@media (max-width: 768px) {
.hhd-mobile-panel-header {
text-align: center;
}
.hhd-mobile-panel-header .hhd-cart-dispatch-countdown {
font-size: 14px;
}
}
/* --------------------------------------------------------------------------
HHD Cart layout refresh v2.6.6
Desktop summary cards + cleaner mobile product cards.
-------------------------------------------------------------------------- */
#hhd-cart-root {
--hhd-blue: #00205c;
--hhd-blue-2: #003b70;
--hhd-light: #eef5fc;
--hhd-border: #dbe7f3;
--hhd-muted: #64748b;
--hhd-red: #d00303;
--hhd-green: #64b800;
color: var(--hhd-blue);
}
.hhd-cart-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin: 0 0 14px;
}
.hhd-cart-title {
margin: 0;
font-size: 24px;
line-height: 1.2;
color: var(--hhd-blue);
}
.hhd-cart-subtitle {
margin: 4px 0 0;
font-size: 14px;
color: #475569;
}
.hhd-cart-change-location {
font-size: 13px;
color: var(--hhd-red);
text-decoration: underline;
white-space: nowrap;
}
.hhd-cart-wide-message {
margin: 0 0 14px;
padding: 12px 14px;
border: 1px solid var(--hhd-border);
border-left: 4px solid var(--hhd-blue-2);
border-radius: 8px;
background: #f8fbff;
color: #1e3351;
font-size: 14px;
line-height: 1.4;
}
.hhd-cart-wide-message.is-warning {
border-left-color: #c47a00;
background: #fff8eb;
}
.hhd-cart-wide-message.is-error {
border-left-color: var(--hhd-red);
background: #fff3f3;
}
.hhd-cart-wide-message.is-success {
border-left-color: #16a34a;
background: #f0fff4;
}
.hhd-desktop-fulfilment {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
margin: 0 0 16px;
}
.hhd-fulfilment-card {
border: 1px solid var(--hhd-border);
border-radius: 10px;
background: #fff;
overflow: hidden;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.hhd-fulfilment-card__title {
background: var(--hhd-blue);
color: #fff;
padding: 13px 16px;
font-size: 18px;
font-weight: 700;
text-align: center;
}
.hhd-fulfilment-card__main {
padding: 16px 16px 0;
font-size: 17px;
font-weight: 800;
text-align: center;
color: var(--hhd-blue);
}
.hhd-fulfilment-card__summary,
.hhd-fulfilment-card__countdown {
max-width: 360px;
margin: 8px auto 0 !important;
padding: 0 16px;
font-size: 13px;
line-height: 1.4;
color: #334155;
text-align: center;
}
.hhd-fulfilment-card .change-store-link,
.hhd-fulfilment-card .change-postcode-link {
display: block;
width: fit-content;
margin: 10px auto 16px;
font-size: 13px;
color: var(--hhd-red);
text-decoration: none;
}
.hhd-fulfilment-card .change-store-link:hover,
.hhd-fulfilment-card .change-postcode-link:hover {
text-decoration: underline;
}
.hhd-custom-cart {
width: 100%;
border-collapse: separate !important;
border-spacing: 0;
table-layout: fixed;
border: 1px solid var(--hhd-border);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.hhd-custom-cart thead th {
padding: 12px 14px !important;
background: #f8fbff;
border-bottom: 1px solid var(--hhd-border) !important;
color: var(--hhd-blue);
font-size: 13px;
font-weight: 800;
text-align: left;
}
.hhd-cart-col-product {
width: 54%;
}
.hhd-cart-col-collect,
.hhd-cart-col-delivery {
width: 23%;
text-align: center !important;
}
.hhd-product-td,
.hhd-availability-td {
padding: 14px !important;
vertical-align: middle !important;
border-bottom: 1px solid var(--hhd-border);
}
.hhd-availability-td {
text-align: center;
background: #f7fbff;
border-left: 1px solid var(--hhd-border);
}
.hhd-cart-row:last-child .hhd-product-td,
.hhd-cart-row:last-child .hhd-availability-td {
border-bottom: 0;
}
.hhd-product-cell {
display: grid !important;
grid-template-columns: 22px 74px minmax(0, 1fr);
gap: 12px;
align-items: center;
}
.hhd-remove-item {
display: inline-flex !important;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--hhd-red) !important;
font-size: 18px !important;
line-height: 1;
text-decoration: none;
}
.hhd-product-thumb img {
width: 68px;
height: 68px;
object-fit: contain;
}
.hhd-product-title {
display: block;
margin: 0 0 4px;
font-size: 15px;
line-height: 1.25;
font-weight: 800;
color: var(--hhd-blue);
text-decoration: none;
}
.hhd-sku {
display: block;
margin-bottom: 6px;
font-size: 11px;
color: var(--hhd-muted);
}
.hhd-price-line {
display: inline-flex;
align-items: baseline;
gap: 5px;
margin: 0 12px 8px 0;
font-size: 16px;
font-weight: 800;
color: var(--hhd-blue);
}
.hhd-price-multiplier {
font-size: 13px;
font-weight: 500;
color: #475569;
}
.hhd-qty-control {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.hhd-qty-btn,
.hhd-qty-input {
width: 34px;
height: 34px;
border: 1px solid #c9d8eb;
border-radius: 5px;
background: #fff;
color: var(--hhd-blue);
text-align: center;
font-weight: 700;
}
.hhd-qty-input {
width: 46px;
}
.hhd-stock-msg {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
background: #eef2f7;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.hhd-stock--in {
background: #e9fbe8;
color: #008a2e;
}
.hhd-stock--soon {
background: #fff4ce;
color: #a46400;
}
.hhd-stock--out {
background: #ffecec;
color: #b00020;
}
.hhd-stock--unknown {
background: #eef2f7;
color: #42526b;
}
.hhd-footer-total-cell,
.hhd-footer-action-cell {
padding: 12px 14px !important;
vertical-align: middle !important;
background: #fff;
border-top: 1px solid var(--hhd-border);
}
.hhd-footer-total-cell {
text-align: right;
font-size: 15px;
color: var(--hhd-blue);
}
.hhd-footer-subtotal {
display: inline-block;
margin-left: 8px;
font-size: 18px;
font-weight: 800;
}
.hhd-footer-action-cell {
text-align: center;
border-left: 1px solid var(--hhd-border);
}
.hhd-footer-button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
border-radius: 6px !important;
background: var(--hhd-green) !important;
color: #fff !important;
font-size: 14px;
font-weight: 800;
text-align: center;
text-decoration: none !important;
}
.hhd-button-disabled,
.hhd-button-disabled:hover,
.hhd-button-disabled:focus {
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.hhd-cart-footnote {
margin-top: 10px;
font-size: 12px;
line-height: 1.4;
color: #334155;
}
/* Mobile cart cards */
.hhd-mobile-cart {
display: none;
}
@media (max-width: 768px) {
.hhd-desktop-cart,
.hhd-cart-footnote-desktop {
display: none !important;
}
.hhd-mobile-cart {
display: block;
}
.hhd-cart-topline {
align-items: center;
margin-bottom: 12px;
}
.hhd-cart-title {
font-size: 20px;
}
.hhd-cart-subtitle {
display: none;
}
.hhd-cart-change-location {
font-size: 12px;
}
.hhd-mobile-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
border: 2px solid var(--hhd-blue);
border-radius: 8px 8px 0 0;
overflow: hidden;
background: #fff;
}
.hhd-mobile-tab {
min-height: 48px;
border: 0;
background: #fff;
color: var(--hhd-blue);
font-size: 15px;
font-weight: 800;
}
.hhd-mobile-tab.active {
background: var(--hhd-blue);
color: #fff;
}
.hhd-mobile-content {
display: none;
border: 2px solid var(--hhd-blue);
border-top: 0;
border-radius: 0 0 8px 8px;
background: #fff;
padding: 0 12px 14px;
}
.hhd-mobile-content.active {
display: block;
}
.hhd-mobile-panel-header {
margin: 0 -12px 14px;
padding: 16px 14px 14px;
background: #f8fbff;
text-align: center;
border-bottom: 1px solid var(--hhd-border);
}
.hhd-mobile-panel-header .hhd-store-name,
.hhd-mobile-panel-header .hhd-postcode {
margin: 0 0 6px;
font-size: 17px;
font-weight: 800;
color: var(--hhd-blue);
}
.hhd-mobile-panel-header .mobile-summary,
.hhd-mobile-panel-header .hhd-cart-dispatch-countdown {
margin: 4px auto 0 !important;
max-width: 280px;
font-size: 13px;
line-height: 1.35;
color: #334155;
}
.hhd-mobile-panel-header .change-store-link,
.hhd-mobile-panel-header .change-postcode-link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--hhd-red);
text-decoration: none;
}
.hhd-mobile-items {
display: grid;
gap: 12px;
}
.hhd-mobile-item-row {
margin: 0;
}
.hhd-mcard {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
grid-template-areas:
"thumb body"
"controls controls"
"availability availability";
gap: 10px 12px;
padding: 12px;
border: 1px solid var(--hhd-border);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.hhd-mthumb {
grid-area: thumb;
display: flex;
align-items: flex-start;
justify-content: center;
}
.hhd-mthumb img {
width: 72px;
height: 86px;
object-fit: contain;
}
.hhd-mbody {
grid-area: body;
min-width: 0;
}
.hhd-mtitle {
display: block;
margin: 0 0 5px;
color: var(--hhd-blue);
font-size: 16px;
line-height: 1.25;
font-weight: 800;
text-decoration: none;
}
.hhd-msku {
font-size: 11px;
color: var(--hhd-muted);
}
.hhd-mcontrols {
grid-area: controls;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 12px;
align-items: center;
padding-top: 6px;
}
.hhd-mqty {
display: flex;
align-items: center;
gap: 8px;
}
.hhd-mqty label {
color: var(--hhd-blue);
font-size: 14px;
}
.hhd-mobile-qty-input {
width: 56px;
height: 42px;
border: 1px solid #c9d8eb;
border-radius: 6px;
background: #fff;
color: var(--hhd-blue);
text-align: center;
font-size: 16px;
font-weight: 700;
}
.hhd-remove-item-inline {
justify-self: end;
padding: 8px 11px;
border: 1px solid var(--hhd-red);
border-radius: 6px;
color: var(--hhd-red);
font-size: 13px;
line-height: 1;
text-decoration: none;
}
.hhd-mprice {
grid-column: 1 / -1;
justify-self: end;
display: inline-flex;
align-items: baseline;
gap: 5px;
color: var(--hhd-blue);
font-size: 18px;
font-weight: 800;
}
.hhd-mprice--secondary {
margin-top: -4px;
font-size: 14px;
}
.hhd-mavailability {
grid-area: availability;
padding: 10px 12px;
border-radius: 6px;
background: var(--hhd-light);
text-align: left;
}
.hhd-mavailability .hhd-stock-msg {
justify-content: flex-start;
width: 100%;
background: transparent;
padding: 0;
border-radius: 0;
}
.hhd-mobile-subtotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 14px 0 10px;
padding: 12px 0 0;
border-top: 1px solid var(--hhd-border);
color: var(--hhd-blue);
}
.hhd-mobile-subtotal .hhd-footer-subtotal {
font-size: 18px;
}
.hhd-mobile-content .hhd-footer-button {
min-height: 50px;
border-radius: 7px !important;
}
.hhd-cart-footnote-mobile {
display: block;
font-size: 11px;
margin: 10px 0 0;
}
}
@media (min-width: 769px) {
.hhd-cart-footnote-mobile {
display: none !important;
}
}
/* --------------------------------------------------------------------------
v2.6.7 cart layout polish
- Desktop summary cards align with Product / Collection / Delivery columns.
- Product rows show availability only.
- Checkout buttons sit directly below their matching fulfilment columns.
- Mobile keeps the tabbed basket style, with cleaner cards.
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
#hhd-cart-root {
max-width: 1180px;
margin: 0 auto;
}
.hhd-cart-topline {
margin: 0 0 14px;
align-items: flex-end;
}
.hhd-cart-title {
margin-bottom: 4px;
font-size: 34px;
letter-spacing: 0;
}
.hhd-cart-subtitle {
margin: 0;
color: #475569;
font-size: 14px;
}
.hhd-cart-wide-message {
margin: 0 0 14px;
padding: 13px 16px 13px 48px;
border: 1px solid #c9d8eb;
border-radius: 7px;
background: #f4f9ff;
color: #0f2853;
font-size: 14px;
line-height: 1.35;
position: relative;
}
.hhd-cart-wide-message:before {
content: 'i';
position: absolute;
top: 50%;
left: 16px;
width: 22px;
height: 22px;
transform: translateY(-50%);
border-radius: 50%;
background: #00205c;
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 22px;
text-align: center;
font-family: Arial, sans-serif;
}
.hhd-desktop-fulfilment--aligned {
display: grid !important;
grid-template-columns: 50% 25% 25%;
gap: 0;
margin: 0 0 0;
border: 1px solid #d6e2ef;
border-bottom: 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
background: #fff;
}
.hhd-desktop-fulfilment--aligned .hhd-fulfilment-card {
min-height: 138px;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: #fff;
padding: 22px 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hhd-desktop-fulfilment--aligned .hhd-fulfilment-card--collect,
.hhd-desktop-fulfilment--aligned .hhd-fulfilment-card--delivery {
background: #eef5fc;
border-left: 1px solid #d6e2ef;
text-align: center;
align-items: center;
}
.hhd-desktop-fulfilment--aligned .hhd-fulfilment-card--product {
background: #fff;
justify-content: flex-end;
padding-bottom: 24px;
}
.hhd-fulfilment-card__title {
margin: 0 0 7px;
color: #00205c;
font-size: 20px;
font-weight: 800;
line-height: 1.15;
}
.hhd-fulfilment-card__main {
color: #00205c;
font-size: 17px;
font-weight: 800;
line-height: 1.25;
}
.hhd-fulfilment-card__summary,
.hhd-fulfilment-card__countdown {
max-width: 260px;
margin: 7px auto 0 !important;
color: #334155;
font-size: 13px;
line-height: 1.35;
}
.hhd-fulfilment-card__countdown {
font-weight: 700;
}
.hhd-fulfilment-card__links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px 14px;
margin-top: 9px;
}
.hhd-fulfilment-card__links a,
.hhd-fulfilment-card > a {
color: #d00303;
font-size: 12px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.hhd-fulfilment-card__links .hhd-store-info-link {
color: #00205c;
}
.hhd-custom-cart {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #d6e2ef;
border-top: 0;
border-radius: 0 0 8px 8px;
overflow: hidden;
background: #fff;
}
.hhd-custom-cart thead th {
padding: 13px 16px !important;
background: #fff !important;
border-top: 1px solid #d6e2ef;
border-bottom: 2px solid #00205c !important;
color: #00205c;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
text-align: center;
}
.hhd-custom-cart thead th:first-child {
text-align: left;
}
.hhd-custom-cart thead th:nth-child(1),
.hhd-custom-cart tfoot td:nth-child(1) {
width: 50%;
}
.hhd-custom-cart thead th:nth-child(2),
.hhd-custom-cart thead th:nth-child(3),
.hhd-custom-cart tfoot td:nth-child(2),
.hhd-custom-cart tfoot td:nth-child(3) {
width: 25%;
}
.hhd-custom-cart tbody td {
padding: 20px 18px !important;
border-bottom: 1px solid #e2e8f0;
vertical-align: middle;
}
.hhd-custom-cart tbody td:nth-child(2),
.hhd-custom-cart tbody td:nth-child(3) {
background: #eef5fc !important;
border-left: 1px solid #d6e2ef;
text-align: center;
}
.hhd-product-cell {
display: grid !important;
grid-template-columns: 30px 90px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
.hhd-remove-item {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #d00303 !important;
font-size: 22px !important;
line-height: 1;
text-decoration: none;
}
.hhd-product-thumb img,
.hhd-product-cell img {
width: 78px !important;
height: 92px !important;
object-fit: contain;
}
.hhd-product-title {
display: block;
margin: 0 0 5px;
color: #00205c;
font-size: 16px;
line-height: 1.25;
font-weight: 800;
text-decoration: none;
}
.hhd-sku {
display: block;
margin: 0 0 6px;
color: #64748b;
font-size: 11px;
}
.hhd-price-line {
margin: 0 0 9px;
}
.hhd-unit-price {
color: #00205c;
font-size: 20px;
font-weight: 800;
}
.hhd-price-multiplier {
color: #475569;
font-size: 13px;
}
.hhd-qty-control {
display: inline-grid !important;
grid-template-columns: 36px 48px 36px;
gap: 6px;
align-items: center;
}
.hhd-qty-btn,
.hhd-qty-input {
height: 36px !important;
min-height: 36px !important;
border: 1px solid #c9d8eb !important;
border-radius: 5px !important;
background: #fff !important;
color: #00205c !important;
font-weight: 800 !important;
text-align: center;
}
.hhd-stock-msg {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 96px;
max-width: 210px;
min-height: 30px;
margin: 0 auto;
padding: 6px 12px;
border-radius: 999px;
background: #f8fafc;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
text-align: center;
}
.hhd-stock--in {
background: #dcfce7;
color: #00852b;
}
.hhd-stock--soon,
.hhd-stock--unknown {
background: #fff3cd;
color: #b45309;
}
.hhd-stock--out {
background: #fee2e2;
color: #b91c1c;
}
.hhd-stock-phone {
display: block;
width: max-content;
margin: 7px auto 0;
color: #00205c;
font-size: 13px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
.hhd-custom-cart tfoot td {
padding: 16px 18px !important;
border-top: 1px solid #d6e2ef;
background: #fff;
vertical-align: middle;
}
.hhd-custom-cart tfoot td:nth-child(2),
.hhd-custom-cart tfoot td:nth-child(3) {
background: #eef5fc;
border-left: 1px solid #d6e2ef;
}
.hhd-footer-total-cell {
text-align: right !important;
color: #00205c;
font-size: 15px;
}
.hhd-footer-subtotal {
margin-left: 8px !important;
color: #00205c !important;
font-size: 22px !important;
font-weight: 900 !important;
}
.hhd-footer-action-cell .hhd-footer-button {
width: 100% !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 7px !important;
font-size: 15px !important;
font-weight: 800 !important;
text-align: center !important;
}
.hhd-cart-footnote-desktop {
margin-top: 12px;
color: #475569;
font-size: 12px;
line-height: 1.4;
}
}
@media (max-width: 768px) {
#hhd-cart-root {
max-width: 520px;
margin: 0 auto;
}
.hhd-mobile-panel-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 8px;
}
.hhd-mobile-panel-links a,
.hhd-mobile-panel-header > a {
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.hhd-mobile-panel-links .hhd-store-info-link {
color: #00205c;
}
.hhd-mcard {
grid-template-columns: 86px minmax(0, 1fr) auto;
grid-template-areas:
"thumb body remove"
"thumb controls controls"
"availability availability availability";
align-items: start;
}
.hhd-mbody {
padding-right: 4px;
}
.hhd-remove-item-inline {
grid-area: remove;
width: 26px;
height: 26px;
padding: 0 !important;
border: 0 !important;
color: #64748b !important;
font-size: 0 !important;
justify-self: end;
position: relative;
}
.hhd-remove-item-inline:before {
content: '×';
font-size: 24px;
line-height: 24px;
color: #64748b;
}
.hhd-mcontrols {
grid-template-columns: 1fr auto;
align-items: end;
}
.hhd-mprice {
grid-column: auto;
justify-self: end;
align-self: end;
margin-bottom: 2px;
}
.hhd-mavailability {
background: #eef5fc;
}
.hhd-mavailability .hhd-stock-msg {
display: inline-flex;
align-items: center;
width: auto;
min-height: 0;
font-size: 13px;
font-weight: 800;
}
.hhd-mavailability .hhd-stock-phone {
display: inline-block;
margin: 6px 0 0;
color: #00205c;
font-size: 13px;
font-weight: 800;
}
}
/* --------------------------------------------------------------------------
v2.6.8 desktop cart layout - match preferred mockup 1
Two fulfilment summary cards above a clean 3-column product table.
Product rows show availability only; order-level copy stays in the cards/notes.
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.hhd-desktop-fulfilment--mockup1 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0 0 14px;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr);
align-items: center;
min-height: 155px;
padding: 22px 28px !important;
border: 1px solid #d6e2ef !important;
border-radius: 8px !important;
background: #fff !important;
box-shadow: none !important;
text-align: left !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__icon {
width: 100px;
height: 100px;
border-radius: 50%;
background: #eaf2ff;
color: #00205c;
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
line-height: 1;
margin: 0 auto;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__title {
margin: 0 0 8px !important;
padding: 0 !important;
background: transparent !important;
color: #00205c !important;
font-size: 19px !important;
font-weight: 900 !important;
line-height: 1.15;
text-align: left !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__main {
margin: 0 0 5px !important;
padding: 0 !important;
color: #00205c !important;
font-size: 16px !important;
font-weight: 900 !important;
line-height: 1.25;
text-align: left !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__summary,
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__countdown {
max-width: none !important;
margin: 4px 0 0 !important;
padding: 0 !important;
color: #334155;
font-size: 14px;
line-height: 1.35;
text-align: left !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__countdown {
font-weight: 700;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: 8px 14px;
margin-top: 10px;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__links a,
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card > a {
margin: 0 !important;
color: #0052b3 !important;
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card .change-store-link,
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card .change-postcode-link {
color: #0052b3 !important;
}
.hhd-fulfilment-card__button {
margin-top: 12px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.hhd-custom-cart {
border-top: 1px solid #d6e2ef !important;
border-radius: 8px !important;
}
.hhd-custom-cart thead th {
padding: 13px 16px !important;
background: #fff !important;
border-top: 0 !important;
border-bottom: 1px solid #d6e2ef !important;
color: #00205c;
font-size: 14px;
font-weight: 900;
text-align: center !important;
}
.hhd-custom-cart thead th:first-child {
text-align: left !important;
}
.hhd-th-sub {
display: block !important;
margin: 2px 0 0 !important;
padding: 0 !important;
color: #64748b !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.2;
text-transform: none !important;
}
.hhd-custom-cart tbody td:nth-child(2),
.hhd-custom-cart tbody td:nth-child(3),
.hhd-custom-cart tfoot td:nth-child(2),
.hhd-custom-cart tfoot td:nth-child(3) {
background: #f3f8fd !important;
border-left: 1px solid #d6e2ef !important;
}
.hhd-custom-cart tbody td {
min-height: 126px;
}
.hhd-store-availability,
.hhd-delivery-availability {
display: flex;
min-height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
}
.hhd-stock-msg {
max-width: 230px !important;
white-space: normal;
}
.hhd-footer-action-cell .hhd-footer-button {
width: 100% !important;
margin: 0 !important;
}
.hhd-footer-total-cell {
text-align: right !important;
}
}
/* --------------------------------------------------------------------------
v2.6.10 cart polish
- one-colour header icons
- product-page style fulfilment messaging in header cards
- editable/debounced quantity inputs
- clickable phone under call-to-check row statuses
- consistent desktop fulfilment card text sizing
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card {
grid-template-columns: 112px minmax(0, 1fr);
align-items: center;
min-height: 170px;
column-gap: 10px;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__icon {
width: 92px;
height: 92px;
background: #eaf2ff;
color: #00205c;
font-size: 0;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__icon svg {
width: 42px;
height: 42px;
fill: currentColor;
display: block;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__title {
margin-bottom: 6px !important;
font-size: 20px !important;
letter-spacing: 0;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__main {
margin-bottom: 4px !important;
font-size: 16px !important;
letter-spacing: 0;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__address {
margin: 0 0 9px !important;
color: #64748b;
font-size: 13px;
line-height: 1.35;
text-align: left !important;
}
.hhd-desktop-fulfilment--mockup1 .desktop-summary {
display: none !important;
}
.hhd-desktop-fulfilment--mockup1 .hhd-fulfilment-card__links {
margin-top: 10px;
}
}
.hhd-cart-infobox {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 7px;
border: 1px solid #dbe7f3;
border-left: 3px solid #94a3b8;
background: #f8fafc;
margin: 8px 0 0;
max-width: 414px;
}
.hhd-cart-infobox__icon {
width: 24px;
height: 24px;
min-width: 24px;
border-radius: 50%;
background: #64748b;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
line-height: 1;
}
.hhd-cart-infobox__main {
color: #0f172a;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.hhd-cart-infobox__sub,
.hhd-cart-infobox__tel {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 13px;
line-height: 1.35;
}
.hhd-cart-infobox__tel {
color: #00205c;
font-weight: 700;
text-decoration: none;
}
.hhd-cart-infobox__tel:hover {
text-decoration: underline;
}
.hhd-cart-infobox--available {
background: #f0fdf4;
border-color: #bbf7d0;
border-left-color: #16a34a;
}
.hhd-cart-infobox--available .hhd-cart-infobox__icon {
background: #16a34a;
}
.hhd-cart-infobox--available .hhd-cart-infobox__main {
color: #14532d;
}
.hhd-cart-infobox--soon {
background: #fefce8;
border-color: #fde68a;
border-left-color: #d97706;
}
.hhd-cart-infobox--soon .hhd-cart-infobox__icon {
background: #d97706;
}
.hhd-cart-infobox--soon .hhd-cart-infobox__main {
color: #78350f;
}
.hhd-cart-infobox--unavailable {
background: #fef2f2;
border-color: #fecaca;
border-left-color: #dc2626;
}
.hhd-cart-infobox--unavailable .hhd-cart-infobox__icon {
background: #dc2626;
}
.hhd-cart-infobox--unavailable .hhd-cart-infobox__main,
.hhd-cart-infobox--unavailable .hhd-cart-infobox__sub {
color: #7f1d1d;
}
.hhd-stock-phone {
display: block;
margin-top: 5px;
color: #00205c;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.hhd-stock-phone:hover {
text-decoration: underline;
}
.hhd-qty-input,
.hhd-mobile-qty-input {
appearance: textfield;
-moz-appearance: textfield;
text-align: center;
font-weight: 700;
}
.hhd-qty-input::-webkit-outer-spin-button,
.hhd-qty-input::-webkit-inner-spin-button,
.hhd-mobile-qty-input::-webkit-outer-spin-button,
.hhd-mobile-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hhd-qty-input:focus,
.hhd-mobile-qty-input:focus {
outline: 2px solid rgba(0, 32, 92, 0.2);
outline-offset: 1px;
border-color: #00205c !important;
}
.hhd-mobile-qty-input {
width: 54px;
min-height: 42px;
border: 1px solid #cbd7e6;
border-radius: 5px;
color: #00205c;
background: #fff;
}
/* ---------------------------------------------------------------------------
* Delivery postcode modal (opened by Home Delivery when no postcode is known).
* The header, search row, buttons and close use the theme's "My Store" modal
* classes (msn-*, my-store-nav.css); this only adds the container and body.
* ------------------------------------------------------------------------- */
.hhd-dm {
--msn-navy: #00205B; --msn-navy-mid: #243060; --msn-red: #C62828; --msn-red-hov: #B71C1C;
--msn-gold: #FFD100; --msn-surface: #F9FAFB; --msn-t1: #111827; --msn-t2: #374151; --msn-t3: #6B7280;
position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center;
padding: 16px; font-family: "Kumbh Sans", sans-serif;
}
.hhd-dm[hidden] { display: none; }
.hhd-dm .hhd-dm__box { max-width: 480px; }
.hhd-dm .msn-header h2 { padding-right: 40px; }
.hhd-dm__submit[disabled] { opacity: 0.75; cursor: wait; }
.hhd-dm__body { background: #fff; padding: 16px 22px 20px; }
.hhd-dm__msg { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #fbbf24; border-radius: 8px; background: #fef9c3; color: #92400e; font-size: 14px; line-height: 1.45; }
.hhd-dm__msg[hidden] { display: none; }
.hhd-dm__alt { margin: 0; font-size: 14px; color: var(--msn-t2); }
.hhd-dm__alt a { color: var(--msn-navy); font-weight: 700; text-decoration: underline; }
.hhd-dm__alt a:hover { color: var(--msn-red); }
@media (max-width: 479px) {
.hhd-dm { padding: 0; align-items: flex-end; }
.hhd-dm .hhd-dm__box { max-width: 100%; border-radius: 14px 14px 0 0; }
.hhd-dm .msn-search { flex-direction: column; }
.hhd-dm .msn-search-field { flex: 1 1 auto; }
.hhd-dm__body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* Blocked state: the reason plus real next steps, so the close button is never the only way out. */
.hhd-dm .hhd-dm__form[hidden],
.hhd-dm .hhd-dm__actions[hidden],
.hhd-dm .hhd-dm__alt[hidden],
.hhd-dm .hhd-dm__act[hidden] { display: none !important; }
.hhd-dm__actions { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hhd-dm__actions .hhd-dm__act { width: 100%; height: auto; min-height: 46px; padding: 10px 16px; white-space: normal; line-height: 1.3; font-size: 14px; }
.hhd-dm__act-remove { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--msn-navy); border-radius: 8px; background: #fff; color: var(--msn-navy); font-family: inherit; font-weight: 700; cursor: pointer; text-align: center; }
.hhd-dm__act-remove:hover { background: #eef2f9; }
.hhd-dm__act-remove[disabled] { opacity: 0.7; cursor: wait; }
.hhd-dm__act-back { align-self: center; margin-top: 2px; padding: 6px 10px; border: 0; background: transparent; color: var(--msn-navy); font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.hhd-dm__act-back:hover { color: var(--msn-red); }