/* =====================================================================
   TaDaA PROJECTS - components.css
   ---------------------------------------------------------------------
   The reusable pieces, styled to the design reference:
     1.  Announcement bar
     2.  Header (fixed; transparent over the hero, solid once scrolled)
     3.  Mobile drawer
     4.  Cart drawer
     5.  Ticker (the scrolling category strip)
     6.  Filter buttons
     7.  Product card
     8.  Category cells, service rows
     9.  Footer
    10.  Misc: breadcrumbs, pagination, quantity, overlay, toast

   Same rules as base.css: square, hairline-ruled, no shadows, and every
   colour comes from a var(--...) set in Theme settings.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. ANNOUNCEMENT BAR
   A thin ruled strip. Off by default.
   ------------------------------------------------------------------ */
.announcement {
  background-color: var(--color-bg-alt);
  border-bottom: var(--border);
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-align: center;
}
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 40px;
  padding-block: 9px;
}
.announcement a { border-bottom: var(--border-width) solid var(--color-border); }
.announcement a:hover { border-bottom-color: var(--color-accent); }
.announcement p { margin: 0; }


/* ---------------------------------------------------------------------
   2. HEADER
   Fixed to the top. Over the dark hero it is transparent with light
   text; the moment the page scrolls it becomes a solid ruled bar with
   dark text. That transition is handled by theme.js adding .solid.
   ------------------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background-color: transparent;
  border-bottom: var(--border-width) solid transparent;
  color: var(--color-ink-text);
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}
/* Once scrolled past the hero */
.header.is-solid {
  background-color: var(--color-bg);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}
/* Pages with no dark hero start solid straight away */
.header.is-static,
.header.header--no-hero {
  position: sticky;
  background-color: var(--color-bg);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}
/* When a panel is open the header gets out of the way. The drawer sits
   above the header (z-index 90 vs 60) and carries its own close button. */
.no-scroll .header { color: var(--color-ink-text); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
}

/* ---- Logo ----
   Two artwork files are loaded and CSS shows whichever suits the current
   state of the header: black over the light page, white over the dark
   panel. Swapping files rather than inverting a single one keeps the
   anti-aliased edges clean, so the mark sits on the panel instead of
   showing a pale box.

   The order matters: an uploaded logo takes precedence. */
.header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  position: relative;
}
.header__brand:hover { color: inherit; }
.header__logo { width: var(--logo-width, 190px); max-width: 100%; height: auto; }

/* With the built-in artwork: show the white file over the dark panel, the
   black file on the solid light bar and in light mode. */
.header__logo--on-dark { display: none; }
.header:not(.is-solid) .header__logo--on-light { display: none; }
.header:not(.is-solid) .header__logo--on-dark { display: block; }
/* A page with no dark hero is solid from the start, so the black file
   applies immediately. */
.header--no-hero .header__logo--on-light { display: block; }
.header--no-hero .header__logo--on-dark { display: none; }
/* Only if dark mode has been switched on in Theme settings does the solid
   header sit on a dark page, in which case it needs the white logo file. */
html[data-dark-page='true'] .header.is-solid .header__logo--on-light { display: none; }
html[data-dark-page='true'] .header.is-solid .header__logo--on-dark { display: block; }
html[data-dark-page='true'] .header--no-hero .header__logo--on-light { display: none; }
html[data-dark-page='true'] .header--no-hero .header__logo--on-dark { display: block; }

/* ---- Navigation ---- */
.header__nav { display: none; }
@media (min-width: 960px) {
  .header__nav { display: block; }
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
/* Hairline that grows out from the left on hover */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--border-width);
  background-color: currentColor;
  transition: width var(--speed) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { width: 100%; }
.nav__link:hover { color: inherit; }

/* ---- Header actions ---- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 26px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.icon-button:hover { color: var(--color-accent); }
.icon-button .icon { width: 20px; height: 20px; }

/* The cart reads as a labelled item with a hairline circle count, the
   way the design reference does it. */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--label-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
