/* Everwell paper layer for the base theme pages (blog, article, search, cart, 404, plain pages, collections list). Loads after ep.css. */
/* =====================================================================
   Scoped to #MainContent by its data-template (set in layout/theme.liquid)
   and to Shopify's policy container, so the homepage, product and
   collection templates are untouched. The ID in every selector also
   lets these rules win over Horizon's class-level styles.
   ===================================================================== */

:is(
  #MainContent[data-template="page"],
  #MainContent[data-template="blog"], #MainContent[data-template^="blog."],
  #MainContent[data-template="article"], #MainContent[data-template^="article."],
  #MainContent[data-template="search"], #MainContent[data-template^="search."],
  #MainContent[data-template="cart"], #MainContent[data-template^="cart."],
  #MainContent[data-template="404"],
  #MainContent[data-template="list-collections"], #MainContent[data-template^="list-collections."],
  #MainContent:has(> .shopify-policy__container)
) {
  /* Horizon heading presets, re-cut in the paper type scale */
  --font-h1--family: var(--ep-font); --font-h1--weight: 500; --font-h1--size: clamp(40px, 5.4vw, 78px); --font-h1--line-height: 1; --font-h1--letter-spacing: -0.03em; --font-h1--case: none;
  --font-h2--family: var(--ep-font); --font-h2--weight: 500; --font-h2--size: clamp(36px, 4.6vw, 68px); --font-h2--line-height: 1.02; --font-h2--letter-spacing: -0.03em; --font-h2--case: none;
  --font-h3--family: var(--ep-font); --font-h3--weight: 500; --font-h3--size: clamp(24px, 2.4vw, 34px); --font-h3--line-height: 1.1; --font-h3--letter-spacing: -0.02em; --font-h3--case: none;
  --font-h4--family: var(--ep-font); --font-h4--weight: 600; --font-h4--size: 17px; --font-h4--line-height: 1.25; --font-h4--letter-spacing: -0.01em; --font-h4--case: none;
  --font-h5--family: var(--ep-font); --font-h5--weight: 600; --font-h5--size: 15px; --font-h5--line-height: 1.3; --font-h5--letter-spacing: 0; --font-h5--case: none;
  --font-h6--family: var(--ep-font); --font-h6--weight: 500; --font-h6--size: 13px; --font-h6--line-height: 1.35; --font-h6--letter-spacing: 0; --font-h6--case: none;
  --font-paragraph--family: var(--ep-font);

  background: var(--ep-paper);
  color: var(--ep-ink);
  font-family: var(--ep-font);

  /* every colour scheme inside these pages becomes paper + ink + red */
  &, & [class*="color-scheme-"] {
    --color-background: var(--ep-paper); --color-background-rgb: 245 246 243;
    --color-foreground: var(--ep-ink); --color-foreground-rgb: 11 18 32;
    --color-foreground-heading: var(--ep-ink); --color-foreground-heading-rgb: 11 18 32;
    --color-foreground-muted: var(--ep-muted);
    --color-border: var(--ep-line); --color-border-rgb: 14 30 58;
    --color-primary-button-text: #fff; --color-primary-button-background: var(--ep-red); --color-primary-button-border: var(--ep-red);
    --color-primary-button-hover-text: #fff; --color-primary-button-hover-background: var(--ep-red-hi); --color-primary-button-hover-border: var(--ep-red-hi);
    --color-secondary-button-text: var(--ep-ink); --color-secondary-button-background: transparent; --color-secondary-button-border: var(--ep-ink);
    --color-secondary-button-hover-text: var(--ep-ink); --color-secondary-button-hover-background: var(--ep-card); --color-secondary-button-hover-border: var(--ep-ink);
    --color-input-background: var(--ep-card); --color-input-text: var(--ep-ink); --color-input-text-rgb: 11 18 32;
    --color-input-border: rgba(14, 30, 58, 0.22); --color-input-hover-background: var(--ep-card);
  }
  & .section-background { background: var(--ep-paper); }

  & :is(h1, h2, h3, h4, h5, h6, p, li, td, th, label, input, textarea, select, button) { font-family: var(--ep-font); }
  & :focus-visible { outline: 2px solid var(--ep-red-hi); outline-offset: 3px; }

  /* ----------------------------------------------------- buttons */
  & :is(.button, .button-primary):not(.button-unstyled, .button-secondary, .button--tertiary, .close-button, .quick-add__button) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
    border: 0; border-radius: 4px; background: var(--ep-red); color: #fff; box-shadow: none;
    font: 500 15px/1 var(--ep-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    transition: background-color 0.2s ease;
  }
  & :is(.button, .button-primary):not(.button-unstyled, .button-secondary, .button--tertiary, .close-button, .quick-add__button):hover { background: var(--ep-red-hi); color: #fff; }
  & .button-secondary:not(.skip-to-content-link) {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px;
    border: 0; border-radius: 4px; background: transparent; color: var(--ep-ink); box-shadow: inset 0 0 0 1px currentColor;
    font: 500 15px/1 var(--ep-font); letter-spacing: 0; text-transform: none;
  }
  & .button-secondary:not(.skip-to-content-link):hover { background: var(--ep-card); }
  & .button--tertiary { font-family: var(--ep-font); color: var(--ep-muted); }
  & .button--tertiary:hover { color: var(--ep-ink); }

  /* ----------------------------------------------------- inputs: fine rules */
  & :is(.field__input, .search-page-input, textarea, select) {
    background: var(--ep-card); color: var(--ep-ink); border: 1px solid rgba(14, 30, 58, 0.22); border-radius: 4px;
    box-shadow: none; font: 400 16px/1.4 var(--ep-font); letter-spacing: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  & :is(.field__input, .search-page-input, textarea, select):hover { border-color: rgba(14, 30, 58, 0.4); }
  & :is(.field__input, .search-page-input, textarea, select):focus { outline: none; border-color: var(--ep-ink); box-shadow: 0 0 0 1px var(--ep-ink); }
  & :is(.field__input, .search-page-input, textarea, select):focus-visible { outline: none; }
  & .field__input::placeholder, & .search-page-input::placeholder { color: var(--ep-muted); opacity: 1; }
  & .field label, & .field__label { font-size: 13px; color: var(--ep-muted); }

  /* ----------------------------------------------------- product cards (search results, "you may also like") */
  & .product-card__content.product-grid__card {
    height: 100%; gap: 4px; padding: 0 0 16px; overflow: hidden;
    background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: 6px;
    transition: transform 0.35s var(--ep-ease), box-shadow 0.35s ease, border-color 0.25s ease;
  }
  & .product-card:hover .product-card__content.product-grid__card { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14, 30, 58, 0.1); border-color: rgba(14, 30, 58, 0.24); }
  & .product-card__content > .card-gallery { margin-bottom: 10px; background: #fff; border-bottom: 1px solid var(--ep-line); border-radius: 0; }
  & .product-card__content :is(.text-block, product-price, .product-grid-view-zoom-out--details) { padding-inline: 16px; }
  & .product-card__content :is(h3, h4, .h4, p) { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ep-ink); overflow-wrap: anywhere; }
  & .product-card .price, & .product-card .price--quote { font-size: 13px; font-weight: 400; color: var(--ep-muted); }
  & .product-card .product-badges { display: none; }

  /* section headings above product lists ("You may also like", "From the catalogue") */
  & .section-resource-list__header :is(h2, h3, h4, p) { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ep-muted); }
  & .section-resource-list__header .link { font-size: 14px; font-weight: 500; color: var(--ep-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  & .resource-list--grid { gap: 12px; }

  /* ----------------------------------------------------- prose: plain pages, policies, articles */
  & :is(.page-width-content .rte, .shopify-policy__body .rte, .blog-post-content) {
    max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--ep-ink-2);

    & p { margin: 0 0 1em; }
    & > :first-child, & > div > :first-child { margin-top: 0; }
    & :is(h1, h2) {
      margin: 1.5em 0 0.6em; padding-top: 0.8em; border-top: 1px solid var(--ep-line);
      font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ep-ink); text-wrap: balance;
    }
    & h3 { margin: 1.6em 0 0.5em; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ep-ink); }
    & :is(h4, h5, h6) { margin: 1.6em 0 0.5em; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ep-muted); }
    & :is(strong, b) { font-weight: 600; color: var(--ep-ink); }
    & a:not(.button, .ep-btn) { color: var(--ep-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(14, 30, 58, 0.35); }
    & a:not(.button, .ep-btn):hover { text-decoration-color: currentColor; }
    & :is(ul, ol) { margin: 0 0 1em; padding-left: 1.3em; }
    & li { margin: 0 0 0.4em; padding-left: 0.2em; }
    & li::marker { color: var(--ep-muted); }
    & blockquote { margin: 1.4em 0; padding: 14px 16px; border-left: 2px solid var(--ep-red); background: var(--ep-card); color: var(--ep-ink-2); font-style: normal; }
    & hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ep-line); }
    & img { max-width: 100%; height: auto; border-radius: 6px; }
    & table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 15px; line-height: 1.45; background: var(--ep-card); }
    & :is(th, td) { padding: 10px 14px; border: 1px solid var(--ep-line); text-align: left; vertical-align: top; }
    & th { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-muted); background: var(--ep-paper-2); }
  }

  @media (max-width: 749px) {
    & .product-card__content :is(.text-block, product-price, .product-grid-view-zoom-out--details) { padding-inline: 12px; }
    & .product-card__content :is(h3, h4, .h4, p) { font-size: 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    & :is(.product-card__content, .blog-post-card, .collection-card__inner, .collection-card__image img) { transition: none !important; transform: none !important; }
  }
}

