/* =========================================================================
   OPTICA DON JAIME — Litho overrides
   Paleta: blanco roto, beige muy suave, gris cálido, negro suave, ocre
   Tipografía: Cormorant Garamond (display) + Lato (body)
   ========================================================================= */

:root {
  --odj-bg:           #faf7f2;  /* blanco roto / beige muy suave */
  --odj-bg-2:         #f0ebe1;  /* beige cálido */
  --odj-bg-3:         #e8e1d4;  /* beige más marcado, usado para palabras decorativas */
  --odj-cream:        #f5f0e8;  /* crema cálido para acentos suaves */
  --odj-white:        #ffffff;
  --odj-ink:          #1c1a17;  /* negro suave, warm */
  --odj-ink-2:        #3a352e;
  --odj-muted:        #6b6358;  /* warm gray */
  --odj-muted-2:      #b8aea4;  /* aclarado para mejor contraste sobre fondos oscuros */
  --odj-muted-3:      #d6cfc4;  /* tono muy suave para bordes y separadores */
  --odj-border:       #e6dfd2;
  --odj-border-soft:  #ece5d9;
  --odj-ochre:        #a8825a;  /* ocre dorado suave */
  --odj-ochre-dark:   #8a6a47;
  --odj-olive:        #7d7a55;  /* verde oliva desaturado */
  --odj-shadow-sm:    0 1px 0 rgba(28, 26, 23, 0.04);
  --odj-shadow:       0 24px 48px -20px rgba(28, 26, 23, 0.10);
  --odj-shadow-lg:    0 32px 64px -28px rgba(28, 26, 23, 0.16);
}

html, body {
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: var(--odj-ink);
  background: var(--odj-bg);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-weight: 500;
  color: var(--odj-ink);
  letter-spacing: -0.01em;
}

.alt-font, .odj-eyebrow {
  font-family: 'Lato', sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--odj-ochre);
}

/* Litho class palette overrides */
.text-extra-dark-gray   { color: var(--odj-ink)   !important; }
.text-medium-gray       { color: var(--odj-muted) !important; }
.text-extra-medium-gray { color: var(--odj-muted) !important; }
.text-light-gray        { color: var(--odj-muted-2) !important; }
.text-yellow-ochre-light,
.text-yellow-ochre,
.text-sunglow           { color: var(--odj-ochre) !important; }

.bg-extra-dark-gray     { background-color: var(--odj-ink) !important; }
.bg-dark-gray           { background-color: var(--odj-ink-2) !important; }
.bg-medium-gray         { background-color: var(--odj-muted) !important; }
.bg-light-gray,
.bg-penguin-white       { background-color: var(--odj-bg) !important; }
.bg-extra-light-gray    { background-color: var(--odj-bg-2) !important; }
.bg-yellow-ochre-light  { background-color: var(--odj-ochre) !important; }
.bg-white               { background-color: var(--odj-white) !important; }

.border-color-medium-gray,
.border-color-extra-medium-gray { border-color: var(--odj-border) !important; }
.border-color-light-gray        { border-color: var(--odj-border) !important; }

/* Backgrounds utility (our own) */
.odj-bg          { background: var(--odj-bg); }
.odj-bg-2        { background: var(--odj-bg-2); }
.odj-bg-3        { background: var(--odj-bg-3); }
.odj-bg-white    { background: var(--odj-white); }
.odj-text        { color: var(--odj-ink); }
.odj-text-muted  { color: var(--odj-muted); }
.odj-accent      { color: var(--odj-ochre); }
.odj-border      { border-color: var(--odj-border) !important; }

/* Section spacing — premium breathing room */
.odj-section          { padding: 7rem 0; }
.odj-section-sm       { padding: 4.5rem 0; }
.odj-section-lg       { padding: 9rem 0; }
@media (max-width: 991.98px) {
  .odj-section          { padding: 4.5rem 0; }
  .odj-section-sm       { padding: 3rem 0; }
  .odj-section-lg       { padding: 6rem 0; }
}

/* Editorial title utilities */
.odj-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--odj-ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.odj-title-xl { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.odj-title-lg { font-size: clamp(2rem, 4vw, 3.2rem); }
.odj-title-md { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.odj-title-sm { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

.odj-eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--odj-ochre);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.odj-eyebrow-line::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--odj-ochre);
  display: inline-block;
}

/* Buttons */
.btn-odj {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--odj-ink);
  color: var(--odj-bg);
  border: 1px solid var(--odj-ink);
  border-radius: 0;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn-odj:hover {
  background: var(--odj-ochre);
  border-color: var(--odj-ochre);
  color: var(--odj-white);
}
.btn-odj-outline {
  background: transparent;
  color: var(--odj-ink);
}
.btn-odj-outline:hover {
  background: var(--odj-ink);
  color: var(--odj-bg);
}
.btn-odj-light {
  background: transparent;
  color: var(--odj-white);
  border-color: var(--odj-white);
}
.btn-odj-light:hover {
  background: var(--odj-white);
  color: var(--odj-ink);
}

/* Round CTA arrow button (Litho style) */
.odj-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--odj-ink);
  color: var(--odj-bg);
  text-decoration: none;
  transition: all 0.3s ease;
}
.odj-arrow:hover {
  background: var(--odj-ochre);
  color: var(--odj-white);
  transform: rotate(-45deg);
}
.odj-arrow svg { width: 18px; height: 18px; }

/* Section number marker (Litho style: 01, 02, 03…) */
.odj-num {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--odj-ochre);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Card hover — minimal editorial */
.odj-card {
  position: relative;
  overflow: hidden;
  background: var(--odj-white);
  transition: all 0.4s ease;
}
.odj-card:hover {
  box-shadow: 0 30px 60px -25px rgba(28, 26, 23, 0.18);
}
.odj-card .odj-card-img {
  position: relative;
  overflow: hidden;
}
.odj-card .odj-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-card:hover .odj-card-img img {
  transform: scale(1.05);
}

/* Big section separators */
.odj-divider {
  width: 100%;
  height: 1px;
  background: var(--odj-border);
}

/* Number cards (interior design style) — see refinements below */

/* Editorial pull quote */
.odj-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--odj-ink);
}

