/*
 Theme Name:   Play With Carbon
 Theme URI:    https://playwithcarbon.com/
 Description:  Play With Carbon's child theme for GeneratePress. GeneratePress does
               the work; this only holds Play With Carbon's own design pieces so
               GeneratePress updates never overwrite them:
                 - the header, footer and homepage (functions.php, front-page.php)
                 - the colours, fonts and shop styling below
                 - woocommerce/pdf/PWC-Invoice/  the invoice and packing slip
                   design used by "PDF Invoices & Packing Slips" (moved unchanged
                   from the old playwithcarbon theme, Oct 2026)
               Shop logic does NOT go here - that lives in the Bulltech Bridge and
               Bulltech Store Tools plugins.
 Author:       Play With Carbon
 Template:     generatepress
 Version:      1.10.4
*/

/* ===== Brand ===== */
:root {
	--pwc-red: #E40000;
	--pwc-red-dark: #B30000;   /* red text on white (easier to read than the bright red) */
	--pwc-gold: #F2E0A0;
	--pwc-ink: #151515;
	--pwc-ink-2: #222222;
	--pwc-text: #1b1b1b;
	--pwc-muted: #555555;
	--pwc-line: #e3e3e1;
	--pwc-bg: #f4f4f3;
	--pwc-card: #ffffff;
	--pwc-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--pwc-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pwc-radius: 10px;
	--pwc-gutter: 24px; /* space at the screen edges; 15px on phones, like the old theme */
}

body {
	margin: 0;
	background: var(--pwc-bg);
	color: var(--pwc-text);
	font-family: var(--pwc-body);
	font-size: 16px;
	line-height: 1.5;
}
h1, h2, h3, h4,
.entry-title,
.woocommerce div.product .product_title,
.woocommerce-products-header__title {
	font-family: var(--pwc-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	line-height: 1.1;
	color: var(--pwc-text);
}
a { color: var(--pwc-red-dark); }
a:hover, a:focus { color: var(--pwc-red); }

.pwc-wrap {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pwc-gutter);
	padding-right: var(--pwc-gutter);
	box-sizing: border-box;
}

