/*
Theme Name: Scratching Shed
Template: storefront
Version: 1.0.0
Text Domain: scratching-shed
*/

/* Design tokens from Figma */
:root {
  --ss-accent: #d7983d;
  --ss-charcoal: #333;
  --ss-black: #000;
  --ss-white: #fff;
  --ss-beige: #f2f3ed;
  --ss-pastel-blue: #799db3;
  --ss-olive: #828e6a;
  --ss-border: #ddd;
  --ss-button-radius: 8px;
  --ss-footer: #3f3935;
  --ss-footer-bar: #39322d;
  --ss-font-heading: "Besley", Georgia, serif;
  --ss-font-body: "Mulish", Arial, sans-serif;
}

/* Storefront's focus outline is purple, set in its stylesheet and again in its Customizer CSS with these selectors */
a:focus,
button:focus,
.button.alt:focus,
input:focus,
textarea:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  outline-color: var(--ss-pastel-blue);
}

/* The outline is for keyboard users, so a mouse click doesn't show it */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Browsers count clicking a text field as keyboard focus, so text fields show focus with their border instead */
input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]):focus,
textarea:focus {
  outline: none;
}

.site-header .site-search .widget_product_search input[type="search"]:focus {
  border-color: var(--ss-pastel-blue);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ss-font-body);
  color: var(--ss-charcoal);
}

/* Every button shares one corner radius: Storefront's, WooCommerce's (classic and blocks) and the theme's own */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-element-button,
.wc-block-components-button:not(.is-link),
button.menu-toggle {
  border-radius: var(--ss-button-radius);
}

h1,
h2,
.product_title {
  font-family: var(--ss-font-heading);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ss-black);
}

/* Shared width for the designed areas; cart, checkout and account keep Storefront's */
.site-header .col-full,
.ss-banner .col-full,
.single-product .storefront-breadcrumb .col-full,
.single-product .site-content .col-full,
.tax-book_author .site-content .col-full,
.ss-shop .site-content .col-full,
.ss-blog .site-content .col-full {
  max-width: 1260px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Logo */
.ss-logo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 226px;
  color: var(--ss-black);
  text-decoration: none;
}

.ss-logo:hover {
  color: var(--ss-black);
}

.ss-logo--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The image has no margin of its own, so it needs space from the header's edges on small screens */
@media (max-width: 767px) {
  .site-header .ss-logo--image {
    margin: 12px 0;
  }
}

.ss-logo__shed {
  position: relative;
  flex: none;
  width: 109px;
  height: 100px;
  overflow: hidden;
}

.ss-logo__shed img {
  position: absolute;
  top: -20.75%;
  left: -13%;
  width: 126.85%;
  max-width: none;
  height: 138.45%;
}

.ss-logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 16px;
  font-weight: 200;
  font-size: 24px;
  line-height: 21px;
  letter-spacing: -0.72px;
}

