/* ==================================================================
   FLO · WooCommerce (flo-woo.css)
   Tarjetas de producto (glass + ámbar + tilt en hover), grid, carrusel
   infinito, y restyle mínimo de las páginas nativas de Woo (.flo-woo-page).
   Usa las variables de flo-global.css (:root). Todo con prefijo flo-.
   ================================================================== */

/* ── botón FLO reutilizable ─────────────────────────────────────── */
.flo-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fd);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg);background:var(--amber);border:1px solid var(--amber);
  padding:12px 20px;border-radius:100px;text-decoration:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s;
}
.flo-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,176,0,.28)}
.flo-btn i{font-style:normal;transition:transform .3s}
.flo-btn:hover i{transform:translateX(4px)}
.flo-btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.24)}
.flo-btn--ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:none}

/* ── contenedor de sección ──────────────────────────────────────── */
.flo-woo{padding:clamp(48px,7vh,90px) var(--pad);max-width:1360px;margin:0 auto}
.flo-woo-head{margin-bottom:clamp(28px,4vw,48px);max-width:60ch}
.flo-woo-head h2{font-size:clamp(1.5rem,3.4vw,2.5rem);margin-top:12px}
.flo-woo-cta{margin-top:clamp(28px,4vw,44px)}

/* ── GRID ───────────────────────────────────────────────────────── */
.flo-pgrid-inner{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(var(--flo-cols,4),1fr);
}
@media(max-width:1000px){.flo-pgrid-inner{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.flo-pgrid-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.flo-pgrid-inner{grid-template-columns:1fr}}

/* ── CARRUSEL infinito ──────────────────────────────────────────── */
.flo-pcarousel{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.flo-pcarousel-track{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;will-change:transform}
.flo-pcarousel .flo-pcard{width:clamp(240px,26vw,320px);flex:none}

/* ── TARJETA de producto ────────────────────────────────────────── */
.flo-pcard{
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .5s;
  transform-style:preserve-3d;
}
.flo-pcard:hover{border-color:rgba(255,176,0,.35);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.flo-pcard-media{
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%,rgba(255,255,255,.06),transparent 60%),#0c1216;
}
.flo-pcard-img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,.84,.28,1)}
.flo-pcard:hover .flo-pcard-img{transform:scale(1.06)}
/* sheen diagonal que cruza al hover */
.flo-pcard-sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,176,0,.14) 48%,transparent 62%);
  transform:translateX(-60%);transition:opacity .4s;
}
.flo-pcard:hover .flo-pcard-sheen{opacity:1;animation:floSheen 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes floSheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
/* badge */
.flo-pcard-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  font-family:var(--fd);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg);background:var(--amber);padding:5px 10px;border-radius:100px;
}
.flo-pcard-badge--out{background:var(--muted);color:var(--white)}
.flo-pcard-badge--sale{background:var(--terracota,#C56B4A)}
/* cuerpo */
.flo-pcard-body{padding:16px 16px 18px}
.flo-pcard-cat{font-family:var(--fd);font-size:.46rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.flo-pcard-name{font-size:1rem;line-height:1.3;margin:7px 0 0;font-weight:500}
.flo-pcard-name a{color:var(--white);text-decoration:none}
.flo-pcard-name a:hover{color:var(--amber)}
.flo-pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.flo-pcard-price{font-family:var(--fd);font-size:.9rem;letter-spacing:.02em;color:var(--white)}
.flo-pcard-price del{color:var(--muted);font-size:.72rem;margin-right:6px}
.flo-pcard-price ins{text-decoration:none;color:var(--amber)}
.flo-pcard-btn{
  font-family:var(--fd);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg);background:var(--amber);padding:9px 14px;border-radius:100px;text-decoration:none;
  white-space:nowrap;transition:transform .3s,box-shadow .3s;
}
.flo-pcard-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,176,0,.3)}
.flo-pcard-btn.added{opacity:.6}
.flo-pcard-btn--ghost{background:transparent;color:var(--silver);border:1px solid rgba(255,255,255,.2)}
.flo-pcard-btn--ghost:hover{border-color:var(--amber);color:var(--amber);box-shadow:none;transform:none}

@media(prefers-reduced-motion:reduce){
  .flo-pcard,.flo-pcard-img,.flo-pcarousel-track{transition:none!important;animation:none!important;transform:none!important}
}

/* ==================================================================
   RESTYLE PÁGINAS NATIVAS DE WOO  (solo bajo body.flo-woo-page)
   Tienda / categoría / producto / carrito / checkout con look FLO.
   ================================================================== */
body.flo-woo-page{background:var(--bg);color:var(--silver)}
body.flo-woo-page .woocommerce ul.products li.product .price,
body.flo-woo-page .woocommerce div.product p.price{color:var(--white);font-family:var(--fd)}
body.flo-woo-page .woocommerce ul.products li.product h2,
body.flo-woo-page .woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--white);font-family:var(--fd);font-size:1rem;text-transform:none;letter-spacing:.01em;
}
/* botones nativos → FLO */
body.flo-woo-page .woocommerce a.button,
body.flo-woo-page .woocommerce button.button,
body.flo-woo-page .woocommerce input.button,
body.flo-woo-page .woocommerce #respond input#submit,
body.flo-woo-page .woocommerce .single_add_to_cart_button{
  background:var(--amber)!important;color:var(--bg)!important;border-radius:100px!important;
  font-family:var(--fd)!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  font-size:.62rem!important;padding:.9em 1.6em!important;border:1px solid var(--amber)!important;
  transition:transform .3s,box-shadow .3s!important;
}
body.flo-woo-page .woocommerce a.button:hover,
body.flo-woo-page .woocommerce button.button:hover,
body.flo-woo-page .woocommerce .single_add_to_cart_button:hover{
  transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,176,0,.3)!important;
}
/* tarjetas del loop nativo */
body.flo-woo-page .woocommerce ul.products li.product{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;overflow:hidden;
  transition:border-color .4s,box-shadow .4s;
}
body.flo-woo-page .woocommerce ul.products li.product:hover{
  border-color:rgba(255,176,0,.35);box-shadow:0 22px 50px rgba(0,0,0,.45);
}
body.flo-woo-page .woocommerce ul.products li.product img{border-radius:10px}
/* mensajes / notices */
body.flo-woo-page .woocommerce-message,
body.flo-woo-page .woocommerce-info{border-top-color:var(--amber)!important}
/* tabla del carrito */
body.flo-woo-page .woocommerce table.shop_table{border-color:rgba(255,255,255,.1)}
body.flo-woo-page .woocommerce table.shop_table th{font-family:var(--fd);letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:var(--silver)}
body.flo-woo-page .woocommerce .cart_totals h2,
body.flo-woo-page .woocommerce div.product .product_title{font-family:var(--fd);color:var(--white)}