/*
 Theme Name:   Allenhouse Metals
 Theme URI:    https://bricksbuilder.io/
 Description:  Child theme for Allenhouse Metals to extend Bricks.
 Author:       Base3Group
 Author URI:   https://base3group.com
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Typography */
html { font-size: 100%; }

@media screen and (max-width:425px) {
    body {
        --font-size-5xl: 11vw;
    }
}

body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    font-style: var(--font-style-body);
    font-size: var(--font-size-md);
    color: var(--text);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-style: var(--font-style-heading);
}

h6 {
    font-family: var(--font-family-body);
    font-weight: 500;
    font-style: var(--font-style-body);
}

.body--bold {
    font-weight: var(--font-weight-body-bold);
}

.body--medium {
    font-weight: var(--font-weight-body);
}

.body--xs {
    font-size: var(--font-size-xs);
  }

.body--sm {
    font-size: var(--font-size-sm);
}

.body--md {
    font-size: var(--font-size-md);
}

.body--lg {
    font-size: var(--font-size-lg);
}

.body--xl {
    font-size: var(--font-size-xl);
}
.h6, h6 {
    font-size: var(--font-size-lg);
}

.h5, h5 {
    font-size: var(--font-size-xl);
}

.h4, h4 {
    font-size: var(--font-size-2xl);
}

.h3, h3 {
    font-size: var(--font-size-3xl);
}

.h2, h2 {
    font-size: var(--font-size-4xl);
}

.h1, h1 {
    font-size: var(--font-size-5xl);
}

/* Colors */
.cs-white, body {
    --surface: var(--color-white);
    --text: var(--color-dark);
    --secondary: var(--color-silver--700);
    --accent: var(--color-gold--300);
  }

  .cs-black {
    --surface: var(--color-dark);
    --text: var(--color-white);
    --secondary: var(--color-silver--500);
    --accent: var(--color-gold--300);
  }


.cs-light {
    --surface: var(--color-light);
    --text: var(--color-dark);
    --secondary: var(--color-silver--500);
    --accent: var(--color-gold--500);
}

.has--background-color {
    background: var(--surface);
    color: var(--text);
}

.background-secondary {
    background: var(--secondary);
}

.background-text {
    background: var(--text);
}

.background-surface {
    background: var(--surface);
}

.background-accent {
    background: var(--accent);
}

.color-secondary {
    color: var(--secondary);
}

.color-text {
    color: var(--text);
}

.color-surface {
    color: var(--surface);
}

.color-accent {
    color: var(--accent);
}

/* Padding */
@media screen and (max-width:767px){
    body {
        --padding-xs: 4px;
        --padding-sm: 8px;
        --padding-md: 16px;
        --padding-lg: 24px;
        --padding-xl: 48px;
        --padding-2xl: 80px;
      }
}


/* Buttons */
.button, .woocommerce .button, .brxe-button, button[type="submit"] {
    padding: var(--buttonY, 12px) var(--buttonX, 32px);
    border: 1px solid transparent;
    border-radius: var(--buttonRadius, 60px);
    background: var(--accent);
    color: var(--surface);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-body) !important;
}

