/***********************************************/
/* Web Site: Alchemy of England                */
/*                                             */
/* Media: Screen                               */
/*                                             */
/* Author: Ollie Hoad                          */
/*                                             */
/* Last Update: 18th April 2025                */
/*                                             */
/***********************************************/

/*

-- CSS INDEX --

01. STRUCTURE
02. HEADER
03. FOOTER
04. HOME
05. CATEGORY PAGE
06. PRODUCT PAGE
07. BLOG
08. NOTIFICATION BAR
09. MISC

*/

/*---------------------------------------------*/
/* 01. STRUCTURE                               */
/*---------------------------------------------*/

/* Set font styling for bold text */
b,strong {
  font-weight: 600;
  line-height: inherit;
}

/* Set margin for body */
.body {
  margin-bottom: 4rem;
}

/* Set margin for body (desktop) */
@media (min-width: 801px) {
  .body {
    margin-top: 2.0rem;
  }
}

/* Set margin for page heading (mobile) */
.page-heading {
  margin: 2.5rem 0 2rem 0;
}

/* Set margin for first hero banner (desktop) */
@media (min-width: 801px) {
.page-heading {
    margin: 2rem 0 2rem 0;
  }
}

/*---------------------------------------------*/
/* 02. HEADER                                  */
/*---------------------------------------------*/

/* Set font styling for notification banner */
.notification-banner {
  color: #fff;
  text-align: center;
}

/* Set opacity and transition for notification banner text (show) */
.text-show {
  opacity: 1;
  transition: all 1s ease;
}

/* Set opacity and transition for notification banner text (fade) */
.text-fade {
  opacity: 0;
  transition: all 1s ease;
}

/* Set font styling for menu (desktop) */
@media (min-width: 801px) {
  .header .navPages-container .navPage-subMenu-action {
    text-transform: capitalize;
  }
}

/* Set font styling for menu */
.navBar--sub.navBar--account .dropdown-menu-button {
  color: #fff;
}

/* Set padding for sub-menu */
@media (min-width: 801px) {
  .navPage-subMenu {
    padding-top: 0;
  }
}

/* Set width for sub menu items */
@media (min-width: 1261px) {
  .navPage-subMenu-item {
    width: 20%;
  }
}

/* Set margin for sub-menu items */
@media (min-width: 801px) {
  .navPage-subMenu-item>.navPage-subMenu-action {
    margin-bottom: 0.8rem;
  }
}

/* Set padding for sub-menu (child) items */
.header .navPages-container .navPage-childList-item .navPages-action {
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
}

/*---------------------------------------------*/
/* 03. FOOTER                                  */
/*---------------------------------------------*/

/* Set padding for subscribe area (desktop) */
@media (min-width: 801px) {
  .footer-subscribe {
    padding: 4rem 0;
  }
}

/* Set margin for subscribe area (desktop) */
.footer-subscribe {
  margin-bottom: 3rem;
}

/* Set font styling and margin for subscribe area */
.footer-subscribe .footer-info-heading {
  font-size: 18px;
  margin-bottom: 0.6rem;
}

/* Set font styling for subscribe area */
@media (min-width: 551px) {
  .footer-subscribe .footer-info-heading {
    font-size:26px
  }
}

/* Set background and border styling for subscribe button */
.footer-subscribe .button {
  background: #000;
  background-color: #000;
  border-color: #000;
}

/* Set background and border styling for subscribe button (hover) */
.footer-subscribe .button:hover {
  background: #000;
  background-color: #000;
  border-color: #000;
}

/* Set margin and font styling for social icons */
.footer.footer--simple .socialLinksNew {
  margin-bottom: 1.6rem;
  text-align: center;
}

/* Set list style, margin, padding and font styling for social icons */
.socialLinksNew {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
  line-height: 37px;
}

/* Set font styling for social icons */
.socialLinksNew:after,.socialLinksNew:before {
  content: " ";
  display: table;
}

/* Set float clear for social icons */
.socialLinksNew:after {
  clear: both;
}

/* Set list style, and margin for social icons */
.socialLinksNew ul {
  list-style: none;
  margin-bottom: 0;
}

/* Set margin and padding for social icons */
.socialLinksNew li {
  margin: 0;
  padding: 0;
}

/* Set width, height, margin and font styling for social icons */
.socialLinksNew .icon {
  width: 30px;
  height: 28px;
  margin: 0;
  text-decoration: none;
}

/* Set display type and font styling for social icons */
.socialLinksNew-item {
  display: inline-block;
  font-size: 0;
}

/* Set margin for social icons */
.socialLinksNew .socialLinksNew-item {
  margin-right: 1.5rem;
}

/* Set margin for last social icon */
.socialLinksNew .socialLinksNew-item:last-child {
  margin-right: 0;
}

/* Set display type and margin for Google reviews image */
.GoogleReviews img {
  display: block;
  margin: 0 auto 1.6rem;
}

/*---------------------------------------------*/
/* 04. HOME                                    */
/*---------------------------------------------*/

