/*
Theme Name: GrandCuisin
Theme URI: https://grandcuisin.shop
Author: Hussain Asim
Description: A premium, WooCommerce-ready theme for GrandCuisin — a UK home & kitchen appliance store. Deep charcoal and warm copper palette, Poppins/Inter typography, homepage sections (hero slider, featured categories, best sellers, trust badges, FAQ), and built-in legal/info pages.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grandcuisin
*/

:root {
	--gcs-charcoal: #1C1C1E;
	--gcs-off-white: #F7F5F2;
	--gcs-copper: #C6753D;
	--gcs-copper-dark: #A85F2E;
	--gcs-teal: #2F6F65;
	--gcs-grey: #6B6B6E;
	--gcs-border: #E4DFD7;
	--gcs-radius: 10px;
	--gcs-shadow: 0 4px 18px rgba(28, 28, 30, 0.08);
	--gcs-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--gcs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--gcs-font-body);
	color: var(--gcs-charcoal);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--gcs-teal); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--gcs-font-heading);
	font-weight: 700;
	color: var(--gcs-charcoal);
	line-height: 1.25;
}
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.gcs-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Site header */
.gcs-site-header {
	background: #fff;
	border-bottom: 1px solid var(--gcs-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.gcs-site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.gcs-site-logo {
	font-family: var(--gcs-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--gcs-charcoal);
	text-decoration: none;
	flex: none;
}
.gcs-site-logo img { display: block; max-height: 44px; width: auto; }
.gcs-primary-nav { flex: 1; display: flex; justify-content: center; }
.gcs-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.gcs-primary-nav a {
	color: var(--gcs-charcoal);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.gcs-primary-nav a:hover { color: var(--gcs-copper); }
.gcs-header-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.gcs-header-cart {
	position: relative;
	color: var(--gcs-charcoal);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.gcs-header-cart__count {
	background: var(--gcs-copper);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}
.gcs-nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.gcs-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--gcs-charcoal);
	margin: 5px 0;
}

/* Header search */
.gcs-search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--gcs-charcoal);
	display: flex;
	align-items: center;
}
.gcs-search-toggle svg { width: 20px; height: 20px; }
.gcs-search-toggle:hover { color: var(--gcs-copper); }
.gcs-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid var(--gcs-border);
	box-shadow: 0 12px 24px rgba(28, 28, 30, 0.08);
	z-index: 90;
}
.gcs-search-form {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	gap: 10px;
}
.gcs-search-form input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--gcs-border);
	border-radius: var(--gcs-radius);
	font-size: 15px;
	font-family: var(--gcs-font-body);
}
.gcs-search-form .gcs-btn { padding: 12px 24px; flex: none; }

/* Page (non front-page) hero/title */
.gcs-page-title-bar {
	background: var(--gcs-off-white);
	padding: 36px 20px;
	text-align: center;
	border-bottom: 1px solid var(--gcs-border);
}
.gcs-page-title-bar h1 {
	margin: 0;
	font-size: 30px;
}
.gcs-page-title-bar p {
	margin: 10px 0 0;
	color: var(--gcs-grey);
	font-size: 15px;
}
/* Container for every standard page (page.php): legal/info pages, Contact,
   Track Order, and — importantly — Cart/Checkout/My Account, since those are
   WooCommerce shortcodes rendered through this same generic page template.
   Without this, WooCommerce's own form/table markup has no max-width and
   spans the full browser width edge-to-edge instead of sitting centered like
   the rest of the site. */
.gcs-page-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 70px;
	box-sizing: border-box;
}
/* About/Contact/Track Order supply their own hero/title-bar within their
   content, so the wrapper shouldn't add its own top padding above it. */
.gcs-page-content--flush {
	max-width: none;
	margin: 0;
	padding: 0;
}
.gcs-page-content--flush > .gcs-page-title-bar {
	margin: 0 0 40px;
}
.gcs-page-content--flush > .gcs-contact,
.gcs-page-content--flush > .gcs-track-page,
.gcs-page-content--flush > .gcs-about-content,
.gcs-page-content--flush > .gcs-about-values {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* About Us — hero */
.gcs-about-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 380px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.gcs-about-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(28,28,30,0.8) 0%, rgba(28,28,30,0.45) 55%, rgba(28,28,30,0.15) 100%);
}
.gcs-about-hero__content {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
}
.gcs-about-hero__content h1 {
	font-size: 38px;
	color: #fff;
	margin: 18px 0 12px;
	max-width: 560px;
}
.gcs-about-hero__content p {
	font-size: 16px;
	color: rgba(255,255,255,0.9);
	max-width: 480px;
	margin: 0;
}

