/*
Theme Name: Storefront Child
Theme URI: https://example.com
Description: A custom child theme built on top of Storefront for our WooCommerce store.
Author: Your Store
Template: storefront
Version: 1.0.0
Text Domain: storefront-child
*/

/* ==========================================================================
   HOW TO USE THIS FILE
   --------------------------------------------------------------------------
   Everything below is CSS -- it controls how your site LOOKS (colors, fonts,
   spacing) but not how it BEHAVES (that's in functions.php).

   To find out what CSS "class" or "id" to target for something you want to
   change, right-click the element on your live site in Chrome or Firefox
   and choose "Inspect". It'll show you the class name to use here.
   ========================================================================== */

/* ---- Site-wide colors ---------------------------------------------------
   Change these hex codes to your brand colors. This is the fastest way to
   re-theme the whole site's look without touching layout at all.
---------------------------------------------------------------------------*/
:root {
	--scc-primary-color: #7f54b3;   /* Buttons, links, accents */
	--scc-text-color: #333333;      /* Main body text */
	--scc-heading-color: #1a1a1a;   /* Headings */
}

body {
	color: var(--scc-text-color);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--scc-heading-color);
}

/* ---- Buttons -------------------------------------------------------------
   Storefront/WooCommerce buttons (Add to Cart, Checkout, etc.)
---------------------------------------------------------------------------*/
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button.wc-forward {
	background-color: var(--scc-primary-color);
	color: #ffffff;
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button.wc-forward:hover {
	opacity: 0.85;
	background-color: var(--scc-primary-color);
	color: #ffffff;
}

/* ---- Header / Logo --------------------------------------------------------
   Adjust logo sizing here if your logo looks too big or small.
---------------------------------------------------------------------------*/
.site-branding img {
	max-height: 60px;
	width: auto;
}

/* ---- Product grid ---------------------------------------------------------
   Controls spacing between products on shop/category pages.
---------------------------------------------------------------------------*/
ul.products li.product {
	margin-bottom: 2em;
}

/* ---- Footer ----------------------------------------------------------------
   Example: hide the "Built with Storefront" credit line in the footer.
   Uncomment the block below if you want to remove it (optional, entirely
   your choice -- Storefront doesn't require you to keep it).
---------------------------------------------------------------------------*/
/*
.site-info {
	display: none;
}
*/

/* ===========================================================================
   CUSTOM HEADER (header.php)
   These styles match the approved homepage preview design.
   ========================================================================= */
.scc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 236, 217, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(43, 38, 32, 0.08);
}

.scc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
	max-width: 1180px;
	margin: 0 auto;
}

.scc-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--scc-heading-color);
}

.scc-brand img,
.scc-logo-img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.scc-brand-word {
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--scc-green, #3B6B45);
}

.scc-brand-sub {
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--scc-primary-color);
	font-weight: 600;
	margin-top: 2px;
}

.scc-nav-list {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
	font-weight: 500;
}

.scc-nav-list a {
	text-decoration: none;
	color: var(--scc-text-color);
}

.scc-cart-btn {
	background: var(--scc-green, #3B6B45);
	color: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.scc-cart-count {
	background: var(--scc-primary-color);
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	font-size: 0.72rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	color: #fff;
}

/* ===========================================================================
   CUSTOM FOOTER (footer.php)
   ========================================================================= */
.scc-footer {
	padding: 56px 32px 32px;
	border-top: 1px solid rgba(43, 38, 32, 0.1);
	max-width: 1180px;
	margin: 0 auto;
}

.scc-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
}

.scc-footer-brand p {
	color: var(--scc-text-color);
	margin-top: 14px;
	max-width: 34ch;
	font-size: 0.92rem;
}

.scc-footer-col h5 {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.scc-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 0.92rem;
}

.scc-footer-list a {
	text-decoration: none;
	color: var(--scc-text-color);
}

.scc-footer-bottom {
	grid-column: 1 / -1;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(43, 38, 32, 0.08);
	font-size: 0.82rem;
	color: var(--scc-text-color);
}

@media (max-width: 700px) {
	.scc-nav-list { display: none; }
	.scc-footer-inner { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PRODUCT CARDS (woocommerce/content-product.php override)
   Applies to the real WooCommerce Shop page loop. Colors cycle
   automatically across products -- see content-product.php for how to
   pin a specific color to a specific product instead.
   ========================================================================= */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

li.product.pinch-card {
	border-radius: 24px;
	padding: 26px;
	color: #fff;
	display: flex;
	flex-direction: column;
	min-height: 360px;
	transition: transform 0.2s ease;
	list-style: none;
}

li.product.pinch-card:hover {
	transform: translateY(-6px);
}

.pinch-card-link {
	text-decoration: none;
	color: inherit;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.pinch-card .jar-photo {
	border-radius: 16px;
	overflow: hidden;
	height: 180px;
	margin-bottom: 18px;
}

.pinch-card .jar-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pinch-card h3 {
	font-style: italic;
	font-size: 1.4rem;
	color: #fff;
	margin: 6px 0;
}

.pinch-card .tag {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.pinch-card p.desc {
	font-size: 0.9rem;
	opacity: 0.92;
	flex-grow: 1;
}

.pinch-card .card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
}

.pinch-card .price {
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
}

.pinch-card .add-btn {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pinch-card .add-btn:hover {
	background: rgba(255, 255, 255, 0.32);
}

.pinch-1 { background: linear-gradient(160deg, #A9805A, #8a6440); }
.pinch-2 { background: linear-gradient(160deg, #2F5C8A, #1f3f61); }
.pinch-3 { background: linear-gradient(160deg, #E0B24F, #D9A441); }
.pinch-3 h3, .pinch-3 .tag, .pinch-3 .price { color: #2B2620; }
.pinch-3 .add-btn { border-color: rgba(43,38,32,0.5); color: #2B2620; background: rgba(255,255,255,0.35); }
.pinch-4 { background: linear-gradient(160deg, #A23B2E, #6c231a); }
.pinch-5 { background: linear-gradient(160deg, #C1693F, #A5532E); }
.pinch-6 { background: linear-gradient(160deg, #3B6B45, #2C5033); }

@media (max-width: 900px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	ul.products { grid-template-columns: 1fr !important; }
}