.cart-link:hover { color: inherit; }
.cart-link:hover .cart-count { border-color: var(--color-accent); color: var(--color-accent); }
.cart-count {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: var(--border-width) solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.cart-count[data-count='0'] { opacity: 0.5; }

.header__burger { display: inline-flex; }
@media (min-width: 960px) {
  .header__burger { display: none; }
}
/* Two-line burger, matching the reference (not three) */
.burger-lines { display: block; width: 22px; }
.burger-lines span {
  display: block;
  height: var(--border-width);
  background-color: currentColor;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.burger-lines span + span { margin-top: 7px; }

/* ---- Search panel ---- */
.header__search {
  border-top: var(--border);
  padding-block: 18px;
}
.header.is-solid .header__search { background-color: var(--color-bg); }
.header__search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin-inline: auto;
}


/* ---------------------------------------------------------------------
   3. MOBILE DRAWER
   Full-screen dark panel, oversized links numbered 01, 02, 03.
   ------------------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--color-ink);
  color: var(--color-ink-text);
  padding: calc(var(--header-height) + 40px) var(--page-padding) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease),
              visibility var(--speed) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.mobile-menu__head {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
  padding-inline: var(--page-padding);
}
.mobile-menu__list { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: var(--border-ink);
  font-family: var(--font-heading-stack);
  font-size: clamp(34px, 9vw, 54px);
  font-weight: var(--font-heading-weight);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--color-ink-text);
}
.mobile-menu__link:hover { color: var(--color-ink-text); }
.mobile-menu__link i,
.mobile-menu__num {
  font-family: var(--font-body-stack);
  font-style: normal;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  color: var(--ink-text-faint);
}
.mobile-menu__foot {
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--ink-text-faint);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mobile-menu__foot a { color: inherit; }
.mobile-menu__socials { display: flex; flex-wrap: wrap; gap: 16px; }


/* ---------------------------------------------------------------------
   4. CART DRAWER
   ------------------------------------------------------------------ */
.cart-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 95;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  border-inline-start: var(--border);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--speed) var(--ease), visibility var(--speed) var(--ease);
}
html[dir='rtl'] .cart-drawer { transform: translateX(-101%); }
.cart-drawer.is-open { transform: none; visibility: visible; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--page-padding);
  border-bottom: var(--border);
}
.cart-drawer__title {
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 4px var(--page-padding); }
.cart-drawer__foot {
  padding: 22px var(--page-padding) 28px;
  border-top: var(--border);
  background-color: var(--color-bg);
}
.cart-drawer__empty { padding-block: 60px; text-align: center; }

/* ---- Line items ---- */
.cart-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding-block: 22px;
  border-bottom: var(--border);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__media {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border: var(--border);
  border-radius: var(--radius);
}
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title { font-size: 15px; font-weight: 400; line-height: 1.4; }
.cart-item__options { font-size: 12px; color: var(--color-text-muted); margin-top: 5px; }
.cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.cart-item__price { font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-item__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: var(--border-width) solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.cart-item__remove:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.cart-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  font-size: 14px;
}
.cart-totals__value { font-size: 19px; font-variant-numeric: tabular-nums; }
.cart-note textarea { margin-top: 8px; }
.cart-tax-note { font-size: 12px; color: var(--color-text-muted); margin-top: 10px; }

/* ---- Quantity stepper: square, hairline-ruled ---- */
.quantity {
  display: inline-flex;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.quantity__button {
  width: 36px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--speed) var(--ease);
}
.quantity__button:hover { color: var(--color-accent); }
.quantity__input {
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  border-inline: var(--border);
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button { appearance: none; margin: 0; }


/* ---------------------------------------------------------------------
   5. TICKER
   A slow marquee of categories on the warm panel, ruled top and bottom.
   Purely decorative - it is aria-hidden and pauses for reduced motion.
   ------------------------------------------------------------------ */
.ticker {
  background-color: var(--color-bg-alt);
  border-block: var(--border);
  overflow: hidden;
  padding-block: 17px;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  animation: ticker-marquee 34s linear infinite;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-inline: 30px;
  font-family: var(--font-heading-stack);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
/* The accent again, at 4px: a separator dot. */
.ticker__item::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex: none;
}
@keyframes ticker-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}


