/* Properities glossary
 *  --bg-image:
 *      The url for the image(s) an element would use as a background.
 *  --color-overlay:
 *      The (transparent) color to be put over certain backgrounds.
 *  --emphasis-color:
 *      The color of emphasized text (buttons, hovered links, etc)
 *  --font-color:
 *      The font color to be used by most, ordinary text.
 *  --image-bg-color:
 *      The color certain content's backgrounds, primarily images or cards.
 *  --main-background-color:
 *      The body's background color.
 *  --main-section-horizontal-padding:
 *      The left and right padding of the document's main sections.
 *  --max-width:
 *      The max width to be set for many top-ish-level items. Used by .max-width.
 *      Also the upper bound for the screen's width when calculating the body's font-size.
 *  --min-col-width: 
 *      The minimum column width for .grid-repeating-columns.
 *  --vw-capped:
 *      The width of the screen, capped at --max-width.
 *      This guy needs to be set on :root since initial-value doesn't accept properties
 */

/* General class 
 *  .bg-img-with-overlay:
 *      Gives the element a a background image (--bg-image) with an overlay (--color-overlay)
 *  .button: 
 *      For use with a or button tags.
 *      Makes the element an inline block with padding, alternate text color, and a background.
 *  .button-block: 
 *      For use with a or button tags.
 *      Makes the element a centered block with padding, alternate text color, and a background.
 *  .button-block-reverse:
 *      For use with a or button tags.
 *      Makes the element a centered block with padding, alternate text color, and a border.
 *  .button-icon:
 *      Same as .button, but it is also turned into a circle with set width.
 *      Intended for use with font awesome (eg. `<a class="button-icon fab fa-facebook-f"></a>`)
 *  .button-reverse:
 *      For use with a or button tags.
 *      Makes the element an inline block with padding, alternate text color, and a border.
 *  .fax-li:
 *      Sets the list marker to font awesome fax machine.
 *  .figure-card:
 *      Creates a card out of a figure and its figcaption.
 *      Non-figcaption children may expand, and the figcaption itself has an alternate bg color.
 *  .font-awesome-ul:
 *      A ul that's made to have lis with font awesome markers. 
 *  .geopin-li:
 *      Sets the list marker to font awesome map pin.
 *  .grid-repeating-columns:
 *      Makes the element a grid with as many repeating columns as possible
 *      Each column will be at least --min-col-width wide.
 *  .letter-li:
 *      Sets the list marker to font awesome mail letter.
 *  .max-width: 
 *      Set's the element's max width based on --max-width, and margin autos it.
 *  .max-width-padding: 
 *      Sets the element's horizontal padding so that its content box is at most --max-width, and the padding is at least --main-section-horizontal-padding.
 *  .phone-li: 
 *      Sets the list marker to font awesome telephone.
 *  .section-header:
 *      For use with sub-headings (h2s).
 *      Centers the text & adds an underline image using ::after.
 *  .three-col:
 *      Creates a grid with each of its 3 children being 1 of the 3 columns. 
 *      The first and last columns are justified to the beginning and end, respectively.
 *      The middle column is moved to a new row when the screen is too thin.
 */

/* Element-specific class/id glossary
 *  .main-footer:
 *      The footer at the bottom of every page.
 *  .navbar-nav:
 *      Used by the page navigation ul inside of .topheader-wrapper.
 *  .products-grid:
 *      The grid of products on shop pages.
 *  .product-wrapper:
 *      The wrapper around products info & image on product pages.
 *      Has a left column/child div with an image, and a right column/child div with text
 *  .shop-banner:
 *      The thin banner on the top of a parter's shop page. Styles its h1 and img children
 *  .shop-by-brand-grid:
 *      Used by the grid of brand logos, inside of .shop-by-brand-section.
 *  .shop-by-brand-section:
 *      Used by the Shop By Brand section on the homepage.
 *  .slider-content:
 *      Used by elements inside .your-class, generated by SliderContent() from sitehold\includes\slider_inc.php
 *  .top-bar:
 *      Used by the very top bar, above the header.
 *  .topheader-wrapper:
 *      Used by the page's main, sticky header. Gets a box shadow when the page isn't scrolled to the very top.
 *  .your-class:
 *      The main hero image slider on the homepage.
 */

