/*!
Theme Name: Liteframe
Theme URI: https://wpcut.com/liteframe/
Author: Aaryan Sharma
Author URI: https://i2m3.com/
Description: A Fast AF theme.
Version: 1.0.1
Tested up to: 8.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: liteframe

Liteframe is loosely based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   Screen Reader Text
   ========================================================================== */

.screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   word-wrap: normal !important;
}

.screen-reader-text:focus {
   background-color: #eee;
   clip: auto !important;
   clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;
   height: auto;
   left: 5px;
   line-height: normal;
   padding: 15px 23px 14px;
   text-decoration: none;
   top: 5px;
   width: auto;
   z-index: 100000;
   /* Above WP toolbar. */
}

/* ==========================================================================
   SVG Icons
   ========================================================================== */

span.icon {
   display: flex;
   justify-content: center;
   align-items: center;
}

.icon .svg-icon {
   width: 0.7rem;
   height: auto;
   color: var(--pico-color);
}

/* ==========================================================================
   Colors: Blue
   ========================================================================== */

/* Light color scheme (Default) 
   ========================================================================== */
[data-theme=light],
:root:not([data-theme=dark]) {
   --pico-text-selection-color: rgba(253, 112, 78, 0.1875);
   --pico-primary: #fd704e;
   --pico-primary-background: #ff7b55;
   --pico-primary-underline: rgba(253, 112, 78, 0.5);
   --pico-primary-hover: #ff9480;
   --pico-primary-hover-background: #e55a32;
   --pico-primary-focus: rgba(253, 112, 78, 0.375);
   --pico-primary-inverse: #000;

   /* Our Overrides */

   --pico-background-color: #fff;

   --pico-color: #484848;

   --pico-secondary-background: #1c1f2d;
   --pico-secondary-border: #95969d;
   --pico-secondary-hover-background: #d1d5e1;

   --main-gradient-color: #010808;
   --primary-gradient-light: #171e1e;

   --global-text-color: #484848;
   --global-light-text-color: #000;
   --global-light-background-color: #f6f8fa;
}

/* Dark color scheme (Auto) 
   ========================================================================== */
@media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
      --pico-text-selection-color: rgba(253, 112, 78, 0.1875);
      --pico-primary: #fd704e;
      --pico-primary-background: #ff7b55;
      --pico-primary-underline: rgba(253, 112, 78, 0.5);
      --pico-primary-hover: #ff9480;
      --pico-primary-hover-background: #e55a32;
      --pico-primary-focus: rgba(253, 112, 78, 0.375);
      --pico-primary-inverse: #fff;

      /* Our Overrides */

      --pico-background-color: #111322;

      --pico-color: #676a7f;

      --pico-secondary-background: #1c1f2d;
      --pico-secondary-border: #95969d;
      --pico-secondary-hover-background: #30374f;

      --main-gradient-color: #f6f8fa;
      --primary-gradient-light: #f0f3fb;

      --global-text-color: #676a7f;
      --global-light-text-color: #fff;
      --global-light-background-color: #f6f8fa;
   }

}

/* Dark color scheme (Forced) 
   ========================================================================== */
[data-theme=dark] {
   --pico-text-selection-color: rgba(253, 112, 78, 0.1875);
   --pico-primary: #fd704e;
   --pico-primary-background: #ff7b55;
   --pico-primary-underline: rgba(253, 112, 78, 0.5);
   --pico-primary-hover: #ff9480;
   --pico-primary-hover-background: #e55a32;
   --pico-primary-focus: rgba(253, 112, 78, 0.375);
   --pico-primary-inverse: #fff;

   /* Our Overrides */

   --pico-background-color: #111322;

   --pico-secondary-background: #1c1f2d;
   --pico-secondary-border: #95969d;
   --pico-secondary-hover-background: #30374f;

   --pico-color: #676a7f;

   --main-gradient-color: #f6f8fa;
   --primary-gradient-light: #f0f3fb;

   --global-text-color: #676a7f;
   --global-light-text-color: #fff;
   --global-light-background-color: #f6f8fa;
}

/* ==========================================================================
   Pico Overrides
   ========================================================================== */

:root {

   --pico-border-radius: 0.625rem;

   --pico-nav-element-spacing-vertical: 0.8rem;
   --pico-nav-element-spacing-horizontal: 1.2rem;

   --pico-form-element-spacing-vertical: 0.8rem;
   --pico-form-element-spacing-horizontal: 1.5rem;

   --static-light-color: #fff;
   --static-dark-color: #000;

   --static-light-on-dark-color: #a8a8a8;

   interpolate-size: allow-keywords;
}