/* Header — dark translucent at rest, light when scrolled */
.odj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: rgba(28, 26, 23, 0.45);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  padding: 22px 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
}
.odj-header.is-scrolled {
  background: rgba(250, 247, 242, 0.97);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 4px 20px rgba(28, 26, 23, 0.08);
  border-bottom-color: rgba(28, 26, 23, 0.06);
  padding: 14px 0;
}
.odj-header .odj-logo img { height: 48px; transition: height 0.3s ease, opacity 0.3s ease; }
.odj-header.is-scrolled .odj-logo img { height: 38px; }

.odj-nav a {
  color: var(--odj-white);
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 0;
  transition: color 0.2s ease;
}
.odj-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--odj-ochre);
  transition: right 0.3s ease;
}
.odj-nav a:hover { color: var(--odj-ochre); }
.odj-nav a:hover::after { right: 0; }
.odj-nav a.is-active { color: var(--odj-ochre); }
.odj-nav a.is-active::after { right: 0; }

/* Logo: white by default (over dark translucent), dark when scrolled */
.odj-header .odj-logo .odj-logo-dark { display: none; }
.odj-header .odj-logo .odj-logo-light { display: inline-block; }
.odj-header.is-scrolled .odj-logo .odj-logo-light { display: none; }
.odj-header.is-scrolled .odj-logo .odj-logo-dark { display: inline-block; }

/* Scrolled nav + icons turn dark */
.odj-header.is-scrolled .odj-nav a { color: var(--odj-ink); }
.odj-header.is-scrolled .odj-nav a:hover { color: var(--odj-ochre-dark); }
.odj-header.is-scrolled .odj-nav a.is-active { color: var(--odj-ochre-dark); }
.odj-header.is-scrolled .odj-nav-icon { color: var(--odj-ink); }
.odj-header.is-scrolled .odj-nav-icon:hover { color: var(--odj-ochre-dark); }
.odj-header.is-scrolled .odj-burger { color: var(--odj-ink); }

/* Top bar (small ribbon) */
.odj-topbar {
  background: var(--odj-ink);
  color: var(--odj-bg);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 0;
  text-align: center;
}
.odj-topbar a { color: var(--odj-ochre); text-decoration: none; }
.odj-topbar a:hover { color: var(--odj-white); }

/* Footer */
.odj-footer {
  background: var(--odj-ink);
  color: var(--odj-bg);
  padding: 6rem 0 0;
}
.odj-footer h6 {
  color: var(--odj-white);
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.odj-footer a {
  color: var(--odj-muted-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.odj-footer a:hover { color: var(--odj-ochre); }
.odj-footer .odj-footer-bottom {
  margin-top: 5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  color: var(--odj-muted-2);
}

/* Hero */
.odj-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.odj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
}
.odj-hero .odj-hero-box {
  position: relative;
  z-index: 2;
  background: var(--odj-white);
  padding: 3.5rem 3rem;
  max-width: 560px;
  margin: 0 0 8vh 6vw;
}
@media (max-width: 767.98px) {
  .odj-hero .odj-hero-box {
    margin: 0 16px 8vh;
    padding: 2rem 1.6rem;
  }
}

/* Editorial split */
.odj-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.odj-split > .odj-split-img,
.odj-split > .odj-split-text {
  min-height: 540px;
}
.odj-split > .odj-split-text {
  padding: 5rem 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--odj-white);
}
.odj-split > .odj-split-img {
  background-size: cover;
  background-position: center;
}
.odj-split.reverse > .odj-split-text { order: 2; }
.odj-split.reverse > .odj-split-img { order: 1; }
@media (max-width: 767.98px) {
  .odj-split { grid-template-columns: 1fr; }
  .odj-split > .odj-split-img,
  .odj-split > .odj-split-text { min-height: 360px; }
  .odj-split > .odj-split-text { padding: 3rem 1.6rem; }
  .odj-split.reverse > .odj-split-text { order: 1; }
  .odj-split.reverse > .odj-split-img { order: 2; }
}

/* Brand grid — see refinements below */

/* Product card (editorial) */
.odj-product {
  display: block;
  position: relative;
  background: transparent;
  text-decoration: none;
  color: var(--odj-ink);
}
.odj-product .odj-product-img {
  position: relative;
  background: var(--odj-bg-2);
  aspect-ratio: 3/4;
  overflow: hidden;
}
.odj-product .odj-product-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-product:hover .odj-product-img img { transform: scale(1.04); }
.odj-product .odj-product-meta { padding-top: 1.2rem; text-align: center; }
.odj-product .odj-product-brand {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-ochre);
  margin-bottom: 0.4rem;
}
.odj-product .odj-product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--odj-ink);
  margin-bottom: 0.3rem;
}
.odj-product .odj-product-price {
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
  color: var(--odj-muted);
}

/* Blog card (editorial) */
.odj-blog {
  display: block;
  text-decoration: none;
  color: var(--odj-ink);
}
.odj-blog .odj-blog-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 1.4rem;
}
.odj-blog .odj-blog-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-blog:hover .odj-blog-img img { transform: scale(1.04); }
.odj-blog .odj-blog-date {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-ochre);
  margin-bottom: 0.6rem;
}
.odj-blog .odj-blog-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--odj-ink);
  margin-bottom: 0.5rem;
}
.odj-blog .odj-blog-link {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.6rem;
}
.odj-blog .odj-blog-link::after {
  content: "→";
  transition: transform 0.25s ease;
}
.odj-blog:hover .odj-blog-link::after { transform: translateX(4px); }

/* Stats / counters block */
.odj-stat {
  text-align: center;
  padding: 2.2rem 1rem;
}
.odj-stat .odj-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--odj-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.odj-stat .odj-stat-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-muted);
  margin-top: 0.8rem;
}

/* Decorative big "overlap" word (Litho style big text behind) */
.odj-bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(8rem, 18vw, 18rem);
  color: var(--odj-bg-3);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  font-weight: 500;
  line-height: 1;
}

/* Categories grid (premium catalog) */
.odj-cat {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  text-decoration: none;
  color: var(--odj-white);
}
.odj-cat img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-cat:hover img { transform: scale(1.05); }
.odj-cat::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.odj-cat .odj-cat-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem;
}
.odj-cat .odj-cat-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-bg-2);
  margin-bottom: 0.5rem;
}
.odj-cat .odj-cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  color: var(--odj-white);
  line-height: 1.1;
}
.odj-cat .odj-cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.8rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-white);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 4px;
}

/* Litho feature-box override */
.feature-box .feature-box-icon {
  color: var(--odj-ochre) !important;
}
.feature-box .feature-box-icon i,
.feature-box .feature-box-icon [class*="icon-"] {
  color: var(--odj-ochre) !important;
}