/* ===================================================== plain page (main-page) */
#MainContent[data-template="page"] .page-width-content {
  & > .text-block:first-child, & > :first-child:is(.text-block) {
    padding-bottom: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--ep-line);
  }
  & > .text-block:first-child > * { text-wrap: balance; }
}

/* ===================================================== policy pages */
#MainContent .shopify-policy__container {
  max-width: calc(68ch + 2 * var(--ep-gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--ep-gutter) clamp(64px, 8vw, 120px);
  font-family: var(--ep-font); color: var(--ep-ink);

  & .shopify-policy__title { margin: 0 0 clamp(28px, 3.6vw, 48px); padding-bottom: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--ep-line); text-align: left; }
  & .shopify-policy__title h1 { margin: 0; font-size: clamp(40px, 5.4vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ep-ink); text-wrap: balance; }
}

/* ===================================================== blog list */
:is(#MainContent[data-template="blog"], #MainContent[data-template^="blog."]) {
  & .blog-posts > .text-block:first-child { border-bottom: 1px solid var(--ep-line); margin-bottom: clamp(24px, 3vw, 40px); }
  & .blog-posts-container { gap: 12px; }
  & .blog-post-card {
    height: 100%; overflow: hidden; background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: 6px;
    transition: transform 0.35s var(--ep-ease), box-shadow 0.35s ease, border-color 0.25s ease;
  }
  & .blog-post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14, 30, 58, 0.1); border-color: rgba(14, 30, 58, 0.24); }
  & .blog-post-card__image-container { border-bottom: 1px solid var(--ep-line); border-radius: 0; overflow: hidden; }
  & .blog-post-card__image-container img { border-radius: 0; }
  & .blog-post-card__content { padding: 16px 18px 20px; }
  & .blog-post-card__content :is(h2, h3, h4, .h4) { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ep-ink); }
  & .blog-post-card__content :is(p, .rte) { font-size: 15px; line-height: 1.5; color: var(--ep-ink-2); }
  & .blog-post-card a { color: inherit; text-decoration: none; }
}