/*#region Properties*/
@property --bg-image {
    syntax: "<image>+";
    inherits: false;
    initial-value: linear-gradient(transparent, transparent);
}
@property --color-overlay {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(0, 0, 0, 0.5333333333);
}
@property --emphasis-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #cea54c;
  }
  @property --font-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #000;
  }
  @property --image-bg-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #f1f8ff;
  }
  @property --main-background-color {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
  }
  @property --max-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 1400px;
  }
  @property --main-section-horizontal-padding {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
  }
  @property --min-col-width {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 300px;
  }

@property --vw-capped {
    syntax: "<length>";
    inherits: true;
    initial-value: 1200px;
}
  /*#endregion*/
  
/*#region General Elements*/
:not(input, select), ::before, ::after {
    background-size: cover;
    background-position: center;
}
  
:root {
    /* set all properties bc i dont actually know if initial-value works */
    --emphasis-color: #cba147;/*#cf941e;*/
    --image-bg-color: #f1f8ff;
    --main-background-color: white;
    --max-width: 1400px;
    --main-section-horizontal-padding: 30px;
    --color-overlay: rgba(0, 0, 0, 0.5333333333);
    --font-color: #000 ;
    --vw-capped: min(100vw, var(--max-width)); /* setting this one is necessary, even without initial value */
	--sans-serif-font: "Roboto", "futurastd book", sans-serif;
}
  
body {
    font-size: calc(0.7rem + 0.0035 * min(100vw, var(--max-width)));
    background-color: var(--main-background-color);
    color: var(--font-color);
	font-family: var(--sans-serif-font);
}
a{
	color:var(--emphasis-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display";
}
body h2 {
    font-size: revert;
    color: revert;
}
  
main > section {
    display: flow-root;
    padding: 0 var(--main-section-horizontal-padding);
}
  
/*#endregion*/

/*#region General classes*/
.bg-img-with-overlay {
    background-image: linear-gradient(var(--color-overlay), var(--color-overlay)), var(--bg-image);
}

/*#region .figure-card & .figure-card-list  */
figure.figure-card {
    contain: content; /* CONTAIN CONTENT LETS GOOOOO */
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--image-bg-color);
    border-radius: 0.5em;
    /* border: 2px solid var(--font-color); */
    margin: 0;
}
figure.figure-card > * {
    padding: 15px 10px;
}
figure.figure-card > :not(figcaption) {
    flex: 1;
}
figure.figure-card > figcaption {
    /* background-color: var(--font-color);
    color: var(--main-background-color); */
    font-weight: bold;
	color:black;
}
/*#endregion*/

/*#region Li icons*/
@supports selector(::marker) {
    .font-awesome-ul {
        padding-inline-start: 1em;
    }
    :is(.geopin-li, .letter-li, .fax-li, .phone-li)::marker {
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
    }
    .geopin-li::marker {
        content: "\f3c5";
    }
    .letter-li::marker {
        content: "\f0e0";
    }
    .fax-li::marker {
        content: "\f1ac";
    }
    .phone-li::marker {
        content: "\f095";
    }
  }
@supports not selector(::marker) {
    .font-awesome-ul {
        padding: 0;
    }
    .geopin-li, .letter-li, .fax-li, .phone-li {
        list-style: none;
    }
    .geopin-li::before, .letter-li::before, .fax-li::before, .phone-li::before {
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
    }
    .geopin-li::before {
        content: "\f3c5";
    }
    .letter-li::before {
        content: "\f0e0";
    }
    .fax-li::before {
        content: "\f1ac";
    }
    .phone-li::before {
        content: "\f095";
    }
}
  /*#endregion*/

  .max-width {
    max-width: min(var(--max-width), 100%);
    margin: auto;
}

/*#region three-col */
.three-col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    text-align: center;
    gap: 5px;
}
.three-col > :first-child {
    justify-self: start;
    text-align: start;
}
.three-col > :last-child {
    justify-self: end;
    text-align: end;
}
/* maybe replace with container queries? */
@media (max-width: 780px) {
    .three-col {
      grid-template-columns: 1fr 1fr;
    }
    .three-col > :nth-child(2) {
      grid-row-start: 2;
      grid-column-end: span 2;
    }
}
/*#endregion*/

/*#region section-header */
.section-header {
    text-align: center;
    font-size: 2.5em;
    margin: 2em 0 1em;
	font-weight:650;
}
.section-header::after {
    white-space: pre;
    content: "\a" url("/sitehold/images/fileman/divider.png");
}

