/* ==========================================================================
   Legima design layer — sits on top of WoodMart, restyles in its own markup.
   Whisky palette (the client asked for burgundy · gold · cream instead of the Figma's
   slate/taupe): burgundy for headings and buttons, amber gold for bands, footer and
   accents, cream for the light panels; the page itself stays white.
   The role names (ink, taupe, sage, hero) are the Figma's and are used everywhere,
   so only their values changed:
   ink = burgundy · hero = dark burgundy · taupe (accents: price tags, hover fills, icons) = burgundy ·
   sage = pale champagne. The amber gold was not liked anywhere: gold is now a muted antique
   champagne, kept for thin lines and ornaments, and never fills a surface.
   ========================================================================== */

:root {
	--lg-burgundy: #7A1F2B;
	--lg-burgundy-dark: #42131C;
	--lg-burgundy-deep: #2E0D14;   /* the copyright bar under the footer */
	--lg-gold: #B99A63;            /* antique champagne: thin lines and ornaments only */
	--lg-gold-soft: #E6D3AE;       /* pale champagne: light cards, the hero button, small type on dark panels */
	--lg-sand: #E6D1A8;        /* soft gold for large bands: the amber was too loud as a background */

	--lg-ink: var(--lg-burgundy);
	--lg-ink-soft: #6B4F4B;
	--lg-taupe: var(--lg-burgundy);
	--lg-taupe-deep: var(--lg-hero);
	--lg-cream: #F7ECD8;           /* a shade lighter than the first cream (#F3E5C8): the client wanted the product cards brighter */
	--lg-cream-soft: #FAF3E4;
	--lg-hero: var(--lg-burgundy-dark);
	--lg-sage: var(--lg-gold-soft);
	--lg-line: #EADBBF;
	--lg-radius-card: 26px;
	--lg-radius: 8px;
	--lg-font: "אנימטור", "Heebo", Arial, sans-serif;

	/* WoodMart's own variables, so every native component follows the palette */
	--wd-primary-color: var(--lg-ink);
	--wd-alternative-color: var(--lg-taupe);
	--wd-title-color: var(--lg-ink);
	--wd-entities-title-color: var(--lg-ink);
	--wd-entities-title-color-hover: var(--lg-taupe-deep);
	--wd-link-color: var(--lg-ink);
	--wd-link-color-hover: var(--lg-taupe-deep);
	--btn-accented-bgcolor: var(--lg-ink);
	--btn-accented-bgcolor-hover: var(--lg-hero);
	--btn-accented-color: #fff;
	--btn-default-bgcolor: var(--lg-cream);
	--btn-default-bgcolor-hover: var(--lg-taupe);
	--btn-default-color: var(--lg-ink);
	--btn-default-color-hover: #fff;
	--wd-brd-radius: var(--lg-radius);
	--wd-form-brd-radius: var(--lg-radius);
	--wd-form-brd-color: var(--lg-line);
	--wd-form-brd-color-focus: var(--lg-taupe);
	--wd-text-font: var(--lg-font);
	--wd-title-font: var(--lg-font);
	--wd-entities-title-font: var(--lg-font);
	--wd-header-el-font: var(--lg-font);
	--wd-text-color: var(--lg-ink-soft);
	--wd-text-font-weight: 400;
}

/* The theme prints its own settings later with the same weight, so on pages without a rule of ours
   (password reset, wishlist, 404) buttons came out taupe and titles near-black. One more degree of weight
   lets the design's colours and form borders win. The body text keeps the theme's light weight on purpose. */
:root:root {
	--wd-primary-color: var(--lg-ink);
	--wd-alternative-color: var(--lg-taupe);
	--wd-title-color: var(--lg-ink);
	--wd-entities-title-color: var(--lg-ink);
	--wd-entities-title-color-hover: var(--lg-taupe-deep);
	--wd-link-color: var(--lg-ink);
	--wd-link-color-hover: var(--lg-taupe-deep);
	--btn-accented-bgcolor: var(--lg-ink);
	--btn-accented-bgcolor-hover: var(--lg-hero);
	--btn-accented-color: #fff;
	--btn-default-bgcolor: var(--lg-cream);
	--btn-default-bgcolor-hover: var(--lg-taupe);
	--btn-default-color: var(--lg-ink);
	--btn-default-color-hover: #fff;
	--wd-form-brd-radius: var(--lg-radius);
	--wd-form-brd-color: var(--lg-line);
	--wd-form-brd-color-focus: var(--lg-taupe);
	--wd-form-brd-width: 1px;
}

/* Elementor's global colours were never set (still its default blue/green): the palette, for any widget left on them */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--lg-ink);
	--e-global-color-secondary: var(--lg-hero);
	--e-global-color-text: var(--lg-ink-soft);
	--e-global-color-accent: var(--lg-gold);
}

body { font-weight: 400; color: var(--lg-ink-soft); }
h1, h2, h3, h4, h5, h6, .title, .wd-entities-title { color: var(--lg-ink); font-family: var(--lg-font); }

/* ---------- Buttons ------------------------------------------------------ */
.btn, .button, button.button, .woocommerce .button, .wd-add-btn .button,
.single_add_to_cart_button, .checkout-button, #place_order {
	border-radius: var(--lg-radius) !important;
	font-family: var(--lg-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none !important;
}
.single_add_to_cart_button, .checkout-button, #place_order,
.woocommerce .button.alt, .btn-color-primary {
	background: var(--lg-ink) !important;
	color: #fff !important;
}
.single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover,
.woocommerce .button.alt:hover, .btn-color-primary:hover { background: var(--lg-hero) !important; }

/* WoodMart paints old prices and the side cart's "1 ×" in its light grey (#bbb), which fades into the page:
   the site's secondary ink instead (the product cards set their own colour in card.css). WoodMart prints
   these two rules further down the page, so "body" lifts ours above them. */
body .price del, body .cart-info span.quantity { color: var(--lg-ink-soft); }
/* the accessibility button stays out of the side cart while it is open (as in the phone menu and the search) */
body:has(.cart-widget-side.wd-opened) #ea11y-root { display: none; }