@charset "UTF-8";
/*!
Theme Name: stereo_integrity_custom_theme
Theme URI: http://underscores.me/
Author: logan morton
Author URI: http://underscores.me/
Description: a custom theme for stereo integrity
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: si-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

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

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
.button-alt, .buttons .checkout {
  background-color: hsl(0, 0%, 10%);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.button-alt:hover, .button-alt:focus, .buttons .checkout:hover, .buttons .checkout:focus {
  background-color: #ffffff;
  color: hsl(0, 0%, 13%);
}

.button-ghost {
  background-color: transparent;
  color: hsl(357, 84%, 50%);
  border: 1px solid hsl(357, 84%, 50%);
  box-shadow: none;
  transition: all 0.2s ease;
}
.button-ghost:hover, .button-ghost:focus {
  background-color: hsl(357, 84%, 50%);
  color: #ffffff;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0.5em;
  /* layout */
  max-width: 1400px;
  margin: 63px auto 0; /* center horizontally */
  padding: 0 1.2em; /* side gutters */
  line-height: 1.5;
}

main > * {
  grid-column: 1/5;
  max-width: 1400px;
  justify-self: center;
  width: 100%;
}

main > header {
  margin: 0 -1em;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.page-title {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: hsl(0, 0%, 13%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: hsl(0, 0%, 95%);
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted hsl(0, 0%, 60%);
  cursor: help;
}

mark,
ins {
  background: hsl(45, 5%, 85%);
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #ffffff;
}

#page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

#primary {
  width: 100%;
}

hr {
  background-color: hsl(0, 0%, 88%);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0;
  padding-inline-start: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0;
}

dt {
  font-weight: 700;
}

.woocommerce-error > li {
  list-style: none;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
}

/* Links
--------------------------------------------- */
a {
  color: hsl(357, 84%, 50%);
}
a:visited {
  color: hsl(357, 84%, 50%);
}
a:hover, a:focus, a:active {
  color: hsl(357, 84%, 40%);
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
.button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 1px solid;
  border-color: hsl(0, 0%, 80%);
  border-radius: 4px;
  background-color: #ffffff;
  color: hsl(0, 0%, 13%);
  line-height: 1;
  padding: 0.6em 1em;
  width: fit-content;
}
button:hover,
.button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  border-color: hsl(0, 0%, 60%);
  color: hsl(0, 0%, 13%);
  background-color: hsl(0, 0%, 93%);
}
button:active, button:focus,
.button:active,
.button:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
  border-color: hsl(0, 0%, 50%);
  color: hsl(0, 0%, 13%);
  background-color: #ffffff;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: hsl(0, 0%, 33%);
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 3px;
  padding: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  color: #000000;
}

select {
  border: 1px solid hsl(0, 0%, 80%);
}

textarea {
  width: 100%;
}

input[type=number] {
  width: 5ch;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
  align-content: center;
}
.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}
.main-navigation ul ul a {
  width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}
.main-navigation li {
  position: relative;
}
.main-navigation a {
  display: block;
  text-decoration: none;
  padding: 0.5rem;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

.site-branding {
  display: flex;
}

.header-icons {
  display: flex;
  gap: 1em;
  align-items: center;
}

.header-right button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.header-right > button > svg {
  width: 27px;
  height: 100%;
  aspect-ratio: 1/1;
}

section.head-contacts {
  display: none;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  padding-left: 2em;
  height: 40px;
  width: 100%;
}

.head-contact {
  padding: 0.5em;
}

.header-base {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  width: 100%;
  padding: 0.5em 0;
  gap: 0.5em;
}

.site-header {
  padding: 0em 1em;
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
  background-color: hsla(0, 0%, 100%, 0.95);
  border-bottom: 1px solid hsl(0, 0%, 13%);
  /* Semi-transparent background so the blur is visible */
  z-index: 1000;
  /* Backdrop filter for the blur effect */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* for Safari */
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  display: flex;
  align-items: center;
  color: hsl(0, 0%, 13%);
}

.site-header a {
  color: hsl(0, 0%, 13%);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2em;
}

.cart-count {
  align-items: center;
  border-radius: 1em;
  font-size: 0.875em;
  font-weight: 600;
  height: 1.4285714286em;
  text-align: center;
  color: white;
  background: red;
  line-height: 1.4;
  min-width: 1.4285714286em;
  padding: 0 0.25em;
  position: absolute;
  transform: translateY(-25%) translateX(-60%);
  white-space: nowrap;
  z-index: 1;
}

.cart-count.count-empty {
  display: none;
}

.header-left .custom-logo-link {
  transition: transform 0.3s ease-in-out;
  display: none;
  gap: 1em;
}

header .custom-logo-link:hover {
  transform: scale(1.01);
}

.custom-logo-link p {
  padding: 0.5em 0;
  padding-top: 0.8em;
  font-family: "Berkeley Std", serif;
  font-size: 1.4rem;
}

.header-left a {
  line-height: 0;
}

.header-left a img {
  max-height: 32px;
  object-fit: contain;
  aspect-ratio: 10/1;
  width: auto;
}

.header-left a svg {
  max-height: 34px;
  max-width: 74px;
}

.header-right {
  display: flex;
  align-items: center;
}

.account-icon {
  line-height: 1;
  padding: 0.6em 1em;
}
.account-icon svg {
  width: 27px;
}

.head-contacts .call-to-action {
  padding: 0.5em;
  border: none;
  box-shadow: none;
  width: fit-content;
  display: none;
  gap: 0.5em;
  border-radius: 4px;
  margin: 0;
}

.desktop-nav {
  display: none;
}

.no-scroll {
  overflow: hidden;
}

@media (min-width: 968px) {
  .head-contacts .call-to-action {
    display: flex;
    text-decoration: underline;
  }
  .logo p {
    min-width: none;
  }
  .logo img {
    display: flex;
  }
  .desktop-nav {
    position: initial;
    justify-content: center;
    background-color: transparent;
    margin-bottom: -4px;
    top: 64px;
    right: auto;
    height: auto;
    transform: none;
    transition: none;
    z-index: 1001;
    flex-direction: column;
    justify-content: center;
    display: flex;
    text-align: right;
  }
  .head-contacts-left {
    display: flex;
  }
  .head-contacts-right {
    display: flex;
    gap: 1em;
    align-items: center;
  }
  .head-contacts-right > a {
    display: flex;
    gap: 0.5em;
    height: 24px;
  }
  .head-contacts-right > a > img {
    width: 24px;
  }
  .header-right .call-to-action {
    display: flex;
    padding: 0.5em;
    margin: 0.75em;
  }
  .head-contacts .call-to-action {
    display: none;
  }
}
/* General Navigation Styles */
.menu li a {
  text-decoration: none;
  padding: 1rem 0.5rem;
  white-space: nowrap;
  transition: transform 0.5s ease;
}

.menu li a:hover {
  transform: scale(1.05);
}

header nav li {
  list-style: none;
  display: flex;
}

header nav ul {
  margin: 0;
  padding: 0;
}

.header-right .cta {
  display: none;
}

/* Hamburger Menu */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10.5px 16.5px; /* Add padding to increase the tap area */
  box-sizing: content-box; /* Ensure padding doesn't affect width/height */
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: hsl(0, 0%, 13%);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-wrapper {
  position: fixed;
  top: 100%;
  right: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}

.nav-wrapper.open {
  transform: translateX(0);
  pointer-events: auto;
}

#mobile-menu {
  margin: 0;
  margin-top: 2em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

#mobile-menu > li {
  display: flex;
}

.nav-wrapper.open > * {
  pointer-events: auto;
  padding: 0 1em;
}

.nav-wrapper.open nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-right: 0.5em;
  align-items: flex-end;
}

/* Overlay Styles */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  z-index: 101;
  opacity: 0.95;
}

.menu-overlay.active {
  transform: translateX(0);
  pointer-events: auto;
}

/* Submenu styles */
.has-children {
  position: relative;
  flex-direction: column;
}

.has-children:hover .submenu {
  display: flex;
}

footer .has-children:hover .submenu {
  display: block;
}

