@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap');

:root {
  /* Lucide icon masks for CSS pseudo-element icons (drawn with currentColor). */
  --jf-m-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --jf-m-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --jf-m-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --jf-m-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --jf-m-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --jf-m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --jf-m-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  --jf-m-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --jf-m-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --jf-red-700: #b8202c;
  --jf-red-600: #d02a38;
  --jf-red: #e83442;
  --jf-red-400: #ef5a66;
  --jf-red-300: #f58c95;
  --jf-red-100: #fbd9dc;
  --jf-red-50: #fef1f2;
  --jf-navy-700: #142838;
  --jf-navy: #1f3a57;
  --jf-navy-300: #6c8199;
  --jf-navy-100: #d2dae2;
  --jf-yellow-700: #c9741f;
  --jf-yellow: #f39338;
  --jf-yellow-300: #f8be86;
  --jf-yellow-100: #fdecd9;
  --jf-ink: #2b2b2b;
  --jf-gray-700: #575656;
  --jf-gray-500: #808080;
  --jf-gray-400: #a6a6a6;
  --jf-gray-300: #cccccc;
  --jf-gray-200: #e4e4e4;
  --jf-gray-100: #f1f1f1;
  --jf-paper: #fafafa;
  --jf-white: #ffffff;
  --font-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-condensed: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(43, 43, 43, .08), 0 1px 2px rgba(43, 43, 43, .05);
  --shadow-md: 0 4px 12px rgba(43, 43, 43, .09), 0 2px 4px rgba(43, 43, 43, .05);
  --ring-brand: 0 0 0 3px rgba(232, 52, 66, .28);
  /* Motion + body font tokens. These were referenced across the sheet
     (var(--dur-fast)/var(--ease-out)/var(--font-body)) but never defined, so every
     transition using them was invalid and fell back to `all 0s` (instant) — hover
     lifts and chevron rotations jumped instead of animating. */
  --font-body: var(--font-sans);
  --dur-fast: .2s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

body {
  background: var(--jf-paper);
  color: var(--jf-gray-700);
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: -.02em;
}

a {
  color: var(--jf-red-600);
}

a:hover {
  color: var(--jf-red-700);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--jf-red);
  border-color: var(--jf-red);
  border-radius: var(--radius-pill);
  box-shadow: none;
  color: var(--jf-white);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: .02em;
}

.btn-primary:hover {
  background: var(--jf-red-600);
  border-color: var(--jf-red-600);
}

.btn-secondary,
.btn-tertiary {
  border-radius: var(--radius-pill);
}

.form-control:focus,
.input-group.focus {
  border-color: var(--jf-red);
  box-shadow: var(--ring-brand);
  outline: 0;
}

#header {
  background: var(--jf-white);
  box-shadow: var(--shadow-sm);
}

#header .header-top {
  background: var(--jf-white);
}

#header .top-menu a[data-depth="0"] {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--jf-red);
}

.product-miniature .thumbnail-container,
.card,
.cart-grid-body,
.cart-grid-right .card,
#js-product-list .products .product-miniature {
  border-radius: var(--radius-lg);
}

.product-miniature .thumbnail-container {
  border: 1px solid var(--jf-gray-200);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-miniature .thumbnail-container:hover {
  border-color: var(--jf-red-300);
  box-shadow: 0 12px 28px rgba(232, 52, 66, .14), 0 4px 10px rgba(43, 43, 43, .06);
  transform: translateY(-3px);
}

/* ============================================================
   Shared product card (jf-card) — one contract used everywhere
   product miniatures render (home, listing, search, related).
   ============================================================ */
.js-product {
  display: flex;
  height: 100%;
}

.jf-card {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s;
  width: 100%;
}

.jf-card:hover {
  border-color: var(--jf-red-300);
  box-shadow: 0 12px 28px rgba(232, 52, 66, .14), 0 4px 10px rgba(43, 43, 43, .06);
  transform: translateY(-3px);
}

.jf-card__stage {
  display: block;
  position: relative;
}

.jf-card__img {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.jf-card__img img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.jf-card__discount {
  align-items: center;
  background: var(--jf-red);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: #fff;
  display: flex;
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 52px;
  z-index: 2;
}

.jf-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.jf-card__meta {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 20px;
}

.jf-card__stock {
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* blockwishlist injects its heart into .jf-wishlist-hook (a hidden .thumbnail-container
   we render only so its JS doesn't throw on a null append). display:none on the hook
   hides the heart unconditionally — the handoff has no wishlist. */
.jf-card .jf-wishlist-hook { display: none !important; } /* beats #js-product-list .thumbnail-container{display:flex} (id) */

.jf-card__stock--in { background: #e7f6ec; color: #1c7c43; }
.jf-card__stock--low { background: #fdf0d9; color: #a5670a; }
.jf-card__stock--out { background: var(--jf-red-50); color: var(--jf-red); }

/* Frozen (Congelado) badge: round chip, same 24px height as the stock/PDP
   chips, celeste fill, dark-blue lucide snowflake. Same class in the card meta
   row and the PDP badge row (frozen-badge.tpl). */
.jf-frozen-badge {
  align-items: center;
  background: #d7edfb;
  border-radius: 50%;
  color: var(--jf-navy);
  display: inline-flex;
  flex: 0 0 auto;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.jf-frozen-badge svg { display: block; height: 14px; width: 14px; }

/* Out-of-stock (reserved) badge for cart contexts: mini-cart, cart page, order
   confirmation. Red pill matching the catalog out-of-stock chip. */
.jf-oos-badge {
  background: var(--jf-red-50);
  border-radius: var(--radius-pill);
  color: var(--jf-red);
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  padding: 2px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}
.jf-oos-badge--sm { font-size: 9.5px; padding: 1px 7px; }
.page-cart .jf-oos-badge { margin-top: 6px; }

.jf-card__ref {
  color: var(--jf-gray-500);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jf-card__title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--jf-ink);
  display: -webkit-box;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 39px;
  overflow: hidden;
  text-decoration: none;
}

.jf-card__title:hover { color: var(--jf-red); }

.jf-card__price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 14px;
  min-height: 26px;
}

.jf-card__price-now {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 23px;
  font-weight: 800;
}

.jf-card__price-old {
  color: var(--jf-gray-500);
  font-size: 14px;
  text-decoration: line-through;
}

.jf-card__price-unit { color: var(--jf-gray-500); font-size: 12px; }

/* Listing equivalent of the PDP's "Próximamente" (price 0,00). Same weight as price-now. */
.jf-card__price-soon {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 800;
}

.jf-card__lock {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

.jf-card__lock .material-icons { font-size: 15px; }

.jf-card__cta {
  align-items: center;
  background: var(--jf-red);
  border-radius: var(--radius-pill);
  color: #fff;
  display: flex;
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .02em;
  margin-top: auto;
  min-height: 40px;
  padding: 0 1rem;
  text-decoration: none;
  transition: background var(--dur-fast);
}

.jf-card__cta:hover { background: var(--jf-red-600); color: #fff; }

.product-price,
.current-price,
.has-discount .discount {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-weight: 700;
}

.discount,
.discount-percentage {
  background: var(--jf-red);
}

.breadcrumb {
  background: transparent;
}

.breadcrumb li,
.breadcrumb li a {
  color: var(--jf-gray-500);
}

.breadcrumb li:last-child {
  color: var(--jf-ink);
}

.footer-container {
  background: var(--jf-ink);
  color: rgba(255, 255, 255, .7);
}

.footer-container a,
.footer-container .h3,
.footer-container .h4 {
  color: var(--jf-white);
}

.jf-footer-before {
  margin-top: 4.5rem;
}

.jf-footer-before > .container {
  max-width: 1360px;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
}

.jf-footer-before .row {
  margin-left: 0;
  margin-right: 0;
}

.jf-footer-before .block_newsletter {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  float: none;
  margin: 0 auto -2.75rem;
  max-width: 980px;
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.jf-footer-before .block_newsletter::before {
  background: linear-gradient(135deg, var(--jf-red), var(--jf-yellow));
  border-radius: 999px;
  content: "";
  height: 6px;
  left: 1.5rem;
  position: absolute;
  right: 1.5rem;
  top: 0;
  transform: translateY(-50%);
}

.jf-footer-before .block_newsletter .row {
  align-items: center;
  display: flex;
}

.jf-footer-before #block-newsletter-label {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.jf-footer-before .block_newsletter form input[type="email"] {
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-pill);
  height: 46px;
  min-width: 280px;
  padding: 0 1rem;
  width: 100% !important;
}

.jf-footer-before .block_newsletter form .row > .col-xs-12:first-child {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.jf-footer-before .block_newsletter .input-wrapper {
  flex: 1 1 280px;
  min-width: 0;
  width: auto !important;
}

.jf-footer-before .block_newsletter form .btn-primary {
  flex: 0 0 auto;
  height: 46px;
  order: 2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.jf-footer-before .block_newsletter form p {
  color: var(--jf-gray-500);
  font-size: .8rem;
  margin: .75rem 0 0;
}

.jf-footer-before .block_newsletter form p:not(.alert) {
  display: none;
}

.jf-footer-before .block-social {
  display: none;
}

.footer-container {
  margin-top: 72px;
  padding-top: 52px;
}

.footer-container .jf-footer-main {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding-bottom: 2.5rem;
}

.jf-footer-col {
  min-width: 0;
}

.jf-footer-brand img {
  display: block;
  height: 128px;
  width: auto;
}

.jf-footer-brand p {
  color: rgba(255, 255, 255, .6);
  font-size: .85rem;
  line-height: 1.6;
  margin: 1.125rem 0 0;
  max-width: 260px;
}

.jf-footer-h {
  color: var(--jf-white);
  font-family: var(--font-condensed);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0 0 .875rem;
  text-transform: uppercase;
}

.jf-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jf-footer-links a {
  color: rgba(255, 255, 255, .68);
  display: inline-block;
  font-size: .875rem;
  line-height: 1.6;
  padding: .3rem 0;
  text-decoration: none;
}

.jf-footer-links a:hover {
  color: var(--jf-white);
  text-decoration: underline;
}

.jf-footer-contact__item {
  align-items: center;
  color: rgba(255, 255, 255, .68);
  display: flex;
  font-size: .875rem;
  gap: .5rem;
  line-height: 1.6;
  padding: .3rem 0;
  text-decoration: none;
}

.jf-footer-contact__item:hover {
  color: var(--jf-white);
}

.jf-footer-contact__item .material-icons {
  flex-shrink: 0;
  font-size: 1.05rem;
}

.jf-footer-contact__addr {
  align-items: flex-start;
}

.jf-footer-contact__addr .material-icons {
  margin-top: .15rem;
}

.jf-footer-native {
  display: none;
}

.jf-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .45);
  font-size: .75rem;
  padding: 1rem 0;
}

@media (max-width: 1199px) {
  .footer-container .jf-footer-main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .footer-container .jf-footer-main {
    grid-template-columns: 1fr;
  }
}

.jf-loader-truck {
  display: inline-block;
  height: 42px;
  image-rendering: pixelated;
  width: auto;
}

.jf-container {
  margin: 0 auto;
  max-width: 1360px;
  padding: 0 2rem;
  width: 100%;
}

.jf-top-strip {
  background: var(--jf-ink) !important;
  border: 0 !important;
  box-shadow: none;
  color: rgba(255, 255, 255, .82) !important;
  min-height: 40px;
}

.jf-top-strip__inner {
  align-items: center;
  display: flex;
  font-size: .8125rem;
  gap: 1.5rem;
  justify-content: space-between;
  min-height: 40px;
}

.jf-top-strip__contact,
.jf-top-strip__hook {
  align-items: center;
  display: flex;
  gap: 1.5rem;
}

.jf-toplink,
.jf-top-strip a {
  color: rgba(255, 255, 255, .82) !important;
  text-decoration: none;
}

.jf-toplink:hover,
.jf-top-strip a:hover {
  color: var(--jf-white);
  text-decoration: none;
}

.jf-header-main {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--jf-gray-200);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 40;
}

.jf-headbar {
  align-items: center;
  display: flex;
  gap: 1.75rem;
  min-height: 116px;
  padding: .75rem 0 .75rem 170px;
  position: relative;
}

.jf-logo-wrap {
  bottom: .75rem;
  flex: 0 0 auto;
  left: 0;
  position: absolute;
  z-index: 2;
}

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

.jf-logo img {
  display: block;
  height: 104px;
  width: auto;
}

.jf-searchrow {
  display: none;
}

.jf-header-search {
  flex: 1 1 620px;
  max-width: 620px;
  min-width: 220px;
  width: 100%;
}

.jf-header-search #search_widget {
  float: none;
  margin: 0;
  max-width: none !important;
  min-width: 0;
  width: 100% !important;
}

.jf-header-search #search_widget form {
  display: block;
  position: relative;
  width: 100%;
}

.jf-header-search #search_widget input[type="text"] {
  background: var(--jf-white);
  border: 1.5px solid var(--jf-gray-300);
  border-radius: var(--radius-pill);
  color: var(--jf-ink);
  font-family: var(--font-sans);
  font-size: .9375rem;
  height: 48px;
  display: block;
  min-width: 0;
  padding: .75rem 2.75rem;
  width: 100%;
}

.jf-header-search #search_widget input[type="text"]:focus {
  border-color: var(--jf-red);
  box-shadow: var(--ring-brand);
  outline: 0;
}

.jf-header-search #search_widget .search {
  align-items: center;
  color: var(--jf-gray-500);
  display: inline-flex;
  font-size: 18px;
  height: 18px;
  justify-content: center;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
}

.jf-header-search #search_widget .clear {
  align-items: center;
  color: var(--jf-gray-500);
  display: inline-flex;
  font-size: 18px;
  height: 18px;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
}

/* ===== Dynamic search dropdown (native ps_searchbar autocomplete) ===== */
.ui-autocomplete.searchbar-autocomplete {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 8px 0 0;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  z-index: 1000;
}

.ui-autocomplete.searchbar-autocomplete li {
  list-style: none;
}

.ui-autocomplete.searchbar-autocomplete li > a,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item-wrapper {
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--jf-ink);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  text-decoration: none;
}

.ui-autocomplete.searchbar-autocomplete li > a:hover,
.ui-autocomplete.searchbar-autocomplete li > a.ui-state-active,
.ui-autocomplete.searchbar-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: var(--jf-gray-100);
  color: var(--jf-ink);
}

.ui-autocomplete.searchbar-autocomplete img.autocomplete-thumbnail {
  border: 1px solid var(--jf-gray-200);
  border-radius: 6px;
  flex-shrink: 0;
  height: 44px;
  object-fit: contain;
  padding: 3px;
  width: 44px;
}

.ui-autocomplete.searchbar-autocomplete .product {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}

.jf-header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: .5rem;
  margin-left: auto;
}

.jf-header-actions > * {
  align-items: center;
  display: flex;
}

.jf-header-actions #_desktop_user_info,
.jf-header-actions .user-info {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.jf-header-actions .user-info,
.jf-header-actions #_desktop_cart,
.jf-header-actions #blockcart-wrapper {
  margin: 0;
}

.jf-header-actions .user-info a,
.jf-header-actions .blockcart .header a {
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--jf-gray-200);
  color: var(--jf-ink);
  display: inline-flex;
  font-weight: 700;
  gap: .45rem;
  min-height: 44px;
  padding: .65rem .9rem;
  text-decoration: none;
}

.jf-header-actions .user-info a:hover,
.jf-header-actions .blockcart .header a:hover,
.jf-header-actions .blockcart .header:hover {
  background: var(--jf-gray-100);
  color: var(--jf-ink);
  text-decoration: none;
}

.jf-header-actions .user-info a.account {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}
/* #header-scoped so it beats `.account > span { display:inline-block }` below,
   which otherwise also matches this wrapper span and collapses the two lines. */
