/* =========================================================================
   WS Books Theme — WooCommerce compatibility styles
   Restyles WooCommerce's default templates (shop, single product, cart,
   checkout, my account) to match the theme's design tokens, without
   overriding WooCommerce's actual template files. Loaded only when
   WooCommerce is active — see inc/enqueue/enqueue.php.
   ========================================================================= */

/* ---- Shared wrapper the theme injects around WooCommerce content
   (see inc/woocommerce/woocommerce-setup.php) ---- */
.wsb-woo-wrap{padding:8px 0 80px;}
.wsb-woo-content{max-width:var(--wsb-maxw); width:100%; padding-top:32px; padding-bottom:32px;}

.woocommerce-notices-wrapper{margin-bottom:24px;}
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none; background:var(--wsb-green-tint); border:1px solid var(--wsb-border);
  border-radius:var(--wsb-radius-sm); padding:16px 20px; font-size:14.5px; color:var(--wsb-ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.woocommerce-error{background:var(--wsb-gold-tint);}
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button{
  background:var(--wsb-green); color:#fff; padding:10px 20px; border-radius:100px; font-weight:600; font-size:13.5px;
}

/* ---- Shop archive title — explicitly styled since WooCommerce/WP core
   print this with a generic block heading class by default, which could
   otherwise inherit an unintended background/box style from elsewhere.
   Covers every selector WooCommerce or a block-based template might use. */
.woocommerce-products-header__title.page-title,
.wsb-woo-content > h1,
.wsb-woo-content .wp-block-post-title,
.wsb-woo-content .wp-block-query-title{
  background:none !important;
  color:var(--wsb-ink) !important;
  font-family:var(--wsb-font-heading, 'Fraunces', serif) !important;
  font-weight:600 !important;
  font-size:clamp(30px,4vw,44px) !important;
  padding:0 !important;
  margin:0 0 36px !important;
  line-height:1.15 !important;
}

/* ---- Shop / archive product grid — matches .book-grid / .book-card ---- */
ul.products{display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px; list-style:none; margin:0; padding:0;}
ul.products li.product{
  background:var(--wsb-surface); border:1px solid var(--wsb-border); border-radius:var(--wsb-radius-md);
  overflow:hidden; padding:0 !important; transition:transform .22s ease, box-shadow .22s ease; list-style:none;
  display:flex; flex-direction:column; position:relative;
}
ul.products li.product:hover{transform:translateY(-6px); box-shadow:var(--wsb-shadow-md);}
ul.products li.product > a{display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none;}

/* Fixed-ratio image box for every card, so rows line up whether a product
   has a real photo or falls back to WooCommerce's placeholder icon. */
ul.products li.product a.woocommerce-loop-product__link{
  aspect-ratio:3/4; overflow:hidden; background:var(--wsb-green-tint);
  display:flex; align-items:center; justify-content:center;
}
ul.products li.product img{width:100%; height:100%; object-fit:cover; border-radius:0; display:block;}
/* WooCommerce's own "no image" placeholder — shown small/centered rather
   than stretched, since it's a generic icon, not a real product photo. */
ul.products li.product img.woocommerce-placeholder{
  width:34%; height:34%; object-fit:contain; opacity:.45;
}

ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:16.5px; font-weight:600; color:var(--wsb-ink);
  margin:16px 18px 6px; line-height:1.3;
}
ul.products li.product .price{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-weight:600; font-size:16.5px; color:var(--wsb-ink);
  margin:0 18px 12px; display:block;
}
ul.products li.product .price del{color:var(--wsb-ink-soft); font-weight:400; margin-right:6px; font-size:14px;}
ul.products li.product .price ins{text-decoration:none;}
ul.products li.product .star-rating{margin:0 18px 10px; color:var(--wsb-gold); font-size:13px;}
ul.products li.product .button{
  margin:auto 18px 20px; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:100px; background:var(--wsb-green-tint); color:var(--wsb-green-dark);
  font-weight:600; font-size:13.5px; transition:background .18s ease, color .18s ease;
}
ul.products li.product .button:hover{background:var(--wsb-green); color:#fff;}
ul.products li.product .onsale{
  position:absolute; top:14px; left:14px; background:var(--wsb-gold); color:#fff; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:100px; z-index:2; margin:0;
}

/* Results count + sort dropdown as one tidy row, matching the section-head
   pattern used across the rest of the site. */
.woocommerce-products-header + .woocommerce-notices-wrapper + p.woocommerce-result-count,
.woocommerce > p.woocommerce-result-count,
form.woocommerce-ordering{display:inline-block;}
.woocommerce-result-count, .woocommerce-ordering{font-size:14px; color:var(--wsb-ink-soft); margin-bottom:0;}
.wsb-woo-content > .woocommerce-result-count,
.wsb-woo-content > form.woocommerce-ordering{
  display:inline-flex; align-items:center; margin-bottom:28px;
}
.woocommerce-ordering select{border:1.5px solid var(--wsb-border); border-radius:100px; padding:9px 16px; font-family:inherit; font-size:14px;}

.woocommerce-pagination{margin-top:48px;}
.woocommerce-pagination ul.page-numbers{display:flex; gap:8px; list-style:none; padding:0; justify-content:center;}
.woocommerce-pagination .page-numbers{padding:9px 15px; border:1.5px solid var(--wsb-border); border-radius:100px; font-size:14px; font-weight:600; display:inline-block;}
.woocommerce-pagination .page-numbers.current{background:var(--wsb-green); color:#fff; border-color:var(--wsb-green);}

/* ---- Single product page — mirrors the single-book.php layout ---- */
.woocommerce div.product{display:grid; grid-template-columns:0.85fr 1fr; gap:60px; align-items:flex-start;}
.woocommerce div.product .woocommerce-product-gallery{position:sticky; top:100px;}
.woocommerce div.product .woocommerce-product-gallery__wrapper{border-radius:var(--wsb-radius-lg); overflow:hidden;}
.woocommerce div.product .woocommerce-product-gallery__image img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--wsb-radius-lg);
}
.woocommerce div.product .flex-control-thumbs{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:14px 0 0; padding:0;
}
.woocommerce div.product .flex-control-thumbs li{width:calc(25% - 8px); flex:none;}
.woocommerce div.product .flex-control-thumbs img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--wsb-radius-sm);
  border:1.5px solid var(--wsb-border); cursor:pointer; opacity:.7; transition:opacity .15s ease, border-color .15s ease;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1; border-color:var(--wsb-green);}

