@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

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

body {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  background: #FAF9F6;
  color: #202972;
  min-height: 100vh;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FAF9F6;
  border-bottom: 1px solid rgba(32,41,114,0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}
.site-header.scrolled {
  background: rgba(250,249,246,0.97);
  box-shadow: 0 2px 20px rgba(32,41,114,0.07);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  flex-wrap: wrap;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.logo-img { height: 50px; width: auto; object-fit: contain; }
.header-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.brand-name {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 300;
  letter-spacing: 0.22em;
  font-size: 1.65rem;
  text-transform: uppercase;
  color: #202972;
  line-height: 1.1;
}

.nav-btn {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #202972;
  text-decoration: none;
  padding: 0;
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  white-space: nowrap;
}
.nav-btn::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: #C0392B;
  transition: width 0.3s ease;
}
.nav-btn:hover { color: #C0392B; }
.nav-btn:hover::after { width: 100%; }

.search-wrap { position: relative; width: 230px; }
.search-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(32,41,114,0.15);
  background: #FFFFFF;
  padding: 8px 12px;
  transition: border-color 0.25s ease;
}
.search-box:focus-within { border-color: #C0392B; }
.search-icon-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #202972; flex-shrink: 0;
  transition: color 0.25s ease;
}
.search-icon-btn:hover { color: #C0392B; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.82rem;
  color: #202972; min-width: 0;
}
.search-input::placeholder { color: #9AA1B4; }
.search-clear-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #9AA1B4; flex-shrink: 0;
  transition: color 0.25s ease;
}
.search-clear-btn:hover { color: #C0392B; }
.search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #FFFFFF; border: 1px solid rgba(32,41,114,0.1);
  box-shadow: 0 16px 40px rgba(32,41,114,0.14);
  max-height: 340px; overflow-y: auto; z-index: 200;
  animation: viewFade 0.2s ease-in-out both;
}
.search-suggestion {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid rgba(32,41,114,0.06);
  transition: background 0.2s ease;
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover { background: #FAF9F6; }
.search-suggestion-thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  background: repeating-linear-gradient(45deg, #F5F2EC, #F5F2EC 6px, #EFEAE0 6px, #EFEAE0 12px);
  border: 1px solid rgba(32,41,114,0.08);
  overflow: hidden;
}
.search-suggestion-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.search-suggestion-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 0;
}
.search-suggestion-name {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.84rem; color: #202972;
}
.search-suggestion-path {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.65rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: #9AA1B4;
}
.search-no-results {
  padding: 16px; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.8rem; color: #9AA1B4;
}
.search-not-found-msg {
  position: absolute; top: calc(100% + 8px); left: 0;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.7rem;
  color: #C0392B; white-space: nowrap;
}

/* ── Hero / Home ── */
.home-section { position: relative; overflow: hidden; }

.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 5.2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #202972;
}
.hero-headline em { font-style: italic; font-weight: 300; }

.hero-sub {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.8vw, 1.15rem);
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: #4A5568;
  max-width: 600px;
}

