/* ============================================================
   MASLAMANI ENERGY — WooCommerce
   Woo ships a lot of markup the prototype never had (cart totals,
   checkout, account, notices). This file dresses that markup in
   the same design system rather than fighting Woo's defaults.
   Loaded only when WooCommerce is active.
   ============================================================ */

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 24px;
  font-size:.9rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;list-style:none;
}
.woocommerce-error{border-left-color:#c0403f;color:#9b2c2c;flex-direction:column;align-items:flex-start;}
.woocommerce-error li{list-style:none;}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:auto;}

/* ---------- Buttons: map Woo's .button onto the design system ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:.95rem;font-family:inherit;
  background-image:var(--grad-navy);background-color:var(--navy);color:#fff;border:2px solid transparent;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  line-height:1.2;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover{background-image:var(--grad-navy-hover);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{background-image:var(--grad-brand-ui);background-color:#1d7a4d;color:#fff;}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background-image:var(--grad-brand-ui-hover);}
.woocommerce .button:disabled,
.woocommerce .button.disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- Quantity input ---------- */
.woocommerce .quantity{display:inline-flex;align-items:center;}
.woocommerce .quantity .qty{
  width:76px;padding:11px 8px;text-align:center;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-weight:700;color:var(--navy);
}

/* ---------- Price display ---------- */
.woocommerce .price,
.woocommerce span.amount{color:var(--navy);font-weight:700;}
.woocommerce .price del{color:var(--ink-soft);font-weight:500;opacity:.65;margin-inline-end:6px;}
.woocommerce .price ins{text-decoration:none;color:var(--green-dark);}

/* ---------- Shop / archive header ---------- */
.woocommerce-result-count{font-size:.84rem;color:var(--ink-soft);margin:0;}
.woocommerce-ordering select{
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--navy);background:#fff;
}
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line);
}

/* ---------- Cart table ---------- */
.woocommerce table.shop_table{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin-bottom:28px;
}
.woocommerce table.shop_table th{
  background:var(--bg);color:var(--navy);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;padding:16px 18px;text-align:start;
}
.woocommerce table.shop_table td{
  padding:18px;border-top:1px solid var(--line-soft);font-size:.92rem;vertical-align:middle;
}
.woocommerce table.shop_table .product-thumbnail img{
  width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--bg);
}
.woocommerce table.shop_table .product-name a{font-weight:700;color:var(--navy);}
.woocommerce table.shop_table .product-name a:hover{color:var(--blue);}
.woocommerce a.remove{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--bg);color:#c0403f;font-size:1.1rem;font-weight:700;line-height:1;text-decoration:none;
}
.woocommerce a.remove:hover{background:#fdecec;color:#9b2c2c;}
.woocommerce .actions .coupon{display:flex;gap:10px;flex-wrap:wrap;}
.woocommerce .actions .coupon .input-text{max-width:220px;}

/* ---------- Cart layout ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start;padding:36px 0 70px;}
.cart-collaterals,
.woocommerce .cart_totals{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;
  position:sticky;top:calc(var(--header-h) + 20px);
}
.woocommerce .cart_totals h2{font-size:1.1rem;margin-bottom:16px;}
.woocommerce .cart_totals table.shop_table{border:none;border-radius:0;margin:0;}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  background:none;padding:12px 0;text-transform:none;letter-spacing:0;font-size:.9rem;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td{
  border-top:2px solid var(--line);font-size:1.05rem;color:var(--navy);padding-top:16px;
}
.woocommerce .wc-proceed-to-checkout{padding-top:18px;}
.woocommerce .wc-proceed-to-checkout .button{width:100%;background-image:var(--grad-brand-ui);background-color:#1d7a4d;}
.woocommerce .wc-proceed-to-checkout .button:hover{background:var(--green-dark);}
@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr;}
  .woocommerce .cart_totals{position:static;}
}

/* ---------- Empty cart ---------- */
.cart-empty-state{text-align:center;padding:80px 20px;}
.cart-empty-state svg{width:54px;height:54px;color:var(--line);margin:0 auto 18px;}
.cart-empty-state h1{font-size:1.6rem;}
.cart-empty-state p{color:var(--ink-soft);max-width:420px;margin:0 auto 26px;}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start;padding:30px 0 70px;}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;margin-bottom:24px;
}
.woocommerce .col2-set{display:grid;grid-template-columns:1fr;gap:0;}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2{width:100%;float:none;}
/* Core's float-era clearfix (content:" " on ::before/::after) turns into
   two extra, invisible grid items once col2-set is display:grid, which
   knocks Login/Register into a lopsided 2x2 instead of one row. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after{content:none;}

/* My Account: Login and Register side by side once there's room for two
   cards - checkout's col2-set (billing/shipping) stays single-column, so
   this is scoped to the #customer_login id rather than .col2-set itself. */
@media (min-width:760px){
  .woocommerce #customer_login.col2-set{grid-template-columns:1fr 1fr;gap:30px;}
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading{font-size:1.15rem;margin-bottom:18px;}
.woocommerce form .form-row{display:grid;gap:6px;margin:0 0 16px;padding:0;}
.woocommerce form .form-row label{font-weight:700;font-size:.86rem;color:var(--navy);}
.woocommerce form .form-row .required{color:#c0403f;text-decoration:none;}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:100%;float:none;}
@media (min-width:640px){
  .woocommerce form .checkout .form-row-first,
  .woocommerce form .checkout .form-row-last{width:calc(50% - 8px);display:inline-grid;vertical-align:top;}
  .woocommerce form .checkout .form-row-first{margin-inline-end:16px;}
}
.woocommerce .select2-container--default .select2-selection--single{
  height:auto;padding:8px 6px;border:1px solid var(--line);border-radius:12px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.6;color:var(--ink);padding-inline-start:10px;
}
#order_review{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;
  position:sticky;top:calc(var(--header-h) + 20px);
}
#order_review table.shop_table{border:none;margin:0;}
.woocommerce-checkout #payment{background:none;border-radius:0;}
.woocommerce-checkout #payment ul.payment_methods{
  border:none;padding:0;margin:0 0 18px;list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px;list-style:none;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--bg);border-radius:var(--radius-sm);font-size:.85rem;color:var(--ink-soft);
  padding:14px 16px;margin-top:10px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:0;}
