/* WooCommerce screens that keep Minimog markup: cart, checkout, account. */

.woocommerce-notices-wrapper { max-width: var(--ard-wrap); margin: 0 auto; padding: 0 var(--ard-gut); }

.ard-woo-page { padding: 0 0 var(--ard-sec); background: var(--ard-cream-2); }
.ard-woo-page .ard-wrap { padding-top: 56px; }

/* Minimog already styles these: a soft band with the icon vertically centred
   and 46px of left padding reserved for it, and the fly cart slides them away
   on its own. A card with a copper rule was mine, and it also broke the icon —
   the 20px left padding I set left no room for it, so on a two-line message it
   landed on the text. Only the tone is adjusted here, to sit on cream. */
.woocommerce-message, .woocommerce-info {
	background: var(--ard-cream-3);
	font-size: 14px;
}
.woocommerce-error { background: #f7ece8; }

.woocommerce table.shop_table {
	width: 100%; border-collapse: collapse; background: #fff;
	border: 1px solid var(--ard-line);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	padding: 16px 18px; border-bottom: 1px solid var(--ard-line); text-align: left;
	font-size: 14px;
}
.woocommerce table.shop_table th {
	font-family: var(--ard-sans); font-size: 10px;
	letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.woocommerce .cart_item img { width: 74px; height: auto; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
	background: var(--ard-navy); color: var(--ard-light-2);
	border: 0; border-radius: 0; cursor: pointer;
	font-family: var(--ard-sans); font-size: 12px; font-weight: 500;
	letter-spacing: 2.2px; text-transform: uppercase;
	padding: 15px 30px;
	transition: background .25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: #101724; color: var(--ard-light-2);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--ard-copper); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #9c5f3c; }

.woocommerce .cart-collaterals, .woocommerce-checkout .col2-set { margin-top: 34px; }
.woocommerce .cart_totals h2, .woocommerce-billing-fields h3, .woocommerce-checkout h3 {
	font-family: var(--ard-serif); font-size: 24px; margin-bottom: 16px;
}

.woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 16px; }
.woocommerce form .form-row label {
	font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%; border: 1px solid var(--ard-line); background: #fff;
	padding: 12px 14px; font-family: var(--ard-sans); font-size: 14px; height: auto;
}

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.woocommerce-MyAccount-navigation a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ard-ink-soft); }
.woocommerce-MyAccount-navigation .is-active a { color: var(--ard-ink); border-bottom: 1px solid currentColor; }

.woocommerce .quantity input {
	width: 64px; border: 1px solid var(--ard-line); padding: 10px 0; text-align: center;
	font-family: var(--ard-sans);
}

/* The product page's own add-to-bag button keeps the Ardori navy. */
.ard-pdp form.cart button.single_add_to_cart_button,
.ard-pdp form.cart button.single_add_to_cart_button.alt {
	flex: 1; min-width: 220px;
	background: var(--ard-navy); color: var(--ard-light-2);
	padding: 17px 30px; letter-spacing: 2.4px; font-size: 12px;
}
.ard-pdp form.cart button.single_add_to_cart_button:hover { background: #101724; }

/* Minimog renders the catalog sort as its own dropdown; dress it as Ardori. */
.ard-shopbar__meta .js-product-ordering { margin: 0; }
.ard-shopbar__meta .minimog-nice-select-wrap { position: relative; }
.ard-shopbar .ard-shopbar__meta .minimog-nice-select-wrap .minimog-nice-select-current {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--ard-line); background: #fff;
	padding: 9px 14px; cursor: pointer;
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ard-ink);
}
.ard-shopbar .ard-shopbar__meta .minimog-nice-select-wrap .minimog-nice-select-current::after {
	content: ""; margin-left: auto;
	width: 6px; height: 6px;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}
.ard-shopbar .ard-shopbar__meta ul.minimog-nice-select {
	position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
	list-style: none; margin: 0; padding: 6px 0;
	background: #fff; border: 1px solid var(--ard-line);
	height: auto !important; min-width: 210px;
	box-shadow: 0 14px 34px rgba(28, 24, 20, .1);
}
.ard-shopbar .ard-shopbar__meta ul.minimog-nice-select .item {
	padding: 9px 16px; font-size: 12px; letter-spacing: .4px; text-transform: none; cursor: pointer;
}
.ard-shopbar .ard-shopbar__meta ul.minimog-nice-select .item:hover,
.ard-shopbar .ard-shopbar__meta ul.minimog-nice-select .item.selected { background: var(--ard-cream-3); }

/* Minimog fixes the add-to-cart height at 45px with a tall line-height,
   which sinks the label. Restore the Ardori geometry decisively. */
.ard-pdp form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center;
	height: auto; min-height: 0; line-height: 1.5;
	padding: 17px 30px;
}
.ard-pdp form.cart button.single_add_to_cart_button span { line-height: 1.5; }

