/*
Theme Name:        Bradley Storefront Child
Theme URI:         https://kiro-inc.com/
Description:       Child theme of Storefront for Bradley Smoker Israel. Hebrew RTL, dark/ember palette lifted from the bradleysmokers_il.html template.
Author:            KIRO Ltd
Author URI:        https://kiro-inc.com/
Template:          storefront
Version:           0.1.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       bradley-storefront-child
Tags:              dark, e-commerce, woocommerce, rtl-language-support
*/

/* ------------------------------------------------------------------
 * Google Fonts — same families used by the HTML template
 * ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700;800;900&family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Karla:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------------
 * Design tokens (lifted from bradleysmokers_il.html)
 * Edit values here to retheme the whole site.
 * ------------------------------------------------------------------ */
:root {
	/* Coal — dark backgrounds */
	--coal-900: #0a0706;
	--coal-800: #13100d;
	--coal-700: #1d1814;
	--coal-600: #28221c;
	--coal-500: #3a3028;

	/* Ember — primary accent */
	--ember-700: #b23906;
	--ember-600: #d04706;
	--ember-500: #e8590c;
	--ember-400: #f4810d;
	--ember-300: #ffa94d;

	/* Cream — text on dark */
	--cream-100: #faf4e8;
	--cream-200: #f0e6d2;
	--cream-300: #d6c7a8;
	--cream-400: #a8967e;

	/* Leaf — secondary (kept for parity with the template, used sparingly) */
	--leaf-500: #5a8f4a;
	--leaf-600: #4a7c3a;

	/* Semantic aliases — use these in rules below */
	--bg-base:      var(--coal-900);
	--bg-elevated:  var(--coal-800);
	--bg-card:      var(--coal-700);
	--text-primary: var(--cream-100);
	--text-secondary: var(--cream-300);
	--text-muted:   var(--cream-400);
	--border-color: var(--coal-500);
	--accent:       var(--ember-500);
	--accent-hover: var(--ember-600);
}

/* ------------------------------------------------------------------
 * Base — dark canvas
 * ------------------------------------------------------------------ */
html,
body {
	background: var(--bg-base);
}

body {
	font-family: 'Rubik', 'Karla', sans-serif;
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Atmospheric glow (from the HTML template) */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 15% 10%, rgba(232, 89, 12, 0.08), transparent 40%),
		radial-gradient(circle at 85% 90%, rgba(232, 89, 12, 0.05), transparent 40%);
	pointer-events: none;
	z-index: 0;
}

/* Make sure real content paints above the glow */
#page,
.site {
	position: relative;
	z-index: 1;
	background: var(--bg-base);
}

/* ------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: 'Oswald', 'Rubik', sans-serif;
	color: var(--text-primary);
	letter-spacing: 0.01em;
}

/* In Hebrew (RTL) the template uses Rubik for headers — Oswald has no real Hebrew glyphs. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .site-title {
	font-family: 'Rubik', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
}

p, li, td, th, label {
	color: var(--text-primary);
}

a {
	color: var(--accent);
	transition: color 0.2s ease;
}
a:hover,
a:focus {
	color: var(--ember-400);
}

/* ------------------------------------------------------------------
 * Site chrome (Storefront's header + footer)
 * ------------------------------------------------------------------ */
.site-header {
	background: var(--bg-elevated);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-primary);
}
.site-header a {
	color: var(--text-primary);
}
.site-header a:hover {
	color: var(--accent);
}

.main-navigation ul li a {
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.875rem;
}

.site-footer {
	background: var(--coal-800);
	color: var(--text-secondary);
	border-top: 1px solid var(--border-color);
}
.site-footer a {
	color: var(--text-secondary);
}
.site-footer a:hover {
	color: var(--accent);
}

/* ------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	border-radius: 2px;
	padding: 0.85rem 1.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(232, 89, 12, 0.25);
	transition: all 0.2s ease;
	text-decoration: none;
}
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(232, 89, 12, 0.35);
}

/* "Ghost" / secondary button variant */
.button.alt-secondary,
.woocommerce a.button.alt-secondary {
	background: transparent;
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	box-shadow: none;
}
.button.alt-secondary:hover,
.woocommerce a.button.alt-secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: transparent;
}

/* ------------------------------------------------------------------
 * WooCommerce — product cards
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	padding: 1rem;
	transition: all 0.3s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--text-primary);
}
.woocommerce ul.products li.product .price {
	color: var(--accent);
	font-weight: 700;
	font-family: 'Rubik', sans-serif;
}
.woocommerce ul.products li.product .price del {
	color: var(--text-muted);
}

/* ------------------------------------------------------------------
 * WooCommerce — cart, checkout, account tables
 * ------------------------------------------------------------------ */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout-review-order-table {
	background: var(--bg-card);
	color: var(--text-primary);
	border-color: var(--border-color);
}
.woocommerce table.shop_table th {
	background: var(--bg-elevated);
	color: var(--text-primary);
}
.woocommerce table.shop_table td {
	border-color: var(--border-color);
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 1.5rem;
}

