/*!
Theme Name: Sirany Boutique (Blocksy Child)
Theme URI: https://siranyboutique.com/
Description: Child theme of Blocksy for the Sirany Boutique redesign (Direction A · Atelier). Ships the whole redesign: the global design system, a custom header/footer, the code-driven homepage (front-page.php + section renderers), and WooCommerce template overrides.
Author: Sirany Boutique
Template: blocksy
Version: 2.1.0
Text Domain: blocksy-child
*/

/* =============================================================================
   DESIGN SYSTEM — Direction · Black & White
   Neutral grey canvas, ink text, ink accents (no colour), Cormorant Garamond.
   Single source of truth — retune here. (Was Atelier/warm-gold; retoned to the
   B&W design template — every var(--sirany-*) consumer updates from here.)
   ============================================================================= */

:root {
	/* --- Color (greyscale) --- */
	--sirany-ink:        #161616; /* primary text / dark surfaces */
	--sirany-ink-2:      #333333; /* secondary dark (nav links) */
	--sirany-paper:      #ffffff; /* primary background */
	--sirany-canvas:     #E4E4E4; /* neutral page canvas */
	--sirany-bg-warm:    #F4F4F2; /* soft panel / light sections */
	--sirany-bg-warm-2:  #EFEFED; /* deeper grey panel */
	--sirany-border:     #dddddd; /* hairline dividers, card borders */
	--sirany-border-2:   #cccccc; /* stronger border (size chips) */
	--sirany-muted:      #8a8a8a; /* secondary text, captions */
	--sirany-muted-2:    #6b6b6b; /* nav utility text */
	--sirany-accent:     #161616; /* ink — eyebrows, prices, accents (no colour) */
	--sirany-on-dark:    #EDEDED; /* text on dark surfaces */
	--sirany-on-dark-mut:#b0b0b0; /* muted text on dark surfaces */

	/* Functional */
	--sirany-sale:       #161616; /* Sale badge background (black) */
	--sirany-strike:     #b0b0b0; /* struck-through original price */
	--sirany-success:    #6b6b6b; /* in-stock dot (neutral) */

	/* --- Typography --- */
	--sirany-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sirany-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Responsive type scale */
	--sirany-font-hero:    clamp(2.5rem, 6vw, 3.375rem);   /* 40 → 54px (Cormorant) */
	--sirany-font-h1:      clamp(1.9rem, 4vw, 2.5rem);     /* 30 → 40px */
	--sirany-font-h2:      clamp(1.6rem, 3vw, 2.125rem);   /* 26 → 34px (section titles) */
	--sirany-font-h3:      clamp(1.25rem, 2vw, 1.5rem);    /* 20 → 24px */
	--sirany-font-body-lg: 1.0625rem;                      /* 17px */
	--sirany-font-base:    0.9375rem;                      /* 15px */
	--sirany-font-sm:      0.8125rem;                      /* 13px */
	--sirany-font-xs:      0.6875rem;                      /* 11px (eyebrows/labels) */

	--sirany-leading-tight: 1.06;
	--sirany-leading-snug:  1.2;
	--sirany-leading-body:  1.7;
	--sirany-tracking-eyebrow: 0.26em;
	--sirany-tracking-label:   0.16em;
	--sirany-tracking-wordmark:0.26em;

	/* --- Spacing scale (8px base) --- */
	--sirany-space-xs:  0.5rem;
	--sirany-space-sm:  1rem;
	--sirany-space-md:  1.5rem;
	--sirany-space-lg:  2.5rem;
	--sirany-space-xl:  4rem;
	--sirany-space-xxl: 6rem;
	--sirany-section-y: clamp(3rem, 7vw, 5.5rem);

	/* --- Layout --- */
	--sirany-container:        1380px;
	--sirany-container-narrow: 960px;
	--sirany-gutter:           clamp(1.25rem, 4vw, 2rem);

	/* --- Radius (design is mostly sharp; small radii only on imagery) --- */
	--sirany-radius-sm: 2px;
	--sirany-radius-md: 4px;
	--sirany-radius-pill: 999px;

	/* --- Elevation --- */
	--sirany-shadow-sm: 0 1px 3px rgba(22,22,22,0.06);
	--sirany-shadow-md: 0 10px 30px rgba(22,22,22,0.10);

	/* --- Motion --- */
	--sirany-transition:      all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--sirany-transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* --- Z-index ladder --- */
	--sirany-z-base:     1;
	--sirany-z-sticky:   100;
	--sirany-z-dropdown: 200;
	--sirany-z-overlay:  300;
	--sirany-z-modal:    400;
	--sirany-z-toast:    500;

	/* Breakpoints (reference; used as literals): sm 480 · md 768 · lg 1024 · xl 1320 */
}

/* Base — apply the body font globally so Blocksy content adopts it */
body {
	font-family: var(--sirany-font-body);
	color: var(--sirany-ink);
}

/* =============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================= */

.sirany-display {
	font-family: var(--sirany-font-display);
	font-weight: 500;
	line-height: var(--sirany-leading-tight);
	color: var(--sirany-ink);
}

.sirany-headline-hero {
	font-family: var(--sirany-font-display);
	font-size: var(--sirany-font-hero);
	font-weight: 500;
	line-height: var(--sirany-leading-tight);
}

.sirany-headline-section {
	font-family: var(--sirany-font-display);
	font-size: var(--sirany-font-h2);
	font-weight: 500;
	line-height: var(--sirany-leading-snug);
	color: var(--sirany-ink);
}

