/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* ===========================================================================
   Product gallery video support (left_thumb_sticky)
   Paired with woocommerce/single-product/product-image.php + js/single-product-video.js
   =========================================================================== */

/* Main video slide: match the layout of an image slide cell. */
.product div.images .flickity.product-slider .slide.is-video {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product div.images .flickity.product-slider .slide.is-video video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Mobile only: the main slider runs Flickity with adaptiveHeight, so a tall 9:16 video would
   stretch the gallery far past the ~2:3 photos when swiped to. Box the video slide to the photo
   aspect (1333x2000) and letterbox the video (object-fit: contain) so the slider height stays
   consistent with the photo slides. Desktop is a stacked scroll (no adaptiveHeight) — left as-is. */
@media only screen and (max-width: 999px) {
	.product div.images .flickity.product-slider .slide.is-video {
		aspect-ratio: 1333 / 2000;
	}

	.product div.images .flickity.product-slider .slide.is-video video {
		height: 100%;
		object-fit: cover;
	}
}

/* Video thumbnail: static first-frame <video> preview with a play icon overlay. */
.product .product-thumbs .thumb.is-video .thumb-inner {
	position: relative;
}

/* Square box via the padding-ratio hack: padding-top:100% gives an IN-FLOW height (= width), so
   Flickity's adaptiveHeight measures the cell correctly and it never collapses when active. The
   wrapper owns the fixed square; the video fills it absolutely, so the video's 9:16 intrinsic ratio
   can't leak into the thumbs row layout (that leak distorted the image thumbs). */
.product .product-thumbs .thumb.is-video .lm-video-thumb {
	box-sizing: content-box;     /* global is border-box, which would break the padding-ratio hack */
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
	overflow: hidden;
}

.product .product-thumbs .thumb.is-video .lm-video-thumb video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;           /* 9:16 video cropped into the square, no overflow into layout */
	border: 2px solid rgba(0, 0, 0, 0);
	padding: 2px;
	background-color: #fff;
	transition: border-color 0.1s ease;
}

/* Active thumb outline = pure black for BOTH image and video thumbs.
   Salient colours the active thumb border #999 (custom.php / product-single.css); we override it
   to #000 here using Salient's own selectors plus a `body` prefix, which raises specificity above
   those rules so this wins regardless of stylesheet order — no !important needed.
   Triggers: .is-nav-selected (Flickity nav, mobile) + a.active (desktop scroll-active anchor). */
body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-thumbs .flickity-slider .thumb.is-nav-selected img,
body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-thumbs .flickity-slider .thumb.is-nav-selected .lm-video-thumb video,
body.single-product:not(.mobile) .product[data-gallery-style="left_thumb_sticky"] .product-thumbs .thumb a.active img,
body.single-product:not(.mobile) .product[data-gallery-style="left_thumb_sticky"] .product-thumbs .thumb a.active .lm-video-thumb video {
	border-color: #000;
}

/* Play badge centered over the frame; never intercepts clicks (thumb stays navigable). */
.product .product-thumbs .thumb.is-video .lm-video-thumb__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	pointer-events: none;
}


/* ===========================================================================
   Catalog hover VIDEO (product_style "minimal")
   Mirrors Salient's img.hover-gallery-image overlay (woocommerce.css / custom.php) for <video>.
   =========================================================================== */
.woocommerce ul.products li.product .product-wrap video.hover-gallery-image {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	transition: opacity 0.3s cubic-bezier(.21, .6, .35, 1);
	transform: translateZ(0) scale(1.0, 1.0);
}

.woocommerce ul.products li.product:hover video.hover-gallery-image {
	opacity: 1;
}

/* Match the slight zoom Salient applies to image hovers in the minimal layout. */
.woocommerce ul.products li.product.minimal:hover .product-image-wrap.has-hover-image video.hover-gallery-image {
	transform: scale(1.04) translateZ(0);
}


/* ===========================================================================
   Product details tab: spec list spacing
   Paired with salient_child_description_tab_callback() in functions.php.
   =========================================================================== */
.woocommerce-Tabs-panel--description .lm-product-specs {
	margin-bottom: 1em;
}


