/* ==========================================================================
   FacciaTech — modern theme (additive, does not modify style.css/main.css)
   Loaded sitewide from partials/css.blade.php after the legacy stylesheets,
   so it always wins the cascade. Safe to remove via a single <link> tag.
   ========================================================================== */

:root {
  --ft-orange: #fc291e;
  --ft-orange-deep: #d81f16;
  --ft-orange-glow: rgba(252,41,30,0.35);
  --ft-orange-soft: #ffe6e4;
  --ft-ink: #16130f;
  --ft-body: #6d6660;
  --ft-line: #ececec;
  --ft-line-strong: #dcdcdc;
  --ft-paper: #ffffff;
  --ft-paper-sunk: #f6f5f3;
  --ft-shadow: 0 1px 2px rgba(20,15,5,0.05), 0 12px 26px -16px rgba(20,15,5,0.28);
  --ft-footer-bg: #16130f;
  --ft-footer-ink: #f3ede6;
  --ft-footer-line: rgba(243,237,230,0.12);
  --ft-footer-sub: #b6ac9f;
}

/* ---------- base reset, scoped to pages fully on the new design (body.ft-page) ---------- */
/* Other, not-yet-redesigned pages still load the legacy stylesheets and are untouched by this block. */
html { overflow-x: hidden; }
.ft-page { margin: 0; padding: 0; background: var(--ft-paper-sunk); color: var(--ft-ink); overflow-x: hidden; max-width: 100vw;
  font-family: "Open Sans", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
/* :where() keeps this reset at zero specificity, so any single-class
   component rule (e.g. .ft-account-intro) always wins over it, regardless
   of source order — resets should never have to fight component styles. */
:where(.ft-page) :where(*) { box-sizing: border-box; }
:where(.ft-page) :where(a) { color: inherit; text-decoration: none; }
:where(.ft-page) :where(img, svg) { max-width: 100%; }
:where(.ft-page) :where(button) { font-family: inherit; cursor: pointer; }
:where(.ft-page) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.ft-page) :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }
.ft-page :focus-visible { outline: 2.5px solid var(--ft-orange); outline-offset: 2px; }
.ft-heading { font-family: "Raleway", "Segoe UI Semibold", "Segoe UI", sans-serif; font-weight: 800; }

.category-slider-area { padding-top: 25px; }
.ft-icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.ft-wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }

/* ---------- utility bar ---------- */
.ft-utility-bar { background: var(--ft-ink); color: var(--ft-paper-sunk); font-size: 0.76rem; }
.ft-utility-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 34px; }
.ft-utility-bar .ft-left { margin: 0; opacity: 0.7; min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-utility-bar .ft-authlinks { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0 16px 0 0; flex-shrink: 1; min-width: 0; max-width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.ft-utility-bar .ft-authlinks::-webkit-scrollbar { display: none; }
.ft-utility-bar .ft-authlinks li { flex-shrink: 0; }
.ft-utility-bar .ft-authlinks a { color: var(--ft-paper-sunk); opacity: 0.92; display: flex; align-items: center; gap: 6px; }
.ft-utility-bar .ft-authlinks a:hover { color: var(--ft-orange); opacity: 1; }
@media (max-width: 560px) {
  .ft-utility-bar .ft-left { display: none; }
  .ft-utility-bar { font-size: 0.68rem; }
  .ft-utility-bar .ft-authlinks { gap: 12px; }
  .ft-utility-bar .ft-authlinks a { gap: 4px; }
}

/* ---------- header ---------- */
.ft-header {
  background: color-mix(in srgb, var(--ft-paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--ft-line);
  position: sticky; top: 0; z-index: 40;
}
.ft-site-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 78px; }
.ft-logo { flex-shrink: 0; }
.ft-logo img { padding-top: 10px; height: 60px; width: auto; }
.ft-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 560px; display: flex; align-items: center; border: 1.5px solid var(--ft-line-strong); border-radius: 8px; overflow: hidden; background: var(--ft-paper); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ft-search:focus-within { border-color: var(--ft-orange); box-shadow: 0 0 0 3px var(--ft-orange-soft); }
.ft-search input { border: 0; outline: 0; flex: 1; padding: 0 16px; font-size: 0.92rem; background: transparent; color: var(--ft-ink); height: 42px; }
.ft-search button { border: 0; background: var(--ft-orange); color: #fff; width: 46px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ft-head-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.ft-head-actions a { font-size: 0.85rem; color: var(--ft-body); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ft-cart-pill { display: flex; align-items: center; gap: 9px; background: var(--ft-orange-soft); color: var(--ft-orange-deep); border-radius: 999px; padding: 9px 18px 9px 14px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; transition: border-color 0.15s ease; }
.ft-cart-pill:hover { border-color: var(--ft-orange); }
.ft-mainnav { border-top: 1px solid var(--ft-line); }
.ft-mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 30px; height: 44px; align-items: center; font-size: 0.86rem; }

/* ---------- mobile category widget (native <details>, replaces meanmenu) ---------- */
.ft-mobile-cat { border-top: 1px solid var(--ft-line); background: var(--ft-paper); position: relative; }
.ft-mobile-cat details { position: relative; }
.ft-mobile-cat summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 0.88rem; color: var(--ft-ink); display: flex; align-items: center; gap: 10px; }
.ft-mobile-cat summary::-webkit-details-marker { display: none; }
.ft-mobile-cat summary i.fa-bars { color: var(--ft-orange); }
.ft-mobile-cat summary::after { content: "\f107"; font-family: FontAwesome; margin-left: auto; color: var(--ft-body); }
.ft-mobile-cat details[open] summary::after { content: "\f106"; }
.ft-mobile-cat-list {
  list-style: none; margin: 0; padding: 10px 0 14px; display: flex; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  max-height: min(70vh, 480px); overflow-y: auto;
  background: var(--ft-paper); border: 1px solid var(--ft-line); border-top: none; border-radius: 0 0 10px 10px;
  box-shadow: var(--ft-shadow);
}
.ft-mobile-cat-list > li > a { display: block; padding: 8px 16px; font-weight: 700; font-size: 0.85rem; color: var(--ft-ink); text-transform: capitalize; }
.ft-mobile-cat-list ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 30px; }
.ft-mobile-cat-list ul li a { display: block; padding: 6px 4px; font-size: 0.82rem; color: var(--ft-body); text-transform: capitalize; }
.ft-mobile-cat-list a:hover { color: var(--ft-orange-deep); }
@media (min-width: 992px) { .ft-mobile-cat { display: none; } }
.ft-mainnav a { color: var(--ft-body); font-weight: 600; position: relative; padding: 4px 0; display: inline-block; }
.ft-mainnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ft-orange); transform: scaleX(0); transition: transform 0.15s ease; }
.ft-mainnav a:hover { color: var(--ft-ink); }
.ft-mainnav a:hover::after { transform: scaleX(1); }

