/* ================================================
   POLINO — Section Styles
   Covers: What We Create, Workshops, Custom Orders,
   Catalog Preview, About, Reviews.
   Utilities (.container/.label/.divider/.btn/.reveal/
   .img-placeholder) live in main.css — not redefined here.
   ================================================ */

/* ================================================
   WHAT WE CREATE
   ================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.craft-card {
  --card-accent: var(--walnut);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  padding-left: calc(var(--space-8) + 10px);  /* место под мозаичную полосу */
  box-shadow: var(--shadow-sm);
  transition:
    transform    var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.craft-card:nth-child(2) { --card-accent: var(--terra); }
.craft-card:nth-child(3) { --card-accent: var(--olive); }

/* Мозаичная полоса: 4 плитки с убывающей прозрачностью */
.craft-card__tiles {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  display: flex;
  flex-direction: column;
}
.craft-card__tiles span {
  flex: 1;
  display: block;
  background: var(--card-accent);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-spring);
}
.craft-card__tiles span:nth-child(1) { opacity: 1;    }
.craft-card__tiles span:nth-child(2) { opacity: 0.75; }
.craft-card__tiles span:nth-child(3) { opacity: 0.50; }
.craft-card__tiles span:nth-child(4) { opacity: 0.30; }

/* На hover плитки «перекладываются» со сдвигом — жест мозаичника */
.craft-card:hover .craft-card__tiles span { transform: scaleX(2.2); }
.craft-card:hover .craft-card__tiles span:nth-child(2) { transition-delay: 60ms;  }
.craft-card:hover .craft-card__tiles span:nth-child(3) { transition-delay: 120ms; }
.craft-card:hover .craft-card__tiles span:nth-child(4) { transition-delay: 180ms; }

.craft-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--card-accent) 22%, transparent);
}

.craft-card__icon {
  color: var(--card-accent);
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--card-accent) 9%, transparent);
  transition:
    transform  var(--duration-base) var(--ease-spring),
    background var(--duration-base) var(--ease-out);
}
.craft-card__icon svg { width: 100%; height: 100%; }
.craft-card:hover .craft-card__icon {
  transform: scale(1.08) rotate(5deg);
  background: color-mix(in srgb, var(--card-accent) 16%, transparent);
}

.craft-card__title { color: var(--olive-dark); }

.craft-card__text {
  color: var(--text-light);
  line-height: var(--leading-normal);
}

.craft-card__link {
  position: relative;
  margin-top: auto;
  color: var(--card-accent);
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}
.craft-card__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--card-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.craft-card__link:hover::after { transform: scaleX(1); }
.craft-card__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--card-accent) 36%, transparent);
  outline-offset: 4px;
}

/* Fallback для браузеров без color-mix() (Safari < 16.2, старый Firefox) */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .craft-card__icon                   { background: rgba(38, 48, 31, 0.06); }
  .craft-card:hover .craft-card__icon { background: rgba(38, 48, 31, 0.10); }
  .craft-card:hover {
    border-color: rgba(38, 48, 31, 0.30);
    box-shadow: var(--shadow-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft-card,
  .craft-card__icon,
  .craft-card__tiles span { transition: none; }
  .craft-card:hover { transform: none; }
  .craft-card:hover .craft-card__tiles span { transform: scaleX(1); }
  .craft-card:hover .craft-card__icon { transform: none; }
}

/* ================================================
   SIDE-BY-SIDE TEXT COLUMNS
   Shared rhythm for the three blocks that sit beside an image. Each opened with
   its label, heading and rule stacked flush — 1px, 0px, 0px — because the global
   reset zeroes every margin and nothing here ever put a rhythm back. Only their
   lower halves breathed, and only because the step lists, workshop types and the
   quote carry margins of their own. The result read as one dense slab.
   ================================================ */
.about-text,
.custom-text,
.workshops-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
/* The rule belongs to the heading above it; the prose below wants air. */
.about-text .divider,
.custom-text .divider,
.workshops-text .divider { margin-bottom: var(--space-3); }
/* A shorter measure than the 625px column: easier to read, and the air it
   leaves on the right is what stops the section feeling packed. */
.about-text p,
.custom-text p,
.workshops-text p { max-width: 60ch; }
.about-text p + p { margin-top: var(--space-2); }
/* The quote itself sets in 24px display type, so a measure applied to the <p>
   resolved much wider than the same number of ch does in 16px prose. Constrain
   the blockquote instead — it inherits body size, so 60ch lines its right edge
   up with the paragraphs exactly. */
.about-text .about-quote { max-width: 60ch; }

/* ================================================
   WORKSHOPS
   ================================================ */
.workshops {
  background: var(--olive-dark);
  color: var(--white-mosaic);
}
.workshops h2 { color: var(--white-mosaic); }
.workshops p  { color: rgba(247, 241, 230, 0.78); }

.workshops-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.workshops-text .divider { background: var(--terra); }

.workshop-types {
  display: flex;
  flex-direction: column;
  margin-block: var(--space-8) var(--space-6);
}
.ws-type {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ws-type__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--white-mosaic);
}
.ws-type__detail {
  font-size: var(--text-sm);
  color: rgba(247, 241, 230, 0.6);
  text-align: right;
}