header svg{
	width:23px;
}

@media (max-width:767px){
	header svg{
		width:20px;
	}
}

/*#endregion*/

/*#region .button, .button-block, .button-reverse, .button-block-reverse, .button-icon */
.button, .button-block, .button-reverse, .button-block-reverse, .btn {
    padding: 0.65em 1.3em;
    border-radius: 0.3em;
    border: 2px solid var(--emphasis-color);
    font-weight: 401;
    font-size: 1em;
	font-family:var(--sans-serif-font);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
  
.button-reverse, .button-block-reverse {
    color: var(--emphasis-color);
}
  
.button, .button-block, .button-icon, .btn {
    background-color: var(--emphasis-color);
    color: var(--main-background-color);
}
  
.button, .button-reverse,.btn {
    display: inline-block;
}
  
.button-block, .button-block-reverse {
    text-align: center;
    display: block;
    margin: auto;
    width: fit-content;
}

.button:hover, .button-block-reverse:hover, .btn:hover {
	background:black;
	color:white;
	border-color:black;
}
  
.button-icon {
    border-radius: 100%;
    aspect-ratio: 1;
    width: 1em;
    padding: 0.5em;
    box-sizing: content-box;
    display: inline-block;
    text-align: center;
    margin: 0.15em;
}

.button-icon:hover{
	background-color:white;
	color:black;
}
/*#endregion*/  

.max-width-padding {
    padding-left: max(var(--main-section-horizontal-padding), calc(50% - 0.5 * var(--max-width)));
    padding-right: max(var(--main-section-horizontal-padding), calc(50% - 0.5 * var(--max-width)));
}

.grid-repeating-columns {
    display: grid; /* css grid my beloved */
    padding: 10px;
    gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
}
  
/*#endregion*/

/*#region Element-specific classes */
/*#region .product-wrapper*/
.product-wrapper {
    /* border: 2px solid red; */
    display: grid;
    padding: 5em var(--main-section-horizontal-padding);
    grid-template-columns: 1fr 1fr;
}

.product-wrapper h2{
	font-size:2em;
}

@media (max-width: 650px) {
    .product-wrapper {
        grid-template-columns: 1fr;
    }
	.product-wrapper h2{
		padding-top:2em;
	}
}
@media (min-width:651px) {
	.product-wrapper > div {
		padding:30px;
	}
}

.product-wrapper > :first-child > img:first-of-type { /* left half with image > then get first image */
    width: 100%;
    max-width: 100%;
}
.product-wrapper > :nth-child(2) {
    /* min-width: 0; */
}
.product-wrapper > :nth-child(2) select {
    max-width: 75%;
}
/*#endregion*/
/*#region .main-footer*/
.main-footer {
    background-color: currentColor;
    padding: 1em 0;
}
.main-footer * {
    color: var(--main-background-color);
}
.main-footer > div { /* column wrapper thing */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 800px) {
    .main-footer > div {
        grid-template-columns: repeat(2, 1fr);
    }
}
.main-footer > div > * { /* column */
    padding: var(--main-section-horizontal-padding);
}
.main-footer > div > * > h3 + * { /* the nav/div/address containing the ul */
    display: contents;
}
.main-footer > div > * > h3 + * > ul:not(.font-awesome-ul) {
    list-style: none;
    padding: 0;
}

.main-footer > div > * > h3{
	font-family: var(--sans-serif-font);
	font-size: 1.1em;
  	font-weight: 500;
  	margin-bottom: 0.5em;
}
/*#endregion*/

/*#region .what-we-do-content*/
.what-we-do-content { /* Wrapper */
    display: grid;
}
.what-we-do-content > * {
    padding: 5em 0;
}
.what-we-do-content > * > * > * { /* Entire thing wrapper > left/right wrapper > left/right content > all p/h3/etc*/
    color: var(--main-background-color);
}
/* .what-we-do-content > * > * > p {
    font-size: 0.9em;
} */
@media (max-width: 733px) {
    /* Make the two halves top and bottomn */
    .what-we-do-content {
        display: contents; /* entire thing wrapper not needed */
    }
    .what-we-do-content > * {
        margin: 0 calc(-1 * var(--main-section-horizontal-padding));
        padding-left: var(--main-section-horizontal-padding);
        padding-right: var(--main-section-horizontal-padding);
    }
}
@media (min-width: 734px) {
    /* Make the two halves left and right */
    .what-we-do-content {
        grid-template-columns: 1fr 1fr;
        margin: 0 calc(-1 * var(--main-section-horizontal-padding));
        --padding-inside: calc(5px + 5%);
    }
    .what-we-do-content > * > * {
        max-width: calc(0.5 * var(--max-width)); /* sum of two halves' content box wont exceed max-width */
    }
    .what-we-do-content > :first-child > * {
        margin-left: auto;
        padding-left: var(--main-section-horizontal-padding);
        padding-right: var(--padding-inside);
    }
    .what-we-do-content > :last-child > * {
        margin-right: auto;
        padding-right: var(--main-section-horizontal-padding);
        padding-left: var(--padding-inside);
    }
}
/*#endregion*/
/*#region .top-bar*/
.top-bar {
    color: white;
    background-color: black;
    padding: 5px;
}
.top-bar a {
    color: unset;
}
/*#endregion*/
/*#region .shop-categories-grid*/
.shop-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* honesly i should make an .even-flex class like .even-flex { display: flex; gap: 1.5em } .even-flex > * { flex: 1 1 0 } */
    gap: 20px;
    text-align: center;
}


