/* ==========================================================================
   K&F Global Logistics — WooCommerce skin

   Restyles WooCommerce's own markup onto the approved design. No WooCommerce
   template is overridden: layout the design reorders (the cart table columns,
   the checkout columns) is handled with CSS grid placement.

   Selector note: WooCommerce ships deeply-specific rules such as
   `.woocommerce div.product .woocommerce-tabs ul.tabs li`. Rules that have to
   beat those are written with a matching `body.kfg.woocommerce div.product`
   prefix rather than with !important.
   ========================================================================== */

.kfg-shop,
.kfg-page { padding-block: 100px; }
.kfg-shop > .container > .woocommerce,
.kfg-page > .container > .woocommerce { width: 100%; }
.kfg-page__title {
  margin: 0 0 18px;
  font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink-green);
}

/* ---------- Notices ---------- */
body.kfg .woocommerce-message,
body.kfg .woocommerce-info,
body.kfg .woocommerce-error,
body.kfg .woocommerce-notice {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 20px;
  border: 0;
  border-top: 0;
  border-left: 4px solid var(--green-600);
  border-radius: var(--r-sm);
  background: var(--green-050);
  color: var(--ink);
  font-size: 15px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
body.kfg .woocommerce-message::before,
body.kfg .woocommerce-info::before,
body.kfg .woocommerce-error::before { content: none; }
body.kfg .woocommerce-error { border-left-color: var(--sale-fg); background: var(--sale-bg); }
body.kfg .woocommerce-message .button,
body.kfg .woocommerce-info .button { margin-left: auto; }

/* ---------- Buttons ----------
   `.alt` variants carry an extra class in WooCommerce's own rules, so these
   selectors are written to match that weight. */
body.kfg a.button,
body.kfg button.button,
body.kfg input.button,
body.kfg a.button.alt,
body.kfg button.button.alt,
body.kfg input.button.alt,
body.kfg #respond input#submit,
body.kfg .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 51px; padding: 15px 26px;
  font-family: var(--font); font-size: 16px; line-height: 19px; font-weight: 600;
  color: var(--white); background-color: var(--green-700);
  border: 1px solid transparent; border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap; cursor: pointer; text-shadow: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
body.kfg a.button:hover,
body.kfg button.button:hover,
body.kfg input.button:hover,
body.kfg a.button.alt:hover,
body.kfg button.button.alt:hover,
body.kfg input.button.alt:hover,
body.kfg #respond input#submit:hover,
body.kfg .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--green-900); color: var(--white);
  transform: translateY(-2px); box-shadow: var(--sh-md);
}
body.kfg a.button.disabled,
body.kfg button.button.disabled,
body.kfg button.button:disabled,
body.kfg button.button:disabled[disabled],
body.kfg button.button.alt.disabled,
body.kfg button.button.alt:disabled,
body.kfg button.button.alt:disabled[disabled] {
  background-color: var(--green-700); opacity: .45; transform: none; box-shadow: none;
}

/* ==========================================================================
   Single product
   ========================================================================== */
body.kfg.woocommerce div.product {
  display: grid;
  grid-template-columns: 481px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}
body.kfg.woocommerce div.product::before,
body.kfg.woocommerce div.product::after { content: none; display: none; }

body.kfg.woocommerce div.product .woocommerce-product-gallery {
  grid-column: 1; width: 100%; min-width: 0; max-width: 100%;
  float: none; margin: 0; opacity: 1 !important;
  border-radius: var(--r-md); overflow: hidden; background: var(--green-025);
}
/* The design crops the main product shot to a square. */
body.kfg.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
}
body.kfg.woocommerce div.product .woocommerce-product-gallery__trigger {
  top: 16px; right: 16px; background: var(--white); border-radius: var(--r-pill);
}
body.kfg.woocommerce div.product .flex-control-thumbs {
  display: flex; gap: 12px; margin: 12px 0 0; padding: 0 12px 12px; list-style: none;
}
body.kfg.woocommerce div.product .flex-control-thumbs li { width: 84px; float: none; margin: 0; }
body.kfg.woocommerce div.product .flex-control-thumbs img {
  border-radius: var(--r-sm); cursor: pointer; opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
body.kfg.woocommerce div.product .flex-control-thumbs img.flex-active,
body.kfg.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }

body.kfg.woocommerce div.product .summary {
  grid-column: 2; width: 100%; min-width: 0; float: none; margin: 0;
}
body.kfg.woocommerce div.product .woocommerce-tabs,
body.kfg.woocommerce div.product .related,
body.kfg.woocommerce div.product .up-sells { grid-column: 1 / -1; width: 100%; float: none; }

.pdp__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.kfg.woocommerce div.product .product_title {
  margin: 0; padding: 0;
  font-size: 36px; line-height: 43px; font-weight: 700; color: var(--ink);
}

