/*
 * Cart, checkout, thank-you page and my account (bead ttepavac-305.9): not
 * in the design demo, built from the tokens and the main site's form rules
 * (design/SPEC.md §04 "Form" and the calendar toggle). WooCommerce and
 * WoodMart markup throughout; option groups become the .opt chips of the
 * product page, the person/company switch the pill-in-track toggle.
 */

/* --- Shared: tables as hairline lists, headings as captions ----------------- */
.woocommerce .shop_table {
  border: 0;
  border-collapse: collapse;
}

.woocommerce .shop_table th,
.woocommerce .shop_table td {
  border: 0;
  border-bottom: var(--tt-hairline) solid var(--tt-rule);
  padding: 16px 0;
  background: transparent;
  vertical-align: middle;
}

.woocommerce .shop_table thead th {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tt-ink-3);
  padding-top: 0;
}

.woocommerce .shop_table tbody th {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tt-ink-3);
}

.woocommerce .shop_table .amount {
  font-family: var(--tt-display);
  font-size: var(--tt-size-price-foot);
  color: var(--tt-ink);
  font-weight: 400;
}

.woocommerce .shop_table .order-total .amount,
.woocommerce .shop_table tr.order-total td {
  font-size: var(--tt-size-price-card);
  color: var(--tt-royal);
}

/* The shipping row stacks: the caption above the method chips. */
.woocommerce .shop_table .woocommerce-shipping-totals th,
.woocommerce .shop_table .woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  text-align: left;
}

.woocommerce .shop_table .woocommerce-shipping-totals th {
  border-bottom: 0;
  padding-bottom: 8px;
}

.woocommerce .shop_table .woocommerce-shipping-totals td {
  padding-top: 0;
}

.woocommerce-checkout-review-order-table .woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
  display: block;
  width: 100%;
}

.checkout-order-review .wd-table-wrapper {
  box-shadow: none;
}

/* --- Radio groups as chips: shipping and payment methods ------------------- */
.woocommerce-shipping-methods,
.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.woocommerce-shipping-methods li,
.wc_payment_methods li {
  margin: 0;
  padding: 0;
}

.woocommerce-shipping-methods input[type="radio"],
.wc_payment_methods input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.woocommerce-shipping-methods label,
.wc_payment_methods > li > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 46px;
  padding: 10px 18px;
  border: var(--tt-hairline) solid var(--tt-chip-outline);
  border-radius: var(--tt-radius-input);
  background: var(--tt-input);
  color: var(--tt-ink-2);
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-opt);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  margin: 0;
  width: 100%;
  transition: background-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease);
}

.woocommerce .shop_table .woocommerce-shipping-methods label .amount,
.woocommerce-shipping-methods label .amount {
  font-size: var(--tt-size-caption);
  font-family: var(--tt-sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  color: inherit;
}

.woocommerce-shipping-methods label:hover,
.wc_payment_methods > li > label:hover {
  border-color: var(--tt-ink-2);
}

.woocommerce-shipping-methods input:checked + label,
.wc_payment_methods input:checked + label {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  border-color: var(--tt-forest-1);
}

.woocommerce-shipping-methods input:focus-visible + label,
.wc_payment_methods input:focus-visible + label {
  outline: 2px solid var(--tt-royal);
  outline-offset: 2px;
}

.wc_payment_methods .payment_box {
  margin: 8px 0 0;
  padding: 16px 20px;
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  font-family: var(--tt-sans);
  font-size: var(--tt-size-body-s);
  line-height: var(--tt-lh-copy);
  color: var(--tt-ink-2);
}

.wc_payment_methods .payment_box::before {
  display: none;
}

.wc_payment_methods .payment_box p:last-child {
  margin-bottom: 0;
}

/* --- Cart drawer -----------------------------------------------------------
 * WoodMart enables its dark dropdown scheme here, but the site's global
 * headings and primary price color are dark ink. Pair this surface with its
 * own text, action and hover colors, as in the mobile navigation drawer.
 */
.cart-widget-side {
  --wd-text-color: var(--tt-on-green);
  --wd-entities-title-color-hover: var(--tt-sage-2);
  --wd-link-color: var(--tt-cream);
  --wd-link-color-hover: var(--tt-sage-2);
  --brdcolor-gray-300: var(--tt-forest-rule);
  --btn-default-bgcolor: var(--tt-cream);
  --btn-default-bgcolor-hover: var(--tt-white);
  --btn-default-color: var(--tt-ink);
  --btn-default-color-hover: var(--tt-ink);
  --btn-accented-bgcolor: var(--tt-cream);
  --btn-accented-bgcolor-hover: var(--tt-white);
  --btn-accented-color: var(--tt-ink);
  --btn-accented-color-hover: var(--tt-ink);
  background: var(--tt-forest-1);
  color: var(--tt-on-green);
}

.cart-widget-side :is(.title, .wd-entities-title, .amount),
.cart-widget-side .woocommerce-mini-cart__total strong {
  color: var(--tt-cream);
}

.cart-widget-side p,
.cart-widget-side .cart-info span.quantity {
  color: var(--tt-on-green);
}

.cart-widget-side .wd-action-btn {
  --wd-action-color: var(--tt-cream);
  --wd-action-color-hover: var(--tt-sage-2);
}

.cart-widget-side .remove {
  color: var(--tt-cream);
}

.cart-widget-side .remove:hover {
  background: var(--tt-forest-3);
}

/* --- Cart ------------------------------------------------------------------ */
.cart-content-wrapper {
  gap: clamp(32px, 5vw, 72px);
}

.woocommerce-cart-form .product-thumbnail {
  width: 112px;
}

.tt-cart-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: var(--tt-cream-alt);
  border: var(--tt-hairline) solid var(--tt-border);
}

