/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* epr: migrated Elementor Pro custom CSS — begin */
/* post 1550, element 89492b5 */
.elementor-1550 .elementor-element.elementor-element-89492b5 {
    transform: scaleX(calc((100% + 1px) / 100%));
    transform-origin: center;
}
/* post 27369, element 89492b5 */
.elementor-27369 .elementor-element.elementor-element-89492b5 {
    transform: scaleX(calc((100% + 1px) / 100%));
    transform-origin: center;
}
/* post 27689, element 78ad316 */
.elementor-27689 .elementor-element.elementor-element-78ad316 .wd-entities-title {
    font-size: 13px;
}
.elementor-27689 .elementor-element.elementor-element-78ad316 .product-grid-item :is(.wd-entities-title,.wd-product-cats,.wd-product-brands-links)
{
     font-size: 13px;
}
.elementor-27689 .elementor-element.elementor-element-78ad316 p.stock.wd-style-default:is(.available-on-backorder,.in-stock) {
    color: var(--color-gray-800);
    font-size: 13px;
}
.elementor-27689 .elementor-element.elementor-element-78ad316 .element-title {
    font-size: 18px;
}
/* post 27704, element 7e3fd4c9 */
.elementor-27704 .elementor-element.elementor-element-7e3fd4c9 .wd-entities-title {
    font-size: 13px;
}
.elementor-27704 .elementor-element.elementor-element-7e3fd4c9 .product-grid-item :is(.wd-entities-title,.wd-product-cats,.wd-product-brands-links)
{
     font-size: 13px;
}
.elementor-27704 .elementor-element.elementor-element-7e3fd4c9 p.stock.wd-style-default:is(.available-on-backorder,.in-stock) {
    color: var(--color-gray-800);
    font-size: 13px;
}
.elementor-27704 .elementor-element.elementor-element-7e3fd4c9 .element-title {
    font-size: 18px;
}
/* epr: CF7 form styling to approximate the migrated Elementor Pro forms */

/* epr-03: WoodMart dequeues CF7's own plugin stylesheet (the only place
   ".hidden-fields-container{display:none}" normally lives), so CF7 6.x's
   hidden-fields <fieldset> renders with the browser's default fieldset
   border+padding — an empty bordered box above the first visible field. */
.wpcf7-form .hidden-fields-container {
	display: none;
}

/* epr-04: contact-us (2abbe9d) and LP (53ce7fff) form widgets sit beside a
   fixed-350px page title in a flex row. epr-02's flex-grow:1/flex-basis:0
   override (removed here) made the widget fill all remaining row space,
   which isn't how Pro's own form widget behaves there (flex-grow:0,
   flex-basis:auto, sized by its own natural content width) and rendered
   55px narrower than production with the title never shrinking to 2 lines.
   Fixed instead with an explicit desktop _element_custom_width on the
   widget itself (epr-replace-pro.php's form-conversion step, + the one-off
   fix-contact-lp-width.php for staging's already-converted posts) so the
   widget uses Elementor's normal per-element width/flex-grow:0 mechanism —
   same one the title widget already uses — and no CSS override is needed
   here at all. The cancellation form (77d8829) doesn't need this either —
   its original Pro widget's _element_width/_element_custom_width (83.3%)
   was restored directly via fix-form-width.php, since epr-replace-pro.php
   (now patched) didn't carry it over when the post was originally
   converted. */

/* epr-03: full-width stacked CF7 forms — contact / LP / cancellation.
   Note: the epr-form-<id> class lives on the <form class="wpcf7-form ...">
   element itself (set via the wd_contact_form_7 widget's "style" setting),
   not on an ancestor — selectors target it directly, no ".wpcf7-form"
   descendant combinator. */
.epr-form-2abbe9d,
.epr-form-53ce7fff,
.epr-form-77d8829 {
	display: block;
}
.epr-form-2abbe9d > p,
.epr-form-53ce7fff > p,
.epr-form-77d8829 > p {
	margin: 0 0 10px;
}
/* epr-04: Pro's last field/button has no trailing margin (nothing follows
   it); CF7's uniform "> p" margin above does, inflating the widget's
   rendered height by one extra 10px past production on every form. */
