:root {
  --bg: #F7F5F2;
  --bg-raised: #FBFAF8;
  --h1: #36312D;
  --h2: #403A35;
  --text: #4A443E;
  --text-secondary: #7A7268;
  --border: #D8D1C6;
  --hover: #8B7F72;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  --nav-h: 112px;
  --ease: 0.25s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1 {
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 500;
  color: var(--h1);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  color: var(--h2);
  line-height: 1.3;
  letter-spacing: 0;
}

p { color: var(--text); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* for elements that are also centered via top:50% + translateY(-50%) —
   the animation must preserve that offset or the element ends up
   pushed down by half its own height once the animation finishes. */
@keyframes fade-up-centered {
  from { opacity: 0; transform: translateY(-50%) translateY(14px); }
  to { opacity: 1; transform: translateY(-50%) translateY(0); }
}

/* ---------- Skip link / noscript notices ---------- */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--sp-2);
  z-index: 300;
  background-color: var(--h1);
  color: var(--bg);
  padding: 12px var(--sp-3);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: top var(--ease);
}

.skip-link:focus {
  top: var(--sp-2);
}

.notice {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

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

/* ---------- Navbar ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background-color: var(--bg);
  transition: transform 0.3s ease;
}

.nav-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo {
  height: 88px;
  width: auto;
  border: none;
}

.nav-links {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.nav-link {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--h1);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  padding: 0 0 var(--sp-2) 0;
  transition: color var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--hover);
}

.nav-link.current {
  color: var(--hover);
}

.nav-item {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-trigger .chevron {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}

.dropdown.open .chevron,
.dropdown:hover .chevron {
  transform: rotate(-135deg) translateY(1px);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 190px;
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: 0 16px 32px rgba(54, 49, 45, 0.08);
  padding: var(--sp-2) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.dropdown:hover .dropdown-panel,
.dropdown.open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-link {
  display: block;
  padding: 11px var(--sp-3);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease);
}

.dropdown-link:hover {
  color: var(--hover);
  background-color: rgba(139, 127, 114, 0.08);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--h1);
  transition: transform var(--ease), opacity var(--ease);
}

.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (index.html) ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.hero-ring {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(260px, 46vw, 780px);
  height: auto;
  border: none;
  opacity: 0;
  animation: fade-up-centered 0.9s ease forwards;
  animation-delay: 0.15s;
}

.hero-tagline {
  position: absolute;
  top: 50%;
  left: clamp(28px, 6vw, 120px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: clamp(12px, 1.35vw, 19px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--text);
  opacity: 0;
  animation: fade-up-centered 1s ease forwards;
  animation-delay: 0.35s;
}

/* ---------- Page content (about / privacy / terms) ---------- */

.about-section {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-6);
}

.about-text {
  max-width: 780px;
  text-align: center;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.95;
  color: var(--text);
  opacity: 0;
  animation: fade-up 1.5s ease forwards;
  animation-delay: 0.2s;
}

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) var(--sp-15);
}

.page-content .page-intro {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-8);
}

.page-content h1 {
  margin-bottom: var(--sp-3);
}

.page-content h2 {
  font-size: clamp(19px, 2.2vw, 24px);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.page-content p {
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: var(--sp-3);
}

.page-content ul {
  margin: 0 0 var(--sp-3) var(--sp-4);
}

.page-content li {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

/* ---------- Nav-right / Currency toggle (shop pages) ---------- */

.nav-right {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
}

.currency-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
}

.currency-btn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  transition: color var(--ease);
}

.currency-btn.active {
  color: var(--h1);
}

.currency-btn:hover,
.currency-btn:focus-visible {
  color: var(--hover);
}

.currency-sep {
  color: var(--border);
  font-size: 11px;
}

/* ---------- Shop pages (jewelry / objects / wallpieces) ---------- */

.shop-hero {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-3);
}

.shop-title {
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--h1);
  opacity: 0;
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.1s;
}

.products-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-15);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-5);
}

.product-card {
  display: block;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 0.8s ease forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.08s);
}

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.product-image-primary,
.product-image-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg-raised);
}

.product-image-secondary {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-card:hover .product-image-secondary {
  opacity: 1;
}

.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  padding: var(--sp-10) var(--sp-3);
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--h1);
  margin-bottom: 6px;
}

.product-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.product-price {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ---------- Product Detail Page ---------- */

.pd-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-15);
  opacity: 0;
  animation: fade-up 1.2s ease forwards;
}

