/*
 * Theme contract shared by every public catalog template.
 *
 * Templates keep their layout and decorative treatment; this file only maps
 * the configurable CatalogPage tokens to common UI roles.  It is loaded last
 * so a template cannot accidentally replace a saved theme with a hard-coded
 * color.
 */
.cpage-body {
  background-color: var(--cpage-background) !important;
}

.cpage-body h1,
.cpage-body .cpage-title {
  color: var(--cpage-main-title-color) !important;
  font-family: var(--cpage-headings-font) !important;
  position: relative;
  z-index: 30;
}

/* Keep hero copy over product, cover and scene-image layers in every template. */
.cpage-body :is(.tpl1-hero__copy, .tpl2-hero__copy, .tpl3-hero__copy, .tpl4-hero__copy, .tpl5-hero__content, .cpage-hero-content, .cpage-editorial-hero__copy, .cpage-neo-hero__copy, .cpage-sunset-hero__copy, .cshowcase-copy-stack) {
  position: relative;
  translate: 0 var(--cpage-main-title-offset-y, 0px);
  z-index: 20 !important;
}

/* Hero-logo controls apply only to templates 1 and 2. */
.catalog-hero-logo--hidden:is(.catalog-template--template_1, .catalog-template--template_2) .tpl1-hero-logo {
  display: none !important;
}

.catalog-hero-logo--visible:is(.catalog-template--template_1, .catalog-template--template_2) .tpl1-hero-logo {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: min(46vw, 260px) !important;
  height: min(46vw, 260px) !important;
  margin: 0 0 12px !important;
  place-items: center !important;
  translate: var(--cpage-hero-logo-offset-x, 0rem) var(--cpage-hero-logo-offset-y, 0rem) !important;
  z-index: 31 !important;
}

.catalog-hero-logo--visible.catalog-template--template_2 .tpl1-hero-logo {
  border-radius: 0 !important;
  overflow: visible !important;
}

.catalog-hero-logo--visible:is(.catalog-template--template_1, .catalog-template--template_2) .tpl1-hero-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* The navbar icon is independent from the optional hero logo. */
.catalog-template--template_1 .tpl1-brand__mark--nav-hidden,
.catalog-template--template_2 .tpl2-brand__mark--nav-hidden,
.cpage-body :is(.tpl3-brand__mark--nav-hidden, .tpl4-brand__mark--nav-hidden, .tpl5-brand__mark--nav-hidden) {
  display: none !important;
}

/* Template styles hide the mark on desktop; the navbar toggle can opt back in. */
.catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden),
.catalog-template--template_2 .tpl2-brand__mark:not(.tpl2-brand__mark--nav-hidden),
.cpage-body :is(.tpl3-brand__mark:not(.tpl3-brand__mark--nav-hidden), .tpl4-brand__mark:not(.tpl4-brand__mark--nav-hidden), .tpl5-brand__mark:not(.tpl5-brand__mark--nav-hidden)) {
  display: grid !important;
}

.catalog-template--template_1 .tpl1-brand__text,
.catalog-template--template_2 .tpl2-brand__text,
.cpage-body :is(.tpl3-brand__text, .tpl4-brand__text, .tpl5-brand__text) {
  color: var(--cpage-nav-title, var(--cpage-nav-text)) !important;
}

@media (min-width: 900px) {
  .catalog-template--template_1 .tpl1-brand__mark.tpl1-brand__mark--desktop-hidden,
  .catalog-template--template_2 .tpl2-brand__mark.tpl2-brand__mark--desktop-hidden {
    display: none !important;
  }
  .cpage-body :is(.tpl3-brand__mark--desktop-hidden, .tpl4-brand__mark--desktop-hidden, .tpl5-brand__mark--desktop-hidden) {
    display: none !important;
  }
}

@media (max-width: 899.98px) {
  .catalog-template--template_1 .tpl1-brand__mark.tpl1-brand__mark--mobile-hidden,
  .catalog-template--template_2 .tpl2-brand__mark.tpl2-brand__mark--mobile-hidden {
    display: none !important;
  }
  .cpage-body :is(.tpl3-brand__mark--mobile-hidden, .tpl4-brand__mark--mobile-hidden, .tpl5-brand__mark--mobile-hidden) {
    display: none !important;
  }
}

