/** Shopify CDN: Minification failed

Line 233:68 Unexpected "/"

**/
/*!
 * GentlePup theme — pages.css
 * Copyright © 2026 Murilo Scigliano. All rights reserved.
 * Proprietary. See LICENSE. dev@murilo.design
 */
/*!
 * GentlePup theme — pages.css
 * Copyright © 2026 Murilo Scigliano. All rights reserved.
 * Proprietary. See LICENSE. dev@murilo.design
 */
/* ---------------------------------------------------------------
   PAGES.CSS
   CMS pages, contact, reviews, 404, the AEO answer pages and
   llms.txt — everything only a `page` or `404` template renders.
   Loaded conditionally in theme.liquid so the homepage and product
   pages stop paying for it. Moved out of base.css; rules unchanged.
   --------------------------------------------------------------- */


/* ---------------------------------------------------------------
   CMS PAGES
   About, Our Mission, policies. Lives here rather than in a
   page-specific file: prose styling applies wherever page.content or
   an article body is rendered, and a second file would be a second
   place to keep the same rules in step.
   --------------------------------------------------------------- */
/* Centred, like the FAQ, contact, reviews and collection headers. A CMS
   page opening left-aligned while every other page opened centred read
   as a page that had escaped the theme. */
.page-content__header {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

.page-content__title {
  margin: 0;
  /* Plain rem, not a viewport clamp: the scaling system already makes
     every rem track the viewport, so a vw clamp scales twice. */
  font-size: var(--h1);
}

/* Set larger than the body, so a page opens with a statement before it
   drops into ordinary copy. */
.page-content__intro {
  /* auto inline margins, or the measure cap would hold a centred line of
     text against the left edge of its own box. */
  margin: 0 auto;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 1.1875rem;
  line-height: 1.5;
  text-wrap: balance;
}

/* Wider than the prose it interrupts. The body is capped at the reading
   measure so lines stay readable; an image held to that cap would read
   as a thumbnail in a column rather than a break in the page. */
.page-content__figure {
  margin: 0 auto var(--space-7);
}

.page-content__image {
  width: 100%;
  /* Landscape, so it breaks the page without pushing the copy a screen
     further down. The crop is the theme's decision; the merchant only
     supplies a picture. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.page-content__caption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--caption);
  text-align: center;
}

/* Prose. The measure is the constraint that matters — long lines are
   the single biggest thing that makes a policy page unreadable. */
.page-content__body {
  font-size: 1.0625rem;
}

.page-content__body h2 {
  margin-block: var(--space-6) var(--space-3);
  font-size: var(--h3, 1.5rem);
}

.page-content__body h3 {
  margin-block: var(--space-5) var(--space-2);
  font-size: 1.1875rem;
}

/* A heading directly after the intro would otherwise carry the full
   top margin and open a hole under it. */
.page-content__body > :first-child {
  margin-top: 0;
}

.page-content__body a {
  color: var(--cta-hover);
  text-decoration: underline;
}

.page-content__body ul,
.page-content__body ol {
  margin-block: 0;
  padding-left: 1.25rem;
}

.page-content__body li + li {
  margin-top: .5rem;
}

.page-content__body img {
  border-radius: var(--radius-lg);
}

.page-content__body blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: .1875rem solid var(--tangerine);
  font-size: 1.125rem;
}

/* ---------------------------------------------------------------
   POLICY PAGES (refund, privacy, terms, shipping)
   The prose comes from Settings > Policies as one br-separated wall
   with <strong> pseudo-headings — the merchant can't give it real
   structure without hand-editing legal text, so the design does the
   organising: a raised panel so the document reads as a document,
   a calmer title than the marketing-scale h1, and bold-only
   paragraphs lifted into headings where the markup allows it.
   --------------------------------------------------------------- */
.page-content--policy .page-content__title {
  font-size: var(--h2);
}

.page-content--policy .page-content__body {
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  border: .0625rem solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream-100);
}

/* A paragraph that is nothing but a <strong> is a heading the policy
   editor could not say out loud. (The br-separated pseudo-headings in
   the terms body stay inline — no selector can reach them honestly.) */