/* About Us — story */
.gcs-about-content { padding: 60px 0; }
.gcs-about-content__grid { max-width: 720px; margin: 0 auto; }
.gcs-about-content__text h2 {
	font-size: 22px;
	margin: 0 0 14px;
	color: var(--gcs-copper);
}
.gcs-about-content__text h2:not(:first-child) { margin-top: 36px; }
.gcs-about-content__text p { font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.gcs-about-content__text .gcs-btn { margin-top: 10px; }

/* About Us — value props */
.gcs-about-values { background: var(--gcs-off-white); padding: 56px 0; }
.gcs-about-values__grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.gcs-about-values__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(198, 117, 61, 0.12);
	color: var(--gcs-copper);
	padding: 12px;
	margin-bottom: 14px;
}
.gcs-about-values__icon svg { width: 100%; height: 100%; }
.gcs-about-values__item h3 { font-size: 16px; margin: 0 0 6px; }
.gcs-about-values__item p { font-size: 13.5px; color: var(--gcs-grey); margin: 0; }

/* Contact Us */
.gcs-contact { padding: 20px 0 60px; }
.gcs-contact__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}
.gcs-contact__item {
	display: flex;
	gap: 16px;
	margin-bottom: 28px;
}
.gcs-contact__icon {
	flex: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(47, 111, 101, 0.1);
	color: var(--gcs-teal);
	padding: 9px;
}
.gcs-contact__icon svg { width: 100%; height: 100%; }
.gcs-contact__item h3 { font-size: 15px; margin: 0 0 4px; }
.gcs-contact__item p { font-size: 14px; color: var(--gcs-grey); margin: 0; line-height: 1.6; }
.gcs-contact__item p a { color: var(--gcs-charcoal); font-weight: 600; text-decoration: none; }
.gcs-contact__item p a:hover { color: var(--gcs-copper); }
.gcs-contact__form {
	background: var(--gcs-off-white);
	border-radius: 16px;
	padding: 32px;
}
.gcs-contact__form h2 { font-size: 20px; margin: 0 0 20px; }

/* Track Order */
.gcs-track-page { padding: 20px 0 60px; }
.gcs-track-preview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 48px;
}
.gcs-track-preview__step {
	background: #fff;
	border: 1px solid var(--gcs-border);
	border-radius: 14px;
	padding: 24px;
	text-align: center;
}
.gcs-track-preview__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(198, 117, 61, 0.12);
	color: var(--gcs-copper);
	padding: 11px;
	margin-bottom: 12px;
}
.gcs-track-preview__icon svg { width: 100%; height: 100%; }
.gcs-track-preview__step h3 { font-size: 15px; margin: 0 0 6px; }
.gcs-track-preview__step p { font-size: 13px; color: var(--gcs-grey); margin: 0; line-height: 1.55; }
.gcs-track-lookup {
	max-width: 560px;
	margin: 0 auto;
	background: var(--gcs-off-white);
	border-radius: 16px;
	padding: 32px;
}

@media (max-width: 860px) {
	.gcs-about-values__grid { grid-template-columns: repeat(2, 1fr); }
	.gcs-contact__grid { grid-template-columns: 1fr; }
	.gcs-track-preview { grid-template-columns: 1fr; }
	.gcs-about-hero { height: 300px; }
	.gcs-about-hero__content h1 { font-size: 28px; }
}

/* Blog */
.gcs-content { max-width: 1200px; margin: 0 auto; padding: 50px 20px; }
.gcs-post-list { display: grid; gap: 32px; max-width: 760px; margin: 0 auto; }
.gcs-post-card { border-bottom: 1px solid var(--gcs-border); padding-bottom: 28px; }
.gcs-post-card h2 { font-size: 22px; margin: 0 0 8px; }
.gcs-post-card h2 a { color: var(--gcs-charcoal); text-decoration: none; }
.gcs-post-card .gcs-post-meta { color: var(--gcs-grey); font-size: 13px; margin-bottom: 10px; }
.gcs-single-post { max-width: 760px; margin: 0 auto; padding: 50px 20px; line-height: 1.8; }
.gcs-single-post h1 { font-size: 32px; margin-bottom: 10px; }

/* WooCommerce overlay: let WooCommerce's own stylesheet handle structural shop/cart/checkout
   layout, and re-skin it with the brand palette. */
.gcs-woo-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px 70px; overflow: hidden; }
body.woocommerce-page { background: var(--gcs-off-white); }

/* Breadcrumb */
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--gcs-grey);
	margin: 0 0 20px;
}
.woocommerce-breadcrumb a { color: var(--gcs-grey); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--gcs-copper); }

