/*
Theme Name:   CoinBazzar
Theme URI:    https://coinbazzar.com
Description:  Child theme of Flatsome for coinbazzar.com. All custom template overrides, CSS and front-end code live here rather than in the Code Snippets plugin or in the parent theme, so nothing is lost on a Flatsome update.
Author:       CoinBazzar
Author URI:   https://coinbazzar.com
Template:     flatsome
Version:      1.28.0
Text Domain:  coinbazzar
*/

/*
 * Flatsome already enqueues this file.
 *
 * inc/functions/function-setup.php:206 does
 *   wp_enqueue_style( 'flatsome-style', get_stylesheet_uri(), ... )
 * and get_stylesheet_uri() resolves to the *child* stylesheet once a child theme is
 * active. So there is deliberately no wp_enqueue_style() call in functions.php — adding
 * one, as most child-theme guides tell you to, would load this file twice.
 *
 * THE DESIGN LAYER LIVES HERE, ON PURPOSE
 * ---------------------------------------
 * The brief was "modern look, super light and fast". A separate stylesheet would have been
 * tidier to read and would have cost every visitor an extra request. This file is already
 * being downloaded on every page, so the refresh adds bytes but not round trips.
 *
 * COLOURS ARE NOT CHANGED
 * -----------------------
 * Every colour below is read from Flatsome's own variables or is CoinBazzar's existing
 * palette, taken from theme options rather than guessed:
 *
 *   primary   #fa7979      secondary #fab73d      nav bar  #f27676
 *   top bar   #0c0c0c      base text #4a4a4a      grey     #f4f4f4
 *   sale      #5bb819      regular   #c01010      badge    #bc0404
 *
 * Two exceptions, both agreed with the owner: the sticky bars were #1b7e34, the only green
 * on the site and in no theme option, and the nav hover was #51f9cf. Both now use the brand.
 *
 * WHAT "MODERN" MEANS HERE
 * ------------------------
 * Four decisions, applied everywhere, rather than a new look per page:
 *   radius     consistent, softer
 *   elevation  one shadow instead of hard borders in some places and none in others
 *   inputs     taller, calmer border, a focus ring you can actually see
 *   rhythm     one spacing scale
 * Structure and layout are untouched. Nothing here moves a field or a button.
 */

:root {
	--cbz-r-sm: 8px;
	--cbz-r: 12px;
	--cbz-r-lg: 16px;
	--cbz-pill: 999px;

	--cbz-line: #ececf0;
	--cbz-line-soft: #f4f4f6;
	--cbz-muted: #8a8a92;
	--cbz-faint: #b4b4bc;
	--cbz-ink: #2c2c31;

	--cbz-shadow: 0 1px 2px rgba(18, 18, 28, .04), 0 4px 14px rgba(18, 18, 28, .05);
	--cbz-shadow-lift: 0 4px 10px rgba(18, 18, 28, .07), 0 14px 34px rgba(18, 18, 28, .09);
	--cbz-ring: 0 0 0 3px rgba(250, 121, 121, .18);

	--cbz-t: .18s cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
 * 1 · Foundation
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .heading-font {
	letter-spacing: -.011em;
}

/* Flatsome sets these to a very tight leading on some headings. */
h1, h2, h3 {
	line-height: 1.25;
}

/* Buttons — same colours, less flat. */
.button,
button,
input[type="submit"],
.woocommerce-button,
a.button {
	border-radius: var(--cbz-r-sm);
	font-weight: 600;
	letter-spacing: .005em;
	transition: transform var(--cbz-t), box-shadow var(--cbz-t), background-color var(--cbz-t);
}

.button:not(.is-link):not(.is-outline):hover,
a.button:not(.is-link):not(.is-outline):hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: var(--cbz-shadow-lift);
}

.button:active,
a.button:active,
input[type="submit"]:active {
	transform: translateY(0);
}

/* The primary call to action reads as the primary call to action. */
.checkout-button,
#place_order,
.wc-proceed-to-checkout .button,
.single_add_to_cart_button {
	border-radius: var(--cbz-pill);
	padding-left: 2em;
	padding-right: 2em;
}

/* Inputs — the single biggest "old vs new" tell on a site this age. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.select2-container .select2-selection--single {
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r-sm);
	box-shadow: none;
	background-color: #fff;
	transition: border-color var(--cbz-t), box-shadow var(--cbz-t);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	border-color: var(--fs-color-primary, #fa7979);
	box-shadow: var(--cbz-ring);
	outline: 0;
}

/* WooCommerce's own invalid state, made visible rather than subtle. */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: #e08585;
	box-shadow: 0 0 0 3px rgba(224, 133, 133, .14);
}

/* -------------------------------------------------------------------------
 * 2 · Header, nav, search
 * ---------------------------------------------------------------------- */

/* The search box is section 9 — it needed more than a radius, so it has its own block
   rather than two half-rules in two places. */

.header-button .button,
.header-buttons .button {
	border-radius: var(--cbz-pill);
}

/* The pink category bar: same colour, calmer type. */
.nav-dropdown,
.header-nav .nav-dropdown {
	border-radius: var(--cbz-r);
	box-shadow: var(--cbz-shadow-lift);
	border: 0;
}

/* Agreed: the mint hover was in no theme option. Brand secondary instead. */
.nav-top-link:hover,
.header-nav-main .nav > li > a:hover {
	color: var(--fs-color-secondary, #fab73d) !important;
}

/* -------------------------------------------------------------------------
 * 3 · Cards — products, and anything boxed
 * ---------------------------------------------------------------------- */

.product-small.box,
.box-image,
.box-vertical .box-image {
	border-radius: var(--cbz-r);
	overflow: hidden;
}

.product-small.box {
	transition: transform var(--cbz-t), box-shadow var(--cbz-t);
}

.product-small.box:hover {
	transform: translateY(-2px);
}

.badge-container .badge-inner,
.badge .badge-inner {
	border-radius: var(--cbz-r-sm);
	font-weight: 700;
	letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
 * 4 · Cart, checkout, order received
 * ---------------------------------------------------------------------- */

.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-overview,
.woocommerce-MyAccount-content {
	border-radius: var(--cbz-r);
}

/* The order panel at checkout: one card, not a stack of rules. */
#order_review,
.woocommerce-checkout-review-order {
	background: #fff;
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r-lg);
	box-shadow: var(--cbz-shadow);
	padding: 20px 22px;
}

#order_review table,
.woocommerce-checkout-review-order-table {
	margin-bottom: 0;
}

#order_review table th,
#order_review table td,
.shop_table th,
.shop_table td {
	border-color: var(--cbz-line-soft);
}

.shop_table thead th {
	font-size: .74em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbz-faint);
	font-weight: 700;
}

tr.order-total td,
tr.order-total th {
	font-size: 1.05em;
	border-top: 1px solid var(--cbz-line);
}

/* Cart line items read as rows, not as a spreadsheet. */
.woocommerce-cart-form__cart-item td {
	padding-top: 16px;
	padding-bottom: 16px;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
	border-radius: var(--cbz-r-sm);
}

.quantity input[type="number"],
.quantity .qty {
	border-radius: var(--cbz-r-sm);
}

.cart_totals table,
.cart-sidebar .cart_totals {
	border-radius: var(--cbz-r);
}

/* Notices — WooCommerce's default is a grey slab. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.cbz-validate-notice .woocommerce-error {
	border-radius: var(--cbz-r);
	border: 0;
	box-shadow: var(--cbz-shadow);
}

/* Order received: the confirmation should feel like one. */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
	font-size: 1.05em;
	font-weight: 600;
	border-radius: var(--cbz-r);
	padding: 16px 18px;
}

.woocommerce-order-overview {
	border: 1px solid var(--cbz-line);
	box-shadow: var(--cbz-shadow);
	padding: 18px 20px;
	list-style: none;
	margin-left: 0;
}

.woocommerce-order-overview li {
	border: 0;
	padding: 6px 0;
}

/* The checkout steps line at the top of all three pages. */
.woocommerce-breadcrumb,
.checkout-breadcrumbs {
	letter-spacing: .06em;
}

/* -------------------------------------------------------------------------
 * 5 · My Account
 * ---------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin-left: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--cbz-r-sm);
	transition: background-color var(--cbz-t), color var(--cbz-t);
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--cbz-line-soft);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--fs-color-primary, #fa7979);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * 6 · Footer
 * ---------------------------------------------------------------------- */

.footer-widgets .widget-title,
#footer .widget-title {
	letter-spacing: .04em;
}

#footer a {
	transition: color var(--cbz-t), opacity var(--cbz-t);
}

/* -------------------------------------------------------------------------
 * 7 · Side cart
 *
 * Rendered on every page, so this stays CSS only — no images, no fonts, no
 * extra requests. The trust line it carries is in inc/sticky-bars.php.
 * ---------------------------------------------------------------------- */

.off-canvas-right .mfp-content,
.off-canvas .cart-sidebar {
	border-radius: 0;
}

.cart-sidebar .widget_shopping_cart_content {
	padding-top: 4px;
}

/* Vertical padding only.
 *
 * This was `padding: 14px 0`, which also zeroed the left padding Flatsome uses to clear the
 * floated thumbnail — so the product name ran straight over the image. Shorthand is the
 * wrong tool when the existing value on one side is load-bearing. */
.cart-sidebar .cart_list li,
.widget_shopping_cart_content .cart_list li {
	padding-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cbz-line-soft);
}

.cart-sidebar .cart_list li img,
.widget_shopping_cart_content .cart_list li img {
	border-radius: var(--cbz-r-sm);
}

.cart-sidebar .total,
.widget_shopping_cart_content .total {
	border-top: 1px solid var(--cbz-line);
	border-bottom: 0;
	padding-top: 14px;
	font-size: 1.05em;
}

.cart-sidebar .buttons a,
.widget_shopping_cart_content .buttons a {
	border-radius: var(--cbz-pill);
	font-weight: 600;
}

/* The trust line. Deliberately quiet: it should reassure, not shout. */
.cbz-trust {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: var(--cbz-r);
	background: #f7f9f6;
	border: 1px solid #e4ece0;
	font-size: .8rem;
	line-height: 1.55;
	color: #4a5a44;
}

.cbz-trust b {
	color: #3d5235;
	font-weight: 700;
}

