/* ==========================================================================
   Cleandosis — woo.css
   Shop archive, single product, cart drawer overflow, the WooCommerce block
   cart and checkout, My Account, forms and notices.

   A handful of rules below carry !important. Every one of them is there to
   beat a WooCommerce Blocks stylesheet, which ships high-specificity rules
   (and its own CSS custom properties) that a theme cannot otherwise reach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Archive
   -------------------------------------------------------------------------- */
.cd-archive {
	padding: 42px 0 72px;
}

.cd-archive__head {
	margin-bottom: 28px;
	max-width: 60ch;
}

.cd-archive__title {
	font-size: clamp(32px, 4.4vw, 42px);
	line-height: 1.1;
	margin: 0 0 var(--space-3);
}

.cd-archive__desc {
	font-size: 16px;
	line-height: 26px;
	color: var(--color-neutral-800);
}

.cd-archive__desc p:last-child { margin-bottom: 0; }

.cd-archive__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px 20px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-top: 1px solid var(--color-divider);
	margin-bottom: 20px;
}

.cd-archive__count,
.cd-archive__count p,
.woocommerce-result-count {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
}

.cd-archive__sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cd-archive__sort select {
	width: auto;
	min-width: 180px;
	border-radius: 999px;
	padding-inline: 16px 30px;
	background-color: var(--color-surface);
}

.cd-archive .cd-pagination { margin-top: 42px; }

/* --------------------------------------------------------------------------
   2. Single product
   -------------------------------------------------------------------------- */
/* Two even columns: at 1250px that puts the gallery at about 47% of the content
   width, and gives the right column — which now carries the summary AND the
   medicine information tabs — the rest to read in. */
.cd-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 42px clamp(28px, 4vw, 56px);
	align-items: start;
	padding: 14px 0 0;
}

.cd-product__gallery { position: relative; min-width: 0; }

.cd-product__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.cd-product__gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.cd-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.cd-product__gallery .flex-control-thumbs li {
	width: 76px;
	margin: 0;
	list-style: none;
}

.cd-product__gallery .flex-control-thumbs img {
	border-radius: var(--radius-md);
	cursor: pointer;
	opacity: .62;
	transition: opacity .18s ease;
	background: var(--color-surface);
}

.cd-product__gallery .flex-control-thumbs img.flex-active,
.cd-product__gallery .flex-control-thumbs img:hover { opacity: 1; }

.cd-product__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	font-size: 15px;
	text-decoration: none;
}

.cd-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.cd-product__kicker {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.cd-product__title {
	font-size: clamp(30px, 3.6vw, 42px);
	line-height: 1.1;
	margin: 0;
}

.cd-product__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--color-neutral-700);
}

.cd-product__rating-link { color: var(--color-neutral-700); }

.cd-product__excerpt {
	font-size: 16.5px;
	line-height: 26px;
	color: var(--color-neutral-800);
}

.cd-product__excerpt p:last-child { margin-bottom: 0; }

.cd-product__price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.2;
}

.cd-product__price del {
	font-size: 18px;
	font-weight: 400;
	opacity: .55;
}

.cd-product__price ins {
	text-decoration: none;
}

.cd-product__price .cd-tag { align-self: center; }

/* Prescription panel */
.cd-product__rx {
	display: flex;
	gap: 14px;
	padding: 18px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.cd-product__rx-icon {
	flex: none;
	color: var(--color-accent-700);
	line-height: 0;
	padding-top: 2px;
}

.cd-product__rx-copy strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 17px;
	margin-bottom: 6px;
}

.cd-product__rx-copy p {
	margin: 0 0 var(--space-3);
	font-size: 14px;
	line-height: 21px;
}

.cd-product__rx-copy p:last-of-type { margin-bottom: 0; }

/* The pharmacist-review sentence sits quieter than the notice above it. */
.cd-product__rx-copy .cd-product__rx-pharm {
	margin-top: var(--space-2);
	font-size: 13.5px;
	line-height: 20px;
	color: var(--color-accent-800);
}

.cd-product__rx-copy .cd-btn { margin: var(--space-3) 0 0; }

/* A quiet link, not a call to action — the buy box below is the action now. */
.cd-product__rx-link {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-accent-800);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.cd-product__rx-link:hover { color: var(--color-accent-900); }

/* WooCommerce appends its own "View cart" link beside a button once something
   has been added (wc-add-to-cart.js, on the added_to_cart event cart.js fires).
   The drawer that just opened already carries View cart and Checkout, so the
   extra link is only noise — and inside a card it reflows the grid. */
.added_to_cart { display: none; }

/* --------------------------------------------------------------------------
   The prescription notice wherever a cart is shown: the drawer, the cart page
   and the checkout. Self-contained so it does not depend on contact.css, which
   only loads on the contact page.
   -------------------------------------------------------------------------- */
.cd-note.cd-note--rx {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--color-accent-300, var(--color-divider));
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	font-size: 13.5px;
	line-height: 20px;
}

.cd-note--rx .cd-note__icon {
	flex: none;
	line-height: 0;
	padding-top: 1px;
	color: var(--color-accent-700);
}

.cd-note--rx .cd-note__text { min-width: 0; }

/* In the drawer it is a slim line under the items, above the totals. */
.cd-note.cd-note--drawer {
	margin: 4px 18px 16px;
	font-size: 13px;
	line-height: 19px;
	padding: 10px 12px;
}

/* On the cart / checkout pages it opens the page, above the block. */
.cd-note.cd-note--cart {
	margin: 0 0 var(--space-4);
	font-size: 14.5px;
	line-height: 22px;
}

/* Add-to-cart row */
.cd-product__summary form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.cd-product__summary form.cart.variations_form {
	display: block;
}

.cd-product__summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

.cd-product__summary .single_add_to_cart_button:hover { background: var(--color-accent-600); }
.cd-product__summary .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }

.cd-product__summary .stock {
	margin: 0;
	font-size: 13px;
	color: var(--color-neutral-700);
	flex-basis: 100%;
}

.cd-product__summary .stock.out-of-stock { color: var(--color-accent-2-800); }

/* Variations */
.cd-product__summary .variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-3);
}

.cd-product__summary .variations th,
.cd-product__summary .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.cd-product__summary .variations th {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	padding-top: var(--space-3);
	padding-bottom: 5px;
	white-space: normal;
}