/* ===========================================================================
   Single product summary: hide meta + vertical rhythm around tabs
   Meta row (Category) is hidden entirely — no SKU/tags in use.
   Rhythm uses an 8px base unit (0.5em); all vertical spacing is 1em / 1.5em / 2em
   so gaps stack cleanly on the 8px grid.
     - tab nav -> tab content: 1.5em (24px), applied via .wc-tab padding-top
     - tab content -> divider line: 1em (16px), padding-bottom on .woocommerce-tabs
     - divider line -> Add to Cart form: 2em (32px), margin-bottom on .woocommerce-tabs
   Tabs sit at priority 25, Add to Cart at 30 — see salient_child_reorder_single_product_summary().
   =========================================================================== */
.single-product div.product .product_meta {
	display: none;
}

/* Salient sets `.woocommerce #ajax-content-wrap .woocommerce-tabs>div:not(.tab-container)
   { padding: 15px 0 }` on panels — specificity (0,1,3,1). We include #ajax-content-wrap
   + div.product to reach (0,1,4,2) and win. `padding: 1.5em 0 0` gives the 24px gap
   under the tab nav and zeroes the 15px Salient bottom padding so the divider gap is
   controlled solely by .woocommerce-tabs padding-bottom below. */
.woocommerce #ajax-content-wrap div.product .woocommerce-tabs .wc-tab {
	padding: 1.5em 0 0;
}

.single-product div.product .woocommerce-tabs {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #e5e5e5;
}

/* Collapse the 40px + 30px stack (variations margin-bottom + button margin-top) and
   match the divider->Size gap (.woocommerce-tabs margin-bottom: 2em = 32px) so the
   column reads: divider ->(32px)-> Size/Tailoring ->(32px)-> Add to Cart. */
.single-product div.product form.cart .variations {
	margin-bottom: 0;
}

.single-product div.product form.cart button.single_add_to_cart_button {
	margin-top: 2em;
}



/* ===== LM Reviews Floor — panel relocated below the product card ==========
   Paired with salient_child_reviews_move_below_gallery() in functions.php.
   JS moves the already-rendered #tab-reviews into <section class="lm-reviews-floor">
   inserted as a sibling of .type-product.product (still inside .row .container).
   Full-width look is a pure-CSS breakout (100vw) — no DOM parents changed.
   =========================================================================== */

/* Hide the Reviews tab button in ul.tabs.wc-tabs — the panel is now on its own floor */
li.reviews_tab { display: none; }

/* Force visibility: WC single-product.js runs before our move and calls
   $('.wc-tab').hide(), which sets inline style="display:none" on #tab-reviews.
   !important beats the inline style. The extra descendant + child-combinator
   rules below raise specificity to (0,1,1,0) / (0,1,1,1) so they beat any
   later WC re-hide that sneaks in past the plain id+!important rule (seen
   on mobile — WC re-applies inline display:none after our footer move). */
#tab-reviews { display: block !important; }
.lm-reviews-floor #tab-reviews { display: block !important; }
.lm-reviews-floor > #tab-reviews.wc-tab { display: block !important; }

/* Full-width "floor" wrapper — pure-margin breakout.
   Previous technique combined position:relative + left:50% + width:100vw +
   margin-left/right:-50vw. That worked but reserved 100vw of layout space
   in the flow (element visually shifted, box still 100vw wide), which in
   some flex/grid parents caused sibling elements (notably the footer) to
   re-measure and appear to "auto-scale".
   New technique: margin:0 calc(-50vw + 50%) on left/right. No position,
   no explicit width. Element expands to viewport width via block-level
   auto-width inside negative margins; parent flow sees a box whose
   effective outside-edges match the viewport — no phantom 100vw box. */
.lm-reviews-floor {
    margin: 4em calc(-50vw + 50%) 0;
    padding: 4em 5%;
    background-color: #fff;
    overflow-x: clip;
    scroll-margin-top: 120px;
}