/* Template 1 navigation mirrors the proven Template 2 navigation contract. */
.catalog-template--template_1 .tpl1-header,
.catalog-template--template_2 .tpl1-header {
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(78, 58, 34, 0.08) !important;
  min-height: 58px !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
}

.catalog-template--template_1 .tpl1-header__inner,
.catalog-template--template_2 .tpl1-header__inner {
  align-items: center !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) !important;
  margin: 0 auto !important;
  min-height: 58px !important;
  padding: 8px 12px !important;
  width: min(1180px, calc(100% - 24px)) !important;
}

.catalog-template--template_1 .tpl1-brand,
.catalog-template--template_2 .tpl1-brand {
  align-items: center !important;
  display: inline-flex !important;
  gap: 10px !important;
  min-width: 0 !important;
  transform: none !important;
}

.catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden),
.catalog-template--template_2 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) {
  flex: 0 0 64px !important;
  height: 64px !important;
  width: 64px !important;
}

.catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img,
.catalog-template--template_2 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img {
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

.catalog-template--template_1 .tpl1-brand__text,
.catalog-template--template_2 .tpl1-brand__text {
  display: inline !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.catalog-template--template_1 .tpl1-nav,
.catalog-template--template_2 .tpl1-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  transform: none !important;
  width: auto !important;
}

.catalog-template--template_1 .tpl1-nav a,
.catalog-template--template_2 .tpl1-nav a {
  align-items: center !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  text-align: center !important;
}

/* On phones, the brand mark belongs exclusively in the navigation bar.
 *
 * The core/template styles include landscape rules that can restore the hero
 * logo with display:grid. Keep this as the final, high-specificity responsive
 * contract so both phone orientations remain navbar-only.
 */
@media (max-width: 899.98px) and (orientation: portrait),
       (max-width: 899.98px) and (orientation: landscape) {
  .cpage-body:is(.catalog-template--template_1, .catalog-template--template_2) .tpl1-hero-logo {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    width: 0 !important;
  }
}

/* Match the production hero-logo scale and placement for templates 1 and 2. */
@media (min-width: 900px) {
  .catalog-hero-logo--visible:is(.catalog-template--template_1, .catalog-template--template_2) .tpl1-hero-logo {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: min(34vw, 400px) !important;
    height: min(34vw, 400px) !important;
    left: min(50%, 320px) !important;
    margin: 0 !important;
    outline: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    place-items: center !important;
    position: absolute !important;
    top: clamp(-370px, -29vw, -270px) !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

}

/* Template 2 uses the shared template-1 navbar markup. Keep its mobile logo
 * at the same compact size as template 1 instead of inheriting the oversized
 * template-2 mark treatment. */
@media (max-width: 899.98px) {
  .catalog-template--template_2 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) {
    flex: 0 0 54px !important;
    height: 54px !important;
    width: 54px !important;
  }

  .catalog-template--template_2 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img {
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    width: 100% !important;
  }
}

/* The restaurant name in both nav variants follows the configured nav text
 * color from “Editar datos básicos”. */
.catalog-template--template_1 .tpl1-brand__text,
.catalog-template--template_2 .tpl2-brand__text {
  color: var(--cpage-nav-title, var(--cpage-nav-text)) !important;
}

/* Use the full viewport width for both phone orientations. */
@media (max-width: 899.98px) {
  .catalog-template--template_1 .tpl1-header__inner,
  .catalog-template--template_2 .tpl1-header__inner {
    border-radius: 0 !important;
    margin-inline: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}

.cpage-body h2,
.cpage-body h3,
.cpage-body h4,
.cpage-body h5,
.cpage-body h6,
.cpage-body .cpage-rail__title {
  color: var(--cpage-subheadings-color) !important;
  font-family: var(--cpage-headings-font) !important;
}

.cpage-body p,
.cpage-body .description,
.cpage-body .item-description,
.cpage-body .catalog-item-description {
  color: var(--cpage-body-color) !important;
}

/* Cards use their own text token without requiring a rule per template. */
.cpage-body [class*="card"] :is(h2, h3, h4, h5, h6, p, strong, span, a),
.cpage-body [class*="item"] :is(h2, h3, h4, h5, h6, p, strong, span) {
  color: var(--cpage-card-text-color) !important;
  font-family: var(--cpage-headings-font);
}

/* The product title in template 2 has its own configurable carousel color. */
.catalog-template--template_2 .tpl1-hero-product__body h2 {
  color: var(--cpage-hero-category-carousel-color) !important;
}

/* Header backgrounds and navigation text share one token across templates. */
.cpage-body :is(.tpl1-header__inner, .tpl2-header__inner, .tpl3-header__inner, .tpl4-header__inner, .tpl5-header__inner, .cshowcase-topbar) {
  background-color: var(--cpage-nav-bg) !important;
}

/* One reusable navbar contract for every catalog template. */
.cpage-body .catalog-shared-nav {
  box-sizing: border-box !important;
  margin: 0 !important;
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 45 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(78, 58, 34, 0.08) !important;
  backdrop-filter: blur(var(--cpage-nav-blur, 18px)) !important;
}

.cpage-body .catalog-shared-nav .tpl2-header__inner {
  align-items: center !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto !important;
  margin: 0 auto !important;
  min-height: 64px !important;
  padding: 8px 12px !important;
  width: min(1180px, calc(100% - 24px)) !important;
  background-color: color-mix(in srgb, var(--cpage-nav-bg) var(--cpage-nav-opacity, 100%), transparent) !important;
}

.cpage-body.catalog-nav-opacity--zero .catalog-shared-nav .tpl2-header__inner {
  background-color: transparent !important;
}

.cpage-body.catalog-nav-opacity--zero .catalog-shared-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

.cpage-body.catalog-nav-blur--zero .catalog-shared-nav {
  backdrop-filter: none !important;
}

@media (min-width: 900px) {
  .cpage-body .catalog-shared-nav {
    background-color: color-mix(in srgb, var(--cpage-nav-bg) var(--cpage-nav-opacity, 100%), transparent) !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-header__inner {
    background-color: transparent !important;
  }
}

/* Template 2 must keep the document as the vertical scroll container. */
html:has(body.catalog-template--template_2),
body.catalog-template--template_2,
body.catalog-template--template_2 .tpl2-page {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

/* Template 2 reuses Template 1's carousel, but keeps its configured scene layers. */
body.catalog-template--template_2 .tpl2-scene-layers {
  border-radius: 34px;
  bottom: -8.5rem;
  left: -60rem;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 1.5rem;
  top: 3.5rem;
  z-index: 0;
}

body.catalog-template--template_2 .tpl2-scene-layer {
  animation-duration: 1.05s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.18, .9, .22, 1);
  inset: 0;
  opacity: 0;
  position: absolute;
  --tpl2-layer-rest-transform: translateX(-50%);
  --tpl2-layer-enter-transform: translateX(-50%);
}

body.catalog-template--template_2 .tpl2-scene-layer img {
  display: block;
  height: 100%;
  width: 100%;
}

body.catalog-template--template_2 .tpl2-scene-layer--background {
  bottom: auto;
  height: 105vh;
  left: calc(-150% - 1.5vw);
  max-width: none;
  min-width: 101.5vw;
  position: fixed;
  right: auto;
  top: 0;
  transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(2.5rem + var(--tpl2-layer-background-offset-y, 0rem)));
  width: 101.5vw;
  --tpl2-layer-rest-transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(-2.5rem + var(--tpl2-layer-background-offset-y, 0rem)));
  --tpl2-layer-enter-transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(-18.5rem + var(--tpl2-layer-background-offset-y, 0rem))) scale(1.03);
  animation-delay: .6s;
  animation-name: tpl2-scene-enter-top;
  z-index: -5;
}