.ss-logo__ltd {
  margin-top: 8px;
  padding: 1px 2px;
  background: var(--ss-pastel-blue);
  color: var(--ss-white);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

/* Header */
.site-header {
  margin-bottom: 0;
  padding: 0;
  border-bottom: 0;
  background: var(--ss-white);
}

.ss-shopping-links {
  display: flex;
  align-items: center;
  gap: 17px;
}

.ss-shopping-links img {
  display: block;
}

.ss-basket {
  position: relative;
}

.ss-basket__count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  border-radius: 8px;
  background: var(--ss-accent);
  color: var(--ss-white);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .site-header > .col-full {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 400px) 1fr;
    align-items: center;
    min-height: 132px;
  }

  .site-header > .col-full::before,
  .site-header > .col-full::after {
    display: none;
  }

  .woocommerce-active .site-header .site-branding,
  .woocommerce-active .site-header .site-search {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
  }

  .ss-shopping-links {
    justify-content: flex-end;
  }

  .woocommerce-active .site-header .site-header-cart {
    float: none;
    width: auto;
  }

  /* Storefront opens the mini cart on hover and sizes it to its menu item. This opens it on click (assets/js/header.js). */
  .site-header-cart .widget_shopping_cart,
  .site-header-cart:hover .widget_shopping_cart,
  .site-header-cart.focus .widget_shopping_cart {
    right: -10px;
    left: auto;
    visibility: hidden;
    width: 320px;
    border: 1px solid var(--ss-border);
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s;
    background: var(--ss-beige);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.21);
  }

  .site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__total,
  .site-header-cart .widget_shopping_cart p.woocommerce-mini-cart__buttons {
    background: transparent;
  }

  .site-header-cart .widget_shopping_cart .buttons a.wc-forward:not(.checkout) {
    background: var(--ss-accent);
    color: var(--ss-white);
    transition: background-color 0.2s ease;
  }

  .site-header-cart .widget_shopping_cart .buttons a.wc-forward:not(.checkout):hover {
    background: color-mix(in srgb, var(--ss-accent) 85%, #fff);
  }

  .site-header-cart .widget_shopping_cart .buttons a.wc-forward::after {
    display: none;
  }

  .site-header-cart .widget_shopping_cart .buttons a.checkout::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background: url("assets/images/padlock.svg") center / contain no-repeat;
    vertical-align: -3px;
  }

  .site-header-cart.is-open .widget_shopping_cart {
    visibility: visible;
    opacity: 1;
  }

  .site-header-cart .widget_shopping_cart .product_list_widget,
  .site-header-cart:hover .widget_shopping_cart .product_list_widget {
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
  }

  .site-header .site-search .widget_product_search form {
    margin: 0;
  }

  .site-header .site-search .widget_product_search form::before {
    display: none;
  }

  .site-header .site-search .widget_product_search input[type="search"] {
    height: 44px;
    padding: 0 40px 0 13px !important;
    border: 1px solid var(--ss-border);
    border-radius: 3px;
    background: #fafafa;
    box-shadow: none;
    color: var(--ss-charcoal);
    font-size: 16px;
  }

  .site-header .site-search .widget_product_search button[type="submit"] {
    position: absolute !important;
    top: 10px !important;
    right: 7px !important;
    left: auto !important;
    clip: auto !important;
    clip-path: none !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0;
    background: url("assets/images/search.svg") center no-repeat;
    color: transparent;
    font-size: 0;
  }

  .site-header .site-search form {
    position: relative;
  }

  .storefront-primary-navigation {
    border-top: 1px solid var(--ss-border);
    border-bottom: 1px solid var(--ss-border);
    background: var(--ss-white);
  }

  .woocommerce-active .site-header .main-navigation {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .main-navigation ul.menu {
    display: flex;
    justify-content: center;
    gap: 32px;
  }

  .main-navigation ul.menu > li > a,
  .main-navigation ul.menu > li.current-menu-item > a,
  .main-navigation ul.menu > li.menu-item-has-children > a {
    padding: 12px 0;
    color: var(--ss-charcoal);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
  }

  .main-navigation ul.menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    background: url("assets/images/chevron-down.svg") center no-repeat;
  }

  .main-navigation ul.menu ul {
    background: var(--ss-beige);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  .main-navigation ul.menu ul li a {
    width: 260px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--ss-border);
    background: transparent;
    color: var(--ss-charcoal);
    font-size: 15px;
  }

  .main-navigation ul.menu ul li:hover > a {
    background: var(--ss-white);
  }

  /* Our Books mega menu: five columns across the width of the page */
  .storefront-primary-navigation {
    position: relative;
  }

  .main-navigation ul.menu > li.ss-mega {
    position: static;
  }

  .main-navigation ul.menu > li.ss-mega > ul.sub-menu,
  .main-navigation ul.menu > li.ss-mega:hover > ul.sub-menu,
  .main-navigation ul.menu > li.ss-mega.focus > ul.sub-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 24px;
    left: 50%;
    visibility: hidden;
    width: min(1220px, 100vw - 40px);
    padding: 32px 40px;
    box-sizing: border-box;
    background: var(--ss-beige);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .main-navigation ul.menu > li.ss-mega:hover > ul.sub-menu,
  .main-navigation ul.menu > li.ss-mega.focus > ul.sub-menu,
  .main-navigation ul.menu > li.ss-mega:focus-within > ul.sub-menu {
    visibility: visible;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .main-navigation ul.menu > li.ss-mega > ul.sub-menu,
    .site-header-cart .widget_shopping_cart {
      transition: none;
    }
  }

  .main-navigation ul.menu > li.ss-mega > ul.sub-menu li a {
    width: auto;
    padding: 6px 0;
    border-bottom: 0;
    background: transparent;
    text-decoration: none;
  }

  .main-navigation ul.menu > li.ss-mega > ul.sub-menu li a:hover {
    text-decoration: underline;
  }
}

/* Page band */
.ss-band {
  padding: 40px 20px;
  background: var(--ss-pastel-blue);
  text-align: center;
}

.ss-band--blog {
  background: var(--ss-olive);
}

.ss-band__eyebrow {
  margin: 0;
  color: var(--ss-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-band__title {
  margin: 0;
  color: var(--ss-white);
  font-family: var(--ss-font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Breadcrumb */
.storefront-breadcrumb {
  margin: 0;
  padding: 22px 0;
}

.single-product .storefront-breadcrumb .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  color: #888;
  font-size: 16px;
  line-height: 1.5;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--ss-black);
  text-decoration: underline;
}

.single-product .woocommerce-breadcrumb a:first-of-type::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 12px;
  margin-right: 16px;
  background: url("assets/images/home.svg") center no-repeat;
}

.single-product .woocommerce-breadcrumb .breadcrumb-separator {
  width: 12px;
  height: 12px;
  padding: 0;
  background: url("assets/images/chevron-right.svg") center no-repeat;
}

.single-product .woocommerce-breadcrumb .breadcrumb-separator::before,
.single-product .woocommerce-breadcrumb .breadcrumb-separator::after {
  display: none;
}

/* Product page */
.single-product .site-content {
  padding-top: 0;
}

.single-product div.product .woocommerce-product-gallery {
  width: 47%;
  margin-right: 0;
}

.single-product div.product .summary {
  width: 49.5%;
  margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery img {
  box-shadow: none;
}

.single-product div.product .product_title {
  margin: 0 0 24px;
  font-size: 36px;
}

.ss-book-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 24px;
  list-style: none;
}

.ss-book-meta li {
  margin: 0;
  color: var(--ss-charcoal);
}

.ss-book-meta li + li {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #ccc;
}

.ss-book-meta a {
  color: var(--ss-pastel-blue);
  text-decoration: underline;
}

.ss-book-meta strong {
  color: var(--ss-black);
  font-weight: 400;
}

.single-product div.product p.price {
  margin: 0 0 24px;
  color: var(--ss-charcoal);
  font-family: var(--ss-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
}

.single-product div.product form.cart {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--ss-border);
}

.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
  display: none;
}

