/* =========================================================
   FIGURAFAST — app.css (UNA SOLA HOJA, ORDENADA)
   REGLA: clases siempre con prefijo ff- (sin ff_)
   ========================================================= */

/* -----------------------------
   1) TOKENS / DESIGN SYSTEM
------------------------------*/
:root{
  --bg-body: radial-gradient(1200px 600px at 50% -10%, #2a0f5d, var(--ff-bg)) fixed;
  --color-body:#f3f2f7;

  --ff-bg:#0b0613;
  --ff-bg-2:#140a27;

  --ff-color-dark:#0e0a1d;
  --ff-color-light:#f3f2f7;

  --bg-secondary:#6c757d;
  --bg-secondary-hover:#5c636a;

  --ff-accent:#7a2cff;
  --ff-accent-2:#ff2df2;
  --ff-yellow:#ffd54d;

  --ff-text:#f3f2f7;
  --ff-muted:#b9a8df;

  --ff-radius:18px;
  --ff-radius-sm:12px;

  --ff-container:1200px;
  --ff-gutter:24px;

  /* Card look original */
  --ff-card-border: rgba(255,255,255,.10);
  --ff-card-inset: rgba(255,255,255,.08);
  --ff-card-glow: rgba(255,255,255,.10);

  --ff-shadow: 0 20px 60px rgba(0,0,0,.25);
  --ff-shadow-soft: 0 10px 28px rgba(0,0,0,.35);

  --ff-isla-bottom-offset: 0px;
  --ff-isla-top-offset: 0px;

  --pedido-tracker-done: linear-gradient(135deg, #7a2cff, #ff2df2);
  --pedido-tracker-pending: rgba(255,255,255,.24);
  --pedido-tracker-glow: rgba(122, 44, 255, 0.28);
  --pedido-tracker-label: #b9a8df;
  --pedido-tracker-label-active: #ffffff;
  --pedido-tracker-flyout-bg: #140a27;
  --pedido-tracker-flyout-border: rgba(255,255,255,.18);
  --pedido-tracker-flyout-text: rgba(255,255,255,.92);
  --pedido-tracker-flyout-title: #ffffff;
  --pedido-tracker-flyout-shadow: 0 18px 40px rgba(0,0,0,.35);
}

:root[data-rounded="true"]{
  --ff-radius:14px;
  --ff-radius-sm:10px;
}

:root[data-page="checkout"] {
  --bg-body: #eaeaea;
  --color-body:#0e0a1d;
}

/* -----------------------------
   2) BASE / RESET
------------------------------*/
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  margin:0;
  color:var(--ff-text);
  background: var(--bg-body);
}
main{flex:1 0 auto;}
img{max-width:100%;height:auto;display:block;}
[id]{ scroll-margin-top: 90px; }

.form-label{ margin-bottom: 0.1rem; }
.brand-mini{ color: var(--color-body); }

.ff-title{
  font-weight:800;
  letter-spacing:-0.01em;
  color:#fff;
}

/* bootstrap card radius general (si decides usar .card fuera de #content) */
.card{ border-radius: var(--ff-radius); }

/* -----------------------------
   3) LAYOUT: CONTAINERS & SECTIONS
------------------------------*/
.ff-container{
  width: min(100% - var(--ff-gutter), var(--ff-container));
  margin-inline:auto;
}

.ff-section{
  width:100%;
  position:relative;
  padding-block: var(--ff-section-py);
}

/* compat (si lo usas) */
.ff-section-contained{}

/* FULLWIDTH REAL */
.ff-section-full{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 0;
  padding-right: 0;
}

/* Panel */
.ff-section-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.ff-section-tight{ padding-block: clamp(28px, 4vw, 56px); }
.ff-section-flush{ padding-block: 0; }

/* -----------------------------
   4) BOOTSTRAP OVERRIDES (SUAVES)
------------------------------*/
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  max-width: var(--ff-container);
}

.text-white-50{ color: rgba(255,255,255,.55) !important; }
.btn-close-white{ filter: invert(1); }

.btn{ border-radius: var(--ff-radius-sm); }

.ff-btn,
.btn-primary.ff-btn,
.btn.ff-btn,
.btn-primary{
  background: linear-gradient(135deg, var(--ff-accent), var(--ff-accent-2));
  border:0;
  color:#fff;
  font-weight:800;
  box-shadow: 0 8px 24px rgba(122,44,255,.35);
  padding:.73rem 1.1rem;
}
.ff-btn:hover,
.btn-primary:hover{ opacity:.95; }

.btn-secondary{ padding:.73rem 1.1rem; }

.ff-input-dark,
.form-control.ff-input-dark,
.form-select.ff-input-dark{
  background:#0f0a22 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--ff-radius-sm);
}
.ff-input-dark::placeholder{ color: rgba(255,255,255,.45); }

.modal-content{
  background: var(--bg-body);
  color: var(--color-body);
  border:1px solid rgba(255,255,255,.14);
}
.modal-header,.modal-footer{ border:0; }

/* -----------------------------
   5) UI: BADGES / CHIPS / LINKS
------------------------------*/
.ff-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#ffffff14;
  font-size:.85rem;
  color: rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.10);
}

.ff-chip{
  display:inline-flex;
  gap:6px;
  align-items:center;
  border:1px dashed rgba(157,124,232,.25);
  border-radius:999px;
  padding:.35rem .65rem;
  color:#ddd;
  background: rgba(255,255,255,.03);
}

