/*
Theme Name: PartPurple
Theme URI: https://www.diameterstudios.com/skltn
Author: topdownjimmy
Author URI: https://www.jaysitter.com
Description: PartPurple 1 parent theme, based on skltn
Version: 1.0.0
Text Domain: partpurple
Tags: blog,right-sidebar,two-columns,custom-colors,custom-menu,footer-widgets,full-width-template,threaded-comments,translation-ready
*/

/* CUSTOM FONTS! Whee! */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Roboto+Slab:wght@100..900&family=Style+Script&family=BenchNine:wght@300;400;700&display=swap');

@font-face { /*
    font-family: "WhiteFestiveShadow";
    src: url('../images/White-Festive-Shadow.otf') format("truetype");
    font-family: "NeogreyRegular";
    src: url('../images/NeogreyRegular.otf') format("truetype");
    font-family: "LucidaGrande";
    src: url('fonts/LucidaGrande.ttf') format("truetype");
    font-family: "NeogreyMedium";
    src: url('../images/NeogreyMedium.otf') format("truetype");
    font-family: "Berner";
    src: url('../images/BernerBasisschrift1.ttf') format("truetype"); */
    font-family: "BookJacket";
    src: url('../images/BOOKJACK.TTF') format("truetype");
}

:root {
  --black: #000000; /*rgb(0, 0, 0);*/
  --charcoal: #444444; /*rgb(68, 68, 68);*/
  --med-grey: #666666; /*rgb(102, 102, 102);*/
  --mid-grey: #aaaaaa; /*rgb(170, 170, 170);*/
  --light-grey: #f0f0f0; /*rgb(240, 240, 240);*/
  --pale-grey: #dddddd; /*rgb(221, 221, 221);*/
  --dark-white: #f4f4f4; /*rgb(244, 244, 244);*/
  --white: #ffffff; /*rgb(255, 255, 255);*/
  --deep-purple: #210054; /*rgb(39, 17, 68);*/
  --purple: #9a65db; /*rgb(154, 101, 219);*/
  --light-purple: #f1eef4; /*rgb(241, 238, 244);*/
  --aqua: #00a5c0; /*rgb(0, 165, 192);*/
  --cyan: #8bdfed; /*rgb(139, 223, 237);*/
  --blue: #5b71b3; /*rgb(91, 113, 179);*/

  --white-fade: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), transparent);
  --purple-fade: linear-gradient(to left, rgba(154, 101, 219, 0.5), transparent);
  --aqua-fade: linear-gradient(to right, rgba(0, 165, 192, 0.5), transparent);
  --blue-fade: linear-gradient(to bottom, rgba(91, 113, 179, 0.5), transparent);
  --bar-fade: linear-gradient(to left, transparent, rgba(241, 238, 244, 1), transparent);
  --bar-fade-reverse: linear-gradient(to left, rgba(241, 238, 244, 1), transparent, rgba(241, 238, 244, 1));
  --px45-down: 45px;
  --bkgd-repeat: no-repeat;
  --bkgd-size: auto 300px;
  --fade-down-bkgd: transparent var(--white-fade) var(--bkgd-repeat) center var(--px45-down);
}

/*
ATTRIBUTE ORDER
background-color
background-image
background-repeat
background-attachment
background-position
*/
/*
@property --white-fade {
  syntax: '<string>';
  inherits: true;
  initial-value: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

@property --px45-down {
  syntax: '<length>';
  inherits: true;
  initial-value: 45px;
}

@property --bkgd-repeat {
  syntax: '<string>';
  inherits: true;
  initial-value: no-repeat;
}

@property --bkgd-att {
  syntax: '<length>';
  inherits: true;
  initial-value: auto 300px;
}

:root --fade-down-bkgd {
  transparent var(--white-fade) var(--bkgd-repeat) static var(--px45-down) var(--bkgd-size);
  background-position: --var(--px45-down);
  background-repeat: --var(--bkgd-repeat);
  background-size: --var(--bkgd-size);
}*/

/* ELEMENTS */

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--charcoal) var(--light-grey);
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: var(--light-grey);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--aqua);
    border-radius: 10px;
    border: 3px none var(--white);
  }

  @property --offset {
    syntax: '<length>';
    inherits: false;
    initial-value: 0;
  }

a {
  color: var(--blue);
  /*text-decoration: none;*/
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-style: solid;
  text-decoration-thickness: 0.15em;
  transition: text-decoration-color 300ms;
  /*text-underline-offset: var(--offset, 0.2em);
  text-decoration: underline 0.15em;
  transition: --offset 400ms, text-decoration-color 400ms;*/
}

a:hover {
  text-decoration-color: rgba(var(--blue), 1);
  /*--offset: 0.4em;
  text-decoration-color: orange;*/
}

.pp-body a {
/*  position: relative;
}

.pp-body a::before { 
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  position: relative;
  top: -10px;
  left: -10px;
  z-index: -1;*/
}

article > div.pp-horizontal {
  margin-top: -5px;
}

body {
  background-color: var(--white);
  background-image: url('../images/newcolors-2.png');
  background-repeat: no-repeat;
  background-size: auto;
  font-weight: normal;
  font-size: 16px;
  font-family: 'Roboto Slab', serif;
  color: var(--charcoal);
  text-align: left;
  min-width: 350px !important;
  position: relative;
  display: grid;
  justify-items: center;
}

/* THIS IS FOR ANNOUNCEMENT BANNER */
div.page-wrapper {
  /*top: 45px;
  position: absolute;
  margin-top: 45px;*/
  justify-self: center;
}

div.page-wrapper:not(:has(p.woocommerce-store-notice)) {
  margin-top: 0px;
  /*position: absolute;
  top: 0px;*/
}

body {
  background-position: center 45px, center bottom;
}