/* ==========================================================================
   Font Sizes: Responsive
   ========================================================================== */

@media (min-width:576px) {
   :root {
      --pico-font-size: 95%
   }
}

@media (min-width:768px) {
   :root {
      --pico-font-size: 97.5%
   }
}

@media (min-width:1024px) {
   :root {
      --pico-font-size: 100%
   }
}

@media (min-width:1280px) {
   :root {
      --pico-font-size: 102.5%
   }
}

@media (min-width:1536px) {
   :root {
      --pico-font-size: 110%
   }
}

html {
   scroll-behavior: smooth;
}

body {
   letter-spacing: -0.5px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

body.no-move {
   overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   --pico-font-weight: 600;
}

h1 {
   --pico-font-size: 3.5rem;
}

/* ==========================================================================
   Banner: Top
   ========================================================================== */

.banner-top {
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
   padding: 0.73rem 5%;
   position: relative;
   width: 100%;
   margin: 0;
}

.banner-content {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
}

.banner-content .svg-icon {
   width: 1.1rem;
   --pico-color: #fff;
}

.banner-text {
   margin: 0;
   color: #fff;
   font-weight: 500;
   font-size: 0.85rem;
}

.banner-text a {
   background: transparent;
   color: #fff;
   text-decoration: underline;
   margin-left: 0.3rem;
}

.banner-text a:hover,
.banner-text a:active,
.banner-text a:focus {
   text-decoration: none;
   color: var(--global-text-color);
}

button#close-banner {
   position: absolute;
   right: 5%;
   padding: 0;
   margin: 0;
   background: transparent;
   border: none;
   transition: transform var(--pico-transition);
}

button#close-banner .svg-icon {
   width: 1.4rem;
   --pico-color: #fff;
}

button#close-banner:hover, button#close-banner:active, button#close-banner:focus {
   transform: scale(1.2);
}

/* ==========================================================================
   Text Effects
   ========================================================================== */