@media (max-width: 960px) {
  .ft-site-row { flex-wrap: wrap; row-gap: 10px; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .ft-search { position: static; transform: none; order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 520px) { .ft-logo img { height: 60px; } }

/* ---------- category rail (nav-category.blade.php) ---------- */
.ft-cat-rail { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 10px; overflow: visible; box-shadow: var(--ft-shadow); }
.ft-cat-rail-head { background: var(--ft-orange); color: #fff; display: flex; align-items: center; gap: 10px;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 18px; border-radius: 10px 10px 0 0; }
.ft-cat-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ft-cat-item { position: relative; border-radius: 6px; }
.ft-cat-item > a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 0.84rem; font-weight: 600; color: var(--ft-ink); border-radius: 6px; border-left: 3px solid transparent; text-transform: capitalize; }
.ft-cat-item > a > .icon:first-child { width: 16px; height: 16px; color: var(--ft-body); }
.ft-cat-item:hover > a > .icon:first-child, .ft-cat-item:focus-within > a > .icon:first-child { color: var(--ft-orange); }
.ft-cat-item > a .ft-chev { margin-left: auto; width: 13px; height: 13px; color: var(--ft-line-strong); transition: transform 0.15s ease, color 0.15s ease; }
.ft-cat-item:hover > a, .ft-cat-item:focus-within > a { background: var(--ft-orange-soft); border-left-color: var(--ft-orange); color: var(--ft-orange-deep); }
.ft-cat-item:hover > a .ft-chev, .ft-cat-item:focus-within > a .ft-chev { color: var(--ft-orange); transform: translateX(2px); }
.ft-cat-flyout {
  position: absolute; left: calc(100% + 12px); top: -9px; width: 300px; max-height: 70vh; overflow-y: auto;
  background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(20,15,5,0.4);
  padding: 16px 18px; opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
.ft-cat-item:hover .ft-cat-flyout, .ft-cat-item:focus-within .ft-cat-flyout { opacity: 1; visibility: visible; transform: translateX(0); }
.ft-cat-flyout h4 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ft-body); text-transform: capitalize; }
.ft-cat-flyout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft-cat-flyout a { display: block; padding: 7px 8px; border-radius: 5px; font-size: 0.84rem; color: var(--ft-ink); text-transform: capitalize; }
.ft-cat-flyout a:hover { background: var(--ft-paper-sunk); color: var(--ft-orange-deep); }
.ft-cat-flyout .ft-flyout-all { margin-top: 8px; padding: 10px 8px 0; border-top: 1px solid var(--ft-line); border-radius: 0; font-weight: 700; color: var(--ft-orange-deep); font-size: 0.78rem; display: flex; align-items: center; justify-content: space-between; }
.ft-cat-flyout .ft-flyout-all:hover { background: none; }
.ft-flyout-all .icon { width: 13px; height: 13px; }
.ft-cat-filter-slot { border-top: 1px solid var(--ft-line); }
@media (max-width: 960px) { .ft-cat-rail { display: none; } }

/* ---------- hero slider (new, self-contained — no nivoSlider/jQuery plugin) ---------- */
.ft-hero-frame { position: relative; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 20px 44px -22px var(--ft-orange-glow), var(--ft-shadow); }
.ft-slides { position: relative; }
.ft-slide { display: none; }
.ft-slide.active { display: block; }
.ft-slide img { width: 100%; height: auto; display: block; }
.ft-hero-chip { position: absolute; left: 18px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.94); color: var(--ft-ink); font-size: 0.78rem; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.ft-hero-chip i { color: var(--ft-orange-deep); }
.ft-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.92); color: var(--ft-ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.28); z-index: 6; }
.ft-slide-arrow:hover { background: var(--ft-orange); color: #fff; }
.ft-slide-arrow.prev { left: 16px; } .ft-slide-arrow.next { right: 16px; }
.ft-slide-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 6; }
.ft-slide-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; }
.ft-slide-dots button.active { background: var(--ft-orange); width: 20px; border-radius: 4px; }
@media (max-width: 640px) { .ft-slide-arrow { width: 32px; height: 32px; } }

/* ---------- trust micro-row ---------- */
.ft-trust-row { display: flex; gap: 26px; flex-wrap: wrap; padding: 16px 4px; }
.ft-trust-row .ft-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ft-body); font-weight: 600; }
.ft-trust-row .ft-trust-item i { color: var(--ft-orange); }

/* ---------- section heading ---------- */
.ft-section-head { margin-bottom: 14px; }
.ft-section-head .ft-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ft-body); }
.ft-section-head .ft-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-orange); }
.ft-section-head h2 { font-size: 1.3rem; margin: 4px 0 0; color: var(--ft-ink); }

/* ---------- promo banner grid ---------- */
.ft-banner-section-full { grid-column: 1 / -1; margin-top: 4px; }
.ft-banner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; }
.ft-banner-card { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--ft-line); box-shadow: var(--ft-shadow);
  transition: transform 0.15s ease, border-color 0.15s ease; background: var(--ft-paper); margin: 0; }
.ft-banner-card:hover { transform: translateY(-3px); border-color: var(--ft-orange); }
.ft-banner-card img { width: 100%; height: auto; display: block; }
.ft-banner-card a { position: relative; display: block; }
.ft-banner-cta { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(22,19,15,0.9), transparent);
  color: #fff; font-size: 0.76rem; font-weight: 700; padding: 26px 12px 10px; display: flex; align-items: center; gap: 6px;
  transform: translateY(6px); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; }
