/*
 * Quorn Stone demo stylesheet.
 * Tokens and component rules follow the Quorn Stone design system (tokens.json, components/bundle.css),
 * using the theme's own variable and class names so the patterns port straight into the Shopify theme.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root {
  --color-background: rgb(254, 251, 247);
  --color-slate: rgb(44, 47, 43);
  --color-white: rgb(255, 255, 255);
  --color-moss: rgb(112, 116, 88);
  --color-moss-darken-5: rgb(98, 102, 77);
  --color-moss-alpha-30: rgba(112, 116, 88, .3);
  --color-limestone: rgb(243, 238, 229);
  --color-limestone-darken-5: rgb(235, 227, 212);
  --color-sandstone: rgb(230, 226, 216);
  --color-sandstone-lighten-8: rgb(246, 244, 241);
  --color-sandstone-darken-5: rgb(220, 214, 200);
  --color-ivory-pastel: rgb(243, 235, 226);
  --color-terracotta: rgb(184, 130, 116);
  --color-ruse: rgb(147, 68, 50);
  --color-strikethrough: rgb(138, 138, 138);
  --color-border: var(--color-sandstone);
  --color-border-lighter: var(--color-sandstone-lighten-8);
  --color-backdrop: rgba(0, 0, 0, .2);

  --font-heading: 'Freight Display Pro', 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Verdana', sans-serif;
  --font-size-10: .625rem; --font-size-11: .6875rem; --font-size-12: .75rem; --font-size-14: .875rem;
  --font-size-15: .9375rem; --font-size-16: 1rem; --font-size-17: 1.0625rem; --font-size-18: 1.125rem;
  --font-size-22: 1.375rem; --font-size-32: 2rem; --font-size-36: 2.25rem; --font-size-48: 3rem; --font-size-60: 3.75rem;

  --spacing-2: .125rem; --spacing-4: .25rem; --spacing-6: .375rem; --spacing-8: .5rem; --spacing-10: .625rem;
  --spacing-12: .75rem; --spacing-14: .875rem; --spacing-16: 1rem; --spacing-20: 1.25rem; --spacing-24: 1.5rem;
  --spacing-28: 1.75rem; --spacing-32: 2rem; --spacing-40: 2.5rem; --spacing-48: 3rem; --spacing-64: 4rem;

  --radius-2: 2px; --radius-4: 4px; --radius-8: 8px; --radius-10: 10px; --radius-20: 20px;
  --shadow-header: 0 4px 12px 1px #0000000d;
  --button-height: 44px; --button-height-small: 32px; --drawer-width: 492px;
  --z-dialog: 13; --z-header: 12;

  --container-gutter: var(--spacing-16);
  --header-height: 60px;
  --button-background-color: var(--color-moss);
  --button-color: var(--color-limestone);
  --button-hover-background-color: var(--color-moss-darken-5);
}
@media (min-width: 768px) { :root { --container-gutter: 28px; --header-height: 66px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-background); color: var(--color-slate);
  font-family: var(--font-body); font-size: var(--font-size-14); letter-spacing: -.02em; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
.button-reset { background: none; border: 0; padding: 0; cursor: pointer; }
.list-reset { list-style: none; margin: 0; padding: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:not(.is-tabbable) :focus { outline: none; }

/* typography */
h1, h2, h3, h4, h5, h6, [class*="text-h"] { font-family: var(--font-heading); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.text-h1 { font-size: var(--font-size-60); } .text-h2 { font-size: var(--font-size-48); } .text-h3 { font-size: var(--font-size-36); }
.text-h4 { font-size: var(--font-size-32); } .text-h5 { font-size: var(--font-size-22); } .text-h6 { font-size: var(--font-size-18); }
.text-body-small { font-size: var(--font-size-12); }
.text-body-xsmall { font-size: var(--font-size-11); letter-spacing: 0; line-height: 1.2; }
.text-body-large { font-size: var(--font-size-16); line-height: 1.6; }
.text-from { font-family: var(--font-heading); font-size: var(--font-size-17); font-style: italic; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.text-product-title { font-size: var(--font-size-14); line-height: 1.2; }
.button, .cta, .text-cta { font-family: var(--font-body); font-size: var(--font-size-10); font-weight: 500; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.text-muted { color: var(--color-strikethrough); }
@media (max-width: 1023px) {
  .text-h1 { font-size: var(--font-size-48); }
  .text-h3 { font-size: var(--font-size-32); }
  .text-h4 { font-size: var(--font-size-22); }
}

/* layout */
.container { padding-inline: var(--container-gutter); width: 100%; }
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-4 { gap: var(--spacing-4); } .gap-8 { gap: var(--spacing-8); } .gap-12 { gap: var(--spacing-12); } .gap-16 { gap: var(--spacing-16); }

/* button */
.button {
  align-items: center; background-color: var(--button-background-color); border: 0; border-radius: var(--radius-4);
  color: var(--button-color); cursor: pointer; display: inline-flex; justify-content: center; min-height: var(--button-height);
  padding: var(--spacing-12) var(--spacing-20); transition: background-color .1s ease; white-space: nowrap;
}
.button:hover { background-color: var(--button-hover-background-color); }
.button--sandstone { --button-background-color: var(--color-sandstone); --button-color: var(--color-slate); --button-hover-background-color: var(--color-sandstone-darken-5); }
.button--white { --button-background-color: var(--color-white); --button-color: var(--color-slate); --button-hover-background-color: rgb(242, 242, 242); }
.button--small { min-height: var(--button-height-small); padding-inline: var(--spacing-14); }

/* cta: brush underline */
.cta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: fit-content; }
.cta::after {
  background-color: currentColor; clip-path: inset(0 0 0 0); content: ""; display: block; height: 3px; margin-top: 5px;
  -webkit-mask: var(--cta-underline-asset-url) no-repeat 0 0 / 100% 100%; mask: var(--cta-underline-asset-url) no-repeat 0 0 / 100% 100%;
  transition: clip-path .2s ease-out .2s; width: 100%;
}
.cta--on-open::after { clip-path: inset(0 100% 0 0); }
.cta--on-open.is-open::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) {
  .cta:not(.cta--on-open):hover::after { clip-path: inset(0 100% 0 0); }
  .cta--on-open:hover::after { clip-path: inset(0 0 0 0); }
}

/* pill */
.pill {
  background-color: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-20);
  box-shadow: inset 0 0 0 1px var(--color-background); color: var(--color-slate); cursor: pointer; display: inline-flex;
  align-items: center; gap: var(--spacing-6); font-size: var(--font-size-14); padding: var(--spacing-4) var(--spacing-12); white-space: nowrap;
}
.pill--small { font-size: var(--font-size-12); padding: var(--spacing-2) var(--spacing-8); }
.pill.is-active { border-color: var(--color-slate); }
.pill[disabled] { cursor: not-allowed; opacity: .25; }
.pill__count { color: var(--color-strikethrough); font-size: var(--font-size-11); }
.pill--swatch { aspect-ratio: 1; border-radius: 50%; font-size: 0; padding: 0; width: 30px; border-color: var(--color-background); }
.pill--swatch.pill--small { width: 20px; }