#header .jf-header-actions .user-info .account .jf-acct-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.jf-acct-kicker { color: var(--jf-gray-500); font-size: 11px; font-weight: 400; }
.jf-header-actions .user-info .account .jf-acct-label > span:last-child,
.jf-header-actions .user-info .account > span {
  color: var(--jf-ink);
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jf-header-actions .user-info .logout {
  display: none !important;
}

.jf-header-actions #_desktop_cart,
.jf-header-actions .blockcart {
  background: transparent;
  height: auto;
  padding: 0;
  position: relative;
  width: auto;
}

.jf-header-actions .blockcart .header {
  align-items: center;
  border: 0;
  display: flex;
  height: auto;
  min-height: 0;
  padding: 0;
}

.jf-header-actions .blockcart .header a {
  align-items: center;
  border-radius: var(--radius-pill);
  color: var(--jf-ink);
  display: inline-flex;
  gap: 10px;
  padding: 7px 16px 7px 12px;
}

/* Cart icon + red count badge overlapping it (handoff) */
.jf-cart-ico { display: inline-flex; position: relative; }
.jf-cart-ico .jf-ic { color: var(--jf-ink); }
.jf-cart-badge {
  align-items: center;
  background: var(--jf-red);
  border-radius: 9px;
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  position: absolute;
  right: -9px;
  top: -8px;
}
.jf-cart-label { color: var(--jf-ink); font-size: 13.5px; font-weight: 600; }

/* Hover dropdown */
.jf-header-actions .blockcart .body {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: 360px;
  z-index: 50;
}
.jf-header-actions .blockcart:hover .body { display: block; }

.jf-cartdrop__head {
  border-bottom: 1px solid var(--jf-gray-200);
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
}
.jf-cartdrop__list { list-style: none; margin: 0; max-height: 300px; overflow: auto; padding: 0; }
.jf-cartdrop__row {
  align-items: center;
  border-bottom: 1px solid var(--jf-gray-200);
  display: flex;
  gap: 12px;
  padding: 12px 18px;
}
.jf-cartdrop__img {
  align-items: center;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  display: flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
  padding: 5px;
  width: 46px;
}
.jf-cartdrop__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.jf-cartdrop__info { flex: 1; min-width: 0; }
.jf-cartdrop__name {
  color: var(--jf-ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jf-cartdrop__qty { color: var(--jf-gray-500); font-size: 12.5px; }
.jf-cartdrop__price { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 14px; font-weight: 800; }
.jf-cartdrop__foot { padding: 16px 18px; }
.jf-cartdrop__sub { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 12px; }
.jf-cartdrop__sub > span:first-child { color: var(--jf-gray-500); font-size: 13px; }
.jf-cartdrop__subval { color: var(--jf-red); font-family: var(--font-condensed); font-size: 20px; font-weight: 900; }
.jf-cartdrop__btn {
  align-items: center;
  border-radius: var(--radius-pill);
  display: flex;
  font-family: var(--font-condensed);
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  text-transform: none;
  width: 100%;
}

/* White text on red, darker red on hover. `#header a:hover` (1,0,1) otherwise
   turns this link red-on-red — beat it with #header + class specificity. */
#header .jf-cartdrop__btn,
#header .jf-cartdrop__btn:hover,
#header .jf-cartdrop__btn:focus {
  background: var(--jf-red);
  color: var(--jf-white);
}

#header .jf-cartdrop__btn:hover {
  background: var(--jf-red-600);
}

/* Full-bleed nav: the border-top separator spans the viewport, content stays
   centred (negative margins + matching padding). Kept STATIC so the mega panel
   anchors to the full-width .jf-header-main instead of the nav. */
.jf-navrow {
  align-items: center;
  border-top: 1px solid rgba(43, 43, 43, .12);
  display: flex;
  gap: .125rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 52px;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  position: static;
}

.jf-navrow-menu {
  align-items: stretch;
  display: flex;
  min-width: 0;
  position: static;
}

.jf-navrow .menu,
.jf-navrow .top-menu,
.jf-navrow .js-top-menu {
  margin: 0;
  width: auto;
}

.jf-navrow-menu > .menu > .top-menu,
.jf-navrow-menu > .top-menu {
  align-items: stretch;
  display: flex;
  gap: .125rem;
}

.jf-navrow .top-menu a[data-depth="0"],
.jf-navlink {
  align-items: center;
  border-bottom: 3px solid transparent;
  color: var(--jf-ink);
  display: inline-flex;
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  gap: .4rem;
  letter-spacing: .02em;
  min-height: 52px;
  padding: 0 1rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover changes text colour only; the 3px underline marks the ACTIVE section.
   border-bottom-color:transparent overrides the stale cached jaferi.css rule. */
.jf-navrow .top-menu a[data-depth="0"]:hover,
.jf-navlink:hover {
  border-bottom-color: transparent;
  color: var(--jf-red);
  text-decoration: none;
}

/* Keep the active underline even while hovering the active section. */
.jf-navrow-menu .top-menu > li.category.current > a[data-depth="0"]:hover,
.page-index #header .jf-navlink--home:hover {
  border-bottom-color: currentColor;
}

.jf-navlink--strong,
.jf-navlink--strong:hover {
  color: var(--jf-red);
}

/* ===== Mega-menu: reveal native ps_mainmenu submenus on hover ===== */
.jf-navrow {
  position: relative;
}

.jf-navrow-menu .top-menu > li.category {
  position: static;
}

.jf-navrow-menu .top-menu > li.category > a[data-depth="0"]::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--jf-m-chevron-down) center / contain no-repeat;
  mask: var(--jf-m-chevron-down) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}

.jf-navrow-menu .top-menu > li.category:hover > a[data-depth="0"]::after {
  transform: rotate(180deg);
}

/* Full-bleed mega panel: white band spans the header width, content centred at 1360.
   Anchored to .jf-header-main (full width) so it goes edge to edge. */
.jf-navrow-menu .top-menu > li.category { position: static; }
.jf-navrow-menu .top-menu > li.category > .sub-menu {
  align-items: start;
  background: var(--jf-white);
  border: 0;
  border-bottom: 1px solid var(--jf-gray-200);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  display: none;
  gap: 36px;
  grid-template-columns: minmax(0, 2.6fr) 300px;
  left: 0 !important;
  margin: 0 !important;
  padding: 28px max(32px, calc((100% - 1360px) / 2 + 32px)) !important;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  transform: none !important;
  width: auto !important;
  z-index: 60;
}

.jf-navrow-menu .top-menu > li.category:hover > .sub-menu {
  display: grid;
}

.jf-navrow-menu .sub-menu .collapse {
  display: block !important;
}

.jf-navrow-menu .sub-menu > ul[data-depth="1"] {
  display: grid;
  gap: 22px 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
  padding: 0;
}

.jf-navrow-menu .sub-menu ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jf-navrow-menu .sub-menu > ul[data-depth="1"] > li.category {
  min-width: 0;
}

.jf-navrow-menu .sub-menu .float-xs-right {
  display: none;
}

/* Group headings carry the division colour (default red = Alimentación;
   navy/orange set per division below). */
#header .jf-navrow-menu .sub-menu ul[data-depth="1"] > li.category > a[data-depth="1"] {
  border-bottom: 2px solid currentColor;
  color: var(--jf-red);
  display: block;
  font-family: var(--font-condensed);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  text-decoration: none;
  text-transform: uppercase;
}

#header .jf-navrow-menu .sub-menu ul[data-depth="2"] > li > a {
  color: var(--jf-gray-700);
  display: block;
  font-size: .85rem;
  padding: .3rem 0;
  text-decoration: none;
}

#header .jf-navrow-menu .sub-menu ul[data-depth="2"] > li > a:hover {
  color: var(--jf-red);
}

.jf-navrow-menu .sub-menu .navbar-toggler {
  display: none;
}

/* Division side panel injected into each mega-menu (medallion + blurb + CTA). */
.jf-megaside {
  align-items: flex-start;
  background: var(--jf-paper);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

.jf-megaside img {
  display: block;
  height: 72px;
  object-fit: contain;
  width: 72px;
}

.jf-megaside__name {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.25rem;
  font-weight: 700;
}

.jf-megaside__blurb {
  color: var(--jf-gray-500);
  font-size: .85rem;
  line-height: 1.5;
  margin: 6px 0 0;
}

.jf-megaside__cta {
  align-items: center;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--jf-red);
  display: inline-flex;
  font-family: var(--font-condensed);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: normal;
  padding: .5rem 1.25rem;
  text-decoration: none;
  text-transform: none;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.jf-megaside__cta:hover {
  /* Handoff secondary-button hover token: subtle tinted fill, keep the
     division-coloured text + border (not a solid fill). color-mix keeps this
     one rule correct for every division colour. */
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-1px);
}

.jf-menu-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--jf-ink);
  cursor: pointer;
  display: none;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 2.75rem;
  width: 44px;
}

.jf-mobile-actions {
  align-items: center;
  display: flex;
  gap: .35rem;
  margin-left: auto;
}

.page-index #wrapper {
  background: var(--jf-paper);
  padding-top: 1.5rem;
}

.page-index #wrapper > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.page-index #content-wrapper {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.page-index #main,
.page-index #content {
  width: 100%;
}

.page-index #wrapper {
  background:
    radial-gradient(circle at 10% 18%, rgba(232, 52, 66, .055), transparent 26rem),
    radial-gradient(circle at 88% 36%, rgba(243, 147, 56, .075), transparent 24rem),
    var(--jf-paper);
}

.page-index .homeslider-container,
.page-index #carousel {
  aspect-ratio: 2592 / 840;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  left: auto !important;
  margin: 1.75rem auto 0;
  max-width: 1360px;
  overflow: hidden;
  position: relative;
  right: auto !important;
  width: calc(100% - 4rem);
}

.page-index #carousel .carousel-inner,
.page-index #carousel .carousel-item,
.page-index #carousel .carousel-item > a,
.page-index #carousel figure,
.page-index .homeslider-container ul,
.page-index .homeslider-container li {
  height: 100%;
  margin: 0;
}

.page-index .homeslider-container img,
.page-index #carousel img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Handoff carousel arrows: 44px round translucent-white, chevrons. */
.page-index .homeslider_nav,
.page-index #carousel .carousel-control {
  align-items: center;
  background: rgba(255, 255, 255, .85) !important;
  border-radius: 50%;
  bottom: auto;
  color: var(--jf-ink);
  display: flex;
  height: 44px;
  justify-content: center;
  opacity: 1;
  box-shadow: var(--shadow-sm);
  text-shadow: none;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
}

.page-index #carousel .carousel-control.left { left: 20px; right: auto; }
.page-index #carousel .carousel-control.right { right: 20px; left: auto; }

/* One Lucide chevron, centred in the white circle (the icon comes from the
   native arrow converted by initJaferiIcons — no extra pseudo). */
.page-index #carousel .carousel-control .icon-prev,
.page-index #carousel .carousel-control .icon-next {
  align-items: center;
  color: var(--jf-ink);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  width: 22px;
}
.page-index #carousel .carousel-control .icon-prev svg,
.page-index #carousel .carousel-control .icon-next svg {
  height: 22px;
  margin: 0;
  width: 22px;
}

.page-index .jf-divisions {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.25rem auto 0;
  max-width: 1360px;
  width: calc(100% - 4rem);
}

.page-index .jf-division-card {
  align-items: center;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--jf-ink);
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.page-index .jf-division-card:hover {
  border-color: var(--jf-red-300);
  box-shadow: 0 12px 28px rgba(232, 52, 66, .14), 0 4px 10px rgba(43, 43, 43, .06);
  transform: translateY(-3px);
}

.page-index .jf-division-card--drogueria:hover {
  border-color: var(--jf-navy);
  box-shadow: 0 12px 28px rgba(31, 58, 87, .16), 0 4px 10px rgba(43, 43, 43, .06);
}

.page-index .jf-division-card--petfood:hover {
  border-color: var(--jf-yellow-700);
  box-shadow: 0 12px 28px rgba(243, 147, 56, .18), 0 4px 10px rgba(43, 43, 43, .06);
}

.page-index .jf-division-card__mark {
  flex: 0 0 auto;
}

.page-index .jf-division-card__mark img {
  display: block;
  height: 64px;
  object-fit: contain;
  width: 64px;
}

.page-index .jf-division-card__eyebrow {
  display: none;
}

.page-index .jf-division-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-index .jf-division-card__title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}

.page-index .jf-division-card__text {
  color: var(--jf-gray-500);
  font-size: .85rem;
  line-height: 1.35;
}

.page-index .jf-division-card::after {
  background-color: var(--jf-red);
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: 20px;
  margin-left: auto;
  width: 20px;
  -webkit-mask: var(--jf-m-arrow-right) center / contain no-repeat;
  mask: var(--jf-m-arrow-right) center / contain no-repeat;
}

.page-index .jf-division-card--drogueria::after { background-color: var(--jf-navy); }
.page-index .jf-division-card--petfood::after { background-color: var(--jf-yellow-700); }

.page-index .featured-products {
  margin: 0 auto 4rem;
  max-width: 1360px;
  padding: 3rem 0 0;
  width: calc(100% - 4rem);
}

.jf-featured__head {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.jf-eyebrow {
  color: var(--jf-red);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.jf-featured__title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.jf-featured__controls {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: .625rem;
}

.jf-featured__all {
  border: 1.5px solid var(--jf-gray-300);
  border-radius: var(--radius-pill);
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .5rem 1.1rem;
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}

.jf-featured__all:hover {
  border-color: var(--jf-red);
  color: var(--jf-red);
}

.jf-rail-btn {
  align-items: center;
  background: #fff;
  border: 1px solid var(--jf-gray-300);
  border-radius: 50%;
  color: var(--jf-ink);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  width: 40px;
}

.jf-rail-btn:hover {
  background: var(--jf-red-50);
  border-color: var(--jf-red);
  color: var(--jf-red);
}

.page-index .featured-products .products.jf-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px;
  grid-template-columns: none !important;
  margin: 0;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
}

.page-index .featured-products .products.jf-rail > .product {
  flex: 0 0 304px !important;
  margin: 0 !important;
  max-width: 304px;
  padding: 0 !important;
  width: 304px !important;
}

.page-index .featured-products .products.jf-rail::-webkit-scrollbar {
  height: 8px;
}

.page-index .featured-products .products.jf-rail::-webkit-scrollbar-thumb {
  background: var(--jf-gray-300);
  border-radius: 4px;
}

.page-index .product-miniature .thumbnail-container {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(43, 43, 43, .05);
  display: flex;
  flex-direction: column;
  height: 100% !important;
  margin: 0;
  min-height: 380px;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.1rem;
  position: relative;
  width: 100%;
}

.page-index .product-miniature .thumbnail-container:hover {
  border-color: var(--jf-red-100);
  box-shadow: 0 18px 36px rgba(43, 43, 43, .08);
  transform: translateY(-2px);
}

.page-index .product-miniature .thumbnail-top {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 245px;
  position: relative;
}

.page-index .product-miniature .highlighted-informations {
  display: none;
}

.page-index .product-miniature .thumbnail-container .product-thumbnail {
  display: flex;
  justify-content: center;
  width: 100%;
}

.page-index .product-miniature .thumbnail-container .product-thumbnail img {
  display: block;
  height: auto;
  max-height: 245px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.page-index .product-miniature .product-description {
  background: transparent;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 5.75rem;
  padding: .875rem .25rem 0;
  position: static !important;
  width: auto !important;
}

.page-index .product-miniature .product-title {
  margin-top: 0;
  text-align: left;
}

.page-index .product-miniature .product-title a {
  color: var(--jf-ink);
  display: -webkit-box;
  font-size: 1.05rem;
  font-weight: 500;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  min-height: 2.6em;
  overflow: hidden;
}

.page-index .product-miniature .product-price-and-shipping {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  justify-content: flex-start;
  margin-top: auto;
  min-height: 1.5rem;
}

.page-index .product-miniature .price {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 1.35rem;
  font-weight: 700;
}

.page-index .product-miniature .regular-price {
  color: var(--jf-gray-500);
  font-size: .9rem;
}

.page-index .product-miniature .discount-product {
  align-items: center;
  background: var(--jf-red);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--jf-white);
  display: flex;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  left: 12px;
  line-height: 1;
  padding: 0;
  position: absolute;
  text-decoration: none;
  top: 12px;
  width: 52px;
  z-index: 3;
}

.page-index .product-miniature .wishlist-button-add {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--jf-gray-200);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--jf-gray-500);
  height: 40px;
  right: 12px;
  top: 12px;
  width: 40px;
}

.page-index .product-miniature .wishlist-button-add:hover {
  color: var(--jf-red);
}

.page-index .all-product-link {
  align-items: center;
  border: 1px solid var(--jf-red);
  border-radius: var(--radius-pill);
  color: var(--jf-red);
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  justify-self: end;
  margin-top: 2rem;
  padding: .55rem 1rem;
  text-transform: none;
}

.page-index #custom-text {
  display: none;
}

.page-index a.banner {
  display: none !important;
}

/* Catalog/listing layer: native Classic markup, Jaferi skin. */
.page-category #wrapper,
.page-search #wrapper,
.page-prices-drop #wrapper,
.page-manufacturer #wrapper,
.page-supplier #wrapper,
.page-product #wrapper,
.page-cart #wrapper,
.page-order #wrapper,
.page-authentication #wrapper,
.page-my-account #wrapper,
.page-identity #wrapper,
.page-addresses #wrapper,
.page-history #wrapper,
.page-order-slip #wrapper {
  background: var(--jf-paper);
}

.breadcrumb {
  margin: 1rem 0 1.5rem;
}

.breadcrumb ol,
.breadcrumb ul {
  background: transparent;
  padding-left: 0;
}

.breadcrumb li,
.breadcrumb li a {
  font-size: .85rem;
}

/* Listing header: breadcrumb, then medallion + heading, left-aligned, no card,
   no category cover image (handoff). */