.grad-text {
   background: linear-gradient(90deg, #fd704e 19.68%, #ff9d84 38.7%, #ffd1d1 57.72%, #ff9d84 76.74%, #ff7a52 95.76%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
   border-left: 0.4rem solid var(--pico-primary);
   padding: 0.8rem;
   margin-left: 0;
   margin-bottom: 2rem;
   background-color: var(--global-light-background-color);
   word-wrap: break-word;
   font-size: 0.8rem;
}

.alert-danger {
   --pico-primary: --pico-form-element-invalid-active-border-color;
}

.alert-warning {
   --pico-primary: #f0ad4e;
}

.alert-success {
   --pico-primary: --pico-form-element-valid-active-border-color;
}

.alert-warning a {
   --pico-underline: var(--pico-primary);
}

/* ==========================================================================
   Better Tables
   ========================================================================== */

table {
   border: 1px solid var(--pico-form-element-border-color);
   border-collapse: separate;
   border-spacing: 0;
   empty-cells: show;
   font-size: 0.85rem;
   margin: 2.5rem 0;
   max-width: 100%;
   width: 100%;
   border-radius: .3rem;
}

.alignleft>table {
   margin: 0
}

.alignright>table {
   margin: 0
}

td,
th {
   border: 1px solid var(--pico-form-element-border-color);
   line-height: 1.4;
   margin: 0;
   overflow: visible;
   padding: .55rem .8rem;
   letter-spacing: normal
}

table tbody tr th:first-child {
   border-radius: .25rem 0 0 0
}

table tbody tr th:last-child {
   border-radius: 0 .25rem 0 0
}

thead {
   vertical-align: bottom;
   white-space: nowrap
}

td {
   font-weight: 500;
   font-size: 0.9rem
}

th {
   font-weight: 600;
   font-size: 0.9rem;
   background-color: var(--pico-form-element-background-color);
   padding: .55rem .8rem;
}

thead tr th:first-child {
   border-radius: .25rem 0 0 0
}

thead tr th:last-child {
   border-radius: 0 .25rem 0 0
}

tbody tr:last-child td:first-child {
   border-radius: 0 0 0 .25rem
}

tbody tr:last-child td:last-child {
   border-radius: 0 0 .25rem 0
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button-primary {
   background: var(--pico-primary);
   background-image: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
   border-top: 1px solid var(--static-light-on-dark-color);
   border-bottom: 1px solid var(--main-gradient-color);
   border-right: 1px solid var(--main-gradient-color);
   border-left: 1px solid var(--main-gradient-color);
   font-weight: 500;
   transition: border var(--pico-transition), color var(--pico-transition);
   --pico-color: var(--static-light-color);
}

.button-primary:hover,
.button-primary:active,
.button-primary:focus {
   border-color: var(--pico-primary);
   --pico-color: var(--pico-primary);
}

.button-secondary {
   color: var(--pico-form-element-border-color);
}

hr {
   border-top: 1px solid var(--pico-form-element-border-color);
   margin: 1.5rem 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

header.top-navigation {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 0;
   position: relative;
   gap: 1rem;
   background-color: #f5f5f5;
   margin-bottom: 1rem;
}

.header-upper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   max-width: calc(1400px + 5%);
   margin: 0 auto;
   width: 100%;
   padding: 1.2rem 5% 0 5%;
}

header .logo {
   color: var(--pico-primary-inverse);
   background-color: transparent;
}

header .logo:hover,
header .logo:active,
header .logo:focus {
   color: var(--pico-primary-background);
}

header .logo .svg-icon {
   width: 6.5rem;
   height: auto;
   transition: color var(--pico-transition);
}

header.top-navigation form[role=search] {
   max-width: 30rem;
   margin-right: auto;
   margin-bottom: 0;
}

header.top-navigation form[role=search] input {
   border-radius: 0.625rem !important;
   --pico-form-element-spacing-vertical: 0.65rem;
}

.auth-container {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 1.75rem;
}

.auth-container>* {
   --pico-form-element-spacing-vertical: 0.5rem;
}

.auth-container a {
   background: transparent;
   padding: 0;
   border: none;
   display: inline-flex;
   gap: 0.35rem;
   font-size: 0.85rem;
   font-weight: 500;
   line-height: 1;
   align-items: self-end;
   --pico-color: var(--global-text-color);
   text-align: left;
}

.auth-container a .icon .svg-icon {
   width: 1.3rem;
}

.auth-container a:hover {
   --pico-color: var(--static-dark-color);
}

.recent-order .icon {
   position: relative;
}

.recent-order .icon:before {
   --icon-size: 8px;
   content: "";
   width: var(--icon-size);
   height: var(--icon-size);
   line-height: var(--icon-size);

   position: absolute;
   top: -2px;
   right: -2px;

   background-color: var(--pico-primary);
   border-radius: 100%;
}

.cart-button .icon {
   position: relative;
}

.cart-button .icon:before {
   --icon-size: 16px;
   content: attr(data-cart-content);
   width: var(--icon-size);
   height: var(--icon-size);
   line-height: var(--icon-size);
   text-align: center;

   font-weight: bold;
   font-size: 10.4px;

   position: absolute;
   top: -6.4px;
   right: -6.4px;

   background-color: var(--pico-primary);
   color: var(--static-light-color);
   border-radius: 100%;

   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Header: Nav Menu
   ========================================================================== */

.header-lower-wrapper {
   background-color: #eee;
   padding: 0.4rem 5% 0 5%;
}

.header-lower {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   max-width: calc(1400px - 5%);
   margin: 0 auto;
   width: 100%;
}

.navbar ul {
   gap: 0.8rem;
   margin: 0 !important;
}

.navbar ul li {
   padding: 0;
}

nav li a {
   font-size: 0.88rem;
   --pico-color: var(--global-text-color);
   color: var(--pico-color);
   padding: 0.4rem 0.4rem 0.6rem 0.4rem;
   background-color: transparent;
   margin: 0;
   border-radius: 0;
   transition: border var(--pico-transition), color var(--pico-transition);
}

.navbar li a {
   border-bottom: 2px solid #eee;
}

nav li a:hover,
nav li a:active,
nav li a:focus {
   text-decoration: none;
   --pico-color: var(--static-dark-color) !important;
   border-color: var(--pico-primary);
}

nav li:first-child a {
   margin-left: -0.4rem;
}

/* Top Level Items */
nav>ul>li>a img {
   display: none;
}

/* Header: Sub Menu
   ========================================================================== */

button.menu-toggle:hover, button.menu-toggle:active, button.menu-toggle:focus,
button.submenu-toggle:hover, button.submenu-toggle:active, button.submenu-toggle:focus {
   border-color: transparent;
   box-shadow: 0px 0px 10px -2px var(--pico-primary-hover);
}

@media(min-width: 768px) {

   button.menu-toggle, button.submenu-toggle {
      display: none;
   }

   .sub-menu {
      position: absolute;
      left: -9999px;
      z-index: 100;

      width: 100%;
      height: auto;
      max-height: 400px;

      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;

      background-color: var(--pico-background-color);
      list-style: none;
      display: flex;
      flex-direction: column;
      border-top: 0.6rem solid var(--pico-background-color);
   }

   .menu-item-has-children>a:hover~.sub-menu,
   .sub-menu:hover,
   .menu-item-has-children:hover>.sub-menu {
      opacity: 1;
      visibility: visible;
      left: 0;
   }

   .sub-menu:after {
      content: "";
      display: flex;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 100%;
      background-color: rgb(0 0 0 / 20%);
      pointer-events: none;
   }

   .submenu-controls {
      display: none;
   }

   ul.sub-menu-list {
      width: 100%;
      max-width: calc(1400px + 5%);
      margin: 0 auto !important;
      padding: 1rem 5% 1rem 5%;
      gap: 1.5rem;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
   }

   .sub-menu li {
      width: calc((100% / 6) - 1.25rem);
      display: flex;
      justify-content: center;
   }

   .sub-menu li a {
      font-weight: 500;
      padding: var(--pico-nav-element-spacing-vertical) 0;
      width: 100%;
      border-color: var(--pico-background-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
   }

   .sub-menu li a img {
      height: 7rem;
      width: 7rem;
      object-fit: contain;
      border-radius: 0.35rem;
      transition: opacity var(--pico-transition);
   }

   .sub-menu li a span {
      margin-top: auto;
      font-size: 1rem;
      font-weight: 600;
   }

   .sub-menu li a:hover,
   .sub-menu li a:active,
   .sub-menu li a:focus {
      text-decoration: none;
      --pico-color: var(--pico-primary) !important;
      border-color: var(--pico-background-color);
   }

   .sub-menu li a:hover img,
   .sub-menu li a:active img,
   .sub-menu li a:focus img {
      opacity: 0.75;
   }

   .view-all a img {
      display: none;
   }

   .view-all a span {
      margin-bottom: auto;
   }

}

/* Header: Tablet Styles
   ========================================================================== */

@media(max-width: 960px) {

   header .logo .svg-icon {
      width: 6rem;
   }

   header nav li {
      padding: calc(var(--pico-nav-element-spacing-vertical) * 0.7) calc(var(--pico-nav-element-spacing-horizontal) * 0.7);
   }

}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */

@media(max-width: 768px) {

   header nav li {
      padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
   }

   header.top-navigation {
      flex-wrap: wrap;
      margin-bottom: 0;
   }

   .header-upper {
      padding: var(--pico-spacing);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 1.5rem;
   }

   button.menu-toggle, button.submenu-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin-right: auto;
      background: transparent;
      border: none;
      grid-column: 1;
      grid-row: 1;
   }

   button.menu-toggle .svg-icon, button.submenu-toggle .svg-icon {
      width: 1.8rem;
      height: auto;
      color: var(--global-text-color);
   }

   header .logo {
      grid-column: 2;
      grid-row: 1;
      text-align: center;
   }

   .auth-container {
      grid-column: 3;
      grid-row: 1;
      gap: 1rem;
      margin-left: auto;
   }

   .auth-container a .icon .svg-icon {
      width: 1.6rem;
   }

   .auth-container a span:last-child {
      border: 0;
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      word-wrap: normal !important;
   }

   .my-orders-button {
      display: none !important;
   }

   header.top-navigation form[role=search] {
      grid-column: 1 / -1;
      grid-row: 2;
   }

   nav li:first-child a {
      margin-left: 0;
   }

   .header-lower-wrapper {
      position: fixed;
      opacity: 0;
      visibility: hidden;
      left: -9999px;
      top: 0;
      width: 100%;
      height: 100vh;
      padding: 1.5rem 1.5rem 8rem 1.5rem;
      background-color: var(--static-light-color);
      transition: opacity var(--pico-transition);
   }

   .admin-bar .header-lower-wrapper {
      top: 46px;
   }

   .header-lower-wrapper button.menu-toggle {
      margin-left: auto;
      margin-right: 0;
   }

   .header-lower-wrapper>button.menu-toggle {
      margin-bottom: 2rem;
   }

   .show-nav {
      opacity: 1;
      visibility: visible;
      left: 0;
      z-index: 99;
      overflow-y: auto;
   }

   .show-nav .navbar {
      display: flex;
      width: 100%;
      top: 4rem;
      background: var(--pico-background-color);
      padding-bottom: 1rem;
      opacity: 1;
      visibility: visible;
      left: 0;
      z-index: 10;
   }

   .show-nav .navbar ul {
      width: 100%;
      margin: 0;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: space-between;
      align-items: stretch;
   }

   .show-nav .navbar ul li {
      width: calc(50% - 1rem) !important;
      display: flex;
   }

   .show-nav .navbar ul li.full-width {
      width: 100% !important;
   }

   .show-nav .navbar ul li.full-width a {
      text-align: left;
      align-items: baseline !important;
      border-top: 1px solid #f5f5f5 !important;
      padding-top: 1rem;
      font-weight: 600 !important;
   }

   .show-nav .navbar ul li.full-width img {
      display: none;
   }

   .show-nav .menu-item-has-children {
      flex-direction: column;
      padding-bottom: 0;
   }

   .show-nav .menu-item-has-children:before {
      content: none;
   }

   .show-nav ul#primary-menu>li>a {
      font-size: 1rem;
      font-weight: 500;
      width: 100%;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
   }

   .show-nav ul>li>a img {
      display: block;
      border-radius: var(--pico-border-radius);
   }

   .show-nav ul>li>a span {
      font-weight: 500;
      font-size: 1rem;
      --pico-color: var(--static-dark-color);
      margin-top: auto;
   }

   .show-nav ul#primary-menu>li>.sub-menu {
      margin: 0;
      padding: 1.5rem 1.5rem 8rem 1.5rem;
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: -9999px;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--pico-transition);
   }

   .admin-bar .show-nav ul#primary-menu>li>.sub-menu {
      top: 46px;
   }

   .show-submenu>a {
      position: fixed;
      top: 1.5rem;
      z-index: 9999;
      left: 50%;
      transform: translateX(-50%);
      width: max-content !important;
      text-align: center;
      font-weight: 600 !important;
      line-height: 1.8rem;
      padding: 0;
   }

   .admin-bar .show-submenu>a {
      top: calc(46px + 1.5rem);
   }

   .show-submenu>a img {
      display: none !important;
   }

   .show-submenu .sub-menu {
      left: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 999;
      background-color: var(--static-light-color);
      overflow-y: auto;
   }

   .submenu-controls {
      display: flex;
      margin-bottom: 2rem;
   }

   ul.sub-menu-list {
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: space-between !important;
      flex-direction: row !important;
      align-items: stretch;
   }

   ul.sub-menu-list li {
      width: calc(50% - 1rem) !important;
   }

   ul.sub-menu-list li a {
      border: none !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      transition: color var(--pico-transition), opacity var(--pico-transition);
      width: 100%;
   }

   ul.sub-menu-list li a:hover {
      opacity: 0.75;
      color: var(--pico-primary);
   }

   ul.sub-menu-list li a img {
      border-radius: var(--pico-border-radius);
   }

   ul.sub-menu-list li a span {
      font-weight: 500;
      font-size: 1rem;
      --pico-color: var(--static-dark-color);
      margin-top: auto;
   }

   .view-all img {
      display: none !important;
   }

   .view-all span {
      margin-bottom: auto;
   }

}

