/* Demo Prints' own styling. The framework gives every site the same theme; this file is where this
   site alone differs from it, and it loads after the framework's stylesheets so it always wins.
   Nothing here needs a framework release: it is served straight from this repository. */

:root {
   /* The reference shop laid its pages out in a 1600px column and set body copy in black. */
   --wrap: 1600px;
   --text: #000;
}

/* The reference shop set its copy with a hair of tracking; every measurement taken from it carries
   it, so it belongs with the tokens rather than on the elements that happen to show it. */
body {
   letter-spacing: .16px;
}

/* The reference shop closed every page with a review strip above the sign-up band. This site says
   the same thing in its own words and links to its own reviews, in the band's place and shape. */
.content-signup {
   padding-top: 0;
   border-top: 0;
}

.reviews-strip {
   border-top: 1px solid rgba(0, 0, 0, .1);
   padding: 40px 20px;
   text-align: center;
}

.reviews-strip p {
   margin: 0;
}

.reviews-strip a {
   text-decoration: underline;
   text-underline-offset: 3px;
   font-weight: 700;
}

/* Pagination, colour swatches and the feature tags on a product card, at the sizes and colours the
   reference shop drew them. The framework ships its own; these are this site's measurements. */
.page-navigation {
   display: table;
   margin: 30px auto 0;
}

.page-navigation .pagination {
   display: table;
   margin: 0;
   gap: 0;
   font-size: 16px;
   border-radius: 6px;
}

.page-navigation .pagination li {
   display: inline;
   margin: 0;
}

.page-navigation .pagination a {
   display: block;
   float: left;
   padding: 10px 16px;
   font-size: 18px;
   line-height: 24px;
   border: 1px solid #ddd;
   border-radius: 0;
   margin-left: -1px;
   background: #fff;
   color: var(--brand);
}

.page-navigation .pagination li:first-child a {
   border-radius: 6px 0 0 6px;
   margin-left: 0;
}

.page-navigation .pagination li:last-child a {
   border-radius: 0 6px 6px 0;
}

.page-navigation .pagination a:hover {
   background: #eee;
   color: #a91f10;
}

.page-navigation .pagination .active a,
.page-navigation .pagination .active a:hover {
   background: var(--brand);
   border-color: var(--brand);
   color: #fff;
}

.page-navigation .pagination .gap span {
   display: block;
   float: left;
   padding: 10px 16px;
   font-size: 18px;
   line-height: 24px;
   border: 1px solid #ddd;
   margin-left: -1px;
   background: #fff;
   color: rgba(0, 0, 0, .5);
}

.product-swatches {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: 8px;
   padding: 4px 0;
   margin: 1em 0;
}

.product-swatch {
   position: relative;
   display: block;
   width: 12px;
   height: 12px;
   border: 0;
   border-radius: 0;
}

/* Every swatch carries a hairline so a white one is still a square, and a ring sitting 4px outside
   it that the brand colour fills on hover — the reference shop's own way of showing which is under
   the pointer without moving anything. */
.product-swatch::after {
   content: "";
   position: absolute;
   inset: 0;
   border: 1px solid rgba(0, 0, 0, .1);
   z-index: 4;
}

.product-swatch::before {
   content: "";
   position: absolute;
   inset: 0;
   margin: -4px;
   border: 1px solid transparent;
}

.product-swatch:hover::before,
.product-swatch:focus-visible::before {
   border-color: var(--brand);
}

.product-swatch-more {
   font-size: 14px;
   line-height: 1;
   color: rgba(0, 0, 0, .5);
   position: relative;
   top: -.5px;
}

a.product-swatch-more:hover,
a.product-swatch-more:focus {
   color: var(--brand);
}

.product-tags span,
.product-tags a {
   padding: 1px 5px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 500;
   line-height: 16.5px;
   border: 1px solid var(--chip, rgba(0, 0, 0, .8));
   background: var(--chip, transparent);
   color: var(--chip-fg, rgba(0, 0, 0, .9));
}

.product-tags a:hover {
   opacity: 1;
   background: #1d1d1b;
   border-color: #1d1d1b;
   color: #fff;
}

/* On the product page the reference chips sit a hair taller than on a card (line-height 17.6px). */
.product-badges .product-tag {
   line-height: 17.6px;
}