.block-category,
#js-product-list-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 1.75rem;
  padding: 0;
}

.block-category {
  align-items: center;
  display: flex;
  gap: 18px;
  min-height: 0; /* Classic forces min-height:220px for the (now removed) cover. */
}

.block-category h1,
.block-category .h1 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
  text-transform: none;
}

.jf-cat-medallion {
  flex: 0 0 auto;
}

.jf-cat-medallion img {
  display: block;
  height: 52px;
  object-fit: contain;
  width: 52px;
}

.jf-cat-medallion--warehouse {
  align-items: center;
  background: var(--jf-red);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.block-category .block-category-inner,
.block-category .category-cover {
  display: none;
}

#left-column #search_filters,
#left-column .block-categories,
#search_filters_brands,
#search_filters_suppliers {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  padding: 1rem;
}

#search_filters .facet .facet-title,
#search_filters .h6,
#left-column .block-categories .h6 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

#search_filters .facet-label,
#search_filters .custom-checkbox,
#left-column .category-sub-menu a {
  color: var(--jf-gray-700);
  font-size: .95rem;
}

#search_filters .facet-label:hover,
#left-column .category-sub-menu a:hover {
  color: var(--jf-red);
}

/* Hide the "Disponible" (Available) option of the availability facet. With venta sin
   stock (OOSP) every product is orderable, so this option always equals the full
   catalogue count and duplicates "En stock" without adding useful filtering. Matched by
   its search URL (q=Disponibilidad-Disponible); :has() also covers the AJAX re-render. */
#search_filters .facet li:has(a[href*="Disponibilidad-Disponible"]) {
  display: none;
}

/* The category sidebar is navigation, not an accordion: keep every generated
   level visible and remove controls that no longer perform an action. */
#left-column .block-categories .category-sub-menu .collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}

#left-column .block-categories .collapse-icons,
#left-column .block-categories .category-sub-menu .arrows {
  display: none !important;
}

/* Kill Classic's "- " dash prefix on deep (depth >= 2) category items. It only shows
   on the root category page ("Todos los productos"), where the tree is 3 levels deep;
   normal category pages never reach depth 2. Keep the sidebar clean everywhere. */
#left-column .block-categories .category-sub-menu li::before {
  content: none;
  margin-right: 0;
}

/* Widen listing pages to the header content band (logo → cart). Mirrors
   .jf-container (max-width 1360 + 2rem padding) so breadcrumb, medallion, and
   both columns align with the header edges. :has scopes it to faceted listings. */
.container:has(#left-column) {
  max-width: 1360px;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%; /* Classic sets .container{width:1140px} (fixed) — let max-width rule. */
}

/* Drop the outer column gutters so the left card aligns with the breadcrumb/
   medallion (container edge) and the right column reaches the cart edge. The
   30px inter-column gutter stays (left-col padding-right + content padding-left). */
.container:has(#left-column) > #left-column { padding-left: 0; }
.container:has(#left-column) > #content-wrapper { padding-right: 0; }

#js-product-list-top,
.products-selection {
  align-items: stretch;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 0 1.5rem;
  padding: .875rem 1.25rem;
}

/* Both sides stretch to the same height and centre their content, so the count
   text and the "Ordenar por" label sit on the same line. */
.products-selection .total-products {
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0; /* Classic leaves a padding-top:10px that dropped the text ~5px */
}

.products-selection .total-products p {
  color: var(--jf-gray-700);
  font-size: .95rem;
  line-height: 1;
  margin: 0;
}

.products-selection .total-products p b {
  color: var(--jf-ink);
  font-weight: 700;
}

.products-selection .jf-sort-wrap,
.products-selection .jf-sort {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
}

.products-selection .jf-sort .sort-by {
  color: var(--jf-gray-500);
  font-size: .95rem;
  line-height: 1;
  margin: 0; /* Classic puts margin-right:-15px here, collapsing the gap to the dropdown */
  white-space: nowrap;
}

.products-sort-order .select-title,
.products-sort-order .dropdown-menu {
  border-color: var(--jf-gray-200);
  border-radius: 14px;
}

/* Classic paints the hovered sort/facet option turquoise (rgb 36,185,215) — use
   brand red instead. Same specificity as Classic's rule; our sheet loads last. */
.products-sort-order .select-list:hover,
.facet-dropdown .select-list:hover {
  background: var(--jf-red);
}

.products-sort-order .select-title {
  align-items: center;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  color: var(--jf-ink);
  display: inline-flex;
  gap: .5rem;
  padding: .5rem .875rem;
  white-space: nowrap;
}

/* Active filters (faceted search) — Jaferi chips instead of raw list. */
#js-active-search-filters.active_filters {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

#js-active-search-filters .active-filter-title {
  color: var(--jf-gray-500);
  font-family: var(--font-condensed);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 .25rem 0 0;
}

#js-active-search-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#js-active-search-filters .filter-block {
  align-items: center;
  background: var(--jf-red-50);
  border: 1px solid var(--jf-red-300);
  border-radius: var(--radius-pill);
  color: var(--jf-red-700);
  display: inline-flex;
  font-size: .85rem;
  font-weight: 600;
  gap: .35rem;
  padding: .3rem .75rem;
}

#js-active-search-filters .filter-block a {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
}

#js-active-search-filters .filter-block .material-icons,
#js-active-search-filters .filter-block .jf-lucide {
  font-size: 16px;
  height: 16px;
  width: 16px;
}

#js-product-list .products {
  align-items: stretch;
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

#js-product-list .products::after {
  display: none;
}

#js-product-list .products > .product {
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#js-product-list .product-miniature,
#js-product-list .product-miniature .thumbnail-container {
  height: 100%;
  margin: 0;
  width: 100%;
}

#js-product-list .product-miniature .thumbnail-container {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(43, 43, 43, .05);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  padding: 1rem;
}

#js-product-list .product-miniature .thumbnail-top {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 220px;
}

#js-product-list .product-miniature .product-description {
  background: transparent;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 5.5rem;
  padding: .875rem 0 0;
  position: static !important;
  width: auto !important;
}

#js-product-list .product-miniature .product-title {
  margin-top: 0;
  text-align: left;
}

#js-product-list .product-miniature .product-title a {
  color: var(--jf-ink);
  display: -webkit-box;
  font-size: 1rem;
  font-weight: 500;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  min-height: 2.5em;
  overflow: hidden;
}

#js-product-list .product-miniature .product-price-and-shipping {
  margin-top: auto;
}

#js-product-list .product-miniature .thumbnail-container img {
  max-height: 220px;
  object-fit: contain;
  width: auto;
}

#js-product-list .product-miniature .highlighted-informations {
  display: none;
}

#js-product-list-bottom,
.pagination {
  margin-top: 2rem;
}

/* Handoff pagination: centred numbered pills + prev/next arrow buttons. */
.jf-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.jf-pagination .page-list {
  align-items: center;
  background: transparent;
  box-shadow: none;
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jf-pagination .page-list li { margin: 0; }

.jf-pagination .page-list li a {
  align-items: center;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 12px;
  color: var(--jf-ink);
  display: inline-flex;
  font-family: var(--font-condensed);
  font-weight: 700;
  height: 44px;
  justify-content: center;
  min-width: 44px;
  padding: 0 .5rem;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.jf-pagination .page-list li a:hover {
  border-color: var(--jf-red-300);
  color: var(--jf-red);
}

/* :not(.current) so the current page keeps its solid red fill — Classic marks
   the current page's own <a> as .disabled, which otherwise faded it out. */
.jf-pagination .page-list li:not(.current) a.disabled {
  color: var(--jf-gray-300);
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
}

.jf-pagination .page-list li.current a {
  background: var(--jf-red);
  border-color: var(--jf-red);
  color: var(--jf-white);
  cursor: default;
  opacity: 1;
  pointer-events: none;
}

.jf-pagination .page-list .spacer span {
  color: var(--jf-gray-500);
  padding: 0 .25rem;
}

.jf-pagination .jf-page-arrow .material-icons,
.jf-pagination .jf-page-arrow .jf-lucide {
  font-size: 20px;
  height: 20px;
  width: 20px;
}

/* ============================================================
   Order confirmation (Claude Design handoff)
   ============================================================ */
.jf-confirm {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 1rem 3rem;
}

.jf-confirm-card {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  padding: 2rem 2.25rem;
}

.jf-confirm-hero__head {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 1.25rem;
}

.jf-confirm-check { color: #16a34a; display: inline-flex; }
.jf-confirm-check .material-icons,
.jf-confirm-check .jf-lucide { font-size: 34px; height: 34px; width: 34px; }

.jf-confirm-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0;
}

.jf-confirm-hero p { color: var(--jf-gray-700); line-height: 1.6; margin: 0 0 .6rem; }
.jf-confirm-hero p:last-child { margin-bottom: 0; }
.jf-confirm-hook { margin-top: 1rem; }

.jf-confirm-table { border-collapse: collapse; width: 100%; }
.jf-confirm-table th {
  border-bottom: 1px solid var(--jf-gray-200);
  color: var(--jf-gray-500);
  font-family: var(--font-condensed);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0 0 .75rem;
  text-transform: uppercase;
}
.jf-confirm-table th.jf-ci-h-prod { text-align: left; }
.jf-confirm-table td { border-bottom: 1px solid var(--jf-gray-100); padding: 1rem 0; vertical-align: middle; }
.jf-confirm-table tr:last-child td { border-bottom: 0; }

.jf-ci-num { color: var(--jf-gray-700); text-align: right; white-space: nowrap; }
.jf-ci-total { color: var(--jf-ink); font-weight: 700; }

.jf-ci-img {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 10px;
  display: inline-flex;
  height: 52px;
  margin-right: 14px;
  overflow: hidden;
  padding: 4px;
  vertical-align: middle;
  width: 52px;
}
.jf-ci-img img { display: block; margin: auto; max-height: 100%; max-width: 100%; object-fit: contain; }
.jf-ci-name { color: var(--jf-ink); font-weight: 600; vertical-align: middle; }

.jf-confirm-totals { margin: 1.25rem 0 0 auto; max-width: 340px; }
.jf-ct-row { color: var(--jf-gray-700); display: flex; justify-content: space-between; padding: .4rem 0; }
.jf-ct-total {
  align-items: baseline;
  border-top: 1px solid var(--jf-gray-200);
  margin-top: .4rem;
  padding-top: .8rem;
}
.jf-ct-total span:first-child { color: var(--jf-ink); font-weight: 700; }
.jf-ct-total span:last-child {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 1.5rem;
  font-weight: 900;
}

.jf-confirm-h {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1rem;
}
.jf-cd-row { color: var(--jf-gray-700); margin-bottom: .5rem; }
.jf-cd-row:last-child { margin-bottom: 0; }
.jf-cd-row b { color: var(--jf-ink); }

.jf-confirm-actions { display: flex; gap: 1rem; margin-top: .5rem; }
.jf-confirm-actions .btn {
  align-items: center;
  display: inline-flex;
  min-height: 48px;
  padding: 0 1.75rem;
}
.jf-btn-outline {
  background: transparent;
  border: 1.5px solid var(--jf-red);
  border-radius: var(--radius-pill);
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-weight: 700;
}
.jf-btn-outline:hover { background: var(--jf-red-50); color: var(--jf-red); }

/* ============================================================
   Account order pages (history / order detail) — handoff tokens.
   CSS-only pass (no template rewrite) so live checkout stays intact.
   ============================================================ */
.page-customer-account .box {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
  padding: 1.75rem 2rem;
}
.page-customer-account .addresses .box { background: var(--jf-paper); box-shadow: none; }

.page-customer-account .table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
.page-customer-account .table thead th {
  background: var(--jf-paper);
  border: 0;
  color: var(--jf-gray-500);
  font-family: var(--font-condensed);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .85rem 1.1rem;
  text-transform: uppercase;
}
.page-customer-account .table td,
.page-customer-account .table tbody th {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jf-gray-100);
  color: var(--jf-ink);
  font-weight: 400;
  padding: 1rem 1.1rem;
  vertical-align: middle;
}
.page-customer-account .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.page-customer-account .table tbody th { font-weight: 700; }

/* Order-state pill — keep the state's own colour (data), just shape it. */
.page-customer-account .label-pill,
.page-customer-account .label.label-pill {
  border-radius: var(--radius-pill);
  color: #fff;
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .85rem;
}

.page-customer-account .order-actions a,
.page-customer-account #order-infos .button-primary {
  color: var(--jf-red);
  font-weight: 600;
}
.page-customer-account .order-actions a + a { margin-left: .75rem; }

.page-customer-account #order-infos b { color: var(--jf-ink); font-family: var(--font-condensed); }
.page-customer-account .box h3,
.page-customer-account .box h4 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
}

/* Identity form: subtle "Mostrar" password toggle (was a grey box) + red checks. */
.page-customer-account .input-group-btn .btn,
.page-customer-account .input-group-append .btn {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  color: var(--jf-red);
  font-size: 12px;
  font-weight: 700;
  padding: 0 14px;
  text-transform: none;
}
.page-customer-account input[type="checkbox"],
.page-customer-account input[type="radio"] { accent-color: var(--jf-red); }

/* Order history — handoff grid card */
.jf-hist-sub { color: var(--jf-gray-500); font-size: 14px; margin: 0 0 18px; }
.jf-hist {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.jf-hist__head,
.jf-hist__row {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1.2fr 1fr 1fr 1.3fr 1.4fr auto;
  padding: 16px 22px;
}
.jf-hist__head {
  background: var(--jf-paper);
  border-bottom: 1px solid var(--jf-gray-200);
  color: var(--jf-gray-500);
  font-family: var(--font-condensed);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 14px 22px;
  text-transform: uppercase;
}
.jf-hist__row { border-bottom: 1px solid var(--jf-gray-100); }
.jf-hist__row:last-child { border-bottom: 0; }
.jf-hist__ref { color: var(--jf-ink); font-size: 13.5px; font-weight: 700; }
.jf-hist__date { color: var(--jf-gray-700); font-size: 13.5px; }
.jf-hist__total { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 15px; font-weight: 800; }
.jf-hist__pay { color: var(--jf-gray-500); font-size: 13px; }
.jf-ostate {
  background: var(--jf-gray-100);
  border-radius: var(--radius-pill);
  color: var(--jf-gray-700);
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: .3rem .7rem;
  white-space: nowrap;
}
.jf-hist__actions { display: flex; flex-direction: column; gap: 4px; }
.jf-hist__actions a {
  align-items: center;
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.jf-hist__detail { color: var(--jf-red); }
.jf-hist__reorder { color: var(--jf-gray-500); }
.jf-hist__actions a .material-icons,
.jf-hist__actions a .jf-lucide { font-size: 14px; height: 14px; width: 14px; }
.jf-scrollx { overflow-x: auto; }
.jf-hist-empty { color: var(--jf-gray-500); }

/* CMS / legal pages (handoff card) */
#cms .page-header { display: none; }
.jf-cms { margin: 0 auto; max-width: 900px; padding: 8px 1rem 3rem; }
.jf-cms-card {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 44px 48px;
}
.jf-cms-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 18px;
}
.jf-cms-rule { background: var(--jf-red); border-radius: 2px; height: 4px; margin: 0 0 28px; width: 52px; }
.jf-cms-content { color: var(--jf-ink); font-size: 15px; line-height: 1.75; }
.jf-cms-content h2 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 30px 0 12px;
}
.jf-cms-content h3 { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 18px; font-weight: 700; margin: 22px 0 10px; }
.jf-cms-content p { margin: 0 0 15px; }
.jf-cms-content ul { list-style: none; margin: 0 0 15px; padding: 0; }
.jf-cms-content ul li { line-height: 1.7; margin-bottom: 10px; padding-left: 22px; position: relative; }
.jf-cms-content ul li::before {
  background: var(--jf-red);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  position: absolute;
  top: 11px;
  width: 7px;
}
.jf-cms-content a { color: var(--jf-red-600); }
.jf-cms-content a:hover { color: var(--jf-red-700); }

/* 404 (handoff) */
#pagenotfound .page-header { display: none; } /* system "…no se ha encontrado" title */
.jf-404 {
  margin: 0 auto;
  max-width: 640px;
  padding: 56px 24px 48px;
  text-align: center;
}
.jf-404__img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  margin: 0 auto 24px;
  max-width: 280px;
  width: auto;
}
.jf-404__title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 14px;
}
.jf-404__text {
  color: var(--jf-gray-500);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 auto 30px;
  max-width: 540px;
}
.jf-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.jf-404__actions .btn {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
  padding: 0 1.5rem;
}

/* Product page layer — Claude Design ficha. */
.page-product #main {
  max-width: 1360px;
}

/* 2-column ficha grid (1fr / 1fr, 48px gap) */
.jf-ficha-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 2rem;
}

.jf-ficha-grid > .col-md-6 {
  flex: none;
  max-width: none;
  padding: 0;
  width: 100%;
}