/* ==========================================================================
   Search
   ========================================================================== */

.searchwp-live-search-results {
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
   border-radius: var(--pico-border-radius) !important;
   border: 1px solid var(--pico-form-element-border-color) !important;
}

.searchwp-live-search-result {
   display: grid !important;
   grid-template-columns: auto 1fr !important;
   grid-template-rows: auto auto !important;
   gap: 0.5rem 1rem !important;
   margin: 0 1rem !important;
   padding: 1rem 0 !important;
   position: relative;
}

.searchwp-live-search-result--img {
   grid-column: 1;
   grid-row: 1 / -1;
   height: 100%;
   max-width: 6rem;
}

.searchwp-live-search-result--img img {
   border-radius: 0.35rem;
}

.searchwp-live-search-result--info {
   grid-column: 2;
   grid-row: 1;
}

.searchwp-live-search-result--title {
   margin: 0;
   font-weight: 500 !important;
}

.searchwp-live-search-result--title a {
   color: var(--static-dark-color);
   text-decoration: none;
   position: absolute;
   height: -webkit-fill-available;
   background: transparent;
}

.searchwp-live-search-result--title a:hover, .searchwp-live-search-result--title a:active, .searchwp-live-search-result--title a:focus {
   color: var(--pico-primary-hover);
}