.button--primary, .woocommerce .button--primary, 
.woocommerce .button.single_add_to_cart_button:not(.disabled), 
.cart-collaterals .wc-proceed-to-checkout .button, 
form.woocommerce-cart-form .button:not(:disabled),
.woocommerce-checkout .place-order .button,
button[type="submit"] {
    background: linear-gradient(180deg, var(--button-primary-background-gradient-light, #D8B07C) 0%, var(--button-primary-background-gradient-dark, #A98455) 100%) padding-box,
    linear-gradient(to bottom, var(--button-primary-border-light), var(--button-primary-border-dark)) border-box;
    color: var(--button-primary-text);
}

.button--secondary, .woocommerce .button--secondary {
    background: linear-gradient(180deg, var(--button-secondary-background-gradient-light, #F2F2F2) 0%, var(--button-secondary-background-gradient-dark, #C2C2C2) 100%) padding-box,
    linear-gradient(to bottom, var(--button-secondary-border-light), var(--button-secondary-border-dark)) border-box;
    color: var(--button-secondary-text);
}

.button--tertiary, .woocommerce .button.button--tertiary, .button.wc-backward {
    background-color: transparent;
    color: var(--button--tertiary-color);
    border-color: var(--button--tertiary-color);
}

.button:hover {
    background: var(--text);
    color: var(--surface);
}

.button.disabled {
    background: #e6e6e6;
    color: #838383;
}

.button-group .button {
    min-width: 210px;
}

.center-cta-block .button-group {
    justify-content: center !important;
}

@media screen and (max-width: 767px) {
    .button-group .button {
        min-width: 100%;
    }
}
/* Background Colors */
.bg--golden {
    background: linear-gradient(180deg, var(--button-primary-background-gradient-light, #D8B07C) 0%, var(--button-primary-background-gradient-dark, #A98455) 100%) padding-box,
    linear-gradient(to bottom, var(--button-primary-border-light), var(--button-primary-border-dark)) border-box;
    color: var(--button-primary-text);
}

.bg--silver, .tabs__button.brx-open {
    background: linear-gradient(180deg, var(--button-secondary-background-gradient-light, #F2F2F2) 0%, var(--button-secondary-background-gradient-dark, #C2C2C2) 100%) padding-box,
    linear-gradient(to bottom, var(--button-secondary-border-light), var(--button-secondary-border-dark)) border-box;
    color: var(--button-secondary-text);
}

.bg--black {
    border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(35, 35, 35, 0.90) 0%, rgba(28, 28, 28, 0.90) 100%) padding-box,
    linear-gradient(to bottom, rgb(55, 55, 55), #000000) border-box;
    color: var(--color-white);
}


.gold-stroke {
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%) padding-box,
    linear-gradient(to bottom, var(--button-primary-border-light), var(--button-primary-border-dark)) border-box;
}

/* Utility */
.bordered {
    border: 1px solid var(--accent);
}

.rounded, .rounded:before {
    border-radius: var(--radius);
}

a:hover, .brx-submenu-toggle:hover {
    color: var(--accent);
}

.padded-container {
    max-width: var(--container-max) !important;
    width: var(--container-width) !important;
}

/* Header */
#logo {
    fill: var(--text);
  }

.sublink {
    padding-left: calc(16px + 8px);
    position: relative;
}

.sublink:before {
    content: "";
    width: 16px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent);
}

#logo {
    width: 100%;
  }

/* WooCommerce */
ul.products.woocommerce .product {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 24px 24px var(--padding-lg);
    display: flex;
    flex-direction: column;
}

ul.products.woocommerce .product > div:last-child {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


table.variations {
    width: 100%;
    table-layout: auto;
  }
  
  table.variations td.value {
    width: 100%;
    display: block;
  }
  
  table.variations .label {
    padding-right: .5rem;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  table.variations select {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .variations_form .value {
    flex-grow: 1;
    min-width: 250px;
  }
  
  table.variations tr {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  form.cart table.variations, form.woocommerce-cart-form table.variations {
    margin-bottom: 1rem !important;
  }
  
  form.cart .woocommerce-variation:not(:empty) {
    display: flex;
    align-items: center;
    gap: var(--padding-sm);
    margin-bottom: 1rem !important;
    font-size: var(--font-size-xl);
}

form.cart table.variations td {
    padding-bottom: 0 !important;
}

.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    flex-wrap: nowrap;
    gap: 1rem;
}
  
.woocommerce-variation-add-to-cart .button {
    width: 100%;
}
.woocommerce-variation-description:after {
    content: "-";
    padding: 0 0 0 var(--padding-sm);
}

.woocommerce-variation-price {
    font-weight: var(--font-weight-body-bold);
}

  @media screen and (max-width:478px) {
    table.variations tr {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    form.cart table.variations td {
        padding-top: 0 !important;
    }
    .variations_form .value {
        flex-grow: 1;
        min-width: 100%;
      }
    .woocommerce-variation-add-to-cart {
      flex-direction: column !important;
    }

    .variations_form.cart, form.cart .quantity {
        width: 100% !important;
    }
  }

  .cart-collaterals .wc-proceed-to-checkout .button,
  .woocommerce-checkout .place-order .button {
    line-height: unset;
  }

  form.woocommerce-checkout.bricks-default-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--paddding-lg);
  }

  .woocommerce-NoticeGroup.woocommerce-NoticeGroup-updateOrderReview {
    margin-bottom: var(--padding-lg);
}

.cart-empty.woocommerce-info {
    margin-bottom: vaR(--padding-lg);
}

.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    padding-right: 24px;
}

/* Elements */