body.catalog-template--template_2 .tpl2-scene-layer--background img {
  animation: tpl2-scene-sway 14s ease-in-out infinite;
  object-fit: fill;
  object-position: center bottom;
  transform-origin: center bottom;
}

body.catalog-template--template_2 .tpl2-scene-layer--middle {
  bottom: calc(-40px + var(--tpl2-layer-middle-offset-y, 0px));
  left: calc(40% + var(--tpl2-layer-middle-offset-x, 0%));
  top: 2%;
  transform: translateX(-50%) translateY(-10rem);
  width: min(78%, 980px);
  --tpl2-layer-rest-transform: translateX(-50%) translateY(-15rem);
  --tpl2-layer-enter-transform: translateX(calc(-50% - 52rem)) translateY(-15rem) scale(.62);
  animation-delay: .34s;
  animation-duration: 2.6s;
  animation-name: tpl2-scene-enter-depth;
  z-index: 2;
}

body.catalog-template--template_2 .tpl2-scene-layer--middle img {
  animation: tpl2-scene-float 6.6s ease-in-out infinite;
  object-fit: contain;
  object-position: center bottom;
}

body.catalog-template--template_2 .tpl2-scene-layer--front {
  bottom: -4.5rem;
  left: 38%;
  top: auto;
  transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(var(--tpl2-layer-front-offset-y, 0rem));
  width: min(78%, 980px);
  --tpl2-layer-rest-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(var(--tpl2-layer-front-offset-y, 0rem));
  --tpl2-layer-enter-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(calc(26rem + var(--tpl2-layer-front-offset-y, 0rem)));
  animation-delay: 0s;
  animation-duration: 1.35s;
  animation-name: tpl2-scene-enter-bottom;
  z-index: 3;
}