.searchwp-live-search-result--ecommerce {
   grid-column: 2;
   grid-row: 2;
   margin-left: 0 !important;
   text-align: start !important;
}

.searchwp-live-search-result--ecommerce span {
   font-weight: 500;
   color: var(--static-dark-color);
   font-size: 1.1em;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
   padding-bottom: 0 !important;
   --pico-color: #707072;
}

footer p {
   font-size: 0.9rem;
}

footer a {
   background: none;
}

footer a:hover,
footer a:active,
footer a:focus {
   color: var(--pico-color) !important;
   text-decoration: underline !important;
}

.footer-widgets-wrapper {
   background: var(--pico-form-element-background-color);
   padding: 1.5rem 5%;
}

/* Footer: Newsletter
   ========================================================================== */

.footer-newsletter {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin: 1rem 0 2rem 0;
}

.footer-newsletter p {
   font-size: 1.05rem;
   max-width: 27rem;
   margin: 0;
}

.newsletter-form fieldset {
   margin: 0;
}

.newsletter-form input {
   background: #fff;
}

.footer-newsletter button {
   width: 100% !important;
   max-width: fit-content;
   --pico-background-color: var(--static-dark-color);
   --pico-border-color: var(--pico-form-element-border-color);
   --pico-color: var(--static-light-color);
}

