/* ============================================================
   styles.css — all the styling for Jewelry Fiesta lives in this
   one file. It is written "mobile first": the plain rules describe
   how things look on a phone, and the @media blocks near the bottom
   of each section adjust them for bigger screens.
   ============================================================ */

/* ---- Design tokens (colors, fonts, sizes reused everywhere) ---- */
/* Change a value here and it updates across the whole site. */
:root {
  --color-background: #faf9f7; /* soft warm white */
  --color-surface: #f0f4f5; /* pale blue tint, for the banded sections */
  --color-text: #26313a; /* deep blue-charcoal */
  --color-muted: #5c6e78; /* softer text, for small print */
  --color-accent: #4c7c93; /* brand blue, matches the logo */
  /* A darker version of the brand blue. Used anywhere the blue is TEXT,
     because the lighter one is too pale to read comfortably against the
     background. Buttons and borders use --color-accent. */
  --color-accent-deep: #3f6a7d;
  --color-soft-blue: #d9e3e7; /* secondary accent */
  --color-border: #dce2e4; /* dividers */
  --color-placeholder: #dde3e5; /* the temporary grey photo boxes */

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --page-max-width: 1200px;
  --gutter: 20px;
}

/* ---- Base / reset ---- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  /* Stops a long word from pushing the page sideways on small phones. */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

img {
  /* Never let an image overflow its container. */
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* A visible outline when navigating with the keyboard (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Hides text on screen but keeps it for screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Shared layout helpers ---- */

/* Centers content and stops it stretching too wide on big monitors. */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* One band of the page, with breathing room above and below. */
.section {
  padding: 56px 0;
}

/* A section on the slightly deeper cream background. */
.section--tinted {
  background-color: var(--color-surface);
}

.section__title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 32px;
}

.section__action {
  text-align: center;
  margin-top: 36px;
}

/* Small uppercase label, e.g. "New Arrivals" above the hero headline. */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }

  .section {
    padding: 80px 0;
  }

  .section__title {
    font-size: 36px;
    margin-bottom: 44px;
  }
}

/* ---- Placeholder photo boxes ---- */
/* Temporary grey blocks standing in for real photography. Each one
   shows a small label so you can tell what belongs there. Once you
   have real images, swap the <div class="placeholder"> for an <img>. */
.placeholder {
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Buttons ---- */
.button {
  display: inline-block;
  padding: 13px 32px;
  background-color: var(--color-text);
  color: var(--color-background);
  border: 1px solid var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.button:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* The see-through version, used for secondary actions like "View All". */
.button--outline {
  background-color: transparent;
  color: var(--color-text);
}

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

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

.site-header__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  /* Slim vertical padding, because the logo now sets the header's height
     on its own and phones have little room to spare. */
  padding: 10px var(--gutter);
  /* On phones: logo on the left, search and cart on the right, and the
     category links wrap onto a second row underneath. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The logo. In the header this wraps the logo image; in the footer it is
   still plain text, which reads better at small sizes. */
.logo {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
}

/* The logo image itself. Change --logo-height below to make it bigger or
   smaller — "width: auto" keeps the picture from being squashed. */
.logo__image {
  --logo-height: 76px;
  height: var(--logo-height);
  width: auto;
}

.nav {
  /* order: 3 pushes the links below the logo and cart on small screens. */
  order: 3;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.nav a {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav a:hover {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}

/* Underlines the link for the page you are currently viewing. */
.nav a[aria-current='page'] {
  border-bottom-color: var(--color-accent);
}

.cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-link__icon {
  width: 22px;
  height: 22px;
}

.cart-link__count {
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* ---- Header search box ---- */
/* Normally this is just a magnifying-glass button. Clicking it adds the
   class "search--open" (see js/search.js), which slides a text field out
   to the left of the icon. The border sits on the <form> so the field and
   the button read as one single control once open. */
.search {
  position: relative; /* so the "nothing found" note can sit below it */
  display: flex;
  align-items: center;
  /* A see-through border while collapsed, so the icon does not sit in a
     visible box, but nothing shifts when the real border appears. */
  border: 1px solid transparent;
  background-color: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.search--open {
  border-color: var(--color-border);
  background-color: #fff;
  /* On phones the open field grows to fill the space between the logo
     and the cart, so nothing jumps to another row. */
  flex: 1;
}

/* "focus-within" means "someone is typing in the box", so the whole
   control highlights rather than just the text field inside it. */
.search--open:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-soft-blue);
}

/* Collapsed: no width, and hidden so the Tab key skips straight past it. */
.search__input {
  width: 0;
  min-width: 0;
  padding: 9px 0;
  border: none;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  visibility: hidden;
  /* The visibility change waits until the slide has finished; opening
     (below) makes it visible straight away. */
  transition: width 0.25s ease, padding 0.25s ease,
    visibility 0s linear 0.25s;
}

.search--open .search__input {
  width: 100%;
  padding: 9px 12px;
  visibility: visible;
  transition: width 0.25s ease, padding 0.25s ease, visibility 0s;
}

.search__input::placeholder {
  color: var(--color-muted);
}

/* The whole box already highlights (see .search--open:focus-within), so
   the input does not need its own outline on top of that. */
.search__input:focus,
.search__input:focus-visible {
  outline: none;
}

.search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border: none;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.search__button:hover {
  color: var(--color-accent-deep);
}

.search__icon {
  width: 17px;
  height: 17px;
}

/* The little "nothing found" note. It floats below the search box rather
   than pushing the header taller. Hidden until there is something to say. */
.search__message {
  display: none;
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(38, 49, 58, 0.08);
  font-size: 13px;
  color: var(--color-muted);
}

.search__message--visible {
  display: block;
}

/* ---- Header layout on wider screens ---- */
/* Below 1100px the header stacks onto two rows: logo, search icon and
   cart on top, then the nav links underneath. At 1100px and up there is
   enough room to put everything on a single line — the threshold went up
   from 1024px because the logo and the nav both grew. */
@media (min-width: 1100px) {
  .site-header__inner {
    flex-wrap: nowrap;
    /* Trimmed from 18px so the taller logo does not make the header
       overly deep — the logo itself now sets the height. */
    padding-top: 13px;
    padding-bottom: 13px;
    gap: 24px;
  }

  .logo {
    font-size: 26px;
  }

  /* A little larger on desktop, where there is room for it. */
  .logo__image {
    --logo-height: 92px;
  }

  .nav {
    order: 0;
    width: auto;
    /* Takes up the leftover middle space and centers the links in it.
       min-width: 0 lets it give ground when the search box opens, rather
       than pushing the cart off the edge. */
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding-top: 0;
    border-top: none;
    gap: 20px;
  }

  /* On desktop the open box is a fixed width instead of stretching. */
  .search--open {
    flex: none;
    width: 190px;
  }
}

@media (min-width: 1200px) {
  .nav {
    gap: 26px;
  }

  .search--open {
    width: 230px;
  }
}

/* ---- Hero (rotating photo banner) ---- */
/* The photos are stacked on top of each other in the same space. Only
   the one with the class "hero__slide--active" is visible; the others
   are fully see-through. Swapping that class fades between them.
   js/hero.js does the swapping. */
.hero {
  /* "relative" lets the photos, arrows, text and dots stack inside. */
  position: relative;
  /* Tall on phones, wider and shorter on desktop. */
  height: 62vh;
  min-height: 380px;
  overflow: hidden;
  background-color: var(--color-placeholder); /* shows while loading */
}

.hero__slides {
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left all 0 */
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__slide--active {
  opacity: 1;
}

/* "object-fit: cover" fills the banner at any screen size, cropping the
   edges of the photo rather than stretching or squashing it. */
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The tagline panel, sitting on top of whichever photo is showing. */
.hero__content {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 52px;
  /* A soft cream panel so text stays readable over any photo. */
  /* Same color as --color-background, but slightly see-through so a
     little of the photo behind it shows. */
  background-color: rgba(250, 249, 247, 0.92);
  padding: 26px 24px 30px;
  max-width: 460px;
}

.hero__title {
  font-size: 32px;
  margin-bottom: 22px;
}

/* ---- Hero arrows ---- */
/* On phones these sit near the top, clear of the tagline panel, which
   takes up most of the lower half. */
.hero__arrow {
  position: absolute;
  z-index: 2;
  top: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background-color: rgba(38, 49, 58, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero__arrow:hover {
  background-color: rgba(38, 49, 58, 0.6);
  border-color: #fff;
}

.hero__arrow svg {
  width: 19px;
  height: 19px;
}

.hero__arrow--prev {
  left: 14px;
}

.hero__arrow--next {
  right: 14px;
}

/* ---- Hero dots ---- */
.hero__dots {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  /* A soft shadow so the dots stay visible over a pale photo. */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero__dot:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

/* The dot for the photo currently showing. */
.hero__dot[aria-current='true'] {
  background-color: #fff;
  transform: scale(1.3);
}

@media (min-width: 768px) {
  .hero {
    height: 74vh;
    max-height: 640px;
  }

  .hero__content {
    /* 92px, not a percentage: it must always clear the left arrow, which
       sits 22px in and is 46px wide. A percentage put the panel on top of
       the arrow on medium-sized screens. */
    left: 92px;
    right: auto;
    bottom: 64px;
    padding: 38px 40px 42px;
  }

  .hero__title {
    font-size: 44px;
  }

  /* Room to centre the arrows vertically once the panel no longer
     spans the full width. */
  .hero__arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
  }

  .hero__arrow--prev {
    left: 22px;
  }

  .hero__arrow--next {
    right: 22px;
  }

  .hero__dots {
    bottom: 24px;
  }
}

/* Respects the "reduce motion" setting some people turn on. The photos
   still change when the arrows or dots are used, just without a fade —
   and js/hero.js does not rotate them automatically. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

/* ---- Shop by Category ---- */
.category-grid {
  display: grid;
  /* Two tiles per row on phones. */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.category-tile {
  display: block;
  text-align: center;
}

.category-tile__image {
  /* A tall portrait shape, which suits jewelry photography. */
  aspect-ratio: 3 / 4;
  background-color: var(--color-placeholder); /* shows while loading */
  overflow: hidden;
  transition: opacity 0.25s ease;
}

/* The product photos standing in for category photography are square,
   so "object-fit: cover" trims a little from each side to fill the taller
   tile — rather than stretching the picture out of shape. */
.category-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile:hover .category-tile__image {
  opacity: 0.85;
}

.category-tile__label {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .category-grid {
    /* All four across on tablets and desktops. */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
}

.product-card {
  display: block;
}

.product-card__image {
  /* Square photos keep every card the same height. */
  aspect-ratio: 1 / 1;
  background-color: var(--color-placeholder);
  overflow: hidden;
  transition: opacity 0.25s ease;
}

/* "object-fit: cover" fills the square neatly, cropping the edges of the
   photo if it isn't square itself, instead of squashing it out of shape. */
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Short status line shown in place of a grid — "Loading products…",
   "No products in this category yet.", and so on. */
.products-message {
  grid-column: 1 / -1; /* spans the full width of the grid */
  text-align: center;
  color: var(--color-muted);
  padding: 36px 0;
}

.product-card:hover .product-card__image {
  opacity: 0.85;
}

.product-card__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  margin-top: 14px;
}

.product-card__price {
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 4px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
  }
}

/* A "featured" version of the same grid, used for Best Sellers on the
   homepage. Six products divide evenly into three columns, so the section
   reads as two tidy rows instead of one row of four plus a stray pair.
   The shop page keeps the plain four-across .product-grid above. */
@media (min-width: 768px) {
  .product-grid--featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On the widest screens three columns would stretch each photo very large,
   so the cards are held to a comfortable width and centred in the section. */
@media (min-width: 1200px) {
  .product-grid--featured {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    gap: 40px 28px;
  }
}

/* ---- Shop page filters ---- */

/* Pulls the grid a little closer to the page title above it. */
.section--top-tight {
  padding-top: 28px;
}

/* The "3 results for ..." line, shown only after a header search. */
.shop-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--color-muted);
}

.shop-results a {
  color: var(--color-accent-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.shop-results a:hover {
  border-bottom-color: var(--color-accent);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.filter-button {
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.filter-button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}

/* The category currently being shown. */
.filter-button--active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.filter-button--active:hover {
  color: #fff;
}

/* ---- Product detail ---- */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.product-detail__image {
  aspect-ratio: 1 / 1;
  background-color: var(--color-placeholder);
  overflow: hidden;
}

.product-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail__name {
  font-size: 28px;
  margin-bottom: 12px;
}

.product-detail__price {
  font-size: 20px;
  color: var(--color-accent-deep);
  margin-bottom: 20px;
}

.product-detail__description {
  color: var(--color-muted);
  margin-bottom: 26px;
}

/* Quantity picker: minus button, number box, plus button. */
.quantity {
  margin-bottom: 22px;
}

.quantity__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.quantity__control {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background-color: #fff;
}

.quantity__button {
  width: 40px;
  border: none;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.quantity__button:hover {
  background-color: var(--color-soft-blue);
}

.quantity__input {
  width: 52px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background-color: transparent;
  padding: 10px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  /* Hides the tiny up/down arrows browsers add to number boxes, since we
     have our own bigger + and - buttons. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-detail__add {
  width: 100%;
}

/* The "not connected yet" note that appears under Add to Cart. */
.product-detail__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-muted);
  min-height: 20px; /* reserves the space so nothing jumps when it appears */
}

.product-detail__back {
  margin-top: 26px;
  font-size: 13px;
}

.product-detail__back a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.product-detail__back a:hover {
  color: var(--color-accent-deep);
}

@media (min-width: 768px) {
  .product-detail {
    /* Photo on the left, details on the right. */
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .product-detail__name {
    font-size: 34px;
  }

  .product-detail__add {
    /* No longer full width once there is room beside it. */
    width: auto;
    min-width: 240px;
  }
}

/* ---- Contact page ---- */

/* Contact details on one side, message form on the other.
   Stacked on phones, side by side from tablet width up. */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* One detail: icon on the left, label and value on the right. */
.contact-detail {
  display: flex;
  gap: 14px;
}

.contact-detail__icon {
  width: 21px;
  height: 21px;
  margin-top: 3px;
  color: var(--color-accent);
  flex-shrink: 0; /* stops the icon squashing on narrow screens */
}

.contact-detail__label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.contact-detail__value {
  font-size: 18px;
}

.contact-detail__value a {
  color: var(--color-accent-deep);
  transition: color 0.2s ease;
  /* Stops a long email address pushing the page sideways on a phone. */
  overflow-wrap: anywhere;
}

.contact-detail__value a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ---- Forms (contact page) ---- */
.form-field {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.form-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  background-color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}

/* Matches the highlight used on the header search box. */
.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-soft-blue);
}

.form-textarea {
  resize: vertical; /* draggable taller, but not wider */
  min-height: 130px;
}

.contact-form__submit {
  width: 100%;
}

.contact-form__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .contact-layout {
    /* Details take the narrower column, the form the wider one. */
    grid-template-columns: 5fr 7fr;
    gap: 56px;
  }

  .contact-form__submit {
    width: auto;
    min-width: 220px;
  }
}

/* ---- Policy pages (Return Policy) ---- */
/* A plain bulleted list, held to a comfortable reading width. Long lines
   are tiring to read, so the list stops well short of the full page. */
.policy-list {
  max-width: 720px;
  margin: 0 auto;
  /* Removes the browser's default bullets; we draw our own below. */
  list-style: none;
  padding: 0;
}

.policy-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 20px;
}

.policy-list li:last-child {
  margin-bottom: 0;
}

/* Our own bullet: a small dot in the brand blue. */
.policy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

@media (min-width: 768px) {
  .policy-list li {
    margin-bottom: 22px;
  }
}

/* ---- Cart ---- */

/* Shown instead of the list when there is nothing in the cart. */
.cart-empty {
  text-align: center;
  padding: 40px 0;
}

.cart-empty p {
  color: var(--color-muted);
  margin-bottom: 20px;
}

.cart-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--color-border);
}

/* One row per product: photo, then name/price/quantity/remove, then
   the line total. On phones the row total sits under the details;
   from 600px up there is room for it beside them. */
.cart-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-row__image {
  width: 84px;
  height: 84px;
  background-color: var(--color-placeholder);
  overflow: hidden;
}

.cart-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-row__name {
  font-family: var(--font-heading);
  font-size: 17px;
  margin-bottom: 4px;
}

.cart-row__price {
  color: var(--color-muted);
  font-size: 13px;
  margin-bottom: 12px;
}

/* The quantity picker is reused from the product page, just with less
   space beneath it here. */
.cart-row .quantity {
  margin-bottom: 12px;
}

.cart-row__remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
}

.cart-row__remove:hover {
  color: var(--color-accent-deep);
}

.cart-row__total {
  grid-column: 2;
  font-size: 15px;
  color: var(--color-text);
}

/* The subtotal box below the list. */
.cart-summary {
  max-width: 360px;
  margin-left: auto;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 19px;
  margin-bottom: 8px;
}

.cart-summary__note {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.cart-summary__checkout {
  width: 100%;
}

.cart-summary__checkout:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Only shows text if checkout fails (empty cart, server error, etc.). */
.cart-summary__error {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
  min-height: 18px;
}

.cart-summary__back {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.cart-summary__back a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.cart-summary__back a:hover {
  color: var(--color-accent-deep);
}

@media (min-width: 600px) {
  .cart-row {
    grid-template-columns: 100px 1fr auto;
    align-items: center;
  }

  .cart-row__total {
    grid-column: auto;
    text-align: right;
    white-space: nowrap;
  }
}

/* ---- Order confirmation ---- */

.confirmation {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 40px;
}

.confirmation__heading {
  font-size: 30px;
  margin-bottom: 16px;
}

.confirmation__note {
  color: var(--color-muted);
  margin-bottom: 32px;
}

/* ---- About page ---- */

/* The centered title block at the top of the page. */
.page-header {
  text-align: center;
  padding: 52px 0 8px;
}

.page-header__title {
  font-size: 32px;
}

.page-header__lede {
  color: var(--color-muted);
  margin-top: 14px;
  /* "0 auto" centers the paragraph; max-width keeps lines short and
     comfortable to read instead of stretching across the screen. */
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* Photo on one side, story text on the other. Stacked on phones. */
.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* ---- The founder photo ---- */
/* The photo is arch-topped — rounded across the top, squared off at the
   bottom, like a window arch. A thin line in the brand blue sits just
   behind it, offset down and to the right, so the picture reads as
   framed rather than pasted on. */

.story__figure {
  margin: 0; /* browsers add a wide margin to <figure> by default */
}

.story__frame {
  /* "relative" is what lets the offset line below be placed against it. */
  position: relative;
}

/* The offset line. The four numbers push it down-right: in from the top
   and left, out past the bottom and right. */
.story__frame::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--color-accent);
  border-radius: 42% 42% 6px 6px / 26% 26% 2% 2%;
}

.story__photo {
  /* Sits on top of the offset line. */
  position: relative;
  z-index: 1;
  width: 100%;
  /* Nearly the photo's own shape, so almost nothing is cropped. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Percentages rather than pixels, so the arch keeps the same
     proportions on a phone as on a desktop. */
  border-radius: 42% 42% 6px 6px / 26% 26% 2% 2%;
  box-shadow: 0 16px 36px rgba(38, 49, 58, 0.14);
}

.story__caption {
  /* Clears the offset line hanging below the photo. */
  margin-top: 34px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.35;
}

.story__caption-role {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.story__title {
  font-size: 24px;
  margin-bottom: 18px;
}

/* Space between paragraphs. "p + p" means "a paragraph that follows
   another paragraph", so the first one doesn't get a gap above it. */
.story__text p + p {
  margin-top: 18px;
}

/* The three value points. */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.value {
  /* A short blue rule above each one, tying them to the brand color. */
  border-top: 2px solid var(--color-accent);
  padding-top: 18px;
}

.value__title {
  font-size: 19px;
  margin-bottom: 10px;
}

.value__text {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .page-header {
    padding: 76px 0 12px;
  }

  .page-header__title {
    font-size: 42px;
  }

  .story {
    /* Photo takes the narrower column, text the wider one. */
    grid-template-columns: 5fr 7fr;
    gap: 56px;
  }

  .story__title {
    font-size: 28px;
  }

  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* ---- Footer ---- */
.site-footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  padding-top: 48px;
  font-size: 14px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__column a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.site-footer__column a:hover {
  color: var(--color-accent-deep);
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.logo--footer {
  font-size: 22px;
  margin-bottom: 6px;
}

.site-footer__note {
  color: var(--color-muted);
  margin-bottom: 14px;
  max-width: 320px;
}

.newsletter {
  display: flex;
  max-width: 360px;
}

.newsletter__input {
  flex: 1;
  min-width: 0; /* lets the box shrink on narrow phones */
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-right: none;
  background-color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.newsletter__input::placeholder {
  color: var(--color-muted);
}

.newsletter__button {
  padding: 12px 22px;
}

.site-footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--color-muted);
  font-size: 13px;
}

.social {
  display: flex;
  gap: 16px;
}

.social svg {
  width: 20px;
  height: 20px;
  transition: color 0.2s ease;
}

.social a:hover {
  color: var(--color-accent-deep);
}

@media (min-width: 768px) {
  .site-footer__inner {
    /* Wide first column for the newsletter, two narrow link columns. */
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---- Placeholder pages (shop, product, cart, about, contact) ---- */
/* Temporary styling so the not-yet-built pages still look tidy.
   Delete these rules as each page gets built in later phases. */
.page-stub {
  padding: 80px 0 100px;
  text-align: center;
}

.page-stub h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

.page-stub p {
  color: var(--color-muted);
}