/* =========================================================================
   Stratto — cart & checkout pages
   Loaded on is_cart() || is_checkout() by inc/enqueue.php.
   Naming convention follows base.css: .str-{block}__{element}--{modifier}
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shared: WooCommerce core notices (wc_print_notices output) — used on both
   pages; we don't override these templates, just restyle core's own classes.
   ------------------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info{
  list-style:none;margin:0 0 20px;padding:14px 18px;border-radius:10px;
  font:600 14px var(--font-body);display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;
}
.woocommerce-message{background:var(--c-accent-soft-2);border:1px solid var(--c-accent-soft);color:var(--c-accent-ink)}
.woocommerce-info{background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink-soft)}
.woocommerce-error{background:#fbeceb;border:1px solid #e7b7b3;color:#9c2b22;list-style:none;padding-left:18px}
.woocommerce-error li{list-style:none}
.woocommerce-error .button,.woocommerce-message .wc-forward,.woocommerce-info .wc-forward{
  font:700 13px var(--font-body);color:var(--c-ink);border-bottom:2px solid var(--c-accent);padding-bottom:2px;
}

/* =========================================================================
   CART PAGE
   ========================================================================= */
.str-cart-page__head{padding:38px 0 8px}
.str-cart-page__title{font-size:52px}
.str-cart-page__meta{font:500 15px var(--font-body);color:var(--c-ink-mute);margin:0}
.str-cart-page__meta span{font-weight:700;color:var(--c-ink)}
.str-cart-page__continue{color:var(--c-accent);font-weight:700}

.str-cart-grid{display:grid;grid-template-columns:1fr 380px;gap:44px;padding:20px 0 60px;align-items:start}
@media (max-width:1000px){.str-cart-grid{grid-template-columns:1fr}}

.woocommerce-cart-form{display:block}
.str-cart-items{display:flex;flex-direction:column}

.str-cart-item{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--c-line);
}
.str-cart-item__media{width:96px;height:96px;border-radius:var(--radius-md);overflow:hidden;flex:none}
.str-cart-item__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.str-cart-item__title{font:700 16px var(--font-body);margin-bottom:4px}
.str-cart-item__title a{color:inherit}
.str-cart-item__cat{font:500 13px var(--font-body);color:var(--c-ink-mute);margin-bottom:10px}
.str-cart-item__pills{display:flex;gap:8px;flex-wrap:wrap}
.str-cart-item__backorder{font:600 12px var(--font-body);color:var(--c-accent-ink);margin:8px 0 0}
.str-pill{font:600 12px var(--font-body);background:var(--c-line-soft);padding:5px 11px;border-radius:100px;white-space:nowrap}

.str-cart-item__aside{display:flex;flex-direction:column;align-items:flex-end;gap:12px;justify-self:end;text-align:right}
.str-cart-item__price{font-family:var(--font-display);font-weight:700;font-size:24px}
.str-cart-item__price .amount{font-family:inherit}
.str-cart-item__remove{font:600 12.5px var(--font-body);color:var(--c-ink-faint);cursor:pointer}
.str-cart-item__remove:hover{color:var(--c-accent-ink)}

.str-qty{display:flex;align-items:center;border:1.5px solid var(--c-line-strong);border-radius:10px;overflow:hidden}
.str-qty__btn{
  border:none;background:none;padding:9px 14px;font:700 16px var(--font-body);
  color:var(--c-ink-faint);cursor:pointer;line-height:1;
}
.str-qty__btn:hover{color:var(--c-ink);background:var(--c-line-soft)}
.str-qty__btn:last-child{color:var(--c-ink)}
.str-qty .qty,
.str-qty__input{
  width:36px;border:none;text-align:center;font:700 14px var(--font-body);color:var(--c-ink);
  padding:9px 0;background:none;-moz-appearance:textfield;
}
.str-qty__input::-webkit-outer-spin-button,
.str-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.str-qty--fixed{border:none;padding:9px 4px;font:700 14px var(--font-body)}

