/* Base styles, mobile first. Values come from tokens.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  /* Focus moves and anchor jumps stop above the WhatsApp bar instead of
     leaving the element behind it (WCAG 2.2, 2.4.11; technique C43). */
  scroll-padding-bottom: calc(var(--bar-clearance) + env(safe-area-inset-bottom));
}

body {
  margin: 0;
  background: var(--color-linen);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
  /* With very large text a long word breaks instead of widening the page. */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
  /* Even line lengths in titles, no orphan word on the last line of text. */
  text-wrap: balance;
  /* A long word ("personalizadas") may break rather than widen the page
     when the visitor enlarges the text. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-large);
}

p {
  margin: 0 0 var(--space-s);
  text-wrap: pretty;
}

a {
  color: var(--color-terracotta-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--color-sand);
  color: var(--color-charcoal);
}

:focus-visible {
  outline: 3px solid var(--color-charcoal);
  outline-offset: 3px;
}

/* A charcoal ring would vanish on the charcoal footer. */
.site-footer :focus-visible {
  outline-color: var(--color-linen);
}

.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* Skip link: hidden until focused with the keyboard. */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  background: var(--color-charcoal);
  color: var(--color-linen);
  padding: var(--space-xs) var(--space-s);
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-s);
}

/* Small recurring pieces of type */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-s);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* A short terracotta rule before the label: decorative only. */
.eyebrow::before {
  content: "";
  flex: 0 0 1.75rem;
  height: 1px;
  background: var(--color-terracotta);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
}

/* A text link with an arrow. The arrow is drawn by CSS and hidden from
   screen readers (the text after "/" is its spoken alternative: none);
   older browsers, which ignore that syntax, show it from the first line.
   As an inline-block it is not underlined with the text. The padding
   makes the link 48px tall, like every other tap target. */
.link-arrow {
  display: inline-block;
  padding-block: 0.6rem;
  font-weight: 500;
}

.link-arrow::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.2s var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(0.2em);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-sand);
}

/* The Minho stripes as a thin woven edge along the top of every page. */
.site-header::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--minhoto-stops));
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-m);
  padding-block: var(--space-xs);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-heading);
  font-size: var(--text-large);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
  text-decoration: none;
}

/* On phones the menu takes its own row, spread across the width; the
   negative margin lines the first and last words up with the page edge.
   Items wrap to a new row on very narrow screens; only with very large
   text does a label itself break, rather than widen the page. */
.site-nav {
  flex: 1 1 100%;
  margin-inline: -0.375rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__home {
  display: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: 0.375rem;
  font-size: var(--text-label); /* 17px on phones, so the menu fits on one line */
  color: var(--color-charcoal);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* Main content */
main {
  padding-block: var(--space-l) var(--space-section);
}

.page-head {
  margin-bottom: var(--space-l);
}

.page-head h1 {
  margin: 0;
}

.page-section {
  margin-top: var(--space-section);
}

/* Title on the left, a "see more" link on the right; stacked on phones. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-m);
  margin-bottom: var(--space-m);
}

.section-head h2 {
  margin: 0;
}

/* A full-width band of colour behind a section that stays inside the
   container: the shadow paints the sides, clip-path trims it vertically. */
.band {
  background: var(--color-wax);
  box-shadow: 0 0 0 100vmax var(--color-wax);
  clip-path: inset(0 -100vmax);
  padding-block: var(--space-xl);
}

.band__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s) var(--space-xl);
  align-items: center;
}

.band__split > * {
  margin: 0;
}

.band__split h2 {
  margin-bottom: var(--space-s);
}

.band__split .lead {
  margin: 0;
  max-width: 36rem;
}

