/* ==========================================================================
   KETNAL CREATIONS — WooCommerce
   Themes the WooCommerce front end onto the Ketnal design system: dark
   surfaces, ember accent, Poppins, the same radii and easing as the rest of
   the site. Nothing here touches WooCommerce templates, so Woo can update
   freely.

   Covers both markup generations:
     .woocommerce …        classic shortcodes and templates (what the supplied
                           Cart/Checkout/My Account layouts use)
     .wc-block-… / .wp-block-woocommerce-…   the newer Cart and Checkout blocks

   Load: css/ketnal-woo.css, enqueued after ketnal-sections.css.
   ========================================================================== */

/* --------------------------------------------------------------- page shell */

/* Utility pages want a shorter hero than the marketing pages. */
.k-hero--slim { min-height: 0; }
.k-hero--slim .k-hero__inner {
  padding-block: calc(var(--k-header-h) + clamp(1.5rem, 4vw, 2.75rem)) clamp(2rem, 4vw, 3rem);
}
.k-hero--slim .k-hero__copy { max-width: 44rem; }
.k-hero--slim .k-h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.k-hero--slim .k-hero__lead { margin-bottom: 0; }

:is(.k-woo, .woocommerce-page) { position: relative; }
.k-woo__body { position: relative; }
.k-woo__note {
  margin: 2rem 0 0;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
}
.k-woo__note a { color: var(--k-chalk); text-decoration: underline; text-underline-offset: 3px; }
.k-woo__note a:hover { color: var(--k-accent); }

/* Woo prints its own h2s inside the cart/checkout; align them with k-h3. */
:is(.k-woo, .woocommerce-page) h2,
:is(.k-woo, .woocommerce-page) h3 { color: var(--k-chalk); }
:is(.k-woo, .woocommerce-page) .woocommerce h2 { font-size: var(--k-fs-h3); letter-spacing: -0.02em; }
:is(.k-woo, .woocommerce-page) p { color: var(--k-faint); }
:is(.k-woo, .woocommerce-page) a { color: var(--k-chalk); }
:is(.k-woo, .woocommerce-page) a:hover { color: var(--k-accent); }

/* ------------------------------------------------------------------ buttons */

:is(.k-woo, .woocommerce-page) .button,
:is(.k-woo, .woocommerce-page) button.button,
:is(.k-woo, .woocommerce-page) input.button,
:is(.k-woo, .woocommerce-page) a.button,
:is(.k-woo, .woocommerce-page) .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font: inherit;
  font-size: var(--k-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(120deg, var(--k-ember), var(--k-orchid));
  border: 0;
  border-radius: var(--k-r-pill);
  box-shadow: var(--k-shadow-ember);
  cursor: pointer;
  transition: box-shadow 0.35s var(--k-ease), transform 0.35s var(--k-ease), filter 0.35s var(--k-ease);
}
:is(.k-woo, .woocommerce-page) .button:hover,
:is(.k-woo, .woocommerce-page) button.button:hover,
:is(.k-woo, .woocommerce-page) input.button:hover,
:is(.k-woo, .woocommerce-page) a.button:hover,
:is(.k-woo, .woocommerce-page) .wc-block-components-button:hover {
  color: #fff;
  box-shadow: var(--k-shadow-ember-hi);
  filter: saturate(1.08);
}
:is(.k-woo, .woocommerce-page) .button:disabled,
:is(.k-woo, .woocommerce-page) .button.disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }

/* Secondary actions — "update cart", "continue shopping", coupon apply. */
:is(.k-woo, .woocommerce-page) .button[name="update_cart"],
:is(.k-woo, .woocommerce-page) .actions .button.wc-backward,
:is(.k-woo, .woocommerce-page) .coupon .button,
:is(.k-woo, .woocommerce-page) .wc-block-components-button.outlined {
  background: transparent;
  border: 1px solid var(--k-line-strong);
  box-shadow: none;
  color: var(--k-chalk);
}
:is(.k-woo, .woocommerce-page) .button[name="update_cart"]:hover,
:is(.k-woo, .woocommerce-page) .actions .button.wc-backward:hover,
:is(.k-woo, .woocommerce-page) .coupon .button:hover {
  border-color: var(--k-accent);
  background: rgba(255, 45, 85, 0.1);
  box-shadow: none;
}

/* ------------------------------------------------------------ form controls */

:is(.k-woo, .woocommerce-page) input[type="text"],
:is(.k-woo, .woocommerce-page) input[type="email"],
:is(.k-woo, .woocommerce-page) input[type="tel"],
:is(.k-woo, .woocommerce-page) input[type="url"],
:is(.k-woo, .woocommerce-page) input[type="password"],
:is(.k-woo, .woocommerce-page) input[type="number"],
:is(.k-woo, .woocommerce-page) input[type="search"],
:is(.k-woo, .woocommerce-page) textarea,
:is(.k-woo, .woocommerce-page) select,
:is(.k-woo, .woocommerce-page) .select2-container .select2-selection--single,
:is(.k-woo, .woocommerce-page) .wc-block-components-text-input input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font: inherit;
  font-size: var(--k-fs-sm);
  color: var(--k-chalk);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-sm);
  transition: border-color 0.3s var(--k-ease), box-shadow 0.3s var(--k-ease);
}
:is(.k-woo, .woocommerce-page) .select2-container .select2-selection--single { height: auto; display: flex; align-items: center; }
:is(.k-woo, .woocommerce-page) .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--k-chalk); line-height: 1.4; padding: 0; }
:is(.k-woo, .woocommerce-page) .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
:is(.k-woo, .woocommerce-page) .select2-dropdown {
  background: var(--k-ink-800);
  border-color: var(--k-line-strong);
  color: var(--k-chalk);
}
:is(.k-woo, .woocommerce-page) .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--k-ember-deep); }