.footer-nav .has-children > a {
  min-height: 100%;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.footer-nav .submenu a {
  padding: 0 1em;
}

.submenu > li > a:hover {
  transform: scale(1.05);
}

.submenu > li > a > img {
  display: none;
}

.submenu-link {
  text-decoration: none;
  padding: 0 0.5em;
  font-size: 0.9em;
  min-height: 44px;
  align-content: center;
}

.submenu-link:hover {
  text-decoration: underline;
}

.chevron-down {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.5em; /* optional spacing */
  margin-bottom: 0.12em;
}

/* Responsive Styles, takes effect on screens larger that 768 */
@media (min-width: 968px) {
  .mobile-logo {
    display: none;
  }
  .header-left .custom-logo-link {
    display: block;
  }
  .hamburger {
    display: none;
  }
  .nav-wrapper {
    display: none;
  }
  nav ul {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }
  .chevron-down {
    display: inline-block;
  }
  .submenu {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1em;
    display: none;
    justify-content: space-evenly;
    gap: 2em;
    min-width: 220px;
    z-index: 10;
  }
  .submenu > li > a > img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
  }
  .has-children {
    position: relative;
    flex-direction: row;
  }
  .has-children > a {
    min-height: 100%;
    box-sizing: content-box;
  }
  .has-children:hover .submenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .submenu > li > a {
    padding: 1em;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
}
/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

body.page {
  margin: 0;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}
.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
  align-self: center;
  line-height: 0;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/* Footer
--------------------------------------------- */
/* =========================
   FOOTER BASE STRUCTURE
   ========================= */
.footer-inner {
  margin: 0 auto;
  background-color: var(--footer-bg, #111); /* adjustable */
  color: var(--footer-text, #fff); /* adjustable */
  padding: 2rem 1rem;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr; /* default mobile stack */
  gap: 2rem;
}

/* =========================
   FOOTER SECTIONS
   ========================= */
.footer-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* -------------------------
   HOURS SECTION
   ------------------------- */
.footer-heading {
  font-size: 1.2rem;
  font-weight: bold;
}

.footer-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-hours-list li {
  line-height: 1.5;
}

/* -------------------------
   LOGO SECTION
   ------------------------- */
.footer-logo {
  text-align: center;
  padding-inline-start: 12px;
}

.footer-logo a {
  align-self: unset;
}

.footer-logo img {
  width: 80%;
  max-width: 400px;
  height: auto;
}

.footer-logo .site-title {
  font-size: 1.4rem;
  font-weight: bold;
}

/* -------------------------
   NAVIGATION SECTION
   ------------------------- */
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 0.25rem;
}

.footer-nav a {
  text-decoration: none;
  color: inherit;
}

.footer-nav a:hover {
  text-decoration: underline;
}

/* -------------------------
   INFO + SOCIAL SECTION
   ------------------------- */
.footer-info {
  text-align: center;
}

.footer-info p {
  margin: 0.5rem 0;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.footer-social a {
  display: inline-block;
}

.footer-social img {
  max-height: 24px;
  width: auto;
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr); /* 4 sections side-by-side */
    text-align: left;
  }
  .footer-logo {
    text-align: left;
  }
  .footer-info {
    text-align: right;
  }
}
/*--------------------------------------------------------------
# Template parts
--------------------------------------------------------------*/
.rewards-banner {
  margin: 2rem 0;
  font-family: inherit;
  width: 100%;
  max-width: 1300px;
  justify-self: center;
}

.rewards-banner__inner {
  background: hsl(0, 0%, 96%);
  border-radius: 1em;
  box-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.5);
  overflow: hidden;
  padding: 1rem;
  gap: 1em;
  outline: 1px solid;
  display: flex;
  flex-direction: column;
}

.rewards-banner__inner-top {
  display: flex;
  gap: 1em;
  padding: 1em;
}
.rewards-banner__inner-top h2 {
  margin: 0;
  font-size: 2.5em;
  font-weight: 800;
}

.rewards-banner__icon {
  flex: 0 0 100px;
  max-width: 100px;
}

.rewards-banner__content {
  flex: 1;
  padding: 0 0.5em;
  padding-block-end: 0.5em;
  font-size: 1.25rem;
  color: #333;
}

.rewards-banner__content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: #111;
}

/* Section wrapper */
.rewards-section {
  margin-bottom: 1rem;
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
}

/* Section title */
.rewards-title {
  transform: translateY(-50%);
  background: hsl(0, 0%, 96%);
  width: fit-content;
  padding: 0 1em;
  position: absolute;
}

/* List styles */
.rewards-list {
  list-style: none;
  margin: 0;
  padding: 0.5em 1em;
  border: 1px solid hsla(0, 0%, 0%, 0.2);
  border-radius: 0.5rem;
  width: 100%;
}

.rewards-list li {
  position: relative;
  padding-left: 36px;
  margin: 1rem 0;
}

/* Audio jack marker */
.rewards-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at center, #232323 0%, #333333 40%, #d0d0d0 50%, #000000 80%);
  border-radius: 50%;
  box-shadow: inset 1px 0 2px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.rewards-signup {
  justify-items: center;
  text-align: center;
  font-size: 0.8em;
}
.rewards-signup a {
  font-size: 1.25rem;
  width: 100%;
  color: #ffffff;
  background-color: hsl(0, 0%, 13%);
  display: block;
  padding: 1rem;
  margin-block-start: 0.5rem;
}

.rta-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 4px solid white;
  outline: 1px solid black;
  box-shadow: 4px 4px 6px black;
  border-radius: 1rem;
  background: #111;
  padding: 1rem;
  max-height: 400px;
  min-height: 200px;
  contain: paint;
}

/* Grid with 31 LED columns + labels */
.rta-grid {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  height: 100%;
  align-items: end;
  gap: 0.25rem;
}

/* Each column: vertical stack (LEDs + label) */
.rta-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* LEDs in each column */
.led {
  width: 50%;
  aspect-ratio: 1/1;
  margin: 2px auto;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgb(51, 0, 0) 0%, rgb(34, 0, 0) 50%, rgb(17, 0, 0) 100%);
  will-change: transform;
}

