/* The Green Room */
/* File: Main Stylesheet */
/************************/

/* global visual/formatting styles */

*+* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: var(--greenroom-black-background);
}

ul {
  list-style-type: none;
}

/* TODO(donny): remove colors that aren't used */
:root {
  --greenroom-slate-blue: rgba(75, 107, 128, 1);
  --greenroom-couch-green: rgba(169, 181, 111, 1);
  --greenroom-nails-pink: rgba(178, 142, 127);
  --greenroom-iron-ore: rgba(103, 111, 118, 1);
  --greenroom-iron-ore-mod: rgba(12, 39, 32);
  --greenroom-leaf-green: rgba(64, 123, 76, 1);
  --greenroom-stem-green: rgba(158, 236, 137, 1);
  --greenroom-black-background: rgba(12, 25, 31, 1);
}

/* NOTE(donny): BRM theme overrride */
.site-header,
.latest_post_wrap {
  display: none;
}


/* end global visual/formatting styles */

/*
 *
 */


/* page typography */
:root {
  --gr-font-display: SatisfactionPro;
  --gr-font-display-2: "Six Caps";
  --gr-font-body: ModernLove-Caps;
}

a {
  text-decoration: none;
}

a,
a:visited {
  color: var(--greenroom-leaf-green) !important;
}

h1,
h2 {
  text-transform: lowercase;
}

h2,
h3 {
  font-family: var(--gr-font-display);
}

h1,
p,
a {
  font-family: var(--gr-font-body);
}

p {
  /* fluid type */
  --font-factor: 16.3px;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
  line-height: 1.3;
}

.product_title {
  color: var(--greenroom-leaf-green);
}

/* end page typography */

/*
 *
 */

/* button styles */

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
}

.button-container a {
  text-decoration: none;

  align-self: center;
  padding: 0.2rem 0.65rem;
  letter-spacing: 2px;
  font-size: 1.3rem;

  color: var(--greenroom-leaf-green);
  background-color: var(--greenroom-stem-green);
  filter: brightness(-0.5);
}


/* end button styles */

/*
 *
 */

/* index page specific layout */

main {
  display: flex;
  flex-direction: column;
}

.sec-1 {
  height: 66vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: url(./../images/_1070546.jpg);
  background-position: center;
  background-size: cover;
}

/* different background images based off of some other class higher up the tree */
.menu-page .sec-1,
.woocommerce-checkout .sec-1,
.single-product .sec-1,
.woocommerce-cart .sec-1,
.gr-about .sec-1 {
  height: 44vh;
}

.gr-about .sec-1 {
  background-image: url(./../images/_1070617.jpg);
  height: 50vh;
}

.menu-page .sec-1 {
  background-image: url(./../images/_1070573.jpg);
}

.single-product .sec-1 {
  background-image: url(./../images/_1070598.jpg);
  overflow: hidden;
}

.woocommerce-cart .sec-1 {
  background-image: url(./../images/_1070598.jpg);
}

.woocommerce-checkout .sec-1 {
  background-image: url(./../images/_1070609.jpg);
}

svg {
  z-index: 1;
  /* padding: 2% 0 5% 0; */
  background-color: rgba(12, 25, 31, .8);
  max-width: 40rem;
}

.sec-2 {
  height: 34vh;
  width: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  margin: 0 auto;
  background-color: var(--greenroom-iron-ore-mod);
  color: var(--greenroom-leaf-green);
}

.sec-2 nav ul {
  list-style-type: none;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  margin-left: 0;
  padding-left: 0;

  color: var(--greenroom-leaf-green);
}

.sec-2 nav ul li {
  letter-spacing: 1.25px;
}

.sec-2>* {
  width: 96%;
  margin: 0 auto;
}

.sec-3 {
  width: 100vw;
  /* display: flex; */
}

.sec-3 .img-container {

  /* uncomment when ready to go live with gloria */
  
    /* display: flex;
    justify-content: center;
    gap: 5rem; */
  
    flex-basis: 100%;
}

.img-container {
  max-width: 100%;
  height: 13rem;
  display: grid;
  align-items: center;

  background-size: cover;
}

