/* ==========================================================================
   KETNAL CREATIONS — SHOP
   WooCommerce in the site's own design. Loaded only on shop, product, cart,
   checkout and account pages (inc/shop.php). The shop and product templates
   use the site's components (cards, crumbs, quick links), so most of this
   file dresses WooCommerce's own markup: its buttons, forms, notices, the
   cart and checkout (classic and block versions) and the account area.
   ========================================================================== */

/* --------------------------------------------------------- page clearance
   The header is fixed, so every shop page starts below it. */
body.ketnal-shop .k-shophero,
body.ketnal-shop .k-product { padding-top: calc(var(--k-header-h) + 3.5rem); }
body.ketnal-shop:not(.woocommerce-shop):not(.single-product):not(.tax-product_cat) #main-content {
  padding-top: calc(var(--k-header-h) + 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
body.ketnal-shop #main-content > .container {
  width: 100%;
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-pad-x);
  box-sizing: border-box;
}
body.ketnal-shop #main-content .container::before,
body.ketnal-shop #sidebar { display: none; }
body.ketnal-shop #left-area { width: 100%; padding: 0; float: none; }
body.ketnal-shop .entry-title,
body.ketnal-shop .main_title { color: var(--k-chalk); font-size: var(--k-fs-h2); margin-bottom: 1.5rem; }

/* ------------------------------------------------------------- shop page */
.k-shophero { position: relative; }
.k-shophero .k-crumbs { margin-bottom: 1rem; }
.k-shophero .k-h1 { margin: 0.4rem 0 0; }
.k-shophero__lead { max-width: 58ch; margin: 1rem 0 0; }
.k-quick__link.is-current {
  border-color: rgba(208, 52, 59, 0.7);
  background: rgba(208, 52, 59, 0.18);
}

.k-shopcat { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.k-shopcat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--k-line);
}
.k-shopcat__head .k-h3 { margin: 0; }
.k-shopcat__head p { margin: 0; color: var(--k-mute); font-size: var(--k-fs-sm); }
.k-shopcat .k-plans__grid { margin-top: 1.5rem; }
.k-shopcat__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A category with a single product gets one wide card: name, price and
   button on the left, what is included on the right. */
.k-shopcat__grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 821px) {
  .k-shopcat__grid--1 .k-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "name list"
      "tag  list"
      "price list"
      "note list"
      "cta  list";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    padding: clamp(1.75rem, 3vw, 2.5rem);
  }
  .k-shopcat__grid--1 .k-plan__name { grid-area: name; }
  .k-shopcat__grid--1 .k-plan__tag { grid-area: tag; }
  .k-shopcat__grid--1 .k-plan__price { grid-area: price; }
  .k-shopcat__grid--1 .k-plan__note { grid-area: note; }
  .k-shopcat__grid--1 .k-plan__list {
    grid-area: list;
    align-self: center;
    margin: 0;
    padding: 0 0 0 clamp(2rem, 5vw, 4.5rem);
    border-top: 0;
    border-left: 1px solid var(--k-line);
  }
  .k-shopcat__grid--1 .k-shopcard__cta { grid-area: cta; justify-items: start; margin-top: 1.5rem; max-width: 320px; }
}
.k-shopcat__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .k-shopcat__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .k-shopcat__grid--1,
  .k-shopcat__grid--2,
  .k-shopcat__grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.k-plan__name a { color: inherit; transition: color 0.3s var(--k-ease); }
.k-plan__name a:hover { color: var(--k-ember-soft); }
.k-shopcard__cta { display: grid; justify-items: center; gap: 0.75rem; }
.k-shopcard__more { font-size: var(--k-fs-sm); }
/* WooCommerce's "View cart" link after an AJAX add. */
.k-shopcard__cta .added_to_cart {
  font-size: var(--k-fs-sm);
  font-weight: 600;
  color: var(--k-ember-soft);
}
.k-shopcard__cta .add_to_cart_button.loading { opacity: 0.7; pointer-events: none; }
.k-shopcard__cta .add_to_cart_button.added::after { content: ' \2713'; }

/* ---------------------------------------------------------- product page */
.k-product { position: relative; }
.k-product .k-crumbs { margin-bottom: 1.75rem; }
.k-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .k-product__grid { grid-template-columns: minmax(0, 1fr); } }
.k-product__media {
  border-radius: var(--k-r-xl);
  overflow: hidden;
  border: 1px solid var(--k-line);
  background: var(--k-ink-900);
  aspect-ratio: 1;
}
.k-product__img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) { .k-product__media { position: sticky; top: calc(var(--k-header-h) + 2rem); } }

.k-product__buy .k-h2 { margin: 0.4rem 0 0; }
.k-product__buy .k-lead { margin: 0.75rem 0 0; }
.k-product__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 1.75rem 0 0;
}
.k-product__amount { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.k-product__amount s { text-decoration: none; color: var(--k-mute); font-size: var(--k-fs-h4); font-weight: 500; }
.k-product__amount b {
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--k-chalk);
  font-variant-numeric: tabular-nums;
}
.k-product__per { color: var(--k-mute); font-size: var(--k-fs-sm); }
.k-product__list { margin: 1.75rem 0 0; }
.k-product__form { margin-top: 1.75rem; }
.k-product__note { margin: 1rem 0 0; font-size: var(--k-fs-xs); color: var(--k-mute); }