@media (max-width: 733px) {
    .shop-categories-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/*#endregion*/
/*#region .shop-by-brand-section*/
.shop-by-brand-section {
    background-color: var(--image-bg-color);
    padding: 0 0 5em 0;
}
.shop-by-brand-grid {
    display: grid;
    column-gap: 1.5%;
    padding: 0 calc(min(100vw, var(--max-width)) * 0.035);
    justify-items: center;
}
.shop-by-brand-grid > * { /* each grid item */
    /* border: 2px solid green; */
    aspect-ratio: 1;
    border-radius: 99999px;
    padding: 10%; /* this controls amount of space between image and edge of grid item */
    grid-column-end: span 2;
    background-color: var(--main-background-color);
    /* isolation: isolate; here so image doesn't render behind section */
    display: block;
    max-width: 100%;
    width: 275px;
}
/* if x number of elements per row, repeat([x*2], 1fr) and :nth-child([x*2 - 1]n + [x-1])
    Odd x works best! */
.shop-by-brand-grid {
        grid-template-columns: repeat(6, 1fr);
}
.shop-by-brand-grid > :nth-child(5n+4) {
    grid-column-start: 2;
}

@media screen and (min-width:768px){
	#shopping-cart select[name ="shipping_rate_id"] ~ .row .row .col-md-6:last-child {text-align:right;}
}
@media (max-width: 450px) { /* 3 or 2 items per row */
    /* .shop-by-brand-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .shop-by-brand-grid > :nth-child(5n+4) {
        grid-column-start: 2;
    } */
}
@media (min-width: 451px) and (max-width: 600px) { /* 5 or 4 items per row */
    /* .shop-by-brand-grid {
        grid-template-columns: repeat(10, 1fr);
    }
    .shop-by-brand-grid > :nth-child(9n+6) {
        grid-column-start: 2;
    } */
}
@media (min-width: 601px) and (max-width: 1000px) { /* 7 or 6 items per row */
    /* .shop-by-brand-grid {
        grid-template-columns: repeat(14, 1fr);
    }
    .shop-by-brand-grid > :nth-child(13n+8) {
        grid-column-start: 2;
    } */
}
@media (min-width: 1001px) { /* 9 or 8 items per row */
    /* .shop-by-brand-grid {
        grid-template-columns: repeat(18, 1fr);
    }
    .shop-by-brand-grid > :nth-child(17n+10) {
        grid-column-start: 2;
    } */
}
.shop-by-brand-grid > * > div { /* smaller, circular clipping container within each grid item */
    width: 100%;
    height: 100%;
    border-radius: 99999px;
    align-content: center;
    text-align: center;
    /* box-shadow: inset 0 0 10px 10px var(--main-background-color); Disabled bc looks ugly and there's an unavoidable pixel of un-shadowed image behind it*/
    overflow: hidden;
    aspect-ratio: 1;
}
.shop-by-brand-grid > * > div > img { /* the image within each grid item */
    max-width: 100%;
    max-height: 100%;
    /* z-index: -1; */
    /* position: relative; here for z-index */
}
/*#endregion*/
/*#region .products-grid */
.products-grid {
    margin: 15px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25em 0.75em;
    text-align: center;
}
.products-grid > * {
    display: flex;
    flex-direction: column;
}
.products-grid > * > a {
    width: 100%;
}
.products-grid > * > a > img {
    width: 100%;
}
.products-grid > * > :last-child {
    align-content: end;
    flex: 1;
}
.products-grid > * > :last-child > a {
    width: unset;
}
  
.shop-banner {
    position: relative;
    padding: 3em;
    text-align: center;
    overflow: hidden;
}
.shop-banner > h1 {
    margin: 0;
}
.shop-banner > img {
    position: absolute;
    opacity: 0.25;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: unset;
    max-height: unset;
    width: unset;
    height: unset;
    min-width: 100%;
    min-height: 100%;
}
/*#endregion*/
/*#endregion*/
/*#region Slider styles*/
.your-class > * > * .slick-slide > div > * { /* The wrapper around Each individual slide */
    min-height: 65vh;
    font-size: 1.3em;
    padding: 20px;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    align-content: center;
}
.your-class > * > * .slick-slide > div > * :is(h1, h2) {
    font-size: 2.5em;
}
.your-class > * > * .slick-slide > div > * > .slider-content {
    margin: auto;
    max-width: 90%;
    --animation-duration: 0.75s;
    --animation-delays: 0.5s; /* the delsy between the start of each animation (also applies to the first one) */
}
.your-class > * > * .slick-slide > div > * > .slider-content > * {
    margin: 10px;
}

.your-class > * > * .slick-slide > div > * > .slider-content > div > [class *= "button"]{
	border-color:white;
	color:white;
	border-radius:0.2em;
}

/* I would use transitions, but @starting-style isn't widespread yet :/ */
@keyframes slider-content-appear {
    0% {
      transform: translateY(calc(100% + 1px));
    }
    100% {
      transform: translateY(0%);
    }
}
@keyframes slider-content-disappear {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(calc(100% + 1px));
    }
}
/* .slick-track {
    border: 3px solid red;
    & > * {
        border: 3px solid orange;
        height: 100%;
    }
} */
.slider-content > div {
    overflow: hidden; /* Overflow clip doesn't work on my phone for some reason */
}
.slider-content > div > * { /* slider content > content clip boxes > actual content */
    animation: slider-content-disappear var(--animation-duration) forwards;
    transform: translateY(calc(100% + 1px)); /* Sometimes 1px of the button's top border is visible without this. Idk */
    position: relative;
}
.slider-content > :not(:last-child) > * { /* remove margin and make white, all except the button */
    margin: 0;
    color: white;
}
.slider-content > div:last-child > *:hover {
    color: var(--emphasis-color);
}
/* if the slider is the active one, turn on the appearing animation with the correct delays */
.slick-active > div > div > .slider-content > * > * {
    animation: slider-content-appear var(--animation-duration) forwards;
}
.slick-active > div > div > .slider-content > *:nth-child(2) > * {
    animation-delay: var(--animation-delays);
}
.slick-active > div > div > .slider-content > *:is(:nth-child(1), :nth-child(3)) > * {
    animation-delay: calc(2 * var(--animation-delays));
}
.slick-active > div > div > .slider-content > *:nth-child(4) > * {
    animation-delay: calc(3 * var(--animation-delays));
}
/*#endregion*/

/*#region Checkout/Member Signup-Login  */

#members_orderlist_inc > div,
.checkout_details_box, .order_details_box,
.my-account-row > div:first-child,
.my-account-row > div:last-child .row > div a {
    padding: 1.25em;
    margin: 1.25em 0;
    border: 0.5em solid var(--emphasis-color);
    border-radius: 1em;
    box-shadow: inset 0 0 0 1px black,
                      0 0 0 1px black;
    background-color: color-mix(in srgb, var(--emphasis-color) 25%, transparent 75%);
}
.my-account-row .mbe_button a, button[data-bs-toggle="modal"] {
  width: 100%;
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
  border:0;
  color: #555;
  text-decoration: none;
  text-align: center;
  display: block;
}

/*#endregion*/

.dropdown-click {
    font: inherit
}
.with-box-shadow { /* .with-box-shadow is added/removed through js */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2666666667);
}
#order_summary_box { /* the left hand summary on cart checkout displaying subtotal/products/etc */
    position: sticky;
    top: 9em
}