/* Gallery: vertical thumb rail + square main image */
.jf-ficha-media .images-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  position: sticky;
  top: 1.25rem;
}

.jf-ficha-media .product-cover {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.jf-ficha-media .product-cover img {
  border: 0;
  box-shadow: none;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.jf-ficha-media .product-cover .layer {
  cursor: zoom-in;
  inset: 0;
  position: absolute;
}

.jf-ficha-media .js-qv-mask,
.jf-ficha-media .mask {
  flex: 0 0 72px;
  overflow: visible;
  width: 72px;
}

.jf-ficha-media .product-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.jf-ficha-media .product-images > li {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 12px;
  height: 72px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 72px;
}

.jf-ficha-media .product-images > li:hover,
.jf-ficha-media .product-images > li.thumb-container > .thumb.selected {
  border-color: var(--jf-red);
  box-shadow: 0 0 0 2px var(--jf-red-50);
}

.jf-ficha-media .product-images img {
  display: block;
  height: 72px;
  object-fit: contain;
  padding: .35rem;
  width: 72px;
}

.jf-ficha-media .scroll-box-arrows { display: none; }

/* Discount flag → circular red badge on the cover */
/* Classic's #content caps this at max-width:452px and centres it, shrinking the
   cover to ~364px inside a 531px column. Let it fill so the image is bigger. */
.jf-ficha-media .page-content {
  /* !important beats Classic's `#product #content { max-width:452px }` (2 IDs). */
  margin: 0 !important;
  max-width: none !important;
  position: relative;
  width: 100%;
}

.jf-ficha-media .product-flags {
  left: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 18px;
  width: auto;
  z-index: 2;
}

/* Higher specificity than Classic's `.product-flags li.product-flag(.discount)`
   (which forces an orange fit-content pill) so this wins: a red 60px circle. */
.jf-ficha-media .product-flags li.product-flag,
.jf-ficha-media .product-flags li.product-flag.discount,
.jf-ficha-media .product-flags li.product-flag.discount-percentage,
.jf-ficha-media .product-flags li.product-flag.discount-amount {
  align-items: center;
  background: var(--jf-red);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: #fff;
  display: flex;
  font-family: var(--font-condensed);
  font-size: 16px;
  font-weight: 800;
  height: 60px;
  justify-content: center;
  margin: 0 0 8px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  text-transform: none;
  width: 60px;
}

/* Only the discount circle belongs here (handoff). Hide the on-sale bar and the
   absolutely-placed "online only" flag Classic would otherwise stack in. */
.jf-ficha-media .product-flags li.product-flag.on-sale,
.jf-ficha-media .product-flags li.product-flag.online-only {
  display: none;
}

/* Info column */
.jf-pdp-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.jf-badge {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  padding: 0 12px;
}

.jf-badge--alimentacion { background: var(--jf-red-50); color: var(--jf-red); }
.jf-badge--drogueria { background: rgba(31, 58, 87, .1); color: var(--jf-navy); }
.jf-badge--petfood { background: var(--jf-yellow-100); color: var(--jf-yellow-700); }
.jf-badge--stock-ok { background: #e6f4ea; color: #1e7a43; }
.jf-badge--stock-low { background: var(--jf-yellow-100); color: var(--jf-yellow-700); }
.jf-badge--stock-out { background: var(--jf-red-50); color: var(--jf-red); }

.page-product h1.h1,
.jf-pdp-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 3.2vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 10px;
  text-transform: none;
}

.jf-pdp-ref {
  color: var(--jf-gray-500);
  font-size: 14px;
  margin-bottom: 24px;
}

.jf-pdp-ref b { color: var(--jf-gray-700); }

/* Price panel (wholesale price OR anonymous B2B lock) */
.jf-price-panel {
  background: var(--jf-paper);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  padding: 22px 24px;
}

.jf-price-panel .product-prices {
  border: 0;
  margin: 0;
  padding: 0;
}

.jf-price-note {
  color: var(--jf-gray-500);
  font-size: 12.5px;
  margin-top: 6px;
}

/* "Próximamente" — shown in place of the price for unpriced (0 €) new arrivals. */
.jf-price-soon {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

/* Coming-soon notice: neutral tone (it's news, not an error like out-of-stock). */
.jf-soon-notice {
  background: var(--jf-gray-100);
  border-color: var(--jf-gray-200);
  color: var(--jf-ink);
}

.jf-soon-notice .material-icons { color: var(--jf-gray-500); }

/* Disabled add-to-cart (coming soon) — clearly inactive, beats .btn-primary red. */
.page-product .add-to-cart:disabled,
.page-product .add-to-cart[disabled] {
  background: var(--jf-gray-300);
  border-color: var(--jf-gray-300);
  color: var(--jf-white);
  cursor: not-allowed;
}

.jf-price-lock { align-items: center; display: flex; gap: 14px; }

.jf-price-lock__ic {
  align-items: center;
  background: var(--jf-red-50);
  border-radius: 50%;
  color: var(--jf-red);
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.jf-price-lock__ic .material-icons { font-size: 20px; }
.jf-price-lock__t { color: var(--jf-ink); font-size: 15px; font-weight: 700; }
.jf-price-lock__s { color: var(--jf-gray-500); font-size: 13px; }

/* Handoff price row: big red price, "/ unidad", struck old price to the RIGHT. */
.page-product .jf-price-panel .jf-price-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-product .jf-price-panel .jf-price-now {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.page-product .jf-price-panel .jf-price-unit {
  color: var(--jf-gray-500);
  font-size: 14px;
}

.page-product .jf-price-panel .jf-price-old {
  color: var(--jf-gray-500);
  font-size: 19px;
  text-decoration: line-through;
}

/* Native tax/delivery label duplicates the wholesale note — hide it (handoff shows only the note). */
.page-product .jf-price-panel .tax-shipping-delivery-label {
  display: none;
}

/* Quantity stepper + add-to-cart row */
.jf-ficha-info .product-information,
.jf-ficha-info .product-actions {
  border: 0;
  margin: 0;
  padding: 0;
}

.page-product .product-add-to-cart { margin: 0; }
.page-product .product-add-to-cart .control-label { display: none; }

.page-product .product-quantity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

.page-product .product-quantity .qty { flex: 0 0 auto; margin: 0; }
.page-product .product-quantity .add { flex: 1 1 200px; margin: 0; }

/* Native touchspin → horizontal −  qty  + pill (icons are already remove/add) */
.page-product .bootstrap-touchspin {
  align-items: center;
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-pill);
  display: inline-flex;
  height: 48px;
  overflow: hidden;
  width: auto;
}

.page-product .product-quantity #quantity_wanted {
  -moz-appearance: textfield;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--jf-ink);
  font-size: 16px;
  font-weight: 700;
  height: 46px;
  min-width: 52px;
  text-align: center;
  width: 52px;
}

.page-product .product-quantity #quantity_wanted::-webkit-outer-spin-button,
.page-product .product-quantity #quantity_wanted::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-product .input-group-btn-vertical,
.page-product .bootstrap-touchspin .input-group-btn { display: contents; }

.page-product .bootstrap-touchspin .btn-touchspin {
  align-items: center;
  background: var(--jf-white);
  border: 0;
  color: var(--jf-ink);
  display: inline-flex;
  height: 46px;
  justify-content: center;
  padding: 0;
  width: 44px;
}

/* Classic injects a chevron glyph into the (empty) <i>; hide it and draw a
   clean − / + on the button so the stepper reads −  qty  +. */
.page-product .bootstrap-touchspin .btn-touchspin > i { display: none; }
.page-product .bootstrap-touchspin .bootstrap-touchspin-down { order: -1; }
.page-product .bootstrap-touchspin .bootstrap-touchspin-down::after {
  content: "−";
  font-size: 22px;
  line-height: 1;
}
.page-product .bootstrap-touchspin .bootstrap-touchspin-up::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
}

.page-product .add-to-cart {
  align-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  min-width: 0;
  text-transform: none;
  width: 100%;
}

/* No wishlist on the PDP (handoff shows only the add-to-cart button). */
.page-product .wishlist-button-product,
.page-product .product-actions .wishlist-button-add,
.jf-ficha-info .wishlist-button-add {
  display: none !important;
}

/* Out-of-stock notice (handoff Kikkoman ficha) — shown when quantity <= 0. */
.jf-stock-notice {
  align-items: flex-start;
  background: var(--jf-red-50);
  border: 1px solid var(--jf-red-300);
  border-radius: var(--radius-md);
  color: var(--jf-red-700);
  display: flex;
  font-size: 13.5px;
  gap: 12px;
  line-height: 1.55;
  margin-top: 20px;
  padding: 16px 18px;
}

.jf-stock-notice .material-icons {
  color: var(--jf-red);
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 1px;
}

.page-product .product-minimal-quantity {
  background: var(--jf-yellow-100);
  border-radius: var(--radius-md);
  color: var(--jf-yellow-700);
  font-size: .9rem;
  margin: .9rem 0 0;
  padding: .75rem .9rem;
}

/* Social sharing block is not in the handoff ficha — hide it. */
.page-product .social-sharing { display: none; }

/* Descripción + Detalles stacked sections (replace Classic tabs) */
.jf-pdp-sections { margin-top: 56px; }
.jf-pdp-section { max-width: 820px; }
.jf-pdp-section + .jf-pdp-section { margin-top: 48px; }

.jf-pdp-h {
  border-bottom: 2px solid var(--jf-red);
  color: var(--jf-ink);
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 24px;
  margin: 0 0 18px;
  padding-bottom: 8px;
}

.jf-pdp-desc .product-description {
  color: var(--jf-gray-700);
  font-size: 15.5px;
  line-height: 1.7;
}

.jf-pdp-desc .product-description p { margin: 0 0 1em; }

.jf-kv-card {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.jf-kv {
  border-bottom: 1px solid var(--jf-gray-200);
  display: grid;
  gap: 16px;
  grid-template-columns: 240px 1fr;
  padding: 14px 22px;
}

.jf-kv:last-child { border-bottom: 0; }
.jf-kv > span:first-child { color: var(--jf-gray-500); font-size: 13.5px; }
.jf-kv > span:last-child { color: var(--jf-ink); font-size: 14.5px; font-weight: 600; }

.jf-pdp-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.jf-attach {
  align-items: center;
  color: var(--jf-navy);
  display: inline-flex;
  font-weight: 600;
  gap: 8px;
}

.jf-attach em { color: var(--jf-gray-500); font-style: normal; font-weight: 400; }

/* Customer/B2B layer. */
.page-authentication #content,
.page-my-account #content,
.page-identity #content,
.page-addresses #content,
.page-history #content,
.page-order-slip #content {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 2rem;
}

.page-authentication .page-header h1,
.page-my-account .page-header h1,
.page-identity .page-header h1,
.page-addresses .page-header h1,
.page-history .page-header h1,
.page-order-slip .page-header h1 {
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: none;
}

.login-form,
.register-form,
.forgotten-password {
  max-width: 620px;
}

.page-my-account .links a,
.page-addresses .address,
.page-history table,
.page-order-slip table {
  border-radius: 16px;
}

.page-my-account .links a {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  box-shadow: var(--shadow-sm);
  color: var(--jf-ink);
  min-height: 130px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.page-my-account .links a:hover {
  border-color: var(--jf-red-300);
  box-shadow: 0 12px 28px rgba(232, 52, 66, .14), 0 4px 10px rgba(43, 43, 43, .06);
  color: var(--jf-red);
  transform: translateY(-2px);
}

.page-history table,
.page-order-slip table,
.page-addresses .address {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  box-shadow: var(--shadow-sm);
}

.page-history table thead,
.page-order-slip table thead {
  background: var(--jf-ink);
  color: var(--jf-white);
}

.page-history table th,
.page-history table td,
.page-order-slip table th,
.page-order-slip table td {
  border-color: var(--jf-gray-200);
  vertical-align: middle;
}

/* ══════════════ Cart (page-cart) — Claude Design ══════════════ */
/* Logic stays Classic; this only re-skins the native markup to the handoff. */
.page-cart #main,
.page-order #main { max-width: 1360px; }

/* Match the cart container to the header's .jf-container geometry (Bootstrap's
   .container caps at 1140 → the cart was narrower/offset vs the logo→cart-icon span).
   Now both share max-width 1360 + 32px padding, so the cart + summary align edge-to-edge
   with the header. */
.page-cart .container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1360px;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

.page-cart .cart-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) 360px;
  margin: 0;
}

.page-cart .cart-grid-body,
.page-cart .cart-grid-right {
  flex: none;
  float: none;
  max-width: none;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.page-cart .cart-grid-body > .card,
.page-cart .cart-summary {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* "Tu carrito" title + item count — OUTSIDE the card (handoff). */
.jf-cart-head { margin: 0 0 20px; }
.jf-cart-head__title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0;
  text-transform: none;
}
.jf-cart-head__count { color: var(--jf-gray-500); font-size: 14px; font-weight: 400; margin: 6px 0 0; }
.page-cart .cart-container .separator { display: none; }

/* Desktop column header (Producto / Cantidad / Subtotal). Right cluster mirrors the
   product row's fixed widths + gaps so the labels sit over their columns. */
.jf-cart-cols {
  align-items: center;
  border-bottom: 1px solid var(--jf-gray-200);
  color: var(--jf-gray-500);
  display: flex;
  font-size: 11px;
  font-weight: 600;
  gap: 16px;
  letter-spacing: .06em;
  padding: 16px 24px;
  text-transform: uppercase;
}
.jf-cart-cols__prod { flex: 1 1 0; min-width: 0; }
.jf-cart-cols__qty { flex: 0 0 108px; text-align: center; }
.jf-cart-cols__sub { flex: 0 0 96px; text-align: right; }
.jf-cart-cols__rm { flex: 0 0 36px; }
@media (max-width: 767px) { .jf-cart-cols { display: none; } }

/* Ref + unit price under the name (handoff), lighter weights. */
.page-cart .jf-cart-ref { color: var(--jf-gray-500); font-size: 12px; margin-top: 2px; }
.page-cart .jf-cart-unit { color: var(--jf-gray-500); font-weight: 400; }
.page-cart .jf-cart-continue { display: inline-flex; align-items: center; }

/* Product lines — flatten Classic's Bootstrap columns into one flex row */
.page-cart .cart-overview { padding: 0; }
.page-cart .cart-items { list-style: none; margin: 0; padding: 0; }
.page-cart .cart-item {
  border-top: 1px solid var(--jf-gray-200);
  margin: 0;
  padding: 18px 24px;
}
.page-cart .product-line-grid { align-items: center; display: flex; gap: 16px; margin: 0; }
.page-cart .product-line-grid-right,
.page-cart .product-line-grid-right .row,
.page-cart .product-line-grid-right [class*="col-"] { display: contents; }
.page-cart .product-line-grid-right .hidden-md-up { display: none; }

.page-cart .product-line-grid-left {
  flex: 0 0 66px;
  max-width: 66px;
  padding: 0;
  width: 66px;
}
.page-cart .product-line-grid-left .product-image {
  align-items: center;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  display: flex;
  height: 66px;
  justify-content: center;
  padding: 8px;
  width: 66px;
}
.page-cart .product-line-grid-left img { max-height: 100%; max-width: 100%; object-fit: contain; }

/* flex-basis:0 (not auto) so the body fills the same width every row regardless of
   the product name's length — otherwise a long vs short name shifted the stepper +
   line total out of column on desktop. (Mobile re-stacks the row below, unaffected.) */
.page-cart .product-line-grid-body { flex: 1 1 0; min-width: 0; padding: 0; }
.page-cart .product-line-info { margin: 0; }
.page-cart .product-line-info a.label,
.page-cart .product-line-info > .label {
  color: var(--jf-ink);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
}
.page-cart .product-line-info.product-price { margin-top: 4px; }
.page-cart .product-line-grid-body .product-price .price,
.page-cart .product-line-grid-body .current-price .price {
  color: var(--jf-gray-500);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
}

/* Quantity stepper (native touchspin) → handoff pill */
.page-cart .cart-item .qty { flex: 0 0 auto; }
.page-cart .cart-item .bootstrap-touchspin {
  align-items: center;
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-pill);
  display: inline-flex;
  overflow: hidden;
  width: auto;
}
.page-cart .cart-item .js-cart-line-product-quantity {
  -moz-appearance: textfield;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--jf-ink);
  font-size: 14px;
  font-weight: 700;
  height: 36px;
  min-width: 40px;
  text-align: center;
  width: 40px;
}
.page-cart .cart-item .js-cart-line-product-quantity::-webkit-outer-spin-button,
.page-cart .cart-item .js-cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-cart .cart-item .input-group-btn-vertical,
.page-cart .cart-item .bootstrap-touchspin .input-group-btn { display: contents; }
.page-cart .cart-item .btn-touchspin {
  align-items: center;
  background: var(--jf-white);
  border: 0;
  color: var(--jf-ink);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 34px;
}
.page-cart .cart-item .btn-touchspin > i { display: none; }
.page-cart .cart-item .bootstrap-touchspin-down { order: -1; }
.page-cart .cart-item .bootstrap-touchspin-down::after { content: "−"; font-size: 18px; line-height: 1; }
.page-cart .cart-item .bootstrap-touchspin-up::after { content: "+"; font-size: 18px; line-height: 1; }

