/* Naturali commerce styling.
   Palette and fonts come from Kadence globals; this handles shape, the buy zone
   and the mobile buy bar. Shape lock matches the homepage: pill interactive,
   18px cards, 22px media. */

:root {
  --nat-pill: 999px;
  --nat-teal: var(--global-palette10, #2e9e8e);
  --nat-navy: var(--global-palette3, #1a1a4e);
  --nat-btn:  var(--global-palette1, #3a3a93);
}

/* ---------- Buttons: pill, to match the homepage ---------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.single_add_to_cart_button,
.checkout-button {
  border-radius: var(--nat-pill) !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover { transform: translateY(-2px); }
.woocommerce .button:active,
.single_add_to_cart_button:active { transform: translateY(0) scale(.99); }

/* Visible keyboard focus, which the theme did not provide. */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible {
  outline: 3px solid var(--nat-teal);
  outline-offset: 3px;
}

/* ---------- PDP buy zone ---------- */
.single-product .single_add_to_cart_button {
  min-height: 52px;
  padding: 14px 34px;
  font-size: 16px;
  box-shadow: 0 8px 22px rgba(58,58,147,.24);
}
.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.single-product .quantity input.qty { height: 52px; min-width: 68px; border-radius: 14px; text-align: center; }

/* Shopee link: below the button, smaller, clearly secondary. */
.naturali-shopee-secondary-cta {
  display: block; margin: 14px 0 0; font-size: 13.5px;
  color: var(--global-palette5, #6b6b85);
}
.naturali-shopee-secondary-cta a {
  color: var(--global-palette5, #6b6b85);
  text-decoration: underline; text-underline-offset: 3px;
}
.naturali-shopee-secondary-cta a:hover { color: var(--nat-navy); }

/* Product title */
.single-product .product_title { line-height: 1.15; margin-bottom: .35em; }

/* SKU is an internal string; keep it out of the customer's way. */
.single-product .sku_wrapper { font-size: 12px; color: var(--global-palette6, #9a9ab0); }

/* ---------- Shop ---------- */
.nat-shop-intro { max-width: 62ch; margin: 0 0 34px; }
.nat-shop-intro p { color: var(--global-palette5, #6b6b85); font-size: 16.5px; margin: 0 0 8px; }
.nat-shop-intro__note {
  display: inline-block; background: var(--global-palette7, #e8f5f5);
  color: #1f7a6c; font-weight: 600; font-size: 14px;
  padding: 8px 16px; border-radius: var(--nat-pill);
}
.woocommerce ul.products li.product { border-radius: 18px; overflow: hidden; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px; line-height: 1.3;
}

/* ---------- Cart / checkout ---------- */
.woocommerce-cart table.cart img { border-radius: 12px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  border-radius: 12px; min-height: 46px; padding: 10px 14px;
}
.woocommerce-checkout #payment { border-radius: 18px; }
.woocommerce-checkout #payment div.payment_box { border-radius: 12px; }

/* ---------- Sticky mobile buy bar ---------- */
.nat-buybar { display: none; }
@media (max-width: 781px) {
  .single-product .nat-buybar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e6e4dd;
    box-shadow: 0 -6px 24px rgba(26,26,78,.10);
  }
  .nat-buybar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .nat-buybar__name { font-size: 12.5px; color: var(--global-palette5,#6b6b85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nat-buybar__price { font-weight: 800; color: var(--nat-navy); font-size: 15px; }
  .nat-buybar__price del { opacity: .5; font-weight: 400; }
  .nat-buybar__btn {
    flex: 0 0 auto; background: var(--nat-btn); color: #fff;
    border-radius: var(--nat-pill); padding: 14px 24px;
    font-weight: 700; font-size: 15px; text-decoration: none;
    min-height: 48px; display: inline-flex; align-items: center;
  }
  .nat-buybar__btn:hover, .nat-buybar__btn:focus { color: #fff; }
  body.single-product { padding-bottom: 78px; }

  /* Full-width, thumb-sized buy controls on mobile. */
  .single-product form.cart { width: 100%; }
  .single-product .single_add_to_cart_button { flex: 1 1 100%; width: 100%; justify-content: center; }
  .woocommerce .button, .woocommerce a.button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce .button, .single_add_to_cart_button, .checkout-button { transition: none; }
  .woocommerce .button:hover, .single_add_to_cart_button:hover { transform: none; }
}

/* Loop cards: hide the "or subscribe to save 10%" suffix, which clutters the grid.
   Kept on the product page where the choice is actually made. Done in CSS because
   All Products for Subscriptions re-appends it after any filter priority. */
.woocommerce ul.products li.product .price .wcsatt-sub-options,
.woocommerce ul.products li.product .price .wcsatt-sub-discount { display: none; }