body:not(:has(p.woocommerce-store-notice)) {
  background-position: center top, center bottom;
}

.woocommerce-store-notice,
.chw-widget-area {
  height: 45px;
  line-height: 45px;
  padding: 0px !important;
  /*background-color: var(--light-purple) !important;*/
  background: var(--bar-fade);
  color: inherit !important;
  width: 100%;
  text-align: center;
  position: relative;
  top: 0px;
  box-shadow: none !important;

  a {
    color: var(--purple) !important;
  }

  p {
    margin: 0px;
  }
}

.pp-ann-title {
  display: none;
}

code {
  padding: 2px 6px;
  color: var(--charcoal);
}

pre {
  display: flex;
  flex-wrap: wrap;
  width: auto; 
  max-width: 100%; /* Ensure the parent does not exceed its container's width */
  padding: 20px;
  font-size: 14px !important;
  -webkit-overflow-scrolling: touch !important;
}

pre::after {
  box-shadow: -10px 0px var(--blue) inset !important;
}

pre > code {
  flex: 1 1 100%; /* Flex-grow, flex-shrink, and flex-basis */
  max-width: 100%; /* Ensure the code block doesn't exceed the parent's width */
  width: 100%; /* Make the code block take full width of the parent element */
  overflow-x: auto; /* Add a scrollbar if the content overflows horizontally */
  /* overflow: auto; Add a scrollbar if the content overflows */
  word-wrap: break-word; /* Break long words to fit within the container */
}

/*
pre.wp-block-code {
  background: var(--light-grey);  
  color:var(--charcoal); 
  padding: 5px 8px;
  border-radius: 2px;
  border-top: 4px solid var(--aqua);
  
  code {
    white-space: pre-wrap !important;
  }

  pre span {
    counter-increment: line;
    display: block;
    line-height: 1.5rem;
  }

  pre span:before {
    counter-reset: line;
    content: counter(line);
    display: inline-block;
    border-right: 1px solid #ddd;
    padding: 0 .5em;
    margin-right: .5em;
    color: #888
  }
}
*/

pre.debug {
  background-color: var(--light-purple);
}

footer {
  padding: 0px 15px;
  font-size: 14px;
  background-image: url('../images/newcolors-foot-2.png');
  background-repeat: no-repeat;
  background-size: auto;

  .footer1 {
    grid-area: fcol1;
  }

  .footer2 {
    grid-area: fcol2;
  }

  .footer3 {
    grid-area: fcol3;
  }

  .footer4 {
    grid-area: fcol4;
  }

  .widget_block {
    order: 1;
    align-self: stretch;
  }

  #block-6 {
    grid-area: fcol1head;
  }

  #block-8 {
    grid-area: fcol1con;
  }

  #block-15 {
    grid-area: fcol3head;
  }

  #block-16 {
    grid-area: fcol3con;
  }

  h3 {
    /*background: rgba(58, 111, 200, 0.25) !important;
    border-radius: 35px 35px 0px 0px;*/
    font-weight: 600;
    font-size: 30px;
    font-family: 'Amatic SC', sans-serif;
    letter-spacing: 1px;
    color: var(--black);
    text-align: left;
    padding: 0 30px;
    margin-bottom: 0;
    line-height: 30px;
  }

  .widget-meta a {
    transition: underline 0.5s ease-in-out 1s;
  }
  
  .widget-meta a:hover {
    text-decoration: underline;
  }
}

h2 {
  margin-top: 35px !important;
  margin-bottom: 10px !important;
}

/*h3 {
  margin-top: 25px !important;
  margin-bottom: 10px !important;
}*/

.tnp-widget-minimal {
  margin-top: 15px !important;
}

.tnp-widget-minimal input.tnp-submit {
  all: initial;
}

input,
button {
  font-family: 'Roboto Slab', serif !important;
}

input[type='submit'],
button[type='submit'],
.tnp-submit,
.tnp-subscription-popup .tnp-submit {
  width: 100% !important;
  min-width: 100px;
  background-color: var(--charcoal) !important;
  color: var(--white) !important;
  border: none;
  padding: 10px;
  margin-top: 5px !important;
  font-size: larger !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.3s ease-out !important;
  /*border-radius: 10px 0px !important;*/
  text-decoration: none !important;
}

input[type='submit']:hover,
button[type='submit']:hover,
.tnp-submit:hover,
.wc-block-cart-item__remove-link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.button.wc-forward:hover,
.checkout-button:hover,
.square-gift-card-apply-btn:hover {
  /*background-color: var(--light-purple) !important;*/
  color: var(--white) !important;
  font-weight: normal !important;
  /*box-shadow: 0px 0px 10px var(--purple) !important;*/
  background-color: var(--med-grey) !important;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"]
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: inline-block;
  border: 1px solid var(--pale-grey) !important;
  background-color: var(--dark-white);
  color: var(--charcoal);
  font-size: 14px;
}

.cky-btn-revisit,
.cky-btn-revisit:hover {
  background: none !important;
  box-shadow: none !important;
}

select {
  padding: 10px;
  display: inline-block;
  border: 1px solid var(--pale-grey);
  background-color: var(--dark-white);
  color: var(--charcoal);
  font-size: 14px;
  font-family: inherit;
}



input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

section.widget {
  margin-bottom: 15px;

  .textwidget p:first-child,
  div.tnp,
  ul {
    margin-top: 0px;
  }
}

section.widget div:nth-child(2) {
  /*padding: 0 25px;*/
}

/*.sidebar section div:nth-child(2),*/
.sidebar section form:nth-child(2) {
  padding: 5px 10px;
}

table {
  width: 100%;
}


/* CLASSES */
.akismet_comment_form_privacy_notice {
  font-size: 14px;
  text-align: center;
}

