/*
Theme Name: Fabtech Merch
Theme URI: https://fabtechapparels.in
Description: Fabtech Apparels — wholesale t-shirt manufacturer. Child theme of Storefront, structured as a premium B2B catalogue and quote funnel.
Author: Fabtech Apparels
Template: storefront
Version: 2.0.0
*/

/* ============================================================
   Tokens
   Restrained palette: ink, warm paper, one bronze accent.
   The old bright amber read cheap next to product photography.
   ============================================================ */
:root {
	--ink:        #14161a;
	--ink-2:      #454c56;
	--muted:      #7b828c;
	--line:       #e4e2dd;
	--line-soft:  #efedE9;
	--paper:      #ffffff;
	--paper-2:    #faf8f5;   /* warm off-white, not grey */
	--bronze:     #9a6b3f;
	--green:      #128c4a;

	--wrap:   1240px;
	--gutter: 32px;
	--radius: 4px;           /* near-square = more considered */

	--fs-display: clamp(31px, 5.6vw, 76px);
	--fs-h2:      clamp(28px, 3.2vw, 44px);
	--fs-lead:    clamp(17px, 1.4vw, 20px);
}

/* ============================================================
   Base
   ============================================================ */
/*
 * Our padded containers (.fab-wrap, .fab-strip__row, .fab-cta …) combine a
 * max-width with side padding. Without border-box that padding is added OUTSIDE
 * the width, so on a 390px phone a 20px gutter produced a 430px page and clipped
 * the right edge. Force it for everything inside the theme.
 */
.fabtech *, .fabtech *::before, .fabtech *::after { box-sizing: border-box; }

body.fabtech {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "kern" 1, "liga" 1;
}
.fabtech .site-content { padding: 0; margin: 0; }
/*
 * Storefront wraps content in .col-full with a 2.617924em side padding and its own
 * max-width. Our sections manage their own gutters via .fab-wrap, and leaving both
 * in place pushed the layout wider than a phone viewport (content clipped on the
 * right). Reset it for the content area only — the header keeps its own padding.
 */
.fabtech .site-content .col-full,
.fabtech .site-content > .col-full {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
	box-sizing: border-box;
}
.fabtech #content.site-content { overflow-x: clip; }

.fab-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.fab-section { padding: clamp(64px, 8vw, 116px) 0; }
.fab-section--tight { padding: clamp(48px, 5vw, 72px) 0; }
.fab-section--paper { background: var(--paper-2); }

.fabtech h1, .fabtech h2, .fabtech h3 {
	color: var(--ink);
	letter-spacing: -0.025em;
	line-height: 1.08;
	font-weight: 700;
	margin: 0;
}
.fab-h2 { font-size: var(--fs-h2); margin: 0 0 14px; }
.fab-sub { color: var(--ink-2); font-size: var(--fs-lead); max-width: 58ch; margin: 0; line-height: 1.6; }
.fab-eyebrow {
	display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
	text-transform: uppercase; color: var(--bronze); margin: 0 0 18px;
}
/* consistent section headers */
.fab-head { margin-bottom: clamp(34px, 4vw, 54px); }

/* ============================================================
   Buttons
   ============================================================ */