.small-note{ color:#cbbbe8; font-size:.9rem; }

/* -----------------------------
   6) CARDS (LOOK ORIGINAL RESTAURADO)
------------------------------*/
.ff-card{
  position:relative;
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-card-border);
  background: linear-gradient(180deg, rgba(63, 2, 86, 0.41), rgba(106, 3, 137, 0.40));
  box-shadow: var(--ff-shadow), inset 0 1px 0 var(--ff-card-inset);
  overflow:hidden;
  padding: 2rem;
}
.ff-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(450px 240px at 20% 10%, var(--ff-card-glow), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.ff-card-pad{ padding: 22px; }

/* -----------------------------
   7) ICONOS (FEATURES)
------------------------------*/
.ff-icon{
  width:54px;height:54px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  flex:0 0 auto;
}
.ff-icon i{ font-size: 1.35rem; color:#fff; opacity:.95; }

.ff-icon-yellow{ background: linear-gradient(135deg, #ffcc00, #ff7a00); }
.ff-icon-green { background: linear-gradient(135deg, #00e6a8, #00b56e); }
.ff-icon-pink  { background: linear-gradient(135deg, #c77dff, #ff4d9d); }
.ff-icon-blue  { background: linear-gradient(135deg, #4fd1ff, #2b6cff); }
.ff-icon-purple{ background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ff-icon-red   { background: linear-gradient(135deg, #ff5d7a, #ff2d55); }

/* -----------------------------
   8) NAV: ISLA (SIEMPRE ARRIBA)
------------------------------*/
.ff-isla{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(10px + env(safe-area-inset-top) + var(--ff-isla-top-offset));
  bottom: auto;
  z-index: 1000;

  display: flex;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(11,6,19,.92), rgba(20,10,39,.90));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.6);
}

/* Botones */
.ff-isla .btn{
  --h:44px;
  height: var(--h);
  padding: 0 16px;
  font-size: 15px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 0;
  border-radius: 12px;
  font-weight: 800;

  background: rgba(255,255,255,.08);
  color: #fff;
}
.ff-isla .btn:hover{ background: rgba(255,255,255,.14); }

.ff-isla .badge{
  font-size: .72rem;
  line-height: 1;
  padding: .15rem .4rem;
}

/* Móvil: botones un poco más altos */
@media (max-width: 767.98px){
  .ff-isla .btn{ --h:50px; font-size:16px; padding:0 18px; }
}

/* Para que el contenido no quede tapado por el menú fijo */
main{
  padding-top: 86px; /* ajusta si tu nav crece */
}

/* Anclas: scroll-margin-top acorde al nav */
[id]{ scroll-margin-top: 110px; }


/* -----------------------------
   9) HERO
------------------------------*/
.ff-hero{
  padding-top: 84px;
  padding-bottom: 80px;  /* más aire para la cinta */
  position:relative;
  overflow: visible;     /* <- CLAVE: quitar el recorte */
}
.ff-hero > *{ position:relative; z-index:1; }

/* HERO media: nunca recortar */
.ff-hero-media{
  width: 100%;
  max-width: 676px;
  margin-inline: auto;
  overflow: visible;
}

.ff-hero-img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Opcional: en móviles darle un poco más de ancho */
@media (max-width: 576px){
  .ff-hero-media{ max-width: 92vw; }
}

/* Barra de progreso tipo caramelo */
.progress {
  height: 1rem !important;
}

.progress-bar {
    background-color: var(--ff-accent) !important;
}


/* -----------------------------
   10) WIDGET: FEATURES
------------------------------*/
.ff-features-header{
  text-align:center;
  margin-bottom:36px;
}
.ff-features-title{
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 10px 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.1;
  color: rgba(255,255,255,.95);
}
.ff-features-subtitle{
  margin:0;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, 1.35vw, 18px);
}
.ff-features-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 992px){
  .ff-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .ff-features-grid { grid-template-columns: 1fr; }
}

.ff-card-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.ff-card-title{
  margin:0;
  font-weight:800;
  font-size:20px;
  line-height:1.15;
}
.ff-card-text{
  margin:0;
  color: rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
}

/* -----------------------------
WIDEGT BANNER
/* -----------------------------*/

.ff-banner{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.ff-banner img{
  width:100%;
  height:auto;
}

/* -----------------------------
   11) WIDGET: TIENDA
------------------------------*/
.ff-store .product-box{ padding:0; }

.ff-store-grid{
  display:grid;
  gap:18px;
  padding: 22px;
  position:relative;
  z-index:1;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .ff-store-grid{
    grid-template-columns: 96px minmax(0, 1fr) 380px;
    align-items:start;
  }
}

.ff-store-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:2px; }
@media (min-width: 992px){
  .ff-store-thumbs{ flex-direction:column; overflow-x:visible; overflow-y:auto; max-height:560px; padding-right:2px; }
}

.ff-thumb-img{
  width:74px;
  height:74px;
  border-radius:12px;
  object-fit:cover;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  opacity:.85;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.ff-thumb-img:hover{ opacity:1; transform: translateY(-1px); }
.ff-thumb-img.is-active{ opacity:1; }

.ff-store-view{
  border-radius: var(--ff-radius);
  overflow:hidden;
}
.ff-store-view img{
  width:100%;
  object-fit: contain;
  border-radius: var(--ff-radius);
}

.ff-store-info h3{ font-weight:900; }
.ff-price{
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
}

.ff-store-buyrow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.ff-qty{
  width:120px;
  max-width:120px;
  background:#0f0a22;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--ff-radius-sm) !important;
}

.ff-add{
  border:0;
  border-radius: var(--ff-radius-sm);
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--ff-accent), var(--ff-accent-2));
  box-shadow: 0 8px 24px rgba(122,44,255,.35);
}

.ff-thumb:hover{ opacity:1; transform: translateY(-1px); }
.ff-thumb img{
  width:74px;height:74px;
  border-radius:12px;
  object-fit: cover;
  border: none;
}
.ff-thumb.active{ opacity:1; outline-offset: 1px; }

.ff-store-kits{ margin-top:16px; }
.ff-kits-row{ display:flex; gap:10px; flex-wrap:wrap; }

.ff-kit-card{
  width:100%;
  border-radius: var(--ff-radius);
  background:#0f0a22;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  text-align:left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ff-kit-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(122,44,255,.28), 0 0 28px rgba(255,45,242,.18);
}
.ff-kit-card.is-active{
  border:2px solid rgba(180,107,255,.85);
}

/* -----------------------------
   12) WIDGET: REVIEWS (oscuro sin romper bootstrap)
------------------------------*/
.rv-swiper .swiper-slide{ width:95%; max-width:313px; }

#seccion_reviews .card,
#seccion_reviews .card.h-100{
  border-radius: var(--ff-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
}
#seccion_reviews .text-muted{ color: rgba(255,255,255,.55) !important; }

.ff-rv-avatar{
  width:45px;
  height:45px;
  border-radius:999px;
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(122,44,255,.25), rgba(255,45,242,.18));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.ff-rv-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ff-rv-avatar--initials{
  font-weight:900;
  font-size:14px;
  letter-spacing:.04em;
  color:#fff;
  text-transform:uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* -----------------------------
   13) WIDGET: INGREDIENTES (ACCORDION SKIN)
------------------------------*/
#widget_ingredientes .ff-note{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  text-align:center;
}

#widget_ingredientes .ff-accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-icon-filter: invert(1);
}

#widget_ingredientes .ff-accordion-item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ff-radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(63, 2, 86, 0.35), rgba(106, 3, 137, 0.32));
  box-shadow: var(--ff-shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
}

#widget_ingredientes .ff-accordion .accordion-item + .accordion-item{ margin-top: 12px; }

#widget_ingredientes .ff-accordion-button{
  background: transparent !important;
  color: #fff !important;
  font-weight: 900;
  padding: 18px 18px;
  display:flex;
  gap: 12px;
  align-items:center;
}
#widget_ingredientes .ff-accordion-button:hover{ background: rgba(255,255,255,.03) !important; }
#widget_ingredientes .ff-accordion-button:not(.collapsed){ background: rgba(255,255,255,.04) !important; }

#widget_ingredientes .ff-accordion-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
#widget_ingredientes .ff-accordion-icon i{ font-size: 20px; opacity: .95; }

#widget_ingredientes .ff-accordion-title{ line-height: 1.1; }

#widget_ingredientes .ff-accordion-body{
  color: rgba(255,255,255,.80);
  padding: 0 18px 18px 18px;
}
#widget_ingredientes .ff-accordion-body ul{ padding-left: 18px; }
#widget_ingredientes .ff-accordion-body li{ margin: 6px 0; }

/* -----------------------------
   14) OFFCANVAS CARRITO
------------------------------*/
#carrito_offcanvas{
  width:333px !important;
  border-radius: var(--ff-radius) !important;
  background:#eaeaea;
  color: var(--ff-color-dark);
  border:1px solid rgba(255,255,255,.12);
}
#carrito_offcanvas .offcanvas-body{ padding:0.639rem !important; }
#carrito_offcanvas .offcanvas-header{
  font-size:1.13rem;
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.10);
}
#carrito_offcanvas .offcanvas-footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding:0.639rem !important;
}
.offcanvas-precio{
    font-size:0.73rem;
}