.cbz-trust span {
	display: block;
	color: #7c8a76;
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
 * 8 · Mobile sticky bars
 *
 * Styling moved here from inc/sticky-bars.php so the bars inherit the design
 * layer instead of being restyled by hand — the owner's suggestion, and the
 * cheapest structural fix in this refresh.
 * ---------------------------------------------------------------------- */

.cart-sticky-checkout,
.checkout-sticky-pay,
.product-sticky-bar {
	box-shadow: 0 -2px 18px rgba(18, 18, 28, .10);
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
}

.cart-sticky-checkout a,
.checkout-sticky-pay button {
	background: var(--fs-color-primary, #fa7979);
	color: #fff;
	border: 0;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 0;
}

.cart-sticky-checkout a:hover,
.checkout-sticky-pay button:hover {
	background: #f56363;
	color: #fff;
}

.product-sticky-bar .add-to-cart-btn,
.product-sticky-bar .buy-now-btn {
	border-radius: var(--cbz-r-sm);
	font-weight: 700;
}

@media (max-width: 549px) {
	.checkout-sticky-pay button,
	.cart-sticky-checkout a {
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
 * 9 · The search box
 *
 * The most-used control on the site and, before this, the plainest: three
 * separate boxes sitting next to each other — a category select, a text field
 * and a submit button, each with its own border.
 *
 * Now one object. The parts keep their jobs and lose their outlines; the
 * container carries the border, and :focus-within lifts the whole thing when
 * the customer starts typing. Markup untouched — this is Flatsome's own
 * .searchform-wrapper > form > .flex-row.
 * ---------------------------------------------------------------------- */

/* Filled, not outlined.
 *
 * White-on-white was the problem: the header is #ffffff and a white field with a hairline
 * border all but disappears against it. A light fill gives the bar an edge without adding a
 * colour to the palette, and it goes white on focus so the field you are typing into is the
 * brightest thing in the header. */
.searchform-wrapper .searchform,
.header-search-form .searchform {
	background: #f4f4f7;
	border: 1px solid #e2e2ea;
	border-radius: var(--cbz-pill);
	box-shadow: inset 0 1px 2px rgba(18, 18, 28, .03);
	overflow: hidden;
	transition: background-color var(--cbz-t), border-color var(--cbz-t), box-shadow var(--cbz-t);
}

.searchform-wrapper .searchform:hover {
	border-color: #d4d4de;
}

.searchform-wrapper .searchform:focus-within,
.header-search-form .searchform:focus-within {
	background: #fff;
	border-color: var(--fs-color-primary, #fa7979);
	box-shadow: var(--cbz-ring);
}

/* The parts stop looking like parts. */
.searchform .search_categories,
.searchform .search-field,
.searchform input[type="search"],
.searchform input[type="text"] {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent;
	height: 46px;
	margin: 0;
}

.searchform .search-field:focus,
.searchform input[type="search"]:focus {
	box-shadow: none !important;
	border: 0 !important;
}

/* A hairline instead of a second border, so the category picker reads as part
   of the same control. */
.searchform .search-form-categories {
	position: relative;
}

.searchform .search-form-categories::after {
	content: "";
	position: absolute;
	right: 0;
	top: 11px;
	bottom: 11px;
	width: 1px;
	background: var(--cbz-line);
}

.searchform .search_categories {
	padding-left: 16px;
	padding-right: 22px;
	color: var(--cbz-muted);
	font-size: .88em;
	max-width: 150px;
}

.searchform .search-field,
.searchform input[type="search"] {
	padding-left: 16px;
	font-size: .95em;
}

.searchform .search-field::placeholder {
	color: var(--cbz-faint);
}

/* The submit sits inside the pill rather than beside it.
 *
 * !important on the radius alone, and deliberately: Flatsome ships
 * `border-radius: 0 999px 999px 0` for this button so it can sit flush against the end
 * of the field. That produced square left corners on a button that is now inset 4px —
 * round on one side, cut on the other. Specificity alone did not win it. */
.searchform-wrapper .searchform button[type="submit"],
.searchform-wrapper .searchform .ux-search-submit,
.searchform button[type="submit"],
.searchform .ux-search-submit,
.searchform .submit-button {
	border-radius: var(--cbz-pill) !important;
	height: 38px;
	min-width: 46px;
	margin: 0 4px 0 0;
	align-self: center;
	padding: 0 16px;
	border: 0;
	/* The gold from the logo. It was in theme options as `color_secondary` and used nowhere,
	   and it is the one brand colour that is neither the coral used for every other button
	   nor a status colour — so search stops competing with Add to cart for the same red. */
	background: var(--fs-color-secondary, #fab73d);
	color: #2c2c31;
	transition: background-color var(--cbz-t);
}

.searchform button[type="submit"]:hover,
.searchform .ux-search-submit:hover {
	background: #f0a92c;
	color: #2c2c31;
	transform: none;
	box-shadow: none;
}

.searchform button[type="submit"] i,
.searchform .ux-search-submit i,
.searchform button[type="submit"] svg {
	color: #2c2c31;
	fill: #2c2c31;
}

/*
 * Live results dropdown, if it appears — and with live search off, it does not.
 *
 * Flatsome prints this container in searchform.php whether or not the extension that fills it is
 * loaded. Empty, it still drew its own 1px top and bottom border: a 2px white hairline sitting
 * under the search box on every page. Measured, not assumed — 382 x 2, visible, zero children.
 *
 * :empty rather than display:none outright, so that turning live search back on in Theme Options
 * needs no change here: the moment something is inside it, this rule stops matching.
 */
.live-search-results:empty {
	display: none;
}

.searchform .live-search-results,
.ux-search-box .live-search-results {
	border-radius: var(--cbz-r);
	box-shadow: var(--cbz-shadow-lift);
	border: 1px solid var(--cbz-line);
	overflow: hidden;
	margin-top: 6px;
}

@media (max-width: 549px) {
	.searchform .search_categories {
		max-width: 92px;
		padding-left: 12px;
		font-size: .8em;
	}
}

/* -------------------------------------------------------------------------
 * 10 · Header
 * ---------------------------------------------------------------------- */

.header-cart-link,
.header-account-link,
.header .wishlist-link {
	transition: opacity var(--cbz-t), transform var(--cbz-t);
}

.header-cart-link:hover,
.header-account-link:hover {
	transform: translateY(-1px);
}

/* The cart / account pills in the header. */
.header .button.is-outline,
.header-button .button {
	border-width: 1px;
}

/* The sticky header, once it collapses, should read as a layer above the page. */
.header.has-sticky .stuck .header-inner,
.header-wrapper.stuck {
	box-shadow: 0 2px 14px rgba(18, 18, 28, .07);
}

/* -------------------------------------------------------------------------
 * 11 · Shop, category and product cards
 * ---------------------------------------------------------------------- */

.product-small .box-text {
	padding-top: 12px;
}

.product-small .product-title,
.woocommerce-loop-product__title {
	line-height: 1.4;
	font-weight: 600;
}

.product-small .price,
.price-wrapper .price {
	font-weight: 700;
}

/* The struck-through price keeps its colour. I had greyed it out here, which was wrong:
   #c01010 is `color_regular_price` in theme options — a colour the owner chose — and the
   brief was explicitly look, not colour. Weight is a look change; hue is not. */
.price del,
.price del .amount {
	font-weight: 400;
}

.price ins,
.price ins .amount {
	text-decoration: none;
}

/* Sale badge: a pill rather than a circle-with-a-shout. */
.badge-circle .badge-inner,
.badge.on-sale .badge-inner {
	border-radius: var(--cbz-pill);
	font-size: .74em;
	letter-spacing: .01em;
}

/* Filters and sidebar widgets on category pages. */
.shop-sidebar .widget,
.sidebar-inner .widget {
	border-radius: var(--cbz-r);
}

.widget > .widget-title,
.shop-sidebar .widget-title {
	font-size: .78em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cbz-muted);
}

.woocommerce-ordering select,
.woocommerce-result-count {
	border-radius: var(--cbz-r-sm);
}

/* Pagination. */
.page-numbers li a,
.page-numbers li span {
	border-radius: var(--cbz-r-sm);
	transition: background-color var(--cbz-t), color var(--cbz-t);
}

/* -------------------------------------------------------------------------
 * 12 · Product detail page
 * ---------------------------------------------------------------------- */

.product-gallery .woocommerce-product-gallery__image img,
.product-images img,
.product-thumbnails img {
	border-radius: var(--cbz-r);
}

.product-info .product_title {
	line-height: 1.25;
}

.product-info .price,
.product-page-price {
	font-weight: 700;
}

/*
 * .product_meta used to be in here, and this was the rule actually setting the
 * Categories and Tags size — .88em, which is 11.40px against the theme's 10.37px,
 * plus the muted grey. The spans inherited both, so removing the declarations
 * from the spans themselves (see §38) moved the size the wrong way, to 11.40px.
 * Taken out here instead, where it was coming from.
 *
 * .product-info .stock is left, though it matches nothing on this site's product
 * layout — .product-info is one of the class names §51 was written against and
 * does not exist here.
 */
.product-info .stock {
	color: var(--cbz-muted);
	font-size: .88em;
}

/* The tabs / accordions under the product. */
.woocommerce-tabs .tabs > li > a,
.accordion-title {
	border-radius: var(--cbz-r-sm) var(--cbz-r-sm) 0 0;
	font-weight: 600;
}

.accordion-item {
	border-radius: var(--cbz-r-sm);
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 13 · My Account
 * ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content {
	background: #fff;
}

.woocommerce-Address,
.woocommerce-Address-title {
	border-radius: var(--cbz-r);
}

.woocommerce-Address address {
	background: var(--cbz-line-soft);
	border-radius: var(--cbz-r);
	padding: 16px 18px;
	font-style: normal;
	line-height: 1.7;
	color: var(--cbz-ink);
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-form-login,
.woocommerce-form-register {
	border-radius: var(--cbz-r);
	border: 1px solid var(--cbz-line);
	padding: 20px 22px;
}

.account-item {
	border-radius: var(--cbz-r-sm);
}

/* -------------------------------------------------------------------------
 * 14 · Footer
 * ---------------------------------------------------------------------- */

#footer .cbz-footer-kpi,
#footer .cbz-footer-socialproof {
	border-radius: var(--cbz-r);
}

.absolute-footer {
	letter-spacing: .01em;
}

#footer .widget ul li a {
	transition: opacity var(--cbz-t), padding-left var(--cbz-t);
}

#footer .widget ul li a:hover {
	padding-left: 3px;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * 15 · Add to cart / Buy now — one treatment, both devices
 *
 * They disagreed. On desktop both were coral, so neither read as the primary
 * action; on the mobile sticky bar Add to cart was #f0f0f0 grey, which is
 * almost invisible, while Buy Now was coral. Same two buttons, three looks.
 *
 * Now: Add to cart is ink, Buy now is the brand coral. Maximum contrast on
 * white, a clear hierarchy between the two, and identical on both devices.
 * The search submit takes the logo's gold, so the three most-used controls on
 * the site are each distinct and none of them is competing for the same red.
 * ---------------------------------------------------------------------- */

.single_add_to_cart_button,
.product-sticky-bar .add-to-cart-btn,
.cbz-add-to-cart {
	background-color: #2c2c31 !important;
	color: #fff !important;
	border-color: #2c2c31 !important;
}

.single_add_to_cart_button:hover,
.product-sticky-bar .add-to-cart-btn:hover {
	background-color: #45454d !important;
	color: #fff !important;
}

.buy-now-btn,
.product-sticky-bar .buy-now-btn,
.cbz-buy-now,
a.buy-now-button {
	background-color: var(--fs-color-primary, #fa7979) !important;
	color: #fff !important;
	border-color: var(--fs-color-primary, #fa7979) !important;
}

.buy-now-btn:hover,
.product-sticky-bar .buy-now-btn:hover {
	background-color: #f56363 !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 16 · Cart and checkout on mobile
 *
 * Both pages carry their own action button *and* a sticky bar with the same
 * action, so the customer sees the same instruction twice and the page button
 * scrolls out of reach anyway. The sticky bar wins on mobile; the in-page
 * button stays for desktop, where there is no bar.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.woocommerce-cart .wc-proceed-to-checkout,
	.woocommerce-checkout #place_order,
	.woocommerce-checkout .woocommerce-checkout-payment .form-row.place-order {
		display: none !important;
	}

	/* Room for the bar, so the last row is never trapped underneath it. */
	.woocommerce-cart .content-area,
	.woocommerce-checkout .content-area {
		padding-bottom: 70px;
	}
}

/* -------------------------------------------------------------------------
 * 17 · Add to cart / Buy now — the selectors that actually exist
 *
 * Section 15 targeted `.buy-now-btn`, which is only the mobile sticky bar. On
 * the product page the button is `.ux-buy-now-button`, so Buy Now kept
 * Flatsome's coral while Add to cart got the pill radius from section 1 and
 * Buy Now kept 8px — two coral buttons of different shapes side by side, which
 * is what looked wrong.
 *
 * Both are the same shape and height now, and they say different things:
 * Add to cart is ink, Buy now is the brand coral. Ink on white is the highest
 * contrast available, so nothing here reduces visibility.
 * ---------------------------------------------------------------------- */

.single_add_to_cart_button,
button.single_add_to_cart_button,
.product-sticky-bar .add-to-cart-btn {
	background-color: #2c2c31 !important;
	border-color: #2c2c31 !important;
	color: #fff !important;
	border-radius: var(--cbz-pill) !important;
}

.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.product-sticky-bar .add-to-cart-btn:hover {
	background-color: #45454d !important;
	border-color: #45454d !important;
	color: #fff !important;
}

.ux-buy-now-button,
button.ux-buy-now-button,
.buy-now-btn,
.product-sticky-bar .buy-now-btn {
	background-color: var(--fs-color-primary, #fa7979) !important;
	border-color: var(--fs-color-primary, #fa7979) !important;
	color: #fff !important;
	border-radius: var(--cbz-pill) !important;
}

.ux-buy-now-button:hover,
button.ux-buy-now-button:hover,
.buy-now-btn:hover {
	background-color: #f56363 !important;
	border-color: #f56363 !important;
	color: #fff !important;
}

/* Same height, and enough room to breathe between them. */
.single_add_to_cart_button,
.ux-buy-now-button {
	height: 48px;
	line-height: 46px;
	padding: 0 2.2em;
	font-size: .95rem;
}

/* -------------------------------------------------------------------------
 * 18 · Header cluster — equal buttons, even gaps
 *
 * Measured before changing anything: heights ran 36, 36, 29, 30, 29 and the
 * gaps between them 49, 19, 35, 21, 36 px. Nothing lined up, and the space
 * after the search box was the widest of the lot.
 * ---------------------------------------------------------------------- */

.header-inner .header-button a.button,
.header-inner .header-button .button,
.header-inner .account-item > a,
.header-inner .header-cart-link,
.header-inner .wishlist-link {
	height: 38px !important;
	min-height: 38px;
	line-height: 36px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	margin-bottom: 0;
}

.header-inner .header-button a.button,
.header-inner .header-button .button {
	padding: 0 18px !important;
	font-size: .8rem;
	letter-spacing: .02em;
}

.header-inner .account-item > a,
.header-inner .header-cart-link,
.header-inner .wishlist-link {
	padding: 0 14px !important;
	font-size: .8rem;
}

/* One gap everywhere, including the one after the search box. */
.header-inner .flex-row-right > .flex-col,
.header-inner .header-nav-main > li,
.header-inner .nav > li {
	margin-left: 0;
	margin-right: 0;
	padding-left: 5px;
	padding-right: 5px;
}

.header-inner .searchform-wrapper {
	margin-right: 6px;
}

/* Flatsome's dividers were doing the spacing work unevenly. */
.header-inner .header-divider {
	margin: 0 4px;
}

/* -------------------------------------------------------------------------
 * 19 · Sidebar — product lists, categories, filters
 *
 * The thumbnail is absolutely positioned into a 75px gutter, so the row height
 * is set by the title. Titles here run to four lines, which made every row a
 * different height and the prices land at random. Tighter leading, an even
 * rhythm, and a floor under the row so short titles do not collapse.
 * ---------------------------------------------------------------------- */

.sidebar-inner .product_list_widget li,
.shop-sidebar .product_list_widget li,
.widget .product_list_widget li {
	padding: 14px 0 14px 76px !important;
	min-height: 74px;
	border-bottom: 1px solid var(--cbz-line-soft);
}

.sidebar-inner .product_list_widget li:last-child,
.widget .product_list_widget li:last-child {
	border-bottom: 0;
}

.sidebar-inner .product_list_widget li img,
.widget .product_list_widget li img {
	width: 60px !important;
	height: 60px !important;
	object-fit: cover;
	border-radius: var(--cbz-r-sm);
	top: 14px;
}

.sidebar-inner .product_list_widget li a,
.widget .product_list_widget li a {
	line-height: 1.42;
	font-size: .88em;
	font-weight: 500;
	display: block;
}

/* Price on its own line, so a long title can never push it into the title. */
.sidebar-inner .product_list_widget li .amount,
.widget .product_list_widget li .amount,
.sidebar-inner .product_list_widget li ins,
.sidebar-inner .product_list_widget li del {
	font-size: .88em;
}

.sidebar-inner .product_list_widget li del,
.widget .product_list_widget li del {
	margin-right: 5px;
	opacity: .75;
}

/* Category lists. */
.sidebar-inner .widget ul.product-categories li,
.shop-sidebar .widget ul li {
	border-bottom: 1px solid var(--cbz-line-soft);
}

.sidebar-inner .widget ul.product-categories li a,
.shop-sidebar .widget ul li a {
	padding: 9px 0;
	display: inline-block;
	transition: color var(--cbz-t), padding-left var(--cbz-t);
}

.sidebar-inner .widget ul.product-categories li a:hover,
.shop-sidebar .widget ul li a:hover {
	color: var(--fs-color-primary, #fa7979);
	padding-left: 3px;
}

.sidebar-inner .widget .count,
.shop-sidebar .widget .count {
	color: var(--cbz-faint);
	font-size: .82em;
}

/* The seller card on the product page. */
.sidebar-inner .widget {
	margin-bottom: 26px;
}

/* -------------------------------------------------------------------------
 * 20 · Shop, category, tag and search-results pages
 * ---------------------------------------------------------------------- */

.shop-page-title,
.page-title-inner,
.archive .page-title {
	border-bottom: 1px solid var(--cbz-line-soft);
}

.woocommerce-products-header__title,
.shop-page-title .page-title-inner h1 {
	letter-spacing: -.012em;
}

/* Result count and sort, on one calm line. */
.woocommerce-result-count {
	color: var(--cbz-muted);
	font-size: .86em;
}

.woocommerce-ordering select {
	height: 40px;
	font-size: .88em;
}

/* Active filter chips. */
.widget_layered_nav_filters ul li a,
.woocommerce-widget-layered-nav-list__item a {
	border-radius: var(--cbz-pill);
}

/* Nothing found — on a 38,000-product catalogue this page matters. */
.woocommerce-no-products-found,
.search-no-results .woocommerce-info {
	border-radius: var(--cbz-r);
	padding: 18px 20px;
}

/* Search results reuse the shop grid; keep the term readable. */
.search-results .page-title,
.search .shop-page-title {
	font-weight: 700;
}

/* Tag cloud widget — still pills, because there it is the whole content of the block. */
.tagcloud a {
	display: inline-block;
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-pill);
	padding: 4px 12px;
	margin: 0 5px 6px 0;
	font-size: .8em !important;
	color: var(--cbz-ink);
	transition: border-color var(--cbz-t), color var(--cbz-t), background-color var(--cbz-t);
}

.tagcloud a:hover {
	border-color: var(--fs-color-primary, #fa7979);
	color: var(--fs-color-primary, #fa7979);
	background: #fff6f6;
}

/*
 * Product-page tags are NOT pills. They were, and that was the cause the owner was pointing at:
 * a border plus 12px of side padding plus 6px of bottom margin, times forty-eight tags, wraps to
 * eight rows. Categories on the same block is plain text. These now match it exactly — see §38.
 */

/* -------------------------------------------------------------------------
 * 21 · Winning the Add-to-cart colour, properly
 *
 * Section 17 had !important and still lost. Flatsome writes an inline block
 * from theme options carrying
 *
 *   .button.alt, .button.checkout, … { background-color: #fa7979 !important }
 *
 * and the button is `single_add_to_cart_button button alt`, so `.button.alt`
 * matches at (0,2,0) while `button.single_add_to_cart_button` is only (0,1,1).
 * Two !important declarations means specificity decides, and theirs was higher.
 *
 * `.single_add_to_cart_button.button.alt` is (0,3,0) and settles it. Noted
 * because "add !important" is the reflex here and it was already there —
 * the answer was to read which rule was actually winning.
 * ---------------------------------------------------------------------- */

.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt {
	background-color: #2c2c31 !important;
	border-color: #2c2c31 !important;
	color: #fff !important;
}

.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button.button.alt:hover {
	background-color: #45454d !important;
	border-color: #45454d !important;
	color: #fff !important;
}

.ux-buy-now-button.button,
.ux-buy-now-button.button.primary,
button.ux-buy-now-button.button.primary {
	background-color: var(--fs-color-primary, #fa7979) !important;
	border-color: var(--fs-color-primary, #fa7979) !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 22 · Even header gaps
 *
 * After section 18 the heights matched but the gaps still ran 10, 22, 13, 24 —
 * Flatsome puts margins on some of these items and not others. One gap set on
 * the row, and the per-item margins zeroed, so it cannot drift again.
 * ---------------------------------------------------------------------- */

.header-inner .flex-row-right,
.header-inner .flex-right {
	gap: 8px;
}

.header-inner .flex-row-right > .flex-col,
.header-inner .flex-right > .flex-col {
	padding-left: 0;
	padding-right: 0;
}

.header-inner .header-button,
.header-inner .account-item,
.header-inner .header-divider + li,
.header-inner li.cart-item {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.header-inner .header-nav-main > li,
.header-inner .nav-right > li {
	margin: 0 4px;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 23 · Close the gap after the search box
 *
 * The 43px was not a margin anywhere — the search sits in ul.nav-left, whose
 * li ended at 606 while the ul itself ran to 649. Dead space inside the list.
 * Letting the search grow into it removes the gap and makes the field wider,
 * which is the other thing it needed.
 * ---------------------------------------------------------------------- */

.header-inner .header-nav-main.nav-left {
	flex: 1 1 auto;
}

.header-inner li.header-search-form {
	flex: 1 1 auto;
	width: 100%;
	/* 0 looked wrong the other way — the field and the first button touched. */
	padding-right: 14px;
}

.header-inner .header-search-form-wrapper,
.header-inner .searchform-wrapper {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 24 · Search suggestions dropdown
 * ---------------------------------------------------------------------- */

.searchform-wrapper { position: relative; }

.cbz-sg {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r);
	box-shadow: var(--cbz-shadow-lift);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}

.cbz-sg[hidden] { display: none; }

.cbz-sg-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--cbz-line-soft);
}

.cbz-sg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--cbz-pill);
	background: var(--cbz-line-soft);
	color: var(--cbz-ink);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.4;
}

.cbz-sg-chip i { font-style: normal; color: var(--cbz-faint); font-weight: 500; }
.cbz-sg-chip:hover, .cbz-sg-chip.is-active { background: var(--fs-color-secondary, #fab73d); color: #2c2c31; }

.cbz-sg-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	color: var(--cbz-ink);
	border-bottom: 1px solid var(--cbz-line-soft);
}

.cbz-sg-item:last-child { border-bottom: 0; }
.cbz-sg-item:hover, .cbz-sg-item.is-active { background: #fff6f6; color: var(--cbz-ink); }

.cbz-sg-thumb {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: var(--cbz-r-sm);
	background: var(--cbz-line-soft);
	overflow: hidden;
}

.cbz-sg-thumb img { width: 46px; height: 46px; object-fit: cover; display: block; }

.cbz-sg-body { min-width: 0; flex: 1; }

.cbz-sg-title {
	display: block;
	font-size: .86rem;
	line-height: 1.4;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cbz-sg-meta { display: flex; gap: 10px; align-items: baseline; margin-top: 3px; }
.cbz-sg-meta b { font-size: .84rem; font-weight: 700; }
.cbz-sg-meta em { font-style: normal; font-size: .74rem; color: #b02a2a; }

.cbz-sg-item.is-out .cbz-sg-thumb img { opacity: .5; }

.cbz-sg-all {
	display: block;
	padding: 12px 14px;
	text-align: center;
	font-size: .82rem;
	font-weight: 700;
	color: var(--fs-color-primary, #fa7979);
	background: var(--cbz-line-soft);
}

.cbz-sg-all:hover, .cbz-sg-all.is-active { background: #fff0f0; }

.cbz-sg-none { padding: 18px 16px; text-align: center; }
.cbz-sg-none strong { display: block; font-size: .88rem; }
.cbz-sg-none span { display: block; font-size: .78rem; color: var(--cbz-muted); margin-top: 4px; }

@media (max-width: 549px) {
	.cbz-sg { max-height: 60vh; }
	.cbz-sg-title { -webkit-line-clamp: 2; }
}

/* -------------------------------------------------------------------------
 * 25 · Mobile fixes
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* -- The logo. 53x13px is not a brand, it is a smudge. The room was always there:
	      max-height was 70px and nothing was using it. Buttons give up the width. -- */
	.header-inner .logo img,
	#logo img {
		max-height: 46px !important;
		width: auto !important;
		height: auto !important;
	}

	.header-inner .header-button a.button,
	.header-inner .header-button .button {
		padding: 0 12px !important;
		font-size: .72rem;
		height: 34px !important;
		line-height: 32px !important;
	}

	.header-inner .header-cart-link,
	.header-inner .wishlist-link,
	.header-inner .account-item > a {
		height: 34px !important;
		padding: 0 10px !important;
	}

	/* -- The side cart.
	      First attempt padded three nested elements at once, so 78px became 156px of dead
	      space, and because the totals and buttons flow after the list inside the same
	      padded box, they were pushed up over the items instead of clear of them.
	      Padding was the wrong tool entirely. The panel is position:fixed at full viewport
	      height, so it simply has to end where the bottom navigation begins — then every
	      child lays out correctly on its own and nothing needs shifting. -- */
	.mfp-content.off-canvas-cart,
	.off-canvas-right .mfp-content {
		height: calc(100% - 65px) !important;
		max-height: calc(100% - 65px) !important;
		bottom: calc(65px + env(safe-area-inset-bottom)) !important;
		top: auto !important;
		padding-bottom: 0;
	}

	.off-canvas-cart .cart-sidebar,
	.off-canvas-cart .widget_shopping_cart_content,
	.off-canvas-cart .cart-popup-inner {
		padding-bottom: 0;
	}

	/* The buttons block reads as solid rather than as a haze over the items behind it. */
	.off-canvas-cart .woocommerce-mini-cart__buttons,
	.cart-sidebar .buttons {
		background: #fff;
		border-top: 1px solid var(--cbz-line);
		margin-bottom: 0;
		padding-top: 12px;
	}

	/* -- Carousel rows. Titles run from one line to four, `equalize-box` takes the tallest,
	      and every shorter slide leaves the difference as empty space — measured at 145 to
	      202px of it on the homepage. Two lines for everyone means every card is the same
	      height and the gap has nothing to come from. -- */
	.row.equalize-box .product-small .product-title,
	.row.equalize-box .box-text .name,
	.row.equalize-box .woocommerce-loop-product__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.8em;
	}
}

/* -------------------------------------------------------------------------
 * 26 · Cart count on the bottom navigation
 *
 * Rendered by inc/sticky-bars.php and refreshed through WooCommerce's own
 * fragment mechanism, so it follows an AJAX add-to-cart instead of showing
 * whatever was true when the page was built.
 * ---------------------------------------------------------------------- */

.mobile-sticky-footer .cbz-nav-ico {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mobile-sticky-footer .cbz-nav-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--cbz-pill);
	background: var(--fs-color-primary, #fa7979);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

.mobile-sticky-footer .cbz-nav-count.is-empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * 27 · Zero-result recovery
 * ---------------------------------------------------------------------- */

.cbz-recover { margin: 22px 0 8px; }

.cbz-recover-lead {
	font-size: .92rem;
	font-weight: 600;
	color: var(--cbz-ink);
	margin: 22px 0 12px;
}

.cbz-recover-cats { display: flex; flex-wrap: wrap; gap: 8px; }

.cbz-recover-cats a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: var(--cbz-pill);
	background: var(--cbz-line-soft);
	color: var(--cbz-ink);
	font-size: .84rem;
	font-weight: 600;
	transition: background-color var(--cbz-t), color var(--cbz-t);
}

.cbz-recover-cats a i { font-style: normal; color: var(--cbz-faint); font-weight: 500; }
.cbz-recover-cats a:hover { background: var(--fs-color-secondary, #fab73d); color: #2c2c31; }

.cbz-recover-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.cbz-recover-item {
	display: block;
	color: var(--cbz-ink);
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r);
	overflow: hidden;
	transition: transform var(--cbz-t), box-shadow var(--cbz-t);
}

.cbz-recover-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--cbz-shadow);
	color: var(--cbz-ink);
}

.cbz-recover-thumb { display: block; background: var(--cbz-line-soft); }
.cbz-recover-thumb img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; }

.cbz-recover-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 10px 12px 0;
	font-size: .82rem;
	line-height: 1.4;
}

.cbz-recover-price {
	display: block;
	padding: 6px 12px 12px;
	font-size: .84rem;
	font-weight: 700;
}

.cbz-recover-price em { display: block; font-style: normal; font-size: .74rem; font-weight: 500; color: #b02a2a; }
.cbz-recover-item.is-out .cbz-recover-thumb img { opacity: .55; }

/* -------------------------------------------------------------------------
 * 28 · Filter and sort, side by side on mobile
 *
 * Both already live in the same flex row — `.page-title-inner` — but
 * `medium-flex-wrap` drops them onto separate centred lines on a phone, so a
 * FILTER link and a Relevance dropdown between them ate about 110px of vertical
 * space before a single product appeared.
 *
 * Two equal controls on one line, the way a shopping app does it. No markup
 * changes: the elements are already siblings, they were only being wrapped.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.shop-page-title .page-title-inner,
	.archive .page-title-inner {
		/* Flatsome switches this row to `flex-direction: column` on mobile, which is why
		   nowrap alone changed nothing — they were not wrapping, they were stacking. */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 10px;
		padding: 10px 15px !important;
		min-height: 0;
	}

	.page-title-inner > .category-filtering,
	.page-title-inner > .flex-col {
		display: flex;
		align-items: center;
		flex: 1 1 50%;
		width: 50%;
		max-width: 50%;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center;
	}

	/* Both controls read as the same kind of thing. */
	.page-title-inner .filter-button,
	.page-title-inner .woocommerce-ordering select {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid var(--cbz-line);
		border-radius: var(--cbz-r-sm);
		background: #fff;
		font-size: .82rem;
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--cbz-ink);
		line-height: 42px;
	}

	.page-title-inner .category-filtering,
	.page-title-inner .woocommerce-ordering,
	.page-title-inner .woocommerce-ordering form {
		display: block;
		width: 100%;
		margin: 0;
	}

	.page-title-inner .woocommerce-ordering select {
		display: block;
		text-align: center;
		text-align-last: center;
		appearance: none;
		-webkit-appearance: none;
		background-image: linear-gradient(45deg, transparent 50%, var(--cbz-muted) 50%),
		                  linear-gradient(135deg, var(--cbz-muted) 50%, transparent 50%);
		background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
		padding-right: 26px;
	}

	.page-title-inner .filter-button:active,
	.page-title-inner .woocommerce-ordering select:focus {
		border-color: var(--fs-color-primary, #fa7979);
	}

	/* The row itself stops pretending to be a page header. */
	.shop-page-title.page-title,
	.archive .shop-page-title {
		border-bottom: 1px solid var(--cbz-line-soft);
		margin-bottom: 12px;
	}

	/* The result count sits above them rather than adding a third line between. */
	.page-title-inner .woocommerce-result-count {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 29 · Filter and sort, actually on one line
 *
 * Section 28 got them beside each other but not level, and the row still ate
 * 104px for 42px of controls. Measured rather than eyeballed:
 *
 *   .page-title-inner        104px tall
 *   filter column             83px   (.category-filtering carries padding: 10px 0)
 *   filter button at y         248
 *   sort column               42px
 *   sort control at y          258   <- the 10px offset
 *
 * So the filter's own padding was pushing it up out of line while the row
 * stretched to hold it. Both columns are pinned to the control height and
 * centred, and the padding goes.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.shop-page-title .page-title-inner,
	.archive .page-title-inner {
		min-height: 0;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.page-title-inner > .flex-col,
	.page-title-inner > .flex-col.flex-grow {
		display: flex !important;
		align-items: center;
		height: 42px;
		min-height: 42px;
	}

	.page-title-inner .category-filtering,
	.page-title-inner .category-filter-row {
		padding: 0 !important;
		margin: 0 !important;
		width: 100%;
		height: 42px;
		display: block;
	}

	.page-title-inner .filter-button {
		height: 42px;
		line-height: 40px;
		gap: 7px;
	}

	.page-title-inner .filter-button strong {
		line-height: 40px;
		font-weight: 600;
	}

	.page-title-inner .filter-button i {
		font-size: 15px;
		line-height: 40px;
	}

	/* The whole strip stops being a page header and becomes a toolbar. */
	.shop-page-title.page-title,
	.archive .shop-page-title {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * 30 · The homepage gap, finally measured
 *
 * Not margin, not equalize-box, and — proven by disabling this stylesheet at
 * runtime and re-measuring — not anything I added. Measured at 375px:
 *
 *   .slider-wrapper                155px
 *   .slider.slider-style-shadow    padding 15px top / 25px bottom
 *   the banner inside it           115px
 *   .flickity-page-dots            NOT RENDERED
 *   nav buttons                    NOT RENDERED
 *
 * So 40px per slider is reserved for pagination dots and a shadow that never
 * appear, because Flickity is not initialising on these sliders. On a desktop
 * that is a rounding error next to the page width; on a 375px phone it is a
 * visible band of nothing, several times down the homepage — which is exactly
 * where the owner said it shows and where it does not.
 *
 * Written to correct itself rather than to assume: the padding is removed only
 * while there are no dots. If Flickity ever does initialise and draw them, the
 * rule stops matching and the space comes back on its own. A browser without
 * :has() ignores the whole thing and gets today's behaviour.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.slider-wrapper .slider:not(:has(.flickity-page-dots)) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.slider-wrapper:not(:has(.flickity-page-dots)) {
		margin-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
 * 31 · Slug on its own line, controls beneath
 *
 * Measured: the breadcrumb and the FILTER link share one 163px flex column, so
 * "HOME / SHOP / DIAMOND" was folding onto two lines inside half a phone.
 *
 * `display: contents` on that column dissolves it as a box while keeping its
 * children, so the breadcrumb and the filter become direct children of the flex
 * row and can be placed independently — breadcrumb full width on top, filter
 * and sort sharing the line below. No markup change and no absolute
 * positioning, which is the other way to do this and the one that breaks the
 * moment anything around it moves.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.shop-page-title .page-title-inner,
	.archive .page-title-inner {
		flex-wrap: wrap !important;
		row-gap: 8px;
	}

	/* !important because section 29 above sets `display: flex !important` on the same element —
	   my own earlier rule, and it was quietly winning. */
	.page-title-inner > .flex-col.flex-grow {
		display: contents !important;
		height: auto !important;
	}

	/* The slug: whole width, first, and on one line. */
	.page-title-inner .breadcrumbs,
	.page-title-inner .woocommerce-breadcrumb {
		order: -1;
		flex: 0 0 100%;
		width: 100%;
		margin: 0;
		padding: 0 0 2px;
		font-size: .72rem;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--cbz-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		line-height: 1.4;
	}

	.page-title-inner .breadcrumbs a,
	.page-title-inner .woocommerce-breadcrumb a {
		color: var(--cbz-muted);
	}

	/* Filter and sort share the line under it. */
	.page-title-inner > .category-filtering,
	.page-title-inner > .flex-col:not(.flex-grow) {
		flex: 1 1 calc(50% - 5px);
		width: calc(50% - 5px);
		max-width: calc(50% - 5px);
	}

	.page-title-inner > .category-filtering {
		height: 42px;
		display: block;
		padding: 0 !important;
		margin: 0 !important;
	}
}

/* -------------------------------------------------------------------------
 * 32 · The slug row, targeted at what is actually there
 *
 * Two things section 31 got wrong, both found by listing the effective flex
 * children rather than assuming them.
 *
 * The breadcrumb is not `.breadcrumbs` — it is a plain `div.is-small`, so every
 * selector naming the breadcrumb missed it entirely.
 *
 * And `display: contents` changes how a box renders, not where it sits in the
 * DOM, so `.page-title-inner > .category-filtering` still does not match: the
 * filter's DOM parent is the dissolved column, not the row. Child combinators
 * have to be written against the real tree even when the rendering says
 * otherwise.
 *
 * Layout wanted, and now measured against: slug alone on top, filter and sort
 * sharing the line beneath it.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* The slug. */
	.page-title-inner .flex-col.flex-grow > .is-small {
		order: -1;
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Filter — half the line, beside the sort control. */
	/* flex-basis 0 with grow, not a calc: two calc(50% - 5px) boxes came to 346px against 345px
	   of room and wrapped on the odd pixel. Letting them divide what is there cannot round wrong. */
	.page-title-inner .flex-col.flex-grow > .category-filtering {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		order: 1;
	}

	/* Sort — the other half. */
	.page-title-inner > .flex-col:not(.flex-grow) {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		order: 2;
	}

	.shop-page-title .page-title-inner,
	.archive .page-title-inner {
		column-gap: 10px;
		row-gap: 6px;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * 33 · Side cart: the list scrolls, the total and buttons stay put
 *
 * Capping the panel at the bottom navigation was not enough. Measured with the
 * panel at 747px:
 *
 *   .mfp-content.off-canvas-cart   747px, overflow hidden auto
 *   .cart-popup-inner              812px, overflow visible   <- still full viewport
 *   panel scrollHeight             812px
 *
 * So the inner box was 65px taller than the box holding it and allowed to spill.
 * With a couple of items that is invisible; with five it is the totals and the
 * CHECKOUT button drawn over the products, which is what the owner photographed
 * twice.
 *
 * Column layout instead of padding arithmetic: the inner fills the panel, the
 * item list takes the space left over and scrolls inside it, and the total and
 * buttons sit after it at their natural height. Any number of items lands the
 * same way, which the previous versions could not promise.
 * ---------------------------------------------------------------------- */

/* The chain from the panel down, in the right direction.
 * The first attempt set `height: 100%` on `.cart-popup-inner > div` — the children of the
 * inner rather than the wrapper above it — so the unnamed div between the panel and the inner
 * stayed at 642px inside a 747px panel and nothing below could reach the bottom. */
.off-canvas-cart {
	display: flex;
	flex-direction: column;
}

.off-canvas-cart > div {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	height: auto !important;
}

.off-canvas-cart .cart-popup-inner {
	flex: 1 1 auto;
	height: auto !important;
	max-height: none !important;
}

.off-canvas-cart .cart-popup-inner,
.off-canvas-cart .widget_shopping_cart,
.off-canvas-cart .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.off-canvas-cart .widget_shopping_cart,
.off-canvas-cart .widget_shopping_cart_content {
	flex: 1 1 auto;
	height: auto !important;
	max-height: none !important;
}

/* The only part that scrolls. */
.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 0;
}

/* Held at the bottom, above the list, solid so nothing shows through. */
.off-canvas-cart .widget_shopping_cart_content .total,
.off-canvas-cart .widget_shopping_cart_content .buttons {
	flex: 0 0 auto;
	background: #fff;
	position: relative;
	z-index: 2;
	margin-bottom: 0;
}

.off-canvas-cart .widget_shopping_cart_content .total {
	/* Pushed to the bottom of the column, so the two buttons sit at the foot of the panel
	   whether the cart holds one item or twelve. This is what "sticky" means here — the list
	   scrolls behind them and they do not move. */
	margin-top: auto;
	border-top: 1px solid var(--cbz-line);
	padding-top: 12px;
}

.off-canvas-cart .widget_shopping_cart_content .buttons {
	padding-top: 10px;
	padding-bottom: 4px;
}

/* -------------------------------------------------------------------------
 * 34 · The two buttons at the foot of the side cart
 *
 * They were not pinned because something was sitting under them: the trust line
 * I added earlier renders as `.header-cart-content`, a sibling *after*
 * `.widget_shopping_cart`, taking 101px at the bottom of the panel. So the
 * buttons ended at 586 with the panel bottom at 747, and the space below them
 * was not empty — it was the reassurance line.
 *
 * Moved above the cart rather than removed. It reads better before the buttons
 * anyway: reassure, then ask for the click. And the widget now takes the rest of
 * the panel so the buttons land at the foot of it.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .header-cart-content {
	order: -1;
	flex: 0 0 auto;
	padding-bottom: 4px;
}

.off-canvas-cart .cart-popup-title {
	order: -2;
	flex: 0 0 auto;
}

.off-canvas-cart .widget_shopping_cart {
	order: 0;
	flex: 1 1 auto !important;
	min-height: 0;
}

/* The list gives up its slack so the total and buttons can be pushed down. */
.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list {
	flex: 0 1 auto !important;
}

.off-canvas-cart .widget_shopping_cart_content {
	justify-content: flex-start;
}

/* -------------------------------------------------------------------------
 * 35 · Pin them, without relying on the chain stretching
 *
 * Three rounds of making each box in the chain grow left 131px under the
 * buttons every time — the widget was still not filling what its parent gave
 * it, and chasing that further is guesswork against Flatsome's own layout.
 *
 * `justify-content: space-between` does not care. The list, the total and the
 * buttons are the three children of one flex column; the first goes to the top,
 * the last to the bottom, and whatever height the box turns out to be is
 * correct by construction.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .widget_shopping_cart,
.off-canvas-cart .widget_shopping_cart_content {
	height: 100% !important;
	justify-content: space-between;
}

/* The list keeps the top and scrolls; nothing else moves. */
.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list {
	flex: 0 1 auto !important;
	overflow-y: auto;
	min-height: 0;
}

.off-canvas-cart .widget_shopping_cart_content .total {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * 36 · Side cart items: let them be as tall as they are
 *
 * The quantity switcher was not missing, it was cut off. Measured:
 *
 *   .woocommerce-mini-cart-item   height 80px, scrollHeight 101px, overflow hidden
 *   .ux-mini-cart-qty             28px, sitting past the 80px cut
 *
 * A row holding a two-line title, a seller line and a stepper does not fit in
 * 80px, and with overflow hidden the stepper is simply not drawn. Nothing here
 * needs a fixed height — the row should be as tall as what is in it.
 *
 * And the trust line was 105px of a 747px panel on a phone, which is a lot of
 * reassurance to charge against the space for reading your own basket. Compact
 * on mobile, unchanged on desktop.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .woocommerce-mini-cart-item,
.off-canvas-cart .cart_list li,
.off-canvas-cart .mini_cart_item {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	padding: 12px 32px 12px 76px !important;
}

/* The stepper, given room and made worth tapping. */
.off-canvas-cart .ux-mini-cart-qty,
.off-canvas-cart .quantity.buttons {
	margin-top: 6px;
	overflow: visible !important;
}

.off-canvas-cart .ux-quantity input.qty,
.off-canvas-cart .quantity input.qty {
	height: 30px;
	min-width: 34px;
	text-align: center;
}

.off-canvas-cart .ux-quantity .minus,
.off-canvas-cart .ux-quantity .plus,
.off-canvas-cart .quantity .minus,
.off-canvas-cart .quantity .plus {
	width: 30px;
	height: 30px;
	line-height: 28px;
}

/* Seller line: readable, and not competing with the title. */
.off-canvas-cart .woocommerce-mini-cart-item .variation,
.off-canvas-cart .mini_cart_item .variation {
	margin: 3px 0 0;
	font-size: .74rem;
	line-height: 1.35;
	color: var(--cbz-muted);
}

.off-canvas-cart .woocommerce-mini-cart-item .variation dt,
.off-canvas-cart .woocommerce-mini-cart-item .variation dd {
	display: inline;
	margin: 0;
	font-weight: 500;
}

/* Title: two lines is enough to recognise a coin; the rest is scroll space. */
.off-canvas-cart .woocommerce-mini-cart-item > a:not(.remove),
.off-canvas-cart .mini_cart_item > a:not(.remove) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .84rem;
	line-height: 1.35;
}

@media (max-width: 767px) {
	/* Reassurance, compact. Same words, a third of the height. */
	.off-canvas-cart .cbz-trust {
		margin-top: 8px;
		padding: 8px 11px;
		font-size: .74rem;
		line-height: 1.4;
	}

	.off-canvas-cart .cbz-trust span {
		display: inline;
	}

	.off-canvas-cart .cart-popup-title {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* The list gets whatever is left, and it is the only thing that scrolls. */
	.off-canvas-cart .woocommerce-mini-cart,
	.off-canvas-cart .cart_list {
		flex: 1 1 auto !important;
		min-height: 120px;
	}
}

/* -------------------------------------------------------------------------
 * 37 · Stop the rows being squeezed
 *
 * `height: auto` was not the fix: the row went from 80px to 38px while its
 * content still needed 87px. The list is a flex column — so each row is a flex
 * item, and flex items shrink by default. With the list's height capped, the
 * rows were being compressed to fit and the stepper squeezed out of view.
 *
 * flex: 0 0 auto — every row keeps its natural height, and the list scrolls
 * instead of crushing them. Which is what a basket should do.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .woocommerce-mini-cart > li,
.off-canvas-cart .cart_list > li,
.off-canvas-cart .woocommerce-mini-cart-item {
	flex: 0 0 auto !important;
	display: block !important;
}

/* -------------------------------------------------------------------------
 * 38 · Tags read like Categories, because that is what they are
 *
 * The previous version of this section clipped the list to two rows behind a
 * fade and opened it on :hover. The owner rejected it, correctly: on a phone
 * there is no hover, so it opened when you were trying to tap a tag under it,
 * and hiding something is not the same as fixing why it was too big.
 *
 * Two real causes, both now addressed. The pill styling was mine (see §20) and
 * is gone — plain inline links, identical to the Categories line above. The
 * count is capped at CBZ_TAGS_VISIBLE in inc/product-tags.php, with the rest in
 * the HTML behind a "+N more" that opens on a tap. Nothing is deleted; the
 * measured average is 42.7 tags per product and pruning that is the owner's
 * editorial call, not something to infer from tag counts.
 * ---------------------------------------------------------------------- */

/*
 * Size and colour left at the theme's own, after I shrank both too far.
 *
 * I had .82em and var(--cbz-muted) here. Measured against the theme with this
 * stylesheet disabled:
 *
 *                  theme default    what I had
 *   font-size        10.37px          9.35px
 *   line-height      16.59px         14.96px
 *   colour         rgb(74,74,74)   rgb(138,138,146)
 *
 * The owner asked for the default size back. The colour goes with it: at 9.35px
 * that grey is 4.0:1 on white where the theme's is 8.9:1, so the two changes were
 * the same complaint — the line had become hard to read. Say the word if the
 * muted grey is wanted back and it is one line.
 *
 * display:block stays. It is what puts Categories and Tags on their own lines,
 * and it changes no dimension.
 */
.product_meta .posted_in,
.product_meta .tagged_as {
	display: block;
}

/*
 * Undoes the pill styling only. No colour, no hover of its own.
 *
 * I had color: var(--cbz-ink) and a pink hover here, which left the two lines
 * looking unlike each other after all: Categories links measured rgb(51,72,98),
 * the theme's link colour, and Tags links rgb(44,44,49). The whole point was for
 * Tags to read exactly like Categories, so the tags now take whatever the theme
 * gives a link, and the two are identical.
 */
.tagged_as a,
.product_meta .tagged_as a {
	display: inline;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 1em !important;
}

/* The toggle is a link, not a control — it should not read as a third button. */
.cbz-tag-more {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 6px;
	font: inherit;
	color: var(--fs-color-primary, #fa7979);
	text-decoration: underline;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 39 · The button system
 *
 * WHAT THE NUMBERS SAY, AND WHAT THEY DO NOT
 * ------------------------------------------
 * There is a great deal written about button colour and very little of it
 * survives contact with evidence. The famous "red beat green by 21%" is one A/B
 * test on one page from 2011, and what it varied was contrast, not hue. Colour
 * meaning is also cultural — the Western "red = danger" reading does not
 * transfer to an Indian numismatics audience, where red and gold read as
 * auspicious.
 *
 * What is measurable is contrast, and CoinBazzar had a real problem:
 *
 *   #fa7979 against white          2.60:1   weak
 *   white text on #fa7979          2.60:1   FAILS WCAG AA (needs 4.50)
 *   dark text on #fa7979           5.34:1   passes
 *   dark text on #fab73d           7.88:1   passes comfortably
 *
 * So every CTA on the site was white text on a colour it fails against. That is
 * not a matter of taste.
 *
 * And it is exactly the trap the big marketplaces avoid. Amazon's #ff9900 is
 * 2.14:1 against white and Flipkart's #ffe11b is 1.31:1 — both far "worse" than
 * CoinBazzar's coral — yet both are highly legible, because they put **dark
 * text** on them (6.49:1 and 10.61:1). The pattern is not a magic hue. It is a
 * warm, saturated colour carrying dark text, reserved for one action.
 *
 * THE SYSTEM
 * ----------
 *   commit    gold #fab73d + ink text   Buy Now · Checkout · Place Order
 *   add       coral #fa7979 + ink text  Add to cart · View Cart
 *   neutral   ink                       search, and anything not a purchase
 *
 * Both colours are CoinBazzar's own, from theme options. Nothing new was
 * invented; the change is which text sits on them and that only one of them
 * means "commit".
 *
 * No claim is made here about a conversion lift. What can be claimed is that
 * the text is now readable and that one action is visually distinct from the
 * rest, which is the part of this the evidence actually supports.
 * ---------------------------------------------------------------------- */

/* Not pills. */
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt,
.ux-buy-now-button.button,
.ux-buy-now-button.button.primary,
button.ux-buy-now-button.button.primary,
.product-sticky-bar .add-to-cart-btn,
.product-sticky-bar .buy-now-btn,
.checkout-button,
#place_order,
.wc-proceed-to-checkout .button,
.off-canvas-cart .buttons a {
	border-radius: 8px !important;
}

/* Commit — gold, dark text. */
.ux-buy-now-button.button,
.ux-buy-now-button.button.primary,
button.ux-buy-now-button.button.primary,
.product-sticky-bar .buy-now-btn,
.checkout-button,
#place_order,
.wc-proceed-to-checkout .button,
.checkout-sticky-pay button,
.cart-sticky-checkout a,
.off-canvas-cart .buttons a.checkout {
	background-color: var(--fs-color-secondary, #fab73d) !important;
	border-color: var(--fs-color-secondary, #fab73d) !important;
	color: #2c2c31 !important;
	font-weight: 700;
}

.ux-buy-now-button.button:hover,
.product-sticky-bar .buy-now-btn:hover,
.checkout-button:hover,
#place_order:hover,
.wc-proceed-to-checkout .button:hover,
.checkout-sticky-pay button:hover,
.cart-sticky-checkout a:hover,
.off-canvas-cart .buttons a.checkout:hover {
	background-color: #efa92b !important;
	border-color: #efa92b !important;
	color: #2c2c31 !important;
}

/* Add — coral, dark text. Brand colour kept, contrast fixed. */
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt,
.product-sticky-bar .add-to-cart-btn,
.off-canvas-cart .buttons a:not(.checkout) {
	background-color: var(--fs-color-primary, #fa7979) !important;
	border-color: var(--fs-color-primary, #fa7979) !important;
	color: #2c2c31 !important;
	font-weight: 700;
}

.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button.alt:hover,
.product-sticky-bar .add-to-cart-btn:hover,
.off-canvas-cart .buttons a:not(.checkout):hover {
	background-color: #f76a6a !important;
	border-color: #f76a6a !important;
	color: #2c2c31 !important;
}

/* Search stops competing with the two purchase colours. */
.searchform-wrapper .searchform button[type="submit"],
.searchform-wrapper .searchform .ux-search-submit,
.searchform button[type="submit"],
.searchform .ux-search-submit {
	background: #2c2c31 !important;
	color: #fff !important;
}

.searchform button[type="submit"] i,
.searchform .ux-search-submit i {
	color: #fff !important;
}

.searchform button[type="submit"]:hover,
.searchform .ux-search-submit:hover {
	background: #45454d !important;
}

/* -------------------------------------------------------------------------
 * 40 · Owner's call on the three buttons
 *
 * Search back to the gold it had, Add to cart to the green the sticky bar used
 * to carry, Buy Now left alone to see how it performs.
 *
 * Checked before applying rather than after: #1b7e34 with white text is 5.15:1,
 * so it passes AA — this is the one place the old green was doing no harm, and
 * it gives the two product buttons genuinely different colours, which is worth
 * more than either hue on its own.
 *
 * One consequence worth naming: search and Buy Now are now both gold. They are
 * never adjacent, so it is liveable, but "gold means buy" is slightly diluted by
 * it. Easy to revisit if Buy Now is measured against something else later.
 * ---------------------------------------------------------------------- */

/* Search — gold, as it was. */
.searchform-wrapper .searchform button[type="submit"],
.searchform-wrapper .searchform .ux-search-submit,
.searchform button[type="submit"],
.searchform .ux-search-submit {
	background: var(--fs-color-secondary, #fab73d) !important;
	color: #2c2c31 !important;
}

.searchform button[type="submit"] i,
.searchform .ux-search-submit i {
	color: #2c2c31 !important;
}

.searchform button[type="submit"]:hover,
.searchform .ux-search-submit:hover {
	background: #efa92b !important;
}

/* Add to cart — green, white text. 5.15:1, AA. */
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt,
.product-sticky-bar .add-to-cart-btn,
.off-canvas-cart .buttons a:not(.checkout) {
	background-color: #1b7e34 !important;
	border-color: #1b7e34 !important;
	color: #fff !important;
}

.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button.button.alt:hover,
.product-sticky-bar .add-to-cart-btn:hover,
.off-canvas-cart .buttons a:not(.checkout):hover {
	background-color: #16692b !important;
	border-color: #16692b !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 41 · Place Order — gold, and this time winning the cascade
 *
 * It was still coral: `#place_order` in section 39 lost to Flatsome's inline
 * `.button.checkout` rule, the same (0,2,0) specificity problem as Add to cart.
 * `button#place_order.button` settles it.
 *
 * GREEN, and the first version of this comment argued the opposite.
 *
 * I reasoned that the pale trust box above it (#f4fbf4) would swallow a green
 * button. Then I measured, and it is the other way round: green against that
 * panel is 4.89:1, gold is 1.68:1. The panel is a green so pale it is nearly
 * white, so a dark green button stands out on it and a light gold one does not.
 *
 * The number that settles it is simpler still. As a shape on a white page:
 *
 *   green #1b7e34   5.15   visible
 *   gold  #fab73d   1.76   dissolves
 *   coral #fa7979   2.60   dissolves
 *
 * Gold has excellent *text* contrast (7.88) and almost no *button* contrast.
 * You read the label and never see the button. Amazon gets away with the same
 * yellow because their buttons sit in bordered grey panels; CoinBazzar pages
 * are white, so the edge has to come from the fill.
 *
 * The semantic cost is real and worth naming: green now means both "add to
 * basket" and "pay". That is a coherent reading — green is "yes, continue" all
 * the way through, gold is the Buy Now shortcut — but it is a trade, not a free
 * win.
 * ---------------------------------------------------------------------- */

button#place_order.button,
#place_order.button,
.woocommerce-checkout-payment #place_order,
.button.checkout#place_order {
	background-color: #1b7e34 !important;
	border-color: #1b7e34 !important;
	color: #fff !important;
	font-weight: 700;
}

button#place_order.button:hover,
#place_order.button:hover {
	background-color: #16692b !important;
	border-color: #16692b !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * 42 · The swap — and it makes the system coherent
 *
 * Owner's call: Add to cart and Buy Now trade colours, View Cart and Checkout
 * trade colours, and the cart page's Proceed to Checkout goes green.
 *
 * Worth noting because it is better than what it replaces. Before, green meant
 * "add to basket" on the product page and "pay" at checkout — the same colour
 * for a reversible action and an irreversible one. After the swap each colour
 * means exactly one thing everywhere:
 *
 *   green   commit      Buy Now · Checkout · Proceed to Checkout · Place Order
 *   gold    consider    Add to cart · View Cart · Search
 *
 * And it puts the stronger colour on the stronger action. Green is 5.15:1
 * against a white page and gold is 1.76:1, so the buttons that take money are
 * now the ones you can actually see, and the ones that only fill a basket are
 * quieter. That is the right way round.
 *
 * This block is last on purpose: it overrides sections 39, 40 and 41 rather
 * than editing them, so the reasoning that led here stays readable above.
 * ---------------------------------------------------------------------- */

/* COMMIT — green, white text. 5.15:1. */
.ux-buy-now-button.button,
.ux-buy-now-button.button.primary,
button.ux-buy-now-button.button.primary,
.product-sticky-bar .buy-now-btn,
.buy-now-btn,
.checkout-button,
.wc-proceed-to-checkout .button,
.wc-proceed-to-checkout a.checkout-button,
.cart-sticky-checkout a,
.checkout-sticky-pay button,
.off-canvas-cart .buttons a.checkout,
button#place_order.button,
#place_order.button {
	background-color: #1b7e34 !important;
	border-color: #1b7e34 !important;
	color: #fff !important;
	font-weight: 700;
}

.ux-buy-now-button.button:hover,
button.ux-buy-now-button.button.primary:hover,
.product-sticky-bar .buy-now-btn:hover,
.checkout-button:hover,
.wc-proceed-to-checkout .button:hover,
.cart-sticky-checkout a:hover,
.checkout-sticky-pay button:hover,
.off-canvas-cart .buttons a.checkout:hover,
button#place_order.button:hover,
#place_order.button:hover {
	background-color: #16692b !important;
	border-color: #16692b !important;
	color: #fff !important;
}

/* CONSIDER — gold, ink text. 7.88:1 on the label. */
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt,
.product-sticky-bar .add-to-cart-btn,
.off-canvas-cart .buttons a:not(.checkout) {
	background-color: var(--fs-color-secondary, #fab73d) !important;
	border-color: var(--fs-color-secondary, #fab73d) !important;
	color: #2c2c31 !important;
	font-weight: 700;
}

.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button.button.alt:hover,
.product-sticky-bar .add-to-cart-btn:hover,
.off-canvas-cart .buttons a:not(.checkout):hover {
	background-color: #efa92b !important;
	border-color: #efa92b !important;
	color: #2c2c31 !important;
}

/* -------------------------------------------------------------------------
 * 43 · Side cart polish
 * ---------------------------------------------------------------------- */

/* Trust strip and the item list both move up — the heading was taking more
   room than a two-word label needs. */
.off-canvas-cart .cart-popup-title {
	padding-top: 0 !important;
	padding-bottom: 2px !important;
	margin-bottom: 0;
}

.off-canvas-cart .cbz-trust {
	margin-top: 2px !important;
	margin-bottom: 6px;
}

.off-canvas-cart .woocommerce-mini-cart {
	padding-top: 0;
	margin-top: 0;
}

/* A scrollbar from 2009 replaced with one that gets out of the way. */
.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list {
	scrollbar-width: thin;
	scrollbar-color: #cfcfd6 transparent;
	overscroll-behavior: contain;
}

.off-canvas-cart .woocommerce-mini-cart::-webkit-scrollbar,
.off-canvas-cart .cart_list::-webkit-scrollbar {
	width: 4px;
}

.off-canvas-cart .woocommerce-mini-cart::-webkit-scrollbar-track,
.off-canvas-cart .cart_list::-webkit-scrollbar-track {
	background: transparent;
}

.off-canvas-cart .woocommerce-mini-cart::-webkit-scrollbar-thumb,
.off-canvas-cart .cart_list::-webkit-scrollbar-thumb {
	background: #d4d4dc;
	border-radius: 999px;
}

.off-canvas-cart .woocommerce-mini-cart::-webkit-scrollbar-thumb:hover,
.off-canvas-cart .cart_list::-webkit-scrollbar-thumb:hover {
	background: #b8b8c2;
}

/* The white strip behind the two buttons ran to the padding, not the panel, so
   it read as a floating card with a seam either side. Edge to edge, with the
   panel's padding given back inside it. */
.off-canvas-cart .widget_shopping_cart_content .total,
.off-canvas-cart .widget_shopping_cart_content .buttons {
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;
}

.off-canvas-cart .widget_shopping_cart_content .total {
	border-top: 1px solid var(--cbz-line);
	box-shadow: 0 -6px 14px rgba(18, 18, 28, .05);
}

.off-canvas-cart .widget_shopping_cart_content .buttons {
	padding-bottom: 14px;
	border-top: 0;
}

.off-canvas-cart .widget_shopping_cart_content .buttons a {
	margin-bottom: 8px;
}

.off-canvas-cart .widget_shopping_cart_content .buttons a:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 44 · The quantity stepper
 *
 * Three controls that had drifted into three different sizes. One row, one
 * height, a border around the set rather than around each piece.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .ux-mini-cart-qty,
.off-canvas-cart .ux-quantity,
.off-canvas-cart .quantity.buttons {
	display: inline-flex !important;
	align-items: stretch;
	width: auto;
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r-sm);
	overflow: hidden;
	background: #fff;
	margin-top: 8px;
	height: 30px;
}

.off-canvas-cart .ux-quantity .minus,
.off-canvas-cart .ux-quantity .plus,
.off-canvas-cart .quantity .minus,
.off-canvas-cart .quantity .plus,
.off-canvas-cart .ux-mini-cart-qty .minus,
.off-canvas-cart .ux-mini-cart-qty .plus {
	width: 30px !important;
	height: 28px !important;
	min-height: 0 !important;
	line-height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fafafb !important;
	color: var(--cbz-ink) !important;
	font-size: 15px !important;
	font-weight: 600;
	box-shadow: none !important;
	transform: none !important;
}

.off-canvas-cart .ux-quantity .minus:hover,
.off-canvas-cart .ux-quantity .plus:hover,
.off-canvas-cart .quantity .minus:hover,
.off-canvas-cart .quantity .plus:hover {
	background: #f0f0f3 !important;
	color: var(--cbz-ink) !important;
}

.off-canvas-cart .ux-quantity input.qty,
.off-canvas-cart .quantity input.qty,
.off-canvas-cart .ux-mini-cart-qty input.qty {
	width: 36px !important;
	min-width: 36px;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--cbz-line) !important;
	border-right: 1px solid var(--cbz-line) !important;
	border-radius: 0 !important;
	text-align: center;
	font-size: .82rem;
	font-weight: 600;
	box-shadow: none !important;
	background: #fff !important;
	-moz-appearance: textfield;
}

.off-canvas-cart input.qty::-webkit-outer-spin-button,
.off-canvas-cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 45 · The gap under the mini cart block on product pages
 * ---------------------------------------------------------------------- */

.single-product .header-cart-content:empty,
.single-product .widget_shopping_cart:empty {
	display: none;
}

.single-product .off-canvas-cart .cart-popup-inner > div:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * 46 · Corrections to 43 and 44, from measuring the result
 *
 * `.ux-mini-cart-qty` is not the stepper — it is the row that holds the stepper
 * *and* the line price, so the border I put on it enclosed both and the price
 * ended up looking like part of the control. The stepper is `.ux-quantity`
 * inside it.
 *
 * And the white strip behind the buttons was still inset: I compensated for
 * 20px of panel padding and it is 10px, so it came up 10px short on each side.
 * Rather than chase the number — which differs between breakpoints — the strip
 * is painted by a pseudo-element that runs past the panel on both sides. It
 * cannot be short.
 * ---------------------------------------------------------------------- */

/* The row: no border, just spacing. */
.off-canvas-cart .ux-mini-cart-qty {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
	height: auto !important;
	margin-top: 8px;
}

/* The stepper alone carries the frame. */
.off-canvas-cart .ux-mini-cart-qty .ux-quantity,
.off-canvas-cart .ux-quantity {
	display: inline-flex !important;
	align-items: stretch;
	width: auto !important;
	height: 30px;
	margin: 0 !important;
	border: 1px solid var(--cbz-line);
	border-radius: var(--cbz-r-sm);
	overflow: hidden;
	background: #fff;
}

.off-canvas-cart .ux-mini-cart-qty .product-subtotal,
.off-canvas-cart .ux-mini-cart-qty .amount {
	font-weight: 700;
	font-size: .86rem;
	white-space: nowrap;
}

/* The strip, painted wider than the panel so padding cannot leave a seam. */
.off-canvas-cart .widget_shopping_cart_content .total,
.off-canvas-cart .widget_shopping_cart_content .buttons {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
}

.off-canvas-cart .widget_shopping_cart_content .total::before,
.off-canvas-cart .widget_shopping_cart_content .buttons::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40px;
	right: -40px;
	background: #fff;
	z-index: -1;
}

.off-canvas-cart .widget_shopping_cart_content .total::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40px;
	right: -40px;
	height: 1px;
	background: var(--cbz-line);
}

.off-canvas-cart .widget_shopping_cart_content .total {
	border-top: 0;
	box-shadow: none;
	padding-top: 12px;
}

/* -------------------------------------------------------------------------
 * 47 · The mini-cart strip, actually reaching the edges
 *
 * The pseudo-element from section 46 was correct and invisible: section 33 puts
 * `overflow: hidden` on `.widget_shopping_cart_content`, which clipped the very
 * thing that was supposed to run past the panel. The overflow was never needed
 * there — the list has its own — so it goes, and the strip reaches.
 * ---------------------------------------------------------------------- */

.off-canvas-cart .widget_shopping_cart_content,
.off-canvas-cart .widget_shopping_cart,
.off-canvas-cart .cart-popup-inner {
	overflow: visible !important;
}

.off-canvas-cart .woocommerce-mini-cart,
.off-canvas-cart .cart_list {
	overflow-y: auto !important;
	overflow-x: hidden;
}

/* -------------------------------------------------------------------------
 * 48 · The product page on a phone, the way the app does it
 *
 * ANSWERING THE QUESTION RATHER THAN JUST HIDING THINGS
 * ----------------------------------------------------
 * The owner asked the right one: if the in-page Add to cart and Buy Now come off
 * the phone layout, where does someone choose a quantity?
 *
 * In the CoinBazzar app it is a labelled row — "Select Product Count" on the
 * left, a stepper on the right — sitting above the fixed bar. That is the
 * pattern here: the row stays and gains a label, the duplicate buttons go, and
 * the bar reads whatever the stepper says. One place to choose, one place to
 * act.
 *
 * The row only appears when there is a choice to make. WooCommerce hides the
 * quantity field entirely on a one-of-a-kind item — which most coins here are —
 * and a "Select Product Count" label above a control that cannot move would be
 * worse than nothing.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* The duplicate pair goes; the fixed bar is the one that is always reachable. */
	.single-product form.cart .single_add_to_cart_button,
	.single-product form.cart .ux-buy-now-button {
		display: none !important;
	}

	/* The quantity row becomes the app's "Select Product Count". */
	.single-product form.cart {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 4px 0 14px;
		padding: 12px 14px;
		border: 1px solid var(--cbz-line);
		border-radius: var(--cbz-r);
		background: #fff;
	}

	/* Nothing to choose — no row. */
	.single-product form.cart:not(:has(.quantity:not(.hidden))) {
		display: none !important;
	}

	.single-product form.cart .quantity.hidden {
		display: none !important;
	}

	.single-product form.cart::before {
		content: "Select Product Count";
		font-size: .88rem;
		font-weight: 600;
		color: var(--cbz-ink);
	}

	.single-product form.cart .quantity {
		display: inline-flex !important;
		align-items: stretch;
		height: 40px;
		margin: 0 !important;
		border: 1px solid var(--cbz-line);
		border-radius: var(--cbz-r-sm);
		overflow: hidden;
		background: #fff;
		flex: 0 0 auto;
	}

	.single-product form.cart .quantity .ux-quantity__button,
	.single-product form.cart .quantity input[type="button"] {
		width: 40px !important;
		height: 38px !important;
		min-height: 0 !important;
		line-height: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #fafafb !important;
		color: var(--cbz-ink) !important;
		font-size: 17px !important;
		font-weight: 600;
		box-shadow: none !important;
		transform: none !important;
	}

	.single-product form.cart .quantity input.qty {
		width: 46px !important;
		min-width: 46px;
		height: 38px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-left: 1px solid var(--cbz-line) !important;
		border-right: 1px solid var(--cbz-line) !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: .92rem;
		font-weight: 700;
		background: #fff !important;
		box-shadow: none !important;
		-moz-appearance: textfield;
	}

	.single-product form.cart input.qty::-webkit-outer-spin-button,
	.single-product form.cart input.qty::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

/* -------------------------------------------------------------------------
 * 49 · No "View cart" stuck in the bar
 *
 * WooCommerce appends a `.added_to_cart` link beside whatever was clicked, so
 * the sticky bar ended up holding a permanent "VIEW CART →" where Add to cart
 * had been — and with it gone, a customer who wanted a second one had no way
 * back. A message that appears and leaves is the right shape for "done"; a
 * button that replaces the action is not.
 * ---------------------------------------------------------------------- */

.product-sticky-bar .added_to_cart,
.product-sticky-bar .added_to_cart.wc-forward {
	display: none !important;
}

.cbz-toast {
	position: fixed;
	left: 50%;
	bottom: 84px;
	transform: translate(-50%, 12px);
	z-index: 100000;
	max-width: 88vw;
	padding: 11px 18px;
	border-radius: var(--cbz-pill);
	background: #1b7e34;
	color: #fff;
	font-size: .84rem;
	font-weight: 600;
	box-shadow: 0 6px 22px rgba(18, 18, 28, .22);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	display: flex;
	align-items: center;
	gap: 9px;
}

.cbz-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.cbz-toast a {
	color: #fff;
	text-decoration: underline;
	font-weight: 700;
	pointer-events: auto;
}

@media (min-width: 768px) {
	.cbz-toast { bottom: 28px; }
}

/* -------------------------------------------------------------------------
 * 50 · The side cart, sized to whichever bar is actually there
 *
 * The panel reserved 65px at the bottom because that is the bottom navigation's
 * height. On a product page the bottom navigation is not there — the product bar
 * is, and it is 50px — so the panel stopped 15px short and left a strip of page
 * showing beneath it. Which is exactly why the owner saw the gap on product
 * pages and nowhere else.
 *
 * Two rules instead of one guess, keyed to the page WooCommerce says it is on.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.single-product .mfp-content.off-canvas-cart,
	.single-product .off-canvas-right .mfp-content {
		height: calc(100% - 50px) !important;
		max-height: calc(100% - 50px) !important;
		bottom: calc(50px + env(safe-area-inset-bottom)) !important;
	}

	/* Cart and checkout carry a 54px bar of their own. */
	.woocommerce-cart .mfp-content.off-canvas-cart,
	.woocommerce-checkout .mfp-content.off-canvas-cart {
		height: calc(100% - 54px) !important;
		max-height: calc(100% - 54px) !important;
		bottom: calc(54px + env(safe-area-inset-bottom)) !important;
	}
}

/* -------------------------------------------------------------------------
 * 51 · Product page on a phone — app feel
 *
 * Not a redesign. The app reads as a sequence of cards with air between them and
 * a clear order: gallery, then what it is and what it costs, then the one choice
 * to make, then the detail. The page already has those parts in that order; they
 * were just running together as one column of text.
 *
 * ⚠️ REWRITTEN — SEVEN OF THESE RULES NEVER APPLIED
 * ------------------------------------------------
 * I wrote the first version of this section from WooCommerce's and Flatsome's
 * default class names. This site builds its product page with Flatsome's `custom`
 * layout in UX Builder, which emits different ones. Counted on the live page:
 *
 *   .single-product .product-info                        0 elements
 *   .woocommerce-product-details__short-description       0
 *   .woocommerce-tabs                                     0
 *   .woocommerce-tabs .accordion-title                    0
 *   .single-product .product-gallery                      0
 *   .single-product .product-images                       0
 *   .single-product .content-area                         0
 *
 * So of everything below, only .product_meta ever received the card treatment —
 * which is exactly why the page still read as one undifferentiated column. The
 * names it actually uses are .woocommerce-product-gallery, .product-short-description
 * and .product-page-accordian. Taken from the DOM this time, not from the theme
 * I assumed was rendering it.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	/*
	 * Gallery to the edges, the way a phone app shows a photo.
	 *
	 * TWO WRONG ATTEMPTS BEFORE THIS ONE, BOTH THE SAME MISTAKE
	 * --------------------------------------------------------
	 * First: margin -15px each side, width calc(100% + 30px). That assumed the
	 * column carried 15px of padding. It carries 10px, so the gallery came out
	 * 386px inside a 375px viewport and body.scrollWidth went to 380.
	 *
	 * Second: drop the column's own side padding instead, which I claimed "cannot
	 * overshoot". It overshot worse — 385. Flatsome's rows carry -10px gutter
	 * margins that are cancelled by exactly that column padding, so removing it
	 * left div.row.row-small spanning -10px to 385px and took the thumbnail strip
	 * with it. Removing padding is not neutral when something downstream is built
	 * against it.
	 *
	 * This one asks neither how much padding there is nor who depends on it: the
	 * margins resolve against the viewport, so the element reaches both edges
	 * whatever its container does. No transform, because Flickity measures this
	 * element and a transformed ancestor changes what it reads.
	 */
	.single-product .woocommerce-product-gallery {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: auto;
		max-width: none;
	}

	.single-product .woocommerce-product-gallery__image img {
		border-radius: 0;
	}

	.single-product .product-thumbnails {
		padding: 8px 15px 0;
	}

	/*
	 * Title block: breadcrumb small, name tight, price loud.
	 *
	 * ⚠️ SCOPED TO THE ONE PRODUCT, AFTER THESE HIT ALL TWENTY
	 * -------------------------------------------------------
	 * These were written as `.single-product .product-title` and
	 * `.single-product .price-wrapper .price`. `.single-product` is a body class,
	 * not the product summary — so "make the name and price bigger" applied to
	 * every card in Related Products and Top Featured Items as well, all twenty
	 * of them. Measured against the shop page, which is the default the owner
	 * wants:
	 *
	 *                      shop card    related card
	 *   title font-size      11.0px        17.9px
	 *   title height         59px          143px   (six lines, unclamped)
	 *   price font-size      11.0px        20.5px
	 *   price weight         700           800
	 *   card height          326px         456px
	 *
	 * Now hung off the three containers the layout's own shortcodes emit —
	 * .product-title-container, .product-price-container, .add-to-cart-container —
	 * which exist once per page. A card has none of them, so a card cannot be
	 * caught by these again.
	 */
	.single-product .product-title-container .product-title,
	.single-product .product-title.product_title {
		font-size: 1.12rem;
		line-height: 1.32;
		margin: 8px 0 6px;
	}

	.single-product .product-price-container .price {
		font-size: 1.28rem;
		font-weight: 800;
	}

	.single-product .product-price-container del {
		font-size: .86rem;
		font-weight: 400;
	}

	.single-product .add-to-cart-container > .stock {
		font-size: .84rem;
		font-weight: 600;
	}

	/*
	 * Each block becomes a card with air, rather than one run of text.
	 *
	 * Same -15px-into-10px-of-padding error as the gallery had: these three sat at
	 * left -5px, 385px wide. Same viewport-relative fix, and the side padding is
	 * put back explicitly so the text still lines up with the rest of the column.
	 */
	.single-product .product-short-description,
	.single-product .product-page-accordian,
	.single-product .product_meta {
		border-top: 8px solid var(--cbz-line-soft);
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 14px 15px 4px;
	}

	.single-product .product-page-accordian .accordion-title {
		font-size: .92rem;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

/* -------------------------------------------------------------------------
 * 52 · Space management, from the measurements rather than by eye
 *
 * The owner asked for the whole page to use its space properly. Walked the
 * summary column on a 375×812 viewport and recorded every block's height, its
 * margins and the gap to the next one. Total document height 6,367px — 7.8
 * screens for one product. Where it was going:
 *
 *   ul.ux-products-list        663px   seven accessory upsells, 95px per row
 *   two layout paragraphs      147px   the app-download link and the trust line
 *   <p>&nbsp;</p>               38px   nothing at all
 *   price -> Add to cart        26px
 *   dead gaps, all of them     110px
 *
 * So the gaps were never the story; 110px across the whole column is fine. The
 * block sizes were. Each number below is one of those measurements brought down,
 * and nothing is deleted — the upsells, the download link and the trust line are
 * all content the owner put there on purpose.
 *
 * The empty paragraph cannot be reached from CSS: it holds &nbsp;, so :empty does
 * not match it. It is removed in cbz-slider-eager.js instead.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	/*
	 * 26px between the price and the one thing to do about it.
	 *
	 * Setting margin-bottom on the container did nothing and the gap stayed at 27px.
	 * The two boxes are adjacent siblings with zero margins and nothing between them,
	 * so the space was not theirs: .price-wrapper's own bottom margin collapses
	 * through its parent and lands outside the parent's box, where
	 * getBoundingClientRect cannot see it. Zeroing it on the child is what works.
	 */
	.single-product .product-price-container,
	.single-product .product-price-container .price-wrapper,
	.single-product .product-price-container .price {
		margin-bottom: 0;
	}

	.single-product .add-to-cart-container {
		margin-top: 12px;
	}

	/* Scoped for the same reason as §51's — cards carry .stock too. */
	.single-product .add-to-cart-container > .stock {
		margin-bottom: 8px !important;
	}

	/*
	 * The two unclassed paragraphs in the summary column — the Coinage of India
	 * link and the "100% Genuine Item's" line, which also carries the Highlights
	 * heading for the description under it. Both stay; they just stop reserving a
	 * full line-height of margin each.
	 */
	.single-product .col.medium-7 > .col-inner > p {
		margin-bottom: 10px;
		line-height: 1.45;
	}

	/* Meta block: the padding was 14/4 with 5px on each span inside it. */
	.single-product .product_meta {
		padding: 12px 15px;
		margin-bottom: 0;
	}

	/*
	 * The 5px the theme puts on each of these stays. I had squeezed it to 1px as
	 * part of the space pass; between them that is 16px, and it came out of the two
	 * lines the owner actually reads. Line-height is left alone too — the theme's
	 * 1.6 is what it already was.
	 */
	.single-product .product_meta .posted_in,
	.single-product .product_meta .tagged_as {
		padding: 5px 0;
	}

	/*
	 * The upsell list: seven rows at 95px. The thumbnail is a 100px file drawn at
	 * 100px next to two lines of text, so the row is as tall as the picture rather
	 * than as tall as its content. 64px thumb, title clamped to two lines.
	 */
	.single-product ul.ux-products-list > li {
		padding: 8px 0 !important;
	}

	.single-product ul.ux-products-list > li img {
		width: 64px !important;
		height: 64px !important;
		border-radius: var(--cbz-r-sm);
	}

	.single-product ul.ux-products-list .product-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.35;
	}

	/* Room for the fixed bar so the last block is never trapped under it. */
	.single-product .col.medium-12 > .col-inner {
		padding-bottom: 8px;
	}
}

/* -------------------------------------------------------------------------
 * 53 · The Highlights label
 *
 * The seller's short description had no label, so it read as loose text between
 * the buy button and the accordions. This names it, and nothing more — see
 * inc/product-highlights.php for why nothing more.
 *
 * Sized to the accordion titles under it rather than to a heading scale of its
 * own: "Highlights", "Description", "Additional information" and "Reviews" are
 * four labels for four blocks of the same kind, and they should look like it.
 * §51 sets those to .92rem, so this matches.
 * ---------------------------------------------------------------------- */

.cbz-highlights-title {
	margin: 0 0 8px;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cbz-ink);
	letter-spacing: 0;
	text-transform: none;
}