.cd-product__summary .variations select {
	width: 100%;
	min-height: 42px;
	padding: 8px 30px 8px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 999px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 17px center, right 12px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* The "Clear" link is noise next to a select that always has a value.
   !important because WooCommerce's add-to-cart-variation.js calls jQuery
   .show() on it, which writes an inline `display:inline` that would otherwise
   win. */
.cd-product__summary .reset_variations { display: none !important; }

.cd-product__summary .woocommerce-variation-price {
	margin: var(--space-3) 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
}

.cd-product__summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Trust badges and meta

   Four cards, two to a row at every width — the row of monochrome press seals
   this replaces read as decoration and wrapped into a ragged three. */
.cd-product__seals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--color-divider);
}

.cd-badge {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	padding: 12px;
	background: var(--color-accent-100);
	border: 1px solid var(--color-accent-200);
	border-radius: 12px;
}

.cd-badge__disc {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
}

.cd-badge__text {
	display: grid;
	grid-template-rows: minmax(36px, auto) auto; /* label row reserves two lines so every sub-line starts on the same baseline */
	align-content: start;
	gap: 2px;
	min-width: 0;
}

@media (min-width: 761px) {
	.cd-badge__text { grid-template-rows: minmax(18px, auto) auto; }
	.cd-badge__label { white-space: nowrap; }
}

/* Long words break rather than push the card out of its column at 360px. */
.cd-badge__label,
.cd-badge__sub { overflow-wrap: break-word; }

.cd-badge__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	color: var(--color-accent-900);
}

.cd-badge__sub {
	font-size: 12.5px;
	line-height: 17px;
	color: var(--color-neutral-700);
}

.cd-product__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--color-neutral-700);
}

.cd-product__meta-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cd-product__meta-key {
	min-width: 78px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11px;
	padding-top: 2px;
}

.cd-product__meta-val a { color: var(--color-neutral-800); }

/* --------------------------------------------------------------------------
   3. Accordion, related products, reviews
   -------------------------------------------------------------------------- */
/* Only related products live here now — the medicine information moved up into
   the summary column — so the top padding is the gap under the grid, no more. */
.cd-product__after { padding: 14px 0 72px; }

.cd-acc-group {
	max-width: 860px;
	border-top: 1px solid var(--color-divider);
}

.cd-acc { border-bottom: 1px solid var(--color-divider); }

.cd-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 19px;
}

.cd-acc__head::-webkit-details-marker { display: none; }

.cd-acc__chev {
	line-height: 0;
	color: var(--color-neutral-700);
	transition: transform .2s ease;
}

.cd-acc[open] .cd-acc__chev { transform: rotate(180deg); }

.cd-acc__body {
	padding: 0 0 24px;
	font-size: 15px;
	line-height: 25px;
}

.cd-acc__body > *:last-child { margin-bottom: 0; }

.cd-acc__body h2 { font-size: 22px; }
.cd-acc__body h3 { font-size: 18px; }

.cd-acc__body table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cd-acc__body table.shop_attributes th,
.cd-acc__body table.shop_attributes td {
	padding: var(--space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
	text-align: left;
	vertical-align: top;
}

.cd-acc__body table.shop_attributes th {
	width: 32%;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	font-weight: 400;
}

.cd-acc__body table.shop_attributes p { margin: 0; }

section.related,
section.up-sells,
.cd-related {
	padding: 42px 0 0;
}

section.related > h2,
section.up-sells > h2,
.cd-related > h2 {
	font-size: 26px;
	margin-bottom: 24px;
}

/* Reviews (the WooCommerce tab panel only — the home page's #reviews section must not inherit this cap) */
#reviews.woocommerce-Reviews { max-width: 860px; }

#reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

#reviews .commentlist li {
	padding: 20px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
	list-style: none;
}

#reviews .comment_container {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

#reviews .comment_container img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
}

#reviews .comment-text { min-width: 0; flex: 1; }

#reviews .woocommerce-review__author {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
}

#reviews .woocommerce-review__published-date,
#reviews .woocommerce-review__dash {
	font-size: 13px;
	color: var(--color-neutral-700);
}

#reviews .description { margin-top: 8px; }
#reviews .description p:last-child { margin-bottom: 0; }

/* WooCommerce draws its stars with the bundled "star" webfont, which arrives in
   woocommerce-general.css — a stylesheet this theme drops. Redraw them with
   plain glyphs so the markup WooCommerce prints still reads as stars. */
.star-rating,
.woocommerce .star-rating {
	position: relative;
	display: inline-block;
	width: 5.6em;
	height: 1.2em;
	overflow: hidden;
	white-space: nowrap;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-accent-700);
}

.star-rating::before,
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 0.08em;
}

.star-rating::before { opacity: .28; }

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
}

.star-rating .rating,
.woocommerce-review__awaiting-approval { font-size: 13px; }

p.stars a {
	position: relative;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-right: 2px;
	text-indent: -999em;
	overflow: hidden;
	color: var(--color-accent-700);
}

p.stars a::before {
	content: "\2605";
	position: absolute;
	inset: 0;
	text-indent: 0;
	text-align: center;
	opacity: .3;
}

p.stars a:hover::before,
p.stars a.active::before,
p.stars a.selected::before { opacity: 1; }

#review_form_wrapper {
	padding-top: var(--space-4);
}

#review_form .comment-form,
#review_form form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

#review_form .comment-form-rating p.stars a { color: var(--color-accent-700); }

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
	width: 100%;
	padding: 8px 10px;
	font: inherit;
	font-size: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

#review_form textarea { min-height: 120px; resize: vertical; }

#review_form .submit {
	align-self: flex-start;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Product information tabs (single product)

   An underline tab bar on a surface strip, one panel at a time, and a single
   indicator that slides between the tabs. Bar and panels live in
   .cd-tabs__wrap, so the bar stays stuck for exactly as long as there is a
   panel under it — and it sits below the site header, whose rendered height
   theme.js publishes as --cd-header-h (0 while the header is hidden or not
   sticky).
   -------------------------------------------------------------------------- */

/* Breadcrumbs — quiet, above the product. Rank Math's own markup is styled too. */
.cd-crumbs {
	padding: 18px 0 0;
	font-size: 12.5px;
	line-height: 20px;
	color: var(--color-neutral-700);
}