.tt-cart-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--tt-print-shadow-thumb);
}

.woocommerce-cart-form .product-name a {
  font-family: var(--tt-display);
  font-size: var(--tt-size-card-title-s);
  color: var(--tt-ink);
  text-decoration: none;
}

/* WoodMart draws its own cross icon before the link's "×" text. */
.woocommerce-cart-form .product-remove .remove {
  color: var(--tt-ink-3);
  font-size: 0;
  background: transparent;
}

.woocommerce-cart-form .product-remove .remove::before {
  font-size: var(--tt-size-value);
}

.woocommerce-cart-form .product-remove .remove:hover {
  color: var(--tt-ink);
  background: transparent;
}

.woocommerce-cart-form .actions > .button {
  white-space: nowrap;
}

.woocommerce-cart-form .actions {
  display: flex;
  align-items: center;
  gap: var(--tt-gap-buttons);
  flex-wrap: wrap;
  padding: 24px 0 0;
}

.woocommerce-cart-form .coupon {
  display: flex;
  gap: var(--tt-gap-buttons);
  flex: 1 1 auto;
  margin: 0;
}

.woocommerce-cart-form .coupon input[type="text"] {
  flex: 0 1 280px;
  min-width: 0;
}

.cart_totals {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.cart_totals .cart-totals-inner {
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: none;
  outline: 0;
}

.cart_totals h2 {
  font-size: var(--tt-size-small-title);
  margin: 0 0 18px;
  text-transform: none;
}

.cart_totals .woocommerce-shipping-destination {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  color: var(--tt-ink-3);
  margin: 12px 0 0;
}

.cart_totals .shipping-calculator-button {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-royal);
}

.cart_totals .wc-proceed-to-checkout {
  margin-top: 24px;
  padding: 0;
}

.cart_totals .wc-proceed-to-checkout .button {
  width: 100%;
  margin: 0;
}

/* --- Checkout -------------------------------------------------------------- */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-body-s);
  font-weight: 300;
  color: var(--tt-ink-2);
}

.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--tt-royal);
  font-weight: 400;
  text-decoration: none;
  border-bottom: var(--tt-hairline) solid var(--tt-btn-outline);
}

.woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none;
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
.checkout-order-review h3,
#order_review_heading {
  font-size: var(--tt-size-small-title);
  text-transform: none;
  margin: 0 0 20px;
}

/* Serbian Addons: person / company as the pill-in-track toggle */
#billing_type_field .woocommerce-input-wrapper {
  display: inline-flex;
  padding: 5px;
  background: var(--tt-track);
  border-radius: var(--tt-radius-pill);
  gap: 2px;
}

#billing_type_field input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#billing_type_field label.radio {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: var(--tt-radius-pill);
  margin: 0;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-toggle);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tt-ink-2);
  cursor: pointer;
  transition: background-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease);
}

#billing_type_field label.radio .required {
  display: none;
}

#billing_type_field input:checked + label.radio {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
}

#billing_type_field input:focus-visible + label.radio {
  outline: 2px solid var(--tt-royal);
  outline-offset: 2px;
}

