/* ========= CUSTOM.CSS — FORTEZA 2026 | HELIX ULTIMATE + J2STORE ========= */

/* ========= 01 — DESIGN TOKENS ========= */
/*
 * All color, shadow, and transition values are defined as CSS variables here.
 * Only use these tokens throughout the rest of the file (see DEV_RULES section 4).
 */
:root {
  /* Brand and grayscale palette */
  --fz-white: #ffffff;
  --fz-gray-025: #fafafa;
  --fz-gray-050: #f5f5f5; /* gris UI clave */
  --fz-gray-100: #ededed;
  --fz-gray-150: #e3e3e3;
  --fz-gray-200: #eeeeee;
  --fz-gray-250: #c7c7c7;
  --fz-gray-300: #bdbdbd;
  --fz-gray-400: #aaaaaa;
  --fz-gray-500: #808080;
  --fz-gray-600: #666666;
  --fz-gray-700: #444444;
  --fz-gray-800: #222222;
  --fz-gray-900: #222222;
  --fz-gray-950: #1a1a1a;
  --fz-black: #111111;

  /* Shadows */
  --fz-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --fz-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --fz-shadow-soft: rgba(0, 0, 0, 0.08);

  /* Backgrounds */
  --fz-bg-categories: #fcfefc;
  --fz-bg-subcategories: #f9f9f9;
  --fz-bg-product-surface: #fefefe;
  --fz-footer-icon-stroke: #f7f7f7;

  /* Social brand accents */
  --fz-social-instagram-1: #feda75;
  --fz-social-instagram-2: #fa7e1e;
  --fz-social-instagram-3: #d62976;
  --fz-social-instagram-4: #962fbf;
  --fz-social-instagram-5: #4f5bd5;
  --fz-social-youtube: #ff0000;

  /* Corporate layout tokens */
  --fz-corporate-image-max-h: 50vh;
  --fz-corporate-text-max-w: 900px;
  --fz-corporate-stack-gap: 1.5rem;
  --fz-corporate-hero-focus-y: 10%;
  --fz-corporate-body-gap: 1.5rem;
  --fz-corporate-media-gap: 2rem;

  /* Transitions */
  --fz-transition: all 0.25s ease;
}

/* ========= 02 — LAYOUT FOUNDATION & CONTAINERS ========= */
/*
 * Base layout and container rules for all pages.
 * Grouped by HTML structure: html/body, wrappers, main, containers.
 */
html,
body {
  height: 100%;
}

p {
  margin: unset;
}

.body-wrapper,
.body-innerwrapper {
  min-height: 100vh;
  background-color: var(--fz-gray-025);
}

.body-innerwrapper {
  display: flex;
  flex-direction: column;
}

#sp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#sp-main-body {
  flex: 1;
  padding: 0;
  padding-bottom: 6rem;
}

#sp-mainbody {
  padding-bottom: 6rem;
}

/* Category templates: background variants */
body.fz-categories,
body.fz-categories .body-wrapper,
body.fz-categories .body-innerwrapper {
  background-color: var(--fz-bg-categories);
}

/* Container override: full width up to 1280px */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  max-width: 1280px;
}

.nolink {
  user-select: none;
}

.article-details .article-can-edit {
  /* Hide edit button for articles */
  display: none;
  position: absolute;
  width: 0;
  margin: 0;
  padding: 0;
}

/* ========= 03 — GLOBAL CLEANUP (PAGE CHROME) ========= */
/*
 * Cleanup for page titles, breadcrumbs, and pagination.
 * All selectors are grouped by their HTML structure.
 */
.sp-page-title {
  height: 30dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  background: none;
  color: var(--fz-gray-900);
  background-size: cover;
  background-position: left 50%;
  text-align: center;
  /* background: orange; */
  background-position-x: 10%;
  background-position-y: 50%;
}
.sp-page-title .container,
.sp-page-title .row {
  width: 100%;
  max-width: 1200px;
  margin: 0;
}
.sp-page-title .sp-page-title-heading,
.sp-page-title .sp-page-title-sub-heading,
.sp-page-title .breadcrumb > span,
.sp-page-title .breadcrumb > li,
.sp-page-title .breadcrumb > li > a,
.sp-page-title .breadcrumb > li + li:before {
  color: var(--fz-gray-900);
}
.sp-page-title .sp-page-title-heading {
  /* font-size: clamp(34px, 4vw, 54px); */
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.sp-page-title .sp-page-title-heading > .fz-page-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--fz-transition);
}
.sp-page-title .sp-page-title-heading > .fz-page-title-link:hover {
  color: var(--fz-gray-700);
  border-bottom-color: currentColor;
}
.sp-page-title .sp-page-title-sub-heading {
  font-size: 15px;
  color: var(--fz-gray-600);
  margin-top: 12px;
}
.sp-page-title .breadcrumb > .active {
  color: var(--fz-gray-600);
}
.sp-page-title .breadcrumb {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  margin: 16px 0 0;
  justify-content: center;
}

