/* =============================================================
WOOCOMMERCE — stock templates, brought into the design system.
============================================================= */
/* ---- Product loop ---- */
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: var(--dp-s5);
margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important;
display: flex; flex-direction: column; position: relative;
background: #fff; border: 1px solid var(--dp-line);
border-radius: var(--dp-r-md); overflow: hidden;
transition: border-color var(--dp-mid), box-shadow var(--dp-mid), transform var(--dp-mid);
}
.woocommerce ul.products li.product:hover {
border-color: var(--dp-purple-200);
box-shadow: var(--dp-shadow-md);
transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
margin: 0; aspect-ratio: 1/1; object-fit: contain;
padding: var(--dp-s4);
position: relative; z-index: 1; /* above the tint layer, so multiply blends with it */
}
/* The tint lives on its own layer under the image: multiply composites an
element against what is BENEATH it, and an element's own background does
not count — with the tint on the img the white packshot stayed white. */
.woocommerce ul.products li.product::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
aspect-ratio: 1 / 1; background: var(--dp-surface-3);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--dp-font-head); font-size: var(--dp-t-sm);
font-weight: 700; color: var(--dp-ink); line-height: 1.4;
padding: 0 var(--dp-s4); margin: 0 0 var(--dp-s2);
}
.woocommerce ul.products li.product .price {
font-family: var(--dp-font-head); font-size: var(--dp-t-h4);
font-weight: 800; color: var(--dp-ink);
padding: 0 var(--dp-s4); margin-top: auto;
}
.woocommerce ul.products li.product .price del { font-size: var(--dp-t-sm); color: var(--dp-ink-4); font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
margin: var(--dp-s4);
width: calc(100% - var(--dp-s4) * 2);
/* Stretched to the tile width, so the label needs centring explicitly —
an inherits text-align: start and sat hard against the left padding. */
text-align: center;
}
/* P-medicine flag on a loop tile */
.woocommerce ul.products li.product .dp-loop-badges {
position: absolute; top: var(--dp-s3); left: var(--dp-s3); z-index: 2;
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
max-width: calc(100% - var(--dp-s3) * 2);
}
.woocommerce ul.products li.product .dp-loop-badges .dp-badge { position: static; margin: 0; white-space: nowrap; }
.woocommerce ul.products li.product .dp-loop-pmed-box { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1 / 1; z-index: 2; pointer-events: none; }
.woocommerce ul.products li.product .dp-loop-pmed {
position: absolute; right: var(--dp-s3); bottom: var(--dp-s3); pointer-events: auto;
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
background: var(--dp-green-500); color: #fff; border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .dp-loop-pmed svg { display: block; }
.woocommerce ul.products li.product .dp-loop-sale {
background: var(--dp-danger-bg); color: var(--dp-danger); border: 1px solid #f6d5d5;
font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
/* Sale flash */
.woocommerce span.onsale {
position: absolute; top: var(--dp-s3); right: var(--dp-s3); left: auto;
min-height: 0; min-width: 0; padding: 5px 11px; margin: 0;
background: var(--dp-danger-bg); color: var(--dp-danger);
border: 1px solid #f6d5d5; border-radius: var(--dp-r-pill);
font-family: var(--dp-font-head); font-size: var(--dp-t-xs);
font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
line-height: 1.3;
}
/* ---- Buttons ---- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
text-align: center;
background: var(--dp-purple); color: #fff;
border-radius: var(--dp-r-pill); border: 0;
font-family: var(--dp-font-head); font-weight: 700;
font-size: var(--dp-t-sm); padding: 13px 24px;
transition: background var(--dp-fast), transform var(--dp-fast);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background: var(--dp-purple-600); color: #fff; transform: translateY(-1px);
}
.woocommerce .button.alt,
.woocommerce button.button.alt { background: var(--dp-purple); color: #fff; }
.woocommerce .button.alt:hover { background: var(--dp-purple-600); }
/* ---- Single product ---- */
/* Product titles are identifiers, not display headlines. They carry data
("200mg/12.8mg", "32 Tablets") that reads as shouting at h1 scale, and a
long name at 48px wrapped to three lines — pushing price and add-to-cart
below the fold. Smaller and lighter, so the price can lead the decision. */
.woocommerce div.product .product_title {
font-family: var(--dp-font-head);
font-size: clamp(1.5rem, 1.28rem + 0.95vw, 2rem); /* 24 -> 32 */
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--dp-ink);
margin-bottom: var(--dp-s3);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-family: var(--dp-font-head);
font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); /* 24 -> 30 */
font-weight: 800;
line-height: 1.2;
color: var(--dp-ink);
margin-bottom: var(--dp-s4);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
font-size: var(--dp-t-base);
font-weight: 500;
color: var(--dp-ink-4);
margin-right: 6px;
}
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--dp-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--dp-font-head); font-weight: 700; color: var(--dp-ink-3);
padding: 14px 20px; display: block; border-bottom: 2.5px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--dp-purple-700); border-bottom-color: var(--dp-green-500);
}
/* The P-medicine notice sits above add-to-cart */
.woocommerce div.product .dp-pmed-note { margin-bottom: var(--dp-s5); }
/* ---- Forms, cart, checkout ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
background: var(--dp-surface-3); border: 1.5px solid transparent;
border-radius: var(--dp-r); padding: 13px 16px;
font-family: var(--dp-font-body); font-size: var(--dp-t-base); color: var(--dp-ink);
transition: border-color var(--dp-fast), background var(--dp-fast), box-shadow var(--dp-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
outline: none; background: #fff;
border-color: var(--dp-purple); box-shadow: var(--dp-ring);
}
.woocommerce form .form-row label {
font-family: var(--dp-font-head); font-size: var(--dp-t-sm);
font-weight: 700; color: var(--dp-ink); margin-bottom: 6px;
}
.woocommerce table.shop_table {
border: 1px solid var(--dp-line); border-radius: var(--dp-r-md);
border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th {
font-family: var(--dp-font-head); font-weight: 700; color: var(--dp-ink);
background: var(--dp-surface-2);
}
/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-top: 0; border-radius: var(--dp-r); padding: var(--dp-s4) var(--dp-s5);
background: var(--dp-surface-2); border-left: 4px solid var(--dp-purple);
font-size: var(--dp-t-sm);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message { border-left-color: var(--dp-green-600); background: var(--dp-green-50); }
.woocommerce-error { border-left-color: var(--dp-danger); background: var(--dp-danger-bg); }
/* ---- The P-medicine checkout gate ---- */
.dp-pmed-gate {
margin-top: var(--dp-s6); padding: var(--dp-s6);
background: var(--dp-surface-2);
border: 1px solid var(--dp-pmed-line); border-radius: var(--dp-r-md);
}
.dp-pmed-gate h3 { font-size: var(--dp-t-h4); margin-bottom: var(--dp-s4); }
.dp-pmed-gate .dp-pmed-field { margin-bottom: var(--dp-s4); }
.dp-pmed-gate textarea { min-height: 90px; }
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px) {
.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--dp-s4); }
.woocommerce div.product .product_title { font-size: var(--dp-t-h2); }
}
/* =============================================================
PHARMACY QUESTION MODAL
============================================================= */
body.dp-modal-open { overflow: hidden; }
.dp-modal {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center;
padding: var(--dp-s4);
}
.dp-modal[hidden] { display: none; }
.dp-modal-scrim {
position: absolute; inset: 0;
background: rgba(27,4,40,.6);
backdrop-filter: blur(3px);
opacity: 0; transition: opacity var(--dp-mid);
}
body.dp-modal-open .dp-modal-scrim { opacity: 1; }
.dp-modal-panel {
position: relative; z-index: 1;
width: min(560px, 100%);
max-height: min(88vh, 780px);
display: flex; flex-direction: column;
background: #fff;
border-radius: var(--dp-r-lg);
box-shadow: var(--dp-shadow-lg);
opacity: 0; transform: translateY(12px) scale(.985);
transition: opacity var(--dp-mid), transform var(--dp-mid);
}
body.dp-modal-open .dp-modal-panel { opacity: 1; transform: none; }
/* Head */
.dp-modal-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--dp-s4);
padding: var(--dp-s5) var(--dp-s6);
border-bottom: 1px solid var(--dp-line);
flex: 0 0 auto;
}
.dp-modal-head h2 {
font-size: var(--dp-t-h3); margin: var(--dp-s3) 0 0;
}
.dp-modal-close {
flex: 0 0 auto; width: 38px; height: 38px;
display: grid; place-items: center;
background: var(--dp-surface-3); border: 0; border-radius: 50%;
color: var(--dp-ink); cursor: pointer;
transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-modal-close:hover { background: var(--dp-purple-100); color: var(--dp-purple-700); }
/* Body — the only scrolling region */
.dp-modal-body {
flex: 1 1 auto; overflow-y: auto;
padding: var(--dp-s5) var(--dp-s6);
-webkit-overflow-scrolling: touch;
}
.dp-modal-intro {
font-size: var(--dp-t-sm); color: var(--dp-ink-3);
line-height: var(--dp-lh-base);
padding-bottom: var(--dp-s5); margin-bottom: var(--dp-s5);
border-bottom: 1px solid var(--dp-line-soft);
}
.dp-modal-intro strong { color: var(--dp-ink); }
/* Summary error */
.dp-modal-error {
padding: var(--dp-s3) var(--dp-s4); margin-bottom: var(--dp-s5);
background: var(--dp-danger-bg); border: 1px solid #f6d5d5;
border-left: 4px solid var(--dp-danger); border-radius: var(--dp-r);
color: var(--dp-danger); font-size: var(--dp-t-sm); font-weight: 600;
}
.dp-modal-error[hidden] { display: none; }
/* Fields */
.dp-modal .dp-field { margin-bottom: var(--dp-s5); }
.dp-modal .dp-field:last-child { margin-bottom: 0; }
.dp-req { color: var(--dp-danger); text-decoration: none; border: 0; margin-left: 2px; }
.dp-radios { display: grid; gap: var(--dp-s2); }
.dp-radio, .dp-check {
display: flex; align-items: flex-start; gap: var(--dp-s3);
padding: 12px 14px; cursor: pointer;
background: var(--dp-surface-3);
border: 1.5px solid transparent; border-radius: var(--dp-r);
font-size: var(--dp-t-sm); color: var(--dp-ink-2);
transition: border-color var(--dp-fast), background var(--dp-fast);
}
.dp-radio:hover, .dp-check:hover { background: var(--dp-purple-50); }
.dp-radio input, .dp-check input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--dp-purple); }
.dp-radio:has(input:checked), .dp-check:has(input:checked) {
border-color: var(--dp-purple); background: var(--dp-purple-50);
}
/* Invalid state */
.dp-field-invalid .dp-input,
.dp-field-invalid .dp-select,
.dp-field-invalid .dp-textarea { border-color: var(--dp-danger); background: var(--dp-danger-bg); }
.dp-field-invalid .dp-radio, .dp-field-invalid .dp-check { border-color: var(--dp-danger); }
.dp-field-error {
display: block; margin-top: 6px;
font-size: var(--dp-t-xs); font-weight: 600; color: var(--dp-danger);
}
.dp-field-error[hidden] { display: none; }
/* Foot */
.dp-modal-foot {
flex: 0 0 auto;
display: flex; gap: var(--dp-s3); justify-content: flex-end;
padding: var(--dp-s5) var(--dp-s6) var(--dp-s4);
border-top: 1px solid var(--dp-line);
background: var(--dp-surface-2);
border-radius: 0 0 var(--dp-r-lg) var(--dp-r-lg);
}
.dp-modal-fine {
flex: 0 0 auto; margin: 0;
padding: 0 var(--dp-s6) var(--dp-s5);
background: var(--dp-surface-2);
border-radius: 0 0 var(--dp-r-lg) var(--dp-r-lg);
font-size: var(--dp-t-xs); color: var(--dp-ink-4); text-align: right;
}
/* ---- Stepped modal ---- */
.dp-modal-head-top {
display: flex; align-items: center; justify-content: space-between;
gap: var(--dp-s4); margin-bottom: var(--dp-s3);
}
.dp-modal-stepped .dp-modal-head { flex-direction: column; align-items: stretch; }
.dp-modal-stepped .dp-modal-head h2 { margin: 0 0 var(--dp-s4); font-size: var(--dp-t-h3); }
/* Progress */
.dp-progress { display: flex; flex-direction: column; gap: 8px; }
.dp-progress-track {
height: 5px; border-radius: 999px; overflow: hidden;
background: var(--dp-purple-100);
}
.dp-progress-fill {
height: 100%; width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--dp-purple), var(--dp-green-500));
transition: width .28s var(--dp-ease);
}
.dp-progress-text {
margin: 0;
font-family: var(--dp-font-head); font-size: var(--dp-t-xs); font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--dp-ink-3);
}
/* Panes — a min-height stops the panel jumping between short and long steps */
.dp-step-pane { min-height: 180px; }
.dp-step-pane[hidden] { display: none; }
.dp-modal-stepped .dp-question-label {
display: block;
font-family: var(--dp-font-head);
font-size: var(--dp-t-h4); font-weight: 700;
color: var(--dp-ink); line-height: 1.35;
margin-bottom: var(--dp-s4);
}
.dp-modal-stepped .dp-field { margin-bottom: 0; }
.dp-modal-stepped .dp-radios { gap: var(--dp-s3); }
.dp-modal-stepped .dp-radio, .dp-modal-stepped .dp-check { padding: 15px 16px; font-size: var(--dp-t-base); }
/* Review step */
.dp-review-head { font-size: var(--dp-t-h4); margin-bottom: var(--dp-s4); }
.dp-review-list { margin: 0 0 var(--dp-s5); padding: 0; }
.dp-review-list dt {
font-size: var(--dp-t-sm); color: var(--dp-ink-3);
line-height: 1.4; margin-bottom: 4px;
}
.dp-review-list dd {
margin: 0 0 var(--dp-s4);
padding-bottom: var(--dp-s4);
border-bottom: 1px solid var(--dp-line-soft);
display: flex; align-items: baseline; justify-content: space-between; gap: var(--dp-s4);
}
.dp-review-list dd:last-of-type { border-bottom: 0; margin-bottom: 0; }
.dp-review-list dd > span {
font-family: var(--dp-font-head); font-weight: 700; color: var(--dp-ink);
overflow-wrap: anywhere;
}
.dp-review-empty { color: var(--dp-danger) !important; font-weight: 600 !important; }
.dp-review-edit {
flex: 0 0 auto;
background: none; border: 0; padding: 0; cursor: pointer;
font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
color: var(--dp-purple); text-decoration: underline;
}
.dp-review-edit:hover { color: var(--dp-purple-600); }
/* The confirmation is pinned to the bottom of the review pane, so it can
never scroll away from the Confirm button it belongs to. Without this, a
long summary pushes the tick-box off-screen and Confirm gets pressed
before it is seen — the same trap the stepper exists to remove. */
.dp-step-review .dp-field[data-type="checkbox"] {
position: sticky;
bottom: 0;
z-index: 2;
margin-inline: calc(var(--dp-s6) * -1);
padding: var(--dp-s4) var(--dp-s6) var(--dp-s2);
background: #fff;
box-shadow: 0 -12px 20px -12px rgba(26,21,35,.18);
}
.dp-step-review .dp-field[data-type="checkbox"]::before {
content: "";
position: absolute; inset: 0 var(--dp-s6) auto;
height: 1px; background: var(--dp-line);
}
.dp-step-review .dp-check { background: var(--dp-pmed-bg); border-color: var(--dp-pmed-line); }
.dp-step-review .dp-check:hover { background: #fdf0dc; }
.dp-step-review .dp-field-invalid .dp-check { border-color: var(--dp-danger); background: var(--dp-danger-bg); }
/* Footer — Cancel/Back on the left, Next/Confirm on the right */
.dp-modal-stepped .dp-modal-foot { justify-content: space-between; }
.dp-modal-stepped .dp-modal-foot [data-modal-next],
.dp-modal-stepped .dp-modal-foot [data-modal-submit] { margin-left: auto; }
.dp-modal-foot [hidden] { display: none; }
/* "View product" replaces add-to-cart on P medicines in the loop */
.woocommerce ul.products li.product .dp-pmed-view {
background: transparent !important;
color: var(--dp-purple) !important;
border: 1.5px solid var(--dp-purple-200) !important;
}
.woocommerce ul.products li.product .dp-pmed-view:hover {
background: var(--dp-purple-50) !important;
border-color: var(--dp-purple) !important;
}
@media (max-width: 640px) {
.dp-modal { padding: 0; place-items: end stretch; }
.dp-modal-panel {
width: 100%; max-height: 92vh;
border-radius: var(--dp-r-lg) var(--dp-r-lg) 0 0;
transform: translateY(100%);
}
body.dp-modal-open .dp-modal-panel { transform: none; }
.dp-modal-head, .dp-modal-body { padding-inline: var(--dp-s5); }
.dp-modal-foot { padding-inline: var(--dp-s5); }
.dp-modal-stepped .dp-modal-foot .dp-btn { flex: 1 1 auto; }
.dp-modal-stepped .dp-modal-foot [data-modal-next],
.dp-modal-stepped .dp-modal-foot [data-modal-submit] { flex: 2 1 auto; }
.dp-step-pane { min-height: 200px; }
.dp-step-review .dp-field[data-type="checkbox"] {
margin-inline: calc(var(--dp-s5) * -1);
padding-inline: var(--dp-s5);
}
.dp-step-review .dp-field[data-type="checkbox"]::before { inset: 0 var(--dp-s5) auto; }
.dp-modal-fine { padding-inline: var(--dp-s5); text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.dp-modal-scrim, .dp-modal-panel, .dp-progress-fill { transition: none; }
}
/* =============================================================
SHOP PAGE HEAD
The breadcrumb is a utility strip, not a section band. Given the full
--dp-section padding it sat 86px below the nav, which read as a gap
rather than a hierarchy. Tight above, generous below.
============================================================= */
.dp-shop-crumbs {
padding-top: var(--dp-s5);
padding-bottom: var(--dp-section);
}
.woocommerce .woocommerce-breadcrumb {
margin: 0 0 var(--dp-s6);
padding: 0;
font-family: var(--dp-font-body);
font-size: var(--dp-t-sm);
color: var(--dp-ink-4);
line-height: 1.5;
}
.woocommerce .woocommerce-breadcrumb a {
color: var(--dp-ink-3);
text-decoration: none;
transition: color var(--dp-fast);
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: var(--dp-purple);
text-decoration: underline;
}
/* Single product: the title should lead, so pull the summary level with
the gallery rather than letting Woo's default margins drift. */
.woocommerce div.product .product_title { margin-top: 0; }
@media (max-width: 767px) {
.dp-shop-crumbs { padding-top: var(--dp-s4); }
.woocommerce .woocommerce-breadcrumb { margin-bottom: var(--dp-s5); }
}
/* Compact P-medicine notice for the product page.
The full-size component belongs in a homepage explainer band; in a 564px
summary column it ran to 169px and crowded out the price and add-to-cart. */
.dp-pmed-note-sm {
gap: var(--dp-s3);
padding: var(--dp-s4);
border-radius: var(--dp-r-sm);
align-items: flex-start;
}
.dp-pmed-note-sm svg { margin-top: 1px; }
.dp-pmed-note-sm strong {
font-size: var(--dp-t-sm);
line-height: 1.4;
margin-bottom: 2px;
}
.dp-pmed-note-sm p {
font-size: var(--dp-t-sm);
line-height: 1.5;
}
/* =============================================================
SINGLE PRODUCT — CONVERSION LAYOUT
============================================================= */
/* ---- Stock ---- */
.dp-stock {
display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 var(--dp-s4);
font-family: var(--dp-font-head);
font-size: var(--dp-t-sm); font-weight: 700;
}
.dp-stock-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dp-stock--in { color: var(--dp-green-700); }
.dp-stock--in .dp-stock-dot { background: var(--dp-green-500); box-shadow: 0 0 0 3px var(--dp-green-100); }
.dp-stock--low { color: var(--dp-pmed-strong); }
.dp-stock--low .dp-stock-dot { background: var(--dp-pmed); box-shadow: 0 0 0 3px var(--dp-pmed-bg); }
.dp-stock--out { color: var(--dp-danger); }
.dp-stock--out .dp-stock-dot { background: var(--dp-danger); box-shadow: 0 0 0 3px var(--dp-danger-bg); }
/* ---- Buy panel: price and button as one unit ---- */
.woocommerce div.product .dp-buy {
margin: var(--dp-s5) 0;
padding: var(--dp-s5);
background: var(--dp-surface-2);
border: 1px solid var(--dp-line);
border-radius: var(--dp-r-md);
}
.dp-buy-price {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--dp-s3);
margin-bottom: var(--dp-s4);
}
.woocommerce div.product .dp-buy .price { margin: 0; }
.dp-buy-save {
font-family: var(--dp-font-head); font-size: var(--dp-t-xs); font-weight: 800;
letter-spacing: .04em; text-transform: uppercase;
color: var(--dp-danger); background: var(--dp-danger-bg);
border: 1px solid #f6d5d5; border-radius: var(--dp-r-pill);
padding: 4px 10px; line-height: 1.3;
}
/* Quantity + button on one row */
.woocommerce div.product .dp-buy form.cart {
display: flex; align-items: stretch; gap: var(--dp-s3);
margin: 0; flex-wrap: nowrap;
}
.woocommerce div.product .dp-buy form.cart .quantity { margin: 0; flex: 0 0 auto; }
.woocommerce div.product .dp-buy form.cart .quantity input.qty {
height: 100%; min-height: 54px; width: 78px;
padding: 0 8px; text-align: center;
background: #fff; border: 1.5px solid var(--dp-line);
border-radius: var(--dp-r); color: var(--dp-ink);
font-family: var(--dp-font-head); font-size: var(--dp-t-base); font-weight: 700;
}
.woocommerce div.product .dp-buy form.cart .quantity input.qty:focus {
outline: none; border-color: var(--dp-purple); box-shadow: var(--dp-ring);
}
.woocommerce div.product .dp-buy .single_add_to_cart_button {
flex: 1 1 auto; min-height: 54px;
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--dp-t-base);
border-radius: var(--dp-r-pill);
padding: 0 var(--dp-s5);
}
/* A single-quantity product does not need a quantity box at all. */
.woocommerce div.product .dp-buy form.cart .quantity.hidden { display: none; }
.dp-buy-limit {
display: flex; align-items: center; gap: 7px;
margin: var(--dp-s3) 0 0;
font-size: var(--dp-t-xs); font-weight: 600;
color: var(--dp-pmed-strong);
}
.dp-buy-limit svg { flex: 0 0 auto; color: var(--dp-pmed); }
/* ---- Dispatch countdown ---- */
.dp-dispatch {
display: flex; align-items: center; gap: 9px;
margin: 0 0 var(--dp-s5); padding: 11px 14px;
background: var(--dp-green-50);
border: 1px solid var(--dp-green-200);
border-radius: var(--dp-r);
font-size: var(--dp-t-sm); font-weight: 600;
color: var(--dp-green-700);
}
.dp-dispatch svg { flex: 0 0 auto; }
.dp-dispatch--soon {
background: var(--dp-pmed-bg); border-color: var(--dp-pmed-line);
color: var(--dp-pmed-strong);
}
.dp-dispatch--passed {
background: var(--dp-surface-3); border-color: var(--dp-line);
color: var(--dp-ink-3);
}
/* ---- Accordions ---- */
.dp-accordions {
margin: 0 0 var(--dp-s5);
border-top: 1px solid var(--dp-line);
}
.dp-acc { border-bottom: 1px solid var(--dp-line); }
.dp-acc summary {
display: flex; align-items: center; gap: var(--dp-s3);
padding: 15px 2px; cursor: pointer; list-style: none;
font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
color: var(--dp-ink);
transition: color var(--dp-fast);
}
.dp-acc summary::-webkit-details-marker { display: none; }
.dp-acc summary:hover { color: var(--dp-purple); }
.dp-acc summary > span { flex: 1 1 auto; }
.dp-acc summary > svg:first-child { flex: 0 0 auto; color: var(--dp-purple); }
.dp-acc summary > svg:last-child {
flex: 0 0 auto; color: var(--dp-ink-4);
transition: transform var(--dp-mid);
}
.dp-acc[open] summary > svg:last-child { transform: rotate(180deg); }
.dp-acc[open] summary { color: var(--dp-purple-700); }
.dp-acc-body { padding: 0 2px var(--dp-s4) calc(17px + var(--dp-s3)); }
.dp-acc-body p {
margin: 0; font-size: var(--dp-t-sm);
line-height: var(--dp-lh-loose); color: var(--dp-ink-3);
}
.dp-acc summary:focus-visible { outline: none; box-shadow: var(--dp-ring); border-radius: var(--dp-r-sm); }
/* ---- Registration strip ---- */
.dp-reg-strip {
padding: var(--dp-s4) var(--dp-s5);
background: var(--dp-purple-50);
border: 1px solid var(--dp-purple-100);
border-radius: var(--dp-r-md);
}
.dp-reg-line {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 10px;
font-size: var(--dp-t-xs); line-height: 1.55; color: var(--dp-ink-3);
}
.dp-reg-line:last-child { margin-bottom: 0; }
.dp-reg-line svg { flex: 0 0 auto; color: var(--dp-purple); margin-top: 1px; }
.dp-reg-line b { color: var(--dp-ink-2); font-weight: 700; }
.dp-reg-line a { color: var(--dp-purple); text-decoration: underline; }
/* =============================================================
STICKY MOBILE BUY BAR
Hunting for Add to Basket on a long product page costs sales. The bar
appears only while the real button is off screen, so it never duplicates
a control the customer can already see.
============================================================= */
.dp-stickybuy {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
background: rgba(255,255,255,.97);
backdrop-filter: blur(10px);
border-top: 1px solid var(--dp-line);
box-shadow: 0 -6px 24px -10px rgba(26,21,35,.22);
padding: 10px var(--dp-gutter);
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform .24s var(--dp-ease);
}
.dp-stickybuy.is-visible { transform: translateY(0); }
.dp-stickybuy.is-behind-modal { transform: translateY(100%); }
.dp-stickybuy[hidden] { display: none; }
.dp-stickybuy-inner {
display: flex; align-items: center; gap: var(--dp-s4);
max-width: var(--dp-maxw); margin-inline: auto;
}
.dp-stickybuy-info { flex: 1 1 auto; min-width: 0; }
.dp-stickybuy-name {
display: block;
font-size: var(--dp-t-xs); color: var(--dp-ink-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 1px;
}
.dp-stickybuy-price {
display: block;
font-family: var(--dp-font-head); font-size: var(--dp-t-h4);
font-weight: 800; color: var(--dp-ink); line-height: 1.15;
}
.dp-stickybuy-price del { font-size: var(--dp-t-sm); font-weight: 500; color: var(--dp-ink-4); margin-right: 4px; }
.dp-stickybuy-price ins { text-decoration: none; }
.dp-stickybuy-btn { flex: 0 0 auto; min-height: 48px; padding-inline: var(--dp-s5); }
/* Desktop keeps the button in view beside the gallery, so the bar is
mobile and tablet only. */
@media (min-width: 1025px) {
.dp-stickybuy { display: none !important; }
}
@media (max-width: 767px) {
.woocommerce div.product .dp-buy { padding: var(--dp-s4); }
.woocommerce div.product .dp-buy form.cart .quantity input.qty { width: 68px; min-height: 50px; }
.woocommerce div.product .dp-buy .single_add_to_cart_button { min-height: 50px; padding-inline: var(--dp-s4); }
.dp-reg-strip { padding: var(--dp-s4); }
/* Room for the sticky bar so it never covers the footer's last line. */
body.single-product .dp-footer { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
.dp-stickybuy, .dp-acc summary > svg:last-child { transition: none; }
}
/* get_price_html() emits .woocommerce-Price-amount with no size of its own —
make it inherit from whichever container it has been placed in. */
.woocommerce div.product .dp-buy .price,
.woocommerce div.product .dp-buy .price .woocommerce-Price-amount,
.dp-stickybuy-price .woocommerce-Price-amount {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
color: inherit;
}
.woocommerce div.product .dp-buy .price {
font-family: var(--dp-font-head);
font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
font-weight: 800;
line-height: 1.2;
color: var(--dp-ink);
margin: 0;
}
.woocommerce div.product .dp-buy .price del,
.woocommerce div.product .dp-buy .price del .woocommerce-Price-amount {
font-size: var(--dp-t-base); font-weight: 500; color: var(--dp-ink-4);
}
/* =============================================================
BUY PANEL — NO QUANTITY SELECTOR
Pharmacy medicines are capped at one, and WooCommerce responds by
rendering a hidden input while leaving the .quantity wrapper in place:
a zero-width, 54px-tall flex item with a phantom gap beside it. That
stranded the price on its own row above a full-width button.
With only two things to place, they belong on one row.
============================================================= */
/* Remove the empty wrapper WooCommerce leaves behind. !important because the
variations script writes an inline display:block on it when a variant is
picked, which put a stray 1px border beside the button (Will, 21 Sep). */
.woocommerce div.product .dp-buy form.cart .quantity:has( input[type="hidden"].qty ) {
display: none !important;
}
.woocommerce div.product .dp-buy--noqty {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: var(--dp-s5);
}
.woocommerce div.product .dp-buy--noqty .dp-buy-price { margin: 0; }
.woocommerce div.product .dp-buy--noqty form.cart { margin: 0; }
.woocommerce div.product .dp-buy--noqty form.cart .single_add_to_cart_button {
flex: 0 0 auto;
min-width: 210px;
}
/* The limit is a condition of the purchase, so it becomes a footer band
rather than a line of text floating in the panel's bottom padding.
Previously it sat 13px below the divider but 25px above the panel edge —
not centred in a strip, but stuck to the top of a 24px void. Bleeding it
to the panel edges lets the padding be symmetrical by construction. */
.woocommerce div.product .dp-buy .dp-buy-limit {
grid-column: 1 / -1;
margin: var(--dp-s5) calc(var(--dp-s5) * -1) calc(var(--dp-s5) * -1);
padding: var(--dp-s3) var(--dp-s5);
border-top: 1px solid var(--dp-line);
}
/* Narrow columns cannot hold both — stack, and let the button fill. */
@media (max-width: 900px) {
.woocommerce div.product .dp-buy--noqty { grid-template-columns: 1fr; }
.woocommerce div.product .dp-buy--noqty .dp-buy-price { margin-bottom: var(--dp-s4); }
.woocommerce div.product .dp-buy--noqty form.cart .single_add_to_cart_button {
flex: 1 1 auto; width: 100%; min-width: 0;
}
}
/* WooCommerce puts a clearfix ::before and ::after on form.cart
(content: " "; display: table). Making the form a flex container turns both
into zero-width FLEX ITEMS, and the gap either side of them pushes real
content around: the quantity picker sat 12px right of the price, and the
button 12px shy of the right edge (210 + 2 x 12 = 234). They exist to clear
floats in a layout we do not use, so they can go. */
.woocommerce div.product .dp-buy form.cart::before,
.woocommerce div.product .dp-buy form.cart::after {
display: none;
}
/* Belt and braces: keep the button hugging the right edge whatever the grid
column resolves to. */
.woocommerce div.product .dp-buy--noqty form.cart {
justify-content: flex-end;
}
/* =============================================================
SUMMARY RHYTHM
Each block used to bring its own margins, which mostly collapsed to 24px
— except after .dp-stock. Being inline-flex made it inline-level, so its
bottom margin could not collapse and stacked instead: 16 + 24 = 40px.
That only became visible once the short description was removed from
between them.
One rhythm, declared in one place. Blocks no longer carry their own
vertical margins, so adding or reordering one cannot reopen the gap.
============================================================= */
.woocommerce div.product .summary > * {
margin-top: 0;
margin-bottom: 0;
}
.woocommerce div.product .summary > * + * {
margin-top: var(--dp-s5);
}
/* Stock is a sub-label of the title rather than a section of its own,
so it sits closer than the standard step. */
.woocommerce div.product .summary .dp-stock {
display: flex;
width: fit-content;
margin-top: var(--dp-s3);
}
/* The band bleeds to the panel edges, so its negative margins must track
the panel's padding at every breakpoint. */
@media (max-width: 767px) {
.woocommerce div.product .dp-buy .dp-buy-limit {
margin: var(--dp-s4) calc(var(--dp-s4) * -1) calc(var(--dp-s4) * -1);
padding: var(--dp-s3) var(--dp-s4);
}
}
/* ---- Quantity stepper ----
Replaces the native spinner, which is a ~13px tap target, leaves a white
gap above and below itself, and is absent entirely on iOS and Android.
The group is one bordered unit the same height as the button beside it. */
.woocommerce div.product .dp-buy form.cart .quantity {
display: flex;
align-items: stretch;
background: #fff;
border: 1.5px solid var(--dp-line);
border-radius: var(--dp-r);
overflow: hidden;
transition: border-color var(--dp-fast), box-shadow var(--dp-fast);
}
.woocommerce div.product .dp-buy form.cart .quantity:focus-within {
border-color: var(--dp-purple);
box-shadow: var(--dp-ring);
}
.dp-qty-btn {
flex: 0 0 auto;
width: 44px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--dp-ink-2);
cursor: pointer;
transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-qty-btn:hover:not(:disabled) { background: var(--dp-purple-50); color: var(--dp-purple); }
.dp-qty-btn:active:not(:disabled) { background: var(--dp-purple-100); }
.dp-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.dp-qty-btn:focus-visible { outline: none; background: var(--dp-purple-100); color: var(--dp-purple-700); }
/* The field keeps the border-radius clean by having none of its own. */
.woocommerce div.product .dp-buy form.cart .quantity input.qty {
flex: 0 0 auto;
width: 46px;
min-height: 0;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
.woocommerce div.product .dp-buy form.cart .quantity input.qty:focus {
outline: none;
box-shadow: none;
background: transparent;
}
/* Native spinner gone — the buttons do its job now. */
.woocommerce div.product .dp-buy form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .dp-buy form.cart .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* =============================================================
OFF-CANVAS BASKET
============================================================= */
body.dp-cart-open { overflow: hidden; }
.dp-cart-scrim {
position: fixed; inset: 0; z-index: 110;
background: rgba(27,4,40,.5);
backdrop-filter: blur(2px);
opacity: 0; transition: opacity var(--dp-mid);
}
body.dp-cart-open .dp-cart-scrim { opacity: 1; }
.dp-cart-scrim[hidden] { display: none; }
.dp-cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
width: min(420px, 100vw);
background: #fff;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .3s var(--dp-ease);
box-shadow: -8px 0 40px -12px rgba(27,4,40,.3);
}
body.dp-cart-open .dp-cart-drawer { transform: translateX(0); }
.dp-cart-drawer[hidden] { display: none; }
.dp-cart-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dp-cart-drawer.is-busy .dp-cart-inner { opacity: .55; pointer-events: none; }
/* ---- Head ---- */
.dp-cart-head {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s4);
padding: var(--dp-s5) var(--dp-s5) var(--dp-s4);
border-bottom: 1px solid var(--dp-line);
}
.dp-cart-head h2 {
margin: 0; font-size: var(--dp-t-h4);
display: flex; align-items: center; gap: 10px;
}
.dp-cart-count {
display: inline-grid; place-items: center;
min-width: 24px; height: 24px; padding: 0 8px;
background: var(--dp-purple); color: #fff;
border-radius: var(--dp-r-pill);
font-size: var(--dp-t-xs); font-weight: 800; line-height: 1;
}
.dp-cart-close {
flex: 0 0 auto; width: 38px; height: 38px;
display: grid; place-items: center;
background: var(--dp-surface-3); border: 0; border-radius: 50%;
color: var(--dp-ink); cursor: pointer;
transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-cart-close:hover { background: var(--dp-purple-100); color: var(--dp-purple-700); }
.dp-cart-error {
margin: 0; padding: var(--dp-s3) var(--dp-s5);
background: var(--dp-danger-bg); color: var(--dp-danger);
border-bottom: 1px solid #f6d5d5;
font-size: var(--dp-t-sm); font-weight: 600;
}
/* ---- Free delivery progress ---- */
.dp-cart-progress {
flex: 0 0 auto;
padding: var(--dp-s4) var(--dp-s5);
background: var(--dp-surface-2);
border-bottom: 1px solid var(--dp-line);
}
.dp-cart-progress-text {
display: flex; align-items: center; gap: 9px;
margin: 0 0 10px;
font-size: var(--dp-t-sm); color: var(--dp-ink-2);
}
.dp-cart-progress-text svg { flex: 0 0 auto; color: var(--dp-purple); }
.dp-cart-progress-text strong { color: var(--dp-ink); font-weight: 700; }
.dp-cart-progress-track {
height: 7px; border-radius: 999px; overflow: hidden;
background: var(--dp-purple-100);
}
.dp-cart-progress-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--dp-purple), var(--dp-purple-400));
transition: width .45s var(--dp-ease);
}
.dp-cart-progress.is-qualified { background: var(--dp-green-50); border-bottom-color: var(--dp-green-200); }
.dp-cart-progress.is-qualified .dp-cart-progress-text { color: var(--dp-green-700); }
.dp-cart-progress.is-qualified .dp-cart-progress-text svg,
.dp-cart-progress.is-qualified .dp-cart-progress-text strong { color: var(--dp-green-700); }
.dp-cart-progress.is-qualified .dp-cart-progress-track { background: var(--dp-green-200); }
.dp-cart-progress.is-qualified .dp-cart-progress-fill {
background: linear-gradient(90deg, var(--dp-green-600), var(--dp-green-500));
}
/* ---- Items: the only scrolling region ---- */
.dp-cart-items {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
list-style: none; margin: 0; padding: 0;
-webkit-overflow-scrolling: touch;
}
.dp-cart-item {
display: flex; align-items: flex-start; gap: var(--dp-s4);
padding: var(--dp-s4) var(--dp-s5);
border-bottom: 1px solid var(--dp-line-soft);
position: relative;
}
.dp-cart-item-media {
flex: 0 0 auto; width: 68px; height: 68px;
border-radius: var(--dp-r-sm); overflow: hidden;
background: var(--dp-surface-3);
display: grid; place-items: center;
}
.dp-cart-item-media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dp-cart-item-body { flex: 1 1 auto; min-width: 0; padding-right: var(--dp-s5); }
.dp-cart-item-name {
display: block;
font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
color: var(--dp-ink); line-height: 1.35; text-decoration: none;
}
.dp-cart-item-name:hover { color: var(--dp-purple); }
.dp-cart-item-flag {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 5px;
font-size: 11px; font-weight: 700; color: var(--dp-green-700);
}
.dp-cart-item-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s3);
margin-top: 10px;
}
.dp-cart-qty {
display: flex; align-items: center;
border: 1.5px solid var(--dp-line); border-radius: var(--dp-r-sm);
overflow: hidden; background: #fff;
}
.dp-cart-qty .dp-qty-btn { width: 32px; height: 32px; }
.dp-cart-qty-value {
min-width: 30px; text-align: center;
font-family: var(--dp-font-head); font-size: var(--dp-t-sm); font-weight: 700;
color: var(--dp-ink);
}
.dp-cart-item-price {
font-family: var(--dp-font-head); font-size: var(--dp-t-base); font-weight: 800;
color: var(--dp-ink); white-space: nowrap;
}
.dp-cart-item-remove {
position: absolute; top: var(--dp-s4); right: var(--dp-s4);
width: 26px; height: 26px;
display: grid; place-items: center;
background: transparent; border: 0; border-radius: 50%;
color: var(--dp-ink-4); cursor: pointer;
transition: background var(--dp-fast), color var(--dp-fast);
}
.dp-cart-item-remove:hover { background: var(--dp-danger-bg); color: var(--dp-danger); }
/* ---- Foot ---- */
.dp-cart-foot {
flex: 0 0 auto;
padding: var(--dp-s5);
padding-bottom: calc(var(--dp-s5) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--dp-line);
background: var(--dp-surface-2);
}
.dp-cart-subtotal {
display: flex; align-items: baseline; justify-content: space-between;
font-family: var(--dp-font-head);
}
.dp-cart-subtotal span { font-size: var(--dp-t-sm); font-weight: 700; color: var(--dp-ink-2); }
.dp-cart-subtotal strong { font-size: var(--dp-t-h3); font-weight: 800; color: var(--dp-ink); }
.dp-cart-note { margin: 4px 0 var(--dp-s4); font-size: var(--dp-t-xs); color: var(--dp-ink-3); }
.dp-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-s3); }
.dp-cart-actions .dp-btn { width: 100%; min-height: 50px; padding-inline: var(--dp-s3); }
/* ---- Empty ---- */
.dp-cart-empty {
flex: 1 1 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--dp-s3); padding: var(--dp-s7) var(--dp-s5); text-align: center;
}
.dp-cart-empty-ico {
width: 76px; height: 76px; border-radius: 50%;
display: grid; place-items: center;
background: var(--dp-purple-50); color: var(--dp-purple-300);
margin-bottom: var(--dp-s2);
}
.dp-cart-empty h3 { margin: 0; font-size: var(--dp-t-h4); }
.dp-cart-empty p { margin: 0 0 var(--dp-s4); font-size: var(--dp-t-sm); color: var(--dp-ink-3); max-width: 32ch; }
/* Loading state on the add button while the request is in flight. */
.single_add_to_cart_button.is-loading { opacity: .7; pointer-events: none; }
@media (max-width: 480px) {
.dp-cart-drawer { width: 100vw; }
.dp-cart-head, .dp-cart-progress, .dp-cart-item, .dp-cart-foot { padding-inline: var(--dp-s4); }
}
@media (prefers-reduced-motion: reduce) {
.dp-cart-drawer, .dp-cart-scrim, .dp-cart-progress-fill { transition: none; }
}
/* WooCommerce appends a "View basket" link after an AJAX add. The basket
drawer already slides open at that moment, so it is redundant — and it
renders outside the card, flush left, knocking the row of tiles out of
alignment. */
.woocommerce ul.products li.product .added_to_cart { display: none; }
/* The tick WooCommerce adds sits after the label; a little breathing room
stops it touching the text. */
.woocommerce ul.products li.product .button.added::after { margin-left: 6px; }
/* =============================================================
SHOP TILE FIXES
============================================================= */
/* 1. Sale badge was clipped.
WooCommerce pins it with margin:-6px -6px 0 0 to hang outside the tile —
which the tile's own overflow:hidden then cut off, losing 5px of each edge.
Its selector is more specific than the one used earlier, so this one matches
it exactly to win. */
.woocommerce ul.products li.product .onsale {
top: var(--dp-s3);
right: var(--dp-s3);
left: auto;
margin: 0;
}
/* 2. One button style. "View product" was outlined as a secondary action, but
sitting beside solid buttons in the same grid it read as a different class
of control rather than a deliberate demotion. */
.woocommerce ul.products li.product .dp-pmed-view {
background: var(--dp-purple) !important;
color: #fff !important;
border: 0 !important;
}
.woocommerce ul.products li.product .dp-pmed-view:hover {
background: var(--dp-purple-600) !important;
color: #fff !important;
}
/* Caption under the button on P medicines; the same slot, invisible, on
every other tile so buttons sit level across a row. */
.woocommerce ul.products li.product .dp-loop-check {
display: block; text-align: center; font-size: var(--dp-t-xs); line-height: 1.3; color: var(--dp-ink-3);
margin: calc(-1 * var(--dp-s4) + 6px) var(--dp-s4) var(--dp-s4);
}
.woocommerce ul.products li.product .dp-loop-check.is-blank { visibility: hidden; }
/* 3. The title sat flush against the image with no separation at all. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding-top: var(--dp-s4);
}
/* 4. Buttons across a row sat at different heights whenever a title wrapped to
two lines. Two causes: the title height varied, and the margin-top:auto
meant to push the price down was being beaten by WooCommerce's own rule.
Titles are now clamped to a fixed two lines, and the auto margin is applied
at matching specificity so the price and button anchor to the bottom. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
display: -webkit-box !important; /* a later flow-root rule was defeating the clamp */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* Exactly two lines plus the padding above — a one-line title reserves
the same space as a two-line one, and a third line can never peek out. */
height: calc(1.4em * 2 + var(--dp-s4));
}
.woocommerce ul.products li.product .dp-loop-brand + .woocommerce-loop-product__title { height: calc(1.4em * 2 + 2px); }
/* The auto margin has to sit on the BUTTON, not the price: WooCommerce wraps
the image, title and price in an , so the price is not a flex child of
the tile and an auto margin there does nothing at all. The button is a
direct child, so this genuinely anchors it to the bottom. */
.woocommerce ul.products li.product .button {
margin-top: auto;
}
/* 5. The sorting dropdown was raw browser chrome — Arial, 19px tall, a grey
system border. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
appearance: none;
-webkit-appearance: none;
padding: 11px 42px 11px 16px;
font-family: var(--dp-font-head);
font-size: var(--dp-t-sm);
font-weight: 700;
color: var(--dp-ink);
background-color: #fff;
border: 1.5px solid var(--dp-line);
border-radius: var(--dp-r-pill);
cursor: pointer;
line-height: 1.2;
transition: border-color var(--dp-fast), box-shadow var(--dp-fast);
/* Chevron drawn inline so it needs no extra request and inherits nothing
from the system control. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6377' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--dp-purple-200); }
.woocommerce .woocommerce-ordering select:focus {
outline: none;
border-color: var(--dp-purple);
box-shadow: var(--dp-ring);
}
/* The sorting form floats right, so it does not push the grid down — zeroing
its margin left the select sitting directly on the first row of products.
Both halves of the header get the same bottom margin, and the grid clears
the float so it can never ride up beside it. */
.woocommerce .woocommerce-ordering {
margin: 0 0 var(--dp-s6);
}
.woocommerce .woocommerce-result-count {
margin: 0 0 var(--dp-s6);
font-size: var(--dp-t-sm);
color: var(--dp-ink-3);
/* Centres the count against the 42px select beside it rather than letting
it sit on the float's top edge. */
line-height: 42px;
}
.woocommerce ul.products { clear: both; }
/* Stacked on mobile, so the count no longer needs centring against the select
— that 42px line-height just becomes dead space. The select goes full width
rather than floating right and stranding an empty half-row beside it. */
@media (max-width: 767px) {
.woocommerce .woocommerce-result-count {
line-height: 1.5;
margin-bottom: var(--dp-s4);
}
.woocommerce .woocommerce-ordering {
float: none;
width: 100%;
margin-bottom: var(--dp-s5);
}
.woocommerce .woocommerce-ordering select { width: 100%; }
}
/* The Cart and Checkout blocks print each product's description on its line —
falling back to the full description when there is no short one. In a basket
the shopper has already chosen; the name, price and quantity are what they
are checking. Descriptions push the actionable parts down and, once the real
catalogue lands, would run to several lines per item.
Covers the basket, the checkout order summary and the mini-basket. */
.wc-block-components-product-metadata__description { display: none; }
/* ==========================================================================
Checkout
One job, one column, nothing else competing for attention.
========================================================================== */
/* --- Stripped chrome ----------------------------------------------------- */
.dp-co-header {
border-bottom: 1px solid var(--dp-line);
background: var(--dp-surface);
}
.dp-co-header-inner {
/* Same edge as the title, the form and the footer — one column of
alignment down the whole page. */
max-width: calc(1040px + 2 * var(--dp-gutter));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dp-s5);
padding-block: var(--dp-s4);
}
.dp-co-brand img {
display: block;
width: auto;
height: 34px;
}
.dp-co-header-aside {
display: flex;
align-items: center;
gap: var(--dp-s5);
}
.dp-co-phone,
.dp-co-back {
display: inline-flex;
align-items: center;
gap: var(--dp-s2);
font-size: var(--dp-t-sm);
font-weight: 600;
text-decoration: none;
color: var(--dp-ink-2);
}
.dp-co-phone:hover,
.dp-co-back:hover { color: var(--dp-purple-700); }
.dp-co-phone svg,
.dp-co-back svg { width: 16px; height: 16px; flex: none; }
.dp-co-footer {
margin-top: var(--dp-s8);
border-top: 1px solid var(--dp-line);
background: var(--dp-surface-2);
}
.dp-co-footer-inner {
max-width: calc(1040px + 2 * var(--dp-gutter));
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--dp-s5);
flex-wrap: wrap;
padding-block: var(--dp-s5);
}
.dp-co-reg {
font-size: var(--dp-t-xs);
line-height: var(--dp-lh-base);
color: var(--dp-ink-3);
max-width: 58ch;
}
.dp-co-reg b { color: var(--dp-ink-2); font-weight: 600; }
.dp-co-policies {
display: flex;
gap: var(--dp-s5);
flex-wrap: wrap;
font-size: var(--dp-t-xs);
}
.dp-co-policies a { color: var(--dp-ink-2); }
.dp-co-phone span,
.dp-co-back span { white-space: nowrap; }
.dp-co-back-short { display: none; }
@media (max-width: 640px) {
.dp-co-header-inner { padding-block: var(--dp-s3); }
.dp-co-brand img { height: 28px; }
.dp-co-header-aside { gap: var(--dp-s4); }
.dp-co-phone span { display: none; }
.dp-co-back-long { display: none; }
.dp-co-back-short { display: inline; }
.dp-co-footer-inner { flex-direction: column; gap: var(--dp-s4); }
}
/* --- The form ------------------------------------------------------------ */
/*
* 764px of form gave 711px-wide inputs — a postcode field as wide as a
* paragraph. Capping the whole block narrows the form column to ~590px while
* leaving the sidebar its width; fields then sit near the ~500px that reads as
* a checkout rather than a database screen.
*/
.dp-checkout-page .wc-block-checkout {
max-width: 1040px;
margin-inline: auto;
/* The section above already sets the gap under the title; the block's own
24px stacked on top of it. */
padding-top: 0;
}
/*
* The visible "Checkout" title is redundant — the logo, the stripped chrome
* and the form itself already say where you are, and on a page with one job
* the job should be the loudest thing.
*
* It is HIDDEN, not deleted. It is the page's only h1, and that is what a
* screen reader announces on arrival; removing it would leave the checkout
* with no heading in the document at all. The page title also stays untouched
* in WordPress, where wp-admin, the browser tab and WooCommerce all rely on it.
*/
.dp-checkout-page .dp-page-head { padding: 0; }
/* With no visible title the form would start hard against the header rule.
Declared after the mobile block above, so the narrow-screen override that
follows has to come later still to win. */
.dp-checkout-page .dp-page-head + .dp-wrap.dp-section { padding-top: var(--dp-s7); }
@media (max-width: 640px) {
.dp-checkout-page .dp-page-head + .dp-wrap.dp-section { padding-top: var(--dp-s5); }
}
.dp-checkout-page .dp-page-head h1 {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Section headings: quieter than the page title, clearly separated. */
.dp-checkout-page .wc-block-components-title {
font-family: var(--dp-font-head);
font-size: var(--dp-t-lg);
letter-spacing: var(--dp-ls-head);
}
/* Woo's own step spacing is uneven once the nav is gone. */
.dp-checkout-page .wc-block-components-checkout-step {
padding-bottom: var(--dp-s6);
}
/* Focus has to be obvious when the page is this quiet. */
.dp-checkout-page .wc-block-components-text-input input:focus,
.dp-checkout-page .wc-block-components-country-input select:focus,
.dp-checkout-page .wc-block-components-state-input select:focus {
outline: 2px solid var(--dp-purple-500);
outline-offset: 1px;
}
/* The one button that matters. */
.dp-checkout-page .wc-block-components-checkout-place-order-button {
min-height: 56px;
font-size: var(--dp-t-base);
font-weight: 700;
letter-spacing: var(--dp-ls-tight);
}
/* Order summary reads as a panel, not a floating list. */
.dp-checkout-page .wc-block-components-sidebar .wc-block-components-totals-wrapper {
border-color: var(--dp-line);
}
/*
* Express payment (Apple Pay / Google Pay) sits above the form when a gateway
* that offers it is active. Nothing renders here until then — the rule is
* ready so the buttons land correctly rather than being bolted on later.
*/
.dp-checkout-page .wp-block-woocommerce-checkout-express-payment-block {
margin-bottom: var(--dp-s5);
padding-bottom: var(--dp-s5);
border-bottom: 1px solid var(--dp-line);
}
/* --- Checkout, second pass: closer to the Shopify split ------------------ */
/*
* 1. The summary column reads as a grey band running off the right edge of the
* page, not as a bordered card floating in white.
*
* The band cannot live on the sidebar — that element is sticky, so its
* background would scroll away with it. It is painted on the , which
* spans the LAYOUT width. That matters: an earlier attempt anchored it with
* calc(50% - 50vw), and vw includes the scrollbar while the layout does not,
* so the band stopped ~8px short of the edge. Anchoring right:0 to the article
* has no such gap.
*
* The split is derived rather than hardcoded. With block width B centred in
* article width W, the summary starts at W/2 + 0.15B — because the form is 65%
* of the block, so the offset from centre is 0.65B - B/2 = 0.15B. B is the
* block's own cap, min(1040px, W - gutters), so the band stays correct at
* every width instead of only at the 1040px cap.
*/
@media (min-width: 1080px) {
.dp-checkout-page article {
position: relative;
}
.dp-checkout-page article::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: calc(50% + 0.15 * min(1040px, 100% - 2 * var(--dp-gutter)));
background: var(--dp-surface-3);
border-left: 1px solid var(--dp-line);
z-index: 0;
}
/* Keep the real content above the band. */
.dp-checkout-page article > * {
position: relative;
z-index: 1;
}
/* More room between the form and the summary now that grey separates them. */
.dp-checkout-page .wc-block-checkout__sidebar {
padding-left: var(--dp-s6);
}
/* The card border is redundant once the column itself is the container. */
.dp-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
border: 0;
border-radius: 0;
}
}
/* 2. Tighter rhythm between Contact / Shipping / Delivery / Payment. */
.dp-checkout-page .wc-block-components-checkout-step {
padding-bottom: var(--dp-s4);
}
/* 3. Inputs: lighter border, softer corners.
*
* WooCommerce ships color-mix(in srgb, currentcolor 80%, transparent) — far
* darker than any other border on the site. --dp-line is the hairline used
* everywhere else.
*
* SPECIFICITY, deliberately: Woo's selector is
* .wc-block-components-form .wc-block-components-text-input input[type="email"]
* which is (0,3,1). A .dp-checkout-page prefix alone is only (0,2,1) and loses
* silently — the rule appears in the stylesheet and does nothing. Leading with
* body.dp-checkout-page makes this (0,3,2), which wins outright rather than
* depending on which stylesheet happens to load last.
*/
body.dp-checkout-page .wc-block-components-form .wc-block-components-text-input input,
body.dp-checkout-page .wc-block-components-form .wc-block-components-textarea,
body.dp-checkout-page .wc-block-components-form .wc-block-components-combobox-control input,
body.dp-checkout-page .wc-block-components-form .wc-block-components-select .wc-blocks-components-select__select,
body.dp-checkout-page .wc-block-components-form select,
body.dp-checkout-page .wc-blocks-components-select__container {
border-color: var(--dp-line);
/* --dp-r-md (14px) reads rounder than Shopify's ~5-8px; --dp-r sits between
that and WooCommerce's default 4px without leaving the theme's scale. */
border-radius: var(--dp-r);
}
body.dp-checkout-page .wc-block-components-radio-control-accordion-option,
body.dp-checkout-page .wc-block-components-radio-control__option {
border-radius: var(--dp-r);
}
/*
* Font size drops on desktop only. Below 16px, iOS Safari zooms the viewport
* when a field takes focus — which throws the whole layout sideways mid-form.
* Mobile keeps 16px for that reason, not by oversight.
*/
@media (min-width: 768px) {
body.dp-checkout-page .wc-block-components-form .wc-block-components-text-input input,
body.dp-checkout-page .wc-block-components-form .wc-block-components-combobox-control input,
body.dp-checkout-page .wc-block-components-form select,
body.dp-checkout-page .wc-blocks-components-select__select {
font-size: 15px;
}
}
/* --- Checkout, third pass ------------------------------------------------ */
/*
* 2. The checkout footer carried margin-top: 64px, which sits OUTSIDE the
* — so it fell outside the grey band and read as a full-width
* white strip between the summary column and the footer. The section
* already provides ~87px of padding inside the article, so the footer sits
* flush and the band runs all the way down to it.
*/
.dp-checkout-page .dp-co-footer {
margin-top: 0;
}
/*
* 3. Brand colour on the controls.
*
* accent-color cannot be used: WooCommerce sets appearance:none and draws both
* controls itself — the radio dot is a ::before, and the checkbox tick is a
* separate