figure.aligncenter * {
  text-align: center !important;
  display: block !important;

  img {
    margin: 0px auto;
  }
}

.aligncenter {
  text-align: center !important;
}
      
.article__attachment-nav img {
  background: rgba(154, 101, 219, 0.05);
  /*border-radius: 0px 35px;*/
  padding: 10px;
}

.article__attachment-nav,
.article__post-nav {
  grid-area: nav;
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  justify-content: space-between;
  grid-template-areas:
    "go-next go-prev";
  margin-top: 25px !important;
  padding-top: 10px !important;
  background-image: var(--bar-fade-reverse);

  .article__attachment-nav-prev,
  .article__post-nav-prev {
    text-align: right;
    grid-area: go-prev;
    justify-self: end;
    align-self: start;
    padding-right: 10px;
    display: grid;
    align-content: start;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-auto-flow: row;
    justify-content: space-between;
    grid-template-areas:
      "prev-text"
      "prev-img";
  }

  .nav-prev-image,
  .nav-prev-image {
    grid-area: prev-img;
    justify-self: end;
    align-self: start;
    display: inline-block;
  }

  .nav-prev-image img {
    background-color: rgba(255, 255, 255, 0.25) !important;
    /*border-radius: 0 15px !important;*/
  }

  .nav-prev-text {
    margin-bottom: 10px;
    grid-area: prev-text;
  }
}

.article__attachment-nav-next,
.article__post-nav-next {
  text-align: left;
  grid-area: go-next;
  justify-self: start;
  align-self: start;
  padding-left: 10px;
  display: grid;
  align-content: start;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-auto-flow: row;
  justify-content: space-between;
  grid-template-areas:
    "next-text"
    "next-img";

  .nav-next-image {
    grid-area: next-img;
    justify-self: start;
    align-self: start;
  }

  .nav-next-image img {
    background-color: rgba(255, 255, 255, 0.25) !important;
    /*border-radius: 0 15px !important;*/
  }

  .nav-next-text {
    margin-bottom: 10px;
    grid-area: next-text;
  } 
  
  .UNKNOWN {
    background: rgba(154, 101, 219, 0.05);
    /*border-radius: 0px 35px;*/
    padding: 10px;
    grid-area: next-img;
    justify-self: start;
    align-self: start;
  }
}

.article__body {
  /*margin-top: -5px !important;
  padding: 0px 25px;
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:
    "header header"
    "meta meta"
    "image post"
    "cats cats"
    "tags tags"
    "nav nav";*/
  

  img,
  .product-category a {
    /*padding: 10px;
    border-radius: 20px;
    display: block;*/
    background-color: rgba(255, 255, 255, 0.25);
  }
  
  ul {
    /*padding-left: 0px;
    margin-top: 0px;
    list-style-type: none;*/
    padding: 0px;
  }

  .pp-header {
    grid-area: header;
  }

  .pp-meta {
    grid-area: meta;
  }

  .pp-image {
    grid-area: image;
  }

  .pp-full {
    grid-area: post;
  }

  .pp-noimg-body {
    grid-area: 3/1/4/4;
    padding: 0px 25px;
  }

  .pp-cats {
    grid-area: cats;
  }

  .pp-tags {
    grid-area: tags;
  }

  .pp-nav {
    grid-area: nav;
  }
}

.pp-full:has(.pp-search) {
}

.pp-search {  
  .pp-content {
    grid-area: spost !important;
    padding: 0px 25px;
  }

  .pp-meta,
  .pp-time,
  .pp-editlink {
    background: none !important;
  }
}

.article__header {
  /*position: relative;
  overflow: hidden; */
  display: block;
  white-space: nowrap; 
  text-overflow: ellipsis;
  
  h1 {
    margin-bottom: 0 !important;
  }
}

.article__meta.pp-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:
    "date edit";
  /*margin-bottom: 10px;*/
}

.article__timestamp,
.eb-post-metadata-date,
.pp-meta {
  margin: 0;
  color: var(--med-grey);  
}

header .article__title,
.comments-title,
/*.pp-body .wp-block-heading,
.pp-body-nopad .wp-block-heading,*/
.pp-banner,
.cform-reply-title,
.archive-title,
.woocommerce-products-header__title,
.woo-single-product .entry-title {
  padding: 0 10px !important;
  height: 45px;
  line-height: 45px;
  font-weight: 900;
  font-size: 30px;
  font-family: 'Amatic SC', sans-serif;
  letter-spacing: 1px;
  /*background-color: rgba(154, 101, 219, 0.5);
  border-radius: 35px 35px 0px 0px;
  background-image: var(--purple-fade);*/
  color: var(--black);
  text-align: left;
  margin-bottom: 0px;
  position: relative;
  text-align: left !important;
  min-width: 300px;
  /*overflow: hidden; */
  white-space: nowrap; 
  text-overflow: ellipsis;

  a {
    color: var(--black);
    text-decoration: none !important;
  }

  a:hover {
    text-decoration: underline;
  }
}

.article__tags {
  margin: 0;
  font-size: 14px !important;
}

.archive-title {}

.bellows-nav {
  font-family: 'Roboto Slab', serif;
}

.comment {
}

.comment-form {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-template-areas:
    "notes notes"
    "name comment"
    "email comment"
    "website comment"
    "remember comment"
    "submit submit";
    justify-items: stretch;
    column-gap: 25px;
    row-gap: 10px;
    justify-content: space-between;
    padding: 0px 25px;

  .cform-notes {
    grid-area: notes;
    width: 100%;
  }

  .cform-author {
    grid-area: name;
  }

  .cform-email {
    grid-area: email;
  }

  .cform-url {
    grid-area: website;
  }

  .cform-consent {
    grid-area: remember;
  }

  .cform-comment {
    grid-area: comment;
    display: flex;
    flex-direction: column;

  }

  .cform-comment label {
    flex-grow: 0;
  }

  .cform-comment .cform-cont-div {
    align-self: stretch;
    height: 100%;
  }

  .cform-comment textarea.cform-content {
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
  }

  .cform-submit {
    grid-area: submit;
    width: 100%;
  }

  .comment-form-comment {
    display: none;
  }
}