.led.on {
  background: radial-gradient(circle at center, rgb(255, 119, 119) 15%, rgb(255, 0, 0) 45%, rgb(51, 0, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8), inset 0 0 4px rgba(255, 200, 200, 0.6); /* inner brightness */
}

/* Frequency label base style */
.freq-label {
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 0.25em;
  position: relative; /* allow positioning children */
  visibility: hidden;
}

.freq-label span {
  transform: rotate(-90deg);
  font-size: 0.6rem;
  color: white;
  white-space: nowrap;
}

/* LED stack inside each column */
.led-stack {
  display: grid;
  grid-template-rows: repeat(12, 1fr); /* 12 even rows */
  flex: 1; /* let it grow to fill column height above the label */
  width: 100%;
  align-items: center;
}

/* Ensure LEDs stay centered within their row cells */
.led-stack .led {
  margin: auto;
}

/* Major label layout (grid with tick + label) */
.major-label {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  visibility: visible;
}

/* Tick mark */
.major-label .tick {
  width: 1px;
  height: 8px;
  background: white;
  grid-row: 1;
}

/* Horizontal label text */
.major-label span {
  transform: none; /* remove rotation */
  font-size: 0.6rem;
  bottom: 0;
  white-space: nowrap;
  color: white;
  font-size: 0.8rem;
}

/* Normal labels still rotated */
.freq-label:not(.major-label) span {
  transform: rotate(-90deg);
}

@media (min-width: 900px) {
  .major-label .tick {
    height: 18px;
  }
  .freq-label {
    visibility: unset;
  }
  .rta-wrapper {
    width: 60%;
    padding-block-end: 1.2rem;
  }
  .rewards-banner__inner {
    flex-direction: row;
  }
  .rewards-banner__content {
    padding-block-end: 0;
  }
}
/* FAQ Container */
.faq {
  width: 100%;
  margin: 2rem auto;
  margin-block-end: 4rem;
  padding: 0;
}

/* FAQ Item */
.faq-item {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
}

/* Question */
.faq-item h3 {
  margin: 0;
  font-size: 1.4rem;
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
  transition: color 0.3s ease;
}

.faq-item h3:hover {
  color: #e76f51; /* Accent color */
}

/* Arrow Icon (CSS only) */
.faq-item h3::after {
  content: "›";
  position: absolute;
  right: 0;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Answer (collapsed by default) */
.faq-item p {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  margin: 0;
}

/* Expanded state */
.faq-item.active h3::after {
  transform: rotate(-90deg);
}

.faq-item.active p {
  max-height: 200px; /* Adjust if needed */
  opacity: 1;
  margin-top: 0.5rem;
}

/* =========================================
   WooCommerce My Account – Login/Register
   Minimal starter styles
========================================= */
.woocommerce-account {
  background-color: #ffffff;
  /* Two-column wrapper (login / register) */
  /* Card-style panels */
  /* Forms */
  /* Messages / errors */
}
.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .woocommerce-account .u-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  background-color: hsl(0, 0%, 96%);
  border: 1px solid hsl(0, 0%, 70%);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  height: fit-content;
}
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: hsl(0, 0%, 13%);
}
.woocommerce-account form.login,
.woocommerce-account form.register {
  margin: 0;
  /* Remember me + lost password */
  /* Submit button – keep colors neutral, just tidy up shape/spacing */
}
.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row {
  margin-bottom: 0.9rem;
}
.woocommerce-account form.login label,
.woocommerce-account form.register label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: rgba(26, 26, 26, 0.56);
}
.woocommerce-account form.login input.input-text,
.woocommerce-account form.register input.input-text {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid hsl(0, 0%, 80%);
  background-color: #ffffff;
  font-size: 0.9rem;
  color: hsl(0, 0%, 33%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.woocommerce-account form.login input.input-text:focus,
.woocommerce-account form.register input.input-text:focus {
  outline: none;
  border-color: hsl(0, 0%, 50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: #000000;
}
.woocommerce-account form.login .lost_password,
.woocommerce-account form.register .lost_password {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
.woocommerce-account form.login .lost_password a,
.woocommerce-account form.register .lost_password a {
  color: hsl(357, 84%, 50%);
  text-decoration: none;
}
.woocommerce-account form.login .lost_password a:hover,
.woocommerce-account form.register .lost_password a:hover {
  color: hsl(357, 84%, 40%);
  text-decoration: underline;
}
.woocommerce-account form.login .woocommerce-form__label-for-checkbox,
.woocommerce-account form.register .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(26, 26, 26, 0.56);
}
.woocommerce-account form.login .woocommerce-form__label-for-checkbox input,
.woocommerce-account form.register .woocommerce-form__label-for-checkbox input {
  margin: 0;
}
.woocommerce-account form.login .woocommerce-button,
.woocommerce-account form.login .button,
.woocommerce-account form.register .woocommerce-button,
.woocommerce-account form.register .button {
  display: block;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 93%);
  font-size: 0.9rem;
  font-weight: 500;
  color: hsl(0, 0%, 13%);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-account form.login .woocommerce-button:hover, .woocommerce-account form.login .woocommerce-button:focus,
.woocommerce-account form.login .button:hover,
.woocommerce-account form.login .button:focus,
.woocommerce-account form.register .woocommerce-button:hover,
.woocommerce-account form.register .woocommerce-button:focus,
.woocommerce-account form.register .button:hover,
.woocommerce-account form.register .button:focus {
  border-color: hsl(0, 0%, 60%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.woocommerce-account form .form-row .woocommerce-form-login__rememberme {
  margin-bottom: 1em;
}
.woocommerce-account .woocommerce-form .woocommerce-LostPassword a {
  float: left;
}
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
  border-radius: 0.5rem;
  border-color: hsl(0, 0%, 70%);
  margin-bottom: 1.5rem;
}
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-info li {
  font-size: 0.85rem;
}

.woocommerce-account {
  /* Add label via pseudo-element */
  /* WooCommerce adds .display-password when active */
}
.woocommerce-account .password-input {
  position: relative;
  display: flex;
  align-items: center;
}
.woocommerce-account .password-input input[type=password],
.woocommerce-account .password-input input[type=text] {
  padding-right: 2.5rem;
}
.woocommerce-account .show-password-input {
  all: unset;
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.56);
}
.woocommerce-account .show-password-input::after {
  content: "Show";
  letter-spacing: 0.02em;
}
.woocommerce-account .show-password-input.display-password::after {
  content: "Hide";
  color: hsl(0, 0%, 13%);
}

form .g-recaptcha {
  margin: 0 -1.5em;
}

/* ==============================
   Woo My Account – App Dashboard Layout
   (logged-in only)
   =============================== */
.logged-in.woocommerce-account {
  background: hsl(0, 0%, 96%);
}

.logged-in.woocommerce-account .woocommerce {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .logged-in.woocommerce-account .woocommerce {
    flex-direction: column;
  }
}
/* ========== Sidebar nav ========== */
.woocommerce-MyAccount-navigation {
  flex: 0 0 230px;
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid hsl(0, 0%, 88%);
  top: 2rem;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li + li {
  margin-top: 0.25rem;
}

.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(0, 0%, 13%);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

/* Hover + focus */
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus {
  background: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 13%);
  transform: translateY(-1px);
}

/* Active endpoint */
.woocommerce-MyAccount-navigation li.is-active > a {
  background: hsla(357, 84%, 50%, 0.06);
  color: hsl(357, 84%, 50%);
  border: 1px solid hsla(357, 84%, 50%, 0.18);
}

/* Keyboard focus ring */
.woocommerce-MyAccount-navigation a:focus-visible {
  outline: 2px solid hsl(357, 84%, 50%);
  outline-offset: 2px;
}

/* ========== Main content card ========== */
.woocommerce-MyAccount-content {
  flex: 1 1 auto;
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid hsl(0, 0%, 88%);
  width: 100%;
}

/* Headings inside content */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
  color: hsl(0, 0%, 13%);
}

/* Paragraph + small text */
.woocommerce-MyAccount-content p {
  color: rgba(26, 26, 26, 0.56);
}

/* Tables (Orders, etc.) */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid hsl(0, 0%, 88%);
}

.woocommerce-MyAccount-content table th {
  text-align: left;
  font-weight: 600;
  color: hsl(0, 0%, 30%);
  background: hsl(0, 0%, 96%);
}

/* Forms (addresses, account details) */
.woocommerce-MyAccount-content form .form-row {
  margin-bottom: 1rem;
}

.woocommerce-MyAccount-content form label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: hsl(0, 0%, 30%);
}

.woocommerce-MyAccount-content input,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid hsl(0, 0%, 80%);
  background: hsl(0, 0%, 95%);
  color: hsl(0, 0%, 33%);
  font-size: 0.9rem;
}

#new-product-notify, #restock-subscription-list input {
  width: unset;
}

.woocommerce-info .wc-forward {
  margin-top: 0.5rem;
}

.woocommerce-MyAccount-content div.woocommerce-info:has(+ a.button) {
  margin-bottom: 1rem;
}

.woocommerce-EditAccountForm p {
  margin-bottom: 0;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  border-color: hsl(357, 84%, 50%);
  outline: none;
  box-shadow: 0 0 0 1px hsla(357, 84%, 50%, 0.2);
  color: #000000;
}

/* Woo notices spacing inside the card */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info {
  margin-bottom: 0;
}

.site-main--mounting-guides a {
  color: hsl(0, 0%, 13%);
}

.site-main--mounting-guides .page-title {
  display: block;
}

.si-mounting-guides-index {
  margin-block-end: 1rem;
}

.si-mounting-guide-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.si-mounting-guide-images .si-mounting-guide-image-wrap {
  max-width: 180px;
  outline: 1px solid hsl(0, 0%, 75%);
  box-shadow: 0px 4px 8px hsl(0, 0%, 75%);
  border-radius: 0.5rem;
}
.si-mounting-guide-images .si-mounting-guide-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.si-mounting-guides-index__list {
  list-style-position: inside;
  display: table;
}

@media (min-width: 769px) {
  .si-mounting-guide-images {
    display: flex;
    flex-wrap: wrap;
  }
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/*
Theme Name: stereo_integrity_custom_theme

WooCommerce styles override
*/
.button-alt, .buttons .checkout {
  background-color: hsl(0, 0%, 10%);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.button-alt:hover, .button-alt:focus, .buttons .checkout:hover, .buttons .checkout:focus {
  background-color: #ffffff;
  color: hsl(0, 0%, 13%);
}

.button-ghost {
  background-color: transparent;
  color: hsl(357, 84%, 50%);
  border: 1px solid hsl(357, 84%, 50%);
  box-shadow: none;
  transition: all 0.2s ease;
}
.button-ghost:hover, .button-ghost:focus {
  background-color: hsl(357, 84%, 50%);
  color: #ffffff;
}

/**
 * Shop tables
 */
.cross-sells ul {
  list-style-type: none;
}
.cross-sells ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid hsl(0, 0%, 30%);
  padding: 12px;
  border-radius: 0.5rem;
}
.cross-sells ul li a {
  color: hsl(0, 0%, 13%);
}

.cart-container {
  display: grid;
  grid-template-columns: 1;
  gap: 1rem;
}

/* Card wrapper */
.cart-collaterals .cart_totals {
  background: var(--wc-card-bg);
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-shadow);
  padding: 1rem;
}

@media (min-width: 640px) {
  .cart-collaterals .cart_totals {
    padding: 1.25rem;
  }
}
/* Heading */
.cart-collaterals .cart_totals > h2 {
  margin: 0.25rem 0 0.75rem;
  font-weight: 700;
  font-size: clamp(1.05rem, 0.8rem + 0.5vw, 1.25rem);
}

/* Totals table */
.cart_totals .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0;
}

.cart_totals .shop_table th,
.cart_totals .shop_table td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--wc-card-border);
  vertical-align: top;
  text-align: right;
}