body.catalog-template--template_2 .tpl2-scene-layer--front img {
  animation: tpl2-scene-float-opposite 7.4s ease-in-out infinite;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

@keyframes tpl2-scene-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes tpl2-scene-float-opposite {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes tpl2-scene-sway {
  0%, 100% { transform: translateY(0) scale(1.01); }
  50% { transform: translateY(-8px) scale(1.018); }
}

@keyframes tpl2-scene-enter-bottom {
  0% { opacity: 0; transform: var(--tpl2-layer-enter-transform); }
  100% { opacity: 1; transform: var(--tpl2-layer-rest-transform); }
}

@keyframes tpl2-scene-enter-depth {
  0% { filter: blur(6px); opacity: 0; transform: var(--tpl2-layer-enter-transform); }
  100% { filter: blur(0); opacity: 1; transform: var(--tpl2-layer-rest-transform); }
}

@keyframes tpl2-scene-enter-top {
  0% { opacity: 0; transform: var(--tpl2-layer-enter-transform); }
  100% { opacity: 1; transform: var(--tpl2-layer-rest-transform); }
}

@media (max-width: 767.98px) {
  body.catalog-template--template_2 .tpl2-scene-layers {
    border-radius: 24px;
    bottom: 1rem;
    left: -60rem;
    right: 1rem;
    top: 1rem;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--background {
    height: 100vh;
    left: 0;
    min-width: 100vw;
    width: 100vw;
    transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(-1rem + var(--tpl2-layer-background-offset-y, 0rem)));
    --tpl2-layer-rest-transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(-1rem + var(--tpl2-layer-background-offset-y, 0rem)));
    --tpl2-layer-enter-transform: translateX(var(--tpl2-layer-background-offset-x, 0rem)) translateY(calc(-13rem + var(--tpl2-layer-background-offset-y, 0rem))) scale(1.03);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    bottom: var(--tpl2-layer-middle-offset-y, 0px);
    left: calc(42% + var(--tpl2-layer-middle-offset-x, 0%));
    top: 10%;
    transform: translateX(-50%);
    width: min(104%, 680px);
    --tpl2-layer-rest-transform: translateX(-50%);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 28rem)) scale(.72);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    bottom: -.75rem;
    left: 42%;
    width: min(94%, 620px);
    --tpl2-layer-rest-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(var(--tpl2-layer-front-offset-y, 0rem));
    --tpl2-layer-enter-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(calc(18rem + var(--tpl2-layer-front-offset-y, 0rem)));
    transform: var(--tpl2-layer-rest-transform);
  }
}