/* The order review as a white card */
.checkout-order-review {
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: none;
  border-radius: 0;
  mask: none;
  -webkit-mask: none;
}

.checkout-order-review::before,
.checkout-order-review::after {
  display: none;
}

.checkout-order-review .wd-table-wrapper,
.checkout-order-review #order_review {
  background: transparent;
  padding: 0;
  border: 0;
}

.woocommerce-checkout-review-order-table .product-name {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-input);
  color: var(--tt-ink);
}

.woocommerce-checkout-review-order-table .product-quantity {
  font-weight: 400;
  color: var(--tt-ink-3);
}

.woocommerce-checkout-payment {
  margin-top: 24px;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  line-height: var(--tt-lh-copy);
  color: var(--tt-ink-3);
}

.woocommerce-privacy-policy-text a {
  color: var(--tt-royal);
}

.woocommerce-checkout #place_order {
  width: 100%;
  margin-top: 24px;
}

/* --- Thank-you page ---------------------------------------------------------- */
.woocommerce-order .woocommerce-thankyou-order-received {
  position: relative;
  background: var(--tt-forest-1);
  color: var(--tt-cream-hi);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px) calc(clamp(28px, 4vw, 48px) + 72px);
  margin: 0 0 32px;
  font-family: var(--tt-display);
  font-size: var(--tt-size-title-s);
  line-height: 1.1;
  font-weight: 500;
  border: 0;
  text-wrap: balance;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "";
  position: absolute;
  left: clamp(28px, 4vw, 48px);
  top: clamp(40px, 5vw, 64px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--tt-hairline) solid var(--tt-moss);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a8467' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") no-repeat center / 24px 24px;
}

.tt-thanks__actions {
  margin: 0 0 40px;
}

.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0 24px;
  border-top: var(--tt-hairline) solid var(--tt-rule);
}

.woocommerce-order .woocommerce-order-overview li {
  border: 0;
  border-bottom: var(--tt-hairline) solid var(--tt-rule);
  padding: 14px 0;
  margin: 0;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-ink-3);
}

.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: var(--tt-size-value);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--tt-ink);
}

/* Serbian Addons: the payment slip and IPS QR code as a white card */
.woocommerce-order-payment-slip,
.woocommerce-order-ips-qr-code,
.wcsrb-payment-slip {
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  padding: clamp(24px, 3vw, 36px);
  margin: 0 0 40px;
}

/* --- My account -------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border: 0;
}

html .wd-builder-off .woocommerce-MyAccount-navigation ul > li > a,
.woocommerce-MyAccount-navigation ul > li > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  font-weight: 500;
  padding: 11px 22px;
  min-height: var(--tt-tap-target);
  border-radius: var(--tt-radius-pill);
  border: var(--tt-hairline) solid var(--tt-chip-outline);
  color: var(--tt-ink-2);
  background: transparent;
  text-decoration: none;
  transition: background-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease);
}

html .wd-builder-off .woocommerce-MyAccount-navigation ul > li > a:hover,
.woocommerce-MyAccount-navigation ul > li > a:hover,
.woocommerce-MyAccount-navigation ul > li > a:focus-visible {
  border-color: var(--tt-ink-2);
  color: var(--tt-ink-2);
  background: transparent;
}

html .wd-builder-off .woocommerce-MyAccount-navigation ul > li.is-active > a,
html .wd-builder-off .woocommerce-MyAccount-navigation ul > li.is-active > a:hover,
.woocommerce-MyAccount-navigation ul > li.is-active > a,
.woocommerce-MyAccount-navigation ul > li.is-active > a:hover {
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  border-color: var(--tt-forest-1);
}

.woocommerce-MyAccount-navigation .widget-title,
.woocommerce-MyAccount-navigation h3 {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-caption);
  text-transform: uppercase;
  color: var(--tt-ink-3);
  font-weight: 400;
  border: 0;
  margin: 0 0 18px;
}

.woocommerce-MyAccount-content {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-body-s);
  line-height: var(--tt-lh-copy);
}

.wd-login-title,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  text-transform: none;
}

.wd-registration-page .wd-login-text,
.wd-registration-page .wd-register-text,
.col-register p:not([class]) {
  font-family: var(--tt-sans);
  font-weight: 300;
  color: var(--tt-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-shipping-methods label,
  .wc_payment_methods > li > label,
  #billing_type_field label.radio,
  .woocommerce-MyAccount-navigation li a {
    transition: none;
  }
}