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

/* Narrow reading width on plain text pages only.
   Skips Elementor-built pages (homepage) and WooCommerce pages
   (cart, checkout, my account). Shop is an archive, not a page,
   so it is never matched here. */
body.page-template-default:not(.elementor-page):not(.woocommerce-page) .wd-page-content > .content-layout-wrapper,
body.page-template-default:not(.elementor-page):not(.woocommerce-page) .wd-page-content > .wd-page-title > .container {
	max-width: 860px;
}

/* Breathing room above and below the same pages.

   Woodmart gives them 20px under the header and 40px before the footer, which
   reads cramped once the column is only 860px wide. The gap is moved out to the
   page wrapper so the top and bottom can be set apart from each other: a little
   air above the title, a lot before the footer.

   clamp() means the gap grows with the window and stops growing on a big screen,
   so the numbers below read as: never less than, scales with the width, never
   more than. */
body.page-template-default:not(.elementor-page):not(.woocommerce-page) .wd-page-content.main-page-wrapper {
	padding-top: clamp(16px, 2vw, 32px);
	padding-bottom: clamp(40px, 5.5vw, 88px);
}

/* The theme's own gap between the title and the text. Its bottom half is now
   part of the wrapper padding above, so only the top half is left here. */
body.page-template-default:not(.elementor-page):not(.woocommerce-page) .wd-page-content > .content-layout-wrapper {
	padding-block: clamp(12px, 1.2vw, 20px) 0;
}

/* One shape for every product card image.

   A safety net, not the main fix. The carousels now ask Elementor for a
   cropped 600x686 image, so every card already arrives the same shape; see
   scripts/set-product-image-size.php. This rule holds the shape anyway, so a
   widget someone adds later, or one still on an uncropped size, cannot make a
   short card that sits above its row.

   Keep the ratio here equal to the crop in that script. If they disagree the
   image gets cropped twice, once by WordPress and once by object-fit.

   What this rule cannot do is make a picture sharp. It only crops what the
   browser already downloaded, and the browser picks that file from srcset
   before object-fit runs. A landscape photo forced into a tall box is still
   scaled up. Only a real crop, or a tall source photo, fixes that. */
.wd-product .wd-product-thumb .wd-product-img-link > img {
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 686;
	object-fit: cover;
}

/* The second (hover) image sits in its own absolute box, so it needs its own
   rule; the aspect-ratio above does not reach it. */
.wd-product .wd-product-thumb .wd-product-img-hover > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The left strip stays off screen until you click Menu.

   Woodmart has no option for this. The strip is hard-wired to sit against the
   left edge at 60px wide and grow to 275px on hover. That 60px rail is a
   permanent stub of icons nobody reads, and it pushes the whole page right.

   The button already exists: the "Menu" item in the header is the theme's
   Sticky navigation element, and clicking it puts .wd-opened on the strip and
   dims the page behind. All that is missing is hiding the rail, so these rules
   park the strip just past the left edge and slide it back when it opens. The
   theme's own transition on .wd-sticky-nav animates it.

   left, not transform. A transform makes the strip a containing block, which
   would break the full-height dropdowns, since those are position: fixed.

   The hover rule is the theme's own :hover expansion, cancelled. Without it a
   pointer resting on the screen edge would drag the strip out uninvited.

   Selectors are prefixed with the body class only to outrank the theme, whose
   sticky nav CSS is printed inline in the head, after this file.

   --wd-sticky-nav-w is the width of the rail, and the theme sets it to 60px on
   the body and then subtracts it all over the page: the sticky header slides
   60px right when it sticks, the sticky Add to cart bar and the sidebar opener
   sit at left: 60px, the store notice too, and every full width section is
   drawn 60px narrower. All of that is space kept clear for a rail that is not
   on screen any more, so the variable goes back to the theme's own off value,
   .001px, and every one of those sums lands back on the real page edge.

   The rail still needs its 60px, so it gets a width of its own,
   --jol-sticky-nav-w. Nothing but the rail reads it. It is declared outside the
   media query because the rail is display: none below 1025px anyway. */
body.wd-sticky-nav-enabled {
	--jol-sticky-nav-w: 60px;
}

@media (min-width: 1025px) {
	body.wd-sticky-nav-enabled {
		margin-left: 0;
		--wd-sticky-nav-w: .001px;
	}
}