/* Eyebrow / kicker — small gold uppercase label above headings */
.sirany-eyebrow {
	font-family: var(--sirany-font-body);
	font-size: var(--sirany-font-xs);
	font-weight: 400;
	letter-spacing: var(--sirany-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sirany-accent);
}

.sirany-label {
	font-family: var(--sirany-font-body);
	font-size: var(--sirany-font-xs);
	font-weight: 500;
	letter-spacing: var(--sirany-tracking-label);
	text-transform: uppercase;
	color: var(--sirany-muted);
}

.sirany-body {
	font-family: var(--sirany-font-body);
	font-size: var(--sirany-font-base);
	font-weight: 300;
	line-height: var(--sirany-leading-body);
	color: var(--sirany-muted-2);
}

/* =============================================================================
   BUTTONS — rectangular (per Atelier), uppercase, letter-spaced
   ============================================================================= */

.sirany-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sirany-space-xs);
	padding: 0.95rem 2rem;
	font-family: var(--sirany-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--sirany-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: var(--sirany-transition);
	-webkit-appearance: none;
	appearance: none;
}

.sirany-btn:focus-visible {
	outline: 2px solid var(--sirany-accent);
	outline-offset: 2px;
}

/* Primary — solid ink */
.sirany-btn--primary {
	background-color: var(--sirany-ink);
	color: var(--sirany-paper);
	border-color: var(--sirany-ink);
}
.sirany-btn--primary:hover {
	background-color: #2e2a24;
	color: var(--sirany-paper);
}

/* Secondary — light fill (for warm sections) */
.sirany-btn--secondary {
	background-color: var(--sirany-bg-warm);
	color: var(--sirany-ink);
	border-color: var(--sirany-bg-warm);
}
.sirany-btn--secondary:hover {
	background-color: var(--sirany-paper);
}

/* Outline (ink) */
.sirany-btn--outline {
	background-color: transparent;
	color: var(--sirany-ink);
	border-color: var(--sirany-ink);
}
.sirany-btn--outline:hover {
	background-color: var(--sirany-ink);
	color: var(--sirany-paper);
}

/* Outline-light — for use over imagery (hero) */
.sirany-btn--outline-light {
	background-color: transparent;
	color: var(--sirany-paper);
	border-color: var(--sirany-paper);
}
.sirany-btn--outline-light:hover {
	background-color: var(--sirany-paper);
	color: var(--sirany-ink);
}

/* Ghost */
.sirany-btn--ghost {
	background-color: transparent;
	color: var(--sirany-ink);
	border-color: transparent;
	padding-inline: 0.5rem;
}
.sirany-btn--ghost:hover { color: var(--sirany-accent); }

.sirany-btn[disabled],
.sirany-btn.is-loading { opacity: 0.55; pointer-events: none; }

@media (max-width: 768px) {
	.sirany-btn--block-mobile { display: flex; width: 100%; }
}

/* Pill chip — used by Shop by Coverage filters */
.sirany-chip {
	display: inline-flex;
	align-items: center;
	background: var(--sirany-paper);
	border: 1px solid var(--sirany-border);
	border-radius: var(--sirany-radius-pill);
	padding: 9px 18px;
	font-family: var(--sirany-font-body);
	font-size: 12.5px;
	color: var(--sirany-ink);
	cursor: pointer;
	transition: var(--sirany-transition-fast);
	text-decoration: none;
}
.sirany-chip:hover {
	border-color: var(--sirany-accent);
	color: var(--sirany-accent);
}

/* Underlined text link ("View all") */
.sirany-textlink {
	font-family: var(--sirany-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sirany-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sirany-ink);
	padding-bottom: 3px;
	transition: var(--sirany-transition-fast);
}
.sirany-textlink:hover { color: var(--sirany-accent); border-color: var(--sirany-accent); }

/* =============================================================================
   LAYOUT HELPERS
   ============================================================================= */

.sirany-container {
	width: 100%;
	max-width: var(--sirany-container);
	margin-inline: auto;
	padding-inline: var(--sirany-gutter);
}

/* =============================================================================
   PRODUCT GRID + CARD (shared component — homepage, archives, related)
   Moved here from sections.css so every product listing styles identically.
   ============================================================================= */
.sirany-pgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
.sirany-pcard { display: block; text-decoration: none; color: inherit; }
.sirany-pcard__media { position: relative; aspect-ratio: 3/4; border-radius: var(--sirany-radius-sm); overflow: hidden; background: var(--sirany-bg-warm); }
.sirany-pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.sirany-pcard:hover .sirany-pcard__img { transform: scale(1.05); }
.sirany-pcard__badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font-family: var(--sirany-font-body);
	font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 5px 9px;
	background: #fff; color: var(--sirany-accent);
}
.sirany-pcard__badge.is-sale { background: var(--sirany-ink); color: #fff; }
.sirany-pcard__badge.is-soldout { background: var(--sirany-muted); color: #fff; }
.sirany-pcard__title { font-family: var(--sirany-font-body); font-size: 13.5px; font-weight: 400; color: var(--sirany-ink); margin: 11px 0 0; }
.sirany-pcard__meta { font-family: var(--sirany-font-body); font-size: 11.5px; color: var(--sirany-muted); margin-top: 2px; }
.sirany-pcard__price { font-family: var(--sirany-font-body); font-size: 13.5px; color: var(--sirany-accent); margin-top: 5px; }
.sirany-pcard__price del { color: var(--sirany-strike); text-decoration: line-through; margin-left: 6px; font-size: 12px; }
.sirany-pcard__price ins { text-decoration: none; color: var(--sirany-accent); }