/* Buttons: sober, with text, never icon-only. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  max-width: 100%;
  /* Narrower side padding on narrow (or zoomed) screens keeps long labels
     inside the screen. */
  padding: 0.625rem min(var(--space-m), 4vw);
  border: 1px solid var(--color-terracotta-dark);
  border-radius: var(--radius);
  background: var(--color-terracotta-dark);
  color: var(--color-linen);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.button:hover {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

.button--secondary {
  background: transparent;
  color: var(--color-terracotta-dark);
}

.button--secondary:hover {
  background: var(--color-sand);
  color: var(--color-charcoal);
}

/* Full width on phones, where it is the one thing to do on the page. */
.button--wide {
  width: 100%;
}

/* The WhatsApp speech bubble, drawn with a mask so the link's text stays
   exactly the button label (the icon is decorative). */
.button--whatsapp::before {
  content: "";
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  --whatsapp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 3 3 6.6 3 11c0 2.2 1 4.2 2.7 5.6L5 21l4.2-2.2c.9.2 1.8.3 2.8.3 5 0 9-3.6 9-8s-4-8-9-8Z'/%3E%3C/svg%3E");
  background: currentColor;
  /* The prefixed copy is for older Safari, which would draw a square. */
  -webkit-mask: var(--whatsapp-icon) center / contain no-repeat;
  mask: var(--whatsapp-icon) center / contain no-repeat;
}

/* On the dark footer: sand border, linen text (12.4:1 on charcoal). */
.button--on-dark {
  background: transparent;
  border-color: var(--color-sand);
  color: var(--color-linen);
}

.button--on-dark:hover {
  background: var(--color-linen);
  border-color: var(--color-linen);
  color: var(--color-charcoal);
}

/* WhatsApp: a bar across the bottom of the screen. Unlike a floating
   button, it never sits on top of a title or a button: the page simply
   scrolls up from under it, and the footer leaves room for it at the end.
   Browsers without color-mix() (iOS before 16.2) get a solid bar. */
.whatsapp-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  padding: 0.375rem var(--space-m) calc(0.375rem + env(safe-area-inset-bottom));
  background: var(--color-linen);
  background: color-mix(in srgb, var(--color-linen) 92%, transparent);
  border-top: 1px solid var(--color-sand);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.3s var(--ease),
    visibility 0.3s;
}

/* On the home page the bar waits below the screen while the hero and its
   "Ver catálogo" button are in view (whatsapp-bar.js), so the two do not
   compete. visibility also takes its link out of the keyboard order. */
.whatsapp-bar--away {
  transform: translateY(100%);
  visibility: hidden;
}

.whatsapp-fixed {
  width: 100%;
}

.whatsapp-fixed svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* The hidden attribute must win over display rules (used by the JS filter). */
[hidden] {
  display: none !important;
}

/* Breadcrumb on the product page */
.breadcrumb {
  margin-bottom: var(--space-m);
  font-size: var(--text-label);
  color: var(--color-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:last-child {
  display: none;
}

/* Same fallback as .link-arrow::after: older browsers show the plain "/". */
.breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  padding-inline: 0.5em;
  color: var(--color-sand);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-terracotta-dark);
}

/* Catalogue */
.category-nav ul,
.product-grid,
.category-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: 1.25rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-charcoal);
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.category-nav a:hover {
  border-color: var(--color-charcoal);
}

.category-nav a[aria-current="page"] {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-linen);
}

.catalog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-m);
  padding-block: var(--space-xs);
  border-block: 1px solid var(--color-sand);
}

.catalog-filter label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  cursor: pointer;
}

.catalog-filter input {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--color-terracotta-dark);
}

.catalog-count {
  margin: 0;
  color: var(--color-muted);
}

/* One column on phones, more as the screen grows. min() keeps a column
   from being wider than the screen when the visitor enlarges the text. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-l) var(--space-m);
  margin-top: var(--space-l);
}

.section-head + .product-grid {
  margin-top: 0;
}

.product-card {
  position: relative;
}

.product-card__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-sand);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card__body {
  padding-top: var(--space-s);
}

.product-card__name {
  margin-bottom: 0.25rem;
  font-size: var(--text-large);
}

.product-card__name a {
  color: inherit;
  text-decoration: none;
}

/* Stretch the name link over the whole card, so photo and text are one
   big tap target while screen readers only announce the name. Any other
   link or button added to the card needs position: relative and z-index: 1
   to sit above this overlay. */
.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.product-card:hover .product-card__name a,
.product-card__name a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-terracotta);
  text-decoration-thickness: 1px;
}

