/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* ==========================================================================
   710 PIPES — CUSTOM STYLES
   --------------------------------------------------------------------------
   Conventions:
   - All custom CSS lives in this file, grouped under section headers that
     say what it applies to: a page/template, a plugin override, or a
     theme (Impreza/WooCommerce) override.
   - Colors, fonts and radii come from Impreza's CSS custom properties
     (var(--color-content-*), var(--font-family), var(--site-border-radius),
     var(--hN-*)) so changes made in Theme Options flow through automatically.
   - Every rule below is scoped to .single-product. This file loads on every
     page, and the extra class also gives these rules priority over the
     product template's inline <style> blocks and over the Addify plugin's
     inline CSS (which is printed late in <head>). !important is used only
     where the plugin already uses it.

   Sections
     1. PAGE   — Single Product (Content Template
                 "710 Product Page Template – Claude Code", id 66843)
        1a. Trust-badge strip               .wpb-custom-feature-strip
        1b. Sticky mobile Add-to-Cart bar   .sticky-atc-bar
        1c. Local-inventory placeholder     #local-inventory-placeholder
     2. PLUGIN — Addify Multi Inventory Management
                 (store selector injected inside form.cart)
     3. THEME  — Impreza / WooCommerce bits inside the Add-to-Cart element
   ========================================================================== */
/******Gloabal/Impreza Overrides*****/

/*Borders*/
.gd-border-it {
  border: 1px solid rgba(137, 137, 137, .16);
  box-shadow: 0 1px 4px #8989891c;
}

/*.w-grid-list .w-grid-item.type_term*/
.layout_shop_modern .w-grid-item-h, .layout_blog_1 .w-grid-item-h {
  border: 1px solid rgba(137, 137, 137, .16);
  box-shadow: 0 1px 4px #8989891c;
  transition: height .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}

.no-touch .layout_shop_modern .w-grid-item-h:hover, .no-touch .layout_blog_1 .w-grid-item-h:hover  {
  border: 1px solid rgba(137, 137, 137, .16) !important;
  box-shadow: 0 1px 4px #8989891c !important;
}

.l-footer {
  border-top: 1px solid rgba(137, 137, 137, .16) !important;
}



/*****Woo*****/

/* --------------------------------------------------------------------------
   1a. PAGE — Single Product: trust-badge strip
   Matches the home-page strip: 40px icons, uppercase brand-orange label,
   faded sub-line. auto-fit gives 4-across in the desktop half column and
   2-across in narrower columns; forced 2x2 at Impreza's mobiles breakpoint.
   -------------------------------------------------------------------------- */