@media (max-width:600px){
  .woocommerce div.product .flex-control-thumbs li{width:calc(33.333% - 7px);}
}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--wsb-radius-lg); box-shadow:var(--wsb-shadow-md);}
.woocommerce div.product .summary{max-width:none;}
.woocommerce div.product .summary .product_title{font-family:'Fraunces', serif; font-size:clamp(30px,3.4vw,42px); font-weight:600; max-width:16ch; margin:0 0 10px;}
.woocommerce div.product .summary p.price{font-family:'Fraunces', serif; font-size:30px; font-weight:600; color:var(--wsb-ink); margin:22px 0;}
.woocommerce div.product .summary p.price del{color:var(--wsb-ink-soft); font-size:16px; font-weight:400; margin-right:10px;}
.woocommerce div.product .summary p.price ins{text-decoration:none;}
.woocommerce div.product .summary .woocommerce-product-rating{margin-bottom:16px;}
.woocommerce div.product .summary .star-rating{color:var(--wsb-gold);}
.woocommerce div.product .summary .woocommerce-review-link{font-size:13.5px; color:var(--wsb-ink-soft); border-bottom:1px solid var(--wsb-border); margin-left:8px;}
.woocommerce div.product .summary .woocommerce-product-details__short-description{font-size:15.5px; color:var(--wsb-ink-soft); max-width:52ch; line-height:1.7; margin-bottom:10px;}