/* Product-page wishlist / compare are inline text links, not the card circles. */
.ard-pdp .ard-pdp__actions .product-action,
.ard-pdp .ard-pdp__actions .product-action a {
	width: auto; height: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	line-height: 1.4;
}
.ard-pdp .ard-pdp__actions .product-action a {
	font-size: 11px !important;
	color: var(--ard-ink-soft);
}
.ard-pdp .ard-pdp__actions .product-action a:hover { color: var(--ard-copper); background: none; }
.ard-pdp .ard-pdp__actions .product-action a::after { display: none; }
.ard-pdp .ard-pdp__actions .product-action a {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* =========================================================================
   Wishlist and compare pages
   ========================================================================= */

.woosw-list { max-width: 100%; }
.woosw-switcher { display: none; }

table.woosw-items { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ard-line); }
table.woosw-items td {
	padding: 20px 18px;
	border-bottom: 1px solid var(--ard-line);
	vertical-align: middle;
}
table.woosw-items tr:last-child td { border-bottom: 0; }

.woosw-item--remove { width: 44px; }
.woosw-item--remove span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--ard-line);
	color: var(--ard-ink-soft);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woosw-item--remove span::before { content: "\00d7"; font-size: 15px; line-height: 1; }
.woosw-item--remove span:hover { background: var(--ard-ink); border-color: var(--ard-ink); color: #fff; }

.woosw-item--image { width: 110px; }
.woosw-item--image img { width: 92px; height: auto; display: block; }

.woosw-item--name a { font-family: var(--ard-serif); font-size: 20px; color: var(--ard-ink); }
.woosw-item--name a:hover { color: var(--ard-copper); }
.woosw-item--price { margin-top: 4px; }
.woosw-item--price .price, .woosw-item--price .amount { color: var(--ard-copper); font-size: 15px; }
.woosw-item--time { margin-top: 6px; font-size: 12px; color: var(--ard-ink-soft); }
.woosw-item--note, .woosw-item--stock {
	margin-top: 6px;
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ard-ink-soft);
	cursor: pointer;
}
.woosw-item--note:hover { color: var(--ard-copper); }
.woosw-item--note-add input[type="text"] {
	border: 1px solid var(--ard-line); padding: 8px 12px; font-family: var(--ard-sans); font-size: 13px;
}

.woosw-item--atc .button, .woosw-item--atc a,
.woosw-item--add .button, .woosw-item--add a {
	display: inline-block;
	background: var(--ard-navy); color: var(--ard-light-2);
	padding: 12px 24px;
	font-family: var(--ard-sans); font-size: 11px;
	letter-spacing: 2.2px; text-transform: uppercase;
}
.woosw-item--atc .button:hover,
.woosw-item--add .button:hover { background: #101724; }

.woosw-copy, .woosw-list .woosw-copy-text {
	margin-top: 26px;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ard-ink-soft);
}
.woosw-copy input[type="text"] {
	flex: 1; min-width: 220px;
	border: 1px solid var(--ard-line); background: #fff;
	padding: 11px 14px; font-family: var(--ard-sans); font-size: 13px; text-transform: none; letter-spacing: 0;
}
.woosw-copy input[type="button"], .woosw-copy .button {
	background: var(--ard-ink); color: #fff; border: 0; cursor: pointer;
	padding: 11px 24px; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
}

.woosw-popup-content-mid-message, .woosw-empty, .woosc-empty {
	text-align: center; padding: 60px 20px;
	font-family: var(--ard-serif); font-size: 21px; color: var(--ard-ink-soft);
}

@media (max-width: 1023px) {
	table.woosw-items, table.woosw-items tbody, table.woosw-items tr, table.woosw-items td { display: block; width: 100%; }
	table.woosw-items tr { position: relative; border-bottom: 1px solid var(--ard-line); padding: 14px 0 16px; }
	/* the plugin's own `.woosw-list .woosw-items td` rule outranks this one
	   and was padding every cell 15px, opening a 32px hole above the button */
	table.woosw-items td { border-bottom: 0; padding: 4px 16px !important; }
	table.woosw-items td.woosw-item--image { padding-top: 12px !important; }
	table.woosw-items td.woosw-item--actions { padding-top: 12px !important; padding-bottom: 8px !important; }

	/* `width: 100%` above also hit the absolutely positioned remove cell, so
	   its box ran 343px leftward out of the row. */
	table.woosw-items td.woosw-item--remove {
		position: absolute; top: 8px; right: 6px;
		width: auto; padding: 0;
	}
	.woosw-item--image img { width: 96px; }
	.woosw-item--info { padding-right: 52px; }
	.woosw-item--atc, .woosw-item--atc .button, .woosw-item--atc a { width: 100%; }

	/* Share row stacks rather than squeezing a full URL into a short field. */
	.woosw-copy, .woosw-list .woosw-copy-text { flex-direction: column; align-items: stretch; gap: 10px; }
	.woosw-copy input[type="text"] { width: 100%; }
	.woosw-copy input[type="button"], .woosw-copy .button { width: 100%; }
}

/* The plugin draws this X with a Font Awesome Pro glyph the package does not
   ship, so it fell back to a stray character. Draw it, and give it a thumb. */
.woosw-item--remove span {
	position: relative;
	width: 34px; height: 34px;
}
.woosw-item--remove span::before { content: "" !important; }
.woosw-item--remove span::after {
	content: "";
	position: absolute; inset: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center / 13px 13px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center / 13px 13px no-repeat;
}

/* Mobile: the sort dropdown must stay inside the viewport, and the product
   page's wishlist / compare links need a comfortable hit area. */
/* The sort dropdown is absolutely positioned from the left, so on a narrower
   shop bar (the search results view has no category row) it hung 9px past the
   viewport. Anchor it to the right at every width. */