.single-product .wpb-custom-feature-strip {
  padding: 1rem 0 0;
  font-family: var(--font-family);
  color: var(--color-content-text);
}
.single-product .wpb-custom-feature-strip .wpb-feature-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem 0.75rem;
  max-width: 100%;
  margin: 0;
}
.single-product .wpb-custom-feature-strip .wpb-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}
.single-product .wpb-custom-feature-strip .wpb-feature-item img {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 0.5rem;
  padding: 0;
}
.single-product .wpb-custom-feature-strip .wpb-feature-item h4 {
  margin: 0 0 0.25rem;
  padding: 0;
  font-family: var(--h4-font-family, var(--font-family));
  font-size: 0.8rem;
  font-weight: var(--h4-font-weight, 700);
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-content-primary);
}
.single-product .wpb-custom-feature-strip .wpb-feature-item p {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-content-faded);
}
@media (max-width: 600px) { /* Impreza "mobiles" breakpoint */
  .single-product .wpb-custom-feature-strip .wpb-feature-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   1b. PAGE — Single Product: sticky mobile Add-to-Cart bar
   The bar's markup and JS live in the template (us_html); only its look is
   here. The button mirrors Impreza Button Style 1 (orange bg, dark label,
   teal hover). Hidden from Impreza's laptops/desktop breakpoint up.
   -------------------------------------------------------------------------- */
.single-product .sticky-atc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background-color: var(--color-content-bg);
  border-top: 1px solid var(--color-content-border);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.single-product .sticky-atc-bar.is-visible {
  transform: translateY(0);
}
.single-product .sticky-atc-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.single-product .sticky-atc-title {
  max-width: 60vw;
  font-size: 0.9rem;
  font-weight: var(--bold-font-weight, 700);
  color: var(--color-content-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single-product .sticky-atc-price {
  font-size: 0.9rem;
  font-weight: var(--bold-font-weight, 700);
  color: var(--color-content-primary);
}
.single-product .sticky-atc-btn {
  flex: 0 0 auto;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--site-border-radius);
  background-color: var(--color-content-primary);
  color: var(--color-content-bg);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.single-product .sticky-atc-btn:hover,
.single-product .sticky-atc-btn:focus-visible {
  background-color: var(--color-content-secondary);
  color: var(--color-content-heading);
}
@media (min-width: 1025px) { /* above Impreza's 1024px tablets breakpoint */
  .single-product .sticky-atc-bar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1c. PAGE — Single Product: local-inventory placeholder card
   The element is currently hidden in the template (conditions_operator=
   "never"); these rules are dormant until the local-inventory PHP bridge
   switches it on. Contract with that bridge: keep the
   #local-inventory-placeholder wrapper and .stock-dot--{green|yellow|red}.
   -------------------------------------------------------------------------- */
/*NOT IN USE

.single-product {

  --stock-ok:  #3ddc84;
  --stock-low: #f5c518;
  --stock-out: #ff5c5c;
  --atc-warn:  #ff6b6b; 
}

.single-product #local-inventory-placeholder {
  margin: 0.75rem 0;
  padding: 0.625rem 1rem;
  border: 1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
  background-color: var(--color-content-bg-alt);
}
.single-product #local-inventory-placeholder summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: var(--bold-font-weight, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-content-primary);
}
.single-product #local-inventory-placeholder summary::-webkit-details-marker {
  display: none;
}
.single-product #local-inventory-placeholder summary::after {
  content: "\25BE";
  margin-left: 0.5rem;
  color: var(--color-content-faded);
  transition: transform 0.2s ease;
}
.single-product #local-inventory-placeholder[open] summary::after {
  transform: rotate(180deg);
}
.single-product #local-inventory-placeholder .local-stock-list {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
}
.single-product #local-inventory-placeholder .local-stock-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.95rem;
  color: var(--color-content-text);
}
.single-product .stock-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.single-product .stock-dot--green  { background-color: var(--stock-ok); }
.single-product .stock-dot--yellow { background-color: var(--stock-low); }
.single-product .stock-dot--red    { background-color: var(--stock-out); }
*/

/* --------------------------------------------------------------------------
   2. PLUGIN — Addify Multi Inventory Management: store selector
   Injected inside form.cart on product pages. The plugin prints its own
   CSS inline late in <head> (white box, red 20px select text, black
   chevron, black table text) with !important on the select's color and
   font-size, the table cell background and the message color — those four
   need !important here too. Appearance only; plugin behavior is untouched.
   -------------------------------------------------------------------------- */
/* Impreza renders form.cart as a wrapping flex row (align-items:center), so
   on wide screens the store box sits inline beside the Add-to-Cart button
   and wraps above it on narrow screens. Spacing comes from the flex gap, not
   margins (a margin would lift the box off the button's centreline). Impreza
   sets that gap itself — 0.6em normally, 0 for "sold individually" products —
   with (0,4,0) selectors, so this one is written at (0,4,1) to win. */
   
.single-product .w-post-elm.add_to_cart > form.cart {
  gap: 0.75rem;
}
.single-product .af_mli_show_i {
  margin: 0;
}
@media (max-width: 600px) { /* stacked layout: let the store box span the row */
  .single-product .af_mli_show_i {
    width: 100%;
  }
}
.single-product .af_mli_show_i .af_mli_front_stock_div {
  padding: 0.75rem;
  border: 1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
  background-color: var(--color-content-bg-alt);
}
.single-product .af_mli_show_i .af_mli_front_inven_div {
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
/* plugin's FontAwesome chevron (\f107) — recolor and tuck it in */
.single-product .af_mli_show_i .af_mli_front_inven_div::before {
  right: 1em;
  color: var(--color-content-primary);
}
/* mirrors Impreza's own styled <select> on this page */
.single-product .af_mli_show_i .af_mli_inven_selector {
  width: 100%;
  height: auto;
  padding: 9px 2.25em 9px 12px;
  background: var(--color-content-bg);
  border: 1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
  color: var(--color-content-primary) !important; /* plugin: #ff0000 !important */
  font-family: var(--font-family);
  font-size: 1rem !important;                     /* plugin: 20px !important */
  line-height: 1.4;
}
.single-product .af_mli_show_i .af_mli_inven_selector option {
  background-color: var(--color-content-bg);
  color: var(--color-content-text);
}
/* select2 is not applied to this select today, but select2.css is
   enqueued on the page — cover it so a plugin setting change can't
   bring the white box back */
.single-product .af_mli_show_i .select2-container--default .select2-selection--single {
  height: auto;
  padding: 6px 4px;
  background-color: var(--color-content-bg);
  border: 1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
}
.single-product .af_mli_show_i .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-content-primary);
  line-height: 1.4;
}

/* Location / Price summary table */
.single-product .af_main_total_div {
  width: 100%;
  margin-bottom: 1.25rem;
}
.single-product .af_main_total_div table th {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-content-border);
  color: var(--color-content-faded);
  font-size: 0.75rem;
  font-weight: var(--bold-font-weight, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.single-product .af_main_total_div table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-content-border);
  background-color: transparent !important;      /* plugin: #fdfdfd00 !important */
  color: var(--color-content-text);
  font-size: 0.95rem;
}
.single-product .af_main_total_div table tbody tr:last-child td {
  border-bottom: 0 !important;                   /* plugin uses !important here */
}
/* plugin ships color:Red / color:#ff0000 !important on these */
.single-product .out_of_stock_msg_p,
.single-product .time_msg_p,
.single-product .date_msg_p,
.single-product .af_inven_heading {
  color: var(--atc-warn) !important;
  font-style: normal;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   3. THEME — Impreza / WooCommerce bits inside the Add-to-Cart element
   -------------------------------------------------------------------------- */
/* WooCommerce's default in-stock green (#44cc00) is off-palette; the orange
   button already carries the emphasis, so the stock line reads as body text. */
.single-product .w-post-elm.add_to_cart p.stock {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--color-content-text);
}
.single-product .w-post-elm.add_to_cart p.stock.out-of-stock {
  color: var(--atc-warn);
}
/* Sale badge: colors, padding and radius come from the element's own
   design settings in the template; `display` is not a builder option,
   so the pill shape is completed here. */
.single-product .w-post-elm.product_field.sale_badge {
  display: inline-block;
}
/* Details tabs: body copy in site gray, labels in heading white. */
.single-product .w-tabs-section-content,
.single-product .w-tabs-section-content p,
.single-product .w-tabs-section-content li {
  color: var(--color-content-text);
}
.single-product .w-tabs-section-content strong {
  color: var(--color-content-heading);
}
.single-product .w-post-elm.product_field.attributes th {
  color: var(--color-content-faded);
  font-weight: var(--bold-font-weight, 700);
}

/*Main Product Template Classes*/
/*used to help size Local Pickup button*/
.gd-product-data-col {
  container-type: inline-size;
}

/********** Addify MIM **********/
/* Location Selector Popup */
#af-mi-location-popup {
  background-color: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#af-mi-location-popup .af-mi-popup-content {
  width: 520px;
  max-width: calc(100vw - 40px);
  height: auto;
  background-color: #161616;
  color: #fff;
}

#af-mi-location-popup .af-mi-popup-content img, #af-mi-location-popup .af-mi-popup-content p {
  display: none;
}