/* The keyboard focus ring outlines the whole card, which is the real
   target. Browsers without :has() keep the ring on the link itself. */
@supports selector(:has(*)) {
  .product-card__name a:focus-visible {
    outline: none;
  }

  .product-card:has(.product-card__name a:focus-visible) {
    outline: 3px solid var(--color-charcoal);
    outline-offset: 3px;
    border-radius: var(--radius);
  }
}

.product-card__price {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* The label sits on the photo's corner. pointer-events: none lets taps
   through to the card link underneath. */
.product-card .status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  pointer-events: none;
  box-shadow: var(--shadow-soft);
}

/* A sold piece stays visible, a little faded, as an example of past work. */
.product-card[data-status="vendida"] img {
  filter: grayscale(0.35);
  opacity: 0.85;
}

/* Status labels: every pair passes WCAG AA. The dot is decorative. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
}

.status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

.status--disponivel {
  background: var(--color-sage-light); /* charcoal on sage light: 11.0:1 */
}

.status--disponivel::before {
  background: var(--color-sage-dark);
}

.status--so_por_encomenda {
  background: var(--color-paper);      /* charcoal on paper: 13.4:1 */
}

.status--so_por_encomenda::before {
  background: var(--color-terracotta);
}

.status--vendida {
  background: var(--color-charcoal);   /* linen on charcoal: 12.4:1 */
  color: var(--color-linen);
}

/* Home page: category shortcuts with a photo, like the product cards. */
.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-l) var(--space-m);
}

.category-card {
  position: relative;
}

.category-card__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-sand);
}

.category-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.category-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-s);
}

.category-card__name {
  margin: 0;
  font-size: var(--text-h2);
}

.category-card__name a {
  color: inherit;
  text-decoration: none;
}

/* Same whole-card link as .product-card__name a::after. */
.category-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.category-card:hover .category-card__name a {
  text-decoration: underline;
  text-decoration-color: var(--color-terracotta);
  text-decoration-thickness: 1px;
}

@supports selector(:has(*)) {
  .category-card__name a:focus-visible {
    outline: none;
  }

  .category-card:has(.category-card__name a:focus-visible) {
    outline: 3px solid var(--color-charcoal);
    outline-offset: 3px;
    border-radius: var(--radius);
  }
}

.category-card__count {
  margin: 0;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Photos zoom in a little on hover, only with a real pointer (on touch
   screens hover would stick after a tap). */
@media (hover: hover) {
  .product-card:hover img,
  .category-card:hover img {
    transform: scale(1.04);
  }
}

/* Product page: name and price, then the photos, then the details on
   phones; on wider screens the photos sit on the left of both. */
.product {
  display: grid;
  gap: var(--space-m);
}

/* Grid items default to min-width: auto and would grow to fit the whole
   photo strip, making the page wider than the screen. */
.product > * {
  min-width: 0;
}

.product__photos {
  display: grid;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product__photos img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--color-sand);
}

/* Gallery, only once gallery.js has run: a strip that snaps photo by photo
   when swiped (the browser handles the gesture), plus arrow buttons. */
.gallery-enhanced .product__photos {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius);
}

.gallery-enhanced .product__photos li {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}

/* Counter on its own row so both buttons fit side by side on a 360px phone. */
.gallery__controls {
  display: grid;
  grid-template-areas:
    "count count"
    "previous next";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-s);
  margin-top: var(--space-s);
}

/* Lighter than the page's main button, which is the one to press. The
   labels may wrap, so both buttons still fit with enlarged text. */
.gallery__controls .button {
  border-color: var(--color-muted);
  color: var(--color-charcoal);
}

.gallery__previous {
  grid-area: previous;
}

.gallery__next {
  grid-area: next;
}

.gallery__controls .button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.gallery__controls .button[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--color-charcoal);
}

.gallery__count {
  grid-area: count;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.product__head h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  margin-bottom: var(--space-xs);
}

.product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.product__price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.2;
}

.product__head .status {
  border: 1px solid var(--color-sand);
}

.product__description {
  max-width: 34rem;
  margin-bottom: var(--space-m);
}

/* The order steps under the button: what happens after the tap. */
.product__how,
.product__sheet {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-sand);
}

.product__how h2,
.product__sheet h2 {
  font-size: var(--text-large);
}

/* Technical sheet: label above value on phones, side by side from 30rem. */
.product__details {
  margin: 0;
}

.product__details div {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-sand);
}

.product__details dt {
  color: var(--color-muted);
  font-size: var(--text-label);
}

.product__details dd {
  margin: 0;
}

@media (min-width: 30rem) {
  .product__details div {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--space-s);
  }
}

/* Order steps, drawn with CSS counters: a large numeral above each step on
   the home and order pages, a small one beside it under a product. */
.steps {
  display: grid;
  gap: var(--space-l);
  counter-reset: step;
  list-style: none;
  margin: 0 0 var(--space-s);
  padding: 0;
}

.steps li {
  counter-increment: step;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-sand);
}

/* Large numerals in terracotta: decorative colour, but 3.1:1 is enough for
   text this size (WCAG large text), and the list itself gives the order. */
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-terracotta);
  font-family: var(--font-heading);
  font-size: var(--text-numeral);
  font-weight: 300;
  line-height: 1;
}

.steps__title {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--text-large);
  font-weight: 500;
  line-height: 1.3;
}

.steps__text {
  display: block;
  color: var(--color-muted);
}

.steps--compact {
  gap: var(--space-s);
}

.steps--compact li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--space-s);
  padding: 0;
  border: 0;
}

.steps--compact li::before {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 1px solid var(--color-terracotta);
  border-radius: 50%;
  color: var(--color-terracotta-dark);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
}

.steps--compact .steps__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
}

/* Home page */
.hero {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

/* A block of colour peeks out from behind the photo, like a sheet of
   paper under a print. isolation keeps it above the page background. */
.hero__media {
  position: relative;
  isolation: isolate;
  margin-right: var(--space-s);
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: var(--space-s) calc(-1 * var(--space-s)) calc(-1 * var(--space-s)) var(--space-s);
  z-index: -1;
  border-radius: var(--radius);
  /* The striped cloth the pieces are photographed on, peeking out from
     behind the photo. */
  background: repeating-linear-gradient(0deg, var(--minhoto-stops));
}

/* On phones a landscape crop keeps the title and button on the first
   screen; side by side, a portrait crop fills the column. */
.hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-sand);
}

.hero__text {
  padding-top: var(--space-s);
}

.hero__text h1 {
  margin-bottom: var(--space-m);
}

.home-about {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.home-about .eyebrow {
  justify-content: center;
}

/* A rule on both sides of the centred label. */
.home-about .eyebrow::after {
  content: "";
  flex: 0 0 1.75rem;
  height: 1px;
  background: var(--color-terracotta);
}

.home-about__text {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: 1.3;
  text-wrap: balance;
}

/* Text pages: lines of about 65 characters are easier to read. */
.prose,
.order {
  max-width: 44rem;
}

.about > p:first-of-type {
  font-size: var(--text-lead);
  line-height: 1.5;
}

.about__owner {
  margin-top: var(--space-l);
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--color-paper);
}

.about__owner img {
  max-width: 20rem;
  margin-bottom: var(--space-s);
  border-radius: var(--radius);
  background: var(--color-sand);
}

.about__owner p {
  margin: 0;
}

/* Questions and answers, one after another with a rule between them. */
.faq h2 {
  margin-bottom: var(--space-m);
}

.faq__item {
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-sand);
}

.faq__item h3 {
  margin-bottom: var(--space-xs);
}

.faq__item p {
  margin: 0;
}

.not-found {
  max-width: 36rem;
  padding-block: var(--space-xl);
}

/* Footer: the one dark surface, which closes every page, edged with the
   same stripes as the header. */
.site-footer {
  border-top: 10px solid transparent;
  border-image: repeating-linear-gradient(90deg, var(--minhoto-stops)) 10;
  background: var(--color-charcoal);
  color: var(--color-linen);
  /* Room for the WhatsApp bar, so it never covers the last line. */
  padding-block: var(--space-xl) calc(var(--bar-clearance) + var(--space-m) + env(safe-area-inset-bottom));
}

