/*  
PET SHOP CSS v.2
Eric Girouard
*/

/* ============= START COLOR PALETTE ============= */

:root {
  --body-bg-color: #ffffff;
  --main-bg-color: #fff;
  --header-bg-color: #ffffff;
  --footer-bg-color: #444;
  --aside-bg-color: #ffffff;
  --bodytext-color: #444;
  --titles-color: #444;
  --subtitles-color: #444;
  --sub-subtitles-color: #444;
  --primary-nav-bg-color: #444;
  --footer-nav-bg-color: #ffffff;
  --products-theme-bg-color: #ffffff;
  --services-theme-bg-color: #ffffff;
  --highlight: #1c686c;
  --dark-border: #444;
  --pale-border: #d3d3d3;

  /* LoVeHA Rule 1: main */
  --main-text-link-color: #444;
  --main-text-visited-color: #777;
  --main-text-hover-color: #fc0093;
  --main-text-active-color: #ff0000;

  /* LoVeHA Rule 2: top nav */
  --primary-nav-link-color: #444;
  --primary-nav-visited-color: #777777;
  --primary-nav-hover-color: #2d2b66;
  --primary-nav-active-color: #ff0000;

  /* LoVeHA Rule 3: footer nav */
  --footer-nav-link-color: #fff;
  --footer-nav-visited-color: #9e9e9e;
  --footer-nav-hover-color: #56549d;
  --footer-nav-active-color: #ff0000;
}

/* ============= END COLOR PALETTE ============= */

/* ====================== START BACKGROUND/FOREGROUND COLORS =================== */

nav.primary-nav {
  color: var(--primary-nav-link-color);
  /* border: 1px solid var(--pale-border); */
}

main {
  background-color: var(--main-bg-color);
  color: var(--bodytext-color);
}

body.products {
  background-color: var(--products-theme-bg-color);
}

body.services {
  background-color: var(--services-theme-bg-color);
}

aside {
  background-color: var(--aside-bg-color);
}

footer {
  background-color: var(--footer-bg-color);
  color: var(--primary-nav-link-color);
}

/* ====================== END BACKGROUND/FOREGROUND COLORS =================== */

html {
  font-size: 100%;
}

/* ========= START TYPE THEORY ========= 
  
  Default font size in web design is 16px.
  An "em" is the height of a lowercase letter M in the chosen font.
  
  1em = 16px
  But EMs change with context (ex: h1 vs p = not same lowercase m height)
  
  1rem ("root em") = Always refers to lowercase m of eric-corporate/root element. Never changes. More predictable for designers. Also makes spacing more consistent across the entire site.
  
  html {font-size: 100%;}
  Forces HTML tag to use eric-corporate. Avoids possible variations between browsers.
  
  =========  END TYPE THEORY =========  */

/* ==================== START TYPOGRAPHIC SCALE 
  
  See: https://spencermortensen.com/articles/typographic-scale/
  
  ==================== */

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2.1677em;
}

h3,
legend {
  font-size: 1.8796em;
}

h4 {
  font-size: 1.6298em;
}

h5,
label {
  font-size: 1.4132em;
}

h6 {
  font-size: 1.2254em;
}

p {
  font-size: 1.0625em;
}

/* 17px */
small {
  font-size: 0.9213em;
}

/* Also useful for aside or footer */

/* ==================== END TYPOGRAPHIC SCALE ==================== */

/* ==================== START BASIC TYPOGRAPHY ==================== */

h1,
h2,
h3,
h4,
h5,
h6,
label,
legend {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

h1 span {
  /* If you want a "second part" in the H1, put it in a <span> tag */
  display: block;
  font-size: 75%;
  position: relative;
  top: -0.8rem; /* Adjust spacing below main part of H1 */
}

h1,
h2 {
  color: var(--titles-color);
}

h3 {
  color: var(--subtitles-color);
}

h4,
h5,
h6 {
  color: var(
    --sub-subtitles-color
  ); /* Helps complex pages like shipping be more easily understood */
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4; /* leading */
}

ol {
  list-style-type: decimal;
  margin-left: 2rem;
}

main ul:not(.imgNav) {
  list-style-type: circle;
  margin-left: 2rem;
}

/* ==================== END BASIC TYPOGRAPHY ==================== */











  
  
  
  
  
  
  /* =======================  START DEFAULT SPACING ======================= */
  
  header, nav {
  margin-bottom: 0;
}

main {
  margin: 3rem 0 4rem 0; /* Lots of space above/below the main */
}
/* CSS shorthand: clockwise starting at noon */

footer {
  margin-top: 2rem; /* Lots of space above the footer */
}

p,
li:not(nav li) {
  max-width: 65ch; /* Limit text width to an ideal measure */
}

main img {
  margin: 0 0 1rem 0; /* always have a space below an image */
}

/* =======================  END eric-corporate SPACING ======================= */

/* ============= TYPOGRAPHIC SPACING ============== */

/* 
     Typography: titles always have more space **above** than below.
     This keeps the title close its content, further away from other content.
  
     Using EMs keeps spacing proportional to the size of the H tag in use. 
     Compare with using REMs. Use whichever you prefer. I recommend REMs. 
  */

h1 {
  margin: 1rem 0rem 1rem 1rem; /* h1 is outside the main, so inset by 1rem on mobile. Won't touch edge of screen. */
  line-height: 1.15;
}

h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem 0; /* More space above than below. Adjust to taste. */
}