.single-product div.product form.cart .quantity {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: var(--ss-white);
}

.single-product div.product form.cart .quantity .qty {
  width: 2em;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.ss-qty-button,
.ss-qty-button:hover,
.ss-qty-button:focus {
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ss-charcoal);
  font-weight: 400;
  line-height: 1.5;
}

.single-product div.product form.cart .single_add_to_cart_button,
ul.products li.product .button {
  border-radius: var(--ss-button-radius);
  background: var(--ss-accent);
  color: var(--ss-white);
  font-weight: 700;
}

.single-product div.product form.cart .single_add_to_cart_button {
  float: none;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.5;
}

.ss-description.is-collapsed {
  max-height: 340px;
  overflow: hidden;
}

.ss-description {
  color: var(--ss-black);
  line-height: 1.5;
}

.ss-read-more,
.ss-read-more:hover,
.ss-read-more:focus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ss-pastel-blue);
  font-weight: 700;
  font-size: 16px;
}

.ss-read-more[hidden] {
  display: none;
}

.ss-read-more.is-expanded img {
  transform: rotate(180deg);
}

/* Product cards */
ul.products li.product {
  text-align: center;
}

/* Each row of books shares its row heights (subgrid), so covers sit on one line and so do the buttons.
   Below 768px Storefront stacks one book per row. */
@media (min-width: 768px) {
  ul.products {
    display: grid;
    column-gap: 3.8%;
  }

  ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  ul.products.columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  ul.products::before,
  ul.products::after {
    display: none;
  }

  ul.products li.product {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    float: none;
    width: auto !important;
    margin-right: 0 !important;
  }

  ul.products li.product > a.woocommerce-loop-product__link {
    display: grid;
    grid-row: 1 / 5;
    grid-template-rows: subgrid;
  }

  ul.products li.product img {
    grid-row: 1;
    align-self: end;
  }

  ul.products li.product .woocommerce-loop-product__title {
    grid-row: 2;
  }

  ul.products li.product .ss-book-author {
    grid-row: 3;
  }

  ul.products li.product .price {
    grid-row: 4;
  }

  ul.products li.product .button,
  ul.products li.product .added_to_cart {
    grid-row: 5;
    justify-self: center;
    align-self: end;
  }
}

ul.products li.product img {
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.21);
}