/* ------------------------------------------------------------------
 * Forms — inputs, textareas, selects
 * ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	padding: 0.75rem;
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.15);
}

::placeholder {
	color: var(--text-muted);
}

/* ------------------------------------------------------------------
 * RTL fine-tuning (Storefront already handles direction; small fixes only)
 * ------------------------------------------------------------------ */
[dir="rtl"] body {
	text-align: right;
}

/* ==================================================================
 * Home page — used by front-page.php
 * ================================================================== */

/* ----- Hero ----- */
.bradley-hero {
	background: linear-gradient(135deg, var(--coal-800), var(--coal-900));
	border-bottom: 1px solid var(--border-color);

	/* Full-bleed: escape any constraining parent (Storefront's <main>
	   has a max-width). The negative margin formula pulls the section
	   to the viewport edges regardless of where in the tree it sits. */
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
	max-width: 100vw;
	box-sizing: border-box;

	/* Vertical breathing room is fixed; horizontal padding aligns the
	   inner content with the page's 1280px content column on wide
	   screens and snaps to 1.5rem on narrow ones. */
	padding-block: 6rem;
	padding-inline: max(1.5rem, calc((100vw - 1280px) / 2));

	position: relative;
	overflow: hidden;
}

/* When an image is uploaded via Customizer the section gets this modifier.
   We darken the photo with a layered gradient so the title stays readable
   regardless of what the user picks. */
.bradley-hero--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bradley-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(10, 7, 6, 0.82), rgba(19, 16, 13, 0.65) 60%, rgba(10, 7, 6, 0.85));
	pointer-events: none;
	z-index: 0;
}

.bradley-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(232, 89, 12, 0.12), transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(232, 89, 12, 0.08), transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.bradley-hero__inner {
	max-width: 640px;
	margin: 0;
	/* `margin-inline-end: auto` pushes the block toward the inline START
	   of its parent — i.e. the RIGHT edge in RTL Hebrew, LEFT in LTR. */
	margin-inline-end: auto;
	position: relative;
	z-index: 2; /* Above both ::before (overlay) and ::after (radial glow). */
	text-align: start;
}

@media (max-width: 768px) {
	.bradley-hero__inner {
		max-width: 100%;
	}
}

.bradley-hero__eyebrow {
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.bradley-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.05;
	margin: 0 0 1.5rem;
	color: var(--text-primary);
}

.bradley-hero__lede {
	font-size: 1.15rem;
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0 auto 2rem;
	line-height: 1.6;
}

.bradley-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
	flex-wrap: wrap;
}

/* ----- Section header (shared by category grid, future sections) ----- */
.bradley-section-header {
	text-align: center;
	margin-bottom: 3rem;
}
.bradley-section-header h2 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin: 0;
}

/* ----- Category grid ----- */
.bradley-categories {
	padding: 5rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

/* Compact, unified card: icon + label + count in one padded rectangle,
   centered. ~75% the size of the previous design. No CTA line; the
   whole card is the link. */
.bradley-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

.bradley-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	padding: 1.25rem 1rem;
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.25s ease;
}

.bradley-category-card:not(.bradley-category-card--placeholder):hover {
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
	color: var(--text-primary);
}

/* Inline icon — no separate panel; just a centered SVG above the label. */
.bradley-category-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	margin-bottom: 0.25rem;
	transition: transform 0.25s ease;
}
.bradley-category-card__icon svg {
	width: 40px;
	height: 40px;
}
.bradley-category-card:not(.bradley-category-card--placeholder):hover .bradley-category-card__icon {
	transform: scale(1.08);
}
.bradley-category-card--placeholder .bradley-category-card__icon {
	color: var(--text-muted);
	opacity: 0.65;
}

.bradley-category-card__title {
	font-size: 0.95rem;
	margin: 0;
	color: var(--text-primary);
	font-weight: 700;
	line-height: 1.25;
}