.cart_totals .shop_table th {
  text-align: left;
  color: #222;
  width: 55%;
  font-weight: 600;
}

.cart_totals .shop_table .order-total th,
.cart_totals .shop_table .order-total td {
  border-top: 2px solid var(--wc-card-border);
  font-weight: 800;
  font-size: 1.05rem;
}

/* Shipping rates list */
.cart_totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.cart_totals .woocommerce-shipping-methods li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.cart_totals .woocommerce-shipping-methods input[type=radio] {
  accent-color: currentColor; /* keep it simple; inherit theme color */
}

/* Shipping calculator (collapsed/expanded) */
.cart_totals .woocommerce-shipping-calculator {
  margin-top: 0.5rem;
}

.cart_totals .shipping-calculator-form p {
  margin: 0.5rem 0;
}

.cart_totals .shipping-calculator-form input,
.cart_totals .shipping-calculator-form select {
  width: 100%;
  background: var(--wc-input-bg);
  color: var(--wc-input-text);
  border: 1px solid var(--wc-input-border);
  border-radius: var(--wc-input-radius);
  padding: 0.55rem 0.7rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart_totals .shipping-calculator-form input:hover,
.cart_totals .shipping-calculator-form select:hover {
  border-color: var(--wc-input-border-hover);
}

.cart_totals .shipping-calculator-form input:focus,
.cart_totals .shipping-calculator-form select:focus {
  border-color: var(--wc-input-border-focus);
  outline: none;
  box-shadow: var(--wc-focus-ring);
}

/* Proceed button */
.wc-proceed-to-checkout {
  margin-top: 1rem;
}

.wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.9rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

/* Optional: make totals sticky on desktop (nice UX) */
@media (min-width: 980px) {
  .cart-collaterals .cart_totals {
    position: sticky;
    top: 1rem;
  }
  .cart-container {
    grid-template-columns: 1fr max-content;
  }
}
@media screen and (min-width: 48em) {
  table.shop_table_responsive thead {
    display: table-header-group;
  }
  table.shop_table_responsive tbody th {
    display: table-cell;
  }
  table.shop_table_responsive tr th,
  table.shop_table_responsive tr td {
    text-align: left;
  }
  table.shop_table_responsive tr th.product-thumbnail a,
  table.shop_table_responsive tr td.product-thumbnail a {
    display: block;
    line-height: 0;
  }
  table.shop_table_responsive tr th .remove,
  table.shop_table_responsive tr td .remove {
    text-align: left;
  }
  table.shop_table_responsive tr td {
    display: table-cell;
  }
  table.shop_table_responsive tr td::before {
    display: none;
  }
}
/* ==============================
   WooCommerce — Cart Form (minimal)
   ============================== */
/* Card wrapper for the cart table */
.woocommerce-cart-form {
  background: var(--wc-card-bg);
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-shadow);
  padding: 1rem;
}

/* Table basics */
.woocommerce-cart-form .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0;
}

.woocommerce-cart-form .shop_table thead th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  color: #555;
  text-align: left;
}

/* Product cells */
.woocommerce-cart-form .product-remove {
  width: 1px;
  white-space: nowrap;
  text-align: center;
}

.woocommerce-cart-form a.remove {
  display: inline-grid;
  place-items: center;
  padding: 0.5rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-cart-form a.remove:hover {
  background: #f3f3f3;
  border-color: #d8d8d8;
  color: #000;
}

.woocommerce-cart-form .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.woocommerce-cart-form .product-name {
  font-weight: 600;
  line-height: 1.25;
}

.woocommerce-cart-form .product-name dl {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: #444;
}

.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  white-space: nowrap;
}

/* Quantity input */
.woocommerce .quantity .qty,
.woocommerce .qty {
  width: 80px;
  max-width: 100%;
  background: var(--wc-input-bg);
  color: var(--wc-input-text);
  border: 1px solid var(--wc-input-border);
  border-radius: var(--wc-input-radius);
  padding: 0.55rem 0.6rem;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
} /* ==============================
WooCommerce — Cart Form (stacked mobile)
============================== */
/* Card wrapper */
.woocommerce-cart-form {
  background: var(--wc-card-bg);
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-shadow);
  padding: 1rem;
}

@media (min-width: 640px) {
  .woocommerce-cart-form {
    padding: 1.25rem;
  }
}
/* Table base */
.woocommerce-cart-form .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.woocommerce-cart-form .shop_table th,
.woocommerce-cart-form .shop_table td {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--wc-card-border);
  vertical-align: middle;
  text-align: start;
}

.woocommerce-cart-form .shop_table thead th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  color: #555;
  text-align: left;
}

/* Product cells */
.woocommerce-cart-form a.remove {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--wc-card-border);
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce-cart-form a.remove:hover {
  background: #f3f3f3;
  border-color: #d8d8d8;
  color: #000;
}

.woocommerce-cart-form .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.woocommerce-cart-form .product-name {
  font-weight: 600;
  line-height: 1.25;
}

.woocommerce-cart-form .product-name dl {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: #444;
}

.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal {
  white-space: nowrap;
}

/* Quantity input */
.woocommerce .quantity .qty,
.woocommerce .qty {
  width: 80px;
  max-width: 100%;
  background: var(--wc-input-bg);
  color: var(--wc-input-text);
  border: 1px solid var(--wc-input-border);
  border-radius: var(--wc-input-radius);
  padding: 0.55rem 0.6rem;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce .quantity .qty:hover {
  border-color: var(--wc-input-border-hover);
}

.woocommerce .quantity .qty:focus {
  border-color: var(--wc-input-border-focus);
  outline: none;
  box-shadow: var(--wc-focus-ring);
}

/* Actions row */
.woocommerce-cart-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.9rem;
}

