/* ============================================================
   Carrito y pago. Los bloques de WooCommerce traen su propia hoja,
   bastante generica; aca se los viste con la piel del sitio.
   Se carga solo en /cart/ y /checkout/.
   ============================================================ */

/* las paginas de texto son angostas a proposito; el carrito usa todo el ancho */
.page-body.sh-compra{max-width:var(--wrap)}

/* el bloque venia encerrado en el ancho por defecto del editor */
.sh-compra .wp-block-woocommerce-cart,
.sh-compra .wp-block-woocommerce-checkout{max-width:none !important;margin:clamp(26px,3.5vw,46px) 0 clamp(32px,4vw,54px)}
.sh-compra > .page-content{padding-bottom:0}
/* en el carrito el globo de WhatsApp tapaba el boton de pago */
.woocommerce-cart .wa-float{right:auto;left:20px}

/* ---- dos columnas: el detalle y el resumen ---- */
.wc-block-cart.wc-block-components-sidebar-layout,
.wc-block-checkout.wc-block-components-sidebar-layout{
  display:grid !important;grid-template-columns:minmax(0,1fr) 384px;
  gap:clamp(26px,3.4vw,58px);align-items:start}
.wc-block-cart > div:not([class]),
.wc-block-checkout > div:not([class]){grid-column:1 / -1}
.sh-compra .wc-block-components-main,
.sh-compra .wc-block-components-sidebar{width:auto !important;max-width:none !important;flex:none !important;padding:0 !important}

/* ---- tabla de productos ---- */
.wc-block-cart-items{border:0 !important;margin:0 !important;width:100%}
.wc-block-cart-items__header{border-bottom:1px solid var(--ink) !important}
.wc-block-cart-items__header th{font:500 10.5px var(--mono) !important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint) !important;padding:0 0 12px !important;border:0 !important}
.wc-block-cart-items__row{border-bottom:1px solid var(--line) !important}
.wc-block-cart-items__row td{padding:clamp(20px,2.4vw,30px) 0 !important;border:0 !important;vertical-align:top}

/* la foto del conjunto, en vertical como en la coleccion */
/* el selector lleva el td adelante porque la regla de arriba
   (.wc-block-cart-items__row td) es más específica y si no le gana */
.wc-block-cart-items__row td.wc-block-cart-item__image{width:clamp(86px,9vw,124px) !important;padding-right:0 !important}
/* aire entre la foto y el nombre: pegados se leen como un solo bloque */
.wc-block-cart-items__row td.wc-block-cart-item__product{padding-left:clamp(22px,2.8vw,40px) !important}
.wc-block-cart-item__image img{width:100% !important;height:auto !important;aspect-ratio:3/4;object-fit:cover;
  display:block;background:var(--greige);border:1px solid var(--line)}

.wc-block-components-product-name{font-family:var(--serif) !important;font-size:clamp(19px,1.5vw,23px) !important;
  font-weight:400 !important;line-height:1.2;color:var(--ink) !important;text-decoration:none !important}
.wc-block-cart-item__prices{margin:6px 0 0 !important}
.wc-block-cart-item__prices .wc-block-components-product-price__value{font:400 14px var(--mono);color:var(--muted)}

/* el detalle del armado: una linea por dato, sin las barras de por medio */
.wc-block-components-product-metadata{margin-top:14px !important}
.wc-block-components-product-metadata__description{display:none}
.wc-block-components-product-details{margin:0 !important;padding:0 !important;list-style:none;
  display:grid;gap:5px;max-width:52ch}
.wc-block-components-product-details span[class*="product-details__"]{display:grid;grid-template-columns:84px minmax(0,1fr);
  gap:10px;font-size:13.5px;line-height:1.5}
.wc-block-components-product-details__name{font:500 10.5px var(--mono) !important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint) !important;padding-top:3px}
.wc-block-components-product-details__value{color:var(--muted) !important;font-style:normal !important}
.wc-block-components-product-details span[aria-hidden="true"]{display:none}   /* las " / " que separan */