/* Shop / category archive header — floating white card */
.woocommerce-products-header {
	background: #fff;
	border-radius: 20px;
	padding: 44px 48px;
	margin: 0 0 40px;
	box-shadow: var(--gcs-shadow);
}
.woocommerce-products-header__title.page-title {
	font-size: 32px;
	margin: 0 0 12px;
}
/* Some WooCommerce/theme combinations render a bare <h1 class="page-title">
   (no .woocommerce-products-header wrapper) — style that directly too, so
   the shop title is centered and consistent either way. */
h1.page-title {
	text-align: center;
	font-size: 30px;
	margin: 0 0 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--gcs-border);
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-products-header__description {
	color: var(--gcs-grey);
	font-size: 15px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0;
}

/* Result count + sort dropdown row */
.woocommerce-result-count {
	float: left;
	margin: 0;
	padding-top: 10px;
	color: var(--gcs-grey);
	font-size: 14px;
}
.woocommerce-ordering {
	float: right;
	margin: 0 0 30px;
}
.woocommerce-ordering select {
	padding: 10px 14px;
	border: 1px solid var(--gcs-border);
	border-radius: var(--gcs-radius);
	font-size: 14px;
	background: #fff;
	color: var(--gcs-charcoal);
}

/* ==========================================================================
   Shop / category archive — uniform product grid.
   Selector also matches related-products and upsell grids (same WC markup),
   so those get the same fix automatically.
   ========================================================================== */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	clear: both;
}
/* WooCommerce's own stylesheet puts a clearfix (content:" "; display:table)
   on ::before/::after of ul.products — needed for its default float-based
   column layout, but in a grid that generated content counts as a real grid
   item and silently occupies column 1, pushing every product over by one
   slot (visible as an empty gap before the first card, and the 4th product
   wrapping onto its own row). Neutralizing it here since we don't need a
   clearfix for a grid layout anyway. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce ul.products li.product {
	position: relative;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 16px !important;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--gcs-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(28, 28, 30, 0.14);
}
/* NOTE: WooCommerce's loop link (a.woocommerce-loop-product__link) wraps the
   image AND the title AND the price together — it is not just an image
   frame. The fixed aspect-ratio/crop box below is applied to the <img>
   itself, so the anchor stays a normal block and the title/price that follow
   the image inside it are never clipped. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 0 14px !important;
	border-radius: 10px;
	background: var(--gcs-off-white);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--gcs-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--gcs-charcoal);
	margin: 0 0 6px;
	line-height: 1.4;
}
.woocommerce ul.products li.product .star-rating { margin: 0 0 8px; }
.woocommerce ul.products li.product .price { margin: 0 0 14px; font-size: 16px; }
.woocommerce ul.products li.product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
}
.woocommerce ul.products li.product .gcs-product-card__actions {
	display: flex;
	gap: 8px;
	padding: 0;
	margin-top: auto;
}
.woocommerce ul.products li.product .gcs-product-card__actions .gcs-btn {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	font-size: 12px;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Single product page — gallery.
   Uses float (not inline-block) for the two-column split: inline-block
   columns leave a small rendered whitespace gap between them, and with no
   slack left in the width math (48% + 48% + 4% margin = 100%) that gap was
   enough to push the summary column onto its own line below the image
   instead of beside it. Floats have no such gap. woocommerce-tabs and
   related.products (siblings of these two, later in the same .product div)
   already have clear:both so they aren't affected by the floats. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: left;
	width: 47%;
	box-sizing: border-box;
}
.woocommerce div.product div.images { margin: 0 6% 0 0; }
.woocommerce div.product div.summary { margin: 0; }
.woocommerce div.product div.images {
	background: var(--gcs-off-white);
	border-radius: 18px;
	padding: 24px;
	overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
	position: relative;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
	display: block;
}
/* Fixed-height frame + object-fit: the image is never allowed to overflow its
   box, regardless of the source photo's native dimensions. */
.woocommerce div.product div.images img,
.woocommerce div.product div.images img.wp-post-image {
	width: 100%;
	height: 440px;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 auto;
	border-radius: 12px;
}
/* Single row, horizontally scrollable — some products have a dozen+ gallery
   images (energy labels, dimension diagrams, etc). Wrapping them would make
   this column grow arbitrarily tall; scrolling keeps its height fixed. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	gap: 10px;
	margin: 16px 0 0 !important;
	padding: 0 0 6px !important;
	list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 64px !important;
	height: 64px;
	margin: 0 !important;
	list-style: none;
	flex: none;
}
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 8px;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover img {
	opacity: 1;
	border-color: var(--gcs-copper);
}

/* Single product page — title, rating, price, short description */
.woocommerce div.product .product_title {
	font-size: 30px;
	line-height: 1.25;
	margin: 0 0 12px;
}
.woocommerce div.product .woocommerce-product-rating {
	margin: 0 0 16px;
}
.woocommerce div.product p.price {
	font-size: 26px;
	margin: 0 0 20px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--gcs-grey);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 26px;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Single product page — buy box card */