.ard-shopbar__meta { position: relative; }
.ard-shopbar .ard-shopbar__meta ul.minimog-nice-select {
	right: 0; left: auto;
	min-width: 0; width: max-content; max-width: calc(100vw - 48px);
}

@media (max-width: 1023px) {

	.ard-pdp .ard-pdp__actions .product-action a,
	.ard-pdp .ard-pdp__actions .woosw-btn,
	.ard-pdp .ard-pdp__actions .woosc-btn { padding: 11px 0 !important; }
}

@media (pointer: coarse), (max-width: 1023px) {
	.woocommerce-form-login a,
	.woocommerce-LostPassword a,
	.woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 0; }
}
@media (pointer: coarse), (max-width: 1023px) {
	.woocommerce-LostPassword a, a.forgot-password-link { padding: 11px 0 !important; }
}

/* =========================================================================
   Minimog's sticky mobile bar and fly cart, dressed as Ardori
   ========================================================================= */

.page-mobile-tabs {
	background: var(--ard-navy);
	border-top: 0;
	box-shadow: 0 -6px 24px rgba(16, 20, 28, .18);
	padding-bottom: env(safe-area-inset-bottom, 0);
	z-index: 90;
}
.page-mobile-tabs .mobile-tab-link,
.page-mobile-tabs a { color: rgba(232, 228, 223, .82); }
.page-mobile-tabs .mobile-tab-link:hover,
.page-mobile-tabs .mobile-tab-link:focus,
.page-mobile-tabs .mobile-tab-link.current { color: #fff; }
.page-mobile-tabs svg, .page-mobile-tabs i { color: inherit; }
.page-mobile-tabs .mobile-tab-link svg { width: 21px; height: 21px; }

/* App-style tab bar. The theme divides the tabs with vertical rules, which
   reads as a table rather than a bar; the labels the theme ships were also
   switched off, leaving five unlabelled glyphs. */
.page-mobile-tabs {
	height: auto;
	border-top: 1px solid rgba(232, 228, 223, .1);
}
.page-mobile-tabs .tabs { display: flex; }
.page-mobile-tabs .mobile-tab-link {
	flex: 1;
	border: 0 !important;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 4px;
	padding: 8px 0 7px;
	transition: color .2s ease;
}
.page-mobile-tabs .mobile-tab-link .icon { display: flex; }
.page-mobile-tabs .mobile-tab-link--title {
	font-family: var(--ard-sans);
	font-size: 9px; font-weight: 500;
	letter-spacing: .7px; text-transform: uppercase;
	line-height: 1;
	opacity: .75;
}
.page-mobile-tabs .mobile-tab-link.is-active,
.page-mobile-tabs .mobile-tab-link.current { color: var(--ard-gold); }
.page-mobile-tabs .mobile-tab-link.is-active .mobile-tab-link--title { opacity: 1; }
.page-mobile-tabs .mobile-tab-link:active { opacity: .6; }

/* Counters read in the brand gold, not the theme's red. Target the bubble
   itself — `has-badge` sits on the link, so a wildcard would paint the tab. */
.page-mobile-tabs .icon-badge,
.ard-header .icon-badge {
	background: var(--ard-gold) !important;
	color: #16202f !important;
	font-weight: 600;
	box-shadow: none;
	border: 0;
}

/* The bar floats over the page, so give the document room beneath it.
   `body.single-product` is spelled out because Minimog's own
   `body.single-product { padding-bottom: var(--sticky-atc-bar-height) }`
   outranks a bare `body` and was letting the bar sit on the last 55px. */
/* Minimog only shows the tab bar below 768px (style.css:7245). Reserving room
   for it up to 1023px left every iPad-width page ending in an empty strip with
   no bar under it. */
@media (max-width: 767px) {
	/* exactly the bar's height — 58 against a 56px bar left a 2px band of the
	   body colour showing between the footer and the bar */
	body,
	body.single-product { padding-bottom: 56px; }
	.ard-footer__base { padding-bottom: 30px; }
}

/* Scroll-to-top clears the bar. */
.scroll-to-top, .back-to-top, [class*="scroll-top"] {
	bottom: 74px !important;
	background: var(--ard-navy) !important;
	color: var(--ard-light-2) !important;
	border-radius: 0 !important;
	border: 1px solid rgba(232, 228, 223, .2) !important;
}

/* ---- fly cart ---------------------------------------------------------- */

#popup-fly-cart { z-index: 210; }
#popup-fly-cart .fly-cart-wrap,
#popup-fly-cart .fly-cart-content { background: var(--ard-cream-2); }
#popup-fly-cart .fly-cart-title,
#popup-fly-cart h2, #popup-fly-cart .cart-title {
	font-family: var(--ard-serif);
	font-size: 26px; font-weight: 400; letter-spacing: .4px;
	color: var(--ard-ink);
}
#popup-fly-cart .btn-close-fly-cart { color: var(--ard-ink); }
#popup-fly-cart .product-name a,
#popup-fly-cart .woocommerce-mini-cart-item a:not(.remove) {
	font-family: var(--ard-serif); font-size: 18px; color: var(--ard-ink);
}
#popup-fly-cart .product-name a:hover { color: var(--ard-copper); }
#popup-fly-cart .amount, #popup-fly-cart .woocommerce-Price-amount { color: var(--ard-copper); }
#popup-fly-cart .woocommerce-mini-cart__total { border-top: 1px solid var(--ard-line); padding-top: 16px; }