.comment-reply-title {
  margin-top: 35px;
}

.comment-list {
  padding: 0px 25px;
}

.comment-respond p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.comment-wrap {
  display: grid;
  grid-template-columns: 70px auto 100px;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:
    "avatar date date"
    "avatar author author"
    "moderated moderated moderated"
    "content content reply";
  margin-bottom: 15px;
  position: relative;
  border: 1px solid var(--light-grey);
  overflow: clip;

  .comment-avatar {
    grid-area: avatar;
  }

  .comment-author {
    grid-area: author;
    line-height: 15px;
    height: 35px;
    position: relative;
    bottom: 0px;
    left: 0px;
  }

  .comment-date {
    grid-area: date;
    line-height: 50px;
    font-size: 14px;
    height: 35px;
    color: var(--med-grey);
  }

  .comment-date a {
    text-decoration: none;
  }

  .comment-moderated {
    grid-area: moderated;
    text-align: center;
    background: var(--cyan);
    margin: auto 15px;
    /*border-radius: 0px 10px;*/
  }

  .comment-reply {
    grid-area: reply;
    position: absolute;
    bottom: 15px;
    right: 15px;
  }

  .comment-text {
    grid-area: content;
    padding: 5px 20px;
    margin-bottom: 10px;
  }

  .comment-text p:first-child {
    margin-top: 0px;
  }

  .comment-text p:last-child {
    margin-bottom: 0px;
  }
}

.comments-title {
  margin-bottom: 10px;
}

.comments-logged-in {
  .comment-form {
    grid-template-rows: auto;
    grid-auto-flow: column;
    justify-items: stretch;
    padding: 0px 25px;
  }
    
  .comment-form .cform-logged-in-as {
    grid-area: 1 / 1 / 2 / 3;
    align-self: stretch;
  }

  .comment-form .cform-comment {
    grid-area: 2 / 1 / 3 / 3;
    justify-self: stretch;
    align-self: stretch;
    min-height: 150%;
  }
}

.depth-1 {
}

.depth-2 {
  margin-left: 35px;
  background: var(--light-grey);

}

.depth-3 {
  margin-left: 70px;
}

.depth-4 {
  margin-left: 105px;
  background: var(--light-grey);

}

.depth-5 {
  margin-left: 140px;

  .comment-reply {
    display: none;
  }
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.fancybox-toolbar {
  width: 100px;
}

.footer2 .sub-menu {
  padding-left: 10px;
}

.has-text-align-center {
  text-align: center;
}

.heateorSssClear {
  margin-top: 50px;
  opacity: 0.5;
}

.heateorSssClear:hover {
  opacity: 1;
}

.heateor_sss_horizontal_sharing .heateor_sss_svg,
.heateor_sss_standard_follow_icons_container .heateor_sss_svg {
  background-color: var(--aqua) !important;
}

.heateor_sss_sharing_ul,
div.heateor_sss_follow_ul {
  border-radius: 25px;
  opacity: 1;
  text-align: center;
  margin-left: 10px !important;
  /*transition: transform 450ms;
  transition-delay: 300ms;*/

  a {
    padding-left: 5px;
  }
}

footer .heateor_sss_sharing_ul,
footer div.heateor_sss_follow_ul {
  border-radius: 25px;
  opacity: 1;
  text-align: center;
  margin: 0px auto !important;
  padding-left: 10px !important;
  /*transition: transform 450ms;
  transition-delay: 300ms;*/
}

.heateor_sss_sharing_ul {
  /*position: relative;
  left: -28px;*/
}

.heateor_sss_sharing_ul:hover {
  /*opacity: 1;*/
}

.include-mastodon-feed {
  padding: 0px !important;
  max-height: 500px;
  overflow-x: clip;
  overflow-y: scroll;
  margin-top: 10px;

  img.avatar {
    display: inline;
  }
}

.include-mastodon-feed .status,
.contentWrapper.boosted,
.include-mastodon-feed .card .meta {
  background: rgba(255, 255, 255, 0.25) !important;
}

.status .contentWrapper {
  padding: 5px 0px !important;
}

.include-mastodon-feed .status {
  margin: 0px;
  margin-bottom: 15px;
  padding: 0px;
}

#menu-header-menu .sub-menu {
  display: none !important;
  visibility: hidden !important;
  height: 0px !important;
}

.no-comments {
  font-size: larger;
  content: "Sorry, but this post is closed to new comments!"
}

.no-image {
  
}

ul.page-numbers {
  display: flex;
  justify-content: center;
  column-gap: 15px;
  padding: 5px 35px !important;
  /*background-color: var(--light-purple);
  border-radius: 0px 0px 25px 25px;*/
  background-image: var(--bar-fade);
  line-height: 35px;
  margin: 0px;
  height: max-content;

  li {
    align-self: flex-start;
  }

  li span.page-numbers {
    padding: 0px 10px;
  }

  li span.current {
    background-color: white !important;
    border-radius: 10px;
  }
}

.wp-block-table-of-content-block-table-of-content {
  background-color: var(--fade-down-bkgd);
}

.pp-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

div.page-wrapper {
  width: 1280px;
  max-width: 1280px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  grid-template-columns: auto 1fr 50px 350px auto;
  grid-template-areas:
      ". head head head ."
      ". body . sidebar ."
      ". fullwidth fullwidth fullwidth ."
      ". foot foot foot .";
  

  .site-main:not(.full-width) {
    grid-area: body;
  }

  .site-main.full-width {
    grid-area: fullwidth;
  }
  }