.ft-banner-card:hover .ft-banner-cta { transform: translateY(0); opacity: 1; }
.ft-banner-cta i { color: var(--ft-orange); }
@media (max-width: 640px) { .ft-banner-grid { grid-template-columns: 1fr; } }

/* ---------- home layout (shop/index.blade.php) ---------- */
.ft-home-grid { display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; padding-bottom: 46px; }
.ft-home-grid > .ft-home-main { min-width: 0; }
@media (max-width: 960px) { .ft-home-grid { grid-template-columns: 1fr; } }
.ft-home-reseller-banner { margin-top: 6px; }
.ft-home-reseller-banner img { display: block; width: 100%; height: 260px; border-radius: 12px; box-shadow: var(--ft-shadow); }
@media (max-width: 900px) { .ft-home-reseller-banner img { height: 220px; } }
@media (max-width: 600px) { .ft-home-reseller-banner img { height: 145px; border-radius: 8px; } }

/* ---------- footer (deliberately dark in both themes) ---------- */
.ft-footer { background: var(--ft-footer-bg); color: var(--ft-footer-sub); padding: 46px 0 0; }
.ft-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; font-size: 0.85rem; padding-bottom: 34px; border-bottom: 1px solid var(--ft-footer-line); }
.ft-footer-brand img { height: 50px; width: auto; margin-bottom: 0px; filter: brightness(0) invert(1); opacity: 0.94; }
.ft-footer-brand p { max-width: 30ch; line-height: 1.55; font-size: 0.83rem; margin: 0; }
.ft-footer-grid h5 { color: var(--ft-footer-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }
.ft-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-footer-grid ul li a:hover { color: var(--ft-orange); }
.ft-footer-contact-row { padding-top: 22px; padding-bottom: 22px; }
.ft-footer-contact-row h5 { color: var(--ft-footer-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }
.ft-footer-contact-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.85rem; }
.ft-footer-contact li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; }
.ft-footer-contact li span { min-width: 0; overflow-wrap: anywhere; }
.ft-footer-contact .ft-icon { color: var(--ft-orange); margin-top: 2px; }
.ft-copyright-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; font-size: 0.78rem; color: var(--ft-footer-sub); flex-wrap: wrap; gap: 10px; }
.ft-copyright-bar a { color: var(--ft-footer-ink); font-weight: 700; }
.ft-payment-chip { display: flex; align-items: center; gap: 8px; background: rgba(243,237,230,0.08); padding: 6px 12px; border-radius: 999px; font-size: 0.76rem; color: var(--ft-footer-ink); }
.ft-payment-chip .ft-icon { color: var(--ft-orange); width: 15px; height: 15px; }
@media (max-width: 960px) { .ft-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .ft-footer-grid { grid-template-columns: 1fr; }
  .ft-footer-contact-row ul { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .ft-footer-contact li { width: 100%; }
}

/* ---------- breadcrumb ---------- */
.ft-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ft-body); padding: 14px 0 14px; flex-wrap: wrap; }
.ft-breadcrumb a:hover { color: var(--ft-orange-deep); }
.ft-breadcrumb .ft-sep { color: var(--ft-line-strong); }
.ft-breadcrumb .ft-current { color: var(--ft-ink); font-weight: 700; }

/* ---------- listing toolbar / title ---------- */
.ft-listing-toolbar { padding: 6px 0 18px; border-bottom: 1px solid var(--ft-line); margin-bottom: 20px; }
.ft-listing-toolbar h1 { font-size: 1.5rem; margin: 0 0 4px; color: var(--ft-ink); text-transform: capitalize; }
.ft-listing-toolbar .ft-count { font-size: 0.85rem; color: var(--ft-body); }

/* ---------- category page banner + brand filter (show.blade.php) ---------- */
.ft-cat-banner { margin-bottom: 20px; }
.ft-cat-banner a { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--ft-shadow); }
.ft-cat-banner img { width: 100%; height: auto; display: block; }
.ft-filter-block { background: var(--ft-paper); border-radius: 10px; box-shadow: var(--ft-shadow); padding: 16px 18px; }
.ft-filter-block h4 { margin: 0 0 12px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ft-body); }
.ft-brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ft-brand-list li a { display: flex; align-items: center; font-size: 0.85rem; color: var(--ft-ink); }
.ft-brand-list li a:hover { color: var(--ft-orange-deep); }
.ft-brand-list .ft-count { margin-left: auto; color: var(--ft-body); font-size: 0.78rem; }