.bradley-category-card__count {
	display: block;
	font-size: 0.72rem;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

/* Old dead classes — kept hidden in case any markup still references
   them; safe to delete entirely later. */
.bradley-category-card__image,
.bradley-category-card__image--placeholder,
.bradley-category-card__cta,
.bradley-category-card__body {
	all: unset;
}

.bradley-categories__hint {
	text-align: center;
	margin-top: 2rem;
	color: var(--text-muted);
	font-size: 0.9rem;
}
.bradley-categories__hint a {
	color: var(--accent);
}

/* Optional subtitle line under the section H2 */
.bradley-section-header__subtitle {
	margin: 0.5rem 0 0;
	color: var(--text-muted);
	font-size: 1rem;
}

/* ==================================================================
 * TOP SELLERS  (.bradley-top-sellers)
 *
 * Reads WooCommerce "Featured" products. Card layout matches the
 * brief: image on top, SKU, title, description, then price at bottom.
 * ================================================================== */
.bradley-top-sellers {
	padding: 5rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

.bradley-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bradley-product-card {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
	overflow: hidden;
	margin: 0;
}

.bradley-product-card:not(.bradley-product-card--placeholder):hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.bradley-product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bradley-product-card__image {
	aspect-ratio: 1 / 1;
	background-color: var(--coal-600);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bradley-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bradley-product-card__image--placeholder {
	background:
		linear-gradient(135deg, rgba(232, 89, 12, 0.08), rgba(232, 89, 12, 0.02)),
		repeating-linear-gradient(45deg, var(--coal-600) 0, var(--coal-600) 10px, var(--coal-700) 10px, var(--coal-700) 20px);
}

.bradley-product-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.bradley-product-card__id {
	font-family: 'Rubik', monospace;
	font-size: 0.75rem;
	color: var(--text-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bradley-product-card__title {
	font-size: 1.05rem;
	margin: 0;
	color: var(--text-primary);
	line-height: 1.3;
}

.bradley-product-card__desc {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-secondary);
	line-height: 1.5;
	flex: 1;
}

.bradley-product-card__price {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--accent);
	font-family: 'Rubik', sans-serif;
	border-top: 1px solid var(--border-color);
}
.bradley-product-card__price del {
	color: var(--text-muted);
	font-weight: 400;
	margin-inline-end: 0.5rem;
}
.bradley-product-card__price ins {
	text-decoration: none;
}

/* ==================================================================
 * WHY BRADLEY  (.bradley-why)
 *
 * 3 numbered bullets side by side. Each bullet:
 *   - Number in a circle with ember border (top)
 *   - Bold title (middle)
 *   - Description (bottom)
 * ================================================================== */
.bradley-why {
	padding: 5rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

.bradley-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 768px) {
	.bradley-why-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.bradley-why-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	padding: 0;
}

/* Numbered circle. Border colour is var(--accent) (ember) — change
   --accent-circle if you want a different ring color without
   touching the rest of the theme. */
.bradley-why-item__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: 2px solid var(--accent);
	color: var(--accent);
	background: rgba(232, 89, 12, 0.06);
	font-family: 'Rubik', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	box-shadow: 0 0 0 4px rgba(232, 89, 12, 0.06);
}

.bradley-why-item__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
}

.bradley-why-item__desc {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 320px;
}

/* ==================================================================
 * BLOG  (.bradley-blog)
 *
 * Latest N WordPress posts. Falls back to placeholder cards if no
 * posts are published yet.
 * ================================================================== */
.bradley-blog {
	padding: 5rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
}

.bradley-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bradley-blog-card {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
	overflow: hidden;
	margin: 0;
}

.bradley-blog-card:not(.bradley-blog-card--placeholder):hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.bradley-blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bradley-blog-card__image {
	aspect-ratio: 16 / 10;
	background-color: var(--coal-600);
	overflow: hidden;
}
.bradley-blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bradley-blog-card__image--placeholder {
	background:
		linear-gradient(135deg, rgba(232, 89, 12, 0.1), rgba(232, 89, 12, 0.02)),
		repeating-linear-gradient(45deg, var(--coal-600) 0, var(--coal-600) 10px, var(--coal-700) 10px, var(--coal-700) 20px);
}

.bradley-blog-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.bradley-blog-card__title {
	margin: 0;
	font-size: 1.1rem;
	color: var(--text-primary);
	line-height: 1.3;
}

.bradley-blog-card__excerpt {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ==================================================================
 * Wordmark — style the site title to look like the SVG wordmark
 * from the HTML template ("BRADLEY SMOKER · ISRAEL"). Pure CSS so
 * the admin keeps managing the brand text via Settings → General.
 *
 * If you later upload an image logo in Customize → Site Identity,
 * Storefront automatically swaps it in and these rules apply to the
 * fallback only.
 * ================================================================== */
.site-header .site-branding {
	margin: 0;
}

.site-header .site-title,
.site-header .site-title a,
.site-header .beta.site-title a {
	font-family: 'Oswald', 'Rubik', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-primary);
	text-decoration: none;
	margin: 0;
}

.site-header .site-title a:hover {
	color: var(--accent);
}

/* In Hebrew, swap to Rubik (Oswald has no Hebrew glyphs) and ease the
   letter-spacing — wide tracking on Hebrew makes the word hard to read. */
[dir="rtl"] .site-header .site-title,
[dir="rtl"] .site-header .site-title a {
	font-family: 'Rubik', sans-serif;
	font-weight: 800;
	letter-spacing: 0.08em;
}

/* The site description (tagline) reads as visual noise next to the
   wordmark — hide it. Set it for SEO via Settings → General if you
   want; it still appears in <head>. */
.site-header .site-description {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==================================================================
 * Header — inline single-row layout
 *
 * Storefront's actual rendered structure is:
 *   <header class="site-header">
 *     <div class="col-full">[skip links, .site-branding]</div>  ← col-full closes here
 *     <nav class="main-navigation">…</nav>
 *     <a class="bradley-account-link">…</a>
 *     <button class="bradley-search-toggle">…</button>  (moved to priority 56)
 *     <ul class="site-header-cart">…</ul>
 *   </header>
 *
 * So we make the <header> itself the flex container and treat
 * .col-full as its first flex child (containing just the logo).
 * ================================================================== */
.site-header {
	padding: 1rem 1.5rem;
}

@media (min-width: 769px) {
	.site-header {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.25rem;
		max-width: none;
	}

	/* .col-full contains only the logo now. Strip its own width/centering
	   so it doesn't dominate the row. */
	.site-header > .col-full {
		order: 1;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		width: auto;
		max-width: none;
		padding: 0;
		margin: 0;
	}

	.site-header .site-branding {
		margin: 0;
		width: auto;
	}

	/* Main nav stretches across the middle. */
	.site-header > .main-navigation {
		order: 2;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		margin: 0;
		border: 0;
		padding: 0;
		width: auto;
	}

	/* Hide the menu-toggle on desktop. */
	.site-header .menu-toggle {
		display: none;
	}

	/* The menu list. Storefront sometimes outputs the menu twice (wp_nav_menu
	   fallback + wp_list_pages). Show only the first .menu wrapper. */
	.site-header .main-navigation > .menu:nth-of-type(n+2) {
		display: none;
	}

	.site-header .main-navigation ul.menu,
	.site-header .main-navigation .nav-menu,
	.site-header .main-navigation > .menu > ul,
	.site-header .main-navigation > ul {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0 1.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header .main-navigation ul li {
		margin: 0;
		padding: 0;
		float: none;
		list-style: none;
	}

	.site-header .main-navigation ul li a {
		color: var(--text-primary);
		font-size: 0.85rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 0.5rem 0;
		border-bottom: 2px solid transparent;
		transition: all 0.2s ease;
		text-decoration: none;
		white-space: nowrap;
		display: inline-block;
	}

	[dir="rtl"] .site-header .main-navigation ul li a {
		text-transform: none;
		letter-spacing: 0.02em;
		font-size: 0.95rem;
	}

	.site-header .main-navigation ul li a:hover,
	.site-header .main-navigation ul li.current-menu-item > a,
	.site-header .main-navigation ul li.current-menu-ancestor > a,
	.site-header .main-navigation ul li.current_page_item > a {
		color: var(--accent);
		border-bottom-color: var(--accent);
	}

	/* The three utility elements sit at the end of the row. */
	.site-header > .bradley-search-toggle { order: 3; flex: 0 0 auto; }
	.site-header > .bradley-account-link  { order: 4; flex: 0 0 auto; }
	.site-header > .site-header-cart      { order: 5; flex: 0 0 auto; margin: 0; }

	/* Cart icon only — hide the dropdown widget that gets emitted as a
	   second <li> next to the icon. The hover dropdown still works. */
	.site-header > .site-header-cart {
		display: flex;
		align-items: center;
		padding: 0;
		list-style: none;
	}
	.site-header > .site-header-cart > li {
		margin: 0;
		padding: 0;
		list-style: none;
		float: none;
	}
	.site-header > .site-header-cart > li:nth-child(n+2) {
		display: none;
	}

	/* Within the cart icon link, hide the price-amount + count text;
	   we only want the basket icon visible in the bar. */
	.site-header > .site-header-cart .cart-contents .amount,
	.site-header > .site-header-cart .cart-contents .count,
	.site-header > .site-header-cart .cart-contents .woocommerce-Price-currencySymbol {
		display: none;
	}
}

/* ==================================================================
 * Search toggle button (icon-only)
 *
 * Sits in the header row. Looks like a ghost button: square, hairline
 * border, ember on hover. Resets the broad `.button` styles defined
 * earlier so it doesn't inherit the orange filled-button look.
 * ================================================================== */
.site-header .bradley-search-toggle,
.bradley-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	box-shadow: none;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}

.site-header .bradley-search-toggle:hover,
.bradley-search-toggle:hover {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
	box-shadow: none;
	transform: none;
}

.bradley-search-toggle svg { display: block; }

/* ==================================================================
 * Search modal
 * ================================================================== */
.bradley-search-modal[hidden] { display: none; }

.bradley-search-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh 1rem 1rem;
}

.bradley-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 7, 6, 0.85);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.bradley-search-modal__panel {
	position: relative;
	width: min(640px, 100%);
	background: var(--bg-elevated);
	border: 1px solid var(--border-color);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
	padding: 2rem;
}