/* Footer Newsletter: Mobile Styles - Should usually be 768px */

@media(max-width: 640px) {

   .footer-newsletter {
      flex-direction: column;
      overflow: hidden;
   }

   .footer-newsletter p {
      font-size: 1.05rem;
      margin: 1.2rem 0 0 0;
   }

   .footer-newsletter form button {
      padding: 0 0.6rem !important;
      font-size: 0.9rem !important;
   }

}

/* Footer: Widgets
   ========================================================================== */

.footer-widgets {
   display: flex;
   justify-content: space-between;
   margin: 3rem 0;
}

.footer-widgets-left {
   width: 20%;
   min-width: 17rem;
}

footer a.logo {
   color: var(--pico-primary-inverse);
   background: none;
   display: flex;
   margin-bottom: 1rem;
}

footer a.logo .svg-icon {
   height: 3rem;
   width: auto;
}

.footer-links.footer-widgets-right {
   display: flex;
   gap: 4rem;
}

.footer-widgets .widget-title {
   font-size: 0.95rem;
}

.footer-widgets ul {
   padding: 0;
   margin: 0;
}

.footer-widgets ul li {
   list-style: none;
   margin-bottom: 0.65rem;
}

.footer-widgets ul li a {
   background: none;
   text-decoration: none;
   font-size: 0.9rem;
   --pico-color: #707072;
}

/* Footer: Disclaimer
   ========================================================================== */

.footer-disclaimer {
   margin: 3rem 0;
}

/* Footer: Copyright
   ========================================================================== */

.footer-copyright {
   margin-bottom: 0;
   display: flex;
   justify-content: space-between;
}

.footer-copyright * {
   margin-bottom: 0;
}

.footer-menu-wrapper ul {
   display: flex;
   padding: 0;
   gap: 0.85rem;
}

.footer-menu-wrapper ul li {
   list-style: none;
}

.footer-menu-wrapper ul li a {
   text-decoration: none;
   font-size: 0.9rem;
   --pico-color: var(--global-text-color);
}

.footer-copyright p {
   font-size: 0.775rem;
}

.footer-copyright p>a {
   --pico-color: var(--global-text-color);
   text-decoration: none;
}

/* Footer USP */

.section-usp {
   padding: 1.5rem 5%;
   background-color: var(--pico-form-element-background-color);
   border: 1px solid var(--pico-form-element-border-color);
   border-left: none;
   border-right: none;
   margin-bottom: 0;
}

.section-usp .container {
   max-width: 1280px;
}

.usps {
   padding: 0;
   margin: 0 !important;
   display: flex;
   gap: 1.5rem;
}

.usp {
   list-style: none;
   margin: 0;
   display: flex;
   gap: 1rem;
   align-items: center;
   flex-basis: 100%;
   padding: 1rem;
   background-color: var(--static-light-color);
   border: 1px solid var(--pico-form-element-border-color);
   border-radius: var(--pico-border-radius);
}

.usp .icon {
   width: 3rem;
   height: 3rem;
   border-radius: var(--pico-border-radius);
   background-color: rgb(253 112 78 / 10%);
}

.usp .icon .svg-icon {
   width: 1.4rem;
   color: var(--pico-primary);
}

.usp p {
   margin: 0;
   line-height: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   font-size: 0.9rem;
}

.usp p span:first-child {
   color: var(--static-dark-color);
   font-weight: 500;
}

.usp p span:last-child {
   font-size: 0.8rem;
}

/* Footer: tablet Styles
   ========================================================================== */

