/* ==================================================================== *
 * Liquid Commerce (ReserveBar) — brand skin
 *
 * The pr-usa-liquid-commerce plugin themes itself through CSS custom
 * properties (see its includes/class-pr-usa-lc-ui-theme.php). Pointing
 * those at our tokens puts every plugin surface on brand — the add-to-cart
 * button, the inline delivery block, the cart sidebar, the checkout form —
 * without editing a single plugin file, and without relying on the colours
 * saved in the plugin's own admin screen (those live in the database, so
 * they don't travel with this repo).
 *
 * The class is doubled so these beat the plugin's own
 * `.pr-usa-lc-theme { ... }` defaults whichever order the two stylesheets
 * happen to load in. :root carries the same values because the cart-count
 * badge renders in the site header, outside any .pr-usa-lc-theme wrapper.
 * ==================================================================== */

:root,
.pr-usa-lc-theme.pr-usa-lc-theme {
	--pr-usa-lc-primary-bg: var(--color-forest, #062D20);
	--pr-usa-lc-primary-text: var(--dm-fg-default-white, #FFFFFF);

	/* Secondary = the outlined look the Compare pill uses. */
	--pr-usa-lc-secondary-bg: transparent;
	--pr-usa-lc-secondary-text: var(--color-forest, #062D20);

	--pr-usa-lc-sidebar-bg: var(--dm-bg-default-white, #FFFFFF);
	--pr-usa-lc-field-bg: var(--dm-bg-default-white, #FFFFFF);
	--pr-usa-lc-field-text: var(--dm-fg-default-primary, #062D20);
	--pr-usa-lc-heading-text: var(--color-forest, #062D20);
	--pr-usa-lc-body-text: var(--dm-fg-default-primary, #062D20);

	--pr-usa-lc-font-body: var(--font-default, "Roboto Condensed", sans-serif);
	--pr-usa-lc-font-heading: var(--font-display, serif);

	/* Panels, fields and cart rows: a soft corner, not the full pill. The
	   add-to-cart button is pilled on its own in product-single.css, so
	   rounding it doesn't round every card in the cart and checkout. */
	--pr-usa-lc-radius: 8px;

	--pr-usa-lc-cart-badge-bg: var(--color-forest, #062D20);
}

/* ---- Button states -------------------------------------------------
   The same board spec every other primary button on the site follows
   (assets/css/button-fx.css): hover and press go yellow with a 15% black
   hairline, focus adds a 2px forest ring held 2px clear, disabled sits at
   60%. Colour-only transitions — no lift, no shadow.

   The plugin's own rule is `.pr-usa-lc-theme .button.pr-usa-lc-btn--primary`
   (three classes), so these carry the same weight plus the state selector
   and win regardless of sheet order. */
.pr-usa-lc-theme .button.pr-usa-lc-btn--primary {
	transition: background-color .3s cubic-bezier(0, 0, .2, 1),
		color .3s cubic-bezier(0, 0, .2, 1),
		box-shadow .3s cubic-bezier(0, 0, .2, 1),
		opacity .3s cubic-bezier(0, 0, .2, 1);
}

.pr-usa-lc-theme .button.pr-usa-lc-btn--primary:is(:hover, :focus-visible, :active) {
	background-color: var(--dm-bg-accent-yellow, #FAD609);
	color: var(--dm-fg-default-primary, #062D20);
	box-shadow: inset 0 0 0 1px var(--dm-border-default-dark, rgba(0, 0, 0, .15));
}

.pr-usa-lc-theme .button.pr-usa-lc-btn--primary:is(:focus-visible, :active) {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

.pr-usa-lc-theme .button.pr-usa-lc-btn--primary:is(:disabled, [aria-disabled="true"]) {
	opacity: .6;
	pointer-events: none;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.pr-usa-lc-theme .button.pr-usa-lc-btn--primary {
		transition: none;
	}
}

/* Radios and checkboxes (fulfilment choice on the PDP and in the sidebar,
   opt-ins at checkout) tick in forest rather than the browser's blue. */
.pr-usa-lc-theme :is(input[type="radio"], input[type="checkbox"]) {
	accent-color: var(--dm-bg-default-tertiary, #062D20);
}

/* ==================================================================== *
 * Slide-in sidebars — "Buy Now", "Change address" and the cart
 *
 * All three share the plugin's .pr-usa-lc-sidebar shell
 * (public/partials/app-shell.php), so the shell is styled once here and
 * they read as one family: the cream page ground, the forest-tinted
 * backdrop and 40px round close the newsletter popup uses, and a
 * display-serif title over a hairline, like the site's section heads.
 *
 * Content rules below are written for the Buy Now panel (address,
 * fulfilment options, quantity + add to cart); the address sidebar reuses
 * the same .pr-usa-lc-address block, so it picks them up too.
 *
 * Every selector starts at .pr-usa-lc-sidebar, one class more than the
 * plugin's own `.pr-usa-lc-theme .x` rules, so these win regardless of
 * which sheet loads first — and never reach the inline delivery block on
 * the product page, which is styled in product-single.css.
 * ==================================================================== */

.pr-usa-lc-sidebar .pr-usa-lc-sidebar__overlay {
	background: color-mix(in srgb, var(--color-forest, #062D20) 55%, transparent);
}

.pr-usa-lc-sidebar .pr-usa-lc-sidebar__panel.pr-usa-lc-theme {
	--pr-usa-lc-sidebar-bg: var(--dm-bg-default-primary, #F3EDE2);
	/* The plugin leaves the panel content-box, so its padding sat outside
	   the 100% width and pushed it off the left edge of a phone. */
	box-sizing: border-box;
	width: min(480px, 100%);
	padding: 28px 32px 40px;
	background: var(--dm-bg-default-primary, #F3EDE2);
	box-shadow: -24px 0 60px color-mix(in srgb, var(--color-forest, #062D20) 25%, transparent);
	color: var(--dm-fg-default-primary, #062D20);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--color-forest, #062D20) 30%, transparent) transparent;
}

/* ---- Header -------------------------------------------------------- */

/* Figma heading/h4 — IM FELL Double Pica 32 / 110%. The hairline runs the
   full panel width, so it reaches past the padding on both sides. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__title {
	margin: 0 -32px 24px;
	padding: 8px 88px 20px 32px; /* 8px top: IM FELL ascenders clip; right clears the close */
	border-bottom: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.32px;
	color: var(--dm-fg-default-primary, #062D20);
}

/* The newsletter popup's close: a 40px circle, forest tint on hover. The
   plugin's close also carries .pr-usa-lc-btn--text, hence the underline
   and padding reset. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__close {
	top: 24px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	padding: 0 0 3px; /* the × glyph sits high in its line box */
	border-radius: 50%;
	font-family: var(--font-default, sans-serif);
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
	text-decoration: none;
	color: var(--dm-fg-default-primary, #062D20);
	transition: background-color .2s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__close:hover {
	background: color-mix(in srgb, var(--color-forest, #062D20) 8%, transparent);
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__close:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

/* ---- Icons ------------------------------------------------------------
   Line icons drawn as masks, so they take the text colour of whatever
   they sit in (forest on white, white on the chosen forest card). */
.pr-usa-lc-sidebar .pr-usa-lc-theme {
	--dm-lc-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-4.2-7-7.7-7-11.2a7 7 0 0 1 14 0c0 3.5-3 7-7 11.2Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.6'/%3E%3C/svg%3E");
	--dm-lc-icon-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11v9h15v-9'/%3E%3Cpath d='M3.5 4.5h17l-1.3 4.3a2.5 2.5 0 0 1-4.8 0 2.6 2.6 0 0 1-4.9 0 2.5 2.5 0 0 1-4.8 0Z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
	--dm-lc-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11V15h-11z'/%3E%3Cpath d='M13.5 9.5h4l3.5 3.5v2h-7.5'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
	--dm-lc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
}

/* ---- Address card ------------------------------------------------------ */

/* A white card on the cream ground. It's a flex column so the fields can
   be re-ordered without touching the plugin's markup: street, apt, then
   the change warning (only shown while a new address is being typed) and
   the legal note last, as the card's footnote. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 20px;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	border-radius: 12px;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__label { order: 1; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__input { order: 2; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__suggestions { order: 3; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__label2 { order: 4; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__input2 { order: 5; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__change-warning { order: 6; }
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__disclaimer { order: 7; }

/* body/md/medium with a location pin. The plugin sets this label in the
   heading face with !important; a form label reads better in the body
   face, so this has to answer in kind. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--font-default, "Roboto Condensed", sans-serif) !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__label::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	margin-top: 1px;
	background: currentColor;
	-webkit-mask: var(--dm-lc-icon-pin) center / contain no-repeat;
	mask: var(--dm-lc-icon-pin) center / contain no-repeat;
}

/* body/sm/medium */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__label2 {
	margin: 16px 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Inside the white card the fields sit in cream — a filled, inset look —
   and go white with the forest ring once focused, like the newsletter
   email field. 16px text also stops iOS zooming the page on tap. */
.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-address__input, .pr-usa-lc-address__input2, input[type="text"]) {
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
	background: var(--dm-bg-default-primary, #F3EDE2);
	border: 1px solid color-mix(in srgb, var(--color-forest, #062D20) 18%, transparent);
	border-radius: 8px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-address__input, .pr-usa-lc-address__input2, input[type="text"])::placeholder {
	color: color-mix(in srgb, var(--color-forest, #062D20) 50%, transparent);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-address__input, .pr-usa-lc-address__input2, input[type="text"]):hover {
	border-color: color-mix(in srgb, var(--color-forest, #062D20) 40%, transparent);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-address__input, .pr-usa-lc-address__input2, input[type="text"]):focus {
	outline: none;
	background: var(--dm-bg-default-white, #FFFFFF);
	border-color: var(--dm-border-default-dark-strong, #062D20);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-forest, #062D20) 15%, transparent);
}

/* Autocomplete list: lifted off the card, forest tint on the highlighted
   row (the compare dropdown's hover). */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__suggestions {
	margin-top: 6px;
	padding: 6px;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	border-radius: 8px;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--color-forest, #062D20) 14%, transparent);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__suggestions li {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__suggestions li:is(.is-active, :hover) {
	background: color-mix(in srgb, var(--color-forest, #062D20) 6%, transparent);
}

/* Figma warning pair — warning/secondary ground, warning/strong edge —
   with an info mark. No display value is set: the plugin shows and hides
   this with the hidden attribute. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-notice--warning {
	position: relative;
	margin: 16px 0 0;
	padding: 10px 12px 10px 38px;
	background: var(--dm-bg-warning-secondary, #FFFCF0);
	border: 1px solid var(--dm-border-warning-strong, #FFD95C);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-notice--warning::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 12px;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--dm-lc-icon-info) center / contain no-repeat;
	mask: var(--dm-lc-icon-info) center / contain no-repeat;
}

/* body/xs/regular, secondary ink — the card's footnote, under a hairline. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address__disclaimer {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	font-size: 12px;
	line-height: 1.45;
	color: var(--dm-fg-default-secondary, #70695C);
}

/* ---- Fulfilment ------------------------------------------------------ */

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-availability__body {
	margin-top: 32px;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment {
	gap: 16px;
}

/* Fulfilment type matches the same block on the product page exactly
   (product-single.css .dm-pdp__cart rules, plus the plugin's 14 / 13px
   offer lines), so the two read as one component. The heading is the
   PDP subheading — IM FELL 20 / 120%, regular: the display face has no
   bold cut, so the plugin's bold came out browser-faked. The plugin
   forces its own face on this h3 with !important. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment__heading {
	font-family: var(--font-display, "IM Fell Double Pica", serif) !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Reads like the address line's "Change": body text, regular weight,
   the browser's own underline — as on the product page. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment__change {
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dm-fg-default-primary, #062D20);
	text-decoration: underline;
	text-underline-offset: auto;
}

/* The plugin lays the retailer offers out as a sideways scroller with
   arrows, which in a 480px panel shows one and a sliver of the next and
   cuts long retailer names short. Here they stack into a plain list, so
   every price is visible at once and easy to compare. The plugin's script
   only ever scrolls the viewport sideways (scrollBy), so with nothing to
   scroll it simply disables its arrows — which are hidden anyway. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment-carousel__nav {
	display: none;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment-carousel__viewport {
	overflow: visible;
	cursor: auto;
	touch-action: auto;
	user-select: auto;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment-carousel__track {
	flex-direction: column;
	gap: 10px;
	width: auto;
	padding: 0;
}

/* Offer cards: white on cream with a hairline. The chosen one matches the
   delivery block on the product page — a forest edge and a filled forest
   radio — over a faint forest tint so it still stands out in a list. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option {
	flex: 0 0 auto;
	width: auto;
	min-height: 0;
	gap: 12px;
	padding: 14px 16px;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	border-radius: 12px;
	color: var(--dm-fg-default-primary, #062D20);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option:hover {
	border-color: var(--dm-border-default-dark-strong, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option:has(input:checked) {
	background: color-mix(in srgb, var(--color-forest, #062D20) 5%, var(--dm-bg-default-white, #FFFFFF));
	border-color: var(--dm-border-default-dark-strong, #062D20);
	box-shadow: inset 0 0 0 .5px var(--dm-border-default-dark-strong, #062D20);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option:has(input:focus-visible) {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

/* Drawn radio: forest ring on white; checked, a forest dot inside it. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .25s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option input[type="radio"]::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dm-border-default-dark-strong, #062D20);
	transform: scale(0);
	transition: transform .2s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option input[type="radio"]:checked::before {
	transform: scale(1);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option__body {
	gap: 4px;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

/* Secondary ink, each line led by its icon. */
.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details) {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
	transition: color .25s ease;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details)::before {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: var(--dm-lc-icon-store) center / contain no-repeat;
	mask: var(--dm-lc-icon-store) center / contain no-repeat;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option__details::before {
	-webkit-mask-image: var(--dm-lc-icon-truck);
	mask-image: var(--dm-lc-icon-truck);
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option__details {
	line-height: 1.45;
}

/* On the chosen card the detail lines darken toward forest, as on the
   product page. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option:has(input:checked) :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details) {
	color: color-mix(in srgb, var(--color-forest, #062D20) 80%, transparent);
}

/* ---- Quantity + add to cart ------------------------------------------ */

/* Pinned to the foot of the panel, so the button stays in reach while the
   retailer list scrolls. It stretches edge to edge on the cream with a
   hairline above; the negative margins cancel the panel's padding. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-atc-row {
	position: sticky;
	bottom: -40px; /* sticky measures inside the panel padding; this reaches the edge */
	z-index: 2;
	align-items: center;
	gap: 12px;
	margin: 8px -32px -40px;
	padding: 16px 32px 24px;
	background: var(--dm-bg-default-primary, #F3EDE2);
	border-top: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
}

/* Both 48px pills, like every buy button on the site. The quantity pill
   carries its own chevron so it matches the outlined Compare pill. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-atc-row .pr-usa-lc-qty-select {
	-webkit-appearance: none;
	appearance: none;
	height: 48px;
	min-width: 84px;
	padding: 0 36px 0 20px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
	background: var(--dm-bg-default-white, #FFFFFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%23062D20' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
	border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
	border-radius: 999px;
	cursor: pointer;
}

.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-atc-row .pr-usa-lc-qty-select:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

/* Geometry only — colour and the yellow hover come from the shared button
   states at the top of this file. Also covers the address sidebar's
   save button. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .button.pr-usa-lc-atc,
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address-sidebar__actions .button.pr-usa-lc-btn--primary {
	flex: 1 1 auto;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-default, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

/* ---- Phones ---------------------------------------------------------- */

@media (max-width: 767px) {
	.pr-usa-lc-sidebar .pr-usa-lc-sidebar__panel.pr-usa-lc-theme {
		padding: 20px 20px 32px;
	}

	.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__title {
		margin: 0 -20px 20px;
		padding: 8px 72px 16px 20px;
		font-size: 28px;
	}

	.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-sidebar__close {
		top: 16px;
		right: 12px;
	}

	.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-address {
		padding: 16px;
	}

	.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-atc-row {
		bottom: -32px;
		margin: 8px -20px -32px;
		padding: 12px 20px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pr-usa-lc-sidebar .pr-usa-lc-theme :is(
		.pr-usa-lc-sidebar__close,
		.pr-usa-lc-option,
		.pr-usa-lc-option input[type="radio"],
		.pr-usa-lc-option__retailer,
		.pr-usa-lc-option__details,
		.pr-usa-lc-address__input,
		.pr-usa-lc-address__input2,
		input[type="text"]
	) {
		transition: none;
	}

	.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-option input[type="radio"]::before {
		transition: none;
	}
}

/* ==================================================================== *
 * Cart sidebar
 *
 * The plugin builds the cart body in JS (main.js: cart item, promo and
 * totals templates) inside the same shell as Buy Now, so it inherits the
 * cream panel, serif title and round close from above. The body follows
 * the Buy Now system: each bottle is a white card, the promo field sits in
 * a white card with a cream-filled input, the totals read as a receipt on
 * the cream, and Checkout is pinned to the foot of the panel.
 * ==================================================================== */

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme {
	--dm-lc-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.5H6.2Z'/%3E%3Cpath d='M9 10.5V6.5a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E");
}

/* ---- Items ----------------------------------------------------------- */

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item {
	padding: 16px;
	overflow: hidden; /* clips the delivery strip to the card's corners */
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	border-radius: 12px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__row {
	gap: 16px;
}

/* Bottle on the greige panel the product tiles use. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__media {
	width: 84px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__img {
	box-sizing: border-box;
	width: 84px;
	height: 104px;
	padding: 8px;
	object-fit: contain;
	background: var(--dm-ext-greige-pale, #E8E1D4);
	border-radius: 8px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__head {
	gap: 12px;
}

/* IM FELL 20 / 115% — the product name in the display face, like the
   product tiles. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__name {
	padding-top: 2px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--dm-fg-default-primary, #062D20);
}

/* body/xs link in the secondary ink; forest on hover. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__head .pr-usa-lc-remove {
	min-width: 0;
	min-height: 0;
	padding: 2px 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__head .pr-usa-lc-remove:hover {
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__size {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
}

/* Retailer line with the shop icon from the Buy Now offer cards. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__retailer {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__retailer::before {
	content: "";
	flex: 0 0 15px;
	height: 15px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: var(--dm-lc-icon-store) center / contain no-repeat;
	mask: var(--dm-lc-icon-store) center / contain no-repeat;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__qty-price {
	margin-top: 12px;
}

/* A smaller cousin of the Buy Now quantity pill. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__qty-price .pr-usa-lc-qty-select {
	-webkit-appearance: none;
	appearance: none;
	height: 40px;
	min-width: 72px;
	padding: 0 32px 0 16px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
	background: var(--dm-bg-default-white, #FFFFFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%23062D20' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center;
	border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
	border-radius: 999px;
	cursor: pointer;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__qty-price .pr-usa-lc-qty-select:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

/* body/lg/bold */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__unit-price {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Delivery promise as a forest band across the foot of the card: white
   text, the truck icon in the accent yellow. (Cream melted into the panel
   ground and made the card look like it ended early.) The engraving
   section below orders it last. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__expectation {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px -16px 0;
	padding: 10px 16px;
	background: var(--dm-bg-default-tertiary, #062D20);
	font-size: 13px;
	line-height: 1.4;
	color: var(--dm-fg-default-white, #FFFFFF);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__expectation::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	margin-top: 1px;
	background: var(--dm-fg-accent-yellow, #FCEE1D);
	-webkit-mask: var(--dm-lc-icon-truck) center / contain no-repeat;
	mask: var(--dm-lc-icon-truck) center / contain no-repeat;
}

/* ---- Notices --------------------------------------------------------- */

/* Cart events: warnings pick up the sidebar's warning style; blocking
   issues (retailer closed, minimum not met) take the Figma error pair and
   the same info mark. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-notice--config {
	position: relative;
	margin: 0 0 12px;
	padding: 10px 12px 10px 38px;
	background: var(--dm-bg-error-secondary, #FEF2F1);
	border: 1px solid var(--dm-border-error-strong, #E83A17);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-notice--config::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 12px;
	width: 18px;
	height: 18px;
	background: var(--dm-fg-error-primary, #E82517);
	-webkit-mask: var(--dm-lc-icon-info) center / contain no-repeat;
	mask: var(--dm-lc-icon-info) center / contain no-repeat;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme [data-cart-body] > .pr-usa-lc-notice--warning {
	margin: 0 0 12px;
}

/* ---- Promo code ------------------------------------------------------ */

/* A white card like the Buy Now address card; the field is cream-filled
   (the shared sidebar input rule), Apply is the outlined Compare pill. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo--cart {
	margin: 16px 0 0;
	padding: 16px;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	border-radius: 12px;
}

/* body/sm/medium. The plugin puts this label in the heading face with
   !important. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--font-default, "Roboto Condensed", sans-serif) !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__row {
	gap: 8px;
	margin-top: 0;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme input.pr-usa-lc-promo__input {
	height: 48px;
	padding: 0 16px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-promo__apply {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 24px;
	background: transparent;
	color: var(--dm-fg-default-primary, #062D20);
	border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
	border-radius: 999px;
	font-family: var(--font-default, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

/* The outlined base above outranks the shared primary hover, so the
   yellow fill is restated here. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-promo__apply:is(:hover, :focus-visible, :active) {
	background: var(--dm-bg-accent-yellow, #FAD609);
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__remove {
	margin-top: 8px;
	padding: 0;
	font-size: 13px;
	color: var(--dm-fg-default-secondary, #70695C);
	text-underline-offset: 3px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__message {
	margin-top: 8px;
	font-size: 13px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__message.pr-usa-lc-error {
	color: var(--dm-fg-error-primary, #E82517);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-promo__message.pr-usa-lc-success {
	color: var(--dm-fg-success-primary, #11A159);
}

/* ---- Totals ---------------------------------------------------------- */

/* A receipt on the cream: line items in the secondary ink, then Total
   over a hairline — the label in the display face, the sum in bold. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals {
	margin: 24px 0 0;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals > div {
	align-items: baseline;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals > div > span:last-child {
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals > div:last-child {
	margin: 12px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals > div:last-child strong:first-child {
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-totals > div:last-child strong:last-child {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

/* ---- Actions --------------------------------------------------------- */

/* Pinned to the foot of the panel like the Buy Now add-to-cart row:
   Checkout as the full-width pill, Continue Shopping demoted to a quiet
   underlined link beneath it so there's one clear next step. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-actions {
	position: sticky;
	bottom: -40px; /* sticky measures inside the panel padding; this reaches the edge */
	z-index: 2;
	align-items: center;
	gap: 8px;
	margin: 24px -32px -40px;
	padding: 16px 32px 20px;
	background: var(--dm-bg-default-primary, #F3EDE2);
	border-top: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-checkout-btn {
	width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-default, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-continue-shopping-btn,
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-continue-shopping-btn:is(:hover, :focus-visible, :active) {
	width: auto;
	min-height: 32px;
	padding: 4px 8px;
	background: transparent;
	color: var(--dm-fg-default-primary, #062D20);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	font-family: var(--font-default, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---- Empty and loading ----------------------------------------------- */

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme [data-cart-body] > :is(.pr-usa-lc-muted, .pr-usa-lc-loading) {
	margin: 0;
	padding: 56px 0;
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme [data-cart-body] > .pr-usa-lc-loading {
	font-size: 18px;
	color: var(--dm-fg-default-secondary, #70695C);
}

/* An empty bag over "Your cart is empty." */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme [data-cart-body] > .pr-usa-lc-muted::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	background: color-mix(in srgb, var(--color-forest, #062D20) 45%, transparent);
	-webkit-mask: var(--dm-lc-icon-bag) center / contain no-repeat;
	mask: var(--dm-lc-icon-bag) center / contain no-repeat;
}

/* ---- Phones ---------------------------------------------------------- */

@media (max-width: 767px) {
	.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-actions {
		bottom: -32px;
		margin: 20px -20px -32px;
		padding: 12px 20px 16px;
	}

	.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__media,
	.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__img {
		width: 72px;
	}

	.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__img {
		height: 92px;
	}
}

/* ---- Engraving ------------------------------------------------------- */

/* The plugin's engraving block (offer, form, or saved lines) sits inside
   the bottle card. The card turns into a column so the block can come
   before the delivery strip, which always closes the card. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item {
	display: flex;
	flex-direction: column;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-cart-item__expectation {
	order: 2;
	margin-bottom: -16px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme {
	--dm-lc-icon-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0-4-4L4 16Z'/%3E%3Cpath d='m14 6 4 4'/%3E%3C/svg%3E");
	--dm-lc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

/* A dashed "make it yours" panel inside the white card — reads as an
   optional extra rather than another product row. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving {
	order: 1;
	margin: 16px 0 0;
	padding: 14px 16px 16px;
	background: var(--dm-bg-default-white, #FFFFFF);
	border: 1px dashed color-mix(in srgb, var(--color-forest, #062D20) 35%, transparent);
	border-radius: 10px;
	font-size: 14px;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Offer: copy on the left, an outlined pill on the right; the pill drops
   under the copy when the card is narrow. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__cta {
	flex-wrap: wrap;
	gap: 12px 16px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__cta-copy {
	flex: 1 1 180px;
}

/* IM FELL 18 / 115%, led by a pen. The plugin already sets these three
   titles in the heading face. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.pr-usa-lc-engraving__heading, .pr-usa-lc-engraving__form-title, .pr-usa-lc-engraving__saved-title) {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.pr-usa-lc-engraving__heading, .pr-usa-lc-engraving__form-title, .pr-usa-lc-engraving__saved-title)::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--dm-lc-icon-pen) center / contain no-repeat;
	mask: var(--dm-lc-icon-pen) center / contain no-repeat;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__saved-title::before {
	-webkit-mask-image: var(--dm-lc-icon-check);
	mask-image: var(--dm-lc-icon-check);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__form-title {
	margin-bottom: 12px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__fee {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

/* Form: cream-filled fields (the shared sidebar input rule), tracked
   capitals so the preview reads like lettering on glass. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__lines {
	gap: 12px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__line-label {
	gap: 4px;
	margin: 0;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__line-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__line-hint {
	font-size: 12px;
	line-height: 1.4;
	color: var(--dm-fg-default-secondary, #70695C);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme input.pr-usa-lc-engraving__line-input {
	height: 48px;
	padding: 0 16px;
	font-weight: 500;
	letter-spacing: .12em;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.pr-usa-lc-engraving__add-line, .pr-usa-lc-engraving__edit-link) {
	min-width: 0;
	min-height: 0;
	margin-top: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary, #062D20);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__disclaimer {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--dm-fg-default-secondary, #70695C);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__error {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dm-fg-error-primary, #E82517);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__actions {
	gap: 8px 16px;
	margin-top: 14px;
}

/* Buttons: Save is a small forest pill; Add engraving and Cancel are the
   outlined pill (Compare / Apply). All go yellow on hover like every
   other button on the site. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.button.pr-usa-lc-engraving__add-btn, .button.pr-usa-lc-engraving__save, .pr-usa-lc-engraving__cancel) {
	min-height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	font-family: var(--font-default, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-engraving__save {
	border: 0;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.button.pr-usa-lc-engraving__add-btn, .pr-usa-lc-engraving__cancel) {
	background: transparent;
	color: var(--dm-fg-default-primary, #062D20);
	border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme :is(.button.pr-usa-lc-engraving__add-btn, .pr-usa-lc-engraving__cancel):is(:hover, :focus-visible, :active) {
	background: var(--dm-bg-accent-yellow, #FAD609);
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__cancel:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__remove-link {
	padding: 0;
	font-size: 13px;
	color: var(--dm-fg-default-secondary, #70695C);
	text-underline-offset: 3px;
}

/* Saved: each line as "Line 1: TEXT", the label quiet, the lettering in
   the same tracked capitals as the form. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__saved-lines {
	gap: 4px;
	margin: 8px 0 0;
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__saved-line {
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .08em;
	color: var(--dm-fg-default-primary, #062D20);
}

.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .pr-usa-lc-engraving__saved-line strong {
	font-weight: 400;
	letter-spacing: normal;
	color: var(--dm-fg-default-secondary, #70695C);
}

/* The "engraving available" filter above the Buy Now offers. */
.pr-usa-lc-sidebar .pr-usa-lc-theme .pr-usa-lc-fulfillment__engraving-filter {
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--dm-fg-default-primary, #062D20);
}

/* ==================================================================== *
 * No layout jump
 *
 * Space for the panel's scrollbar is held from the start, so when
 * "Change shipping option" (or a long cart) makes the panel scroll, the
 * scrollbar arrives without pushing the content sideways. The same goes
 * for the page behind: the plugin hides the page scrollbar while a
 * sidebar is open (body.pr-usa-lc-lock), and holding its gutter stops the
 * page shifting under the overlay.
 * ==================================================================== */

.pr-usa-lc-sidebar .pr-usa-lc-sidebar__panel.pr-usa-lc-theme {
	scrollbar-gutter: stable;
}

html:has(> body.pr-usa-lc-lock) {
	scrollbar-gutter: stable;
}

/* ==================================================================== *
 * Busy state — assets/js/liquid-commerce-busy.js
 *
 * From the moment Add to cart (or a cart change) is clicked until the
 * plugin finishes, the script marks the panel .dm-lc-busy, disables its
 * controls and gives the clicked button .is-busy. Here: everything but the
 * button fades back, the button swaps its label for a spinner, and a
 * yellow bar runs along the top of the sidebar so the whole panel reads as
 * "working".
 * ==================================================================== */

.dm-lc-busy {
	cursor: progress;
}

.dm-lc-busy :is(
	.pr-usa-lc-sidebar__close,
	.pr-usa-lc-address,
	.pr-usa-lc-address-widget,
	.pr-usa-lc-fulfillment__header,
	[data-fulfillment-panel],
	.pr-usa-lc-qty-label,
	.pr-usa-lc-cart-item,
	.pr-usa-lc-promo,
	.pr-usa-lc-cart-totals
) {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s ease;
}

@keyframes dm-lc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Doubled class: outweighs the shared aria-disabled dimming above. */
.pr-usa-lc-theme .button.is-busy.is-busy,
.pr-usa-lc-theme .button.is-busy.is-busy:is(:hover, :focus-visible, :active) {
	--dm-lc-spin: var(--dm-fg-default-white, #FFFFFF);
	position: relative;
	background-color: var(--dm-bg-default-tertiary, #062D20);
	color: transparent !important; /* hides the label under the spinner; product-single.css sets the PDP pill colour at equal weight */
	box-shadow: none;
	opacity: 1;
	pointer-events: none;
	cursor: progress;
}

/* The outlined Apply keeps its outline and spins in forest. */
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-promo__apply.is-busy,
.pr-usa-lc-sidebar--cart .pr-usa-lc-theme .button.pr-usa-lc-promo__apply.is-busy:is(:hover, :focus-visible, :active) {
	--dm-lc-spin: var(--dm-fg-default-primary, #062D20);
	background: transparent;
	color: transparent;
}

.pr-usa-lc-theme .button.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	border: 2px solid var(--dm-lc-spin);
	border-right-color: transparent;
	border-radius: 50%;
	animation: dm-lc-spin .7s linear infinite;
}

/* Indeterminate bar across the top of the open sidebar. */
@keyframes dm-lc-bar {
	from {
		background-position: -70% 0, 0 0;
	}
	to {
		background-position: 170% 0, 0 0;
	}
}

.pr-usa-lc-sidebar:has(> .pr-usa-lc-sidebar__panel.dm-lc-busy)::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	width: min(480px, 100%);
	height: 3px;
	background:
		linear-gradient(90deg, transparent, var(--dm-bg-accent-yellow, #FAD609) 30%, var(--dm-bg-accent-yellow, #FAD609) 70%, transparent) 0 0 / 40% 100% no-repeat,
		color-mix(in srgb, var(--color-forest, #062D20) 12%, transparent);
	animation: dm-lc-bar 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.pr-usa-lc-theme .button.is-busy::after {
		animation-duration: 1.6s;
	}

	.pr-usa-lc-sidebar:has(> .pr-usa-lc-sidebar__panel.dm-lc-busy)::after {
		animation: none;
		background: var(--dm-bg-accent-yellow, #FAD609);
	}

	.dm-lc-busy :is(.pr-usa-lc-sidebar__close, .pr-usa-lc-address, .pr-usa-lc-address-widget, .pr-usa-lc-fulfillment__header, [data-fulfillment-panel], .pr-usa-lc-qty-label, .pr-usa-lc-cart-item, .pr-usa-lc-promo, .pr-usa-lc-cart-totals) {
		transition: none;
	}
}

/* ==================================================================== *
 * Preview ribbon — sample-data previews of the Thank-you page
 * (?dm_preview_order=) and checkout errors (?dm_preview_error=).
 * ==================================================================== */

.dm-preview-bar {
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	color: var(--dm-fg-default-primary, #062D20);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 20px;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.4;
	background: var(--dm-bg-warning-secondary, #FFFCF0);
	border: 1px dashed var(--dm-border-warning-strong, #FFD95C);
	border-radius: 8px;
}

.dm-preview-bar strong {
	padding: 2px 8px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--dm-bg-warning-primary, #FFD95C);
	border-radius: 999px;
}

.dm-preview-bar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-left: auto;
}

.dm-preview-bar__links a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dm-preview-bar__links a[aria-current] {
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 767px) {
	.dm-preview-bar__links {
		margin-left: 0;
	}
}

/* ==================================================================== *
 * "Not available at your address" (inc/setup/lc-unavailable.php)
 *
 * The plugin's red error line, as a calm card: store icon, one bold line,
 * then the Where to Buy link with an arrow. lc-unavailable.js adds
 * .dm-lc-unavailable; the class is doubled to outweigh the plugin's
 * `.pr-usa-lc-theme .pr-usa-lc-error` colour and its options-area resets.
 * ==================================================================== */

.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 6px 12px;
	margin: 0;
	padding: 14px 16px;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	text-align: left;
	color: var(--dm-fg-default-primary, #062D20);
	background: color-mix(in srgb, var(--dm-bg-default-primary, #F3EDE2) 75%, var(--dm-ext-greige-pale, #E8E1D4));
	border: 1px solid color-mix(in srgb, var(--color-forest, #062D20) 10%, transparent);
	border-radius: 8px;
}

.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable::before {
	content: "";
	grid-row: 1 / span 2;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11v9h15v-9'/%3E%3Cpath d='M3.5 4.5h17l-1.3 4.3a2.5 2.5 0 0 1-4.8 0 2.6 2.6 0 0 1-4.9 0 2.5 2.5 0 0 1-4.8 0Z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11v9h15v-9'/%3E%3Cpath d='M3.5 4.5h17l-1.3 4.3a2.5 2.5 0 0 1-4.8 0 2.6 2.6 0 0 1-4.9 0 2.5 2.5 0 0 1-4.8 0Z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The link sits under the line, underlined words then a clear arrow. */
.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a:hover::after,
.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a:focus-visible::after {
	transform: translateX(3px);
}

.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pr-usa-lc-theme .pr-usa-lc-error.dm-lc-unavailable.dm-lc-unavailable a::after {
		transition: none;
	}
}