/*
Theme Name: Crown Jewellery
Theme URI: https://crown-jewellery.co.il/
Author: Crown Jewellery
Author URI: https://crown-jewellery.co.il/
Description: Custom WooCommerce theme for Crown Jewellery, an Israeli fine-jewelry retailer specializing in moissanite and lab-grown diamonds. Monochrome, editorial, spacious design language (near-black on white with a soft peach highlight), rounded cards and pill buttons, built as clean maintainable code with a right-to-left Hebrew-first layout.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crown-jewellery
Tags: e-commerce, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready, one-column, two-columns
*/

/* -----------------------------------------------------------------------
   Design tokens
   Every value below was measured on the reference storefront (computed
   styles at a 1440px viewport), not estimated: colours, radii, type scale,
   page gutters and card geometry.
   ----------------------------------------------------------------------- */
:root {
	/* Palette */
	--cj-black: #171717;
	--cj-white: #ffffff;
	--cj-surface: #fafafa;                     /* product / category cards */
	--cj-surface-2: rgba(23, 23, 23, 0.024);   /* inputs, ghost tabs, spec panels */
	--cj-highlight: #ffddbf;                   /* peach highlight behind bold words */
	--cj-bar: #000000;                         /* announcement bar */
	--cj-faq-bg: #000000;                      /* FAQ band */
	--cj-footer: #1f1f1f;
	--cj-copyright: #171717;
	--cj-text-muted: rgba(23, 23, 23, 0.6);
	--cj-border: rgba(23, 23, 23, 0.1);
	--cj-border-light: rgba(23, 23, 23, 0.06);
	--cj-border-inverse: rgba(255, 255, 255, 0.114);
	--cj-whatsapp: #25d366;
	--cj-error: #b3261e;
	--cj-success: #2e7d32;

	/* Legacy aliases (kept so older overrides keep working) */
	--cj-color-black: var(--cj-black);
	--cj-color-white: var(--cj-white);
	--cj-color-accent-soft: var(--cj-highlight);
	--cj-color-border: var(--cj-border);
	--cj-color-gray-600: var(--cj-text-muted);

	/* Type: Poppins carries Latin/digits, Heebo carries the Hebrew glyphs
	   Poppins lacks — one stack, exactly like the reference. */
	--cj-font: 'Poppins', 'Heebo', -apple-system, 'Segoe UI', Tahoma, sans-serif;
	--cj-font-display: var(--cj-font);
	--cj-font-body: var(--cj-font);

	/* Layout */
	--cj-page-width: 1900px;
	--cj-page-padding: 48px;
	--cj-grid-gap: 18px;
	--cj-radius-card: 15px;
	--cj-radius-section: 22px;
	--cj-radius-btn: 60px;
	--cj-radius-input: 12px;
	--cj-radius-panel: 10px;
	--cj-radius-pill: 9999px;
	--cj-bar-height: 48px;
	--cj-header-height: 167px;
	--cj-header-compact: 93px;
	--cj-transition: 200ms ease;
}

/* -----------------------------------------------------------------------
   Reset & base
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--cj-bar);
	color: var(--cj-black);
	font-family: var(--cj-font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The page itself is white; the black body shows through the rounded
   corners under the announcement bar and around the footer. */
.site {
	background: var(--cj-white);
	min-height: 100vh;
	overflow-x: clip;
}

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

svg.icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--cj-font);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	color: inherit;
}

h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.03rem);
}

h2 {
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.03rem);
}

h3 {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.56rem);
}

p {
	margin: 0 0 1em;
}

strong,
b {
	font-weight: 700;
}

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

button {
	cursor: pointer;
}

.screen-reader-text,
.sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--cj-white);
	clip: auto !important;
	clip-path: none;
	color: var(--cj-black);
	display: block;
	height: auto;
	inset-inline-start: 8px;
	inset-block-start: 8px;
	padding: 12px 16px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 8px;
	z-index: 100000;
	background: var(--cj-black);
	color: var(--cj-white);
	padding: 10px 18px;
	border-radius: var(--cj-radius-btn);
	transition: top var(--cj-transition);
}

.skip-link:focus {
	inset-block-start: 8px;
}

/* -----------------------------------------------------------------------
   Layout helpers
   ----------------------------------------------------------------------- */
.container,
.page-width {
	width: 100%;
	max-width: var(--cj-page-width);
	margin-inline: auto;
	padding-inline: var(--cj-page-padding);
}

