/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* mobile navigation */
.mobile-nav-icon {
  display: none;
}

/* link styles */
a {
  transition: color 0.3s ease-in-out;
}


a:hover,
a i.fab:hover,
a i.fa:hover,
a i.ti-shopping-cart:hover {
  color: var(--color-cyan) !important;
}

a i.fab:hover {
  color: var(--color-cyan) !important;
}

/* button styles */
button {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

button.primary-button.bricks-background-primary:hover {
  color: #000000 !important;
  background-color: var(--color-cyan) !important;
}

button.secondary-button.bricks-background-secondary:hover {
  color: #000000 !important;
  background-color: var(--color-white) !important;
}

.woocommerce .button:hover,
body:not(.woocommerce) .brxe-woocommerce-mini-cart .woocommerce-mini-cart__buttons .button:hover {
    background-color: var(--color-cyan) !important;
    border: 1px solid var(--color-black) !important;
    color: var(--color-black) !important;
}

/* Out-of-stock PLP label (see woocommerce_loop_add_to_cart_link filter in
   functions.php). Keeps the button's footprint but reads as disabled; the
   !important matches the global .button:hover rule above so it never lights
   up cyan on hover. */
.button.oos-label,
.woocommerce .button.oos-label:hover {
    background-color: var(--color-neutral, #DCE0DF) !important;
    border: 1px solid var(--color-neutral, #DCE0DF) !important;
    color: #6b7280 !important;
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* carousel styles */
.home-hero-slider .splide__arrows .splide__arrow {
  transition: border 0.3s ease-in-out !important;
}

.home-hero-slider .splide__arrows .splide__arrow:hover {
  border: 1px solid var(--color-cyan) !important;
}

/* card styles */
div.card-hover {
    transition-property: all;
    transition-duration: 300ms;
}

div.card-hover:hover {
    border: 1px solid #11FFE9;
    box-shadow: 0 25px 50px 12px rgb(0 0 0 / 0.25);
}

/* thank you page .woocommerce-order-received */
.woocommerce-order-received .page {
    padding: 50px 0;
}

.woocommerce-order-received .page h1 {
  font-size: var(--text-4xl);
}

.woocommerce-order-received p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  padding: 20px 0;
  border: 1px solid var(--bricks-text-success);
  font-size: var(--text-xl);
  font-weight: 700;
}

.woocommerce-order-received .woocommerce-columns--addresses h2 {
  font-size: var(--text-3xl);
}

/* Unavailable swatches stay dimmed but are clickable: clicking one clears the
   conflicting selections so a valid combination can be chosen. Override Bricks'
   default cursor: not-allowed. */
.bricks-variation-swatches li.disabled {
    cursor: pointer;
    opacity: 0.5;
}

.bricks-variation-swatches li.disabled:hover {
    opacity: 0.85;
}

.bricks-variation-swatches li {
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
}

.bricks-variation-swatches li:hover {
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--color-cyan);
}

.bricks-variation-swatches li.bricks-swatch-selected {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 2px solid var(--color-cyan);
}

/* pdp change variation price text */
.woocommerce-variation-price .woocommerce-Price-amount.amount {
    font-weight: 700;
    font-size: var(--text-m);
}


/* Product SKU under the product name on each barcode-lookup result row
   (/product-barcode-scanner/). Rendered by the child theme's override of
   woocommerce/shortcode/ywbc-search-products-row.php. The value is monospace so
   digit-heavy SKUs are easy to read off at the counter; "(parent)" marks a
   variation showing its parent's SKU because it has none of its own. */
.preece-scanner-sku {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: #666666;
}

.preece-scanner-sku-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #333333;
  word-break: break-all;
}

/* This marker is the only thing telling counter staff the SKU belongs to the
   parent, not the scanned variation — keep it above the WCAG AA 4.5:1 ratio. */
.preece-scanner-sku-note {
  color: #6b6b6b;
  font-style: italic;
}

/* mobile media queries */
@media only screen and (max-width: 768px) {
  /* mobile nav styles */
  .mobile-nav-icon {
     display: flex;
     align-items: center;
     padding-left: 30px
  }

  .mobile-nav-icon a {
     font-family: "Inter", sans-serif;
     font-weight: 700;
     padding-left: 10px;
  }

  /* carousel styles */
  .splide__arrow {
     display: none;
  }

  form.cart .button, form.woocommerce-cart-form .button {
    min-width: 0;
  }
}

/* checkout page */
.woocommerce-checkout #brxe-dlfqka,
.woocommerce-checkout #brxe-upbvjw,
.woocommerce-checkout .bricks-link-wrapper,
.woocommerce-checkout .brxe-woocommerce-mini-cart.mini-cart-icon,
.woocommerce-checkout #brxe-hprzgz #brxe-mzhdha,
.woocommerce-checkout #brxe-cugnuz,
.woocommerce-checkout #brxe-tbqezu,
.woocommerce-checkout #brxe-newvmi {
  display: none;
}

/* mini cart */
.brxe-woocommerce-mini-cart .cart-detail .widget_shopping_cart_content {
  height: 500px;
}