site-main.full-width {
  grid-area: fullwidth;
}

#primary {
	grid-area: body;

  .main {
      margin-top: -50px;
  }
}

.pp-body {
  /* padding: 10px 25px 0px 25px;
  max-width: 700px; has to be hard-coded for other measurements to work */
  /* max-width: 906px; has to be hard-coded for other measurements to work */
  padding: 15px 25px 0px 25px;
  h1, h2, h3, h4, h5, h6 {
    padding: 0px;
  }
}

.pp-no-tooltip .tooltipsincontent {
  border: none;
}

.pp-horizontal,
.pp-vcontainer,
.pp-attachment,
.ppp-container,
.pp-search {
  display: grid !important;
  grid-gap: 0px;
  justify-items: stretch;
  align-items: start;
}

.pp-horizontal.pp-search {
  background: var(--fade-down-bkgd);
  background-position: center top;
}

.pp-attachment {
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:
    "head head"
    "meta meta"
    "image post"
    "tags tags";

  .pp-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
      "date edit";
  }

  .pp-meta .pp-time {
    grid-area: date;
    padding: 0 5px !important;
  }

  .pp-meta .pp-editlink {
    grid-area: edit;
    padding: 0 5px !important;
  }

  .pp-header a {
    text-decoration: none;
  }

  .pp-header a:hover {
    text-decoration: underline;
  }
}

.pp-wrapper {
  background: var(--white-fade);
  /*background-size: auto 150px;*/
  display: grid;
  grid-template-columns: 100px 20px 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "meta meta meta"
    "image . post"
    "cats cats cats"
    "tags tags tags";
  justify-items: start;
  align-items: start;
  height: max-content;

  .pp-body {
    grid-area: post;
  }

  .pp-content {
    grid-area: post;
    padding-top: 5px !important;
  }
  
  .pp-image {
    margin-right: 20px;
  }

  .pp-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
      "date edit";
    width: 100%;
  }

  .pp-meta .pp-editlink {
    grid-area: edit;
  }
  
  .pp-time {
    grid-area: date;
    color: var(--med-grey) !important;
    font-size: 14px !important;
    margin: 0px;
  }

  .pp-cats {
    grid-area: cats;
  }

  .pp-tags {
    grid-area: tags;
  }
}

.pp-wrapper-noimg {
  background: var(--white-fade);
  /*background-size: auto 150px;*/
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "meta"
    "edit"
    "post"
    "cats"
    "tags";
  justify-items: start;
  align-items: start;
  height: max-content;

  .pp-body,
  .pp-noimg-body {
    grid-area: post;
    width: 100%;
  }

  .pp-content {
    grid-area: post;
    padding-top: 5px !important;
  }

  .pp-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
      "date edit";
    width: 100%;
  }

  .pp-editlink {
    grid-area: edit;
    justify-self: end;
    text-align: right;
    font-size: 14px;
    color: var(--grey) !important;
  }
  
  .pp-time {
    grid-area: date;
    color: var(--med-grey) !important;
    font-size: 14px !important;
    margin: 0px;
  }

  .pp-cats {
    grid-area: cats;
  }

  .pp-tags {
    grid-area: tags;
  }
}

.pp-meta .pp-time {
  background: none;
  font-size: medium;
}

.pp-meta .pp-editlink {
  background: none;
  font-size: medium;
}

.pp-meta,
.pp-time,
.pp-editlink {
  /*background-color: rgba(255, 255, 255, 0.25);*/
  font-size: 14px !important;
  color: var(--med-grey) !important;
}

.pp-horizontal {
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head" "body";
  /*background: var(--fade-down-bkgd);*/
  background-position: unset;
}

.pp-full /*.pp-content*/ {
  /*background-image: var(--white-fade);*/
}

.pp-full .pp-body:has(.pp-search) {
  
}

/*.pp-full .pp-body,
.pp-infopage .pp-body,
.pp-noimg-body {
  background-image: linear-gradient(to bottom,
          rgba(255, 255, 255, 0.25),
          rgba(255, 255, 255, 0));
}*/

.pp-infopage {
  /*background: var(--fade-down-bkgd);*/
}

.pp-noimg-body .pp-body {
  background-image: none !important;
  padding: 15px 25px 0px 25px;
}

.pp-thumb {
  text-align: center;
}

.pp-search {
  grid-template-columns: 130px auto;
  grid-template-rows: auto;
  grid-template-areas:
    "stitle stitle"
    "smeta smeta"
    "simage spost"
    "stags stags";
}

.pp-search .pp-plainhead {
  grid-area: stitle;
}

.pp-search .pp-meta {
  grid-area: smeta;
}

.pp-search .pp-image {
  grid-area: simage;
}

.pp-search .pp-body-nopad {
  grid-area: spost;
}

.pp-search .pp-tags {
  grid-area: stags;
  margin-bottom: 35px;
}

.pp-cats {
  font-size: 14px;
  color: grey;
}