:is(.k-woo, .woocommerce-page) input::placeholder,
:is(.k-woo, .woocommerce-page) textarea::placeholder { color: rgba(247, 244, 246, 0.4); }
:is(.k-woo, .woocommerce-page) input:focus-visible,
:is(.k-woo, .woocommerce-page) textarea:focus-visible,
:is(.k-woo, .woocommerce-page) select:focus-visible {
  outline: none;
  border-color: var(--k-accent);
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.18);
}
:is(.k-woo, .woocommerce-page) label,
:is(.k-woo, .woocommerce-page) .wc-block-components-checkout-step__title { color: var(--k-chalk); font-size: var(--k-fs-sm); font-weight: 500; }
:is(.k-woo, .woocommerce-page) .required { color: var(--k-ember-soft); }
:is(.k-woo, .woocommerce-page) .woocommerce-input-wrapper { display: block; }
:is(.k-woo, .woocommerce-page) .form-row { margin-bottom: 1rem; }

:is(.k-woo, .woocommerce-page) .quantity input[type="number"] { max-width: 92px; text-align: center; }

/* ------------------------------------------------------------------- tables */

:is(.k-woo, .woocommerce-page) table.shop_table,
:is(.k-woo, .woocommerce-page) table.woocommerce-orders-table,
:is(.k-woo, .woocommerce-page) table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  overflow: hidden;
  background: var(--k-glass), var(--k-ink-850);
  color: var(--k-faint);
}
:is(.k-woo, .woocommerce-page) table.shop_table th,
:is(.k-woo, .woocommerce-page) table.woocommerce-orders-table th {
  padding: 1rem 1.1rem;
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-mute);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--k-line);
  text-align: left;
}
:is(.k-woo, .woocommerce-page) table.shop_table td,
:is(.k-woo, .woocommerce-page) table.woocommerce-orders-table td {
  padding: 1.1rem;
  border-bottom: 1px solid var(--k-line);
  vertical-align: middle;
}
:is(.k-woo, .woocommerce-page) table.shop_table tr:last-child td { border-bottom: 0; }
:is(.k-woo, .woocommerce-page) table.shop_table .product-thumbnail img { width: 64px; height: auto; border-radius: var(--k-r-sm); }
:is(.k-woo, .woocommerce-page) .product-name a { color: var(--k-chalk); font-weight: 500; }
:is(.k-woo, .woocommerce-page) .product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--k-r-pill);
  color: var(--k-mute) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 1rem;
  line-height: 1;
}
:is(.k-woo, .woocommerce-page) .product-remove a.remove:hover { color: #fff !important; background: var(--k-ember-deep) !important; }

/* ----------------------------------------------------------- cart + totals */

:is(.k-woo, .woocommerce-page) .cart_totals,
:is(.k-woo, .woocommerce-page) .cross-sells,
:is(.k-woo, .woocommerce-page) #order_review,
:is(.k-woo, .woocommerce-page) .woocommerce-checkout-review-order {
  margin-top: 2rem;
}
:is(.k-woo, .woocommerce-page) .cart_totals h2,
:is(.k-woo, .woocommerce-page) #order_review_heading {
  margin-bottom: 1rem;
  font-size: var(--k-fs-h3);
}
:is(.k-woo, .woocommerce-page) .cart-collaterals {
  display: grid;
  gap: var(--k-gap);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  :is(.k-woo, .woocommerce-page) .cart-collaterals { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
  :is(.k-woo, .woocommerce-page) .cart-collaterals .cart_totals { grid-column: 2; }
}
:is(.k-woo, .woocommerce-page) .cart_totals table.shop_table { background: var(--k-glass), var(--k-ink-800); }
:is(.k-woo, .woocommerce-page) .order-total .amount,
:is(.k-woo, .woocommerce-page) .cart-subtotal .amount { color: var(--k-chalk); font-weight: 600; }
:is(.k-woo, .woocommerce-page) .wc-proceed-to-checkout { margin-top: 1.25rem; }
:is(.k-woo, .woocommerce-page) .wc-proceed-to-checkout .button { width: 100%; }

:is(.k-woo, .woocommerce-page) .coupon {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
:is(.k-woo, .woocommerce-page) .coupon input[type="text"] { max-width: 260px; }
:is(.k-woo, .woocommerce-page) .actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
}

/* ---------------------------------------------------------------- checkout */

@media (min-width: 1024px) {
  .k-woo--checkout .woocommerce { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .k-woo--checkout .woocommerce-notices-wrapper,
  .k-woo--checkout .woocommerce-form-coupon-toggle,
  .k-woo--checkout .checkout_coupon { grid-column: 1 / -1; }
  .k-woo--checkout form.checkout { display: contents; }
  .k-woo--checkout #customer_details { grid-column: 1; }
  .k-woo--checkout #order_review_heading,
  .k-woo--checkout #order_review {
    grid-column: 2;
    position: sticky;
    top: calc(var(--k-header-h) + 1.5rem);
  }
  .k-woo--checkout #order_review_heading { position: static; }
}
:is(.k-woo, .woocommerce-page) #order_review {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line-strong);
}
:is(.k-woo, .woocommerce-page) #payment,
:is(.k-woo, .woocommerce-page) .wc-block-checkout__payment-method {
  background: transparent;
  border-radius: var(--k-r-md);
}
:is(.k-woo, .woocommerce-page) #payment ul.payment_methods {
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
  border-bottom: 1px solid var(--k-line);
}
:is(.k-woo, .woocommerce-page) #payment ul.payment_methods li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--k-line);
}
:is(.k-woo, .woocommerce-page) #payment ul.payment_methods li:last-child { border-bottom: 0; }
:is(.k-woo, .woocommerce-page) #payment div.payment_box {
  margin: 0.75rem 0 0;
  padding: 1rem;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--k-r-sm);
}
:is(.k-woo, .woocommerce-page) #payment div.payment_box::before { display: none; }
:is(.k-woo, .woocommerce-page) .woocommerce-terms-and-conditions-wrapper { font-size: var(--k-fs-sm); color: var(--k-mute); }
:is(.k-woo, .woocommerce-page) #place_order { width: 100%; margin-top: 1rem; }

