/* IDC Tech · idctech.tech · contact@idctech.tech
   r10 store (D491, D492): the store pages in the site's look, in Arabic laid out right to left. Loaded by inc/kaizen-r10-shop.php on the
   store pages only (shop, products, product categories, product search, cart, checkout with order-received, My account), after
   kz-r5.css (wp_enqueue_scripts 10002), versioned by its file time; every rule is scoped under body.kz-shop, the body class the same file
   gives those pages. The tokens are r5's (css/kz-r5.css): Almarai, ink, teal pills, 12 / 20 px radii, a purple focus ring.
   Only WooCommerce's parts are styled (Divi's WooCommerce modules, WooCommerce's forms, tables, notices and buttons, the GS Woo
   Product Views cards and the shop toolbar), never Kaizen's Divi sections around them. Divi's module settings and the site's
   Additional CSS style the same parts with high specificity and !important, so the decisive properties here carry #page-container and
   !important. Arabic: logical properties, html[dir="rtl"] where a float or a direction must turn. */

/* ------------------------------------------------------------------ tokens */
body.kz-shop {
  --kz-font: "Almarai", Arial, sans-serif;
  --kz-ink: #141414;
  --kz-text: #383838;
  --kz-muted: #575a62;
  --kz-line: #e2e2ea;
  --kz-canvas: #f4f4f6;
  --kz-field: #cfd0d6;
  --kz-teal: #0bd0e2;
  --kz-teal-hover: #08b9c9;
  --kz-teal-ink: #086b72;
  --kz-teal-soft: #e3f8fa;
  --kz-purple: #4b1575;
  --kz-link: #1f4fd1;
  --kz-error: #b42318;
  --kz-error-soft: #fdecea;
  --kz-radius: 20px;
  --kz-radius-sm: 12px;
}

/* ------------------------------------------------------------------ the WooCommerce parts: font, text, focus */
body.kz-shop :is(.woocommerce, [class*="et_pb_wc_"], .kz-shop-tools, .gs_wps_area) { font-family: var(--kz-font); }
body.kz-shop :is(.woocommerce, [class*="et_pb_wc_"], .kz-shop-tools) { max-width: 100%; }
html[lang="ar"] body.kz-shop :is(.woocommerce-notices-wrapper, .woocommerce-privacy-policy-text, .payment_box, .woocommerce-thankyou-order-received, .woocommerce-order-overview) { line-height: 1.9; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"], .kz-shop-tools, .gs_wps_area) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--kz-purple) !important;
  outline-offset: 2px !important;
}
body.kz-shop .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* headings WooCommerce prints (Your details, Your order, Cart totals, order details) */
html body.kz-shop #page-container :is(.woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #order_review_heading, .cart_totals > h2, .cross-sells > h2, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details > h2, .woocommerce-MyAccount-content h2, .woocommerce-form-login h2, .u-column1 > h2, .u-column2 > h2) {
  font-family: var(--kz-font) !important;
  font-weight: 800 !important;
  color: var(--kz-ink) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: start;
  line-height: 1.4;
  margin: 0 0 16px;
  padding: 0;
}