/* ---------- product grid / card ---------- */
.ft-product-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.ft-product-card { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 10px; overflow: hidden; box-shadow: var(--ft-shadow); display: flex; flex-direction: column; height: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ft-product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px var(--ft-orange-glow), var(--ft-shadow); }
.ft-product-card .ft-p-img { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 18px; background: #fff; }
.ft-product-card .ft-p-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ft-product-card .ft-p-badge { position: absolute; top: 8px; left: 8px; background: var(--ft-paper-sunk); color: var(--ft-body); font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ft-product-card .ft-p-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ft-product-card .ft-p-name { font-size: 0.85rem; line-height: 1.35; min-height: 2.6em; color: var(--ft-ink); }
.ft-product-card .ft-p-brand { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-body); }
.ft-stock-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; width: fit-content; padding: 3px 9px; border-radius: 999px; }
.ft-stock-badge.in { background: rgba(28,122,59,0.13); color: #1c7a3b; }
.ft-stock-badge.out { background: rgba(196,48,42,0.12); color: #c4302a; }
.ft-stock-badge.ask { background: var(--ft-paper-sunk); color: var(--ft-body); }
.ft-price-block { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--ft-line); min-height: 50px; }
.ft-price-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; color: var(--ft-body); }
.ft-price-row + .ft-price-row { margin-top: 3px; }
.ft-price-row b { color: var(--ft-ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.94rem; }
.ft-price-locked { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--ft-body); background: var(--ft-paper-sunk); border-radius: 8px; padding: 9px 10px; }
.ft-price-locked i { color: var(--ft-orange); }
.ft-price-locked a { color: var(--ft-orange-deep); font-weight: 700; }
.ft-p-actions { display: flex; gap: 8px; margin-top: 10px; }
.ft-p-actions button, .ft-p-actions a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; font-size: 0.78rem; font-weight: 700; padding: 8px 0; cursor: pointer; border: 0; }
.ft-p-actions .ft-btn-add { background: var(--ft-ink); color: #fff; }
.ft-p-actions .ft-btn-add:hover { background: var(--ft-orange-deep); }
.ft-p-actions .ft-btn-icon { width: 36px; flex: none; border: 1px solid var(--ft-line-strong) !important; background: var(--ft-paper); color: var(--ft-body); }
.ft-p-actions .ft-btn-icon:hover { border-color: var(--ft-orange) !important; color: var(--ft-orange-deep); }

/* ---------- pagination (Laravel's default Bootstrap-4 paginator markup) ---------- */
.ft-pagination-wrap { display: flex; justify-content: center; margin-top: 32px; margin-bottom: 46px; }
.ft-pagination-wrap ul.pagination { display: flex; list-style: none; gap: 6px; margin: 0; padding: 0; }
.ft-pagination-wrap .page-item .page-link { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 8px !important; border: 1px solid var(--ft-line-strong); color: var(--ft-body); font-size: 0.85rem; font-weight: 700; background: var(--ft-paper); }
.ft-pagination-wrap .page-item .page-link:hover { border-color: var(--ft-orange); color: var(--ft-orange-deep); }
.ft-pagination-wrap .page-item.active .page-link { background: var(--ft-orange); border-color: var(--ft-orange); color: #fff; }
.ft-pagination-wrap .page-item.disabled .page-link { opacity: 0.4; }

/* ---------- search empty state ---------- */
.ft-empty-state { text-align: center; padding: 60px 24px; border: 1px dashed var(--ft-line-strong); border-radius: 14px; background: var(--ft-paper); margin-bottom: 46px; }
.ft-empty-state i { font-size: 2.6rem; color: var(--ft-line-strong); margin-bottom: 16px; display: block; }
.ft-empty-state svg { width: 56px; height: 56px; color: var(--ft-line-strong); margin: 0 auto 16px; display: block; }
.ft-empty-state h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--ft-ink); }
.ft-empty-state p { color: var(--ft-body); font-size: 0.88rem; max-width: 40ch; margin: 0 auto 20px; }
.ft-empty-suggestions a { border: 1px solid var(--ft-line-strong); border-radius: 999px; padding: 8px 18px; font-size: 0.82rem; color: var(--ft-ink); }
.ft-empty-suggestions a:hover { border-color: var(--ft-orange); color: var(--ft-orange-deep); }

/* ---------- product detail page ---------- */
.ft-product-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; padding-bottom: 46px; }
@media (max-width: 800px) { .ft-product-layout { grid-template-columns: 1fr; } }

.ft-gallery-main { border: 1px solid var(--ft-line); border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; box-shadow: var(--ft-shadow); position: relative; }
.ft-gallery-main img { max-width: 100%; height: auto; display: block; }
.ft-gallery-zoom-hint { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--ft-body); background: var(--ft-paper-sunk); padding: 5px 10px; border-radius: 999px; }
.ft-gallery-thumbs-wrap { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ft-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; flex: 1; margin: 0; padding: 2px; scrollbar-width: none; width: 100% !important; flex-wrap: wrap; }
.ft-gallery-thumbs::-webkit-scrollbar { display: none; }
.ft-gallery-thumbs li { list-style: none; flex-shrink: 0; }
.ft-gallery-thumbs a { display: block; border: 1.5px solid var(--ft-line); border-radius: 8px; overflow: hidden; padding: 2px; background: #fff; }
.ft-gallery-thumbs a.shown, .ft-gallery-thumbs a:hover { border-color: var(--ft-orange); }
.ft-gallery-thumbs img { width: 64px; height: 64px; object-fit: contain; display: block; }

.ft-product-info h1 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; color: var(--ft-ink); }
.ft-product-meta { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--ft-body); margin-bottom: 4px; }
.ft-product-meta b { color: var(--ft-ink); font-weight: 700; }
.ft-product-price-block { border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); padding: 10px 0; margin: 10px 0; display: flex; flex-direction: column; gap: 3px; }
.ft-price-row-lg { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--ft-body); }
.ft-price-row-lg b { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.15rem; color: var(--ft-ink); }

.ft-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.ft-qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--ft-line-strong); border-radius: 8px; overflow: hidden; width: fit-content; }
.ft-qty-stepper a { width: 32px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ft-body); }
.ft-qty-stepper a:hover { background: var(--ft-paper-sunk); color: var(--ft-orange-deep); }
.ft-qty-stepper input { width: 44px; text-align: center; border: 0; border-left: 1px solid var(--ft-line-strong); border-right: 1px solid var(--ft-line-strong); height: 34px; font-size: 0.88rem; color: var(--ft-ink); background: var(--ft-paper); }