.cd-crumbs p,
.cd-crumbs nav { margin: 0; }

.cd-crumbs a {
	color: var(--color-neutral-700);
	text-decoration: none;
}

.cd-crumbs a:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
}

.cd-crumbs .cd-crumbs__sep,
.cd-crumbs .separator {
	padding: 0 6px;
	color: var(--color-neutral-500);
}

.cd-product__imgnote {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-neutral-700);
}

/* -- The tab bar ---------------------------------------------------------- */
.cd-tabs__wrap {
	max-width: 860px;
	margin-top: var(--space-6);
	scroll-margin-top: calc(var(--cd-header-h) + 16px);
}

.cd-tabs__kicker {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-neutral-700);
}

/* The strip sticks, not the scroller inside it: the fade and the divider have
   to stay put while the tabs scroll under them. Offset by whatever the header
   currently occupies (0 while it is hidden, or when it is not sticky). */
.cd-tabs__strip {
	position: sticky;
	top: var(--cd-header-h);
	z-index: 20;
	/* Full-bleed strip: the wrap sits at the content column's left edge, so pull the strip left by
	   exactly that offset, make it viewport-wide, and pad the tabs back to the column. */
	--cd-edge: calc(max(0px, (100vw - var(--cd-max)) / 2) + var(--cd-pad));
	margin-left: calc(-1 * var(--cd-edge));
	width: 100vw;
	padding-inline: var(--cd-edge);
	box-sizing: border-box;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-divider);
	transition: top .25s ease;
}

.cd-tabs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cd-tabs::-webkit-scrollbar { display: none; }

.cd-tabs__tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 14px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-neutral-700);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease;
}

.cd-tabs__tab:hover { color: var(--color-text); }

.cd-tabs__tab[aria-selected="true"] { color: var(--color-accent-800); }

.cd-tabs__tab:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -4px;
	border-radius: 8px;
}

.cd-tabs__ico {
	display: flex;
	line-height: 0;
	opacity: .75;
}

.cd-tabs__tab[aria-selected="true"] .cd-tabs__ico { opacity: 1; }

/* Without JavaScript the selected tab underlines itself; theme.js adds .has-js
   the moment it takes over and the sliding indicator does the job instead. */
.cd-tabs__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--color-accent); }
.cd-tabs.has-js .cd-tabs__tab[aria-selected="true"] { box-shadow: none; }

/* theme.js writes width and translateX; the transition waits for .is-ready so
   the first placement does not slide in from the left edge. */
.cd-tabs__indicator {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--color-accent);
	pointer-events: none;
}

.cd-tabs.is-ready .cd-tabs__indicator {
	transition: transform .25s ease, width .25s ease;
}

/* Right-edge hint that the bar scrolls. Only theme.js knows whether it does,
   so the fade is invisible until .has-js appears, and goes again once the bar
   is at its end (or was never scrollable) and theme.js adds .is-end. */
.cd-tabs__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--color-surface) 0%, transparent),
		var(--color-surface) 78%
	);
}

.cd-tabs.has-js ~ .cd-tabs__fade { opacity: 1; }
.cd-tabs.has-js ~ .cd-tabs__fade.is-end { opacity: 0; }

/* -- The panels ----------------------------------------------------------- */
.cd-tabs__panel {
	padding: var(--space-6) 0 0;
	scroll-margin-top: calc(var(--cd-header-h) + 64px);
	animation: cd-tab-in 180ms ease-out both;
}

.cd-tabs__panel:focus { outline: none; }

/* A panel that comes back from `hidden` leaves display:none, which restarts
   this — so switching tabs is a short crossfade with no JavaScript. */
@keyframes cd-tab-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cd-tabs__panel { animation: none; }
	.cd-tabs.is-ready .cd-tabs__indicator { transition: none; }
	.cd-tabs__fade { transition: none; }
}

/* Sections inside a panel: the panel owns the spacing now. */
.cd-medinfo__sec {
	scroll-margin-top: calc(var(--cd-header-h) + 64px);
}

.cd-medinfo__title {
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

.cd-medinfo__subtitle {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-neutral-700);
	margin: var(--space-4) 0 var(--space-2);
}

.cd-medinfo__intro {
	margin: 0 0 var(--space-3);
	font-size: 15.5px;
	line-height: 25px;
	color: var(--color-neutral-800);
	max-width: 66ch;
}

.cd-medinfo__note {
	margin: var(--space-3) 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-neutral-700);
	max-width: 66ch;
}

/* Uses — the trust checklist, compact. */
.cd-medinfo__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	line-height: 23px;
}

.cd-medinfo__checks li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
}

.cd-medinfo__check {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	border-radius: 50%;
	border: 1.25px solid var(--color-accent-700);
	background: color-mix(in srgb, var(--color-accent-700) 15%, transparent);
	color: var(--color-accent-700);
}

/* How to use — a numbered list, then the two small cards. */
.cd-medinfo__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cd-medinfo__step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.cd-medinfo__num {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--color-accent-100);
	color: var(--color-accent-800);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
}

.cd-medinfo__step-text {
	font-size: 15px;
	line-height: 23px;
	color: var(--color-neutral-900);
}

.cd-medinfo__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.cd-medinfo__card {
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.cd-medinfo__card-title {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 20px;
}

.cd-medinfo__card p {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-neutral-800);
}

/* Side effects — common as small tags in one wrapped row. */
.cd-medinfo__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cd-medinfo__tags li {
	margin: 0;
	font-size: 12.5px;
	padding: 4px 10px;
	/* neutral-100 is a shade off the page ground and reads as nothing here. */
	background: var(--color-surface);
	color: var(--color-neutral-900);
}

.cd-medinfo__panel {
	margin-top: var(--space-3);
	padding: 14px 16px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.cd-medinfo__panel .cd-medinfo__subtitle {
	margin-top: 0;
	color: inherit;
}

.cd-medinfo__serious {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	line-height: 22px;
}

.cd-medinfo__serious li {
	position: relative;
	margin: 0;
	padding-left: 15px;
}

.cd-medinfo__serious li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-accent-700);
}

/* Warnings — a plain list with the shield, no box. */
.cd-medinfo__warn {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cd-medinfo__warn li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 22px;
}