.pdp__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; font-size: 14px; color: var(--muted);
}
.pdp__meta strong { color: var(--ink); font-weight: 600; }
.pdp__meta .woocommerce-review-link { color: inherit; }
.pdp__meta .woocommerce-review-link:hover { color: var(--green-600); }

body.kfg.woocommerce div.product p.price,
body.kfg.woocommerce div.product span.price {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 20px 0 0; color: var(--green-600);
  font-size: 30px; line-height: 36px; font-weight: 700;
}
body.kfg.woocommerce div.product p.price del {
  font-size: 20px; line-height: 30px; font-weight: 400;
  color: #b3b3b3; opacity: 1;
}
body.kfg.woocommerce div.product p.price ins { text-decoration: none; background: none; }
body.kfg.woocommerce div.product .woocommerce-product-details__short-description {
  margin-top: 14px; font-size: 15px; line-height: 24px; color: var(--muted);
}
body.kfg.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0; }
body.kfg.woocommerce span.onsale {
  position: static; min-height: 0; min-width: 0; line-height: 21px;
  margin: 0; padding: 4px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
  background: var(--sale-bg); color: var(--sale-fg);
}

.pdp__divider { margin: 17px 0 0; border: 0; border-top: 1px solid var(--line); }

/* ---------- Variations ---------- */
body.kfg.woocommerce div.product table.variations {
  display: block; margin: 24px 0 0; border: 0; background: none;
}
body.kfg.woocommerce div.product table.variations tbody,
body.kfg.woocommerce div.product table.variations tr { display: block; background: none; }
body.kfg.woocommerce div.product table.variations th,
body.kfg.woocommerce div.product table.variations td {
  display: block; padding: 0; border: 0; background: none; vertical-align: top;
}
body.kfg.woocommerce div.product table.variations tr + tr { margin-top: 16px; }
body.kfg.woocommerce div.product table.variations th.label label {
  display: block; margin: 0 0 7px;
  font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink);
}
body.kfg.woocommerce div.product table.variations td.value { max-width: 308px; }
body.kfg.woocommerce div.product .kfg-select-shell { max-width: 308px; }
body.kfg.woocommerce div.product a.reset_variations {
  display: inline-block; margin-top: 8px;
  font-size: 13px; color: var(--muted); text-decoration: underline;
}
body.kfg.woocommerce div.product .woocommerce-variation { margin-top: 4px; }
body.kfg.woocommerce div.product .woocommerce-variation-price { margin-top: 16px; }
body.kfg.woocommerce div.product .woocommerce-variation-price .price {
  font-size: 26px; line-height: 32px; font-weight: 700; color: var(--green-600); margin: 0;
}
body.kfg.woocommerce div.product .woocommerce-variation-availability p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
body.kfg.woocommerce div.product .woocommerce-variation-description p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Add to cart row ---------- */
body.kfg.woocommerce div.product form.cart {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 19px 0 0;
}
body.kfg.woocommerce div.product form.cart::before,
body.kfg.woocommerce div.product form.cart::after { content: none; display: none; }
body.kfg.woocommerce div.product form.cart.variations_form { display: block; }
body.kfg.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 19px;
}
body.kfg.woocommerce div.product form.cart .button,
body.kfg.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1; min-width: 260px; max-width: 447px; float: none; vertical-align: middle;
}
body.kfg.woocommerce div.product form.cart .quantity { margin: 0; float: none; }
body.kfg.woocommerce div.product .product_meta { display: none; }

/* ---------- Quantity stepper ---------- */
body.kfg .quantity,
body.kfg.woocommerce .quantity {
  display: inline-flex; align-items: center;
  width: 124px; height: 50px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  overflow: hidden; background: var(--white);
  transition: border-color var(--dur) var(--ease);
}
body.kfg .quantity:hover { border-color: var(--green-600); }
body.kfg .quantity .qty__btn {
  width: 40px; height: 100%; flex: none;
  display: grid; place-items: center; color: var(--ink); padding: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.kfg .quantity .qty__btn:hover { background: var(--green-050); color: var(--green-700); }
body.kfg .quantity .qty__btn svg { width: 14px; height: 14px; flex: none; }
body.kfg .quantity input.qty,
body.kfg.woocommerce .quantity input.qty {
  width: 44px; flex: 1; min-width: 0; height: 100%;
  text-align: center; border: 0; background: none; box-shadow: none; padding: 0;
  font-size: 16px; font-weight: 500; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
body.kfg .quantity input.qty:focus { outline: none; }
body.kfg .quantity input.qty::-webkit-outer-spin-button,
body.kfg .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Product tabs ---------- */
body.kfg.woocommerce div.product .woocommerce-tabs { margin-top: 55px; }
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; justify-content: center; gap: 0; margin: 0; padding: 0;
  border-bottom: 1px solid var(--line); list-style: none;
}
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none; display: none; }
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li {
  position: relative; margin: 0; padding: 0; z-index: auto;
  background: none; background-color: transparent; border: 0; border-radius: 0;
}
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; position: relative; padding: 17px 24px; font-weight: 500;
  font-size: 16px; line-height: 22px; color: var(--muted); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--green-600);
  transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); font-weight: 600; }
