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


/* mtp-uniform-thumbs -----------------------------------------------------
   Product loop thumbnails forced to 4:5 at DISPLAY time. No file regeneration:
   WooCommerce cropping stays 'uncropped', originals untouched.
   Catalogue is currently ~9 images at 4:5 and ~293 square, so grids render
   ragged. Square sources lose 10%% top and 10%% bottom here; verified against
   both wall art (content 10.6%%-95.3%%, only the old watermark is clipped) and
   apparel (design sits 35%%-85%%, so only headroom and hem are lost).
   REVERT: delete this block.
   ----------------------------------------------------------------------- */
.wd-products .wd-product-img-link img,
.wd-products .product-image-link img,
.wd-product-thumb .product-image-link img{
	aspect-ratio:4/5;
	object-fit:cover;
	width:100%;
	height:auto;
}

/* mtp-uniform-formats ---------------------------------------------------
   'Also available as' tiles (snippet 43) mix 4:5 and square sources, so the
   three format tiles render at different heights. Same display-time crop.
   REVERT: delete this block.
   --------------------------------------------------------------------- */
.mtp-formats img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;display:block;border-radius:3px}

/* mtp-uniform-gallery ---------------------------------------------------
   Main product gallery renders 726/581/630/636px tall depending on which
   image is showing, so the page jumps as you click through. Force 4:5.
   NOTE: verify Woodmart's zoom/magnifier still tracks correctly after this;
   if the zoom overlay is offset, delete THIS block only and keep the one above.
   --------------------------------------------------------------------- */
.woocommerce-product-gallery__image img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}