.ft-product-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ft-product-actions button { border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ft-product-actions .ft-btn-add-lg { background: var(--ft-ink); color: #fff; flex: 1; justify-content: center; }
.ft-product-actions .ft-btn-add-lg:hover { background: var(--ft-orange-deep); }

.ft-share-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ft-share-row .ft-share-label { font-size: 0.78rem; color: var(--ft-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
button.social-sharing { border: 1px solid var(--ft-line-strong); background: var(--ft-paper); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ft-body); cursor: pointer; }
button.social-sharing:hover { border-color: var(--ft-orange); color: var(--ft-orange-deep); }
.ft-send-friend-link { font-size: 0.82rem; color: var(--ft-body); display: inline-flex; align-items: center; gap: 6px; }
.ft-send-friend-link:hover { color: var(--ft-orange-deep); }

.ft-availability { border: 1px solid var(--ft-line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ft-availability-head { background: var(--ft-orange); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; padding: 8px 14px; }
.ft-availability-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; border-top: 1px solid var(--ft-line); font-size: 0.8rem; color: #000000; }
.ft-availability-item b { font-weight: 700; }

.ft-tabs { border-bottom: 1px solid var(--ft-line); display: flex; gap: 4px; margin: 36px 0 0; grid-column: 1 / -1; }
.ft-tabs a { padding: 12px 18px; font-weight: 700; font-size: 0.88rem; color: var(--ft-body); border-bottom: 2px solid transparent; }
.ft-tabs a.selected, .ft-tabs a:hover { color: var(--ft-orange-deep); border-bottom-color: var(--ft-orange); }
.ft-tab-panel { padding: 22px 0; font-size: 0.9rem; line-height: 1.65; color: var(--ft-ink); grid-column: 1 / -1; }
.ft-tab-panel.block_hidden_only_for_screen { display: none; }

/* send-to-friend modal content (opened via fancybox) */
.ft-modal { padding: 22px; max-width: 440px; background: var(--ft-paper); }
.ft-modal h2 { font-size: 1.1rem; margin: 0 0 16px; color: var(--ft-ink); }
.ft-modal label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ft-ink); margin-bottom: 6px; }
.ft-modal input[type="text"] { width: 100%; border: 1.5px solid var(--ft-line-strong); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin-bottom: 14px; }
.ft-modal .ft-modal-actions { display: flex; align-items: center; gap: 14px; }
.ft-modal button { background: var(--ft-orange); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.ft-modal button:hover { background: var(--ft-orange-deep); }
.ft-modal .closefb { font-size: 0.85rem; color: var(--ft-body); }
.ft-modal .closefb:hover { color: var(--ft-orange-deep); }

/* ==========================================================================
   Checkout (/order) — full redesign. Every id/name/class the page's own
   JS reads (radio groups env[]/medios[]/docpagos[], #frm-order, #btn-save-order,
   #btn-verificar-oc, #new-address/#old-address, cart_quantity_* links, the
   uni-efec/uni-web/tlt-efec/tlt-web toggle classes, and every #total_*/#div-*
   display target) is preserved in the markup — only wrapped in new classes.
   ========================================================================== */
.ft-checkout-title { font-size: 1.4rem; margin: 0 0 20px; padding-bottom: 18px; color: var(--ft-ink); }
.ft-checkout-title .heading-counter { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ft-body); margin-top: 6px; padding-bottom: 15px; }
.ft-checkout-title .heading-counter #summary_products_quantity { color: var(--ft-orange-deep); font-weight: 700; }

.ft-checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; padding-bottom: 46px; }
@media (max-width: 900px) {
  .ft-checkout-layout { grid-template-columns: 1fr; }
  .ft-summary-card { position: static; }
}
@media (max-width: 560px) {
  .ft-checkout-section { padding: 16px; }
  .ft-summary-card { padding: 16px; }
}

.ft-checkout-section { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: var(--ft-shadow); padding: 36px 24px 24px; margin-bottom: 20px; margin-top: 15px; }
.ft-checkout-section h3 { font-size: 0.95rem; font-weight: 800; color: var(--ft-ink); margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ft-line); display: flex; align-items: center; gap: 8px; }
.ft-checkout-section h3 .ft-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ft-orange); color: #fff; font-size: 0.75rem; }

/* cart line items */
.ft-cart-list { display: flex; flex-direction: column; gap: 12px; }
.ft-cart-row { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--ft-line); border-radius: 10px; }
.ft-cart-row .ft-cart-img { width: 60px; height: 60px; flex-shrink: 0; border: 1px solid var(--ft-line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.ft-cart-row .ft-cart-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ft-cart-row .ft-cart-info { flex: 1; min-width: 0; }
.ft-cart-row .ft-cart-info .product-name { font-size: 0.88rem; font-weight: 700; color: var(--ft-ink); margin: 0 0 4px; }
.ft-cart-row .ft-cart-info small { display: block; font-size: 0.76rem; color: var(--ft-body); }
.ft-cart-row .ft-cart-info small a { color: var(--ft-body); }
.ft-cart-row .ft-cart-unit { font-size: 0.8rem; color: var(--ft-body); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.ft-cart-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ft-cart-qty .cart_quantity_input { width: 34px; text-align: center; border: 1px solid var(--ft-line-strong); border-radius: 6px; padding: 4px 0; font-size: 0.85rem; background: var(--ft-paper-sunk); }
.ft-cart-qty a { width: 28px; height: 28px; border: 1px solid var(--ft-line-strong); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ft-body); }
.ft-cart-qty a:hover { border-color: var(--ft-orange); color: var(--ft-orange-deep); }
.ft-cart-row .ft-cart-total { font-weight: 700; color: var(--ft-ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; min-width: 90px; text-align: right; }
.ft-cart-row .cart_quantity_delete { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ft-body); flex-shrink: 0; }
.ft-cart-row .cart_quantity_delete:hover { background: var(--bad-bg, rgba(196,48,42,0.1)); color: #c4302a; }
@media (max-width: 640px) {
  .ft-cart-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "img info info" "qty total del";
    gap: 8px 10px;
  }
  .ft-cart-row .ft-cart-img { grid-area: img; width: 52px; height: 52px; }
  .ft-cart-row .ft-cart-info { grid-area: info; }
  .ft-cart-qty { grid-area: qty; }
  .ft-cart-row .ft-cart-total { grid-area: total; text-align: left; min-width: 0; }
  .ft-cart-row .cart_quantity_delete { grid-area: del; justify-self: end; }
}

/* shipping type selector (env[]) */
.ft-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ft-choice-grid { grid-template-columns: 1fr; } }
.ft-choice-card { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--ft-line-strong); border-radius: 10px; padding: 14px; cursor: pointer; }
.ft-choice-card:has(input:checked) { border-color: var(--ft-orange); background: var(--ft-orange-soft); }
.ft-choice-card img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.ft-choice-card .ft-choice-label { font-weight: 700; font-size: 0.88rem; color: var(--ft-ink); }
.ft-choice-card input[type="radio"] { position: absolute; top: 12px; right: 12px; accent-color: var(--ft-orange); width: 17px; height: 17px; }