ul.products li.product .woocommerce-loop-product__title {
  margin-bottom: 4px;
  padding: 0;
  color: var(--ss-charcoal);
  font-family: var(--ss-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

ul.products li.product .price {
  margin-bottom: 12px;
  color: var(--ss-charcoal);
  font-weight: 800;
}

ul.products li.product .button {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
}

/* Once a book is added, WooCommerce's View basket link takes the place of the button */
ul.products li.product .button.added {
  display: none;
}

ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart:hover {
  display: inline-block;
  align-self: center;
  width: auto;
  margin-top: auto;
  margin-bottom: 0.236em; /* Matches Storefront's card button, so the two line up */
  padding: 8px 12px;
  border-radius: var(--ss-button-radius);
  background: var(--ss-footer-bar);
  color: var(--ss-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

ul.products li.product .added_to_cart::after {
  display: none;
}

.single-product section.related {
  padding-top: 80px;
}

.single-product section.related > h2 {
  margin-bottom: 40px;
  font-size: 28px;
  text-align: center;
}

/* Banner */
.ss-banner {
  position: relative;
  min-height: 784px;
  background: linear-gradient(to bottom, var(--ss-white), rgba(255, 255, 255, 0) 290px), url("assets/images/banner-reader.webp") center / cover no-repeat;
}

.ss-banner__text {
  margin: 0;
  padding-top: 170px;
  font-family: var(--ss-font-heading);
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.ss-banner__text span {
  display: block;
  color: #78676d;
}

.ss-banner__text span + span {
  color: #897c33;
}

@media (max-width: 767px) {
  .ss-banner {
    min-height: 420px;
  }

  .ss-banner__text {
    padding-top: 60px;
    font-size: 28px;
  }
}

/* Footer */
.site-footer {
  padding: 0;
  background: var(--ss-footer);
  color: var(--ss-white);
}

.site-footer > .col-full {
  max-width: none;
  margin: 0;
  padding: 0;
}

.ss-footer,
.ss-footer-bar__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding-right: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.ss-footer {
  display: grid;
  grid-template-columns: 1.9fr 0.8fr 1fr 1.6fr;
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 40px;
}

.ss-footer address {
  margin: 12px 0 0 118px;
  color: var(--ss-beige);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
}

.ss-footer h2 {
  margin: 16px 0 20px;
  color: var(--ss-beige);
  font-weight: 500;
  font-size: 18px;
}

.ss-footer__links ul {
  margin: 0;
  list-style: none;
}

.ss-footer__links li {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
}

.site-footer .ss-footer a:not(.button):not(.components-button),
.site-footer .ss-footer a:not(.button):not(.components-button):hover {
  color: var(--ss-white);
}

.site-footer .ss-footer .ss-logo:not(.button):not(.components-button) {
  text-decoration: none;
}

.ss-footer__links a {
  text-decoration: none;
}

.ss-footer__contact p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  font-weight: 500;
  font-size: 14px;
}

.ss-footer__contact a {
  text-decoration: underline;
}

.ss-footer__social a {
  text-decoration: none;
}

.ss-footer-bar {
  background: var(--ss-footer-bar);
}

.ss-footer-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
}

.ss-footer-bar p {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.25;
}

.ss-footer-bar__cards {
  display: flex;
  gap: 3px;
}

.ss-footer-bar__cards img {
  display: block;
  border-radius: 3px;
  background: var(--ss-white);
}

@media (max-width: 767px) {
  .ss-footer {
    grid-template-columns: 1fr;
  }
}

/* Book authors */
.ss-book-author {
  margin: 0 0 8px;
  color: var(--ss-charcoal);
  font-size: 16px;
  line-height: 1.5;
}

.tax-book_author .site-content {
  padding-top: 48px;
}

.ss-author-intro {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 2.5em;
  margin-bottom: 2.5em;
}

.ss-author-intro--no-photo {
  grid-template-columns: 1fr;
}

.ss-author-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
}

.tax-book_author .storefront-sorting,
.ss-shop .storefront-sorting {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tax-book_author .storefront-sorting::before,
.tax-book_author .storefront-sorting::after,
.ss-shop .storefront-sorting::before,
.ss-shop .storefront-sorting::after {
  display: none;
}

.tax-book_author .storefront-sorting .woocommerce-result-count,
.ss-shop .storefront-sorting .woocommerce-result-count {
  order: -1;
  margin: 0;
}

.tax-book_author .storefront-sorting .woocommerce-ordering,
.ss-shop .storefront-sorting .woocommerce-ordering {
  margin: 0;
}

/* Store and category pages */
.ss-shop .site-content {
  padding-top: 40px;
}

.ss-shop .woocommerce-ordering select {
  min-width: 248px;
  padding: 6px 36px 6px 12px;
  border: 1px solid var(--ss-border);
  border-radius: 3px;
  background: var(--ss-white) url("assets/images/chevron-down.svg") right 10px center / 16px no-repeat;
  appearance: none;
  color: var(--ss-charcoal);
  font-size: 14px;
  line-height: 1.4;
}

.ss-category-nav ul {
  margin: 0;
  list-style: none;
}

.ss-category-nav li {
  border-bottom: 1px dotted #aaa;
}

.ss-category-nav a,
.ss-category-nav a:hover {
  display: block;
  padding: 6px 0;
  color: var(--ss-charcoal);
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.ss-category-nav a:hover {
  color: var(--ss-black);
  text-decoration: underline;
}

.ss-category-nav a.is-current {
  padding-right: 24px;
  background: url("assets/images/chevron-right.svg") right center / 16px no-repeat;
  color: var(--ss-black);
  font-weight: 700;
}

@media (min-width: 768px) {
  .left-sidebar.ss-shop .content-area {
    width: calc(100% - 280px);
    margin-right: 0;
  }

  /* The top margin lines the list up with the first row of books, below the sorting bar */
  .left-sidebar.ss-shop .widget-area {
    width: 220px;
    margin-top: 79px;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .ss-author-intro {
    grid-template-columns: 1fr;
  }
}

/* Homepage */
.page-template-template-homepage .site-content {
  padding-top: 0;
}

.page-template-template-homepage .site-content .col-full {
  max-width: 1260px;
  padding-right: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.ss-masthead {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: var(--ss-pastel-blue) var(--ss-masthead-bg) center bottom / cover no-repeat;
}

.ss-masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1072px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.ss-masthead__text {
  position: relative;
  z-index: 1;
  width: 504px;
  max-width: 100%;
}

.ss-masthead__text h1 {
  margin: 0 0 24px;
  color: var(--ss-white);
  font-size: 36px;
}

.ss-masthead__text p {
  margin: 0 0 24px;
  color: var(--ss-white);
  font-size: 18px;
  line-height: 1.5;
}

.ss-masthead .ss-masthead__button,
.ss-masthead .ss-masthead__button:hover {
  padding: 12px 16px;
  border-radius: var(--ss-button-radius);
  background: var(--ss-footer-bar);
  color: var(--ss-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

/* Fan positions from Figma, measured from the montage's top-left corner */
.ss-masthead__books {
  position: absolute;
  top: 0;
  left: 599px;
  width: 515px;
  height: 500px;
}

.ss-masthead__books img {
  position: absolute;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.ss-masthead__books img:nth-last-child(3) {
  top: 76px;
  left: 192px;
  width: 235px;
  transform: rotate(41.39deg);
}

.ss-masthead__books img:nth-last-child(2) {
  top: 57px;
  left: 95px;
  width: 226px;
  transform: rotate(16.93deg);
}

.ss-masthead__books img:nth-last-child(1) {
  top: 89px;
  left: 20px;
  width: 230px;
  transform: rotate(-6.33deg);
}

/* On load the books appear as one upright stack, then the back book fans right and the top book fans left */
@media (prefers-reduced-motion: no-preference) {
  .ss-masthead__books.is-waiting {
    opacity: 0;
  }

  .ss-masthead__books.is-fanning {
    animation: ss-fan-appear 0.65s ease-out both;
  }

  .ss-masthead__books.is-fanning img {
    animation: ss-fan-out 2.1s cubic-bezier(0.45, 0, 0.15, 1) 0.5s both;
    will-change: transform;
  }

  .ss-masthead__books img:nth-last-child(3) {
    --ss-fan-from: translate(-101px, -7px);
  }

  .ss-masthead__books img:nth-last-child(2) {
    --ss-fan-from: translate(0, 18px);
  }

  .ss-masthead__books img:nth-last-child(1) {
    --ss-fan-from: translate(73px, -16px);
  }
}

@keyframes ss-fan-appear {
  from {
    opacity: 0;
  }
}

@keyframes ss-fan-out {
  from {
    transform: var(--ss-fan-from) rotate(0deg);
  }
}

@media (max-width: 1140px) {
  .ss-masthead__books {
    display: none;
  }
}

.ss-home-section {
  padding: 59px 0 40px;
  text-align: center;
}

.ss-home-section h2 {
  margin: 0;
  font-size: 28px;
}

.ss-home-section > h2 {
  margin-bottom: 12px;
}

/* The breadcrumb that spaced the title from the menu is removed on this page */
.woocommerce-cart .hentry .entry-header {
  padding-top: 40px;
}

/* My account menu icons are blue, and brown for the current page */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
  color: var(--ss-pastel-blue);
  opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
  color: var(--ss-footer);
}

/* Storefront spaces these page titles 5.997em (about 96px) from the content below. Half that is enough. */
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header {
  padding-bottom: 2.9984em;
}

.hentry .entry-content a.wc-block-cart__submit-button {
  text-decoration: none;
}

.wc-block-cart__submit-button .wc-block-components-button__text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("assets/images/padlock.svg") center / contain no-repeat;
  vertical-align: -3px;
}

/* Checkout and basket fields take the site's light border, like the header search. Focused fields and fields with errors keep WooCommerce's colours. */
.wc-block-components-text-input:not(.has-error) input:not(:focus),
.wc-block-components-textarea:not(:focus),
.wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:not(:focus),
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:not(:focus) {
  border-color: var(--ss-border);
}

/* The checkout's order summary sits on beige */
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--ss-beige);
}

/* Shipping options are beige panels with no outline, the selected one marked by its radio button */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control::after,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option::after {
  display: none;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__option {
  border-radius: var(--ss-button-radius);
  background: var(--ss-beige);
  box-shadow: none;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
  margin-top: 8px;
}

.ss-basket-suggestions > h2 {
  margin-bottom: 40px;
}

/* The basket page keeps Storefront's narrower column, so this breaks out to the homepage's width */
@media (min-width: 768px) {
  .ss-basket-suggestions {
    position: relative;
    left: 50%;
    width: min(1220px, 100vw - 40px);
    transform: translateX(-50%);
  }
}

/* Emptying the basket on the page shows WooCommerce's own book suggestions instead */
.hentry:has(.wp-block-woocommerce-empty-cart-block) ~ .ss-basket-suggestions {
  display: none;
}

/* WooCommerce adds no View basket link on the basket page, so the button stays there */
.woocommerce-cart ul.products li.product .button.added {
  display: inline-block;
}

.ss-home-section__intro {
  margin: 0 0 40px;
}

.ss-promos__heading {
  /* Small bottom margin because the promo collages already sit below empty space */
  margin: 19px 0 16px;
  font-size: 28px;
  text-align: center;
}

.ss-promos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.ss-promo {
  position: relative;
  display: block;
  aspect-ratio: 620 / 320;
  overflow: hidden;
  border-radius: 3px;
  text-decoration: none;
}

.ss-promo::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 75%;
  border-radius: 3px;
  background: var(--ss-beige);
}

.ss-promo__title {
  position: absolute;
  z-index: 2;
  top: 37.5%;
  left: 6.45%;
  max-width: 170px;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--ss-charcoal);
  font-family: var(--ss-font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0;
}

.ss-promo .ss-promo__button,
.ss-promo .ss-promo__button:hover {
  position: absolute;
  z-index: 2;
  bottom: 12.5%;
  left: 6.45%;
  padding: 8px 12px;
  border-radius: var(--ss-button-radius);
  background: var(--ss-footer-bar);
  color: var(--ss-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}


.ss-promo__collage img {
  position: absolute;
  height: auto;
  margin: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.21);
}

/* Cover positions from Figma: each panel has its own arrangement */
.ss-promo--1 .ss-promo__collage img:nth-child(1) {
  top: 17.23%;
  left: 64.36%;
  width: 23.94%;
}

.ss-promo--1 .ss-promo__collage img:nth-child(2) {
  top: 7.81%;
  left: 41.55%;
  width: 24.31%;
}

.ss-promo--1 .ss-promo__collage img:nth-child(3) {
  top: 45.62%;
  left: 74.35%;
  width: 22.42%;
}

.ss-promo--1 .ss-promo__collage img:nth-child(4) {
  top: 47.19%;
  left: 30.00%;
  width: 23.39%;
}

.ss-promo--1 .ss-promo__collage img:nth-child(5) {
  top: 41.37%;
  left: 50.61%;
  width: 24.95%;
}

.ss-promo--2 .ss-promo__collage img:nth-child(1) {
  top: 9.06%;
  left: 44.03%;
  width: 20.32%;
}

.ss-promo--2 .ss-promo__collage img:nth-child(2) {
  top: 12.50%;
  left: 62.74%;
  width: 23.55%;
}

.ss-promo--2 .ss-promo__collage img:nth-child(3) {
  top: 43.75%;
  left: 33.06%;
  width: 22.74%;
}

.ss-promo--2 .ss-promo__collage img:nth-child(4) {
  top: 37.50%;
  left: 72.26%;
  width: 24.52%;
}

.ss-promo--2 .ss-promo__collage img:nth-child(5) {
  top: 49.69%;
  left: 54.19%;
  width: 20.16%;
}

.ss-promo--3 .ss-promo__collage img:nth-child(1) {
  top: 11.88%;
  left: 49.01%;
  width: 22.80%;
}

.ss-promo--3 .ss-promo__collage img:nth-child(2) {
  top: 7.50%;
  left: 70.00%;
  width: 22.42%;
}

.ss-promo--3 .ss-promo__collage img:nth-child(3) {
  top: 44.33%;
  left: 52.59%;
  width: 22.59%;
}

.ss-promo--3 .ss-promo__collage img:nth-child(4) {
  top: 49.59%;
  left: 74.42%;
  width: 22.35%;
}

.ss-promo--3 .ss-promo__collage img:nth-child(5) {
  top: 56.56%;
  left: 35.32%;
  width: 17.90%;
}

.ss-promo--4 .ss-promo__collage img:nth-child(1) {
  top: 5.00%;
  left: 42.77%;
  width: 21.50%;
}

.ss-promo--4 .ss-promo__collage img:nth-child(2) {
  top: 10.00%;
  left: 63.71%;
  width: 15.61%;
}

.ss-promo--4 .ss-promo__collage img:nth-child(3) {
  top: 42.19%;
  left: 35.81%;
  width: 19.35%;
}

.ss-promo--4 .ss-promo__collage img:nth-child(4) {
  top: 38.93%;
  left: 54.27%;
  width: 21.63%;
}

.ss-promo--4 .ss-promo__collage img:nth-child(5) {
  top: 36.42%;
  left: 75.41%;
  width: 21.37%;
}

/* On hover the covers lift and fan out from the middle of the pile. Back row and front row, left to right. */
.ss-promo--1 .ss-promo__collage img:nth-child(2),
.ss-promo--2 .ss-promo__collage img:nth-child(1),
.ss-promo--3 .ss-promo__collage img:nth-child(1),
.ss-promo--4 .ss-promo__collage img:nth-child(1) {
  --ss-fan: -6px, -10px;
}

.ss-promo--1 .ss-promo__collage img:nth-child(1),
.ss-promo--2 .ss-promo__collage img:nth-child(2),
.ss-promo--3 .ss-promo__collage img:nth-child(2),
.ss-promo--4 .ss-promo__collage img:nth-child(2) {
  --ss-fan: 6px, -10px;
}

.ss-promo--1 .ss-promo__collage img:nth-child(4),
.ss-promo--2 .ss-promo__collage img:nth-child(3),
.ss-promo--3 .ss-promo__collage img:nth-child(5),
.ss-promo--4 .ss-promo__collage img:nth-child(3) {
  --ss-fan: -10px, -5px;
}

.ss-promo--1 .ss-promo__collage img:nth-child(5),
.ss-promo--2 .ss-promo__collage img:nth-child(5),
.ss-promo--3 .ss-promo__collage img:nth-child(3),
.ss-promo--4 .ss-promo__collage img:nth-child(4) {
  --ss-fan: 0, -8px;
}

.ss-promo--1 .ss-promo__collage img:nth-child(3),
.ss-promo--2 .ss-promo__collage img:nth-child(4),
.ss-promo--3 .ss-promo__collage img:nth-child(4),
.ss-promo--4 .ss-promo__collage img:nth-child(5) {
  --ss-fan: 10px, -5px;
}

.ss-promo::before,
.ss-promo .ss-promo__button,
.ss-promo__collage img {
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.ss-promo:hover::before,
.ss-promo:focus-visible::before {
  background: color-mix(in srgb, var(--ss-beige) 95%, #000);
}

.ss-promo:hover .ss-promo__button,
.ss-promo:focus-visible .ss-promo__button {
  background: var(--ss-accent);
}

.ss-promo:hover .ss-promo__collage img,
.ss-promo:focus-visible .ss-promo__collage img {
  transform: translate(var(--ss-fan));
}

@media (prefers-reduced-motion: reduce) {
  .ss-promo .ss-promo__collage img {
    transition: none;
    transform: none;
  }
}

@media (max-width: 900px) {
  .ss-promos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ss-promo {
    aspect-ratio: auto;
    height: 200px;
  }

  .ss-promo::before {
    height: 100%;
  }

  .ss-promo__collage {
    display: none;
  }

  .ss-promo__title {
    top: 24px;
  }

  .ss-promo .ss-promo__button,
  .ss-promo .ss-promo__button:hover {
    bottom: 24px;
  }
}

/* Blog */
.ss-blog .site-content {
  padding-top: 48px;
}

.ss-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ss-blog .hentry.ss-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  background: var(--ss-white);
  transition: box-shadow 0.2s ease;
}

.ss-post-card:hover,
.ss-post-card:focus-within {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.21);
}

.ss-post-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ss-beige);
}

.ss-post-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ss-post-card:hover .ss-post-card__image img {
  transform: scale(1.03);
}

/* Covers and posters sit whole on the beige panel */
.ss-post-card__image--portrait img,
.ss-post-card__image--none img {
  padding: 20px;
  box-sizing: border-box;
  object-fit: contain;
}

.ss-post-card__image--portrait img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.ss-post-card__image--none img {
  padding: 18%;
  opacity: 0.35;
}

.ss-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.ss-post-card__category {
  order: -1;
  margin: 0 0 8px;
  color: var(--ss-olive);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-post-card__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.35;
}

.ss-post-card__title a,
.ss-post-card__title a:hover {
  color: var(--ss-black);
  text-decoration: none;
}

/* The title link covers the card, so the whole card opens the post */
.ss-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ss-post-card:hover .ss-post-card__title a {
  text-decoration: underline;
}

.ss-post-card__date {
  margin: 0 0 12px;
  color: #767676;
  font-size: 14px;
  line-height: 1.5;
}

.ss-post-card__excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* The featured post spans the grid: picture on the left, text on the right */
.ss-blog .hentry.ss-post-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
}

/* The picture fills the height of the text beside it */
.ss-post-card--featured .ss-post-card__image {
  position: relative;
  aspect-ratio: auto;
  min-height: 400px;
}

.ss-post-card--featured .ss-post-card__image img {
  position: absolute;
  inset: 0;
}

.ss-post-card--featured .ss-post-card__body {
  justify-content: center;
  padding: 40px;
}

.ss-post-card--featured .ss-post-card__title {
  font-size: 30px;
  line-height: 1.3;
}

.ss-post-card--featured .ss-post-card__excerpt {
  font-size: 16px;
}

.ss-post-card__more {
  margin: 24px 0 0;
  color: var(--ss-black);
  font-weight: 700;
  font-size: 15px;
}

.ss-post-card__more::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background: url("assets/images/chevron-right.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.ss-post-card:hover .ss-post-card__more::after {
  transform: translateX(4px);
}

.ss-blog .pagination {
  margin: 48px 0 0;
  border: 0;
  text-align: center;
}

.ss-blog .pagination .page-numbers li .page-numbers {
  min-width: 40px;
  border-radius: 3px;
}

.ss-blog .pagination .page-numbers li .page-numbers.current {
  background: var(--ss-charcoal);
  color: var(--ss-white);
}

@media (prefers-reduced-motion: reduce) {
  .ss-post-card__image img,
  .ss-post-card__more::after {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .ss-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ss-posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-blog .hentry.ss-post-card--featured {
    display: flex;
  }

  .ss-post-card--featured .ss-post-card__image {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .ss-post-card--featured .ss-post-card__image img {
    position: static;
  }

  .ss-post-card--featured .ss-post-card__body {
    padding: 20px 24px 24px;
  }

  .ss-post-card--featured .ss-post-card__title {
    font-size: 24px;
  }
}

/* Single post */
.single-post .hentry {
  margin: 0;
  padding: 0;
  border: 0;
}

.ss-post-header {
  margin: 0 0 24px;
}

.single-post .ss-post-header .entry-title {
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 1.3;
}

.ss-post-header__date {
  margin: 0;
  color: #767676;
  font-size: 15px;
}

.ss-post-image {
  margin: 0 0 32px;
}

.ss-post-image img {
  display: block;
  width: 100%;
  border-radius: 3px;
}

.single-post .entry-content {
  font-size: 16px;
  line-height: 1.7;
}

.single-post .entry-content img {
  height: auto;
  border-radius: 3px;
}

.single-post .entry-content .aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.single-post .entry-content blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--ss-olive);
  background: var(--ss-beige);
  font-family: var(--ss-font-heading);
  font-style: italic;
}

.single-post .entry-content a {
  color: var(--ss-black);
  text-decoration: underline;
}

.single-post .entry-taxonomy {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-border);
  font-size: 14px;
}

.single-post .post-navigation {
  margin-top: 32px;
}

.single-post .post-navigation a {
  color: var(--ss-black);
}

/* Sidebar */
@media (min-width: 768px) {
  .right-sidebar.ss-blog .content-area {
    width: calc(100% - 340px);
    margin-right: 0;
  }

  .right-sidebar.ss-blog .widget-area {
    width: 290px;
    margin-right: 0;
  }
}

.ss-blog-sidebar .widget {
  margin: 0 0 40px;
}

.ss-blog-sidebar .widget-title {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--ss-olive);
  font-family: var(--ss-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ss-black);
}