.woocommerce #payment #place_order{width:100%;background-image:var(--grad-brand-ui);background-color:#1d7a4d;font-size:1rem;padding:16px 24px;}
.woocommerce #payment #place_order:hover{background:var(--green-dark);}
.woocommerce-terms-and-conditions-wrapper{font-size:.84rem;color:var(--ink-soft);margin-bottom:16px;}
@media (max-width:960px){
  .checkout-layout{grid-template-columns:1fr;}
  #order_review{position:static;}
}

/* ---------- Thank you / order received ---------- */
.woocommerce .woocommerce-order{padding:40px 0 70px;}
.order-confirm-head{text-align:center;margin-bottom:40px;}
.order-confirm-head .tick{
  width:64px;height:64px;border-radius:50%;background:#e7f4ec;display:grid;place-items:center;margin:0 auto 20px;
}
.order-confirm-head .tick svg{width:30px;height:30px;color:var(--green);}
.woocommerce ul.order_details{
  display:flex;flex-wrap:wrap;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);padding:0;margin:0 0 34px;list-style:none;overflow:hidden;
}
.woocommerce ul.order_details li{
  flex:1 1 160px;padding:20px 22px;border-left:1px solid var(--line);list-style:none;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700;
}
.woocommerce ul.order_details li:first-child{border-left:none;}
.woocommerce ul.order_details li strong{
  display:block;margin-top:6px;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--navy);
}

/* ---------- My account ---------- */
.account-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;padding:36px 0 70px;}
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;
}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-MyAccount-navigation li{margin:0;list-style:none;}
.woocommerce-MyAccount-navigation li::marker{content:none;}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 14px;border-radius:10px;font-weight:700;font-size:.9rem;color:var(--ink-soft);
}
.woocommerce-MyAccount-navigation li a:hover{background:var(--bg);color:var(--navy);}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--navy);color:#fff;}
.woocommerce-MyAccount-content{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:30px;
}
.woocommerce-MyAccount-content p{color:var(--ink-soft);}
@media (max-width:820px){.account-layout{grid-template-columns:1fr;}}

/* ---------- Single product gallery (Woo replaces the prototype markup) ---------- */
.woocommerce-product-gallery{position:relative;}
.woocommerce-product-gallery__wrapper{margin:0;}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;
}
.woocommerce-product-gallery .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:12px 0 0;padding:0;
}
.woocommerce-product-gallery .flex-control-thumbs li{list-style:none;margin:0;}
.woocommerce-product-gallery .flex-control-thumbs img{
  border-radius:10px;border:2px solid transparent;cursor:pointer;aspect-ratio:1/1;object-fit:cover;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--blue);}
.woocommerce-product-gallery__trigger{
  position:absolute;top:14px;inset-inline-end:14px;z-index:5;width:38px;height:38px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;text-indent:0;font-size:1rem;
}

/* ---------- Variations ---------- */
.woocommerce div.product form.cart .variations{width:100%;margin-bottom:18px;}
.woocommerce div.product form.cart .variations td{padding:0 0 12px;display:block;}
.woocommerce div.product form.cart .variations label{font-weight:700;font-size:.86rem;color:var(--navy);margin-bottom:6px;display:block;}
.woocommerce div.product form.cart .reset_variations{font-size:.8rem;color:var(--ink-soft);}
.woocommerce div.product .stock{font-size:.84rem;font-weight:700;color:var(--green-dark);margin:0;}
.woocommerce div.product .stock.out-of-stock{color:#c0403f;}

/* ---------- Star ratings ---------- */
.woocommerce .star-rating{color:var(--green);font-size:.9em;}
.woocommerce .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.woocommerce .woocommerce-review-link{font-size:.82rem;color:var(--ink-soft);}

/* ---------- Reviews ---------- */
.woocommerce #reviews #comments ol.commentlist{list-style:none;padding:0;margin:0;}
.woocommerce #reviews #comments ol.commentlist li{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 24px;margin-bottom:16px;list-style:none;
}
.woocommerce #reviews .comment-text{margin:0;}
.woocommerce #reviews .meta{font-size:.82rem;color:var(--ink-soft);margin-bottom:8px;}

/* ---------- Widgets (shop sidebar filters) ---------- */
.filter-rail .widget{margin-bottom:22px;}
.filter-rail .widget-title,
.filter-rail .widgettitle{font-weight:700;font-size:.85rem;margin-bottom:10px;color:var(--ink);}
.filter-rail .widget ul{list-style:none;padding:0;margin:0;}
.filter-rail .widget li{font-size:.86rem;color:var(--ink-soft);margin-bottom:9px;}
.filter-rail .widget li a:hover{color:var(--blue);}

/* ---------- Loader for AJAX add-to-cart ---------- */
.woocommerce .p-card .button.loading{opacity:.6;pointer-events:none;}
.woocommerce .p-card .added_to_cart{
  display:block;text-align:center;font-size:.78rem;font-weight:700;color:var(--green-dark);
  margin-top:8px;text-decoration:underline;
}