/*----------- HTML -------------------------------------------*/ 
html { 
    overflow-x: hidden; 
} 

/*---------- Fonts --------------------------------------------*/
*, h2, span, p, li, a, a:link, a:visited {
  font-family: "Inter Tight", sans-serif;
}

/*----------- Variables --------------------------------------*/ 
:root { 
    --lightGray: #D8D8D8; 
    --gray: #181715; 
    --medGray: #6c6c6c; 
    --cardGray: #827f7d; 
    --bannerGray: #726F6D; 
    --darkerGray: #6c6c6cb3; 
    --black: #1A1816; 
    --orange: #FE3807; 
    --lightOrange: rgba(254, 56, 7, .15);
} 

/*----------- Hide Homepage Elements -------------*/ 
.slider.owl-carousel, 
.homepage__callouts > h2, 
.homepage__secondary-callouts, 
.homepage__content { 
    display: none; 
}

/*----------- Header -------------------------------------*/ 
.header-wrapper--home { 
    background: var(--gray); 
    border: none; 
    padding-bottom: 0; 
} 

header.header--site { 
    padding: 0; 
    align-items: end; 
} 

header.header--site .logo-space { 
    display: none; 
} 

header.header--site .search-box { 
    display: none; 
    width: fit-content; 
} 

header.header--site .nav--user { 
    grid-area: 2/3/3/4; 
    justify-self: end; 
} 

/*----------- Main Navigation Menu Styling ----------------------*/

/* Standard menu color */
#mainNav li a, 
.header--site li a,  
header.header--site .cart-indicator .cart-content-count {
    color: #736f6c; /* Standard menu color */
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.header--site li .cart-indicator a i {
    color: #736f6c; /* Standard menu color */
    font-weight: 400;
    text-transform: uppercase;
}

/* Hover effect: changes color to white */
#mainNav li a:hover, 
.header--site li a:hover, 
.header--site li div.cart-indicator a:hover i, 
.header--site li div.cart-indicator a:hover span {
    color: white;
}

/* Calendar Icon Styling (Follows Nav Rules) */
#mainNav .fa-calendar, 
.header--site .fa-calendar {
    color: #736f6c; /* Standard color */
}

#mainNav .fa-calendar:hover, 
.header--site .fa-calendar:hover {
    color: white; /* Hover color */
}

/*----------- User Navigation Styling ----------------------*/

/* Standard menu text color */
.nav--user ul.nav-list li a {
    color: #736f6c !important; /* Force the default color */
    font-family: "Inter Tight", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    transition: color 0.25s ease-in-out;
}

/* Hover effect: changes text color to white */
.nav--user ul.nav-list li a:hover {
    color: white !important;
}

/* Icons inside .nav--user follow the same color rules */
.nav--user ul.nav-list li a i {
    color: #736f6c !important; /* Default icon color */
    transition: color 0.25s ease-in-out;
}

.nav--user ul.nav-list li a:hover i {
    color: white !important; /* Icon color on hover */
}
/*----------- Hero Image -------------------------------*/ 
.container--homepage .homepage__callouts { 
    grid-area: slider; 
    margin-inline: -16px; 
    position: relative; 
} 

.container--homepage .homepage__callouts .callouts { 
    display: block; 
} 

.homepage__callouts .callout { 
    box-shadow: none; 
} 

.container--homepage .homepage__callouts img { 
    outline: 3px solid var(--gray); 
    outline-offset: -3px; 
} 

/*----------- Hero Pseudo Elements -------------*/ 
@media only screen and (min-width: 1440px) { 
    .container--homepage .homepage__callouts::before, 
    .container--homepage .homepage__callouts::after { 
        position: absolute; 
        content: ''; 
        width: calc(((100vw - var(--container-max-width) - 32px) / 2) + 0.5px); 
        top: 0; 
        height: 100%; 
        background: var(--gray); 
    } 
    .container--homepage .homepage__callouts::before { 
        right: 100%; 
        z-index: 0; 
    } 
    .container--homepage .homepage__callouts::after { 
        left: 100%; 
        z-index: 1; 
    } 
} 

/*----------- Body + Background -----------------------------*/ 
body, .container#bodyContainer { 
    background: #eee; 
} 
/*#bodyContainer {
  min-height: 700px;
}*/

/*----------- Homepage Category Cards -----------------*/ 
.homepage__categories { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    margin-top: 32px; 
    list-style: none;
} 
/*============ 3rd Card Temporary ===================
.homepage__categories .category-textBlock {
  position: relative;
}
.homepage__categories .category-textBlock::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background-image: url('/images/arrows/arrow1.png');
  background-size: contain;
  background-position: 50% 50%;
  filter: brightness(0) saturate(100%) invert(42%) sepia(55%) saturate(7492%) hue-rotate(356deg) brightness(97%) contrast(105%);
  transform: scaleX(-1) rotate(225deg);
}
.homepage__categories .category-textBlock h2 {
  color: var(--gray);
  text-transform: uppercase;
  z-index: 999;
}========================================*/
.homepage__categories .category-wrapper { 
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
} 
.homepage__categories .category-wrapper {
    background: none;
    transition: .25s;
    height: 460px;
    overflow: hidden;
}
.homepage__categories .category-wrapper:hover { 
    background: var(--gray); 
} 