.ss-blog-search {
  position: relative;
}

.ss-blog-search input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 44px 10px 12px;
  border: 1px solid var(--ss-border);
  border-radius: 3px;
  background: var(--ss-white);
  box-shadow: none;
  font-size: 15px;
}

.ss-blog-search input[type="search"]:focus {
  border-color: var(--ss-pastel-blue);
}

.ss-blog-search button,
.ss-blog-search button:hover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  padding: 0;
  border: 0;
  background: none;
}

.ss-blog-search button img {
  display: block;
  margin: 0 auto;
}

.ss-blog-sidebar ul {
  margin: 0;
  list-style: none;
}

.ss-blog-sidebar .widget_categories li {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px dotted #aaa;
  font-size: 15px;
}

.ss-blog-sidebar .widget_categories li::before {
  display: none;
}

.ss-blog-sidebar .widget_categories a {
  color: var(--ss-charcoal);
  text-decoration: none;
}

.ss-blog-sidebar .widget_categories a:hover {
  color: var(--ss-black);
  text-decoration: underline;
}

.ss-blog-sidebar .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-blog-sidebar .tagcloud a {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  background: var(--ss-beige);
  color: var(--ss-charcoal);
  font-size: 14px !important;
  line-height: 1.5;
  text-decoration: none;
}