.pd-back {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: var(--sp-6);
  transition: color var(--ease);
}

.pd-back:hover,
.pd-back:focus-visible {
  color: var(--hover);
}

.pd-layout {
  display: grid;
  grid-template-columns: minmax(300px, 440px) 1fr;
  gap: var(--sp-10);
  align-items: start;
}

.pd-info {
  order: 1;
  padding-top: var(--sp-6);
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
}

.pd-gallery {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.pd-name {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-3);
}

.pd-price {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}

.pd-vat-note {
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
}

.pd-desc p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

.pd-purchase {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.btn-buy {
  flex: 1 1 auto;
  min-width: 180px;
  height: 44px;
  padding: 0 var(--sp-5);
  background-color: var(--h1);
  color: var(--bg);
  border: 1px solid var(--h1);
  font-family: inherit;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

.btn-buy:hover,
.btn-buy:focus-visible {
  background-color: var(--bg);
  color: var(--h1);
  border-color: var(--h1);
}

.pd-main-image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.pd-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-main-image-wrap.zoomed .pd-main-image {
  transform: scale(2.1);
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pd-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pd-thumb {
  width: 76px;
  height: 90px;
  padding: 0;
  border: 1px solid var(--border);
  background-color: var(--bg-raised);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--ease), border-color var(--ease);
}

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

.pd-thumb:hover,
.pd-thumb:focus-visible {
  opacity: 0.85;
}

.pd-thumb.active {
  opacity: 1;
  border-color: var(--h1);
}

/* ---------- Archive Page ---------- */

.archive-section {
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-15);
  opacity: 0;
  animation: fade-up 1.4s ease forwards;
}

.archive-heading {
  margin-bottom: var(--sp-8);
}

.archive-title {
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--h1);
}

/* minmax(0, 1fr), not bare 1fr: a bare 1fr track's automatic minimum size is
   its content's min-content size, and the source photos here are full-size
   (960-1600px) in-flow <img> elements (no aspect-ratio box breaking the
   chain like the shop grids have), so a track would size itself to fit the
   image's natural width instead of shrinking to its share of the row —
   ballooning the whole grid, and with it the page's layout viewport, past
   the actual screen width and causing horizontal scroll on mobile. */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--sp-4);
  grid-auto-rows: 1px;
  grid-auto-flow: dense;
}

.archive-item {
  margin-bottom: var(--sp-6);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  cursor: pointer;
}

.archive-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.archive-item.size-s { grid-column: span 2; }
.archive-item.size-m { grid-column: span 3; }
.archive-item.size-l { grid-column: span 4; }

.archive-image-wrap {
  border: 1px solid rgba(36, 26, 15, 0.16);
  overflow: hidden;
  background-color: var(--bg-raised);
  transition: opacity var(--ease);
}

.archive-item:hover .archive-image-wrap {
  opacity: 0.92;
}

.archive-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.archive-image.loaded {
  opacity: 1;
}

.archive-item:hover .archive-image {
  transform: scale(1.015);
}

.archive-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding-top: 9px;
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.01em;
}

.archive-oneofone {
  color: var(--text-secondary);
  white-space: nowrap;
}

.archive-meta {
  color: var(--text);
  text-align: right;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background-color: rgba(247, 245, 242, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.archive-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.archive-lightbox-inner {
  max-width: 900px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  transform: scale(0.98);
  transition: transform 0.35s ease;
}

.archive-lightbox.open .archive-lightbox-inner {
  transform: scale(1);
}

.archive-lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  border: 1px solid rgba(36, 26, 15, 0.16);
}

.archive-lightbox-caption {
  width: 100%;
  text-align: right;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text);
}

.archive-lightbox-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--h1);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: color var(--ease);
}

.archive-lightbox-close:hover,
.archive-lightbox-close:focus-visible {
  color: var(--hover);
}

/* ---------- Footer ---------- */

.footer {
  background-color: var(--bg);
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-6);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 180px;
}

.footer-text,
.footer-link {
  display: block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  text-decoration: none;
}

.footer-link {
  transition: color var(--ease);
  cursor: pointer;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--hover);
}

.footer-copyright {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 0 var(--sp-3) var(--sp-6);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .archive-item.size-s { grid-column: span 2; }
  .archive-item.size-m { grid-column: span 2; }
  .archive-item.size-l { grid-column: span 4; }

  /* Tablet: bigger than the desktop clamp's upper bound would give at this
     width, but nowhere near the mobile size below — a middle step between
     the two rather than jumping straight from desktop to the enlarged
     mobile ring. */
  .hero-ring {
    width: 58vw;
    right: -6vw;
  }
}