@media (max-width: 767.98px) and (orientation: landscape) {
  body.catalog-template--template_2 .tpl2-scene-layers {
    inset: 0;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--background {
    height: 100dvh;
    left: -1.5vw;
    min-width: 101.5vw;
    width: 101.5vw;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    bottom: -1rem;
    left: calc(40% + var(--tpl2-layer-middle-offset-x, 0%));
    position: fixed;
    top: 3%;
    transform: translateX(-50%) translateY(-4rem);
    width: min(50vw, 430px);
    --tpl2-layer-rest-transform: translateX(-50%) translateY(-4rem);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 18rem)) translateY(-4rem) scale(.74);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    bottom: -.75rem;
    left: 50%;
    position: fixed;
    width: min(42vw, 360px);
    --tpl2-layer-rest-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(var(--tpl2-layer-front-offset-y, 0rem));
    --tpl2-layer-enter-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(calc(10rem + var(--tpl2-layer-front-offset-y, 0rem))) scale(.86);
    transform: var(--tpl2-layer-rest-transform);
  }
}

.cpage-body .catalog-shared-nav .tpl2-brand {
  align-items: center !important;
  display: inline-flex !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.cpage-body .catalog-shared-nav .tpl2-brand__mark:not(.tpl2-brand__mark--nav-hidden) {
  background: linear-gradient(145deg, #fff2cf, var(--cpage-primary)) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(81, 57, 28, 0.14) !important;
  display: grid !important;
  flex: 0 0 42px !important;
  height: 42px !important;
  overflow: hidden !important;
  place-items: center !important;
  width: 42px !important;
}

.cpage-body .catalog-shared-nav .tpl2-brand__mark img {
  height: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

.cpage-body .catalog-shared-nav .tpl2-brand__text {
  color: var(--cpage-nav-title, var(--cpage-nav-text)) !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cpage-body .catalog-shared-nav .tpl2-nav {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.cpage-body .catalog-shared-nav .tpl2-nav a {
  align-items: center !important;
  border-radius: 999px !important;
  color: var(--cpage-nav-text) !important;
  display: inline-flex !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  text-decoration: none !important;
}

.cpage-body .catalog-shared-nav .tpl2-header__cta {
  align-items: center !important;
  background: linear-gradient(135deg, var(--cpage-primary), var(--cpage-secondary)) !important;
  border-radius: 999px !important;
  color: #fff !important;
  display: inline-flex !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

@media (max-width: 899.98px) {
  .cpage-body .catalog-shared-nav .tpl2-header__inner {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    width: calc(100% - 16px) !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-nav {
    display: grid !important;
    gap: 4px !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-nav a {
    font-size: clamp(.66rem, 2.5vw, .8rem) !important;
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-brand {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-header__cta {
    max-width: 118px !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 899.98px) and (orientation: portrait) {
  .cpage-body .catalog-shared-nav .tpl2-header__inner {
    align-items: center !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-brand {
    gap: 0 !important;
    grid-column: 1 !important;
    grid-template-columns: 42px auto !important;
    width: auto !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-brand__text {
    display: none !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-nav {
    align-items: center !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
}

/* Landscape: keep the shared Template 2 navbar on one compact row. */
@media (max-width: 899.98px) and (orientation: landscape) {
  .cpage-body .catalog-shared-nav .tpl2-header__inner {
    align-items: center !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
    min-height: 58px !important;
    padding: 6px 8px !important;
    width: calc(100% - 16px) !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-brand {
    display: inline-flex !important;
    gap: 8px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: min(32vw, 240px) !important;
    width: auto !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-brand__text {
    display: inline !important;
    font-size: clamp(.78rem, 1.8vw, .98rem) !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-nav {
    align-items: center !important;
    display: grid !important;
    gap: 4px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-nav a {
    font-size: clamp(.62rem, 1.55vw, .8rem) !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
  }

  .cpage-body .catalog-shared-nav .tpl2-header__cta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-height: 34px !important;
    max-width: 86px !important;
    padding: 0 8px !important;
    font-size: .64rem !important;
  }
}

/* Final visibility overrides: these must win over the shared mark display rule. */
@media (max-width: 899.98px) {
  .cpage-body .catalog-shared-nav .tpl2-brand__mark.tpl2-brand__mark--mobile-hidden:not(.tpl2-brand__mark--nav-hidden) {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .cpage-body .catalog-shared-nav .tpl2-brand__mark.tpl2-brand__mark--desktop-hidden:not(.tpl2-brand__mark--nav-hidden) {
    display: none !important;
  }
}

/* Mobile landscape uses native document scrolling, never section snapping. */
@media (max-width: 899.98px) and (orientation: landscape) {
  body.catalog-template--template_2 {
    overscroll-behavior-y: auto !important;
    scroll-snap-type: none !important;
  }

  html:has(body.catalog-template--template_2) {
    overscroll-behavior-y: auto !important;
  }

  body.catalog-template--template_2 [data-tpl2-snap-section] {
    min-height: auto !important;
    scroll-margin-top: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}

.cpage-body :is(.tpl1-nav, .tpl2-nav, .tpl3-nav, .tpl4-nav, .tpl5-nav, .cshowcase-topnav) a,
.cpage-body :is(.tpl1-brand, .tpl2-brand, .tpl3-brand, .tpl4-brand, .tpl5-brand, .cshowcase-brand) {
  color: var(--cpage-nav-text) !important;
}

/* Template 1 desktop navigation spans the full viewport. */
@media (min-width: 900px) {
  .catalog-template--template_1 .tpl1-header {
    background: var(--cpage-nav-bg) !important;
    padding: 0 !important;
  }

  .catalog-template--template_1 .tpl1-header__inner {
    border-radius: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Shared desktop logo treatment: the complete image, as in template 1. */
  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 0 0 90px !important;
    height: 90px !important;
    overflow: visible !important;
    width: 90px !important;
  }

  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img {
    border-radius: 0 !important;
    height: 100% !important;
    left: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  .catalog-template--template_1 .tpl1-brand__text,
  .catalog-template--template_1 .tpl1-nav a {
    color: #1f1f1f !important;
  }
}

/* Category chips, carousel controls and pills intentionally use one pair of tokens. */
.cpage-body :is(.tpl1-category-nav, .tpl2-category-nav, .tpl3-category-nav, .tpl4-category-nav, .tpl5-category-nav) a,
.cpage-body :is(.cpage-category-pill, .cpage-chip, .cpage-carousel__nav, .cshowcase-category-pill) {
  background: var(--cpage-category-button-bg) !important;
  color: var(--cpage-category-button-text) !important;
}

/* Reuse the primary color pair for the main CTA independently of its template. */
.cpage-body :is(.tpl1-btn--primary, .tpl2-btn--primary, .tpl3-btn--primary, .tpl4-btn--primary, .tpl5-btn--primary, .tpl1-header__cta, .tpl2-header__cta, .tpl3-header__cta, .tpl4-header__cta, .cpage-btn-primary, .cshowcase-btn--primary, .cshowcase-item-card__cta, .cshowcase-mobile-cta) {
  background: linear-gradient(135deg, var(--cpage-primary), var(--cpage-secondary)) !important;
  color: #fff !important;
}

/* Thin desktop navigation, matching the published catalog reference. */
@media (min-width: 900px) {
  .catalog-template--template_1 .tpl1-header__inner {
    min-height: 50px !important;
    padding: 6px 12px !important;
  }

  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) {
    flex: 0 0 42px !important;
    height: 42px !important;
    position: relative !important;
    width: 42px !important;
  }

  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img {
    height: 120px !important;
    left: 50% !important;
    max-width: none !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 120px !important;
  }

  .catalog-template--template_1 .tpl1-brand__text {
    font-size: .92rem !important;
    font-weight: 800 !important;
  }

  .catalog-template--template_1 .tpl1-nav a {
    min-height: 0 !important;
    padding: 0 8px !important;
  }

  .catalog-template--template_2 .tpl1-brand {
    gap: 20px !important;
    transform: translateX(10px) !important;
  }

  /* Smaller logo only; navigation dimensions remain unchanged. */
  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) {
    flex-basis: 28px !important;
    height: 28px !important;
    width: 28px !important;
  }

  .catalog-template--template_1 .tpl1-brand__mark:not(.tpl1-brand__mark--nav-hidden) img {
    height: 67px !important;
    width: 67px !important;
  }

  .catalog-template--template_1 .tpl1-header__inner {
    position: relative !important;
  }

  .catalog-template--template_1 .tpl1-nav {
    justify-content: center !important;
    justify-self: auto !important;
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
  }
}

/* Phones such as the Galaxy A51 report more than 768 CSS pixels in landscape.
 * Keep their scene in the mobile composition instead of the tablet one. */
@media (min-width: 900px) and (max-width: 930px) and (min-height: 400px) and (max-height: 430px) and (orientation: landscape) {
  body.catalog-template--template_2 .tpl2-scene-layers {
    inset: 0;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--background {
    left: -1.5vw;
    width: 101.5vw;
    min-width: 101.5vw;
    height: 100dvh;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    position: fixed;
    top: 3%;
    bottom: -1rem;
    left: calc(55% + var(--tpl2-layer-middle-offset-x, 0%));
    width: min(48vw, 430px);
    transform: translateX(-50%);
    --tpl2-layer-rest-transform: translateX(-50%);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 18rem)) scale(.74);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    position: fixed;
    bottom: 4rem;
    left: 50%;
    width: min(42vw, 360px);
    --tpl2-layer-rest-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(var(--tpl2-layer-front-offset-y, 0rem));
    --tpl2-layer-enter-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x, 0rem))) translateY(calc(10rem + var(--tpl2-layer-front-offset-y, 0rem))) scale(.86);
    transform: var(--tpl2-layer-rest-transform);
  }
}

/* Landscape phones use the same continuous document scroll as Template 1. */
@media (min-width: 560px) and (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  body.catalog-template--template_2 {
    overscroll-behavior-y: auto !important;
    scroll-snap-type: none !important;
  }

  html:has(body.catalog-template--template_2) {
    overscroll-behavior-y: auto !important;
  }

  body.catalog-template--template_2 [data-tpl2-snap-section],
  body.catalog-template--template_2 .catalog-hero-panorama[data-tpl2-snap-section],
  body.catalog-template--template_2 .catalog-hero-panorama[data-tpl2-snap-section] .tpl1-hero {
    min-height: auto !important;
    scroll-margin-top: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  body.catalog-template--template_2 .catalog-hero-panorama[data-tpl2-snap-section] {
    display: block !important;
  }
}

/* Small landscape phones need a compact, fully visible hero title. */
@media (min-width: 560px) and (max-width: 899.98px) and (max-height: 399px) and (orientation: landscape) {
  /* Keep the boat and dock clear of the lower product cards on short phones. */
  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    transform: translateX(-50%) translateY(-7.5rem);
    --tpl2-layer-rest-transform: translateX(-50%) translateY(-7.5rem);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 18rem)) translateY(-7.5rem) scale(0.74);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    bottom: 3.5rem;
  }

  body.catalog-template--template_2 .tpl1-hero__copy {
    top: 4rem !important;
    width: min(44%, 310px) !important;
    z-index: 20 !important;
  }

  body.catalog-template--template_2 .tpl1-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.35rem) !important;
    line-height: .9 !important;
  }

  body.catalog-template--template_2 .tpl1-eyebrow,
  body.catalog-template--template_2 .tpl1-headline {
    margin-top: .35rem !important;
  }
}

/* iPhone 12 Pro landscape: restore the centered desktop-style scene composition. */
@media (min-width: 830px) and (max-width: 860px) and (min-height: 375px) and (max-height: 405px) and (orientation: landscape) {
  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    top: 3%;
    bottom: -1rem;
    left: calc(55% + var(--tpl2-layer-middle-offset-x, 0%));
    width: min(50vw, 430px);
    transform: translateX(-50%) translateY(-2.5rem);
    --tpl2-layer-rest-transform: translateX(-50%) translateY(-2.5rem);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 18rem)) translateY(-2.5rem) scale(0.74);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    bottom: 1.5rem;
    left: 50%;
    width: min(42vw, 360px);
  }
}