.woocommerce div.product form.cart{margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.woocommerce div.product form.cart .quantity{display:flex; align-items:center; border:1.5px solid var(--wsb-border); border-radius:100px; overflow:hidden;}
.woocommerce div.product form.cart .quantity .qty{
  width:70px; height:50px; text-align:center; border:none; font-family:inherit; font-size:15px; font-weight:600; -moz-appearance:textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.woocommerce div.product form.cart .single_add_to_cart_button{
  padding:16px 34px; border-radius:100px; background:var(--wsb-green); color:#fff; font-weight:600; font-size:15.5px;
  box-shadow:var(--wsb-shadow-sm); transition:background .18s ease, transform .18s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--wsb-green-dark); transform:translateY(-2px);}

.woocommerce div.product .woocommerce-tabs{margin-top:34px; border-top:1px solid var(--wsb-border); padding-top:20px;}
.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex; gap:10px; list-style:none; padding:0; margin:0 0 20px; flex-wrap:wrap;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:10px 18px; border-radius:100px; border:1.5px solid var(--wsb-border); font-size:14px; font-weight:600; color:var(--wsb-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:var(--wsb-green-tint); border-color:var(--wsb-green); color:var(--wsb-green-dark);}
.woocommerce div.product .woocommerce-tabs .panel{font-size:14.5px; color:var(--wsb-ink-soft); line-height:1.75;}
.woocommerce table.shop_attributes{width:100%; border-collapse:collapse; margin-top:12px;}
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td{padding:10px 0; border-bottom:1px dashed var(--wsb-border); font-size:14px; text-align:left;}

.woocommerce div.product .related.products{grid-column:1 / -1; margin-top:60px; border-top:1px solid var(--wsb-border); padding-top:50px;}
.woocommerce div.product .related.products > h2{font-family:'Fraunces', serif; font-size:clamp(26px,3vw,34px); margin-bottom:28px;}

/* ---- Cart page ---- */
.woocommerce table.shop_table{width:100%; border-collapse:collapse; margin-bottom:30px;}
.woocommerce table.shop_table thead{border-bottom:2px solid var(--wsb-border);}
.woocommerce table.shop_table th{text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--wsb-ink-soft); padding:0 12px 14px;}
.woocommerce table.shop_table td{padding:22px 12px; border-bottom:1px solid var(--wsb-border); font-size:14.5px; vertical-align:middle;}
.woocommerce table.shop_table tbody tr{transition:background .15s ease;}
.woocommerce table.shop_table tbody tr:hover{background:var(--wsb-surface);}
.woocommerce table.shop_table td.product-thumbnail img{
  width:72px; height:96px; object-fit:cover; border-radius:var(--wsb-radius-sm); box-shadow:var(--wsb-shadow-sm);
}
.woocommerce table.shop_table td.product-name a{
  font-weight:600; font-size:16px; color:var(--wsb-ink); font-family:var(--wsb-font-heading, 'Fraunces', serif);
}
.woocommerce table.shop_table td.product-name{line-height:1.5;}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal{font-weight:600; font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:16px;}
.woocommerce .quantity .qty{width:64px; height:44px; text-align:center; border:1.5px solid var(--wsb-border); border-radius:100px; font-family:inherit;}
.woocommerce a.remove{color:var(--wsb-ink-soft) !important; font-size:20px !important; border-radius:50%;}
.woocommerce a.remove:hover{background:var(--wsb-gold-tint); color:var(--wsb-ink) !important;}
/* Classic Cart page: the cart table and totals sidebar are separate
   sibling elements with no layout relationship by default — nothing
   was reserving horizontal space for each, so the sidebar could overlap
   the cart table's text instead of sitting cleanly beside it. */
.woocommerce-cart .woocommerce-cart-form{float:left; width:58%; box-sizing:border-box;}
.woocommerce-cart .cart-collaterals{float:right; width:38%; box-sizing:border-box;}
.woocommerce-cart .wsb-woo-content::after{content:""; display:table; clear:both;}