/* swiper overrides */
.swiper-button-next, .swiper-button-prev {
  color: var(--odj-ink) !important;
}
.swiper-pagination-bullet-active { background: var(--odj-ochre) !important; }

/* Container width a bit wider for editorial */
.container-xxl, .container-xl { max-width: 1340px; }

/* Helpers */
.text-balance { text-wrap: balance; }
.odj-divider-vert {
  width: 1px;
  background: var(--odj-border);
  align-self: stretch;
}

/* Responsive font scaling for small screens */
@media (max-width: 575.98px) {
  .odj-hero { min-height: 86vh; }
}

/* =========================================================================
   REFINAMIENTOS VISUALES — coherencia, espacio y percepción premium
   ========================================================================= */

/* Base refinements */
::selection { background: var(--odj-ochre); color: var(--odj-white); }
html { scroll-behavior: smooth; }

/* Typography utilities */
.odj-text { color: var(--odj-muted); line-height: 1.8; font-size: 1rem; }
.odj-text-lead { color: var(--odj-muted); line-height: 1.75; font-size: 1.05rem; }
.odj-text-sm { color: var(--odj-muted); line-height: 1.7; font-size: 0.92rem; }
.odj-text-dark { color: var(--odj-ink-2); }
.odj-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-ochre);
}

/* Section header rhythm */
.odj-section-header { margin-bottom: 4rem; }
.odj-section-header-sm { margin-bottom: 2.5rem; }
.odj-section-header-center { text-align: center; }
.odj-section-header-center .odj-title { max-width: 760px; margin-left: auto; margin-right: auto; }

@media (max-width: 991.98px) {
  .odj-section-header { margin-bottom: 2.5rem; }
  .odj-section-header-sm { margin-bottom: 1.8rem; }
}

/* Editorial image wrapper */
.odj-img {
  position: relative;
  overflow: hidden;
}
.odj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-img:hover img { transform: scale(1.04); }
.odj-ratio-1x1 { aspect-ratio: 1/1; }
.odj-ratio-4x3 { aspect-ratio: 4/3; }
.odj-ratio-3x4 { aspect-ratio: 3/4; }
.odj-ratio-16x10 { aspect-ratio: 16/10; }
.odj-ratio-21x9 { aspect-ratio: 21/9; }

/* Clip-path effects for editorial images */
.odj-img-clip-a { clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); }
.odj-img-clip-b { clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.odj-img-clip-c { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }

/* Number cards refinement */
.odj-num-card {
  background: var(--odj-white);
  padding: 2.5rem;
  height: 100%;
  border: 1px solid var(--odj-border);
  box-shadow: var(--odj-shadow-sm);
  transition: all 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-num-card:hover {
  background: var(--odj-cream);
  border-color: var(--odj-ochre);
  box-shadow: var(--odj-shadow);
  transform: translateY(-3px);
}
.odj-num-card .odj-num {
  font-size: 1.7rem;
  margin-bottom: 1.1rem;
}

/* Product card refinement */
.odj-product .odj-product-img { background: var(--odj-bg-2); }
.odj-product .odj-product-meta { padding-top: 1.4rem; text-align: center; }
.odj-product .odj-product-brand { margin-bottom: 0.55rem; letter-spacing: 0.24em; }
.odj-product .odj-product-name { font-size: 1.25rem; margin-bottom: 0.4rem; }
.odj-product .odj-product-price { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--odj-muted); }

/* Blog card refinement */
.odj-blog .odj-blog-img { margin-bottom: 1.5rem; }
.odj-blog .odj-blog-title { transition: color 0.25s ease; }
.odj-blog:hover .odj-blog-title { color: var(--odj-ochre); }

/* Category card refinement */
.odj-cat::before {
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
}
.odj-cat .odj-cat-content { padding: 1.8rem; }
.odj-cat .odj-cat-name { font-size: 1.6rem; letter-spacing: -0.01em; }
.odj-cat .odj-cat-cta {
  margin-top: 0.9rem;
  border-bottom-color: rgba(255,255,255,0.35);
  transition: border-color 0.25s ease;
}
.odj-cat:hover .odj-cat-cta { border-bottom-color: rgba(255,255,255,0.85); }
.odj-cat:hover .odj-cat-name { color: var(--odj-ochre); }

/* Product card micro-interactions */
.odj-product { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.odj-product:hover { transform: translateY(-3px); }
.odj-product:hover .odj-product-meta .odj-product-name { color: var(--odj-ochre); }
.odj-product .odj-product-img { background: var(--odj-bg-2); position: relative; overflow: hidden; }
.odj-product .odj-product-img::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(28, 26, 23, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}
.odj-product:hover .odj-product-img::after { background: rgba(28, 26, 23, 0.04); }

/* Brand grid refinement */
.odj-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 14px 22px;
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  box-shadow: var(--odj-shadow-sm);
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: grayscale(100%);
  opacity: 0.7;
}
.odj-brand img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.odj-brand:hover {
  opacity: 1;
  color: var(--odj-ink);
  border-color: var(--odj-ochre);
  background: var(--odj-cream);
  box-shadow: var(--odj-shadow);
  filter: grayscale(0%);
  transform: translateY(-2px);
}

/* Buttons refinement */
.btn-odj { transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); cursor: pointer; }
.btn-odj:focus-visible { outline: 2px solid var(--odj-ochre); outline-offset: 3px; }
.btn-odj:active { transform: scale(0.97); }
.btn-odj-sm { padding: 12px 22px; font-size: 0.7rem; }

/* Button loading state */
.btn-odj.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.btn-odj.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: odj-spin 0.6s linear infinite;
}
@keyframes odj-spin { to { transform: rotate(360deg); } }