.ft-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.ft-field-grid.ft-field-grid-2 { grid-template-columns: 1fr 1fr; }
.ft-field-grid.ft-field-grid-1 { grid-template-columns: 1fr; }
.ft-field-grid.ft-field-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ft-field-grid.ft-field-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .ft-field-grid.ft-field-grid-4, .ft-field-grid.ft-field-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ft-field-grid, .ft-field-grid.ft-field-grid-2, .ft-field-grid.ft-field-grid-4, .ft-field-grid.ft-field-grid-5 { grid-template-columns: 1fr; } }
.ft-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ft-ink); margin-bottom: 5px; }
.ft-field .form-control, .ft-field input[type="text"], .ft-field select { width: 100%; border: 1.5px solid var(--ft-line-strong); border-radius: 8px; padding: 9px 12px; font-size: 0.88rem; background: var(--ft-paper); color: var(--ft-ink); }
.ft-field .form-control:focus, .ft-field input:focus, .ft-field select:focus { border-color: var(--ft-orange); box-shadow: 0 0 0 3px var(--ft-orange-soft); outline: none; }
.ft-field .input-group-addon-inline { display: flex; }
.ft-field .input-group-addon-inline span { display: flex; align-items: center; padding: 0 10px; border: 1.5px solid var(--ft-line-strong); border-right: 0; border-radius: 8px 0 0 8px; background: var(--ft-paper-sunk); font-size: 0.85rem; color: var(--ft-body); }
.ft-field .input-group-addon-inline input { border-radius: 0 8px 8px 0 !important; }
.ft-field-hint { font-size: 0.74rem; color: var(--ft-body); margin-top: 5px; }

/* ---------- file drop field (reseller form documents) ---------- */
.ft-file-drop { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--ft-line-strong); border-radius: 10px; padding: 14px 16px; cursor: pointer; background: var(--ft-paper-sunk); transition: border-color 0.15s ease, background 0.15s ease; }
.ft-file-drop:hover { border-color: var(--ft-orange); background: var(--ft-orange-soft); }
.ft-file-drop .icon { color: var(--ft-orange); }
.ft-file-drop-text { font-weight: 700; font-size: 0.86rem; color: var(--ft-ink); display: block; }
.ft-file-drop-name { font-size: 0.78rem; color: var(--ft-body); display: block; margin-top: 2px; }
.ft-file-drop.has-file { border-style: solid; border-color: var(--ft-orange); background: var(--ft-orange-soft); }
.ft-file-drop.has-file .ft-file-drop-name { color: var(--ft-orange-deep); font-weight: 600; }
.ft-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ft-link-btn { font-size: 0.82rem; color: var(--ft-orange-deep); font-weight: 700; cursor: pointer; }
.ft-link-btn:hover { text-decoration: underline; }
.ft-page .form-control.is-invalid, .ft-page .ft-field input.is-invalid { border-color: #c4302a !important; }
.ft-page .form-control.is-valid, .ft-page .ft-field input.is-valid { border-color: #1b8a4c !important; }
.ft-page .text-danger { color: #c4302a; font-size: 0.76rem; font-weight: 600; display: block; margin-top: 6px; }

/* payment method selector (medios[]) */
.ft-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .ft-pay-grid { grid-template-columns: 1fr; } }
.ft-pay-card { position: relative; border: 1.5px solid var(--ft-line-strong); border-radius: 10px; padding: 16px; text-align: center; cursor: pointer; }
.ft-pay-card:has(input:checked) { border-color: var(--ft-orange); background: var(--ft-orange-soft); }
.ft-pay-card img { max-width: 100px; margin: 0 auto 10px; }
.ft-pay-card input[type="radio"] { position: absolute; top: 10px; right: 10px; accent-color: var(--ft-orange); width: 17px; height: 17px; }

.ft-oc-box, .ft-transfer-box { border: 1px solid var(--ft-line); border-radius: 10px; padding: 16px 18px; margin-top: 16px; background: var(--ft-paper-sunk); }
.ft-oc-box label { font-weight: 700; font-size: 0.85rem; color: var(--ft-ink); }
.ft-oc-input-row { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.ft-oc-input-row input { flex: 1; min-width: 160px; border: 1.5px solid var(--ft-line-strong); border-radius: 8px; padding: 9px 12px; text-transform: uppercase; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.82rem; }
.ft-oc-input-row button { border: 0; background: var(--ft-ink); color: #fff; border-radius: 8px; padding: 0 18px; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.ft-oc-input-row button:hover { background: var(--ft-orange-deep); }
#oc-resultado { font-size: 0.82rem; min-height: 20px; }
.ft-transfer-box ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--ft-ink); }
.ft-transfer-box ul li b { color: var(--ft-body); font-weight: 600; }

/* document type (docpagos[]) */
.ft-doc-choice { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ft-doc-choice label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85rem; color: var(--ft-ink); cursor: pointer; }
.ft-doc-choice input[type="radio"] { accent-color: var(--ft-orange); width: 17px; height: 17px; }

.ft-terms-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.85rem; }
.ft-terms-row input[type="checkbox"] { accent-color: var(--ft-orange); width: 17px; height: 17px; flex-shrink: 0; }
.ft-terms-row a { color: var(--ft-orange-deep); font-weight: 700; }

/* shipping info banner (#info_env) */
#info_env { border-radius: 10px; border: 1px solid var(--ft-orange-soft); background: var(--ft-orange-soft); padding: 16px 18px; margin: 16px 0; }
#info_env ul { list-style: none; margin: 0; padding: 0; }
#info_env .fecha_d { font-family: ui-monospace, monospace; font-size: 0.95rem !important; color: var(--ft-orange-deep) !important; }
#info_env .costo_gasto, #info_env .costo_dd_2 { font-family: ui-monospace, monospace; font-size: 0.95rem !important; }
#info_env .costo_dd_2 { color: var(--ft-orange-deep) !important; font-weight: 700; }
#info_env .info_fecha_d { font-size: 0.8rem !important; color: var(--ft-body); margin-top: 6px; }
#info_env span[style*="color: #e95668"] { color: var(--ft-orange-deep) !important; font-family: "Raleway", sans-serif !important; font-size: 0.85rem !important; }
#tope_delivery { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; color: #c4302a; }

/* order summary sidebar */
.ft-summary-card { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: var(--ft-shadow); padding: 20px 22px; position: sticky; top: 96px; }
.ft-summary-card h3 { font-size: 0.95rem; font-weight: 800; color: var(--ft-ink); margin: 0 0 14px; }
.ft-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--ft-line); font-size: 0.85rem; color: var(--ft-body); }
.ft-summary-row:first-of-type { border-top: 0; }
.ft-summary-row b { color: var(--ft-orange-deep); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.95rem; }
.ft-summary-row.ft-summary-total { border-top: 2px solid var(--ft-ink); margin-top: 4px; padding-top: 14px; font-weight: 700; color: var(--ft-ink); }
.ft-summary-row.ft-summary-total b { font-size: 1.2rem; }
.ft-checkout-submit { width: 100%; background: var(--ft-orange); color: #fff; border: 0; border-radius: 10px; padding: 14px; font-weight: 700; font-size: 0.95rem; cursor: pointer; margin-top: 16px; }
.ft-checkout-submit:hover { background: var(--ft-orange-deep); }
.ft-checkout-submit:disabled { opacity: 0.7; cursor: default; }
.ft-checkout-submit.is-loading { position: relative; color: transparent; pointer-events: none; }
.ft-checkout-submit.is-loading .ft-btn-label { visibility: hidden; }
.ft-checkout-submit.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%;
  animation: ft-btn-spin 0.7s linear infinite;
}
@keyframes ft-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ft-checkout-submit.is-loading::after { animation-duration: 1.4s; } }