.woocommerce .cart-collaterals .cart_totals{
  background:var(--wsb-surface); border:1px solid var(--wsb-border); border-radius:var(--wsb-radius-md);
  padding:30px 28px; width:100%; max-width:none; margin-left:0; box-sizing:border-box; overflow:hidden;
  position:sticky; top:100px;
}
.woocommerce .cart-collaterals .cart_totals::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--wsb-green);
}
.woocommerce .cart_totals h2{font-size:20px; margin:0 0 20px; text-transform:none; font-family:var(--wsb-font-heading, 'Fraunces', serif);}
.woocommerce .cart_totals table{width:100%;}
.woocommerce .cart_totals table th, .woocommerce .cart_totals table td{padding:12px 0; border-bottom:1px dashed var(--wsb-border); font-size:14.5px;}
.woocommerce .cart_totals table tr:last-child th, .woocommerce .cart_totals table tr:last-child td{border-bottom:none; font-size:17px; font-weight:700; font-family:var(--wsb-font-heading, 'Fraunces', serif); color:var(--wsb-ink);}

/* =========================================================================
   Order Received / Thank You page — previously completely unstyled.
   Covers both the classic order-received template and WooCommerce's
   block-based Order Confirmation, since exact markup depends on which
   one is active.
   ========================================================================= */

/* Success banner + heading */
.woocommerce-order,
.wc-block-order-confirmation-status{
  text-align:center; max-width:560px; margin:0 auto 40px; padding:36px 28px;
  background:var(--wsb-green-tint); border-radius:var(--wsb-radius-lg);
}
.woocommerce-order::before,
.wc-block-order-confirmation-status::before{
  content:"✓"; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  background:var(--wsb-green); color:#fff; font-size:26px; font-weight:700;
}
.woocommerce-order > p:first-of-type,
.woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status p{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:clamp(22px,3vw,28px);
  font-weight:600; color:var(--wsb-ink); margin:0;
}

/* Order overview (number / date / email / total / payment) as a tidy
   stat row, matching the .hero-stats pattern used elsewhere on the site */
.woocommerce-order-overview,
.wc-block-order-confirmation-summary{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:32px;
  max-width:720px; margin:0 auto 44px; padding:0; text-align:center;
}
.woocommerce-order-overview li,
.wc-block-order-confirmation-summary-list-item{
  display:flex; flex-direction:column; gap:4px;
}
.woocommerce-order-overview li strong,
.wc-block-order-confirmation-summary-list-item__value{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:18px; font-weight:600; color:var(--wsb-ink);
}
.wc-block-order-confirmation-summary-list-item__key{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--wsb-ink-soft);
}

/* Order details table already inherits table.shop_table styling above.
   Give it a heading treatment consistent with the rest of the page. */
.woocommerce-order-details__title,
.wc-block-order-confirmation-totals h2,
.wc-block-order-confirmation-downloads h2{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:20px; margin:0 0 16px;
}

/* Billing / shipping address columns */
.woocommerce-customer-details,
.wc-block-order-confirmation-address-wrapper{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:40px;
}
.woocommerce-column, .wc-block-order-confirmation-address{
  background:var(--wsb-surface); border:1px solid var(--wsb-border); border-radius:var(--wsb-radius-md); padding:24px;
}
.woocommerce-column h2, .wc-block-order-confirmation-address h2,
.wc-block-order-confirmation-address .wc-block-components-title{
  font-family:var(--wsb-font-heading, 'Fraunces', serif); font-size:17px; margin:0 0 12px;
}
.woocommerce-column address{font-style:normal; font-size:14.5px; color:var(--wsb-ink-soft); line-height:1.7;}