/* At qty 1 the "−" becomes a red trash that removes the product (handoff). */
.page-cart .cart-item .bootstrap-touchspin-down.jf-qty-remove::after { content: ""; }
.page-cart .cart-item .bootstrap-touchspin-down.jf-qty-remove {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e83442' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  cursor: pointer;
}

/* Line total + remove */
.page-cart .cart-item .product-price .price,
.page-cart .product-line-grid-right .product-price {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 19px;
  font-weight: 800;
}
/* Fixed-width cluster so the desktop column header (.jf-cart-cols) lines up over the
   stepper / subtotal / remove. The cluster is anchored from the right, so matching
   widths + gaps + 24px right padding in header and rows makes the columns align.
   ponytail: bump subtotal width if 4-digit totals appear. */
.page-cart .product-line-grid-right .product-price { flex: 0 0 96px; text-align: right; }
.page-cart .cart-item .cart-line-product-actions { flex: 0 0 36px; margin: 0; padding: 0; }

/* Desktop row spacing via margins (not flex `gap`): `gap` doubles at each nested
   display:contents boundary in the flattened right side, throwing the column header
   off. Margins on the real leaf items give clean 16px gaps; body grows so the
   stepper/subtotal/remove cluster sits flush-right and lines up under .jf-cart-cols.
   Mobile keeps the base gap:16 + its own reflow (this block is min-width:768 only). */
@media (min-width: 768px) {
  .page-cart .product-line-grid { gap: 0; }
  .page-cart .product-line-grid-body,
  .page-cart .cart-item .bootstrap-touchspin,
  .page-cart .product-line-grid-right .product-price,
  .page-cart .cart-item .cart-line-product-actions { margin-left: 16px; }
  .page-cart .product-line-grid > .clearfix { display: none; }
}
.page-cart .cart-item .remove-from-cart,
.page-cart .cart-item .js-cart-line-product-quantity + .remove-from-cart,
.page-cart .cart-item a[data-link-action="delete-from-cart"] {
  align-items: center;
  border-radius: 50%;
  color: var(--jf-gray-500);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.page-cart .cart-item .remove-from-cart:hover { background: var(--jf-red-50); color: var(--jf-red); }

/* Summary */
.page-cart .cart-summary .card-block,
.page-cart .cart-summary .cart-detailed-totals { padding: 0; }
.page-cart .cart-summary { padding: 24px; position: sticky; top: 120px; }
.page-cart .cart-detailed-totals::before {
  color: var(--jf-ink);
  content: "Resumen del pedido";
  display: block;
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}
.page-cart .cart-summary-line {
  align-items: center;
  border: 0;
  color: var(--jf-gray-700);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 8px 0;
}
.page-cart .cart-detailed-subtotals { border-bottom: 1px solid var(--jf-gray-200); padding-bottom: 6px; }
.page-cart .cart-summary-line .value { color: var(--jf-ink); font-weight: 600; }
.page-cart .cart-summary-line.cart-total {
  align-items: baseline;
  border: 0;
  margin: 0;
  padding: 16px 0 20px;
}
.page-cart .cart-summary-line.cart-total .label {
  color: var(--jf-ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}
.page-cart .cart-summary-totals .cart-summary-line.cart-total .value,
.page-cart .cart-summary-line.cart-total .value {
  color: var(--jf-red);
  font-family: var(--font-condensed);
  font-size: 30px;
  font-weight: 900;
}
.page-cart .cart-summary-line.cart-total .sub,
.page-cart .cart-summary-subtotals-container .sub { display: none; }

/* Promo */
.page-cart .block-promo { border-top: 0; border-bottom: 1px solid var(--jf-gray-200); padding: 10px 0; }
.page-cart .promo-code-button a,
.page-cart .display-promo a {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 7px;
}
/* Ticket/tag icon before the promo link (handoff). */
.page-cart .promo-code-button a::before,
.page-cart .display-promo a::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 16px;
  -webkit-mask: var(--jf-m-tag) center / contain no-repeat;
  mask: var(--jf-m-tag) center / contain no-repeat;
  width: 16px;
}

/* Empty cart (handoff centred card) */
.jf-cart-empty-wrap { margin: 0 auto; max-width: 900px; padding: 8px 1rem 3rem; }
.jf-cart-title { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 40px; font-weight: 700; margin: 0 0 18px; }
.jf-cart-empty {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 64px;
  text-align: center;
}
.jf-cart-empty .material-icons,
.jf-cart-empty .jf-lucide { color: var(--jf-gray-300); font-size: 56px; height: 56px; width: 56px; }
.jf-cart-empty__t { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 24px; font-weight: 700; margin: 16px 0 8px; }
.jf-cart-empty p { color: var(--jf-gray-500); margin: 0 0 22px; }
.jf-cart-empty .btn {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
  padding: 0 1.6rem;
}
.page-cart .promo-code { padding: 12px 0 0; }
.page-cart .promo-code .btn { border-radius: var(--radius-md); }

/* CTA "Finalizar compra" */
.page-cart .cart-detailed-actions { padding-top: 6px; }
.page-cart .cart-detailed-actions .btn,
.page-cart .checkout.cart-detailed-actions .btn {
  align-items: center;
  border-radius: var(--radius-pill);
  display: flex;
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 700;
  justify-content: center;
  min-height: 52px;
  text-transform: none;
  width: 100%;
}

/* "Seguir comprando" link under the cart card */
.page-cart .cart-grid-body > .label {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  margin-top: 16px;
}

/* ══════════════ Checkout (page-order) — Claude Design ══════════════ */
.cart-detailed-actions .btn,
.checkout-step .continue,
.js-terms a { border-radius: var(--radius-pill); }

.checkout-step .step-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: -.02em;
}

.page-order #wrapper { padding-top: 2rem; }

.page-order #content-wrapper,
.page-order #main,
.page-order #content { width: 100%; }

.page-order .cart-grid,
.page-order #content > .row {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) 360px;
  margin: 0;
}
.page-order .cart-grid-body,
.page-order .cart-grid-right { flex: none; float: none; max-width: none; min-width: 0; padding: 0; width: 100%; }

/* Keep Bootstrap's negative-margin rows inside a step from overflowing the track. */
.page-order .checkout-step .content .row { margin-left: 0; margin-right: 0; }
.page-order .checkout-step .delivery-option,
.page-order .checkout-step .carrier-extra-content { margin-left: 0; margin-right: 0; }

.page-order .checkout-step {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}

.page-order .checkout-step .step-title {
  align-items: center;
  background: var(--jf-white);
  border: 0;
  color: var(--jf-ink);
  display: flex;
  font-family: var(--font-condensed);
  font-size: 1.35rem;
  font-weight: 700;
  gap: .65rem;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  min-height: 70px;
  padding: 1.1rem 1.25rem;
  text-transform: none;
}

.page-order .checkout-step.-current .step-title {
  color: var(--jf-red);
}

.page-order .checkout-step .step-number {
  align-items: center;
  background: var(--jf-gray-200);
  border-radius: 50%;
  color: var(--jf-gray-500);
  display: inline-flex;
  flex: 0 0 28px;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  letter-spacing: 0;
  width: 28px;
}

.page-order .checkout-step.-current .step-number {
  background: var(--jf-red);
  color: #fff;
}

.page-order .checkout-step.-complete .step-number {
  background: var(--jf-red);
  color: #fff;
}

.page-order .checkout-step .done {
  color: #fff;
  font-size: 1.2rem;
}

.page-order .checkout-step.-unreachable .step-title { opacity: .5; }

.page-order .checkout-step .step-edit {
  align-items: center;
  color: var(--jf-gray-500) !important;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  gap: .25rem;
  margin-left: auto;
  text-transform: none;
}

.page-order .checkout-step .content {
  border-top: 1px solid var(--jf-gray-200);
  padding: 1.25rem 1.5rem 1.5rem;
}

.page-order .payment-options {
  display: grid;
  gap: .75rem;
}

.page-order .payment-options > div,
.page-order .delivery-option,
.page-order .address-item {
  background: var(--jf-paper);
  border: 1px solid var(--jf-gray-200);
  border-radius: 16px;
  margin: 0;
  padding: .9rem 1rem;
}

.page-order .payment-option {
  align-items: center;
  display: flex;
  gap: .7rem;
  min-height: 28px;
}

.page-order .payment-option label {
  color: var(--jf-ink);
  font-weight: 600;
  margin: 0;
}

.page-order .custom-radio,
.page-order .custom-checkbox {
  flex: 0 0 auto;
}

.page-order .js-terms {
  color: var(--jf-gray-700);
  font-size: .95rem;
  line-height: 1.35;
}

.page-order #payment-confirmation {
  margin-top: 1.25rem;
}

.page-order #payment-confirmation .btn-primary,
.page-order .continue,
.page-order .checkout-step .btn-primary {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 48px;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  text-transform: none;
}

/* Delivery/payment/address option cards → handoff radius + icon accent */
.page-order .payment-options > div,
.page-order .delivery-option,
.page-order .address-item {
  border-radius: var(--radius-md);
}

.page-order .delivery-option:hover,
.page-order .payment-options > div:hover {
  border-color: var(--jf-red-300);
}

/* Checkout summary product thumbs */
.page-order #js-checkout-summary .media-list img,
.page-order .cart-summary-products img {
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-sm, 8px);
}

.page-order .cart-grid-right .card,
.page-order #js-checkout-summary {
  align-self: start;
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 120px;
}

.page-order .cart-summary-products p,
.page-order .cart-summary-line {
  color: var(--jf-gray-700);
}

.page-order .cart-summary-line.cart-total {
  border-top: 1px solid var(--jf-gray-200);
  margin-top: .75rem;
  padding-top: .9rem;
}

#checkout.page-order .checkout-step {
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

#checkout.page-order .checkout-step .step-title {
  align-items: center;
  color: var(--jf-ink);
  display: flex;
  font-family: var(--font-condensed);
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  gap: .65rem;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  min-height: 70px;
  padding: 1.1rem 1.25rem;
  text-transform: none !important;
}

#checkout.page-order .checkout-step.-current .step-title {
  color: var(--jf-red);
}

/* Beat Classic's high-specificity `body#checkout section...` step-number rule. */
#checkout.page-order .checkout-step .step-number {
  background: var(--jf-gray-200) !important;
  color: var(--jf-gray-500) !important;
}
#checkout.page-order .checkout-step.-current .step-number {
  background: var(--jf-red) !important;
  color: #fff !important;
}
#checkout.page-order .checkout-step.-complete .step-number {
  background: var(--jf-red) !important;
  color: #fff !important;
}

#checkout.page-order .checkout-step .step-edit {
  margin-left: auto;
  text-transform: none !important;
}

#checkout.page-order .checkout-step .content {
  border-top: 1px solid var(--jf-gray-200);
}

/* ══════════════ Order confirmation — light handoff skin ══════════════ */
/* Reached only after placing an order; keep this conservative/additive. */
.page-order-confirmation #main { max-width: 960px; }

.page-order-confirmation #content-hook_order_confirmation,
.page-order-confirmation .card,
.page-order-confirmation #order-details,
.page-order-confirmation .order-confirmation-table {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
}

.page-order-confirmation h1,
.page-order-confirmation h2,
.page-order-confirmation h3,
.page-order-confirmation .h1,
.page-order-confirmation .h2,
.page-order-confirmation .h3 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
}

.page-order-confirmation #content-hook_order_confirmation .card-title,
.page-order-confirmation .order-confirmation__title {
  color: #1e7a43;
}

/* Internal pages polish: B2B account/cart without changing Classic flow. */
.page-cart .page-header h1,
.page-order .page-header h1,
.page-authentication .page-header h1,
.page-my-account .page-header h1,
.page-identity .page-header h1,
.page-addresses .page-header h1,
.page-history .page-header h1,
.page-order-slip .page-header h1 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: clamp(2.15rem, 3.2vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 1.5rem;
  text-transform: none;
}

.page-cart .card,
.page-order .card,
.page-authentication .card {
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ══════════════ Account (customer/page.tpl) — Claude Design ══════════════ */
.page-customer-account #content,
.page-my-account #content,
.page-identity #content,
.page-address #content,
.page-addresses #content,
.page-history #content,
.page-order-detail #content,
.page-order-slip #content,
.page-discount #content { max-width: 1360px; }

/* Lucide stroke icons */
.jf-ic { display: inline-block; vertical-align: middle; }

/* Welcome header (server-rendered on every account page) */
.jf-acct-head {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}
.jf-acct-head__av {
  align-items: center;
  background: var(--jf-red-50);
  border-radius: 50%;
  color: var(--jf-red);
  display: inline-flex;
  flex: 0 0 56px;
  height: 56px;
  justify-content: center;
  width: 56px;
}
.jf-acct-head__tx { flex: 1 1 auto; min-width: 0; }
.jf-acct-head__kicker { color: var(--jf-gray-500); font-size: 13px; }
.jf-acct-head__name {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  text-transform: none;
}
.jf-acct-head__logout {
  align-items: center;
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-pill);
  color: var(--jf-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
}
.jf-acct-head__logout:hover { border-color: var(--jf-red); color: var(--jf-red); }

/* Back link + sub-page title */
.jf-acct-back {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 6px;
  margin-bottom: 16px;
}
.jf-acct-title { border: 0; margin: 0 0 18px; padding: 0; }
.jf-acct-title h1 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  text-transform: none;
}

/* Tile grid (scoped with #content to beat Classic's `#content .links a`) */
.page-my-account #content .links {
  align-items: start; /* cards fit their content — no row-stretch / empty space */
  display: grid !important;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-my-account #content .links > a {
  align-items: center !important;
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex !important;
  flex-direction: row !important;
  float: none !important;
  gap: 16px;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 22px !important;
  text-align: left !important;
  text-transform: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100% !important;
}
.page-my-account #content .links > a:hover {
  border-color: var(--jf-red-300);
  box-shadow: var(--shadow-md);
}
/* Wishlist / returns are not in the handoff dashboard grid. */
.page-my-account #content .links > a[href*="wishlist"],
.page-my-account #content .links > a#returns-link { display: none !important; }
.jf-tile__ic {
  align-items: center;
  background: var(--jf-red-50);
  border-radius: var(--radius-md);
  color: var(--jf-red);
  display: inline-flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
  width: 46px;
}
.jf-tile__tx { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.jf-tile__t {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
}
.jf-tile__d { color: var(--jf-gray-500); font-size: 13px; text-transform: none; }

/* Pedidos recientes (JS-injected from history) */
.jf-recent {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top: 36px;
  overflow: hidden;
}
.jf-recent__head {
  align-items: center;
  border-bottom: 1px solid var(--jf-gray-200);
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
}
.jf-recent__title { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 19px; font-weight: 700; }
.jf-recent__all { color: var(--jf-red); font-size: 13px; font-weight: 600; }
.jf-recent__row {
  align-items: center;
  border-bottom: 1px solid var(--jf-gray-200);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr 1.4fr auto;
  padding: 16px 24px;
}
.jf-recent__row:last-child { border-bottom: 0; }
.jf-recent__k { color: var(--jf-gray-500); display: block; font-size: 11px; }
.jf-recent__ref { color: var(--jf-ink); font-weight: 700; }
.jf-recent__total { color: var(--jf-ink); font-family: var(--font-condensed); font-size: 17px; font-weight: 800; }
.jf-recent__badge {
  border-radius: var(--radius-pill);
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
}
.jf-recent__link { color: var(--jf-red); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ══════════════ B2B forms (identity / addresses / auth) — handoff ══════════════ */
.page-identity #content form,
.page-address #content form,
.page-authentication #content form {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 760px;
  padding: 32px;
}

/* Stack labels above inputs (Classic renders them in Bootstrap columns) */
.page-identity .form-group.row,
.page-address .form-group.row,
.page-authentication .form-group.row {
  display: block;
  margin: 0 0 16px;
}
.page-identity .form-control-label,
.page-address .form-control-label,
.page-authentication .form-control-label {
  color: var(--jf-ink);
  display: block;
  float: none;
  font-size: 13.5px;
  font-weight: 600;
  max-width: none;
  padding: 0 0 6px;
  text-align: left;
  width: 100%;
}
.page-identity .form-group.row > .col-md-6,
.page-identity .form-group.row > .col-md-9,
.page-identity .form-group.row > .form-control-valign,
.page-address .form-group.row > .col-md-6,
.page-address .form-group.row > .col-md-9,
.page-authentication .form-group.row > .col-md-6,
.page-authentication .form-group.row > .col-md-9 {
  float: none;
  max-width: none;
  padding: 0;
  width: 100%;
}
.page-identity .form-control,
.page-address .form-control,
.page-authentication .form-control {
  background: var(--jf-white);
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--jf-ink);
  font-size: 14.5px;
  height: auto;
  padding: 11px 14px;
}
.page-identity .form-control:focus,
.page-address .form-control:focus,
.page-authentication .form-control:focus {
  border-color: var(--jf-red);
  box-shadow: 0 0 0 3px var(--jf-red-50);
}
.page-identity .form-control-comment,
.page-address .form-control-comment,
.page-authentication .form-control-comment {
  color: var(--jf-gray-500);
  font-size: 12px;
  margin-top: 5px;
}
.page-identity .btn-primary,
.page-address .btn-primary,
.page-authentication .btn-primary,
.page-identity .form-control-submit,
.page-address [type="submit"],
.page-authentication [type="submit"] {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 48px;
  padding: 0 1.6rem;
  text-transform: none;
}

