/*
Theme Name: Frost Child
Theme URI: https://frostwp.com/
Template: frost
Author: WP Engine
Author URI: https://wpengine.com/
Description: With its clean, minimal design and powerful feature set, Frost enables agencies to build stylish and sophisticated WordPress websites. Frost is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you’re building a website for your business, personal brand, or creative project, Frost is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns,block-styles,custom-colors,custom-logo,custom-menu,editor-style,full-site-editing,one-column,template-editing,threaded-comments,translation-ready,wide-blocks
Version: 1.0.10.1761165622
Updated: 2025-10-22 20:40:22

*/


/***** GENERAL CUSTOM STYLES *****/

:root {
--btn-primary-bg: #2b2f36;
--btn-radius: 50px;
--general-bg: #e0dddb;
--btn-primary-padding: .5rem 2rem;
--white-bg: #f4f4f4;
--foreground-color: #222222;
}

/*** UTILITY Classes **/

.font-seasons {
	font-family: var(--wp--preset--font-family--the-seasons);
}




/*** TW Styles ***/

/* ---------- spacing scale (edit these to change spacing globally) ---------- */
:root{
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
}

/* ---------- Margin utilities (m-*) ---------- */
/* shorthand */
.m-0 { margin: var(--space-0); }
.m-px { margin: var(--space-px); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }

/* axis */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-px { margin-left: var(--space-px); margin-right: var(--space-px); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-px { margin-top: var(--space-px); margin-bottom: var(--space-px); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }

/* single sides */
.mt-0 { margin-top: var(--space-0); }
.mt-px { margin-top: var(--space-px); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mr-0 { margin-right: var(--space-0); }
.mr-px { margin-right: var(--space-px); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }
.mr-10 { margin-right: var(--space-10); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-px { margin-bottom: var(--space-px); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

.ml-0 { margin-left: var(--space-0); }
.ml-px { margin-left: var(--space-px); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }

/* useful helpers */
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Padding utilities (p-*) ---------- */
/* shorthand */
.p-0 { padding: var(--space-0); }
.p-px { padding: var(--space-px); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }

/* axis */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-px { padding-left: var(--space-px); padding-right: var(--space-px); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-px { padding-top: var(--space-px); padding-bottom: var(--space-px); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

/* single sides */
.pt-0 { padding-top: var(--space-0); }
.pt-px { padding-top: var(--space-px); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }

.pr-0 { padding-right: var(--space-0); }
.pr-px { padding-right: var(--space-px); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.pr-10 { padding-right: var(--space-10); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-px { padding-bottom: var(--space-px); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }

.pl-0 { padding-left: var(--space-0); }
.pl-px { padding-left: var(--space-px); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }
.pl-10 { padding-left: var(--space-10); }


/* MOBILE ONLY: paste below your main CSS (adjust breakpoint if needed) */
@media (max-width: 820px) {

  /* container: full viewport and slides in/out (keeps your theme layout) */
  .menu-mobile-container {
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    z-index: 100000;
    pointer-events: none;        /* disabled until .is-open */
    -webkit-tap-highlight-color: transparent;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    transform: translateX(-100%); /* hidden off-screen by default */
    transition: transform 360ms cubic-bezier(.22,1,.36,1);
  }

  /* pseudo-overlay (no extra DOM needed) */
  .menu-mobile-container::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(.22,1,.36,1);
    z-index: 100001; /* sits above page but below panel */
  }

  /* panel inside the container (fixed so it stays pinned on the left) */
  .menu-mobile-inner {
    position: fixed;             /* fixed so it remains viewport-aligned */
    top: 0;
    left: 0;
    height: 100vh;
    width: min(92vw, 380px);
    max-width: 420px;
    background: #fff;
    box-shadow: 6px 0 28px rgba(0,0,0,0.12);
    z-index: 100002;             /* above overlay */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* close button inside the panel */
  #mobile-close {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 100010;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 0;
  }

  /* OPEN state: container moves in and overlay is shown */
  .menu-mobile-container.is-open {
    transform: translateX(0);
    pointer-events: auto; /* interactions allowed when open */
  }
  .menu-mobile-container.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* nav items */
  .menu-mobile-inner .nav-item {
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.35;
    color: #111;
    cursor: pointer;
  }

  /* Categories collapse wrapper (animated via JS measured height) */
  .mobile-categories {
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms cubic-bezier(.22,1,.36,1);
  }

  /* categories list and staggered items */
  .header-categories-menu-mobile {
    list-style: none;
    padding: 6px 0 12px 8px;
    margin: 0;
  }
  .header-categories-menu-mobile .menu-item {
    margin: 6px 0;
    opacity: 0;
    transform: translateX(10px);
    transition:
      transform 320ms cubic-bezier(.22,1,.36,1),
      opacity 260ms cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--i,0) * 40ms); /* stagger controlled by JS */
  }
  .mobile-categories.is-expanded .header-categories-menu-mobile .menu-item {
    opacity: 1;
    transform: translateX(0);
  }
  .header-categories-menu-mobile a {
    color: #0b0b0b;
    text-decoration: none;
    font-size: 15px;
    display: inline-block;
    padding: 4px 0;
  }

  /* small close button fallback */
  .menu-close {
    background: none;
    border: 0;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    align-self: flex-start;
  }

  /* reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    .menu-mobile-container::before,
    .menu-mobile-inner,
    .mobile-categories,
    .header-categories-menu-mobile .menu-item {
      transition: none !important;
      animation: none !important;
    }
  }
}


/*** Cart Drawer ***/

.wc-block-mini-cart__footer-actions {
  display: flex;
  flex-direction: column;
}

.wp-block-woocommerce-mini-cart-title-block.wc-block-mini-cart__title {
  font-size: 1.5em;
}

.wc-block-components-button.wp-element-button.wp-block-woocommerce-mini-cart-checkout-button-block.wc-block-mini-cart__footer-checkout.contained {
background: var(--btn-primary-bg);
border-radius: var(--btn-radius);
}

.wc-block-components-drawer {
	background: var(--general-bg) 
}

.wc-block-mini-cart__drawer.is-mobile.wc-block-components-drawer, 
.wc-block-mini-cart__drawer.is-mobile.wc-block-components-drawer .wp-block-woocommerce-mini-cart-contents {
	background: var(--general-bg);
}

/** View Cart Button **/

.wc-block-components-button.wp-element-button.wp-block-woocommerce-mini-cart-cart-button-block.wc-block-mini-cart__footer-cart.outlined {
border-radius: var(--btn-radius);
}

.wc-block-components-button.wp-element-button.wp-block-woocommerce-mini-cart-cart-button-block.wc-block-mini-cart__footer-cart.outlined:hover {
  background: var(--btn-primary-bg);
}

/* Hide save tag in Cart Drawer */
.wc-block-components-product-badge.wc-block-components-sale-badge {
display: none;
}

/** Empty Drawer Button **/
.wc-block-components-button.wp-element-button.wp-block-woocommerce-mini-cart-shopping-button-block.wc-block-mini-cart__shopping-button.contained {
background: var(--btn-primary-bg);
border-radius: var(--btn-radius);
padding: var(--btn-primary-padding);
}



/**** Categories *******/

/** Product Card Button**/
.product-card-btn a, 
.product-card-btn button {
	background: var(--btn-primary-bg);
	border-radius: var(--btn-radius);
	padding: .5rem 2rem;
	margin-top: 1rem;
	font-size: 14px !important;
}

.wc-block-components-product-image.wc-block-grid__product-image.wc-block-components-product-image--aspect-ratio-auto.shop-product-image.wp-block-woocommerce-product-image {
margin-bottom: 1.2rem !important;
}



/** PDP **/
.onsale {
	display: none
}

	.woocommerce-variation-add-to-cart.variations_button {
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 2rem;
	}
	.single_variation_wrap {
		width: 100%;
	}
	.quantity.wc-block-components-quantity-selector {
		max-width: 80px;
		width: auto;
	}
	.variations {
		margin-bottom: 0 !important;
	}

	.single_add_to_cart_button.button.alt.wp-element-button {
	  background: var(--btn-primary-bg) !important;
	  color: white !important;
	}
	
	.wp-block-add-to-cart-form.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper.product-cart-options.wp-block-woocommerce-add-to-cart-form {
	  margin-top: 0;
	}


	.product-price.wp-block-woocommerce-product-price {
 		 margin-top: 1rem;
	}
	
	.single-product form.cart {
		margin-top: 0 !important
	}

.wp-block-column.product-info.is-layout-flow.wp-block-column-is-layout-flow {
	background: var(--white-bg);
	padding: 2.4rem;
	border-radius: 40px;
	position: sticky;
	top: 40px;
}

	.wp-block-woocommerce-product-description {
	font-size: 0.75em !important;
	}

	.flex-control-nav.flex-control-thumbs > li > img {
		border-radius: 20px;
	}
	
	.flex-control-nav.flex-control-thumbs {
		margin-top: .5rem !important;
	}
	
	.woocommerce div.product div.images .flex-control-thumbs li {
		padding: 0.5rem
	}
	.woocommerce-product-gallery__image.flex-active-slide {
		border-radius: 40px !important;
	}

	.woocommerce-product-gallery__image {
		border-radius: 40px;
	}

.woocommerce-product-gallery__image.flex-active-slide img {
  border-radius: 40px !important;
}

.wp-block-woocommerce-product-image-gallery {
	max-width: 700px !important
}

.wp-block-button.wc-block-components-product-button.product-card-btn.align-center.wp-block-woocommerce-product-button > span > a {
background: transparent !important;
margin-top: 0;
}

.wp-block-add-to-cart-form.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper.product-cart-options.wp-block-woocommerce-add-to-cart-form {
margin-top: 2rem;
}

.wp-block-add-to-cart-form.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper.product-cart-options.wp-block-woocommerce-add-to-cart-form > form {
display: flex;
flex-direction: row !important;
}

.single_add_to_cart_button.button.alt.wp-element-button {
flex: 1;
}

.wp-block-add-to-cart-form.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper.product-cart-options.wp-block-woocommerce-add-to-cart-form {
margin-top: 2rem;
}

.product-title.wp-block-post-title {
font-size: 1.6em;
}