/* ---------- account dashboard (/account) ---------- */
.ft-account-intro { color: var(--ft-body); font-size: 0.9rem; margin: 6px 0 26px; }
.ft-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding-bottom: 46px; }
.ft-account-card { display: flex; align-items: center; gap: 14px; background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: var(--ft-shadow); padding: 18px 20px; transition: border-color 0.15s ease, transform 0.15s ease; }
.ft-account-card:hover { border-color: var(--ft-orange); transform: translateY(-2px); }
.ft-account-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--ft-orange-soft); color: var(--ft-orange-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-account-icon .icon { width: 22px; height: 22px; }
.ft-account-label { flex: 1; font-weight: 700; font-size: 0.9rem; color: var(--ft-ink); }
.ft-account-card .ft-chev { color: var(--ft-line-strong); transition: transform 0.15s ease, color 0.15s ease; }
.ft-account-card:hover .ft-chev { color: var(--ft-orange); transform: translateX(2px); }

.ft-account-back-links { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; margin-bottom: 20px; }
.ft-account-back-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--ft-body); background: var(--ft-paper); border: 1.5px solid var(--ft-line-strong); border-radius: 8px; padding: 10px 18px; }
.ft-account-back-links a:hover { color: var(--ft-orange-deep); border-color: var(--ft-orange); background: var(--ft-orange-soft); }

/* ---------- order history (/account/order/history) ---------- */
.ft-order-table-wrap { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 10px; box-shadow: var(--ft-shadow); overflow: hidden; margin-bottom: 24px; overflow-x: auto; }
.ft-order-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ft-order-table thead th { text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-body); background: var(--ft-paper-sunk); padding: 12px 16px; border-bottom: 1px solid var(--ft-line); white-space: nowrap; }
.ft-order-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ft-line); color: var(--ft-ink); vertical-align: middle; white-space: nowrap; }
.ft-order-table tbody tr:last-child td { border-bottom: none; }
.ft-order-table tbody tr:hover { background: var(--ft-paper-sunk); }
.ft-order-value { font-weight: 700; color: var(--ft-ink); }
.ft-order-price { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; color: var(--ft-orange-deep); }
.ft-order-status { display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; width: fit-content; }
.ft-order-td-action { text-align: right; }
.ft-order-detail { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--ft-orange-deep); border: 1.5px solid var(--ft-orange-soft); border-radius: 8px; padding: 7px 12px; white-space: nowrap; }
.ft-order-detail:hover { background: var(--ft-orange); border-color: var(--ft-orange); color: #fff; }
@media (max-width: 760px) {
  .ft-order-table thead { display: none; }
  .ft-order-table, .ft-order-table tbody, .ft-order-table tr, .ft-order-table td { display: block; width: 100%; }
  .ft-order-table tr { border-bottom: 1px solid var(--ft-line); padding: 14px 16px; }
  .ft-order-table tbody tr:last-child { border-bottom: none; }
  .ft-order-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: none; white-space: normal; }
  .ft-order-table td::before { content: attr(data-label); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-body); }
  .ft-order-td-action { justify-content: flex-end; margin-top: 6px; }
  .ft-order-td-action::before { content: none; }
  .ft-order-detail { width: 100%; justify-content: center; }
}

/* ---------- order view (/account/order/view/{id}) ---------- */
.ft-orderview-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px 24px; }
.ft-orderview-info .ft-order-detail-item { display: flex; flex-direction: column; gap: 6px; }
.ft-orderview-info .ft-order-link { color: var(--ft-orange-deep); }
.ft-orderview-info .ft-order-link:hover { text-decoration: underline; }

.ft-order-totals { max-width: 340px; margin: 18px 0 0 auto; }
.ft-order-totals-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ft-line); font-size: 0.85rem; color: var(--ft-body); }
.ft-order-totals-row:first-child { border-top: 0; }
.ft-order-totals-row span:last-child { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--ft-ink); font-weight: 600; }
.ft-order-totals-final { border-top: 2px solid var(--ft-ink); margin-top: 4px; padding-top: 14px; font-weight: 700; color: var(--ft-ink); font-size: 0.95rem; }
.ft-order-totals-final span:last-child { color: var(--ft-orange-deep); font-size: 1.15rem; font-weight: 800; }

