/*
Theme Name: Camélia — Woodmart Child
Theme URI: https://camelia.co.ma
Description: Child theme of Woodmart for camelia.co.ma. All custom theme code for the site lives here, so that Woodmart updates never overwrite it.
Author: Camélia
Template: woodmart
Version: 1.1.0
Requires PHP: 7.4
Text Domain: woodmart-child
*/

/* =========================================================================
 * Camélia visual identity — aligned with the pack.camelia.co.ma landing page.
 *
 * Palette and type are lifted from the LP's own tokens (assets/css/cure.css)
 * so the funnel and the shop read as one brand.
 *
 * Colour rule inherited from the LP, and it matters commercially:
 * GOLD IS AN ACCENT, NEVER AN ACTION. Every buy button is green, so that
 * "saturated green = purchase" stays unambiguous. Do not restyle
 * .single_add_to_cart_button and friends to gold.
 * ====================================================================== */

:root {
	/* Surfaces */
	--cam-cream:       #F6EEE2;
	--cam-cream-light: #FBF6EF;
	--cam-white:       #FFFFFF;

	/* Brand */
	--cam-gold:        #C9A24B;
	--cam-gold-dark:   #A8872A;
	--cam-aubergine:   #4E2A44;

	/* Action — buttons only */
	--cam-cta:         #2E7D5B;
	--cam-cta-hover:   #1F5A45;
	--cam-cta-text:    #FFFFFF;

	/* Text */
	--cam-ink:         #2A2724;
	--cam-ink-soft:    #6E6459;

	/* Lines & shape */
	--cam-card-border: #E3D9C8;
	--cam-r-card:      16px;
	--cam-r-btn:       12px;
	--cam-r-pill:      999px;

	--cam-shadow-cta:  0 4px 14px rgba(46, 125, 91, .26);

	/* Type. Fraunces carries no Arabic glyphs — the RTL block below swaps it. */
	--cam-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--cam-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- Surfaces */

/*
 * Woodmart paints the content area from its own custom property rather than a
 * literal colour, so setting the variable is what actually turns the shop,
 * product and archive pages cream — a `background-color` on .wd-page-content
 * alone gets overwritten by the theme's own rule.
 */
:root {
	--wd-main-bgcolor: #F6EEE2;
}

/* `html body` rather than `body`: Woodmart ships `body{background-color:#fff}`,
   and the extra element keeps us ahead of it without reaching for !important. */
html body,
.wd-page-content,
.main-page-wrapper,
.site-content {
	background-color: var(--cam-cream);
	color: var(--cam-ink);
}

/*
 * The bands directly above and below the footer were white, which read as a
 * gap between the page and the dark footer. Carry the footer's aubergine
 * through the copyright strip so the whole block ends as one surface.
 */
.wd-footer,
.footer-container {
	background-color: var(--cam-cream);
}

.copyrights-wrapper,
.wd-copyrights {
	background-color: var(--cam-aubergine);
	color: var(--cam-white);
	border-top: none;
}

.copyrights-wrapper a,
.wd-copyrights a {
	color: var(--cam-gold);
}

/*
 * Product cards. Flat white tiles read as unfinished against the cream page,
 * so they take the lighter cream with a hairline border instead — the same
 * card treatment the LP uses. The border is what separates the card from the
 * page now that the fill no longer does it on its own.
 */
.wd-product {
	background-color: var(--cam-cream-light);
	border: 1px solid var(--cam-card-border);
	border-radius: var(--cam-r-card);
	padding: 10px 10px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wd-product:hover {
	border-color: var(--cam-gold);
	box-shadow: 0 6px 20px rgba(78, 42, 68, .07);
}

/* Product images keep a white bed — packshots are cut out on white. */
.wd-product .product-image-link,
.wd-product .wd-product-grid-slider {
	background-color: var(--cam-white);
	border-radius: calc(var(--cam-r-card) - 6px);
	overflow: hidden;
}

.wd-single-product-wrap .summary-inner,
.woocommerce-tabs,
.cart-totals-inner {
	background-color: var(--cam-cream-light);
	border-radius: var(--cam-r-card);
}

/* The header rows are coloured in the header builder (gold bar / cream row);
   these keep the surrounding chrome consistent with them. */
.whb-header,
.whb-general-header {
	background-color: var(--cam-cream);
}

/* ------------------------------------------------------------------- Type */

body,
button,
input,
select,
textarea,
.wd-nav > li > a {
	font-family: var(--cam-font-body);
}

h1, h2, h3, h4, h5, h6,
.wd-entities-title,
.elementor-heading-title,
.product_title,
.section-title {
	font-family: var(--cam-font-display);
	color: var(--cam-ink);
	letter-spacing: -.01em;
}

.wd-entities-title a {
	color: var(--cam-ink);
}

.wd-entities-title a:hover {
	color: var(--cam-gold-dark);
}

/*
 * Arabic has no Fraunces coverage, and the LP uses Cairo for its RTL pages.
 * Match that here rather than letting the browser fall back to a default
 * serif, which is what makes Arabic headings look broken.
 */
html[lang^="ar"] body,
html[dir="rtl"] body,
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[lang^="ar"] .wd-entities-title,
html[dir="rtl"] .wd-entities-title,
html[lang^="ar"] .elementor-heading-title,
html[dir="rtl"] .elementor-heading-title,
html[lang^="ar"] .product_title,
html[dir="rtl"] .product_title {
	font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* ---------------------------------------------------------------- Accents */

a {
	color: var(--cam-gold-dark);
}

a:hover {
	color: var(--cam-gold);
}

.wd-nav > li.current-menu-item > a,
.wd-nav > li.wd-active > a {
	color: var(--cam-gold-dark);
}

.price,
.woocommerce-Price-amount {
	color: var(--cam-ink);
	font-weight: 600;
}

del .woocommerce-Price-amount {
	color: var(--cam-ink-soft);
	font-weight: 400;
}

.onsale,
.wd-product-label.product-label {
	background-color: var(--cam-gold);
	color: var(--cam-white);
	border-radius: var(--cam-r-pill);
}

/* ---------------------------------------------------------------- Actions */

/*
 * Purchase actions are green — see the colour rule at the top of this file.
 * Woodmart also sets these through Theme Settings; the rules here keep the
 * buy path consistent in the places the theme options do not reach.
 */
.single_add_to_cart_button,
.wd-buy-now-btn,
.checkout-button,
.button.alt,
.place-order .button {
	background-color: var(--cam-cta);
	border-color: var(--cam-cta);
	color: var(--cam-cta-text);
	border-radius: var(--cam-r-btn);
	box-shadow: var(--cam-shadow-cta);
	font-weight: 600;
	letter-spacing: .01em;
}

.single_add_to_cart_button:hover,
.wd-buy-now-btn:hover,
.checkout-button:hover,
.button.alt:hover,
.place-order .button:hover {
	background-color: var(--cam-cta-hover);
	border-color: var(--cam-cta-hover);
	color: var(--cam-cta-text);
}

/* ----------------------------------------------------------------- Fields */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	background-color: var(--cam-white);
	border-color: var(--cam-card-border);
	border-radius: var(--cam-r-btn);
	color: var(--cam-ink);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--cam-gold);
}

/* ------------------------------------------------------- Product page trim */

.wd-single-product-wrap .product_title {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	line-height: 1.15;
}

.woocommerce-product-details__short-description {
	color: var(--cam-ink-soft);
}

/* ------------------------------------------------- Coupon field (product) */

/*
 * Styling for the on-product coupon box added in functions.php. Deliberately
 * quiet: it must not compete with the green buy button next to it.
 */
.cam-coupon {
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--cam-cream-light);
	border: 1px solid var(--cam-card-border);
	border-radius: var(--cam-r-card);
}