/* Cart badge animation */
.odj-cart-badge { animation: odj-badge-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes odj-badge-in {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Forms */
.odj-input,
.odj-textarea,
.odj-select {
  width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  color: var(--odj-ink);
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  border-radius: 0;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.odj-input:focus,
.odj-textarea:focus,
.odj-select:focus {
  border-color: var(--odj-ochre);
  box-shadow: 0 0 0 3px rgba(168, 130, 90, 0.08);
}
.odj-textarea { resize: vertical; }

/* Select custom arrow */
.odj-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6358' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.odj-select option { color: var(--odj-ink); background: var(--odj-white); }

/* Checkbox and radio refinements */
.odj-checkbox, .odj-radio {
  accent-color: var(--odj-ochre);
  width: 18px; height: 18px;
  margin-top: 0;
  flex-shrink: 0;
}

/* Alert system */
.odj-alert {
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--odj-border);
  background: var(--odj-bg);
  color: var(--odj-ink);
  margin-bottom: 2rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
}
.odj-alert-error { border-left-color: #c45a5a; background: #fff5f5; }
.odj-alert-success { border-left-color: var(--odj-ochre); background: var(--odj-bg-2); }
.odj-alert-info { border-left-color: #7d7a55; background: #f5f4ee; }
.odj-alert ul { margin: 0; padding-left: 1.2rem; }
.odj-alert li { margin-bottom: 0.2rem; }
.odj-alert li:last-child { margin-bottom: 0; }

/* Empty state */
.odj-empty-state {
  text-align: center;
  padding: 5rem 2rem;
}
.odj-empty-state svg { margin-bottom: 1.5rem; color: var(--odj-ochre); }
.odj-empty-state h2 { margin-bottom: 0.6rem; }
.odj-empty-state p { max-width: 480px; margin: 0 auto 1.6rem; }

/* Skeleton text loading */
.odj-skeleton-text {
  display: inline-block;
  height: 1em;
  background: linear-gradient(110deg, var(--odj-bg-2) 25%, var(--odj-bg-3) 50%, var(--odj-bg-2) 75%);
  background-size: 200% 100%;
  animation: odj-shimmer 1.5s ease-in-out infinite;
  border-radius: 2px;
  width: 100%;
}

/* Dark CTA reusable */
.odj-cta-dark {
  position: relative;
  background: var(--odj-ink);
  color: var(--odj-bg);
  padding: 7rem 0;
  overflow: hidden;
}
.odj-cta-dark .odj-title { color: var(--odj-white); }
.odj-cta-dark p { color: var(--odj-muted-2); }

/* Page hero — dark header image for interior pages */
.odj-page-hero {
  position: relative;
  background: var(--odj-ink);
  color: var(--odj-bg);
  padding: calc(100px + 4rem) 0 6rem;
  margin-bottom: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.odj-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(168, 130, 90, 0.18), transparent 50%),
              linear-gradient(180deg, rgba(28, 26, 23, 0.35) 0%, rgba(28, 26, 23, 0.72) 100%);
  pointer-events: none;
}
.odj-page-hero.has-image::before {
  background: linear-gradient(180deg, rgba(28, 26, 23, 0.45) 0%, rgba(28, 26, 23, 0.75) 100%);
}
.odj-page-hero .container { position: relative; z-index: 1; }
.odj-page-hero .odj-eyebrow-line { color: var(--odj-ochre); margin-bottom: 1rem; }
.odj-page-hero .odj-title { color: var(--odj-white); margin: 0; }
.odj-page-hero .odj-text { color: var(--odj-muted-3); max-width: 560px; margin-top: 1.2rem; }

/* Legal / interior content */
.odj-legal-content {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.odj-legal-content h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.2rem;
}
.odj-legal-content h2:first-child { margin-top: 0; }
.odj-legal-content p { margin: 0; }
.odj-legal-content a { color: var(--odj-ochre); text-decoration: none; border-bottom: 1px solid rgba(168, 130, 90, 0.35); }
.odj-legal-content a:hover { border-bottom-color: var(--odj-ochre); }

/* Footer refinement */
.odj-footer { padding: 5rem 0 0; }
.odj-footer a { color: var(--odj-muted-2); }
.odj-footer a:hover { color: var(--odj-ochre); }
.odj-footer h6 { margin-bottom: 1.6rem; }
.odj-footer .odj-footer-bottom {
  margin-top: 4rem;
  padding: 1.8rem 0;
  border-top-color: rgba(255,255,255,0.08);
}

/* Background word subtlety */
.odj-bg-word { opacity: 0.35; font-weight: 400; }

/* Focus visible global */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--odj-ochre);
  outline-offset: 2px;
}

/* Subtle page entrance */
.odj-page-enter { animation: odj-page-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes odj-page-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* E-commerce: product detail */
.odj-product-detail { display: grid; gap: 2rem; }
.odj-product-gallery { position: relative; }
.odj-product-main-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  margin-bottom: 1rem;
  border: 1px solid var(--odj-border);
}
.odj-product-main-img img { width: 100%; height: 100%; object-fit: contain; object-position: center center; transition: opacity 0.3s ease; display: block; }
.odj-product-badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  padding: 0.45rem 0.9rem;
  background: var(--odj-ink);
  color: var(--odj-bg);
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.odj-product-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.odj-product-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center center;
  background: #ffffff;
  cursor: pointer;
  border: 1px solid var(--odj-border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.odj-product-thumb:hover,
.odj-product-thumb.is-active { border-color: var(--odj-ochre); transform: translateY(-2px); }

.odj-product-info { display: flex; flex-direction: column; gap: 1.4rem; }
.odj-product-brand {
  color: var(--odj-ochre);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.odj-product-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  color: var(--odj-ink);
  line-height: 1.1;
  margin: 0;
}
.odj-price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--odj-ink); font-weight: 500; }
.odj-price-old { text-decoration: line-through; color: var(--odj-muted-2); font-size: 1.1rem; margin-left: 0.6rem; }
.odj-price-note { color: var(--odj-muted); font-size: 0.85rem; margin-top: 0.3rem; }
.odj-product-short { color: var(--odj-muted); line-height: 1.7; font-size: 1rem; }

.odj-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--odj-border);
  border-bottom: 1px solid var(--odj-border);
}
.odj-spec-item dt { color: var(--odj-ochre); font-family: 'Lato', sans-serif; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.2rem; }
.odj-spec-item dd { color: var(--odj-ink); font-family: 'Lato', sans-serif; font-size: 0.9rem; margin: 0; }

.odj-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
}
.odj-qty-btn {
  background: none;
  border: 0;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  color: var(--odj-ink);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.odj-qty-btn:hover { color: var(--odj-ochre); }
.odj-qty input {
  width: 52px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--odj-border);
  border-right: 1px solid var(--odj-border);
  background: transparent;
  color: var(--odj-ink);
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  padding: 0.85rem 0;
  -moz-appearance: textfield;
}
.odj-qty input::-webkit-outer-spin-button,
.odj-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.odj-product-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.odj-product-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 0; }
.odj-product-trust li { display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--odj-muted); }
.odj-product-trust svg { color: var(--odj-ochre); flex-shrink: 0; }