body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }

body.kfg.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 50px 0 0; margin: 0;
}
body.kfg .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; }
body.kfg .woocommerce-tabs .woocommerce-Tabs-panel p {
  font-size: 15px; line-height: 24px; color: var(--muted);
}
body.kfg .woocommerce-tabs .woocommerce-Tabs-panel p + p { margin-top: 20px; }
body.kfg.woocommerce table.shop_attributes {
  width: 100%; border: 1px solid var(--line); border-collapse: collapse;
  font-size: 15px; margin: 0;
}
body.kfg.woocommerce table.shop_attributes th,
body.kfg.woocommerce table.shop_attributes td {
  padding: 14px 16px; border: 1px solid var(--line); text-align: left;
  font-style: normal; line-height: 24px;
}
body.kfg.woocommerce table.shop_attributes th {
  width: 260px; background: var(--green-025); font-weight: 600; color: var(--ink-green);
}
body.kfg.woocommerce table.shop_attributes td { color: var(--muted); }
body.kfg.woocommerce table.shop_attributes td p { margin: 0; padding: 0; }

body.kfg #reviews .commentlist { padding: 0; list-style: none; }
body.kfg.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: flex; gap: 16px; padding: 20px 0; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; background: none;
}
body.kfg.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static; width: 48px; height: 48px; border-radius: var(--r-pill);
  border: 0; padding: 0; background: none; float: none;
}
body.kfg.woocommerce #reviews #comments ol.commentlist li .comment-text {
  flex: 1; margin: 0; padding: 0; border: 0; border-radius: 0;
}
body.kfg #review_form_wrapper { margin-top: 32px; }
body.kfg #review_form .comment-form { display: grid; gap: 16px; }
body.kfg #review_form input[type="text"],
body.kfg #review_form input[type="email"],
body.kfg #review_form textarea {
  width: 100%; min-height: 49px; padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 15px;
}
body.kfg #review_form .form-submit input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 51px; padding: 15px 26px; width: auto;
  background-color: var(--green-700); color: var(--white);
  border: 0; border-radius: var(--r-pill); font-weight: 600; font-size: 16px;
}
body.kfg #review_form .form-submit input[type="submit"]:hover { background-color: var(--green-900); color: var(--white); }

/* ---------- Related products / shop grid ---------- */
body.kfg.woocommerce div.product .related > h2,
body.kfg.woocommerce div.product .up-sells > h2 {
  margin: 0 0 28px; font-size: 32px; line-height: 40px; font-weight: 700; color: var(--ink-green);
}
body.kfg.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin: 0; padding: 0; list-style: none;
}
body.kfg.woocommerce ul.products::before,
body.kfg.woocommerce ul.products::after { content: none; display: none; }
body.kfg.woocommerce ul.products li.product {
  width: auto; margin: 0; float: none; position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; text-align: center;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.kfg.woocommerce ul.products li.product:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
body.kfg.woocommerce ul.products li.product a img { border-radius: var(--r-sm); margin: 0 0 14px; }
body.kfg.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink-green); padding: 0;
}
body.kfg.woocommerce ul.products li.product .price {
  color: var(--green-600); font-weight: 700; font-size: 18px; display: block; margin-bottom: 14px;
}
body.kfg.woocommerce ul.products li.product .price del { font-size: 15px; font-weight: 400; }
body.kfg.woocommerce ul.products li.product span.onsale { position: absolute; top: 16px; right: 16px; }
body.kfg.woocommerce ul.products li.product a.button { min-height: 45px; padding: 12px 22px; font-size: 15px; }
body.kfg.woocommerce .woocommerce-result-count,
body.kfg.woocommerce .woocommerce-ordering { margin-bottom: 24px; color: var(--muted); }
body.kfg.woocommerce .woocommerce-products-header__title {
  margin: 0 0 24px; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink-green);
}

/* ==========================================================================
   Cart
   ========================================================================== */
body.woocommerce-cart .kfg-page__content > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 790px) 380px;
  column-gap: 30px;
  row-gap: 0;
  align-items: start;
}
/* Notices sit on their own full-width row; they carry their own bottom margin
   so the row gap stays at zero when the cart has no notices to show. */