@media (max-width:760px){
  .woocommerce-order, .wc-block-order-confirmation-status{padding:28px 20px;}
  .woocommerce-order-overview, .wc-block-order-confirmation-summary{gap:20px 28px;}
  .woocommerce-customer-details, .wc-block-order-confirmation-address-wrapper{grid-template-columns:1fr; gap:16px;}
}
@media (max-width:480px){
  .woocommerce-order-overview li, .wc-block-order-confirmation-summary-list-item{flex:1 1 40%;}
}
.woocommerce .wc-proceed-to-checkout .checkout-button{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:22px; padding:15px 20px; border-radius:100px;
  background:var(--wsb-green); color:#fff; font-weight:600; font-size:15px; white-space:nowrap; transition:background .18s ease, transform .18s ease;
}
.woocommerce .wc-proceed-to-checkout .checkout-button::after{content:"→"; font-size:16px;}
.woocommerce .wc-proceed-to-checkout .checkout-button:hover{background:var(--wsb-green-dark); transform:translateY(-1px);}
.woocommerce .wc-proceed-to-checkout::after{
  content:"🔒 Secure checkout"; display:block; text-align:center; margin-top:12px; font-size:12.5px; color:var(--wsb-ink-soft);
}
.woocommerce .coupon{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.woocommerce .coupon input[type="text"]{padding:12px 18px; border-radius:100px; border:1.5px solid var(--wsb-border); font-family:inherit;}
.woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"]{
  padding:12px 22px; border-radius:100px; border:1.5px solid var(--wsb-border); background:transparent; font-weight:600; font-size:14px;
}
.woocommerce button[name="apply_coupon"]:hover, .woocommerce button[name="update_cart"]:hover{border-color:var(--wsb-green); color:var(--wsb-green-dark);}

/* ---- Checkout page ---- */
.woocommerce-checkout #customer_details{margin-bottom:30px;}
.woocommerce form .form-row label{font-size:13.5px; font-weight:600; margin-bottom:6px; display:block;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{
  width:100%; padding:12px 16px; border-radius:var(--wsb-radius-sm); border:1.5px solid var(--wsb-border); font-family:inherit; font-size:14.5px;
}
#order_review{background:var(--wsb-surface); border:1px solid var(--wsb-border); border-radius:var(--wsb-radius-md); padding:26px;}
.woocommerce #payment ul.payment_methods{list-style:none; padding:0; border-top:1px solid var(--wsb-border); padding-top:16px;}
.woocommerce #payment div.payment_box{background:var(--wsb-green-tint); border-radius:var(--wsb-radius-sm); padding:16px; margin-top:10px; font-size:14px;}
#place_order{
  width:100%; padding:16px; border-radius:100px; background:var(--wsb-green); color:#fff; font-weight:600; font-size:16px; margin-top:16px;
}
#place_order:hover{background:var(--wsb-green-dark);}

/* ---- My Account ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:4px;}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block; padding:11px 16px; border-radius:var(--wsb-radius-sm); font-size:14.5px; font-weight:600; color:var(--wsb-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--wsb-green-tint); color:var(--wsb-green-dark);}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--wsb-green-tint);}
.woocommerce-MyAccount-content .button{
  display:inline-flex; padding:12px 24px; border-radius:100px; background:var(--wsb-green); color:#fff; font-weight:600; font-size:14.5px;
}

/* ---- Breadcrumb reuses the theme's own .breadcrumb styles ---- */
.woocommerce-breadcrumb{font-size:13.5px; color:var(--wsb-ink-soft);}
.woocommerce-breadcrumb a{color:var(--wsb-ink-soft);}
.woocommerce-breadcrumb a:hover{color:var(--wsb-green-dark);}

/* ---- Responsive ---- */
@media (max-width:1024px){
  ul.products{grid-template-columns:repeat(2,1fr);}
  .woocommerce div.product{grid-template-columns:1fr; gap:36px;}
  .woocommerce div.product .woocommerce-product-gallery{position:static;}
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{float:none; width:100%; margin-top:24px;}
  .woocommerce .cart-collaterals .cart_totals{position:static;}
}
@media (max-width:760px){
  ul.products{grid-template-columns:repeat(2,1fr); gap:16px;}
  .woocommerce table.shop_table thead{display:none;}
  .woocommerce table.shop_table tr{display:block; border-bottom:1px solid var(--wsb-border); padding:12px 0;}
  .woocommerce table.shop_table td{display:flex; justify-content:space-between; border-bottom:none; padding:6px 0;}
  .woocommerce .cart-collaterals .cart_totals{max-width:100%;}
  .woocommerce div.product form.cart .single_add_to_cart_button{width:100%;}
}
@media (max-width:520px){
  ul.products{grid-template-columns:1fr 1fr;}
}
@media (max-width:400px){
  ul.products{grid-template-columns:1fr;}
}