.woocommerce-mini-cart {
  overflow-y: scroll;
}

.brxe-woocommerce-mini-cart .cart-detail li .variation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12px;
}

.brxe-woocommerce-mini-cart .cart-detail li .variation dd+dt {
  margin-top: 5px;
}

.woocommerce-mini-cart span.quantity {
  color: var(--color-black) !important;
  font-weight: 700;
}

abbr[title] {
  text-decoration: none;
  color: red;
}

/* MIGRATION SNIPPET — do NOT upload this file.
   Append EVERYTHING BELOW to your live site's
     wp-content/themes/bricks-child/style.css
   (the end of the file is fine). */
/* ───────────────────────────── paste below this line ───────────────────────────── */

/* "Search" button on the barcode-lookup page (/product-barcode-scanner/).
   Injected by ywbc-frontend-patched.js; mirrors the site's WooCommerce
   Add-to-Cart button: black, square, Inter 600, with the cyan hover. */
.ywbc-manual-search {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 24px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid transparent; /* reserve space so the hover border doesn't shift the button */
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.ywbc-manual-search:hover,
.ywbc-manual-search:focus {
  background-color: var(--color-cyan, #11FFE9);
  border-color: #000000;
  color: #000000;
}


/* "Print" button on each barcode-lookup result row (/product-barcode-scanner/).
   Injected by ywbc-frontend-patched.js; mirrors the "Search" button above (black,
   square, Inter 600, cyan hover) and sits under the row's stock controls. */
.preece-print-barcode {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid transparent; /* reserve space so the hover border doesn't shift the button */
  border-radius: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.preece-print-barcode:hover,
.preece-print-barcode:focus {
  background-color: var(--color-cyan, #11FFE9);
  border-color: #000000;
  color: #000000;
}

.preece-print-barcode:disabled {
  opacity: 0.6;
  cursor: default;
}

/* loading spinner */
.plp-results-area {
  position: relative;
}

.plp-ajax-loader {
  position: absolute;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: rgba(255, 255, 255, 0.72);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 150ms ease,
    visibility 150ms ease;
}

.plp-results-area.is-loading .plp-ajax-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.plp-spinner {
  width: 48px;
  height: 48px;

  border: 5px solid rgba(0, 0, 0, 0.16);
  border-top-color: #000;
  border-radius: 50%;

  animation: plp-spin 700ms linear infinite;
}

@keyframes plp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plp-spinner {
    animation-duration: 1500ms;
  }
}

/* pagination css */
.brxe-pagination span.page-numbers.current {
    position: relative;
}

.brxe-pagination span.page-numbers.current:after {
    content: '_';
    position: absolute;
    bottom: -10px;
}

/* PLP category description: 240-character teaser + "Read More..." toggle.
   The remainder is hidden, not removed — see preece_term_description_teaser()
   in functions.php. Both rules are scoped to html.preece-js (set in wp_head) so that
   without JS — where the toggle can never be revealed — the full description shows. */
.preece-js .preece-term-desc.is-collapsed .preece-term-desc__more {
  display: none;
}

.preece-term-desc__ellipsis {
  display: none;
}

.preece-js .preece-term-desc.is-collapsed .preece-term-desc__ellipsis {
  display: inline;
}

.preece-term-desc__toggle {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.preece-term-desc__toggle:hover,
.preece-term-desc__toggle:focus-visible {
  color: var(--color-cyan);
}

/* Layered nav price filter: a "$" in front of the min/max values.

   The fields are <input type="number"> — a replaced element, so ::before on the
   input itself never renders. The affix has to hang off the .min-wrap/.max-wrap
   div that Bricks wraps around each input.

   Scoped to .brxe-filter-range, which on this site is only ever the price filter
   (Shop Template and PLP Template; every other layered-nav filter is a checkbox).
   If a non-currency range filter is ever added — Pull Weight, Outside Length —
   give the price element a custom class in the builder and narrow these selectors
   to it, or that filter gets a bogus "$" too.

   Two things to mirror if the element's Bricks settings change: set Input >
   Typography and the ::before needs the same font-size/family to stay aligned;
   set a Min/Max label and the wrapper gains a <label> sibling, so the vertical
   centering below needs revisiting. */
.brxe-filter-range .min-max-wrap .min-wrap,
.brxe-filter-range .min-max-wrap .max-wrap {
  position: relative;
}

.brxe-filter-range .min-max-wrap .min-wrap::before,
.brxe-filter-range .min-max-wrap .max-wrap::before {
  content: "$";
  position: absolute;
  top: 50%;
  left: 0.7em;
  transform: translateY(-50%);
  color: inherit;
  font-size: inherit;
  line-height: 1;
  /* Let clicks through to the field underneath. */
  pointer-events: none;
}

.brxe-filter-range .min-max-wrap input.min,
.brxe-filter-range .min-max-wrap input.max {
  padding-left: 1.4em;
}

/* radio button styling */
input[type="radio"] {
  accent-color: #000000;
}