/* The Sharp Leader: light WooCommerce restyle (checkout, cart, My account, notices).
   Loaded only when WooCommerce is active (see functions.php).
   Brand: teal #2bd9c9 (text/buttons use darker #0b7a6f), amber #f2a63d, ink #0a0d12. */

/* ---------- Layout ---------- */
.woocommerce,
.woocommerce-page .woocommerce{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#3b404c;
}
.woocommerce h2,
.woocommerce h3,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
#order_review_heading{
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:#0a0d12;
  letter-spacing:-.01em;
}
.woocommerce-checkout #customer_details{margin-bottom:1.5em}
.woocommerce form.checkout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:start;
}
.woocommerce form.checkout #customer_details{grid-column:1}
.woocommerce form.checkout #order_review_heading{grid-column:2;margin:0}
.woocommerce form.checkout #order_review{grid-column:2}
.woocommerce form.checkout .woocommerce-NoticeGroup,
.woocommerce form.checkout .woocommerce-form-coupon-toggle{grid-column:1 / -1}
.woocommerce-checkout .col2-set{width:100%;float:none}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}

/* ---------- Order summary card ---------- */
.woocommerce-checkout #order_review{
  background:#fff;
  border:1px solid rgba(10,13,18,.10);
  border-radius:18px;
  padding:24px;
  box-shadow:0 20px 50px -20px rgba(10,13,18,.14);
  position:relative;
  overflow:hidden;
}
.woocommerce-checkout #order_review::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(100deg,#2bd9c9,#f2a63d);
}
.woocommerce table.shop_table{
  border:none;
  border-collapse:collapse;
  width:100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border:none;
  border-bottom:1px solid rgba(10,13,18,.10);
  padding:12px 4px;
  text-align:left;
}
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:#0a0d12;
  border-bottom:none;
}

/* ---------- Form fields ---------- */
.woocommerce form .form-row label{
  font-weight:600;
  color:#0a0d12;
  margin-bottom:.3em;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single{
  font:inherit;
  padding:.75em .9em;
  border:1px solid rgba(10,13,18,.18);
  border-radius:8px;
  background:#fff;
  color:#0a0d12;
  min-height:46px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:3px solid rgba(43,217,201,.45);
  border-color:#0b7a6f;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:#b3261e}

/* ---------- Buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#place_order{
  background:linear-gradient(100deg,#2bd9c9,#f2a63d);
  color:#0a0d12;
  border:none;
  border-radius:999px;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:.9em 1.6em;
  box-shadow:0 10px 24px -12px rgba(14,143,130,.6);
  transition:transform .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
#place_order:hover{
  background:linear-gradient(100deg,#2bd9c9,#f2a63d);
  color:#0a0d12;
  transform:translateY(-1px);
}
#place_order{width:100%;padding:1.05em 1.6em;font-size:1.05rem}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled{opacity:.55;cursor:not-allowed}

/* ---------- Payment box (Stripe card element sits inside this) ---------- */
.woocommerce-checkout #payment{
  background:transparent;
  border-radius:12px;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid rgba(10,13,18,.10);
  padding:0 0 1em;
}
.woocommerce-checkout #payment div.payment_box{
  background:#f5f7fa;
  color:#3b404c;
  border-radius:8px;
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#f5f7fa}
.woocommerce-checkout #payment div.form-row{padding:1em 0 0}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:rgba(43,217,201,.08);
  border:1px solid rgba(43,217,201,.4);
  border-left:5px solid #2bd9c9;
  border-top-color:rgba(43,217,201,.4);
  border-radius:12px;
  color:#3b404c;
  padding:1em 1.2em 1em 3.2em;
}
.woocommerce-message::before,
.woocommerce-info::before{color:#0b7a6f}
.woocommerce-error{
  background:#fff1f0;
  border-color:rgba(179,38,30,.35);
  border-left-color:#b3261e;
}
.woocommerce-error::before{color:#b3261e}
.woocommerce-message a.button,
.woocommerce-info a.button{box-shadow:none}

/* ---------- My account ---------- */
.woocommerce-account .woocommerce{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:36px;
  align-items:start;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin:0 0 4px}
.woocommerce-MyAccount-navigation a{
  display:block;
  padding:.65em .9em;
  border-radius:8px;
  color:#3b404c;
  font-weight:500;
  text-decoration:none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover{
  background:rgba(43,217,201,.14);
  color:#0b7a6f;
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2{float:none;width:100%}
.woocommerce-account .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce form.login,
.woocommerce form.register{
  background:#fff;
  border:1px solid rgba(10,13,18,.10);
  border-radius:18px;
  padding:24px;
}
/* The logged-out My account page shows login and register side by side; a plain login is enough here */
.woocommerce a{color:#0b7a6f}
.woocommerce a.button,
.woocommerce a.button:hover{color:#0a0d12}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .woocommerce form.checkout{grid-template-columns:1fr}
  .woocommerce form.checkout #customer_details,
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review{grid-column:1}
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
  .woocommerce-account .u-columns{grid-template-columns:1fr}
}

/* ---------- Block checkout: Place Order and other block buttons use the brand ink ---------- */
.wc-block-components-button:not(.is-link):not(:disabled),
.wc-block-components-checkout-place-order-button{
  background:#0b7a6f;
  color:#fff;
  border-radius:999px;
  font-weight:600;
}
.wc-block-components-button:not(.is-link):not(:disabled):hover{background:#09655c;color:#fff}
.wc-block-components-button:not(.is-link):focus-visible{outline:3px solid #0b7a6f;outline-offset:2px}
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked{border-color:#0b7a6f}