/* badge */
.badge {
  align-items: center; background-color: var(--color-limestone); border-radius: 0 0 var(--radius-4) var(--radius-4); display: flex;
  font-size: var(--font-size-11); letter-spacing: 0; line-height: 1.2; padding: var(--spacing-6);
}
.badge--sale { background-color: var(--color-ruse); color: var(--color-limestone); }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--spacing-6); }
.image-container { display: block; overflow: hidden; position: relative; background: var(--color-border-lighter); }
.image-container__badges { left: var(--spacing-8); position: absolute; top: 0; z-index: 1; }
.image { background-color: var(--color-border-lighter); }
.image-cover { height: 100%; object-fit: cover; width: 100%; }

/* price */
.product-price { color: var(--color-slate); font-size: var(--font-size-15); }
.product-price sup { font-size: .5em; }
.product-price s { color: var(--color-strikethrough); font-size: var(--font-size-11); margin-inline-start: var(--spacing-6); }
.product-price--sale .product-price__price { color: var(--color-ruse); }

/* paint swatch: brush-stroke colour chip */
.paint-swatch { display: inline-block; height: 13px; min-width: 24px; position: relative; flex-shrink: 0; }
.paint-swatch__primary, .paint-swatch__secondary { display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.paint-swatch__primary { height: 100%; width: 100%; -webkit-mask-image: var(--primary-swatch-asset-url); mask-image: var(--primary-swatch-asset-url); }
.paint-swatch__secondary { bottom: -3px; height: 13px; left: 2px; position: absolute; width: 21px; z-index: 1; -webkit-mask-image: var(--secondary-swatch-asset-url); mask-image: var(--secondary-swatch-asset-url); }

/* torn-paper section edges */
.section-border-bottom { position: relative; }
.section-border-bottom::after {
  background-color: var(--background-color, var(--color-moss)); bottom: -6px; content: ""; display: block; height: 7px; left: 0;
  -webkit-mask-image: var(--section-border-asset-url); mask-image: var(--section-border-asset-url); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  pointer-events: none; position: absolute; rotate: 180deg; width: 100%; z-index: 1;
}

/* site header (demo version of the theme header) */
.site-header { background: var(--color-background); box-shadow: var(--shadow-header); position: sticky; top: 0; z-index: var(--z-header); }
.site-header__bar { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; height: var(--header-height); }
.site-header__logo img { height: 14px; width: auto; }
@media (min-width: 768px) { .site-header__logo img { height: 17px; } }
.site-header__nav { display: flex; gap: var(--spacing-20); }
.site-header__aside { justify-self: end; }
.announcement { background: var(--color-moss); color: var(--color-limestone); text-align: center; padding: 9px var(--container-gutter); }
@media (max-width: 767px) {
  /* logo left, nav right, as the theme's mobile header */
  .site-header__bar { grid-template-columns: 1fr auto; gap: var(--spacing-16); }
  .site-header__logo { order: -1; }
  .site-header__nav { justify-self: end; gap: var(--spacing-14); }
  .site-header__aside { display: none; }
}

/* product card */
.product-card { display: flex; flex-direction: column; gap: var(--spacing-8); }
.product-card__thumbnail { aspect-ratio: 11 / 14; border-radius: var(--radius-4); cursor: pointer; }
.product-card__thumbnail img { transition: opacity .25s ease-in-out, transform .5s ease-out; }
.product-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 33.59px; overflow: hidden; }
.results-grid { display: grid; gap: var(--spacing-24) var(--spacing-16); grid-template-columns: repeat(var(--column-count, 2), minmax(0, 1fr)); }
@media (min-width: 768px) { .results-grid { --column-count: 3; } }
@media (min-width: 1024px) { .results-grid { --column-count: 4; gap: var(--spacing-24); } }
@media (min-width: 1328px) { .results-grid { --column-count: 5; } }