.site-footer a:not(.button) {
  color: var(--color-sand);              /* 9.1:1 on charcoal */
}

.site-footer a:not(.button):hover {
  color: var(--color-linen);
}

.site-footer .logo {
  color: var(--color-linen);
  font-size: var(--text-h2);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
}

.site-footer__grid p {
  margin: 0 0 var(--space-xs);
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-muted); /* a faint line on charcoal */
  color: var(--color-sand);
  font-size: var(--text-small);
}

.site-footer__bottom p {
  margin: 0;
}

/* Hide "Início" only where the menu would not fit on one line. */
@media (min-width: 30rem) {
  .site-nav__home {
    display: list-item;
  }
}

@media (min-width: 48rem) {
  .site-header .container {
    flex-wrap: nowrap;
    padding-block: var(--space-s);
  }

  .site-nav {
    flex: 0 1 auto;
    margin-inline: 0 calc(-1 * var(--space-xs));
  }

  .site-nav ul {
    gap: 0 var(--space-xs);
  }

  .site-nav a {
    padding-inline: var(--space-xs);
    font-size: inherit;
  }

  .breadcrumb li:last-child {
    display: list-item;
  }

  main {
    padding-top: var(--space-xl);
  }

  .hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .hero__media {
    margin-right: var(--space-m);
  }

  .hero__media::before {
    inset: var(--space-m) calc(-1 * var(--space-m)) calc(-1 * var(--space-m)) var(--space-m);
  }

  .hero img {
    aspect-ratio: 4 / 5;
  }

  .band__split {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m) var(--space-l);
  }

  .steps--compact {
    grid-template-columns: 1fr;
  }

  .product {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "gallery head"
      "gallery info";
    gap: var(--space-m) var(--space-xl);
    align-items: start;
  }

  .product__gallery {
    grid-area: gallery;
  }

  .product__head {
    grid-area: head;
  }

  .product__info {
    grid-area: info;
  }

  .button--wide {
    width: auto;
  }

  .faq__item {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-m);
  }

  .faq__item h3 {
    margin: 0;
  }

  .site-footer__grid {
    grid-template-columns: 2fr 1fr 2fr;
  }

  /* The bar's own width is the screen's (it is fixed), so the padding
     puts the button at the content's right edge. */
  .whatsapp-bar {
    display: flex;
    justify-content: flex-end;
    padding-inline: max(var(--space-m), (100% - var(--content-width)) / 2 + var(--space-m));
  }

  .whatsapp-fixed {
    width: auto;
  }

  /* Side by side, the piece's own button is already on the first screen:
     a second, identical one in the bar would only repeat it. */
  .page-product .whatsapp-bar {
    display: none;
  }
}

@media (min-width: 51rem) {
  .product-grid--featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On short screens (a phone on its side, a zoomed page or a large default
   text size) a fixed bar would cover too much of the page: it becomes the
   last item of the footer instead. em follows the visitor's text size. */
@media (max-height: 30em) {
  html {
    scroll-padding-bottom: 0;
  }

  .whatsapp-bar {
    position: static;
    margin-top: var(--space-l);
    padding-inline: var(--space-m);
    background: transparent;
    border-top: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .whatsapp-bar--away {
    transform: none;
    visibility: visible;
  }

  .site-footer {
    padding-bottom: calc(var(--space-l) + env(safe-area-inset-bottom));
  }
}

/* Page-to-page animation (View Transitions): the page cross-fades and a
   product photo grows from its card into the product page. Browsers that
   do not support it simply load the next page as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-group(*) {
  animation-duration: 0.35s;
  animation-timing-function: var(--ease);
}

.product-card img,
.product__photos img {
  view-transition-class: foto;
}

/* The card crop (4:5) and the full photo differ in shape: crop both
   snapshots instead of stretching them during the animation. */
::view-transition-old(*.foto),
::view-transition-new(*.foto) {
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-enhanced .product__photos {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}