.odj-product-meta { padding-top: 1.4rem; border-top: 1px solid var(--odj-border); font-family: 'Lato', sans-serif; font-size: 0.78rem; color: var(--odj-muted); }
.odj-product-meta-row { display: flex; gap: 8px; margin-bottom: 0.4rem; }
.odj-product-meta-row strong { color: var(--odj-ink); font-weight: 500; min-width: 90px; }
.odj-product-share { display: flex; gap: 12px; }
.odj-product-share a { color: var(--odj-ink); transition: color .2s ease; }
.odj-product-share a:hover { color: var(--odj-ochre); }

/* Tabs */
.odj-tabs { border-bottom: 1px solid var(--odj-border); margin-bottom: 2.4rem; display: flex; gap: 0; flex-wrap: wrap; }
.odj-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--odj-muted);
  padding: 1rem 1.4rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.odj-tab:hover { color: var(--odj-ink); }
.odj-tab.is-active { color: var(--odj-ink); border-bottom-color: var(--odj-ink); }
.odj-tab-content { display: none; }
.odj-tab-content.is-active { display: block; }

.odj-specs-table { width: 100%; max-width: 640px; border-collapse: collapse; }
.odj-specs-table tr { border-bottom: 1px solid var(--odj-border); }
.odj-specs-table th,
.odj-specs-table td { padding: 1rem 1rem 1rem 0; font-family: 'Lato', sans-serif; font-size: 0.85rem; text-align: left; vertical-align: top; }
.odj-specs-table th { color: var(--odj-ink); font-weight: 500; width: 40%; }
.odj-specs-table td { color: var(--odj-muted); }

/* E-commerce: cart */
.odj-cart-empty { text-align: center; padding: 5rem 2rem; }
.odj-cart-empty svg { margin-bottom: 1.5rem; }
.odj-cart-header { display: none; padding-bottom: 1rem; border-bottom: 1px solid var(--odj-border); margin-bottom: 1rem; }
@media (min-width: 768px) { .odj-cart-header { display: flex; } }
.odj-cart-header span {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-muted);
}
.odj-cart-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--odj-border);
}
.odj-cart-product { flex: 2; display: flex; gap: 1rem; align-items: center; min-width: 240px; }
.odj-cart-img { flex-shrink: 0; display: block; width: 80px; height: 100px; overflow: hidden; background: var(--odj-bg-2); }
.odj-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.odj-cart-img.is-placeholder { display: flex; align-items: center; justify-content: center; }
.odj-cart-name { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 500; color: var(--odj-ink); margin: 0 0 0.4rem; }
.odj-cart-name a { color: inherit; text-decoration: none; }
.odj-cart-name a:hover { color: var(--odj-ochre); }
.odj-cart-variant { font-family: 'Lato', sans-serif; font-size: 0.8rem; color: var(--odj-muted); margin: 0 0 0.4rem; }
.odj-cart-remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--odj-muted);
  text-decoration: underline;
  cursor: pointer;
  transition: color .2s ease;
}
.odj-cart-remove:hover { color: var(--odj-ochre); }
.odj-cart-price { flex: 1; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--odj-ink); }
.odj-cart-qty { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; }
.odj-cart-subtotal { flex: 1; text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--odj-ink); font-weight: 500; }

.odj-cart-summary { background: var(--odj-bg-2); padding: 2rem; position: sticky; top: 100px; }
.odj-cart-summary-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--odj-ink); margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--odj-border); }
.odj-cart-row { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-family: 'Lato', sans-serif; font-size: 0.92rem; }
.odj-cart-row span:first-child { color: var(--odj-muted); }
.odj-cart-row span:last-child { color: var(--odj-ink); }
.odj-cart-total { display: flex; justify-content: space-between; padding: 1.2rem 0; border-top: 1px solid var(--odj-border); margin-top: 0.4rem; }
.odj-cart-total span:first-child { font-family: 'Lato', sans-serif; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--odj-ink); font-weight: 500; }
.odj-cart-total span:last-child { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--odj-ink); font-weight: 500; }
.odj-cart-note { padding: 0.7rem 0.9rem; background: var(--odj-bg); border-left: 2px solid var(--odj-ochre); margin: 1rem 0; font-family: 'Lato', sans-serif; font-size: 0.82rem; color: var(--odj-muted); }
.odj-cart-note strong { color: var(--odj-ink); }

/* Checkout step states (base styles moved to refinements below) */
.odj-checkout-step.is-active { color: var(--odj-ink); font-weight: 500; }
.odj-checkout-step.is-completed { color: var(--odj-ochre); }
.odj-checkout-step .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--odj-border);
}
.odj-checkout-step.is-active .dot,
.odj-checkout-step.is-completed .dot { background: var(--odj-ochre); }

.odj-checkout-card {
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.odj-checkout-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--odj-ink);
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--odj-border);
}
.odj-checkout-option {
  border: 1px solid var(--odj-border);
  padding: 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.odj-checkout-option:hover { border-color: var(--odj-ochre); }
.odj-checkout-option.is-selected { border-color: var(--odj-ochre); background: rgba(168, 130, 90, 0.04); }
.odj-checkout-option input { margin-top: 0.2rem; accent-color: var(--odj-ochre); }
.odj-checkout-option strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--odj-ink); margin-bottom: 0.2rem; }
.odj-checkout-option span { font-family: 'Lato', sans-serif; font-size: 0.85rem; color: var(--odj-muted); }

.odj-checkout-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--odj-border-soft);
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
}
.odj-checkout-summary-line:last-child { border-bottom: 0; }
.odj-checkout-summary-line span:first-child { color: var(--odj-muted); }
.odj-checkout-summary-line span:last-child { color: var(--odj-ink); }
.odj-checkout-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 0 0;
  margin-top: 0.6rem;
  border-top: 2px solid var(--odj-border);
  font-family: 'Lato', sans-serif;
}
.odj-checkout-summary-total strong:first-child { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--odj-ink); }
.odj-checkout-summary-total strong:last-child { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--odj-ink); }

.odj-radio-group { display: flex; flex-direction: column; gap: 1rem; }

