/* WooCommerce chrome.
 *
 * The homepage never renders Woo's own markup: the cards, drawer, quick view and
 * search are all theme templates. This file is for the pages Woo does render,
 * namely the cart and checkout shortcodes, My Account, the single product
 * fallbacks and the notices. It reuses the design tokens from deshaj.css and the
 * .field, .btn and .qty classes rather than inventing a parallel system, so the
 * store pages read as the same brand.
 *
 * Loaded after deshaj.css and before overrides.css. */

/* ---------- Notices ---------- */

.woocommerce-notices-wrapper{margin-bottom:0}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  position:relative;
  margin:0 0 18px;
  padding:16px 20px 16px 52px;
  list-style:none;
  background:var(--paper);
  color:var(--earth);
  border:1px solid var(--sand);
  border-left:4px solid var(--gold-deep);
  border-radius:14px;
  font-size:16px;
  line-height:1.5;
}
.woocommerce-error{border-left-color:var(--kumkum); background:#F7EAE6}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  position:absolute;
  left:18px;
  top:16px;
  font-family:var(--f-display);
  font-weight:700;
  color:var(--gold-deep);
}
.woocommerce-error::before{color:var(--kumkum)}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a{color:var(--gold-text); font-weight:600}

/* The default Woo notice competes with the branded drawer after an add to cart.
 * inc/woocommerce.php filters the HTML off; this hides it if a plugin re-adds it. */
body.deshaj-drawer-open .woocommerce-notices-wrapper:empty{display:none}

/* ---------- Shop and product pages ---------- */

.woocommerce .wrap{padding-top:48px; padding-bottom:72px}
.woocommerce-products-header{margin-bottom:34px}
.woocommerce-products-header__title{font-size:clamp(30px,3.4vw,46px); line-height:1.12}
.woocommerce-result-count{float:none; margin:0 0 18px; color:var(--muted); font-size:15px}
.woocommerce-ordering select{
  font:inherit; font-size:15px; color:var(--earth);
  background:#fff; border:1px solid var(--sand); border-radius:999px;
  padding:9px 18px; min-height:44px;
}

/* WooCommerce prints the notices, the result count and the sort dropdown as three
 * siblings. Laid out as a wrapping row they read as one toolbar under the heading,
 * and a notice takes the full line when there is one. */
.loop-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:26px}
.loop-head .woocommerce-notices-wrapper{flex:1 1 100%; margin:0}
.loop-head .woocommerce-result-count{margin:0; flex:1 1 auto}
.loop-head .woocommerce-ordering{margin:0}

/* The archive grid is the homepage grid: same columns, same gap, same two fold
 * points as .grid4, so a product card is the same object on both pages. */
.woocommerce .products{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none}
@media (max-width:1040px){ .woocommerce .products{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .woocommerce .products{grid-template-columns:minmax(0,1fr)} }
.woocommerce ul.products li.product{margin:0; padding:0; width:auto; float:none; list-style:none}
.woocommerce ul.products li.product > .prod{height:100%}
.woocommerce ul.products li.product a{text-decoration:none; color:inherit}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-display); font-weight:600; font-size:20px;
  letter-spacing:.02em; padding:14px 0 0;
}
.woocommerce ul.products li.product .price{
  color:var(--gold-text); font-weight:700; font-size:17px;
  font-variant-numeric:tabular-nums; padding-bottom:6px;
}
.woocommerce ul.products li.product .price del{color:var(--cream-dim); font-weight:400; opacity:1}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .onsale{
  position:absolute; z-index:2; top:14px; left:14px; margin:0;
  min-width:0; padding:6px 12px; border-radius:999px; line-height:1;
  background:var(--gold); color:var(--night);
  font-family:var(--f-hindi); font-size:15px; font-weight:400;
}

/* The archive pagination is wp_paginate() markup: a ul of numbered cells with the
 * current one printed as a span rather than a link, so both need the pill look. */
.woocommerce nav.woocommerce-pagination{margin-top:36px}
.woocommerce nav.woocommerce-pagination ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:0; padding:0; list-style:none; border:0;
}
.woocommerce nav.woocommerce-pagination ul li{border:0; padding:0; overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--earth); font-size:14px; font-weight:600; text-decoration:none;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--earth)}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--gold); border-color:var(--gold); color:var(--night);
}

/* Single product. The gallery, the tabs and the add-to-cart form are WooCommerce's
 * own markup; the theme only supplies the name band above them and the size pills
 * inside the form. */
.woocommerce div.product{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:34px}
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .cross-sells{grid-column:1/-1}
@media (min-width:880px){
  .woocommerce div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:48px; align-items:start}
}
.woocommerce div.product .product_title{font-size:clamp(30px,3.6vw,44px); line-height:1.1; margin:0}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted); font-size:17px}
.woocommerce div.product .product_meta{margin-top:22px; padding-top:16px; border-top:1px solid var(--sand); font-size:14px; color:var(--muted)}
.woocommerce div.product .product_meta a{color:var(--gold-text)}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin:0; padding:0; list-style:none; display:flex; gap:8px; border-bottom:1px solid var(--sand)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent; border:0; border-radius:0; margin:0; padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block; padding:12px 18px; color:var(--muted); text-decoration:none;
  font-size:13.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--earth); border-bottom-color:var(--gold)}