@media(max-width: 960px) {

   footer .container {
      padding: 0;
   }

   .footer-widgets {
      flex-direction: column;
      justify-content: center;
   }

   .footer-widgets-left {
      margin-bottom: 2rem;
      width: 100%;
      text-align: center;
   }

   footer a.logo {
      justify-content: center;
   }

   .footer-links.footer-widgets-right {
      gap: 1.4rem;
      flex-wrap: wrap;
      justify-content: center;
   }

   .footer-links.footer-widgets-right>div {
      width: calc(33% - 0.9rem);
      flex-wrap: wrap;
      text-align: center;
   }

   .footer-links.footer-widgets-right>div:last-child {
      margin-top: 1rem;
   }

   .footer-disclaimer {
      text-align: center;
   }

   .footer-copyright {
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
   }
}

/* Footer: Mobile Styles
   ========================================================================== */

@media(max-width: 640px) {

   .footer-widgets-left {
      text-align: left;
   }

   footer a.logo {
      justify-content: start;
   }

   .footer-links.footer-widgets-right {
      flex-direction: column;
   }

   .footer-links.footer-widgets-right>div {
      width: 100%;
      text-align: left;
   }

   .footer-disclaimer {
      text-align: left;
   }

   .section-usp .container {
      padding: 0;
   }

   .usps {
      flex-direction: column;
   }

}

/* ==========================================================================
   Woocommerce
   ========================================================================== */