/* ---------------------------------------------------------------------
   6. FILTER BUTTONS
   Square pill-less buttons: a hairline box that fills with ink when
   selected. The count sits beside the word in the muted grey.
   ------------------------------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.filter-button {
  padding: 11px 20px;
  border: var(--border);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body-stack);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}
.filter-button:hover { color: var(--color-text); border-color: var(--color-text); }
.filter-button[aria-pressed='true'] {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.filter-button__count {
  margin-inline-start: 8px;
  font-size: 10px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.product-card.is-filtered-out { display: none; }

.filter-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------
   7. PRODUCT CARD
   Photo in a ruled 4:5 frame on the warm panel, tag in the corner, and
   the add button sliding up from the bottom on hover. Title and price
   sit in a plain two-column row underneath - no box, no shadow.
   ------------------------------------------------------------------ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* No gap: the photo, the title block and the button each carry their own
     margins, which keeps the measured overlay offset predictable. */
  gap: 0;
}
/* The photo is its own link, filling the ruled frame. */
.product-card__shot { display: block; position: absolute; inset: 0; }

.product-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border: var(--border);
  border-radius: var(--radius);
  aspect-ratio: var(--ratio, 4 / 5);
  transition: border-color var(--speed) var(--ease);
}
.product-card:hover .product-card__media { border-color: var(--color-text); }
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--card-fit, cover);
  transition: transform var(--speed-slow) var(--ease), opacity var(--speed) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
/* Second photo cross-fades in on hover, if the product has one */
.product-card__media--hover img + img { opacity: 0; }
.product-card__media--hover:hover img + img { opacity: 1; }
/* "Use the photo's own shape" mode */
.product-card__media--adapt img { position: static; height: auto; }

.product-card__badges {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
/* Square hairline tag on paper. The one place a tag is allowed to use
   the accent is the Digital outline. */
.badge {
  display: inline-block;
  padding: 5px 10px;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  line-height: 1.3;
}
.badge--accent { border-color: var(--color-accent); color: var(--color-accent); }
.badge--solid {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* Title + price row */
.product-card__info {
  display: flex;
  flex-direction: column;
  padding-top: 18px;
}
.product-card__meta { display: flex; justify-content: space-between; gap: 16px; }
.product-card__title {
  font-family: var(--font-body-stack);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}
.product-card:hover .product-card__title { color: var(--color-accent); }
.product-card__cat,
.product-card__type {
  margin-top: 6px;
  font-size: var(--label-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.product-card__price {
  font-family: var(--font-heading-stack);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.product-card__price s { color: var(--color-text-muted); margin-inline-end: 8px; font-size: 14px; }
.product-card__desc {
  font-size: 14.5px;
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-top: 10px;
}

/* ---------------------------------------------------------------------
   ADD TO CART
   The button is a sibling of the photo frame, never inside it. That
   matters: the frame has overflow:hidden, so a button parked inside it
   would be clipped on phones (where the hover rule does not apply).

   Default (phones and touch screens): the button sits under the photo,
   full width, always visible.

   Devices with a mouse (min-width 600px): the button is lifted out and
   floated over the bottom of the photo, sliding up on hover.
   --card-info-height is measured by assets/theme.js and is the height of
   the title/price block. Subtracting it from 100% converts "the bottom of
   the card" into "the bottom of the photo", whatever the title wraps to.
   ------------------------------------------------------------------ */
.product-card__action {
  position: relative;
  z-index: 2;
  margin-top: 16px;
}
.product-card__action .button {
  width: 100%;
  border-radius: var(--radius);
}
.product-card__action--overlay .product-card__form { margin: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .product-card__action--overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    margin: 0;
    /* --card-offset is measured by assets/theme.js: it is the distance
       from the card's bottom edge down to the photo's bottom edge. Pulling
       the button up by exactly that much lands its bottom edge on the
       photo's bottom edge, however many lines the title wraps to. */
    bottom: calc(var(--card-offset, 0px) + 14px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
  }
  /* Reveal on hover, and whenever the button holds keyboard focus. */
  .product-card:hover .product-card__action--overlay,
  .product-card__action--overlay:focus-within {
    opacity: 1;
    transform: none;
  }
}
/* Phones: stacked title/price. There is no hover on a touch screen, so
   the button is always visible and sits under the photo. */
@media (max-width: 599px) {
  .product-card__meta { flex-direction: column; gap: 4px; }
  .product-card__title { font-size: 17px; }
}


/* ---------------------------------------------------------------------
   8. CATEGORY CELLS + SERVICE ROWS
   ------------------------------------------------------------------ */
/* The three ways in. A 1px-ruled grid of cells; each inverts to ink on
   hover, which is the strongest quiet move in the design. */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 330px;
  padding: clamp(26px, 3vw, 46px);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.category-card:hover {
  background-color: var(--color-ink);
  color: var(--color-ink-text);
}
.category-card__num {
  font-family: var(--font-heading-stack);
  font-size: 12px;
  letter-spacing: var(--label-spacing-wide);
  color: var(--color-text-muted);
  transition: color var(--speed) var(--ease);
}
.category-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--speed-slow) var(--ease);
}
.category-card:hover .category-card__media img { transform: scale(1.04); }
.category-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08) 65%);
}
.category-card__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.category-card--has-image .category-card__content { color: #fff; }
.category-card--has-image .category-card__title,
.category-card--has-image .category-card__text,
.category-card--has-image .text-label,
.category-card--has-image .category-card__cta,
.category-card--has-image .category-card__num { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.category-card--has-image .category-card__text { color: rgba(255, 255, 255, 0.9); }
.category-card--has-image .text-label,
.category-card--has-image .category-card__num { color: rgba(255, 255, 255, 0.88); }

.category-card__title { font-size: clamp(22px, 2vw, 27px); }
.category-card__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-soft);
  max-width: 36ch;
  transition: color var(--speed) var(--ease);
}
.category-card__list {
  margin-top: auto;
  padding-top: 22px;
  border-top: var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color var(--speed) var(--ease);
}
.category-card__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color var(--speed) var(--ease);
}
/* A 14px hairline dash before each list item */
.category-card__list li::before {
  content: '';
  width: 14px;
  height: var(--border-width);
  background-color: var(--color-line-strong);
  flex: none;
  transition: background-color var(--speed) var(--ease);
}
.category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}
.category-card__cta .icon { transition: transform var(--speed) var(--ease); }
.category-card:hover .category-card__cta .icon { transform: translateX(5px); }