.wd-sticky-nav-enabled .wd-sticky-nav {
	left: calc(var(--jol-sticky-nav-w, 60px) * -1);
	width: var(--jol-sticky-nav-w, 60px);
}

.wd-sticky-nav-enabled .wd-sticky-nav:hover:not(.wd-opened) {
	width: var(--jol-sticky-nav-w, 60px);
}

.wd-sticky-nav-enabled .wd-sticky-nav.wd-opened {
	left: 0;
}

/* Smaller header icons.

   Woodmart draws the header tool icons, Menu, search, cart, burger, at 20px.
   They sit next to 14px text and read heavy. 16px is closer to the text.

   The top bar is left alone: the theme already sets it to 14px with a
   two-class selector, which outranks this one. Same for any element given its
   own icon width in the header builder, which uses --wd-tools-icon-width. */
body .wd-tools-element {
	--wd-tools-icon-base-width: 16px;
}

/* More air under the footer's four columns.

   The link columns went from five rows to seven, which left only about 30px
   between the last link and the copyright line. Too tight to read as a break
   between two parts of the footer.

   Desktop only. On a phone the columns stack, so that block already ends a long
   way from the copyright line and does not need the extra gap.

   The selector is long only to outrank Elementor, which writes this element's
   margin into its own stylesheet with three classes. Keyed to the Elementor id
   340a1c5, so it is as brittle as the ids in scripts/build-footer.php: rebuild
   the footer in Elementor and this rule stops matching. */
@media (min-width: 1025px) {
	body .wd-footer .elementor-element.elementor-element-340a1c5 {
		margin-bottom: 60px;
	}
}

div#tab-description h3 {
    font-size: 13px;
}

.wd-accordion-title span {
    font-size: 13px;
    text-transform: uppercase;
}

.product-label.featured {
    background-color: var( --e-global-color-accent ) !important;
}

/* The trust line under Add to cart.

   Printed by inc/pdp-trust-line.php on woocommerce_after_add_to_cart_form, so
   it sits after the whole form: under the button on a simple product, and under
   the variation box on a product with colours.

   A flex row, not a grid, because the three claims are different lengths and
   should keep their own width. It wraps on a narrow screen, and the row gap
   keeps the two lines apart when it does.

   The icons take the theme primary and the text takes the theme body colour,
   so a change in the Woodmart options carries through here. The hairline above
   is the one fixed colour, and it is black at 11%, not a grey, so it darkens
   whatever background it lands on instead of fighting it. It is there to break
   the line away from the button, not to box it in. */
.jol-trust-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 22px;
	row-gap: 8px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.11);
	list-style: none;
   padding-left: 0;
}

.jol-trust-line-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wd-text-color);
	font-size: 13px;
	line-height: 1.4;
}

/* flex: none stops a long claim from squeezing its own icon out of shape. */
.jol-trust-line-icon {
	display: flex;
	flex: none;
	color: var(--wd-primary-color);
}

/* Pre-order note and badge
   ------------------------
   inc/preorder-tag.php. The note prints on the same action as the trust line
   above, at priority 10 against its 20, so it lands between the button and the
   trust line.

   Terracotta, the brand's second colour, is used on purpose. Teal is the
   primary and it is already carrying the price, the trust line icons and the
   links, so a pre-order note in teal would read as one more piece of furniture.
   This line has to be noticed once, before the customer clicks, and then stop
   asking for attention. A tinted band does that; a coloured button would not.

   The badge is drawn by Woodmart's own label markup, so it only needs its
   colours here. Everything about its shape, position and size is the theme's,
   which is what keeps it lined up with the Sale label next to it. */
.jol-preorder-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 10px 14px;
	border-radius: 4px;
	/* The brand terracotta at 8%, so the band tints whatever the theme's
	   background is instead of pinning itself to white. */
	background: rgba(185, 72, 42, 0.08);
	color: #8f3720;
	font-size: 13px;
	line-height: 1.45;
}

/* flex: none stops a long promise from squeezing the clock out of shape. */
.jol-preorder-note-icon {
	display: flex;
	flex: none;
}

.jol-preorder-label {
	background-color: #b9482a;
	color: #fff;
}