.page-content--policy .page-content__body p > strong:only-child {
  display: block;
  margin-block: var(--space-2);
  font-size: 1.1875rem;
}

/* Shopify renders /policies/* with its own wrapper and ignores the
   theme's policy.liquid on this storefront, so the same document
   treatment is repeated against its markup: calm title, raised panel,
   reading measure, lifted bold-only headings. */
.shopify-policy__container {
  padding-block: var(--section-space);
}

.shopify-policy__title h1 {
  margin: 0 0 var(--space-6);
  font-family: var(--heading-font);
  font-size: var(--h2);
  text-align: center;
}

.shopify-policy__body {
  width: min(100% - (2 * var(--gutter)), var(--measure));
  margin-inline: auto;
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  border: .0625rem solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream-100);
  font-size: 1.0625rem;
}

.shopify-policy__body p > strong:only-child {
  display: block;
  margin-block: var(--space-2);
  font-size: 1.1875rem;
}

/* Newer policy bodies do carry real h2/h3 markup, and they arrive at
   display size — one word per line at 360px. Bring them down to the
   same prose scale the page-content body uses. */
.shopify-policy__body h2 {
  margin-block: var(--space-6) var(--space-3);
  font-size: var(--h3, 1.5rem);
}

.shopify-policy__body h3 {
  margin-block: var(--space-5) var(--space-2);
  font-size: 1.1875rem;
}

/* The panel is a desktop gesture. On a phone its border, fill and
   padding squeezed the document to ~27ch of law — so below the tablet
   breakpoint the panel comes off and the prose takes the full measure. */
@media (max-width: 767px) {
  .shopify-policy__body {
    padding: 0;
    border: 0;
    background: none;
  }
}

.page-content__body table {
  width: 100%;
  border-collapse: collapse;
}

.page-content__body th,
.page-content__body td {
  padding: .625rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}


   CONTACT
   --------------------------------------------------------------- */
.contact__header {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 40rem;
  margin-bottom: var(--space-7);
}

.contact__heading {
  margin: 0;
  font-size: var(--h1);
}

.contact__intro {
  color: var(--muted);
  font-size: 1.0625rem;
}

.contact__body {
  display: grid;
  gap: var(--space-6);
}

/* The image starts level with the heading rather than the first field:
   a photograph beside a form should share its top edge with the page,
   not with the input below it. */
@media (min-width: 900px) {
  .contact .container {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  .contact__header {
    grid-column: 1;
    margin-bottom: var(--space-6);
  }

  .contact__body {
    display: contents;
  }

  .contact__form-wrap {
    grid-column: 1;
  }

  .contact__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 100%;
  }
}

.contact__form-wrap {
  min-width: 0;
}

/* The image fills the column the details used to occupy, and matches the
   form's height rather than setting its own — a photograph beside a form
   should end where the form ends. */
.contact__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .contact__body {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.contact__form-wrap form {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* The label carries the field's name and its optionality together, so
   the reader is not left guessing which of four fields they can skip.

   Scoped to the form: cart.css defines .field__label as well and loads
   after this file, so an unscoped rule lost on source order and the
   label collapsed into the field above it. */
.contact__form-wrap .field {
  display: grid;
  gap: .5rem;
  align-content: start;
}

.contact__form-wrap .field__label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--small);
  letter-spacing: .01em;
}

.field__optional {
  color: var(--muted);
  font-size: var(--caption);
  font-weight: 500;
  text-transform: lowercase;
}

/* Two fields share a row where they are short enough to; auto-fit means
   they stack on a phone without a second breakpoint to maintain. */
.contact__row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