#popup-fly-cart .button,
#popup-fly-cart .checkout,
#popup-fly-cart .wc-forward {
	border-radius: 0;
	font-family: var(--ard-sans);
	font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase;
	padding: 15px 26px;
}
#popup-fly-cart .checkout, #popup-fly-cart .button.checkout {
	background: var(--ard-navy); color: var(--ard-light-2);
}
#popup-fly-cart .checkout:hover { background: #101724; }

/* Free-shipping progress reads in gold. */
#popup-fly-cart .free-shipping-bar .progress,
#popup-fly-cart [class*="free-shipping"] .bar span,
#popup-fly-cart [class*="progress"] > span { background: var(--ard-gold); }

/* The cart countdown is loud for a slow-luxury brand — keep it quiet. */
#popup-fly-cart .cart-countdown,
#popup-fly-cart [class*="countdown"] {
	background: var(--ard-cream-3);
	color: var(--ard-ink-soft);
	font-size: 12px;
	letter-spacing: .4px;
}

/* Fly cart footer: give the checkout button room and settle the type. */
#popup-fly-cart .fly-cart-footer,
#popup-fly-cart .woocommerce-mini-cart__buttons { padding-bottom: 18px; }
#popup-fly-cart .checkout,
#popup-fly-cart .button.checkout,
#popup-fly-cart a.checkout {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 52px; height: auto;
	line-height: 1.4;
}
#popup-fly-cart .fly-cart-actions .item,
#popup-fly-cart [class*="fly-cart-action"] {
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ard-ink-soft);
}
#popup-fly-cart .total .amount,
#popup-fly-cart .order-total .amount { font-size: 18px; }

/* =========================================================================
   Minimog now loads site-wide for its fly cart and sticky bar. Its base
   styles bleed into a few Ardori components — neutralise just those.
   ========================================================================= */

/* Minimog indents and spaces every blockquote; the testimonial card must not. */
.ard-testi__quote,
blockquote.ard-testi__quote {
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--ard-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.7;
	quotes: none;
}
.ard-testi__quote::before, .ard-testi__quote::after { content: none !important; }
.ard-testi__card figcaption { padding-top: 0 !important; }

/* Collection rows keep their measured 52px pitch. */
.ard-collection__list a { line-height: 1.3; }
.ard-collection__name { line-height: 1.25; }
.ard-collection__sub { line-height: 1.35; }

/* Ardori lists are layout, not prose — strip the bullet and indent only,
   and keep each component's own rhythm. */
.ard-collection__list,
.ard-craft__points,
.ard-promise__grid,
.ard-care-list,
.ard-resources__group ul,
.ard-footer ul { padding-left: 0; list-style: none; }
.ard-collection__list { margin: 34px 0 0; }
.ard-craft__points { margin: 0 0 40px; }
.ard-promise__grid { margin: 80px 0 0; }
.ard-care-list, .ard-resources__group ul, .ard-footer ul { margin: 0; }

/* =========================================================================
   Minimog's sticky add-to-cart bar, dressed as Ardori
   ========================================================================= */

#sticky-product-bar.sticky-product {
	background: var(--ard-cream-2);
	border-top: 1px solid var(--ard-line);
	box-shadow: 0 -8px 28px rgba(16, 20, 28, .1);
	padding: 10px 0;
}
#sticky-product-bar .sticky-product-name,
#sticky-product-bar .sticky-product-name span {
	font-family: var(--ard-serif);
	font-size: 20px; font-weight: 400; letter-spacing: .3px;
	color: var(--ard-ink);
}
#sticky-product-bar .sticky-product-price,
#sticky-product-bar .sticky-product-price .price,
#sticky-product-bar .sticky-product-price .price bdi {
	font-family: var(--ard-sans);
	font-size: 15px; font-weight: 500; color: var(--ard-copper);
}
#sticky-product-bar .tm-button.sticky-product-add_to_cart_button {
	background: var(--ard-navy);
	color: var(--ard-cream);
	border: 0; border-radius: 0;
	font-family: var(--ard-sans);
	font-size: 11px; font-weight: 600;
	letter-spacing: 1.6px; text-transform: uppercase;
	height: auto; min-height: 46px; line-height: 1.5;
	padding: 13px 26px;
}
#sticky-product-bar .tm-button.sticky-product-add_to_cart_button:hover {
	background: var(--ard-ink);
	color: #fff;
}

/* The theme draws the close X with a Font Awesome Pro glyph this package does
   not ship, so it renders as an empty box. Draw it in CSS instead. */
#sticky-product-bar .sticky-product-bar-close {
	top: 50%; right: 20px; transform: translateY(-50%);
	width: 32px; height: 32px;
	background: var(--ard-cream-3);
	border: 1px solid var(--ard-line);
	color: var(--ard-ink-soft);
	cursor: pointer;
}
#sticky-product-bar .sticky-product-bar-close:hover { background: #fff; color: var(--ard-ink); }
/* keep the button clear of the close control */
#sticky-product-bar .sticky-cart-form { padding-right: 56px; }
#sticky-product-bar button.sticky-product-add_to_cart_button { cursor: pointer; appearance: none; -webkit-appearance: none; }
#sticky-product-bar .sticky-product-add_to_cart_button.is-busy { pointer-events: none; opacity: .75; }
#sticky-product-bar .sticky-product-bar-close span { font-size: 0; }
#sticky-product-bar .sticky-product-bar-close span::before,
#sticky-product-bar .sticky-product-bar-close span::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 11px; height: 1px; background: currentColor;
}
#sticky-product-bar .sticky-product-bar-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
#sticky-product-bar .sticky-product-bar-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
#sticky-product-bar .sticky-product-bar-close.is-hidden,
#sticky-product-bar.hide { display: none; }