p {
  margin: 0 0 1rem 0; /* one line of eric-corporate space after */
}

body {
  line-height: 1.4; /* Adjust between 1 and 2 */
}

main {
  padding: 0 1rem; /* 1rem of whitespace on left/right on mobile. */
}

/* ============= END TYPOGRAPHIC SPACING ============== */















/* ============ START HEADER AREA ============== */


/* ====================== START LOGO =================== */

#logo {
  height: 1.6rem;
  width: auto;
  margin: 0;
}

  /* ====================== END LOGO =================== */



header .slogan span {display: none;}

header > div {
	display: flex;
	margin: 1rem;
}

.slogan {
  padding: 0 0 0 1rem;
}

.slogan a {
	text-decoration: none;
	font-weight: bold;
	color: var(--highlight);
	font-size: 1.6rem;
	position: relative;
	top: -0.3rem;
}


/* ============ END HEADER AREA ============== */










/* ===================  START TOP NAV CODE ======================= */

ul#menu {
  display: none; /* Hide menu by eric-corporate when page loads on mobile */
}

.primary-nav .align-right {
  /* Specific to hamburger menu */
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/* nav.primary-nav {
    background: linear-gradient(0deg, #1d3a41, #265259); /* Not Flat Color, flat is boring when used all the time 
  } */

nav.primary-nav button {
  /* Add the clickable "hamburger icon" to show the menu */
  height: 32px;
  width: 32px;
  display: block;
  border: none;
  background-image: url(../img/hamburger.svg);
  background-size: contain;
  background-color: transparent;

  cursor: pointer; /* UX: Cursor changes to pointing hand, therefore something must happen if the cursor changes. Does not apply to mobile as there is no mouse, so no "click". */

  padding: 0;
  filter: invert(100%); /* Switch SVG from black to white */
}

ul#menu.show-nav {
  /* .show-nav class that javascript adds to force the menu to display when hamburger tapped  */

  display: block !important; /* Avoid using !important unless absolutely necessary, here menu MUST appear */
  width: 80%; /* Adjust to taste */
  margin: 0 auto; /* Show menu immediately under the header, no space, but centered */
  padding: 2rem 0; /* Add space at top and bottom of menu box */
}

ul#menu.show-nav li {
  /* Stacked links on mobile menu */

  margin: 0 auto 1rem auto; /* Spaced apart for easy finger tapping */

  /* border: 1px solid var(--pale-border); */
  padding: 0.5rem 0 0.5rem 1rem;
}

ul#menu.show-nav li:not(.submenu-parent) {
  /* Adds background color to nav buttons, but does :NOT surround the submenu parent box */
  /* background-color: rgba(255, 255, 255, 0.1); */
}

nav.primary-nav a {
  /* Force anchor tag to fill "button" area, so you can tap beside the text and link still works */

  display: block; /* If block, you can now set height and width */

  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: 0 0.95rem;
}

/* ==== START LoVeHA for Top Nav ==== */

nav.primary-nav a:link {
  color: var(--primary-nav-link-color);
}

nav.primary-nav a:visited {
  color: var(--primary-nav-visited-color);
}

nav.primary-nav a:hover {
  color: var(--primary-nav-hover-color);
  text-decoration: none;
}

nav.primary-nav a:active {
  color: var(--primary-nav-active-color);
}
/* ==== END  LoVeHA for Top Nav ==== */

ul#menu.show-nav li.submenu-parent {
  border: none;
}