.bradley-search-modal__close {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	background: transparent;
	color: var(--text-muted);
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0.25rem 0.6rem;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	width: auto;
	height: auto;
}

.bradley-search-modal__close:hover {
	background: transparent;
	color: var(--accent);
	box-shadow: none;
	transform: none;
}

.bradley-search-modal__heading {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	color: var(--text-primary);
}

.bradley-search-modal__form {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

/* Explicit dark-theme styling for the search input. Without these,
   browsers fall back to default light-on-white (and Chrome autofill
   can paint it bright yellow). Higher specificity than the generic
   `input[type="search"]` rule earlier in this file so it always wins. */
.bradley-search-modal__form input[type="search"] {
	flex: 1 1 auto;
	font-size: 1.05rem;
	padding: 0.85rem 1rem;
	background: var(--bg-elevated) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color);
	border-radius: 2px;
	-webkit-appearance: none;
	appearance: none;
	caret-color: var(--accent);
}

.bradley-search-modal__form input[type="search"]::placeholder {
	color: var(--text-muted);
	opacity: 1; /* Firefox sets opacity:0.5 by default — undo it. */
}

.bradley-search-modal__form input[type="search"]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.18);
}

/* Hide the native WebKit "×" clear button inside search inputs — it
   renders as a tiny grey square that clashes with the dark UI. */