/* Account tables */
.odj-account-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
  margin-bottom: 2rem;
}
.odj-account-table thead th {
  text-align: left;
  padding: 1rem;
  border-bottom: 2px solid var(--odj-border);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--odj-muted);
}
.odj-account-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--odj-border-soft);
  vertical-align: top;
}
.odj-account-table tbody tr:last-child td { border-bottom-color: var(--odj-border); }
.odj-account-table tbody tr:hover td { background: var(--odj-bg); }
.odj-account-table .odj-empty { text-align: center; color: var(--odj-muted); padding: 2.5rem 1rem; }

/* Account cards / summary */
.odj-account-card {
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.odj-account-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--odj-ink);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--odj-border);
}
.odj-account-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.odj-account-summary-item {
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  padding: 1.2rem;
}
.odj-account-summary-item small {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--odj-muted);
  margin-bottom: 0.4rem;
}
.odj-account-summary-item strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--odj-ink);
}

/* Servicio card (icono + num) */
.odj-servicio-card { position: relative; }
.odj-servicio-icono {
  width: 64px;
  height: 64px;
  border: 1px solid var(--odj-ochre);
  color: var(--odj-ochre);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: all 0.25s ease;
}
.odj-servicio-card:hover .odj-servicio-icono {
  background: var(--odj-ochre);
  color: #fff;
}

/* FAQ */
.odj-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.odj-faq-item {
  border: 1px solid var(--odj-border);
  background: var(--odj-white);
  padding: 0;
  transition: border-color 0.2s ease;
}
.odj-faq-item[open] { border-color: var(--odj-ochre); }
.odj-faq-item summary {
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--odj-ink);
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.odj-faq-item summary::-webkit-details-marker { display: none; }
.odj-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--odj-ochre);
  transition: transform 0.2s ease;
}
.odj-faq-item[open] summary::after { content: "−"; }
.odj-faq-item p {
  margin: 0;
  padding: 0 1.4rem 1.4rem;
  color: var(--odj-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Contact info dark box — labels */
.odj-contact-info .odj-label {
  font-size: 0.85rem;
  color: var(--odj-muted-2);
}

/* Floating buttons (WhatsApp + scroll-to-top) */
.odj-floating-btns {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1020;
}
.odj-float-wa {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.odj-float-wa:hover { transform: scale(1.08); color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); }
.odj-float-top {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--odj-ink);
  color: var(--odj-bg);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(28, 26, 23, 0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.odj-float-top:hover { background: var(--odj-ochre); transform: scale(1.08); color: var(--odj-white); }

/* Skeleton loading placeholder for product images */
.odj-product-img .odj-skeleton,
.odj-blog-img .odj-skeleton,
.odj-cat .odj-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--odj-bg-2) 25%, var(--odj-bg-3) 50%, var(--odj-bg-2) 75%);
  background-size: 200% 100%;
  animation: odj-shimmer 1.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes odj-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Checkout steps — visual progress line */
.odj-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 3rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-muted);
}
.odj-checkout-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  position: relative;
  transition: color 0.3s ease;
}
.odj-checkout-step:not(:last-child)::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--odj-border);
  margin-left: 1rem;
  transition: background 0.3s ease;
}
.odj-checkout-step.is-active:not(:last-child)::after,
.odj-checkout-step.is-completed:not(:last-child)::after { background: var(--odj-ochre); }
.odj-checkout-step .dot {
  transition: background 0.3s ease, transform 0.3s ease;
}
.odj-checkout-step.is-active .dot { transform: scale(1.2); }

/* Breadcrumb */
.odj-breadcrumb {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-muted);
}
.odj-breadcrumb-link {
  color: var(--odj-ochre);
  text-decoration: none;
  transition: color 0.2s ease;
}
.odj-breadcrumb-link:hover { color: var(--odj-ochre-dark); text-decoration: underline; }
.odj-breadcrumb-current { color: var(--odj-ink); }
.odj-breadcrumb-sep { opacity: .4; margin: 0 10px; }

/* Text link utility (back links, edit links) */
.odj-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--odj-ink);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.odj-text-link:hover { color: var(--odj-ochre); border-color: var(--odj-ochre); }

/* Skip-to-content (accessibility) */
.odj-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.8rem 1.4rem;
  background: var(--odj-ink);
  color: var(--odj-bg);
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.odj-skip-link:focus {
  top: 0;
  outline: 2px solid var(--odj-ochre);
  outline-offset: 2px;
}

/* =========================================================================
   /productos — Hub editorial, filtros, toolbar, paginación
   ========================================================================= */

/* Product card flags */
.odj-product-flags {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}
.odj-product-flag {
  background: var(--odj-ink);
  color: var(--odj-bg);
  font-family: 'Lato', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 9px;
  line-height: 1;
}
.odj-product-flag.is-new { background: var(--odj-ochre); }

/* List view */
.odj-product-list {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  padding: 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  align-items: stretch;
}
.odj-product-list:hover { border-color: var(--odj-ochre); box-shadow: 0 12px 32px rgba(28,26,23,0.08); }
.odj-product-list-media {
  flex-shrink: 0;
  width: 180px;
  background: var(--odj-bg-2);
  position: relative;
  overflow: hidden;
}
@media (min-width: 576px) { .odj-product-list-media { width: 220px; } }
.odj-product-list-media img { width: 100%; height: 100%; object-fit: cover; }
.odj-product-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.odj-product-list .odj-product-name { text-align: left; font-size: 1.4rem; margin: 0; }
.odj-product-list .odj-product-short {
  color: var(--odj-muted);
  line-height: 1.6;
  font-size: 0.9rem;
  margin: 0.2rem 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.odj-product-list-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.2rem; }
.odj-product-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--odj-bg-2);
  border: 1px solid var(--odj-border);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  color: var(--odj-ink);
  letter-spacing: 0.04em;
}
.odj-product-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--odj-border);
  flex-wrap: wrap;
  gap: 1rem;
}
.odj-product-price-block { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.odj-product-price-block .odj-product-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--odj-ink);
  margin: 0;
}
.odj-product-price-old {
  text-decoration: line-through;
  color: var(--odj-muted-2);
  font-family: 'Lato', sans-serif;
  font-size: 0.85rem;
}
@media (max-width: 575.98px) {
  .odj-product-list { flex-direction: column; }
  .odj-product-list-media { width: 100%; aspect-ratio: 4/3; }
}