ul#menu.show-nav li.submenu-parent a:first-child:not(.submenu a) {
  /* Control submenu parent only */
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  display: inline-block;
  position: relative;
  left: -1rem;
}

.align-right {
  /* General rule for all align right uses */
  display: flex;
  flex-direction: row;
  justify-content: end;
}
/* Aligns the hamburger to the right */

/* ===================  END TOP NAV CODE ======================= */













/* ============ START TABLE ============== */

table {
  width: 100%;
}

th {
  font-weight: bold;
  text-align: left;
}

td {
  border: 1px solid #dfdfdf;
  padding: 0.25rem;
}

/* ============ END TABLE ============== */











/* ======================== START SIDEBAR ========================== */

aside {
  padding: 1rem;
  background-color: var(--body-bg-color);
  font-size: small;
}

/* ======================== END SIDEBAR ========================== */











/* ============ START WRAPPER IMAGES ============== */

.wrapper {
  /* more general rule applies to all .wrapper divs */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 70vw;
  background-color: var(--body-bg-color);
  position: relative;
  background-blend-mode: normal;
}

body.home .wrapper {
  /* one line more specific rule to customize each page */
  background-image: url(../img/andrew-s-ouo1hbizWwo-unsplash.jpg);
}

body.credits .wrapper {
  background-image: url(../img/stacey-koenitz-bduka9UJzrk-unsplash.jpg);
}

body.products .wrapper {
  background-image: url(../img/dollar-gill-PymJFLYZdeg-unsplash.jpg);
}

body.cat-products .wrapper {
  background-image: url(../img/anton-kraev-TuU5tODcrzU-unsplash.jpg);
}

body.dog-products .wrapper {
  background-image: url(../img/victor-grabarczyk-N04FIfHhv_k-unsplash.jpg);
}

body.bird-products .wrapper {
  background-image: url(../img/david-clode-0lwa8Dprrzs-unsplash.jpg);
}

body.reptile-products .wrapper {
  background-image: url(../img/ekamelev-RTDMLoPUyVI-unsplash.jpg);
}

body.fish-products .wrapper {
  background-image: url(../img/claudio-guglieri-K2RH1QZdLF4-unsplash.jpg);
}

body.services .wrapper {
  background-image: url(../img/karsten-winegeart-loJL4ijUobg-unsplash.jpg);
}

body.frozen-raw-food-services .wrapper {
  background-image: url(../img/usman-yousaf-eOktYr3tAMo-unsplash.jpg);
}

body.store-pickup-services .wrapper {
  background-image: url(../img/mick-haupt-Hwkl6xh-6Ag-unsplash.jpg);
  background-position: 0 -48px;
}

body.dog-wash-services .wrapper {
  background-image: url(../img/ottr-dan-AA-qAyHj9m0-unsplash.jpg);
}

body.pet-adoption-services .wrapper {
  background-image: url(../img/wade-austin-ellis-FtuJIuBbUhI-unsplash.jpg);
  background-position-y: -33px;
}

body.faq .wrapper {
  background-image: url(../img/camylla-battani-AoqgGAqrLpU-unsplash.jpg);
}

body.gift-cards .wrapper {
  background-image: url(../img/ekaterina-shevchenko-ZLTlHeKbh04-unsplash.jpg);
}

body.about .wrapper {
  background-image: url(../img/mike-petrucci-c9FQyqIECds-unsplash.jpg);
}

body.careers .wrapper {
  background-image: url(../img/petrebels-kuzJU_dlBls-unsplash.jpg);
}

body.privacy .wrapper {
  background-image: url(../img/towfiqu-barbhuiya-FnA5pAzqhMM-unsplash.jpg);
}

body.grooming-services .wrapper {
  background-image: url(../img/boney-dHIRbh9En6I-unsplash.jpg);
}

body.shipping .wrapper {
  background-image: url(../img/victoria-kubiaki-t0Aio60jD4Q-unsplash.jpg);
}

body.contact .wrapper {
  background-image: url(../img/firmbee-com-SpVHcbuKi6E-unsplash.jpg);
}

/* ============ END WRAPPER IMAGES ============== */
































/* ===============  START FORM CODE ================= */

input,
label {
  display: block;
}

input {
  margin: 0 0 2rem 0;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  padding-left: 1rem;
  border: 1px solid var(--dark-border);
}

fieldset {
  padding: 1rem;
  border: 1px solid var(--pale-border);
  margin: 3rem 0 3rem 0;
}