.woocommerce div.product form.cart {
	background: var(--gcs-off-white);
	border: 1px solid var(--gcs-border);
	border-radius: 16px;
	padding: 20px;
	margin: 0 0 24px;
}
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
.woocommerce div.product form.cart .quantity input.qty {
	height: 48px;
	width: 68px;
	text-align: center;
	border-radius: var(--gcs-radius);
	border: 1px solid var(--gcs-border);
	font-size: 15px;
	background: #fff;
}
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .gcs-buy-now-inline {
	flex: 1 1 140px;
	text-align: center;
	margin: 0 !important;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Single product page — trust row, sits between price and the buy box,
   framed with the same divider lines as the reference layout */
.gcs-product-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 20px;
	padding: 14px 0;
	border-top: 1px solid var(--gcs-border);
	border-bottom: 1px solid var(--gcs-border);
}
.gcs-product-trust__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gcs-charcoal);
}
.gcs-product-trust__item svg { width: 18px; height: 18px; color: var(--gcs-copper); flex: none; }

/* Single product page — meta row (category only; SKU/tags removed via
   the woocommerce/single-product/meta.php template override) */
.woocommerce div.product .product_meta,
.woocommerce div.product .gcs-product-meta {
	font-size: 13px;
	color: var(--gcs-grey);
	margin: 0 0 20px;
}
.woocommerce div.product .product_meta a,
.woocommerce div.product .gcs-product-meta a {
	color: var(--gcs-charcoal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce div.product .gcs-product-meta a:hover { color: var(--gcs-copper); }

/* Single product page — tabs (Description / Additional info / Reviews) */
/* Full width on desktop (matches the image/summary row above it) — the tab
   labels and description sit on the left side of that width, not centered
   as an isolated narrow column. */
.woocommerce-tabs { margin: 54px 0 0; clear: both; }
.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 30px;
	border-bottom: 1px solid var(--gcs-border);
	padding: 0;
	margin: 0 0 32px;
	background: none;
}
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 0;
	font-family: var(--gcs-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--gcs-grey);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--gcs-charcoal);
	border-bottom-color: var(--gcs-copper);
}
.woocommerce-tabs .panel {
	font-size: 15px;
	line-height: 1.8;
	color: var(--gcs-charcoal);
}
.woocommerce-tabs .panel h2 { font-size: 20px; margin-bottom: 14px; }
.woocommerce-Tabs-panel table.shop_attributes {
	border: none;
}
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td {
	border: none;
	border-bottom: 1px solid var(--gcs-border);
	padding: 12px 0;
}
.woocommerce-Tabs-panel table.shop_attributes th { font-weight: 600; width: 220px; }

/* Related / upsell products */
.related.products,
.up-sells.upsells.products {
	margin-top: 64px;
	padding-top: 50px;
	border-top: 1px solid var(--gcs-border);
	clear: both;
}
.related.products > h2,
.up-sells.upsells.products > h2 {
	font-family: var(--gcs-font-heading);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 28px;
}
/* Card/image sizing for these grids comes from the shared
   ".woocommerce ul.products li.product" rules above. */

@media (max-width: 768px) {
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
		display: block;
		margin: 0 0 24px;
	}
	.woocommerce div.product .product_title { font-size: 24px; }
	.woocommerce div.product p.price { font-size: 22px; }
	.woocommerce-tabs ul.tabs { gap: 20px; overflow-x: auto; }
	.woocommerce div.product div.images img,
	.woocommerce div.product div.images img.wp-post-image {
		height: 300px;
	}
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background: var(--gcs-copper) !important;
	color: #fff !important;
	border-radius: var(--gcs-radius) !important;
	font-family: var(--gcs-font-heading);
	font-weight: 600;
	border: none !important;
	padding: 12px 24px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--gcs-copper-dark) !important;
	color: #fff !important;
}
.woocommerce a.added_to_cart {
	color: var(--gcs-teal) !important;
	font-weight: 600;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--gcs-copper) !important;
	font-weight: 700;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--gcs-font-heading);
	font-size: 15px;
	color: var(--gcs-charcoal);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--gcs-copper) !important;
	color: #fff !important;
	border-color: var(--gcs-copper) !important;
}
.woocommerce span.onsale {
	background: var(--gcs-teal) !important;
	font-family: var(--gcs-font-heading);
}
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--gcs-teal) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--gcs-teal) !important;
}
.woocommerce-error {
	border-top-color: var(--gcs-copper) !important;
}
.woocommerce-error::before {
	color: var(--gcs-copper) !important;
}

