/* =============================================================================
   CARLO RINO — Global Design Tokens & Resets
   Consolidated from shop.css, spacing-layout-guide.css, mega-menu.css, and style.css.
   Figma: https://www.figma.com/design/975EhEVFLW7qA5Q7WZFOoR/Carlo-Rino-Website
   ============================================================================= */

/* ── Design Tokens ────────────────────────────────────────────────────────── */

:root {
	/* ── Brand Colors ───────────────────────────────────────── */
	--cr-pink: #e81f76;
	--cr-pink-50: #fef1f8;
	--cr-pink-700: #ca0c59;
	--cr-black: #333;
	--cr-grey: #888;
	--cr-white: #fff;
	--cr-cream: #faf8f6;
	--cr-border: #e7e7e7;
	--cr-btn-disabled: #b0b0b0;

	/* ── Typography ─────────────────────────────────────────── */
	--cr-font-heading: "Lora", Georgia, serif;
	--cr-font-body: "Quicksand", "Segoe UI", sans-serif;

	/* ── Spacing — Base Grid Unit ───────────────────────────── */
	--cr-space-base: 0.25rem;

	/* Macro spacing */
	--cr-space-10: 0.625rem;
	--cr-space-20: 1.25rem;
	--cr-space-40: 2.5rem;
	--cr-space-80: 5rem;
	--cr-space-160: 10rem;

	/* Semantic aliases for layout */
	--cr-section-gap: var(--cr-space-160);
	--cr-block-gap: var(--cr-space-80);
	--cr-content-gap: var(--cr-space-40);
	--cr-inline-gap: var(--cr-space-20);
	--cr-tight-gap: var(--cr-space-10);

	/* 4-point grid (4–84, step 4) */
	--cr-space-4: 0.25rem;
	--cr-space-8: 0.5rem;
	--cr-space-12: 0.75rem;
	--cr-space-16: 1rem;
	--cr-space-24: 1.5rem;
	--cr-space-28: 1.75rem;
	--cr-space-32: 2rem;
	--cr-space-36: 2.25rem;
	--cr-space-44: 2.75rem;
	--cr-space-48: 3rem;
	--cr-space-52: 3.25rem;
	--cr-space-56: 3.5rem;
	--cr-space-60: 3.75rem;
	--cr-space-64: 4rem;
	--cr-space-68: 4.25rem;
	--cr-space-72: 4.5rem;
	--cr-space-76: 4.75rem;
	--cr-space-84: 5.25rem;

	/* Header bar — 56px desktop / 48px mobile at a 16px root */
	--cr-header-height: 3.5rem;
	--cr-header-height-mobile: 3rem;
}

/* ── Global Resets ────────────────────────────────────────────────────────── */

/* Prevent horizontal scroll from full-bleed elements and off-canvas panels. */
html,
body {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip !important;
	}
}

/* Flat buttons — no drop shadows */
button,
.button,
.ast-button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.woocommerce button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce input[type="button"],
.woocommerce input[type="submit"] {
	box-shadow: none !important;
}

button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active,
.ast-button:hover,
.ast-button:focus,
.ast-button:active,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.btn:hover,
.btn:focus,
.btn:active,
.woocommerce button:hover,
.woocommerce button:focus,
.woocommerce .button:hover,
.woocommerce .button:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce input[type="button"]:hover,
.woocommerce input[type="button"]:focus,
.woocommerce input[type="submit"]:hover,
.woocommerce input[type="submit"]:focus {
	box-shadow: none !important;
}

/* Hide TI Wishlist add/remove confirmation modal. */
.tinv-wishlist .tinv-modal,
.tinv-wishlist .tinvwl_added_to_wishlist,
.tinv-wishlist .tinv-modal-open {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ── Typography Base ──────────────────────────────────────────────────────── */

body,
button,
input,
select,
textarea {
	font-family: var(--cr-font-body);
}

/* =============================================================================
   HEADER HEIGHT — force primary bar to 56px (3.5rem), 48px (3rem) on mobile
   Overrides Astra Customizer min-height / vertical padding on the main bar.
   Does not include the above-header announcement row.
   ============================================================================= */

#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .ast-primary-header-bar .site-primary-header-wrap,
#masthead .ast-mobile-header-wrap .main-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	height: var(--cr-header-height) !important;
	min-height: var(--cr-header-height) !important;
	max-height: var(--cr-header-height) !important;
}

#masthead .main-header-bar .ast-builder-grid-row,
#masthead .ast-primary-header-bar .ast-builder-grid-row,
#masthead .site-primary-header-wrap {
	height: 100% !important;
	min-height: 0 !important;
	align-items: center !important;
}

@media (max-width: 921px) {
	#masthead .main-header-bar,
	#masthead .ast-primary-header-bar,
	#masthead .ast-primary-header-bar .site-primary-header-wrap,
	#masthead .ast-mobile-header-wrap .main-header-bar,
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
		height: var(--cr-header-height-mobile) !important;
		min-height: var(--cr-header-height-mobile) !important;
		max-height: var(--cr-header-height-mobile) !important;
	}
}

/* =============================================================================
   HEADER ICONS — Wishlist, Compare, Account, Cart
   Figma "Nav Menu" right section (node 1739:10876)
   ============================================================================= */

.cr-header-icons {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin-left: auto !important;
}