/* Inner content: comfortable reading column like Piondress */
.lm-reviews-floor #tab-reviews {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 768px) {
    .lm-reviews-floor {
        /* Cancel horizontal breakout on mobile — desktop's calc(-50vw + 50%)
           on both sides would slightly overflow the container by any inner
           padding of parents, and horizontal document scroll on mobile fights
           the Flickity gallery swipe. Zeroing the horizontal margins keeps
           the block within .row width — background stops at container edges
           on mobile, an acceptable trade for scroll integrity. */
        margin: 2em 0 0;
        padding: 2em 5%;
    }
}
/* ===== LM Reviews — нативный Salient-блок под галереей, вид Piondress ===== */
.lm-reviews-floor{ margin-top:56px; }
.lm-reviews-floor #tab-reviews{ max-width:1200px; margin:0 auto; }
.lm-reviews-floor .star-rating{ font-family:"star"!important; }

.lm-reviews-floor #comments{
  display:grid; grid-template-columns:minmax(200px,280px) 1fr; column-gap:56px; align-items:start;
}
.lm-reviews-floor .woocommerce-Reviews-title{
  grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start;
  gap:18px; margin:0; padding:0; border:0; font-size:inherit; font-weight:400;
}
.lm-reviews-floor ol.commentlist{
  grid-column:2; grid-row:1; margin:0; padding:0 0 0 56px; list-style:none; border-left:1px solid #e7e4dd;
}
.lm-reviews-floor .nectar-average-count-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.lm-reviews-floor .nectar-average-count{ font-size:64px; line-height:1; font-weight:400; }
.lm-reviews-floor .nectar-average-count-wrap .star-rating{ margin:0; }
.lm-reviews-floor .total-num{ font-size:14px; opacity:.75; }
.lm-reviews-floor .nectar-product-reviews-trigger{
  background:var(--nectar-accent-color,#000)!important; color:#fff!important;
  border-radius:40px!important; padding:14px 34px!important; margin-top:6px;
  font-size:13px!important; letter-spacing:.08em; text-transform:uppercase;
}
.lm-reviews-floor li.review .comment_container{ display:flex; gap:18px; padding:0 0 36px; border:0; }
.lm-reviews-floor img.avatar-80{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; }
.lm-reviews-floor .comment-text{ flex:1; display:flex; flex-direction:column; }
.lm-reviews-floor .comment-text .star-rating{ order:-1; margin:0 0 8px; }
.lm-reviews-floor .comment-text .meta{ order:0; margin:0 0 8px; }
.lm-reviews-floor .comment-text .description{ order:1; }
.lm-reviews-floor .comment-text .cr-comment-images{ order:2; }
.lm-reviews-floor .woocommerce-review__author{ font-weight:600; }
.lm-reviews-floor .woocommerce-review__verified{ font-style:normal; font-size:12px; opacity:.7; margin-left:6px; }
.lm-reviews-floor .woocommerce-review__published-date{ opacity:.6; }
.lm-reviews-floor .cr-comment-images{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; overflow:hidden; }
.lm-reviews-floor .cr-comment-images .iv-comment-image{ margin:0; }
.lm-reviews-floor .cr-comment-images img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; display:block; }
.lm-reviews-floor .cr-comment-images [style*="clear"]{ display:none; }
.lm-reviews-floor .cr-summaryBox-wrap{ display:none!important; }

@media (max-width:768px){
  .lm-reviews-floor{ margin-top:36px; }
  .lm-reviews-floor #tab-reviews{ max-width:100%; }
  .lm-reviews-floor #comments{ display:block; }
  .lm-reviews-floor .woocommerce-Reviews-title{ margin-bottom:28px; }
  .lm-reviews-floor .nectar-average-count{ font-size:48px; }
  .lm-reviews-floor ol.commentlist{ padding-left:0; border-left:0; }
  .lm-reviews-floor .cr-comment-images{ grid-template-columns:repeat(2,1fr); }
}


/* ===== LM Reviews Floor — Piondress skin for CusRev [cusrev_all_reviews] ==
   Cosmetic layer inside .lm-reviews-floor targeting the .cr-* markup that
   [cusrev_all_reviews] produces. Breakout (100vw) + mobile cancel are in
   .lm-reviews-floor above (lines ~203-241). Photo grid inside cards is
   also already handled by the earlier .cr-comment-images block (281-284).
   This adds: skeleton grid, summary layout, Add-a-review pill, clutter
   hide, review card typography, mobile single-column stack.
   =========================================================================== */