/* drawer */
.dialog-window { background-color: transparent; inset: 0; pointer-events: none; position: fixed; transition: background-color .2s ease-out; z-index: var(--z-dialog); }
.dialog-window.is-open { background-color: var(--color-backdrop); pointer-events: auto; }
.drawer {
  background-color: var(--color-limestone); display: flex; flex-direction: column; height: 100%; position: fixed; right: 0; top: 0;
  transform: translate(100%); transition: transform .2s ease-in-out; width: 100%;
}
.dialog-window > .drawer.is-in { transform: none; }
.dialog-window > .drawer + .drawer { box-shadow: -12px 0 32px #0000001f; }
/* stacked layers: back arrow leading, title beside it; the base layer has its title leading and close trailing */
.drawer-back { align-items: center; display: flex; justify-content: center; margin-inline: -6px var(--spacing-6); padding: 6px; border-radius: 50%; }
.drawer-back:hover { background: var(--color-limestone-darken-5); }
.drawer-header__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-header:has(.drawer-back) { justify-content: flex-start; }
@media (min-width: 576px) { .drawer { width: var(--drawer-width); } }
.drawer-header { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; padding: var(--spacing-20) var(--container-gutter) var(--spacing-16); }
.drawer-body { flex-grow: 1; overflow-y: auto; padding: var(--spacing-20) var(--container-gutter) var(--spacing-40); }
.icon { fill: currentColor; height: var(--size, 24px); width: var(--size, 24px); flex-shrink: 0; }

/* related products button (shop-the-look chip on lifestyle images) */
.related-products-button {
  align-items: center; background: var(--color-background); border-radius: var(--radius-4); display: flex; gap: var(--spacing-4);
  padding: var(--spacing-4); position: absolute; right: var(--spacing-12); bottom: var(--spacing-12); z-index: 1;
}
.related-products-button__thumbnail { aspect-ratio: 1; border-radius: var(--radius-2); overflow: hidden; width: 40px; background: var(--color-border); }
.related-products-button__plus { align-items: center; display: flex; justify-content: center; width: 20px; --size: 14px; }
.related-products-button__count { font-size: var(--font-size-11); padding-inline: var(--spacing-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}