/* ===== Buttons ===== */
.pwc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	border: 2px solid transparent;
	cursor: pointer;
}
.pwc-btn-lg { padding: 14px 26px; font-size: 17px; }
.pwc-btn-red, .pwc-btn-red:visited { background: var(--pwc-red); color: #fff; }
.pwc-btn-red:hover, .pwc-btn-red:focus { background: var(--pwc-red-dark); color: #fff; }
.pwc-btn-gold, .pwc-btn-gold:visited { background: var(--pwc-gold); color: var(--pwc-ink); border-color: #d9c27a; }
.pwc-btn-gold:hover, .pwc-btn-gold:focus { background: #e9d184; color: var(--pwc-ink); border-color: #c9b064; }
.pwc-btn-dark, .pwc-btn-dark:visited { background: var(--pwc-ink); color: #fff; }
.pwc-btn-dark:hover, .pwc-btn-dark:focus { background: #000; color: #fff; }
.pwc-btn-outline, .pwc-btn-outline:visited { border-color: #fff; color: #fff; background: transparent; }
.pwc-btn-outline:hover, .pwc-btn-outline:focus { background: #fff; color: var(--pwc-ink); }

/* WooCommerce's own buttons in the brand colours */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .wc-block-components-button {
	background: var(--pwc-ink);
	color: #fff;
	border-radius: 8px;
	font-family: var(--pwc-body);
	font-weight: 600;
	padding: 11px 18px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: #000;
	color: #fff;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce .checkout-button, .woocommerce #place_order {
	background: var(--pwc-gold);
	color: var(--pwc-ink);
	border: 2px solid #d9c27a;
	font-size: 18px;
	padding: 14px 28px;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover {
	background: #e9d184;
	color: var(--pwc-ink);
}
.woocommerce ul.products li.product .button.add_to_cart_button {
	background: var(--pwc-gold);
	color: var(--pwc-ink);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover { background: #e9d184; color: var(--pwc-ink); }
/* Greyed-out buttons (e.g. "Update cart" before anything changes): readable grey, not dark-on-dark */
html body .woocommerce button.button:disabled,
html body .woocommerce button.button:disabled[disabled],
html body .woocommerce button.button.disabled,
html body .woocommerce button.button:disabled[disabled]:hover {
	background: #e9e9e7;
	color: #555;
	border-color: #e9e9e7;
	opacity: 1;
	padding: 11px 18px;
}

/* Product pages: "3 × $100.00 = $300.00" under Add to cart */
.pwc-line-total { flex-basis: 100%; clear: both; margin-top: 10px; font-size: 16px; color: var(--pwc-muted); }
.pwc-line-total[hidden] { display: none; }
.pwc-line-total strong { color: var(--pwc-text); font-size: 18px; }

/* Cart page: back to shopping */
.pwc-continue, .pwc-continue:visited { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; font-weight: 600; color: var(--pwc-red-dark); text-decoration: none; }
.pwc-continue:hover, .pwc-continue:focus { text-decoration: underline; color: var(--pwc-red); }

/* ===== Header ===== */
/* Top row is white so the logo (which has a white background) sits naturally. */
.pwc-header { background: #fff; color: var(--pwc-text); position: relative; z-index: 50; }
.pwc-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.pwc-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; color: var(--pwc-text); }
.pwc-brand:hover, .pwc-brand:focus { color: var(--pwc-text); }
.pwc-logo-img { display: block; max-height: 64px; width: auto; }
.pwc-brand-text { font-family: var(--pwc-head); font-weight: 700; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; line-height: 1; }
.pwc-search { flex: 1 1 240px; min-width: 0; }
.pwc-search form { display: flex; flex-wrap: nowrap; margin: 0; }
.pwc-search form > div { display: flex; flex: 1 1 auto; min-width: 0; } /* WordPress's older search form wraps its fields in a div */
.pwc-search form > label:not(.screen-reader-text) { flex: 1 1 auto; display: flex; min-width: 0; margin: 0; }
.pwc-search form > label:not(.screen-reader-text) > input { flex: 1 1 auto; width: 100%; }
.pwc-search form > label:not(.screen-reader-text) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pwc-search input[type="search"],
.pwc-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: 1px solid #cfcfcd;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	padding: 0 16px;
	background: #fff;
	color: var(--pwc-text);
	font-size: 16px;
}
.pwc-search button, .pwc-search input[type="submit"] {
	height: 46px;
	border: 1px solid #d9c27a;
	border-radius: 0 8px 8px 0;
	background: var(--pwc-gold);
	color: var(--pwc-ink);
	padding: 0 18px;
	font-weight: 600;
}
.pwc-search .dgwt-wcas-search-wrapp { max-width: none; }
.pwc-account { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pwc-account a { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.pwc-account-link, .pwc-account-link:visited { color: var(--pwc-text); }
.pwc-account-link:hover, .pwc-account-link:focus { color: var(--pwc-red-dark); background: var(--pwc-bg); }
.pwc-cart-link, .pwc-cart-link:visited { background: var(--pwc-gold); color: var(--pwc-ink); }
.pwc-cart-link:hover, .pwc-cart-link:focus { background: #e9d184; color: var(--pwc-ink); }

/* Tech docs and Contact, beside Account */
.pwc-helplinks { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.pwc-helplinks a, .pwc-helplinks a:visited { display: flex; align-items: center; gap: 7px; color: var(--pwc-text); text-decoration: none; font-weight: 600; padding: 10px 10px; border-radius: 8px; white-space: nowrap; }
.pwc-helplinks a:hover, .pwc-helplinks a:focus { color: var(--pwc-red-dark); background: var(--pwc-bg); }

/* "All categories" panel: every category and its sub-categories */
/* The panel itself is see-through and full width; the white box inside it
   is capped to the same width as the rest of the page. */
.pwc-mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 8px;
	z-index: 1000;
	pointer-events: none; /* clicks beside the box reach the page (and close the panel) */
}
.pwc-mega-panel[hidden] { display: none; }
.pwc-mega-groups { pointer-events: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); align-items: start; gap: 18px 36px; padding: 18px 22px 22px; background: #fff; color: var(--pwc-text); border: 1px solid var(--pwc-line); border-top: 3px solid var(--pwc-gold); border-radius: var(--pwc-radius); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22); max-height: 75vh; overflow-y: auto; box-sizing: border-box; }
.pwc-mega-head, .pwc-mega-head:visited { display: inline-block; font-family: var(--pwc-head); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--pwc-text); text-decoration: none; border-bottom: 2px solid var(--pwc-gold); padding-bottom: 2px; margin-bottom: 6px; }
a.pwc-mega-head:hover, a.pwc-mega-head:focus { color: var(--pwc-red-dark); }
.pwc-mega-tiles { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pwc-catstrip .pwc-mega-tiles .pwc-tile { flex: 0 0 100px; padding: 6px 2px 8px; }
.pwc-catstrip .pwc-mega-tiles .pwc-tile-img { width: 72px; height: 72px; }

/* Neighbouring-category buttons on category pages without sub-categories */
.pwc-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 22px; }
.pwc-chip, .pwc-chip:visited { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--pwc-text); border: 1px solid #d6d6d4; border-radius: 999px; padding: 7px 15px; text-decoration: none; font-weight: 500; }
.pwc-chip:hover, .pwc-chip:focus { border-color: var(--pwc-ink); color: var(--pwc-text); }
.pwc-chip.is-current { background: var(--pwc-ink); border-color: var(--pwc-ink); color: #fff; }
.pwc-chip-count { color: #777; font-size: 13px; }
.pwc-chip.is-current .pwc-chip-count { color: #ccc; }

/* ===== Category picture tiles ===== */
/* Row of main categories under the menu bar */
.pwc-catstrip { background: #fff; border-top: 3px solid var(--pwc-gold); }
.pwc-catstrip-bar { position: relative; border-bottom: 3px solid var(--pwc-gold); }
.pwc-catstrip-inner { display: flex; align-items: center; gap: 8px; padding-top: 4px; padding-bottom: 4px; }
.pwc-catstrip-track { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; padding: 12px 12px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pwc-catstrip-track::-webkit-scrollbar { display: none; }
.pwc-catstrip-arrow { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid #d6d6d4; background: #fff; color: var(--pwc-ink); cursor: pointer; }
.pwc-catstrip-arrow[hidden] { display: none; }
.pwc-catstrip-arrow:hover, .pwc-catstrip-arrow:focus { border-color: var(--pwc-ink); background: #fff; color: var(--pwc-ink); }
.pwc-catstrip-arrow:disabled { opacity: 0.35; cursor: default; }
/* Home button, above the left arrow */
.pwc-catstrip-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pwc-home-btn, .pwc-home-btn:visited { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #d6d6d4; background: #fff; color: var(--pwc-ink); text-decoration: none; }
.pwc-home-btn:hover, .pwc-home-btn:focus { border-color: var(--pwc-ink); color: var(--pwc-ink); }
.pwc-catstrip .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pwc-tile, .pwc-tile:visited { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; text-decoration: none; color: var(--pwc-text); border-radius: var(--pwc-radius); }
.pwc-catstrip .pwc-tile { flex: 0 0 108px; scroll-snap-align: start; padding: 6px 4px 8px; }
.pwc-tile-img { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; border: 1px solid var(--pwc-line); border-radius: 8px; box-sizing: border-box; transition: border-color .15s; }
.pwc-catstrip .pwc-tile-img { width: 80px; height: 80px; }
.pwc-tile-img img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; }
.pwc-tile-img.is-own img { object-fit: cover; }   /* the category's own image fills the box; product photos sit inside it */
.pwc-tile-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--pwc-gold); color: var(--pwc-ink); font-family: var(--pwc-head); font-weight: 700; font-size: 28px; }
.pwc-tile-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pwc-tile:hover, .pwc-tile:focus { color: var(--pwc-text); }
.pwc-tile:focus:not(:focus-visible) { outline: none; }
.pwc-tile:hover .pwc-tile-img, .pwc-tile:focus-visible .pwc-tile-img { border-color: var(--pwc-ink); }
.pwc-tile:hover .pwc-tile-name, .pwc-tile:focus-visible .pwc-tile-name { color: var(--pwc-red-dark); }
/* Circled in red like the logo's swoosh (images/ring.svg): the open category, or the one you're in.
   While something else is open, the category you're in keeps a gold circle (images/ring-gold.svg). */
.pwc-catstrip .pwc-tile, .pwc-subrow .pwc-tile { position: relative; gap: 16px; }
.pwc-tile.is-ring::before,
.pwc-tile.is-ring-dim::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 46px;            /* middle of the picture: 6px padding + half of 80px */
	width: 132px;
	height: 126px;
	transform: translate(-50%, -50%);
	background: url("images/ring.svg?v=3") center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 1;
}
.pwc-tile.is-ring-dim::before { background-image: url("images/ring-gold.svg?v=3"); }
.pwc-tile.is-ring .pwc-tile-name, .pwc-tile.is-current .pwc-tile-name { font-weight: 700; }

.pwc-tile-all { flex: 0 0 108px; background: none; border: 0; padding: 6px 4px 8px; font: inherit; cursor: pointer; }
.pwc-tile-all:hover, .pwc-tile-all:focus { background: none; }
.pwc-tile-all .pwc-tile-img { background: var(--pwc-ink); border-color: var(--pwc-ink); color: var(--pwc-gold); }
/* A category whose sub-category bar is open */
.pwc-tile.is-open .pwc-tile-name { font-weight: 700; }

/* Bar of one category's sub-categories, under the gold line */
.pwc-subrow[hidden], .pwc-mega-panel[hidden] { display: none; }
/* Capped to the page width like everything else: a box under the gold line */
.pwc-subrow { padding-top: 8px; padding-bottom: 14px; }
/* Same box as the "All categories" panel */
.pwc-subrow-track { position: relative; display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 14px 16px 10px; background: #fff; border: 1px solid var(--pwc-line); border-top: 3px solid var(--pwc-gold); border-radius: var(--pwc-radius); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22); }
.pwc-subrow .pwc-tile { flex: 0 0 108px; padding: 6px 4px 8px; }
.pwc-subrow .pwc-tile-img { width: 80px; height: 80px; }
.pwc-tile-viewall .pwc-tile-img { background: var(--pwc-gold); border-color: var(--pwc-gold); color: var(--pwc-ink); }

/* Sub-category tiles inside a category */
.pwc-subtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 26px; }
.pwc-subtiles .pwc-tile { background: #fff; border: 1px solid var(--pwc-line); padding: 10px 10px 14px; transition: border-color .15s, box-shadow .15s; }
.pwc-subtiles .pwc-tile-img { width: 100%; aspect-ratio: 1 / 1; border: 0; border-radius: 6px; }
.pwc-subtiles .pwc-tile-name { font-size: 15px; }
.pwc-subtiles .pwc-tile:hover, .pwc-subtiles .pwc-tile:focus { border-color: var(--pwc-ink); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.pwc-tile-count { font-size: 13px; color: var(--pwc-muted); }

/* ===== Footer ===== */
.site-footer { background: var(--pwc-ink); }
.pwc-footer { background: var(--pwc-ink); color: #d6d6d6; }
.pwc-footer a, .pwc-footer a:visited { color: #d6d6d6; text-decoration: none; }
.pwc-footer a:hover, .pwc-footer a:focus { color: var(--pwc-gold); }
.pwc-footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-top: 48px; padding-bottom: 32px; }
.pwc-footer-brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.pwc-footer-name { font-family: var(--pwc-head); font-weight: 700; font-size: 24px; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.pwc-footer-col { flex: 0 1 200px; display: flex; flex-direction: column; gap: 8px; }
.pwc-footer-head { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.pwc-footer-bottom { border-top: 1px solid #2c2c2c; font-size: 14px; color: #a8a8a8; }
.pwc-footer-bottom .pwc-wrap { padding-top: 16px; padding-bottom: 16px; }

/* ===== Homepage ===== */
.pwc-front .site.grid-container { max-width: none; padding: 0; }
.pwc-front .site-content { display: block; padding: 0; }
.pwc-home { width: 100%; padding-bottom: 48px; }

/* Headline sits in a rounded dark box rather than a full-width strip */
.pwc-hero { padding-top: 28px; }
.pwc-hero-inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 40px; background: var(--pwc-ink); color: #fff; border-radius: 16px; padding: 48px; }
.pwc-hero-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.pwc-eyebrow { color: var(--pwc-gold); font-weight: 600; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.pwc-hero-title { margin: 0; color: #fff; font-size: clamp(44px, 7vw, 76px); line-height: 0.95; }
.pwc-hero-lead { margin: 0; font-size: 19px; color: #d6d6d6; max-width: 540px; }
.pwc-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.pwc-hero-card {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--pwc-text);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
}
.pwc-hero-card:hover, .pwc-hero-card:focus { color: var(--pwc-text); box-shadow: 0 0 0 3px var(--pwc-gold); }
.pwc-hero-card-img { display: block; background: #ececea; }
.pwc-hero-card-img img { display: block; width: 100%; height: 320px; object-fit: contain; background: #fff; }
.pwc-hero-card-body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 18px 22px; }
.pwc-hero-card-name { font-weight: 600; font-size: 19px; }
.pwc-hero-card-more { font-weight: 600; color: var(--pwc-red-dark); white-space: nowrap; }
.pwc-per-metre { font-size: 0.8em; font-weight: 400; color: var(--pwc-muted); }

.pwc-row { padding-top: 44px; }
.pwc-row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; }
.pwc-h2 { margin: 0; font-size: 40px; }
.pwc-row-sub { margin: 2px 0 0; color: #444; }
.pwc-row-all { font-weight: 600; text-decoration: none; }
.pwc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.pwc-card { background: var(--pwc-card); border: 1px solid var(--pwc-line); border-radius: var(--pwc-radius); overflow: hidden; display: flex; flex-direction: column; }
.pwc-card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 12px; background: #fff; box-sizing: border-box; }
.pwc-card-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; }
.pwc-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.pwc-card-name, .pwc-card-name:visited { color: var(--pwc-text); text-decoration: none; font-weight: 600; font-size: 17px; line-height: 1.3; }
.pwc-card-name:hover, .pwc-card-name:focus { color: var(--pwc-red-dark); }
.pwc-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pwc-card-price strong { font-size: 20px; }
.pwc-from { color: var(--pwc-muted); font-size: 14px; }
.pwc-card-note { color: #666; font-size: 13px; }
.pwc-card-spacer { flex: 1 1 auto; }
.pwc-card .pwc-btn { width: 100%; box-sizing: border-box; margin-top: 4px; }
.pwc-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 13px; }
.pwc-ladder-step { background: var(--pwc-bg); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; }
.pwc-ladder-step.is-best { background: var(--pwc-gold); }

/* Fabrics: write-up on buying by the roll, beside the popular fabrics */
.pwc-fabric-intro { display: flex; flex-direction: column; gap: 12px; background: #fbf5de; border: 1px solid #ecdca0; border-radius: var(--pwc-radius); padding: 22px 20px 20px; color: #333; }
.pwc-fabric-intro .pwc-eyebrow { color: var(--pwc-red-dark); font-size: 13px; }
.pwc-fabric-title { margin: 0; font-size: 30px; color: var(--pwc-ink); }
.pwc-fabric-intro p { margin: 0; line-height: 1.5; }
.pwc-fabric-example, .pwc-fabric-example:visited { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 8px; padding: 12px 14px; color: var(--pwc-text); text-decoration: none; border: 1px solid #ecdca0; }
.pwc-fabric-example:hover, .pwc-fabric-example:focus { color: var(--pwc-text); border-color: var(--pwc-ink); }
.pwc-fabric-example-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pwc-fabric-example-steps { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; }
.pwc-fabric-arrow { color: var(--pwc-muted); }
.pwc-fabric-saving { align-self: flex-start; background: var(--pwc-ink); color: var(--pwc-gold); font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 999px; }
.pwc-fabric-intro .pwc-btn { width: 100%; box-sizing: border-box; }

.pwc-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; background: #fff; border: 1px solid var(--pwc-line); border-radius: 14px; padding: 24px 30px; }
.pwc-docs-text { flex: 1 1 360px; display: flex; flex-direction: column; color: #444; }
.pwc-docs-title { font-family: var(--pwc-head); font-weight: 700; font-size: 26px; text-transform: uppercase; color: var(--pwc-text); }

/* ===== Shop and product pages ===== */
.woocommerce ul.products li.product {
	background: var(--pwc-card);
	border: 1px solid var(--pwc-line);
	border-radius: var(--pwc-radius);
	padding: 0 0 16px;
	overflow: hidden;
	text-align: left;
}
.woocommerce ul.products li.product a img { margin: 0 0 12px; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--pwc-body); font-weight: 600; font-size: 16px; text-transform: none; padding: 0 14px; color: var(--pwc-text); }
.woocommerce ul.products li.product .price { padding: 0 14px; color: var(--pwc-text); font-weight: 700; font-size: 17px; }
.woocommerce ul.products li.product .button { margin: 10px 14px 0; }
.woocommerce span.onsale { background: var(--pwc-red); color: #fff; border-radius: 999px; min-height: 0; min-width: 0; padding: 3px 10px; line-height: 1.5; font-weight: 600; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--pwc-text); font-family: var(--pwc-head); font-weight: 700; font-size: 34px; }
.woocommerce div.product p.price small, .woocommerce div.product span.price small,
.woocommerce ul.products li.product .price small { font-family: var(--pwc-body); font-weight: 400; font-size: 14px; color: var(--pwc-muted); }
.woocommerce .woocommerce-breadcrumb { font-size: 14px; color: var(--pwc-muted); }
.woocommerce .woocommerce-breadcrumb a { color: var(--pwc-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--pwc-red); }

/* "Not sure what you need? Build your kit" (Vacuum Bagging pages) */
.pwc-kit-prompt, .pwc-kit-prompt:visited { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 18px; padding: 14px 16px; border-radius: var(--pwc-radius); background: #fbf5de; border: 1px solid #ecdca0; color: var(--pwc-text); text-decoration: none; line-height: 1.4; }
.pwc-kit-prompt:hover, .pwc-kit-prompt:focus { border-color: var(--pwc-ink); color: var(--pwc-text); }
.pwc-kit-prompt > span:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.pwc-kit-prompt-icon { display: inline-flex; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: var(--pwc-ink); color: var(--pwc-gold); align-items: center; justify-content: center; }
.pwc-kit-prompt-go { flex: 0 0 auto; font-weight: 700; color: var(--pwc-red-dark); white-space: nowrap; }

/* Fabric product pages: lengths with price per metre, and the longer-roll prompt */
.pwc-metre-table { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; max-width: 460px; }
.pwc-lengths-only table.variations tr.pwc-length-row { display: none; } /* the length table replaces the length dropdown */
.pwc-lengths-only table.variations:not(:has(tr:not(.pwc-length-row))) { display: none; } /* nothing else left in it */
.pwc-metre-head, .pwc-metre-row { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 8px; align-items: baseline; padding: 6px 12px; }
.pwc-metre-head { font-size: 13px; font-weight: 600; color: var(--pwc-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pwc-metre-row { width: 100%; text-align: left; border: 1px solid var(--pwc-line); border-radius: 8px; background: #fff; color: var(--pwc-text); font: inherit; font-size: 15px; line-height: 1.4; cursor: pointer; }
.pwc-metre-row:hover, .pwc-metre-row:focus-visible { border-color: var(--pwc-ink); background: #fff; color: var(--pwc-text); }
.pwc-metre-row.is-best { background: #fbf5de; border-color: #ecdca0; }
.pwc-metre-row.is-current { border: 2px solid var(--pwc-ink); padding: 5px 11px; }
.pwc-metre-len { font-weight: 700; }
.pwc-metre-per em { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--pwc-ink); color: var(--pwc-gold); white-space: nowrap; }
.pwc-metre-note { font-size: 13px; color: var(--pwc-muted); padding: 2px 2px 0; }
.pwc-metre-rows { display: flex; flex-direction: column; gap: 4px; }
.pwc-metre-choose { font-size: 15px; color: var(--pwc-muted); padding: 8px 12px; border: 1px dashed var(--pwc-line); border-radius: 8px; }
.pwc-metre-choose[hidden] { display: none; }
.pwc-metre-table.is-waiting .pwc-metre-head { display: none; }
.pwc-var-per-m { font-family: var(--pwc-body); font-size: 16px; font-weight: 600; color: var(--pwc-muted); margin-left: 6px; }
.pwc-roll-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: var(--pwc-ink); color: #fff; font-size: 15px; max-width: 560px; }
.pwc-roll-tip[hidden] { display: none; }
.pwc-roll-tip strong { color: var(--pwc-gold); }
.pwc-roll-tip > span { flex: 1 1 260px; min-width: 0; }
.pwc-roll-switch { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--pwc-gold); color: var(--pwc-ink); font-weight: 700; cursor: pointer; }
.pwc-roll-switch:hover, .pwc-roll-switch:focus { background: #e9d184; color: var(--pwc-ink); }

/* ===== Slide-out cart ===== */
.pwc-drawer { position: fixed; inset: 0; z-index: 100000; }
.pwc-drawer[hidden] { display: none; }
.pwc-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity .2s; }
.pwc-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform .2s ease-out; outline: none; }
.pwc-drawer.is-in .pwc-drawer-backdrop { opacity: 1; }
.pwc-drawer.is-in .pwc-drawer-panel { transform: none; }
html.pwc-drawer-open { overflow: hidden; }
.pwc-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 3px solid var(--pwc-gold); }
.pwc-drawer-title { font-family: var(--pwc-head); font-weight: 700; font-size: 26px; text-transform: uppercase; }
.pwc-drawer-close { display: inline-flex; padding: 6px; background: none; border: 0; color: var(--pwc-ink); cursor: pointer; border-radius: 6px; }
.pwc-drawer-close:hover, .pwc-drawer-close:focus { background: var(--pwc-bg); color: var(--pwc-ink); }
.pwc-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 20px; }
.pwc-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; min-height: 100%; }
.pwc-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.pwc-drawer .woocommerce-mini-cart-item { position: relative; display: block; padding: 14px 32px 14px 0; border-bottom: 1px solid var(--pwc-line); margin: 0; line-height: 1.35; }
.pwc-drawer .woocommerce-mini-cart-item a:not(.remove) { display: flex; align-items: center; gap: 12px; color: var(--pwc-text); text-decoration: none; font-weight: 600; }
.pwc-drawer .woocommerce-mini-cart-item img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--pwc-line); border-radius: 6px; margin: 0; float: none; }
.pwc-drawer .woocommerce-mini-cart-item .variation { margin: 6px 0 0 76px; font-size: 13px; color: var(--pwc-muted); }
.pwc-drawer .woocommerce-mini-cart-item .variation dt, .pwc-drawer .woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; }
.pwc-drawer .woocommerce-mini-cart-item .variation dt { margin-right: 4px; }
.pwc-drawer .woocommerce-mini-cart-item .variation dd p { display: inline; margin: 0; }
.pwc-drawer .woocommerce-mini-cart-item .quantity { display: block; margin: 4px 0 0 76px; color: var(--pwc-muted); font-size: 14px; }
.pwc-drawer a.remove { position: absolute; top: 14px; right: 0; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 50%; color: var(--pwc-muted) !important; font-size: 20px; text-decoration: none; }
.pwc-drawer a.remove:hover { background: var(--pwc-red); color: #fff !important; }
.pwc-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 0; padding: 16px 0; font-size: 18px; }
.pwc-drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pwc-drawer .woocommerce-mini-cart__buttons .button { display: block; text-decoration: none; width: 100%; box-sizing: border-box; margin: 0; text-align: center; padding: 13px 16px; border-radius: 8px; font-weight: 600; background: #fff; color: var(--pwc-ink); border: 1px solid var(--pwc-ink); }
.pwc-drawer .woocommerce-mini-cart__buttons .button.checkout { background: var(--pwc-gold); border-color: #d9c27a; }
.pwc-drawer .woocommerce-mini-cart__buttons .button:hover { background: var(--pwc-ink); color: #fff; }
.pwc-drawer .woocommerce-mini-cart__buttons .button.checkout:hover { background: #e9d184; color: var(--pwc-ink); }
.pwc-drawer .woocommerce-mini-cart__empty-message { margin: 24px 0; color: var(--pwc-muted); text-align: center; }
.pwc-drawer .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.6) !important; }

/* ===== Page changes =====
   In browsers that support it (Chrome, Edge, Safari), the header stays still
   while the page underneath changes, instead of the whole window flashing. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.pwc-header { view-transition-name: pwc-header; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; }
}

/* ===== Smaller computers and tablets ===== */
/* Not enough room for everything on one line: Tech docs and Contact are
   in the footer (and Technical Documents on the homepage). */
@media (max-width: 1240px) {
	.pwc-helplinks { display: none; }
}
/* Computers: everything on one line, the search box takes what's left. */
@media (min-width: 901px) {
	.pwc-header-row { flex-wrap: nowrap; gap: 14px 20px; }
}

/* ===== Phones and small tablets ===== */
@media (max-width: 900px) {
	.pwc-header-row { gap: 12px 12px; }
	.pwc-search { order: 5; flex-basis: 100%; }
	.pwc-account { margin-left: auto; }
	.pwc-account a { padding: 8px 10px; }
	.pwc-account-link span { display: none; }
	.pwc-logo-img { max-height: 46px; }
	.pwc-catstrip .pwc-mega-tiles .pwc-tile { flex-basis: 84px; }
	.pwc-catstrip .pwc-mega-tiles .pwc-tile-img { width: 62px; height: 62px; }
	.pwc-h2 { font-size: 32px; }
	.pwc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pwc-subrow .pwc-tile { flex-basis: 88px; }
	.pwc-subrow .pwc-tile-img { width: 66px; height: 66px; }
	.pwc-hero { padding-top: 16px; }
	.pwc-hero-inner { padding: 28px 22px; gap: 24px; border-radius: 12px; }
	.pwc-hero-card-img img { height: 240px; }
	.pwc-catstrip-inner { padding-left: 0; padding-right: 0; }
	.pwc-catstrip-side { display: none; } /* phones: the logo takes you home */
	.pwc-catstrip-track { padding: 12px 12px 6px; scroll-padding: 0 12px; }
	.pwc-tile.is-ring::before, .pwc-tile.is-ring-dim::before { top: 39px; width: 110px; height: 104px; } /* 66px pictures */
	.pwc-catstrip .pwc-tile { flex-basis: 88px; }
	.pwc-tile-all .pwc-tile-img svg { width: 28px; height: 28px; }
	.pwc-catstrip .pwc-tile-img { width: 66px; height: 66px; }
	.pwc-tile-name { font-size: 12.5px; }
}
/* Phones: use the full width. GeneratePress's own boxes (30px padding plus
   margins) are tightened to the same edge as the header and category row,
   so everything lines up down the left side. */
@media (max-width: 768px) {
	:root { --pwc-gutter: 15px; }
	.site.grid-container, .site-content, .grid-container.container { padding-left: 0; padding-right: 0; }
	.separate-containers .site-main { margin-left: 0; margin-right: 0; }
	.separate-containers .inside-article,
	.separate-containers .page-header,
	.separate-containers .comments-area,
	.separate-containers .paging-navigation,
	.one-container .site-content,
	.inside-page-header { padding-left: var(--pwc-gutter); padding-right: var(--pwc-gutter); }
	.separate-containers .inside-article { padding-top: 18px; padding-bottom: 24px; }
	.widget-area .widget { padding-left: var(--pwc-gutter); padding-right: var(--pwc-gutter); }
	/* Product grids: two even columns, edge to edge */
	.woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
	.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; padding: 0 10px; }
	.woocommerce ul.products li.product .price { padding: 0 10px; font-size: 16px; }
	/* Each row's boxes are the same height and the buttons line up along the bottom,
	   however much the name or price wraps. */
	.woocommerce ul.products li.product { display: flex; flex-direction: column; padding-bottom: 12px; }
	.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: block; padding-bottom: 10px; }
	.woocommerce ul.products li.product .button { margin: auto 10px 0; display: block; text-align: center; padding: 10px 6px; font-size: 15px; line-height: 1.2; }
	.woocommerce ul.products li.product .price small { display: block; font-size: 12px; }
	.pwc-hero-inner { padding: 24px 18px; }
	.pwc-catstrip-track { padding-left: var(--pwc-gutter); padding-right: var(--pwc-gutter); scroll-padding: 0 var(--pwc-gutter); }
}
@media (max-width: 560px) {
	/* Homepage rows swipe sideways (the fabrics write-up is the first card). */
	.pwc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--pwc-gutter)); padding: 0 var(--pwc-gutter) 6px; scroll-padding: 0 var(--pwc-gutter); scrollbar-width: none; }
	.pwc-grid::-webkit-scrollbar { display: none; }
	.pwc-grid > .pwc-card { flex: 0 0 72%; scroll-snap-align: start; }
	.pwc-grid > .pwc-fabric-intro { flex: 0 0 82%; scroll-snap-align: start; }
	.pwc-subrow-track { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 16px; }
	.pwc-mega-groups { padding: 14px 12px 16px; }
}
@media (max-width: 480px) {
	.pwc-logo-img { max-height: 36px; }
	.pwc-subtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.pwc-subtiles .pwc-tile { padding: 6px 6px 10px; gap: 5px; }
	.pwc-subtiles .pwc-tile-name { font-size: 13px; }
	.pwc-tile-count { font-size: 12px; }
}