.img-container .button {
  justify-self: center;
}

.img-container .button:nth-child(2) {
  justify-self: end;
}

.img-container a {
  font-size: 2rem;
  padding: 0.2rem .5rem;
  background-color: var(--greenroom-nails-pink);
}

.sec-4,
.paintings {
  display: flex;
  justify-content: space-around;
  padding-bottom: 2rem;
}

.sec-4 img {
  display: none;
  width: 45%;
  max-width: 400px;
  padding: 1.5rem 0 2.5rem 0;
}

.sec-4>div {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sec-4>div p:first-of-type {
  padding-top: 0px;
}

.sec-4>div p {
  padding: .5rem 0.5rem !important;
}

.sec-4>div p:last-of-type {
  padding-bottom: 0;
}

.sec-4>div p,
.sec-4>div h2 {
  color: var(--greenroom-leaf-green) !important;
  padding: 0 .5rem;
  font-size: 1.3rem;
}

.sec-4>div h2 {
  padding-bottom: 0;
  font-family: var(--gr-font-body);
  font-size: 2.3rem;
  line-height: 1.2;

}



.sec-4 ul {
  align-self: center;
  justify-self: center;
  padding: 0 0 0 0;
  display: flex;
  gap: 1rem;
  --font-factor: 1.3rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
  justify-content: space-between;
  padding: 0 .3rem;
}

@media screen and (min-width: 1600px) {
  .sec-4 ul {
    font-size: 30px;
  }
}

.sec-5>figure {
  margin: 0;
}

.sec-5-2 {
  display: flex;
}

.sec-5-2>div:first-child {
  display: flex;
  justify-content: center;
}

.sec-5-2 img {
  width: 80%;
}

.sec-5-2>div:last-child {
  display: flex;
  flex-direction: column;
  --font-factor: 24.3px;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
  justify-content: center;
  align-items: center;
}

.sec-5-2>div {
  flex-basis: 50%;
}

.sec-6 {
  display: flex;
  justify-content: space-around;

}


.sec-6>div img {
  padding: 2rem 0;
  width: 40vw;
}


footer {
  /* NOTE(donny): I think i added the line below to adjust the footer on one page, only to realize later that I'd updated the same element on a different page in a way that I had not intended to do
  
  another thing that was annoying, is that when I = made the change to reverse this badness, when I went to go reload the page in brave, i got the same css, even though when I checked a private window i got the latest changes... what is the reason for that?*/

  /* margin: 117px 0px 0 0px; */
  padding: 1rem 5% 1rem 5%;
  color: var(--greenroom-leaf-green);
}



footer p {
  margin: 0;
  --font-factor: 16.2px;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula) !important;
}

@media screen and (max-height: 500px) {
  .sec-1 {
    height: 50vh;
  }

  .sec-2 {
    height: 60vh;
  }

}

@media screen and (min-width: 725px) {
  .sec-4 img {
    display: block;
  }

  .sec-4>div {
    padding: 0 .6rem;

  }
}

@media screen and (min-width: 830px) {
  .sec-2 {
    flex-direction: row-reverse;
  }

  .sec-2 p {
    align-self: center;
  }

  .sec-2 nav {
    justify-self: center;
    align-self: center;
  }

  .sec-2 nav ul {
    flex-direction: column;
  }

  .sec-2 p {
    font-size: 2rem;
  }

  .img-container {
    height: 25rem;
  }

  .img-container a {
    font-size: 3.2rem;
  }

  .sec-5 {
    display: flex;

  }

  .sec-5>figure:nth-child(1) {
    flex-basis: 50%;
  }

  .sec-5>figure:nth-child(2) {
    flex-basis: 50%;
  }
}

/* end index page specific layout */

/*
 *
 */

/* menu page specific layout */

.menu-page footer {
  margin: 117px 0px 0 0px;
}

.menu-page h2 {
  color: var(--greenroom-leaf-green);
  font-size: 3rem;
  margin: 0;
  padding: 0;
}

.menu-page figure {
  max-height: 40vh;
}

.wp-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2%;
  column-gap: 2%;
}