.bradley-search-modal__form input[type="search"]::-webkit-search-cancel-button,
.bradley-search-modal__form input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Defeat Chrome's autofill yellow. The inset box-shadow trick paints
   the input's own background colour over the autofill paint. */
.bradley-search-modal__form input[type="search"]:-webkit-autofill,
.bradley-search-modal__form input[type="search"]:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important;
	-webkit-text-fill-color: var(--text-primary) !important;
	caret-color: var(--accent);
}

.bradley-search-modal__form .button {
	flex: 0 0 auto;
	padding: 0 1.5rem;
}

/* Lock body scroll while the modal is open. */
body.bradley-modal-open { overflow: hidden; }

/* Screen-reader-only utility — used by the form label. */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==================================================================
 * Top utility bar
 *
 * Renders above the main header via the `storefront_before_header`
 * action. Two columns: contact info (start) + language switcher (end).
 * ================================================================== */
.bradley-topbar {
	background: var(--coal-900);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-size: 0.8rem;
	padding: 0.4rem 0;
}

.bradley-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	gap: 1rem;
}

.bradley-topbar__contact {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.bradley-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}
.bradley-topbar__item:hover {
	color: var(--accent);
}

.bradley-topbar__icon {
	color: var(--accent);
	flex: 0 0 auto;
}

.bradley-topbar__lang {
	display: inline-flex;
	align-items: center;
}

/* Polylang outputs a <ul class="languages"> list. Style it as a small inline switcher. */
.bradley-topbar__lang ul,
.bradley-topbar__lang .lang-item {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bradley-topbar__lang ul {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.bradley-topbar__lang li {
	display: inline-flex;
}
.bradley-topbar__lang li + li::before {
	content: '|';
	color: var(--border-color);
	margin-inline-end: 0.4rem;
}
.bradley-topbar__lang a,
.bradley-topbar__lang .lang-item a {
	color: var(--text-secondary);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	font-weight: 600;
	transition: color 0.2s ease;
}
.bradley-topbar__lang a:hover,
.bradley-topbar__lang .current-lang a {
	color: var(--accent);
}

/* ==================================================================
 * Account / login link in the header
 * ================================================================== */
.site-header .bradley-account-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-primary);
	text-decoration: none;
	padding: 0.5rem 0.6rem;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	font-size: 0.85rem;
}

.site-header .bradley-account-link:hover {
	color: var(--accent);
	border-color: var(--border-color);
}

.site-header .bradley-account-link svg { flex: 0 0 auto; }

.bradley-account-link__label { white-space: nowrap; }

/* Place the account link between search (order 3) and cart (order 4). */
@media (min-width: 769px) {
	.site-header .bradley-account-link {
		order: 3;        /* same group as search & cart */
		flex: 0 0 auto;
	}
	/* Bump search to "just before account" and keep cart last. */
	.site-header .bradley-search-toggle { order: 3; }
	.site-header .bradley-account-link  { order: 4; }
	.site-header .site-header-cart      { order: 5; }
}

/* On narrow screens, hide the account label text (icon only). */
@media (max-width: 900px) {
	.bradley-account-link__label { display: none; }
}

/* ==================================================================
 * Contact page (template-contact.php)
 *
 * Two-column layout: RTL start = company info card with icons,
 * RTL end = editable Page content (form / map / image / text).
 * ================================================================== */
.bradley-contact {
	padding: 4rem 0;
}