.ft-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; margin-bottom: 14px; }
.ft-alert .icon { flex-shrink: 0; margin-top: 1px; }
.ft-alert-success { background: #e5f6ec; color: #1b8a4c; }
.ft-alert-warning { background: #fff4e0; color: #b5760a; }
.ft-alert-warning .ft-alert-sub { display: block; font-weight: 500; font-size: 0.78rem; margin-top: 6px; color: #8a5c07; }
.ft-alert-danger { background: #fbe4e2; color: #a3241d; }
.ft-alert-info { background: #e7f1fb; color: #2563a8; }

/* ---------- órdenes de compra (/account/oc) ---------- */
.ft-order-status.ft-status-activa { background: #1b8a4c; }
.ft-order-status.ft-status-inactiva { background: var(--ft-body); }
.ft-order-status.ft-status-vencida { background: #b5760a; }
.ft-oc-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; letter-spacing: 0.03em; color: var(--ft-ink); display: block; }
.ft-code-copy { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--ft-body); background: none; border: 0; padding: 4px 0 0; margin: 0; cursor: pointer; }
.ft-code-copy:hover { color: var(--ft-orange-deep); }
.ft-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ft-stat-item { flex: 1; min-width: 150px; text-align: center; background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: var(--ft-shadow); padding: 16px; }
.ft-stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ft-body); margin-bottom: 6px; }
.ft-stat-value { font-size: 1.05rem; font-weight: 800; color: var(--ft-ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.ft-stat-value.ft-stat-danger { color: var(--ft-orange-deep); }
.ft-stat-value.ft-stat-success { color: #1b8a4c; }

.ft-transfer-cta { margin-bottom: 14px; }
.ft-transfer-cta p { margin: 0 0 10px; font-size: 0.86rem; color: var(--ft-body); }

/* ---------- login (/login) ---------- */
.ft-login-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding-bottom: 60px; }
.ft-login-banner img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ft-shadow); display: block; }
.ft-login-forgot { display: block; text-align: right; font-size: 0.82rem; color: var(--ft-orange-deep); margin: -8px 0 16px; }
.ft-login-forgot:hover { text-decoration: underline; }
.ft-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 0.85rem; color: var(--ft-body); cursor: pointer; }
.ft-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ft-orange); cursor: pointer; }
@media (max-width: 900px) {
  .ft-login-grid { grid-template-columns: 1fr; }
  .ft-login-banner { order: 2; }
}

/* ---------- contact (/contact) ---------- */
.ft-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; padding-bottom: 60px; }
@media (max-width: 900px) { .ft-contact-grid { grid-template-columns: 1fr; } }
.ft-contact-offices { display: flex; flex-direction: column; gap: 18px; }
.ft-contact-office { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--ft-line); }
.ft-contact-office:last-child { border-bottom: 0; padding-bottom: 0; }
.ft-contact-office .icon { color: var(--ft-orange); flex-shrink: 0; margin-top: 2px; }
.ft-contact-office-address { font-size: 0.9rem; font-weight: 700; color: var(--ft-ink); margin-bottom: 6px; }
.ft-contact-hours { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ft-line); font-size: 0.86rem; font-weight: 600; color: var(--ft-body); }
.ft-contact-hours .icon { color: var(--ft-orange); }

.ft-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--ft-orange); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font-weight: 700; font-size: 0.86rem; cursor: pointer; text-decoration: none; }
.ft-btn-primary:hover { background: var(--ft-orange-deep); color: #fff; }

#layer_cart.ft-voucher-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(22,19,15,0.55); }
.ft-voucher-modal-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--ft-paper); border-radius: 14px; box-shadow: var(--ft-shadow); padding: 28px; max-width: 460px; width: calc(100% - 40px); max-height: 90vh; overflow-y: auto; }
.ft-voucher-close { position: absolute; top: 14px; right: 14px; cursor: pointer; color: var(--ft-body); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.ft-voucher-close:hover { background: var(--ft-paper-sunk); color: var(--ft-orange-deep); }

.ft-transfer-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ft-form-row { display: flex; flex-direction: column; gap: 6px; }
.ft-form-row label { font-size: 0.78rem; font-weight: 700; color: var(--ft-ink); }
.ft-form-row input[type="text"], .ft-form-row input[type="date"] { border: 1.5px solid var(--ft-line-strong); border-radius: 8px; padding: 10px 12px; font-size: 0.86rem; background: var(--ft-paper); color: var(--ft-ink); }
.ft-form-row input:focus { outline: none; border-color: var(--ft-orange); box-shadow: 0 0 0 3px var(--ft-orange-soft); }
.ft-form-row input[type="file"] { font-size: 0.82rem; }
.ft-form-hint { font-size: 0.74rem; color: var(--ft-body); }
.ft-transfer-submit { align-self: flex-start; margin-top: 4px; }
.ft-page .error { color: var(--ft-orange-deep); font-size: 0.76rem; font-weight: 600; margin-top: -4px; display: block; }

/* ---------- address book (/account/address) ---------- */
.ft-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-bottom: 22px; }
.ft-address-card { background: var(--ft-paper); border: 1px solid var(--ft-line); border-radius: 12px; box-shadow: var(--ft-shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ft-address-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ft-line); }
.ft-address-alias { font-size: 1rem; font-weight: 800; color: var(--ft-ink); }
.ft-address-id { font-size: 0.72rem; font-weight: 700; color: var(--ft-body); text-transform: uppercase; letter-spacing: 0.04em; }
.ft-address-body { display: flex; flex-direction: column; gap: 9px; }
.ft-address-row { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--ft-ink); line-height: 1.4; }
.ft-address-row .icon { flex-shrink: 0; color: var(--ft-body); margin-top: 2px; }
.ft-address-note { color: var(--ft-body); font-style: italic; }
.ft-address-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ft-address-delete-form { display: inline-flex; margin: 0; }
.ft-address-add-cta { margin: 4px 0 28px; }

.ft-btn-outline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; border-radius: 8px; padding: 8px 14px; white-space: nowrap; border: 1.5px solid var(--ft-line-strong); color: var(--ft-body); background: var(--ft-paper); cursor: pointer; }
.ft-btn-outline:hover { border-color: var(--ft-orange); color: var(--ft-orange-deep); background: var(--ft-orange-soft); }
.ft-btn-outline.ft-btn-danger:hover { border-color: #c4302a; color: #c4302a; background: rgba(196,48,42,0.08); }