/* Two-column skeleton — summary left (~280px), review list right (1fr) */
.lm-reviews-floor .cr-all-reviews-shortcode {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    column-gap: 56px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

/* Grid placement of top-level children */
.lm-reviews-floor .cr-review-form-wrap                { grid-column: 1 / -1; }
.lm-reviews-floor .cr-summaryBox-wrap                 { grid-column: 1; grid-row: 1; }
.lm-reviews-floor .cr-count-row,
.lm-reviews-floor .cr-all-reviews-shortcode > ol.commentlist,
.lm-reviews-floor .cr-pagination-review-spinner,
.lm-reviews-floor .cr-show-more-review-spinner,
.lm-reviews-floor .cr-all-reviews-pagination,
.lm-reviews-floor .cr-search-no-reviews               { grid-column: 2; }

/* Summary column — vertical stack. Overrides the earlier
   .cr-summaryBox-wrap { display:none !important } from the pre-CusRev
   draft (line ~285) with a later !important — cascade order wins. */
.lm-reviews-floor .cr-summaryBox-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 0;
    background: none;
    border: 0;
}
.lm-reviews-floor .cr-overall-rating-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.lm-reviews-floor .cr-average-rating span { font-size: 64px; line-height: 1; font-weight: 400; }
.lm-reviews-floor .cr-average-rating-stars { margin: 0; }
.lm-reviews-floor .cr-total-rating-count   { font-size: 14px; opacity: .75; }

/* Add-a-review pill — black, uppercase, spaced */
.lm-reviews-floor button.cr-all-reviews-add-review {
    background: var(--nectar-accent-color, #000);
    color: #fff;
    border: 0;
    border-radius: 40px;
    padding: 14px 34px;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 6px;
}
.lm-reviews-floor button.cr-all-reviews-add-review:hover { opacity: .85; }

/* Hide clutter that Piondress-style layout doesn't use */
.lm-reviews-floor .cr-histogramTable,
.lm-reviews-floor .ivole-summaryBox,
.lm-reviews-floor .cr-summary-separator,
.lm-reviews-floor .cr-summary-separator-side,
.lm-reviews-floor .cr-summary-separator-int,
.lm-reviews-floor .cr-input-search,
.lm-reviews-floor .cr-button-search,
.lm-reviews-floor .cr-ajax-reviews-cus-images-div,
.lm-reviews-floor .cr-product-name-picture {
    display: none !important;
}

/* Right column — commentlist with vertical separator */
.lm-reviews-floor ol.commentlist {
    margin: 0;
    padding: 0 0 0 56px;
    list-style: none;
    border-left: 1px solid #e7e4dd;
}
.lm-reviews-floor ol.commentlist li.review {
    margin: 0;
    padding: 0 0 36px;
    list-style: none;
}

/* Avatar — CusRev renders <img class="avatar-60 photo cr-std-avatar"> */
.lm-reviews-floor img.cr-std-avatar,
.lm-reviews-floor img.avatar-60 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Card content column: order stars → meta → text → photos (Piondress) */
.lm-reviews-floor .cr-comment-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lm-reviews-floor .cr-comment-text .cr-rating-product-name { order: -1; margin: 0 0 4px; }
.lm-reviews-floor .cr-comment-text .meta                   { order:  0; margin: 0; }
.lm-reviews-floor .cr-comment-text .description            { order:  1; }
.lm-reviews-floor .cr-comment-text .cr-comment-images      { order:  2; }

/* Meta line typography */
.lm-reviews-floor .woocommerce-review__author         { font-weight: 600; }
.lm-reviews-floor .woocommerce-review__verified       { font-style: normal; font-size: 12px; opacity: .7; margin-left: 6px; }
.lm-reviews-floor .woocommerce-review__published-date { font-size: 13px; opacity: .6; }

/* Count / sort row */
.lm-reviews-floor .cr-count-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 16px;
    padding-left: 56px;
    font-size: 13px;
    opacity: .8;
}

/* Mobile: single-column stack (photo grid 2-col already handled above) */
@media (max-width: 768px) {
    .lm-reviews-floor .cr-all-reviews-shortcode { display: block; max-width: 100%; }
    .lm-reviews-floor .cr-summaryBox-wrap { margin-bottom: 24px; }
    .lm-reviews-floor .cr-average-rating span { font-size: 48px; }
    .lm-reviews-floor ol.commentlist { padding-left: 0; border-left: 0; }
    .lm-reviews-floor .cr-count-row  { padding-left: 0; }
}


/* ===== LM Reviews Floor — Salient / Lily Marks polish over Piondress skin ==
   Layered on top of the Piondress skeleton (above). Enforces:
     - a content max-width guardrail inside the 100vw breakout
     - Salient body font inside the block (beats CusRev's own font stacks)
     - Salient-accent palette on submit/continue/cancel (no CusRev greens)
     - additional clutter hide: count row + sort select (search bar was
       already hidden by the earlier skin — reaffirmed here for safety)
     - photo grid stays inside its cell, never overflows horizontally
   Mobile behaviour: content width defers to the earlier @media(≤768) block
   above (max-width:100%, single column). Everything below is unconditional.
   =========================================================================== */

/* Content column: cap at 1200px, center inside the full-width bg */
.lm-reviews-floor .cr-all-reviews-shortcode {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Site font everywhere — CusRev hard-codes Open Sans / Helvetica on
   review-card / reviewer-name / button chains (3-5 classes deep). The
   pair below matches wrapper + wildcard to win on any of them without
   listing individual plugin selectors. */
.lm-reviews-floor .cr-all-reviews-shortcode,
.lm-reviews-floor .cr-all-reviews-shortcode * {
    font-family: inherit !important;
}

/* Palette: submit + continue = solid black pill (matches Add-a-review) */
.lm-reviews-floor .cr-review-form-submit,
.lm-reviews-floor .cr-review-form-continue {
    background: var(--nectar-accent-color, #000) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 14px 34px !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
.lm-reviews-floor .cr-review-form-submit:hover,
.lm-reviews-floor .cr-review-form-continue:hover {
    opacity: .85 !important;
}

/* Cancel = outlined pill (Salient minimal button family) */
.lm-reviews-floor .cr-review-form-cancel {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 40px !important;
    padding: 14px 34px !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
.lm-reviews-floor .cr-review-form-cancel:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Hide clutter: count row + sort select. Search input/button were already
   hidden by the earlier .cr-input-search / .cr-button-search rule; kept in
   this list too so if the earlier block ever gets edited out, the search
   stays hidden. */
.lm-reviews-floor .cr-count-row,
.lm-reviews-floor .cr-count-row-count,
.lm-reviews-floor .cr-ajax-reviews-sort-div,
.lm-reviews-floor .cr-ajax-reviews-sort,
.lm-reviews-floor .cr-input-search,
.lm-reviews-floor .cr-button-search {
    display: none !important;
}

/* Photo grid inside cards: containment guardrail. The grid itself and
   img sizing are already declared by the earlier .cr-comment-images block
   (repeat(3,1fr) desktop / repeat(2,1fr) mobile, aspect-ratio, object-fit);
   this just makes sure the grid never overflows its cell horizontally
   when CusRev appends unexpectedly wide media. */
.lm-reviews-floor .cr-comment-images {
    max-width: 100%;
    overflow: hidden;
}
.lm-reviews-floor .cr-comment-images img {
    max-width: 100%;
    height: auto;
}


/* ===== LM Reviews Floor — specificity boost over CusRev plugin CSS ==========
   Earlier .lm-reviews-floor button.cr-all-reviews-add-review had specificity
   (0,2,1) with no !important and lost to the plugin's own (0,4,0) selector
   .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap
   .cr-all-reviews-add-review — the button stayed green. This block
   re-declares the button paint at (0,5,0) with !important on every property
   so it wins on both specificity and importance. Same treatment for the
   form Submit button: earlier polish set bg/color/etc. with !important but
   left plugin's height:40px, padding:0 10px and width:50% intact, squishing
   the pill; height:auto + padding:14 34 restore the shape.
   Search / count / sort hidden globally (no .lm-reviews-floor prefix) so a
   [cusrev_all_reviews] shortcode used anywhere else on the site also loses
   those controls — explicit request from the design brief.
   =========================================================================== */

.lm-reviews-floor .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review {
    background: var(--nectar-accent-color, #000) !important;
    color: #fff !important;
    border-radius: 40px !important;
    padding: 14px 34px !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
.lm-reviews-floor .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review:hover {
    background: #000 !important;
    opacity: .85 !important;
}

.lm-reviews-floor .cr-all-reviews-shortcode .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit {
    padding: 14px 34px !important;
    height: auto !important;
}

/* Brute-force hide — no wrapper prefix, kills these controls anywhere the
   plugin ships them (including possible future embeds of the shortcode). */
.cr-input-search,
.cr-button-search,
.cr-count-row,
.cr-ajax-reviews-sort-div {
    display: none !important;
}

/* Real search wrapper — earlier .cr-input-search / .cr-button-search rules
   only hid the Search button; the icon SVG, input (class="cr-input-text",
   NOT .cr-input-search) and clear-icon all live inside .cr-ajax-search and
   stayed visible. Hiding the container kills the whole row in one shot. */
.cr-ajax-search {
    display: none !important;
}


/* ===== LM Reviews Floor — summary bg + black stars ==========================
   Two fixes on top of the polish above:
   1. #reviews .cr-summaryBox-wrap has background-color:#F9F9F9 from the
      plugin (frontend.css:253-256, specificity (1,1,0) — id beats our
      earlier .lm-reviews-floor .cr-summaryBox-wrap (0,2,0) without
      !important). Nuking it transparent with !important guarantees a win.
   2. Stars: plugin colours them #FFBC00 (yellow) via .cr-rating-icon /
      .cr-rating-icon-bg in the summary + card, and via hardcoded SVG
      fill="#F4DB6B/#F5CD5B" in the form's .cr-rating-act. We swap to black
      filled + light-grey outline. Form's .cr-rating-deact was already
      light grey (#DFE4E7) — pinned explicitly to #e5e5e5 for consistency.
   =========================================================================== */

/* 1. Summary panel background — force transparent */
.lm-reviews-floor .cr-summaryBox-wrap {
    background: transparent !important;
}

/* 2a. Summary + review-card stars (SVG uses currentColor + explicit
       fill/stroke set by plugin). Selector (0,4,0) beats plugin (0,3,0),
       plus !important. */
.lm-reviews-floor .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon {
    fill: #000 !important;
}
.lm-reviews-floor .crstar-rating-svg .cr-rating-icon-base .cr-rating-icon-bg {
    stroke: #e5e5e5 !important;
    fill: none !important;
}

/* 2b. Form star picker (hardcoded fill attrs on <path> — CSS beats attrs
       at any specificity; !important as belt-and-suspenders). */
.lm-reviews-floor .cr-review-form-rating-inner .cr-rating-act,
.lm-reviews-floor .cr-review-form-rating-inner .cr-rating-act path {
    fill: #000 !important;
}
.lm-reviews-floor .cr-review-form-rating-inner .cr-rating-deact,
.lm-reviews-floor .cr-review-form-rating-inner .cr-rating-deact path {
    fill: #e5e5e5 !important;
}


/* Content column width — Piondress uses ~1380 for a wider reading grid.
   Overrides the two earlier max-width:1200 declarations on
   .cr-all-reviews-shortcode (line ~313 grid rule + line ~451 polish
   guardrail) via cascade order — same specificity (0,2,0), later wins. */
.lm-reviews-floor .cr-all-reviews-shortcode {
    max-width: 1380px;
}


/* ===== LM Pin button — round Pinterest Save icon =========================
   Paired with the wp_footer priority-500 injector in functions.php. The <a>
   is a DOM child of either:
     - .woocommerce-product-gallery__image (single-product slide) — inherits
       Flickity translate3d, no coordinate drift on swipe
     - .product-image-wrap (catalog card) — static grid, no transform
   Video gallery slides are skipped by the injector (:not(.is-video)).
   Icon-only round pill (38×38 desktop / 34×34 touch), no text label.
   =========================================================================== */

/* Positioning context — force position:relative on both anchors so the
   absolute-positioned Pin button lands relative to the image/card, not
   some distant ancestor. Salient may leave these static by default. */
.single-product-main-image .woocommerce-product-gallery__image,
.woocommerce ul.products li.product .product-image-wrap {
    position: relative;
}

.lm-pin-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    /* z-index 20 sits above Salient's .hover-gallery-image (z-index:10 —
       parent nectar-product-style-minimal.min.css + child style.css:115),
       which is the second-photo / hover-video that fades in on catalog
       card hover. At the earlier z-index:5 the hover overlay covered our
       Pin and it looked like the button disappeared on hover. */
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Locked size — !important + flex:none prevents Salient / responsive
       rules from shrinking the button on window resize or touch breakpoints. */
    width: 38px !important;
    height: 38px !important;
    flex: none;
    text-decoration: none;
    /* No background / border-radius / color — the red circle and white P are
       painted inside the SVG (<circle fill="white"> + <path fill="#E60023">
       in wp-content/themes/salient-child/images/pinterest.svg). The button
       is a transparent 38×38 wrapper whose only job is to position the SVG,
       host the hover-reveal opacity transition, and catch the pointer. */
    opacity: 0;
    /* No translateY slide-in — plain opacity fade only. The earlier 4px
       vertical animation was perceived as the button "flying away" on
       first hover; on catalog cards it stacked with lazy-load reflows
       and looked like a jump. Opacity alone is calm and predictable. */
    transition: opacity 0.18s ease;
    pointer-events: none;                        /* let slide/card receive hover */
}

/* Cursor override — Salient easyZoom sets cursor: crosshair on the
   .easyzoom container with pointer-events control, and that cursor bleeds
   through into descendants: the button, its SVG child, the SVG's <circle>
   and <path>. Just !important on .lm-pin-btn only covers the wrapper; when
   the mouse actually lands on the inline SVG shapes the crosshair leaks
   back. Combined selector (button + every descendant) with !important
   catches every element the pointer can hover — pin always shows pointer. */
.lm-pin-btn,
.lm-pin-btn * {
    cursor: pointer !important;
}

.lm-pin-btn__icon {
    /* Locked at 38×38 — !important + flex-shrink:0 prevent the SVG from
       being resized by parent flex constraints or responsive @media rules. */
    width: 38px !important;
    height: 38px !important;
    display: block;
    flex-shrink: 0;
}

/* Reveal on hover of the slide OR the catalog card image-wrap */
.single-product-main-image .woocommerce-product-gallery__image:hover .lm-pin-btn,
.woocommerce ul.products li.product .product-image-wrap:hover .lm-pin-btn,
.lm-pin-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Smooth fill transition for the red disc — targeted at the SVG <path>
   (labelled .lm-pin-circle in functions.php SVG_ICON). See PHP comment
   there for why the class is on the path, not on the SVG <circle>. */
.lm-pin-circle {
    transition: fill 0.18s ease;
}

/* Darken the red disc only when the mouse is over the button itself
   (or the button is keyboard-focused). Previous parent-hover darkening
   (.woocommerce-product-gallery__image:hover / .product-image-wrap:hover)
   fired the whole time the visitor moved a mouse anywhere on the photo,
   which read as "always dark" once the button was revealed. Scoping to
   .lm-pin-btn:hover lets the pin appear in brand red on card hover and
   only darken when the visitor actually points at the pin. White P stays
   white — it's the <circle> under the path's P-shaped cut-out. */
.lm-pin-btn:hover .lm-pin-circle,
.lm-pin-btn:focus-visible .lm-pin-circle {
    fill: #AD081B;
}

/* Touch devices — hover doesn't exist; keep button always visible and
   tucked closer to the corner. Size deliberately stays 38×38 to match
   desktop — the button must look identical everywhere per design. */
@media (hover: none) {
    .lm-pin-btn {
        opacity: 1;
        pointer-events: auto;
        top: 8px;
        left: 8px;
    }
}