#af-mi-location-popup .af-mi-popup-content .af-mi-content-wrap-location {
  width: 100%;
}

#af-mi-location-popup .af-mi-popup-content .af-mi-content-wrap-location h1 {
  color: #fff !important;
  margin-bottom: 14px;
}

#af-mi-location-popup .af-mi-popup-close {
  top: 12px;
  right: 14px;
  color: rgba(255, 255, 255, .65);
  font-size: 28px;
  line-height: 1;
  background-color: #ad0000;
}

#af-mi-location-popup .af-mi-popup-close:hover {
  color: #fff;
}

@media screen and (max-width: 900px) {

  #af-mi-location-popup .af-mi-popup-content {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    height: auto !important;
  }

}

/*[gd_mim_location_btn] - Product Page/Default button styling*/
.gd-mim-location-btn {
  margin-top: .6em;
  margin-left: calc(135px + .6em);
  width: calc(100% - 135px - .6em);
}

.gd-mim-location-btn .button {
  width: 100%;
}

@container (max-width: 299px) {
  .gd-mim-location-btn {
    margin-left: 0;
    width: 100%;
  }
}

.gd-mim-location-btn .gd-mim-location-selected {
  opacity: .5;
}

/* ==========================================================================
   WooCommerce – country/state dropdowns (select2) match the dark field style
   ========================================================================== */