.woocommerce-cart-form .actions .coupon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.woocommerce-cart-form .actions .coupon input[name=coupon_code] {
  min-width: 200px;
  background: var(--wc-input-bg);
  color: var(--wc-input-text);
  border: 1px solid var(--wc-input-border);
  border-radius: var(--wc-input-radius);
  padding: 0.6rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-cart-form .actions .coupon input[name=coupon_code]:hover {
  border-color: var(--wc-input-border-hover);
}

.woocommerce-cart-form .actions .coupon input[name=coupon_code]:focus {
  border-color: var(--wc-input-border-focus);
  outline: none;
  box-shadow: var(--wc-focus-ring);
}

/* ==============================
Mobile-first stacked layout
- Hide thumbnail
- Stack cells vertically
- Keep subtotal aligned right
============================== */
.woocommerce-cart-form .shop_table thead {
  display: none; /* hide headings on small screens */
}

.woocommerce-cart-form .shop_table tr {
  display: grid;
  grid-template-columns: 1fr auto; /* name/price/qty left, subtotal right */
  padding-block: 0.35rem;
}

.woocommerce-cart-form .shop_table td {
  display: block;
  border-bottom: 0; /* visual separators via row gap */
  padding: 0.25rem 0;
}

.woocommerce-cart-form td.product-thumbnail {
  display: none;
} /* hide thumbs on mobile */
.woocommerce-cart-form td.product-remove {
  grid-column: 2;
  justify-self: end;
  padding-top: 0;
}

.woocommerce-cart-form td.product-name {
  grid-column: 1/-1;
  padding-top: 0.25rem;
}

.woocommerce-cart-form td.product-price {
  grid-column: 1;
  color: #444;
}

.woocommerce-cart-form td.product-quantity {
  grid-column: 1;
}

.woocommerce-cart-form td.product-subtotal {
  grid-column: 2;
  justify-self: end;
  font-weight: 700;
  display: flex;
  align-items: center;
}

/* make Woo's responsive labels (td::before) unnecessary */
.woocommerce-cart-form .shop_table td::before {
  display: none !important;
}

/* Divider between items */
.woocommerce-cart-form .shop_table tbody tr + tr {
  border-top: 1px solid var(--wc-input-text);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

/* ==============================
Desktop/tablet reset
- Restore real table
- Constrain thumbnail column
============================== */
@media (min-width: 48em) {
  .woocommerce-cart-form .shop_table thead {
    display: table-header-group;
  }
  .woocommerce-cart-form .shop_table tr {
    display: table-row;
  }
  .woocommerce-cart-form .shop_table td {
    display: table-cell;
    border-bottom: 1px solid var(--wc-card-border);
    padding: 0.9rem 0.6rem;
  }
  .woocommerce-cart-form .shop_table td::before {
    display: none;
  }
  /* Show thumbnail and constrain widths */
  .woocommerce-cart-form td.product-thumbnail {
    display: table-cell;
    width: 84px;
  } /* ~64px img + padding */
  .woocommerce-cart-form td.product-remove {
    text-align: center;
    white-space: nowrap;
  }
  /* Prevent the thumbnail column from stretching */
  .woocommerce-cart-form td.product-name {
    width: auto;
  }
  .woocommerce-cart-form td.product-price,
  .woocommerce-cart-form td.product-quantity,
  .woocommerce-cart-form td.product-subtotal {
    white-space: nowrap;
  }
}
/**
 * Products
 */
.grid-icon {
  width: 44;
}

.products-header {
  justify-self: left;
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 0.83rem;
}

#product-grid, .related > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2em;
}

/* Grid view */
#product-grid.grid, .related > ul, .up-sells > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
}
#product-grid.grid .product-card, #product-grid.grid li, .related > ul .product-card, .related > ul li, .up-sells > ul .product-card, .up-sells > ul li {
  color: hsl(0, 0%, 13%);
  border: 2px solid;
  border-color: hsl(0, 0%, 80%);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  box-shadow: 0px 4px 4px hsl(0, 0%, 75%);
  border-radius: 1em;
  transition: transform 0.3s ease, background-color 0.4s ease;
  background-color: hsl(0, 0%, 96%);
  justify-content: space-between;
}
#product-grid.grid .product-card:hover, #product-grid.grid li:hover, .related > ul .product-card:hover, .related > ul li:hover, .up-sells > ul .product-card:hover, .up-sells > ul li:hover {
  background-color: hsla(0, 70%, 85%, 0.6);
  box-shadow: 0px 6px 6px hsl(0, 0%, 75%);
  transform: scale(1.01) translateY(-5px);
  border-color: black;
}
#product-grid.grid .product-card:hover img, #product-grid.grid li:hover img, .related > ul .product-card:hover img, .related > ul li:hover img, .up-sells > ul .product-card:hover img, .up-sells > ul li:hover img {
  box-shadow: 0px 4px 6px hsl(0, 0%, 75%);
  border: 1px solid;
}
#product-grid.grid .product-card:hover button, #product-grid.grid .product-card:hover .button, #product-grid.grid li:hover button, #product-grid.grid li:hover .button, .related > ul .product-card:hover button, .related > ul .product-card:hover .button, .related > ul li:hover button, .related > ul li:hover .button, .up-sells > ul .product-card:hover button, .up-sells > ul .product-card:hover .button, .up-sells > ul li:hover button, .up-sells > ul li:hover .button {
  box-shadow: 0px 4px 6px;
  border: 2px solid white;
}
#product-grid.grid .product-card a, #product-grid.grid li a, .related > ul .product-card a, .related > ul li a, .up-sells > ul .product-card a, .up-sells > ul li a {
  color: hsl(0, 0%, 13%);
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#product-grid.grid .product-card a .product-info, #product-grid.grid li a .product-info, .related > ul .product-card a .product-info, .related > ul li a .product-info, .up-sells > ul .product-card a .product-info, .up-sells > ul li a .product-info {
  width: 100%;
}
#product-grid.grid .product-card a .xtfw-wc-product-image, #product-grid.grid li a .xtfw-wc-product-image, .related > ul .product-card a .xtfw-wc-product-image, .related > ul li a .xtfw-wc-product-image, .up-sells > ul .product-card a .xtfw-wc-product-image, .up-sells > ul li a .xtfw-wc-product-image {
  width: 100%;
}
#product-grid.grid .product-card a .xtfw-wc-product-image .onsale, #product-grid.grid li a .xtfw-wc-product-image .onsale, .related > ul .product-card a .xtfw-wc-product-image .onsale, .related > ul li a .xtfw-wc-product-image .onsale, .up-sells > ul .product-card a .xtfw-wc-product-image .onsale, .up-sells > ul li a .xtfw-wc-product-image .onsale {
  position: absolute;
  padding: 1rem;
  background: hsl(0, 0%, 96%);
  border-radius: 500px;
  outline: 2px solid hsl(0, 0%, 50%);
  font-weight: 600;
}
#product-grid.grid .product-card .star-rating, #product-grid.grid li .star-rating, .related > ul .product-card .star-rating, .related > ul li .star-rating, .up-sells > ul .product-card .star-rating, .up-sells > ul li .star-rating {
  width: 5em;
  margin: 0 auto;
}
#product-grid.grid .product-card .product-card-left .product-thumb, #product-grid.grid li .product-card-left .product-thumb, .related > ul .product-card .product-card-left .product-thumb, .related > ul li .product-card-left .product-thumb, .up-sells > ul .product-card .product-card-left .product-thumb, .up-sells > ul li .product-card-left .product-thumb {
  width: 100%;
  aspect-ratio: 1;
}
#product-grid.grid .product-card .product-title, #product-grid.grid .product-card h2, #product-grid.grid li .product-title, #product-grid.grid li h2, .related > ul .product-card .product-title, .related > ul .product-card h2, .related > ul li .product-title, .related > ul li h2, .up-sells > ul .product-card .product-title, .up-sells > ul .product-card h2, .up-sells > ul li .product-title, .up-sells > ul li h2 {
  font-size: 1.2rem;
  text-align: center;
  margin-block-end: 0.2rem;
}
#product-grid.grid .product-card img, #product-grid.grid li img, .related > ul .product-card img, .related > ul li img, .up-sells > ul .product-card img, .up-sells > ul li img {
  width: 100%;
  border-radius: 0.8em;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: box-shadow 0.3s ease, border 0.2s ease;
}
#product-grid.grid .product-card .product-card-left, #product-grid.grid li .product-card-left, .related > ul .product-card .product-card-left, .related > ul li .product-card-left, .up-sells > ul .product-card .product-card-left, .up-sells > ul li .product-card-left {
  flex-direction: column;
  width: 100%;
  color: hsl(0, 0%, 13%);
}
#product-grid.grid .product-card .product-card-right, #product-grid.grid li .product-card-right, .related > ul .product-card .product-card-right, .related > ul li .product-card-right, .up-sells > ul .product-card .product-card-right, .up-sells > ul li .product-card-right {
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: end;
}

/* list-sm style */
#product-grid.list-sm .product-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid;
  border-color: hsl(0, 0%, 80%);
  gap: 1rem;
}
#product-grid.list-sm .product-card .product-thumb {
  flex: 0 0 40px;
  height: 100%;
  overflow: hidden;
  display: flex;
}
#product-grid.list-sm .product-card .skeleton-box.title {
  width: 9ch;
}
#product-grid.list-sm .product-card .product-title {
  font-size: 1.1rem;
  line-height: 1.7;
  flex-grow: 1;
  margin: 0;
  color: hsl(0, 0%, 13%);
}
#product-grid.list-sm .product-card .product-rating {
  justify-self: flex-start;
}
#product-grid.list-sm .product-card .product-card-left {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
}
#product-grid.list-sm .product-card .product-card-right {
  flex-direction: row;
  align-items: baseline;
  flex: 0 0 auto;
}

/* List with large image */
#product-grid.list-lg .product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: left;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid;
  border-color: hsl(0, 0%, 80%);
}
#product-grid.list-lg .product-card .skeleton.product-card-left {
  width: 40%;
}
#product-grid.list-lg .product-card .skeleton-box.title {
  width: 6ch;
}
#product-grid.list-lg .product-card .large-card-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  max-height: 300px;
}
#product-grid.list-lg .product-card .product-title {
  font-size: 1.25rem;
  flex-grow: 1;
}
#product-grid.list-lg .product-card .product-thumb {
  height: 100%;
  overflow: hidden;
}
#product-grid.list-lg .product-card .product-card-left {
  gap: 0.5rem;
  height: 100%;
  width: 50%;
  aspect-ratio: 1;
}
#product-grid.list-lg .product-card .product-card-left.skeleton {
  min-width: 40%;
}
#product-grid.list-lg .product-card .product-card-right {
  align-items: center;
}
.product-thumb {
  display: block;
  aspect-ratio: 1;
}

.product-card-right {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.5rem;
  text-align: center;
}

.product-card-left {
  display: flex;
  align-items: center;
}

.product-card-right * {
  text-align: center;
}

.product-card-right form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.product-rating {
  text-align: center;
}

.product-price {
  display: flex;
  gap: 0.5rem;
}

.view-product-button, .product-card-right button, .related > ul .button, .up-sells > ul .button {
  border: 2px solid;
  border-color: hsl(0, 0%, 80%);
  border-radius: 3px;
  background: hsl(0, 0%, 93%);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
  transition: all 0.3 ease;
}
.view-product-button:hover, .product-card-right button:hover, .related > ul .button:hover, .up-sells > ul .button:hover {
  border-color: hsl(0, 0%, 13%);
  background-color: #ffffff;
  color: hsl(0, 0%, 13%);
}
.view-product-button:focus, .product-card-right button:focus, .related > ul .button:focus, .up-sells > ul .button:focus {
  border-color: hsl(0, 0%, 50%);
  outline: none;
}