.woocommerce span.onsale {
   line-height: 1;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Pagination */

nav.woocommerce-pagination {
   justify-content: center;
   margin-top: 2rem;
}

ul.page-numbers {
   gap: 0.75rem;
}

ul.page-numbers li {
   padding: 0;
}

ul.page-numbers li>* {
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 1;
   width: 2.5rem;
   height: 2.5rem;
   border: 2px solid #eee;
   border-radius: 0.325rem;
   --pico-color: var(--static-dark-color);
}

ul.page-numbers li>.current {
   --rgb-values: 253 112 78;
   background-color: rgb(var(--rgb-values) / 10%);
   border-color: rgb(var(--rgb-values));
}

/* Woocommerce: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Woocommerce: Mobile Styles
    ========================================================================== */

@media(max-width: 768px) {}

/* ==========================================================================
    Modal
    ========================================================================== */

dialog article, dialog article>footer, dialog article>header {
   background-color: var(--global-light-background-color);
}

dialog {
   background-color: rgb(17 19 34 / 50%);
}

dialog article {
   border: 1px solid var(--pico-form-element-border-color);
   padding: 2rem;
}

dialog article .close, dialog article :is(a, button)[rel=prev] {
   width: 1.2rem;
   height: 1.2rem;
   background-size: auto 1.2rem;
   margin-left: auto !important;
}

/* Modal Header */

dialog article>header {
   border-bottom: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
   padding: 0 0 1rem 0;
}

dialog article>header>div {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

dialog article>header>div h2 {
   font-size: 1.1rem;
   margin: 1.75rem 0 1rem 0;
}

dialog article>header>div p {
   font-size: 0.85rem;
}

dialog article>header>div>*:last-child {
   margin-bottom: 0;
}

dialog article>header>div .icon-bg {
   width: 8rem;
   height: 5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgb(253 112 78 / 10%);
   border-radius: 0.625rem;
   border: 1px solid var(--pico-primary);
}

dialog article>header>div .icon-bg.frown {
   display: none;
}

dialog article>header>div .icon {
   padding: 0.35rem;
   background: rgb(253 112 78 / 20%);
   border-radius: 0.625rem;
}

dialog article>header>div .icon .svg-icon {
   width: 1.75rem;
   color: var(--pico-primary);
}

/* Modal Error */

dialog.error article>header>div .icon-bg.frown {
   display: flex;
}

dialog.error article>header>div .icon-bg.smile {
   display: none;
}

dialog.error article>header>div .icon-bg {
   background: rgb(183 64 59 / 10%);
   border-color: var(--pico-form-element-invalid-active-border-color);
}

dialog.error article>header>div .icon {
   background: rgb(183 64 59 / 20%);
}

dialog.error article>header>div .icon .svg-icon {
   color: var(--pico-form-element-invalid-active-border-color);
}

/* Modal Success */

dialog.success article>header>div .icon-bg {
   background: rgb(42 123 111 / 10%);
   border-color: var(--pico-form-element-valid-border-color)
}

dialog.success article>header>div .icon {
   background: rgb(42 123 111 / 20%);
}

dialog.success article>header>div .icon .svg-icon {
   color: var(--pico-form-element-valid-border-color);
}

/* Modal Warning */

dialog.warning article>header>div .icon-bg.frown {
   display: flex;
}

dialog.warning article>header>div .icon-bg.smile {
   display: none;
}

dialog.warning article>header>div .icon-bg {
   background: rgb(240 173 78 / 10%);
   border-color: #f0ad4e;
}

dialog.warning article>header>div .icon {
   background: rgb(240 173 78 / 20%);
}

dialog.warning article>header>div .icon .svg-icon {
   color: #f0ad4e;
}

/* Modal Body */

dialog article>div {
   padding: 1rem 0;
}

dialog article>div>*:last-child {
   margin-bottom: 0;
}

dialog article>div ul {
   padding: 0;
   list-style: none;
}

dialog article>div ul li {
   list-style: none;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 0.95rem;
}

dialog article>div ul li:last-child {
   margin-bottom: 0;
}

dialog article>div ul li span:last-child {
   color: #fff;
}

/* Modal Footer */

dialog article>footer {
   border-top: none;
   margin: 0;
   padding: 1rem 0 0 0;
   display: flex;
   flex-direction: column-reverse;
   gap: 1rem;
}

dialog footer button, dialog footer [role=button] {
   padding: 0.65rem;
   line-height: 1;
   font-size: 0.9rem;
   width: 100%;
   font-weight: bold;
   background: transparent;
   border-color: var(--pico-secondary-hover-background);
   letter-spacing: normal;
}

dialog footer button:hover, dialog footer button:active, dialog footer button:focus,
dialog footer [role=button]:hover, dialog footer [role=button]:active, dialog footer [role=button]:focus {
   border-color: var(--global-text-color);
   background-color: var(--global-light-background-color);
}

dialog footer .button-primary-force {
   background: var(--pico-primary) !important;
   background-image: linear-gradient(var(--primary-gradient-light), var(--pico-primary)) !important;
   border-top: 1px solid #fff9 !important;
   border-bottom: 1px solid var(--pico-primary) !important;
   border-right: 1px solid var(--pico-primary) !important;
   border-left: 1px solid var(--pico-primary) !important;
}

dialog footer .button-primary-force:hover, dialog footer .button-primary-force:active, dialog footer .button-primary-force:focus {
   border-color: #fff !important;
}

/* Modal: Mobile Styles
  ========================================================================== */

@media (min-width: 768px) {
   dialog article {
      max-width: 510px;
   }
}

/* ==========================================================================
   Accordion
   ========================================================================== */

details::details-content {
   height: 0;
   opacity: 0;
   transition: height var(--pico-transition), opacity var(--pico-transition), content-visibility var(--pico-transition) allow-discrete;
}

details[open]::details-content {
   height: auto;
   opacity: 1;
}

details[open]>summary {
   margin: 0 !important;
}

details summary, details[open]>summary:not([role]):not(:focus) {
   color: var(--static-dark-color);
   font-size: 1.15rem;
   font-weight: 500;
}

details summary::after {
   --icon-size: 1.3rem;
   width: var(--icon-size);
   height: var(--icon-size);
   background-size: var(--icon-size) auto;
}

details .details-content {
   margin-top: 1rem;
}

details .details-content table {
   margin: 0 0 1.5rem 0;
}

.details-content .key-features p {
   margin-bottom: 0.5rem;
   font-size: 0.95rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   --pico-color: #696969;
}

.details-content .key-features p span:last-child {
   color: var(--static-dark-color);
   font-weight: 500;
}

/* Accordion: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Accordion: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {}

/* ==========================================================================
   Woocommerce Notices
   ========================================================================== */

.woocommerce-notices-wrapper {
   max-width: 1080px;
   margin: 0 auto 3rem auto;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.woocommerce-notices-wrapper:empty {
   margin: 0;
}

.woocommerce-notices-wrapper>* {
   --rgb-values: 253 112 78;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgb(var(--rgb-values) / 10%);
   padding: 1rem;
   border-radius: 0.25rem;
   border: 1px solid rgb(var(--rgb-values));
   color: var(--static-dark-color);
   outline: none;
}

.woocommerce-notices-wrapper>* a {
   background-color: rgb(var(--rgb-values) / 20%);
   text-decoration: none;
   padding: 0.5rem 1rem;
   border-radius: var(--pico-border-radius);
   color: rgb(var(--rgb-values));
}

.woocommerce-message {
   --rgb-values: 42 123 111;
}

.woocommerce-error {
   --rgb-values: 200 79 72;
}

/* Woocommerce Notices: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Woocommerce Notices: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {

   .woocommerce-notices-wrapper {
      margin: 1rem 1rem 1.5rem 1rem;
   }

   .woocommerce-message {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      gap: 1rem;
   }

}

/* ==========================================================================
   Container
   ========================================================================== */


/* Container: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Container: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {}