/* Source Serif 4 (SIL Open Font License), self-hosted: weights 400-600, subsets as on Google Fonts.
   Vietnamese text only downloads the latin + vietnamese files. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Navi Bakery storefront: clean white store layout, serif type, square cards */

:root {
  --text: #121212;
  --text-soft: rgb(18 18 18 / 0.75);
  --line: rgb(18 18 18 / 0.12);
  --bg: #fff;
  --gray: #f3f3f3;
  --beige: #e8ddd4;
  --sale-bg: #f4dde0;
  --zalo: #0068ff;
  --font: 'Source Serif 4', 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --page: 1200px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

ul {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

.page-width {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 16px;
}

.page-width--narrow {
  max-width: 720px;
}

/* ── Buttons ───────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--text);
  padding: 0 30px;
  background: var(--text);
  color: #fff;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    opacity 0.15s;
}

.button:hover {
  box-shadow: 0 0 0 1px var(--text);
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

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

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

.button--full {
  width: 100%;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.icon-button::-webkit-details-marker {
  display: none;
}

/* ── Announcement + header ─────────────────────────────────── */

.announcement {
  border-bottom: 1px solid var(--line);
  background: #f7f7f7;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.announcement__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 38px;
}

.announcement__social {
  display: none;
  gap: 18px;
}

.announcement__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  text-transform: uppercase;
}

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
}

.header__logo {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header__menu {
  display: none;
}

.header__menu a,
.drawer__panel > a {
  color: var(--text-soft);
  font-size: 15px;
}

.header__menu a:hover,
.header__menu a.is-active {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header__icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Mobile drawer (pure <details>, no JS) */
.drawer > .drawer__panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  overflow-y: auto;
  padding: 16px 24px;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax rgb(18 18 18 / 0.35);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.drawer__panel > a {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: 17px;
}

.drawer__panel > a.is-active {
  color: var(--text);
}

.drawer__social {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  color: var(--text);
}

.search {
  position: relative;
}

.search__form {
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  display: flex;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--text);
  background: var(--bg);
}

.search__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 12px 16px;
  font: inherit;
  outline: none;
}

/* ── Sections ──────────────────────────────────────────────── */

.section {
  padding: 40px 0;
}

.section--gray {
  background: var(--gray);
}

.section--beige {
  background: var(--beige);
}

.section__title {
  margin-bottom: 24px;
  font-size: 30px;
}

.section__title--small {
  font-size: 24px;
}

.section__more {
  margin-top: 32px;
  text-align: center;
}

.empty {
  padding: 60px 0;
  text-align: center;
}

.empty a {
  text-decoration: underline;
}

/* Hero banner with caption box */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gray);
}

.hero__image {
  width: 100%;
  height: auto;
}

.hero__box {
  display: grid;
  gap: 24px;
  padding: 32px 16px;
  background: var(--gray);
  text-align: center;
}

.hero--plain .hero__box {
  padding: 72px 16px;
}

.hero__title {
  font-size: 26px;
}

.hero__buttons {
  display: grid;
  gap: 12px;
}

/* Rich text block */
.rich-text {
  text-align: center;
}

.rich-text__title {
  margin-bottom: 16px;
  font-size: 26px;
}

.rich-text p + p {
  margin-top: 12px;
}

/* Category cards */
.collection-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.collection-card__media {
  display: grid;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--beige);
  place-items: center;
}

.collection-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.collection-card:hover img {
  transform: scale(1.03);
}

.collection-card__placeholder {
  padding: 16px;
  color: var(--text);
  font-size: 22px;
  text-align: center;
}

.collection-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 17px;
}

.collection-card:hover .collection-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.card {
  display: block;
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gray);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card .badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.card .badge--soldout {
  top: 10px;
  bottom: auto;
}