.pp-vertical {
  /*display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 30px;
  row-gap: 30px;*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-gap: 30px;
  justify-items: stretch;
  align-items: start;
  justify-content: space-between;
  align-content: start;
  margin-bottom: 25px;
  margin-top: 0px;
  padding: 10px 25px 0px 25px;
  background: var(--white-fade);
  
  .pp-vcontainer,
  .ppp-container {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 30% !important;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-template-areas:
      "image"
      "header"
      "meta"
      "post"
      "tags"
      "edit";
  }

  .pp-editlink {
    display: block;
    margin-top: 10px;
    background-image: none;
  }

  .pp-meta {
    display: block !important;
    margin-bottom: 0px;
  }

  .pp-tags {
    margin-top: 5px;
  }
}

.pp-body-nopad {
  grid-area: 3/1/4/4;
}

.pp-body p:first-child,
.pp-body-nopad p:first-child {
  margin-top: 0px;
}

.pp-editlink,
.wp-block-post-date__modified-date {
  text-align: right;
  grid-area: edit;
  padding: 0px 5px;

  a {
    color: var(--med-grey) !important;
    text-decoration: none !important;
  }

  a:hover {
    text-decoration: underline !important;
  }
}

.pp-meta .pp-editlink {
  background: none;
}

.pp-fppost {
}

.pp-header {
  grid-area: head;
  /*margin-bottom: 10px;*/
}

.pp-image {
  /*position: relative;
  top: 15px;*/
  grid-area: image;
  display: block;
  margin: 0px;
  width: 100%;
  /*border-radius: 0px 25px;*/
  padding: 10px;
  background: rgba(255, 255, 255, 0.25) !important;
}

.pp-plainhead {
  line-height: 100%;
}

.pp-readmore {
  margin-top: 10px;
  font-size: 14px;
  text-align: right !important;
}

.pp-tags {
  grid-area: tags;
}

.pp-time {
  grid-area: date;
  display: block;

  time {
    padding: 0 5px;
  }
}

.pp-vcontainer {
  time {
    padding: 0px;
  }
}

.required {
  font-size: larger;
  color: #cc0000
}

.site-header,
.site-nav,
.site-main {
  padding: 0 !important;
  position: relative;
}

.site-header {
  /*display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 50px;
  grid-template-areas:
    "toggles"
    "navmenu";
  row-gap: 0px;
  justify-items: end;
  align-items: end;*/
}

div.site-main.full-width {
  /*width: 100%;
  grid-area: 2 / 2 / 3 / 5;*/
  grid-area: fullwidth;

  sidebar {
    display: none;
  }
}

.site-main h3:first-child:not(.pp-plainhead) {
  margin-top: 30px; /*!important*/
}

h3.tbcn-content-table-title {
  margin-top: 5px !important;
}

div.tbcn-accordion-title {
  padding: 10px 20px !important;
}

div#tbcnbBlock-1 ol > li > a.tbcn-table-content-anchor-list:hover, 
div#tbcnbBlock-1 ol > li > a.tbcn-table-content-anchor-list:active {
  color: var(--blue) !important;
}

.sidebar h3:first-child {
  margin-top: 25px !important;
}

.sidebar section {
  background-image: var(--white-fade);
  background-position: 0px 45px;
  /*border-radius: 35px 35px 0px 0px;*/
  
  div:not(.variation),
  ul {
    padding: 5px 15px !important;
  }
}

.sidebar {
  /*margin-top: -10px;*/
  padding: 0 !important;
  grid-area: sidebar;

  a {
    color: var(--blue);
    text-decoration: none;
    cursor: pointer;
  }
}

.site-header__logo {
  /*visibility: hidden;
  display: none;*/
}

.site-header {
  padding-top: 135px;
  grid-area: head;
}

.site-nav,
#mega-menu-wrap-top-banner {
  grid-area: navmenu;
  margin-top: 115px !important;
  text-align: center !important;
  font-family: 'Amatic SC', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 40px !important;
  line-height: 50px !important;

  a:not(.wpmenucart-icon-shopping-cart-0::before) {
    padding: 0px 10px;
    transition: color, 0.5s, ease-out, 1s;
    text-shadow: 0px 0px 10px var(--deep-purple);
  }
  
  a:hover {
    background-color: rgba(34, 202, 230, 0.5); /* #15e7b5 */
    text-decoration: none;
    color: var(--white);
    /*border-radius: 10px 10px 0px 0px;*/
    text-shadow: none;
  }

  ul#mega-menu-top-banner {
    margin-bottom: 0 !important;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    list-style-type: none;
    font-size: 40px !important;
  }
}

#mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item {
  padding: 0px 10px;
  transition: color, 0.5s, ease-out, 1s;
  text-shadow: 0px 0px 25px var(--white) !important;
  line-height: 50px !important;
  color: var(--charcoal) !important;
}

#mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item > a.wpmenucart-contents {
  font-size: 40px;
  color: var(--charcoal) !important;
  padding: 0px 10px;
  display: block;
  font-weight: 700 !important;
}

#mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item > a.wpmenucart-contents:hover {
  background-color: rgba(34, 202, 230, 0.5); /* #15e7b5 */
  text-decoration: none;
  color: var(--white) !important;
  /*border-radius: 10px 10px 0px 0px;*/
  text-shadow: none;
  font-weight: !important;
}

#mega-menu-wrap-top-banner #mega-menu-top-banner ul.mega-sub-menu {
  font-family: 'Roboto Slab', serif;
  font-size: 30px !important;
}

#mega-menu-wrap-top-banner #mega-menu-top-banner ul.mega-sub-menu a.mega-menu-link {
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding-left: 25px;
}

.cartcontents {
  /*font-family: 'Roboto Slab', serif;
  font-size: 18px;
  color: var(--purple);
  text-shadow: 0px 0px 10px var(--white) !important;
  text-align: center;
  position: relative;
  left: 10px;
  top: -10px;
  margin-right: 0px;
  z-index: 99;
  pointer-events: none;*/
}

.wpmenucart-icon-shopping-cart-0::before {
  /*margin-right: 0px !important;
  text-shadow: 0px 0px 10px var(--purple) !important;
  filter: none !important;*/
}

.sticky-pin {
  float: right;
  width: 20px;
  height: 35px;
  position: absolute;
  right: 10px;
  top: -8px;
  padding: 0px !important;
  background-color: transparent !important;
  filter: drop-shadow(0px 0px 10px var(--deep-purple));
}

