@charset "UTF-8";
/*!
* Theme Name: technocrat
* WooCommerce Light mode of the theme
* Description: Custom styles for the Technocrat Theme
* Author: kodx.me
* Version: 1.6.0
*/

/*
 
   _      _       _     _     _______ _                         
  | |    (_)     | |   | |   |__   __| |                        
  | |     _  __ _| |__ | |_     | |  | |__   ___ _ __ ___   ___ 
  | |    | |/ _` | '_ \| __|    | |  | '_ \ / _ \ '_ ` _ \ / _ \
  | |____| | (_| | | | | |_     | |  | | | |  __/ | | | | |  __/
  |______|_|\__, |_| |_|\__|    |_|  |_| |_|\___|_| |_| |_|\___|
             __/ |                                              
            |___/                                               
 
*/

/* ===========================================================
   Root Variables
   =========================================================== */
:root {
  /* Token definitions */
  /* colors */
  --color-primary: #c90032;
  --color-secondary: #010107;

  /* Text */
  --color-text-base: #55555e;
  --color-text-muted: #6c6d70;
  --color-pure: #ffffff;

  /* Backgrounds */
  --color-background-main: #fcfcfc;
  --color-background-alt: #f5f5f5;

  --color-highlight: #f1f1f1;
  --color-highlight-soft: #f9f9f9;
  --color-highlight-vivid: #ffffff;
  --color-accent: #c90032;
  --color-accent-dark: #2b2b2b;
  --color-font-discount-tag: #ffffff;

  /* Variables */
  /* --buttons */
  --button-add-cart-bg: var(--color-secondary);
  --button-add-cart-txt: var(--color-highlight-soft);
  --button-add-cart-bg-hov: var(--color-primary);
  --button-add-cart-txt-hov: var(--color-pure);
  /* Sales Tag */
  --sale-circle: var(--color-accent);
  --price-color: var(var(--color-primary));
  --price-color-del: var(--color-text-muted);
  --bread-crb-txt: var(--color-text-muted);
  --sorting-bg: var(--color-highlight-soft);
  --sorting-text: var(--color-secondary);
  --sorting-border: 1px solid var(--color-highlight);
  --wcom-info-bg: var(--color-highlight-soft);
  --wcom-info-text: var(var(--color-secondary));
  --checkout-msg-box-bg: var(var(--color-background-alt));

  --color-bg-discount-tag: var(--color-accent);
  --color-border-tag-cloud: var(--color-highlight);
  --woo-product-boxshadow: var(--color-highlight);
  --woo-table-bg-color: var(--color-highlight);

  --woo-price-slider-filter: var(--color-primary);
  --woo-price-slider-filter-mask: var(var(--color-accent-dark));
  /* cool red #E91E63 */
}
/* ===========================================================
   Typography
   =========================================================== */
/* Headings */
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce .related.products h2 {
  font-size: var(--h3-font-size);
}

.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  padding: 0.5em 0;
  margin: 0;
  font-size: 1em;
  font-size: 1rem;
  letter-spacing: normal;
}

.product_meta {
  font-size: 1rem;
  display: flex;
  flex-flow: column nowrap;
}

.woocommerce div.product .product_title {
  clear: none;
  margin-top: 0;
  padding: 0;
  font-size: var(--h4-font-size);
  letter-spacing: normal;
}

.woocommerce-result-count {
  font-size: 1rem;
}

.woocommerce .woocommerce-products-header__title.page-title {
  border-top: none;
  padding-top: 0px;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  color: var(--wc-form-color-text, #000) !important;
}

.woocommerce-info::before {
  color: var(--color-primary);
}

.woocommerce-info {
  border-top-color: var(--color-primary);
}

/* ===========================================================
   Buttons
   =========================================================== */
/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt {
  background-color: var(--button-add-cart-bg);
  color: var(--button-add-cart-txt);
  font-size: 1.25rem;
  font-weight: normal;
  padding: 14px 24px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.woocommerce ul.products li.product .button {
  font-size: 1rem;
  font-weight: 400;
  padding: 1rem 1.5rem;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt:hover {
  background-color: var(--button-add-cart-bg-hov);
  color: var(--button-add-cart-txt-hov);
}

/* Disabled Buttons */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button.alt:disabled[disabled]:hover {
  background-color: var(--button-add-cart-bg);
  color: var(--button-add-cart-txt);
}

/* Checkout Button */
.woocommerce .wc-proceede-to-checkout {
  background-color: var(--button-add-cart-bg) !important;
  color: var(--button-add-cart-txt) !important;
  font-size: 1.25rem;
  font-weight: normal;
  padding: 16px 24px;
  -webkit-font-smoothing: antialiased;
}
.woocommerce .wc-proceede-to-checkout:hover {
  background-color: var(--button-add-cart-bg-hov) !important;
  color: var(--button-add-cart-txt-hov) !important;
}

/* Coupon Input */
#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
  float: left;
  box-sizing: border-box;
  border: 1px solid #d3ced2;
  padding: 9px;
  margin: 0 4px 0 0;
  outline: 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  min-width: 145px;
  padding: 0;
}

/* Forward Button */
a.button.wc-forward {
  border: 1px solid #c3c4c7;
  padding: 0.25em 0.75em;
  border-radius: 6px;
}

/* ===========================================================
   Product Cards
   =========================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  padding: 16px;
  box-shadow: 0 0 0 8px var(--woo-product-boxshadow);
}

/* .woocommerce ul.products li.product a img {
  border: 1px solid var(--color-border-tag-cloud);
} */

.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  ul.products
  li.product
  .price {
  color: var(--price-color);
  text-align: center;
  font-size: 1.1em;
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  color: var(--price-color);
  font-weight: 400;
  font-size: 1em;
  margin: 0;
}

.woocommerce ul.products li.product .price del {
  opacity: 1;
  color: var(--price-color-del);
  margin-right: 8px;
  font-size: 85%;
  align-self: flex-end;
  font-weight: normal;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--price-color-del);
  font-size: 0.75em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--price-color);
  font-size: 1.25em;
}