/* Skeleton styling */
#product-grid.loading .skeleton {
  display: flex;
  flex-direction: row;
  padding: 1rem;
  border: 1px solid hsl(0, 0%, 60%);
}

.skeleton-box {
  border-radius: 4px;
}

.skeleton-box.thumb {
  width: 100%;
  padding-top: 75%;
  background-color: hsl(0, 0%, 93%);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-box.title {
  width: 50%;
  height: 1.2rem;
  background-color: hsl(0, 0%, 93%);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-box.price {
  width: 40%;
  height: 1rem;
  background-color: hsl(0, 0%, 93%);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-box.button {
  width: 12ch;
  background-color: hsl(0, 0%, 93%);
}

#product-grid.list-sm .product-card.skeleton .product-card-right {
  align-items: center;
}

#product-grid.list-lg .product-card.skeleton .product-thumb {
  width: 100%;
}

@keyframes pulse {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    background-color: #eee;
  }
}
#product-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 30%);
}

.dynamic-filters {
  width: 100%;
}

.category-filter label input {
  display: none;
}

.category-filter label {
  padding: 1rem 0.8rem;
  line-height: 0;
  font-size: 1.4rem;
  border: 2px solid;
  color: hsl(0, 0%, 30%);
  background-color: #ffffff;
  border-color: hsl(0, 0%, 70%);
  cursor: pointer;
  border-radius: 200px;
}

.category-filter label.selected {
  color: #ffffff;
  background-color: hsl(0, 0%, 13%);
  border-color: hsl(0, 0%, 13%);
}

.categories-head > * {
  display: inline-block;
}

.categories-head button {
  border: none;
  background: transparent;
  color: hsl(357, 84%, 50%);
  cursor: pointer;
  text-decoration: underline;
}

.category-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.categories-head > h3 {
  margin: 0;
  font-weight: bold;
  font-size: 1.6rem;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.close-icon {
  padding-left: 0.4rem;
}

.view-mode-btn {
  background: #ffffff;
  border: 1px solid hsl(0, 0%, 13%);
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.view-mode-btn svg {
  display: block;
}
.view-mode-btn:hover, .view-mode-btn.active {
  background-color: hsl(0, 0%, 13%);
  color: #ffffff;
}

.stock-filter label {
  cursor: pointer;
}

.hero {
  text-align: center;
  padding-block-start: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.hero-text-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-text-head p {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  line-height: 3rem;
}

.hero-text-alt {
  color: red;
}

.hero-subtext {
  font-size: 1.125rem;
  margin: 0;
  line-height: 2.2;
  max-width: 60ch;
  justify-self: center;
}

.hero-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: hsl(0, 0%, 93%);
  color: hsl(0, 0%, 13%);
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.hero-button:hover {
  background: hsl(0, 0%, 13%);
  color: hsl(0, 0%, 93%);
}

.hero > img {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1.61/1;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0px 12px 28px hsla(0, 0%, 0%, 0.5);
}

.about-us-section {
  margin-block-start: 3em;
  margin-block-end: 1em;
}

.about-header {
  font-size: 2.5rem;
  font-weight: 900;
}

.about-us-section-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
}

.about-us-section-content > img {
  grid-column: 1/6;
  box-shadow: 0px 6px 24px;
  border-radius: 1rem;
  border: 2px solid #ffffff;
}

.about-us-text {
  grid-column: 6/13;
  font-size: 1.2rem;
}

.bold-line {
  font-weight: bold;
  margin-top: 0.5em;
}

.diy-corner {
  max-width: 1300px;
}

.diy-corner h2 {
  font-size: 2.5rem;
  font-weight: 900;
}

.diy-corner-contents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.diy-corner-contents a {
  line-height: 0;
}
.diy-corner-contents a img {
  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.5);
  aspect-ratio: 1;
  border-radius: 1rem;
  width: 100%;
  object-fit: cover;
}
.diy-corner-contents a p {
  font-size: 1.5rem;
}

#threejs-bg {
  display: block;
  width: 100%;
  height: 200px; /* fixed height for consistent LED grid */
}

@media (max-width: 1000px) {
  #product-grid.list-sm .product-card .product-card-right {
    flex-direction: column;
    align-items: center;
  }
  #product-grid.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 714px) {
  .about-us-section-content {
    display: flex;
    flex-direction: column;
  }
  #product-grid.grid, .related > ul, .up-sells > ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .diy-corner-contents {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 450px) {
  #product-grid.grid, .related > ul, .up-sells > ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
/**
 * Single product
 */
.single-product div.product {
  position: relative;
}
.single-product div.product .woocommerce-product-gallery {
  display: block;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 2em;
  right: 1em;
  display: block;
  z-index: 99;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
  margin-bottom: 1em;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  margin: 0;
  padding: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  cursor: pointer;
  float: left;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  opacity: 0.5;
  box-shadow: 0 4px 4px rgba(26, 26, 26, 0.56);
  border-radius: 0.5rem;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
  opacity: 1;
}

.stock:empty::before {
  display: none;
}
.stock.in-stock {
  color: hsl(0, 0%, 13%);
}
.stock.out-of-stock {
  color: hsl(357, 70%, 75%);
}

.product .product-summary-details {
  padding: 1em;
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 30%);
  height: fit-content;
  border-radius: 0.5rem;
}

main > .product {
  display: block;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  gap: 1em;
}

.single_add_to_cart_button {
  margin-top: 10px;
  margin-bottom: 1em;
}

.woocommerce-product-details__short-description {
  margin-bottom: 1em;
}

.product > * {
  grid-column: 1/13;
}

.woocommerce-product-gallery {
  grid-column: 1/13;
}

.product-summary-details {
  grid-column: 1/13;
}
.product-summary-details .xt-framework-notice {
  width: fit-content;
}

.product-summary-details h1 {
  margin-block-start: 0;
  font-weight: 400;
  margin-block-end: 0.5rem;
}

.woocommerce-product-gallery__wrapper > div > a {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.woocommerce-product-gallery__wrapper > div > a > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.flex-control-thumbs li {
  line-height: 0;
}

.woocommerce-product-rating .star-rating span::before {
  content: "★★★★★";
  top: 0;
  position: absolute;
  left: 0;
  color: hsl(0, 0%, 30%);
}

.woocommerce-product-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woocommerce-product-rating * {
  color: hsl(0, 0%, 30%);
}

.flex-control-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.flex-control-nav li img {
  width: 100%;
}

.woocommerce-product-details__short-description p {
  margin-bottom: 0;
}

.quantity {
  display: inline-block;
  margin-right: 0.5em;
}

.woocommerce-variation-availability .stock {
  margin-bottom: 0;
}

#review_form_wrapper {
  margin: 0 -1em;
  padding: 1em;
  border-top: 1px solid hsl(0, 0%, 13%);
}

.comment-reply-title {
  font-size: 1.2rem;
  font-weight: 500;
}

#restock-notify-wrapper {
  margin-bottom: 1.5rem;
}
#restock-notify-wrapper label {
  display: flex;
  gap: 0.5rem;
  align-items: start;
}
#restock-notify-wrapper label input {
  height: 1.5rem;
}

/* See more button */
.si-reviews__see-more-wrap {
  margin: 1rem;
  text-align: center;
}

.si-reviews__see-more {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f8f8;
  cursor: pointer;
}

/* Read more clamping */
.si-review__content.is-clamped {
  overflow: hidden;
  position: relative;
}

.woocommerce-tabs #comments .review .comment-text .description .si-review__content p {
  /* your overrides */
  margin-top: 0;
}

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
  height: 100%;
  justify-content: space-between;
}