.site-nav__list {
  margin-bottom: 0 !important;
}

.tnp-field {
  margin-bottom: 5px !important;
}

.tnp-subscription {
}

.widget__heading,
.cart_totals h2,
.cross-sells > h2 {
  font-weight: 900;
  font-size: 30px;
  font-family: 'Amatic SC', sans-serif;
  letter-spacing: 1px;
  /*background-color: rgba(0, 165, 192, 0.5);
  border-radius: 35px 35px 0px 0px;
  background-image: var(--aqua-fade);*/
  color: var(--deep-purple);
  padding: 0 15px;
  margin-bottom: 0;
  width: 100%;
}

.cart_totals h2 {
  margin-top: 0px;
}

.pp-carticon {
  background-image: url('../images/cart01w.png') no-repeat;
  background-size: 50px 40px;
  background-position: center;
}

.widget ul {
  list-style-position: outside;
  /*margin-left: -25px;*/
}

.widget_categories ul {
  padding-left: 25px !important;
  margin-left: 25px;
}

.wp-block-post-date,
.eb-post-metadata-value {
  color: var(--med-grey) !important;
  font-size: 14px !important;
}

.wp-block-gallery {
  justify-content: space-between;
  row-gap: 10px;
  /*border-radius: 0px 10px;
  background-color: rgba(255, 255, 255, 0.25);*/
  margin-bottom: 10px;
}

div.wp-block-image {
  /*background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0px 10px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));*/
}

.widget_recent_entries {
  /*margin-left: 25px;*/

  ul {
    margin-left: 25px;
  }

  .post-date {
    display: block;
    margin-left: 10px;
    font-size: 14px;
    color: var(--med-grey) !important;
  }

  a {
    font-weight: bold;
  }
}

.wp-block-social-links {
  list-style-type: none;
  display: inline !important;
  margin: 0;
  padding: 0;
}

li.wp-social-link {
  display: inline;
  padding-right: 10px;
}

.__wp-uploader-id-2 {
  position: absolute;
  top: 200px;
  left: 151px;
  background: var(--white);
  width: 80%;
  height: 500px;
  overflow: scroll;
}

.wp-block-list {
  margin: 5px 20px;
}

.pp-404-search .wp-block-search__inside-wrapper  {
  display: grid;
  grid-template-areas: "text . button";
  grid-template-columns: 1fr 25px 1fr;

  wp-block-search__input {
    grid-area: text;
    width: 100%;
  }
  .wp-block-search__button.wp-element-button {
    grid-area: button;
    width: 100%;
  }
}


/* TOGGLE STYLES */

div.pp-toggles {
  grid-area: toggles;
  display: grid;
  grid-template-columns: 1fr 50px;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-template-areas:
    "search cart wishlist";
  column-gap: 5px;
  row-gap: 5px;
  justify-content: end;
  padding: 10px 25px;
  justify-content: end;
  align-content: end;
  /*position: absolute;
  top: 50px;
  right: -50px;*/
}

#pp-search-toggle {
  grid-area: cart;
  position: relative;
  width: 300px;
  justify-self: end;
  align-self: end;

  .search-form {
    text-align: right;
  }

  input[type="text"] {
    height: 40px;
    display: inline-block;
    outline: none;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 3;
    transition: width 1s cubic-bezier(0.000, 0.795, 0.000, 1.000), background-color 1s ease-in-out;
    cursor: pointer;
    padding: 10px;
    padding-right: 40px;
    border: none !important;
    background-color: transparent;
    color: var(--charcoal);
    font-size: 14px;
  }

  ::-webkit-input-placeholder {
    color: var(--med-grey);
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: var(--med-grey);
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--med-grey);
  }

  :-ms-input-placeholder {
    color: var(--med-grey);
  }

  input[type="text"]:focus:hover {
    border: 1px solid var(--med-grey);
    background-color: var(--white);
  }

  input[type="text"]:focus {
    width: 300px;
    z-index: 1;
    border: 1px solid var(--med-grey);
    cursor: text;
    background-color: var(--white);
  }


  /* Change Autocomplete styles in Chrome*/

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus input:-webkit-autofill,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    border: 0 solid transparent;
    -webkit-text-fill-color: var(--charcoal);
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  input, textarea {
    outline: none;
  }

  .search-icon {
    background-color: transparent;
    background-image: url('../images/search01w.png');
    filter: drop-shadow(0px 0px 10px var(--deep-purple));
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    border: none;
    cursor: pointer;
    height: 35px;
    width: 35px;
    margin: 3px 0;
    padding: 0 0 0 45px;
    position: relative;
    top: 0px;
    right: 0px;
    display: inline-block;
    z-index: 100;
    pointer-events: none;
  }

  #search_submit {
    display: none;
  }
}

.pp-menu-toggle {
  position: relative;
  width: max-content;
  justify-self: start;
  align-self: start;

  .submenu-div {
    height: max-content;
    display: inline-block;
    outline: none;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 3;
    transition: height 1s cubic-bezier(0.000, 0.795, 0.000, 1.000), background-color 1s ease-in-out;
    cursor: pointer;
    padding: 10px;
    padding-top: 40px;
    border: none !important;
    background-color: transparent;
    color: var(--charcoal);
    font-size: 14px;
  }

  ::-webkit-submenu-placeholder {
    color: var(--med-grey);
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: var(--med-grey);
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--med-grey);
  }

  :-ms-submenu-div-placeholder {
    color: var(--med-grey);
  }

  .submenu-div:focus:hover {
    border: 1px solid var(--med-grey);
    background-color: var(--white);
  }

  .submenu-div:focus {
    height: 300px;
    z-index: 1;
    border: 1px solid var(--med-grey);
    cursor: text;
    background-color: var(--white);
  }

  div {
    outline: none;
  }
}