/* WooCommerce's add-to-cart form: no quantity (one of each service). */
.k-product__form form.cart { display: grid; gap: 1.25rem; margin: 0; }
.k-product__form .quantity { display: none !important; }
.k-product__form .stock { display: none; }

/* Domain-name field */
.k-domainfield { display: grid; gap: 0.5rem; }
.k-domainfield__row { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: 0.5rem; }
@media (max-width: 420px) { .k-domainfield__row { grid-template-columns: minmax(0, 1fr); } }
.k-domainfield__hint { margin: 0; font-size: var(--k-fs-xs); color: var(--k-mute); }

/* ------------------------------------------- WooCommerce buttons, as k-btn */
body.ketnal-shop .woocommerce a.button,
body.ketnal-shop .woocommerce button.button,
body.ketnal-shop .woocommerce input.button,
body.ketnal-shop button.single_add_to_cart_button,
body.ketnal-shop .woocommerce #respond input#submit,
body.ketnal-shop .wc-block-components-button:not(.is-link),
body.ketnal-shop .wc-block-cart__submit-button,
body.ketnal-shop .wc-block-components-checkout-place-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.95rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--k-r-pill);
  background: linear-gradient(102deg, #dc4046, var(--k-ember) 52%, var(--k-orchid));
  color: #fff;
  font-family: var(--k-font);
  font-size: var(--k-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--k-shadow-ember);
  transition: filter 0.3s var(--k-ease), box-shadow 0.3s var(--k-ease);
}
body.ketnal-shop .woocommerce a.button:hover,
body.ketnal-shop .woocommerce button.button:hover,
body.ketnal-shop button.single_add_to_cart_button:hover,
body.ketnal-shop .wc-block-components-button:not(.is-link):hover {
  filter: brightness(1.09) saturate(1.05);
  box-shadow: var(--k-shadow-ember-hi);
  color: #fff;
}
body.ketnal-shop button.single_add_to_cart_button { width: 100%; }
body.ketnal-shop .woocommerce a.button::after,
body.ketnal-shop .woocommerce button.button::after { display: none; }

/* Divi's own WooCommerce buttons (.woocommerce-page button.button.alt, 0-3-1,
   and its :hover at 0-4-1) outweigh the rule above and turn the main button
   into a transparent, square, Divi-blue outline. These restate the look one
   step heavier. */
body.ketnal-shop.woocommerce-page :is(a, button, input).button,
body.ketnal-shop.woocommerce-page :is(a, button, input).button.alt {
  min-height: 3.2rem;
  padding: 0.95rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--k-r-pill);
  background: linear-gradient(102deg, #dc4046, var(--k-ember) 52%, var(--k-orchid));
  color: #fff;
  font-size: var(--k-fs-sm);
  font-weight: 600;
  line-height: 1.2 !important; /* Divi sets 1.7em !important */
}
body.ketnal-shop.woocommerce-page :is(a, button, input).button:hover,
body.ketnal-shop.woocommerce-page :is(a, button, input).button.alt:hover {
  padding: 0.95rem 1.85rem;
  border: 1px solid transparent;
  background: linear-gradient(102deg, #dc4046, var(--k-ember) 52%, var(--k-orchid));
  color: #fff;
}
body.ketnal-shop.woocommerce-page :is(a, button).button::after { display: none; }

/* ----------------------------------------------------------------- notices */
body.ketnal-shop .woocommerce-message,
body.ketnal-shop .woocommerce-info,
body.ketnal-shop .woocommerce-error,
body.ketnal-shop .wc-block-components-notice-banner {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(208, 52, 59, 0.3);
  border-radius: var(--k-r-sm);
  background: rgba(208, 52, 59, 0.07);
  color: var(--k-chalk);
  font-size: var(--k-fs-sm);
  list-style: none;
}
body.ketnal-shop .woocommerce-error { border-color: rgba(220, 64, 70, 0.55); background: rgba(220, 64, 70, 0.12); }
body.ketnal-shop .woocommerce-message::before,
body.ketnal-shop .woocommerce-info::before,
body.ketnal-shop .woocommerce-error::before { display: none; }
body.ketnal-shop .woocommerce-message .button,
body.ketnal-shop .woocommerce-info .button { float: right; min-height: 0; padding: 0.5rem 1rem; margin-left: 1rem; }
body.ketnal-shop .woocommerce-notices-wrapper:empty { display: none; }

.k-shopnote {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--k-r-md);
  border: 1px solid rgba(208, 52, 59, 0.3);
  background: linear-gradient(150deg, rgba(208, 52, 59, 0.12), rgba(16, 10, 11, 0.6));
  color: var(--k-faint);
  font-size: var(--k-fs-sm);
  line-height: 1.6;
}
.k-shopnote b { color: var(--k-chalk); margin-right: 0.25rem; }