.cd-medinfo__warn-icon {
	flex: none;
	line-height: 0;
	margin-top: 3px;
	color: var(--color-accent-700);
}

/* FAQs — every question, as an accordion with the first one open. */
.cd-medinfo__faqs .cd-acc__head { padding: 12px 0; font-size: 16px; }
.cd-medinfo__faqs .cd-acc__body { padding-bottom: 16px; font-size: 14.5px; line-height: 23px; }

.cd-faq__q {
	flex: 1;
	margin: 0;
	font-size: inherit;
	line-height: 24px;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* Pack details — a two-column definition list. */
.cd-packdl {
	margin: 0;
	max-width: 640px;
	font-size: 14.5px;
	line-height: 23px;
}

.cd-packdl__row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 8px var(--space-3);
	padding: 10px 0;
	border-bottom: 1px solid var(--color-divider);
}

.cd-packdl__row:last-child { border-bottom: 0; }

.cd-packdl__key {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	padding-top: 3px;
}

.cd-packdl__val {
	margin: 0;
	min-width: 0;
	/* The pack table scrolls inside its own row rather than widening the page. */
	overflow-x: auto;
}

.cd-packs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cd-packs th,
.cd-packs td {
	padding: 6px 10px 6px 0;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cd-packs thead th {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
}

.cd-packs tbody tr:last-child th,
.cd-packs tbody tr:last-child td { border-bottom: 0; }

.cd-packs td { white-space: nowrap; }

/* Reviews live in their own panel now, not in an accordion. */
.cd-tabs__panel #reviews { max-width: none; }

.cd-tabs__panel .woocommerce-Reviews-title,
.cd-tabs__panel #reviews h2 {
	font-size: 22px;
	line-height: 1.2;
}

/* The closing note, under the panels. */
.cd-medinfo__disclaimer {
	max-width: 860px;
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-divider);
	font-size: 12.5px;
	line-height: 20px;
	color: var(--color-neutral-700);
}

.cd-medinfo__review { color: var(--color-neutral-800); }
.cd-medinfo__review.is-reviewed { color: var(--color-accent-700); }

@media (max-width: 760px) {
	/* The bar scrolls; snap points stop it between tabs. */
	.cd-tabs {
		gap: 0;
		padding: 0 2px;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 12px;
	}

	.cd-tabs__tab {
		font-size: 14px;
		padding: 12px 11px;
		gap: 6px;
		scroll-snap-align: center;
	}

	.cd-tabs__kicker { margin-bottom: 8px; }
	.cd-tabs__fade { width: 40px; }

	.cd-tabs__panel,
	.cd-medinfo__sec {
		scroll-margin-top: calc(var(--cd-header-h) + 56px);
	}

	.cd-tabs__panel { padding-top: var(--space-4); }
	.cd-medinfo__step-text { font-size: 14.5px; line-height: 22px; }
	.cd-medinfo__intro { font-size: 15px; line-height: 24px; }
	.cd-medinfo__checks { font-size: 14.5px; line-height: 23px; }
	.cd-packdl__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.cd-packdl__key { padding-top: 0; }
}


/* --------------------------------------------------------------------------
   5. Notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 var(--space-4);
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	line-height: 22px;
	list-style: none;
}

.woocommerce-message { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.woocommerce-info { background: var(--color-accent-100); color: var(--color-accent-900); }
.woocommerce-error { background: color-mix(in srgb, #b3261e 12%, var(--color-bg)); color: #7a1811; }

.woocommerce-error li { list-style: none; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}

.woocommerce-store-notice,
p.demo_store {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	margin: 0;
	padding: 12px var(--cd-pad);
	background: var(--color-text);
	color: var(--color-bg);
	font-size: 13px;
	text-align: center;
}

.woocommerce-store-notice a { color: var(--color-accent-300); }

/* --------------------------------------------------------------------------
   6. Classic forms (login, register, address, checkout fallback)
   -------------------------------------------------------------------------- */
.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 var(--space-3);
}

.woocommerce form .form-row label {
	font-size: 12px;
	color: var(--color-neutral-800);
}

.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,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-md);
}

.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible {
	border-color: var(--color-accent);
	outline-offset: 0;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce-EditAccountForm {
	max-width: 460px;
	padding: 24px;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.woocommerce form .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce form .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--color-accent-600);
	color: var(--color-bg);
	text-decoration: none;
}

.woocommerce .button.alt { background: var(--color-accent); }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: var(--space-4);
}

.woocommerce table.shop_table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	font-weight: 400;
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
}

.woocommerce table.shop_table td {
	padding: var(--space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* --------------------------------------------------------------------------
   7. My Account
   -------------------------------------------------------------------------- */
/* /my-account/ renders through page.php, so the dashboard arrives inside the
   760px reading column with .cd-prose's list bullets drawn on the navigation.
   Neither belongs to a dashboard. */
.woocommerce-account .cd-page { max-width: none; }

.woocommerce-account .cd-page__body.cd-prose .woocommerce-MyAccount-navigation ul { padding-left: 0; }
.woocommerce-account .cd-page__body.cd-prose .woocommerce-MyAccount-navigation li { margin-bottom: 0; }
.woocommerce-account .cd-page__body.cd-prose .woocommerce-MyAccount-navigation li::before { display: none; }

.woocommerce-account .woocommerce {
	max-width: var(--cd-max);
	margin: 0 auto;
	padding: 42px 0 72px;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 42px;
	align-items: start;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-text);
	color: var(--color-bg);
}

.woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-size: 22px; }

.woocommerce-orders-table__cell { vertical-align: middle; }

.woocommerce-Address {
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	margin-bottom: var(--space-4);
}

.woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 23px; }

/* -- Account details ------------------------------------------------------
   /my-account/edit-account/ through woocommerce/myaccount/form-edit-account.php.
   Section 6 gives the form a 460px surface card, which was sized for 40px
   fields; a 56px floating box wants a little more room and no fill behind it,
   since the field boxes are white themselves.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-EditAccountForm.cd-account-form {
	max-width: 560px;
	padding: 0;
	background: none;
}

.cd-account-form__fieldset {
	margin: var(--space-5) 0 0;
	padding: 0;
	border: 0;
}

/* A legend drawn as a block rather than notched into a border: a border-top on
   the fieldset would be broken by the legend sitting in it. */