.site-footer {
  padding-top: 10px;
  padding-left: 15px;

  .sub-menu {
    display: none;
  }
}

#wpforms-801 {
  margin: 0px auto;
  text-align: center;

  #wpforms-801-field_1 {
    margin: 0px auto;
  }
}

.tdf_bundle.tdf_container .tdf_bundle_style_5 .tdf_bundle_img {
  background-position-y: 15px;
}


/* MEDIA QUERIES */

@media screen and (max-width: 1279px) {
  .page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-header {
    padding-top: 85px;
  }

  .site-nav {
    margin-top: 85px !important;
    font-size: 1.5em !important;
    line-height: 35px !important;
  }
}

@media screen and (max-width: 1023px) {
  body {
    background-image: url('../images/newcolors-mobile.jpg');
  }

  .page-wrapper {
    width: auto !important;
  }

  .site-nav {
    margin-top: 85px;
    font-family: inherit;
    line-height: 25px;
  }

  .site-nav,
  #mega-menu-wrap-top-banner {
    margin-top: 85px !important;
    font-size: 0.9em
    background-image: none;

    div {
      background-image: none !important;
    }
  }

  div.mega-menu-toggle {
    background-image: none !important;
    border-radius: 0px !important
  }

  .site-nav a {
    text-shadow: 0px 0px 10px var(--deep-purple);
  }

  .site-nav a:hover {
    text-shadow: none;
  }

  .heateor_sss_vertical_sharing {
    display: none !important;
  }

  footer {
    /*display: flex !important;
    flex-direction: column;
    justify-content: stretch;
    align-content: stretch;
    align-items: start;
    column-gap: 20px;*/
  }

  .site-footer > div {
    width: 100%;
  }

  .site-main,
  .sidebar {
    padding: 0px 0px !important;
  }

  .pp-body {
    max-width: 100%;
  }

  .site-footer {
    /*padding: 0px 0px !important;*/
  }

  #payment-method-message {
    display: none;
  }

  .textwidget {
    padding: 0px 10px;
    line-height: 20px;
  }

  .pp-vertical {
    /*display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 30px;
    row-gap: 30px;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-gap: 30px;
    justify-items: stretch;
    align-items: start;
    justify-content: space-between;
    align-content: start;
    margin-bottom: 25px;
    margin-top: 0px;
    padding: 10px 25px 0px 25px;
    background: var(--white-fade);
    
    .pp-vcontainer,
    .ppp-container {
      /*flex-grow: 1 !important;
      flex-shrink: 1 !important;
      flex-basis: 30% !important;*/
      display: grid;
      grid-template-columns: 0.3fr 15px 1fr;
      grid-template-rows: auto;
      grid-auto-flow: row;
      grid-template-areas:
        "header header header"
        "meta meta meta"
        "image . post"
        "tags tags tags"
        "edit edit edit";
    }

    .pp-content {
      grid-area: post;
    }

    .pp-plainhead {
      grid-area: header;
    }
  
    .pp-editlink {
      display: block;
      margin-top: 10px;
      background-image: none;
    }
  
    .pp-meta {
      display: block !important;
      margin-bottom: 0px;
    }
  
    .pp-tags {
      margin-top: 5px;
    }
  }
}

@media screen and (max-width: 801px) {
  .page-wrapper {
    /*grid-template-columns: 100% !important;*/
    width: 100% !important;
    max-width: 100% !important;
  }

  .sidebar {
    margin-top: 0px;
    padding-right: 0px;
  }

  div.pp-toggles {
    position: absolute;
    top: -80px;
    right: 0px;
  }

  .page-wrapper {
    /*padding-top: 46px;*/
  }

  html {
    /*margin-top: 0px !important;*/
  }
}

@media screen and (max-width: 768px) {
  #mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-top-banner #mega-menu-top-banner > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
    /*background: var(--charcoal);
    font-size: 26px !important;*/
  }

  .page-wrapper {
    margin-top: 46px;
  }

  .textwidget {
    font-size: .9em;
  }
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    /*position: static;*/
    margin-top: -46px;
  }
}

@media screen and (max-width: 551px) {
  .page-wrapper {
    margin-top: 46px;
    font-size: 85%;
    width: 100% !important;
  }

  .pp-noimg-body, .pp-body {
    padding: 0px !important;
  }

  td.product-thumbnail,
  th.product-thumbnail {
    display: none !important;
  }

  .comment-wrap {
    position: relative;
  }

  .comment-wrap .comment-date {
    line-height: 15px;
    position: absolute;
    bottom: 0px;
    left: 0px;
  }

  .comment-wrap .comment-author {
    height: 30px;
  }

  .textwidget {
    font-size: .8em;
  }
  
  .comment-wrap .comment-avatar {
    grid-area: avatar;
  }

  .comment-wrap .comment-author {
    grid-area: author;
    line-height: 15px;
    height: 35px;
    position: relative;
    bottom: 0px;
    left: 0px;
  }

  .comment-wrap .comment-date {
    grid-area: date;
    line-height: 50px;
    font-size: 14px;
    height: 35px;
    color: var(--med-grey);
  }

  .comment-wrap .comment-date a {
    text-decoration: none;
  }

  .comment-wrap .comment-moderated {
    grid-area: moderated;
    text-align: center;
    background: var(--cyan);
    margin: auto 15px;
    /*border-radius: 0px 0px 10px 10px;*/
  }

  .comment-wrap .comment-reply {
    grid-area: reply;
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}

@media screen and (max-width: 480px) {
  .article__header h1.article__title {
  }
}

@media screen and (max-width: 350px) {
  .pp-vertical {
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    justify-content: space-between;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-gap: 30px;
  }
}