/* ----------------------------------------------- cart, checkout, account
   Text and surfaces for both WooCommerce's classic templates and its Cart
   and Checkout blocks, which assume a light page by default. */
body.ketnal-shop .woocommerce,
body.ketnal-shop .wc-block-cart,
body.ketnal-shop .wc-block-checkout,
body.ketnal-shop .wp-block-woocommerce-cart,
body.ketnal-shop .wp-block-woocommerce-checkout { color: var(--k-faint); }
body.ketnal-shop .woocommerce h2,
body.ketnal-shop .woocommerce h3,
body.ketnal-shop .wc-block-components-title,
body.ketnal-shop .wc-block-components-checkout-step__title,
body.ketnal-shop .wc-block-cart-items__header,
body.ketnal-shop .wc-block-components-product-name,
body.ketnal-shop .wc-block-components-totals-item__label,
body.ketnal-shop .wc-block-components-totals-item__value,
body.ketnal-shop .wc-block-formatted-money-amount { color: var(--k-chalk); }
body.ketnal-shop .wc-block-components-product-name { font-weight: 600; text-decoration: none; }
body.ketnal-shop .wc-block-components-product-metadata,
body.ketnal-shop .wc-block-components-product-details,
body.ketnal-shop .wc-block-components-checkout-step__description { color: var(--k-mute); }

body.ketnal-shop table.shop_table,
body.ketnal-shop .wc-block-cart-items,
body.ketnal-shop .wc-block-components-sidebar .wc-block-components-panel,
body.ketnal-shop .wc-block-components-totals-wrapper,
body.ketnal-shop .wc-block-components-sidebar-layout .wc-block-components-sidebar,
body.ketnal-shop .cart_totals,
body.ketnal-shop .woocommerce-checkout-review-order {
  border-color: var(--k-line) !important;
}
body.ketnal-shop table.shop_table {
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-md);
  background: rgba(255, 255, 255, 0.02);
}
body.ketnal-shop table.shop_table th,
body.ketnal-shop table.shop_table td { border-color: var(--k-line); color: var(--k-faint); }
body.ketnal-shop .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  padding: 1.5rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  background: linear-gradient(160deg, var(--k-ink-800), var(--k-ink-900));
}

/* Form fields: classic and block */
body.ketnal-shop .woocommerce form .input-text,
body.ketnal-shop .woocommerce form select,
body.ketnal-shop .woocommerce form textarea,
body.ketnal-shop .wc-block-components-text-input input,
body.ketnal-shop .wc-block-components-combobox .components-combobox-control__input,
body.ketnal-shop .wc-blocks-components-select__select,
body.ketnal-shop .wc-block-components-textarea {
  border: 1px solid var(--k-line-strong) !important;
  border-radius: var(--k-r-sm) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--k-chalk) !important;
  font-family: var(--k-font);
}
/* Block checkout drop-downs (Country, Province) */
body.ketnal-shop .wc-blocks-components-select .wc-blocks-components-select__container {
  border: 1px solid var(--k-line-strong) !important;
  border-radius: var(--k-r-sm) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}
body.ketnal-shop .wc-blocks-components-select .wc-blocks-components-select__select {
  border: 0 !important;
  background: transparent !important;
  color: var(--k-chalk) !important;
}
body.ketnal-shop .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--k-mute); }
body.ketnal-shop .wc-blocks-components-select option { background: var(--k-ink-800); color: var(--k-chalk); }
body.ketnal-shop .wc-block-components-text-input label,
body.ketnal-shop .wc-block-components-combobox label,
body.ketnal-shop .wc-blocks-components-select__label,
body.ketnal-shop .woocommerce form label { color: var(--k-mute); }
body.ketnal-shop .wc-block-components-text-input.is-active label { color: var(--k-mute); }
body.ketnal-shop .wc-block-components-radio-control__option,
body.ketnal-shop .wc-block-components-radio-control-accordion-option { color: var(--k-faint); }
body.ketnal-shop .wc-block-components-checkbox__input { background: transparent; border-color: var(--k-line-strong); }
/* Links inside WooCommerce's own content only, never the header, footer or
   the shop's cards. */
body.ketnal-shop .woocommerce a:not(.button),
body.ketnal-shop .wc-block-cart a:not(.wc-block-components-button):not(.wc-block-components-product-name),
body.ketnal-shop .wc-block-checkout a:not(.wc-block-components-button) { color: var(--k-ember-soft); }

/* Account area */
body.ketnal-shop .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ketnal-shop .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: var(--k-r-sm);
  border: 1px solid var(--k-line);
  color: var(--k-faint) !important;
}
body.ketnal-shop .woocommerce-MyAccount-navigation .is-active a {
  border-color: rgba(208, 52, 59, 0.6);
  background: rgba(208, 52, 59, 0.12);
  color: var(--k-chalk) !important;
}

/* Price suffix wherever WooCommerce prints a price */
.k-price__per { font-size: 0.8em; font-weight: 400; color: var(--k-mute); }