/* =====================================================================
   CANNA420 — WooCommerce restyle
   Restyles native WC (buttons, cards, cart, checkout) to match tokens.
   Logic stays native — we only change appearance.
   Scoped to .woocommerce / .woocommerce-page (body classes added by WC).
   ===================================================================== */

/* ------------------------- Buttons -> pills ----------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--ts-radius-pill);
  background: var(--ts-color-primary);
  color: var(--ts-color-on-primary);
  border: 1px solid var(--ts-color-primary);
  font-family: var(--ts-font-sans);
  font-size: var(--ts-fs-micro);
  font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ts-dur) var(--ts-ease), transform var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover {
  background: var(--ts-color-primary-hover);
  border-color: var(--ts-color-primary-hover);
  color: var(--ts-color-on-primary);
  transform: translateY(-2px);
}
.woocommerce a.button.disabled, .woocommerce button.button.disabled { opacity: 0.5; cursor: default; }
.woocommerce a.added_to_cart { background: transparent; color: var(--ts-color-primary); border-color: var(--ts-color-primary); }
.woocommerce a.added_to_cart:hover { background: var(--ts-color-primary); color: var(--ts-color-on-primary); }

/* ------------------------- Prices --------------------------------- */
.woocommerce .price, .woocommerce-Price-amount {
  color: var(--ts-color-ink);
  font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-body);
}
.woocommerce .price del, .woocommerce .price .del {
  color: var(--ts-color-muted);
  font-weight: var(--ts-fw-regular);
  opacity: 1;
}
.woocommerce .price ins { background: none; color: var(--ts-color-primary); font-weight: var(--ts-fw-bold); text-decoration: none; }

/* ------------------------- Breadcrumb ----------------------------- */
.woocommerce .woocommerce-breadcrumb { font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold); letter-spacing: var(--ts-ls-micro); text-transform: uppercase; color: var(--ts-color-muted); margin-bottom: 24px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--ts-color-ink); text-decoration: none; }

/* ------------------------- Shop shell ------------------------------ */
.ts-shop > .woocommerce,
.ts-shop > .product,
.ts-shop > .woocommerce-notices-wrapper,
.ts-shop > .woocommerce-result-count,
.ts-shop > .woocommerce-ordering,
.ts-shop > ul.products {
  max-width: var(--ts-container);
  margin-inline: auto;
  padding-inline: var(--ts-container-pad);
}
.ts-shop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ts-gutter);
  flex-wrap: wrap;
  padding-block: 16px 28px;
}
.ts-shop__head .ts-section-title { max-width: 12ch; }

/* ------------------------- Archive grid --------------------------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ts-gutter);
  margin-block: 0;
  padding-block: 0;
  list-style: none;
}
.woocommerce ul.products li.product { width: 100%; margin: 0; }
.woocommerce ul.products li.product .ts-productcard { margin-bottom: 0; }
.woocommerce ul.products li.product a img { margin: 0; }

@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 48px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--ts-radius-pill);
  font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro); text-transform: uppercase;
  color: var(--ts-color-ink);
  transition: background-color var(--ts-dur) var(--ts-ease), color var(--ts-dur) var(--ts-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ts-color-primary); color: var(--ts-color-on-primary); }

/* Result / ordering bar */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold); letter-spacing: var(--ts-ls-micro); text-transform: uppercase; color: var(--ts-color-muted); }
.woocommerce .woocommerce-ordering select { border-radius: var(--ts-radius-pill); border: 1px solid var(--ts-color-border); padding: 10px 16px; font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold); letter-spacing: var(--ts-ls-micro); text-transform: uppercase; background: var(--ts-color-surface-white); }

/* ------------------------- Single product ------------------------- */
.single-product .product_title { font-size: var(--ts-type-subheader); margin-bottom: 12px; }
.single-product .woocommerce-product-gallery { border-radius: var(--ts-radius-card); overflow: hidden; }
.single-product .woocommerce-product-gallery img { border-radius: var(--ts-radius-card); }
.single-product div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; }
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs li { border: 0; background: none; }
.single-product div.product .woocommerce-tabs ul.tabs li { border-radius: var(--ts-radius-pill); }
.single-product div.product .woocommerce-tabs ul.tabs li a { font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold); letter-spacing: var(--ts-ls-micro); text-transform: uppercase; color: var(--ts-color-muted); padding: 12px 20px; }
.single-product div.product .woocommerce-tabs ul.tabs li.active { background: var(--ts-color-primary); }
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ts-color-on-primary); }
.single-product div.product .woocommerce-tabs .panel { padding: 24px 0; color: var(--ts-color-muted); }
.single-product div.product .woocommerce-tabs .panel h2 { font-size: var(--ts-type-subheader); color: var(--ts-color-ink); margin-bottom: 16px; }