body.woocommerce-cart .kfg-page__content > .woocommerce > .woocommerce-notices-wrapper { grid-row: 1; }
body.woocommerce-cart .kfg-page__content > .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .kfg-page__content > .woocommerce > .cart-empty,
body.woocommerce-cart .kfg-page__content > .woocommerce > .return-to-shop,
body.woocommerce-cart .kfg-page__content > .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; }
body.kfg .woocommerce-cart-form {
  grid-column: 1; grid-row: 2; margin: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
body.kfg .cart-collaterals { grid-column: 2; grid-row: 2; width: 100%; float: none; }
body.kfg .cart-collaterals::before,
body.kfg .cart-collaterals::after { content: none; display: none; }

body.kfg .woocommerce-cart-form table.shop_table.cart {
  display: block; width: 100%; margin: 0; border: 0; border-radius: 0; border-spacing: 0;
}
body.kfg .woocommerce-cart-form table.shop_table.cart thead,
body.kfg .woocommerce-cart-form table.shop_table.cart tbody { display: block; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead tr,
body.kfg .woocommerce-cart-form table.shop_table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 103px 169px 111px 42px;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
body.kfg .woocommerce-cart-form table.shop_table.cart th,
body.kfg .woocommerce-cart-form table.shop_table.cart td {
  display: block; border: 0; padding: 0; background: none;
}

body.kfg .woocommerce-cart-form table.shop_table.cart thead tr { padding-block: 22px 16px; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead th {
  font-size: 12px; line-height: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); text-align: left;
}
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-remove,
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-thumbnail { display: none; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-name { grid-column: 1 / 3; grid-row: 1; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-price { grid-column: 3; grid-row: 1; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-quantity { grid-column: 4; grid-row: 1; }
body.kfg .woocommerce-cart-form table.shop_table.cart thead th.product-subtotal { grid-column: 5; grid-row: 1; }

body.kfg .woocommerce-cart-form table.shop_table.cart tr.woocommerce-cart-form__cart-item { padding-block: 11.5px; }
body.kfg .woocommerce-cart-form td.product-thumbnail { grid-column: 1; grid-row: 1; }
body.kfg .woocommerce-cart-form td.product-thumbnail img {
  width: 100px; height: 100px; border-radius: var(--r-sm);
  object-fit: cover; background: var(--green-025);
}
body.kfg .woocommerce-cart-form table.shop_table.cart td.product-name {
  grid-column: 2; grid-row: 1; padding-left: 26px; padding-right: 16px;
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink);
}
body.kfg .woocommerce-cart-form td.product-name a { color: inherit; }
body.kfg .woocommerce-cart-form td.product-name a:hover { color: var(--green-600); }
body.kfg .woocommerce-cart-form td.product-name dl.variation {
  margin: 2px 0 0; font-size: 13px; line-height: 16px; color: var(--muted);
}
body.kfg .woocommerce-cart-form td.product-name dl.variation dt,
body.kfg .woocommerce-cart-form td.product-name dl.variation dd { display: inline; margin: 0; padding: 0; font-weight: 400; }
body.kfg .woocommerce-cart-form td.product-name dl.variation dd p { display: inline; margin: 0; }
body.kfg .woocommerce-cart-form td.product-price,
body.kfg .woocommerce-cart-form td.product-subtotal {
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink);
}
body.kfg .woocommerce-cart-form td.product-price { grid-column: 3; grid-row: 1; }
body.kfg .woocommerce-cart-form td.product-quantity { grid-column: 4; grid-row: 1; }
body.kfg .woocommerce-cart-form td.product-subtotal { grid-column: 5; grid-row: 1; }
body.kfg .woocommerce-cart-form td.product-remove { grid-column: 6; grid-row: 1; text-align: right; }
body.kfg .woocommerce-cart-form td.product-remove a.remove {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  font-size: 22px; line-height: 1; color: var(--muted) !important; background: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.kfg .woocommerce-cart-form td.product-remove a.remove:hover {
  background: var(--sale-bg); color: var(--sale-fg) !important; transform: rotate(90deg);
}

body.kfg .woocommerce-cart-form table.shop_table.cart tbody tr:last-child { border-bottom: 0; display: block; }
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16.5px 18px;
  border-top: 1px solid var(--line);
}
/* The design's cart panel has no coupon field; coupons remain available at
   checkout, where WooCommerce renders its own form. */
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions .coupon { display: none; }
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions button[name="update_cart"] {
  order: 2;
  min-height: 45px; padding: 12px 24px;
  background-color: var(--surface); color: var(--ink); font-size: 15px;
}
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions button[name="update_cart"]:hover {
  background-color: var(--line-2); color: var(--ink);
}
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions .kfg-cart__return {
  order: 1; --btn-bg: var(--surface); --btn-fg: var(--ink);
  min-height: 45px; padding: 12px 24px;
}
body.kfg .woocommerce-cart-form table.shop_table.cart td.actions .kfg-cart__return:hover {
  --btn-bg: var(--line-2);
}

/* ---------- Totals panel ---------- */
body.kfg .cart-collaterals .cart_totals {
  width: 100%; float: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 32px 21px;
}
body.kfg .cart_totals h2 {
  margin: 0 0 6px;
  font-size: 19.5px; line-height: 30px; font-weight: 700; color: var(--ink);
}
body.kfg .cart_totals table.shop_table {
  width: 100%; border: 0; border-collapse: collapse; margin: 0; border-radius: 0;
}
body.kfg .cart_totals table.shop_table th,
body.kfg .cart_totals table.shop_table td {
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none;
  font-size: 15px; line-height: 21px; color: var(--ink); font-weight: 400;
}
body.kfg .cart_totals table.shop_table td { text-align: right; }
body.kfg .cart_totals table.shop_table tr.order-total th,
body.kfg .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 600;
}
body.kfg .cart_totals table.shop_table tr.order-total td { font-size: 19px; font-weight: 700; }
body.kfg .cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: right; }
body.kfg .cart_totals .woocommerce-shipping-methods li { margin-bottom: 6px; }
body.kfg .cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
body.kfg .cart_totals .shipping-calculator-button { font-size: 13px; color: var(--green-600); text-decoration: underline; }
body.kfg .cart_totals .shipping-calculator-form { margin-top: 12px; display: grid; gap: 10px; }
body.kfg .cart_totals .shipping-calculator-form input,
body.kfg .cart_totals .shipping-calculator-form select {
  width: 100%; min-height: 42px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 14px;
}
body.kfg .wc-proceed-to-checkout { padding: 0; margin-top: 20px; }
body.kfg .wc-proceed-to-checkout a.checkout-button { width: 100%; margin: 0; display: flex; }

/* ==========================================================================
   Checkout
   ========================================================================== */
body.kfg form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 688px) 424px;
  /* min-content keeps row 1 the height of the order heading; without it the
     spanning billing column would stretch it. */
  grid-template-rows: min-content 1fr;
  column-gap: 88px;
  align-items: start;
}
body.kfg form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
body.kfg form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
body.kfg form.checkout #order_review { grid-column: 2; grid-row: 2; width: 100%; }
body.kfg form.checkout .col2-set { width: 100%; }
body.kfg form.checkout .col2-set::before,
body.kfg form.checkout .col2-set::after { content: none; display: none; }
body.kfg form.checkout .col2-set .col-1,
body.kfg form.checkout .col2-set .col-2 { width: 100%; float: none; }
body.kfg form.checkout .col2-set .col-2:not(:empty) {
  margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line);
}

