```css
/*!
 * SaraStones — Blocksy child theme stylesheet
 * ------------------------------------------------------------------
 * Mobile-first.
 *
 * IMPORTANT:
 * - Blocksy controls native buttons, links and quantity controls.
 * - SaraStones does NOT create custom quantity +/- buttons.
 * - WooCommerce remains responsible for quantity values.
 * - Global Blocksy button/link colors are not overridden here.
 * ------------------------------------------------------------------
 */

/* ==================================================================
   1. BRAND DESIGN TOKENS
   ================================================================== */

:root {
	--sarastones-primary-dark: #26221E;
	--sarastones-gold: #B58B3A;
	--sarastones-gold-dark: #8D6827;
	--sarastones-sand: #F5EFE5;
	--sarastones-cream: #FBF9F5;
	--sarastones-border: #E5DCCD;
	--sarastones-muted: #766E63;
	--sarastones-white: #FFFFFF;

	--sarastones-radius-sm: 4px;
	--sarastones-radius-md: 8px;
	--sarastones-radius-lg: 14px;

	--sarastones-space-1: 0.4rem;
	--sarastones-space-2: 0.8rem;
	--sarastones-space-3: 1.6rem;
	--sarastones-space-4: 2.4rem;
	--sarastones-space-5: 3.6rem;

	--sarastones-shadow-soft: 0 1px 3px rgba(38, 34, 30, 0.06);
	--sarastones-transition: 180ms ease;

	--sarastones-font-ui:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--sarastones-font-heading:
		Georgia, "Times New Roman", serif;
}

/* ==================================================================
   2. BASE / TYPOGRAPHY
   ================================================================== */

body {
	color: var(--sarastones-primary-dark);
	background-color: var(--sarastones-cream);
}

body.sarastones-dir-rtl {
	line-height: 1.85;
}

/*
 * Typography only.
 * Link colors remain controlled by Blocksy.
 */

.sarastones-heading,
.woocommerce-Tabs-panel h2,
.woocommerce div.product .product_title,
.entry-title {
	font-family: var(--sarastones-font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--sarastones-primary-dark);
}

body.sarastones-dir-rtl .sarastones-heading,
body.sarastones-dir-rtl .woocommerce div.product .product_title,
body.sarastones-dir-rtl .entry-title {
	font-family: var(--sarastones-font-ui);
	font-weight: 700;
}

/* ==================================================================
   3. ACCESSIBILITY / FOCUS STATES
   ================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sarastones-btn:focus-visible {
	outline: 2px solid var(--sarastones-gold-dark);
	outline-offset: 2px;
}

/* ==================================================================
   4. SARA STONES BUTTONS ONLY
   ==================================================================
 *
 * IMPORTANT:
 * These rules apply ONLY to elements explicitly using
 * .sarastones-btn.
 *
 * WooCommerce / Blocksy buttons are intentionally NOT styled here.
 * This prevents the child theme from changing the Add to Cart
 * button or Blocksy hover colors.
 */

.sarastones-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sarastones-space-1);

	background-color: var(--sarastones-primary-dark);
	color: var(--sarastones-white);

	border: 1px solid var(--sarastones-primary-dark);
	border-radius: var(--sarastones-radius-sm);

	padding-block: var(--sarastones-space-2);
	padding-inline: var(--sarastones-space-3);

	font-family: var(--sarastones-font-ui);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;

	transition:
		background-color var(--sarastones-transition),
		border-color var(--sarastones-transition),
		color var(--sarastones-transition);
}

.sarastones-btn:hover {
	background-color: var(--sarastones-gold-dark);
	border-color: var(--sarastones-gold-dark);
	color: var(--sarastones-white);
}

.sarastones-btn--outline {
	background-color: transparent;
	color: var(--sarastones-primary-dark);
	border-color: var(--sarastones-border);
}

.sarastones-btn--outline:hover {
	border-color: var(--sarastones-gold-dark);
	color: var(--sarastones-gold-dark);
	background-color: transparent;
}

/* ==================================================================
   5. FORMS
   ================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid var(--sarastones-border);
	border-radius: var(--sarastones-radius-sm);
	background-color: var(--sarastones-white);
	color: var(--sarastones-primary-dark);
	padding-block: var(--sarastones-space-1);
	padding-inline: var(--sarastones-space-2);
}

label {
	color: var(--sarastones-primary-dark);
	font-weight: 500;
}

/* ==================================================================
   5A. NATIVE WOOCOMMERCE / BLOCKSY QUANTITY
   ==================================================================
 *
 * DO NOT create +/- buttons here.
 *
 * Blocksy already provides:
 *   .ct-increase
 *   .ct-decrease
 *
 * WooCommerce already provides:
 *   input.qty
 *
 * The only purpose of these rules is to ensure that the actual
 * quantity value (normally "1") is visible.
 */

.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
	color: var(--sarastones-primary-dark);
	opacity: 1;
	-webkit-text-fill-color: var(--sarastones-primary-dark);
	text-align: center;
}

/*
 * Keep the native WooCommerce quantity input visible.
 * Do not change its display, position or structure.
 */

.woocommerce .quantity input.qty {
	visibility: visible;
}

/* ==================================================================
   6. WOOCOMMERCE NOTICES
   ================================================================== */

.woocommerce-message,
.woocommerce-info {
	border-inline-start-color: var(--sarastones-gold-dark);
	background-color: var(--sarastones-sand);
	color: var(--sarastones-primary-dark);
}

.woocommerce-error {
	border-inline-start-color: #a94442;
}

/* ==================================================================
   7. PRODUCT GRID / CARDS
   ================================================================== */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sarastones-space-3);
}

.woocommerce ul.products li.product {
	background-color: var(--sarastones-white);
	border: 1px solid var(--sarastones-border);
	border-radius: var(--sarastones-radius-md);
	padding: var(--sarastones-space-2);
	box-shadow: var(--sarastones-shadow-soft);

	transition:
		transform var(--sarastones-transition),
		box-shadow var(--sarastones-transition);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(38, 34, 30, 0.08);
}

.woocommerce ul.products li.product img {
	border-radius: var(--sarastones-radius-sm);
	background-color: var(--sarastones-sand);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sarastones-font-heading);
	font-size: 1rem;
	margin-block-start: var(--sarastones-space-2);
	color: var(--sarastones-primary-dark);
}

body.sarastones-dir-rtl
.woocommerce ul.products li.product
.woocommerce-loop-product__title {
	font-family: var(--sarastones-font-ui);
}

.woocommerce ul.products li.product .price {
	color: var(--sarastones-gold-dark);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	color: var(--sarastones-muted);
	opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .star-rating {
	color: var(--sarastones-gold);
}

.woocommerce span.onsale {
	background-color: var(--sarastones-gold-dark);
	color: var(--sarastones-white);
	border-radius: var(--sarastones-radius-sm);
	font-weight: 600;
	inset-inline-start: var(--sarastones-space-2);
	inset-block-start: var(--sarastones-space-2);
}

/* ==================================================================
   8. SINGLE PRODUCT PAGE
   ================================================================== */

.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--sarastones-radius-md);
	overflow: hidden;
	background-color: var(--sarastones-sand);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sarastones-gold-dark);
	font-size: 1.35em;
}

.woocommerce div.product .stock {
	color: var(--sarastones-muted);
}

.woocommerce div.product .stock.out-of-stock {
	color: #a94442;
}

.woocommerce div.product form.cart .quantity {
	margin-inline-end: var(--sarastones-space-2);
}

/*
 * Native Blocksy quantity input.
 *
 * No custom borders, dimensions, display rules or positioning.
 * Only the value visibility is controlled.
 */

.woocommerce div.product form.cart .quantity .qty {
	color: var(--sarastones-primary-dark);
	opacity: 1;
	-webkit-text-fill-color: var(--sarastones-primary-dark);
	text-align: center;
	visibility: visible;
}

.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--sarastones-muted);
}

.woocommerce-tabs .tabs li {
	border-color: var(--sarastones-border);
}

.woocommerce-tabs .tabs li.active {
	border-color: var(--sarastones-gold-dark);
	color: var(--sarastones-gold-dark);
}

/* ==================================================================
   9. CART / CHECKOUT / MY ACCOUNT
   ================================================================== */

.woocommerce table.shop_table {
	border-color: var(--sarastones-border);
	border-radius: var(--sarastones-radius-sm);
}

.woocommerce table.shop_table th {
	background-color: var(--sarastones-sand);
	color: var(--sarastones-primary-dark);
}

.woocommerce-checkout #payment {
	background-color: var(--sarastones-sand);
	border-radius: var(--sarastones-radius-md);
}

.woocommerce-MyAccount-navigation ul {
	border-inline-end: 1px solid var(--sarastones-border);
}

body.sarastones-dir-rtl .woocommerce-MyAccount-navigation ul {
	border-inline-end: 0;
	border-inline-start: 1px solid var(--sarastones-border);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--sarastones-gold-dark);
	font-weight: 600;
}

/* ==================================================================
   10. BREADCRUMBS / PAGINATION
   ================================================================== */

.woocommerce-breadcrumb {
	color: var(--sarastones-muted);
}

.woocommerce-breadcrumb a {
	color: inherit;
}

.woocommerce nav.woocommerce-pagination ul li {
	border-color: var(--sarastones-border);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--sarastones-gold-dark);
	color: var(--sarastones-white);
}

/* ==================================================================
   11. HEADER / FOOTER
   ================================================================== */

.sarastones-dir-rtl .ct-header .ct-header-nav-items,
.sarastones-dir-rtl .ct-header {
	color: var(--sarastones-primary-dark);
}

.ct-header {
	background-color: var(--sarastones-white);
	border-block-end: 1px solid var(--sarastones-border);
}

footer.ct-footer {
	background-color: var(--sarastones-primary-dark);
	color: var(--sarastones-sand);
}

footer.ct-footer a {
	color: var(--sarastones-sand);
}

footer.ct-footer a:hover {
	color: var(--sarastones-gold);
}

/* ==================================================================
   12. RESPONSIVE — MOBILE FIRST
   ================================================================== */

@media (min-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sarastones-space-4);
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1440px) {
	.woocommerce ul.products {
		gap: var(--sarastones-space-5);
	}
}

/* ==================================================================
   13. IMAGE SAFETY
   ================================================================== */

img,
.woocommerce ul.products li.product img,
.woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}
```