/* -------------------------------------------------------------- my account */

.k-woo--account .woocommerce { display: block; }
@media (min-width: 900px) {
  .k-woo--account .woocommerce-MyAccount-navigation { float: none; width: auto; }
  .k-woo--account .woocommerce-MyAccount-content { float: none; width: auto; }
  .k-woo--account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
}
:is(.k-woo, .woocommerce-page) .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border-radius: var(--k-r-md);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
}
:is(.k-woo, .woocommerce-page) .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: var(--k-r-sm);
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
}
:is(.k-woo, .woocommerce-page) .woocommerce-MyAccount-navigation li a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
:is(.k-woo, .woocommerce-page) .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(255, 45, 85, 0.14);
  color: #fff;
  font-weight: 600;
}
:is(.k-woo, .woocommerce-page) .woocommerce-form-login,
:is(.k-woo, .woocommerce-page) .woocommerce-form-register,
:is(.k-woo, .woocommerce-page) .woocommerce-EditAccountForm,
:is(.k-woo, .woocommerce-page) .woocommerce-address-fields {
  max-width: 560px;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
}
:is(.k-woo, .woocommerce-page) .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ------------------------------------------------------------ product grid */

:is(.k-woo, .woocommerce-page) ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-gap);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024px) { :is(.k-woo, .woocommerce-page) ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { :is(.k-woo, .woocommerce-page) ul.products { grid-template-columns: minmax(0, 1fr); } }
:is(.k-woo, .woocommerce-page) ul.products::before,
:is(.k-woo, .woocommerce-page) ul.products::after { display: none; }

:is(.k-woo, .woocommerce-page) ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
  transition: border-color 0.35s var(--k-ease), box-shadow 0.35s var(--k-ease), transform 0.35s var(--k-ease);
}
:is(.k-woo, .woocommerce-page) ul.products li.product:hover {
  border-color: rgba(255, 45, 85, 0.45);
  box-shadow: var(--k-shadow-card);
  transform: translateY(-3px);
}
:is(.k-woo, .woocommerce-page) ul.products li.product img {
  width: 100%;
  height: auto;
  margin: 0 0 0.4rem;
  border-radius: var(--k-r-md);
}
:is(.k-woo, .woocommerce-page) ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  font-size: var(--k-fs-h4);
  font-weight: 600;
  color: var(--k-chalk);
}
:is(.k-woo, .woocommerce-page) ul.products li.product .price,
:is(.k-woo, .woocommerce-page) .summary .price {
  color: var(--k-chalk);
  font-weight: 600;
}
:is(.k-woo, .woocommerce-page) ul.products li.product .price del,
:is(.k-woo, .woocommerce-page) .summary .price del { color: var(--k-mute); font-weight: 400; }
:is(.k-woo, .woocommerce-page) ul.products li.product .price ins,
:is(.k-woo, .woocommerce-page) .summary .price ins { color: var(--k-ember-soft); text-decoration: none; }
:is(.k-woo, .woocommerce-page) ul.products li.product .button { margin-top: auto; align-self: flex-start; }
:is(.k-woo, .woocommerce-page) span.onsale,
:is(.k-woo, .woocommerce-page) .wc-block-components-product-sale-badge {
  min-height: 0;
  min-width: 0;
  padding: 0.35rem 0.75rem;
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--k-ember-deep);
  border-radius: var(--k-r-pill);
}

/* ------------------------------------------------------ single product page */

:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--k-line); }
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs::before { display: none; }
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.5rem 0 0;
  padding: 0;
}
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs li::before,
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs li::after { display: none; }
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs li a {
  padding: 0.85rem 0;
  font-weight: 600;
  color: var(--k-mute);
  border-bottom: 2px solid transparent;
}
:is(.k-woo, .woocommerce-page) div.product .woocommerce-tabs ul.tabs li.active a { color: var(--k-chalk); border-bottom-color: var(--k-accent); }
:is(.k-woo, .woocommerce-page) .woocommerce-product-gallery img { border-radius: var(--k-r-md); }

/* ---------------------------------------------------------------- messages */

:is(.k-woo, .woocommerce-page) .woocommerce-message,
:is(.k-woo, .woocommerce-page) .woocommerce-info,
:is(.k-woo, .woocommerce-page) .woocommerce-error,
:is(.k-woo, .woocommerce-page) .wc-block-components-notice-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  font-size: var(--k-fs-sm);
  color: var(--k-chalk);
  background: var(--k-glass), var(--k-ink-800);
  border: 1px solid var(--k-line-strong);
  border-left: 3px solid var(--k-accent);
  border-radius: var(--k-r-sm);
  list-style: none;
}
:is(.k-woo, .woocommerce-page) .woocommerce-message::before,
:is(.k-woo, .woocommerce-page) .woocommerce-info::before,
:is(.k-woo, .woocommerce-page) .woocommerce-error::before { display: none; }
:is(.k-woo, .woocommerce-page) .woocommerce-error { border-left-color: #ff5c6e; }
:is(.k-woo, .woocommerce-page) .woocommerce-message .button,
:is(.k-woo, .woocommerce-page) .woocommerce-info .button { margin-left: auto; padding: 0.6rem 1.2rem; }

/* ------------------------------------------------------- cart/checkout blocks */

:is(.k-woo, .woocommerce-page) .wc-block-components-totals-item__value,
:is(.k-woo, .woocommerce-page) .wc-block-components-product-name,
:is(.k-woo, .woocommerce-page) .wc-block-components-order-summary-item__description { color: var(--k-chalk); }
:is(.k-woo, .woocommerce-page) .wc-block-components-panel,
:is(.k-woo, .woocommerce-page) .wc-block-components-totals-wrapper { border-color: var(--k-line); }
:is(.k-woo, .woocommerce-page) .wc-block-components-sidebar {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line-strong);
}

/* ------------------------------------------------------- reassurance strip */

.k-woo-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-gap);
}
@media (max-width: 900px) { .k-woo-trust__grid { grid-template-columns: minmax(0, 1fr); } }
.k-woo-trust__item {
  padding: 1.5rem;
  border-radius: var(--k-r-md);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
}
.k-woo-trust__item h3 {
  margin: 0 0 0.5rem;
  font-size: var(--k-fs-h4);
  color: var(--k-chalk);
}
.k-woo-trust__item p { margin: 0; font-size: var(--k-fs-sm); color: var(--k-mute); }
.k-woo-trust__item a { color: var(--k-chalk); text-decoration: underline; text-underline-offset: 3px; }
.k-woo-trust__item a:hover { color: var(--k-accent); }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  :is(.k-woo, .woocommerce-page) ul.products li.product,
  :is(.k-woo, .woocommerce-page) .button { transition: none; }
  :is(.k-woo, .woocommerce-page) ul.products li.product:hover { transform: none; }
}


/* ==========================================================================
   The pages WooCommerce renders itself
   Shop archive, product categories and the single product page come from
   WooCommerce's own templates inside Divi's #left-area, not from a Divi
   layout. Everything below is about making those three read like the rest of
   the site: no sidebar, clear of the fixed header, dark surfaces.
   ========================================================================== */

/* ------------------------------------------------------------- no sidebar */

/* inc/woo.php already forces Divi's product layout to No Sidebar and unhooks
   the widget area. These rules are the safety net, and they also cover the
   archives that setting does not reach. */
body.k-store #sidebar,
body.woocommerce-page #sidebar { display: none; }

body.k-store #left-area,
body.woocommerce-page #left-area {
  width: 100%;
  padding-right: 0;
  padding-bottom: 0;
  float: none;
}
body.k-store #main-content .container::before,
body.woocommerce-page #main-content .container::before { display: none; }

body.k-store #content-area,
body.woocommerce-page #content-area { display: block; }

/* --------------------------------------------------------------- breathing

   The header is fixed and the utility strip sits above it, so WooCommerce's
   own templates start underneath both unless the content area is pushed down.
   The Divi-built store pages carry their own hero and are exempt.
   -------------------------------------------------------------------------- */

body.single-product #page-container,
body.post-type-archive-product #page-container,
body.tax-product_cat #page-container,
body.tax-product_tag #page-container,
body.woocommerce-shop #page-container {
  /* Header bar plus the 44px utility strip above it, then a margin. The
     strip is hidden below 900px, so the clearance drops with it. */
  padding-top: calc(var(--k-header-h) + 44px + 1.75rem) !important;
}
body.k-store #main-content {
  padding-top: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* The Divi-built store pages (cart, checkout, account, shop layout) carry a
   hero that already clears the header, so they get no page padding at all. */