/* Breadcrumb module wrapper */
.fz-breadcrumbs {
  .breadcrumb {
    border-bottom: solid 1px var(--fz-gray-200);
    background: none;
  }
}

/* Pagination */
.pagination {
  padding: 0;
  justify-content: center;
}

/* Header search input (mod-finder — all pages) */
/*
 * Overrides Bootstrap 2 (minimal-bs.css) injected by J2Store on category/product pages
 */
#mod-finder-searchword-header {
  height: 2.5rem;
  font-size: 1rem;
  padding-inline: 0.75rem;
  line-height: normal;
  margin-bottom: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

/* ========= 04 — PRODUCT DETAIL LAYOUT ========= */

/* ------- Product detail layout rules live in j2store.css (section 05) ------- */

/* ========= 05 — COLOR SWATCH SYSTEM ========= */

/* ------- Color swatch system lives in j2store.css (section 06) ------- */

/* ========= 06 — COMPONENT OVERRIDES (CATEGORY BANNERS) ========= */

.fz-content-bottom__mod p {
  padding: 250px 0;
  color: transparent;
  user-select: none;
}

/* ------- Controls category banner image position and sizing ------- */
.fz-content-bottom__mod .mod-custom {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: bottom;
  background-attachment: fixed;
}

/*  ============ HELIX OVERRIDE ============== */

/*
 * Helix Ultimate generates the desktop nav using .sp-megamenu-wrapper.
 * DOM structure (simplified):
 *
 *   #sp-header
 *     .sp-megamenu-wrapper          ← nav root
 *       ul.sp-megamenu-parent       ← top-level menu list
 *         li.sp-has-child           ← top-level item with submenu (e.g. Drinkware)
 *           > a                     ← top-level link label
 *           .sp-dropdown            ← dropdown positioner (Helix-controlled)
 *             .sp-dropdown-inner    ← floating panel (white box)
 *               ul                  ← submenu list
 *                 li.sp-menu-item   ← individual submenu item
 *                   > a             ← submenu link
 */

/* ------- Nav root: the megamenu wrapper inside #sp-header ------- */
#sp-header .sp-megamenu-wrapper {
  /* ------- Top-level menu list ------- */
  & ul.sp-megamenu-parent {
    /* ------- Top-level item that has a submenu (e.g. Drinkware) ------- */
    & li.sp-has-child {
      /* ------- Floating dropdown panel ------- */
      & .sp-dropdown-inner {
        background-color: var(--fz-white);
        border: 1px solid var(--fz-gray-150);
        border-radius: 6px;
        box-shadow: none;
        padding: 0.5rem 0;
        min-width: 200px;
      }
    }
  }

  /* ------- Individual submenu item: link and non-link labels ------- */
  & li.sp-menu-item {
    & > a,
    & > span {
      /* Typography */
      font-family: "Montserrat", Arial, sans-serif;
      font-size: 0.875rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: var(--fz-gray-700);

      /* Layout */
      display: block;
      padding: 0.6rem 1.25rem;

      /* Interaction */
      transition: color 0.15s ease;
    }

    /* ------- Submenu link: hover and keyboard-focus states ------- */
    & > a {
      &:hover,
      &:focus-visible {
        color: var(--fz-gray-950);
        font-weight: 600;
      }
    }
  }
}

/* ======== JOOMLA NAVIGATION PAGES OVERRIDE   ==========   */

/* ------- Corporate pages (Page class: fz-corporate) ------- */
.fz-corporate.article-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fz-corporate-stack-gap);
}

/* ------- Corporate hero wrapper sourced from Joomla image markup ------- */
.article-details .article-full-image.fz-corporate__hero {
  margin: 0;
  width: 100%;
  height: var(--fz-corporate-image-max-h);
  max-height: var(--fz-corporate-image-max-h);
  overflow: hidden;
  background-image: var(--fz-corporate-hero-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center var(--fz-corporate-hero-focus-y);
  background-attachment: fixed;
}

/* ------- Hide original image only after JS maps src into background-image ------- */
.article-details .article-full-image.fz-corporate__hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--fz-corporate-hero-focus-y);
  opacity: 0;
  pointer-events: none;
}

/* ------- Fallback when no hero mapping class is present ------- */
.fz-corporate .article-full-image:not(.fz-corporate__hero) img,
.fz-corporate img.fz-corporate__img {
  display: block;
  width: 100%;
  height: var(--fz-corporate-image-max-h);
  max-height: var(--fz-corporate-image-max-h);
  object-fit: cover;
  object-position: center var(--fz-corporate-hero-focus-y);
}