/* ===================================================== article */
:is(#MainContent[data-template="article"], #MainContent[data-template^="article."]) {
  & .blog-post-content { margin-inline: auto; }
  & [class*="blog-post-info"] { font-size: 13px; letter-spacing: 0.06em; color: var(--ep-muted); }
  & .image-block img, & .blog-post-image img { border-radius: 6px; }
  & .blog-post-comments-container { max-width: 68ch; margin-inline: auto; padding-top: clamp(28px, 3.6vw, 48px); border-top: 1px solid var(--ep-line); }
  & .blog-post-comment { padding-block: 18px; border-bottom: 1px solid var(--ep-line); font-size: 16px; line-height: 1.6; color: var(--ep-ink-2); }
  & .blog-post-comment__author { font-size: 13px; color: var(--ep-muted); }
}

/* ===================================================== search */
:is(#MainContent[data-template="search"], #MainContent[data-template^="search."]) {
  & .search-page__header { padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--ep-line); margin-bottom: clamp(16px, 2vw, 24px); }
  & .search-page-input { min-height: 52px; }
  & .search__icon, & .search__reset-button { color: var(--ep-muted); }
  & .facets, & .products-count-wrapper { font-size: 14px; color: var(--ep-muted); }
  & .search-results__no-results { font-size: 17px; line-height: 1.6; color: var(--ep-ink-2); }
}

