/* ==========================================================================
   WooCommerce screens the theme does not fully template:
   cart, checkout, my account, notices, forms.

   WooCommerce's own stylesheets are not loaded (see inc/woocommerce.php), so
   everything here is drawn with the theme's tokens. Selectors are WooCommerce's
   own class names, which its templates always output.
   ========================================================================== */

/* --- notices --------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: .875rem 1rem;
  border: 1px solid hsl(var(--border));
  border-left-width: 4px;
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: .875rem;
  list-style: none;
}
.woocommerce-message { border-left-color: hsl(var(--success)) }
.woocommerce-info    { border-left-color: hsl(var(--primary)) }
.woocommerce-error   { border-left-color: hsl(var(--destructive)) }
.woocommerce-error li { margin: 0 }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto }

/* --- buttons (Woo emits .button / .wp-element-button) --------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .wp-element-button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 42px;
  padding: 0 1rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .wp-element-button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page .wp-element-button:hover { background-color: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)) }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)) }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background-color: hsl(var(--success) / .9) }
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] { opacity: .5; pointer-events: none }

/* --- form fields ------------------------------------------------------------- */
.woocommerce form .form-row { margin: 0 0 1rem; padding: 0 }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.woocommerce form .form-row .required { color: hsl(var(--destructive)); text-decoration: none }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce input.input-text,
.woocommerce .select2-container--default .select2-selection--single {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 .75rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: .875rem;
  line-height: 40px;
}
.woocommerce form .form-row textarea { height: auto; min-height: 96px; padding: .625rem .75rem; line-height: 1.5 }
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 0; color: hsl(var(--foreground)) }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: hsl(var(--destructive)) }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100% }
@media (min-width: 640px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: calc(50% - .5rem) }
  .woocommerce form .form-row-first { float: left }
  .woocommerce form .form-row-last  { float: right }
  .woocommerce form .form-row-wide  { clear: both }
}

/* --- quantity stepper ------------------------------------------------------- */
.woocommerce .quantity { display: inline-flex; align-items: center }
.woocommerce .quantity .qty {
  width: 4.5rem;
  height: 42px;
  text-align: center;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--background));
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- cart -------------------------------------------------------------------- */
.woocommerce-cart .woocommerce { display: grid; gap: 1.5rem }
@media (min-width: 768px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 2fr 1fr; align-items: start }
  .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1 }
}
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  overflow: hidden;
  background-color: hsl(var(--card));
  font-size: .875rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: .875rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid hsl(var(--border));
}
.woocommerce table.shop_table thead th {
  border-top: 0;
  background-color: hsl(var(--muted) / .4);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
}
.woocommerce table.shop_table td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid hsl(var(--border));
  border-radius: .375rem;
  background-color: #fff;
}
.woocommerce table.shop_table td.product-name a { font-weight: 600; color: hsl(var(--foreground)); text-decoration: none }
.woocommerce table.shop_table td.product-name a:hover { color: hsl(var(--primary)) }
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
  color: hsl(var(--muted-foreground));
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover { background-color: hsl(var(--destructive) / .1); color: hsl(var(--destructive)) }
.woocommerce table.shop_table td.actions { padding: 1rem }
.woocommerce table.shop_table td.actions .coupon { display: flex; gap: .5rem; flex-wrap: wrap }
.woocommerce table.shop_table td.actions .coupon .input-text { width: auto; min-width: 10rem }
.woocommerce table.shop_table td.actions > .button { float: right }
.woocommerce .cart-collaterals .cart_totals {
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  background-color: hsl(var(--card));
  padding: 1rem;
}
.woocommerce .cart_totals h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700 }
.woocommerce .cart_totals table.shop_table { border: 0; background: transparent }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td { padding: .625rem 0 }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-weight: 700; font-size: 1rem; border-top: 1px solid hsl(var(--border)) }
.woocommerce .wc-proceed-to-checkout { margin-top: 1rem }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; height: 48px; font-weight: 600 }
.woocommerce .cart-empty { text-align: center; padding: 3rem 1rem; color: hsl(var(--muted-foreground)) }
.woocommerce .return-to-shop { text-align: center }

/* --- checkout ----------------------------------------------------------------- */
.woocommerce-checkout .col2-set { display: grid; gap: 2rem }
@media (min-width: 768px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none }
.woocommerce-checkout h3 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700 }
.woocommerce-checkout #order_review_heading { margin-top: 2rem }
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  background-color: hsl(var(--card));
}
.woocommerce-checkout #order_review { padding: 1rem }
.woocommerce-checkout #order_review table.shop_table { border: 0; background: transparent }
.woocommerce-checkout #payment { margin-top: 1rem; padding: 1rem }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0 }
.woocommerce-checkout #payment ul.payment_methods li { padding: .75rem 0; border-bottom: 1px solid hsl(var(--border)) }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0 }
.woocommerce-checkout #payment .payment_box {
  margin-top: .75rem;
  padding: .875rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--muted) / .4);
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
}
.woocommerce-checkout #payment #place_order { width: 100%; height: 48px; font-weight: 600; margin-top: 1rem }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 1rem; font-size: .8125rem; color: hsl(var(--muted-foreground)) }

/* --- my account -------------------------------------------------------------- */
.woocommerce-account .woocommerce { display: grid; gap: 2rem }
@media (min-width: 768px) { .woocommerce-account .woocommerce { grid-template-columns: 240px 1fr; align-items: start } }
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1 }
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: .5rem;
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  background-color: hsl(var(--card));
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .625rem .75rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover { background-color: hsl(var(--muted)) }
.woocommerce-MyAccount-navigation li.is-active a { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.woocommerce-MyAccount-content { min-width: 0 }
.woocommerce-MyAccount-content > p { color: hsl(var(--muted-foreground)); font-size: .875rem }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background-color: hsl(var(--card));
}
.woocommerce-account .u-columns.col2-set { display: grid; gap: 2rem }
@media (min-width: 768px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr 1fr } }
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 { width: 100%; float: none }
.woocommerce-account .u-columns.col2-set h2 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700 }
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; margin-right: 1rem }
.woocommerce .lost_password { font-size: .875rem; margin-top: .75rem }

/* --- misc ------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb { display: none }   /* the theme draws its own */
.woocommerce mark { background: transparent; color: inherit; font-weight: 600 }
.woocommerce .order-again,
.woocommerce .woocommerce-pagination { margin-top: 1.5rem }
.woocommerce .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0 }
.woocommerce .woocommerce-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  font-size: .875rem;
  color: hsl(var(--foreground));
  text-decoration: none;
}
.woocommerce .woocommerce-pagination .page-numbers.current { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }

/* Review form (product page): fields fill the box, never wider than the phone */
#review_form .comment-form-rating,
#review_form p { margin: 0 0 .75rem; }
#review_form label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form select,
#review_form textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--background)); padding: .5rem .75rem; font: inherit; font-size: .875rem; color: hsl(var(--foreground)); }
#review_form textarea { min-height: 7rem; resize: vertical; }
#review_form .form-submit { margin-bottom: 0; }

/* "Login" heading printed by WooCommerce above the login card: line it up with the card */
.woocommerce-account .woocommerce > h2 { max-width: 28rem; margin: 0 auto 1rem; text-align: center; font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); }