.bradley-contact__wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.bradley-contact__header {
	text-align: start;
	margin-bottom: 3rem;
}

.bradley-contact__title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.75rem;
	color: var(--text-primary);
	line-height: 1.1;
}

.bradley-contact__intro {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0;
	line-height: 1.65;
}

.bradley-contact__grid {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 900px) {
	.bradley-contact__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ─── Info card (RTL start) ────────────────────────────────────── */
.bradley-contact__info {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	padding: 2rem;
}

.bradley-contact__company {
	font-size: 1.5rem;
	margin: 0 0 1.5rem;
	color: var(--accent);
	letter-spacing: 0.04em;
}

.bradley-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.bradley-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bradley-contact__icon {
	flex: 0 0 auto;
	color: var(--accent);
	margin-top: 0.15rem;
	display: inline-flex;
}

.bradley-contact__text,
a.bradley-contact__text {
	color: var(--text-primary);
	text-decoration: none;
	line-height: 1.5;
	font-size: 0.95rem;
	flex: 1 1 auto;
	min-width: 0; /* allow long emails / phone numbers to wrap */
	word-break: break-word;
}

a.bradley-contact__text:hover {
	color: var(--accent);
}

/* ─── Editable Page content (RTL end) ──────────────────────────── */
.bradley-contact__content {
	color: var(--text-secondary);
	line-height: 1.7;
}

.bradley-contact__content > :first-child {
	margin-top: 0;
}

.bradley-contact__content > :last-child {
	margin-bottom: 0;
}

.bradley-contact__content h2,
.bradley-contact__content h3,
.bradley-contact__content h4 {
	color: var(--text-primary);
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.bradley-contact__content a {
	color: var(--accent);
}

/* Make any iframe (Google Maps embed, YouTube etc.) fill its column
   with a sensible aspect ratio. */
.bradley-contact__content iframe {
	width: 100%;
	min-height: 320px;
	border: 1px solid var(--border-color);
}

/* ─── Contact form (left column / RTL end) ─────────────────────── */
.bradley-contact__form-wrap {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	padding: 2rem;
}

.bradley-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
}

.bradley-contact-form__field {
	display: block;
}

.bradley-contact-form__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--text-primary);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bradley-contact-form__required {
	color: var(--accent);
	margin-inline-start: 0.2rem;
}

.bradley-contact-form input[type="text"],
.bradley-contact-form input[type="email"],
.bradley-contact-form input[type="tel"],
.bradley-contact-form textarea {
	width: 100%;
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bradley-contact-form input[type="text"]:focus,
.bradley-contact-form input[type="email"]:focus,
.bradley-contact-form input[type="tel"]:focus,
.bradley-contact-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.18);
}

.bradley-contact-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.55;
}

.bradley-contact-form__submit {
	margin-top: 0.5rem;
	align-self: flex-start;
}

/* Honeypot — visually hidden but still in the DOM for bots to find. */
.bradley-contact-form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Success / error banner (appears after submit redirect). */
.bradley-contact-form__alert {
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	border: 1px solid;
	font-size: 0.95rem;
}

.bradley-contact-form__alert--ok {
	color: #b5e0a4;
	border-color: rgba(90, 143, 74, 0.6);
	background: rgba(90, 143, 74, 0.12);
}

.bradley-contact-form__alert--error {
	color: #ffb59a;
	border-color: rgba(232, 89, 12, 0.6);
	background: rgba(232, 89, 12, 0.12);
}

/* ==================================================================
 * Blog archive page (template-blog.php)
 *
 * Reuses .bradley-blog-grid + .bradley-blog-card from front-page.php
 * so the cards look identical to the homepage teaser. Adds an archive
 * header, a date line in the card meta, and pagination.
 * ================================================================== */
.bradley-blog-archive {
	padding: 4rem 0;
}

.bradley-blog-archive__wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.bradley-blog-archive__header {
	text-align: start;
	margin-bottom: 3rem;
}

.bradley-blog-archive__title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.75rem;
	color: var(--text-primary);
	line-height: 1.1;
}

.bradley-blog-archive__intro {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 640px;
	margin: 0;
	line-height: 1.65;
}

/* Date / category line inside each blog card. */
.bradley-blog-card__meta {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* "No posts" state. */
.bradley-blog-archive__empty {
	background: linear-gradient(180deg, var(--coal-700), var(--coal-800));
	border: 1px solid var(--border-color);
	padding: 3rem 2rem;
	text-align: center;
	color: var(--text-secondary);
}

.bradley-blog-archive__empty p {
	margin: 0 0 1rem;
}

.bradley-blog-archive__empty p:last-child {
	margin-bottom: 0;
}

/* Pagination — `paginate_links( ['type' => 'list'] )` outputs a <ul>
   with <li> children. Each .page-numbers can be a link, span (current),
   "..." dots, or .prev / .next nav links. */
.bradley-blog-archive__pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.bradley-blog-archive__pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bradley-blog-archive__pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bradley-blog-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.bradley-blog-archive__pagination a.page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.bradley-blog-archive__pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 700;
}