.cr-header-icon {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	text-decoration: none !important;
	flex-shrink: 0 !important;
	color: inherit !important;
}

.cr-header-icon:hover {
	opacity: 0.8 !important;
}

.cr-header-icon svg {
	display: block !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
}

/* Badge dot (wishlist, compare, account) */
.cr-header-icon__dot {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 0.5rem !important;
	height: 0.5rem !important;
	border-radius: 1.25rem !important;
	background: var(--cr-pink, #e81f76) !important;
	pointer-events: none !important;
}

/* Badge number (cart count) */
.cr-header-icon__badge {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0.875rem !important;
	height: 0.875rem !important;
	padding: 0 0.188rem !important;
	border-radius: 1.25rem !important;
	background: var(--cr-pink, #e81f76) !important;
	color: #fff !important;
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.625rem !important;
	line-height: 1.5 !important;
	text-align: center !important;
	pointer-events: none !important;
}

/* Position inside Astra header builder */
#masthead .cr-header-icons {
	margin-right: 1rem !important;
}

/* =============================================================================
   SPACING & LAYOUT UTILITIES
   Source: Figma Layout Guide (node 1300:26646)
   ============================================================================= */

/* ── Margin utilities — macro scale ───────────────────────────────────── */

.cr-mt-10 { margin-top: var(--cr-space-10); }
.cr-mt-20 { margin-top: var(--cr-space-20); }
.cr-mt-40 { margin-top: var(--cr-space-40); }
.cr-mt-80 { margin-top: var(--cr-space-80); }
.cr-mt-160 { margin-top: var(--cr-space-160); }

.cr-mb-10 { margin-bottom: var(--cr-space-10); }
.cr-mb-20 { margin-bottom: var(--cr-space-20); }
.cr-mb-40 { margin-bottom: var(--cr-space-40); }
.cr-mb-80 { margin-bottom: var(--cr-space-80); }
.cr-mb-160 { margin-bottom: var(--cr-space-160); }

.cr-my-10 { margin-block: var(--cr-space-10); }
.cr-my-20 { margin-block: var(--cr-space-20); }
.cr-my-40 { margin-block: var(--cr-space-40); }
.cr-my-80 { margin-block: var(--cr-space-80); }
.cr-my-160 { margin-block: var(--cr-space-160); }

.cr-mt-section { margin-top: var(--cr-section-gap); }
.cr-mb-section { margin-bottom: var(--cr-section-gap); }
.cr-my-section { margin-block: var(--cr-section-gap); }

.cr-mt-block { margin-top: var(--cr-block-gap); }
.cr-mb-block { margin-bottom: var(--cr-block-gap); }
.cr-my-block { margin-block: var(--cr-block-gap); }

.cr-mt-content { margin-top: var(--cr-content-gap); }
.cr-mb-content { margin-bottom: var(--cr-content-gap); }
.cr-my-content { margin-block: var(--cr-content-gap); }

/* ── Padding utilities — macro scale ──────────────────────────────────── */

.cr-p-10 { padding: var(--cr-space-10); }
.cr-p-20 { padding: var(--cr-space-20); }
.cr-p-40 { padding: var(--cr-space-40); }
.cr-p-80 { padding: var(--cr-space-80); }
.cr-p-160 { padding: var(--cr-space-160); }

.cr-px-20 { padding-inline: var(--cr-space-20); }
.cr-px-40 { padding-inline: var(--cr-space-40); }
.cr-py-40 { padding-block: var(--cr-space-40); }
.cr-py-80 { padding-block: var(--cr-space-80); }
.cr-py-160 { padding-block: var(--cr-space-160); }

/* ── Gap utilities — flex/grid ────────────────────────────────────────── */

.cr-gap-4 { gap: var(--cr-space-4); }
.cr-gap-8 { gap: var(--cr-space-8); }
.cr-gap-12 { gap: var(--cr-space-12); }
.cr-gap-16 { gap: var(--cr-space-16); }
.cr-gap-20 { gap: var(--cr-space-20); }
.cr-gap-24 { gap: var(--cr-space-24); }
.cr-gap-40 { gap: var(--cr-space-40); }
.cr-gap-80 { gap: var(--cr-space-80); }

.cr-gap-inline { gap: var(--cr-inline-gap); }
.cr-gap-content { gap: var(--cr-content-gap); }
.cr-gap-block { gap: var(--cr-block-gap); }
.cr-gap-section { gap: var(--cr-section-gap); }

/* ── Component micro utilities (4-point grid) ─────────────────────────── */

.cr-p-4 { padding: var(--cr-space-4); }
.cr-p-8 { padding: var(--cr-space-8); }
.cr-p-12 { padding: var(--cr-space-12); }
.cr-p-16 { padding: var(--cr-space-16); }
.cr-p-24 { padding: var(--cr-space-24); }
.cr-p-32 { padding: var(--cr-space-32); }

.cr-px-12 { padding-inline: var(--cr-space-12); }
.cr-px-16 { padding-inline: var(--cr-space-16); }
.cr-px-24 { padding-inline: var(--cr-space-24); }
.cr-py-8 { padding-block: var(--cr-space-8); }
.cr-py-12 { padding-block: var(--cr-space-12); }
.cr-py-16 { padding-block: var(--cr-space-16); }