/* Toolbar */
.odj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--odj-border);
  border-bottom: 1px solid var(--odj-border);
  margin-bottom: 2.4rem;
}
.odj-toolbar-count {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-muted);
}
.odj-toolbar-count strong { color: var(--odj-ink); font-weight: 500; }
.odj-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
}
.odj-toolbar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.odj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  background: var(--odj-bg-2);
  border: 1px solid var(--odj-border);
  color: var(--odj-ink);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.odj-chip:hover { background: var(--odj-ink); color: var(--odj-bg); border-color: var(--odj-ink); }
.odj-chip-x { font-size: 1rem; line-height: 1; opacity: 0.7; }
.odj-chip:hover .odj-chip-x { opacity: 1; }
.odj-toolbar-sort { display: flex; align-items: center; gap: 8px; }
.odj-toolbar-sort-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-muted);
}
.odj-toolbar-sort-select {
  appearance: none;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231c1a17' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 8px center;
  background-size: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--odj-ink);
  padding: 4px 24px 4px 6px;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  color: var(--odj-ink);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.odj-toolbar-sort-select:hover, .odj-toolbar-sort-select:focus { border-bottom-color: var(--odj-ochre); }
.odj-toolbar-view { display: inline-flex; border: 1px solid var(--odj-border); }
.odj-view-btn {
  background: var(--odj-white);
  color: var(--odj-muted);
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.odj-view-btn:hover { color: var(--odj-ink); }
.odj-view-btn.is-active { background: var(--odj-ink); color: var(--odj-bg); }
.odj-view-btn:not(:last-child) { border-right: 1px solid var(--odj-border); }
.odj-toolbar-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--odj-ink);
  color: var(--odj-bg);
  border: 0;
  padding: 8px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.odj-toolbar-filter-toggle:hover { background: var(--odj-ochre); }
@media (min-width: 992px) { .odj-toolbar-filter-toggle { display: none; } }

/* Filter sidebar */
.odj-filter-sidebar {
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  padding: 1.6rem;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.odj-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--odj-border);
}
.odj-filter-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--odj-ink);
  line-height: 1;
}
.odj-filter-clear {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-ochre);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.odj-filter-clear:hover { border-bottom-color: var(--odj-ochre); }
.odj-filter-form { display: flex; flex-direction: column; }
.odj-filter-group { border-bottom: 1px solid var(--odj-border); padding: 0.6rem 0; }
.odj-filter-group:last-of-type { border-bottom: 0; }
.odj-filter-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--odj-ink);
  font-weight: 500;
}
.odj-filter-summary::-webkit-details-marker { display: none; }
.odj-filter-summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.4px solid var(--odj-ink);
  border-bottom: 1.4px solid var(--odj-ink);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.odj-filter-group[open] > .odj-filter-summary::after { transform: rotate(-135deg); margin-top: 3px; }