/* Product cards and the listing grid, at the reference shop's measurements: five to a row with 15px
   gutters, the picture bleeding to the card's edge, a 15px title, 14px copy and prices, the core
   mark as a small logo top-right and the wish-list heart bottom-right of the picture. */
.catalogue-grid {
   display: flex;
   flex-flow: row wrap;
   gap: 0;
   margin: 0 -15px;
}

.catalogue-grid>.product-card {
   flex: 1 1 20%;
   max-width: 20%;
   min-width: 0;
   padding: 15px;
}

.product-card {
   border: 0;
}

.product-card .product-image {
   position: relative;
   margin: 0 0 14px;
}

.product-card .thumb {
   display: block;
   aspect-ratio: 360 / 422;
   border-radius: 8px;
   overflow: hidden;
   background: transparent;
}

.product-card .thumb img {
   width: 100%;
   height: 100%;
   /* object-fit: contain; */
   transition: transform .2s;
}

.product-card .thumb:hover img {
   transform: scale(1.08);
}

.product-card .core-tag {
   position: absolute;
   right: 5px;
   top: 5px;
   width: 61px;
   height: 14px;
   font-size: 0;
   color: transparent;
   background: url(/images/ui/core-logo.svg) 0 0 / 100% 100% no-repeat;
}

.product-card .wish-form {
   position: absolute;
   top: auto;
   right: 13px;
   bottom: 13px;
   z-index: 2;
}

.product-card .wish-form button {
   width: 26px;
   height: 26px;
   padding: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .4);
   color: transparent;
   overflow: hidden;
}

.product-card .wish-form button:hover,
.product-card .wish-form button[aria-pressed=true] {
   background: rgba(255, 255, 255, .8);
}

.product-card .wish-form button .ui-icon {
   display: none;
}

.product-card .wish-form button::before {
   content: "";
   display: block;
   width: 24px;
   height: 24px;
   margin: 1px auto 0;
   background: url(/images/ui/wish-list.svg) center top / 24px auto no-repeat;
}

.product-card .wish-form button[aria-pressed=true]::before {
   background-position: center bottom;
}

.product-card .body {
   padding: 0;
}

.product-card .title {
   margin: 0 0 .5em;
}

.product-card .title a {
   display: table;
   font-size: 15px;
   line-height: 1.3;
   font-weight: 400;
   color: #000;
}

.product-card .title a:hover,
.product-card .title a:focus {
   color: var(--brand);
}

.product-card .meta {
   font-size: 14px;
   line-height: 1.5;
   color: rgba(0, 0, 0, .5);
   margin: 0 0 .5em;
}

.product-card .price {
   font-size: 14px;
   line-height: 1.5;
   margin: 0 0 .5em;
}

.product-card .price small {
   font-size: inherit;
   font-weight: inherit;
}

.product-card .product-rating-line {
   font-size: 16px;
   line-height: 1.5;
   color: rgba(0, 0, 0, .5);
   margin: 16px 0 0;
}

.product-card .product-rating-line a {
   color: rgba(0, 0, 0, .5);
}

.product-card .product-rating-line a:hover {
   color: var(--brand);
}

@media (max-width: 1199px) {
   .catalogue-grid>.product-card {
      flex-basis: 33.33%;
      max-width: 33.33%;
   }
}

@media (max-width: 767px) {
   .catalogue-grid>.product-card {
      flex-basis: 50%;
      max-width: 50%;
   }
}

.catalogue-grid .product-card .price {
   font-size: 14px;
   line-height: 1.5;
   margin: 0 0 .5em;
}

.product-card .product-rating-line a {
   display: inline;
   font-size: 14px;
   line-height: 1.5;
}

/* The card's copy sits 15px in from the picture's edge; the toolbar and breadcrumb read at 15px in
   half-black, and a subcategory tile's name is semi-bold and only as wide as its words. */
.product-card .body {
   padding: 0 15px;
}

.listing-toolbar,
.listing-toolbar label>span,
.result-count {
   font-size: 15px;
   line-height: 1.5;
   color: rgba(0, 0, 0, .5);
}

.reference-crumbs,
.reference-crumbs a {
   font-size: 15px;
   line-height: 1.5;
   color: rgba(0, 0, 0, .5);
}

.reference-crumbs a:hover {
   color: var(--brand);
}

.subcategory-grid strong {
   display: inline-block;
   font-weight: 600;
}