legend {
  background-color: var(--main-bg-color);
  padding: 0 2rem;
}

textarea {
  margin: 0 0 2rem 0;
  width: 100%;
  min-height: 20rem;
  line-height: 2rem;
  padding: 1rem;
  border: 1px solid var(--dark-border);
}

input[type="submit"],
input[type="reset"] {
  padding: 0 2rem;
  border-radius: 0.4rem;
  color: var(--bodytext-color);
  height: 3rem;
  line-height: 1.9rem;
  border: 2px solid #fff;
  font-weight: bold;
  width: fit-content;
}

input[type="file"] {
  border: none;
  margin-top: 0.5rem;
}

#submit {
  background-color: var(--main-bg-color);
}

#reset {
  background-color: var(--main-bg-color);
  margin-right: 1rem;
}

#submit:hover {
  background-color: var(--main-bg-color);
  cursor: pointer;
}

#reset:hover {
  background-color: var(--main-bg-color);
  cursor: pointer;
}

#submit:active {
  background-color: var(--main-bg-color);
  cursor: pointer;
}

input::file-selector-button {
  background-color: var(--main-bg-color);
  border: 1px solid var(--dark-border);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
}

#submit:active,
#reset:active {
  background-color: var(--highlight);
}

body.contact iframe {
  width: 100%;
  height: 26rem;
  margin: 0 0 3rem 0;
  border: 1px solid var(--dark-border);
}

section {
	background-color: var(--main-bg-color);
	margin: 0 0 3rem 0;
	padding: 2rem;
}

/* ===============  END FORM CODE ================= */
















/* --------------------  START ASIDE SIDEBAR ------------------- */

.dogSale,
.catSale {
  display: grid;
  grid-template-columns: auto auto;
  margin: 1rem 0;
  padding: 0;
  column-gap: 1rem;
  row-gap: 1rem
}

.saleProduct {
  border: 1px solid var(--pale-border);
  padding: 0;
  box-shadow: 2px 2px 6px rgba(44, 44, 44, 0.1);
}


.saleProduct figcaption {
  padding: 0.75rem;
}


.brand {
  text-transform: uppercase;
}

.saleProductName {
  font-weight: bold;
}

/* --------------------  END ASIDE SIDEBAR ------------------- */













/* ================== START IMG NAV ======================= */

main .imgNav {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 0.5rem;
}

main .imgNav li {
  height: 150px;
  max-width: unset;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--body-bg-color);
  background-blend-mode: overlay;
}

main .imgNav li a {
  display: flex;
  height: 100%;
  width: 100%;
  text-align: center;
  color: var(--body-bg-color);
  font-size: 1.7rem;
  text-shadow: 2px 2px 2px #000;
  text-decoration: none;
  font-weight: 300;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.imgNav.productsNav li a {
  padding: 1rem;
}

.imgNav.servicesNav li:nth-child(3) a {
  padding: 0.3rem;
}

.imgNav.servicesNav li:nth-child(4) a {
  padding: 0.3rem;
}

.imgNav.servicesNav li:nth-child(5) a {
  padding: 0.3rem;
}

/* ==== START .IMGNAV ADD BACKGROUND IMAGES ====== */

/* PRODUCTS */

main .imgNav li.bird {
  background-color: #621e1e;
  background-image: url(../img/david-clode-0lwa8Dprrzs-unsplash.jpg);
}

main .imgNav li.dog {
  background-color: #374413;
  background-image: url(../img/victor-grabarczyk-N04FIfHhv_k-unsplash.jpg);
}

main .imgNav li.cat {
  background-color: #0f3c43;
  background-image: url(../img/anton-kraev-TuU5tODcrzU-unsplash.jpg);
}

main .imgNav li.reptile {
  background-color: #322e86;
  background-image: url(../img/ekamelev-RTDMLoPUyVI-unsplash.jpg);
}

main .imgNav li.fish {
  background-color: #411140;
  background-image: url(../img/claudio-guglieri-K2RH1QZdLF4-unsplash.jpg);
}

/* SERVICES */

main .imgNav li.grooming {
  background-color: #420d20;
  background-image: url(../img/boney-dHIRbh9En6I-unsplash.jpg);
}
main .imgNav li.raw {
  background-color: #444;
  background-image: url(../img/usman-yousaf-eOktYr3tAMo-unsplash.jpg);
}
main .imgNav li.adoption {
  background-color: #3c4510;
  background-image: url(../img/wade-austin-ellis-FtuJIuBbUhI-unsplash.jpg);
}
main .imgNav li.wash {
  background-color: #16604b;
  background-image: url(../img/ottr-dan-AA-qAyHj9m0-unsplash.jpg);
}
main .imgNav li.pickup {
  background-color: #3e3e3e;
  background-image: url(../img/mick-haupt-Hwkl6xh-6Ag-unsplash.jpg);
}

/* ==== END ADD .IMGNAVBACKGROUND IMAGES ====== */

/* ================== END IMG NAV ======================= */














/* =====================  FOOTER CODE ======================== */

footer {
  font-size: small;
  color: var(--footer-nav-link-color);
  padding: 1rem;
}

footer nav ul li:first-child {
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  text-decoration: none;
  color: var(--body-bg-color);
  border-bottom: 2px solid var(--body-bg-color);
  padding-bottom: 0.26rem;
}

footer nav ul {
	margin: 1rem 0rem 3rem 0rem;
}

footer nav ul li:not(:first-child) {
  height: 44px;
}

footer ul li:not(:first-child) a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: var(--body-bg-color);
}