.pos-order-product img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
}

/* botones base */
.btn-restar,
.btn-sumar{
  width:32px;
  height:32px;
  border-radius: var(--ff-radius-sm);
  background: var(--bg-secondary);
  color: var(--ff-color-light);
  border:0;
}
.btn-restar:hover,
.btn-sumar:hover{
  background: var(--bg-secondary-hover);
  color:var(--ff-color-light);
}

/* controles compactos carrito */
.pos-order-product .input-group{
  height:28px;
  width:auto !important;
  flex:0 0 auto;
  margin-right:6px;
}
.pos-order-product .txt_update_cantidad.form-control{
  height:28px;
  padding:0 6px;
  font-size:12px;
  line-height:1;
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
}
.pos-order-product .btn-restar,
.pos-order-product .btn-sumar{
  width:28px;
  height:28px;
  padding:0;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pos-order-product .btn_eliminar_partida{
  width:28px;
  height:28px;
  padding:0;
  margin-left:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pos-order-product .btn i{ font-size:12px; }

/* -----------------------------
   15) FOOTER
------------------------------*/
.ff-footer{ border-top: 1px solid rgba(255,255,255,.08); }
.ff-contact i{ color:#fff; font-size:1.1rem; line-height:1.2; }
.ff-links li{ margin:.45rem 0; }
.ff-links a{ color: rgba(255,255,255,.85); text-decoration:none; }
.ff-links a:hover{ color:#fff; text-decoration:underline; }
.ff-sep{ border-color: rgba(255,255,255,.10); opacity:1; }
.ff-social{ color: rgba(255,255,255,.85); font-size:1.1rem; }
.ff-social:hover{ color:#fff; }
footer{ margin-top:auto; }

/* -----------------------------
   16) WHATSAPP
------------------------------*/
#btn-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  text-align:center;
  font-size:32px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  z-index:999;
}
#btn-whatsapp i{ line-height:60px; }
#btn-whatsapp:hover{ background:#1ebe5d; }

/* -----------------------------
   17) PÁGINAS INFO (CARD PROPIO)
   - Ajustado para NO romper otras páginas dentro de #content
------------------------------*/
#content .ff-info-card{ padding: 0; }

#content .ff-info-header{
  padding: 22px 22px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}

#content .ff-info-body{
  padding: 18px 22px 22px 22px;
  position: relative;
  z-index: 1;
}

/* IMPORTANTE:
   Antes neutralizabas TODAS las .card dentro de #content (rompía Mi cuenta).
   Ahora se limita SOLO cuando envuelves el contenido con .ff-info (o .info). */
#content .ff-info .card,
#content .info .card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#content .ff-info .card-header,
#content .ff-info .card-body,
#content .info .card-header,
#content .info .card-body{
  background: transparent;
  border: 0;
  padding: 0;
}

.info-title{ font-size:1.35rem; font-weight:900; }

.info p, .info li{
  font-size:.92rem;
  line-height:1.65;
  color: rgba(255,255,255,.80);
  text-align: justify;
  margin-bottom: .75rem;
}

.info h3{
  font-size: 1.05rem;
  font-weight: 900;
  margin-top: 1.2rem;
  margin-bottom: .55rem;
}

#content .info a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-decoration-color: rgba(122,44,255,.55);
  text-underline-offset: 2px;
}
#content .info a:hover{
  color:#fff;
  text-decoration-color: rgba(255,45,242,.75);
}