/* ------- Corporate title/body centered with readable text measure ------- */
.fz-corporate .article-header,
.fz-corporate [itemprop="articleBody"] {
  width: min(100%, var(--fz-corporate-text-max-w));
  margin: 0;
  text-align: center;
  padding-top: 2rem;
}

.fz-corporate .fz-corporate__title {
  font-size: 1.5rem;
  font-weight: 700;
}

/* ------- Corporate body rhythm: keep paragraph and media separation readable ------- */
.fz-corporate [itemprop="articleBody"] > p {
  margin: 0;
}

.fz-corporate [itemprop="articleBody"] > p + p {
  margin-top: var(--fz-corporate-body-gap);
}

.fz-corporate [itemprop="articleBody"] > :is(div, figure, img) {
  margin-top: var(--fz-corporate-media-gap);
}

.fz-corporate [itemprop="articleBody"] > hr {
  margin: 4rem 0;
}

/* ------- Warranty page: top focus for hero image and centered brand logo ------- */
.fz-corporate--about {
  margin-bottom: 4rem;
}

.fz-corporate--warranty {
  --fz-corporate-hero-focus-y: 0%;
}

.fz-corporate .fz-corporate__logo {
  display: block;
  margin: 0;
}

.fz-corporate .fz-corporate__logo-wrap {
  display: flex;
  justify-content: center;
}

.fz-corporate--privacy > .fz-corporate__logo-wrap,
.fz-corporate--terms > .fz-corporate__logo-wrap {
  margin-bottom: 2rem;
}

.fz-corporate .fz-corporate__flags {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
}

.fz-corporate .fz-corporate__flag {
  width: 2rem;
  height: 1.4rem;
  display: block;
  border-radius: 3px;
}

.fz-corporate .fz-corporate__flags > svg {
  width: 2rem;
  height: 1.4rem;
  display: block;
  border-radius: 3px;
}

/* ------- Corporate social links (BEM: fz-corporate__social) ------- */
.fz-corporate .fz-corporate__social {
  list-style: none;
  margin: var(--fz-corporate-media-gap) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.fz-corporate .fz-corporate__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fz-gray-900);
  text-decoration: none;
  transition: var(--fz-transition);
}

.fz-corporate .fz-corporate__social-link:hover {
  color: var(--fz-gray-700);
}

.fz-corporate .fz-corporate__social-icon {
  display: block;
  flex: none;
}

.fz-corporate .fz-corporate__social-icon:not(.fz-corporate__social-icon--instagram) path {
  fill: currentColor;
}

.fz-corporate .fz-corporate__social-icon rect {
  stroke: currentColor;
}

/* ------- Contact page social icons: icon-only circular buttons ------- */

.fz-corporate--contact {
  margin-bottom: 4rem;
}

.fz-corporate--contact .fz-corporate__social {
  gap: 0.9rem;
}

.fz-corporate--contact .fz-corporate__social-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  padding: 0;
  gap: 0;
}

.fz-corporate--contact .fz-corporate__social-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.fz-corporate--contact .fz-corporate__social-link--instagram::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, var(--fz-social-instagram-1) 0%, var(--fz-social-instagram-2) 35%, var(--fz-social-instagram-3) 65%, var(--fz-social-instagram-4) 85%, var(--fz-social-instagram-5) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.fz-corporate--contact .fz-corporate__social-link--youtube {
  color: var(--fz-social-youtube);
  border: 2px solid currentColor;
}

.fz-corporate--contact .fz-corporate__social-link .fz-corporate__social-label {
  display: none;
}

/* ------- J2Store-specific styles were moved to j2store.css ------- */

/* ========= 07 — DESCRIPTION SYSTEM ========= */

/* ------- Description system rules live in j2store.css (Detail: description tabs) ------- */

/* ========= 08 — GALLERY SYSTEM ========= */

/* ------- Gallery system rules live in j2store.css (Gallery section) ------- */

/* ========= 09 — FOOTER SYSTEM ========= */

#sp-footer.fz-footer {
  width: 100%;
  padding: 4rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border-top: none;
}

#sp-footer,
#sp-footer * {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 100%;
  background-color: var(--fz-gray-800);
}

#sp-footer .container-inner {
  border-top: none;
}

#sp-footer .module-fz-footer,
#sp-footer .module-fz-footer > .mod-custom {
  width: 100%;
}

#sp-footer .module-fz-footer > .mod-custom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#sp-footer .module-fz-footer .fz-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.fz-footer .row {
  width: 100%;
  /* background-color: aquamarine; */
  /* border: solid 1px red; */
}