.str-hidden{display:none !important}

/* cross-sells */
.str-cross-sells{margin-top:30px}
.str-cross-sells__head{font:700 15px var(--font-body);margin-bottom:16px}
.str-cross-sells__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.str-cross-sells__grid{grid-template-columns:1fr}}
.str-cross-sell-card{
  border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:12px;
  display:flex;gap:12px;align-items:center;background:#fff;
}
.str-cross-sell-card__media{width:56px;height:56px;border-radius:9px;overflow:hidden;flex:none}
.str-cross-sell-card__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.str-cross-sell-card__body{display:flex;flex-direction:column;gap:2px}
.str-cross-sell-card__title{font:700 13.5px var(--font-body)}
.str-cross-sell-card__price{font-family:var(--font-display);font-weight:700;font-size:17px}

/* summary panel (cart-totals.php) + shared with review-order.php totals */
.str-summary,.str-checkout-summary{position:sticky;top:24px}
.str-summary__title{font-family:var(--font-display);font-weight:700;font-size:26px;margin-bottom:18px}
.str-summary__lines{display:flex;flex-direction:column}
.str-summary__row,.str-order-totals .str-summary__row{
  display:flex;justify-content:space-between;padding:10px 0;font:500 14.5px var(--font-body);gap:12px;
}
.str-summary__row .k{color:var(--c-ink-soft)}
.str-summary__row .v{font-weight:700}
.str-summary__row--shipping .v,
.str-summary__discount{color:var(--c-ok)}

.str-promo{display:flex;gap:8px;margin:16px 0 18px}
.str-promo__input{
  flex:1;border:1.5px solid var(--c-line-strong);border-radius:10px;padding:11px 14px;
  font:500 13.5px var(--font-body);color:var(--c-ink);background:#fff;
}
.str-promo__input::placeholder{color:var(--c-ink-faint)}
.str-promo__btn{background:var(--c-dark);color:#fff;font:700 13.5px var(--font-body);padding:11px 18px;border-radius:10px;border:none;cursor:pointer}

.str-summary__total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid var(--c-line-strong)}
.str-summary__total-label{font:700 17px var(--font-body)}
.str-summary__total-value{font-family:var(--font-display);font-weight:700;font-size:38px}

.str-summary__checkout{margin-bottom:12px}
.str-summary__checkout .checkout-button{
  display:flex;align-items:center;justify-content:center;width:100%;
  background:var(--c-accent);color:var(--c-dark);font:800 16px var(--font-body);
  padding:17px;border-radius:12px;text-align:center;
}

.str-summary__trust{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--c-line-strong);padding-top:16px;font:500 13px var(--font-body);color:var(--c-ink-soft)}
.str-summary__trust-item{display:flex;gap:9px;align-items:center}
.str-summary__trust-icon{width:20px;height:20px;border-radius:6px;background:var(--c-accent-soft);flex:none}

/* empty cart */
.str-cart-empty__inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:100px 0;gap:18px}
.str-cart-empty__icon{width:64px;height:64px;border-radius:18px;background:var(--c-panel);border:2px dashed var(--c-line-strong)}
.str-cart-empty__title{font-size:34px}
.str-cart-empty__text{font:500 15px/1.6 var(--font-body);color:var(--c-ink-mute);max-width:420px;margin:0}