.homepage__categories .category-wrapper a { 
    padding: 10px; 
    display: grid;
    grid-template: none;
} 
.homepage__categories .category-wrapper .top {
  grid-area:1/1/2/4;
}
.homepage__categories .category-wrapper .bottom {
  grid-area: 2/2/3/3;
width: 380px;
    height: 460px;
    overflow: hidden;
}
.homepage__categories .category-wrapper a:hover { 
    text-decoration: none; 
    color: var(--gray); 
} 

.homepage__categories .category-wrapper .top h2 { 
    color: var(--gray); 
    font-size: clamp(24px, 18vw, 28px); 
    font-weight: 500; 
    transition: .25s; 
    text-transform: uppercase;
text-align: center;
display: none !important;
} 

.homepage__categories .category-wrapper:hover a h2 { 
    color: white; 
} 
.homepage__categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 32px auto;
    max-width: 800px;
    list-style: none;
}

/*----------- Pages – General -------------------------------------*/ 
#bodyContainer .page__title h1 { 
    font-family: "Archivo Black", sans-serif; 
    text-transform: uppercase; 
    font-size: clamp(36px, 10vw, 5em); 
} 
#standardView {
  margin-bottom: 64px;
}

/*----------- Category Page(s) -------------------------------------*/ 
.products.products--grid .product .product__title h3 a { 
    color: var(--gray); 
    font-family: "Inter Tight", sans-serif; 
    text-transform: uppercase; 
    font-weight: 400; 
} 

/*----------- Product Page -------------------------------------*/ 
#productTemplate .page__title h1 { 
    font-size: clamp(36px, 10vw, 4em); 
} 
.product .product__info .product__copy, .product .product__info .product__cta {
  display: none;
}

/*----------- Cart --------------------------------------------------*/
.cart__footer__info {
  border-top: none;
}

/*----------- Checkout ------------------------------------------*/ 
.checkout .checkout__header .title h1 { 
    font-family: "Archivo Black", sans-serif; 
    text-transform: uppercase; 
} 

.checkout .order-overview .oo-wrapper *, 
.checkout .order-overview .oo-wrapper .oo-title h3 { 
    color: var(--gray); 
} 
.checkout .order-overview .oo-wrapper .button--theme--primary, .checkout .order-overview .oo-wrapper .button--theme--primary i {
  color: white;
}

/*----------- Alerts -----------------------------------------------*/ 
.alert, .alert--error, .flash, .alert--information, .flash--information {
  color: var(--orange);
  background: var(--lightOrange);
  border-left: 3px solid var(--orange);
  box-shadow: none;
  border-radius: 0;
  padding-left: 13px;
}
 .flash--information h2, .alert h1, .alert--info * {
  color: var(--orange);
}
.flash.flash--success {
color: green;
  background: rgba(0, 128, 0, .15);
  border-left: 3px solid green;
}
.product-landing .product__ordering .alert--error {
  display: none;
}

/*----------- Login ---------------------------------------------*/
.login {
  background: #eee;
}

@media only screen and (min-width: 500px) {
  header.header--site .logo-space.show {
    display: block;
    grid-area: 1/1/4/4;
    justify-self: center;
    align-self: center;
  }
  header.header--site .logo-space.show img {
    max-width: 200px;
  }
}

/*----------- Footer -----------------------------------------------*/ 

.footer-wrapper { 
    background: var(--gray); 
  align-self: end;
} 

footer.footer--site .footer-nav li a, 
footer.footer--site p, 
footer.footer--site .nav-list li a { 
    color: var(--medGray); 
}

/*----------- Order Confirmation Page Size Reduction -----------------*/
#bodyContainer .order-view .page__title h1 {
  font-size: 36px;
}
.order-confirmation {
  max-width: 900px;
  margin: 0 auto;
}

.order-confirmation .order-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Make the header smaller */
.order-confirmation .page__title h1 {
  font-size: clamp(28px, 8vw, 3em);
  margin-bottom: 16px;
}

/* Compact the order information cards */
.order-confirmation .card {
  padding: 16px;
  margin-bottom: 16px;
}

/* Reduce padding in tables */
.order-confirmation table td,
.order-confirmation table th {
  padding: 8px;
}

/* Make the order summary more compact */
.order-confirmation .order-summary {
  font-size: 0.9em;
}

/* Reduce spacing between sections */
.order-confirmation section {
  margin-bottom: 24px;
}

/* Make buttons smaller */
.order-confirmation .button {
  padding: 8px 16px;
}

/* Adjust for mobile screens */
@media only screen and (max-width: 768px) {
  .order-confirmation {
    padding: 0 16px;
  }
  
  .order-confirmation .page__title h1 {
    font-size: clamp(24px, 7vw, 2.5em);
  }
}

.mto {
  display: block;   /* forces it to a new line */
}
.imp-container-parent { position: sticky; top: 0; z-index: 100; }

.imp-container { background: black; color: white; font-size: .75rem; padding: .5rem; display: flex; gap: 1rem; justify-content: flex-start; align-items: center; }

select#userToImpersonate { width: 100%; }
.category .category__title h3 {
    display: none;
}