#sp-footer .module-fz-footer .fz-footer__col {
  flex: 1 1 220px;
  min-width: 220px;
  text-align: center;
}

#sp-footer .fz-footer__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fz-gray-200);
}

#sp-footer .fz-footer__menu,
#sp-footer .fz-footer__social {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#sp-footer .fz-footer__menu {
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

#sp-footer .fz-footer__menu li {
  margin: 0;
  display: flex;
  list-style: none;
}

#sp-footer .fz-footer__menu li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3px 12px;
  color: var(--fz-gray-400);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

#sp-footer .fz-footer__menu li > a:hover {
  color: var(--fz-white);
  background-color: var(--fz-gray-700);
}

#sp-footer .fz-footer__menu li > a:focus-visible {
  color: var(--fz-white);
  background-color: var(--fz-gray-700);
  outline: 2px solid var(--fz-gray-300);
  outline-offset: 2px;
}

#sp-footer .module-fz-footer .fz-footer__bottom {
  text-align: center;
  color: var(--fz-gray-400);
  font-size: 0.95rem;
  margin-top: 1rem;
}

/* ------- Footer social icons (BEM: fz-footer__social / fz-footer__social-item) ------- */
#sp-footer .module-fz-footer .fz-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  justify-content: center;
}

#sp-footer .fz-footer__social li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sp-footer .module-fz-footer .fz-footer__social-item {
  stroke: var(--fz-white);
  display: inline-block;
  width: 48px;
  height: 48px;
}

#sp-footer .fz-footer__social,
#sp-footer .footer__social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

#sp-footer .fz-footer__social-item svg,
#sp-footer .footer__social-item svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  /* stroke-width: 1.6; */
  fill: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

#sp-footer .fz-footer__social-item:hover svg,
#sp-footer .footer__social-item:hover svg {
  transform: translateY(-2px);
  opacity: 0.85;
}

#sp-footer .fz-footer__social-item,
#sp-footer .footer__social-item {
  color: var(--fz-gray-400);
}

#sp-footer .fz-footer__social-item:hover,
#sp-footer .fz-footer__social-item:focus-visible,
#sp-footer .footer__social-item:hover,
#sp-footer .footer__social-item:focus-visible {
  color: var(--fz-white);
}

#sp-footer .fz-footer__bottom,
#sp-footer .footer__bottom {
  max-width: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.95rem;
  opacity: 1;
}

/* ========= 10 — RESPONSIVE LAYER ========= */

@media (max-width: 768px) {
  /* ------- J2Store product mobile ordering lives in j2store.css (section 10) ------- */

  #sp-footer .fz-footer__row,
  #sp-footer .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #sp-footer .fz-footer__col,
  #sp-footer .footer__col {
    min-width: 0;
  }

  #sp-footer .fz-footer__social,
  #sp-footer .footer__social {
    justify-content: center;
    margin-top: 16px;
  }

  #sp-footer .fz-footer__bottom,
  #sp-footer .footer__bottom {
    text-align: center;
  }
}

/* ------- Tablet width correction to avoid narrow columns from container padding ------- */
@media (min-width: 576px) and (max-width: 768px) {
  .container {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  /* ------- Corporate hero fallback: iOS/mobile browsers ignore fixed attachment ------- */
  .article-details .article-full-image.fz-corporate__hero {
    background-attachment: scroll;
  }
}

/* ========= 11 — SEARCH PAGE TEMP DEBUG ========= */

/* ------- TEMP: visual marker for search page container ------- */
.fz-search__page .body-wrapper {
  margin: 0;
  /* background-color: #48e301; */
}

.fz-search__page .sp-page-title {
  margin: 0;
}

.fz-search__page #sp-component {
  /* background: rebeccapurple; */
  width: min(100%, 800px);
  margin: 0;
  padding: 2rem;
  background-color: var(--fz-white);
}

.fz-search__page .com-finder.finder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* background-color: #c7bebe; */
}

.fz-search__page #sp-main-body {
  display: grid;
  justify-content: center;
}

.fz-search__page .input-group {
  width: max-content;
  padding: 0;
}

.fz-search__page .form-inline label {
  display: none;
}

.fz-search__page .btn-primary {
  background-color: var(--fz-gray-800);
}

.js-highlight .mark,
mark {
  background-color: transparent;
  font-weight: unset;
  text-decoration: dashed;
}
.fz-search__page .com-finder__results .mark,
mark {
  background-color: #fff1cc;
  /* background-color:var(--fz-gray-300); */
  color: var(--fz-black);
  font-weight: 800;
  padding: 0;
  /* text-decoration: underline; */
}

/* ------- TEMP: visual marker for search result image ------- */
.fz-search__img {
  background-color: #d9f2ff;
}