/* =========================================================================
   WooCommerce Blocks (block-based Cart & Checkout)
   Modern WooCommerce defaults new sites to the block-based Cart/Checkout
   pages (built from the Cart/Checkout blocks), which use completely
   different markup and CSS classes than the classic shortcode templates
   styled above. Without this, block buttons fall back to WooCommerce
   Blocks' own bare defaults — which is why "Proceed to Checkout" could
   render as unstyled dark-on-dark text with no visible button at all.
   ========================================================================= */
.wc-block-cart, .wc-block-checkout{font-family:var(--wsb-font-body, 'Inter', sans-serif); color:var(--wsb-ink);}
.wc-block-cart h1, .wc-block-checkout h1,
.wc-block-cart h2, .wc-block-checkout h2,
.wc-block-components-title{font-family:var(--wsb-font-heading, 'Fraunces', serif); color:var(--wsb-ink);}

/* Two-column layout: form/cart-items on the left, order summary sidebar
   on the right — wider and more generously padded than WC Blocks' own
   cramped default. Covers both known wrapper class names since exact
   markup can vary slightly by WooCommerce version. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{
  display:grid !important;
  gap:48px;
  align-items:start;
  width:100%;
}
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar,
.wc-block-components-sidebar{
  background:var(--wsb-surface);
  border:1px solid var(--wsb-border);
  border-radius:var(--wsb-radius-md);
  padding:32px 28px !important;
  position:sticky;
  top:100px;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-wrapper{padding-left:0 !important; padding-right:0 !important;}

/* Order summary line items — previously completely unstyled, so the
   description column had no explicit width behavior and could collapse
   to a sliver instead of claiming its share of the row's space. */
.wc-block-components-order-summary-item{
  display:flex !important; align-items:flex-start !important; gap:14px; padding:16px 0; border-bottom:1px solid var(--wsb-border);
}
.wc-block-components-order-summary-item:last-child{border-bottom:none;}
.wc-block-components-order-summary-item__image{flex:none !important; width:56px; position:relative;}
.wc-block-components-order-summary-item__image img{width:56px; height:74px; object-fit:cover; border-radius:var(--wsb-radius-sm); display:block;}
.wc-block-components-order-summary-item__quantity{
  position:absolute; top:-8px; right:-8px; background:var(--wsb-ink); color:#fff; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; line-height:1;
}
.wc-block-components-order-summary-item__description{flex:1 1 auto !important; min-width:0 !important;}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price{
  flex:none !important; font-family:var(--wsb-font-heading, 'Fraunces', serif); font-weight:600; font-size:15px;
  white-space:nowrap; margin-left:8px;
}
.wc-block-components-order-summary-item .wc-block-components-product-name{
  font-weight:600; font-size:14.5px; color:var(--wsb-ink); display:block; margin-bottom:2px; white-space:normal;
}
.wc-block-components-order-summary-item__short-description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata{
  font-size:12.5px; color:var(--wsb-ink-soft); line-height:1.5;
}

@media (max-width:900px){
  .wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart{grid-template-columns:1fr; gap:32px;}
  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar,
  .wc-block-components-sidebar{position:static; padding:24px !important;}
}