@media (max-width: 768px) {
  .navbar-hidden { transform: translateY(-100%); }

  .nav-inner { padding: 0 var(--sp-3); justify-content: flex-start; gap: var(--sp-2); }

  .hamburger { display: flex; margin-left: auto; }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--bg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }

  .nav-links.open {
    max-height: 420px;
    opacity: 1;
  }

  .nav-item { width: 100%; }

  .nav-link {
    width: 100%;
    padding: var(--sp-3);
    justify-content: space-between;
  }

  .dropdown-trigger { width: 100%; justify-content: space-between; }

  .dropdown-panel {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: var(--bg);
    max-height: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  /* Re-declared here (not just adjusted above) because the desktop rule
     ".dropdown.open .dropdown-panel" (two classes) outbeats the mobile-only
     single-class ".dropdown-panel" rule on specificity alone, regardless of
     media-query order — its transform: translate(-50%, 0) was leaking onto
     the static/full-width mobile panel and shoving it out of view. */
  .dropdown.open .dropdown-panel {
    max-height: 200px;
    padding: var(--sp-1) 0;
    transform: none;
  }

  .dropdown-link {
    padding: 14px var(--sp-4);
    color: var(--text);
  }

  .dropdown-link:hover,
  .dropdown-link:focus-visible {
    color: var(--h1);
    background-color: rgba(74, 68, 62, 0.08);
  }

  .hero {
    padding: 0 var(--sp-4);
  }

  /* Ring stays absolutely positioned + right-glued (inherited from the
     desktop rule) but is sized well past the viewport edge and clipped by
     .hero's overflow:hidden, so it's cut off rather than fully visible.
     Widths are vw-based (not clamp) so the visible slice scales predictably.
     The tagline is moved to its own band near the top of the hero (see
     below) instead of sharing the vertical center with the ring, so the
     two no longer have to compete for horizontal space here. */
  .hero-ring {
    width: 145vw;
    right: -38vw;
  }

  /* Moved up off the vertical center (where the enlarged ring now sits)
     so the two never overlap regardless of screen width. top/transform
     replace the centered desktop rule; fade-up-centered still animates
     purely via opacity + a relative translateY, so it still applies
     cleanly at this new anchor. */
  .hero-tagline {
    top: 16%;
    white-space: normal;
    text-align: left;
    max-width: 72vw;
  }

  .nav-right {
    align-items: center;
    gap: var(--sp-3);
  }

  .currency-btn {
    padding: 10px 6px;
  }

  .currency-toggle { gap: 2px; }

  .footer-text,
  .footer-link {
    padding: 10px 0;
  }

  .shop-hero { padding: var(--sp-8) var(--sp-3) var(--sp-2); }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-4);
    padding: var(--sp-4) var(--sp-3) var(--sp-10);
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-5);
    padding: var(--sp-8) var(--sp-3) var(--sp-5);
  }

  .footer-col { align-items: center; gap: 0; }

  .pd-section { padding: var(--sp-4) var(--sp-3) var(--sp-10); }

  .pd-layout { grid-template-columns: 1fr; gap: var(--sp-5); }

  .pd-info { position: static; padding-top: var(--sp-4); order: 2; }

  .pd-gallery { order: 1; }

  .pd-main-image-wrap { cursor: default; }

  .pd-main-image-wrap.zoomed .pd-main-image { transform: none; }

  .pd-purchase { flex-direction: column; align-items: stretch; }

  .btn-buy { min-width: 0; }

  .archive-section { padding: var(--sp-6) var(--sp-3) var(--sp-10); }

  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-3); }

  .archive-item.size-s,
  .archive-item.size-m,
  .archive-item.size-l {
    grid-column: span 1;
  }

  .archive-item:nth-child(5n) {
    grid-column: span 2;
  }

  .archive-lightbox-close { top: var(--sp-3); right: var(--sp-3); }
}

@media (max-width: 560px) {
  .products-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

@media (max-width: 420px) {
  .logo { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ring,
  .hero-tagline {
    animation: none;
    opacity: 1;
  }
  .about-text,
  .shop-title,
  .product-card,
  .pd-section,
  .archive-section,
  .archive-item,
  .archive-image {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}