.cam-coupon__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cam-ink);
}

.cam-coupon__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cam-coupon__input {
	flex: 1 1 160px;
	min-width: 0;
	text-transform: uppercase;
}

/* A coupon code reads left-to-right even on the Arabic pages. */
html[dir="rtl"] .cam-coupon__input {
	direction: ltr;
	text-align: right;
}

.cam-coupon__btn {
	flex: 0 0 auto;
	padding: 0 18px;
	border: 1px solid var(--cam-gold);
	border-radius: var(--cam-r-btn);
	background: transparent;
	color: var(--cam-gold-dark);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cam-coupon__btn:hover:not([disabled]) {
	background: var(--cam-gold);
	color: var(--cam-white);
}

.cam-coupon__btn[disabled] {
	opacity: .6;
	cursor: default;
}

.cam-coupon__msg {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.cam-coupon__msg.is-success {
	color: var(--cam-cta);
}

.cam-coupon__msg.is-error {
	color: #B3261E;
}

.cam-coupon__msg:empty {
	display: none;
}

/* The product price while a coupon is being previewed. */
.price .cam-price-was {
	opacity: .6;
	font-weight: 400;
	margin-inline-end: 8px;
}

.price .cam-price-now {
	color: var(--cam-cta);
	text-decoration: none;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Footer menus.
 *
 * These columns used Elementor Pro's nav-menu widget until Pro was removed on
 * 2026-09-14. They now render through [camelia_menu] in the child theme, so
 * the look that lived in the widget's own settings has to live here instead:
 * a plain vertical list, 14px, 10px of vertical breathing room per item.
 * ---------------------------------------------------------------------- */
.cam-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cam-menu li {
	margin: 0;
	padding: 0;
}

.cam-menu a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

.cam-menu a:hover,
.cam-menu .current-menu-item > a {
	color: var(--cam-gold);
}

/* The footer sits on aubergine, so its links need the light treatment. */
.wd-footer .cam-menu a,
.footer-container .cam-menu a {
	color: var(--cam-white);
	opacity: .85;
}

.wd-footer .cam-menu a:hover,
.footer-container .cam-menu a:hover {
	color: var(--cam-gold);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Product description written as real content (Pack Camélia).
 *
 * The description used to be two [elementor-template] shortcodes and almost no
 * text. It now carries the landing page's own copy as plain HTML, so it stays
 * readable, translatable and searchable without depending on a page builder.
 * ---------------------------------------------------------------------- */
.cam-desc {
	max-width: 70ch;
	margin: 0 auto;
	padding: 8px 0 4px;
	color: var(--cam-ink);
}

.cam-desc h2 {
	margin: 2em 0 .6em;
	font-size: 1.45em;
	line-height: 1.25;
}

.cam-desc h2:first-child {
	margin-top: .5em;
}

.cam-desc h3 {
	margin: 1.6em 0 .4em;
	font-size: 1.15em;
	color: var(--cam-aubergine);
}

.cam-desc p,
.cam-desc li {
	line-height: 1.65;
}

.cam-desc__lead {
	font-size: 1.08em;
}

.cam-desc ul,
.cam-desc ol {
	padding-inline-start: 1.15em;
}

.cam-desc li {
	margin-bottom: .45em;
}

/* The four headline benefits read as a checklist, not prose. */
.cam-desc__benefits {
	list-style: none;
	padding-inline-start: 0;
}

.cam-desc__benefits li {
	position: relative;
	padding-inline-start: 1.6em;
}

.cam-desc__benefits li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--cam-cta);
	font-weight: 700;
}

.cam-desc__badges {
	color: var(--cam-ink-soft);
	font-size: .95em;
}

/* How often to use each product — the question buyers actually ask. */
.cam-desc__usage,
.cam-desc__rhythm {
	display: inline-block;
	margin-top: .3em;
	padding: 4px 12px;
	border-radius: var(--cam-r-pill);
	background-color: var(--cam-cream);
	border: 1px solid var(--cam-card-border);
	font-size: .9em;
	color: var(--cam-ink-soft);
}

.cam-desc__ritual li {
	margin-bottom: 1em;
}

.cam-desc__ritual .cam-desc__rhythm {
	display: block;
	width: fit-content;
}

.cam-desc__timeline {
	list-style: none;
	padding-inline-start: 0;
	border-inline-start: 2px solid var(--cam-gold);
	padding-inline-start: 1.1em;
}

/* Honest, and kept visually quiet rather than hidden. */
.cam-desc__note {
	font-size: .92em;
	color: var(--cam-ink-soft);
	font-style: italic;
}

.cam-desc__proof {
	margin-top: 1.4em;
	padding: 12px 16px;
	border-radius: var(--cam-r-card);
	background-color: var(--cam-cream);
	color: var(--cam-aubergine);
	font-weight: 600;
}

html[dir="rtl"] .cam-desc {
	text-align: right;
}

/* =========================================================================
 * Footer — alignment on phones
 *
 * The footer is an Elementor block, and its mobile alignment was never set,
 * so it inherited a mix that read as broken at 375px: the three column
 * headings ("Liens rapides", "À propos", "Nous contacter") were centred, the
 * menus under them were left-aligned, and the contact list was centred again.
 *
 * Worse, the two menus did not even line up with each other. The mobile
 * variant of the "Liens rapides" menu carries `align-self: center` from
 * Elementor's per-element CSS, and since nothing gives it a width it
 * shrink-wrapped to 94px and sat centred at x=140 — while "À propos" spanned
 * the full 315px from x=30. Two lists of links, two different left edges.
 *
 * Everything is start-aligned instead, on the owner's call (2026-09-16).
 * `start`, not `left`: on the Arabic pages that has to resolve to the right,
 * and `flex-start` in a row does the same for the icon list.
 *
 * Specificity note: Elementor writes per-element rules as
 * `.elementor-29951 .elementor-element.elementor-element-XXXX`, which scores
 * (0,3,0). `footer.wd-footer .elementor-element.elementor-widget` scores
 * (0,3,1) and wins on weight rather than on load order — no `!important`.
 *
 * 767px is Elementor's own mobile breakpoint, so this overrides exactly the
 * settings it would have written for that device and nothing else.
 * ====================================================================== */

@media (max-width: 767px) {

	footer.wd-footer .elementor-element.elementor-widget,
	footer.wd-footer .elementor-element.elementor-widget .elementor-widget-container,
	footer.wd-footer .elementor-element.elementor-widget .elementor-heading-title {
		text-align: start;
	}

	/*
	 * Undoes two separate shrink-wraps. The mobile menu widget carries
	 * `align-self: center` of its own; the "Livraison gratuite" block instead
	 * inherits centring from a parent container's `align-items: center`, which
	 * squeezed its inner container to 200px and left the heading starting
	 * 60px in from every other line in the footer.
	 *
	 * `align-self` on the child beats the parent's `align-items` whatever the
	 * specificity, so stretching both widgets and nested containers settles
	 * it. No `width` here on purpose — stretching is what fills the column,
	 * and a forced width would fight any container set to a row.
	 */
	footer.wd-footer .elementor-element.elementor-widget,
	footer.wd-footer .elementor-element.e-con {
		align-self: stretch;
	}

	/*
	 * The "Livraison gratuite" container carries 10px of inline padding, which
	 * left its heading starting 12px right of every other line — once the rest
	 * of the footer is flush left, that is the only thing still ragged.
	 *
	 * Only the padding is removed. Clearing the container's explicit width as
	 * well was tried and is wrong: these containers are laid out in a wrapping
	 * row, so without their widths the three link columns stop filling the
	 * line and fold back into a two-across grid — "Liens rapides" jumped to
	 * x=190 beside "À propos". The widths are what keep one column per row.
	 */
	footer.wd-footer .elementor-element.e-con.e-child {
		padding-inline: 0;
	}

	footer.wd-footer .elementor-element.elementor-widget .elementor-icon-list-items,
	footer.wd-footer .elementor-element.elementor-widget .elementor-icon-list-item {
		justify-content: flex-start;
		text-align: start;
	}
}