/*  
  footer nav ul li:first-child {
      font-weight: bold;
      margin: 0 0 0.5rem 0;
      text-decoration: none;
      color: var(--highlight);
      border-bottom: 2px solid var(--highlight);
      padding-bottom: 0.26rem;
  }
  
  footer nav ul li a:link {
    color: var(--footer-nav-link-color);
    text-decoration: none;
  }
  
  footer nav ul li a:visited {
    color: var(--footer-nav-visited-color);
  }
  
  footer nav ul li a:hover {
    color: var(--footer-nav-hover-color);
    text-decoration: underline;
  }
  
  footer nav ul li a:active {
    color: var(--footer-nav-active-color);
  } */

/* =====================  END FOOTER CODE ======================== */

/* ===================== VISUALIZE OUTER BLOCKS ======================== */

/* header, main, aside, footer {border: 3px dashed red;}

  .wrapper {border: 3px dashed blue;} */

/* ===================== VISUALIZE OUTER BLOCKS ======================== */














/* ===================== START MEDIA QUERY ======================== */

@media screen and (min-width: 1025px) {

header {
  display: flex;
  justify-content: space-between;
}



#logo {
	height: 2.6rem;
	width: auto;
	margin: 0;
	position: relative;
	top: 0.3rem;
  max-width: unset;
}

header .slogan span {
	display: block;
	font-size: 60%;
	color: var(--bodytext-color);
  white-space: nowrap; 
}

h1 {
	width: unset;
	margin: 2rem auto;
	background-image: url(../img/dollar-gill-PymJFLYZdeg-unsplash.jpg);
	height: 23rem;
	background-size: cover;
	background-position-y: 33%;
	display: flex;
	align-content: center;
	text-align: center;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 5rem;
	font-weight: bold;
	text-shadow: 1px 2px 4px #444;
}

body.home .wrapper,
body.about .wrapper,
body.contact .wrapper,
body.careers .wrapper,
body.faq .wrapper,
body.gift-cards .wrapper,
body.privacy .wrapper
    {
    background-image: unset;
    width: 60rem;
    margin: 0 auto;
    position: relative;
    top: -8rem;
    padding: 2rem;
    border-radius: 2rem;
    display: flex;
    border: 1px solid #e9e9e9;
}


  main {
    flex: 7;
    padding: 0;
    margin: 0;
  }
  
  main h2:first-child {
	position: relative;
	top: -2rem;
	/* font-weight: bold; */
}


aside {
	flex: 3;
	position: relative;
	border: 1px solid #eee;
	border-radius: 2rem;
	top: 9rem;
	left: 10rem;
	padding: 2rem;
	height: calc(100% - 6rem);
}


  figure {
    border: unset;
  }

  .dogSale, .catSale {
    margin: 0.5rem 0;
    }

.saleProduct {
      border: unset;
      padding: 0;
      box-shadow: unset;
    }

.saleProduct figcaption {
    padding: 0.5rem;
    }

  aside {
    flex: 3;
  }

  footer nav {
    display: flex;
  }

  footer nav ul {
    margin: 3rem 2rem;
    flex: 1;
  }

  /* ============ START DESKTOP NAVIGATION ================= */
    
  nav.primary-nav button {
    display: none; /* Hide hamburger icon on desktop */
    } 