body.woocommerce-cart #page-container,
body.woocommerce-checkout #page-container,
body.woocommerce-account #page-container { padding-top: 0 !important; }

@media (max-width: 900px) {
  body.single-product #page-container,
  body.post-type-archive-product #page-container,
  body.tax-product_cat #page-container,
  body.tax-product_tag #page-container,
  body.woocommerce-shop #page-container {
    padding-top: calc(var(--k-header-h) + 1.5rem) !important;
  }
}
body.k-store #main-content .container {
  width: min(100% - (var(--k-pad-x) * 2), var(--k-container));
  max-width: none;
  margin-inline: auto;
}

/* --------------------------------------------------------------- breadcrumb */

body.k-store .woocommerce-breadcrumb {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--k-fs-xs);
  letter-spacing: 0.02em;
  color: var(--k-mute);
}
body.k-store .woocommerce-breadcrumb a { color: var(--k-faint); }
body.k-store .woocommerce-breadcrumb a:hover { color: var(--k-accent); }

/* ------------------------------------------------------- archive furniture */

body.k-store .woocommerce-products-header__title,
body.k-store .page-title,
body.k-store h1.entry-title {
  margin: 0 0 0.75rem;
  font-size: var(--k-fs-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--k-chalk);
}
body.k-store .term-description { color: var(--k-faint); max-width: 70ch; }

body.k-store .woocommerce-result-count {
  margin: 0;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
}
body.k-store .woocommerce-ordering select {
  width: auto;
  min-width: 220px;
  padding: 0.7rem 1rem;
  color: var(--k-chalk);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-sm);
}
body.k-store .woocommerce-notices-wrapper:empty { display: none; }

body.k-store .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
body.k-store .woocommerce-pagination ul li { border: 0; margin: 0; }
body.k-store .woocommerce-pagination ul li a,
body.k-store .woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  color: var(--k-faint);
  background: transparent;
}
body.k-store .woocommerce-pagination ul li span.current {
  color: #fff;
  background: rgba(255, 45, 85, 0.16);
  border-color: rgba(255, 45, 85, 0.45);
}

/* ------------------------------------------------------------ single product */

body.k-store div.product {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  body.k-store div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.k-store div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  body.k-store div.product .summary { grid-column: 2; grid-row: 1; margin: 0; }
  body.k-store div.product .woocommerce-tabs,
  body.k-store div.product .related,
  body.k-store div.product .upsells { grid-column: 1 / -1; }
}

body.k-store div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
}
body.k-store div.product .woocommerce-product-gallery img { border-radius: var(--k-r-md); }
body.k-store div.product .woocommerce-product-gallery__trigger {
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(10, 7, 16, 0.8);
  color: var(--k-chalk);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-pill);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  text-indent: 0;
}
body.k-store div.product .flex-control-thumbs {
  display: flex;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
body.k-store div.product .flex-control-thumbs li { width: auto; margin: 0; list-style: none; }
body.k-store div.product .flex-control-thumbs img { width: 68px; border-radius: var(--k-r-sm); opacity: 0.55; }
body.k-store div.product .flex-control-thumbs img.flex-active { opacity: 1; }

body.k-store div.product .summary {
  width: 100% !important;
  float: none !important;
}
body.k-store div.product .product_title {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: var(--k-fs-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--k-chalk);
  text-wrap: balance;
}
body.k-store div.product .summary > .price,
body.k-store div.product p.price {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--k-chalk);
}
body.k-store div.product .summary .woocommerce-product-details__short-description {
  font-size: var(--k-fs-lead);
  color: var(--k-faint);
  max-width: 56ch;
}
body.k-store div.product .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Variation picker */
body.k-store table.variations {
  width: 100%;
  margin: 1.5rem 0;
  border: 0;
  background: transparent;
}
body.k-store table.variations tr,
body.k-store table.variations td,
body.k-store table.variations th { display: block; border: 0; padding: 0; background: transparent; }
body.k-store table.variations th.label {
  margin-bottom: 0.4rem;
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-mute);
}
body.k-store table.variations td.value { margin-bottom: 1rem; }
body.k-store table.variations select { max-width: 340px; }
body.k-store .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}
body.k-store .woocommerce-variation-price { margin-bottom: 1rem; }
body.k-store .woocommerce-variation-price .price { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600; color: var(--k-chalk); }

body.k-store form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
body.k-store form.cart .quantity { flex: none; }
body.k-store form.cart .button,
body.k-store .single_add_to_cart_button {
  flex: 1 1 220px;
  max-width: 340px;
  padding: 1.05rem 2rem;
  font-size: var(--k-fs-body);
}
body.k-store form.cart.variations_form { display: block; }
body.k-store form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

body.k-store .product_meta {
  padding-top: 1.5rem;
  border-top: 1px solid var(--k-line);
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
}
body.k-store .product_meta > span { display: block; margin-bottom: 0.35rem; }
body.k-store .product_meta a { color: var(--k-faint); }
body.k-store .product_meta a:hover { color: var(--k-accent); }