.woocommerce div.product .woocommerce-tabs .panel{margin:0; padding:26px 0; color:var(--muted)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:24px; color:var(--earth)}
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger{display:none}
.woocommerce-product-gallery figure{margin:0}
.woocommerce-product-gallery img{width:100%; height:auto; border-radius:var(--r-lg)}

/* ---------- Variation pills ---------- */

/* The row the theme prints at the top of WooCommerce's variation form: the price,
 * then one labelled group of size pills per attribute. */
.var-pills{display:flex; flex-direction:column; gap:14px; margin:0 0 20px}
.var-pills .qv-label{text-transform:uppercase}
.var-pills .sizes{padding-inline:0}
.var-price del{color:var(--cream-dim); font-weight:400; opacity:1}
.var-price ins{text-decoration:none}
.size:disabled{opacity:.4; cursor:not-allowed; background:transparent; color:var(--muted)}

/* Once the pills drive the form, the attribute table is only the state the plugin
 * keeps its answer in. It leaves the layout without leaving the page, and comes back
 * the moment anything inside it takes focus, so a keyboard user who reaches it is not
 * typing into a box they cannot see. */
.variations_form.deshaj-pills .variations{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.variations_form.deshaj-pills .variations:focus-within{
  position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal;
}
/* The number under the pills is the price of the size the shopper pressed, so
 * WooCommerce's own copy of it would be the same figure twice. */
.variations_form.deshaj-priced .woocommerce-variation-price{display:none}

/* ---------- Cart, checkout and account forms ---------- */

/* Woo ships its own field markup; map it onto the .field contract from the
 * enquiry form so inputs, focus rings and labels match the rest of the site. */
.woocommerce form .form-row{display:flex; flex-direction:column; gap:6px; margin:0 0 16px; padding:0}
.woocommerce form .form-row label,
.woocommerce form .form-row .woocommerce-input-wrapper label{
  font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--muted); text-transform:none;
}
.woocommerce form .form-row label.required{color:var(--kumkum); margin:0; font-weight:700}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input.text,
.woocommerce form .form-row input.email,
.woocommerce form .form-row input.telephone,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce-checkout #payment select,
.woocommerce .chosen-drop{
  font:inherit; font-size:16px; color:var(--earth);
  background:#fff; border:1px solid var(--sand); border-radius:12px;
  padding:12px 14px; min-height:48px; width:100%;
  transition:border-color .3s, box-shadow .3s;
}
.woocommerce form .form-row textarea{resize:vertical}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(224,173,82,.25);
}
.woocommerce form .form-row.woocommerce-invalid label{color:var(--kumkum)}
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--kumkum)}
.woocommerce form .form-row.woocommerce-validated input{border-color:var(--gold-deep)}
.woocommerce .woocommerce-checkout .col2-set,
.woocommerce .woocommerce-checkout .col2-set .col-1,
.woocommerce .woocommerce-checkout .col2-set .col-2{width:100%; float:none}
.woocommerce .woocommerce-checkout .col2-set .col-1{margin-bottom:10px}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{width:auto}
@media (min-width:720px){
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{display:inline-block; width:calc(50% - 7px)}
  .woocommerce-checkout .form-row-first{margin-right:14px}
}

.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; margin:0 0 24px;
  border:1px solid var(--sand); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ivory);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--sand); font-size:16px}
.woocommerce table.shop_table thead th{
  font-family:var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--paper);
}
.woocommerce table.shop_table tbody tr:last-child th,
.woocommerce table.shop_table tbody tr:last-child td{border-bottom:0}
.woocommerce table.shop_table td.product-name a{text-decoration:none; color:var(--earth); font-weight:600}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table .order-total td{font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold-text)}
.woocommerce table.shop_table img{width:64px; height:auto; border-radius:10px}
.woocommerce table.shop_table td.actions{padding:18px}
.woocommerce .cart-collaterals .cart_totals{width:100%; float:none}
.woocommerce .cart_totals h2{font-size:22px}
.woocommerce .cart_totals table.shop_table{margin-bottom:18px}
.woocommerce .cart_totals table.shop_table td{text-align:right}

/* Woo's quantity stepper keeps its own markup; the .qty look comes from
 * deshaj.css and only needs the input width tamed here. */
.woocommerce .quantity .qty{
  width:56px; min-height:40px; text-align:center;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--earth);
}
.woocommerce .quantity .qty:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(224,173,82,.25)}