body.kfg .kfg-checkout__additional { flex: 1 1 100%; margin: 16px 0 0; }
body.kfg .woocommerce-checkout h3,
body.kfg #order_review_heading {
  margin: 0 0 25px;
  font-size: 23px; line-height: 30px; font-weight: 700; color: var(--ink);
}
/* Flex wrapping rather than a fixed grid: WooCommerce swaps address fields in
   and out per country, so pairs have to form from whatever fields exist. */
body.kfg .woocommerce-billing-fields__field-wrapper,
body.kfg .woocommerce-shipping-fields__field-wrapper,
body.kfg .woocommerce-additional-fields__field-wrapper {
  display: flex; flex-wrap: wrap; gap: 16px;
}
body.kfg form.checkout .form-row { flex: 1 1 100%; }
body.kfg form.checkout .form-row { margin: 0; padding: 0; display: grid; gap: 7px; }
/* Half-width fields are keyed off the field IDs: WooCommerce's address-i18n
   script rewrites the `form-row-first` / `form-row-wide` classes on the client
   whenever the country changes, but the IDs are stable. */
body.kfg form.checkout #billing_first_name_field,
body.kfg form.checkout #billing_last_name_field,
body.kfg form.checkout #billing_country_field,
body.kfg form.checkout #billing_state_field,
body.kfg form.checkout #billing_city_field,
body.kfg form.checkout #billing_postcode_field,
body.kfg form.checkout #billing_phone_field,
body.kfg form.checkout #shipping_first_name_field,
body.kfg form.checkout #shipping_last_name_field,
body.kfg form.checkout #shipping_country_field,
body.kfg form.checkout #shipping_state_field,
body.kfg form.checkout #shipping_city_field,
body.kfg form.checkout #shipping_postcode_field { flex: 1 1 calc(50% - 8px); }
body.kfg form.checkout .form-row label {
  font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink);
}
body.kfg form.checkout .form-row .required { color: var(--sale-fg); text-decoration: none; }
body.kfg form.checkout .form-row input.input-text,
body.kfg form.checkout .form-row textarea,
body.kfg form.checkout .form-row select,
body.kfg .select2-container--default .select2-selection--single {
  width: 100%; min-height: 49px; height: auto;
  padding: 13px 16px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 15px; line-height: 21px; color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.kfg form.checkout .form-row textarea { min-height: 100px; resize: vertical; }
body.kfg form.checkout .form-row input.input-text:focus,
body.kfg form.checkout .form-row textarea:focus,
body.kfg form.checkout .form-row select:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(44, 116, 47, .12);
}
body.kfg .select2-container--default .select2-selection--single { display: flex; align-items: center; }
body.kfg .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 21px; color: var(--ink);
}
body.kfg .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%; transform: translateY(-50%); right: 12px; height: 20px;
}
body.kfg #ship-to-different-address {
  margin: 0; font-size: 15px; line-height: 21px; font-weight: 500;
}
body.kfg #ship-to-different-address label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
body.kfg #ship-to-different-address input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green-700); }

