/* Kolmaax Volt -- the WooCommerce-only pieces. kolmaax.css is the Shopify
 * theme's stylesheet unchanged; this file styles what only WooCommerce
 * renders (notices, account pages, the order-tracking form, the cart and
 * checkout blocks) in the same tokens, plus the few things this edition adds
 * (checkout header, Buy it now, spam honeypot). WooCommerce's own front-end
 * CSS is switched off (inc/woo.php), so nothing here fights it. */

/* honeypot field on the contact + newsletter forms: off-screen, not display:none (some bots skip hidden inputs) */
.kx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- checkout header */
.hdr--checkout .hdr__bar { justify-content: space-between; gap: 16px; }
.hdr__secure { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 13px/1 var(--font-display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.hdr__secure svg { width: 18px; height: 18px; }
.hdr__help { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; text-decoration: none; }
.hdr__help svg { width: 18px; height: 18px; }
@media (max-width: 759px) { .hdr__help span { display: none; } .hdr__secure span { font-size: 12px; } }
.ftr--checkout { padding-top: 0; }
.ftr__checkout-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.ftr__checkout-links a { color: inherit; font-size: 13px; }

/* ------------------------------------------------------------ product */
.opt--static { margin: 14px 0 4px; font-size: 14px; color: var(--muted); }
.opt--static b { color: var(--ink); }
.pdp__dyn { margin-top: 10px; }
.pdp__now { min-height: 52px; }
.pdp__form .cartd__err, .pcard__add .cartd__err { margin: 10px 0 0; color: var(--sale); font-size: 13px; font-weight: 600; }
html.no-js [data-variant-select] { position: static !important; width: 100% !important; height: auto !important; clip: auto !important; margin: 10px 0 !important; }

/* ------------------------------------------------------------ notices */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
  list-style: none; margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--green-tint); border: 1.5px solid #c9e3b3; color: var(--ink); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.woocommerce-info { background: var(--paper); border-color: var(--line-2); }
.woocommerce-error { background: #fdecea; border-color: #f2b8b0; color: #6b1a10; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* --------------------------------------------- WooCommerce buttons + forms */
.woocommerce-page .button, .woocommerce .button, button.button, a.button, .wc-block-components-button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--pill); border: 1.5px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 14px/1 var(--font-display); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase;
}
.woocommerce-page .button:hover, .woocommerce .button:hover { background: var(--green-ink); border-color: var(--green-ink); }
.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { background: var(--volt) !important; border-color: var(--volt) !important; color: var(--ink) !important; min-height: 56px !important; }
.wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit-button:hover { background: var(--volt-2) !important; border-color: var(--volt-2) !important; }
.woocommerce form .form-row { margin: 0 0 14px; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--sale); text-decoration: none; }

/* ------------------------------------------------- cart / checkout pages */
.wc-page { max-width: var(--container); }
.wc-page .page-title { font-stretch: 120%; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.template-checkout .wc-page .breadcrumbs { display: none; }
.wc-block-components-title, .wc-block-components-checkout-step__title { font-family: var(--font-display) !important; font-weight: 800 !important; font-stretch: 112%; }
.wc-block-components-totals-item__value, .wc-block-components-product-price { font-family: var(--font-display); font-weight: 800; }
.wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar { font-family: var(--font-body); }
.wc-block-components-sidebar .wc-block-components-panel, .wp-block-woocommerce-checkout-order-summary-block, .wp-block-woocommerce-cart-totals-block {
  background: var(--paper); border-radius: var(--r); }
.wp-block-woocommerce-checkout-order-summary-block, .wp-block-woocommerce-cart-totals-block { padding: 8px 18px 18px; border: 1px solid var(--line); }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-blocks-components-select__select {
  border-radius: var(--r-sm) !important; border: 1.5px solid var(--line-2) !important; }
.wc-block-components-text-input.is-active input:focus, .wc-block-components-text-input input:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(198,244,50,.55) !important; }
.wc-block-cart .wc-block-cart-items__header { font: 700 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wc-block-components-product-name { font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------- my account */
.woocommerce-account .wc-content .woocommerce { display: grid; gap: 28px; }
@media (min-width: 900px) { .woocommerce-account .wc-content .woocommerce { grid-template-columns: 240px 1fr; align-items: start; } }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; font-size: 14px; }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--panel); }
.woocommerce-MyAccount-content { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.woocommerce-account .u-columns { display: grid; gap: 22px; }
@media (min-width: 900px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-form-login, .woocommerce-form-register, .track_order {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; max-width: 560px; }
.woocommerce-orders-table, .shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-orders-table th, .woocommerce-orders-table td, .shop_table th, .shop_table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.woocommerce-form__label-for-checkbox input { width: 18px; min-height: 0; }

/* order tracking page form */
.track_order p { margin: 0 0 12px; }
.track_order .form-row-first, .track_order .form-row-last { width: 100%; }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 22px; }

/* ------------------------------------------------------- pagination gap */
.pagination span:not([aria-current]) { border-color: transparent; background: transparent; }

/* .section--tight resets ALL padding, so on a .container it removed the side
   gutter and pages ran edge to edge (the Shopify stylesheet has the same
   order; fixed here for every page that pairs the two classes). */
.container.section--tight { padding-left: var(--gutter); padding-right: var(--gutter); }