.brm-menu-section {
  margin: 0;
  flex-basis: 100%;
  color: var(--greenroom-leaf-green);
  background-color: var(--greenroom-iron-ore-mod);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, 0.2) 0);
}

.brm-menu-section {
  flex-basis: 100%;
  color: var(--greenroom-leaf-green);
  background-color: var(--greenroom-iron-ore-mod);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, 0.2) 0);
}

.wp-menu .brm-menu-section .brm-heading {
  display: none !important;
}

.wp-menu .brm-menu-section:first-child .brm-heading {
  display: flex !important;
  flex-direction: column;
  padding-bottom: 1rem;
  /*! display: flex; */
}

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

  .wp-menu .brm-menu-section:first-child .brm-heading {
    flex-direction: row;
    padding-left: 2rem;
    padding-bottom: 0;
  }

  .brm-heading-description {
    font-family: var(--gr-font-body);
    align-self: center;
    margin-top: 15px;
    margin-left: 60px;
  }
}

/* uncomment when ready to release online ordering */
/* @media screen and (max-width: 480px) {
  .sec-3 .img-container {
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
  }
} */

/* .wp-menu .brm-menu-section:first-child .brm-item:last-child .brm-item-price { */
/* display: none; */
/* } */

/* styling the happy hour section */
.brm-menu-section:first-child .brm-heading {
  text-align: center;
}

.brm-heading-description {
  font-family: var(--gr-font-body);
  align-self: center;
}

.wp-menu>.brm-menu-section>.brm-menu-section.nested-child {
  padding: 1rem 0 0 0;
  margin: 0;
}

.wp-menu .brm-menu-section.nested-child .brm-heading {
  display: block !important;
  margin: 0 auto;
}

.wp-menu .brm-menu-section .brm-menu-section.nested-child .brm-heading h2::after {
  content: "\2014";
}

.pl-developer {
  display: none;
}

.brm-menu-section:last-child {
  margin-bottom: 0;
}

.brm-menu-section:first-child {
  margin-bottom: -2rem;
  margin-top: 0;
  grid-row-start: 1;
  grid-row-end: 1;
  /*! margin: 0 auto; */
  grid-column-start: 1;
  grid-column-end: 3;
  min-width: 80%;
  justify-self: center;
  margin-top: 3rem;
}

.brm-menu-section h2 {
  /* fluid type */
  --font-factor: 3rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.brm-menu-section .brm-items {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  list-style: none;
  flex-basis: 42%;
  flex-wrap: wrap;
  background-color: var(--greenroom-iron-ore-mod);
  padding-top: 1rem;
  padding-bottom: 2rem;
  font-family: var(--gr-font-body);
}

.brm-menu-section .brm-item {
  padding: 5px;
  margin: 2px;
  flex-basis: 46%;
}

.pl-developer {
  display: none;
}

.brm-items>div {
  flex: 1;
  justify-content: center;
}

.brm-item {
  display: flex;
  justify-content: flex-start;
}

.brm-item>div {
  flex: 1;
}

.brm-item-details {
  display: grid;
  grid-template-columns: 85% 15%;
}

.brm-item-name {
  grid-column-start: 1;
  align-self: flex-end;
  font-size: 1.15rem;
}

.brm-item-price {
  order: 2;
  justify-self: center;
  align-self: end;
}

.brm-item-description {
  order: 2;
  grid-column-start: 1;
  padding-top: .2em;
  /* padding-left: .5em; */
  border-left: 1px solid var(--greenroom-iron-ore-mod);
  font-style: italic;
}

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

  .brm-menu-section .brm-item {
    padding: 5px 35px;
  }

  .wp-menu .brm-menu-section.nested-child .brm-heading {
    display: block !important;
    margin: 0 0 0 2rem;
  }
}

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

  .wp-menu {
    display: grid;
    /*! flex-wrap: wrap; */
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
  }

  .wp-menu>div {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 49%;
    grid-row-start: 2;
  }

  .menu-page svg {
    order: 0;
  }
}

/* @media screen and (min-width: 1000px) {}

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

/* end menu page specific layout */

/* fluid typography: https://css-tricks.com/snippets/css/fluid-typography/ */
/* i can use calc with a css property as the base factor for working with different font sizes while using the fluid typgraphy formula. */
/* html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  } 
} 

*/