/* ---------- Order summary card ---------- */
body.kfg #order_review {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-sm);
}
body.kfg table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%; border: 0; border-collapse: collapse; margin: 0; border-radius: 0;
}
body.kfg .woocommerce-checkout-review-order-table thead { display: none; }
body.kfg .woocommerce-checkout-review-order-table tr.cart_item td {
  padding: 8px 0; border: 0; vertical-align: middle;
}
body.kfg .woocommerce-checkout-review-order-table td.product-name {
  display: flex; align-items: center; gap: 20px;
  font-size: 15px; line-height: 21px; color: var(--ink);
}
.kfg-order-item__media { flex: none; }
.kfg-order-item__img {
  width: 60px; height: 60px; border-radius: var(--r-sm);
  object-fit: cover; background: var(--green-025);
}
.kfg-order-item__name { flex: 1; min-width: 0; }
body.kfg .woocommerce-checkout-review-order-table .product-quantity {
  font-weight: 400; color: var(--muted);
}
body.kfg .woocommerce-checkout-review-order-table dl.variation {
  margin: 2px 0 0; font-size: 13px; line-height: 17px; color: var(--muted);
}
body.kfg .woocommerce-checkout-review-order-table dl.variation dt,
body.kfg .woocommerce-checkout-review-order-table dl.variation dd { display: inline; margin: 0; padding: 0; font-weight: 400; }
body.kfg .woocommerce-checkout-review-order-table dl.variation dd p { display: inline; margin: 0; }
body.kfg .woocommerce-checkout-review-order-table td.product-total {
  text-align: right; font-size: 15px; font-weight: 500; white-space: nowrap;
}
body.kfg .woocommerce-checkout-review-order-table tfoot th,
body.kfg .woocommerce-checkout-review-order-table tfoot td {
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 21px; font-weight: 400; color: var(--ink);
}
body.kfg .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
body.kfg .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.kfg .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 600;
}
body.kfg .woocommerce-checkout-review-order-table tfoot tr.order-total td { font-size: 19px; font-weight: 700; }
body.kfg .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods {
  list-style: none; margin: 0; padding: 0;
}

/* ---------- Payment ---------- */
body.kfg #payment { background: none; border-radius: 0; margin-top: 15px; }
body.kfg #payment ul.payment_methods {
  list-style: none; margin: 0; padding: 16px 0 0; border: 0;
  display: grid; gap: 10px;
}
/* The radio is a sibling of its label, not a child, so the row itself has to do
   the centring; the description box below wraps onto a line of its own. */
body.kfg #payment ul.payment_methods li {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
body.kfg #payment ul.payment_methods li > div.payment_box { flex: 1 1 100%; margin-top: 0; }
body.kfg #payment ul.payment_methods label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15px; line-height: 21px; font-weight: 400; cursor: pointer;
}
body.kfg #payment ul.payment_methods input[type="radio"] {
  accent-color: var(--green-700); width: 18px; height: 18px; margin: 0;
}
body.kfg #payment div.payment_box {
  background: var(--green-025); border-radius: var(--r-sm);
  padding: 12px 16px; margin: 8px 0 0; font-size: 14px; color: var(--muted);
}
body.kfg #payment div.payment_box::before { content: none; display: none; }
body.kfg #payment .form-row.place-order { padding: 0; margin-top: 24px; }
body.kfg #payment #place_order { width: 100%; float: none; }
body.kfg .woocommerce-terms-and-conditions-wrapper { font-size: 14px; color: var(--muted); }

/* ==========================================================================
   Thank you / order received
   ========================================================================== */
.kfg-thanks {
  max-width: 440px; margin: 0 auto 60px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kfg-thanks__icon { width: 88px; height: 88px; color: var(--green-600); }
.kfg-thanks__title {
  margin: 31px 0 0;
  font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink-green);
}
.kfg-thanks__text { margin: 15px 0 0; font-size: 15px; line-height: 21px; color: var(--muted); }
.kfg-thanks .btn { margin-top: 34px; }

/* The design replaces WooCommerce's "order received" sentence with the block
   above, which leaves the paragraph behind — styled as a notice, so it reads as
   an empty bar. `:empty` cannot catch it: the template puts the filtered text on
   its own line, so the element still holds a newline. */
body.kfg .woocommerce-thankyou-order-received { display: none; }

body.kfg .woocommerce-order ul.woocommerce-order-overview {
  list-style: none; margin: 0 0 40px; padding: 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px;
  background: var(--green-025); border-radius: var(--r-md);
}
body.kfg .woocommerce-order ul.woocommerce-order-overview li {
  border: 0; margin: 0; padding: 0; float: none;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
body.kfg .woocommerce-order ul.woocommerce-order-overview li strong {
  display: block; margin-top: 6px;
  font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ink-green);
}
body.kfg .woocommerce-order h2 {
  margin: 0 0 16px; font-size: 23px; line-height: 30px; font-weight: 700; color: var(--ink);
}
body.kfg .woocommerce-order table.shop_table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin: 0 0 40px;
}
body.kfg .woocommerce-order table.shop_table th,
body.kfg .woocommerce-order table.shop_table td {
  padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 15px;
}
body.kfg .woocommerce-order table.shop_table thead th {
  background: var(--green-025); color: var(--ink-green); font-weight: 600;
}
body.kfg .woocommerce-order .woocommerce-columns--addresses {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;
}
/* WooCommerce clearfixes `.col2-set` with ::before/::after. In a grid those
   become items of their own, pushing both addresses a column to the right. */
body.kfg .woocommerce-order .woocommerce-columns--addresses::before,
body.kfg .woocommerce-order .woocommerce-columns--addresses::after { content: none; display: none; }
body.kfg .woocommerce-order .woocommerce-columns--addresses .col-1,
body.kfg .woocommerce-order .woocommerce-columns--addresses .col-2 { width: 100%; float: none; }
body.kfg .woocommerce-order address { font-style: normal; line-height: 26px; color: var(--muted); border: 0; padding: 0; }

/* ==========================================================================
   My account
   ========================================================================== */
/* The account screens render through page.php, so the grid hangs off
   `.kfg-page__content`. Scoped to `.logged-in` because the same body class is
   on the logged-out login/register screen, which is a single centred column. */
body.woocommerce-account.logged-in .kfg-page__content > .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
/* Notices belong above both columns, not inside the navigation cell. */
body.woocommerce-account.logged-in .kfg-page__content > .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; }

body.kfg .woocommerce-MyAccount-navigation {
  width: 100%; float: none;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
body.kfg .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.kfg .woocommerce-MyAccount-navigation a {
  display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: 15px;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.kfg .woocommerce-MyAccount-navigation li.is-active a,
body.kfg .woocommerce-MyAccount-navigation a:hover { background: var(--green-050); color: var(--green-700); }
body.kfg .woocommerce-MyAccount-content { width: 100%; float: none; }
body.kfg .woocommerce form .form-row { display: grid; gap: 7px; margin: 0 0 16px; padding: 0; }
body.kfg .woocommerce form .form-row input.input-text,
body.kfg .woocommerce form .form-row input[type="password"] {
  width: 100%; min-height: 49px; padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 15px;
}
/* Logged-out account screens are a single centred column, not a full-bleed
   form: login, register and the password reset all read as one card. */
body.woocommerce-account:not(.logged-in) .kfg-page__title,
body.woocommerce-account:not(.logged-in) .kfg-page__content > .woocommerce {
  max-width: 520px; margin-inline: auto;
}
body.woocommerce-account:not(.logged-in) .kfg-page__title { text-align: center; }

body.kfg .woocommerce form.login,
body.kfg .woocommerce form.register,
body.kfg .woocommerce form.lost_reset_password {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px;
}
/* The rows are grids, so a button stretches to the full column unless it is
   asked to size to its own content. */
body.kfg .woocommerce form.login .form-row .button,
body.kfg .woocommerce form.register .form-row .button,
body.kfg .woocommerce form.lost_reset_password .form-row .button {
  justify-self: center; width: auto; min-width: 220px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  body.kfg.woocommerce div.product { grid-template-columns: 420px minmax(0, 1fr); gap: 40px; }
  body.woocommerce-cart .kfg-page__content > .woocommerce { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; }
  body.kfg form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; }
  body.kfg .woocommerce-cart-form table.shop_table.cart thead tr,
  body.kfg .woocommerce-cart-form table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 84px minmax(0, 1fr) 90px 130px 90px 34px;
    gap: 0 14px;
  }
  body.kfg .woocommerce-cart-form td.product-thumbnail img { width: 84px; height: 84px; }
}