.cd-account-form__fieldset legend {
	display: block;
	width: 100%;
	padding: var(--space-4) 0 var(--space-3);
	border-top: 1px solid var(--color-divider);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-text);
}

.woocommerce-account .cd-account-form .cd-float__hint { margin-bottom: var(--space-3); }

.cd-account-form__submit { margin: var(--space-5) 0 0; }

@media (max-width: 760px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --------------------------------------------------------------------------
   7b. Signed out: the sign-in / register card

   /my-account/ renders through page.php, so the band, the reading column and
   .cd-prose all arrive before this template does. body.cd-account-auth (added
   by inc/account.php) unwinds the parts that belong to an article — the ghost
   capsule watermark, the prose measure, the dashboard's sidebar grid — and
   leaves a plain centred column for the card.

   Both forms are always in the DOM. `.has-js` is set by the tab script; the
   rule that hides the inactive panel hangs off it, so with no JavaScript the
   two panels simply stack and every field stays reachable.
   -------------------------------------------------------------------------- */
.cd-account-auth .cd-pagehero__inner {
	padding: clamp(38px, 4.6vw, 60px) 0 clamp(26px, 3vw, 36px);
}

/* theme.css caps .cd-page at the 760px reading measure. A two-panel card is
   not prose; the card sets its own width. */
.cd-account-auth .cd-page {
	max-width: none;
	padding: clamp(26px, 3vw, 40px) 0 clamp(56px, 7vw, 84px);
}

/* The watermark sits behind a card with its own shadow — two decorations in
   the same corner, so this one goes. */
.cd-account-auth .cd-page::before { display: none; }

/* Not an article: drop the reading-column type scale and the section rules
   .cd-prose draws above every h2. */
.cd-account-auth .cd-page__body.cd-prose {
	font-size: 15px;
	line-height: 1.55;
}

.cd-account-auth .cd-page__body.cd-prose h2 {
	margin: 0 0 var(--space-3);
	padding-top: 0;
	font-size: 22px;
}

.cd-account-auth .cd-page__body.cd-prose h2::before { display: none; }
.cd-account-auth .cd-page__body.cd-prose > p:first-child { font-size: inherit; }
.cd-account-auth .cd-page__body.cd-prose p { margin: 0 0 var(--space-3); }

/* Section 7's dashboard grid is for signed-in visitors only. */
.cd-account-auth.woocommerce-account .woocommerce {
	display: block;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}

/* Notices ("Incorrect password", "Password reset email has been sent") sit
   above the card, on the card's measure. The confirmation screen prints its
   notice straight into .woocommerce rather than into the notices wrapper, so
   both shapes are matched. */
.cd-account-auth .woocommerce > .woocommerce-notices-wrapper > *,
.cd-account-auth .woocommerce > .woocommerce-message,
.cd-account-auth .woocommerce > .woocommerce-error,
.cd-account-auth .woocommerce > .woocommerce-info {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.cd-account-auth .woocommerce:has(.cd-auth--narrow) > .woocommerce-notices-wrapper > *,
.cd-account-auth .woocommerce:has(.cd-auth--narrow) > .woocommerce-message,
.cd-account-auth .woocommerce:has(.cd-auth--narrow) > .woocommerce-error,
.cd-account-auth .woocommerce:has(.cd-auth--narrow) > .woocommerce-info { max-width: 540px; }

.cd-auth {
	max-width: 1000px;
	margin: 0 auto;
}

.cd-auth--narrow { max-width: 540px; }

.cd-auth__card {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	box-shadow: var(--shadow-md);
}

.cd-auth--narrow .cd-auth__card,
.cd-auth.is-single .cd-auth__card { grid-template-columns: minmax(0, 1fr); }

/* -- The brand panel ------------------------------------------------------ */
.cd-auth__brand {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(28px, 3.4vw, 44px);
	border-right: 1px solid var(--color-divider);
	background:
		radial-gradient(90% 70% at 8% 0%, color-mix(in srgb, var(--color-accent-2-200) 70%, transparent) 0%, transparent 62%),
		linear-gradient(180deg, var(--color-accent-2-100) 0%, color-mix(in srgb, var(--color-accent-100) 62%, var(--color-bg)) 100%);
}

.cd-auth__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--color-accent-700);
}

/* The same capsule tick the page-header band uses. */
.cd-auth__kicker::before {
	content: "";
	flex: none;
	width: 22px;
	height: 9px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--color-accent) 0 48.5%,
		rgba(255, 255, 255, 0.6) 48.5% 51.5%,
		var(--color-accent-2-400) 51.5% 100%
	);
}

.cd-account-auth .cd-auth__lede {
	margin: 0 0 var(--space-6);
	max-width: 30ch;
	font-family: var(--font-heading);
	font-size: 19px;
	line-height: 1.36;
	color: var(--color-accent-900);
}

.cd-auth__points {
	list-style: none;
	margin: 0 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cd-account-auth .cd-auth__points li {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--color-accent-900);
}

/* .cd-prose draws its own bullet on every list item; this list has icons. */
.cd-account-auth .cd-page__body.cd-prose .cd-auth__points > li::before { display: none; }
.cd-account-auth .cd-page__body.cd-prose .cd-auth__points { padding-left: 0; }

.cd-auth__point-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-accent-700);
	box-shadow: var(--shadow-sm);
}

.cd-account-auth .cd-auth__fineprint {
	margin: var(--space-6) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid color-mix(in srgb, var(--color-accent-900) 14%, transparent);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-accent-800);
}

/* -- The form column ------------------------------------------------------ */
.cd-auth__main {
	min-width: 0;
	padding: clamp(26px, 3.2vw, 40px);
}

.cd-auth__tabs {
	display: flex;
	gap: 24px;
	margin: 0 0 var(--space-4);
	border-bottom: 1px solid var(--color-divider);
}

.cd-auth__tab {
	margin-bottom: -1px;
	padding: 0 0 10px;
	border-bottom: 2px solid transparent;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-neutral-700);
	text-decoration: none;
	background: none;
	cursor: pointer;
}

.cd-auth__tab:hover { color: var(--color-text); text-decoration: none; }

.cd-auth__tab.is-active {
	color: var(--color-text);
	border-bottom-color: var(--color-accent);
}