/* Discount labels in widgets */
.widget-area .woocommerce mark,
.widget-area .woocommerce ins,
.site-footer-widget mark,
.site-footer-widget ins {
  background: var(--color-bg-discount-tag);
  text-decoration: none;
  color: var(--color-font-discount-tag);
  padding: 0 0.25em;
}

/* Product Title min height */
.woocommerce-loop-product__title {
  font-size: 1em;
  min-height: 4em;
}

/* Product tag cloud */
.tagcloud a {
  display: inline-block;
  padding: 6px 8px;
  border: 1px solid var(--color-border-tag-cloud);
  border-radius: 3px;
  margin: 0.25em;
  line-height: 1;
  background-color: var(--divider-color);
}

/* Product meta */
.product_meta {
  font-size: 1rem;
  display: flex;
  flex-flow: column nowrap;
}

/* Product images in widgets/footer */
.site-footer-widget [class^="product_"] li a img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
  width: 60px;
  height: auto;
  border-radius: 6px;
  float: right;
  margin-left: 4px;
  box-shadow: none;
}

/* Cart/product list widget styles */
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
  padding: 0.5em 0.5em 0.5em 1em;
  margin: 0.5em 0;
  list-style: none;
  display: flow-root;
}

/* Cart widget remove button */
.woocommerce .widget_shopping_cart .cart_list li a.remove,
.woocommerce.widget_shopping_cart .cart_list li a.remove {
  position: absolute;
  top: 10px;
  left: 12px;
  box-shadow: 2px 3px 0 0px #dedede;
}

.woocommerce .widget_shopping_cart .cart_list li,
.woocommerce.widget_shopping_cart .cart_list li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 3em;
  margin-bottom: 0.5em;
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
  border-top: 3px dashed #e9e6ed;
  padding: 0.5em;
  margin: 0.5em;
}

/* Changing sidebar font weight */
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
  font-weight: 400;
}

/* ===========================================================
   Tables
   =========================================================== */
.woocommerce table.shop_table {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 16px -1px 24px 0;
  width: 100%;
  border-collapse: separate;
  border-radius: 8px;
  background: var(--woo-table-bg-color);
  padding: 8px;
}

/* ===========================================================
   Breadcrumbs
   =========================================================== */
.woocommerce .woocommerce-breadcrumb {
  font-size: 16px;
  padding: 8px 0;
  color: var(--bread-crb-txt);
  line-height: calc(56px - 16px);
  border-top: 0px solid transparent;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--body-links-a);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--body-links-hover);
}

/* ===========================================================
   Price Filter
   =========================================================== */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: var(--woo-price-slider-filter);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--woo-price-slider-filter);
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--woo-price-slider-filter-mask);
}

/* ===========================================================
   Sale Badges
   =========================================================== */
.woocommerce span.onsale {
  padding: 0px;
  background-color: var(--sale-circle);
}

/* ===========================================================
   Miscellaneous / Other
   =========================================================== */
/* Customer page logged in */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  margin: 1em 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
  border-top: 1px solid var(--divider-color);
  float: none;
  width: auto;
}

/* =============================
    making account menu horizontal list
    ==================================== */
.woocommerce-MyAccount-navigation > ul {
    display: flex;
    flex-flow: row wrap;
    gap: 8px; /* Adds space between items */
    list-style: none;
    padding: 4px;
    margin: 0;
    align-items: center;
    justify-content: space-between;
}

.woocommerce-MyAccount-navigation li {
    flex: auto; /* Makes all buttons equal width */
    text-align: center;
    background: #00000008;
    border-radius: 8px;
    padding: 8px;
    margin: 0 !important;
}



/* Notices */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background-color: var(--wcom-info-bg);
  color: var(--wcom-info-text);
  margin-top: 0.8em;
}

/* Select2 dropdowns */
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  height: 2.1em;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #292929;
  line-height: 1;
}
.select2-results__option {
  color: #292929;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 40px;
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default
  .select2-results__option--highlighted[data-selected] {
  background-color: #393939;
  color: #f1f1f1;
}

/* Product search fields */
.widget-area .woocommerce-product-search .search-field,
.site-footer-widget .woocommerce-product-search .search-field {
  width: -moz-available;
  width: -webkit-fill-available;
  margin-bottom: 8px;
}
.widget-area .woocommerce-product-search button,
.site-footer-widget .woocommerce-product-search button {
  width: -moz-available;
  width: -webkit-fill-available;
}

/* No available payments notification box */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: var(--checkout-msg-box-bg);
}

/* Additional/Billing fields headings */
.woocommerce .woocommerce-additional-fields h3,
.woocommerce .woocommerce-billing-fields h3 {
  font-size: var(--h4-font-size);
  margin: 8px 0;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  outline: 0;
  line-height: 1;
}

/* Layered nav filters */
.woocommerce .widget_layered_nav_filters ul li {
  padding: 0.3em 1em;
  margin: 0.5em 0;
  list-style: none;
}

/* ===========================================================
   Media Queries
   =========================================================== */
@media only screen and (max-width: 1024px) {
  .woocommerce .woocommerce-breadcrumb {
    border-top: 0px solid transparent;
  }
  .site-footer-widget [class^="product_"] li a img {
    width: 32px;
    height: auto;
    border-radius: 6px;
    float: right;
  }
}