.page-width--narrow,
.container.narrow {
	max-width: calc(1024px + 2 * var(--cj-page-padding));
}

.section {
	padding-block: 72px;
}

.section--tight {
	padding-block: 40px 0;
}

.section--rounded {
	border-radius: var(--cj-radius-section) var(--cj-radius-section) 0 0;
}

/* Section title row: heading on the start side, controls on the end side */
.title-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-block-end: 24px;
	line-height: 1;
}

.title-wrapper--center {
	justify-content: center;
	text-align: center;
	margin-block-end: 36px;
}

.title-wrapper h2,
.heading {
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.03rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

/* Bold word with the peach highlight block behind it ("Bespoke by MAKEDA") */
.highlight,
.heading strong,
.title-wrapper h2 strong {
	font-weight: 700;
	background: var(--cj-highlight);
	padding-inline: 0.06em;
	margin-inline: -0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Hand-drawn squiggle underline under a bold sentence */
.scribble {
	position: relative;
	display: inline-block;
	font-weight: 700;
	white-space: nowrap;
}

.scribble svg {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -9px;
	width: 100%;
	height: 14px;
	color: var(--cj-highlight);
	pointer-events: none;
}

/* Peach band behind the lower part of a title (FAQ group titles); grows in
   from the start edge once the title scrolls into view */
.highlight-half {
	display: inline-block;
	font-weight: 700;
	background-repeat: no-repeat;
	background-image: linear-gradient(to left, var(--cj-highlight) 0, var(--cj-white) 100%);
	background-position: right 90%;
	background-size: 100% 28%;
}

.highlight-half.is-armed {
	background-size: 0 28%;
}

.highlight-half.is-armed.is-inview {
	background-size: 100% 28%;
	transition: background-size 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.highlight-half.is-armed.is-inview {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
   Buttons — one pill shape everywhere
   ----------------------------------------------------------------------- */
.btn,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 26px;
	border: 1px solid var(--cj-black);
	border-radius: var(--cj-radius-btn);
	background: var(--cj-black);
	color: var(--cj-white);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--cj-transition), color var(--cj-transition), border-color var(--cj-transition), transform var(--cj-transition);
}

.btn:hover,
.btn:focus-visible {
	background: #000000;
	border-color: #000000;
	color: var(--cj-white);
}

.btn .icon {
	width: 20px;
	height: 20px;
}

.btn--secondary,
.btn-outline {
	background: var(--cj-white);
	color: var(--cj-black);
	border-color: var(--cj-black);
}

.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible {
	background: var(--cj-black);
	color: var(--cj-white);
	border-color: var(--cj-black);
}

.btn--ghost {
	background: var(--cj-surface-2);
	border-color: transparent;
	color: var(--cj-black);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--cj-black);
	border-color: var(--cj-black);
	color: var(--cj-white);
}

.btn--sm {
	padding: 16px 21px;
}

.btn--icon {
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
}

.btn--white {
	background: var(--cj-white);
	border-color: var(--cj-white);
	color: var(--cj-black);
}

.btn--white:hover,
.btn--white:focus-visible {
	background: var(--cj-highlight);
	border-color: var(--cj-highlight);
	color: var(--cj-black);
}

.btn-accent {
	background: var(--cj-highlight);
	border-color: var(--cj-highlight);
	color: var(--cj-black);
}

.btn-accent:hover,
.btn-accent:focus-visible {
	background: var(--cj-black);
	border-color: var(--cj-black);
	color: var(--cj-white);
}

/* Underlined text link (footer contact, "read more") */
.link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	padding-block-end: 1px;
}

/* -----------------------------------------------------------------------
   Form controls
   ----------------------------------------------------------------------- */
.input,
.select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='password'],
select,
textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--cj-radius-input);
	background: var(--cj-surface-2);
	color: var(--cj-black);
	font-size: 15px;
	line-height: 24px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

textarea {
	padding-block: 14px;
	min-height: 140px;
	resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	box-shadow: 0 0 0 1px var(--cj-black);
}

.select-wrap {
	position: relative;
}

.select-wrap select {
	padding-inline-end: 52px;
}

.select-wrap .icon {
	position: absolute;
	inset-inline-end: 22px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.form-label {
	display: block;
	margin-block-end: 12px;
	font-size: 15px;
}