/* Tabs and related */
body.k-store div.product .woocommerce-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
body.k-store div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  background: transparent;
  border: 0;
  color: var(--k-faint);
}
body.k-store div.product .woocommerce-tabs .panel h2 {
  font-size: var(--k-fs-h3);
  color: var(--k-chalk);
  margin-bottom: 0.75rem;
}
body.k-store div.product .woocommerce-tabs .panel h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: var(--k-fs-h4);
  color: var(--k-chalk);
}
body.k-store div.product .woocommerce-tabs .panel ul { padding-left: 1.1rem; }
body.k-store div.product .woocommerce-tabs .panel li { margin-bottom: 0.35rem; }
body.k-store div.product .woocommerce-tabs table.shop_attributes th { width: 34%; }

body.k-store .related > h2,
body.k-store .upsells > h2,
body.k-store .cross-sells > h2 {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--k-fs-h3);
  color: var(--k-chalk);
}
body.k-store .related,
body.k-store .upsells { margin-top: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------- store furniture */

body.k-store .k-store-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
}

/* Divi paints its own light backgrounds on these wrappers. */
body.k-store #main-content,
body.k-store #content-area,
body.k-store .entry-content { background: transparent; }


/* ==========================================================================
   Beating Divi's WooCommerce defaults
   Divi ships css/dynamic-assets/woocommerce.css, whose button rules read
   `.woocommerce a.button` — specificity (0,2,1). Anything scoped only by
   `.woocommerce-page` loses to it, which is where the blue outline buttons and
   the light tab strip came from. Every selector below is prefixed with
   `body.k-store`, which clears it without resorting to !important.
   ========================================================================== */

/* ------------------------------------------------------------------ buttons */

body.k-store #page-container .woocommerce a.button,
body.k-store #page-container .woocommerce button.button,
body.k-store #page-container .woocommerce input.button,
body.k-store #page-container .woocommerce a.button.alt,
body.k-store #page-container .woocommerce button.button.alt,
body.k-store #page-container .woocommerce input.button.alt,
body.k-store #page-container .woocommerce #respond input#submit,
body.k-store #page-container .woocommerce #content input.button,
body.k-store #page-container .woocommerce a.checkout-button,
body.k-store #page-container .woocommerce button.single_add_to_cart_button,
body.k-store #page-container .woocommerce a.product_type_external,
body.k-store #page-container .woocommerce a.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem !important;
  font-family: inherit;
  font-size: var(--k-fs-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em !important;
  line-height: 1;
  text-transform: none !important;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(120deg, var(--k-ember), var(--k-orchid)) !important;
  border: 0 !important;
  border-radius: var(--k-r-pill) !important;
  box-shadow: var(--k-shadow-ember) !important;
  transition: box-shadow 0.35s var(--k-ease), filter 0.35s var(--k-ease);
}
body.k-store #page-container .woocommerce a.button:hover,
body.k-store #page-container .woocommerce button.button:hover,
body.k-store #page-container .woocommerce input.button:hover,
body.k-store #page-container .woocommerce a.button.alt:hover,
body.k-store #page-container .woocommerce button.button.alt:hover,
body.k-store #page-container .woocommerce input.button.alt:hover,
body.k-store #page-container .woocommerce #respond input#submit:hover,
body.k-store #page-container .woocommerce a.checkout-button:hover,
body.k-store #page-container .woocommerce button.single_add_to_cart_button:hover,
body.k-store #page-container .woocommerce a.product_type_external:hover,
body.k-store #page-container .woocommerce a.add_to_cart_button:hover {
  color: #fff !important;
  background: linear-gradient(120deg, var(--k-ember), var(--k-orchid)) !important;
  box-shadow: var(--k-shadow-ember-hi) !important;
  filter: saturate(1.08);
}

/* Divi hangs an icon off every button through ::before / ::after and animates
   the padding on hover. Both are off here — the design already carries its own
   arrows where it wants them. */
body.k-store #page-container .woocommerce a.button::before,
body.k-store #page-container .woocommerce a.button::after,
body.k-store #page-container .woocommerce button.button::before,
body.k-store #page-container .woocommerce button.button::after,
body.k-store #page-container .woocommerce input.button::before,
body.k-store #page-container .woocommerce input.button::after,
body.k-store #page-container .woocommerce #respond input#submit::before,
body.k-store #page-container .woocommerce #respond input#submit::after {
  content: none;
  display: none;
}

/* Secondary treatment stays outlined, but in the site's own line colour. */
body.k-store #page-container .woocommerce .button[name="update_cart"],
body.k-store #page-container .woocommerce .actions .button.wc-backward,
body.k-store #page-container .woocommerce .coupon .button,
body.k-store #page-container .woocommerce a.reset_variations {
  color: var(--k-chalk);
  background: transparent;
  border: 1px solid var(--k-line-strong);
  box-shadow: none;
}
body.k-store #page-container .woocommerce .button[name="update_cart"]:hover,
body.k-store #page-container .woocommerce .actions .button.wc-backward:hover,
body.k-store #page-container .woocommerce .coupon .button:hover {
  color: #fff;
  background: rgba(255, 45, 85, 0.12);
  border-color: rgba(255, 45, 85, 0.5);
  box-shadow: none;
}
body.k-store #page-container .woocommerce .button:disabled,
body.k-store #page-container .woocommerce .button.disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- no blue --

   Divi's accent is #2ea3f2 and it lands on links, tab borders, focus rings and
   prices. Everything here re-points those at the ember palette.
   -------------------------------------------------------------------------- */