/* On hover the whole cell goes dark and the small details warm up. */
.category-card:hover .category-card__text,
.category-card:hover .category-card__list li { color: var(--ink-text-soft); }
.category-card:hover .category-card__num,
.category-card:hover .category-card__list li::before { color: var(--ink-text-faint); }
.category-card:hover .category-card__list { border-color: var(--line-on-ink); }
.category-card:hover .category-card__list li::before { background-color: var(--color-accent); }

/* ---- Service rows ----
   Number, name, description, and a circular arrow that fills and
   rotates on hover. Dark panel. */
.service-list { border-top: var(--border-ink); }
.service-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-block: 30px;
  padding-inline: 0;
  border-bottom: var(--border-ink);
  transition: background-color var(--speed) var(--ease), padding var(--speed) var(--ease);
}
.service-item:hover { background-color: rgba(255, 255, 255, 0.045); padding-inline: 22px; }
@media (min-width: 750px) {
  .service-item {
    grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 28px;
    padding-block: 34px;
  }
  .service-item__number { align-self: center; }
}
.service-item__number {
  font-family: var(--font-heading-stack);
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.service-item__title { font-size: clamp(21px, 2.4vw, 31px); }
.service-item__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-text-soft);
  max-width: 62ch;
}
/* The circular arrow link */
.service-item__link,
.go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: var(--border-width) solid var(--line-on-ink);
  border-radius: 50%;
  color: var(--color-ink-text);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.service-item:hover .service-item__link,
.service-item:hover .go,
.service-item__link:hover,
.go:hover {
  background-color: var(--color-ink-text);
  border-color: var(--color-ink-text);
  color: var(--color-ink);
  transform: rotate(-45deg);
}

@media (max-width: 749px) {
  .service-item__link,
  .go { justify-self: end; margin-top: 8px; }
}


/* ---------------------------------------------------------------------
   9. FOOTER
   On the dark panel, ruled, with columns of quiet links.
   ------------------------------------------------------------------ */