.primary-nav .align-right {
    display: none;  /* Hide the hamburger div on desktop to prevent it interfering with other elements on the page */ 
}


ul#menu {
    display: flex; /* Make menu display side-by-side */
    margin: 0 auto;
    flex-wrap: wrap;  /* wrap to a second line if we run out of space */
}


.submenu {
    display: none;
    }  /* By default, hide the drop down menu */


.submenu-parent {
    position: relative;
    }  
/* Forces absolutely positioned child element (.submenu, below) to be positioned  relative to the top/left corner of this element (because it has some sort of positioning rule) */


.submenu-parent:hover .submenu {  /* The drop down submenu */

    display: block; /* Display the menu on hover */         
    position: absolute; /* Place it on a layer */
    z-index: 200; /* Make sure the layer is on top of everything else */
    top: 1.5rem; /* adjust this value DOWN if menu disappears before your mouse reaches it */
    left: -0.05rem; /* Set the position of the .submenu relative to the top/left corner of the **first parent element that has a positioning rule**, in this case: .submenu-parent */

    background-color: var(--body-bg-color);
    border: 1px solid var(--pale-border);
    width: 17rem; /* Make wide enough to keep links from wrapping onto two lines */
    padding: 1rem; /* Inset links within the submenu */
}


nav.primary-nav { /* Outer box that holds the menu */

    background-color: var(--body-bg-color);
    color: var(--primary-nav-link-color); /* Text Color */
    height: 3rem; /* Only give heights to elements that you fully control, otherwise use min-height instead */
    padding-top: 0.7rem;
    border-radius: 0 0 0.8rem 0.8rem;
    margin: 2.2rem 0 0 0; /* align with baseline of slogan */
}

ul#menu > li {
    padding: 0;
    margin: 0 0.25rem;
}

main .imgNav li:hover {
  background-image: unset;  /* mouse rollover effect */
} 


body.products div.wrapper {
  display: block;
}

body.products div.wrapper .dogSale,
body.products div.wrapper .catSale {
            display: grid;  /* overrides display flex */
            grid-template-columns: 1fr 1fr 1fr;  /* three columns */
            flex: unset; /* completely turn off flex, just to be safe */
        }

/* .saleProduct {
            margin: 3rem;
        } */


/* ============ START GRIDBOX FOR PRODUCT SHOTS =================== */
  
.grid-box {
  display: grid; /* Displays product photos in a grid pattern */

  grid-template-columns: 1fr 1fr 1fr; /* Add or remove "1fr" to add or remove columns in the grid */
  grid-gap: 2rem; /* Spacing in between rows and columns, adjust to taste */
}

  main ul.product-details {
      list-style-type: none;  /* remove the bullets from product info */
  }


  body.products div.wrapper .dogSale,
  body.products div.wrapper .catSale {
              display: grid;  /* overrides display flex */
              grid-template-columns: 1fr 1fr 1fr;  /* three columns */
              flex: unset; /* completely turn off flex, just to be safe */
          }
  
 body.products div.wrapper .saleProduct {
            margin: 3rem; /* more margin in a limited space = smaller figures */
        }
  
        
        body.products div.wrapper aside h3 {
          border-top: 1px solid var(--highlight);
          padding-top: 1rem;
          margin-top: 10rem;
      }

/* ============ END GRIDBOX FOR PRODUCT SHOTS =================== */



} /* ===================== END MEDIA QUERY ======================== */

/*
         OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
         .HIDE-TEXT FOR IMAGE REPLACEMENTS
         SEE: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
  
       Hide text on screen, but leave the actual word on the page for screen reader software to read out loud to blind users.
  */

.hide-text {
  /* Hides the word "menu" so we only see hamburger SVG.  */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
}

.currentpage, .currentpage2 {
  /* color: var(--highlight) !important; */
  color: orange !important;
  font-weight: bold !important;
}

/* nav.primary-nav ul#menu li.submenu-parent:has(ul.submenu > li >)  */

li.submenu-parent:has(a.currentpage2) a#products, 
li.submenu-parent:has(a.currentpage2) a#services {
 border-bottom: 3px solid orange !important;
 padding-bottom: 0.25rem;
}

/* 
     CURRENT PAGE UX
  
     Highlights current location in menu for better UX.  
     Must add class="currentpage" to every link (anchor tag) for this to be useful.
  
     Ex: On home change <li><a href="index.html">home</a></li> to <li><a href="index.html" class="currentpage">home</a></li>
  
     Repeat for every page.
  */