.cd-auth__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.cd-auth__panel { min-width: 0; }
.cd-auth__panel[hidden] { display: none; }

/* No JavaScript: both panels show, separated by a rule. */
.cd-auth:not(.has-js) .cd-auth__panel + .cd-auth__panel {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-divider);
}

.cd-auth.has-js .cd-auth__panel:not(.is-active) { display: none; }

/* With tabs the heading is a duplicate label; keep it for assistive tech. */
.cd-auth.has-js .cd-auth__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cd-auth:not(.has-js) .cd-auth__title { margin: 0 0 var(--space-3); }

/* -- Nextend's buttons ----------------------------------------------------
   Nextend prints its own stylesheet from wp_head at priority 100, i.e. after
   this file, so every rule here is written one level more specific than the
   plugin's rather than reaching for !important. The brand colours and the
   provider marks are left exactly as the plugin ships them — Google and Meta
   both require their own button treatment — only the shape, the height and the
   typeface are pulled into the theme.
   -------------------------------------------------------------------------- */
.cd-auth__social { margin: 0 0 var(--space-3); }

.cd-auth__social div.nsl-container { padding: 0; }

.cd-auth__social div.nsl-container .nsl-container-buttons {
	display: flex;
	flex-flow: column;
	gap: 10px;
	padding: 0;
	width: 100%;
}

.cd-auth__social div.nsl-container .nsl-container-buttons a {
	margin: 0;
	width: 100%;
}

.cd-auth__social div.nsl-container .nsl-button {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	border-radius: 999px;
}

.cd-auth__social div.nsl-container .nsl-button-svg-container {
	padding: 0 0 0 14px;
}

.cd-auth__social div.nsl-container svg {
	height: 20px;
	width: 20px;
}

.cd-auth__social div.nsl-container .nsl-button-default div.nsl-button-label-container {
	margin: 0 38px 0 10px;
	padding: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 44px;
	letter-spacing: 0;
	text-align: center;
}

/* Nextend bolds the provider name inside the label; one weight is enough. */
.cd-auth__social div.nsl-container .nsl-button-label-container b { font-weight: 600; }

.cd-auth__social div.nsl-container .nsl-container-buttons a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 999px;
}

.cd-auth__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--space-4) 0;
	color: var(--color-neutral-700);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cd-account-auth .cd-auth__or { margin: var(--space-4) 0; }

.cd-auth__or::before,
.cd-auth__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-divider);
}

/* -- The WooCommerce fields ----------------------------------------------- */
.cd-auth__form { margin: 0; }

/* Section 6 gives every classic form a surface card; inside this card the form
   is the card. */
.woocommerce .cd-auth__form.login,
.woocommerce .cd-auth__form.register,
.woocommerce .cd-auth__form.lost_reset_password {
	max-width: none;
	padding: 0;
	background: none;
	border-radius: 0;
}

.woocommerce .cd-auth__form .form-row { margin: 0 0 var(--space-3); }

/* -- Floating-label fields (`.cd-float`) -----------------------------------
   theme.css owns the component; section 6 gives every WooCommerce `.form-row`
   a 40px box with a small label stacked above it, and that selector is more
   specific than the component's, so it would draw a second border inside the
   first. These rules hand the box back to `.cd-float` — one class more
   specific than section 6, and nothing here restates what theme.css already
   says except where it has to win a specificity fight.

   The old rectangular treatment for `.cd-auth__form .form-row input.input-text`
   was deleted rather than scoped: every field on this screen floats now.
   -------------------------------------------------------------------------- */
.woocommerce form .form-row.cd-float,
.woocommerce-page form .form-row.cd-float {
	position: relative;
	display: block;
	gap: 0;
	margin: 0 0 var(--space-3);
}

.woocommerce form .form-row.cd-float > input.input-text,
.woocommerce form .form-row.cd-float > input,
.woocommerce-page form .form-row.cd-float > input.input-text {
	width: 100%;
	min-height: 56px;
	padding: 24px 14px 8px;
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 22px;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-neutral-300);
	border-radius: 10px;
	box-shadow: none;
}

.woocommerce form .form-row.cd-float.has-aside > input.input-text { padding-right: 52px; }

.woocommerce form .form-row.cd-float > input.input-text:hover { border-color: var(--color-neutral-400); }

.woocommerce form .form-row.cd-float > input.input-text:focus,
.woocommerce form .form-row.cd-float > input.input-text:focus-visible {
	border-color: var(--color-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--color-accent-100);
}

.woocommerce form .form-row.cd-float > label,
.woocommerce-page form .form-row.cd-float > label {
	position: absolute;
	left: 14px;
	top: 28px;
	transform: translateY(-50%);
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 20px;
	color: var(--color-neutral-600);
	pointer-events: none;
}

.woocommerce form .form-row.cd-float > label .required {
	margin-left: 4px;
	color: var(--color-accent-700);
	text-decoration: none;
}

.woocommerce form .form-row.cd-float > input:focus ~ label,
.woocommerce form .form-row.cd-float > input:not(:placeholder-shown) ~ label,
.woocommerce form .form-row.cd-float > textarea:focus ~ label,
.woocommerce form .form-row.cd-float > textarea:not(:placeholder-shown) ~ label,
.woocommerce form .form-row.cd-float > select ~ label,
.woocommerce form .form-row.cd-float > .select2-container ~ label,
.woocommerce form .form-row.cd-float.is-filled > label,
.woocommerce form .form-row.cd-float.is-focus > label {
	top: 9px;
	transform: none;
	font-size: 11.5px;
	line-height: 14px;
	letter-spacing: 0.02em;
	color: var(--color-neutral-700);
}

.woocommerce form .form-row.cd-float > input:focus ~ label { color: var(--color-accent-700); }

/* Invalid: WooCommerce puts the class on the row, not the control. */
.woocommerce form .form-row.cd-float.woocommerce-invalid > input.input-text {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px #f9e2df;
}
.woocommerce form .form-row.cd-float.woocommerce-invalid > label { color: #a93226; }

/* First name / last name share a line once there is room for two labels. */
.cd-auth__names { display: block; }

@media (min-width: 480px) {
	.cd-auth__names {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-3);
	}
}