/* Hide product tags on the single product page (categories/SKU still show) */
.woocommerce div.product .product_meta .tagged_as {
	display: none !important;
}

/* Single product page: Buy Now button next to Add to Cart */
.gcs-buy-now-inline {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
	padding: 12px 24px !important;
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.woocommerce div.product form.cart .gcs-buy-now-inline { margin-left: 0; }

/* Sticky mobile "Buy Now" bar on single product pages */
.gcs-sticky-buy-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: #fff;
	border-top: 1px solid var(--gcs-border);
	box-shadow: 0 -8px 24px rgba(28, 28, 30, 0.1);
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.gcs-sticky-buy-bar__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.gcs-sticky-buy-bar__name {
	font-size: 12px;
	font-weight: 600;
	color: var(--gcs-charcoal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gcs-sticky-buy-bar__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--gcs-copper);
}
.gcs-sticky-buy-bar .gcs-btn {
	flex: none;
	padding: 12px 26px;
}

@media (max-width: 768px) {
	.gcs-sticky-buy-bar { display: flex; }
	body.single-product { padding-bottom: 72px; }
	body.single-product .gcs-buy-now-inline { display: none; }
}

/* ==========================================================================
   Checkout — two-column layout: fields on the left, a sticky order-summary
   card on the right (payment/place-order button lives inside that card,
   since WooCommerce renders it as part of #order_review).
   ========================================================================== */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	column-gap: 48px;
	align-items: start;
}
.woocommerce-checkout form.checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.woocommerce-checkout form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 20px;
	margin: 0 0 16px;
}
.woocommerce-checkout form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 100px;
	align-self: start;
}

.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	margin: 0;
}
.woocommerce-checkout #customer_details h3 {
	font-size: 18px;
	margin: 0 0 20px;
}
.woocommerce-checkout #customer_details > .col-2 h3 {
	margin-top: 32px;
}
.woocommerce-checkout .form-row { margin: 0 0 18px; }
.woocommerce-checkout .form-row label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--gcs-charcoal);
	margin-bottom: 6px;
}
.woocommerce-checkout .form-row .required { color: var(--gcs-copper); text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--gcs-border);
	border-radius: var(--gcs-radius);
	font-size: 14px;
	background: #fff;
	font-family: var(--gcs-font-body);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text {
	border-color: var(--gcs-copper);
}

/* Order summary card */
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--gcs-border);
	border-radius: 16px;
	padding: 24px;
}
.woocommerce-checkout table.shop_table {
	border: none;
	width: 100%;
	margin: 0 0 4px;
}
.woocommerce-checkout table.shop_table thead { display: none; }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--gcs-border);
	padding: 14px 0;
	font-size: 14px;
}
.woocommerce-checkout table.shop_table tfoot th { font-weight: 600; text-align: left; }
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td {
	font-size: 18px;
	font-weight: 700;
	color: var(--gcs-charcoal);
	border-bottom: none;
}
.gcs-checkout-item { display: flex; align-items: center; gap: 12px; }
.gcs-checkout-item__thumb {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--gcs-off-white);
}
.gcs-checkout-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcs-checkout-item__name { font-size: 14px; color: var(--gcs-charcoal); }

.woocommerce-checkout #payment {
	background: var(--gcs-off-white);
	border-radius: 12px;
	padding: 18px;
	margin-top: 16px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border: none;
	padding: 0;
	margin: 0 0 14px;
}
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border-radius: var(--gcs-radius);
	font-size: 13px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 16px !important;
	font-size: 16px !important;
}

@media (max-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: block;
	}
	.woocommerce-checkout form.checkout #order_review {
		position: static;
		margin-top: 32px;
	}
	.woocommerce-checkout #customer_details > .col-2 h3 { margin-top: 0; }
}

/* Responsive header */
@media (max-width: 860px) {
	.gcs-primary-nav { display: none; }
	.gcs-nav-toggle { display: block; }
	.gcs-site-header.is-nav-open .gcs-primary-nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--gcs-border);
		padding: 10px 20px 20px;
	}
	.gcs-site-header.is-nav-open .gcs-primary-nav ul { flex-direction: column; gap: 14px; }
}