.ws-includes {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-8);
}
.ws-includes li {
  padding-block: var(--space-2);
  color: var(--amber);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.btn-cta {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  color: var(--black-tile);
  background: var(--cta-brick);
  border: 1.5px solid rgba(247, 241, 230, 0.34);
  box-shadow:
    0 12px 34px rgba(217, 112, 66, 0.24),
    0 4px 12px rgba(0, 0, 0, 0.18);
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: calc(var(--radius-sm) + 4px);
  background: rgba(217, 112, 66, 0.24);
  filter: blur(14px);
  opacity: 0.52;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.btn-cta:hover {
  color: var(--black-tile);
  background: var(--cta-brick-hot);
  border-color: rgba(247, 241, 230, 0.72);
  box-shadow:
    0 16px 42px rgba(217, 112, 66, 0.34),
    0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.btn-cta:hover::before { opacity: 0.8; }
.btn-cta:active { transform: translateY(0) scale(0.98); }
.btn-cta:focus-visible {
  outline: 3px solid var(--white-mosaic);
  outline-offset: 4px;
}

/* The pale halo border is tuned for the dark workshop/custom sections. On the
   cream product page and inside the cart drawer it reads as a smudge, so those
   two places take an edge of the button's own colour instead. */
.product-cta.btn-cta,
.cart-checkout.btn-cta {
  border-color: rgba(158, 67, 38, 0.42);
}
.product-cta.btn-cta:hover,
.cart-checkout.btn-cta:hover {
  border-color: rgba(158, 67, 38, 0.62);
}
.product-cta.btn-cta:focus-visible,
.cart-checkout.btn-cta:focus-visible {
  outline: 3px solid var(--olive-dark);
  outline-offset: 3px;
}

/* Visual side */
.workshops-visual { position: relative; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-dark);
}
.mini-tile {
  aspect-ratio: 1;
  border-radius: 2px;
  animation: mini-float 4s var(--ease-in-out) infinite;
  will-change: transform;
}
@keyframes mini-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .mini-tile { animation: none !important; transform: none; }
  .btn-cta:hover,
  .btn-cta:active { transform: none; }
  .btn-cta::before { transition: none; }
}

.ws-quote {
  padding: var(--space-6);
  border-left: 3px solid var(--terra);
  margin-top: var(--space-8);
}
.ws-quote .quote { color: var(--amber); }

/* ================================================
   CUSTOM ORDERS
   ================================================ */
.custom-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.custom-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.custom-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
.custom-img-frame:hover .custom-img { transform: scale(1.04); }

/* placeholder sets the frame size; the image overlays it and only
   reveals the placeholder if the photo fails to load */
.custom-img-placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  display: block;
}

.custom-badge {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: var(--terra);
  color: var(--white-mosaic);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-block: var(--space-8);
}
.process-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.step-num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--terra);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
  min-width: 2rem;
}
.process-step strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--olive-dark);
  margin-bottom: var(--space-1);
}
.process-step p {
  color: var(--text-light);
  line-height: var(--leading-normal);
}

/* ================================================
   CATALOG PREVIEW
   ================================================ */
.catalog-preview h2 {
  color: var(--black-tile);
}

.catalog-preview__heading-link {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.catalog-preview__heading-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9em;
  height: 0.9em;
  font-family: var(--font-body);
  font-size: 0.58em;
  font-weight: var(--weight-semi);
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--duration-base) var(--ease-out);
}

.catalog-preview__heading-link:hover,
.catalog-preview__heading-link:focus-visible {
  color: var(--terra);
}

.catalog-preview__heading-link:hover .catalog-preview__heading-arrow,
.catalog-preview__heading-link:focus-visible .catalog-preview__heading-arrow {
  transform: translateX(5px);
}

.catalog-preview__heading-link:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 6px;
  border-radius: 2px;
}