/* -----------------------------
   18) CLIENTES: MENU LATERAL (único)
------------------------------*/
.ff-client-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--ff-radius-sm);
  color: var(--ff-text);
  text-decoration:none;
  font-weight:700;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ff-client-link i{
  font-size:1.05rem;
  opacity:.9;
}
.ff-client-link:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
  color:#fff;
}
.ff-client-link.is-active{
  background: linear-gradient(135deg, var(--ff-accent), var(--ff-accent-2));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(122,44,255,.35);
}

/* -----------------------------
   20) CLIENTES: DOMICILIOS (cards)
------------------------------*/
.ff-dom-card{
  width:100%;
  text-align:left;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ff-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--ff-shadow-soft);
  padding: 16px;
  color: var(--ff-text);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.ff-dom-card:hover{
  transform: translateY(-2px);
  border-color: rgba(180,107,255,.45);
  box-shadow: 0 0 18px rgba(122,44,255,.18), var(--ff-shadow-soft);
  background: linear-gradient(180deg, rgba(122,44,255,.10), rgba(255,45,242,.06));
}
.ff-dom-card:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(122,44,255,.20), var(--ff-shadow-soft);
}

.ff-dom-icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.ff-dom-icon i{
  font-size: 20px;
  opacity:.95;
  color:#fff;
}