.epr-form-2abbe9d > p:last-of-type,
.epr-form-53ce7fff > p:last-of-type,
.epr-form-77d8829 > p:last-of-type {
	margin-bottom: 0;
}
.epr-form-2abbe9d input[type="text"],
.epr-form-2abbe9d input[type="tel"],
.epr-form-2abbe9d input[type="email"],
.epr-form-2abbe9d textarea,
.epr-form-53ce7fff input[type="text"],
.epr-form-53ce7fff input[type="tel"],
.epr-form-53ce7fff input[type="email"],
.epr-form-53ce7fff textarea,
.epr-form-77d8829 input[type="text"],
.epr-form-77d8829 input[type="tel"],
.epr-form-77d8829 input[type="email"],
.epr-form-77d8829 textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 47px;
	padding: 6px 16px;
	border: 1px solid rgb(105, 114, 125);
	border-radius: 4px;
	background: #fff;
	color: rgb(31, 33, 36);
	font-size: 16px;
	direction: rtl;
	text-align: right;
}
/* epr-04: Pro's placeholder colour, read from production's served
   base-desktop.css (.elementor .e-form-input-base::placeholder). */
.epr-form-2abbe9d input::placeholder,
.epr-form-2abbe9d textarea::placeholder,
.epr-form-53ce7fff input::placeholder,
.epr-form-53ce7fff textarea::placeholder,
.epr-form-77d8829 input::placeholder,
.epr-form-77d8829 textarea::placeholder {
	color: #9DA5AE;
}
.epr-form-2abbe9d textarea,
.epr-form-53ce7fff textarea,
.epr-form-77d8829 textarea {
	height: 104px;
	min-height: 104px;
}
.epr-form-2abbe9d .wpcf7-acceptance,
.epr-form-53ce7fff .wpcf7-acceptance {
	direction: rtl;
	text-align: right;
	font-size: 16px;
	line-height: 1.3;
}
.epr-form-2abbe9d .wpcf7-acceptance label,
.epr-form-53ce7fff .wpcf7-acceptance label,
.epr-form-2abbe9d .wpcf7-list-item-label,
.epr-form-53ce7fff .wpcf7-list-item-label {
	color: rgb(118, 118, 118);
}
.epr-form-2abbe9d input[type="submit"],
.epr-form-53ce7fff input[type="submit"],
.epr-form-77d8829 input[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 49px;
	min-height: 49px;
	padding: 15px 30px;
	border: none;
	border-radius: 4px;
	--btn-accented-bgcolor: rgb(36, 36, 36);
	background-color: rgb(36, 36, 36);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
/* epr-05: contact (2abbe9d) and LP (53ce7fff) only — mobile button sat
   6-7px higher than production (341px vs 348px button-top-from-form-top);
   desktop already matches, cancellation (77d8829) wasn't flagged. Targets
   the acceptance field's <p> (the one right before the submit button) and
   raises ITS margin-bottom, not the submit <p>'s margin-top — adjacent
   sibling margins collapse to the larger one in normal block flow, so a
   margin-top added on the submit side alone would've been absorbed by the
   acceptance <p>'s existing 10px margin-bottom and produced no change. */
@media (max-width: 767px) {
	.epr-form-2abbe9d > p:has(.wpcf7-acceptance),
	.epr-form-53ce7fff > p:has(.wpcf7-acceptance) {
		margin-bottom: 17px;
	}
}

/* epr-03: Single Product form (27689 layout 78ad316, 27704 layout
   7e3fd4c9/template) — one row, 4 equal cells (name/phone/email/submit),
   RTL order, collapsing to stacked full-width rows below 768px */
.epr-form-444fe07,
.epr-form-29f77eed,
.epr-form-3a3e02cc {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: flex-start;
}
.epr-form-444fe07 > p,
.epr-form-29f77eed > p,
.epr-form-3a3e02cc > p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.epr-form-444fe07 input[type="text"],
.epr-form-444fe07 input[type="tel"],
.epr-form-444fe07 input[type="email"],
.epr-form-29f77eed input[type="text"],
.epr-form-29f77eed input[type="tel"],
.epr-form-29f77eed input[type="email"],
.epr-form-3a3e02cc input[type="text"],
.epr-form-3a3e02cc input[type="tel"],
.epr-form-3a3e02cc input[type="email"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 15px;
	border: 1px solid rgb(105, 114, 125);
	border-radius: 3px;
	background: #fff;
	color: rgb(31, 33, 36);
	font-size: 14px;
	direction: rtl;
	text-align: right;
}
.epr-form-444fe07 input::placeholder,
.epr-form-29f77eed input::placeholder,
.epr-form-3a3e02cc input::placeholder {
	color: #9DA5AE;
}
.epr-form-444fe07 input[type="submit"],
.epr-form-29f77eed input[type="submit"],
.epr-form-3a3e02cc input[type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 40px;
	padding: 0 20px;
	border: none;
	border-radius: 0;
	--btn-accented-bgcolor: rgb(84, 89, 95);
	background-color: rgb(84, 89, 95);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}
@media (max-width: 767px) {
	.epr-form-444fe07,
	.epr-form-29f77eed,
	.epr-form-3a3e02cc {
		display: block;
	}
	.epr-form-444fe07 > p,
	.epr-form-29f77eed > p,
	.epr-form-3a3e02cc > p {
		margin: 0 0 10px;
	}
	.epr-form-444fe07 > p:last-of-type,
	.epr-form-29f77eed > p:last-of-type,
	.epr-form-3a3e02cc > p:last-of-type {
		margin-bottom: 0;
	}
	.epr-form-444fe07 input[type="submit"],
	.epr-form-29f77eed input[type="submit"],
	.epr-form-3a3e02cc input[type="submit"] {
		width: 100%;
	}
}

/* epr-03: footer menus (cms_block 720) — WoodMart's mega-menu vertical nav
   widget defaults to a bordered/separated list with 12px/18px padding;
   production's footer links are borderless, 16px/400, 7px 0 padding */
/* epr-03: WoodMart lazy-enqueues mod-nav-vertical-design-default.min.css
   (woodmart_force_enqueue_style(), triggered by this widget's own markup),
   which lands AFTER child-style.css in <head> regardless of our enqueue
   priority — match its .wd-design-default selector's specificity so source
   order can't decide the tie. */
.elementor-element-01ba0b6 .wd-nav-vertical.wd-design-default,
.elementor-element-b230ba2 .wd-nav-vertical.wd-design-default,
.elementor-element-f08d7d6 .wd-nav-vertical.wd-design-default {
	border: none;
}
.elementor-element-01ba0b6 .wd-nav-vertical.wd-design-default > li:not(:last-child),
.elementor-element-b230ba2 .wd-nav-vertical.wd-design-default > li:not(:last-child),
.elementor-element-f08d7d6 .wd-nav-vertical.wd-design-default > li:not(:last-child) {
	border-bottom: none;
}
.elementor-element-01ba0b6 .wd-nav-vertical > li > a.woodmart-nav-link,
.elementor-element-b230ba2 .wd-nav-vertical > li > a.woodmart-nav-link,
.elementor-element-f08d7d6 .wd-nav-vertical > li > a.woodmart-nav-link {
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	padding: 7px 0;
	color: #fff;
}

/* epr-03: LP page (27369) call-to-action → heading/text-editor conversion.
   The original Pro call-to-action widget applied its own internal
   "padding-left: 20%" content inset (settings.padding.left = "20", unit %),
   which epr-replace-pro.php's heading+text-editor replacement doesn't
   reproduce since that's a single-element setting, not CSS the Pro widget
   shipped — the two free widgets need the same inset applied directly. */
.elementor-element-46a2275,
.elementor-element-1f9fd19 {
	padding-left: 20%;
	box-sizing: border-box;
}
/* epr-05: same CTA — production's responsive rules (post-27369.css,
   .elementor-cta__description / .elementor-cta__content) that the
   heading+text-editor conversion didn't carry over. */
/* epr-06: epr-05's description margin-bottom:38px (@max-width:1024px) was
   read off production's .elementor-cta__description:not(:last-child) rule,
   but the button text in Pro's source widget was empty, so the description
   IS :last-child there and the rule never actually applies on production —
   removed; nothing replaces it. The @max-width:768px margin:5% that used to
   sit on .elementor-element-46a2275 moved into the epr-replace-pro.php CTA
   wrapper container (epr-06, below) instead: production's margin sits
   around the whole widget box, and now that the box is the wrapper, keeping
   it on the heading would put the margin inside the tinted background. */
@media (max-width: 768px) {
	/* production's .elementor-cta__content resets the 20% inset to 0 at
	   this breakpoint; here that inset lives on both widgets directly. */
	.elementor-element-46a2275,
	.elementor-element-1f9fd19 {
		padding-left: 0;
	}
}
/* epr-06: the free text-editor widget wraps its content in a bare <p>,
   which carries the theme's default 20px margin-bottom. That extra 20px
   was always there but invisible against a transparent background; now
   that epr-replace-pro.php's CTA wrapper container paints #f9fafa behind
   title+description as one box, the margin shows up as a 20px colored
   strip past the text, at every width, that production's box doesn't have
   (its .elementor-cta__description isn't a <p>, so it has no such margin). */
.elementor-element-1f9fd19 p {
	margin: 0;
}
/* epr: migrated Elementor Pro custom CSS — end */

/* kppf-03: related-products widget on the single product template
   (elementor-element-5e0a7d6c, same element ID on every product page —
   confirmed on 48962/46283/40402; absent on /shop/). On phones the
   hover-button style shows the add-to-cart button inline instead of on
   real hover, so it lands between the image and the title. Flattening
   .product-element-top lets title/price/button become orderable flex
   siblings of .product-wrapper without touching the shop/category grid,
   which doesn't use this element ID. */
@media (max-width: 768px) {
	.elementor-element-5e0a7d6c .product-wrapper {
		display: flex;
		flex-direction: column;
	}
	.elementor-element-5e0a7d6c .product-element-top {
		display: contents;
	}
	.elementor-element-5e0a7d6c .product-image-link {
		order: 1;
	}
	.elementor-element-5e0a7d6c .wd-entities-title {
		order: 2;
	}
	.elementor-element-5e0a7d6c .wd-product-cats {
		order: 3;
	}
	.elementor-element-5e0a7d6c .price {
		order: 4;
	}
	.elementor-element-5e0a7d6c .wd-add-btn {
		order: 5;
	}
	.elementor-element-5e0a7d6c .product-image-link img {
		object-fit: contain;
	}
}

/* kfold-01: single-product layout 27689 at tablet / Galaxy Fold widths —
   Elementor's 83.3% boxed width, 50px gallery-card padding and 5% column
   padding left the gallery ~200px wide; feature-icon row margins squeezed
   the 5 icon boxes. body prefix: Elementor's post CSS loads after this file. */
@media (min-width: 769px) and (max-width: 1279px) {
	body .elementor-27689 .elementor-element.elementor-element-183d25e {
		--content-width: 100%;
	}
	body .elementor-27689 .elementor-element.elementor-element-9ede07f > .elementor-widget-container {
		padding: 15px;
	}
	body .elementor-27689 .elementor-element.elementor-element-bdd882e {
		--padding-right: 2%;
	}
	body .elementor-27689 .elementor-element.elementor-element-1ca4edc {
		--gap: 6px;
		--column-gap: 6px;
	}
	body .elementor-27689 .elementor-element.elementor-element-1ca4edc > .e-con {
		--flex-grow: 1;
		--flex-basis: 0;
		--margin-left: 0px;
		--margin-right: 0px;
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}
}

/* kfold-01: product help form — the epr-03 one-row layout put 4 cells in a
   ~300px column. Wrap fields on a grid, submit full width; the email field
   (3rd of 3) spans the row so it isn't orphaned at half width. */
@media (min-width: 768px) {
	.epr-form-444fe07,
	.epr-form-29f77eed,
	.epr-form-3a3e02cc {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
	.epr-form-444fe07 > p:has(input[type="submit"]),
	.epr-form-29f77eed > p:has(input[type="submit"]),
	.epr-form-3a3e02cc > p:has(input[type="submit"]) {
		grid-column: 1 / -1;
	}
	.epr-form-444fe07 > p:nth-of-type(3) {
		grid-column: 1 / -1;
	}
}

/* kfold-02: product gallery thumbnails — Woodmart fades the active thumb to
   0.5, so the strip looked like a ghost row. Show it at full opacity with an
   inset outline (no size change). Selector must out-rank Woodmart's :is(). */
body .wd-gallery-thumb .wd-carousel .wd-carousel-wrap .wd-carousel-item.wd-thumb-active {
	opacity: 1;
}
body .wd-gallery-thumb .wd-carousel .wd-carousel-wrap .wd-carousel-item.wd-thumb-active img {
	outline: 2px solid var(--wd-primary-color, #210000);
	outline-offset: -2px;
}