/* ------------------------------------------------------------------ buttons: r5's primary pill (teal, black text), secondary actions as r5's ghost
   (the order button is named by its id as an attribute, [id="place_order"]: an id inside the :is() gave every button in it the id's
   weight, 2,2,3, over the ghost rules' 1,5,3; now the pill rule weighs 1,3,3 and the ghost rules win for Update cart, Apply coupon and
   Return to shop. Divi 5.18.1's own WooCommerce module button rules weigh 1,2,1 to 1,2,2, and 3,1,1 for the order button, as before) */
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(a.button, button.button, input.button, button[id="place_order"], a.checkout-button, button.single_add_to_cart_button) {
  min-height: 48px !important;
  padding: 10px 26px !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: var(--kz-teal) !important;
  color: #000 !important;
  font-family: var(--kz-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center;
  box-shadow: none !important;
  cursor: pointer;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) a.button { display: inline-flex; align-items: center; justify-content: center; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(a.button, button.button, input.button, button[id="place_order"], a.checkout-button, button.single_add_to_cart_button):is(:hover, :focus-visible) {
  background: var(--kz-teal-hover) !important;
  color: #000 !important;
}
/* Divi's hover arrow is an icon-font glyph; the pills have none (WooCommerce's loading spinner stays) */
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(a.button, button.button, input.button, button[id="place_order"], a.checkout-button, button.single_add_to_cart_button):not(.loading)::after {
  content: none !important;
  display: none !important;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(a.button, button.button, input.button):is([name="update_cart"], [name="apply_coupon"], .wc-backward, .woocommerce-button.view, .woocommerce-Button--previous, .woocommerce-Button--next) {
  background: #fff !important;
  color: var(--kz-ink) !important;
  border: 1px solid var(--kz-field) !important;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(a.button, button.button, input.button):is([name="update_cart"], [name="apply_coupon"], .wc-backward, .woocommerce-button.view, .woocommerce-Button--previous, .woocommerce-Button--next):is(:hover, :focus-visible) {
  background: #fff !important;
  border-color: var(--kz-ink) !important;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(button, input):disabled { opacity: .55; cursor: not-allowed; }
html body.kz-shop #page-container .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; }

/* ------------------------------------------------------------------ fields: 48 px, 12 px radius, 16 px text (no zoom on phones), purple focus */
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(.form-row input.input-text, .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="password"], .form-row input[type="number"], .form-row textarea, .form-row select, input#coupon_code, .quantity input.qty) {
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--kz-field) !important;
  border-radius: var(--kz-radius-sm) !important;
  background: #fff !important;
  color: var(--kz-ink) !important;
  font-family: var(--kz-font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row textarea { min-height: 120px !important; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(.form-row input, .form-row textarea, .form-row select, input#coupon_code, .quantity input.qty):focus {
  border-color: var(--kz-purple) !important;
}
/* placeholders #575a62 (6.90:1 on white). Divi 5.18.1's checkout billing / shipping presets set them with !important
   (.woocommerce .preset--module--divi-woocommerce-checkout-billing--default .checkout .form-row input.input-text::placeholder, 0,5,2,
   and the shipping preset's textarea.input-text, the order notes), so the rule without !important never applied on the checkout (line
   re-check, 8 November: rgba(0,0,0,.6) on every field); with !important this rule (1,3,4) wins */
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row :is(input, textarea)::placeholder { color: var(--kz-muted) !important; opacity: 1; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .quantity input.qty { width: 5em; text-align: center; padding-inline: 8px !important; }
html body.kz-shop #page-container .select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1px solid var(--kz-field) !important;
  border-radius: var(--kz-radius-sm) !important;
  display: flex;
  align-items: center;
}

/* labels in sentence case: no capitals by CSS (the Arabic page's "JOB TITLE" came from a capitalising rule), 15 px, bold, on the
   reading side; the required mark after the text */
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row label {
  display: block;
  margin: 0 0 6px !important;
  color: var(--kz-ink) !important;
  font-family: var(--kz-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: start !important;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row label :is(.required, abbr.required) {
  color: var(--kz-error) !important;
  text-decoration: none !important;
  border: 0 !important;
  font-weight: 700;
  margin-inline-start: 2px;
}
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row label .optional { color: var(--kz-muted); font-weight: 400; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row { text-align: start; }
html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .form-row :is(input.input-text, textarea, select) { text-align: start; }

/* Arabic: phone numbers and e-mail addresses are typed left to right, aligned to the right (as the theme's MOB-05 does for CF7) */
html[dir="rtl"] body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) :is(input[type="tel"], input[type="email"], input#billing_phone, input#billing_email) {
  direction: ltr !important;
  text-align: right !important;
}

/* the paired fields: first at the start side, last at the end side (WooCommerce's float and Divi's two-column layout mirrored in
   Arabic, the clear with the float: WooCommerce's own clear, left on the first and right on the last, put the last name under the
   right-floated first name); one column on phones */
@media (min-width: 769px) {
  html[dir="rtl"] body.kz-shop #page-container :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, .woocommerce-address-fields, form) .form-row-first { float: right !important; clear: right !important; }
  html[dir="rtl"] body.kz-shop #page-container :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, .woocommerce-address-fields, form) .form-row-last { float: left !important; clear: left !important; }
  html[dir="rtl"] body.kz-shop #page-container .et_pb_wc_checkout_billing.et_pb_fields_layout_2_column .form-row:nth-child(odd) { float: right !important; clear: right !important; }
  html[dir="rtl"] body.kz-shop #page-container .et_pb_wc_checkout_billing.et_pb_fields_layout_2_column .form-row:nth-child(2n) { float: left !important; clear: left !important; }
}
@media (max-width: 768px) {
  html body.kz-shop #page-container :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, .woocommerce-address-fields, form) :is(.form-row-first, .form-row-last),
  html body.kz-shop #page-container .et_pb_wc_checkout_billing .form-row {
    float: none !important;
    width: 100% !important;
    clear: both !important;
  }
}

/* ------------------------------------------------------------------ notices: the r5 palette, no icon (Divi 5.18.1's woocommerce.css hides
   WooCommerce's notice icon on the store pages, ::before display:none !important; hidden here too, so no page reserves a slot for it) */
html body.kz-shop #page-container :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews) {
  position: relative;
  margin: 0 0 20px !important;
  padding-block: 14px !important;
  padding-inline: 18px !important;
  border: 0 !important;
  border-inline-start: 4px solid var(--kz-teal) !important;
  border-radius: var(--kz-radius-sm) !important;
  background: var(--kz-teal-soft) !important;
  color: var(--kz-ink) !important;
  font-family: var(--kz-font) !important;
  font-size: 15px !important;
  line-height: 1.7;
  text-align: start !important;
  list-style: none;
}
html body.kz-shop #page-container .woocommerce-info { background: var(--kz-canvas) !important; border-inline-start-color: var(--kz-muted) !important; }
html body.kz-shop #page-container .woocommerce-error { background: var(--kz-error-soft) !important; border-inline-start-color: var(--kz-error) !important; }
html body.kz-shop #page-container :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none !important; }
html body.kz-shop #page-container :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: var(--kz-link) !important; text-decoration: underline; }
html body.kz-shop #page-container :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { float: none !important; margin-inline-start: 12px; vertical-align: middle; }
html body.kz-shop #page-container .woocommerce-error li { margin: 0 !important; padding: 0 !important; }

/* ------------------------------------------------------------------ tables (cart, order review, order details, orders): start-aligned, amounts at the end side */
html body.kz-shop #page-container table.shop_table {
  width: 100%;
  border: 1px solid var(--kz-line) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--kz-radius-sm) !important;
  overflow: hidden;
  font-family: var(--kz-font);
  color: var(--kz-text);
}
html body.kz-shop #page-container table.shop_table :is(th, td) { padding: 12px 16px !important; border-color: var(--kz-line) !important; vertical-align: middle; }
html body.kz-shop #page-container table.shop_table th { color: var(--kz-ink); font-weight: 800; }
html body.kz-shop #page-container table.shop_table .amount { font-weight: 700; color: var(--kz-ink); }
@media (min-width: 769px) {
  /* the cart-totals module's own CSS sets text-align: right in both languages; English reads left to right again */
  html body.kz-shop #page-container table.shop_table,
  html body.kz-shop #page-container table.shop_table :is(th, td) { text-align: start !important; }
  html body.kz-shop #page-container table.shop_table :is(th.product-price, th.product-subtotal, th.product-total, td.product-price, td.product-subtotal, td.product-total, .cart-subtotal td, .order-total td, .tax-rate td, .tax-total td, .fee td, .woocommerce-shipping-totals td, tfoot td) { text-align: end !important; }
  html body.kz-shop #page-container table.shop_table :is(td.product-remove, td.product-thumbnail, td.product-quantity) { text-align: start !important; }
}
@media (max-width: 768px) {
  /* WooCommerce's responsive table: the label at the start side, the value at the end side */
  html[dir="rtl"] body.kz-shop #page-container table.shop_table_responsive tr td { text-align: left !important; }
  html[dir="rtl"] body.kz-shop #page-container table.shop_table_responsive tr td::before { float: right !important; }
  html:not([dir="rtl"]) body.kz-shop #page-container table.shop_table_responsive tr td { text-align: right !important; }
  html:not([dir="rtl"]) body.kz-shop #page-container table.shop_table_responsive tr td::before { float: left !important; }
}
html body.kz-shop #page-container table.shop_table td.product-thumbnail img { width: 64px; height: auto; border-radius: 8px; }

/* ------------------------------------------------------------------ the request option (payment box), the privacy text, the order button */
html body.kz-shop #page-container #payment {
  background: var(--kz-canvas) !important;
  border-radius: var(--kz-radius) !important;
  font-family: var(--kz-font);
  color: var(--kz-text);
}
html body.kz-shop #page-container #payment ul.payment_methods {
  margin: 0 !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--kz-line) !important;
  list-style: none !important;
  text-align: start;
}
html body.kz-shop #page-container #payment ul.payment_methods li { list-style: none !important; margin: 0; text-align: start; }
html body.kz-shop #page-container #payment ul.payment_methods li > label {
  display: inline;
  color: var(--kz-ink) !important;
  font-family: var(--kz-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body.kz-shop #page-container #payment ul.payment_methods li input.input-radio { margin-block: 0 !important; margin-inline: 0 10px !important; vertical-align: middle; accent-color: var(--kz-purple); }
html body.kz-shop #page-container #payment div.payment_box {
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: var(--kz-radius-sm) !important;
  background: #fff !important;
  color: var(--kz-text) !important;
  font-family: var(--kz-font) !important;
  font-size: 15px !important;
  line-height: 1.8;
  text-align: start !important;
  text-transform: none !important;
}
html body.kz-shop #page-container #payment div.payment_box::before { display: none !important; }
html body.kz-shop #page-container #payment div.payment_box p:last-child { margin-bottom: 0; padding-bottom: 0; }
html body.kz-shop #page-container #payment div.form-row.place-order { margin: 0 !important; padding: 18px 20px !important; }
html body.kz-shop #page-container :is(#payment, .woocommerce) .woocommerce-privacy-policy-text { margin: 0 0 14px; color: var(--kz-muted); font-size: 14px; text-align: start; }
html body.kz-shop #page-container .woocommerce-privacy-policy-text a { color: var(--kz-link); text-decoration: underline; }
html body.kz-shop #page-container #payment button#place_order { float: none !important; width: 100%; }
/* the checkout's "Returning customer?" reminder: the r10 file's option filter keeps WooCommerce's checkout/form-login.php (which Divi's
   Cart Notice module prints on the front end) from printing it; this hides it should any other path print it (review item 6) */
html body.kz-shop #page-container .woocommerce-form-login-toggle { display: none !important; }

/* ------------------------------------------------------------------ order received (the request's summary and instructions) */
html body.kz-shop #page-container .woocommerce-order :is(.woocommerce-notice, .woocommerce-thankyou-order-received) { font-weight: 800; color: var(--kz-ink); font-size: 18px; text-align: start; }
html body.kz-shop #page-container ul.woocommerce-order-overview { list-style: none; margin: 0 0 24px !important; padding: 16px 20px !important; border-radius: var(--kz-radius-sm); background: var(--kz-canvas); display: flex; flex-wrap: wrap; gap: 12px 28px; }
html body.kz-shop #page-container ul.woocommerce-order-overview li { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: start; text-transform: none !important; font-size: 13px; color: var(--kz-muted); }
html body.kz-shop #page-container ul.woocommerce-order-overview li strong { display: block; font-size: 15px; color: var(--kz-ink); }

/* ------------------------------------------------------------------ product pages: only WooCommerce's parts inside Kaizen's layouts */
html body.kz-shop #page-container :is(.et_pb_wc_price, .summary) .price { color: var(--kz-ink) !important; font-family: var(--kz-font) !important; font-weight: 800 !important; }
html body.kz-shop #page-container .woocommerce-breadcrumb { font-family: var(--kz-font); color: var(--kz-muted); font-size: 14px; }
html body.kz-shop #page-container .woocommerce-breadcrumb a { color: var(--kz-muted); text-decoration: none; }
html body.kz-shop #page-container .woocommerce-breadcrumb a:hover { color: var(--kz-ink); text-decoration: underline; }
html body.kz-shop #page-container :is(.et_pb_wc_add_to_cart, .summary) form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html body.kz-shop #page-container :is(.et_pb_wc_add_to_cart, .summary) form.cart .quantity { margin: 0 !important; float: none !important; }
html body.kz-shop #page-container :is(.et_pb_wc_add_to_cart, .summary) form.cart button.single_add_to_cart_button { float: none !important; }

/* ------------------------------------------------------------------ the shop page: GS Woo Product Views cards (style 4) */
html body.kz-shop .gs_wps_area .gswps-product-box { border-radius: var(--kz-radius) !important; overflow: hidden; }
html body.kz-shop .gs_wps_area :is(.gs_wps_title, .gs_wps_title a) {
  font-family: var(--kz-font) !important;
  font-weight: 800 !important;
  color: var(--kz-ink) !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none;
}
html body.kz-shop .gs_wps_area .gs_wps_title a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
html body.kz-shop .gs_wps_area :is(.price, .price .amount) { color: var(--kz-ink) !important; font-family: var(--kz-font) !important; font-weight: 800 !important; }
html body.kz-shop .gs_wps_area .gswps-short-desc { font-family: var(--kz-font); color: var(--kz-text); }
html body.kz-shop .gs_wps_area .gswps-product-box .gswps-product-cart button {
  min-height: 48px;
  padding: 10px 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--kz-teal) !important;
  color: #000 !important;
  font-family: var(--kz-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}
html body.kz-shop .gs_wps_area .gswps-product-box .gswps-product-cart button:is(:hover, :focus-visible) { background-color: var(--kz-teal-hover) !important; color: #000 !important; }

/* ------------------------------------------------------------------ the shop toolbar (B.3): search, category buttons, status, empty state */
body.kz-shop .kz-shop-tools { display: grid; gap: 14px; margin: 0 0 28px; color: var(--kz-text); text-align: start; }
body.kz-shop .kz-shop-search { display: flex; align-items: stretch; gap: 10px; max-width: 640px; margin: 0; padding: 0; }
body.kz-shop .kz-shop-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--kz-field);
  border-radius: 999px;
  background: #fff;
  color: var(--kz-ink);
  font-family: var(--kz-font);
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
body.kz-shop .kz-shop-search input[type="search"]:focus { border-color: var(--kz-purple); }
body.kz-shop .kz-shop-search input[type="search"]::placeholder { color: var(--kz-muted); opacity: 1; }
body.kz-shop .kz-shop-search .kz-shop-go {
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--kz-ink);
  color: #fff;
  font-family: var(--kz-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
body.kz-shop .kz-shop-search .kz-shop-go:hover { background: #000; }
body.kz-shop .kz-shop-cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.kz-shop .kz-shop-cats li { margin: 0; padding: 0; list-style: none; }
body.kz-shop .kz-shop-cats a.kz-shop-cat {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 18px;
  border: 1px solid var(--kz-field);
  border-radius: 999px;
  background: #fff;
  color: var(--kz-ink);
  font-family: var(--kz-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
body.kz-shop .kz-shop-cats a.kz-shop-cat:hover { border-color: var(--kz-ink); }
body.kz-shop .kz-shop-cats a.kz-shop-cat[aria-current] { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; }
body.kz-shop .kz-shop-status { margin: 0; padding: 0; color: var(--kz-muted); font-size: 15px; }
body.kz-shop .kz-shop-status:empty { display: none; }
body.kz-shop .kz-shop-empty { margin: 0; padding: 28px 20px; border-radius: var(--kz-radius); background: var(--kz-canvas); text-align: center; }
body.kz-shop .kz-shop-empty[hidden] { display: none !important; }
body.kz-shop .kz-shop-empty p { margin: 0 0 12px; padding: 0; color: var(--kz-ink); font-weight: 700; }
body.kz-shop .kz-shop-empty a.kz-shop-reset { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 20px; border-radius: 999px; background: var(--kz-teal); color: #000; font-weight: 800; text-decoration: none; }
body.kz-shop .kz-shop-empty a.kz-shop-reset:hover { background: var(--kz-teal-hover); }
body.kz-shop .kz-shop-tools :focus-visible { outline: 3px solid var(--kz-purple); outline-offset: 2px; }
@media (max-width: 767px) {
  body.kz-shop .kz-shop-search { max-width: none; }
  body.kz-shop .kz-shop-search .kz-shop-go { padding: 0 18px; }
}

/* ------------------------------------------------------------------ My account (a guest sees the login form): the menu at the start side, a row on phones */
html body.kz-shop #page-container .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; }
html body.kz-shop #page-container .woocommerce-MyAccount-navigation li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body.kz-shop #page-container .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--kz-radius-sm); color: var(--kz-ink) !important; font-weight: 700; text-decoration: none; }
html body.kz-shop #page-container .woocommerce-MyAccount-navigation li a:hover { background: var(--kz-canvas); }
html body.kz-shop #page-container .woocommerce-MyAccount-navigation li.is-active a { background: var(--kz-ink); color: #fff !important; }
@media (min-width: 769px) {
  /* the menu and the content of My account: WooCommerce's own RTL layout CSS floats them (the navigation right, the content left) */
  html[dir="rtl"] body.kz-shop #page-container .col2-set .col-1 { float: right !important; }
  html[dir="rtl"] body.kz-shop #page-container .col2-set .col-2 { float: left !important; }
}
@media (max-width: 768px) {
  html body.kz-shop #page-container .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}
html body.kz-shop #page-container :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
  border: 1px solid var(--kz-line) !important;
  border-radius: var(--kz-radius) !important;
  padding: 24px !important;
  text-align: start;
}

/* ------------------------------------------------------------------ phones: nothing wider than the screen */
@media (max-width: 767px) {
  body.kz-shop :is(.woocommerce, [class*="et_pb_wc_"]) img { max-width: 100%; height: auto; }
  html body.kz-shop #page-container table.shop_table { table-layout: auto; }
  html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .coupon { display: flex; flex-wrap: wrap; gap: 10px; }
  html body.kz-shop #page-container :is(.woocommerce, [class*="et_pb_wc_"]) .coupon :is(input#coupon_code, button) { width: 100% !important; float: none !important; margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.kz-shop :is(.woocommerce, [class*="et_pb_wc_"], .kz-shop-tools, .gs_wps_area) * { transition: none !important; }
}
/* END r10 store */