.catalog-preview { position: relative; isolation: isolate; }
.catalog-preview__gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 35% 66%, #EBC5A5, transparent 65%),
                    radial-gradient(circle at 70% 25%, #E8D7B9, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.catalog-preview__cta {
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-8);
  color: var(--black-tile);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-align: center;
  white-space: nowrap;
}

.catalog-preview__cta:focus-visible { outline-color: var(--black-tile); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.product-card {
  /* Adapted from educalvolpz/Product Card on 21st.dev (demo 26136). */
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(122, 75, 53, 0.09),
              0 0 8px 2px rgba(251, 246, 236, 0.55);
  border: 1px solid rgba(122, 75, 53, 0.12);
  transition: transform var(--duration-fast) var(--ease-out);
}
/* A phone has no hover, so the image zoom below never reaches it. This is the
   card's only answer to a finger — small, but it makes the thing feel alive. */
.product-card:active { transform: scale(0.985); }

.product-card__img-wrap {
  position: relative;
  margin: 4px 4px 0;
  border-radius: 11px;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__img { transform: scale(1.05); }
}
.product-card__img-wrap .img-placeholder { width: 100%; height: 100%; }

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.product-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--olive-dark);
}
.product-card__price {
  color: var(--black-tile);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-block: var(--space-1);
}
.product-card__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--olive-dark);
  background: var(--olive-deep);
  color: var(--white-mosaic);
  box-shadow: 0 2px 5px rgba(43, 33, 24, 0.14);
  text-align: center;
  transition: background 150ms ease, transform 150ms ease;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
}
.product-card__link:hover {
  background: var(--olive-dark);
  color: var(--white-mosaic);
}
.product-card__link:active { transform: scale(0.97); }
.product-card__link:focus-visible { outline: 2px solid var(--olive-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__img,
  .product-card:active,
  .product-card__link:active { transform: none; }
}

/* ================================================
   ABOUT
   ================================================ */
.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}

.about-img-wrap {
  position: relative;
  perspective: 1000px;
}
.about-img-frame {
  position: relative;
  transform: rotate(-2deg);
  transform-style: preserve-3d;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transition: transform var(--duration-slow) var(--ease-out);
}
.about-img-frame:hover { transform: rotate(0deg); }
.about-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* placeholder sets the frame size; image overlays it (see custom-img note).
   2:3 rather than 3:4 because the studio photograph is a 9:16 portrait: the
   taller frame crops about 8% of it instead of 25%, which keeps the staircase
   and the top of the bookshelf in shot. */
.about-img-placeholder {
  aspect-ratio: 2 / 3;
  width: 100%;
  display: block;
}

/* The generic .img-placeholder fill is a dark olive-to-deep-teal gradient, meant
   to stand in for a photo that never arrives. Behind these two it is uncovered
   for the length of the wipe, and a near-black blue slab flashing on a cream
   page read as a fault rather than an effect. Paper instead: the photograph now
   rises out of the page, which is what the wipe was for. */
.about-img-placeholder,
.custom-img-placeholder {
  background: var(--bg);
  color: transparent;
}

.about-tile-accent {
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  background: var(--terra);
  border-radius: 3px;
  transform: rotate(22deg);
  box-shadow: var(--shadow-md);
  animation: float-tile 5s var(--ease-in-out) infinite;
}

.about-quote {
  border-left: 3px solid var(--terra);
  padding-left: var(--space-5);
  margin-block: var(--space-6);
}
.about-quote .quote {
  color: var(--olive-deep);
  font-style: italic;
}

.about-socials { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); }
.about-social-icon { display:block; width:24px; height:24px; flex:0 0 24px; }
.about-instagram {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--olive);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  transition: color var(--duration-base) var(--ease-out);
}
.about-instagram:hover { color: var(--terra); }
.about-instagram:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:var(--radius-sm); }

/* ================================================
   REVIEWS
   ================================================ */
/* Deep olive — one step lighter than the contact block that follows, so the tail
   of the page reads as a descent into dark rather than two identical slabs.
   Before this, about / reviews / contact were three light screens in a row and
   the page went flat exactly where it should be closing. The cards stay paper
   pale and now read as objects sitting on the dark. */
.reviews { background: var(--olive-deep); }
.reviews .section-header h2      { color: var(--white-mosaic); }
.reviews .section-header .label  { color: var(--gold); }
.reviews .section-header .divider { background: var(--gold); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.review-card {
  background: var(--white-mosaic);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--terra);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.review-card:hover { box-shadow: var(--shadow-md); }

.review-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  margin-block: var(--space-4);
  color: var(--text);
  max-width: none;
}