/* Checkout/shipping form fields — previously completely unstyled, so
   they were falling back to bare browser defaults, inconsistent with
   every other input on the site. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-state-input input{
  width:100% !important;
  border:1.5px solid var(--wsb-border) !important;
  border-radius:var(--wsb-radius-sm) !important;
  padding:13px 16px !important;
  font-family:inherit !important;
  font-size:14.5px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus{border-color:var(--wsb-green) !important; outline:none !important;}
.wc-block-components-text-input label,
.wc-block-components-select label{font-size:13px !important; color:var(--wsb-ink-soft) !important;}
.wc-block-components-checkbox label,
.wc-block-components-radio-control__label{font-size:14.5px; color:var(--wsb-ink);}

/* Checkout step sections (Contact information, Billing address, Payment
   options, etc.) — previously plain default headings with no rhythm. */
.wc-block-components-checkout-step{margin-bottom:8px; padding-bottom:28px; border-bottom:1px solid var(--wsb-border);}
.wc-block-components-checkout-step:last-child{border-bottom:none;}
.wc-block-components-checkout-step__title{
  font-family:var(--wsb-font-heading, 'Fraunces', serif) !important; font-size:19px !important; font-weight:600 !important;
  color:var(--wsb-ink) !important; margin-bottom:6px !important;
}
.wc-block-components-checkout-step__description{font-size:13.5px; color:var(--wsb-ink-soft); margin-bottom:16px;}

/* Custom radio buttons (payment method, shipping option selectors) —
   replacing the bare browser-default circle with a styled one matching
   the brand color. */
.wc-block-components-radio-control__input{
  appearance:none; -webkit-appearance:none; width:19px; height:19px; border:1.5px solid var(--wsb-border);
  border-radius:50%; cursor:pointer; flex:none; transition:border-color .15s ease;
  box-sizing:border-box; position:static !important; display:inline-block; vertical-align:middle;
  margin:0 10px 0 0 !important; float:none !important;
}
.wc-block-components-radio-control__input:checked{border-color:var(--wsb-green); border-width:5px;}
.wc-block-components-radio-control__input:focus{outline:2px solid var(--wsb-green-tint); outline-offset:2px;}
.wc-block-components-radio-control__label{margin-left:0 !important; padding-left:0 !important;}

/* Payment method boxes (e.g. "Cash on delivery") */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
  border:1.5px solid var(--wsb-border) !important; border-radius:var(--wsb-radius-md) !important;
  padding:16px !important; margin-bottom:10px !important; transition:border-color .15s ease, background .15s ease;
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:0 !important;
}
.wc-block-components-radio-control-accordion-option > *,
.wc-block-components-radio-control__option > *{position:static !important;}
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked),
.wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked){
  border-color:var(--wsb-green) !important; background:var(--wsb-green-tint);
}