/* cantidad y quitar */
.wc-block-cart-item__quantity{margin-top:22px !important;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wc-block-components-quantity-selector{border:1px solid var(--line) !important;border-radius:999px !important;
  background:var(--surface);width:auto !important;min-width:0 !important;overflow:hidden}
.wc-block-components-quantity-selector::after{display:none !important}
.wc-block-components-quantity-selector__button{color:var(--ink) !important;opacity:1 !important;
  width:38px !important;height:40px;font-size:17px;background:none !important}
.wc-block-components-quantity-selector__button:disabled{color:var(--faint) !important}
.wc-block-components-quantity-selector__input{font:500 14px var(--mono) !important;color:var(--ink) !important;
  width:38px !important;min-width:0 !important;background:none !important}
.wc-block-cart-item__remove-link{font:500 11px var(--mono) !important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint) !important;text-decoration:none !important;margin:0 !important;padding:0 !important;
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.wc-block-cart-item__remove-link:hover{color:var(--terra-deep) !important}
.wc-block-cart-item__remove-link svg{width:16px;height:16px;fill:currentColor}

/* el ancho de las columnas es cosa del escritorio: abajo de 700 px
   WooCommerce arma su propia grilla y si la pisamos el total se sale */
@media(min-width:701px){
  .wc-block-cart-item__product{width:auto !important}
  .wc-block-cart-item__total{text-align:right;white-space:nowrap;width:clamp(120px,17%,210px) !important;
    padding-left:20px !important}
}
.wc-block-cart-item__total .wc-block-components-product-price__value{font:400 clamp(20px,1.7vw,26px) var(--serif);color:var(--ink)}

/* ---- resumen ---- */
.sh-compra .wc-block-components-sidebar{position:sticky;top:calc(var(--sh-header,96px) + 16px)}
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-order-summary{
  background:var(--cream);border:1px solid var(--line);padding:clamp(20px,2.2vw,28px)}
.wc-block-cart__totals-title{font:500 10.5px var(--mono) !important;letter-spacing:.2em !important;
  text-transform:uppercase;color:var(--faint) !important;padding:0 0 14px !important;margin:0 !important}
.sh-compra .wc-block-components-totals-wrapper{padding:14px 0 !important;border-top:1px solid var(--line-soft) !important}
.sh-compra .wc-block-components-totals-wrapper:first-child{border-top:0 !important;padding-top:0 !important}
.sh-compra .wc-block-components-totals-item__label{font-size:14px;color:var(--muted)}
.sh-compra .wc-block-components-totals-item__value{font:500 14px var(--mono);color:var(--ink)}
.sh-compra .wc-block-components-totals-footer-item{align-items:baseline}
.sh-compra .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{font-size:15px;color:var(--ink)}
.sh-compra .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.sh-compra .wc-block-components-totals-footer-item-tax-value{font:400 clamp(26px,2.2vw,34px) var(--serif) !important;color:var(--ink) !important}

/* cupon */
.wc-block-components-totals-coupon .wc-block-components-panel__button{font:500 11px var(--mono) !important;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terra-deep) !important;padding:0 !important}
.wc-block-components-totals-coupon .wc-block-components-panel__button-icon{fill:var(--terra-deep)}

/* boton de pago */
.wc-block-cart__submit{padding:0 !important;margin-top:18px}
.sh-compra .wc-block-components-button.contained,
.sh-compra .wc-block-components-checkout-place-order-button{
  background:var(--terra) !important;color:#fff !important;border:0 !important;border-radius:999px !important;
  font:600 15px var(--sans) !important;padding:16px 26px !important;width:100%;box-shadow:var(--shadow);
  transition:background .15s,transform .15s}
.sh-compra .wc-block-components-button.contained:hover,
.sh-compra .wc-block-components-checkout-place-order-button:hover{background:var(--terra-deep) !important;transform:translateY(-1px)}