/* mtp-header ---------------------------------------------------------------
   Skins Woodmart's header builder to the approved design. Structure stays in
   the builder (logo / menu / search / account / cart / burger) so cart count,
   AJAX search and login state keep working; this only restyles it.

   Values are taken literally from the comp's .hdr rules:
     background --white #fff        border-bottom 1px --rule #DFD8CC
     .hdr-in    max-width 1240px, padding 8px 24px (14px under 480)
     .wordmark  img height 22 / 25 / 29px at 0 / 420 / 560
     .nav-d     .78rem, .09em tracking, uppercase, --ink-soft #55534E, gap 24px
     burger + drawer below 900px, desktop nav from 900px
-------------------------------------------------------------------------- */
.whb-header{
	background-color:#fff;
	box-shadow:none;
}
.whb-header .whb-main-header{background-color:#fff}
/* the row carries Woodmart's .whb-without-border, which zeroes the width -
   the colour applied but the 1px did not, so the rule was invisible */
.whb-general-header{
	background-color:#fff;
	border-bottom:1px solid #DFD8CC!important;
}
.whb-clone .whb-main-header,
.whb-sticked .whb-main-header{background-color:#fff}

/* the comp centres the header contents in a 1240px column, it is not full-bleed */
/* box-sizing matters here: Woodmart sizes this content-box, so a bare
   max-width:1240px rendered 1192px wide - the logo started 24px too far in
   and the icons ended 14px short of the comp. */
.whb-general-header-inner{
	box-sizing:border-box;
	max-width:1240px;
	margin:0 auto;
	padding:0 14px;
	width:100%;
}
@media (min-width:480px){
	.whb-general-header-inner{padding:0 24px}
}

/* 8px padding either side of a 44px tap target = 60px, not Woodmart's 90px */
/* height comes from the header builder (row = 60px). This only stops the
   flex row keeping its old 90px, which left the logo and nav mis-centred. */
.whb-general-header .whb-flex-row{height:68px;min-height:68px}

/* logo is sized by HEIGHT in the comp; the builder sizes it by width, which
   made it 37px tall on desktop against the comp's 29px */
.whb-header .wd-logo img{
	height:22px!important;
	width:auto!important;
	max-width:none!important;
	object-fit:contain;
}
.whb-header .wd-logo{width:auto!important;max-width:none!important}
@media (min-width:420px){.whb-header .wd-logo img{height:25px!important}}
@media (min-width:560px){.whb-header .wd-logo img{height:29px!important}}

/* the comp's burger is icon-only at every width */
.whb-header .wd-header-mobile-nav .wd-tools-text{display:none}

/* ---- breakpoint -------------------------------------------------------
   Woodmart swaps desktop/mobile columns at 1025px; the comp swaps at 900px.
   Between 900 and 1024 the desktop columns are forced on and the mobile ones
   off, so tablets get the real nav rather than a burger. */
@media (min-width:900px) and (max-width:1024px){
	.whb-general-header-inner>.whb-visible-lg{display:flex!important}
	.whb-general-header-inner>.whb-hidden-lg{display:none!important}
}

/* ---- distribution -----------------------------------------------------
   Woodmart's row is "equal sides" (logo left / menu CENTRED / tools right).
   The comp puts the logo hard left with nav + icons grouped right. The
   !important is needed: the theme sets flex on the side columns from a more
   specific rule, and its stylesheets are cross-origin so the selector is not
   readable from the page to match it. */
@media (min-width:900px){
	.whb-header .whb-general-header-inner>.whb-column.whb-col-left{flex:0 0 auto!important}
	.whb-header .whb-general-header-inner>.whb-column.whb-col-center{flex:1 1 auto!important;justify-content:flex-end}
	.whb-header .whb-general-header-inner>.whb-column.whb-col-right{flex:0 0 auto!important;margin-left:16px}
}
/* mobile: burger left, wordmark immediately beside it, icons hard right.
   The side columns must size to their content or the free space gets split
   between them and pushes the wordmark away from the burger. */
@media (max-width:899px){
	.whb-header .whb-general-header-inner>.whb-column.whb-mobile-left{flex:0 0 auto!important;justify-content:flex-start}
	.whb-header .whb-general-header-inner>.whb-column.whb-mobile-center{flex:1 1 auto!important;justify-content:flex-start;padding-left:0}
	.whb-header .whb-general-header-inner>.whb-column.whb-mobile-right{flex:0 0 auto!important;justify-content:flex-end}
	/* tighten the burger's own trailing space so the mark sits close to it */
	.whb-header .whb-mobile-left .wd-tools-element>a{padding-right:0;margin-right:0}
	.whb-header .whb-mobile-center .wd-logo{margin-left:2px}
}

/* ---- nav --------------------------------------------------------------- */
.whb-header .wd-nav-main{gap:0}
.whb-header .wd-nav-main>li{margin:0}
.whb-header .wd-nav-main>li>a{
	font-size:12.5px;
	letter-spacing:.09em;
	text-transform:uppercase;
	font-weight:600;
	color:#55534E;
	padding:0 12px;
}
.whb-header .wd-nav-main>li>a:hover,
.whb-header .wd-nav-main>li.current-menu-item>a{color:#0A3D34}
/* Woodmart sweeps an underline in on hover; the comp has none */
.whb-header .wd-nav-main.wd-style-underline>li>a>.nav-link-text:after{display:none}

/* ---- utility icons ------------------------------------------------------ */
.whb-header .wd-tools-element>a{color:#1C1C1A}
.whb-header .wd-tools-element>a:hover{color:#0A3D34}
.whb-header .wd-cart-number{
	background-color:#0A3D34;
	color:#fff;
	font-weight:700;
}

/* mtp-drawer ---------------------------------------------------------------
   The mobile slide-out panel. Kept as its own block, separate from mtp-header,
   so replacing the header skin cannot take the drawer with it.

   From the comp:
     .drawer   white panel
     nav a     52px row, 1px --rule separator, .98rem, label left / hint right
     .dr-sec   .66rem, .17em tracking, uppercase, --ink-soft, not a link
     .dr-foot  quieter block at the bottom, 44px rows
-------------------------------------------------------------------------- */
.mobile-nav.wd-side-hidden,.wd-side-hidden-nav{background-color:#fff}
.wd-side-hidden .wd-heading{border-bottom:1px solid #DFD8CC}

.wd-nav-mobile>li>a{
	min-height:52px;
	padding:0 20px;
	border-bottom:1px solid #DFD8CC;
	font-size:15.5px;
	text-transform:none;
	letter-spacing:0;
	color:#1C1C1A;
	display:flex;
	align-items:center;
	gap:10px;
}

/* Woodmart wraps the label in .nav-link-text, so space-between on the <a> has
   nothing to push apart - the flex row has to be the wrapper itself */
.wd-nav-mobile>li>a>.nav-link-text{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	width:100%;
}

/* the count / price hint, folded in from each item's menu description */
.wd-nav-mobile .mtp-hint{
	color:#55534E;
	font-size:12.5px;
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	flex:none;
}

/* section headings ("Wall Art", "More") - rendered without an href by
   mtp_mobile_menu_hints(), so they are already out of the tab order */
.wd-nav-mobile>li.mtp-dr-sec>a{
	min-height:0;
	padding:22px 20px 6px;
	border-bottom:0;
	font-size:10.5px;
	letter-spacing:.17em;
	text-transform:uppercase;
	color:#55534E;
	pointer-events:none;
	cursor:default;
}
.wd-nav-mobile>li.mtp-dr-lead>a{font-weight:700}

/* the four secondary links sit as a quieter block at the bottom */
.wd-nav-mobile>li.mtp-dr-foot>a{
	border-bottom:0;
	min-height:44px;
	font-size:14.5px;
	color:#55534E;
}
.wd-nav-mobile>li.mtp-dr-foot:first-of-type>a{
	margin-top:14px;
	border-top:1px solid #DFD8CC;
	padding-top:14px;
}

/* mtp-nav-align: justify-content on .whb-col-center does nothing because
   Woodmart's .wd-header-nav wrapper stretches to fill the column, so the
   list inside stayed hard left next to the logo. The alignment has to be
   applied to the wrapper and the list themselves. */
@media (min-width:900px){
	/* the wrapper carries a 10px right padding, which held the last nav item
	   10px short of the column edge */
	.whb-header .whb-col-center .wd-header-nav{width:100%;display:flex;justify-content:flex-end;padding-right:0!important}
	.whb-header .whb-col-center .wd-nav-main{justify-content:flex-end;margin-left:auto}
}

/* the comp's cart is icon + count pill only, no running total */
.whb-header .wd-header-cart .wd-tools-text{display:none}

/* mtp-flush-home: Woodmart applies 40px padding-top to .wd-content-layout on
   EVERY page. On interior pages that spacing is correct and stays. On the
   homepage it renders as a white band between the header's hairline rule and
   the hero, which is meant to sit flush against it.

   Scoped to body.home rather than the mtp-home-active preview class so the
   CURRENT live homepage gets it too, not just the new template. */
body.home .wd-content-layout,
body.home .wd-content-area,
body.home .entry-content{padding-top:0!important;margin-top:0!important}
/* and the matching padding-bottom, which left a white strip above the footer */
body.home .wd-content-layout{padding-bottom:0!important}

/* mtp-tool-size: the comp's three utility icons are a uniform 44px tap target;
   Woodmart rendered 40/40/46. */
.whb-header .whb-col-right .wd-tools-element>a{width:44px;min-width:44px;height:44px}

/* mtp-header-width-fix -----------------------------------------------------
   Two things were still off against the comp, both from parents rather than
   from the header rules themselves:

   1. Woodmart wraps the header row in .container, capped at 1222px with 15px
      side padding. The inner row could therefore never reach the comp's 1240 -
      it resolved to 1192, putting the logo 24px too far in and the icons 14px
      short of the right edge. Releasing the container lets the inner row own
      the width, as .hdr-in does in the comp.

   2. .site-logo is a fixed-width box generated from the builder's logo width.
      At 112px it clipped the 140px wordmark, and object-fit:contain then
      letterboxed it down to ~92px - which is why the logo looked shrunken even
      with the height set correctly. Sizing from height alone fixes it.
-------------------------------------------------------------------------- */
.whb-header .container{max-width:none!important;padding-left:0!important;padding-right:0!important;width:100%}
.whb-header .site-logo{width:auto!important;max-width:none!important}

/* mtp-header-final ---------------------------------------------------------
   Last three deltas against the comp.

   LOGO: the <img> is a flex item with flex:0 1 auto, so it was being shrunk
   below its intrinsic width - width:auto still computed 92px instead of 140.
   Pinning width AND height per breakpoint (4.84:1 artwork) and disabling
   shrink removes the ambiguity entirely.

   ICONS: Woodmart hangs a -10px right margin off the tools column, which
   pushed them 10px past the comp's right edge. And the comp leaves 32px
   between the last nav item and the first icon, not 16px.
-------------------------------------------------------------------------- */
.whb-header .wd-logo img{flex:0 0 auto!important;height:36px!important;width:174px!important}
@media (min-width:400px){.whb-header .wd-logo img{height:50px!important;width:242px!important}}
@media (min-width:560px){.whb-header .wd-logo img{height:46px!important;width:223px!important}}
@media (min-width:900px){
	.whb-header .whb-general-header-inner>.whb-column.whb-col-right{margin-right:0!important;margin-left:32px!important}
}

/* mtp-nav-metrics: the comp spaces nav items with gap:24px and no link padding,
   so the last item's text sits flush against the column edge. Using padding
   instead left 12px of dead space and ended the nav 10px short. Link height
   is 44px in the comp, matching the icon tap targets. */
@media (min-width:900px){
	.whb-header .wd-nav-main{gap:24px}
	.whb-header .wd-nav-main>li>a{padding:0!important;height:44px;min-height:44px}
}

/* mtp-drawer-type ----------------------------------------------------------
   Measured against the comp's drawer. Woodmart forces font-weight 600 on
   every row, which made the whole panel read as one heavy block. In the
   comp only ONE row is bold - "All Wall Art", the section's lead link -
   and everything else, including the section labels and the footer links,
   is regular 400. That contrast is what gives the panel its hierarchy.

   Comp values: rows 15.68px/400, lead 700, hints 12.48px inheriting the
   row's weight, sections 10.56px/400, footer 14.4px/400, panel 330px.
-------------------------------------------------------------------------- */
.wd-nav-mobile>li>a{font-weight:400!important;font-size:15.7px}
.wd-nav-mobile>li.mtp-dr-lead>a{font-weight:700!important}
.wd-nav-mobile>li.mtp-dr-sec>a{font-weight:400!important;font-size:10.6px}
.wd-nav-mobile>li.mtp-dr-foot>a{font-weight:400!important;font-size:14.4px}
/* the hint follows its row: bold beside the bold lead, regular elsewhere */
.wd-nav-mobile .mtp-hint{font-weight:inherit!important;font-size:12.5px}
/* comp panel is 330px, capped so it never exceeds 86vw on small phones */
.mobile-nav.wd-side-hidden,
.wd-side-hidden-nav{width:min(330px,86vw)!important;background-color:#fff}
/* close bar: comp titles it in Spectral 500 at ~18px */
.wd-side-hidden .wd-heading,
.wd-side-hidden .wd-heading *{font-family:var(--wd-title-font);font-weight:500;font-size:18.4px}

/* mtp-drawer-sub: second-level rows (Apparel > Hoodies / Sweatshirts /
   T-Shirts). Woodmart renders them at #838383 with no indent and the hint
   left-aligned, so they read as a flat continuation of the top level.
   Indented, lightened and right-aligned to match the parent rows. */
.wd-nav-mobile .wd-sub-menu>li>a{
	display:flex;
	align-items:center;
	min-height:46px;
	padding:0 20px 0 36px;
	border-bottom:1px solid #DFD8CC;
	font-size:14.4px;
	font-weight:400!important;
	color:#55534E;
	text-transform:none;
	letter-spacing:0;
	/* sub rows have NO .nav-link-text wrapper - the hint is a direct child, so
	   the anchor itself has to be the space-between row */
	justify-content:space-between;
	gap:12px;
}
.wd-nav-mobile .wd-sub-menu>li>a>.nav-link-text{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
}
/* the opener sits beside the label, so the parent row's hint must not run
   underneath it */
.wd-nav-mobile>li.menu-item-has-children>a{padding-right:8px}

/* mtp-nav-dropdown ---------------------------------------------------------
   The visible panel is the WRAPPER .wd-dropdown-menu (white, 12px 20px
   padding, its own shadow, and a color-scheme-dark class that sets #767676
   text). The <ul> inside it is not the panel - styling that produced a
   second bordered box within the first.

   So: the wrapper becomes the panel, and everything inside it is flattened. */
.whb-header .wd-dropdown-menu{
	background-color:#fff!important;
	border:1px solid #DFD8CC!important;
	box-shadow:0 10px 28px rgba(28,28,26,.12)!important;
	padding:8px 0!important;
	min-width:212px;
	border-radius:2px;
}
.whb-header .wd-dropdown-menu>.container,
.whb-header .wd-dropdown-menu .wd-entry-content{padding:0!important;width:auto!important;max-width:none!important}
.whb-header .wd-nav-main .wd-sub-menu{
	background:transparent;
	border:0;
	box-shadow:none;
	padding:0;
	min-width:0;
}
.whb-header .wd-nav-main .wd-sub-menu li{margin:0}
.whb-header .wd-nav-main .wd-sub-menu li>a{
	display:block;
	padding:9px 20px!important;
	font-size:14px;
	font-weight:400;
	color:#55534E!important;
	text-transform:none;
	letter-spacing:0;
	height:auto;
	min-height:0;
}
.whb-header .wd-nav-main .wd-sub-menu li>a:hover{color:#0A3D34!important;background-color:#F7F3ED}

/* mtp-footer ---------------------------------------------------------------
   Rebuilt to match the comp's footer exactly. HTML block 11225 now holds plain
   semantic markup instead of WPBakery shortcodes, because the shortcodes'
   extra_menu output hardcoded its own greys and column widths and could not be
   made to match.

   Every value below is the comp's, converted from rem to px because this site's
   root font-size is 14px, not the 16px the comp was drawn at:
     footer   bg #EFE7DB, padding 48px 0 24px
     .wrap    max-width 1240, padding 0 24
     grid     1fr, and 1.6fr / 1fr / 1.1fr from 760px, gap 32px
     h3       11.8px, .14em, uppercase, 700, #1C1C1A
     links    44px rows, 14.4px, #55534E, green on hover
     brand p  14.7px, #55534E, max 34ch
     logo     30px tall, max 190px
     social   44x44, 1px #DFD8CC border, radius 2, green fill on hover
     base     1px top rule, 32px above / 16px below, 12.8px
-------------------------------------------------------------------------- */
.wd-footer{
	background-color:#EFE7DB !important;
	background-image:none !important;
	color:#55534E;
	padding:0 !important;
}
/* Woodmart wraps the HTML block in its own container padding */
.wd-footer .container,
.wd-footer .wpb_column,
.wd-footer .vc_row{padding:0 !important;margin:0 !important;width:100% !important;max-width:none !important}

.mtp-footer{padding:48px 0 24px}
.mtp-f-wrap{max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box}

.mtp-f-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:760px){
	.mtp-f-grid{grid-template-columns:1.6fr 1fr 1.1fr}
}

/* brand column */
.mtp-f-wm{display:inline-flex;align-items:center}
.mtp-f-wm img{width:auto;height:30px;max-width:190px;object-fit:contain}
.mtp-f-brand p{
	color:#55534E !important;
	font-size:14.7px;
	line-height:1.6;
	max-width:34ch;
	margin:13px 0 0;
}

/* link columns */
.mtp-f-col h3{
	color:#1C1C1A !important;
	font-family:var(--wd-text-font);
	font-size:11.8px;
	letter-spacing:.14em;
	text-transform:uppercase;
	font-weight:700;
	margin:0 0 8px;
	line-height:1.4;
}
.mtp-f-col a{
	display:flex;
	align-items:center;
	min-height:42px;
	font-size:14.4px;
	color:#55534E !important;
	text-decoration:none;
}
.mtp-f-col a:hover{color:#0A3D34 !important}

/* social row */
.mtp-f-social{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.mtp-f-social a{
	width:44px;height:44px;
	display:flex;align-items:center;justify-content:center;
	border:1px solid #DFD8CC;
	border-radius:2px;
	color:#55534E !important;
	transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.mtp-f-social a:hover{
	background-color:#0A3D34;
	border-color:#0A3D34;
	color:#fff !important;
}
.mtp-f-social svg{display:block}

/* base bar */
.mtp-f-base{
	border-top:1px solid #DFD8CC;
	margin-top:32px;
	padding-top:16px;
	display:flex;
	flex-wrap:wrap;
	gap:6px 24px;
	justify-content:space-between;
	font-size:12.8px;
	color:#55534E;
}

/* mtp-footer-tighten: six links at 44px made each column 264px tall - the
   comp's own spacing, but it reads as too much air on the real page.
   Desktop rows come down to 32px; mobile keeps a 42px tap target. */
@media (min-width:760px){
	.mtp-f-col a{min-height:32px}
	.mtp-footer{padding:40px 0 20px}
	.mtp-f-base{margin-top:24px;padding-top:14px}
	.mtp-f-social{margin-top:14px}
	.mtp-f-grid{gap:28px}
}

/* mtp-footer-autop: wpautop still wraps the run of inline <a> links in a <p>
   and leaves an empty one in the brand column. Harmless once the newlines
   are gone, but their default margins reintroduce spacing. */
.mtp-footer p{margin:0}
.mtp-f-brand p{margin:13px 0 0}
.mtp-footer p:empty{display:none}

/* mtp-mobile-tighten: the wordmark sat 46px in - 14px inner padding, a 10px
   pad inside the burger link, then a 12px gap. Pulling all three in so the
   mark sits right beside the burger. */
@media (max-width:899px){
	.whb-header .whb-general-header-inner{padding-left:14px!important}
	.whb-header .whb-mobile-left .wd-tools-element>a{padding-right:0!important}
	.whb-header .whb-mobile-center .wd-logo{margin-left:-4px!important}
	.whb-header .whb-mobile-center{padding-left:0!important}
}