.ff-dom-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  white-space:nowrap;
}
.ff-dom-badge--envio{
  background: rgba(79,209,255,.14);
  border-color: rgba(79,209,255,.28);
}
.ff-dom-badge--facturacion{
  background: rgba(0,230,168,.14);
  border-color: rgba(0,230,168,.28);
}
.ff-dom-badge--neutral{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.ff-dom-name{
  font-weight: 900;
  color:#fff;
  margin-bottom: 6px;
  line-height: 1.15;
}

.ff-dom-addr{
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  line-height: 1.45;
  margin-bottom: 10px;
}

.ff-dom-cp{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(255,255,255,.90);
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.ff-dom-hint{
  margin-top: 12px;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
}

/* -----------------------------
   21) CLIENTES: PEDIDOS (cards)
------------------------------*/
.ff-order-card{
  display:block;
  height:100%;
  text-decoration:none;
  color: var(--ff-text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ff-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--ff-shadow-soft);
  padding: 16px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.ff-order-card:hover{
  transform: translateY(-2px);
  border-color: rgba(180,107,255,.45);
  box-shadow: 0 0 18px rgba(122,44,255,.18), var(--ff-shadow-soft);
  background: linear-gradient(180deg, rgba(122,44,255,.10), rgba(255,45,242,.06));
  color:#fff;
}

.ff-order-title{
  font-weight: 900;
  color:#fff;
  margin-bottom: 8px;
  line-height: 1.15;
}

.ff-order-meta{
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  line-height: 1.45;
}
.ff-order-total{
  margin-top: 6px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.ff-order-hint{
  margin-top: 12px;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ff-order-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  white-space:nowrap;
}
.ff-order-badge--abierto{
  background: rgba(255,213,77,.16);
  border-color: rgba(255,213,77,.30);
  color:#fff;
}
.ff-order-badge--procesando{
  background: rgba(79,209,255,.14);
  border-color: rgba(79,209,255,.28);
}
.ff-order-badge--completo{
  background: rgba(0,230,168,.14);
  border-color: rgba(0,230,168,.28);
}
.ff-order-badge--cancelado{
  background: rgba(255,93,122,.16);
  border-color: rgba(255,93,122,.30);
}
.ff-order-badge--neutral{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* oculto por filtro */
.pedido-card.is-hidden{ display:none !important; }

/* -----------------------------
   22) CLIENTES: PEDIDO DETALLE
------------------------------*/
.ff-subcard{
  border-radius: var(--ff-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.ff-subcard-head{
  padding: 14px 16px;
  font-weight: 900;
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
}
.ff-subcard-body{
  padding: 14px 16px;
}

.ff-order-items{
  border-radius: var(--ff-radius);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(0,0,0,.12);
}
.ff-order-item{
  display:flex;
  gap: 12px;
  padding: 12px 14px;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ff-order-item:last-child{ border-bottom:0; }

.ff-order-item-img{
  width:58px;
  height:58px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
  background: rgba(255,255,255,.04);
}
.ff-order-item-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ff-order-item-main{ min-width:0; flex: 1 1 auto; }
.ff-order-item-title{
  font-weight: 900;
  color:#fff;
  line-height: 1.15;
  margin-bottom: 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ff-order-item-right{
  text-align:right;
  flex: 0 0 auto;
  min-width: 120px;
}
.ff-order-item-subtotal{
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.ff-summary{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.ff-summary-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,.78);
  font-size: .92rem;
}
.ff-summary-total{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  font-weight: 900;
  color:#fff;
  font-size: 1.02rem;
}

@media (max-width: 575.98px){
  .ff-order-item-right{ min-width: 96px; }
}

/* -----------------------------
   19) UTILIDADES
------------------------------*/
.ff-muted{ color: rgba(255,255,255,.72) !important; }
.ff-shadow{ box-shadow: var(--ff-shadow-soft) !important; }
.ff-round{ border-radius: var(--ff-radius) !important; }
.ff-round-sm{ border-radius: var(--ff-radius-sm) !important; }


/* 3) Bootstrap helper demasiado bajo para tu tema oscuro */
.text-white-50{
  color: rgba(255,255,255,.72) !important; /* antes .55 */
}

/* 4) Footer (spans / datos de contacto) */
.ff-footer span,
.ff-footer small,
.ff-footer .text-muted{
  color: rgba(255,255,255,.78) !important;
}

/* 5) Links (mantener look, pero más legibles) */
.ff-links a,
.ff-social{
  color: rgba(255,255,255,.90);
}
.ff-links a:hover,
.ff-social:hover{
  color: rgba(255,255,255,.98);
}

/* =========================================================
   PRODUCTOS WIDGET (sin estilos inline en HTML)
   ========================================================= */
.ff-productos-widget .ff-productos-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.ff-productos-widget .ff-productos-grid-item{min-width:0}
.ff-productos-widget .ff-product-card-compact{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--ff-radius,20px);background:var(--ff-product-card-bg,#fff);color:var(--ff-product-text,#0e0a1d);box-shadow:0 8px 24px rgba(0,0,0,.1);overflow:hidden}
.ff-productos-widget .ff-product-card-compact.is-contain-mode{gap:.75rem}
.ff-productos-widget .ff-product-card-compact-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:210px;border-radius:24px;background:transparent;padding:0;text-decoration:none;overflow:hidden}
.ff-productos-widget .ff-product-card-compact-media.is-cover img{object-fit:cover}
.ff-productos-widget .ff-product-card-compact-media.is-contain img{object-fit:contain}
.ff-productos-widget .ff-product-card-compact-media img{width:100%;height:100%;display:block}
.ff-productos-widget .ff-product-card-compact-body{display:flex;flex:1 1 auto;flex-direction:column;gap:.75rem;padding:1rem}
.ff-productos-widget .ff-product-card-compact.is-contain-mode .ff-product-card-compact-body{padding:0}
.ff-productos-widget .ff-product-card-compact-title{color:var(--ff-product-text,#111827);text-decoration:none;font-size:1.1rem;font-weight:700;line-height:1.12;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ff-productos-widget .ff-product-card-compact-footer{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.ff-productos-widget .ff-product-card-compact-price{color:var(--ff-product-price,#178555);font-size:1.8rem;line-height:1;font-weight:800}
.ff-productos-widget .ff-product-card-compact-label{color:var(--ff-product-muted,#6b7280);font-size:.8rem;line-height:1}
.ff-productos-widget .ff-product-card-compact-btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.7rem .95rem;border-radius:999px;background:var(--ff-product-button-bg,#22242a);color:var(--ff-product-button-text,#fff);text-decoration:none;font-weight:700;border-top:var(--ff-product-btn-border-width,0) solid var(--ff-product-btn-border-color,#052024);border-left:var(--ff-product-btn-border-width,0) solid var(--ff-product-btn-border-color,#052024);border-right:0;border-bottom:0}
.ff-productos-widget .ff-product-card-compact-btn.is-icon-only{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
.ff-productos-widget .ff-product-card-compact-media-badge{position:absolute;top:1rem;left:1rem;z-index:2;padding:.22rem .56rem;border-radius:.45rem;background:var(--ff-product-badge-bg,#d9efe3);color:var(--ff-product-badge-color,#20704d);font-size:.7rem;font-weight:700;line-height:1}
.ff-productos-widget .ff-product-card-compact-favorito{position:absolute;right:.7rem;bottom:.7rem;z-index:10;width:34px;height:34px;padding:0;border-radius:50%;border:none;background:rgba(255,255,255,.82);color:var(--ff-product-fav-color,#374151);display:inline-flex;align-items:center;justify-content:center}
.ff-productos-widget .ff-product-detail-fab-neutral{position:absolute;right:0;bottom:0;z-index:3;width:54px;height:54px;border-radius:18px 0 0 0;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--ff-product-button-bg,#258255);color:var(--ff-product-button-text,#fff);border-top:var(--ff-product-button-border-size,10px) solid var(--ff-product-button-border-color,#052024);border-left:var(--ff-product-button-border-size,10px) solid var(--ff-product-button-border-color,#052024);border-right:0;border-bottom:0}
.ff-productos-widget .ff-product-media-cover,.ff-productos-widget .ff-product-media-contain{margin:var(--ff-image-gap,0)!important}
.ff-productos-widget .ff-product-minimal-btn,.ff-productos-widget .ff-product-showcase-btn{border:calc(var(--ff-product-button-border-size,0px)/5) solid var(--ff-product-button-border-color,#052024)}
.ff-productos-widget .ff-product-media-cover img{border-bottom-left-radius:var(--ff-image-bottom-left,0);border-bottom-right-radius:var(--ff-image-bottom-right,0)}

@media (min-width:576px){.ff-productos-widget .ff-productos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.ff-productos-widget .ff-productos-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:992px){
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-7{grid-template-columns:repeat(7,minmax(0,1fr))}
  .ff-productos-widget .ff-productos-grid.ff-grid-lg-8{grid-template-columns:repeat(8,minmax(0,1fr))}
}

.ff-productos-widget .ff-tone-0{--ff-product-card-bg:#d5d5d5;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#4b5563;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-1{--ff-product-card-bg:#d4e7f0;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#245e87;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-2{--ff-product-card-bg:#f1eec0;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#8c7c2f;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-3{--ff-product-card-bg:#f3eae6;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#8f5f49;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-4{--ff-product-card-bg:#e6f3e8;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#2f7d47;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-5{--ff-product-card-bg:#fcebeb;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#a53f3f;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}
.ff-productos-widget .ff-tone-custom{--ff-product-card-bg:#d5d5d5;--ff-product-text:#111827;--ff-product-muted:#6b7280;--ff-product-badge-bg:#d9efe3;--ff-product-badge-color:#20704d;--ff-product-button-bg:#4b5563;--ff-product-button-text:#fff;--ff-product-price:#178555;--ff-product-del:rgba(0,0,0,.38);--ff-product-fav-color:#e02424}

.ff-productos-widget .ff-image-gap-0{--ff-image-gap:0px}.ff-productos-widget .ff-image-gap-1{--ff-image-gap:1px}.ff-productos-widget .ff-image-gap-2{--ff-image-gap:2px}.ff-productos-widget .ff-image-gap-3{--ff-image-gap:3px}.ff-productos-widget .ff-image-gap-4{--ff-image-gap:4px}.ff-productos-widget .ff-image-gap-5{--ff-image-gap:5px}.ff-productos-widget .ff-image-gap-6{--ff-image-gap:6px}.ff-productos-widget .ff-image-gap-7{--ff-image-gap:7px}.ff-productos-widget .ff-image-gap-8{--ff-image-gap:8px}.ff-productos-widget .ff-image-gap-9{--ff-image-gap:9px}.ff-productos-widget .ff-image-gap-10{--ff-image-gap:10px}.ff-productos-widget .ff-image-gap-11{--ff-image-gap:11px}.ff-productos-widget .ff-image-gap-12{--ff-image-gap:12px}.ff-productos-widget .ff-image-gap-13{--ff-image-gap:13px}.ff-productos-widget .ff-image-gap-14{--ff-image-gap:14px}.ff-productos-widget .ff-image-gap-15{--ff-image-gap:15px}.ff-productos-widget .ff-image-gap-16{--ff-image-gap:16px}.ff-productos-widget .ff-image-gap-17{--ff-image-gap:17px}.ff-productos-widget .ff-image-gap-18{--ff-image-gap:18px}.ff-productos-widget .ff-image-gap-19{--ff-image-gap:19px}.ff-productos-widget .ff-image-gap-20{--ff-image-gap:20px}.ff-productos-widget .ff-image-gap-21{--ff-image-gap:21px}.ff-productos-widget .ff-image-gap-22{--ff-image-gap:22px}.ff-productos-widget .ff-image-gap-23{--ff-image-gap:23px}.ff-productos-widget .ff-image-gap-24{--ff-image-gap:24px}.ff-productos-widget .ff-image-gap-25{--ff-image-gap:25px}.ff-productos-widget .ff-image-gap-26{--ff-image-gap:26px}.ff-productos-widget .ff-image-gap-27{--ff-image-gap:27px}.ff-productos-widget .ff-image-gap-28{--ff-image-gap:28px}.ff-productos-widget .ff-image-gap-29{--ff-image-gap:29px}.ff-productos-widget .ff-image-gap-30{--ff-image-gap:30px}

/* Inline-style cleanup (views) */
.ff-pixel-noscript{display:none}

.ff-cart-modal-content{
  background:#0e0a1d;
  color:#fff;
  border:1px solid rgba(255,255,255,.1333);
}
.ff-cart-offcanvas{
  width:380px;
  background:#0e0a1d;
  color:#fff;
  border-left:1px solid rgba(255,255,255,.1333);
}
.ff-cart-items{
  overflow:auto;
  max-height:60vh;
}
.ff-cart-footer{
  border-color:rgba(255,255,255,.1333)!important;
}

.ff-title-18{font-size:18px}
.ff-title-20{font-size:20px}
.ff-title-22{font-size:22px}

.ff-atc-list-hidden{
  z-index:1050;
  overflow-y:auto;
  display:none;
}
.ff-account-box{
  padding:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--ff-radius-sm);
}

.ff-order-page{
  --ink:#111827;
  --sub:#6b7280;
  --bd:#e5e7eb;
  --ok:#16a34a;
  --bg:#f8fafc;
  --warn:#d97706;
  background:var(--bg);
  color:var(--ink);
}
.ff-order-page .wrapper{max-width:960px;margin:32px auto;padding:0 12px}
.ff-order-page .hero{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.ff-order-page .tick{width:28px;height:28px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.ff-order-page .tick.pending{background:var(--warn)}
.ff-order-page .h-sub{color:var(--sub)}
.ff-order-page .ticket{background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ff-order-page .ticket .hd{padding:18px 20px;border-bottom:1px dashed var(--bd);display:flex;align-items:center;gap:12px}
.ff-order-page .badge-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef2ff;color:#3730a3;padding:4px 10px;border-radius:999px;font-size:.9rem}
.ff-order-page .ticket .bd{padding:20px}
.ff-order-page .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ff-order-page .meta .k{font-size:.8rem;color:var(--sub)}
.ff-order-page .meta .v{font-weight:600}
.ff-order-page .addr{font-size:.95rem;color:var(--ink)}
.ff-order-page .addr .lbl{font-size:.8rem;color:var(--sub)}
.ff-order-page .table-items{width:100%;border-collapse:separate;border-spacing:0}
.ff-order-page .table-items th,.ff-order-page .table-items td{padding:10px 8px;border-bottom:1px solid var(--bd)}
.ff-order-page .table-items th{font-size:.8rem;color:var(--sub);font-weight:600}
.ff-order-page .table-items td.qty,.ff-order-page .table-items td.price,.ff-order-page .table-items td.line{text-align:right;white-space:nowrap}
.ff-order-page .total-box{margin-top:10px;display:grid;gap:6px;max-width:320px;margin-left:auto}
.ff-order-page .total-row{display:flex;justify-content:space-between}
.ff-order-page .total-row .k{color:var(--sub)}
.ff-order-page .total-row.total .v{font-weight:800;font-size:1.05rem}
.ff-order-page .actions{display:flex;gap:8px;margin-top:18px}

@media (max-width:768px){
  .ff-order-page .meta{grid-template-columns:1fr}
}
@media print{
  .ff-order-page{background:#fff}
  .ff-order-page .wrapper{margin:0;max-width:none;padding:0}
  .ff-order-page .actions,.ff-order-page .hero{display:none!important}
  .ff-order-page .ticket{box-shadow:none;border:none}
}

/* Checkout universal */
.checkout-universal{padding:28px 0 48px}
.checkout-universal [hidden]{display:none!important}
.checkout-universal__brand,.checkout-universal__main,.checkout-universal__summary{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--ff-card-border);box-shadow:var(--ff-shadow-soft);backdrop-filter:blur(10px)}
.checkout-universal__brand{padding:28px;margin-bottom:20px}
.checkout-universal__brand-top{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.checkout-universal__brand-logo{max-width:160px;max-height:44px;display:block}
.checkout-universal__brand-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--ff-card-border);color:var(--ff-muted);font-size:13px}
.checkout-universal__layout{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.checkout-universal__main{padding:18px;min-height:0}
.checkout-universal__panel{display:grid;gap:18px}
.checkout-universal__section{border:1px solid var(--ff-card-border);background:rgba(255,255,255,.04);border-radius:var(--ff-radius);padding:18px}
.checkout-universal__auth h3,.checkout-universal__address h3{margin:0 0 8px;font-size:18px;color:#fff}
.checkout-universal__auth p{margin:0;color:var(--ff-muted);font-size:14px;line-height:1.55}
.checkout-universal .auth-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;width:100%}
.checkout-universal .field{display:grid;gap:6px;width:100%}
.checkout-universal .field label{font-size:13px;color:var(--ff-muted)}
.checkout-universal .field input{min-height:46px;border:1px solid var(--ff-card-border);border-radius:var(--ff-radius-sm);padding:0 14px;background:#0f0a22;width:100%;color:#fff}
.checkout-universal .auth-actions,.checkout-universal .address-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;width:100%}
.checkout-universal .address-actions .btn{width:100%}
.checkout-universal .address-actions--full{width:100%}
.checkout-universal .address-actions--full .btn{display:flex;justify-content:center;flex:1 1 100%;width:100%;max-width:none}
.checkout-universal .google-btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;width:100%;padding:0 16px;border-radius:var(--ff-radius-sm);border:1px solid var(--ff-card-border);background:#fff;color:var(--ff-color-dark);text-decoration:none;font-weight:700}
.checkout-universal .auth-note{margin-top:12px;font-size:13px;color:var(--ff-muted)}
.checkout-universal .auth-feedback{margin-top:12px}
.checkout-universal .auth-email,.checkout-universal .auth-pass{width:100%;max-width:none}
.checkout-universal .address-list{display:grid;gap:12px}
.checkout-universal .address-option{display:block;border:1px solid var(--ff-card-border);border-radius:var(--ff-radius);padding:14px;background:rgba(255,255,255,.03);cursor:pointer}
.checkout-universal .address-option input{margin-right:10px}
.checkout-universal .address-option.is-active{border-color:rgba(122,44,255,.45);background:rgba(122,44,255,.14);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.checkout-universal .address-line{color:var(--ff-muted);font-size:14px;line-height:1.5;margin-left:26px}
.checkout-universal .address-form{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.checkout-universal .address-form .field-full{grid-column:1 / -1}
.checkout-universal .address-inline{display:grid;gap:12px;grid-template-columns:2fr 1fr 1fr}
.checkout-universal .method-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.checkout-universal__methods-title{margin:6px 0 0;color:#fff;font-size:clamp(1.65rem,2vw,2rem)}
.checkout-universal .method-btn{text-align:left;min-height:86px;border-radius:var(--ff-radius);border:1px solid var(--ff-card-border);background:rgba(255,255,255,.03);padding:16px;cursor:pointer;color:#fff}
.checkout-universal .method-btn.is-active{border-color:rgba(122,44,255,.5);background:rgba(122,44,255,.14);box-shadow:0 12px 24px rgba(0,0,0,.24)}
.checkout-universal .method-btn strong{display:block;font-size:15px;margin-bottom:6px}
.checkout-universal .method-btn span{color:var(--ff-muted);font-size:13px;line-height:1.4}
.checkout-universal .provider-panel[hidden]{display:none!important}
.checkout-universal .payment-feedback{display:block}
.checkout-universal__provider-note{font-size:13px}
.checkout-universal .actions{display:flex;gap:12px;flex-wrap:wrap;width:100%}
.checkout-universal .actions{justify-content:flex-end}
.checkout-universal .actions .btn{flex:0 0 190px;justify-content:center;text-align:center}
.checkout-universal #btn_pay_continue{flex:1 1 100%;width:100%;max-width:none}
.checkout-universal .summary-row,.checkout-universal__summary-row,.checkout-universal__item{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--ff-card-border)}
.checkout-universal__summary{padding:16px}
.checkout-universal__item-thumb{width:44px;height:44px;object-fit:contain;flex:0 0 44px;border-radius:.4rem;padding:2px;border:1px solid rgba(17,24,39,.08);background:#fff}
.checkout-universal__amount{font-size:1.3rem;margin:0 0 8px}
.checkout-universal__item-name,.checkout-universal__item strong,.checkout-universal .checkout-universal__item .checkout_muted{font-size:.78rem}
.checkout-universal__amount{font-size:34px;line-height:1;letter-spacing:-.04em;margin:6px 0 18px;color:#fff;font-weight:800}
.checkout-universal .state{padding:14px 16px;border-radius:var(--ff-radius-sm);font-size:14px}
.checkout-universal .state-error{background:rgba(255,86,120,.12);color:#ffc1cd;border:1px solid rgba(255,86,120,.24)}
.checkout-universal .state-success{background:rgba(34,197,94,.12);color:#c7ffd8;border:1px solid rgba(34,197,94,.24)}
.checkout-universal .fp-copy{display:grid;gap:6px;font-size:14px;color:var(--ff-text)}
.checkout-universal .fp-copy strong{color:#fff}
.checkout-universal__items{margin-top:22px;padding-top:8px;border-top:1px solid var(--ff-card-border)}
.checkout-universal__item-name{max-width:34ch;color:#fff}
.checkout-universal__stripe-side{margin-top:20px}
.checkout-universal #embedded-checkout{min-height:620px}
.checkout-universal #mp-payment-brick{min-height:240px}
@media (max-width:980px){
  .checkout-universal__layout{grid-template-columns:1fr}
  .checkout-universal__brand{padding:24px}
  .checkout-universal__summary{padding:20px}
  .checkout-universal .address-form,.checkout-universal .address-inline{grid-template-columns:1fr}
}
.checkout-universal-page,.checkout-universal-page .page{background:#f3f4f6;color:#111827}
.checkout-universal{color:#1f2937}
.checkout-universal__brand,.checkout-universal__main,.checkout-universal__summary,.checkout-universal__section,.checkout-universal .address-option,.checkout-universal .method-btn{background:#fff;border-color:rgba(17,24,39,.08);backdrop-filter:none}
.checkout-universal .method-btn.is-active,.checkout-universal .address-option.is-active{background:#f9fafb;border-color:rgba(17,24,39,.18);box-shadow:0 8px 24px rgba(15,23,42,.06)}
.checkout-universal .btn-primary,.checkout-universal .btn.btn-primary{background:#111827;border-color:#111827;color:#fff;box-shadow:none}
.checkout-universal .btn-secondary,.checkout-universal .btn.btn-secondary{background:#fff;border:1px solid #d1d5db;color:#111827}
.checkout-universal .muted,.checkout-universal .checkout_muted,.checkout-universal .auth-note,.checkout-universal .field label,.checkout-universal__auth p,.checkout-universal .method-btn span,.checkout-universal .address-line{color:#6b7280}
.checkout-universal .checkout_title,.checkout-universal__amount,.checkout-universal__methods-title,.checkout-universal__auth h3,.checkout-universal__address h3{color:#111827}
.checkout-universal .field input,.checkout-universal .google-btn{background:#fff;color:#111827}
.checkout-universal__topbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.checkout-universal__brand{padding:16px 22px;margin-bottom:16px}
.checkout-universal__brand-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0}
.checkout-universal__brand-mark{display:flex;align-items:center;min-width:0}
.checkout-universal__backlink{font-size:.88rem;line-height:1.2;color:#6b7280;text-decoration:none}
.checkout-universal__backlink:hover{color:#111827}
.checkout-universal .checkout_title{margin:0;font-size:1rem;line-height:1.2;font-weight:700;text-align:right;flex:1 1 auto}
.checkout-universal__brand,.checkout-universal__main,.checkout-universal__summary,.checkout-universal__section,.checkout-universal .address-option,.checkout-universal .method-btn,.checkout-universal .field input,.checkout-universal .google-btn,.checkout-universal .state{border-radius:1rem}
.checkout-universal__summary.checkout_sticky{top:0}
.checkout-universal__payment{position:relative}
.checkout-universal__payment.is-locked > *:not(.checkout-universal__gate){filter:blur(4px);pointer-events:none;user-select:none}
.checkout-universal__gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:2rem;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);z-index:2;text-align:center;color:#111827}
.checkout-universal__gate span{color:#6b7280}
.checkout-google-icon{color:#4285f4}
.checkout-universal .btn{border-radius:.78rem}
.checkout-universal__summary{padding:12px}
.checkout-universal__amount{display:block;text-align:right;font-size:1.3rem;line-height:1.1;letter-spacing:0;margin:0 0 6px}
.checkout-universal__items{margin-top:10px;padding-top:4px}
.checkout-universal__item{gap:12px;padding:10px 0}
@media (max-width:980px){
  .checkout-universal__brand{padding:14px 16px}
  .checkout-universal__brand-top{align-items:flex-start;flex-direction:column}
  .checkout-universal__topbar{justify-content:flex-start;margin-bottom:8px}
}