/* On phones the tab bar owns the bottom 55px, so the add-to-cart bar parks
   above it rather than burying it. */
@media (max-width: 767px) {
	#sticky-product-bar.sticky-product {
		bottom: 56px; z-index: 89;
		/* right gutter keeps the button clear of the close control */
		padding: 12px 56px 12px 15px;
	}
	/* The theme parks the close square in the corner, half off the button.
	   Centre it in that gutter instead. */
	#sticky-product-bar .sticky-product-bar-close { right: 12px; background: transparent; border: 0; }
	#sticky-product-bar .sticky-cart-form { padding-right: 0; }
	/* room for both bars beneath the last section */
	body.single-product { padding-bottom: 132px; }
}

/* Above the tab bar's breakpoint the sticky add-to-cart is the only fixed bar,
   so it sits on the floor — but it must not cover the fly cart drawer, which
   the theme puts at a far higher layer. */
@media (min-width: 768px) {
	#sticky-product-bar.sticky-product { z-index: 89; }
}

/* =========================================================================
   Cart / checkout blocks on phones
   ========================================================================= */

@media (max-width: 1023px) {
	/* WooCommerce Blocks style their fields by class, which outranks the
	   element-level 16px rule in ardori.css, so iOS still zoomed on these. */
	/* Blocks inlines its stylesheet after the theme's, so equal specificity
	   loses here; this one needs the flag. */
	.wc-block-components-quantity-selector__input { font-size: 16px !important; }

	.wc-block-components-text-input input,
	.wc-block-components-address-form input,
	.wc-block-components-form input[type="text"],
	.wc-block-components-form input[type="email"],
	.wc-block-components-form input[type="tel"],
	.wc-block-components-form select,
	.wc-block-components-textarea {
		font-size: 16px;
	}

	/* The block remove-item control ships at 24px, under any thumb. */
	.wc-block-cart-item__remove-link {
		min-width: 44px; min-height: 44px;
		display: inline-flex; align-items: center; justify-content: center;
	}
}

/* Minimog paints every `button[disabled]` with its solid button colour, which
   turned the cart's disabled minus control into a black block next to a plain
   plus. Give the pair back their quiet, matching look. */
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__button[disabled],
.wc-block-components-quantity-selector__button:disabled {
	background: transparent !important;
	color: var(--ard-ink) !important;
	border: 0;
}
.wc-block-components-quantity-selector__button[disabled],
.wc-block-components-quantity-selector__button:disabled { opacity: .35 !important; }
@media (max-width: 1023px) {
	.wc-block-components-quantity-selector__button { min-width: 42px !important; }
	.wc-block-components-quantity-selector { max-width: 100%; }
}

/* =========================================================================
   Smart Compare popup — the plugin's default skin is a red-and-grey admin
   look; this brings it into the Ardori palette.
   ========================================================================= */

.woosc-bar { background: var(--ard-navy) !important; }
.woosc-bar-btn.woosc-bar-btn-text,
.woosc-bar .woosc-bar-btn-text {
	background: var(--ard-copper) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-family: var(--ard-sans);
	font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
}
.woosc-bar-btn.woosc-bar-btn-text:hover { background: #a3653f !important; }

/* Empty product slots ship a grey skeleton that reads as a broken page. Leave
   them blank instead — they are just space for a second product. */
.woosc_table td.td-placeholder,
.woosc_table td.td-placeholder * {
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
}
.woosc_table td.td-placeholder::before,
.woosc_table td.td-placeholder::after { content: none !important; }
.woosc_table td.td-placeholder img { display: none !important; }

.woosc_table .tr-name td a,
.woosc_table .tr-name td {
	font-family: var(--ard-serif);
	font-size: 21px; font-weight: 400; color: var(--ard-ink);
}
.woosc_table .tr-name td a.woosc-remove,
.woosc_table td .woosc-remove {
	font-family: var(--ard-sans);
	font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--ard-ink-soft);
}
.woosc_table .tr-price .price,
.woosc_table .tr-price .amount { color: var(--ard-copper); font-weight: 500; }
.woosc_table th, .woosc_table .td-label, .woosc_table tr > td:first-child {
	font-family: var(--ard-sans);
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--ard-ink-soft);
}
.woosc_table td .button,
.woosc_table td .add_to_cart_button {
	background: var(--ard-navy) !important;
	color: var(--ard-cream) !important;
	border-radius: 0 !important;
	font-family: var(--ard-sans);
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
	/* Minimog pins buttons to a 40px box with a 38px line-height on top of
	   15px padding, which drops the label out of the bottom of the button. */
	height: auto !important; line-height: 1.5 !important;
	padding: 13px 26px !important;
}
.woosc_table td .button:hover { background: #101724 !important; }

/* =========================================================================
   Round twelve — mobile audit fixes
   ========================================================================= */

/* `.woocommerce-checkout` is a BODY class, so `.woocommerce-checkout h3` was
   matching every h3 in the document — including the three in the footer, which
   rendered 24px Cormorant there and 11px Montserrat everywhere else. */
.woocommerce-checkout .ard-footer h3 {
	font-family: var(--ard-sans);
	font-size: 11px; font-weight: 500;
	letter-spacing: 2.6px; text-transform: uppercase;
	color: var(--ard-light);
	margin: 0 0 20px;
}

/* Place Order was 345 x 36 — the most important control on the site and the
   smallest button in the checkout. */
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
	min-height: 54px !important;
	height: auto !important;
	line-height: 1.4 !important;
	padding: 17px 24px !important;
	font-size: 12px;
	letter-spacing: 2px;
}