/* Two-column field pairs on the identity form (fields live in form > div) */
.page-identity #content form > div {
  display: grid;
  gap: 16px 20px;
  grid-template-columns: 1fr 1fr;
}
.page-identity #content form > div > * { grid-column: 1 / -1; margin-bottom: 0; }
.page-identity #content form > div > .form-group.row:has([name="firstname"]),
.page-identity #content form > div > .form-group.row:has([name="lastname"]),
.page-identity #content form > div > .form-group.row:has([name="company"]),
.page-identity #content form > div > .form-group.row:has([name="siret"]),
.page-identity #content form > div > .form-group.row:has([name="password"]),
.page-identity #content form > div > .form-group.row:has([name="new_password"]) {
  grid-column: span 1;
}

/* Tratamiento Sr./Sra. as pill toggles */
.page-identity .form-group.row:has(#field-id_gender-1) .form-control-valign,
.page-address .form-group.row:has(#field-id_gender-1) .form-control-valign,
.page-authentication .form-group.row:has(#field-id_gender-1) .form-control-valign {
  display: flex;
  gap: 10px;
}
.page-identity .radio-inline,
.page-address .radio-inline,
.page-authentication .radio-inline {
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-pill);
  color: var(--jf-ink);
  cursor: pointer;
  font-weight: 600;
  margin: 0;
  padding: 8px 24px;
  transition: background .12s ease, border-color .12s ease;
}
.page-identity .radio-inline:has(input:checked),
.page-address .radio-inline:has(input:checked),
.page-authentication .radio-inline:has(input:checked) {
  background: var(--jf-red);
  border-color: var(--jf-red);
  color: #fff;
}
.page-identity .radio-inline .custom-radio,
.page-address .radio-inline .custom-radio,
.page-authentication .radio-inline .custom-radio { display: none; }

/* ══════════════ Login "Acceso a clientes" — two columns ══════════════ */
.jf-auth { max-width: 940px; margin: 0 auto; }
.jf-auth__head { margin-bottom: 32px; text-align: center; }
.jf-auth__head h1 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  text-transform: none;
}
.jf-auth__head p { color: var(--jf-gray-500); margin: 0; }
.jf-auth__grid { align-items: stretch; display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.jf-auth__card {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0;
  padding: 32px;
}
.jf-auth .login-form { margin: 0; }
/* The jf-auth__card is the card; keep the inner login <form> flat (no nested card). */
.jf-auth__card form {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  padding: 0;
}
.jf-auth__card-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
}
.jf-auth__card .form-control {
  background: var(--jf-white);
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  height: auto;
  padding: 11px 14px;
}
.jf-auth__card .form-control:focus { border-color: var(--jf-red); box-shadow: 0 0 0 3px var(--jf-red-50); }
.jf-auth__card label { color: var(--jf-ink); font-size: 13.5px; font-weight: 600; }
.jf-auth__card [type="submit"],
.jf-auth__card .btn-primary {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 52px;
  text-transform: none;
  width: 100%;
}
.jf-auth__card .forgot-password { font-size: 13.5px; }
.jf-auth__card .forgot-password a { color: var(--jf-red); font-weight: 600; }
.jf-auth__register { background: var(--jf-paper); }
.jf-auth__register-lead { color: var(--jf-gray-700); line-height: 1.6; margin: 0 0 20px; }
.jf-auth__bullets { list-style: none; margin: 0 0 24px; padding: 0; }
.jf-auth__bullets li {
  align-items: center;
  color: var(--jf-ink);
  display: flex;
  font-weight: 600;
  gap: 12px;
  padding: 8px 0;
}
.jf-auth__bullets li .jf-ic { color: var(--jf-red); flex: 0 0 auto; }
.jf-auth__register-btn {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--jf-red);
  border-radius: var(--radius-pill);
  color: var(--jf-red);
  display: flex;
  font-family: var(--font-condensed);
  font-weight: 700;
  justify-content: center;
  min-height: 52px;
  width: 100%;
}
.jf-auth__register-btn:hover { background: var(--jf-red); color: #fff; }

/* History sub-page subtitle (native <h6>) + table in a card */
.page-history #content h6 {
  color: var(--jf-gray-500);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  margin: -4px 0 20px;
}
.page-history #content .table,
.page-order-slip #content .table,
.page-discount #content .table {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.page-history #content .table thead th {
  background: var(--jf-paper);
  border: 0;
  color: var(--jf-gray-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-history #content .table td,
.page-history #content .table th[scope="row"] { border-color: var(--jf-gray-200); vertical-align: middle; }
.page-history #content .order-actions a { color: var(--jf-red); font-weight: 600; }
.page-history #content .label-pill { border-radius: var(--radius-pill); font-weight: 600; }

/* sqlpyme "Documentos de venta" filter (page-customer-account) */
.page-customer-account #content form .form-control,
.page-customer-account #content form select.form-control {
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  height: auto;
  padding: 10px 12px;
}
.page-customer-account #content button[name="submitFilter"] {
  align-items: center;
  background: var(--jf-red);
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  display: inline-flex;
  font-family: var(--font-condensed);
  font-weight: 700;
  justify-content: center;
  padding: 10px 20px;
}

/* (Old generic cart rules removed — superseded by the .page-cart handoff block above.) */

/* Claude Design shared-chrome re-baseline. */
#header {
  background: transparent !important;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Semi-transparent main bar + nav so the hero shows through (handoff). */
#header .header-top.jf-header-main,
#header .jf-header-main {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative; /* full-width positioning context for the mega panel */
}
/* Nav is semi-transparent but WITHOUT backdrop-filter — a filter would make it a
   containing block (with padding) and break the full-bleed mega, which must
   anchor to the padding-free .jf-header-main. */
#header .jf-navrow {
  background: rgba(255, 255, 255, .72);
}

#header .jf-top-strip {
  min-height: 40px;
}

#header .jf-top-strip__inner {
  justify-content: flex-end;
}

#header .jf-top-strip__hook {
  display: none;
}

/* Semi-transparent, blurred header (headbar + nav strip) as in the handoff. */
#header .jf-header-main {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  box-shadow: none;
  overflow: visible;
  /* Classic's .header-top adds 20px top/bottom padding; the handoff main bar
     has none (only the headbar's own 14px). That padding pushed the whole bar
     down so the logo dipped only ~10px into the ink strip instead of ~30px. */
  padding-top: 0;
  padding-bottom: 0;
}

#header .jf-navrow {
  background: transparent;
}

/* Kill Classic's cyan (#24b9d7) link hover across the header; specific
   division/account colours below still win by higher specificity. */
#header a:hover,
#header a:focus {
  color: var(--jf-red);
}

/* Handoff top strip: phone/email carry inline icons, right-aligned. */
#header .jf-top-strip__contact a {
  align-items: center;
  display: inline-flex;
  gap: .4rem;
}

#header .jf-top-strip__contact a::before {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  width: 1em;
}

#header .jf-top-strip__contact a[href^="tel:"]::before {
  -webkit-mask: var(--jf-m-phone) center / contain no-repeat;
  mask: var(--jf-m-phone) center / contain no-repeat;
}

#header .jf-top-strip__contact a[href^="mailto:"]::before {
  -webkit-mask: var(--jf-m-mail) center / contain no-repeat;
  mask: var(--jf-m-mail) center / contain no-repeat;
}

#header .jf-headbar {
  gap: 2rem;
  min-height: 72px;
  padding-bottom: .875rem;
  padding-top: .875rem;
}

#header .jf-logo-wrap {
  bottom: .375rem;
  z-index: 3;
}

#header .jf-logo img {
  height: 100px;
}

#header .jf-header-search {
  flex-basis: 560px;
  max-width: 560px;
}

#header .jf-header-search #search_widget input[type="text"] {
  height: 46px;
  padding-bottom: .6875rem;
  padding-top: .6875rem;
}

#header .jf-header-actions .user-info a,
#header .jf-header-actions .blockcart .header {
  border-color: transparent;
  gap: .625rem;
  min-height: 52px;
  padding: .4375rem .75rem;
}

/* The cart <a> only wraps content when the cart is non-empty; keep the pill
   layout on .header so the icon/label/count stay aligned when it is empty. */
#header .jf-header-actions .blockcart .header {
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
}

#header .jf-header-actions .blockcart .header a {
  align-items: center;
  border: 0;
  color: var(--jf-ink);
  display: inline-flex;
  gap: .625rem;
  min-height: 0;
  padding: 0;
}

#header .jf-header-actions .blockcart .header:hover,
#header .jf-header-actions .user-info a.account:hover {
  background: var(--jf-gray-100);
}

/* Account: the Lucide user icon is the red-circle badge. The native glyph is
   `hidden-md-up` (desktop-hidden) — force it visible on desktop as the badge. */
#header .jf-header-actions .user-info a.logout { display: none !important; }
#header .jf-header-actions .user-info a.account svg.jf-lucide {
  align-items: center;
  background: var(--jf-red-50);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--jf-red);
  display: inline-flex !important;
  flex: 0 0 38px;
  height: 38px !important;
  justify-content: center;
  padding: 9px;
  width: 38px !important;
}

#header .jf-header-actions .blockcart .header i.material-icons,
#header .jf-header-actions .blockcart .header svg.jf-lucide {
  color: var(--jf-ink);
  height: 1.5rem;
  width: 1.5rem;
}

#header .jf-header-actions .cart-products-count {
  align-items: center;
  background: var(--jf-red);
  border: 2px solid var(--jf-white);
  border-radius: var(--radius-pill);
  color: var(--jf-white);
  display: inline-flex;
  font-size: .6875rem;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 .3rem;
  position: relative;
  transform: translate(-.35rem, -.75rem);
}

#header .jf-navrow {
  border-top-color: rgba(43, 43, 43, .12);
  gap: .125rem;
  min-height: 52px;
}

#header .jf-navrow .top-menu a[data-depth="0"],
#header .jf-navlink {
  font-size: 1rem;
  min-height: 52px;
}

/* Division tint on hover (text only). */
#header .jf-navrow-menu .top-menu > li.category:nth-child(1) > a[data-depth="0"]:hover { color: var(--jf-red); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(2) > a[data-depth="0"]:hover { color: var(--jf-navy); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(3) > a[data-depth="0"]:hover { color: var(--jf-yellow-700); }

/* Active division: coloured 3px underline (PrestaShop adds .current). */
#header .jf-navrow-menu .top-menu > li.category.current:nth-child(1) > a[data-depth="0"] { border-bottom-color: var(--jf-red); color: var(--jf-red); }
#header .jf-navrow-menu .top-menu > li.category.current:nth-child(2) > a[data-depth="0"] { border-bottom-color: var(--jf-navy); color: var(--jf-navy); }
#header .jf-navrow-menu .top-menu > li.category.current:nth-child(3) > a[data-depth="0"] { border-bottom-color: var(--jf-yellow-700); color: var(--jf-yellow-700); }

/* Mega-menu group accents per division. */
/* Droguería = navy */
#header .jf-navrow-menu .top-menu > li.category:nth-child(2) .sub-menu ul[data-depth="1"] > li.category > a[data-depth="1"] { color: var(--jf-navy); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(2) .sub-menu ul[data-depth="2"] > li > a:hover { color: var(--jf-navy); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(2) .sub-menu .jf-megaside__cta { color: var(--jf-navy); }
/* Mascotas = orange */
#header .jf-navrow-menu .top-menu > li.category:nth-child(3) .sub-menu ul[data-depth="1"] > li.category > a[data-depth="1"] { color: var(--jf-yellow-700); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(3) .sub-menu ul[data-depth="2"] > li > a:hover { color: var(--jf-yellow-700); }
#header .jf-navrow-menu .top-menu > li.category:nth-child(3) .sub-menu .jf-megaside__cta { color: var(--jf-yellow-700); }

/* Static nav links: Lucide icons + active underline, matching the handoff. */
.jf-navlink--home::before,
.jf-navlink--offers::before,
.jf-navlink--strong::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1.1em;
  width: 1.1em;
}
.jf-navlink--home::before {
  -webkit-mask: var(--jf-m-home) center / contain no-repeat;
  mask: var(--jf-m-home) center / contain no-repeat;
}
.jf-navlink--offers::before {
  -webkit-mask: var(--jf-m-tag) center / contain no-repeat;
  mask: var(--jf-m-tag) center / contain no-repeat;
}
.jf-navlink--strong::after {
  -webkit-mask: var(--jf-m-arrow-right) center / contain no-repeat;
  mask: var(--jf-m-arrow-right) center / contain no-repeat;
}

#header .jf-navlink--home,
#header .jf-navlink--offers {
  color: var(--jf-red);
}

.page-index #header .jf-navlink--home {
  border-bottom-color: var(--jf-red);
}

#header .jf-navlink--strong {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  margin-left: auto;
}

.jf-mobile-menu-overlay,
.jf-mobile-drawer {
  display: none;
}

body.jf-lock-scroll {
  overflow: hidden;
}

/* Shared finishing pass. */
.pagination .page-list {
  background: transparent;
  box-shadow: none;
}

.pagination a,
.pagination .current a {
  border-radius: var(--radius-pill);
}

.alert {
  border-radius: 16px;
}