/* Custom checkboxes (e.g. "Save this information for next time") */
.wc-block-components-checkbox__input{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid var(--wsb-border);
  border-radius:4px; margin:0; cursor:pointer; position:relative; flex:none; box-sizing:border-box;
}
.wc-block-components-checkbox__input:checked{background:var(--wsb-green); border-color:var(--wsb-green);}
.wc-block-components-checkbox__mark{color:#fff;}

/* Checkout's own 2-up field grid (name fields, city/state, etc.) — keep
   side-by-side on desktop/tablet, stack on phones. */
.wc-block-components-address-form .wc-block-components-address-form__address_2,
.wc-block-components-address-form{display:block;}
@media (max-width:600px){
  .wc-block-components-address-form .components-flex,
  .wc-block-checkout .components-flex{flex-wrap:wrap !important;}
}

/* Cart item rows (image, title, price, quantity, subtotal) */
.wc-block-cart-items{width:100%;}
.wc-block-cart-item__image img{border-radius:var(--wsb-radius-sm);}
.wc-block-cart-item__product-name{font-weight:600;}
.wc-block-components-quantity-selector{
  border:1.5px solid var(--wsb-border) !important; border-radius:100px !important; overflow:hidden;
}
.wc-block-components-quantity-selector input{border:none !important; font-family:inherit !important;}

@media (max-width:760px){
  /* WC Blocks lays cart rows out as a grid by default — collapse it to
     a stacked card per item so nothing overflows a narrow screen. */
  .wc-block-cart-items__header{display:none;}
  .wc-block-cart-items tr, .wc-block-cart-items .wc-block-cart-item{
    display:flex !important; flex-wrap:wrap; gap:12px; padding:16px 0;
    border-bottom:1px solid var(--wsb-border);
  }
  .wc-block-cart-item__image{flex:none; width:72px;}
  .wc-block-cart-item__product{flex:1; min-width:0;}
  .wc-block-cart-item__quantity, .wc-block-cart-item__total{width:100%;}
  .wc-block-components-button, a.wc-block-cart__submit-button, button.wc-block-cart__submit-button{width:100%;}
  .wc-block-components-quantity-selector{width:fit-content;}
}

/* The shared Button component WC Blocks uses everywhere: Proceed to
   Checkout, Place Order, Apply coupon, etc. High specificity + !important
   is intentional here — WC Blocks ships its own button defaults that
   otherwise win regardless of source order. */
.wc-block-components-button,
a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button,
.wc-block-cart__submit-container .components-button{
  background:var(--wsb-green) !important;
  color:#fff !important;
  border:none !important;
  border-radius:100px !important;
  font-weight:600 !important;
  font-size:15.5px !important;
  padding:16px 24px !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background .18s ease;
}
.wc-block-components-button:hover,
.wc-block-components-button:focus,
a.wc-block-cart__submit-button:hover,
button.wc-block-cart__submit-button:hover{
  background:var(--wsb-green-dark) !important;
  color:#fff !important;
}
.wc-block-components-button.wc-block-components-button--outlined,
.wc-block-components-button.is-style-outline{
  background:transparent !important;
  color:var(--wsb-green-dark) !important;
  border:1.5px solid var(--wsb-border) !important;
}

/* Totals / order summary panel */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-cart__totals-title{color:var(--wsb-ink);}
.wc-block-cart__totals-title{font-family:var(--wsb-font-heading, 'Fraunces', serif);}
.wc-block-components-panel{border-color:var(--wsb-border) !important;}

/* Product rows */
.wc-block-cart-item__product-name a,
.wc-block-components-product-name{color:var(--wsb-ink); font-weight:600; text-decoration:none;}
.wc-block-cart-item__product-name a:hover,
.wc-block-components-product-name:hover{color:var(--wsb-green-dark);}
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount{font-family:var(--wsb-font-heading, 'Fraunces', serif); color:var(--wsb-ink);}

/* Quantity stepper */
.wc-block-components-quantity-selector{border:1.5px solid var(--wsb-border); border-radius:100px; overflow:hidden;}
.wc-block-components-quantity-selector__button{background:transparent; color:var(--wsb-ink);}

/* Coupon / accordion-style panel header */
.wc-block-components-panel__button{color:var(--wsb-ink); font-weight:600;}

/* Bank/Easypaisa account details — shown on the Bank Transfer payment
   method's description at checkout, and again on the Order Received
   page for orders paid this way. */
.wsb-bank-details{
  background:var(--wsb-green-tint); border:1px solid var(--wsb-border); border-radius:var(--wsb-radius-md);
  padding:18px 20px; margin-top:14px; max-width:420px;
}
.wsb-bank-details h4{font-size:14.5px; margin:0 0 10px; font-family:var(--wsb-font-heading, 'Fraunces', serif);}
.wsb-bank-details table{width:100%; border-collapse:collapse;}
.wsb-bank-details th, .wsb-bank-details td{text-align:left; padding:5px 0; font-size:13.5px; vertical-align:top;}
.wsb-bank-details th{width:120px; font-weight:600; color:var(--wsb-ink-soft); padding-right:10px;}
.wsb-bank-details td{font-weight:600; color:var(--wsb-ink); word-break:break-word;}
.wsb-bank-details-note{font-size:12px; color:var(--wsb-ink-soft); margin:12px 0 0; line-height:1.6;}