@media (max-width: 1023px) {
	/* On the cart the Proceed to Checkout button sat at y835-886 while the tab
	   bar holds y796-852 on an 852px screen — behind the bar and below the fold,
	   so a customer with one item never saw it. */
	.wc-block-cart__submit-container { margin-bottom: 24px; }
	.wc-block-cart__submit-container--sticky {
		bottom: 56px !important;
		z-index: 80 !important;
		padding-bottom: 12px;
	}
	.wc-block-cart__submit-button {
		min-height: 54px; height: auto; line-height: 1.4;
	}

	/* The line item centred its own text inside a left column, printed the price
	   twice and dropped the full product description into the row. */
	.wc-block-cart-items__row .wc-block-components-product-name,
	.wc-block-cart-items__row .wc-block-components-product-metadata,
	.wc-block-cart-items__row .wc-block-components-product-price {
		text-align: left;
	}
	.wc-block-components-product-metadata__description { display: none; }
	.wc-block-cart-item__prices { display: none; }

	/* The + button escaped its own border by 18px and overlapped the remove
	   control — increase-quantity and delete-item shared a hit area. */
	.wc-block-components-quantity-selector {
		width: 132px !important;
		max-width: 132px;
		flex: 0 0 132px;
	}
	.wc-block-cart-item__remove-link { margin-left: 14px; }

	/* The only route to the coupon field was an 18px tap target. */
	.wc-block-components-panel__button,
	.wc-block-components-checkout-step__description-button {
		min-height: 44px;
		display: flex; align-items: center;
	}
}

/* The View Cart link floated out of the notice; the float just needs clearing.
   The icon position is Minimog's and is already correct. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { overflow: hidden; }

/* Track Order kept its desktop two-column form on a phone: both fields 141.5px
   wide inside a 299px form with the placeholders cut off. */
@media (max-width: 768px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%; float: none; margin-right: 0;
	}
}

/* The page hero is 338px on every transactional screen. After the 56px header
   and the 56px tab bar that leaves 740px of usable phone screen, so 46% of it
   was a navy block holding one word — and on the cart it is why the checkout
   button started below the fold. Shop and editorial pages keep the full
   treatment; these do not need it. */
@media (max-width: 1023px) {
	.woocommerce-cart .ard-pagehero,
	.woocommerce-checkout .ard-pagehero,
	.woocommerce-account .ard-pagehero {
		min-height: 0;
		padding: 44px 0 40px;
	}
	.woocommerce-cart .ard-pagehero h1,
	.woocommerce-checkout .ard-pagehero h1,
	.woocommerce-account .ard-pagehero h1 {
		font-size: 28px; line-height: 1.15; margin-bottom: 0;
	}
}

/* The badge sat at top:-6/right:-12 against a 21px icon, covering a quarter of
   the glyph — the heart's right lobe, and the bag's handle, which made the bag
   read as a padlock. Pull it clear and ring it in the bar's own navy so it
   floats above the icon rather than punching into it. */
.page-mobile-tabs .icon { position: relative; }
.page-mobile-tabs .icon-badge {
	top: -7px !important;
	right: -10px !important;
	min-width: 16px !important;
	width: auto; height: 16px !important;
	line-height: 14px !important;
	font-size: 10px !important;
	border: 2px solid var(--ard-navy) !important;
	box-sizing: content-box;
}
/* Hidden at zero in CSS rather than omitted from the markup: WooCommerce and
   the wishlist plugin both refresh these by replacing the node, so it has to
   exist even when empty. */
.page-mobile-tabs .icon-badge:empty,
.page-mobile-tabs .icon-badge[data-count="0"] { display: none !important; }

/* The header badge is positioned against the button box, not the glyph. On a
   phone that box is padded out to 44px for the tap target, so the badge drifted
   6px clear of the bag and clipped at the top of the screen. On desktop the
   button is only 18px — the same offsets would drop the badge onto the icon —
   so this correction is scoped to the padded case. */
.ard-header .ard-icon-btn { position: relative; }
@media (pointer: coarse), (max-width: 1023px) {
	.ard-header .ard-cart-count,
	.ard-header .ard-wish-link .ard-cart-count {
		top: 6px;
		right: 4px;
	}
}

/* Fly cart line item: the name, the price and the quantity each took a row of
   their own, so one bag ran three rows deep in a narrow drawer. Laid out as a
   two-column grid the price and the stepper share a line and the item comes
   down from 96px to about 70px. */