/* WooCommerce's own show/hide button. Its script wraps the input in
   span.password-input and appends the button to that span; the account script
   in inc/account.php unwraps both back into the `.cd-float` row and tags the
   button `.cd-float__aside`, which is the slot theme.css draws inside the box.
   The `.password-input` rules below are the pre-script (and no-JS) state. */
.cd-auth__form .password-input,
.cd-account-form .password-input {
	position: relative;
	display: block;
}

.cd-float > .show-password-input,
.cd-auth__form .show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-neutral-600);
	transform: translateY(-50%);
	cursor: pointer;
}

.cd-float > .show-password-input::after,
.cd-auth__form .show-password-input::after {
	content: "";
	position: absolute;
	inset: 11px;
	background: currentColor;
	-webkit-mask: var(--cd-eye) center / contain no-repeat;
	mask: var(--cd-eye) center / contain no-repeat;
}

.cd-float > .show-password-input.display-password { color: var(--color-accent-700); }
.cd-float > .show-password-input:hover { background: var(--color-neutral-100); color: var(--color-text); }
.cd-float > .show-password-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.cd-auth__form,
.cd-account-form {
	--cd-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8"><path d="M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="2.8"/></svg>');
}

/* WooCommerce's strength meter, moved under the box by the account script and
   drawn as the field's hint line rather than as a banner of its own. */
.cd-auth__form .woocommerce-password-strength,
.cd-account-form .woocommerce-password-strength {
	display: block;
	margin: 6px 0 var(--space-3);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	line-height: 18px;
	text-align: left;
	background: var(--color-surface);
	color: var(--color-neutral-800);
}

.cd-auth__form .woocommerce-password-strength.short,
.cd-auth__form .woocommerce-password-strength.bad,
.cd-account-form .woocommerce-password-strength.short,
.cd-account-form .woocommerce-password-strength.bad {
	background: color-mix(in srgb, #b3261e 12%, var(--color-bg));
	color: #7a1811;
}

.cd-auth__form .woocommerce-password-strength.good,
.cd-account-form .woocommerce-password-strength.good { background: var(--color-accent-100); color: var(--color-accent-800); }
.cd-auth__form .woocommerce-password-strength.strong,
.cd-account-form .woocommerce-password-strength.strong { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }

.cd-auth__form .woocommerce-password-hint,
.cd-account-form .woocommerce-password-hint {
	display: block;
	margin: -4px 2px var(--space-3);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-neutral-700);
}

/* Section 6 stacks every .form-row; this one is a single line. */
.woocommerce .cd-auth__form .cd-auth__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.woocommerce .cd-auth__form .cd-auth__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
}

.cd-auth__check input { accent-color: var(--color-accent); width: 16px; height: 16px; }

.cd-auth__lost {
	font-size: 13.5px;
	color: var(--color-accent-700);
}

.woocommerce .cd-auth__form .cd-auth__submit { margin: var(--space-4) 0 0; }

/* Section 6 pill-buttons every WooCommerce submit; here the theme button wins. */
.woocommerce .cd-auth__form .cd-auth__submit button.button {
	width: 100%;
	min-height: 46px;
	padding: 11px 20px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-size: 15px;
}

.woocommerce .cd-auth__form .cd-auth__submit button.button:hover { background: var(--color-accent-600); }

.cd-account-auth .cd-auth__hint,
.cd-account-auth .cd-auth__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-neutral-800);
}

.cd-account-auth .cd-auth__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 var(--space-3);
	padding: 10px 14px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

.cd-auth__note-icon {
	flex: none;
	display: inline-flex;
	margin-top: 1px;
	color: var(--color-accent-2-800);
}

/* WooCommerce's registration privacy sentence. */
.cd-account-auth .cd-auth__form .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-neutral-700);
}

.cd-auth__form .woocommerce-privacy-policy-text a { color: var(--color-accent-700); }

.cd-account-auth .cd-auth__swap {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-divider);
	font-size: 13.5px;
	color: var(--color-neutral-800);
}

.cd-auth__swap a { color: var(--color-accent-700); font-weight: 600; }

/* -- Small screens -------------------------------------------------------- */
@media (max-width: 860px) {
	.cd-auth__card { grid-template-columns: minmax(0, 1fr); }

	/* Form first on phones — the reassurance panel follows it instead of pushing it below the fold. */
	.cd-auth__brand {
		order: 2;
		border-right: 0;
		border-bottom: 0;
		border-top: 1px solid var(--color-divider);
	}

	.cd-account-auth .cd-auth__lede { max-width: none; font-size: 18px; }

	.cd-auth__points {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 18px;
	}

	.cd-account-auth .cd-auth__points li { font-size: 13.5px; }
	.cd-auth__point-icon { width: 26px; height: 26px; }
	.cd-account-auth .cd-auth__fineprint { margin-top: var(--space-4); }
}

@media (max-width: 520px) {
	.cd-auth__points { flex-direction: column; gap: 11px; }

	.cd-auth__tabs { gap: 18px; }
	.cd-auth__tab { font-size: 14px; }

	.woocommerce .cd-auth__form .cd-auth__row {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-2);
	}

	/* A 44px target next to a 14px label needs the whole line, not half of it. */
	.cd-auth__social div.nsl-container .nsl-button-default div.nsl-button-label-container {
		margin: 0 14px 0 10px;
		font-size: 13.5px;
	}
}

/* --------------------------------------------------------------------------
   8. Cart and Checkout blocks

   Neither page is a block any more. /checkout/ became [woocommerce_checkout]
   in round 15 and /cart/ became [woocommerce_cart] in round 16, so the
   cart-block rules that used to sit here have gone with the block they styled
   (see docs/decisions.md). The classic screens are styled by checkout.css and
   cart.css.

   What is left is the Checkout block's. It renders nowhere today, and it is
   kept only because putting that block back is a one-line change to page 8 —
   nobody trying it should have to rebuild the styling first. Delete this
   section the day that stops being true.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wc-block-components-sidebar-layout {
	max-width: var(--cd-max);
	margin: 0 auto;
	padding: 42px var(--cd-pad) 72px;
	font-family: var(--font-body);
}

/* WooCommerce nests .wc-block-components-sidebar-layout *inside* the block
   wrapper, so both elements matched the rule above and the page paid for the
   frame twice — 40px of a 390px screen, which squeezed the order-summary rows
   until product names broke mid-word. The inner copy is reset. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
	max-width: none;
	padding: 0;
}

.wc-block-components-title,
.wp-block-woocommerce-checkout h1,
.wc-block-components-checkout-step__title {
	font-family: var(--font-heading) !important; /* blocks hard-set their own font stack */
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 999px !important; /* the blocks set a square radius inline on the element */
	background-color: var(--color-accent) !important; /* block CSS variable, not a class */
	color: var(--color-bg) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 26px;
	border: 0;
	box-shadow: none;
}