@media (max-width: 1023px) {
  .kfg-shop,
  .kfg-page { padding-block: 60px; }
  body.kfg.woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.kfg.woocommerce div.product .woocommerce-product-gallery,
  body.kfg.woocommerce div.product .summary { grid-column: 1; }
  body.kfg.woocommerce div.product .woocommerce-product-gallery { max-width: min(481px, 100%); }

  body.woocommerce-cart .kfg-page__content > .woocommerce { grid-template-columns: minmax(0, 1fr); }
  body.kfg .woocommerce-cart-form,
  body.kfg .cart-collaterals { grid-column: 1; }
  /* Stacked, the totals panel needs its own row — both blocks sit on row 2 in
     the two-column layout — and its own gap, since the grid's row-gap is 0. */
  body.kfg .cart-collaterals { grid-row: 3; margin-top: 24px; }

  body.kfg form.checkout.woocommerce-checkout { grid-template-columns: 1fr; row-gap: 40px; }
  body.kfg form.checkout #customer_details,
  body.kfg form.checkout #order_review_heading,
  body.kfg form.checkout #order_review { grid-column: 1; grid-row: auto; }

  body.kfg.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  body.woocommerce-account.logged-in .kfg-page__content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 1; }
}

@media (max-width: 767px) {
  body.kfg.woocommerce div.product .product_title { font-size: 28px; line-height: 36px; }
  body.kfg.woocommerce div.product form.cart .button,
  body.kfg.woocommerce div.product form.cart button.single_add_to_cart_button { min-width: 0; }
  body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  }
  body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  body.kfg.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 14px 16px; white-space: nowrap; }

  /* Cart table becomes stacked cards. */
  body.kfg .woocommerce-cart-form table.shop_table.cart thead { display: none; }
  body.kfg .woocommerce-cart-form table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    position: relative;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px 16px;
    padding: 18px;
  }
  body.kfg .woocommerce-cart-form td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  body.kfg .woocommerce-cart-form td.product-thumbnail img { width: 72px; height: 72px; }
  body.kfg .woocommerce-cart-form td.product-name { grid-column: 2; grid-row: 1; padding-right: 34px; }
  body.kfg .woocommerce-cart-form td.product-price { grid-column: 2; grid-row: 2; }
  body.kfg .woocommerce-cart-form td.product-quantity { grid-column: 2; grid-row: 3; }
  body.kfg .woocommerce-cart-form td.product-subtotal { grid-column: 2; grid-row: 4; }
  body.kfg .woocommerce-cart-form td.product-remove { position: absolute; top: 18px; right: 18px; grid-column: auto; }
  body.kfg .woocommerce-cart-form td[data-title]::before {
    content: attr(data-title) " ";
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-2); margin-right: 8px;
  }
  body.kfg .woocommerce-cart-form td.product-name::before,
  body.kfg .woocommerce-cart-form td.product-thumbnail::before { content: none; }
  body.kfg .woocommerce-cart-form td.actions { flex-direction: column; align-items: stretch; }
  body.kfg .woocommerce-cart-form td.actions .btn,
  body.kfg .woocommerce-cart-form td.actions button { width: 100%; }

  /* The half-width pairs are keyed off field IDs, so stacking them has to be
     written at the same weight — a `.form-row` rule cannot beat an ID. */
  body.kfg form.checkout .form-row,
  body.kfg form.checkout #billing_first_name_field,
  body.kfg form.checkout #billing_last_name_field,
  body.kfg form.checkout #billing_country_field,
  body.kfg form.checkout #billing_state_field,
  body.kfg form.checkout #billing_city_field,
  body.kfg form.checkout #billing_postcode_field,
  body.kfg form.checkout #billing_phone_field,
  body.kfg form.checkout #billing_email_field,
  body.kfg form.checkout #shipping_first_name_field,
  body.kfg form.checkout #shipping_last_name_field,
  body.kfg form.checkout #shipping_country_field,
  body.kfg form.checkout #shipping_state_field,
  body.kfg form.checkout #shipping_city_field,
  body.kfg form.checkout #shipping_postcode_field { flex: 1 1 100%; }
  body.kfg .woocommerce-checkout h3,
  body.kfg #order_review_heading { font-size: 22px; line-height: 30px; }

  body.kfg.woocommerce ul.products { grid-template-columns: 1fr; }
  .kfg-thanks__icon { width: 72px; height: 72px; }
  .kfg-thanks__title { font-size: 28px; line-height: 36px; }
  .kfg-thanks .btn { width: 100%; }
}