#popup-fly-cart .mini_cart_item .product-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 10px;
	row-gap: 6px;
	align-items: center;
}
#popup-fly-cart .mini_cart_item .product-name {
	grid-column: 1 / -1;
	margin: 0;
}
#popup-fly-cart .mini_cart_item .product-price {
	grid-column: 1; grid-row: 2;
	margin: 0;
	white-space: nowrap;
}
#popup-fly-cart .mini_cart_item .product-quantity-wrap {
	grid-column: 2; grid-row: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
}
#popup-fly-cart .mini_cart_item .quantity-button-wrapper { margin: 0; }
#popup-fly-cart .mini_cart_item .quantity { width: 76px; }
#popup-fly-cart .mini_cart_item .remove.js-remove-from-cart {
	position: static;
	margin: 0;
	font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
	white-space: nowrap;
}

/* Minimog force-unhides the quantity screen-reader label with a block of
   !important rules, so the word "Quantity" printed in pure black 16px above the
   stepper — the only #000 text on the site. Put it back out of sight. */
.ard-pdp .entry-product-quantity-wrapper label,
.ard-pdp form.cart label.screen-reader-text,
#popup-fly-cart label.screen-reader-text,
.ard-qv label.screen-reader-text {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* The review block is the plugin's own skin sitting in the middle of the most
   important page on the site: a Jost heading under a Cormorant one, and a
   sentence-case button with a black border and rounded corners. */
.woocommerce-Reviews .heading,
.woocommerce-Reviews h4,
#reviews h3 {
	font-family: var(--ard-serif) !important;
	font-size: 26px; font-weight: 400;
	letter-spacing: .3px; text-transform: none;
	color: var(--ard-ink);
}
.woocommerce-Reviews .button,
#review_form .button,
#respond input#submit {
	background: var(--ard-navy) !important;
	color: var(--ard-cream) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--ard-sans) !important;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase !important;
	height: auto !important;
	min-height: 48px;
	line-height: 1.4 !important;
	padding: 15px 30px !important;
}
.woocommerce-Reviews .button:hover,
#respond input#submit:hover { background: var(--ard-ink) !important; }

/* The stepper's grey fill belongs to Minimog, not the palette. */
.ard-pdp div.quantity input.qty,
.ard-pdp .quantity-button-wrapper {
	background: transparent !important;
	border-color: var(--ard-line) !important;
}

/* The stepper and Add to Bag sat on one row at 47px and 52px, bottom-aligned,
   so their tops were 6px apart and they read as two unrelated controls. */
.ard-pdp form.cart .quantity,
.ard-pdp .quantity-button-wrapper,
.ard-pdp form.cart .single_add_to_cart_button {
	height: 52px;
	min-height: 52px;
}
.ard-pdp .entry-product-quantity-wrapper,
.ard-pdp form.cart { align-items: center; }

/* The injected way-out from an empty wishlist or comparison. */
.ard-empty-cta { margin: 26px 0 0; }
.woosw-popup-content-mid-message,
.woosc-no-result,
.woosw-empty, .woosc-empty { text-align: center; }
.ard-empty-cta .ard-btn { display: inline-flex; white-space: nowrap; min-height: 48px; }

/* The sticky bar's label sat 44.6px left of centre: the button declares
   `justify-content: center` but its inner wrapper is a flex box that never
   stretches, so the centring had nothing to act on. */
#sticky-product-bar .tm-button,
#sticky-product-bar .sticky-product-add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
#sticky-product-bar .button-content-wrapper {
	width: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center !important;
}

/* "Write a review" is an anchor, so the button font rule never reached it — it
   was still Jost 16px with rounded corners beside Montserrat 11px squares. */
.woocommerce-Reviews a.button,
#reviews a.button,
a.woocommerce-review-link,
.woocommerce-Reviews .comment-reply-title a {
	font-family: var(--ard-sans) !important;
	font-size: 11px !important;
	letter-spacing: 1.8px;
	text-transform: uppercase !important;
	border-radius: 0 !important;
}

/* WooCommerce's own `.price` at 16px was overriding both the card's 14px and
   the product page's 19px, so a bag's price looked the same weight in a
   listing as on its own page. */
.ard-card__price .price,
.ard-card__price .amount,
.ard-card__price bdi { font-size: 14px; }
.ard-pdp__price .price,
.ard-pdp__price .amount,
.ard-pdp__price bdi { font-size: 22px; }

/* The card's Add to Bag bar carried Minimog's 5px radius while every other
   button on the site is square. */
.ard-card__add, .ard-card__add--out { border-radius: 0; }

/* Cart page line item. The earlier pass fixed the fly cart's row; this is the
   block cart, a different component, and it still stacked the name, the price
   and the stepper on three rows with the total repeated top-right. */