.fab-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 16px 32px; font-weight: 550; font-size: 15px; letter-spacing: .01em;
	text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	cursor: pointer; line-height: 1;
}
.fab-btn:hover { text-decoration: none; }
.fab-btn--primary { background: var(--ink); color: #fff; }
.fab-btn--primary:hover { background: #000; color: #fff; }
.fab-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.fab-btn--ghost:hover { background: var(--ink); color: #fff; }
.fab-btn--wa { background: var(--green); color: #fff; }
.fab-btn--wa:hover { background: #0f7a40; color: #fff; }
.fab-btn--light { background: #fff; color: var(--ink); border-color: rgba(255,255,255,.25); }
.fab-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.fab-btn--outline-light:hover { background: #fff; color: var(--ink); }

/* ============================================================
   Header — single clean row
   ============================================================ */
.fabtech .site-header {
	background: var(--paper); border-bottom: 1px solid var(--line);
	padding: 0; margin: 0;
}
.fabtech .site-header .col-full { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter); }
.fabtech .site-branding { margin: 0; padding: 0; float: none; width: auto; }
.fabtech .site-branding .site-title a { font-weight: 700; letter-spacing: -.02em; font-size: 21px; color: var(--ink); }
.fabtech .site-branding .site-description { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; letter-spacing: .01em; }
.fabtech .site-header .site-search { display: none; }
.fabtech .storefront-primary-navigation { background: transparent; border-top: 1px solid var(--line-soft); }
.fabtech .main-navigation ul.menu > li > a,
.fabtech .main-navigation ul.nav-menu > li > a {
	font-size: 14.5px; font-weight: 500; color: var(--ink-2); padding: 15px 0; letter-spacing: .01em;
}
.fabtech .main-navigation ul.menu > li { margin-right: 30px; }
.fabtech .main-navigation ul.menu > li > a:hover { color: var(--ink); }
.fabtech .site-header-cart { font-size: 14px; }

/* ============================================================
   Hero — asymmetric editorial split
   ============================================================ */
.fab-hero { border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.fab-hero__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
	width: 100%; max-width: var(--wrap); margin: 0 auto; gap: 0;
}
.fab-hero__copy { padding: clamp(56px, 7vw, 110px) clamp(28px, 4vw, 64px) clamp(56px, 7vw, 110px) var(--gutter); align-self: center; }
.fab-hero h1 { font-size: var(--fs-display); font-weight: 700; margin: 0 0 22px; letter-spacing: -.035em; }
.fab-hero h1 em { font-style: italic; font-weight: 400; color: var(--bronze); }
.fab-hero__lead { font-size: var(--fs-lead); color: var(--ink-2); margin: 0 0 34px; max-width: 46ch; }
.fab-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.fab-hero__meta { display: grid; grid-template-columns: repeat(3, auto); gap: 34px; justify-content: start; }
.fab-hero__meta b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.fab-hero__meta span { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.fab-hero__art { position: relative; min-height: 480px; background: var(--paper-2); }
.fab-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Trust strip
   ============================================================ */
.fab-strip { background: var(--ink); color: #fff; }
.fab-strip__row {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
.fab-strip__item { padding: 30px 26px 30px 0; border-right: 1px solid rgba(255,255,255,.12); }
.fab-strip__item:last-child { border-right: 0; }
.fab-strip__item b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.fab-strip__item span { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.55; }

/* ============================================================
   Video — full bleed, the factory proof
   ============================================================ */
.fab-film { position: relative; background: #000; overflow: hidden; }
.fab-film__media { position: relative; width: 100%; aspect-ratio: 21/9; min-height: 380px; }
.fab-film__media video,
.fab-film__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fab-film__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.12) 100%);
}
.fab-film__copy {
	position: absolute; inset: 0; display: flex; align-items: center;
	max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
.fab-film__inner { max-width: 30ch; color: #fff; }
.fab-film__inner .fab-eyebrow { color: rgba(255,255,255,.72); }
.fab-film h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 16px; }
.fab-film p { color: rgba(255,255,255,.82); font-size: 16.5px; margin: 0 0 28px; }

/* ============================================================
   Category tiles
   ============================================================ */
.fab-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fab-cat { display: block; text-decoration: none; color: var(--ink); }
.fab-cat__img {
	aspect-ratio: 4/5; background: var(--paper-2); overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px;
}
.fab-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.fab-cat:hover img { transform: scale(1.04); }
.fab-cat:hover { text-decoration: none; }
.fab-cat strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.fab-cat span { font-size: 13px; color: var(--muted); }

/* ============================================================
   Product grid
   ============================================================ */
.fab-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 20px; }
.fab-card { display: flex; flex-direction: column; }
.fab-card__img {
	display: block; aspect-ratio: 4/5; background: var(--paper-2); overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px;
}
.fab-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.fab-card:hover .fab-card__img img { transform: scale(1.04); }
.fab-card__img.is-empty { display: grid; place-items: center; color: #b6b1a8; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.fab-card__title { font-size: 14.5px; font-weight: 550; line-height: 1.4; margin: 0 0 5px; }
.fab-card__title a { color: var(--ink); text-decoration: none; }
.fab-card__title a:hover { color: var(--bronze); }
.fab-card__price { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.fab-card__price .from { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.fab-card__moq { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ============================================================
   Process steps
   ============================================================ */
.fab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.fab-step { padding: 34px 30px 34px 0; border-right: 1px solid var(--line); }
.fab-step:last-child { border-right: 0; padding-right: 0; }
.fab-step em {
	display: block; font-style: normal; font-size: 12px; letter-spacing: .18em;
	color: var(--bronze); margin-bottom: 14px; font-weight: 600;
}
.fab-step b { display: block; font-size: 16.5px; font-weight: 600; margin-bottom: 8px; letter-spacing: -.01em; }
.fab-step span { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   Testimonials
   ============================================================ */
.fab-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fab-quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.fab-quote p { font-size: 16px; color: var(--ink); margin: 0 0 22px; line-height: 1.6; letter-spacing: -.005em; }
.fab-quote cite { font-style: normal; font-size: 13.5px; font-weight: 600; display: block; }
.fab-quote small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.fab-stars { color: var(--bronze); font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }

/* ============================================================
   Closing CTA
   ============================================================ */
.fab-cta { background: var(--ink); color: #fff; padding: clamp(64px, 8vw, 104px) var(--gutter); text-align: center; }
.fab-cta h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 16px; }
.fab-cta p { color: rgba(255,255,255,.72); font-size: var(--fs-lead); margin: 0 auto 34px; max-width: 52ch; }
.fab-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FAQ
   ============================================================ */
.fab-faq { max-width: 780px; margin: 0 auto; }
.fab-faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.fab-faq details:first-child { border-top: 1px solid var(--line); }
.fab-faq summary {
	cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
	display: flex; justify-content: space-between; gap: 24px; letter-spacing: -.01em;
}
.fab-faq summary::-webkit-details-marker { display: none; }
.fab-faq summary::after { content: "+"; color: var(--bronze); font-weight: 400; font-size: 21px; line-height: 1; }
.fab-faq details[open] summary::after { content: "\2013"; }
.fab-faq p { color: var(--ink-2); margin: 14px 0 0; font-size: 15.5px; max-width: 68ch; }

/* ============================================================
   Wholesale tier table
   ============================================================ */
.fab-tiers { width: 100%; max-width: 360px; border-collapse: collapse; margin: 20px 0 8px; font-size: 14.5px; }
.fab-tiers th, .fab-tiers td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); }
.fab-tiers thead th { background: var(--paper-2); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.fab-tiers tbody tr:last-child td { font-weight: 700; }
.fab-tiers__note { font-size: 13px; color: var(--muted); margin: 0 0 18px; }

/* ============================================================
   Checkout payment plan
   ============================================================ */
.fab-plan { margin: 0 0 28px; }
.fab-plan h3 { font-size: 16.5px; font-weight: 650; margin: 0 0 14px; }
.fab-plan__row {
	display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin-bottom: 10px;
	border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: #fff;
	transition: border-color .18s ease;
}
.fab-plan__row:hover { border-color: var(--ink-2); }
.fab-plan__row.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fab-plan__row input { margin-top: 4px; flex: 0 0 auto; }
.fab-plan__row b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.fab-plan__row small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* ============================================================
   Footer + WhatsApp
   ============================================================ */
.fabtech .site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: 0; color: var(--ink-2); }
.fab-wa-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 999; background: var(--green); color: #fff;
	border-radius: 999px; padding: 13px 22px; font-weight: 600; font-size: 14.5px; text-decoration: none;
	box-shadow: 0 8px 28px rgba(0,0,0,.18); display: inline-flex; gap: 9px; align-items: center;
}
.fab-wa-float:hover { color: #fff; background: #0f7a40; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.fab-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.fab-hero__copy { padding: 56px var(--gutter) 48px; width: 100%; }
	.fab-hero__art { min-height: 420px; }
	.fab-products, .fab-cats { grid-template-columns: repeat(3, 1fr); }
	.fab-strip__row { grid-template-columns: repeat(2, 1fr); }
	.fab-strip__item { border-right: 0; padding: 22px 20px 22px 0; }
	.fab-steps { grid-template-columns: repeat(2, 1fr); }
	.fab-step { border-right: 0; padding-right: 24px; }
	.fab-quotes { grid-template-columns: 1fr; }
	.fab-film__media { aspect-ratio: 16/9; }
	.fab-film__scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%); }
}
@media (max-width: 640px) {
	:root { --gutter: 20px; }
	.fab-products, .fab-cats { grid-template-columns: repeat(2, 1fr); }
	.fab-strip__row, .fab-steps { grid-template-columns: 1fr; }
	/* The three stats forced the page wider than the viewport on a phone. */
	.fab-hero__meta { display: flex; flex-wrap: wrap; gap: 18px 26px; }
	.fab-hero__meta b { font-size: 20px; }
	.fab-hero__meta span { font-size: 12px; }
	.fab-hero h1 { letter-spacing: -.02em; }
	.fab-hero__cta .fab-btn { flex: 1 1 auto; }
	.fab-film__media { aspect-ratio: 4/5; min-height: 440px; }
	.fab-film__inner { max-width: none; }
	.fab-strip__item { padding-right: 0; }
	.fab-quote { padding: 26px 22px; }
}

/*
 * Grid and flex children default to min-width:auto, so they refuse to shrink below
 * their content and push the whole page wider than a phone viewport. Every direct
 * child of our layout grids needs min-width:0 to be allowed to shrink and wrap.
 */
.fab-hero__copy, .fab-hero__art,
.fab-strip__item, .fab-cat, .fab-card, .fab-step, .fab-quote,
.fab-film__inner, .fab-plan__row {
	min-width: 0;
}
.fab-hero__cta { min-width: 0; }
.fab-hero__cta .fab-btn { min-width: 0; max-width: 100%; }

/* Nothing should ever push the page sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }
.fabtech img, .fabtech video { max-width: 100%; }
.fabtech h1, .fabtech h2, .fabtech h3, .fabtech p { overflow-wrap: break-word; }

/* ============================================================
   Shop, category and product pages
   The homepage was rebuilt to the tokens above; these pages were
   still rendering bare Storefront, which is why the site felt like
   two different companies. Everything here reuses the same ink /
   warm paper / bronze palette and the 4px near-square radius. No
   new colours are introduced.

   The buyer here is a shop owner comparing suppliers, not a
   consumer browsing. So the hierarchy leads with price per piece,
   fabric weight and minimum order, and stays quiet everywhere else.
   ============================================================ */

/* ---------- shared page frame ---------- */
.woocommerce-page .site-content,
.woocommerce .site-content {
	background: var(--paper);
}
.woocommerce-page .col-full,
.woocommerce .col-full {
	max-width: var(--wrap);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.woocommerce-breadcrumb {
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--muted);
	margin: 22px 0 26px;
}
.woocommerce-breadcrumb a { color: var(--muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ink); }

.woocommerce-products-header__title,
.woocommerce-loop-product__title,
.product_title {
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--ink);
}
.woocommerce-products-header__title {
	font-size: var(--fs-h2);
	margin: 0 0 6px;
}

/* Storefront's default sorting row reads like a 2011 admin screen. */
.woocommerce-result-count,
.woocommerce-ordering select {
	font-size: 14px;
	color: var(--muted);
}
.woocommerce-ordering select {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 8px 12px;
	background: var(--paper);
	color: var(--ink);
}

/* ---------- catalogue grid ---------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 30px 26px;
	margin: 0 0 48px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }   /* kill Storefront's float clearing */

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--ink-2);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--paper-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.35;
	padding: 14px 15px 0;
	margin: 0;
	min-height: 3.1em;
}
.woocommerce ul.products li.product .price {
	padding: 0 15px 4px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
}
/* "per piece" matters more than the number alone to a wholesale buyer */
.woocommerce ul.products li.product .price::after {
	content: " / piece";
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	letter-spacing: .02em;
}
.woocommerce ul.products li.product .button {
	margin: auto 15px 15px;
	text-align: center;
}

/* ---------- single product ---------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 46px;
	align-items: start;
	margin-bottom: 54px;
}
@media (max-width: 860px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 26px; }
}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.single-product .woocommerce-product-gallery img {
	border-radius: var(--radius);
	background: var(--paper-2);
}
.single-product .product_title {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.18;
	margin: 0 0 10px;
}
.single-product .summary .price {
	font-size: 28px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 4px;
}
.single-product .summary .price .woocommerce-Price-amount { color: var(--ink); }
.single-product .summary .woocommerce-product-details__short-description {
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.65;
	margin: 14px 0 20px;
}

/* ---------- size / colour chooser ----------
   Replaces Storefront's <select>. The select is kept in the DOM and
   stays authoritative, so WooCommerce's variation logic, price
   updates and stock checks all keep working untouched; the buttons
   only drive it. See inc/shop-ui.php.
   ------------------------------------------------------- */
.single-product table.variations { border: none; margin: 0 0 18px; }
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th {
	display: block;
	border: none;
	padding: 0;
	background: none;
}
.single-product table.variations th.label {
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 9px;
	font-weight: 600;
}
.single-product table.variations td.value { margin-bottom: 18px; }

.fab-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.fab-swatch {
	appearance: none;
	min-width: 52px;
	padding: 11px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fab-swatch:hover { border-color: var(--ink-2); }
.fab-swatch:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.fab-swatch[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
/* a size that cannot be bought should look unavailable, not merely fail on click */
.fab-swatch[disabled] {
	color: var(--muted);
	background: var(--paper-2);
	border-color: var(--line-soft);
	cursor: not-allowed;
	text-decoration: line-through;
}
/* The dropdown is hidden ONLY once the buttons actually exist. Written this way
   round deliberately: hiding it by default would leave a page with no way to
   choose a size at all if the script failed to run. */
.fab-swatched table.variations select { display: none; }

.single-product .woocommerce-variation-price { margin: 0 0 14px; }
.single-product .reset_variations {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--muted);
}

/* ---------- quantity + add to cart ---------- */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.single-product .quantity .qty {
	height: 100%;
	min-height: 48px;
	width: 88px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font-size: 16px;
	text-align: center;
}
.single-product form.cart .single_add_to_cart_button {
	min-height: 48px;
	padding: 0 30px;
	border-radius: var(--radius);
}

/* ---------- wholesale facts strip ----------
   Injected on product pages. A shop owner deciding between suppliers
   wants minimum order, fabric weight and dispatch time before they
   want marketing copy.
   ------------------------------------------------------- */
.fab-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 22px 0;
	overflow: hidden;
}
.fab-facts div { background: var(--paper-2); padding: 13px 15px; }
.fab-facts dt {
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 4px;
}
.fab-facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---------- tabs ---------- */
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--line); padding: 0; margin: 0 0 24px; }
.woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	margin: 0 26px 0 0;
	padding: 0 0 12px;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a {
	font-size: 13px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--muted);
	padding: 0;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); box-shadow: inset 0 -2px 0 var(--bronze); padding-bottom: 12px; }