.si-review__content.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem; /* fade height */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.si-review__read-more {
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.woocommerce-breadcrumb {
  justify-self: left;
  padding: 1em 0em;
}

.woocommerce-Tabs-panel .woocommerce-product-attributes th, .woocommerce-Tabs-panel .woocommerce-product-attributes td {
  text-align: left;
  padding-inline: 0.5em;
}

@media (min-width: 768px) {
  .product-summary {
    display: flex;
    flex-direction: column;
  }
  .product-summary-details {
    grid-column: 6/13;
  }
  .woocommerce-product-gallery {
    grid-column: 1/6;
    position: sticky;
    height: max-content;
  }
}
/**
 * Checkout
 */
.cross-sells ul {
  display: flex;
  gap: 1em;
}
.cross-sells ul h2 {
  font-size: 1em;
}

@media screen and (min-width: 768px) {
  .col2-set .form-row-first {
    float: left;
    margin-right: 3.8%;
  }
  .col2-set .form-row-last {
    float: right;
    margin-right: 0;
  }
}
/* ==============================
   WooCommerce — Full Checkout
   Two-column layout + polish
   ============================== */
/* ---- Theme tokens (tweak) ---- */
:root {
  --wc-gap: 1rem;
  --wc-card-bg: #fff;
  --wc-card-border: #e6e6e6;
  --wc-card-radius: 12px;
  --wc-shadow: 0 1px 2px rgba(0,0,0,.06);
  --wc-input-bg: #fff;
  --wc-input-text: #111;
  --wc-input-border: #d7d7d7;
  --wc-input-border-hover: #bcbcbc;
  --wc-input-border-focus: #6a6a6a;
  --wc-input-radius: 10px;
  --wc-focus-ring: 0 0 0 3px rgba(0,0,0,0.08);
  --wc-label: #333;
  --wc-required: hsl(357,84%,50%); /* your red */
  --wc-help: #666;
  --wc-error: #b00020;
  --wc-valid: #1f7a1f;
  --wc-error-bg: #fdecef;
  --wc-valid-bg: #ecf8ed;
}

/* ====== Layout scaffold ====== */
.woocommerce form.checkout {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--wc-gap);
}

/* Desktop: two columns; right column sized for summary/payment */
@media (min-width: 980px) {
  .woocommerce form.checkout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    align-items: start;
  }
  /* Place main sections */
  .woocommerce form.checkout > #customer_details {
    grid-column: 1;
  }
  .woocommerce form.checkout > #order_review_heading,
  .woocommerce form.checkout > #order_review {
    grid-column: 2;
  }
  /* Any other direct children span both columns */
  .woocommerce form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
    grid-column: 1/-1;
  }
  /* Make the right column sticky for nicer UX */
  .woocommerce form.checkout > #order_review {
    position: sticky;
    top: 1rem;
  }
}
/* Section headings */
.woocommerce form.checkout h3,
.woocommerce form.checkout #order_review_heading {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.8rem + 0.5vw, 1.3rem);
}

/* ====== Card wrappers ====== */
#customer_details,
#order_review {
  background: var(--wc-card-bg);
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-shadow);
  padding: 1rem;
}

@media (min-width: 640px) {
  #customer_details,
  #order_review {
    padding: 1.25rem;
  }
}
/* ====== Fields: Billing & Shipping ====== */
.woocommerce form.checkout {
  /* Two-up inside billing/shipping on medium+ */
  /* Labels */
  /* Inputs/selects/textarea */
  /* Hover/focus */
  /* Help text */
  /* Validation */
  /* Select2 polish */
}
.woocommerce form.checkout .woocommerce-billing-fields > h3,
.woocommerce form.checkout .woocommerce-shipping-fields > h3 {
  margin-bottom: 0.75rem;
}
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 0.9rem;
}
@media (min-width: 700px) {
  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .woocommerce form.checkout .form-row-wide,
  .woocommerce form.checkout .notes,
  .woocommerce form.checkout .address-field.address-field--wide {
    grid-column: 1/-1;
  }
  .woocommerce form.checkout .form-row-first, .woocommerce form.checkout .form-row-last {
    grid-column: span 1;
  }
}
.woocommerce form.checkout .form-row > label {
  display: inline-block;
  color: var(--wc-label);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.woocommerce form.checkout .form-row > label .required {
  color: var(--wc-required);
  margin-left: 0.25em;
  font-weight: 700;
}
.woocommerce form.checkout .input-text,
.woocommerce form.checkout select,
.woocommerce form.checkout textarea,
.woocommerce form.checkout .select2-container .select2-selection--single {
  background: var(--wc-input-bg);
  color: var(--wc-input-text);
  border: 1px solid var(--wc-input-border);
  border-radius: var(--wc-input-radius);
  width: 100%;
  padding: 0.75rem 0.9rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.woocommerce form.checkout textarea.input-text {
  min-height: 120px;
  resize: vertical;
}
.woocommerce form.checkout .input-text:hover, .woocommerce form.checkout select:hover, .woocommerce form.checkout textarea:hover,
.woocommerce form.checkout .select2-container .select2-selection--single:hover {
  border-color: var(--wc-input-border-hover);
}
.woocommerce form.checkout .input-text:focus, .woocommerce form.checkout select:focus, .woocommerce form.checkout textarea:focus,
.woocommerce form.checkout .select2-container--focus .select2-selection--single {
  border-color: var(--wc-input-border-focus);
  outline: none;
  box-shadow: var(--wc-focus-ring);
}
.woocommerce form.checkout .description {
  margin-top: 0.35rem;
  color: var(--wc-help);
  font-size: 0.82rem;
}
.woocommerce form.checkout .form-row.woocommerce-invalid .input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select,
.woocommerce form.checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--wc-error);
  background: var(--wc-error-bg);
  box-shadow: none;
}
.woocommerce form.checkout .form-row.woocommerce-validated .input-text,
.woocommerce form.checkout .form-row.woocommerce-validated select,
.woocommerce form.checkout .form-row.woocommerce-validated .select2-selection {
  border-color: var(--wc-valid);
  background: var(--wc-valid-bg);
  box-shadow: none;
}
.woocommerce form.checkout .select2-container {
  width: 100% !important;
}
.woocommerce form.checkout .select2-container .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
}
.woocommerce form.checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 1.4;
}
.woocommerce form.checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}

/* Ship to different address toggle spacing */
#ship-to-different-address {
  margin-top: 0.5rem;
}

/* ====== Order Review (table) ====== */
#order_review .shop_table,
#order_review .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

#order_review .shop_table th,
#order_review .shop_table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--wc-card-border);
  vertical-align: top;
}

#order_review .shop_table thead th {
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  color: #555;
  border-bottom: 1px solid var(--wc-card-border);
}

#order_review .shop_table tfoot th {
  text-align: left;
  font-weight: 600;
  color: #222;
}

#order_review .shop_table tfoot .order-total th,
#order_review .shop_table tfoot .order-total td {
  border-top: 2px solid var(--wc-card-border);
  font-size: 1.05rem;
  font-weight: 800;
}

/* Product cells */
#order_review .product-name {
  word-break: break-word;
}
#order_review .product-name dl {
  margin: 1rem 0;
  font-size: 0.9rem;
}
#order_review .product-name dl dd {
  margin-inline-start: 0.5rem;
}
#order_review .product-name dl dd p {
  margin: 0.5rem;
}

#order_review .product-total {
  text-align: right !important;
  white-space: nowrap;
}

/* ====== Payment box ====== */
#order_review #payment,
.woocommerce-checkout #payment {
  background: #fafafa;
  border: 1px solid var(--wc-card-border);
  border-radius: var(--wc-card-radius);
  padding: 1rem;
  margin: var(--wc-gap) 0;
}

#payment .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

#payment .wc_payment_methods > li {
  border-bottom: 1px dashed #ddd;
  padding: 0.5rem 0;
  padding-block-end: 0;
}

#payment .wc_payment_methods > li:last-child {
  border-bottom: 0;
}

#payment .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

#payment .payment_box {
  font-size: 0.9rem;
}
#payment p {
  margin: 0.5em 0;
}

/* Place order button */
#payment .place-order {
  text-align: left;
  margin-block-end: -1em;
}

#place_order.button {
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
}

/* ====== Notices at top of checkout ====== */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: #f7f7f7;
}

.woocommerce-error {
  border-left-color: var(--wc-error);
  background: var(--wc-error-bg);
}

.woocommerce-message {
  border-left-color: #2f8f2f;
  background: #edf7ef;
}

/* ====== Small tweaks ====== */
.woocommerce-checkout .form-row {
  margin: 0;
} /* gaps handled by grid */
.woocommerce-checkout .clear {
  display: none;
} /* old Woo clearfix divs */
form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  margin-bottom: 1em;
}

.woocommerce-form-coupon-toggle > .woocommerce-info {
  margin-bottom: var(--wc-gap);
}

form.checkout > div {
  margin: 0;
}

/**
 * General WooCommerce components
 */
/**
 * Header cart
 */
.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
}
.site-header-cart .cart-contents {
  text-decoration: none;
}
.site-header-cart .widget_shopping_cart {
  display: none;
}
.site-header-cart .product_list_widget {
  margin: 0;
  padding: 0;
}

/**
 * Star rating
 */
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1.618em;
  line-height: 1.618;
  width: 5.3em;
  font-family: inherit;
  font-weight: 400;
}
.star-rating::before {
  content: "★★★★★"; /* ★★★★★ */
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}
.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.star-rating span::before {
  content: "★★★★★";
  top: 0;
  position: absolute;
  left: 0;
  color: hsl(357, 84%, 50%);
}