@media (max-width: 1023px) {
	.wc-block-cart-items__row {
		max-width: 100%;
		overflow: hidden;
	}
	/* the flex container is __wrap, not the cell, and Blocks sets it to column
	   with a deeper selector */
	td.wc-block-cart-item__product .wc-block-cart-item__wrap,
	.wc-block-cart-items__row .wc-block-cart-item__wrap {
		display: flex;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 12px;
		row-gap: 6px;
	}
	.wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-components-product-name {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Its only content — the product description — is already hidden, but the
	   wrapper still claimed a full row between the price and the stepper and
	   was what kept them apart. */
	.wc-block-cart-items__row .wc-block-components-product-metadata { display: none !important; }
	.wc-block-cart-item__prices { display: block; margin: 0; flex: 0 0 auto; }
	/* Blocks gives this the full column width, so the price and the stepper
	   could never share a line however the row was laid out */
	.wc-block-cart-item__quantity {
		margin: 0;
		flex: 0 0 auto;
		width: auto !important;
		max-width: 124px;
	}
	.wc-block-cart-items__row .wc-block-components-quantity-selector {
		width: 112px !important;
		max-width: 112px;
		min-width: 0;
	}
	.wc-block-cart-items__row .wc-block-components-quantity-selector { margin: 0; }
	/* the total is printed again in its own column, so one of the two goes */
	.wc-block-cart-item__total { display: none; }
	.wc-block-cart-items__row td { padding-right: 0; }
}

/* The tab bar's cart badge is a div with its own geometry, so the sizing meant
   for the span never reached it: 26 x 20 sitting on a 21px glyph, covering
   about half the bag. The header's version clears its icon correctly. */
.page-mobile-tabs .icon-badge.mini-cart-badge,
.page-mobile-tabs .icon-badge {
	width: 14px !important;
	min-width: 14px !important;
	height: 14px !important;
	padding: 0 !important;
	font-size: 9px !important;
	line-height: 14px !important;
	/* clear of the 21px glyph — it was covering half the bag */
	top: -7px !important;
	right: -11px !important;
}

/* Cart and checkout line items print the unit price larger than the product
   name, so the loudest thing in the row is a number, not the bag. The checkout
   summary goes further and sets the line total — the amount actually being
   charged — smaller than both. Put the name first, the charged amount second
   and the per-unit price last. */
.wc-block-cart-items__row .wc-block-components-product-name,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--ard-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ard-ink);
}
.wc-block-cart-items__row .wc-block-components-product-price,
.wc-block-cart-items__row .wc-block-components-product-price .wc-block-formatted-money-amount {
	font-size: 14px;
	font-weight: 400;
	color: var(--ard-ink-soft);
}
.wc-block-components-order-summary-item__individual-prices {
	font-size: 12px;
	color: var(--ard-ink-soft);
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
	font-size: 15px;
	font-weight: 500;
	color: var(--ard-ink);
}

/* The terms and privacy links carry body colour and no underline, so the two
   links a customer is agreeing to are indistinguishable from the sentence. */
.wc-block-checkout__terms a,
.wc-block-checkout__terms-and-conditions a {
	color: var(--ard-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   Client review, 29 Aug 2026
   ========================================================================= */

/* The product meta rows set their label as a plain inline span, so each value
   started wherever its label happened to end — SKU at 108px, Category at 122px,
   Availability at 118px. Give the label a fixed column so the values line up. */
.ard-pdp__meta li {
	align-items: baseline;
	column-gap: 14px;
}
.ard-pdp__meta li > span:first-child {
	flex: 0 0 108px;
	max-width: 108px;
}

/* The "Browse the Collection" button was appended inside the plugin's empty
   message, which centres its contents, so the button landed on top of the text
   and squeezed it to one word per line. Lay the message out as a column. */
.woosw-popup-content-mid-message,
.woosw-page-content-mid-message,
.woosc-no-result {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	width: 100%;
	text-align: center;
}
.ard-empty-cta {
	margin: 0;
	flex: 0 0 auto;
	width: auto;
}

/* The quantity stepper draws its plus and minus from Font Awesome. Font Awesome
   now loads only on the shop pages, so on any page without it the glyphs are
   redrawn here rather than rendering as empty boxes. */
.ard-no-fa .quantity .decrease,
.ard-no-fa .quantity .increase {
	/* No position here: Minimog places these absolutely beside the input, and
	   absolute already anchors the ::before / ::after glyphs (7 Sep 2026). */
	font-size: 0;
}
.ard-no-fa .quantity .decrease::before,
.ard-no-fa .quantity .increase::before,
.ard-no-fa .quantity .increase::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.ard-no-fa .quantity .decrease::before,
.ard-no-fa .quantity .increase::before {
	width: 11px;
	height: 1.5px;
}
.ard-no-fa .quantity .increase::after {
	width: 1.5px;
	height: 11px;
}

/* =========================================================================
   9 Sep 2026 — product-page body copy matches the homepage
   ========================================================================= */

/* Homepage paragraphs are Cormorant Garamond 16-17px light; the PDP accordion
   answers (Specifications, Craftsmanship, Care) were Montserrat 15px, so the
   product page read as a spec sheet next to the editorial home. Same voice now.
   Labels, buttons, prices and the meta rows stay Montserrat. */
.ard-pdp__excerpt,
.ard-pdp__acc .ard-acc__a {
	font-family: var(--ard-serif);
	font-size: var(--ard-body-size); /* 17 Sep: sitewide token, ardori.css */
	line-height: var(--ard-body-lh);
	font-weight: 400;
}
.ard-pdp__acc .ard-acc__a strong,
.ard-pdp__acc .ard-acc__a b { font-weight: 600; }
.ard-pdp__acc .ard-acc__a .ard-link { font-family: var(--ard-sans); }
/* Shipping line and the Category / Availability values follow the body copy;
   the small uppercase labels stay Montserrat like the homepage eyebrows. */
.ard-pdp__ship,
.ard-pdp__meta li {
	font-family: var(--ard-serif);
	font-size: var(--ard-body-size);
	font-weight: 400;
}
.ard-pdp__meta li > span:first-child {
	font-family: var(--ard-sans);
	font-size: 10px;
}