.modal-content {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(43, 43, 43, .18);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .jf-headbar {
    gap: 1rem;
  }

  .jf-header-search {
    flex-basis: 320px;
    max-width: 320px;
  }

  .jf-header-actions .user-info .account span,
  .jf-header-actions .blockcart .header span.hidden-sm-down {
    display: none !important;
  }

  .jf-header-actions .user-info a,
  .jf-header-actions .blockcart .header a {
    padding-left: .8rem;
    padding-right: .8rem;
  }

  #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-index .featured-products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-index .jf-divisions {
    grid-template-columns: 1fr;
  }

  .jf-ficha-grid {
    gap: 32px;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* Classic's mobile search "open" state (header.is-open) hides the page by
     JS-inlining #wrapper{display:none}. Our search bar is always visible on
     mobile, so that state gets stuck and blanks the whole site. Force it back:
     !important beats the inline (non-important) display:none. */
  #wrapper { display: block !important; }

  .jf-container {
    padding: 0 1rem;
  }

  /* Account dashboard tiles: single column on mobile (3-col overflowed). */
  .page-my-account #content .links { grid-template-columns: 1fr !important; }

  /* Order-history grid card scrolls horizontally rather than overflowing. */
  .jf-hist { overflow-x: auto; }
  .jf-hist__head,
  .jf-hist__row { min-width: 640px; }

  .jf-top-strip {
    display: none;
  }

  .jf-headbar {
    flex-wrap: wrap;
    gap: .75rem;
    min-height: 72px;
    padding: .75rem 0;
  }

  .jf-header-search {
    flex: 1 1 100%;
    max-width: none;
    order: 4;
  }

  .jf-menu-toggle {
    bottom: auto;
    display: inline-flex;
    left: auto;
    position: static;
  }

  .top-logo img,
  .jf-logo img {
    height: 56px !important;
    max-height: none !important;
    width: auto !important;
  }

  /* Show the cart on mobile: the blockcart renders into .jf-header-actions
     (via displayNav2) and #_mobile_cart is never populated. #_desktop_user_info
     inside is empty (account lives in .jf-mobile-actions), so only the cart
     icon+count shows. order:3 places it in the top row before the wrapped search. */
  .jf-header-actions {
    align-items: center;
    display: flex;
    order: 3;
  }
  .jf-header-actions #_desktop_user_info { display: none; }

  /* No backdrop-filter on mobile: it makes .jf-header-main a containing block
     for the position:fixed drawer + overlay (they'd be clipped to the 158px
     header instead of filling the viewport). Solid header instead. */
  #header .jf-header-main {
    backdrop-filter: none !important;
    background: var(--jf-white) !important;
  }

  #header .jf-headbar {
    min-height: 72px;
    padding-bottom: .75rem;
    padding-top: .75rem;
  }

  #header .jf-mobile-menu-overlay {
    background: rgba(20, 20, 20, .45);
    display: block !important;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity .2s ease;
    z-index: 190;
  }

  #header .jf-mobile-drawer {
    background: var(--jf-white);
    bottom: 0;
    box-shadow: 0 12px 28px rgba(43, 43, 43, .2);
    display: flex !important;
    flex-direction: column;
    left: 0;
    max-width: 360px;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-102%);
    transition: transform .24s ease;
    visibility: hidden;
    width: 86vw;
    z-index: 191;
  }

  #header.jf-mobile-menu-open .jf-mobile-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  #header.jf-mobile-menu-open .jf-mobile-drawer {
    transform: translateX(0);
    visibility: visible;
  }

  .jf-mobile-drawer__head {
    align-items: center;
    background: var(--jf-white);
    border-bottom: 1px solid var(--jf-gray-200);
    display: flex;
    justify-content: space-between;
    padding: .875rem 1.125rem;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .jf-mobile-drawer__logo img {
    display: block;
    height: 44px;
    width: auto;
  }

  .jf-mobile-drawer__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--jf-ink);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
  }

  .jf-mobile-drawer__content {
    padding: .25rem 0 1.75rem;
  }

  .jf-mobile-drawer .top-menu {
    display: block;
    margin: 0;
  }

  .jf-mobile-drawer .top-menu > li {
    border-bottom: 1px solid var(--jf-gray-200);
  }

  .jf-mobile-drawer .top-menu a[data-depth="0"] {
    align-items: center;
    color: var(--jf-ink);
    display: flex;
    font-family: var(--font-condensed);
    font-size: 1.0625rem;
    font-weight: 700;
    gap: .75rem;
    min-height: 52px;
    padding: .75rem 1.25rem;
  }

  .jf-mobile-drawer .navbar-toggler {
    min-height: 52px;
  }

  .jf-mobile-drawer .sub-menu {
    background: var(--jf-paper);
    padding: .25rem 0 .75rem;
  }

  .jf-mobile-drawer .sub-menu a {
    color: var(--jf-gray-700);
    display: block;
    font-size: .9rem;
    padding: .55rem 1.25rem .55rem 2.25rem;
  }

  /* Desktop mega-menu side panel (medallion + blurb + CTA) rides along inside
     the ps_mainmenu markup that gets relocated into the drawer on mobile —
     it makes no sense in the accordion, so hide it here. */
  .jf-mobile-drawer .jf-megaside {
    display: none !important;
  }

  /* Static top-level links (Inicio / Ofertas / Todos los productos) that live
     in .jf-navrow on desktop; mirrored into the drawer to match the handoff. */
  .jf-mobile-drawer .jf-mobile-nav__link {
    align-items: center;
    border-bottom: 1px solid var(--jf-gray-200);
    color: var(--jf-ink);
    display: flex;
    font-family: var(--font-condensed);
    font-size: 1.0625rem;
    font-weight: 700;
    min-height: 52px;
    padding: .75rem 1.25rem;
  }

  .jf-mobile-drawer .jf-mobile-nav__link:hover {
    color: var(--jf-red);
  }

  .page-index #wrapper {
    padding-top: 1rem;
  }

  .page-index .homeslider-container,
  .page-index #carousel {
    border-radius: 18px;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 2.5rem;
    width: calc(100% - 2rem);
  }

  .page-index .featured-products {
    width: calc(100% - 2rem);
  }

  .page-index .jf-divisions {
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: -1rem auto 2.5rem;
    width: calc(100% - 2rem);
  }

  .page-index .jf-division-card {
    min-height: 130px;
    padding: 1rem 1.125rem;
  }

  .page-index .jf-division-card__mark {
    flex-basis: 68px;
    height: 68px;
    width: 68px;
  }

  .page-index .jf-division-card__mark img {
    height: 56px;
    width: 56px;
  }

  .page-index .jf-division-card__title {
    font-size: 1.55rem;
  }

  .page-index .featured-products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-index .product-miniature .thumbnail-container {
    padding: .875rem;
  }

  /* Carousel img inherits height:100% of the aspect-ratio container so it scales
     down proportionally (the old clamp() forced 217px into a ~111px 3:1 box, so
     overflow:hidden cropped the slide instead of shrinking it). */

  #js-product-list .products {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #js-product-list .product-miniature .thumbnail-container {
    min-height: 300px;
    padding: .875rem;
  }

  #js-product-list .product-miniature .thumbnail-top {
    min-height: 170px;
  }

  #js-product-list .product-miniature .thumbnail-container img {
    max-height: 170px;
  }

  #js-product-list-top,
  .products-selection {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }

  .page-authentication #content,
  .page-my-account #content,
  .page-identity #content,
  .page-addresses #content,
  .page-history #content,
  .page-order-slip #content {
    border-radius: 18px;
    padding: 1rem;
  }

  .jf-ficha-grid {
    grid-template-columns: 1fr;
  }

  .jf-ficha-media .images-container {
    position: static;
  }

  .jf-pdp-sections {
    margin-top: 40px;
  }

  .jf-kv {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-product .product-quantity .add {
    flex: 1 1 100%;
  }

  .page-my-account .links {
    grid-template-columns: 1fr;
  }

  .page-cart .card,
  .page-order .card,
  .page-authentication .card {
    border-radius: 18px;
  }

  .page-cart .cart-grid {
    grid-template-columns: 1fr;
  }

  .page-cart .cart-summary {
    position: static;
  }

  /* Must match the desktop selector `.page-order #content > .row` (spec 1,2,0):
     a plain `.page-order .row` (0,2,0) loses to it even inside this media query,
     so the 2-col grid stayed and the steps column collapsed to 0px on mobile. */
  .page-order .cart-grid,
  .page-order #content > .row {
    display: block !important;
    grid-template-columns: none !important;
  }

  .page-order .cart-grid-body,
  .page-order .cart-grid-right,
  .page-order #content-wrapper,
  .page-order #main,
  .page-order #content {
    float: none !important;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
  }

  .page-order .cart-grid-right {
    margin-top: 1rem;
  }

  .page-order .cart-grid-right .card,
  .page-order #js-checkout-summary {
    position: static;
  }

  #checkout.page-order .checkout-step {
    border-radius: 16px;
    margin-bottom: .75rem;
  }

  #checkout.page-order .checkout-step .step-title {
    flex-wrap: wrap;
    font-size: 1.15rem !important;
    min-height: 0;
    padding: .95rem 1rem;
  }

  #checkout.page-order .checkout-step .step-edit {
    flex-basis: 100%;
    margin-left: 2.65rem;
  }

  .page-order .checkout-step .content {
    padding: 1rem;
  }

  .page-order .payment-options > div,
  .page-order .delivery-option,
  .page-order .address-item {
    padding: .8rem;
  }

  .jf-footer-before {
    margin-top: 3rem;
  }

  .jf-footer-before > .container,
  .footer-container > .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .jf-footer-before .block_newsletter {
    margin-bottom: -2rem;
    padding: 1rem;
  }

  .jf-footer-before .block_newsletter .row,
  .jf-footer-before .block_newsletter form .row > .col-xs-12:first-child {
    align-items: stretch;
    flex-direction: column;
  }

  .jf-footer-before .block_newsletter [class*="col-"],
  .jf-footer-before .block_newsletter form,
  .jf-footer-before .block_newsletter .input-wrapper {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100% !important;
  }

  .jf-footer-before .block_newsletter form input[type="email"] {
    min-width: 0;
  }

  .jf-footer-before .block_newsletter form .btn-primary {
    width: 100%;
  }

  .footer-container .jf-footer-main {
    display: block;
  }

  /* Footer columns stack (display:block above kills the grid gap); the old rule
     targeted .links/.block-contact which aren't the real columns, so links sat
     flush against the next column's heading. Space the actual .jf-footer-col. */
  .footer-container .jf-footer-col {
    margin-bottom: 2rem;
  }
}

/* ═══════════════ Task-9 final pass ═══════════════ */

/* Cart hover dropdown: bridge the .5rem gap between the trigger and the panel so
   moving the pointer down to "Tramitar pedido" keeps :hover and stays open. The
   bridge lives on .blockcart (overflow:visible) — NOT on .body, which has
   overflow:hidden and would clip it. Only present while hovering, so it can't
   swallow clicks below the cart when the dropdown is closed. */
.jf-header-actions .blockcart:hover::after {
  content: "";
  height: .75rem;
  position: absolute;
  right: 0;
  top: 100%;
  width: 360px;
}

/* Add-to-cart confirmation modal — Classic markup, Jaferi tokens (kill the cyan
   product name, apply the condensed heading + red price). */
#blockcart-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#blockcart-modal .modal-header {
  border-bottom: 1px solid var(--jf-gray-200);
}
#blockcart-modal .modal-title {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
}
#blockcart-modal .modal-title .material-icons {
  color: var(--jf-red);
  vertical-align: middle;
}
#blockcart-modal .product-name,
#blockcart-modal .product-name a {
  color: var(--jf-ink) !important;
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
#blockcart-modal .product-price {
  color: var(--jf-red);
  font-weight: 700;
}
#blockcart-modal .cart-products-count {
  color: var(--jf-ink) !important;
  font-weight: 600;
}
#blockcart-modal .product-total .value,
#blockcart-modal .subtotal.value {
  font-weight: 700;
}
#blockcart-modal .cart-content-btn .btn {
  border-radius: var(--radius-pill);
}

/* Product gallery: round the hover zoom overlay to match the cover box; drop the
   red thumbnail state — handoff keeps the same rounded grey frame as the cover. */
.jf-ficha-media .product-cover .layer {
  border-radius: var(--radius-lg);
}
.jf-ficha-media .product-images > li .thumb,
.jf-ficha-media .product-images > li .thumb.selected,
.jf-ficha-media .product-images > li:hover .thumb {
  border: 0 !important;
  box-shadow: none !important;
}
.jf-ficha-media .product-images > li:hover,
.jf-ficha-media .product-images > li.thumb-container > .thumb.selected {
  border-color: var(--jf-gray-300);
  box-shadow: none;
}

/* Full-image modal (Classic #product-modal): keep Classic's desktop layout
   untouched — only round the shell, add the close button (theme tpl override),
   turn the thumbnail hover/selected border Jaferi-red (Classic paints it cyan),
   and on mobile/tablet stop the cover image stretching. */
#product-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  position: relative;
}
#product-modal .jf-modal-close {
  align-items: center;
  background: var(--jf-gray-100);
  border: 0;
  border-radius: 50%;
  color: var(--jf-ink);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  position: absolute;
  right: .6rem;
  top: .6rem;
  width: 40px;
  z-index: 5;
}
#product-modal .jf-modal-close:hover {
  background: var(--jf-gray-200);
}
#product-modal .product-images .thumb:hover,
#product-modal .product-images .thumb.selected,
#product-modal .product-images .thumb.js-modal-selected {
  border-color: var(--jf-red) !important;
}
@media (max-width: 991px) {
  #product-modal .product-cover-modal,
  #product-modal .js-modal-product-cover {
    display: block;
    height: auto !important;
    margin: 0 auto;
    max-height: 72vh;
    max-width: 100% !important;
    width: auto !important;
  }
}

/* Header search autocomplete: reference + price rows (price only when the ajax
   returns one — logged-in/allowed), and anchoring handled in jaferi.js. */
.ui-autocomplete.searchbar-autocomplete .jf-ac-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ui-autocomplete.searchbar-autocomplete .jf-ac-ref {
  color: var(--jf-gray-500);
  font-size: .75rem;
}
.ui-autocomplete.searchbar-autocomplete .jf-ac-price {
  color: var(--jf-red);
  font-weight: 700;
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
}
/* The menu stays appended to <body> (so nothing clips it — #search_widget has
   overflow:auto); jaferi.js positions it `fixed` under the input and keeps it
   there on scroll, since #header is sticky. This class just carries z-index. */
.ui-autocomplete.searchbar-autocomplete.jf-ac-anchored {
  z-index: 1200;
}

/* ═══════════════ Round: footer / account / identity / placeholder ═══════════════ */

/* Footer links — white, underline white on hover. Beats Classic theme.css
   `.footer-container li a {color:#7a7a7a}` (0,1,2) and `a {color:#24b9d7}` (the
   cyan that was tinting the underline). */
.footer-container .jf-footer-links a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  text-decoration-color: #fff;
}
.footer-container .jf-footer-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* Recent-orders card: span the same width as the tiles grid above it, which rides
   the Bootstrap .row's -15px side margins (cards start 15px outside #content pad). */
.jf-recent {
  margin-left: -15px;
  margin-right: -15px;
}

/* Cart emptied in-place via AJAX shows Classic's bare .no-items span cramped under
   the "Carrito" title — centre it with padding so it reads as an intentional state. */
.cart-grid-body .no-items {
  color: var(--jf-gray-500);
  display: block;
  font-size: 15px;
  padding: 32px 16px 44px;
  text-align: center;
}

/* Product "no image / broken image" placeholder (PDP cover). */
.jf-noimage {
  align-items: center;
  color: var(--jf-gray-500);
  display: flex;
  flex-direction: column;
  gap: 12px;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: absolute;
  text-align: center;
}
.jf-noimage svg {
  color: var(--jf-gray-300);
  height: 64px;
  width: 64px;
}
.jf-noimage span {
  font-size: 14px;
  font-weight: 600;
}
/* Listing/card variant: no absolute overlay (the .jf-card__img flex centres it). */
.jf-noimage--card {
  inset: auto;
  padding: 0;
  position: static;
}
.jf-noimage--card svg {
  height: 44px;
  width: 44px;
}
.jf-noimage--card span {
  font-size: 12px;
}

/* ── Identity + registration customer form (build on the existing B2B design:
   card + 2-col grid + Sr./Sra. pills). Phone is moved right below email by
   jfMoveCustomerPhone() in jaferi.js (DOM move — respects the grid). ── */