p.stars a {
  position: relative;
  height: 1em;
  width: 1em;
  text-indent: -999em;
  display: inline-block;
  text-decoration: none;
  margin-right: 1px;
  font-weight: 400;
}
p.stars a::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-family: inherit;
  content: "★"; /* ★ */
  color: hsl(0, 0%, 13%);
  text-indent: 0;
  opacity: 0.25;
}
p.stars a:hover ~ a::before {
  font-family: inherit;
  content: "★"; /* ★ */
  color: hsl(0, 0%, 13%);
  opacity: 0.25;
}
p.stars:hover a::before {
  content: "★";
  color: hsl(357, 84%, 50%);
  opacity: 1;
}
p.stars.selected a.active::before {
  content: "★";
  color: hsl(357, 84%, 50%);
  opacity: 1;
}
p.stars.selected a.active ~ a::before {
  content: "★";
  color: hsl(0, 0%, 13%);
  opacity: 0.25;
}
p.stars.selected a:not(.active)::before {
  content: "★";
  color: hsl(357, 84%, 50%);
  opacity: 1;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 1em;
}
.woocommerce-tabs ul.tabs li {
  display: block;
}
.woocommerce-tabs ul.tabs li a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1em;
  text-decoration: none;
  border-radius: 6px;
  background: #ffffff;
  color: hsl(0, 0%, 13%);
  position: relative;
  border: 1px solid rgba(26, 26, 26, 0.56);
  transition: background 0.2s ease;
}
.woocommerce-tabs ul.tabs li a::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #555;
  display: inline-block;
  transition: background 0.3s ease;
}
.woocommerce-tabs ul.tabs li a:hover {
  background: hsl(0, 0%, 96%);
}
.woocommerce-tabs ul.tabs li.active a::before {
  background: #2ecc71;
}
.woocommerce-tabs ul.tabs li.active a {
  color: #ffffff;
  background: hsl(0, 0%, 13%);
}
.woocommerce-tabs .panel {
  margin: 0;
  padding: 0 1em;
  border: 1px solid rgba(26, 26, 26, 0.56);
  border-radius: 0.5em;
}
.woocommerce-tabs .panel .spec_table_container {
  padding: 0;
  border: 0;
}
.woocommerce-tabs .panel .spec_table_container .spec_category_wrapper {
  margin-bottom: 0;
}
.woocommerce-tabs .panel h2:first-of-type {
  margin-bottom: 1em;
}
.woocommerce-tabs #comments ol {
  list-style: none;
}
.woocommerce-tabs #comments ol li {
  padding: 1em 0;
}
.woocommerce-tabs #comments ol p {
  margin: 0.2em 0 0.5em 0;
}

@media (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
  }
  .woocommerce-tabs ul.tabs li {
    display: inline-block;
  }
  .woocommerce-tabs ul.tabs li a {
    border-radius: 6px 6px 0 0;
    border-bottom: 0;
  }
  .woocommerce-tabs .panel {
    border-radius: 0;
  }
}
/**
 * Password strength meter
 */
.woocommerce-password-strength {
  text-align: right;
}
.woocommerce-password-strength.strong {
  color: hsl(150, 55%, 72%);
}
.woocommerce-password-strength.short {
  color: hsl(357, 70%, 75%);
}
.woocommerce-password-strength.bad {
  color: hsl(357, 70%, 75%);
}
.woocommerce-password-strength.good {
  color: hsl(205, 70%, 75%);
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
  box-shadow: inset 2px 0 0 hsl(150, 55%, 72%);
}
.form-row.woocommerce-invalid input.input-text {
  box-shadow: inset 2px 0 0 hsl(357, 70%, 75%);
}

.required {
  color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: hsl(150, 55%, 72%);
  margin-bottom: 1em;
  padding: 0.9em 1em;
  border-radius: 0.5em;
  clear: both;
}
.woocommerce-message > a,
.woocommerce-info > a,
.woocommerce-error > a,
.woocommerce-noreviews > a,
p.no-comments > a {
  display: block;
}

.woocommerce-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: hsl(205, 70%, 75%);
  padding: 0.9em 1em;
  border-radius: 0.5em;
}

.woocommerce-error {
  background-color: hsl(357, 70%, 75%);
}

.demo_store {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  background-color: hsl(205, 70%, 75%);
  z-index: 9999;
}

@media screen and (min-width: 48em) {
  /**
   * Header cart
   */
  .site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999999;
    left: -999em;
    display: block;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  }
  .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
    left: 0;
    display: block;
  }
}
/**
 * WooCommerce widgets
 */
/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
  margin-bottom: 1.5em;
}
.widget_price_filter .price_slider_amount {
  text-align: right;
  line-height: 2.4;
}
.widget_price_filter .price_slider_amount .button {
  float: left;
}
.widget_price_filter .ui-slider {
  position: relative;
  text-align: left;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: ew-resize;
  outline: none;
  background: hsl(357, 84%, 50%);
  box-sizing: border-box;
  margin-top: -0.25em;
  opacity: 1;
}
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -1em;
}
.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background: hsl(357, 84%, 50%);
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider-horizontal {
  height: 0.5em;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  height: 100%;
}

/**
 * WooCommerce mini-cart
 */
.cart-count.preload, .cart-count.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cart-count:not(.preload):not(.hidden) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mini-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 20000;
  display: flex;
  flex-direction: column;
}

.mini-cart-footer {
  border-top: 1px solid black;
  padding: 0 1em;
}
.mini-cart-count {
  margin-top: 0.8rem;
  margin-bottom: 0;
  font-weight: 600;
}

@media screen and (max-width: 400px) {
  .mini-cart-note {
    display: none;
  }
}
.mini-cart-note {
  font-size: 0.8em;
  margin-top: 0.5em;
}

.mini-cart-drawer.open {
  transform: translateX(0);
}

.mini-cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.mini-cart-drawer.open ~ .mini-cart-overlay {
  display: block;
}

#mini-cart-contents {
  overflow-y: scroll;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.mini-cart-meta {
  font-size: 0.8rem;
}

.woocommerce-mini-cart a {
  display: flex;
}

.mini-cart-details > a {
  color: hsl(0, 0%, 13%);
}

.mini-cart-product-name {
  font-weight: 700;
}

.mini-cart-actions {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid #eee;
}

.close-mini-cart {
  text-decoration: underline;
  font-size: 1.2rem;
  cursor: pointer;
  margin: 0.6em;
  width: unset;
}

.mini-cart-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
}

.mini-cart-empty > a {
  margin: 0 auto;
}

.woocommerce-mini-cart {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  padding-bottom: 0.5em;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.woocommerce-mini-cart-item {
  padding: 0.5em 0.7em;
  border-radius: 0.25rem;
  gap: 0.5rem;
  display: grid;
  grid-template-columns: min(60px, 25%) 1fr auto;
}

.mini-cart-desc {
  margin-top: 0.25em;
  margin-bottom: 0.7em;
}

.mini-cart-footer-container {
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.mini-cart-footer-container .amount {
  margin-inline-start: 0.5rem;
}

.woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  margin-top: 0.8rem;
}

.woocommerce-mini-cart__buttons {
  text-align: center;
  display: flex;
  width: 100%;
  gap: 1em;
}

.woocommerce-mini-cart__buttons > a {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.1em;
}

.qty-controls {
  display: flex;
  border: 1px solid hsl(0, 0%, 33%);
  border-radius: 4px;
  width: fit-content;
  margin-top: 0.5em;
}

.qty-controls input {
  width: 5ch;
}

.qty-controls button, .qty-controls input {
  background: #ffffff;
  border: none;
  text-align: center;
  border: 1px solid hsl(100, 100%, 100%);
}
.qty-controls button:hover, .qty-controls button:focus, .qty-controls input:hover, .qty-controls input:focus {
  background: rgb(242.25, 242.25, 242.25);
  border: 1px solid red;
  cursor: pointer;
}

.remove {
  display: block;
  text-align: right;
  font-size: 0.9rem;
  padding-top: 0.2rem;
}

.price-regular {
  text-decoration: line-through;
}

.mini-cart-item-subtotal {
  text-align: right;
}

.subtotal-discount-badge, .discount-badge {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.5em 0;
  padding: 0.2rem;
  display: block;
  border: 1px solid hsl(0, 0%, 13%);
  border-radius: 0.2em;
  width: fit-content;
}

.mini-cart-meta .variation {
  margin-top: 0.3em;
  margin-bottom: 1em;
}
.mini-cart-meta .variation * {
  margin: 0;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
}
.mini-cart-meta .variation p {
  margin-left: 1em;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.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 !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: hsl(0, 0%, 96%);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: hsl(0, 0%, 30%);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/*# sourceMappingURL=style.css.map */