.review-author {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.review-name {
  font-weight: var(--weight-semi);
  color: var(--olive-dark);
  font-size: var(--text-sm);
}
.review-loc {
  color: var(--text-light);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.reviews__cta {
  min-height: 52px;
  padding-inline: clamp(var(--space-6), 4vw, var(--space-10));
}

.reviews__cta:focus-visible {
  outline-color: var(--white-mosaic);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .cards-grid { grid-template-columns: 1fr; }

  .workshops-inner,
  .custom-inner,
  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* image above text on stacked layout */
  .custom-visual { order: -1; }
  .about-img-wrap { order: -1; max-width: 360px; }

  /* Two up, not one. Six full-width cards ran the homepage teaser to 3 066px of
     grid — three and a half phone screens of identical blocks, with no sense of
     progress. Two columns plus the trim below bring it under one. */
  .products-grid  { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .reviews-grid   { grid-template-columns: 1fr; }

  /* Four is the whole teaser on a phone; the CTA underneath carries the rest.
     Scoped to the homepage grid so /catalog.html keeps every product. */
  #catalog-preview-grid .product-card:nth-child(n+5) { display: none; }

  .product-card__body {
    padding: var(--space-4) var(--space-3) var(--space-3);
    gap: var(--space-1);
  }
  .product-card__title {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    /* Etsy titles run long; two lines keeps the two columns level. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card__price { font-size: var(--text-lg); }
  .product-card__link  { font-size: var(--text-xs); padding-inline: var(--space-2); }
}

@media (max-width: 560px) {
  .ws-type {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .ws-type__detail { text-align: left; }
}

/* ══ CONTACT ════════════════════════════════════ */
.contact { background: var(--olive-dark); position: relative; overflow: hidden; }
/* The old emblem sat symmetrically inside its circle, so bleeding it off the
   corner cost nothing. The studio's own mark carries its loop high and to the
   right — exactly the part a top-right bleed cut away — so it now sits whole.
   Its line is also a third thinner, which at 5% had all but vanished on the
   dark olive; 7% restores the same presence, still well below the text. */
.contact-watermark {
  position: absolute;
  top: -10px; right: -10px;
  width: 400px; height: 400px;
  color: var(--white-mosaic);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.contact .container { position: relative; z-index: 1; }
.contact .section-header .label,
.contact h2,
.contact p { color: var(--white-mosaic); }
.contact h2 { color: var(--white-mosaic); }
.contact p  { color: rgba(247,241,230,0.72); }

.contact-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items: start;
}

/* Form */
.contact-form { display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-8); }
.form-field    { position:relative; display:flex; flex-direction:column; gap:var(--space-2); }
.form-label    { font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-semi); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:rgba(247,241,230,0.6); transition:color var(--duration-base) var(--ease-out); }
.form-field:focus-within .form-label { color:var(--amber); }

.form-input {
  background:rgba(247,241,230,0.07); border:1px solid rgba(247,241,230,0.15); border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4); color:var(--white-mosaic); font-size:var(--text-base);
  font-family:var(--font-body);
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
  outline:none; width:100%;
}
.form-input::placeholder { color:rgba(247,241,230,0.3); }
.form-input:focus { border-color:var(--terra); background:rgba(247,241,230,0.10); }
.form-input:invalid:not(:placeholder-shown) { border-color:var(--coral); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select option { background:var(--olive-dark); color:var(--white-mosaic); }

.form-error { font-size:var(--text-xs); color:var(--coral); display:none; }
.form-field.has-error .form-error { display:block; }
.form-field.has-error .form-input  { border-color:var(--coral); animation:shake 0.4s var(--ease-out); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* Submit button */
.btn-submit {
  background:var(--terra); color:var(--white-mosaic); padding:var(--space-4) var(--space-8);
  font-size:var(--text-sm); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  font-weight:var(--weight-semi); border:none; border-radius:var(--radius-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  transition:background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  position:relative; overflow:hidden; will-change:transform;
}
.btn-submit:hover:not(:disabled) { background:var(--clay); }
.btn-submit:disabled              { opacity:0.6; cursor:not-allowed; }
.btn-submit:active                { transform:scale(0.97); }

.btn-submit__spinner {
  display:none; width:16px; height:16px;
  border:2px solid rgba(255,255,255,0.3); border-top-color:white;
  border-radius:50%; animation:spin 0.7s linear infinite;
}
.btn-submit.loading .btn-submit__text    { display:none; }
.btn-submit.loading .btn-submit__spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

.btn-submit.success { background:var(--olive-deep); }

.form-success, .form-failure {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4); border-radius:var(--radius-sm);
}
.form-success[hidden], .form-failure[hidden] { display:none; }
.form-success { background:rgba(104,112,74,0.2); border:1px solid rgba(104,112,74,0.4); color:var(--amber); }
.form-failure { background:rgba(214,90,66,0.15); border:1px solid rgba(214,90,66,0.3); color:var(--coral); }
.form-success p, .form-failure p { color:inherit; margin:0; }

/* Contact info + links */
.contact-links     { display:flex; flex-direction:column; gap:var(--space-5); margin-bottom:var(--space-8); }
.contact-link      { display:flex; align-items:center; gap:var(--space-4); color:rgba(247,241,230,0.8); transition:color var(--duration-base); text-decoration:none; }
.contact-link:hover{ color:var(--amber); }
.contact-link__icon{ display:block; width:24px; height:24px; flex:0 0 24px; color:var(--amber); }
.contact-link__label{ display:block; font-size:var(--text-xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:rgba(247,241,230,0.4); margin-bottom:2px; }
.contact-link__value{ font-family:var(--font-display); font-size:var(--text-lg); }

.contact-map { border-radius:var(--radius-md); overflow:hidden; }
.contact-map iframe { display:block; filter:grayscale(0.3) contrast(1.05); }

/* ══ FOOTER ═════════════════════════════════════ */
.site-footer    { background:var(--olive-dark); padding-block:var(--space-16) var(--space-8); border-top:1px solid rgba(104,112,74,0.2); }
.footer-inner   { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--space-12); padding-bottom:var(--space-12); border-bottom:1px solid rgba(104,112,74,0.15); }
.footer-brand .logo { display:inline-flex; align-items:center; gap:var(--space-3); }
.footer-brand .logo-name   { color:var(--white-mosaic); }
.footer-brand .logo-sub    { color:rgba(247,241,230,0.5); }
.footer-brand .logo-emblem { color:var(--white-mosaic); width:40px; height:40px; }
.footer-tagline { color:rgba(247,241,230,0.6); font-size:var(--text-sm); margin-top:var(--space-3); max-width:none; }
.footer-ukraine { color:var(--amber); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); margin-top:var(--space-2); }
.footer-nav     { display:flex; flex-direction:column; gap:var(--space-3); }
.footer-nav__title{ font-size:var(--text-xs); letter-spacing:var(--tracking-widest); text-transform:uppercase; color:rgba(247,241,230,0.35); margin-bottom:var(--space-1); }
.footer-nav a   { color:rgba(247,241,230,0.65); font-size:var(--text-sm); text-decoration:none; transition:color var(--duration-base); }
.footer-nav a:hover { color:var(--terra); }
.footer-social  { display:flex; flex-direction:column; gap:var(--space-4); }
.footer-social-link { display:flex; align-items:center; gap:var(--space-3); color:rgba(247,241,230,0.65); font-size:var(--text-sm); text-decoration:none; transition:color var(--duration-base); }
.footer-social-link:hover { color:var(--amber); }
/* These were emoji in a span, drawn by whatever the OS ships — the one thing in
   the footer that did not belong to the site. Same stroked marks as the About
   block now, inheriting currentColor so they warm to amber on hover with the
   label. Slightly smaller than the 24px pair upstairs: the footer sets in
   text-sm and full-size icons swamped it. */
.footer-social-link__icon { display:block; width:20px; height:20px; flex:0 0 20px; }
.footer-social-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:var(--radius-sm); }
.footer-bottom  { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-8); flex-wrap:wrap; gap:var(--space-4); }
.footer-bottom p, .footer-made { font-size:var(--text-xs); color:rgba(247,241,230,0.35); max-width:none; }

/* RESPONSIVE — Part 5 */
@media (max-width:1024px) { .contact-inner { grid-template-columns:1fr; } .footer-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:768px)  { .footer-inner { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; } .contact-inner { gap:var(--space-10); } }
/* At 400px the mark is wider than a phone, so it stops being a corner watermark
   and lies across the heading and the first field. Pulled back to a corner. */
@media (max-width:560px)  { .contact-watermark { top:-30px; right:-40px; width:220px; height:220px; } }

/* A message prefilled from a product page — a quiet accent so the visitor
   notices the field already carries the piece they were looking at. */
.form-textarea.is-prefilled {
  border-color: var(--terra);
  background: rgba(201, 106, 58, 0.04);
}