body.k-store #page-container #left-area a:not(.button):not(.k-btn):not(.k-cart-link),
body.k-store #page-container .woocommerce a:not(.button):not(.k-btn):not(.k-cart-link) {
  color: var(--k-chalk);
  text-decoration: none;
}
body.k-store #page-container #left-area a:not(.button):not(.k-btn):hover,
body.k-store #page-container .woocommerce a:not(.button):not(.k-btn):hover { color: var(--k-accent); }

body.k-store #page-container .woocommerce div.product p.price,
body.k-store #page-container .woocommerce div.product span.price,
body.k-store #page-container .woocommerce ul.products li.product .price,
body.k-store #page-container .woocommerce .woocommerce-Price-amount { color: var(--k-chalk); }
body.k-store #page-container .woocommerce div.product p.price del,
body.k-store #page-container .woocommerce ul.products li.product .price del { color: var(--k-mute); }
body.k-store #page-container .woocommerce div.product p.price ins,
body.k-store #page-container .woocommerce ul.products li.product .price ins { color: var(--k-ember-soft); text-decoration: none; }

body.k-store #page-container .woocommerce input:focus-visible,
body.k-store #page-container .woocommerce select:focus-visible,
body.k-store #page-container .woocommerce textarea:focus-visible {
  outline: none;
  border-color: var(--k-accent);
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.18);
}

/* ---------------------------------------------------------------- tab strip */

body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  border-bottom: 1px solid var(--k-line);
  background: transparent;
}
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs::after,
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; content: none; }

body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.9rem 0;
  font-size: var(--k-fs-sm);
  font-weight: 600;
  color: var(--k-mute);
  border-bottom: 2px solid transparent;
}
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.k-store #page-container .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--k-chalk);
  border-bottom-color: var(--k-accent);
}
body.k-store #page-container .woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--k-faint);
}

/* ------------------------------------------------- products without a gallery

   External and quote-only products have no gallery, so a fixed two-column grid
   left an empty half. The layout now only splits when there is something to put
   in the other column.
   -------------------------------------------------------------------------- */

body.k-store #page-container .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  body.k-store #page-container .woocommerce div.product:has(.woocommerce-product-gallery) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body.k-store #page-container .woocommerce div.product:not(:has(.woocommerce-product-gallery)) .summary {
    grid-column: 1 / -1;
    max-width: 62ch;
  }
}

/* Quote-only products: no price, so the summary should not leave a gap where
   one would have been. */
body.k-store #page-container .woocommerce div.product.product-type-external .summary > .price:empty { display: none; }
body.k-store #page-container .woocommerce div.product.product-type-external form.cart { margin-bottom: 1.5rem; }

/* ------------------------------------------------------ placeholder imagery

   Products with no photograph fall back to a branded panel from the child
   theme rather than WooCommerce's grey camera icon.
   -------------------------------------------------------------------------- */

body.k-store #page-container .woocommerce img.woocommerce-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--k-r-md);
  background: var(--k-ink-850);
}

/* ----------------------------------------------------------------- sundry */

body.k-store #page-container .woocommerce .quantity input[type="number"] {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-sm);
  color: var(--k-chalk);
}
body.k-store #page-container .woocommerce .product_meta { color: var(--k-mute); }
body.k-store #page-container .woocommerce .woocommerce-breadcrumb a { color: var(--k-faint); }
body.k-store #page-container .woocommerce-message,
body.k-store #page-container .woocommerce-info,
body.k-store #page-container .woocommerce-error { background-image: none; }

/* Divi colours the category and tag links with its accent directly. */
body.k-store #page-container .posted_in a,
body.k-store #page-container .tagged_as a { color: var(--k-faint); font-weight: 500; }
body.k-store #page-container .posted_in a:hover,
body.k-store #page-container .tagged_as a:hover { color: var(--k-accent); }


/* ==========================================================================
   Hard overrides
   Divi's Customizer prints its WooCommerce CSS inline in <head>, after the
   enqueued stylesheets, and marks several declarations !important — the blue
   button text, the grey variation select, the grey grid prices. Matching it on
   specificity alone is not enough once !important is in play, so this last
   block leads with `html body.k-store` and marks the same declarations.

   This is deliberately the only place in the theme that leans on !important.
   ========================================================================== */

/* ------------------------------------------------------------------ buttons */

