:root{--svcf-primary:#1E4639;--svcf-accent:#F3EFE5;--svcf-gold:#D7A845}
.svcf-wrap{max-width:1200px;margin:0 auto;padding:0 18px 40px}
.svcf-hero{background:var(--svcf-accent);border-radius:22px;padding:24px 20px;margin:16px 0 18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.svcf-hero h1{margin:0 0 6px;color:var(--svcf-primary);font-size:2rem}
.svcf-hero p{margin:0;color:#1b1b1b;opacity:.9}
.svcf-flow{display:flex;flex-direction:column;gap:16px}
.svcf-section{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:14px}
.svcf-form .row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.svcf-form .row.two > label{flex:1 1 50%}
.svcf-form label{display:flex;flex-direction:column;gap:4px;font-size:.95rem;color:#374151;flex:1}
.svcf-form input,.svcf-form select{border:1px solid #e5e7eb;border-radius:10px;padding:.5rem .6rem}
.svcf-btn{display:block;width:100%;text-align:center;background:var(--svcf-primary);color:#fff;font-weight:800;padding:.6rem 1rem;border-radius:12px;border:0}
.svcf-trust{display:flex;gap:18px;justify-content:center;margin-top:14px;color:#1b1b1b}
.svcf-trust > div{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:8px 12px}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{background:var(--svcf-primary);color:#fff;border-radius:10px;border:0;font-weight:800}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{background:var(--svcf-gold);color:#1b1b1b}
.woocommerce table.shop_table{border:0}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{border-top:0}
.woocommerce-cart-form, .cart-collaterals{background:#fff;border:0;padding:0;box-shadow:none}
.woocommerce-cart-form .product-thumbnail img{max-width:64px;border-radius:8px}
.svcf-totals .cart-collaterals{margin:0}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;max-width:100%;box-sizing:border-box;padding:.75rem 1rem;border-radius:10px}
@media (max-width: 900px){
  .svcf-wrap{overflow-x:hidden}
  .woocommerce-cart-form{overflow-x:auto}
  .woocommerce table.shop_table{width:100%;table-layout:auto;word-wrap:break-word;white-space:normal}
  .woocommerce table.shop_table td, .woocommerce table.shop_table th{word-break:break-word}
}


/* v1.0.1 — mobile thumb + spacing before checkout button */
/* Ensure product thumbnails are visible also on small screens (themes hide them) */
@media (max-width: 900px){
  .woocommerce-cart-form .product-thumbnail{display:table-cell !important; width:64px}
  .woocommerce-cart-form .product-thumbnail img{max-width:56px; height:auto; border-radius:8px; display:block}
}

/* Give breathing room to messages (e.g., Klarna installments) above checkout button */
.svcf-totals .cart-collaterals > *{margin-bottom:12px}
.svcf-totals .cart-collaterals .wc-proceed-to-checkout{margin-top:10px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{position:static; display:block; width:100%; max-width:100%; box-sizing:border-box}


/* v1.0.2 — ensure Klarna/financing text stays above the checkout button */
.svcf-totals .cart-collaterals{position:relative}
.svcf-totals .cart-collaterals .wc-proceed-to-checkout{margin-top:18px; clear:both}
.svcf-totals .cart-collaterals > *:not(.wc-proceed-to-checkout){margin-bottom:14px}

/* Target common Klarna/financing banners */
.svcf-totals .cart-collaterals .klarna-message,
.svcf-totals .cart-collaterals .klarna-widget,
.svcf-totals .cart-collaterals [class*="klarna"],
.svcf-totals .cart-collaterals .payment-methods,
.svcf-totals .cart-collaterals .wc-stripe-banner {
  display:block;
  margin-bottom:14px;
}

/* Make sure the checkout button is not absolutely positioned by any theme */
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  position:static !important;
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:.9rem 1rem;
  border-radius:10px;
}


/* v1.0.3 — ensure all cart rows are visible (override theme blocks) */
.svcf-products, .woocommerce-cart-form{max-height:none; overflow:visible}
.woocommerce-cart-form table.shop_table{width:100%; display:table; table-layout:auto}
.woocommerce-cart-form table.shop_table thead{display:table-header-group}
.woocommerce-cart-form table.shop_table tbody{display:table-row-group; max-height:none; overflow:visible}
.woocommerce-cart-form table.shop_table tfoot{display:table-footer-group}
.woocommerce-cart-form table.shop_table tr{display:table-row}
.woocommerce-cart-form table.shop_table td,
.woocommerce-cart-form table.shop_table th{display:table-cell; vertical-align:middle}

/* Safety for themes that set fixed heights on rows/cells */
.woocommerce-cart-form .shop_table tbody tr,
.woocommerce-cart-form .shop_table tbody td{height:auto; max-height:none}


/* v1.0.4 — force all cart items visible */
.svcf-products, .woocommerce-cart-form{max-height:none !important; overflow:visible !important}
.woocommerce-cart-form table.shop_table{width:100% !important; display:table !important; table-layout:auto !important}
.woocommerce-cart-form table.shop_table thead{display:table-header-group !important}
.woocommerce-cart-form table.shop_table tbody{display:table-row-group !important; max-height:none !important; overflow:visible !important; height:auto !important}
.woocommerce-cart-form table.shop_table tfoot{display:table-footer-group !important}
.woocommerce-cart-form table.shop_table tr{display:table-row !important; position:static !important; visibility:visible !important; height:auto !important}
.woocommerce-cart-form table.shop_table tr.cart_item{display:table-row !important}
.woocommerce-cart-form table.shop_table td,
.woocommerce-cart-form table.shop_table th{display:table-cell !important; vertical-align:middle !important}

/* Kill any theme rules like 'tbody tr:not(:first-child){display:none}' */
.woocommerce-cart-form table.shop_table tbody tr:not(:first-child){display:table-row !important}


/* v1.0.5 — mobile cart table layout fix */
@media (max-width: 900px){
  /* Allow horizontal scroll instead of squeezing letters vertically */
  .woocommerce-cart-form{overflow-x:auto !important}
  .woocommerce-cart-form table.shop_table{
    min-width: 640px;        /* give columns room */
    table-layout: auto !important;
  }
  /* Keep rows/cells as true table layout */
  .woocommerce-cart-form table.shop_table tr{display:table-row !important}
  .woocommerce-cart-form table.shop_table td,
  .woocommerce-cart-form table.shop_table th{
    display:table-cell !important;
    vertical-align:middle !important;
    white-space:nowrap;      /* avoid letter-per-line */
  }
  /* But let product name wrap naturally */
  .woocommerce-cart-form table.shop_table .product-name,
  .woocommerce-cart-form table.shop_table .product-name a{
    white-space:normal !important;
    word-break:normal !important;
  }
}


/* v1.1.0 — Mobile card layout for cart rows */
@media (max-width: 900px){
  /* Reset previous table hacks */
  .woocommerce-cart-form{overflow-x:visible !important}
  .woocommerce-cart-form table.shop_table{min-width:0; width:100% !important; border:0; table-layout:auto !important; display:block !important}
  .woocommerce-cart-form table.shop_table thead{display:none}
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tfoot{display:block}
  .woocommerce-cart-form table.shop_table tr{display:block !important; border:0}
  .woocommerce-cart-form table.shop_table tr.cart_item{
    display:grid !important;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal";
    gap:8px 12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:12px;
    margin-bottom:12px;
    position:relative;
  }
  .woocommerce-cart-form td{display:block !important; padding:0; border:0; background:transparent}
  .woocommerce-cart-form td.product-remove{position:absolute; top:8px; right:10px; display:block !important}
  .woocommerce-cart-form td.product-thumbnail{grid-area:thumb}
  .woocommerce-cart-form td.product-thumbnail img{width:72px; height:auto; border-radius:8px; display:block}
  .woocommerce-cart-form td.product-name{grid-area:name; font-weight:600; line-height:1.25; white-space:normal !important; word-break:normal !important}
  .woocommerce-cart-form td.product-price{grid-area:price; color:#374151; opacity:.9}
  .woocommerce-cart-form td.product-quantity{grid-area:qty}
  .woocommerce-cart-form td.product-subtotal{grid-area:subtotal; font-weight:700}
  .woocommerce-cart-form td.product-quantity .qty{max-width:80px}
  /* Optional labels for clarity */
  .woocommerce-cart-form td.product-price::before{content:"Precio: "; font-weight:600; margin-right:6px}
  .woocommerce-cart-form td.product-quantity::before{content:"Cantidad: "; font-weight:600; margin-right:6px}
  .woocommerce-cart-form td.product-subtotal::before{content:"Subtotal: "; font-weight:600; margin-right:6px}
}


/* v1.1.1 — Mobile readability & stacked layout */
@media (max-width: 900px){
  /* Kill any horizontal scroll in our sections */
  .svcf-section, .woocommerce, .woocommerce-cart-form{overflow-x:hidden !important}

  /* Cart item as card (already), fine-tune typography and ensure wrapping */
  .woocommerce-cart-form tr.cart_item{grid-template-columns:72px 1fr}
  .woocommerce-cart-form td, .woocommerce-cart-form th{white-space:normal !important}
  .woocommerce-cart-form td.product-name{font-size:0.98rem}
  .woocommerce-cart-form td.product-price,
  .woocommerce-cart-form td.product-subtotal{font-size:0.95rem; opacity:.95}
  .woocommerce-cart-form td.product-quantity{font-size:0.95rem}
  .woocommerce-cart-form td.product-price::before,
  .woocommerce-cart-form td.product-quantity::before,
  .woocommerce-cart-form td.product-subtotal::before{font-size:0.88rem; opacity:.8}
  .woocommerce-cart-form td.product-quantity .qty{max-width:90px; width:90px}

  /* Actions row: coupon + "Actualizar carrito" en columna y a 100% */
  .woocommerce .cart .actions{display:flex; flex-direction:column; gap:10px}
  .woocommerce .cart .actions .coupon{order:1; width:100%}
  .woocommerce .cart .actions .coupon .input-text{width:100%}
  .woocommerce .cart .actions .button{order:2; width:100%; max-width:100%}
}


/* v1.1.2 — mobile: show all items, solid actions row */
@media (max-width: 900px){
  /* Container must never clip */
  .svcf-section, .woocommerce, .woocommerce-cart-form{max-height:none !important; overflow:visible !important}

  /* Cards: make sure every row paints as an independent block with spacing */
  .woocommerce-cart-form table.shop_table{display:block !important; width:100% !important}
  .woocommerce-cart-form table.shop_table thead{display:none !important}
  .woocommerce-cart-form table.shop_table tbody{display:block !important}
  .woocommerce-cart-form table.shop_table tr.cart_item{
    display:grid !important;
    grid-template-columns:72px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal";
    gap:8px 12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:12px;
    margin:0 0 12px 0;       /* ensure separation */
    position:relative;
  }
  .woocommerce-cart-form table.shop_table tr:not(.cart_item){display:block !important}
  .woocommerce-cart-form td{display:block !important; padding:0; border:0; background:transparent}
  .woocommerce-cart-form td.product-remove{position:absolute; top:8px; right:10px; display:block !important; z-index:2}
  .woocommerce-cart-form td.product-thumbnail{grid-area:thumb}
  .woocommerce-cart-form td.product-thumbnail img{width:72px; height:auto; border-radius:8px; display:block}
  .woocommerce-cart-form td.product-name{grid-area:name; font-weight:600; line-height:1.25}
  .woocommerce-cart-form td.product-price{grid-area:price}
  .woocommerce-cart-form td.product-quantity{grid-area:qty}
  .woocommerce-cart-form td.product-subtotal{grid-area:subtotal; font-weight:700}
  .woocommerce-cart-form td.product-price::before{content:"Precio: "; font-weight:600; margin-right:6px}
  .woocommerce-cart-form td.product-quantity::before{content:"Cantidad: "; font-weight:600; margin-right:6px}
  .woocommerce-cart-form td.product-subtotal::before{content:"Subtotal: "; font-weight:600; margin-right:6px}
  .woocommerce-cart-form td.product-quantity .qty{max-width:90px; width:90px}

  /* Actions row full-width and visible */
  .woocommerce .cart .actions{display:flex !important; flex-direction:column !important; gap:10px; align-items:stretch}
  .woocommerce .cart .actions .coupon{width:100%}
  .woocommerce .cart .actions .coupon .input-text{width:100%}
  .woocommerce .cart .actions .button{width:100%; max-width:100%}
}


/* v1.2.0 — robust cards + actions wrapper */
/* Actions wrapper styling */
.svcf-actions{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:14px}
.svcf-actions .actions{margin:0 !important}
@media (min-width: 901px){
  .svcf-actions .actions{display:flex;align-items:flex-end;gap:12px}
  .svcf-actions .actions .coupon{display:flex;gap:8px;align-items:flex-end}
  .svcf-actions .actions .coupon .input-text{width:260px}
  .svcf-actions .actions .button{height:42px}
}
@media (max-width: 900px){
  .svcf-actions .actions{display:flex !important;flex-direction:column !important;gap:10px}
  .svcf-actions .actions .coupon{width:100%}
  .svcf-actions .actions .coupon .input-text{width:100%}
  .svcf-actions .actions .button{width:100%}
}

/* Ensure ALL cart items become cards on mobile */
@media (max-width: 900px){
  .woocommerce-cart-form table.shop_table{display:block !important;width:100% !important;border:0}
  .woocommerce-cart-form table.shop_table thead{display:none !important}
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tfoot{display:block !important}
  .woocommerce-cart-form table.shop_table tbody > tr{display:block !important}
  .woocommerce-cart-form table.shop_table tbody > tr.cart_item{
    display:grid !important;
    grid-template-columns:72px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb qty"
      "thumb subtotal";
    gap:8px 12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:12px;
    margin:0 0 12px 0;
    position:relative;
  }
  .woocommerce-cart-form td{display:block !important;padding:0;border:0;background:transparent}
  .woocommerce-cart-form td.product-remove{position:absolute;top:8px;right:10px;display:block !important;z-index:2}
  .woocommerce-cart-form td.product-thumbnail{grid-area:thumb}
  .woocommerce-cart-form td.product-thumbnail img{width:72px;height:auto;border-radius:8px;display:block}
  .woocommerce-cart-form td.product-name{grid-area:name;font-weight:600;line-height:1.25}
  .woocommerce-cart-form td.product-price{grid-area:price}
  .woocommerce-cart-form td.product-quantity{grid-area:qty}
  .woocommerce-cart-form td.product-subtotal{grid-area:subtotal;font-weight:700}
  .woocommerce-cart-form td.product-price::before{content:"Precio: ";font-weight:600;margin-right:6px}
  .woocommerce-cart-form td.product-quantity::before{content:"Cantidad: ";font-weight:600;margin-right:6px}
  .woocommerce-cart-form td.product-subtotal::before{content:"Subtotal: ";font-weight:600;margin-right:6px}
  .woocommerce-cart-form td.product-quantity .qty{max-width:90px;width:90px}
}


/* v1.2.1 — Desktop button text + Klarna spacing */
@media (min-width: 901px){
  /* Ensure long labels don't overflow the button */
  .svcf-actions .actions .button,
  .woocommerce .cart .actions .button{
    white-space:normal;
    word-break:break-word;
    line-height:1.2;
    padding:.6rem 1rem;
    font-size:0.95rem;
    height:auto;
    max-width:100%;
    box-sizing:border-box;
  }
  .svcf-actions .actions .coupon input.input-text{
    height:42px;
    box-sizing:border-box;
  }
}

/* Klarna/financing message should stay above the checkout button */
.svcf-totals .cart-collaterals{position:relative}
.svcf-totals .cart-collaterals > *:not(.wc-proceed-to-checkout){margin-bottom:14px}
.svcf-totals .cart-collaterals .wc-proceed-to-checkout{margin-top:16px; clear:both}
.svcf-totals .cart-collaterals [class*="klarna"],
.svcf-totals .cart-collaterals .klarna-message,
.svcf-totals .cart-collaterals .klarna-widget{display:block; margin-bottom:14px}
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  position:static !important;
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}


/* v1.2.2 — Prevent overlap: make totals a vertical flow */
.svcf-totals .cart-collaterals{
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* Put any financing/Klarna banners before the checkout button */
.svcf-totals .cart-collaterals [class*="klarna"],
.svcf-totals .cart-collaterals .klarna-message,
.svcf-totals .cart-collaterals .klarna-widget,
.svcf-totals .cart-collaterals .kco-installments,
.svcf-totals .cart-collaterals .wc-stripe-banner,
.svcf-totals .cart-collaterals .payment-methods,
.svcf-totals .cart-collaterals .shop_table_responsive {
  order: 1;
}
.svcf-totals .cart-collaterals .wc-proceed-to-checkout{
  order: 99;
  margin-top: 2px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  position: static !important;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Safety: prevent floats inside cart-collaterals */
.svcf-totals .cart-collaterals::after{
  content:"";
  display:block;
  clear:both;
}


/* v1.2.3 — Mobile totals stacking & spacing */
@media (max-width: 900px){
  .svcf-totals .cart-collaterals{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  /* Make all promo/banners full width and stacked above button */
  .svcf-totals .cart-collaterals [class*="klarna"],
  .svcf-totals .cart-collaterals .klarna-message,
  .svcf-totals .cart-collaterals .klarna-widget,
  .svcf-totals .cart-collaterals .kco-installments,
  .svcf-totals .cart-collaterals .wc-stripe-banner,
  .svcf-totals .cart-collaterals .payment-methods,
  .svcf-totals .cart-collaterals .shop_table_responsive,
  .svcf-totals .cart_totals{
    order: 1;
    width:100%;
    margin:0;
  }
  .svcf-totals .cart-collaterals .wc-proceed-to-checkout{
    order: 99;
    margin-top: 2px;
    width:100%;
  }
  .woocommerce .wc-proceed-to-checkout a.checkout-button{
    position: static !important;
    display:block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}