.ss-blog-sidebar .tagcloud a:hover {
  border-color: var(--ss-olive);
  color: var(--ss-black);
}

.ss-latest-posts li + li {
  border-top: 1px dotted #aaa;
}

.ss-latest-posts li {
  margin: 0;
}

.ss-blog-sidebar .ss-latest-posts a {
  display: block;
  padding: 10px 0;
  color: var(--ss-charcoal);
  text-decoration: none;
}

.ss-latest-posts__title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

.ss-latest-posts a:hover .ss-latest-posts__title {
  color: var(--ss-black);
  text-decoration: underline;
}

.ss-latest-posts time {
  color: #767676;
  font-size: 13px;
}

/* Ordinary pages: About Us and the legal pages (inc/page.php) */
.ss-page-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  aspect-ratio: 1440 / 525;
  object-fit: cover;
}

.ss-band--page {
  padding: 60px 20px;
  background: var(--ss-beige);
}

.ss-band--page .ss-band__title {
  color: var(--ss-black);
}

.ss-page .content-area {
  float: none;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 60px;
}

.ss-page .site-main {
  margin-bottom: 40px;
}

.ss-page .hentry {
  margin: 0;
  padding: 0;
  border: 0;
}

.ss-page .entry-content {
  color: var(--ss-black);
  font-size: 16px;
  line-height: 1.5;
}