html body.k-store #page-container .woocommerce a.button,
html body.k-store #page-container .woocommerce button.button,
html body.k-store #page-container .woocommerce input.button,
html body.k-store #page-container .woocommerce a.button.alt,
html body.k-store #page-container .woocommerce button.button.alt,
html body.k-store #page-container .woocommerce input.button.alt,
html body.k-store #page-container .woocommerce button.single_add_to_cart_button,
html body.k-store #page-container .woocommerce a.product_type_external,
html body.k-store #page-container .woocommerce a.product_type_variable,
html body.k-store #page-container .woocommerce a.add_to_cart_button,
html body.k-store #page-container .woocommerce a.checkout-button,
html body.k-store #page-container .woocommerce #respond input#submit {
  background: linear-gradient(120deg, var(--k-ember), var(--k-orchid)) !important;
  background-color: var(--k-ember) !important;
  color: #fff !important;
  border: 0 !important;
  border-width: 0 !important;
  border-radius: var(--k-r-pill) !important;
  padding: 0.95rem 1.9rem !important;
  font-family: var(--k-font) !important;
  font-size: var(--k-fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: var(--k-shadow-ember) !important;
  opacity: 1 !important;
}
html body.k-store #page-container .woocommerce a.button:hover,
html body.k-store #page-container .woocommerce button.button:hover,
html body.k-store #page-container .woocommerce input.button:hover,
html body.k-store #page-container .woocommerce button.single_add_to_cart_button:hover,
html body.k-store #page-container .woocommerce a.product_type_external:hover,
html body.k-store #page-container .woocommerce a.add_to_cart_button:hover,
html body.k-store #page-container .woocommerce a.checkout-button:hover {
  color: #fff !important;
  box-shadow: var(--k-shadow-ember-hi) !important;
  filter: saturate(1.08);
}

/* Secondary treatment: outlined, still never blue. */
html body.k-store #page-container .woocommerce .button[name="update_cart"],
html body.k-store #page-container .woocommerce .actions .button.wc-backward,
html body.k-store #page-container .woocommerce .coupon .button {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--k-chalk) !important;
  border: 1px solid var(--k-line-strong) !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------- prices and amounts */

html body.k-store #page-container .woocommerce .price,
html body.k-store #page-container .woocommerce .price span,
html body.k-store #page-container .woocommerce .amount,
html body.k-store #page-container .woocommerce .woocommerce-Price-amount,
html body.k-store #page-container .woocommerce ul.products li.product .price,
html body.k-store #page-container .woocommerce div.product .summary p.price,
html body.k-store #page-container .woocommerce div.product .summary p.price span,
html body.k-store #page-container .woocommerce .woocommerce-variation-price .price,
html body.k-store #page-container .woocommerce .woocommerce-variation-price .price span {
  color: var(--k-chalk) !important;
}
html body.k-store #page-container .woocommerce .price del,
html body.k-store #page-container .woocommerce ul.products li.product .price del {
  color: var(--k-mute) !important;
  opacity: 1;
}
html body.k-store #page-container .woocommerce .price ins,
html body.k-store #page-container .woocommerce ul.products li.product .price ins {
  color: var(--k-ember-soft) !important;
  text-decoration: none;
}
html body.k-store #page-container .woocommerce div.product .summary p.price span { font-size: inherit !important; }

/* --------------------------------------------------------- form controls --

   Divi hard-codes the variation select to #ececec with grey !important text.
   -------------------------------------------------------------------------- */

html body.k-store #page-container .woocommerce select,
html body.k-store #page-container .woocommerce div.product form.cart .variations td select,
html body.k-store #page-container .woocommerce .orderby,
html body.k-store #page-container .woocommerce input[type="text"],
html body.k-store #page-container .woocommerce input[type="email"],
html body.k-store #page-container .woocommerce input[type="tel"],
html body.k-store #page-container .woocommerce input[type="password"],
html body.k-store #page-container .woocommerce input[type="number"],
html body.k-store #page-container .woocommerce textarea {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--k-chalk) !important;
  border: 1px solid var(--k-line-strong) !important;
  border-width: 1px !important;
  border-radius: var(--k-r-sm) !important;
  font-family: var(--k-font) !important;
  font-size: var(--k-fs-sm) !important;
  font-weight: 400 !important;
  padding: 0.85rem 1rem !important;
}
html body.k-store #page-container .woocommerce select option { background-color: var(--k-ink-800); color: var(--k-chalk); }

/* Variation rows read left, not centred, and the Clear link sits under them. */
html body.k-store #page-container .woocommerce div.product form.cart .variations,
html body.k-store #page-container .woocommerce div.product form.cart .variations th,
html body.k-store #page-container .woocommerce div.product form.cart .variations td {
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}
html body.k-store #page-container .woocommerce div.product form.cart .variations th.label label {
  color: var(--k-mute) !important;
  font-size: var(--k-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
html body.k-store #page-container .woocommerce a.reset_variations {
  color: var(--k-mute) !important;
  font-size: var(--k-fs-xs) !important;
}

/* ---------------------------------------------------------- content width --

   On WooCommerce templates Divi keeps #left-area at 79% for the sidebar it is
   no longer rendering, and the Theme Builder footer inherits that width, which
   is what squeezed the footer into the left half of the screen.
   -------------------------------------------------------------------------- */

html body.k-store #page-container #left-area,
html body.k-store #page-container #content-area,
html body.k-store #page-container #main-content .container {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding-right: 0 !important;
}
html body.k-store #page-container #main-content .container {
  width: min(100% - (var(--k-pad-x) * 2), var(--k-container)) !important;
  margin-inline: auto !important;
}

/* The Theme Builder footer is full-bleed wherever Divi puts it. */
html body.k-store .et-l--footer,
html body.k-store .et-l--footer .et_builder_inner_content,
html body.k-store .k-footer {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
}
html body.k-store .et-l--footer { position: relative; z-index: 1; }