/* shipping method rate radios (woocommerce/cart/cart-shipping.php) */
.str-ship-methods{display:flex;flex-direction:column;gap:12px}
.str-ship-methods__package{font:700 13px var(--font-body);color:var(--c-ink-mute);margin-bottom:6px}
.str-ship-method{
  display:flex;align-items:center;gap:14px;border:1.5px solid var(--c-line);border-radius:12px;
  padding:15px 18px;cursor:pointer;background:#fff;
}
.str-ship-method.is-selected{border:2px solid var(--c-accent);padding:14.5px 17.5px}
.str-ship-method__radio{width:20px;height:20px;flex:none;accent-color:var(--c-accent)}
.str-ship-method__radio--fixed{border-radius:50%;border:6px solid var(--c-accent)}
.str-ship-method__body{flex:1;display:flex;flex-direction:column;gap:3px}
.str-ship-method__title{font:700 14.5px var(--font-body)}
.str-ship-method__desc{font:500 12.5px var(--font-body);color:var(--c-ink-mute)}
.str-ship-method__price{font:700 14px var(--font-body)}
.str-ship-method__price.is-free{color:var(--c-ok)}

/* =========================================================================
   CHECKOUT PAGE (slim custom shell — see page-checkout.php + form-checkout.php)
   ========================================================================= */
body.stratto-checkout{margin:0}

.str-checkout-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);border-bottom:1px solid var(--c-line);
}
.str-checkout-header__badge{display:flex;align-items:center;gap:10px;font:600 13px var(--font-body);color:var(--c-ink-mute)}
.str-checkout-header__badge-icon{width:18px;height:18px;border-radius:6px;background:var(--c-line-soft)}