.ss-page .entry-content > :last-child {
  margin-bottom: 0;
}

.ss-page .entry-content p,
.ss-page .entry-content ul,
.ss-page .entry-content ol {
  margin: 0 0 24px;
}

/* Bullets and numbers line up with the paragraphs' left edge, with wrapped lines under the text */
.ss-page .entry-content ul,
.ss-page .entry-content ol {
  padding-left: 1.25em;
}

.ss-page .entry-content li {
  margin-bottom: 8px;
}

/* A page that opens with a paragraph leads with it larger, as About Us does */
.ss-page .entry-content > p:first-child {
  font-size: 20px;
  font-weight: 600;
}

.ss-page .entry-content h2 {
  margin: 40px 0 12px;
  font-size: 24px;
}

.ss-page .entry-content h3 {
  margin: 32px 0 8px;
  font-family: var(--ss-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ss-black);
}

.ss-page .entry-content > h2:first-child,
.ss-page .entry-content > h3:first-child {
  margin-top: 0;
}

/* .hentry outranks Storefront's quote block spacing */
.ss-page .hentry .entry-content blockquote {
  margin: 40px 0;
  padding: 16px;
  border-left: 2px solid var(--ss-pastel-blue);
  background: var(--ss-beige);
  font-family: var(--ss-font-heading);
  font-style: italic;
}

.ss-page .entry-content blockquote p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.ss-page .entry-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
}

.ss-page .entry-content a {
  color: var(--ss-black);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .ss-band--page {
    padding: 32px 20px;
  }

  .ss-page .content-area {
    padding-top: 32px;
  }
}