.card__title {
  display: -webkit-box;
  margin: 12px 0 6px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.card:hover .card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.badge {
  display: inline-block;
  border-radius: 40px;
  padding: 2px 13px;
  background: var(--sale-bg);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.badge--soldout {
  background: var(--text);
  color: #fff;
}

.price {
  display: grid;
  color: var(--text);
  font-size: 15px;
}

.price__compare {
  color: var(--text-soft);
  font-size: 13px;
}

/* Image with text */
.image-text {
  display: grid;
  gap: 28px;
  align-items: center;
}

.image-text__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.image-text__content {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.image-text__eyebrow {
  color: var(--text);
  font-size: 22px;
}

.image-text__title {
  font-size: 26px;
  font-weight: 600;
}

/* Delivery info */
.delivery {
  display: grid;
  gap: 16px;
}

.delivery__icon {
  color: var(--text);
}

.delivery .section__title {
  margin-bottom: 12px;
}

.delivery__text {
  white-space: pre-line;
}

.delivery__address {
  margin-top: 12px;
}

.delivery__map {
  display: block;
  width: 100%;
  height: 320px;
  margin-top: 20px;
  border: 1px solid var(--line);
}

.delivery__button {
  margin-top: 16px;
}

/* ── Collection page ───────────────────────────────────────── */

.collection__title {
  font-size: 34px;
}

.collection__description {
  margin-top: 12px;
  max-width: 640px;
}

.pills-nav {
  display: flex;
  gap: 8px;
  margin: 24px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pills-nav a {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 6px 16px;
  color: var(--text);
  font-size: 14px;
}

.pills-nav a.is-active {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}

.collection__count {
  margin-bottom: 20px;
  font-size: 13px;
}

/* ── Product page ──────────────────────────────────────────── */

.product {
  padding-top: 24px;
  padding-bottom: 24px;
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: 13px;
}

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

.product__grid {
  display: grid;
  gap: 32px;
}

.gallery__main {
  overflow: hidden;
}

.gallery__main img {
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}

.gallery__thumb {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border: 1px solid transparent;
  padding: 0;
  background: none;
  opacity: 0.65;
  cursor: pointer;
}

.gallery__thumb.is-active,
.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb.is-active {
  border-color: var(--text);
}

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

.product__vendor {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.product__title {
  margin: 6px 0 16px;
  font-size: 34px;
}

.product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.product__price .price__compare {
  font-size: 18px;
}

.product__description {
  margin-top: 20px;
  white-space: pre-line;
}

.product__policy {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.order {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.order h2 {
  margin-bottom: 20px;
  font-size: 22px;
}

.notice {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--gray);
  font-size: 14px;
}

/* ── Order form ────────────────────────────────────────────── */

.form {
  display: grid;
  gap: 20px;
}

.form fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.form legend,
.field > span {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
}

.field em {
  font-style: normal;
  opacity: 0.75;
}

.form input:not([type='radio']),
.form textarea {
  width: 100%;
  border: 1px solid rgb(18 18 18 / 0.55);
  border-radius: 0;
  padding: 12px 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.form input:focus,
.form textarea:focus {
  box-shadow: 0 0 0 1px var(--text);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form__address {
  margin-top: 12px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill span {
  display: block;
  border: 1px solid rgb(18 18 18 / 0.55);
  border-radius: 40px;
  padding: 8px 20px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}

.pill input:checked + span {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}

.pill input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.hp {
  display: none;
}

.form__error {
  border-left: 3px solid #b42f2f;
  padding: 10px 14px;
  background: #fbeaea;
  color: #8f2424;
  font-size: 14px;
}

.form__hint {
  font-size: 13px;
  text-align: center;
}

.success {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 24px;
  font-size: 15px;
}

.success__label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.success__code {
  color: var(--text);
  font-size: 30px;
}

.success pre {
  margin: 0;
  padding: 16px;
  background: var(--gray);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  white-space: pre-wrap;
}

/* ── Footer ────────────────────────────────────────────────── */

.footer {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding: 44px 0 24px;
  font-size: 15px;
}

.footer__grid {
  display: grid;
  gap: 32px;
}

.footer__heading {
  margin-bottom: 16px;
  font-size: 19px;
}

.footer__list {
  display: grid;
  gap: 10px;
}

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

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 12px;
}

.footer__social {
  display: flex;
  gap: 20px;
  color: var(--text);
}

/* Floating contact buttons */
.floating {
  position: fixed;
  right: 12px;
  bottom: 20px;
  z-index: 30;
  display: grid;
  gap: 8px;
}

.floating__button {
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  color: var(--zalo);
  place-items: center;
}

.floating__button--zalo {
  background: var(--zalo);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── Cart: header badge + drawer ───────────────────────────── */

.no-scroll {
  overflow: hidden;
}

.link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.header__cart {
  position: relative;
}

.cart-count {
  position: absolute;
  right: 4px;
  bottom: 6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0 4px;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  place-items: center;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(18 18 18 / 0.4);
}

.cart-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--bg);
  animation: slide-in 0.25s ease-out;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 12px 12px 12px 20px;
}

.cart-drawer__head h2 {
  font-size: 20px;
}

.cart-drawer__added {
  margin: 12px 20px 0;
  color: var(--text);
  font-size: 14px;
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}

.cart-drawer__empty {
  margin: 32px 0 16px;
}

.cart-drawer__foot {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 16px 20px 20px;
}

.cart-drawer__continue {
  justify-self: center;
  font-size: 14px;
}

/* Cart line (drawer, cart page, checkout summary, order page) */
.line {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
}

.line + .line {
  border-top: 1px solid var(--line);
}

.line__media {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  border: 1px solid var(--line);
  background: var(--gray);
}

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

.line__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 6px;
  background: rgb(18 18 18 / 0.7);
  color: #fff;
  font-size: 12px;
  place-items: center;
}

.line__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.line__title {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.line__meta {
  font-size: 13px;
}

.line__warn {
  color: #8f2424;
}

.line__end {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.line__price {
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
}

.line__remove {
  width: 32px;
  height: 32px;
  color: var(--text-soft);
  font-size: 14px;
}

/* Quantity stepper */
.quantity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid rgb(18 18 18 / 0.55);
}

.quantity__button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.quantity__button:disabled {
  opacity: 0.35;
  cursor: default;
}

.quantity__input,
.form .quantity__input {
  width: 48px;
  border: 0;
  padding: 0;
  text-align: center;
  -moz-appearance: textfield;
}

.form .quantity__input:focus {
  box-shadow: none;
}

.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.quantity__value {
  min-width: 28px;
  color: var(--text);
  text-align: center;
}

.quantity--small {
  margin-top: 6px;
}

.quantity--small .quantity__button {
  width: 34px;
  height: 34px;
}

/* Product buy box */
.product__note {
  margin-top: 10px;
  font-size: 13px;
}

.buy {
  margin-top: 24px;
  gap: 18px;
}

.buy .button + .button {
  margin-top: -8px;
}

/* ── Cart page ─────────────────────────────────────────────── */

.cart-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

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

.cart-table th {
  border-bottom: 1px solid var(--line);
  padding: 0 0 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.cart-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  vertical-align: top;
}

.cart-table .line {
  grid-template-columns: 76px 1fr;
}

.cart-table__qty,
.cart-table__total {
  width: 1%;
  white-space: nowrap;
}

.cart-table td.cart-table__qty,
.cart-table td.cart-table__total {
  padding-top: 22px;
}

.cart-table__total {
  padding-left: 16px;
  color: var(--text);
  text-align: right;
}

.cart-table th.cart-table__total {
  text-align: right;
}

.cart-table__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-table__controls .quantity--small {
  margin: 0;
}

.cart-footer {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.cart-footer__note textarea {
  width: 100%;
  border: 1px solid rgb(18 18 18 / 0.55);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.cart-footer__note textarea:focus {
  box-shadow: 0 0 0 1px var(--text);
}

.cart-footer__summary {
  display: grid;
  gap: 10px;
  justify-items: end;
  text-align: right;
}

.cart-footer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
  font-size: 18px;
}

.cart-footer__total strong {
  font-weight: 500;
}

.cart-footer__hint {
  font-size: 13px;
}

.cart-footer__summary .button {
  width: 100%;
  max-width: 360px;
}

/* ── Checkout ──────────────────────────────────────────────── */

/* Checkout header stays in place, like a hosted checkout page */
.header--minimal {
  position: static;
}

.header--minimal .header__inner {
  display: flex;
  justify-content: space-between;
}

.checkout {
  display: grid;
}

.checkout__inner {
  width: 100%;
  max-width: 560px;
  padding: 24px 16px 40px;
}

.checkout__main .checkout__inner {
  margin: 0 auto;
}

.checkout__aside {
  display: none;
  border-left: 1px solid var(--line);
  background: #fafafa;
}

.checkout__steps {
  margin-bottom: 20px;
  font-size: 13px;
}

.checkout__steps a {
  text-decoration: underline;
}

.checkout__heading {
  margin-top: 8px;
  font-size: 21px;
}

.checkout__submit {
  min-height: 56px;
  font-size: 17px;
}

.checkout__mobile-summary {
  margin: 0 -16px 20px;
  border-block: 1px solid var(--line);
  background: #fafafa;
}

.checkout__mobile-summary summary {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  color: var(--text);
  cursor: pointer;
}

.checkout__mobile-summary > div {
  padding: 0 16px 16px;
}

.choices {
  border: 1px solid rgb(18 18 18 / 0.3);
}

.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  cursor: pointer;
}

.choice + .choice {
  border-top: 1px solid rgb(18 18 18 / 0.3);
}

.choice input {
  margin-top: 5px;
  accent-color: var(--text);
}

.choice__body {
  display: grid;
}

.choice__label {
  color: var(--text);
}

.choice__hint {
  font-size: 13px;
}

.summary-rows {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 15px;
}

.summary-rows > p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-rows__total {
  margin-top: 6px;
  color: var(--text);
  font-size: 19px;
}

.summary-rows__total strong {
  font-weight: 500;
}

/* Order confirmation */
.order-done {
  display: grid;
  gap: 18px;
}

.order-done__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.order-done__bank {
  display: grid;
  gap: 12px;
  justify-items: start;
  border: 1px solid var(--line);
  padding: 20px;
}

.order-done__items {
  border-block: 1px solid var(--line);
  padding: 8px 0 16px;
}

.order-done__facts {
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.order-done__facts span {
  display: inline-block;
  min-width: 110px;
  color: var(--text);
}

.order-done__summary {
  margin: 0;
  padding: 16px;
  background: var(--gray);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  white-space: pre-wrap;
}

.order-done__more {
  text-align: center;
}

/* ── Collection filters + pagination ───────────────────────── */

.facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 16px 0 24px;
  font-size: 15px;
}

.facets__filters,
.facets__sort,
.facets__sort label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.facets__label {
  margin-right: 6px;
}

.facet {
  position: relative;
}

.facet summary {
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.facet summary::after {
  content: ' ▾';
  font-size: 12px;
}

.facet__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 10px;
  min-width: 220px;
  border: 1px solid var(--line);
  padding: 16px;
  background: var(--bg);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
}

.facet__check {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
  cursor: pointer;
}

.facet__check input {
  accent-color: var(--text);
}

.facet__panel--price label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.facet__panel--price input,
.facets select {
  border: 1px solid rgb(18 18 18 / 0.55);
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* Cart table stacks on phones: product on top, quantity + total underneath */
@media (max-width: 749px) {
  .cart-table thead .cart-table__qty {
    display: none;
  }

  .cart-table,
  .cart-table thead,
  .cart-table tbody {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }

  .cart-table thead tr {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--line);
  }

  .cart-table th {
    border: 0;
  }

  .cart-table tbody tr {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .cart-table tbody td {
    border: 0;
  }

  .cart-table tbody td:first-child {
    grid-column: 1 / -1;
  }

  .cart-table td.cart-table__qty,
  .cart-table td.cart-table__total {
    width: auto;
    padding: 0 0 16px;
  }

  .cart-table td.cart-table__qty {
    padding-left: 90px;
  }
}

/* On phones the dropdowns open under the filter row instead of under each button */
@media (max-width: 749px) {
  .facets__filters {
    position: relative;
  }

  .facet {
    position: static;
  }

  .facet__panel {
    right: 0;
    min-width: 0;
  }
}

.facets__clear {
  font-size: 14px;
}

.facets__count {
  font-size: 14px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  display: grid;
  min-width: 40px;
  height: 40px;
  color: var(--text);
  place-items: center;
}

.pagination [aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pagination a:hover {
  background: var(--gray);
}

/* ── Breakpoints ───────────────────────────────────────────── */

@media (min-width: 750px) {

  .cart-footer {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .cart-footer__note {
    max-width: 400px;
  }

  .cart-table .line {
    grid-template-columns: 100px 1fr;
    gap: 24px;
  }

  .cart-table .line__media {
    width: 100px;
    height: 100px;
  }

  .checkout {
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 65px);
  }

  .checkout__main .checkout__inner {
    margin: 0 0 0 auto;
    padding: 40px 48px 64px 16px;
  }

  .checkout__aside {
    display: block;
  }

  .checkout__aside .checkout__inner {
    position: sticky;
    top: 0;
    max-width: 480px;
    padding: 40px 16px 40px 48px;
  }

  .checkout__mobile-summary {
    display: none;
  }
  .page-width {
    padding: 0 50px;
  }

  .announcement__social {
    display: flex;
  }

  .section {
    padding: 52px 0;
  }

  .section__title {
    font-size: 40px;
  }

  .section__title--small {
    font-size: 28px;
  }

  /* Banners carry their own text: show the whole image, caption box below it */
  .hero__box {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 36px;
  }

  .hero--plain .hero__box {
    padding: 96px 36px;
  }

  .hero__title {
    font-size: 26px;
  }

  .hero__buttons {
    grid-template-columns: 1fr 1fr;
  }

  .rich-text__title {
    font-size: 28px;
  }

  .collection-list {
    gap: 32px;
  }

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

  .image-text {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }

  .image-text__title {
    font-size: 28px;
  }

  .delivery {
    grid-template-columns: auto 1fr;
    gap: 32px;
    max-width: 880px;
  }

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

  .product {
    padding-top: 40px;
  }

  .product__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
  }

  .gallery {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .product__title {
    font-size: 42px;
  }

  .collection__title {
    font-size: 44px;
  }
}

@media (min-width: 990px) {
  /* Logo left, menu centered, icons right. The header gets more room than the page
     content and the menu stays on one line (it shrinks below its width only to be measured). */
  .header__inner {
    grid-template-columns: 1fr minmax(0, max-content) 1fr;
    gap: 32px;
    max-width: 1600px;
  }

  .drawer {
    display: none;
  }

  .header__menu {
    display: flex;
    gap: 24px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* site.js adds this when the menu does not fit: fall back to the drawer, as on mobile */
  .header--compact .header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
  }

  .header--compact .drawer {
    display: block;
  }

  .header--compact .header__menu {
    display: none;
  }

  .header__menu .menu-home {
    display: none;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Text pages (privacy policy) */
.prose {
  max-width: 760px;
  padding-top: 48px;
  padding-bottom: 64px;
}

.prose h2 {
  margin: 28px 0 8px;
  font-size: 20px;
}

.prose p {
  margin: 0 0 12px;
  line-height: 1.7;
}