@media (min-width: 560px) {
  .contact__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact__form-wrap form .field {
  width: 100%;
}

/* An underline rather than a box: a form on a cream page reads as a form
   from its labels, and four outlined boxes make it look like a survey. */
.field__input.field__input--line {
  min-height: 3.5rem;
  padding: .75rem 0;
  border: 0;
  border-bottom: 2px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
  height: 3.5rem;
  align-self: start;
  transition: border-color var(--duration) var(--ease);
}

.field__input.field__input--line::placeholder {
  color: color-mix(in srgb, var(--cocoa) 38%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .field__input.field__input--line:hover {
    border-bottom-color: color-mix(in srgb, var(--cocoa) 38%, transparent);
  }
}

.field__input.field__input--line:focus {
  border-bottom-color: var(--cta);
  outline: none;
}

/* The message field is a textarea, so it keeps a box — but the same
   quiet one, rather than cart.css's raised input. */
.contact__form-wrap textarea.field__input {
  padding: 1rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: border-color var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .contact__form-wrap textarea.field__input:hover {
    border-color: color-mix(in srgb, var(--cocoa) 38%, transparent);
  }
}

.contact__form-wrap textarea.field__input:focus-visible {
  border-color: var(--cta);
  outline: none;
}

/* The outline is removed above, so focus has to be visible some other
   way — the border colour alone is not enough for a keyboard user who
   cannot see the caret. */
.field__input.field__input--line:focus-visible {
  border-bottom-color: var(--cta);
  box-shadow: 0 2px 0 var(--cta);
}

/* One rule each, colour included. Sharing the box and splitting out the
   colour named .contact__error twice, and a second definition lower in
   the file is the failure mode the duplicate test exists to catch. */
.contact__success {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sky);
  color: var(--cocoa);
  font-weight: 600;
}

.contact__error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--berry) 12%, var(--cream));
  color: var(--berry-700);
  font-weight: 600;
}

/* App blocks on a CMS page — a review widget or similar, given the same
   measure as the prose above it. */
.page-content__app {
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------
   REVIEWS PAGE
   --------------------------------------------------------------- */
/* The wall is the page's content, so its container runs at shell width
   rather than the reading measure — the review app lays its masonry
   columns from whatever width it is given, and at 1800px that is five
   columns instead of three. The centred header keeps its own measure. */
.reviews-page > .container {
  --container-width: var(--page-width);
}

.reviews-page__header {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* The app caps its own importer at 1140px from the parent DOM; the cap
   comes off so the masonry can use the room. Width changes from out
   here are safe — the app re-lays its columns on resize. Geometry
   inside the frame is not: see review-skin.js. */
.reviews-page__app .scm-reviews-importer {
  max-width: none;
}

.reviews-page__header {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 46rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

/* These stars sit inside the pill, not on the page, so they take the
   pill's own label colour. Tangerine-800 on the sky ground measured
   2.48:1 and read as a clash — it is the right colour for stars on
   cream, which is where every other set of them lives. */
.reviews-page__stars {
  color: inherit;
  font-size: var(--small);
  letter-spacing: .05em;
}

/* Bigger than a section heading: this is the page's only statement, and
   the reviews below it are the proof rather than a competing element. */
.reviews-page__heading {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}

/* Smaller than the body copy elsewhere. The heading makes the claim; a
   line at the same size would argue with it. */
.reviews-page__intro {
  color: var(--muted);
  font-size: 1rem;
}

.reviews-page__intro p {
  max-width: none;
}

@media (max-width: 599px) {
  .reviews-page__heading {
    font-size: 2.25rem;
  }
}


/* ─── Answer pages (AEO) ──────────────────────────────────────────────
   main-answer: the question as the heading, the quotable answer in a
   tinted panel directly beneath it, then depth. The panel does double
   duty — it tells the human "start here" and it gives the page's
   30-70 word passage a visible frame. */

.answer-page__layout {
  display: grid;
  gap: var(--space-6);
  max-width: 46rem;
}

.answer-page__layout > * {
  min-width: 0;
}

.answer-page__header {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.answer-page__header > * {
  max-width: 100%;
}

/* Sized like .faq__heading: window-based, never the floored root --h1,
   so a long question cannot push a 320px phone sideways. */
.answer-page__heading {
  margin: 0;
  font-size: var(--display-page);
}

/* Sky tint rather than jade: the pill above already carries jade, and
   the CTA below carries cocoa — a third voice would argue with both. */
.answer-page__answer {
  padding: var(--space-5);
  border-left: 3px solid var(--sky-800);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--sky) 16%, var(--cream));
}

.answer-page__answer-label {
  margin: 0 0 var(--space-2);
  font-size: var(--small);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky-800);
}

.answer-page__answer-body {
  font-size: 1.1875rem;
  line-height: 1.6;
}

.answer-page__answer-body p {
  margin: 0;
  max-width: none;
}

.answer-page__body-section {
  display: grid;
  gap: var(--space-3);
}

.answer-page__body-heading {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.answer-page__body {
  color: var(--muted);
}

.answer-page__qa {
  display: grid;
  gap: var(--space-4);
}

.answer-page__qa-heading {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sky-800);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky-800);
}