.woocommerce .select2-container--default .select2-selection--single {
	height: auto;
	min-height: var(--inputs-height, 2em);
	margin-bottom: 0;
	background: var(--inputs-background);
	border: var(--inputs-border-width, 1px) solid var(--inputs-border-color);
	border-radius: var(--inputs-border-radius, 0);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--inputs-text-color);
}
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-cart .select2-dropdown,
body.woocommerce-account .select2-dropdown {
	background: var(--color-content-bg-alt);
	border-color: var(--inputs-border-color);
	color: var(--color-content-text);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--inputs-text-color);
	line-height: calc(var(--inputs-height, 2em) - 2 * var(--inputs-border-width, 1px));
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
body.woocommerce-cart .select2-results__option--highlighted[aria-selected],
body.woocommerce-account .select2-results__option--highlighted[aria-selected] {
	background: var(--color-content-primary);
	color: var(--color-content-bg);
}

/* --------------------------------------------------------------------------
   PAGE: Homepage (page 445), row 1 "Hero": video hero (.hero710)
   The poster <picture> is the LCP element. The muted loop is attached after
   window load by #hero710-js and fades in over it. Every rule keys on markup
   that is in the server HTML (no JS-added classes), so WP Rocket Remove
   Unused CSS keeps them; the script changes state only through inline
   opacity and the [hidden] attribute.
   -------------------------------------------------------------------------- */
/* Height stays as today: Impreza's "small" row padding plus the content. If a
   min-height is ever added, keep it below 100vh or Chrome stops counting the
   hero as an LCP candidate. */
.l-section.hero710 {
	isolation: isolate; /* own stacking context for the z-index:-1 media layer */
}

/* Let the media layer and button inside the column position against the section */
.l-section.hero710 > .l-section-h,
.l-section.hero710 .vc_column_container {
	position: static;
}

/* The [us_html] wrapper (el_id="hero710-media") holds only absolute children */
.l-section.hero710 #hero710-media {
	margin: 0;
}

.hero710__media { /* starts below the fixed header, so the owner's crop shows in full */
	position: absolute;
	top: var(--header-height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--color-content-bg);
}

/* Poster and video fill the same box, so frame 1 lines up exactly with the
   still. Chrome counts the video's first frame as a new LCP if its visible area
   is even slightly larger than the poster's, so the bottom 2px of the video are
   clipped (the still shows through). #hero710-js keeps the still instead if the
   hero grew after the poster painted. No transforms or cover-box sizing.
   object-position picks which band of the 2.2:1 crop shows in the wide banner. */
/* WP Rocket's Priority Elements beacon measures the <picture> element's own box;
   left inline it is 0x0 and the poster is skipped (it then preloads the logo). */
.hero710__media > picture,
.hero710__poster,
.hero710__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 35%;
}

.hero710__video {
	clip-path: inset(0 0 2px 0);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hero710__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-content-bg), transparent);
}

.hero710__toggle { /* no display value, so [hidden] keeps working */
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	line-height: 0;
	border: 1px solid var(--color-content-heading);
	border-radius: 50%;
	background: var(--color-content-bg);
	color: var(--color-content-heading);
	cursor: pointer;
}

.hero710__toggle:focus-visible {
	outline: var(--focus-outline-width, 2px) solid var(--color-content-primary);
	outline-offset: 3px;
}

.hero710__toggle svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Mobiles (Impreza breakpoint 600px): 4:5 cut, copy at the bottom */
@media (max-width: 600px) {
	.hero710__shade {
		background: linear-gradient(0deg, var(--color-content-bg) 0%, color-mix(in srgb, var(--color-content-bg) 60%, transparent) 70%, color-mix(in srgb, var(--color-content-bg) 25%, transparent) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero710__video {
		display: none;
	}
}

/* Homepage hero: no hairline at the hero's bottom edge on screens where it ends part-way through a
   screen pixel. The row's "secondary" colour scheme paints a teal background that peeked through, and
   the photo's last partial pixel row escaped the dark overlay. The photo now stops 1px short, so the
   media layer's dark background fills that last pixel. */
.hero710__media {
	clip-path: inset(0);
}

.l-section.hero710 {
	background: var(--color-content-bg);
}

.hero710__media > picture {
	bottom: 1px;
	height: auto;
}