.single-product div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.single-product .single_add_to_cart_button { margin: 0 !important; }

/* Quantity input */
.woocommerce .quantity .qty {
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-pill);
  padding: 12px 14px;
  font-size: var(--ts-fs-body2);
  font-weight: var(--ts-fw-bold);
  color: var(--ts-color-ink);
  width: 84px;
}

/* ------------------------- Forms / inputs ------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form.checkout_coupon input.input-text,
.woocommerce form.login input.input-text {
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card-sm);
  padding: 13px 16px;
  font-size: var(--ts-fs-body2);
  font-family: var(--ts-font-sans);
  color: var(--ts-color-ink);
  background: var(--ts-color-surface-white);
  line-height: 1.3;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--ts-color-primary);
  outline: 3px solid var(--ts-color-primary-tint);
  outline-offset: 1px;
}
.woocommerce form .form-row label { font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold); letter-spacing: var(--ts-ls-micro); text-transform: uppercase; color: var(--ts-color-ink); }

/* ------------------------- Notices -------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-radius: var(--ts-radius-card-sm);
  border: 1px solid transparent;
  padding: 18px 22px;
  color: var(--ts-color-ink);
  font-size: var(--ts-fs-body2);
  background: var(--ts-color-surface-white);
}
.woocommerce .woocommerce-message { border-color: var(--ts-color-success); }
.woocommerce .woocommerce-info { border-color: var(--ts-color-primary); }
.woocommerce .woocommerce-error { border-color: var(--ts-color-error); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before { color: var(--ts-color-primary); }

/* ------------------------- Cart ----------------------------------- */
.woocommerce table.shop_table {
  border: 0; border-radius: var(--ts-radius-card); overflow: hidden;
  background: var(--ts-color-surface-white);
}
.woocommerce table.shop_table th {
  font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro); text-transform: uppercase;
  color: var(--ts-color-muted);
}
.woocommerce table.shop_table td { border-color: var(--ts-color-border); }
.woocommerce table.shop_table .product-thumbnail img { border-radius: var(--ts-radius-card-sm); width: 72px; height: 96px; object-fit: cover; }
.woocommerce a.remove {
  color: var(--ts-color-error) !important;
  background: none;
  border-radius: var(--ts-radius-full);
}
.woocommerce a.remove:hover { background: var(--ts-color-error); color: var(--ts-color-on-ink) !important; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  border: 0; border-radius: var(--ts-radius-card);
  background: var(--ts-color-surface);
  padding: 24px;
}
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-page .cart-collaterals .cart_totals h2 {
  font-size: var(--ts-type-subheader);
  margin-bottom: 16px;
}
.woocommerce form.checkout_coupon { border-radius: var(--ts-radius-card); background: var(--ts-color-surface); }

/* ------------------------- Checkout ------------------------------- */
.woocommerce-checkout #payment {
  background: var(--ts-color-surface);
  border-radius: var(--ts-radius-card);
  overflow: hidden;
}
.woocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment div.payment_box { background: none; }
.woocommerce-checkout #payment div.payment_box { background: var(--ts-color-surface-white); border-radius: var(--ts-radius-card-sm); }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #customer_details h3 {
  font-size: var(--ts-type-subheader);
  margin-bottom: 18px;
}
.woocommerce-checkout #order_review .shop_table { margin-bottom: 0; }

/* ------------------------- Account --------------------------------- */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: 12px 18px; border-radius: var(--ts-radius-card-sm);
  font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro); text-transform: uppercase;
  color: var(--ts-color-ink); text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { background: var(--ts-color-primary); color: var(--ts-color-on-primary); }

/* ------------------------- Misc ------------------------------------ */
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--ts-color-primary); }
.woocommerce .woocommerce-terms-and-conditions-wrapper, .woocommerce .woocommerce-form-login, .woocommerce .woocommerce-form-coupon { color: var(--ts-color-muted); }
.woocommerce span.onsale {
  background: var(--ts-color-primary);
  color: var(--ts-color-on-primary);
  border-radius: var(--ts-radius-full);
  font-size: var(--ts-fs-micro); font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro); text-transform: uppercase;
  line-height: 1; min-width: 2.6em; min-height: 2.6em; padding: 4px;
}

/* Flavor grid inside the product description */
.ts-flavors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 24px;
}
.ts-flavor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-card);
  background: var(--ts-color-surface-raised);
  text-align: center;
}
.ts-flavor img {
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: var(--ts-radius-card);
  display: block;
}
.ts-flavor span {
  font-size: var(--ts-fs-micro);
  font-weight: var(--ts-fw-bold);
  letter-spacing: var(--ts-ls-micro);
  text-transform: uppercase;
  color: var(--ts-color-ink);
  line-height: 1.3;
}
@media (max-width: 600px) {
  .ts-flavors { grid-template-columns: repeat(2, 1fr); }
}