/* Links to the sibling answer pages. A stack of full-width rows rather
   than a tidy inline list: each one is a whole question, and questions
   set inline wrap into each other until you cannot tell where one ends.
   44px minimum, like every other list of links in the theme. */
.answer-page__related {
  margin-top: var(--space-7);
}

.answer-page__related-list {
  display: grid;
  gap: .25rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.answer-page__related-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .875rem;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

.answer-page__related-link:hover {
  background: color-mix(in srgb, var(--oat) 55%, transparent);
  color: var(--text);
}

.answer-page__footer {
  display: flex;
}

/* The figure stays inside the reading column; the caption borrows the
   quiet small-label voice rather than competing with body text. */

/* Wider than the column it sits in.

   The body is capped at a 46rem reading measure, which is right for
   prose and too narrow for a photograph — an image held to the text
   width reads as an illustration of the paragraph rather than a look
   at the thing itself.

   The negative inline margin pulls it out symmetrically, and the
   min() floor stops the pull once the viewport is narrow enough that
   the layout is already edge to edge: on a phone the figure sits flush
   with the text rather than escaping past the gutter. */
.answer-page__figure {
  --answer-figure-bleed: min(6rem, 6vw);

  display: grid;
  gap: var(--space-2);
  margin-block: 0;
  margin-inline: calc(var(--answer-figure-bleed) * -1);
}

.answer-page__figure img {
  width: 100%;
  height: auto;
  /* The card radius, not the small one: it is the largest surface on
     the page and a tight corner on something this size reads as an
     accident. */
  border-radius: var(--radius-lg);
}

/* The caption belongs to the text, not the image, so it stays on the
   reading measure while the picture above it runs wide. */

.answer-page__caption {
  /* Back on the reading measure while the picture above runs wide: the
     caption is text, and it belongs with the text. */
  margin-inline: var(--answer-figure-bleed);
  font-size: var(--small);
  color: var(--muted);
}

/* Horizontal scroll rather than a squeezed table: on a 320px phone
   three columns of prose cannot stay readable, so the wrapper scrolls
   and the table keeps its natural measure. tabindex makes the region
   keyboard-scrollable. */
.answer-page__table-wrap {
  overflow-x: auto;
}

.answer-page__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.45;
}

.answer-page__table-caption {
  padding-bottom: var(--space-3);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: left;
}

.answer-page__table th,
.answer-page__table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.answer-page__table thead th {
  border-top: 0;
  font-size: var(--small);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky-800);
}

.answer-page__table tbody th {
  font-weight: 800;
  white-space: nowrap;
}


/* ─── llms.txt page ───────────────────────────────────────────────────
   Deliberately plain: the audience is a parser first and a person
   second, so the layout is a single quiet column of links. */

.llms__layout {
  display: grid;
  gap: var(--space-6);
  max-width: 46rem;
}

.llms__header {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.llms__heading {
  margin: 0;
  font-size: var(--display-page);
}

.llms__summary {
  color: var(--muted);
  font-size: 1.0625rem;
}

.llms__group {
  display: grid;
  gap: var(--space-3);
}

.llms__group-title {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sky-800);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sky-800);
}

.llms__links ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
}

/* Same panel treatment as the homepage testimonials wrapper: the review
   app's iframe paints its own white ground, so the wrapper clips it into
   a deliberate card instead of a bare slab. */
.reviews-page__app {
  margin-top: var(--space-6);
}