/* ===================================================== cart */
:is(#MainContent[data-template="cart"], #MainContent[data-template^="cart."]) {
  & .cart-title > * { font-size: clamp(36px, 4.6vw, 68px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; color: var(--ep-ink); }
  & .cart-items__table-row { border-color: var(--ep-line); }
  & .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid var(--ep-line); }
  & .cart-items__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ep-ink); text-decoration: none; }
  & .cart-items__variant, & .cart-items__properties, & .cart-secondary-typography { font-size: 14px; color: var(--ep-muted); }
  & .cart-items__media-container { background: #fff; border: 1px solid var(--ep-line); border-radius: 4px; overflow: hidden; }
  & .quantity-selector { border: 1px solid rgba(14, 30, 58, 0.22); border-radius: 4px; background: var(--ep-card); box-shadow: none; }
  & .cart__summary-container { background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: 6px; }
  & .cart__summary-container .section-background { background: var(--ep-card); }
  & .cart__summary-item { border-color: var(--ep-line); }
  & .tax-note { font-size: 13px; color: var(--ep-muted); }
  & .cart__checkout-button { width: 100%; }

  /* empty cart: a ruled frame with corner marks */
  & .cart-page--empty {
    position: relative; margin-top: clamp(20px, 3vw, 40px); padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px); border: 1px solid var(--ep-line); color: var(--ep-ink-2);
  }
  & .cart-page--empty::before {
    content: ""; position: absolute; inset: -3px; pointer-events: none; color: var(--ep-ink);
    background:
      linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 100% 100% / 5px 5px no-repeat;
  }
  & .cart-page--empty .cart-items__wrapper :is(h1, h2, h3, p:first-child) { color: var(--ep-ink); }
  & .cart-page--empty .cart-items__wrapper a:not(.button) { color: var(--ep-ink); text-underline-offset: 3px; }
}

/* ===================================================== 404 */
#MainContent[data-template="404"] {
  & .section-content-wrapper:has(> .text-block) {
    position: relative; margin-top: clamp(20px, 3vw, 40px); border: 1px solid var(--ep-line); padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
  }
  & .section-content-wrapper:has(> .text-block)::before {
    content: ""; position: absolute; inset: -3px; pointer-events: none; color: var(--ep-ink);
    background:
      linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat,
      linear-gradient(currentColor 0 0) 100% 100% / 5px 5px no-repeat;
  }
  & .text-block.h3 > :is(h1, h2, p) { font-size: clamp(40px, 5.4vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
  & .text-block.rte { font-size: 17px; line-height: 1.55; color: var(--ep-ink-2); }
  & .text-block.rte > * { max-width: 52ch; margin-inline: auto; }
}

/* ===================================================== collections list */
:is(#MainContent[data-template="list-collections"], #MainContent[data-template^="list-collections."]) {
  & .section-resource-list__content .text-block > :is(h1, h2, h3, p) { font-size: clamp(36px, 4.6vw, 68px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
  & .section-resource-list__content { border-bottom: 1px solid var(--ep-line); margin-bottom: clamp(20px, 2.6vw, 32px); }
  & .resource-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 750px) { & .resource-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
  @media (min-width: 1200px) { & .resource-list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  & .collection-card { height: 100%; aspect-ratio: auto; }
  & .collection-card__content { flex: 1 1 auto; height: auto; min-height: 0; }
  & .collection-card__inner {
    height: 100%; overflow: hidden; background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: 6px;
    transition: transform 0.35s var(--ep-ease), box-shadow 0.35s ease, border-color 0.25s ease;
  }
  & .collection-card:hover .collection-card__inner { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14, 30, 58, 0.1); border-color: rgba(14, 30, 58, 0.24); }
  & .collection-card__image { flex: none; width: 100%; aspect-ratio: 1 / 1; height: auto; background: #fff; border-bottom: 1px solid var(--ep-line); border-radius: 0; overflow: hidden; }
  & .collection-card__image img { width: 100%; height: 100%; padding: 8%; object-fit: contain; border-radius: 0; transition: transform 0.6s var(--ep-ease); }
  & .collection-card:hover .collection-card__image img { transform: scale(1.04); }
  & .collection-card__content { padding: 14px 16px 18px; }
  & .collection-card__content :is(p, h2, h3, h4) { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ep-ink); overflow-wrap: anywhere; }
}

/* ===================================================== phones */
@media (max-width: 749px) {
  :is(#MainContent[data-template="page"], #MainContent[data-template="article"], #MainContent[data-template^="article."], #MainContent:has(> .shopify-policy__container)) {
    & :is(.page-width-content .rte, .shopify-policy__body .rte, .blog-post-content) { font-size: 16px; }
    & :is(.page-width-content .rte, .shopify-policy__body .rte, .blog-post-content) table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  }
}
/* ===================================================== phones: product grids keep the page gutter
   (Horizon runs them edge to edge, and its gallery's negative margin pushed the cards past the screen) */
@media (max-width: 749px) {
  :is(#MainContent[data-template="search"], #MainContent[data-template^="search."], #MainContent[data-template="cart"], #MainContent[data-template^="cart."], #MainContent[data-template="404"], #MainContent[data-template="list-collections"], #MainContent[data-template^="list-collections."]) {
    & .product-grid { padding-inline: 16px; }
    & .product-card__content > .card-gallery { margin-inline: 0; }
  }
}