/* =========================================================================
   SquishUp — WooCommerce skin
   Restyles WooCommerce's native Shop, Single Product, Cart, and Checkout to
   match the SquishUp candy design. Loaded only when WooCommerce is active.
   ========================================================================= */

.su-woo { padding-top: 2.5rem; }

/* ---- Page title ---- */
.woocommerce-products-header__title,
.su-woo .product_title,
.su-woo h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.woocommerce-result-count { color: var(--muted-foreground); font-size: 0.875rem; }
.woocommerce-ordering select {
  border-radius: 9999px; background: var(--card); border: 1px solid var(--border);
  padding: 0.6rem 1.1rem; font-family: inherit; font-weight: 700; font-size: 0.875rem; color: var(--foreground);
}

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 1rem; border: 0; box-shadow: var(--shadow-soft);
  background: var(--card); color: var(--foreground);
  border-left: 5px solid var(--primary); font-family: inherit;
}
.woocommerce-message { border-left-color: var(--mint); }
.woocommerce-error { border-left-color: var(--destructive); }
.woocommerce-message .button,
.woocommerce-info .button { background-image: var(--gradient-cta); color: var(--primary-foreground); border-radius: 9999px; }

/* ---- Buttons (global Woo) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  border-radius: 9999px;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body); font-weight: 800; font-size: 0.95rem;
  background-image: var(--gradient-cta); color: var(--primary-foreground);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { transform: scale(1.04); color: var(--primary-foreground); }

/* ============================ Shop grid ================================= */
.woocommerce ul.products {
  display: grid; gap: 1.25rem; margin: 0; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative; width: auto !important; margin: 0 !important; float: none;
  background: var(--card); border: 1px solid oklch(0.92 0.03 320 / 0.6);
  border-radius: 1.5rem; padding: 1rem; box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.woocommerce ul.products li.product a img {
  border-radius: 1rem; margin-bottom: 0.85rem;
  background-image: linear-gradient(135deg, oklch(0.7 0.22 350 / 0.1), oklch(0.85 0.16 200 / 0.1), oklch(0.9 0.18 95 / 0.1));
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; padding: 0 0.25rem 0.25rem;
}
.woocommerce ul.products li.product .price {
  color: var(--primary); font-weight: 800; font-size: 1.05rem; padding: 0 0.25rem;
}
.woocommerce ul.products li.product .price del { color: var(--muted-foreground); font-weight: 400; margin-right: 0.4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin-top: 0.75rem; width: 100%; box-sizing: border-box;
}
.woocommerce ul.products li.product .su-tag {
  position: absolute; top: 1.5rem; left: 1.5rem; z-index: 2;
}
.woocommerce span.onsale {
  background-image: var(--gradient-cta); color: var(--primary-foreground);
  border-radius: 9999px; min-height: auto; min-width: auto;
  padding: 0.25rem 0.75rem; font-weight: 800; font-size: 0.7rem;
  top: 1.25rem; left: 1.25rem; right: auto; margin: 0;
}

/* ======================= Single product ================================ */
.woocommerce div.product { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; } }
.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.images img { border-radius: 2rem; box-shadow: var(--shadow-soft); }
.woocommerce div.product .product_title { margin-top: 0; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--primary); font-weight: 800; font-size: 1.875rem; }
.woocommerce div.product p.price del { color: var(--muted-foreground); font-size: 1.25rem; font-weight: 400; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted-foreground); margin: 1rem 0; }
.woocommerce div.product form.cart { margin: 1.5rem 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { display: flex; }
.woocommerce .quantity input.qty {
  width: 4rem; text-align: center; border: 1px solid var(--border); background: var(--card);
  border-radius: 9999px; padding: 0.75rem; font-family: inherit; color: var(--foreground);
}
.woocommerce div.product .stock { color: var(--mint); font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--card); border: 1px solid var(--border); border-radius: 9999px; margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-image: var(--gradient-cta); border-color: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--primary-foreground); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 800; }
.woocommerce .related.products,
.woocommerce .upsells.products { grid-column: 1 / -1; }
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }

/* ============================ Cart ===================================== */
.woocommerce table.shop_table {
  border: 0; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--shadow-soft);
  background: var(--card); border-collapse: separate; border-spacing: 0;
}
.woocommerce table.shop_table th { font-family: var(--font-display); padding: 1rem; }
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--border); }
.woocommerce table.shop_table img { width: 4rem; border-radius: 0.85rem; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
  border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); padding: 1.5rem;
}
.woocommerce .cart_totals h2 { font-family: var(--font-display); }
.woocommerce a.remove {
  color: var(--primary) !important; border-radius: 9999px;
}
.woocommerce a.remove:hover { background: var(--primary) !important; color: var(--primary-foreground) !important; }
.woocommerce .coupon input.input-text {
  border-radius: 9999px; border: 1px solid var(--border); background: var(--card);
  padding: 0.75rem 1rem; font-family: inherit; color: var(--foreground);
}

/* ============================ Checkout ================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.select2-container .select2-selection {
  border-radius: 1rem !important; border: 1px solid var(--border) !important;
  background: var(--card) !important; padding: 0.75rem 1rem !important;
  font-family: inherit !important; color: var(--foreground) !important; min-height: auto;
}
.woocommerce form .form-row label { font-weight: 800; font-size: 0.85rem; }
.woocommerce #payment,
.woocommerce-checkout #payment {
  border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border); }
.woocommerce #order_review,
.woocommerce-checkout-review-order {
  border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); padding: 1.5rem;
}
.woocommerce-checkout #place_order { width: 100%; }
.woocommerce .woocommerce-customer-details,
.woocommerce ul.order_details {
  border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border); padding: 1.5rem; list-style: none;
}

/* ===================== Login / Register (My Account) =================== */
.woocommerce-account .u-columns,
.woocommerce-account .col2-set { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .woocommerce-account.logged-out .u-columns,
  .woocommerce-account.logged-out .col2-set { grid-template-columns: 1fr 1fr; }
}
.woocommerce .col-1, .woocommerce .col-2 { max-width: none; }
.woocommerce-account .woocommerce > h2,
.woocommerce form.login h2,
.woocommerce form.register h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm {
  border-radius: 1.5rem; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-soft); padding: 1.75rem;
}
.woocommerce form.login .form-row,
.woocommerce form.register .form-row { padding: 0; margin-bottom: 1rem; }
.woocommerce-form-login__submit,
.woocommerce-form-register__submit { width: 100%; margin-top: 0.5rem; }
.woocommerce-form-login__rememberme { font-size: 0.85rem; color: var(--muted-foreground); }
.woocommerce-LostPassword a,
.woocommerce a.woocommerce-button { color: var(--primary); font-weight: 700; }
.woocommerce-privacy-policy-text { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.5rem; }

/* ============================ Account / misc =========================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-radius: 9999px; margin-bottom: 0.4rem; padding: 0.1rem 0.25rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background-image: var(--gradient-cta); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--primary-foreground); }
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--accent); }