.hero-divider { width: 64px; height: 2px; background: #C0392B; margin: 32px 0; }
.hero-cta-wrap { margin-top: 44px; }

.cta-btn {
  display: inline-block;
  background: #C0392B;
  color: #FAF9F6;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 44px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(192,57,43,0.25);
}
.cta-btn:hover {
  background: #A93226;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(192,57,43,0.35);
}

.cta-btn-outline {
  display: inline-block;
  background: transparent;
  color: #202972;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid rgba(32,41,114,0.3);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.cta-btn-outline:hover { border-color: #C0392B; color: #C0392B; }

.section-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C0392B;
  margin-bottom: 16px;
}

.footer-link {
  color: rgba(250,249,246,0.65);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  margin-bottom: 8px;
}
.footer-link:hover { color: #F8B7BD; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.7s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

@keyframes viewFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-fade { animation: viewFade 0.35s ease-in-out both; }

@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
  70% { box-shadow: 0 0 0 14px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}
.card.highlighted {
  border-color: #C0392B;
  animation: highlightPulse 1.4s ease-out 1;
}

/* ── Unified card component — used identically in Catalog View and Category View ── */
.card {
  background: #FFFFFF;
  border: 1px solid rgba(32,41,114,0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(32,41,114,0.1); border-color: rgba(32,41,114,0.15); }
.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F0ECE4, #F0ECE4 10px, #E5DED2 10px, #E5DED2 20px);
  flex-shrink: 0;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.card-image-text {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32,41,114,0.35);
  text-align: center;
  padding: 0 10px;
}
.card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: #202972;
  margin-bottom: 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.card-sub {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5A6477;
  margin-bottom: 18px;
}
.card-cta {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C0392B;
  margin-top: auto;
}

.subtab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(32,41,114,0.1);
  margin-bottom: 40px;
}
.subtab-btn {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A6477;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.subtab-btn:hover { color: #202972; }
.subtab-btn.active { color: #C0392B; border-bottom-color: #C0392B; }

/* Fixed-column product grid: uniform card size, matching the Catalog view card size, 4 per row on desktop */
.product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
  align-items: start;
}
@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.breadcrumb {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9AA1B4;
  margin-bottom: 24px;
}
.breadcrumb button {
  background: none; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9AA1B4; padding: 0;
  transition: color 0.25s ease;
}
.breadcrumb button:hover { color: #C0392B; }
.breadcrumb .current { color: #202972; }

.hero-grid {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 88vh;
  background: linear-gradient(135deg, #FAF9F6 0%, #F0ECE4 60%, #EAE4DC 100%);
  position: relative;
}
.hero-text-col {
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px 80px 32px;
  position: relative;
  z-index: 2;
}
.hero-image-wrap {
  flex: 1 1 48%;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  display: flex;
}
@keyframes heroImageFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: heroImageFadeIn 1.1s ease both;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 15%, #000 35%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 15%, #000 35%);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 60, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFadeIn 0.25s ease both;
}
.modal-card {
  background: #FAF9F6;
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  position: relative;
  box-shadow: 0 30px 80px rgba(20,24,60,0.35);
  animation: modalScaleIn 0.3s ease both;
}
.modal-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F5F2EC, #F5F2EC 10px, #EFEAE0 10px, #EFEAE0 20px);
  overflow: hidden;
}
.modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.modal-body {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-category-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C0392B;
  margin-bottom: 18px;
}
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #202972;
  margin-bottom: 26px;
}
.modal-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(32,41,114,0.1);
}
.modal-spec-row:last-of-type { border-bottom: 1px solid rgba(32,41,114,0.1); }
.modal-spec-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9AA1B4;
}
.modal-spec-value {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: #4A5568;
  text-align: right;
}
.modal-close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #FAF9F6;
  border: 1px solid rgba(32,41,114,0.15);
  cursor: pointer;
  color: #202972;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.modal-close-btn:hover { background: #C0392B; color: #FAF9F6; border-color: #C0392B; transform: rotate(90deg); }
.modal-contact-btn { margin-top: 30px; }

/* ── Catalog / Category page layout (converted from inline styles) ── */
.container { max-width: 1180px; margin: 0 auto; }
.catalog-section, .category-section { padding: 72px 32px 100px; background: #FAF9F6; }
.catalog-intro { margin-bottom: 56px; }
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.02em;
  color: #202972;
}
.page-title.with-margin { margin-bottom: 16px; }
.page-desc {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #5A6477;
  max-width: 560px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.category-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

/* ── Footer layout (converted from inline styles) ── */
.accent-strip { height: 1px; background: linear-gradient(90deg, transparent, rgba(32,41,114,0.12), transparent); }
.site-footer { background: #202972; padding: 80px 32px 48px; color: #FAF9F6; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px;
  margin-bottom: 60px;
}
.footer-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; cursor: pointer; }
.footer-logo-img { height: 60px; width: auto; object-fit: contain; }
.footer-brand-name {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FAF9F6;
  line-height: 1.25;
}
.footer-desc {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.84rem;
  line-height: 1.85;
  color: rgba(250,249,246,0.6);
  letter-spacing: 0.03em;
}
.footer-heading {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F8B7BD;
  margin-bottom: 20px;
}
.footer-address {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.84rem;
  line-height: 1.9;
  color: rgba(250,249,246,0.75);
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(250,249,246,0.1);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-fine-print {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(250,249,246,0.4);
}

/* ── MOBILE OPTIMIZATION ── */
@media (max-width: 900px) {
  .hero-grid { flex-direction: column; min-height: auto; }
  .hero-text-col { padding: 48px 20px 32px; }
  .hero-image-wrap { flex: none; aspect-ratio: 16 / 10; width: 100%; }
  .hero-image-wrap img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 15%, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 15%, #000 35%);
  }
}

@media (max-width: 720px) {
  .header-inner { padding: 12px 16px !important; gap: 12px !important; }
  .brand-name { font-size: 1.35rem; letter-spacing: 0.16em; }
  .search-wrap { width: 100%; order: 3; margin-top: 4px; }
  .modal-card { grid-template-columns: 1fr; max-height: 92vh; }
  .modal-image { aspect-ratio: 4 / 3; }
  .modal-body { padding: 28px 20px 32px; }
  .card-body { padding: 20px 20px 24px; }
  .cta-btn { padding: 14px 32px; width: 100%; text-align: center; }
  .site-footer { padding: 56px 20px 36px !important; }
}