/* ---------- messages ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--bronze);
	background: var(--paper-2);
	border-radius: var(--radius);
	color: var(--ink);
}

/* ---------- single product: explicit grid placement ----------
   Making div.product a two column grid turned EVERY child into a grid cell,
   not just the gallery and summary. The result was gallery and summary
   swapped sides, and the tabs, related products and pagination crushed into
   half width columns. Auto placement cannot be relied on here because
   Storefront's markup order differs from the visual order we want.

   So each region is placed explicitly: gallery left, summary right, and
   everything below spans the full width.
   ------------------------------------------------------------ */
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.single-product div.product > .summary                     { grid-column: 2; grid-row: 1; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .storefront-product-pagination,
.single-product div.product > .product_meta,
.single-product div.product > .woocommerce-product-gallery__wrapper {
	grid-column: 1 / -1;
}
@media (max-width: 860px) {
	/* single column: fall back to source order, gallery first */
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- prev/next product navigation ----------
   Storefront floats 90x90 thumbnails of the previous and next product at the
   page edges. At this width they sit half off-screen (x=-45 and x=1235) and
   read as a rendering fault rather than a feature. A wholesale buyer navigates
   by category, not by shuffling between products, so it is removed rather than
   restyled.
   ------------------------------------------------------ */
.single-product .storefront-product-pagination { display: none; }

/* ---------- page gutter on WooCommerce templates ----------
   Storefront wraps the header and footer in .col-full (max 1240 + 32px gutter)
   but shop and product templates put their content directly in #primary, which
   spans the full viewport with no padding. So the catalogue, the sorting row and
   the product gallery all ran edge to edge while the header respected the
   margin - the single clearest reason the pages read as unfinished.

   Constraining #primary is done here rather than padding each element, so
   anything WooCommerce adds later inherits the same frame.
   ------------------------------------------------------------ */
.woocommerce-page #primary,
.woocommerce-page .woocommerce-products-header,
.woocommerce-page .storefront-breadcrumb .col-full {
	max-width: var(--wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.woocommerce-page #primary { padding-left: 18px; padding-right: 18px; }
}

/* Storefront floats .content-area, which defeats margin:auto and left the shop
   content 20px out of line with the header. Unfloating lets it centre on the
   same 1240 track as .col-full, so header and content share one edge. */
.woocommerce-page #primary,
.woocommerce-page .content-area { float: none; }