.bradley-blog-archive__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--text-muted);
}

/* ==================================================================
 * Single Product page (WooCommerce single-product template)
 *
 * Two-column layout: image on the inline start, summary on inline end.
 *   - In RTL (Hebrew): image right, summary left.
 *   - In LTR (English): image left, summary right.
 * The flip happens for free because WC emits images first in source
 * order; `direction: rtl` reverses visually.
 *
 * NB: target `div.product.type-product` directly (no body-class
 * prefix) and use `!important` on layout properties because Storefront's
 * defaults like `.woocommerce div.product .images { width: 48%; float: right; }`
 * have specificity 0,3,1 — they'd otherwise win the cascade.
 * `div.product` (not `li.product`) distinguishes the single product
 * page from shop-loop items.
 * ================================================================== */
/* Free Storefront's wrapper containers on single product pages so
   they stop capping the width at ~1238px. Once they're uncapped,
   `.product` (and the related-products section) can do their own
   `margin: 0 auto` centering against the full viewport.
   IMPORTANT: target only the CONTENT-area `.col-full` (direct child of
   `#content` / `.site-content`) — NOT the header's `.col-full`, which
   also exists and needs its existing layout untouched. */
body.single-product #content > .col-full,
body.single-product .site-content > .col-full,
body.single-product .site-content,
body.single-product #primary,
body.single-product .content-area {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The product wrapper itself — same 2-column grid as before, but now
   reliably centered at 1280px max width via `margin: 0 auto`. Matches
   the template's `<main class="max-w-7xl mx-auto px-4 lg:px-8 py-10">`. */
div.product.type-product {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 3rem;
	align-items: start;
	max-width: 1280px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 3rem 1.5rem;
	box-sizing: border-box;
}

/* Related products + prev/next pagination strip live OUTSIDE .product
   but are siblings inside .site-main. Center them the same way so the
   whole page reads as one centered column. */
body.single-product .related.products,
body.single-product .storefront-product-pagination,
body.single-product .woocommerce-notices-wrapper {
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

/* Force direction inheritance. Storefront has been observed setting
   `direction: ltr` on `.product` or its wrapper, which makes the grid
   ignore the page's RTL flow. Re-inherit explicitly. */
[dir="rtl"] div.product.type-product { direction: rtl !important; }
[dir="ltr"] div.product.type-product { direction: ltr !important; }

/* Explicit grid placement — defeats auto-flow + any direction
   weirdness. Gallery always goes to column 1, summary to column 2,
   tabs span both on row 2.
   In RTL: col 1 = visual right, col 2 = visual left  →  image right, text left. ✓
   In LTR: col 1 = visual left,  col 2 = visual right →  image left, text right. ✓ */
div.product.type-product > .woocommerce-product-gallery {
	grid-column: 1 !important;
	grid-row: 1 !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
}

div.product.type-product > .summary,
div.product.type-product > .summary.entry-summary {
	grid-column: 2 !important;
	grid-row: 1 !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* Tabs (description / reviews) span the full grid width on row 2. */
div.product.type-product > .woocommerce-tabs {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
	width: 100%;
	margin-top: 2rem;
}

/* Notices wrapper sits ABOVE the grid (it's a sibling of .product,
   not a child) — no positioning needed, just kept normal flow. */

@media (max-width: 768px) {
	div.product.type-product {
		grid-template-columns: 1fr !important;
		gap: 2rem;
		padding-block: 2rem;
		padding-inline: 1rem;
	}
	div.product.type-product > .woocommerce-product-gallery,
	div.product.type-product > .summary,
	div.product.type-product > .summary.entry-summary {
		grid-column: 1 !important;
	}
	div.product.type-product > .woocommerce-product-gallery { grid-row: 1 !important; }
	div.product.type-product > .summary { grid-row: 2 !important; }
	div.product.type-product > .woocommerce-tabs { grid-row: 3 !important; }
}

/* Image side */
.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery img {
	border: 1px solid var(--border-color);
	background: var(--coal-700);
}

.single-product .flex-control-thumbs {
	margin-top: 1rem;
}

.single-product .flex-control-thumbs li img {
	border: 1px solid var(--border-color);
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
	border-color: var(--accent);
	opacity: 1;
}

/* ─── Summary column (right-side details in RTL) ─────────────────── */
.single-product .summary {
	color: var(--text-primary);
	text-align: start;
}

/* Best-seller banner (our custom element, priority 1) */
.bradley-best-seller-banner {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: linear-gradient(90deg, var(--accent), var(--accent-hover));
	color: #fff;
	padding: 0.45rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1.25rem;
	box-shadow: 0 6px 18px rgba(232, 89, 12, 0.25);
}

/* SKU tag (our custom element, priority 4) */
.bradley-product-sku {
	display: block;
	font-family: 'Rubik', sans-serif;
	font-size: 0.8rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

/* Product title (priority 5, WC default — re-themed) */
.single-product .summary .product_title {
	color: var(--text-primary);
	font-size: 2rem;
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

/* Rating row (priority 10 — only shows if reviews exist) */
.single-product .summary .woocommerce-product-rating {
	margin: 0 0 0.75rem;
}
.single-product .summary .woocommerce-product-rating .star-rating {
	color: var(--accent);
}
.single-product .summary .woocommerce-review-link {
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* Price (priority 10) */
.single-product .summary .price {
	color: var(--accent);
	font-size: 1.85rem;
	font-weight: 700;
	font-family: 'Rubik', sans-serif;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.single-product .summary .price del {
	color: var(--text-muted);
	font-weight: 400;
	font-size: 1.2rem;
	margin-inline-end: 0.5rem;
}
.single-product .summary .price ins {
	background: none;
	text-decoration: none;
	color: var(--accent);
}
.single-product .summary .price .woocommerce-Price-currencySymbol {
	font-size: 1.2rem;
	color: var(--text-secondary);
}

/* VAT note (our custom element, priority 11) */
.bradley-vat-note {
	color: var(--text-muted);
	font-size: 0.8rem;
	margin: 0.4rem 0 1.5rem;
	font-style: italic;
}

/* Full product description rendered inside the summary column
   (priority 15, right under the VAT note). Replaces both the
   default short-description excerpt and the description tab. */
.bradley-product-description {
	margin: 0 0 1.75rem;
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.7;
}
.bradley-product-description p {
	margin: 0 0 1rem;
}
.bradley-product-description p:last-child {
	margin-bottom: 0;
}
.bradley-product-description h2,
.bradley-product-description h3,
.bradley-product-description h4 {
	color: var(--text-primary);
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
	line-height: 1.3;
}
.bradley-product-description ul,
.bradley-product-description ol {
	color: var(--text-secondary);
	padding-inline-start: 1.5rem;
	margin: 0.75rem 0 1rem;
}
.bradley-product-description li {
	margin: 0.25rem 0;
}
.bradley-product-description a {
	color: var(--accent);
}
.bradley-product-description strong {
	color: var(--text-primary);
}
.bradley-product-description img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--border-color);
}

/* Short description (priority 20) */
.single-product .summary .woocommerce-product-details__short-description {
	color: var(--text-secondary);
	line-height: 1.7;
	margin: 1rem 0 1.5rem;
	font-size: 0.95rem;
}
.single-product .summary .woocommerce-product-details__short-description p {
	margin: 0 0 1rem;
}

/* Add to cart row (priority 30) — quantity + button */
.single-product .summary form.cart {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}

.single-product .summary .quantity {
	margin: 0;
}

.single-product .summary .quantity input.qty {
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	padding: 0.85rem 0.5rem;
	width: 4.5rem;
	text-align: center;
	font-size: 1rem;
	border-radius: 2px;
}
.single-product .summary .quantity input.qty:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.15);
}

/* The add-to-cart button inherits .button styles already. Ensure it
   plays nicely inside the flex row. */
.single-product .summary form.cart .button[type="submit"],
.single-product .summary form.cart .single_add_to_cart_button {
	flex: 0 0 auto;
}

/* Variation table for variable products */
.single-product .summary table.variations {
	margin: 1rem 0 1.5rem;
	color: var(--text-primary);
}
.single-product .summary table.variations select {
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	padding: 0.65rem 0.5rem;
}
.single-product .summary .reset_variations {
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* Product meta (priority 40 — SKU/categories/tags) */
.single-product .summary .product_meta {
	border-top: 1px solid var(--border-color);
	padding-top: 1.25rem;
	margin-top: 2rem;
	font-size: 0.85rem;
	color: var(--text-secondary);
}
.single-product .summary .product_meta > span {
	display: block;
	margin-bottom: 0.4rem;
}
.single-product .summary .product_meta a {
	color: var(--accent);
}
/* SKU is already shown at top — hide the duplicate in the meta block. */
.single-product .summary .product_meta .sku_wrapper {
	display: none;
}

/* Tabs below the product (description / additional info / reviews) */
.single-product .woocommerce-tabs {
	max-width: 1280px;
	margin: 2rem auto;
	padding: 0 1.5rem;
}
.single-product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--border-color);
	margin: 0 0 1.5rem;
	padding: 0;
}
.single-product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--text-secondary);
	padding: 0.75rem 1.25rem;
	border-bottom: 2px solid transparent;
	font-weight: 600;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.single-product .woocommerce-tabs .panel {
	color: var(--text-primary);
	background: transparent;
}