/* Bigger Sr./Sra. pills (the handoff "globos"). */
.page-identity .form-group.row:has(#field-id_gender-1) .radio-inline,
.page-address .form-group.row:has(#field-id_gender-1) .radio-inline,
.page-authentication .form-group.row:has(#field-id_gender-1) .radio-inline {
  font-size: 1rem;
  padding: 12px 34px;
}

/* Hide the newsletter opt-in for now (kept in the DOM, just not shown). */
.page-identity .form-group.row:has(input[name="newsletter"]),
.page-address .form-group.row:has(input[name="newsletter"]),
.page-authentication .form-group.row:has(input[name="newsletter"]) {
  display: none;
}

/* GDPR / consent checkboxes (both "Al enviar…" and "Marcando…"): checkbox beside
   the text, not stacked above it. The box is floated out (absolute, top-left) and
   the label is a block with left padding, so multi-line legal text flows/wraps
   normally instead of overflowing (the old flex row didn't wrap). */
.page-identity .custom-checkbox > label,
.page-address .custom-checkbox > label,
.page-authentication .custom-checkbox > label {
  display: block;
  margin: 0;
  padding-left: 1.9rem;
  position: relative;
}
.page-identity .custom-checkbox > label > input,
.page-identity .custom-checkbox > label > span:first-of-type,
.page-address .custom-checkbox > label > input,
.page-address .custom-checkbox > label > span:first-of-type,
.page-authentication .custom-checkbox > label > input,
.page-authentication .custom-checkbox > label > span:first-of-type {
  left: 0;
  position: absolute;
  top: .1rem;
}

/* ═══════════════ Round: login / forgot-password / cart summary·voucher·discount ═══════════════ */

/* Icon-in-field inputs (login + forgot email/password). */
.jf-field { position: relative; }
.jf-field__ic {
  align-items: center;
  color: var(--jf-gray-500);
  display: inline-flex;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.jf-field .form-control { padding-left: 42px; }
.jf-field--pw .form-control { padding-right: 46px; }
.jf-pw-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--jf-gray-500);
  cursor: pointer;
  display: inline-flex;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.jf-pw-toggle:hover { color: var(--jf-red); }
.jf-auth .login-form .forgot-password { margin: 4px 0 0; }
.jf-auth .login-form .forgot-password a { color: var(--jf-red); font-weight: 600; }

/* Vertically align the two "Acceso a clientes" card buttons: equal-height cards,
   both CTAs pinned to the bottom. */
.jf-auth__grid > .jf-auth__card { display: flex; flex-direction: column; }
.jf-auth .login-form form#login-form { display: flex; flex: 1 1 auto; flex-direction: column; }
.jf-auth .login-form .form-footer { margin-bottom: 0; margin-top: auto; padding-top: 20px; }
.jf-auth__register-btn { margin-top: auto; }

/* Forgot-password page (page-password): Jaferi card + heading. */
.page-password .page-header h1 {
  color: var(--jf-ink);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}
.jf-forgot {
  background: var(--jf-white);
  border: 1px solid var(--jf-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
  max-width: 640px;
  padding: 32px;
}
.jf-forgot__lead { color: var(--jf-gray-700); line-height: 1.6; margin: 0 0 22px; }
.jf-forgot .form-group { margin: 0 0 20px; }
.jf-forgot label { color: var(--jf-ink); display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.jf-forgot .form-control {
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  height: auto;
  padding: 11px 14px 11px 42px;
  width: 100%;
}
.jf-forgot .form-control:focus { border-color: var(--jf-red); box-shadow: 0 0 0 3px var(--jf-red-50); outline: none; }
.jf-forgot .btn-primary {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 48px;
  padding: 0 1.8rem;
}
.page-password .jf-acct-back { color: var(--jf-red); font-weight: 600; margin-top: 20px; }

/* Cart line discount badge: red pill with white text (was red-on-orange). */
.page-cart .cart-item .discount,
.page-cart .cart-item .discount-percentage {
  background: var(--jf-red);
  border-radius: var(--radius-pill);
  color: #fff !important;
  font-weight: 700;
  padding: 2px 9px;
}

/* Promo-code voucher, expanded: Jaferi input + button, no blue links. */
.page-cart .promo-code form {
  align-items: center;
  display: flex;
  gap: 8px;
}
.page-cart .promo-input {
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  flex: 1 1 auto;
  padding: 10px 14px;
}
.page-cart .promo-input:focus { border-color: var(--jf-red); box-shadow: 0 0 0 3px var(--jf-red-50); outline: none; }
.page-cart .promo-code .btn-primary {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 44px;
  padding: 0 1.4rem;
}
.page-cart #promo-code a,
.page-cart .promo-code a,
.page-cart .cancel-promo {
  color: var(--jf-red) !important;
  font-size: 13px;
  font-weight: 600;
}
.page-cart .promo-code .alert-danger { color: var(--jf-red); font-size: 13px; margin-top: 8px; }

/* ═══════════════ Round: checkout (page-order) + cart summary polish + login fixes ═══════════════ */

/* Login: text was overlapping the field icon (the .jf-auth__card padding shorthand
   reset padding-left). Force room for the icon; keep the eye clear on the right. */
.jf-auth .jf-field .form-control { padding-left: 42px !important; }
.jf-auth .jf-field--pw .form-control { padding-right: 46px !important; }
/* Bottom-align both "Acceso a clientes" card CTAs (equal-height flex cards). */
.jf-auth__grid { align-items: stretch; }
.jf-auth__grid > .jf-auth__card { display: flex; flex-direction: column; }
.jf-auth .login-form > form#login-form { display: flex; flex: 1 1 auto; flex-direction: column; }
.jf-auth .login-form .form-footer { margin-bottom: 0; margin-top: auto; padding-top: 20px; }
.jf-auth__register-btn { margin-top: auto; }

/* Cart order summary: hard right-align every value + left-align the promo link. */
.page-cart .cart-summary-line { justify-content: space-between; }
.page-cart .cart-summary-line .value,
.page-cart .cart-summary-line .label + .value { margin-left: auto; text-align: right; }
.page-cart .block-promo,
.page-cart .promo-code-button,
.page-cart .display-promo { text-align: left; }
.page-cart .promo-code-button a,
.page-cart .display-promo a { justify-content: flex-start; }
/* Promo link icon: a ticket (was a tag) to match the handoff. */
.page-cart .promo-code-button a::before,
.page-cart .display-promo a::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2'/%3E%3Cpath d='M13 17v2'/%3E%3Cpath d='M13 11v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Checkout (page-order): Jaferi tokens ── */
/* Step number badges: round (the active one was squashed to an oval in the flex row). */
.page-order .step-number,
.page-order .checkout-step .step-number {
  border-radius: 50%;
  flex: 0 0 33px;
  height: 33px;
  min-width: 33px;
  width: 33px;
}
/* Blue (Classic cyan brand) → Jaferi red: selected radio / checked checkbox. */
.page-order .custom-radio input:checked + span,
.page-order .custom-checkbox input[type="checkbox"]:checked + span {
  background-color: var(--jf-red) !important;
  border-color: var(--jf-red) !important;
}
.page-order .custom-radio { border-color: var(--jf-gray-300); }
/* Cyan links (voucher "Cerrar", edit links) → red. */
.page-order a.cancel-promo,
.page-order #promo-code a,
.page-order .step-edit,
.page-order .cart-summary-line a { color: var(--jf-red) !important; }
/* Terms/conditions checkbox: highlighted box so it's clearly required. */
.page-order #conditions-to-approve {
  background: var(--jf-red-50);
  border: 1.5px solid var(--jf-red);
  border-radius: var(--radius-md);
  list-style: none;
  margin: 8px 0 20px;
  padding: 16px 18px;
}
.page-order #conditions-to-approve label,
.page-order #conditions-to-approve a { color: var(--jf-ink); }
.page-order #conditions-to-approve a { color: var(--jf-red); font-weight: 600; }
/* "Realizar pedido": full width, side to side. */
.page-order #payment-confirmation button,
.page-order #payment-confirmation .btn-primary,
.page-order .ps-shown-by-js #payment-confirmation button {
  border-radius: var(--radius-pill);
  font-family: var(--font-condensed);
  font-weight: 700;
  min-height: 52px;
  width: 100%;
}
/* Checkout back link + Jaferi copyright in the distraction-free header/footer. */
.jf-checkout-back {
  align-items: center;
  color: var(--jf-red);
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
}
.jf-checkout-copyright { color: var(--jf-gray-500); font-size: 13px; padding: 16px 0; }

/* Checkout selected address / delivery card: red outline (was Classic cyan). */
.page-order .address-item.selected,
.page-order .js-address-item.selected,
.page-order .delivery-option.selected,
.page-order .delivery-options-list .selected {
  border-color: var(--jf-red) !important;
}

/* ═══════════════ Round: checkout green badges / button states / terms tick / login card ═══════════════ */

/* Completed step badges were green → Jaferi red (active already red). */
.page-order .checkout-step.-complete .step-number,
.page-order .checkout-step.-current .step-number {
  background-color: var(--jf-red) !important;
  color: #fff !important;
}

/* Buttons flashed the default turquoise on click/focus (Bootstrap/Classic brand).
   Force red on every interactive state, site-wide. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--jf-red-700) !important;
  border-color: var(--jf-red-700) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.btn-primary:focus,
.btn-primary.focus,
.btn:focus { box-shadow: 0 0 0 3px var(--jf-red-50) !important; }
/* Outline CTAs (register / catalog) keep the red outline on active/focus too. */
.jf-btn-outline:hover,
.jf-btn-outline:focus,
.jf-btn-outline:active,
.jf-auth__register-btn:hover,
.jf-auth__register-btn:focus,
.jf-auth__register-btn:active {
  background-color: var(--jf-red) !important;
  border-color: var(--jf-red) !important;
  color: #fff !important;
}

/* Terms checkbox tick: white on red (was black on red). */
.page-order #conditions-to-approve .custom-checkbox input:checked + span,
.page-order .custom-checkbox input[type="checkbox"]:checked + span {
  color: #fff !important;
}
.page-order .custom-checkbox input[type="checkbox"]:checked + span svg { stroke: #fff !important; }

/* Login "Acceso a clientes": drop the outer #content card so the two cards sit on
   the page background (handoff), not nested in a card-within-a-card. */
.page-authentication #content.jf-auth {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Forgot-password field/label/button fixes (a more specific rule had reset the
   icon padding to 12px; the label inherited Classic's right align; the btn was
   uppercase). */
.jf-forgot .jf-field .form-control,
.jf-auth .jf-field .form-control { padding-left: 42px !important; }
.jf-forgot .jf-field--pw .form-control,
.jf-auth .jf-field--pw .form-control { padding-right: 46px !important; }
.jf-forgot label,
.jf-forgot .form-control-label { text-align: left !important; }
.jf-forgot .btn-primary { text-transform: none !important; }

/* The B2B rule `.page-authentication #content form{padding:32px}` (1,1,1) added
   padding to the login <form>, which ate the flex free space so the footer's
   margin-top:auto resolved to 0 → submit didn't bottom-align with the register CTA.
   Drop the form padding (the .jf-auth__card already provides it). */
.jf-auth .login-form form#login-form {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Mobile cart line (≤767px) ──────────────────────────────────────────
   Desktop flattens .product-line-grid-right (+ its .row/cols) with
   display:contents so qty/total/trash sit in the same flex row as the image
   and name. At 375px that row can't fit them → the touchspin collapsed to a
   few px. On mobile, un-flatten the right side into its own full-width second
   row: [− qty +]  ....  line-total   trash. */
@media (max-width: 767px) {
  .page-cart .product-line-grid { flex-wrap: wrap; align-items: flex-start; }
  .page-cart .product-line-grid-body { flex: 1 1 0; }

  .page-cart .product-line-grid-right {
    align-items: center;
    display: flex !important;
    flex: 1 1 100%;
    gap: 12px;
    margin-top: 12px;
  }
  .page-cart .product-line-grid-right > .row {
    align-items: center;
    display: flex !important;
    flex: 1 1 auto;
    margin: 0;
    width: 100%;
  }
  .page-cart .product-line-grid-right > .row > .col-md-10 {
    display: flex !important;
    flex: 1 1 auto;
    padding: 0;
  }
  .page-cart .product-line-grid-right > .row > .col-md-10 > .row {
    align-items: center;
    display: flex !important;
    flex: 1 1 auto;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
    width: 100%;
  }
  .page-cart .product-line-grid-right .col-md-6.qty {
    display: flex !important;
    flex: 0 0 auto;
    padding: 0;
  }
  .page-cart .product-line-grid-right .col-md-6.price {
    display: flex !important;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 0;
  }
  .page-cart .product-line-grid-right > .row > .col-md-2 {
    display: flex !important;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 0;
  }
  .page-cart .cart-item .bootstrap-touchspin { flex: 0 0 auto; }
}

/* Checkout header (#header) is position:sticky/top:0 but a `#header{background:
   transparent !important}` rule left it see-through, so scrolled step content
   bled behind it on mobile. Beat it: `.page-order #header` (1,1,0) + !important. */
@media (max-width: 767px) {
  .page-order #header {
    background: var(--jf-paper) !important;
    border-bottom: 1px solid var(--jf-gray-200);
  }
}

/* Mobile checkout header: logo left (with top/left breathing room), "Volver a la
   tienda" on the right, both vertically centred — was stacked flush-left. */
@media (max-width: 767px) {
  .jf-checkout-nav .mobile {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
  }
  .jf-checkout-nav .mobile .top-logo {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
  }
  .jf-checkout-nav .mobile .jf-checkout-back { flex: 0 0 auto; }
  .jf-checkout-nav .mobile .clearfix { display: none; }
}

/* Login: on mobile the two cards (login + "¿Aún no eres cliente?") don't fit at
   1fr 1fr — stack them (login on top, register below). */
@media (max-width: 767px) {
  .jf-auth__grid { grid-template-columns: 1fr; }
}

/* ── Registration page tweaks ──────────────────────────────────────────── */
/* GDPR/psgdpr consent: `#authentication .custom-checkbox label{padding-left:.625rem}`
   (spec 1,1,1) beat the generic GDPR rule so the text (10px) overlapped the 18px
   checkbox. Bump specificity to restore the 1.9rem gutter. */
#authentication .custom-checkbox > label { padding-left: 1.9rem; }

/* validaclientes "cuenta debe ser activada" note → red. */
.jf-activation-note { color: var(--jf-red); display: block; }

/* regpro reCAPTCHA: hint line + box around hint + widget. */
.jf-captcha-box {
  border: 1.5px solid var(--jf-gray-200);
  border-radius: var(--radius-md);
  margin: 16px 0;
  padding: 16px 18px;
}
.jf-captcha-box__hint {
  color: var(--jf-ink);
  font-weight: 600;
  margin: 0 0 12px;
}

/* ── Mobile product-listing tweaks ─────────────────────────────────────── */
/* "Filtrar" toggler overflowed the sort bar (sort dropdown + button didn't fit
   one row at 375px). Stack them full-width inside .jf-sort-wrap on mobile. */
@media (max-width: 767px) {
  .products-selection .jf-sort-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: .5rem;
  }
  .products-selection .jf-sort-wrap #search_filter_toggler { width: 100%; }
}

/* Category sidebar: collapsed behind a "Categorías" toggle on mobile (else the
   long list pushes products far down). Toggle injected by jfCollapseCategories().
   Desktop keeps the list always visible (toggle hidden). */
.jf-cats-toggle { display: none; }
@media (max-width: 767px) {
  .jf-cats-toggle {
    align-items: center;
    background: none;
    border: 0;
    color: var(--jf-ink);
    cursor: pointer;
    display: flex;
    font-family: var(--font-condensed);
    font-size: 1.05rem;
    font-weight: 700;
    justify-content: space-between;
    padding: 0;
    width: 100%;
  }
  .jf-cats-toggle .jf-cats-chevron { color: var(--jf-red); transition: transform .2s ease; }
  #left-column .block-categories .category-top-menu { display: none; }
  #left-column .block-categories.jf-cats-open .category-top-menu { display: block; margin-top: 1rem; }
  #left-column .block-categories.jf-cats-open .jf-cats-toggle .jf-cats-chevron { transform: rotate(180deg); }
}

/* ── Mobile listing/menu alignment fixes ───────────────────────────────── */
@media (max-width: 767px) {
  /* Listing columns stack on mobile but keep Bootstrap's mirrored gutter
     (#left-column padding-right:15px, #content-wrapper padding-left:15px), so the
     "Categorías" card sat ~15px left of the sort/product cards. Drop the inner
     gutter so both edges line up. */
  .container:has(#left-column) #left-column { padding-right: 0; }
  .container:has(#left-column) #content-wrapper { padding-left: 0; }

  /* Remove the focus ring on the injected Categorías toggle (ugly dotted box). */
  .jf-cats-toggle:focus { outline: none; }

  /* Hamburger drawer: the expand arrow (.float-xs-right) is the first flex child
     of the top-level <a>, so it rendered left of the label. Push it to the right,
     vertically centred (float is ignored inside a flex item). */
  .jf-mobile-drawer .top-menu a[data-depth="0"] .float-xs-right {
    margin-left: auto;
    order: 2;
  }
  /* The chevron's .navbar-toggler is a 52px-tall inline-block, so the 24px svg sat
     at its top → chevron rode above the text centre. Centre it. The toggler needs
     an id-scoped selector: theme.css's #mobile_top_menu_wrapper ... .navbar-toggler
     (1,2,0) beats any class selector. */
  .jf-mobile-drawer .top-menu a[data-depth="0"] .float-xs-right,
  #mobile_top_menu_wrapper .top-menu .navbar-toggler {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  /* Drop the "Contacte con nosotros" link from the mobile drawer. */
  #_mobile_contact_link { display: none; }

  /* Static links (Inicio/Ofertas/Todos los productos) sat 10px more indented than
     the category links: theme.css's #mobile_top_menu_wrapper .top-menu a[data-depth="0"]
     (1,2,1) forced the categories to 0.625rem, beating my .jf-mobile-drawer rule
     (0,3,1). Match the handoff's 1.25rem on the categories too → all aligned. */
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] { padding: .75rem 1.25rem; }

  /* Animate the expand chevron (rotate) instead of hot-swapping the down/up icons.
     Keep .add always visible, rotate it 180° when open; drop the .remove swap icon.
     id-scoped to beat theme.css's #mobile_top_menu_wrapper[aria-expanded] rules. */
  #mobile_top_menu_wrapper .top-menu .collapse-icons .add {
    display: block;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  #mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .add {
    display: block;
    transform: rotate(180deg);
  }
  #mobile_top_menu_wrapper .top-menu .collapse-icons .remove,
  #mobile_top_menu_wrapper .top-menu .collapse-icons[aria-expanded="true"] .remove {
    display: none;
  }

  /* Mi cuenta welcome header: on phones the long company name + logout pill on one
     row is cramped. Fill row 1 with avatar+name (tx doesn't shrink) so the pill
     wraps to row 2, indented under the name (past the 56px avatar + 16px gap). */
  .jf-acct-head { flex-wrap: wrap; }
  .jf-acct-head__tx { flex: 1 0 calc(100% - 72px); }
  .jf-acct-head__logout { margin-left: 72px; margin-top: 12px; }
}

/* Recent-orders rows (Mi cuenta): the 5-col grid (1fr 1fr 1fr 1.4fr auto) squeezes
   the status badge into a ~77px column on phones/tablets, so a long status wrapped
   into a tall pill "blob". Reflow to 2 cols with the badge + link on their own
   full-width rows, and make the badge a rounded rect (not a 999px pill) so long
   text reads as a label. */
@media (max-width: 991px) {
  .jf-recent__row {
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 16px;
  }
  .jf-recent__row > div:nth-child(4),
  .jf-recent__link {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .jf-recent__badge {
    border-radius: 10px;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
  }
}