.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-accent-600) !important; /* same reason as above */
}

.wc-block-components-button.outlined,
.wc-block-components-button:not(.contained) {
	background-color: transparent !important; /* the block's "outlined" variant keeps the fill otherwise */
	color: var(--color-accent-700) !important;
	border: 1px solid var(--color-divider);
}

.wc-block-components-order-summary-item {
	border-color: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	font-size: 13px;
	color: var(--color-neutral-700);
}

.wc-block-components-sidebar,
.wc-block-components-totals-wrapper {
	border-radius: var(--radius-lg);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--color-surface);
}

.wc-block-components-sidebar {
	padding: 0;
}

.wc-block-components-totals-wrapper {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.wc-block-components-totals-item__label { color: var(--color-neutral-800); }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 22px;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input.components-combobox-control__input {
	background: var(--color-surface) !important; /* blocks paint their own white field */
	border: 1px solid var(--color-divider) !important;
	border-radius: var(--radius-md) !important;
	font-family: var(--font-body);
	color: var(--color-text);
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 0;
	box-shadow: none;
}

.wc-block-components-text-input label,
.wc-block-components-checkout-step__description {
	color: var(--color-neutral-700);
	font-family: var(--font-body);
}

.wc-block-components-checkout-step {
	border: 0;
	padding-left: 0;
}

.wc-block-components-checkout-step__heading { margin-top: var(--space-6); }

.wc-block-components-panel,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
	border-radius: var(--radius-lg);
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background: var(--color-accent-100);
}

.wc-block-components-notice-banner {
	border-radius: var(--radius-lg);
	border: 0;
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.wc-block-components-notice-banner.is-error {
	background: color-mix(in srgb, #b3261e 12%, var(--color-bg));
	color: #7a1811;
}

.wc-block-components-notice-banner.is-success {
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

.wc-block-components-order-summary__button-text,
.wc-block-components-panel__button {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text);
}

.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
	font-family: var(--font-heading);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   9. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cd-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* --------------------------------------------------------------------------
   9b. Two-column product page: sticky gallery, tabs in the right column

   The medicine information is printed inside .cd-product__summary (see
   woocommerce/content-single-product.php), so the left column has nothing left
   to do once the summary starts scrolling — it stays put and the pack shot is
   still there while the uses, the warnings and the reviews are read.

   Below 901px the grid is a single column and none of this applies: the strip
   goes back to being full-bleed to the viewport, which is what it should be
   when the column IS the viewport.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.cd-product__gallery {
		position: sticky;
		/* Under the header, which publishes its rendered height as
		   --cd-header-h — 0 while it is hidden, so no gap opens up. */
		top: calc(var(--cd-header-h) + 16px);
		z-index: 1; /* below the tab strip's 20; they never overlap anyway */
		transition: top .25s ease;
	}

	/* In the column the column IS the reading measure; the 860px cap belongs to
	   the full-width layout this replaced. */
	.cd-product__summary .cd-tabs__wrap {
		max-width: none;
		width: 100%;
		margin-top: var(--space-4);
	}

	/* Edge to edge of the column, not of the viewport: unwind the full-bleed
	   pull-out entirely rather than half of it. */
	.cd-product__summary .cd-tabs__strip {
		--cd-edge: 0px;
		margin-left: 0;
		width: 100%;
		padding-inline: 0;
	}
}

@media (max-width: 760px) {
	.cd-archive { padding: 28px 0 56px; }
	.cd-product__after { padding: 8px 0 56px; }

	.cd-archive__bar {
		gap: 10px;
	}

	.cd-archive__sort { width: 100%; }
	.cd-archive__sort select { width: 100%; min-width: 0; }

	/* Still two columns at 360px — just tighter, so the labels have room. */
	.cd-product__seals { gap: 8px; }
	.cd-badge { padding: 10px; gap: 8px; }

	/* The page wrap already supplies the gutter. A second one here left the
	   cart line-item grid (which needs 336px of its own) inside a 310px box,
	   so WooCommerce's table scrolled its price column out of sight. */
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout,
	.wc-block-components-sidebar-layout {
		padding-inline: 0;
	}

	/* The order summary rows are image + name + price on one line. On a narrow
	   phone every nested inset comes out of the name, and a medicine name that
	   breaks mid-word ("Modafin il") reads as a broken page — so the summary's
	   own indents go. */
	.wc-block-components-order-summary { padding-inline: 0; }

	.wc-block-components-order-summary-item__description {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* The summary's row container is `display: table` with no width of its own, so
   it shrink-to-fits and leaves the rows narrower than the panel holding them —
   which is what pushed the medicine name into a mid-word break. */
.wc-block-components-order-summary__content { width: 100%; }

/* Defensive: WooCommerce's layout sheet (floats + % widths) must never fight the grid. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { float: none; width: auto; margin: 0; clear: none; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.images,
.woocommerce-page div.product div.summary { float: none; width: auto; }

/* Real product photographs should read as photographs: no dot screen or desaturation on
   product images (the halftone treatment stays for placeholder tiles and category monograms). */
.cd-card__img.halftone,
.cd-product__gallery .halftone,
.cd-drawer__thumb .halftone { filter: none; }
.cd-card__img.halftone::after,
.cd-product__gallery .halftone::after,
.cd-drawer__thumb .halftone::after { display: none; }

/* Tab strip scroll arrows: shown by theme.js only on the side that still hides tabs. */
.cd-tabs__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-divider);
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-accent-800);
	box-shadow: var(--shadow-sm);
	transform: translateY(-50%);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cd-tabs__arrow:hover { background: var(--color-accent-100); }
.cd-tabs__arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cd-tabs__arrow--prev { left: 6px; }
.cd-tabs__arrow--next { right: 6px; }
.cd-tabs__arrow[hidden] { display: none; }