/* ---------- Buttons ---------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce input.button.alt,
.woocommerce button.button.alt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; border-radius:999px; border:1px solid transparent;
  background:var(--earth); color:var(--ivory);
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.14em;
  text-decoration:none; text-transform:uppercase; cursor:pointer; white-space:normal;
  transition:transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover{
  background:var(--night); color:var(--ivory); transform:translateY(-2px);
  box-shadow:0 12px 28px -12px rgba(36,22,16,.55);
}
.woocommerce a.button.loading,
.woocommerce button.button.loading{opacity:1}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after{display:none}
.woocommerce #place_order{width:100%; background:var(--gold); color:var(--night); font-size:15px}
.woocommerce #place_order:hover{background:#E0B55F; color:var(--night)}
.woocommerce a.button.alt,
.woocommerce button.button.alt{background:var(--gold); color:var(--night)}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:#E0B55F; color:var(--night)}
.woocommerce .actions a.checkout-button{width:100%}
.woocommerce .coupon{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.woocommerce .coupon .form-row{margin:0}
.woocommerce .coupon input.input-text{min-width:min(260px, 100%)}
.woocommerce a.showcoupon,
.woocommerce .checkout_coupon{margin-bottom:18px}
.woocommerce .return-to-shop a,
.woocommerce .btn--dark{width:auto}

/* ---------- Payment ---------- */

.woocommerce-checkout #payment{
  background:var(--paper); border:1px solid var(--sand);
  border-radius:var(--r-lg); padding:22px;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--sand); padding:0 0 16px; margin:0 0 16px;
  list-style:none; display:flex; flex-direction:column; gap:10px;
}
.woocommerce-checkout #payment ul.payment_methods li{margin:0}
.woocommerce-checkout #payment div.payment_box{
  background:var(--ivory); border:1px solid var(--sand); border-radius:12px;
  padding:14px 16px; margin:10px 0 0; color:var(--muted); font-size:15px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.payment_box p{margin:0 0 8px}
.woocommerce-checkout #payment .requirements{margin:0 0 14px; color:var(--muted)}
.woocommerce-terms-and-conditions-wrapper{font-size:15px; color:var(--muted)}
.woocommerce-checkout .woocommerce-terms-and-conditions{
  background:var(--ivory); border:1px solid var(--sand); border-radius:12px; padding:14px 16px;
}
.woocommerce-checkout #payment .place-order{margin:0}

/* ---------- Order confirmation ---------- */

.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-downloads{margin-top:34px}
.woocommerce-order-details h2,
.woocommerce-customer-details h2{font-size:24px; margin-bottom:14px}
.woocommerce-order-overview{list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 20px; padding:0}
.woocommerce-order-overview li{font-size:15px; color:var(--muted)}
.woocommerce-order-overview strong{display:block; color:var(--earth); font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.woocommerce table.my_account_orders td,
.woocommerce table.woocommerce-orders-table td{font-variant-numeric:tabular-nums}

/* ---------- My Account ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:6px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  color:var(--earth); text-decoration:none; font-size:13.5px; font-weight:600; letter-spacing:.08em;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--earth); border-color:var(--earth); color:var(--ivory);
}
.woocommerce-account .woocommerce{display:block}
.woocommerce-account .addresses .title h3{font-size:20px}
.woocommerce-account ul.addresses{list-style:none; margin:0; padding:0; display:grid; gap:16px}
@media (min-width:720px){ .woocommerce-account ul.addresses{grid-template-columns:repeat(2, minmax(0,1fr))} }
.woocommerce-account address{
  background:var(--ivory); border:1px solid var(--sand); border-radius:var(--r-lg);
  padding:18px; font-style:normal; line-height:1.6;
}
.woocommerce-password-strength{border-radius:10px; padding:8px 12px; font-size:14px; text-align:left}

/* ---------- Breadcrumb ---------- */

.woocommerce-breadcrumb{
  margin:0 0 20px; padding:0; font-size:14px; color:var(--muted);
  background:transparent; border:0; line-height:1.8;
}
.woocommerce-breadcrumb a{color:var(--gold-text); text-decoration:none}
.woocommerce-breadcrumb a:hover{text-decoration:underline}

/* ---------- Variation / extra bits Woo injects ---------- */

.woocommerce-variation-price{margin:0}
.woocommerce-variation-add-to-cart{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.woocommerce-variation-description{color:var(--muted); margin-bottom:12px}
.woocommerce div.product form.cart{margin:0; padding:0}
.woocommerce div.product form.cart .button{vertical-align:middle}
.select2-container--default .select2-selection--single{
  height:48px; border:1px solid var(--sand); border-radius:12px; background:#fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:48px; padding-left:14px; color:var(--earth); font-size:16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px}
.select2-dropdown{border:1px solid var(--sand); border-radius:12px; background:#fff}
.woocommerce-store-notice{
  position:static; padding:14px 20px; background:var(--night); color:var(--cream);
  font-size:15px; text-align:center;
}
.woocommerce-store-notice a{color:var(--gold)}
.woocommerce div.product .woocommerce-product-rating{font-size:15px}
.woocommerce .star-rating{color:var(--gold-deep); font-size:15px}
.woocommerce .woocommerce-product-rating .woocommerce-review-link{color:var(--muted); text-decoration:none}
.woocommerce p.stars a{color:var(--gold-deep)}
.woocommerce #reviews h2{font-size:24px}
.woocommerce #reviews .commentlist{list-style:none; margin:0; padding:0}
.woocommerce #reviews .comment-text{background:var(--paper); border:1px solid var(--sand); border-radius:14px; padding:16px}