/* begin about */

.gr-about {
  color: var(--greenroom-leaf-green);
}

/* note(donny): another ad hoc type change... BAD!  Centralize this stuff */
.gr-about .sec-2>h2 {
  font-family: var(--gr-font-body);
  --font-factor: 2rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
  font-style: italic;
  padding: 1rem 0 1rem 0;
}

.gr-about .sec-4 h3,
.gr-about .sec-4 h2 {
  font-family: var(--gr-font-body);
}

.gr-about .sec-2 {
  flex-direction: column;
  height: unset;
  max-width: 95%;
  background-color: var(--greenroom-black-background);
  padding: 0 0;
}

.gr-about .sec-2 h1 {
  --font-factor: 4rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);

  padding: 1rem 0 1rem 0;
}

.gr-about .sec-4 h2 {
  --font-factor: 2.5rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.gr-about .sec-2 p {
  --font-factor: 1.25rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.gr-about .sec-3>div {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;

  margin: 0 auto;
  width: max-content;
}


.gr-about .sec-3>div {
  text-align: center;
}

.gr-about .sec-3>div>div {
  display: inline-block;
  text-align: left;
  /* margin: 0 auto; */

}

.gr-about .sec-3>div>div {
  display: flex;
  flex-direction: column-reverse;
  padding: 1rem 0;
}

.gr-about .sec-3>div p {
  margin: 0;
}

.gr-about .sec-3>div p:first-child {
  --font-factor: 2rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.gr-about .sec-3>div p:last-child {
  --font-factor: 1.2rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

/* */
.gr-about .sec-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gr-about .sec-4 figure {
  max-width: 90%;
  margin: 0;
  padding: 2rem 0;
}

.gr-about .sec-4 img {
  display: block;

}

.gr-about .sec-4>figure>img {
  width: 100%;
  object-fit: cover;
  height: 25vh;
  padding: 0;
}

.gr-about .sec-4 figcaption {
  background-color: var(--greenroom-iron-ore-mod)
}

.gr-about .sec-4 figcaption h3 {
  margin: 0;
  --font-factor: 1.4rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.gr-about .sec-4 figcaption div {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
}

.gr-about .sec-4 figcaption p {
  font-style: italic;
}

.gr-about .sec-4 figcaption img {
  width: 90%;
  padding: 1rem
}

.gr-about .sec-4-2 figure {
  max-width: 90%;
  margin: 0 auto;
  height: 35rem;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.gr-about .sec-4-2 figure * {
  margin: 0;

}


.gr-about .sec-4-2 figure:nth-last-of-type(1) {
  background-image: linear-gradient(2deg, var(--greenroom-iron-ore-mod), 57%, transparent), url(../images/sacbee1.jpeg);
}

.gr-about .sec-4-2 figure h3 {
  --font-factor: 3rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);


}


/* end about */

/******************************************************************/

.fas,
.fab {
  color: var(--greenroom-leaf-green);
}

/* gift-card product page */

/* can think of this a selector root, and everything that is specific to this product page should be more specific than this selector. */
.single-product #main {
  background-color: var(--greenroom-black-background);
  font-family: var(--gr-font-body);
}

.product * {
  color: var(--greenroom-leaf-green);
}

/* make bring the product image in a bit */
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  padding: 1.5rem 4rem 0 4rem;
}

.summary.entry-summary {
  padding: 1.5rem 2rem 0 2rem;
}

.price {
  position: absolute;
  top: -10000px;
}

/* label for variable price */
.single-product .wc-pao-addon-name {
  --font-factor: 1.15rem;
  --result-of-fontsize-formula: calc(var(--font-factor) + 6 * ((100vw - 320px) / 680));
  font-size: var(--result-of-fontsize-formula);
}

.single-product .single_add_to_cart_button.button.alt {
  background-color: #fff !important;
  color: var(--greenroom-leaf-green) !important;
}

/* end gift-card product page */

/* cart page */
.page-template-cart-template .sec-1 a,
.woocommerce-checkout .sec-1 a,
.single-product .sec-1 a {
  margin-bottom: -7px;
}

body.page-template-cart-template {
  background: unset;
  font-family: var(--gr-font-body);
}

.woocommerce-checkout h2,
.page-template-cart-template h2,
h3 {
  font-family: var(--gr-font-body);
}

dl.variation,
.coupon,
.entry-footer.default-max-width,
.woocommerce-form-coupon-toggle,
.woocommerce-breadcrumb,
.woocommerce-tabs,
#secondary,
#product-addons-total,
.product-thumbnail,
.product_meta {
  display: none;
}

.page-template-cart-template,
body.woocommerce-checkout {
  background-color: unset;
}

.page-template-cart-template,
.page-template-cart-template h1,
.page-template-cart-template h2,
.woocommerce-checkout,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3 {
  color: var(--greenroom-leaf-green);
}


.page-template-cart-template h1 {
  text-align: left;
}

/* .page-template-cart-template .woocommerce-cart-form__cart-item.cart_item {
  border-
} */

.woocommerce table.shop_table {
  background-color: var(--greenroom-iron-ore-mod);
  border: 1px solid var(--greenroom-leaf-green)
}

.woocommerce table.shop_table td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td {
  border-top: 1px solid var(--greenroom-leaf-green);
}

.woocommerce a.button.alt {
  background: #EBE9EB;
}

.woocommerce a.button.alt:hover {
  background: var(--greenroom-stem-green);
  color: var(--greenroom-iron-ore-mod);
}


/* table.cart.woocommerce-cart-form__contents tr:last-child {
  display: none;
} */

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  float: left;
}

.cart_totals h2 {
  text-align: left;
}


.cart-collaterals {
  padding-top: 2rem;
}

/* end cart page */





/* checkout page */
/* .woocommerce-billing-fields */


.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  max-width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields {
  display: flex;
  flex-direction: column;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-direction: column;
}

.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  text-align: left
}

#mailpoet_woocommerce_checkout_optin_field {
  display: none;
}