/* Set margin for hero banners */
.heroStoryboard {
  margin: 0;
}

/* Set background for hero banners */
.heroCarousel {
  background: #000;
}

/* Set margin for first hero banner */
.first-slide {
  margin-top: -1.5rem
}

/* Set margin for first hero banner (desktop) */
@media (min-width: 801px) {
  .first-slide {
    margin-top:-2.5rem
  }
}

/* Set width for buttons */
[id*='sd-simple-button-'] {
  min-width: 320px !important;
}

/* Set display type and grid for 4 image blocks */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Set display type and grid for 4 image blocks (mobile) */
@media (max-width: 800px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Set padding for 4 image blocks */
.grid-child {
  padding: 5px;
}

/* Set margin for 4 image blocks */
.grid-image {
  margin: 0 0 10px 0;
}

/* Set padding for 4 image blocks */
.grid-text {
  padding: 0 1px 0 1px;
}

/* Set font styling for 4 image blocks */
.grid-text p {
  font-family: inherit;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  min-height: 14px;
  margin: 0;
  padding: 0;
}

/* Set heading styling for brand area */
.home-brand h1 {
  font-family: inherit;
  font-size: 20px;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  margin: 20px 0 20px 0;
}

/* Set font styling for brand area */
.home-brand p {
  text-align: center;
}

/* Set heading styling for blog area */
h2.home-blog {
  font-family: inherit;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing:0;
  text-align: center;
  margin: 0;
  padding:0 10px 5px 10px;
}

/* Deprecated after homepage update */
.home .container {
  padding: 0 0.8rem;
}
.home .container .blogPosts {
  padding: 0;
}

/*---------------------------------------------*/
/* 05. CATEGORY PAGE                           */
/*---------------------------------------------*/

/* Set margin for category description */
.category-description {
  margin-bottom: 2rem;
}

/* Set width and margin for sub-categories */
.category-sub-categories {
  max-width: 800px;
  margin: auto;
  margin-bottom: 2rem;
}

/* Set font styling and margin for sub-categories */
.category-sub-categories p {
  font-size: 14px;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Set font styling for sub-categories list */
.catList {
  text-align: center;
}

/* Set margin for sub-categories list */
ul.catList {
  margin-left: 0;
}

/* Set display for sub-categories list item */
.catList-item {
  display: inline-block;
}

/* Set font styling and padding for sub-categories list item */
.catList-action {
  display: inline-block;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  text-transform: none;
  margin: 4px 2px 4px 2px;
  padding: 4px 8px 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Set font styling and padding for sub-categories list item (disabled) */
/*
.catList-action {
  display: inline-block;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  text-transform: none;
  padding: 0;
}
*/

/* Set font styling for sub-categories list item (disabled) */
/*
.catList-item:not(:last-child):after {
  content: ' | ';
  color: #222;
}
*/

/* Deprecated */
.category-image {
  text-align: center;
}
.category-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (min-width: 551px) {
  .category-image img {
    height: 100%;
  }
}
@media (min-width: 801px) {
  .category-image img {
    height: 100%;
   }
}

/*---------------------------------------------*/
/* 06. PRODUCT PAGE                            */
/*---------------------------------------------*/

/* Set margin for product page (desktop - wide) */
@media (min-width: 1441px) {
  .productView {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
}

/*Set display type for content region below price */
[data-content-region=product_below_price] {
  display: none;
}

/* Set font styling for low stock message */
.productView-options .form-field--stock .form-label {
  color: #990000;
}

/* Set display type for custom fields */
.productView-info-name.custom-field,
.productView-info-value.custom-field {
  display: none;
}

/*---------------------------------------------*/
/* 07. BLOG                                    */
/*---------------------------------------------*/

/* Set width for blog thumbnail image (desktop) */
@media (min-width: 801px) {
  .blog-thumbnail {
    max-width: 780px;
  }
}

/* Set font styling for links */
.blog-post a:link,
.blog-post a:visited,
.blog-post a:hover,
.blog-post a:active {
  color: #36f;
}

/*---------------------------------------------*/
/* 08. NOTIFICATION BAR                        */
/*---------------------------------------------*/

/* Set font styling for links */
.sd-simple-text-9b0aebb5-0009-41ea-9074-6a953a087628 a:link,
.sd-simple-text-9b0aebb5-0009-41ea-9074-6a953a087628 a:visited {
  color: #fff;
}

/* Set font styling for links (hover) */
.sd-simple-text-9b0aebb5-0009-41ea-9074-6a953a087628 a:hover,
.sd-simple-text-9b0aebb5-0009-41ea-9074-6a953a087628 a:active {
  color: #fff;
  text-decoration: underline;
}

/*---------------------------------------------*/
/* 08. MISC                                    */
/*---------------------------------------------*/

/* Set display type to remove arrows on mobile product sets (?) */
.css-nmhyd4,
.css-113wrz1 {
  display: none !important;
}

/* Set display type to remove arrows on mobile product sets (?) */
.css-113wrz1 {
  display: none;
}