/*
Theme Name: SuperSquare Storefront
Theme URI: https://supersquare.in/
Author: SuperSquare
Author URI: https://supersquare.in/
Description: A fast, accessible WooCommerce storefront with responsive catalog layouts, flexible header and footer controls, AJAX search, wishlist presentation, cart drawer, polished account and checkout experiences, HPOS and Cart/Checkout Blocks compatibility, and optional SuperSquare Commerce integration. All storefront content comes from WordPress and WooCommerce without bundled demo data.
Text Domain: supersquare-storefront
Version: 2.9.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 11.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, wide-blocks
*/

/* ==========================================================================
   SUPERSQUARE STOREFRONT — CORE DESIGN TOKENS & BASE RESETS
   ========================================================================== */

:root {
	/* NEEMROZ color system */
	--ssq-ivory: #fffcf7;
	--ssq-cream: #f8f1e7;
	--ssq-blush: #f8eeee;
	--ssq-beige: #f3e8dc;
	--ssq-espresso: #241a17;
	--ssq-text: #292321;
	--ssq-text-secondary: #756a64;
	--ssq-text-muted: #9b908a;
	--ssq-terracotta: #8a4b3a;
	--ssq-terracotta-dark: #713b2d;
	--ssq-gold: #b58a52;
	--ssq-gold-soft: #d6ba8c;
	--ssq-border: #e9ded2;
	--ssq-border-strong: #d8c8b8;
	--ssq-success: #47715a;
	--ssq-danger: #a63e46;

	/* Editorial gradients and restrained CSS-only highlights */
	--ssq-gradient-hero: linear-gradient(90deg, rgba(30,20,17,.58) 0%, rgba(30,20,17,.22) 48%, rgba(30,20,17,.04) 100%);
	--ssq-gradient-cream: linear-gradient(135deg, #fffcf7 0%, #f6ede2 100%);
	--ssq-gradient-blush: linear-gradient(135deg, #fcf7f3 0%, #f6e8e6 100%);
	--ssq-gradient-celebration: linear-gradient(135deg, #241a17 0%, #5e392f 100%);
	--ssq-gradient-gold: linear-gradient(90deg, #9c713e 0%, #d6ba8c 50%, #9c713e 100%);
	--ssq-highlight-warm: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
	--ssq-texture-subtle: radial-gradient(circle at 18% 12%, rgba(181,138,82,.055), transparent 34%);

	/* Typography scale */
	--ssq-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ssq-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ssq-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--ssq-font-size-display: clamp(2.5rem, 5vw, 4.75rem);
	--ssq-font-size-h1: clamp(2.1rem, 4vw, 3.65rem);
	--ssq-font-size-h2: clamp(1.75rem, 3vw, 2.75rem);
	--ssq-font-size-h3: clamp(1.4rem, 2vw, 1.9rem);
	--ssq-font-size-h4: clamp(1.12rem, 1.4vw, 1.35rem);
	--ssq-font-size-body: .9375rem;
	--ssq-font-size-small: .875rem;
	--ssq-font-size-caption: .8125rem;
	--ssq-font-size-eyebrow: .8125rem;
	--ssq-font-size-price: clamp(1.15rem, 1.5vw, 1.4rem);
	--ssq-font-size-nav: .8125rem;
	--ssq-font-size-button: .875rem;
	--ssq-font-size-base: 15px;

	/* Legacy color aliases */
	--ssq-primary: var(--ssq-espresso);
	--ssq-primary-dark: #17100e;
	--ssq-primary-light: #5e392f;
	--ssq-accent: var(--ssq-terracotta);
	--ssq-accent-hover: var(--ssq-terracotta-dark);
	--ssq-accent-soft: var(--ssq-blush);
	--ssq-accent-cyan: var(--ssq-gold);
	--ssq-accent-warm: var(--ssq-gold);
	--ssq-accent-warm-hover: #9c713e;
	--ssq-success-soft: #edf3ee;
	--ssq-danger-soft: #faeeee;
	--ssq-warning: var(--ssq-gold);
	--ssq-warning-soft: #fbf5e9;
	--ssq-info: var(--ssq-terracotta);
	--ssq-info-soft: var(--ssq-blush);
	--ssq-bg: var(--ssq-ivory);
	--ssq-surface: #ffffff;
	--ssq-surface-subtle: var(--ssq-cream);
	--ssq-surface-muted: var(--ssq-beige);
	--ssq-border-subtle: #f1e8df;
	--ssq-border-focus: var(--ssq-terracotta);
	--ssq-text-main: var(--ssq-text);
	--ssq-text-disabled: #b7aea9;
	--ssq-text-inverse: var(--ssq-ivory);
	--ssq-topbar-bg: var(--ssq-espresso);
	--ssq-topbar-text: var(--ssq-cream);
	--ssq-footer-bg: var(--ssq-espresso);
	--ssq-footer-text: #cbbdb5;

	/* Warm depth */
	--ssq-shadow-xs: 0 1px 5px rgba(43,11,20,.035);
	--ssq-shadow-sm: 0 2px 12px rgba(43,11,20,.045);
	--ssq-shadow-md: 0 8px 30px rgba(43,11,20,.07);
	--ssq-shadow-lg: 0 18px 50px rgba(43,11,20,.11);
	--ssq-shadow-xl: 0 24px 64px rgba(43,11,20,.15);
	--ssq-shadow-floating: 0 16px 44px rgba(43,11,20,.16);

	/* Border Radii */
	--ssq-radius-xs: 2px;
	--ssq-radius-sm: 6px;
	--ssq-radius-md: 8px;
	--ssq-radius-lg: 10px;
	--ssq-radius-xl: 12px;
	--ssq-radius-2xl: 16px;
	--ssq-radius-full: 9999px;
	--ssq-radius-control: 6px;
	--ssq-radius-button: 5px;
	--ssq-radius-media: 3px;
	--ssq-radius-card: 8px;
	--ssq-radius-editorial: 12px;
	--ssq-radius-badge: 4px;
	--ssq-btn-radius: var(--ssq-radius-button);

	/* Layout Dimensions */
	--ssq-max-width: 1440px;
	--ssq-wide-max-width: 1600px;
	--ssq-editorial-max-width: 1180px;
	--ssq-narrow-max-width: 780px;
	--ssq-container-gutter: clamp(16px, 3vw, 40px);
	--ssq-header-height: 72px;
	--ssq-ease-premium: cubic-bezier(.22,1,.36,1);
	--ssq-ease-standard: cubic-bezier(.4,0,.2,1);
	--ssq-transition-fast: 160ms var(--ssq-ease-standard);
	--ssq-transition-normal: 240ms var(--ssq-ease-premium);
	--ssq-transition-slow: 350ms var(--ssq-ease-premium);

	/* Component Token Aliases */
	--ssq-color-primary: var(--ssq-primary);
	--ssq-color-primary-hover: var(--ssq-primary-dark);
	--ssq-color-accent: var(--ssq-accent);
	--ssq-color-navy: var(--ssq-primary);
	--ssq-color-navy-dark: var(--ssq-primary-dark);
	--ssq-color-white: #ffffff;
	--ssq-color-amber: var(--ssq-accent-warm);
	--ssq-color-emerald: var(--ssq-success);

	--ssq-color-slate-50: var(--ssq-bg);
	--ssq-color-slate-100: var(--ssq-surface-subtle);
	--ssq-color-slate-200: var(--ssq-surface-muted);
	--ssq-color-slate-300: var(--ssq-border-strong);
	--ssq-color-slate-400: var(--ssq-text-disabled);
	--ssq-color-slate-500: var(--ssq-text-muted);
	--ssq-color-slate-600: var(--ssq-text-secondary);

	--ssq-bg-page: var(--ssq-bg);
	--ssq-bg-card: var(--ssq-surface);
	--ssq-border-color: var(--ssq-border);
	--ssq-border-light: var(--ssq-border-subtle);
	--ssq-text-heading: var(--ssq-text-main);
	--ssq-text-body: var(--ssq-text-secondary);

	--ssq-container-max: var(--ssq-max-width);
	--ssq-container-pad: var(--ssq-container-gutter);

	--ssq-space-1: 4px;
	--ssq-space-2: 8px;
	--ssq-space-3: 12px;
	--ssq-space-4: 16px;
	--ssq-space-5: 24px;
	--ssq-space-6: 24px;
	--ssq-space-8: 32px;
	--ssq-space-10: 48px;
	--ssq-space-12: 48px;
	--ssq-space-16: 64px;
	--ssq-section-space: var(--ssq-space-16);
}

/* Normalization */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--ssq-font-sans);
	font-size: var(--ssq-font-size-base);
	line-height: 1.65;
	color: var(--ssq-text-main);
	background-color: var(--ssq-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.55em;
	font-family: var(--ssq-font-heading, var(--ssq-font-sans));
	font-weight: 600;
	color: var(--ssq-text-main);
	line-height: 1.08;
	letter-spacing: -0.018em;
}

h1 { font-size: var(--ssq-font-size-h1); }
h2 { font-size: var(--ssq-font-size-h2); }
h3 { font-size: var(--ssq-font-size-h3); }
h4 { font-size: var(--ssq-font-size-h4); }
h5 { font-size: 1rem; }
h6 { font: 700 var(--ssq-font-size-eyebrow)/1.35 var(--ssq-font-sans); letter-spacing: .13em; text-transform: uppercase; }

p {
	margin: 0 0 1em 0;
}

a {
	color: var(--ssq-accent);
	text-decoration: none;
	transition: color var(--ssq-transition-fast);
}

a:hover {
	color: var(--ssq-accent-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

/* Screen Reader Text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ssq-surface);
	border-radius: var(--ssq-radius-sm);
	box-shadow: var(--ssq-shadow-lg);
	clip: auto !important;
	clip-path: none;
	color: var(--ssq-primary);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

/* Centered Universal Content Constraint (Max 1440px) */
.ssq-container {
	width: 100%;
	max-width: var(--ssq-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ssq-container-gutter);
	padding-right: var(--ssq-container-gutter);
}

.ssq-container-wide { width:100%; max-width:var(--ssq-wide-max-width); margin-inline:auto; padding-inline:var(--ssq-container-gutter); }
.ssq-container-editorial { width:100%; max-width:var(--ssq-editorial-max-width); margin-inline:auto; padding-inline:var(--ssq-container-gutter); }
.ssq-container-narrow { width:100%; max-width:var(--ssq-narrow-max-width); margin-inline:auto; padding-inline:var(--ssq-container-gutter); }
.ssq-full-bleed { width:100%; max-width:none; }

@media (max-width: 768px) {
	:root { --ssq-section-space: var(--ssq-space-12); }
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ssq-terracotta);
	outline-offset: 3px;
}