.footer {
  background-color: var(--color-ink);
  color: var(--color-ink-text);
  padding-block: 74px 34px;
  border-top: var(--border-ink);
  font-size: 14px;
}
.footer__top {
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  padding-bottom: 56px;
  border-bottom: var(--border-ink);
}
@media (min-width: 700px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 990px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer__brand { display: flex; flex-direction: column; gap: 20px; }
.footer__logo { width: var(--logo-width, 190px); max-width: 100%; }
.footer__brand p { color: var(--ink-text-soft); font-size: 14px; max-width: 34ch; }
.footer__heading {
  margin-bottom: 20px;
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.footer__links { display: flex; flex-direction: column; }
.footer__links a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}
.footer__links a:hover { color: var(--color-ink-text); padding-left: 7px; }
.footer__socials { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-width) solid var(--line-on-ink);
  border-radius: 50%;
  color: var(--color-ink-text);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.footer__social-link:hover {
  background-color: var(--color-ink-text);
  border-color: var(--color-ink-text);
  color: var(--color-ink);
}
.footer__social-link .icon { width: 17px; height: 17px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  color: var(--ink-text-faint);
}
.footer__bottom a { color: inherit; border-bottom: var(--border-width) solid transparent; }
.footer__bottom a:hover { color: var(--color-ink-text); border-bottom-color: var(--color-accent); }
.footer__links-inline { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__payment { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer__payment img,
.footer__payment svg { height: 22px; width: auto; opacity: 0.7; }

/* Newsletter, on the dark panel */
.newsletter { display: flex; gap: 12px; margin-top: 16px; max-width: 420px; flex-wrap: wrap; }
.newsletter .field {
  flex: 1;
  min-width: 200px;
  border-color: var(--line-on-ink);
  color: var(--color-ink-text);
}
.newsletter .field::placeholder { color: var(--ink-text-faint); }
.newsletter .field:focus { border-color: var(--color-ink-text); }
.footer .form-status { color: var(--color-ink-text); }


/* ---------------------------------------------------------------------
   10. MISC
   ------------------------------------------------------------------ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background-color: rgba(11, 11, 11, 0.5);
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}
.overlay.is-visible { opacity: 1; }

.toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline: 0;
  z-index: 120;
  width: max-content;
  max-width: calc(100vw - 40px);
  margin-inline: auto;
  padding: 14px 24px;
  background-color: var(--color-ink);
  color: var(--color-ink-text);
  border-radius: var(--radius);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs__sep { opacity: 0.5; }

/* Pagination - square ruled tiles */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
  padding-top: 30px;
  border-top: var(--border);
}
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.pagination__item:hover { border-color: var(--color-text); color: var(--color-text); }
.pagination__item[aria-current='page'] {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* ---- Product page ---- */
.product {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
  grid-template-columns: 1fr;
}
@media (min-width: 990px) {
  .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
}
.product__gallery { display: flex; flex-direction: column; gap: 14px; }
.product__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.product__thumb {
  width: 78px;
  padding: 0;
  border: var(--border);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  transition: border-color var(--speed) var(--ease);
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb[aria-current='true'] { border-color: var(--color-text); }
.product__price { font-size: 24px; font-variant-numeric: tabular-nums; font-family: var(--font-heading-stack); }
.product__price s { color: var(--color-text-muted); margin-inline-end: 10px; font-size: 16px; }
.product__buy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.product__buy .button { flex: 1; min-width: 200px; }
.product__meta { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--color-text-muted); }
.product__accordion summary {
  padding-block: 18px;
  border-top: var(--border);
  cursor: pointer;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing-wide);
  text-transform: uppercase;
  list-style: none;
  transition: color var(--speed) var(--ease);
}
.product__accordion summary:hover { color: var(--color-accent); }
.product__accordion summary::-webkit-details-marker { display: none; }
.product__accordion > div { padding-bottom: 20px; font-size: 14.5px; color: var(--color-text-soft); line-height: 1.75; }

/* ---- Collection / search ---- */
.collection-hero { padding-block: clamp(30px, 5vw, 60px); text-align: center; }
.results-count { font-size: var(--label-size); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--color-text-muted); }
.empty-state { padding-block: 90px; text-align: center; }

/* ---- Rich text ---- */
.rte > * + * { margin-top: 1.1em; }
.rte h2, .rte h3 { margin-top: 1.6em; }
.rte ul, .rte ol { margin-top: 1em; padding-inline-start: 1.3em; }
.rte ul li { list-style: disc; }
.rte ol li { list-style: decimal; }
.rte li + li { margin-top: 0.5em; }
.rte img { border: var(--border); border-radius: var(--radius); }
.rte blockquote {
  margin: 1.6em 0;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--color-accent);
  font-size: 17px;
}
.rte a { border-bottom: var(--border-width) solid var(--color-border); }
.rte a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }
.rte table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rte th, .rte td { padding: 14px; border-bottom: var(--border); text-align: start; }