/* end checkout page */

/* gift card illustration */

.gift-card-illustration {
  width: 500px;
  height: 500px;

  max-width: 100%;
  background-image: url(./../images/matt-howard-pCoXyXyroCk-unsplash.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gift-card-illustration .gift-card {
  width: 400px;
  max-width: 90%;
  height: 200px;

  background-image: url(./../images/textured-background.png);
  background-size: contain;

  border-radius: 2px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow:
    /* top shadow */
    0px -10px 10px rgba(0, 0, 0, 0.2),
    /* bottom shadow */
    0px 10px 20px rgba(0, 0, 0, 0.4),
    /* left shadow */
    -10px 0px 20px rgba(0, 0, 0, 0.4),
    /*right shadow */
    10px 0px 20px rgba(0, 0, 0, 0.4),
    /* inner shadow */
    inset 1px 1px 20px rgba(0, 0, 0, 0.4);

}

.gift-card-illustration .gift-card svg {
  max-width: 90%;
  background-color: unset;
  opacity: 100%;
}

.gift-card-illustration .gift-card p {
  font-size: 1rem;
  color: var(--greenroom-leaf-green);
}

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  padding: 1.5rem 2rem 0 2rem;
}

.woocommerce-product-gallery__image {
  display: flex;
  justify-content: center;
}

.woocommerce div.product form.cart {
  display: flex;
  flex-direction: column;

}

.summary.entry-summary {
  display: flex;
  flex-direction: column;
}

.summary.entry-summary>* {
  padding-bottom: .5rem !important;
}

.single_add_to_cart_button.button.alt {
  max-width: max-content;
}

.cart,
.wc-pao-addon-container.wc-pao-required-addon.wc-pao-addon,
.form-row.form-row-wide.wc-pao-addon-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.wc-pao-addon-container.wc-pao-required-addon.wc-pao-addon {
  display: flex;
  flex-direction: column;
}

.wc-pao-addon-container.wc-pao-required-addon.wc-pao-addon>* {
  padding-bottom: .25rem
}

.woocommerce div.product form.cart>* {
  padding-bottom: .8rem;
}

/* end gift card illustration */
/* 2023-02-01 */