.str-checkout-steps{
  display:flex;align-items:center;gap:14px;padding:22px var(--gutter);
  border-bottom:1px solid var(--c-line);font:700 13.5px var(--font-body);flex-wrap:wrap;
}
.str-checkout-steps__item{display:flex;align-items:center;gap:8px;color:var(--c-ink-line)}
.str-checkout-steps__item.is-done{color:var(--c-ok)}
.str-checkout-steps__item.is-current{color:var(--c-ink)}
.str-checkout-steps__dot{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;border:1.5px solid var(--c-line-strong);
}
.str-checkout-steps__item.is-done .str-checkout-steps__dot{background:var(--c-ok);color:#fff;border-color:var(--c-ok)}
.str-checkout-steps__item.is-current .str-checkout-steps__dot{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.str-checkout-steps__sep{color:var(--c-line-strong);letter-spacing:-2px}

.str-checkout-notices{padding-top:20px}
.str-checkout-notices:empty{padding:0}

.str-checkout-grid{display:grid;grid-template-columns:1fr 400px;gap:0;align-items:start}
@media (max-width:960px){.str-checkout-grid{grid-template-columns:1fr}}

.str-checkout-col--main{padding:36px var(--gutter) 60px;border-right:1px solid var(--c-line)}
@media (max-width:960px){.str-checkout-col--main{border-right:none;padding-bottom:20px}}
.str-checkout-col--summary{padding:36px var(--gutter);background:var(--c-panel);align-self:stretch}

.str-checkout-section{margin-bottom:32px}
.str-checkout-section__title{font-family:var(--font-display);font-weight:700;font-size:24px;margin:0 0 18px}

/* Restyle WooCommerce core's own field markup (checkout/form-billing.php,
   checkout/form-shipping.php) without overriding those templates — target
   the classes WC already puts on the wrapper/inputs. */
.str-checkout-fields{display:flex;flex-wrap:wrap;gap:16px 16px;margin-bottom:0}
.str-checkout-fields .form-row{flex:1 1 100%;margin:0 0 16px;display:flex;flex-direction:column;gap:7px}
.str-checkout-fields .form-row-first,
.str-checkout-fields .form-row-last{flex:1 1 calc(50% - 8px)}
.str-checkout-fields .form-row-wide{flex:1 1 100%}
.str-checkout-fields label{font:600 13px var(--font-body);color:var(--c-ink-soft)}
.str-checkout-fields label .required{color:var(--c-accent);text-decoration:none}
.str-checkout-fields .input-text,
.str-checkout-fields select,
.str-checkout-fields textarea{
  width:100%;font:500 14.5px var(--font-body);color:var(--c-ink);
  border:1.5px solid var(--c-line-strong);border-radius:10px;padding:13px 15px;background:#fff;
}
.str-checkout-fields .input-text:focus,
.str-checkout-fields select:focus,
.str-checkout-fields textarea:focus{outline:none;border-color:var(--c-accent)}
.str-checkout-fields .select2-container{width:100% !important}

/* "ship to a different address?" toggle from checkout/form-shipping.php */
#ship-to-different-address{list-style:none;margin:8px 0 16px;font:600 13.5px var(--font-body)}
#ship-to-different-address label{display:flex;align-items:center;gap:10px;cursor:pointer}
.shipping_address{padding-top:6px}

.str-order-items{display:flex;flex-direction:column;margin-bottom:8px}
.str-order-item{
  display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--c-line);
}
.str-order-item__media{width:52px;height:52px;border-radius:9px;overflow:hidden;flex:none}
.str-order-item__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.str-order-item__title{font:700 13.5px var(--font-body);line-height:1.2}
.str-order-item__meta{font:500 12px var(--font-body);color:var(--c-ink-mute)}
.str-order-item__price{font-family:var(--font-display);font-weight:700;font-size:18px;white-space:nowrap}

.str-order-totals{margin-top:8px}
.str-order-totals .str-summary__total{margin-top:6px}

/* payment methods (checkout/payment.php) */
.str-payment{margin-top:8px}
.str-payment__list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.str-payment-method{
  display:flex;align-items:center;gap:14px;border:1.5px solid var(--c-line);border-radius:12px;
  padding:15px 18px;cursor:pointer;background:#fff;
}
.str-payment-method.is-selected{border:2px solid var(--c-accent);padding:14.5px 17.5px}
.str-payment-method__radio{width:20px;height:20px;flex:none;accent-color:var(--c-accent)}
.str-payment-method__body{flex:1;display:flex;flex-direction:column;gap:3px}
.str-payment-method__title{font:700 14.5px var(--font-body)}
.str-payment-method__desc{font:500 12.5px var(--font-body);color:var(--c-ink-mute)}
.str-payment-method__icon{display:flex;align-items:center;gap:6px;max-height:28px}
.str-payment-method__icon img{max-height:28px;width:auto}
.str-payment-method__fields{
  margin:-2px 0 0;padding:16px 18px;border:1.5px solid var(--c-line);border-top:none;
  border-radius:0 0 12px 12px;font:500 13.5px/1.6 var(--font-body);color:var(--c-ink-soft);
}

.str-place-order{display:flex;flex-direction:column;gap:14px}
.str-place-order__btn{width:100%;font-size:16px;padding:17px;border-radius:12px}
.woocommerce-terms-and-conditions-wrapper{font:500 13px var(--font-body);color:var(--c-ink-soft)}
.woocommerce-terms-and-conditions-wrapper label{display:flex;align-items:flex-start;gap:8px}

.str-payment__disclaimer{font:500 12px/1.5 var(--font-body);color:var(--c-ink-faint);text-align:center;margin:0 0 18px}
.str-payment__secure{
  display:flex;gap:9px;align-items:center;font:500 13px var(--font-body);color:var(--c-ink-soft);
  border-top:1px solid var(--c-line-strong);padding-top:16px;
}
.str-payment__secure-icon{width:20px;height:20px;border-radius:6px;background:var(--c-accent-soft);flex:none}

.str-checkout-footer{
  background:var(--c-dark);color:var(--c-onDark-mute);padding:26px var(--gutter);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font:500 12.5px var(--font-body);
}
.str-checkout-footer__logo{font-size:20px;color:#fff}
.str-checkout-footer__links{display:flex;gap:20px;flex-wrap:wrap}
.str-checkout-footer__links a:hover{color:#fff}

@media (max-width:600px){
  .str-cart-item{grid-template-columns:72px 1fr;grid-template-rows:auto auto}
  .str-cart-item__aside{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}
  .str-order-item{grid-template-columns:44px 1fr auto}
}