.odj-filter-body { padding-bottom: 0.6rem; }
.odj-filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--odj-bg);
  border: 1px solid var(--odj-border);
  margin-bottom: 0.6rem;
  color: var(--odj-muted);
}
.odj-filter-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-size: 0.82rem;
  color: var(--odj-ink);
  outline: none;
  min-width: 0;
}
.odj-filter-search-input::placeholder { color: var(--odj-muted-2); }
.odj-filter-list { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; }
.odj-filter-list::-webkit-scrollbar { width: 4px; }
.odj-filter-list::-webkit-scrollbar-thumb { background: var(--odj-border); }
.odj-filter-item { padding: 0; }
.odj-filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.4rem 0;
  cursor: pointer;
  user-select: none;
}
.odj-filter-check input { position: absolute; opacity: 0; pointer-events: none; }
.odj-filter-check-mark {
  width: 16px; height: 16px;
  border: 1.4px solid var(--odj-border);
  background: var(--odj-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  position: relative;
}
.odj-filter-check-mark::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 1.6px solid var(--odj-white);
  border-bottom: 1.6px solid var(--odj-white);
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.18s ease;
}
.odj-filter-check input:checked + .odj-filter-check-mark { background: var(--odj-ink); border-color: var(--odj-ink); }
.odj-filter-check input:checked + .odj-filter-check-mark::after { transform: rotate(-45deg) scale(1); }
.odj-filter-check-label {
  flex: 1;
  font-family: 'Lato', sans-serif;
  font-size: 0.86rem;
  color: var(--odj-ink);
  line-height: 1.3;
}
.odj-filter-check-count {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  color: var(--odj-muted-2);
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}
.odj-filter-check input:checked ~ .odj-filter-check-label { color: var(--odj-ochre); }
.odj-filter-color .odj-filter-color-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.4px solid var(--odj-border);
  flex-shrink: 0;
  background: var(--odj-bg-2);
  margin-left: 0;
}
.odj-filter-color input:checked + .odj-filter-color-dot { border-color: var(--odj-ochre); }
.odj-filter-color-dot[data-color="negro"]     { background: #1c1a17; }
.odj-filter-color-dot[data-color="havana"]    { background: #6e4a2a; }
.odj-filter-color-dot[data-color="azul"]      { background: #2a4a6e; }
.odj-filter-color-dot[data-color="dorado"]   { background: #c5a572; }
.odj-filter-color-dot[data-color="plata"]    { background: #c8c5be; }
.odj-filter-color-dot[data-color="marrón"],
.odj-filter-color-dot[data-color="marron"]   { background: #6a4a32; }
.odj-filter-color-dot[data-color="rosa"]     { background: #d8a3a3; }
.odj-filter-color-dot[data-color="verde"]    { background: #4a6a4a; }
.odj-filter-color-dot[data-color="oro rosa"] { background: linear-gradient(135deg, #d8b07a 0%, #c89060 100%); }
.odj-filter-color-dot[data-color="rojo"]     { background: #a83838; }
.odj-filter-range { display: flex; flex-direction: column; gap: 0.4rem; }
.odj-filter-range-inputs { display: flex; align-items: center; gap: 8px; }
.odj-filter-range-sep { color: var(--odj-muted-2); }
.odj-filter-range-hint { font-family: 'Lato', sans-serif; font-size: 0.72rem; color: var(--odj-muted); }
.odj-input-sm { padding: 0.6rem 0.7rem; font-size: 0.85rem; }
.odj-filter-actions { margin-top: 1.2rem; }
.odj-filter-submit { width: 100%; justify-content: center; padding: 12px 18px; font-size: 0.7rem; }
@media (max-width: 991.98px) {
  .odj-filter-sidebar { position: static; max-height: none; }
}

/* Pagination */
.odj-pagination { display: inline-flex; align-items: center; gap: 4px; font-family: 'Lato', sans-serif; }
.odj-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  color: var(--odj-ink);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.odj-page-btn:hover { background: var(--odj-ink); color: var(--odj-bg); border-color: var(--odj-ink); }
.odj-page-btn.is-active { background: var(--odj-ink); color: var(--odj-bg); border-color: var(--odj-ink); }
.odj-page-btn.is-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.odj-page-dots { padding: 0 6px; color: var(--odj-muted); font-size: 0.82rem; }

/* Category page layout */
.odj-page-hero.odj-page-hero-sm { min-height: 36vh; padding: 8rem 0 4rem; }
@media (max-width: 991.98px) {
  .odj-page-hero.odj-page-hero-sm { min-height: 32vh; padding: 6rem 0 3rem; }
}
.odj-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--odj-border);
  margin-top: -1rem;
}
.odj-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1.2rem 1.2rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.odj-cat-tab:hover { color: var(--odj-ink); }
.odj-cat-tab.is-active { color: var(--odj-ink); border-bottom-color: var(--odj-ink); }
.odj-cat-tab-count {
  font-size: 0.62rem;
  color: var(--odj-muted-2);
  background: var(--odj-bg-2);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.odj-cat-tab.is-active .odj-cat-tab-count { background: var(--odj-ink); color: var(--odj-bg); }

.odj-cat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.4rem;
  align-items: start;
}
@media (max-width: 991.98px) { .odj-cat-layout { grid-template-columns: 1fr; } }
.odj-cat-sidebar { min-width: 0; }
.odj-cat-content { min-width: 0; }

.odj-empty {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
}
.odj-offcanvas .odj-filter-sidebar {
  position: static;
  max-height: none;
  border: 0;
  padding: 0;
  background: transparent;
}
.odj-offcanvas .offcanvas-header { padding: 1.5rem 1.5rem 0.5rem; border-bottom: 1px solid var(--odj-border); }
.odj-offcanvas .offcanvas-body { padding: 1.5rem; }

/* Hub /productos */
.odj-cat-feature {
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.odj-cat-feature:hover { border-color: var(--odj-ochre); box-shadow: 0 12px 32px rgba(28,26,23,0.06); }
.odj-cat-feature-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
  color: inherit;
}
.odj-cat-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-cat-feature:hover .odj-cat-feature-img img { transform: scale(1.05); }
.odj-cat-feature-img::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.odj-cat-feature-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem;
  color: var(--odj-white);
}
.odj-cat-feature-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-bg-2);
  margin-bottom: 0.4rem;
}
.odj-cat-feature-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  color: var(--odj-white);
  line-height: 1.1;
  margin: 0 0 0.4rem;
  transition: color 0.25s ease;
}
.odj-cat-feature:hover .odj-cat-feature-name { color: var(--odj-ochre); }
.odj-cat-feature-meta {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  color: var(--odj-muted-2);
  margin-bottom: 0.8rem;
}
.odj-cat-feature-cta {
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-white);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 4px;
  transition: border-color 0.25s ease;
}
.odj-cat-feature:hover .odj-cat-feature-cta { border-bottom-color: var(--odj-ochre); }
.odj-cat-feature-preview { padding: 1rem 1.2rem 1.2rem; }
.odj-cat-feature-thumb {
  display: block;
  aspect-ratio: 1/1;
  background: var(--odj-bg-2);
  overflow: hidden;
  border: 1px solid var(--odj-border);
}
.odj-cat-feature-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.odj-cat-feature-thumb:hover img { transform: scale(1.05); }

.odj-cat-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.odj-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--odj-ink);
  text-decoration: none;
  transition: all 0.25s ease;
}
.odj-cat-pill span {
  font-size: 0.7rem;
  color: var(--odj-muted);
  background: var(--odj-bg-2);
  padding: 2px 7px;
  border-radius: 999px;
}
.odj-cat-pill:hover { background: var(--odj-ink); color: var(--odj-bg); border-color: var(--odj-ink); }
.odj-cat-pill:hover span { background: var(--odj-ochre); color: var(--odj-white); }

.odj-brand-card {
  display: flex;
  flex-direction: column;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  padding: 1.6rem 1rem;
  text-decoration: none;
  color: inherit;
  text-align: center;
  height: 100%;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.odj-brand-card:hover { border-color: var(--odj-ochre); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28,26,23,0.06); }
.odj-brand-card-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin-bottom: 0.8rem;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.odj-brand-card:hover .odj-brand-card-logo { filter: grayscale(0); opacity: 1; }
.odj-brand-card-logo img { max-height: 60px; max-width: 80%; object-fit: contain; }
.odj-brand-card-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--odj-ink);
  letter-spacing: 0.04em;
}
.odj-brand-card-name {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--odj-ink);
}
.odj-brand-card-meta { text-align: center; }
.odj-brand-card-count {
  font-family: 'Lato', sans-serif;
  font-size: 0.66rem;
  color: var(--odj-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.odj-coll-card {
  display: block;
  position: relative;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.odj-coll-card:hover { border-color: var(--odj-ochre); box-shadow: 0 12px 28px rgba(28,26,23,0.06); }
.odj-coll-card-img {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.odj-coll-card:hover .odj-coll-card-img { transform: scale(1.04); }
.odj-coll-card-body { padding: 1rem 1rem 1.2rem; text-align: center; }
.odj-coll-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--odj-ink);
  margin-bottom: 0.4rem;
  line-height: 1.1;
}
.odj-coll-card-cta {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--odj-ochre);
}

/* Search form (page) */
.odj-search-form-page {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--odj-white);
  border: 1px solid var(--odj-border);
  padding: 8px 8px 8px 18px;
  color: var(--odj-muted);
}
.odj-search-form-page input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.9rem 0.4rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: var(--odj-ink);
  outline: none;
  min-width: 0;
}
.odj-search-form-page input::placeholder { color: var(--odj-muted-2); }
.odj-search-form-page button { padding: 14px 28px; font-size: 0.72rem; }

/* Active filter link highlight (chips) */
.odj-filter-check input:focus-visible + .odj-filter-check-mark { outline: 2px solid var(--odj-ochre); outline-offset: 2px; }
.odj-chip:focus-visible { outline: 2px solid var(--odj-ochre); outline-offset: 2px; }
.odj-page-btn:focus-visible, .odj-view-btn:focus-visible, .odj-toolbar-sort-select:focus-visible { outline: 2px solid var(--odj-ochre); outline-offset: 2px; }