/* la nota de siempre: instalacion y formas de pago, al pie del resumen */
.sh-nota-compra{font-size:12.5px;color:var(--faint);line-height:1.7;margin:14px 2px 0;text-align:center}
.sh-nota-compra a{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.sh-nota-compra a:hover{color:var(--terra-deep)}

/* ---- pago: titulos y campos con la tipografia del sitio ---- */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-order-summary .wc-block-components-panel__button{
  font-family:var(--serif) !important;font-weight:400 !important;letter-spacing:-.01em}
.wc-block-components-checkout-step__title{font-size:clamp(20px,1.7vw,25px) !important}
.wc-block-components-checkout-step__description{color:var(--muted) !important;font-size:13.5px}
.wc-block-components-checkout-step{padding-left:0 !important;border:0 !important}
.wc-block-components-checkout-step__heading{margin-top:0 !important}

.sh-compra .wc-block-components-text-input input,
.sh-compra .wc-block-components-textarea,
.sh-compra .wc-block-components-combobox-control input,
.sh-compra .wc-block-components-form .wc-block-components-text-input input,
.sh-compra select{border:1px solid var(--line) !important;border-radius:9px !important;
  background:var(--surface) !important;font-family:var(--sans) !important;color:var(--ink) !important;
  box-shadow:none !important}
.sh-compra .wc-block-components-text-input input:focus,
.sh-compra .wc-block-components-combobox-control input:focus,
.sh-compra select:focus{border-color:var(--terra) !important;box-shadow:0 0 0 1px var(--terra) !important;outline:0}
.sh-compra .wc-block-components-text-input label,
.sh-compra .wc-block-components-combobox-control label{color:var(--muted) !important}
.sh-compra .wc-block-components-checkbox__label{color:var(--muted);font-size:14px}

/* el resumen del pedido, del lado del pago */
.wc-block-components-order-summary-item__image img{border:1px solid var(--line);background:var(--greige)}
.wc-block-components-order-summary-item__description .wc-block-components-product-name{font-size:17px !important}

/* precio por transferencia: en el carrito se informa, no se descuenta
   (el descuento se aplica recién cuando elegís el medio de pago) */
.sh-transf{margin-top:16px;padding:14px 15px;background:var(--surface);border:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sh-transf > span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.sh-transf .t{display:block;font:600 13px var(--sans);color:var(--ink);margin-bottom:4px}
.sh-transf .p{text-align:right;white-space:nowrap;font:400 clamp(18px,1.6vw,22px) var(--serif);color:var(--terra-deep)}
.sh-transf .p small{display:block;font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
@media(max-width:420px){.sh-transf{flex-direction:column;gap:10px}.sh-transf .p{text-align:left}}

/* ---- franja de tranquilidad debajo del carrito ---- */
.sh-tranqui{list-style:none;margin:0 0 clamp(50px,7vw,90px);padding:clamp(22px,2.6vw,32px) 0 0;
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
.sh-tranqui li{font-size:13.5px;line-height:1.65;color:var(--muted)}
.sh-tranqui b{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:7px}
@media(max-width:760px){.sh-tranqui{grid-template-columns:1fr;gap:18px}}

/* ---- carrito vacio ---- */
.wp-block-woocommerce-empty-cart-block{padding:clamp(30px,5vw,60px) 0}
.wp-block-woocommerce-empty-cart-block h2{font-size:clamp(24px,2.4vw,34px);font-weight:400}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products{display:none}

/* ---- pantallas chicas ---- */
@media(max-width:1000px){
  .wc-block-cart.wc-block-components-sidebar-layout,
  .wc-block-checkout.wc-block-components-sidebar-layout{grid-template-columns:minmax(0,1fr)}
  .sh-compra .wc-block-components-sidebar{position:static}
}
@media(max-width:600px){
  .wc-block-cart-items__header{display:none !important}
  /* en el celular manda la grilla de WooCommerce; acá solo el aire y el tipo.
     La foto y el precio se achican: con 7 cifras el total no entra al lado
     de una foto de 84 px y se sale de la pantalla. */
  .wc-block-cart-items__row td{padding-top:18px !important;padding-bottom:18px !important}
  .wc-block-cart-items__row td.wc-block-cart-item__image{width:64px !important}
  .wc-block-cart-items__row td.wc-block-cart-item__product{padding-left:14px !important}
  .wc-block-components-product-name{font-size:17px !important}
  .wc-block-components-product-details span[class*="product-details__"]{grid-template-columns:64px minmax(0,1fr);gap:7px;font-size:12.5px}
  /* el precio unitario repetía el total: con una unidad se leía dos veces */
  .wc-block-cart-item__prices{display:none !important}
  .wc-block-cart-item__total{padding-left:10px !important}
  .wc-block-cart-item__total .wc-block-components-product-price__value{font-size:16.5px}
  .wc-block-cart-item__quantity{margin-top:16px !important}
}