@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
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;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-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;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-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;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* =========================================
     PERFORMANCE OPTIMIZATIONS
     ========================================= */

/* =========================================
     FOUNDATIONAL STYLES
     ========================================= */

*,
  *::before,
  *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Optimize smooth scrolling for reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden !important;
}

:root {
  --threeclothing-brand-red: #b91c1c;
}

/* Force all common red utility variants to the same brand red */

.text-red-500,
  .text-red-600,
  .text-red-700,
  .text-red-800,
  .text-brand-red {
  color: var(--threeclothing-brand-red) !important;
}

.bg-red-500,
  .bg-red-600,
  .bg-red-700,
  .bg-red-800,
  .bg-brand-red {
  background-color: var(--threeclothing-brand-red) !important;
}

h1,
  h2,
  h3,
  h4,
  h5,
  h6{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}

/* Theme-consistent page titles across templates and archives */

.page-title,
  .entry-title,
  .archive-page-title,
  .woocommerce-products-header__title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #111827 !important;
}

@media (max-width: 640px) {
  .page-title,
    .entry-title,
    .archive-page-title,
    .woocommerce-products-header__title {
    font-size: 1.4rem !important;
    letter-spacing: 0.05em !important;
  }
}

/* Focus visible styles for accessibility - disabled on mobile header buttons */

:focus-visible:not([aria-label*="menu"]):not([aria-label*="search"]):not([aria-label*="cart"]):not([aria-label*="close"]) {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Screen reader only text */

.screen-reader-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link{
  position: absolute;
  top: -2.5rem;
  left: 0px;
  z-index: 50;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  display: inline-block;
}

.skip-link:focus,
  .skip-link:focus-visible{
  top: 0px;
  outline: 2px solid #fff;
  outline-offset: 2px;
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  overflow: visible;
  white-space: normal;
}

.screen-reader-text:focus,
  .screen-reader-text:focus-visible {
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* DEFAULT CONTAINER (Narrow for Blog/Text) */

main#primary,
  .site-main {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

/* Category tag spacing */

/* =========================================
     CLEAN ACCORDION/TAB STYLES
     ========================================= */

/* Active state when open */

/* Button/Header styling */

/* Icon container */

/* Content area */

/* Review badge */

/* Mobile optimizations */

/* Description content styling inside accordion */

.accordion-item .prose {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}

.accordion-item .prose p {
  margin-bottom: 0.75rem;
}

/* SKU tag styling */

/* Shipping icons colors */

/* Loading state skeleton (optional) */

/* =========================================
     1. ICONS & INTERACTIVE ELEMENTS
     ========================================= */

.btn-icon,
  button.btn-icon,
  .btn-icon svg,
  .header-icon-btn,
  button.header-icon-btn,
  .header-icon-btn svg {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.btn-icon:hover,
  .header-icon-btn:hover {
  opacity: 0.7 !important;
  transform: scale(1.05) !important;
}

.btn-icon:active,
  .header-icon-btn:active {
  transform: scale(0.95) !important;
}

/* Show hamburger on mobile, hide on lg+ */

.header-icon-btn.lg\:hidden {
  display: inline-flex !important;
}

@media (min-width: 1024px) {
  .header-icon-btn.lg\:hidden {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .btn-icon:focus-visible,
    .header-icon-btn:focus-visible {
    outline: none !important;
  }
}

@media (min-width: 641px) {
  .btn-icon:focus-visible,
    .header-icon-btn:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 2px !important;
  }
}

/* Remove all borders from mobile header buttons */

button[aria-label="Toggle menu"],
  button[aria-label="Search"],
  button[aria-label="Open cart"],
  button[aria-label="Close menu"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Prevent focus outline on mobile header buttons */

button[aria-label="Toggle menu"]:focus,
  button[aria-label="Search"]:focus,
  button[aria-label="Open cart"]:focus,
  button[aria-label="Close menu"]:focus,
  button[aria-label="Toggle menu"]:focus-visible,
  button[aria-label="Search"]:focus-visible,
  button[aria-label="Open cart"]:focus-visible,
  button[aria-label="Close menu"]:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Floating WhatsApp widget */

.whatsapp-widget {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
  animation: whatsapp-live 3.6s ease-in-out infinite;
}

@media (max-width: 600px) {
  .whatsapp-widget {
    bottom: 12px !important;
    right: 12px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    z-index: 9999 !important;
  }
}

.whatsapp-widget:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
  opacity: 0.95 !important;
}

.whatsapp-widget:active {
  transform: translateY(0) scale(0.98) !important;
}

@keyframes whatsapp-live {
  0%,
    100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    opacity: 1;
  }

  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
    opacity: 0.98;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-widget {
    animation: none !important;
  }
}

/* HOME PAGE ONLY: Keep widget fixed and clickable */

.page-template-home-custom .whatsapp-widget {
  position: fixed !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.whatsapp-icon {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

.whatsapp-label {
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* =========================================
     2. GLOBAL BUTTONS (Enhanced UX)
     ========================================= */

.btn,
  .woocommerce-button,
  .single_add_to_cart_button,
  .checkout-button,
  button[name="add-to-cart"],
  button[name="apply_coupon"],
  button[name="update_cart"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  min-height: 3.5rem !important;
  padding: 0 2rem !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.\!btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  min-height: 3.5rem !important;
  padding: 0 2rem !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Button ripple effect on click */

.\!btn::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.btn::after,
  .woocommerce-button::after,
  .single_add_to_cart_button::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
}

.\!btn:active::after {
  width: 300px !important;
  height: 300px !important;
}

.btn:active::after,
  .woocommerce-button:active::after,
  .single_add_to_cart_button:active::after {
  width: 300px !important;
  height: 300px !important;
}

/* Hover States with smooth transition */

.woocommerce-button:hover,
  .single_add_to_cart_button:hover,
  button[name="add-to-cart"]:hover,
  button[name="apply_coupon"]:hover,
  button[name="update_cart"]:hover {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Active state */

.woocommerce-button:active,
  .single_add_to_cart_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Disabled state */

.woocommerce-button:disabled,
  .single_add_to_cart_button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Full Width Add to Cart on Single Product - Premium Design */

body.single-product .single_add_to_cart_button,
  body.single-product button[name="add-to-cart"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px !important;
  font-size: 14px !important;
  padding: 0 3rem !important;
  letter-spacing: 0.05em !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* White Variant (View Cart) */

/* Loading state */

.woocommerce-button.loading,
  .single_add_to_cart_button.loading {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

.woocommerce-button.loading::before,
  .single_add_to_cart_button.loading::before {
  content: '' !important;
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: spin 0.6s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================
     3. PRICE & TITLE FIXES (Enhanced Typography)
     ========================================= */

.price,
  ins,
  mark {
  background: transparent !important;
  background-color: transparent !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Remove text-decoration:none from .amount globally to allow del to work */

.amount {
  background: transparent !important;
  background-color: transparent !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Strikethrough for Regular Price with better contrast */

del .amount,
  .product-price del,
  .price del,
  del .woocommerce-Price-amount {
  text-decoration: line-through !important;
  opacity: 1 !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  font-size: 1em !important;
}

/* Sale Price Styling with emphasis */

ins .amount {
  font-weight: 700 !important;
  color: #b91c1c !important;
}

/* Product Title Sizing - Premium Design */

.product_title,
  h3.product_title,
  body.single-product h3.product_title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  color: #000000 !important;
  height: auto !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price ins,
  .woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
  .woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-size: 16px !important;
}

@media (min-width: 768px) {
  .product_title,
    h3.product_title,
    body.single-product h3.product_title {
    font-size: 26px !important;
    margin-bottom: 28px !important;
    color: #000000 !important;
  }
}

/* Product Price Container - Premium Design with Badge */

.product-price {
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  margin-bottom: 36px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-wrap: wrap !important;
}

@media (min-width: 640px) {
  .product-price {
    font-size: 20px !important;
    gap: 14px !important;
  }
}

@media (min-width: 768px) {
  .product-price {
    font-size: 24px !important;
    margin-bottom: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Price Strikethrough Fix - Refined Design */

.product-price del,
  .price del,
  del .woocommerce-Price-amount {
  text-decoration: line-through !important;
  opacity: 1 !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  font-size: 1em !important;
}

.product-price ins,
  .price ins {
  text-decoration: none !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}

/* Sale badge - Premium Design */

/* =========================================
     4. PAGE LAYOUT UNLOCKS (Improved Spacing)
     ========================================= */

/* Unlock Width for PRODUCT & CART Pages */

body.single-product .container,
  body.single-product .site-content,
  body.single-product #content,
  body.woocommerce-cart .container,
  body.woocommerce-cart .site-content,
  body.woocommerce-cart #content {
  max-width: 1600px !important;
  width: 95% !important;
  margin: 0 auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

@media (min-width: 768px) {
  body.single-product .container,
    body.single-product .site-content,
    body.single-product #content,
    body.woocommerce-cart .container,
    body.woocommerce-cart .site-content,
    body.woocommerce-cart #content {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* =========================================
     5. CART PAGE UI (Enhanced Layout)
     ========================================= */

/* A. FORCE GRID LAYOUT (Desktop) with better spacing */

@media (min-width: 1024px) {
  body.woocommerce-cart .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 60px !important;
    align-items: start !important;
    margin-top: 40px !important;
  }

  body.woocommerce-cart .woocommerce-cart-form {
    width: 100% !important;
    margin: 0 !important;
  }

  body.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    position: sticky !important;
    top: 120px !important;
    background: linear-gradient(to bottom, #f9fafb, #ffffff) !important;
    padding: 40px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
}

/* B. CART TABLE STYLING with improved readability */

body.woocommerce-cart table.cart {
  border: none !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

body.woocommerce-cart table.cart th {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  padding: 20px 12px !important;
  border-bottom: 2px solid #e5e7eb !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #374151 !important;
}

body.woocommerce-cart table.cart td {
  border-top: 1px solid #f3f4f6 !important;
  padding: 30px 12px !important;
  vertical-align: middle !important;
}

body.woocommerce-cart table.cart td.product-thumbnail {
  width: 100px !important;
  padding-right: 20px !important;
}

body.woocommerce-cart table.cart td.product-thumbnail img {
  width: 80px !important;
  border: 1px solid #e5e7eb !important;
  transition: transform 0.2s ease !important;
  border-radius: 4px !important;
}

body.woocommerce-cart table.cart td.product-thumbnail img:hover {
  transform: scale(1.05) !important;
}

body.woocommerce-cart table.cart td.product-name a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: #000 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.woocommerce-cart table.cart td.product-name a:hover {
  color: #374151 !important;
}

/* Quantity input styling */

body.woocommerce-cart .quantity input.qty {
  width: 60px !important;
  height: 44px !important;
  text-align: center !important;
  border: 1px solid #d1d5db !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: border-color 0.2s ease !important;
}

body.woocommerce-cart .quantity input.qty:focus {
  border-color: #000 !important;
  outline: none !important;
}

/* Remove button styling */

body.woocommerce-cart .product-remove a {
  color: #9ca3af !important;
  font-size: 20px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.woocommerce-cart .product-remove a:hover {
  color: #b91c1c !important;
}

/* Coupon form */

body.woocommerce-cart .coupon {
  display: flex !important;
  gap: 12px !important;
  padding-top: 30px !important;
  flex-wrap: wrap !important;
}

body.woocommerce-cart .\!coupon {
  display: flex !important;
  gap: 12px !important;
  padding-top: 30px !important;
  flex-wrap: wrap !important;
}

body.woocommerce-cart input#coupon_code {
  width: 200px !important;
  height: 56px !important;
  border: 1px solid #d1d5db !important;
  padding: 0 20px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  transition: border-color 0.2s ease !important;
}

body.woocommerce-cart input#coupon_code:focus {
  border-color: #000 !important;
  outline: none !important;
}

/* Cart totals */

body.woocommerce-cart .cart_totals h2 {
  font-size: 18px !important;
  margin-bottom: 24px !important;
  border-bottom: 2px solid #e5e7eb !important;
  padding-bottom: 16px !important;
  letter-spacing: 0.05em !important;
}

body.woocommerce-cart .cart_totals table.shop_table th,
  body.woocommerce-cart .cart_totals table.shop_table td {
  padding: 16px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
  body.woocommerce-cart .cart_totals table.shop_table tr:last-child td {
  font-weight: 700 !important;
  font-size: 18px !important;
  padding-top: 20px !important;
}

body.woocommerce-cart .woocommerce-shipping-calculator>p {
  display: none !important;
}

/* =========================================
     6. SINGLE PRODUCT PAGE (Reference Style)
     ========================================= */

/* A. GALLERY CONTAINER - Premium Layout */

.product-gallery,
  .woocommerce-product-gallery {
  position: relative !important;
  width: 100% !important;
  opacity: 1 !important;
  min-height: 350px !important;
  display: block !important;
}

/* B. MAIN IMAGE (Full View - Premium Presentation) */

@media (max-width: 640px) {
  .woocommerce-checkout-payment .payment-summary {
    display: none !important;
  }
}

/* FlexSlider Container */

.flex-viewport ul.slides {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.flex-viewport ul.slides li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slides>li,
  .slides>li img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.flexslider .slides {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.flexslider .slides>li {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.flexslider .slides img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* C. THUMBNAILS (Premium Grid Layout) */

.flex-control-nav,
  .flex-control-thumbs,
  ol.flex-control-nav.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  width: 100% !important;
  gap: 14px !important;
  margin: 32px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: flex-start !important;
  position: static !important;
  overflow: visible !important;
}

/* Individual Thumbnail Item - Refined Touch */

.flex-control-nav li,
  .flex-control-thumbs li {
  width: 100% !important;
  height: 100px !important;
  padding: 0 !important;
  cursor: pointer !important;
  border: 2px solid #d1d5db !important;
  border-radius: 6px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  list-style: none !important;
  position: static !important;
  float: none !important;
  display: block !important;
  background: #f9fafb !important;
  overflow: hidden !important;
}

/* Remove margin from every 4th item for proper grid */

.flex-control-nav li:nth-child(4n),
  .flex-control-thumbs li:nth-child(4n) {
  margin-right: auto !important;
}

/* Hover State - Subtle Enhancement */

.flex-control-nav li:hover,
  .flex-control-thumbs li:hover {
  border-color: #8d8d8d !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Thumbnail Image */

.flex-control-nav li img,
  .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  opacity: 0.7 !important;
  transition: opacity 0.25s ease !important;
  display: block !important;
  border: none !important;
  padding: 8px !important;
}

/* Active State (Selected Image) - Clear Visual Feedback */

.flex-control-nav li.flex-active,
  .flex-control-thumbs li.flex-active {
  border-color: #1a1a1a !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.flex-control-nav li.flex-active img,
  .flex-control-thumbs li.flex-active img,
  .flex-control-nav li img.flex-active,
  .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
}

/* Remove any direction nav arrows */

/* =========================================
     7. VARIATION SWATCHES (Clean & Minimal)
     ========================================= */

/* Hide default WooCommerce variation elements */

.\!variations select {
  display: none !important;
}

.variations select {
  display: none !important;
}

/* Hide default WooCommerce label - preventing double display */

.\!variations .label,
  .\!variations th,
  .\!variations th.label,
  .\!variations td.label label {
  display: none !important;
}

.variations .label,
  .variations th,
  .variations th.label,
  .variations td.label label {
  display: none !important;
}

.\!variations .label,
  .\!variations th,
  .\!variations th.label,
  .\!variations td.label label {
  display: none !important;
}

/* Full width variation rows */

.\!variations tr,
  .\!variations td,
  .\!variations td.value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.variations tr,
  .variations td,
  .variations td.value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.\!variations tr,
  .\!variations td,
  .\!variations td.value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Swatch Container - Premium Design */

.variation-swatches {
  margin-bottom: 24px !important;
  width: 100% !important;
}

/* Swatch Label - Refined Typography */

.swatch-label {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.08em !important;
  color: #111111 !important;
  display: block !important;
  font-family: 'Lato', sans-serif !important;
}

/* Swatch Options Container - Generous Spacing */

.swatch-options {
  display: flex !important;
  gap: 10px 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Individual Swatch Item - Tactile & Refined */

.swatch-item {
  border: 2px solid #d1d5db !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  min-width: 50px !important;
  min-height: 36px !important;
  text-align: center !important;
  font-family: 'Lato', sans-serif !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}

/* Swatch Hover State - Subtle Refinement */

.swatch-item:hover {
  border-color: #8d8d8d !important;
  background: #f9fafb !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Swatch Active (Selected) State - Clear Selection */

.swatch-item.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-weight: 600 !important;
}

/* Disabled/Unavailable Swatch */

.swatch-item.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f3f4f6 !important;
}

/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
  .variation-swatches {
    margin-bottom: 20px !important;
  }

  .swatch-item {
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-width: 45px !important;
  }

  .swatch-options {
    gap: 8px 8px !important;
  }

  .swatch-label {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
}

@media (max-width: 480px) {
  .swatch-item {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 40px !important;
    min-height: 34px !important;
  }

  .swatch-options {
    gap: 6px 6px !important;
  }
}

/* =========================================
     7a. PRODUCT DESCRIPTION & DETAILS (Premium Spacing)
     ========================================= */

.product-description,
  .product-content,
  .woocommerce-product-details__short-description,
  div.product .woocommerce-product-details__short-description {
  margin-bottom: 40px !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  font-family: 'Lato', sans-serif !important;
}

/* Product meta (SKU, Category, Tags) */

/* =========================================
     7b. RESPONSIVE PRODUCT PAGE (Premium Spacing)
     ========================================= */

@media (max-width: 768px) {
  .product_title,
    h3.product_title {
    font-size: 28px !important;
    margin-bottom: 20px !important;
  }

  .product-price {
    font-size: 18px !important;
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
  }

  .variation-swatches {
    margin-bottom: 32px !important;
  }

  .swatch-item {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-width: 48px !important;
  }

  .woocommerce-product-gallery__image {
    margin-bottom: 20px !important;
    padding: 16px !important;
  }

  .flex-control-nav,
    .flex-control-thumbs,
    ol.flex-control-nav.flex-control-thumbs {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .flex-control-nav li,
    .flex-control-thumbs li {
    height: 80px !important;
  }
}

/* =========================================
     8. CART DRAWER / MINI CART (Enhanced)
     ========================================= */

/* =========================================
     MODERN MINI CART DRAWER STYLES
     ========================================= */

/* Mini Cart Item Layout */

.widget_shopping_cart_content .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Product Image */

.widget_shopping_cart_content .woocommerce-mini-cart-item img {
  width: 72px !important;
  height: 72px !important;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #f3f4f6;
}

/* Product Details Container */

.widget_shopping_cart_content .woocommerce-mini-cart-item>a:not(.remove) {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  flex: 1;
  text-decoration: none;
  min-width: 0;
}

/* Product Info Text */

.widget_shopping_cart_content .woocommerce-mini-cart-item .product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .product-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .product-variation {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: capitalize;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .product-price-qty {
  font-size: 0.8125rem;
  color: #6b7280;
  font-weight: 500;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .product-price-qty .amount {
  color: #111827;
  font-weight: 600;
}

/* Remove Button */

.widget_shopping_cart_content .woocommerce-mini-cart-item .remove {
  position: absolute !important;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6 !important;
  border-radius: 6px;
  color: #9ca3af !important;
  font-size: 1.25rem !important;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  padding: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .remove:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* Quantity Badge */

.widget_shopping_cart_content .woocommerce-mini-cart-item .qty-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 3.25rem;
  background: #111827;
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid white;
}

/* Loading State */

.widget_shopping_cart_content.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Scrollbar Styling */

.widget_shopping_cart_content::-webkit-scrollbar {
  width: 6px;
}

.widget_shopping_cart_content::-webkit-scrollbar-track {
  background: transparent;
}

.widget_shopping_cart_content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.widget_shopping_cart_content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Mobile Optimizations */

@media (max-width: 640px) {
  .widget_shopping_cart_content .woocommerce-mini-cart-item {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .widget_shopping_cart_content .woocommerce-mini-cart-item img {
    width: 64px !important;
    height: 64px !important;
  }

  .widget_shopping_cart_content .woocommerce-mini-cart-item .product-name {
    font-size: 0.8125rem;
  }
}

/* =========================================
     8. RESPONSIVE ENHANCEMENTS
     ========================================= */

/* Mobile cart drawer adjustments */

@media (max-width: 768px) {
  .widget_shopping_cart_content img {
    width: 70px !important;
  }

  .widget_shopping_cart_content li a>div>span {
    font-size: 13px !important;
  }

  .widget_shopping_cart_content .quantity {
    font-size: 11px !important;
  }
}

/* Mobile-first approach */

@media (max-width: 640px) {
  /* Full-width containers on mobile */

  .container,
    .site-content,
    #content,
    main#primary,
    .woocommerce-page .container,
    .woocommerce-page .site-content,
    .woocommerce-page #content,
    body.single-product .container,
    body.single-product .site-content,
    body.single-product #content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.single-product .single_add_to_cart_button,
    body.single-product button[name="add-to-cart"] {
    font-size: 12px !important;
    min-height: 52px !important;
    padding: 0 1.5rem !important;
  }

  .product_title,
    h3.product_title {
    font-size: 16px !important;
  }

  /* Gallery responsive on mobile */

  .product-gallery {
    margin-bottom: 24px !important;
    min-height: 350px !important;
    display: block !important;
  }

  .woocommerce-product-gallery {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 350px !important;
    display: block !important;
  }

  .flex-viewport {
    min-height: 350px !important;
    display: block !important;
  }

  .woocommerce-product-gallery__image {
    margin-bottom: 8px !important;
    min-height: 300px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .woocommerce-product-gallery__image img {
    min-height: 300px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  .woocommerce-product-gallery,
    .woocommerce-product-gallery__image,
    .woocommerce-product-gallery__image img,
    .woocommerce-product-gallery .flex-viewport,
    .woocommerce-product-gallery .flex-viewport img,
    .slides>li,
    .slides>li img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .slides>li {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 300px !important;
  }

  .slides>li img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 300px !important;
  }

  .flex-control-thumbs li {
    width: 60px !important;
    height: 60px !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
  }

  .flex-control-thumbs li img {
    width: 60px !important;
    height: 60px !important;
  }

  .product-price {
    font-size: 18px !important;
  }

  /* Mobile cart table adjustments */

  body.woocommerce-cart table.cart td.product-thumbnail {
    width: 60px !important;
    padding-right: 12px !important;
  }

  body.woocommerce-cart table.cart td.product-thumbnail img {
    width: 60px !important;
  }

  body.woocommerce-cart table.cart th {
    font-size: 10px !important;
    padding: 16px 8px !important;
  }

  body.woocommerce-cart table.cart td {
    padding: 20px 8px !important;
  }
}

/* Tablet adjustments */

@media (min-width: 641px) and (max-width: 1023px) {
  body.single-product div.woocommerce div.product {
    gap: 40px !important;
  }

  body.woocommerce-cart .cart-collaterals {
    margin-top: 40px !important;
    padding: 30px !important;
  }
}

/* =========================================
     9. ACCESSIBILITY IMPROVEMENTS
     ========================================= */

/* Focus indicators */

input:focus,
  select:focus,
  textarea:focus {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .\!btn {
    border-width: 3px !important;
  }

  .btn,
    .woocommerce-button,
    .single_add_to_cart_button {
    border-width: 3px !important;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  /* Reduce gallery padding on mobile */

  .woocommerce-product-gallery {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================
     10. LOADING STATES & FEEDBACK
     ========================================= */

/* Alert / Feedback Messages */

.woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  border-top: 3px solid #000 !important;
  background-color: #f9fafb !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-message {
  border-top-color: #10b981 !important;
}

/* Green - Success */

.woocommerce-error {
  border-top-color: #b91c1c !important;
}

/* Brand Red - Error */

.woocommerce-info {
  border-top-color: #3b82f6 !important;
}

/* Blue - Info */

/* Remove default list styling inside errors */

.woocommerce-error li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide default WooCommerce icons */

.woocommerce-message::before,
  .woocommerce-error::before,
  .woocommerce-info::before {
  display: none !important;
}

/* Action buttons inside alerts */

.woocommerce-message .button,
  .woocommerce-error .button,
  .woocommerce-info .button {
  float: right !important;
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-left: 12px !important;
  transition: all 0.2s ease !important;
}

.woocommerce-message .button:hover,
  .woocommerce-error .button:hover,
  .woocommerce-info .button:hover {
  background: #000 !important;
  color: #fff !important;
}

/* =========================================
     8. SHOP/ARCHIVE PAGE CARD ENHANCEMENT
     ========================================= */

/* Product card container */

/* Premium Fashion Editorial Product Cards */

.product-card,
  .woocommerce ul.products li.product {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0px !important;
  overflow: hidden !important;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  margin-bottom: 1.5rem !important;
}

.product-card:hover,
  .woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.04) !important;
}

/* Image frame with strict 3:4 portrait aspect-ratio */

.product-card__image-wrapper,
  .woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  background: #f8fafc !important;
  position: relative !important;
  min-height: 0 !important;
  border-radius: 0px !important;
  animation: none !important;
}

/* Dual image transition: Primary image scales, Secondary image fades in */

.product-card__image-primary,
  .woocommerce ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center !important;
     object-position: center !important;
  padding: 0 !important;
  background: #f8fafc !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
  opacity: 1 !important;
}

.product-card__image-secondary {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center !important;
     object-position: center !important;
  opacity: 0 !important;
  z-index: 2 !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Interactive Hover states */

.product-card:hover .product-card__image-primary,
  .woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}

.product-card:hover .product-card__image-secondary,
  .woocommerce ul.products li.product:hover .product-card__image-secondary {
  opacity: 1 !important;
  transform: scale(1.04) !important;
}

/* Sleek capsule badges (frosted style) */

.product-card__badge,
  .sale-badge-pill,
  .sold-out-badge-pill {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  color: #fff !important;
}

.product-card__badge--sale,
  .sale-badge-pill {
  background: #b91c1c !important;
  /* Brand red */
}

.product-card__badge--sold-out,
  .sold-out-badge-pill {
  background: #111111 !important;
  /* Stark dark */
}

/* Premium Content Area */

.product-card__content,
  .woocommerce ul.products li.product>div:not(.product-card__image-wrapper) {
  padding: 12px 4px !important;
  border-top: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Category Label */

.product-card__category {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* Minimalist Title */

.product-card__title,
  .product-card__title a,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-family: 'Outfit', 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  transition: color 0.3s ease !important;
}

.product-card__title a:hover,
  .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: #b91c1c !important;
  /* Deep hover interaction */
}

/* Modern size availability tray - shown by default */

.product-card__sizes {
  margin-bottom: 12px !important;
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
}

/* Quick Shop Hover Slide-up Overlay */

.product-card__quick-add {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(17, 17, 17, 0.85) !important;
  -webkit-backdrop-filter: blur(4px) !important;
          backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 12px 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  transform: translateY(100%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.product-card:hover .product-card__quick-add,
  .woocommerce ul.products li.product:hover .product-card__quick-add {
  transform: translateY(0) !important;
}

.product-card__quick-add:hover {
  background: #b91c1c !important;
  /* Brand red on hover */
  color: #ffffff !important;
  text-decoration: none !important;
}

.product-card__quick-add.loading {
  opacity: 0.85 !important;
  background: #111111 !important;
}

.product-card__quick-add.loading::after {
  content: "...";
  display: inline-block;
  animation: quickShopPulse 1s infinite alternate;
}

@keyframes quickShopPulse {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* Minimalist Pricing */

.product-card__price,
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price-display .woocommerce-Price-amount.amount {
  font-family: 'Outfit', 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.woocommerce ul.products li.product .price del,
  .product-card__price del {
  font-size: 12px !important;
  color: #94a3b8 !important;
  opacity: 0.85 !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

.woocommerce ul.products li.product .price ins,
  .product-card__price ins {
  text-decoration: none !important;
  color: #b91c1c !important;
  /* Brand red for sales */
  font-weight: 700 !important;
}

.woocommerce ul.products li.product .price-display del {
  color: #8d8d8d !important;
  opacity: 0.7 !important;
  text-decoration: line-through !important;
  margin-right: 6px !important;
  display: inline !important;
}

.woocommerce ul.products li.product .price-display ins {
  text-decoration: none !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

/* Hide default WooCommerce sale badge - we use custom badge */

.woocommerce ul.products li.product .onsale,
  .woocommerce span.onsale {
  display: none !important;
}

/* Custom sale badge styling - handled in mobile section */

/* Add to cart button on shop cards */

.woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
  width: 100% !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: auto !important;
  transition: all 0.2s ease !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.05em !important;
}

.woocommerce ul.products li.product .button:hover,
  .woocommerce ul.products li.product .add_to_cart_button:hover {
  background: #333 !important;
  color: #fff !important;
}

/* Archive pagination - aligned with 3 Clothing theme style */

.woocommerce nav.woocommerce-pagination {
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.woocommerce nav.woocommerce-pagination ul,
  .woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  color: #111827 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
  border-color: #111827 !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}

.woocommerce nav.woocommerce-pagination ul li .prev,
  .woocommerce nav.woocommerce-pagination ul li .next,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li .prev,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li .next {
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
}

@media (max-width: 640px) {
  .woocommerce nav.woocommerce-pagination ul,
    .woocommerce nav.woocommerce-pagination ul.page-numbers {
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
  }

  .woocommerce nav.woocommerce-pagination ul li .page-numbers,
    .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
  }
}

/* Premium sorting control */

.woo-sorting-control {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  min-height: 48px !important;
}

.woo-sorting-control:hover,
  .woo-sorting-control:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.woo-sorting-control .woocommerce-ordering {
  margin: 0 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/* Filter dropdown */

.woo-filter-dropdown {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.woo-filter-trigger {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
  min-height: 48px !important;
  height: 100% !important;
}

.woo-filter-dropdown.open .woo-filter-trigger {
  border-color: #111827 !important;
}

.woo-filter-dropdown.open .woo-filter-trigger-caret {
  transform: rotate(180deg) !important;
}

.woo-filter-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 900px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 14px !important;
  z-index: 60 !important;
  display: none !important;
}

.woo-filter-dropdown.open .woo-filter-panel {
  display: block !important;
}

/* Mobile overlay for filter panel */

@media (max-width: 767px) {
  .woo-filter-dropdown {
    position: static !important;
    text-align: left;
  }

  .woo-filter-panel {
    position: fixed !important;
    top: 160px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 160px) !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 16px !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
}

.woo-filter-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.woo-filter-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.woo-filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
}

.woo-filter-label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  font-weight: 700 !important;
}

.woo-filter-select,
  .woo-filter-input {
  width: 100% !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  color: #0f172a !important;
  background: #fff !important;
  font-weight: 600 !important;
}

.woo-filter-select:focus,
  .woo-filter-input:focus {
  outline: none !important;
  border-color: #cfd2d6 !important;
}

.woo-filter-price {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 6px !important;
}

.woo-filter-sep {
  color: #9ca3af !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

.woo-filter-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

.woo-filter-apply {
  padding: 10px 16px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.woo-filter-apply:hover {
  transform: translateY(-1px) !important;
}

.woo-filter-reset {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  /* Ensure single-column fields inside overlay on small screens */

  .woo-filter-row {
    grid-template-columns: 1fr !important;
  }
}

.woo-sorting-control select.orderby {
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  min-width: 150px !important;
  border-radius: 6px !important;
  background: none !important;
  cursor: pointer !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.woo-sorting-control select.orderby:hover {
  color: #0b1324 !important;
  transform: translateY(-1px) !important;
  background-color: #f9fafb !important;
}

.woo-sorting-control select.orderby:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.woo-sorting-control option {
  color: #111827 !important;
  background-color: #f8fafc !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Custom dropdown overlay to match theme */

.woo-sort-dropdown {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.vibe-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vibe-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  border-radius: 9999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}

.vibe-filter-chip:hover {
  border-color: #111827;
  background: #f9fafb;
}

.vibe-filter-chip--clear {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.vibe-filter-chip--clear:hover {
  background: #000000;
  border-color: #000000;
}

.vibe-filter-loading #vibe-products-container,
  .vibe-filter-loading #vibe-pagination-container {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.woo-sort-native-hide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.woo-sort-trigger {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  height: 100% !important;
}

.woo-sort-dropdown.open .woo-sort-trigger {
  border-color: #111827 !important;
}

.woo-sort-dropdown.open .woo-sort-caret {
  transform: rotate(180deg) !important;
}

.woo-sort-list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  padding: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  z-index: 50 !important;
  display: none !important;
}

.woo-sort-dropdown.open .woo-sort-list {
  display: block !important;
}

.woo-sort-item {
  padding: 9px 10px !important;
  border-radius: 4px !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.woo-sort-item:hover {
  background: #f3f4f6 !important;
}

.woo-sort-item.is-active {
  background: #111827 !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .woo-sort-list {
    right: auto !important;
    min-width: 100% !important;
  }

  .woo-sorting-control {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
  }

  .woo-sorting-control select.orderby {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

/* Related products section */

.related.products {
  margin-top: 60px !important;
}

.related.products h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 32px !important;
}

/* =========================================
     MOBILE RESPONSIVE ENHANCEMENTS
     ========================================= */

/* Mobile-first product card adjustments */

@media (max-width: 640px) {
  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 8px !important;
  }

  .woocommerce ul.products li.product,
    .product-card {
    min-height: 0 !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 1.25rem !important;
  }

  /* Product Image Container - Tall portrait aspect ratio */

  .product-card__image-wrapper,
    .woocommerce ul.products li.product a.woocommerce-loop-product__link {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    min-height: 0 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    padding: 0 !important;
    border-radius: 0px !important;
  }

  .product-card__image-primary,
    .product-card__image-secondary,
    .woocommerce ul.products li.product img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center !important;
       object-position: center !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #f8fafc !important;
    transform: none !important;
  }

  .product-card:hover .product-card__image-primary,
    .woocommerce ul.products li.product:hover img {
    transform: scale(1.04) !important;
  }

  /* Minimalist Badges on Mobile */

  .product-card__badge,
    .product-card__sale-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.1em !important;
  }

  /* Content Area */

  .product-card__content,
    .woocommerce ul.products li.product>div:not(.product-card__image-wrapper) {
    padding: 8px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: transparent !important;
  }

  /* Product Title */

  .product-card__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-weight: 600 !important;
    color: #111111 !important;
  }

  /* Price Styling */

  .product-card__price,
    .woocommerce ul.products li.product .price {
    font-size: 13px !important;
    padding: 0 !important;
    margin: auto 0 0 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
  }

  .product-card__price .amount,
    .woocommerce ul.products li.product .price .amount {
    font-weight: 700 !important;
    color: #111111 !important;
    font-size: 13px !important;
  }

  .product-card__price del,
    .woocommerce ul.products li.product .price del {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin-left: 0 !important;
  }

  .product-card__price del .amount {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
  }

  /* Remove extra spacing from buttons on mobile */

  .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button {
    font-size: 9px !important;
    padding: 6px 10px !important;
    margin: 6px 0 0 0 !important;
    border-radius: 9999px !important;
  }

  /* Hide Quick Add overlay on mobile viewports to prevent sticky hover states */

  .product-card__quick-add {
    display: none !important;
  }
}

/* Tablet and Desktop Product Cards Overrides */

@media (min-width: 641px) {
  .product-card,
    .woocommerce ul.products li.product {
    border-radius: 0px !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 2rem !important;
  }

  .product-card__image-primary,
    .product-card__image-secondary,
    .woocommerce ul.products li.product img {
    -o-object-fit: cover !important;
       object-fit: cover !important;
    height: 100% !important;
  }

  .product-card__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 14px !important;
    min-height: 2.8em !important;
    max-height: 2.8em !important;
  }

  .product-card__content {
    padding: 12px 4px !important;
  }

  .product-card__badge {
    top: 12px !important;
    left: 12px !important;
    padding: 5px 10px !important;
    font-size: 8px !important;
  }

  .product-card__sale-badge {
    top: 12px !important;
    left: 12px !important;
    padding: 5px 10px !important;
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Additional mobile responsive fixes */

@media (max-width: 640px) {
  .woocommerce div.product {
    display: block !important;
  }

  .woocommerce div.product .product-gallery {
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  .woocommerce div.product .product-info {
    width: 100% !important;
    position: static !important;
  }

  /* Reduce heading sizes on mobile */

  .product_title,
    h3.product_title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .product-price {
    font-size: 16px !important;
  }

  /* Reduce gap on mobile archive */

  .woocommerce ul.products li.product {
    gap: 0 !important;
  }
}

/* Product card balance and image containment (all sizes) */

.woocommerce ul.products li.product {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .relative {
  min-height: 190px;
}

@media (max-width: 640px) {
  .woocommerce ul.products li.product .relative {
    min-height: 160px;
    padding: 10px !important;
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  line-height: 1.35 !important;
  min-height: unset !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: normal !important;
}

.product-card__title,
  .product-card__title a,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: normal !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Single product title size override (all devices) */

body.single-product .product-title,
  body.single-product .product_title,
  body.single-product h1.product_title,
  body.single-product h3.product_title {
  font-size: clamp(1.4rem, 3.2vw, 2rem) !important;
}

/* Disable uppercase for breadcrumbs and product titles (all devices) */

.breadcrumb,
  .breadcrumb-mobile,
  .breadcrumb a,
  .product-title,
  .product_title,
  h1.product_title,
  h3.product_title {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.product-card__title,
  .product-card__title a,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-weight: 500 !important;
}

.woocommerce ul.products li.product .price {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Product card price color rules (all sizes) */

.product-card__price .amount,
  .product-card__price ins .amount,
  .product-card__price ins .woocommerce-Price-amount,
  .woocommerce ul.products li.product .price .amount,
  .woocommerce ul.products li.product .price .woocommerce-Price-amount,
  .woocommerce ul.products li.product .price ins .amount,
  .woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  color: #b91c1c !important;
  font-weight: 700 !important;
}

.product-card__price del,
  .product-card__price del .amount,
  .product-card__price del .woocommerce-Price-amount,
  .woocommerce ul.products li.product .price del,
  .woocommerce ul.products li.product .price del .amount,
  .woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

/* Product Card Title Link - Override global a:hover to brand red */

.product-card__title a:hover,
  .product-card__title a:focus,
  .product-card__title a:active {
  color: #b91c1c !important;
}

/* Tablet adjustments (640px - 1024px) */

@media (min-width: 641px) and (max-width: 1023px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  .woocommerce ul.products li.product a.woocommerce-loop-product__link {
    min-height: 180px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 12px !important;
  }
}

/* =========================================
     10. LUXURY MINIMAL PRODUCT CARD UPGRADE
     ========================================= */

.woocommerce ul.products li.product.product-card--luxury,
  .product-card--luxury {
  border: 1px solid #e6e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07) !important;
  background: #fff !important;
}

.woocommerce ul.products li.product.product-card--luxury::before,
  .product-card--luxury::before {
  height: 2px !important;
  background: linear-gradient(90deg, #0f172a, #334155) !important;
}

.woocommerce ul.products li.product.product-card--luxury:hover,
  .product-card--luxury:hover {
  transform: translateY(-5px) !important;
  border-color: #111827 !important;
  box-shadow: 0 22px 38px rgba(15, 23, 42, 0.14) !important;
}

.product-card--luxury .product-card__content {
  border-top: 1px solid #edf1f5;
  padding: 15px 16px 14px 16px !important;
  gap: 0;
}

.product-card--luxury .product-card__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.product-card--luxury .product-card__category,
  .product-card--luxury .product-card__inspired {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card--luxury .product-card__title,
  .product-card--luxury .product-card__title a,
  .product-card--luxury .woocommerce-loop-product__title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1rem, 2vw, 1.08rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #111827 !important;
  line-height: 1.24 !important;
  margin-bottom: 7px !important;
  min-height: 2.4em;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

.product-card--luxury .product-card__title a:hover,
  .product-card--luxury .product-card__title a:focus {
  color: #0f172a !important;
}

.product-card--luxury .product-card__sizes {
  margin: 0 0 12px 0;
}

.product-card--luxury .product-card__sizes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-card--luxury .product-card__price,
  .product-card--luxury .price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product-card--luxury .product-card__price .amount,
  .product-card--luxury .product-card__price ins .amount,
  .product-card--luxury .price .amount {
  color: #0f172a !important;
}

.product-card--luxury .product-card__price del,
  .product-card--luxury .price del {
  color: #9ca3af !important;
  font-size: 13px !important;
}

.archive-page-subtitle {
  font-family: 'Lato', sans-serif;
}

@media (max-width: 640px) {
  .product-card--luxury .product-card__image a {
    min-height: 0;
  }

  .product-card--luxury .product-card__image img,
    .woocommerce ul.products li.product.product-card--luxury img {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    -o-object-position: center center !important;
       object-position: center center !important;
    padding: 0 !important;
    background: #fff !important;
    transform: none !important;
  }

  .product-card--luxury .product-card__content {
    padding: 12px !important;
  }

  .product-card--luxury .product-card__meta-row {
    margin-bottom: 7px;
    gap: 8px;
  }

  .product-card--luxury .product-card__title,
    .product-card--luxury .product-card__title a {
    font-size: 14px !important;
  }

  .product-card--luxury .product-card__descriptor {
    font-size: 10px;
    margin-bottom: 10px;
  }

  .product-card--luxury .product-card__sizes {
    margin-bottom: 10px;
  }

  .product-card--luxury .product-card__size-chip {
    min-width: 30px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .product-card--luxury .product-card__price,
    .product-card--luxury .price {
    font-size: 16px !important;
  }
}

/* =========================================
     11. UNIFIED UI COMPONENTS
     ========================================= */

/* Scroll to Top Button */

.scroll-to-top {
  position: fixed !important;
  bottom: 80px !important;
  right: 20px !important;
  width: 48px !important;
  height: 48px !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 70 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.scroll-to-top svg {
  width: 20px !important;
  height: 20px !important;
}

.scroll-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.scroll-to-top:hover {
  background: #1a1a1a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Toast Notifications */

.toast {
  position: fixed !important;
  top: 100px !important;
  right: 20px !important;
  background: #fff !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 100 !important;
  opacity: 0 !important;
  transform: translateX(400px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-width: 350px !important;
  font-size: 14px !important;
}

.toast.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.toast__icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
}

.toast--success .toast__icon {
  background: #d1fae5 !important;
  color: #10b981 !important;
}

.toast--error .toast__icon {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* Form Validation */

.form-row.error input,
  .woocommerce-input-wrapper.error input {
  border-color: #b91c1c !important;
}

.error-message {
  display: block !important;
  color: #b91c1c !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* Enhanced Focus States - Desktop only, not on mobile header buttons */

button:not([aria-label*="menu"]):not([aria-label*="search"]):not([aria-label*="cart"]):not([aria-label*="close"]):focus-visible,
  a:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
     CART PAGE
     ========================================= */

body.woocommerce-cart main#primary,
  body.woocommerce-cart .site-main,
  body.woocommerce-cart .content-area,
  body.woocommerce-cart #primary {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.woocommerce-cart .site-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

body.woocommerce-cart #secondary,
  body.woocommerce-cart .widget-area {
  display: none !important;
}

@media (max-width: 1023px) {
  .cart-table .product-name,
    .cart-table .product-price,
    .cart-table .product-quantity,
    .cart-table .product-subtotal {
    font-size: 14px;
  }

  .cart-table td,
    .cart-table thead th {
    padding: 14px 12px;
  }
}

.cart-table .product-thumbnail img {
  width: 72px;
  height: 72px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

/* Cart layout container alignment */

body.woocommerce-cart .cart-modern {
  overflow-x: hidden;
}

body.woocommerce-cart .cart-modern .container {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

body.woocommerce-cart .cart-modern .grid {
  margin-left: 0;
  margin-right: 0;
}

body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-summary {
  width: 100%;
}

.cart-table .product-name a {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-table .product-price,
  .cart-table .product-subtotal {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.cart-card__quantity .quantity input {
  min-width: 68px;
}

.cart-summary .cart_totals h2 {
  display: none;
}

.cart-summary .wc-proceed-to-checkout a.checkout-button {
  width: 100% !important;
  margin-top: 12px !important;
}

.cart-summary .woocommerce-shipping-calculator {
  margin-top: 12px !important;
}

.cart-empty-panel {
  margin-top: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 12px;
}

.cart-empty-panel__icon {
  font-size: 36px;
}

.cart-empty-panel__title {
  margin: 0;
  letter-spacing: 0.08em;
}

.cart-empty-panel__text {
  margin: 0;
  color: #475569;
}

.cart-empty-panel__cta {
  justify-self: center;
  margin-top: 10px;
}

/* =========================================
     CART PAGE MODERN STYLES
     ========================================= */

/* Quantity Input Styling */

.cart-modern .quantity {
  display: inline-flex !important;
  align-items: center !important;
}

.cart-modern .quantity input.qty {
  width: 60px !important;
  height: 44px !important;
  text-align: center !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.cart-modern .quantity input.qty::-webkit-outer-spin-button,
  .cart-modern .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.cart-modern .quantity input.qty:focus {
  border-color: #000 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

/* Cart Totals Integration */

.cart-summary__card .cart_totals h2 {
  display: none !important;
}

/* Checkout Button in Summary */

.cart-summary__card .wc-proceed-to-checkout {
  margin-top: 1.5rem !important;
}

.cart-summary__card .checkout-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111 !important;
  color: #fff !important;
  padding: 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s !important;
}

.cart-summary__card .checkout-button:hover {
  background: #333 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Shipping Calculator Hidden (optional) */

.cart-summary__card .woocommerce-shipping-calculator {
  display: none !important;
}

/* Empty Cart Panel */

.cart-empty-panel {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 1rem !important;
  padding: 3rem 2rem !important;
  text-align: center !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.cart-empty-panel__icon {
  font-size: 3rem !important;
  line-height: 1 !important;
}

.cart-empty-panel__title {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.cart-empty-panel__text {
  margin: 0 !important;
  color: #6b7280 !important;
}

.cart-empty-panel__cta {
  margin-top: 0.5rem !important;
}

/* Mobile Optimizations */

@media (max-width: 768px) {
  .cart-modern {
    padding-bottom: 6rem !important;
  }

  .cart-card {
    position: relative !important;
  }

  .cart-card .quantity input.qty {
    height: 48px !important;
    font-size: 1rem !important;
  }
}

/* Line clamp utility for mobile product names */

/* Smooth transitions */

.cart-modern * {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Remove transitions from quantity inputs for better UX */

.cart-modern .quantity input.qty {
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* =========================================
     CHECKOUT PAGE STYLING
     ========================================= */

/* Order Summary Box */

/* Checkout Form Fields */

.woocommerce-checkout .form-row input[type="text"],
  .woocommerce-checkout .form-row input[type="email"],
  .woocommerce-checkout .form-row input[type="tel"],
  .woocommerce-checkout .form-row input[type="number"],
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .select2-container .select2-selection--single {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
  background-color: #ffffff !important;
  font-family: 'Lato', sans-serif !important;
  box-sizing: border-box !important;
}

/* Ensure consistent height for all form fields */

.woocommerce-checkout .form-row input[type="text"],
  .woocommerce-checkout .form-row input[type="email"],
  .woocommerce-checkout .form-row input[type="tel"],
  .woocommerce-checkout .form-row input[type="number"],
  .woocommerce-checkout .form-row select {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.woocommerce-checkout .form-row input:focus,
  .woocommerce-checkout .form-row select:focus,
  .woocommerce-checkout .form-row textarea:focus {
  border-color: #000000 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-checkout .form-row label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.woocommerce-checkout .form-row label .required {
  color: #b91c1c !important;
  text-decoration: none !important;
}

/* Form Row Spacing */

.woocommerce-checkout .form-row {
  margin-bottom: 20px !important;
}

.woocommerce-checkout .woocommerce-address-fields__field-wrapper {
  display: grid !important;
  gap: 20px !important;
}

/* Grid Layout for City/State/Postcode */

.woocommerce-checkout .woocommerce-address-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-address-fields__field-wrapper .form-row-last,
  .woocommerce-checkout .woocommerce-address-fields__field-wrapper .form-row-wide {
  width: 100% !important;
  float: none !important;
}

@media (min-width: 768px) {
  .woocommerce-checkout .woocommerce-address-fields__field-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .woocommerce-checkout .form-row-wide {
    grid-column: 1 / -1 !important;
  }
}

/* Select2 Dropdown Styling */

.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 48px !important;
  line-height: 48px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;
  padding-left: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
  right: 10px !important;
}

/* Payment Methods */

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 12px !important;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  margin-right: 12px !important;
  accent-color: #000000 !important;
}

.woocommerce-checkout #payment .payment_box {
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
}

.woocommerce-checkout #payment .payment_box p {
  margin: 0 0 12px 0 !important;
}

.woocommerce-checkout #payment .payment_box p:last-child {
  margin-bottom: 0 !important;
}

/* Place Order Button */

.woocommerce-checkout .btn-place-order,
  .woocommerce-checkout #place_order {
  width: 100% !important;
  background-color: #b91c1c !important;
  color: #ffffff !important;
  padding: 18px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 15px !important;
  border: 2px solid #b91c1c !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
  margin-top: 24px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Reset place-order wrapper so it doesn't style like a button */

.woocommerce-checkout .form-row.place-order {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 20px !important;
}

.woocommerce-checkout .btn-place-order:hover,
  .woocommerce-checkout #place_order:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.woocommerce-checkout .btn-place-order:active,
  .woocommerce-checkout #place_order:active {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

.woocommerce-checkout .btn-place-order:focus,
  .woocommerce-checkout #place_order:focus,
  .woocommerce-checkout .btn-place-order:focus-visible,
  .woocommerce-checkout #place_order:focus-visible {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  .woocommerce-checkout .btn-place-order,
    .woocommerce-checkout #place_order {
    font-size: 14px !important;
    padding: 16px 18px !important;
    border-radius: 8px !important;
    letter-spacing: 0.06em !important;
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
  }
}

/* Terms & Conditions */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 16px 0 !important;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
  display: none !important;
}

/* Custom Privacy Policy Checkbox */

.woocommerce-checkout .privacy-policy-checkbox-field {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin: 20px 0 !important;
}

.woocommerce-checkout .privacy-policy-checkbox-field label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.woocommerce-checkout .privacy-policy-checkbox-field input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.woocommerce-checkout .privacy-policy-checkbox-field a {
  color: #2563eb !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.woocommerce-checkout .privacy-policy-checkbox-field a:hover {
  color: #1d4ed8 !important;
}

/* Hide all WooCommerce notices on checkout */

.woocommerce-checkout .woocommerce-notices-wrapper,
  .woocommerce-checkout .woocommerce-NoticeGroup,
  .woocommerce-checkout .woocommerce-error,
  .woocommerce-checkout .woocommerce-message,
  .woocommerce-checkout .woocommerce-info {
  display: none !important;
}

/* Only show validation errors */

.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error {
  display: block !important;
}

/* Shipping Methods Wrapper */

.woocommerce-checkout-review-order-table .shipping-methods-wrapper {
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

/* Default Woo shipping list styling */

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method li {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  min-height: 56px !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label:hover {
  border-color: #bfdbfe !important;
  background: #f0f9ff !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method input[type="radio"]:checked+label {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.05), transparent) !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label .amount,
  .woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label .woocommerce-Price-amount {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  white-space: nowrap !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label span:not(.amount):not(.woocommerce-Price-amount) {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

/* Unavailable message */

.woocommerce-checkout-review-order-table .shipping-methods-wrapper .woocommerce-shipping-destination,
  .woocommerce-checkout-review-order-table .shipping-methods-wrapper .woocommerce-shipping-contents {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.woocommerce-checkout-review-order-table .shipping-methods-wrapper .woocommerce-shipping-destination {
  margin-bottom: 8px !important;
}

/* Responsive - Mobile */

@media (max-width: 640px) {
  .woocommerce-checkout-review-order-table .shipping-methods-wrapper {
    padding: 12px !important;
    margin-bottom: 16px !important;
  }

  .woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label {
    padding: 10px 12px !important;
    gap: 10px !important;
    min-height: 52px !important;
  }

  .woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label span:not(.amount):not(.woocommerce-Price-amount) {
    font-size: 13px !important;
  }

  .woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label .amount,
    .woocommerce-checkout-review-order-table .shipping-methods-wrapper ul#shipping_method label .woocommerce-Price-amount {
    font-size: 15px !important;
  }
}

.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px !important;
  color: #374151 !important;
}

.woocommerce-checkout input[type="checkbox"] {
  margin-right: 8px !important;
  accent-color: #000000 !important;
}

/* Validation Errors */

.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
  background-color: #fef2f2 !important;
  border-left: 4px solid #b91c1c !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
  border-radius: 6px !important;
}

.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li {
  color: #b91c1c !important;
  font-size: 14px !important;
  list-style: none !important;
  margin-left: 0 !important;
}

/* Checkout Review Order Table */

.woocommerce-checkout-review-order-table .checkout-cart-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.woocommerce-checkout-review-order-table .checkout-cart-item img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* Trust Badges */

/* Hide Order Summary Completely */

.checkout-summary-col,
  .checkout-summary-sticky,
  .checkout-summary-fragment {
  display: none !important;
}

/* Adjust Layout: Form Takes Full Width */

/* Mobile Checkout Adjustments */

/* Mobile Responsive Improvements */

@media (max-width: 640px) {
  .woocommerce-checkout-wrapper .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .checkout-section {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .checkout-section h3 {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }

  .woocommerce-checkout .form-row input,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
    font-size: 16px !important;
    padding: 14px !important;
  }

  .woocommerce-checkout .form-row label {
    font-size: 12px !important;
  }

  .trust-badges {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .trust-badge {
    width: 100% !important;
    justify-content: center !important;
  }

  .checkout-cart-item {
    gap: 12px !important;
  }

  .checkout-cart-item .item-image {
    width: 60px !important;
    height: 60px !important;
  }

  .checkout-cart-item .item-name {
    font-size: 13px !important;
  }

  .checkout-cart-item .item-total {
    font-size: 13px !important;
  }

  .privacy-policy-checkbox-field {
    padding: 12px !important;
  }

  .privacy-policy-checkbox-field label {
    font-size: 13px !important;
  }
}

/* Loading State */

.woocommerce-checkout .blockUI.blockOverlay {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.woocommerce-checkout .blockUI.blockOverlay::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: -20px 0 0 -20px !important;
  border: 3px solid #000000 !important;
  border-radius: 50% !important;
  border-top-color: transparent !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.-right-1{
  right: -0.25rem;
}

.-top-1{
  top: -0.25rem;
}

.bottom-0{
  bottom: 0px;
}

.left-0{
  left: 0px;
}

.left-1\/2{
  left: 50%;
}

.right-0{
  right: 0px;
}

.right-1\.5{
  right: 0.375rem;
}

.top-0{
  top: 0px;
}

.top-1\.5{
  top: 0.375rem;
}

.top-full{
  top: 100%;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-50{
  z-index: 50;
}

.z-\[60\]{
  z-index: 60;
}

.z-\[70\]{
  z-index: 70;
}

.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.-ml-2{
  margin-left: -0.5rem;
}

.-mr-2{
  margin-right: -0.5rem;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-16{
  margin-bottom: 4rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-20{
  margin-top: 5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-auto{
  margin-top: auto;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.aspect-\[3\/4\]{
  aspect-ratio: 3/4;
}

.h-10{
  height: 2.5rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-20{
  height: 5rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-8{
  height: 2rem;
}

.h-full{
  height: 100%;
}

.min-h-0{
  min-height: 0px;
}

.min-h-screen{
  min-height: 100vh;
}

.w-1\/2{
  width: 50%;
}

.w-10{
  width: 2.5rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-3\/4{
  width: 75%;
}

.w-4{
  width: 1rem;
}

.w-5{
  width: 1.25rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-8{
  width: 2rem;
}

.w-full{
  width: 100%;
}

.min-w-\[2\.5rem\]{
  min-width: 2.5rem;
}

.min-w-\[3\.5rem\]{
  min-width: 3.5rem;
}

.min-w-full{
  min-width: 100%;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-\[1400px\]{
  max-width: 1400px;
}

.max-w-\[140px\]{
  max-width: 140px;
}

.max-w-full{
  max-width: 100%;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2{
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-2{
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-full{
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-center{
  align-items: center;
}

.items-stretch{
  align-items: stretch;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-2{
  gap: 0.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-t{
  border-top-width: 1px;
}

.border-none{
  border-style: none;
}

.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-50{
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}

.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#f8fafc\]{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-50\/30{
  background-color: rgb(249 250 251 / 0.3);
}

.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-green-50{
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-emerald-50{
  --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0{
  padding: 0px;
}

.p-2{
  padding: 0.5rem;
}

.p-4{
  padding: 1rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-12{
  padding-top: 3rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-8{
  padding-top: 2rem;
}

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

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

.font-heading{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.font-sans{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[9px\]{
  font-size: 9px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black{
  font-weight: 900;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.capitalize{
  text-transform: capitalize;
}

.not-italic{
  font-style: normal;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}

.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.text-\[\#94a3b8\]{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

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

.no-underline{
  text-decoration-line: none;
}

.placeholder-gray-300::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(209 213 219 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-300::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(209 213 219 / var(--tw-placeholder-opacity, 1));
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-20{
  opacity: 0.2;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-10px_30px_rgba\(0\2c 0\2c 0\2c 0\.03\)\]{
  --tw-shadow: 0 -10px 30px rgba(0,0,0,0.03);
  --tw-shadow-colored: 0 -10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[4px\]{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-700{
  transition-duration: 700ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Shop/archive badges pinned to the top-left corner */

.sale-badge-pill,
.sold-out-badge-pill {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 10;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 0.7rem;
  border-radius: 0 0 8px 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-block;
}

.sale-badge-pill {
  background: #b91c1c;
  color: #fff;
}

.sold-out-badge-pill {
  background: #b91c1c;
  color: #fff;
}

/* Hide sale badge on non-sale products (defensive rule) */

/* Removed malformed block */

.image-slide {
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.image-slide.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.image-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  padding: 0;
  background: var(--bg-white);
}

.image-slide img:hover {
  transform: scale(1.02);
}

/* Navigation Buttons */

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-white);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: var(--transition);
  opacity: 0;
}

.main-image-box:hover .nav-btn {
  opacity: 1;
}

.nav-btn:hover {
  background: #b91c1c;
  color: var(--bg-white);
  transform: translateY(-50%) scale(1.1);
}

.nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.nav-btn.prev {
  left: 1rem;
}

.nav-btn.next {
  right: 1rem;
}

@media (max-width: 768px) {
  .nav-btn {
    width: 40px;
    height: 40px;
    opacity: 1;
  }

  .nav-btn.prev {
    left: 0.5rem;
  }

  .nav-btn.next {
    right: 0.5rem;
  }
}

/* Slide Counter */

.slide-counter {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--bg-white);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10;
}

/* Thumbnails */

.thumbnail-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
}

@media (max-width: 768px) {
  .thumbnail-row {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .thumbnail-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .thumb-btn {
    flex: 0 0 64px;
    scroll-snap-align: start;
  }
}

.thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--bg-white);
  transition: var(--transition);
  position: relative;
}

.thumb-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumb-btn:hover::after {
  opacity: 1;
}

.thumb-btn.active {
  box-shadow: none;
}

.thumb-btn:focus,
.thumb-btn:focus-visible,
.thumb-btn:active,
.thumb-btn.active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.thumb-btn.active::after {
  opacity: 0;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease;
  opacity: 0.7;
}

.thumb-btn:hover img,
.thumb-btn.active img {
  opacity: 1;
}

/* No Image Fallback */

.no-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius-lg);
  gap: 1rem;
}

.no-image svg {
  opacity: 0.5;
}

.no-image span {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* =========================================
   PRODUCT INFO
   ========================================= */

.product-info-column {
  width: 100%;
}

/* Breadcrumb */

.breadcrumb {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.breadcrumb-mobile {
  display: none;
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: #b91c1c;
}

@media (max-width: 768px) {
  .breadcrumb-mobile {
    display: block;
    margin-bottom: 0.25rem;
  }

  .product-info-column .breadcrumb {
    display: none;
  }
}

/* Product Title */

.product-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #000000;
  opacity: 1;
  visibility: visible;
}

/* Product Rating */

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.product-rating .star-rating {
  font-size: 1rem;
}

/* Product Price */

.product-price {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.product-price .original-price {
  color: var(--text-secondary);
  font-size: 1.25rem;
  text-decoration: line-through;
  font-weight: 400;
}

.product-price .sale-price {
  color: #b91c1c;
  text-decoration: none;
}

/* Shop/archive: Force product prices to red */

.woocommerce ul.products li.product .product-price .current-price:not(.sale-price),
.woocommerce ul.products li.product .product-price .current-price:not(.sale-price) .woocommerce-Price-amount,
.woocommerce ul.products li.product .product-price .current-price:not(.sale-price):not(ins),
.woocommerce ul.products li.product .product-price .current-price:not(.sale-price):not(ins) .woocommerce-Price-amount {
  color: #b91c1c !important;
}

.product-price .sale-badge {
  background: var(--accent-color);
  color: var(--bg-white);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Short Description */

.short-desc {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Stock Status */

.stock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 1.75rem;
}

.stock-status.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.stock-status.out-of-stock {
  background: #fee2e2;
  color: #b91c1c;
}

.stock-status svg {
  width: 16px;
  height: 16px;
}

/* Add to Cart Section */

.add-to-cart-section {
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .product-title {
    margin-bottom: 0.75rem;
  }

  .product-price {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .short-desc {
    margin-bottom: 1.25rem;
  }

  .add-to-cart-section {
    margin-bottom: 1.5rem;
  }
}

.add-to-cart-section button,
.add-to-cart-section .button {
  width: 100%;
  background: linear-gradient(135deg, #b91c1c, #b91c1c);
  color: var(--bg-white);
  border: none;
  padding: 1.25rem 2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(185, 28, 28, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  animation: ctaBeat 3s ease-in-out infinite;
}

.add-to-cart-section .btn-price {
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.9;
  white-space: nowrap;
}

.add-to-cart-section .btn-sep {
  opacity: 0.7;
  font-weight: 600;
}

.add-to-cart-section button:hover,
.add-to-cart-section .button:hover {
  background: linear-gradient(135deg, #b91c1c, #b91c1c);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.add-to-cart-section .single_add_to_cart_button.is-sold-out,
.add-to-cart-section .button.is-sold-out {
  background: #9ca3af !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.add-to-cart-section .single_add_to_cart_button.is-sold-out:hover,
.add-to-cart-section .button.is-sold-out:hover {
  background: #9ca3af !important;
  box-shadow: none !important;
  transform: none !important;
}

.add-to-cart-section button:active,
.add-to-cart-section .button:active {
  transform: translateY(0);
}

@keyframes ctaBeat {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }

  55% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .add-to-cart-section button,
  .add-to-cart-section .button {
    animation: none !important;
  }
}

/* Trust Badges */

.trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.single-related-products {
  max-width: 1400px;
  margin: 2.5rem auto 0;
  padding: 2rem 1.5rem 0;
  border-top: 1px solid var(--border-color);
}

.single-related-products__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 1.25rem 0;
}

.single-related-products .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

@media (max-width: 768px) {
  .single-related-products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .single-related-products {
    padding: 1.5rem 1rem 0;
  }
}

@media (max-width: 640px) {
  .trust-badges {
    grid-template-columns: 1fr;
  }
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.badge-item svg {
  flex-shrink: 0;
  color: #b91c1c;
}

/* Variation swatches: prevent duplicate native selects/labels rendering */

.variation-swatches select {
  display: none !important;
}

.variations th.label,
.variations td.label {
  display: none !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shipping Info Rows */

.shipping-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-row svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #b91c1c;
}

.info-row strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.info-row p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.sku-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */

@media (max-width: 1024px) {
  .simple-gallery {
    position: static;
  }
}

@media (max-width: 768px) {
  .product-grid {
    gap: 2rem;
  }

  .product-title {
    font-size: 1.75rem;
    .product-image-column {
      margin-top: 0;
    }
    .main-image-box {
      margin-bottom: 0.75rem;
    }
    margin-bottom: 0.75rem;
    color: #000000 !important;
    opacity: 1 !important;
    font-weight: 700;
  }

  .product-price .sale-price,
  .product-price .current-price {
    font-size: 1.5rem;
  }

  .trust-badges {
    gap: 0.75rem;
  }

  .info-accordion summary {
    padding: 1.25rem 0.75rem;
    font-size: 0.9375rem;
  }

  .info-accordion .content {
    padding: 0 0.75rem 1.25rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .product-single-container {
    padding: 0.75rem;
  }

  .image-slide img {
    padding: 1rem;
  }

  .add-to-cart-section button,
  .add-to-cart-section .button {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
  }
}

@media (max-width: 768px) {
  .main-image-wrapper,
  .main-image-box,
  .image-slide,
  .image-slide img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus Visible Styles */

button:focus-visible,
a:focus-visible,
.thumb-btn:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

/* High Contrast Mode */

@media (prefers-contrast: high) {
  .product-price .sale-badge {
    border: 2px solid var(--bg-white);
  }

  .nav-btn {
    border: 2px solid #b91c1c;
  }
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
  .nav-btn,
  .thumbnail-row,
  .add-to-cart-section,
  .trust-badges {
    display: none !important;
  }

  .product-grid {
    display: block;
  }

  .main-image-box {
    page-break-inside: avoid;
  }
}

/* =========================================
   DARK MODE SUPPORT (Optional)
   ========================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --bg-light: #1f2937;
    --bg-white: #111827;
  }

  .main-image-box {
    background: var(--bg-light);
  }

  .thumb-btn {
    background: var(--bg-light);
  }

  .no-image {
    background: var(--bg-light);
  }
}

/* =========================================
   FINAL PRODUCT PAGE STYLES
   (removed legacy overrides; consolidated above)
   ========================================= */

/* =========================================
   GALLERY IMAGE - FULL WIDTH, NO GREY AREA
   ========================================= */

/* Remove grey background from gallery wrapper */

.woocommerce-product-gallery {
  background: transparent !important;
  /* Remove grey bg */
  padding: 0 !important;
  /* Remove padding */
  border-radius: 0 !important;
  /* Remove rounded corners if desired */
}

/* Main image container - full width, no grey space */

.woocommerce-product-gallery__image {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* Make image fill container edge-to-edge */

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
  width: 100% !important;
  /* Full width */
  height: 100% !important;
  max-height: none !important;
  /* Remove height restriction */
  -o-object-fit: contain !important;
     object-fit: contain !important;
  /* Show full image without cropping */
  display: block !important;
  margin: 0 !important;
}

/* Alternative: If you want image to fill and crop (cover entire area) */

/*
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img {
  width: 100% !important;
  height: 100% !important;
  max-height: 600px !important;
  object-fit: cover !important;
}
*/

/* Remove grey background from viewport */

.woocommerce-product-gallery .flex-viewport {
  background: transparent !important;
  min-height: unset !important;
  /* Remove min-height */
  border-radius: 0 !important;
}

/* Wrapper padding removal */

.woocommerce-product-gallery__wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Optional: Add rounded corners back to images if desired */

.woocommerce-product-gallery__image img {
  border-radius: 8px;
  /* Or 0 for no radius */
}

/* =========================================
   CLEAN PRODUCT GALLERY - NO CONFLICTS
   ========================================= */

.product-gallery-clean {
  width: 100%;
  display: block !important;
}

/* Main image container */

.product-gallery-clean .relative.bg-gray-50 {
  background: #f9fafb;
  border-radius: 0.5rem;
  aspect-ratio: 4/3;
}

/* Ensure images are visible immediately */

.product-gallery-clean img {
  opacity: 1;
  visibility: visible;
  display: block;
  max-height: 600px;
  width: auto;
  margin: 0 auto;
}

/* Thumbnail active states */

.product-gallery-clean button {
  transition: all 0.2s;
}

.product-gallery-clean button[aria-label*="Current"] {
  border-color: #000;
}

/* Loading spinner */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Mobile optimizations */

@media (max-width: 768px) {
  .product-gallery-clean .relative.bg-gray-50 {
    aspect-ratio: 1/1;
    min-height: 350px;
  }

  .product-gallery-clean .md\:hidden.flex {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-gallery-clean .md\:hidden.flex::-webkit-scrollbar {
    display: none;
  }
}

/* Hide default WooCommerce gallery completely */

.woocommerce-product-gallery {
  display: none !important;
}

/* Fancybox lightbox styling (optional) */

[data-fancybox="gallery"] {
  cursor: zoom-in;
}

[x-cloak] {
  display: none !important;
}

/* =========================================
   SINGLE PRODUCT PAGE - FOOTER SPACING FIX
  /* =========================================

/* Ensure footer has top margin */

body.single-product .site-footer,
body.single-product footer {
  margin-top: 2rem !important;
  position: relative !important;
  clear: both !important;
}

/* Alternative: If using sticky right column, ensure it doesn't overlap */

body.single-product .product-info-wrapper {
  margin-bottom: 4rem !important;
}

/* Mobile specific spacing */

@media (max-width: 1023px) {
  body.single-product .container.mx-auto {
    padding-bottom: 6rem !important;
    /* More space on mobile for sticky ATC */
  }

  .product-accordions {
    margin-bottom: 3rem !important;
  }
}

/* =========================================
   MOBILE GALLERY VISIBILITY FIXES
   ========================================= */

/* Force gallery visibility immediately */

.woocommerce-product-gallery {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure wrapper is visible */

.woocommerce-product-gallery__wrapper {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force each slide to be visible */

.woocommerce-product-gallery__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* Ensure images are displayed */

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-viewport img,
.flexslider .slides img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 70vh !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix flexslider viewport on mobile */

.woocommerce-product-gallery .flex-viewport {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure slides are visible */

.flexslider .slides {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
}

.flexslider .slides>li {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* Olark/Chat widget overlap fix */

.whatsapp-widget {
  z-index: 9999 !important;
  bottom: 80px !important;
  /* Move above sticky ATC on mobile */
}

@media (min-width: 1024px) {
  .whatsapp-widget {
    bottom: 24px !important;
  }
}

/* Mobile specific gallery fixes */

@media (max-width: 1023px) {
  .product-gallery-wrapper {
    position: relative !important;
    z-index: 1 !important;
    background: #fff !important;
  }

  /* Ensure the gallery takes space */

  .woocommerce-product-gallery {
    min-height: 50vh !important;
    background: #f9fafb !important;
  }

  /* Fix for iOS Safari flex issues */

  .woocommerce-product-gallery .flex-viewport {
    min-height: 50vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* Hide counter if no images loaded */

.woocommerce-product-gallery__wrapper:empty::before {
  content: 'Loading...';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #9ca3af;
  font-size: 14px;
}

/* If JS fails, show first image */

.woocommerce-product-gallery .flex-viewport .slides li:first-child {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Force white color for all footer links */

.site-footer a {
  color: #fff !important;
}

/* Footer mobile logo size and alignment */

/* Removed mobile-specific logo width overrides. Sizing is handled by Tailwind classes in markup. */

@media (max-width: 640px) {
  .site-footer img {
    height: 40px !important;
    max-width: 100px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
}

/* Mobile header logo constraints and alignment */

@media (max-width: 768px) {
  .site-header .flex-1.flex.justify-center.items-center.px-2 {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    min-width: 0 !important;
  }

  /* Ensure sale price font size matches regular price on shop/archive mobile */

  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price ins {
    font-size: 16px !important;
  }

  .site-header .flex-1.flex.justify-center.items-center.px-2 img,
  .site-header .logo img,
  .site-header .custom-logo-link img {
    max-width: 90px !important;
    max-height: 28px !important;
    height: 28px !important;
    width: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  .mobile-header-logo {
    max-width: 100px !important;
    max-height: 32px !important;
    height: 32px !important;
    width: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .site-header .w-10.h-10,
  .site-header .w-10,
  .site-header .h-10 {
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* Hide WooCommerce sale tag on product images in shop/archive pages (all devices) */

.woocommerce ul.products li.product .onsale {
  display: none !important;
}

@media (max-width: 640px) {
  .checkout-summary-col {
    display: none !important;
  }

  /* Hide sticky summary (summary.php) below Place Order on mobile */

  .checkout-summary-sticky {
    display: none !important;
  }

  /* Ensure sale price font size matches regular price on shop/archive mobile */

  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price ins,
  .woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
  .woocommerce ul.products li.product .price .woocommerce-Price-amount {
    font-size: 16px !important;
  }

  /* --- Order Summary Mobile Enhancements --- */

  .checkout-section .order-summary-items {
    margin-bottom: 1.5rem !important;
  }

  .checkout-section .order-summary-items .flex {
    align-items: flex-start !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }

  .checkout-section .order-summary-items .flex .relative img {
    width: 70px !important;
    height: 70px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  .checkout-section .order-summary-items .flex .flex-1 h4,
  .checkout-section .order-summary-items .flex .flex-1 p {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .checkout-section .order-summary-items .flex .flex-1 .text-xs {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 0.15rem !important;
  }

  .checkout-section .order-summary-items .flex .text-sm {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    min-width: 60px !important;
    text-align: right !important;
  }
}

/* Fix: Moved tailwind directives to the top of the file */

/* =========================================
   SKELETON LOADER ANIMATION
   ========================================= */

@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* End of @layer components */

/* SHOPIFY-STYLE CLEAN CHECKOUT */

.woocommerce-checkout-wrapper {
  background: #fafafa !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

/* Container Responsive Fix */

.woocommerce-checkout .container {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Grid Layout handled by .woocommerce-checkout-wrapper .grid rules below */

/* Form Sections */

.woocommerce-checkout .checkout-section {
  background: #fff !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .checkout-section h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
}

/* Form Fields - Prevent Overflow */

.woocommerce-checkout .form-row {
  width: 100% !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: #0070f3 !important;
  box-shadow: 0 0 0 1px #0070f3 !important;
  outline: none !important;
}

/* Mobile Responsive */

@media (max-width: 640px) {
  .woocommerce-checkout .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .woocommerce-checkout .checkout-section {
    padding: 16px !important;
  }
}

/* Order Summary Responsive */

.woocommerce-checkout .checkout-summary-col>div {
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .checkout-order-items {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Payment Methods */

.woocommerce-checkout #payment {
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  background: #fff !important;
  border: 2px solid #d1d1d1 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout #payment ul.payment_methods li input[type='radio'] {
  accent-color: #0070f3 !important;
}

.woocommerce-checkout #payment .payment_box {
  background: #f7f7f7 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  padding: 14px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  color: #666 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Billing/Shipping Fields Grid */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .woocommerce-checkout .form-row-wide {
    grid-column: 1 / -1 !important;
  }
}

/* Shipping Methods Wrapper */

.woocommerce-checkout .shipping-methods-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .shipping-methods-wrapper ul {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce-checkout .shipping-methods-wrapper li {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  background: #fff !important;
  border: 2px solid #d1d1d1 !important;
  border-radius: 6px !important;
}

/* Coupon form: stack on mobile, prevent overflow */

.woocommerce-checkout .woocommerce-form-coupon {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.woocommerce-checkout .woocommerce-form-coupon .form-row-first,
.woocommerce-checkout .woocommerce-form-coupon .form-row-last {
  width: 100% !important;
  float: none !important;
}

.woocommerce-checkout .woocommerce-form-coupon input,
.woocommerce-checkout .woocommerce-form-coupon button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .woocommerce-checkout .woocommerce-form-coupon {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  .woocommerce-checkout .woocommerce-form-coupon button {
    width: auto !important;
    min-width: 160px !important;
  }
}

/* Checkout mobile alignment + overflow fixes */

body.woocommerce-checkout .checkout-form-col,
body.woocommerce-checkout .checkout-summary-col {
  min-width: 0 !important;
}

body.woocommerce-checkout .checkout-summary-col>div,
body.woocommerce-checkout .checkout-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.woocommerce-checkout .woocommerce-checkout form.checkout {
  display: block !important;
}

/* Grid layout handled by .woocommerce-checkout-wrapper .grid rules */

body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last {
  width: 100% !important;
  float: none !important;
}

body.woocommerce-checkout .form-row input,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
  min-height: 48px !important;
}

/* Desktop grid layout handled by .woocommerce-checkout-wrapper .grid rules */

@media (max-width: 640px) {
  body.woocommerce-checkout .checkout-section {
    padding: 14px !important;
  }
}

/* Hide product list in Payment section - only show in Order Summary */

.woocommerce-checkout-review-order-payment-only .checkout-cart-items {
  display: none !important;
}

/* Mobile Overflow Prevention - STRICT */

@media (max-width: 768px) {
  * {
    max-width: 100% !important;
  }

  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .woocommerce-checkout-wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .woocommerce-checkout .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  form.checkout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .checkout-form-col,
  .checkout-summary-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .checkout-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  .woocommerce-checkout-review-order-table,
  .checkout-cart-items,
  .checkout-cart-item,
  .checkout-order-items,
  #order_review {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .woocommerce-checkout .form-row,
  .woocommerce-checkout .form-row input,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Checkout Layout: Full Width (Order Summary Hidden) */

.woocommerce-checkout-wrapper .grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Desktop: Single Column (Order Summary Hidden) */

@media (min-width: 1024px) {
  .woocommerce-checkout-wrapper .grid {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .checkout-form-col {
    flex: 1 !important;
    width: 100% !important;
  }
}

/* Ensure Place Order button is visible and not hidden */

.woocommerce-checkout #place_order,
.woocommerce-checkout .btn-place-order,
#place_order,
.btn-place-order {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: auto !important;
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.woocommerce-checkout .form-row.place-order {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* MAXIMUM SPECIFICITY OVERRIDE FOR PLACE ORDER BUTTON - Beats all other styles */

.woocommerce .woocommerce-checkout #place_order,
.woocommerce .woocommerce-checkout .btn-place-order,
body.woocommerce .woocommerce-checkout #place_order,
body.woocommerce .woocommerce-checkout .btn-place-order,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .btn-place-order,
form.checkout #place_order,
form.checkout .btn-place-order {
  background-color: #b91c1c !important;
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  border: 2px solid #b91c1c !important;
  color: #ffffff !important;
}

/* Mobile override with even more specificity */

@media (max-width: 640px) {
  .woocommerce .woocommerce-checkout #place_order,
  .woocommerce .woocommerce-checkout .btn-place-order,
  body.woocommerce .woocommerce-checkout #place_order,
  body.woocommerce .woocommerce-checkout .btn-place-order,
  body.woocommerce-checkout #place_order,
  body.woocommerce-checkout .btn-place-order,
  form.checkout #place_order,
  form.checkout .btn-place-order {
    background-color: #b91c1c !important;
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    border: 2px solid #b91c1c !important;
    color: #ffffff !important;
  }
}

/* =========================================
   SINGLE PRODUCT PAGE REDESIGN
   ========================================= */

/* Mobile Sticky ATC */

[x-cloak] {
  display: none !important;
}

/* Improved Gallery Layout */

.woocommerce-product-gallery {
  opacity: 1 !important;
}

.woocommerce-product-gallery__wrapper {
  background: #f9fafb !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

.woocommerce-product-gallery__image {
  background: #fff !important;
  padding: 1rem !important;
  border-radius: 0.75rem !important;
}

.woocommerce-product-gallery__image img{
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-height: 60vh;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 1023px) {
  body.single-product .container.woocommerce-product-gallery__image img {
    padding-bottom: 6rem;
    /* More space on mobile for sticky ATC */
  }
}

@media (min-width: 1024px){
  .woocommerce-product-gallery__image img{
    max-height: 80vh;
  }
}

/* Thumbnails Grid - Modern Layout */

body.woocommerce-cart .cart-modern .flex-control-thumbs {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.flex-control-thumbs{
  margin-top: 1rem !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

@media (max-width: 768px) {
  .flex-control-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

.woocommerce-checkout-wrapper .flex-control-thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: stretch !important;
}

@media (min-width: 1024px) {
  .woocommerce-checkout-wrapper .flex-control-thumbs {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

.flex-control-thumbs {
  list-style: none !important;
  position: static !important;
}

.woocommerce ul.products li.product .flex-control-thumbs li {
  min-height: 190px;
}

@media (max-width: 640px) {
  .woocommerce ul.products li.product .flex-control-thumbs li {
    min-height: 160px;
    padding: 10px;
  }
}

.flex-control-thumbs li{
  position: relative;
  height: 5rem;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 2px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.product-gallery-clean .flex-control-thumbs li.bg-gray-50 {
  background: #f9fafb;
  border-radius: 0.5rem;
  aspect-ratio: 4/3;
}

@media (max-width: 768px) {
  .product-gallery-clean .flex-control-thumbs li.bg-gray-50 {
    aspect-ratio: 1/1;
    min-height: 350px;
  }
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .flex .flex-control-thumbs li img {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
  }
}

@media (min-width: 1024px){
  .flex-control-thumbs li{
    height: 6rem;
  }
}

.flex-control-thumbs li {
  margin: 0 !important;
  float: none !important;
}

.flex-control-thumbs li.flex-active{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.flex-control-thumbs li img{
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.5rem;
  opacity: 0.6;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.flex-control-thumbs li:hover img,
.flex-control-thumbs li.flex-active img{
  opacity: 1;
}

/* Hide default arrows, use swipe on mobile */

.flex-direction-nav{
  display: none;
}

.skeleton-loader-container.flex-direction-nav {
  display: none;
}

/* Sale Badge - Modern Pill Style */

.onsale{
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10 !important;
  border-radius: 9999px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)) !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* Price Styling */

.product-price-wrapper .price{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  font-weight: 300 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

@media (max-width: 768px) {
  .product-gallery-clean .md\:hidden.product-price-wrapper .price {
    display: flex !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .product-gallery-clean .md\:hidden.product-price-wrapper .price::-webkit-scrollbar {
    display: none !important;
  }

  .site-header .flex-1.product-price-wrapper .price.justify-center.items-center.px-2 {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    min-width: 0 !important;
  }

  .site-header .flex-1.flex.justify-center.product-price-wrapper .price.px-2 {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    min-width: 0 !important;
  }

  .site-header .flex-1.product-price-wrapper .price.justify-center.items-center.px-2 img {
    max-width: 90px !important;
    max-height: 28px !important;
    height: 28px !important;
    width: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  .site-header .flex-1.flex.justify-center.product-price-wrapper .price.px-2 img {
    max-width: 90px !important;
    max-height: 28px !important;
    height: 28px !important;
    width: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .product-price-wrapper .price {
    align-items: flex-start !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }

  .checkout-section .order-summary-items .product-price-wrapper .price .relative img {
    width: 70px !important;
    height: 70px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
  }

  .checkout-section .order-summary-items .product-price-wrapper .price .flex-1 h4,
  .checkout-section .order-summary-items .product-price-wrapper .price .flex-1 p {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .checkout-section .order-summary-items .product-price-wrapper .price .flex-1 .text-xs {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 0.15rem !important;
  }

  .checkout-section .order-summary-items .product-price-wrapper .price .text-sm {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    min-width: 60px !important;
    text-align: right !important;
  }
}

@media (min-width: 1024px){
  .product-price-wrapper .price{
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
}

.product-price-wrapper del{
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;
}

.product-price-wrapper ins{
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
  text-decoration-line: none !important;
}

/* Variation Swatches Enhancement */

.variation-swatches{
  margin-bottom: 1.5rem;
}

.swatch-label{
  margin-bottom: 0.75rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .flex .flex-1 .swatch-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 0.15rem;
  }
}

.swatch-options{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .product-gallery-clean .md\:hidden.swatch-options {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-gallery-clean .md\:hidden.swatch-options::-webkit-scrollbar {
    display: none;
  }

  .site-header .flex-1.swatch-options.justify-center.items-center.px-2 {
    justify-content: center;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
  }

  .site-header .flex-1.swatch-options.justify-center.items-center.px-2 img {
    max-width: 90px;
    max-height: 28px;
    height: 28px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .swatch-options {
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .checkout-section .order-summary-items .swatch-options .relative img {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
  }

  .checkout-section .order-summary-items .swatch-options .flex-1 h4,
  .checkout-section .order-summary-items .swatch-options .flex-1 p {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .checkout-section .order-summary-items .swatch-options .flex-1 .text-xs {
    font-size: 12px;
    color: #6b7280;
    margin-top: 0.15rem;
  }

  .checkout-section .order-summary-items .swatch-options .text-sm {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    min-width: 60px;
    text-align: right;
  }
}

.woocommerce ul.products li.product .swatch-item {
  min-height: 190px;
}

@media (max-width: 640px) {
  .woocommerce ul.products li.product .swatch-item {
    min-height: 160px;
    padding: 10px;
  }
}

.swatch-item{
  position: relative;
  min-width: 3rem;
  cursor: pointer;
  border-radius: 0.125rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.product-gallery-clean .swatch-item.bg-gray-50 {
  background: #f9fafb;
  border-radius: 0.5rem;
  aspect-ratio: 4/3;
}

@media (max-width: 768px) {
  .product-gallery-clean .swatch-item.bg-gray-50 {
    aspect-ratio: 1/1;
    min-height: 350px;
  }
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .flex .swatch-item img {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
  }

  .checkout-section .order-summary-items .flex .flex-1 .swatch-item {
    font-size: 12px;
    color: #6b7280;
    margin-top: 0.15rem;
  }
}

.swatch-item:hover{
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.swatch-item:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.swatch-item:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.swatch-item.active{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.swatch-item.disabled{
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  opacity: 0.4;
}

.product-gallery-clean .relative.swatch-item.disabled {
  background: #f9fafb;
  border-radius: 0.5rem;
  aspect-ratio: 4/3;
}

@media (max-width: 768px) {
  .product-gallery-clean .relative.swatch-item.disabled {
    aspect-ratio: 1/1;
    min-height: 350px;
  }
}

/* Color Swatches Specifically */

.swatch-item[data-value*="black"],
.swatch-item[data-value*="white"],
.swatch-item[data-value*="red"],
.swatch-item[data-value*="blue"]{
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 2px;
  padding: 0px;
}

@media (max-width: 768px) {
  .product-gallery-clean .md\:hidden.swatch-item[data-value*="black"],.product-gallery-clean .md\:hidden
.swatch-item[data-value*="white"],.product-gallery-clean .md\:hidden
.swatch-item[data-value*="red"],.product-gallery-clean .md\:hidden
.swatch-item[data-value*="blue"] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-gallery-clean .md\:hidden.swatch-item[data-value*="black"]::-webkit-scrollbar,.product-gallery-clean .md\:hidden
.swatch-item[data-value*="white"]::-webkit-scrollbar,.product-gallery-clean .md\:hidden
.swatch-item[data-value*="red"]::-webkit-scrollbar,.product-gallery-clean .md\:hidden
.swatch-item[data-value*="blue"]::-webkit-scrollbar {
    display: none;
  }

  .site-header .flex-1.swatch-item[data-value*="black"].justify-center.items-center.px-2,.site-header .flex-1
.swatch-item[data-value*="white"].justify-center.items-center.px-2,.site-header .flex-1
.swatch-item[data-value*="red"].justify-center.items-center.px-2,.site-header .flex-1
.swatch-item[data-value*="blue"].justify-center.items-center.px-2 {
    justify-content: center;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
  }

  .site-header .flex-1.flex.justify-center.swatch-item[data-value*="black"].px-2,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="white"].px-2,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="red"].px-2,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="blue"].px-2 {
    justify-content: center;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
  }

  .site-header .flex-1.flex.swatch-item[data-value*="black"].items-center.px-2,.site-header .flex-1.flex
.swatch-item[data-value*="white"].items-center.px-2,.site-header .flex-1.flex
.swatch-item[data-value*="red"].items-center.px-2,.site-header .flex-1.flex
.swatch-item[data-value*="blue"].items-center.px-2 {
    justify-content: center;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
  }

  .site-header .flex-1.swatch-item[data-value*="black"].justify-center.items-center.px-2 img,.site-header .flex-1
.swatch-item[data-value*="white"].justify-center.items-center.px-2 img,.site-header .flex-1
.swatch-item[data-value*="red"].justify-center.items-center.px-2 img,.site-header .flex-1
.swatch-item[data-value*="blue"].justify-center.items-center.px-2 img {
    max-width: 90px;
    max-height: 28px;
    height: 28px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .site-header .flex-1.flex.justify-center.swatch-item[data-value*="black"].px-2 img,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="white"].px-2 img,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="red"].px-2 img,.site-header .flex-1.flex.justify-center
.swatch-item[data-value*="blue"].px-2 img {
    max-width: 90px;
    max-height: 28px;
    height: 28px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .site-header .flex-1.flex.swatch-item[data-value*="black"].items-center.px-2 img,.site-header .flex-1.flex
.swatch-item[data-value*="white"].items-center.px-2 img,.site-header .flex-1.flex
.swatch-item[data-value*="red"].items-center.px-2 img,.site-header .flex-1.flex
.swatch-item[data-value*="blue"].items-center.px-2 img {
    max-width: 90px;
    max-height: 28px;
    height: 28px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .site-header .swatch-item[data-value*="black"].h-10,
  .site-header .swatch-item[data-value*="black"],.site-header 
.swatch-item[data-value*="white"].h-10,
  .site-header 
.swatch-item[data-value*="white"],.site-header 
.swatch-item[data-value*="red"].h-10,
  .site-header 
.swatch-item[data-value*="red"],.site-header 
.swatch-item[data-value*="blue"].h-10,
  .site-header 
.swatch-item[data-value*="blue"] {
    min-width: 40px;
    min-height: 40px;
  }

  .site-header .w-10.swatch-item[data-value*="black"],
  .site-header .swatch-item[data-value*="black"],.site-header .w-10
.swatch-item[data-value*="white"],
  .site-header 
.swatch-item[data-value*="white"],.site-header .w-10
.swatch-item[data-value*="red"],
  .site-header 
.swatch-item[data-value*="red"],.site-header .w-10
.swatch-item[data-value*="blue"],
  .site-header 
.swatch-item[data-value*="blue"] {
    min-width: 40px;
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  .checkout-section .order-summary-items .swatch-item[data-value*="black"],.checkout-section .order-summary-items 
.swatch-item[data-value*="white"],.checkout-section .order-summary-items 
.swatch-item[data-value*="red"],.checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] {
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .checkout-section .order-summary-items .swatch-item[data-value*="black"] .relative img,.checkout-section .order-summary-items 
.swatch-item[data-value*="white"] .relative img,.checkout-section .order-summary-items 
.swatch-item[data-value*="red"] .relative img,.checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] .relative img {
    width: 70px;
    height: 70px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
  }

  .checkout-section .order-summary-items .swatch-item[data-value*="black"] .flex-1 h4,
  .checkout-section .order-summary-items .swatch-item[data-value*="black"] .flex-1 p,.checkout-section .order-summary-items 
.swatch-item[data-value*="white"] .flex-1 h4,
  .checkout-section .order-summary-items 
.swatch-item[data-value*="white"] .flex-1 p,.checkout-section .order-summary-items 
.swatch-item[data-value*="red"] .flex-1 h4,
  .checkout-section .order-summary-items 
.swatch-item[data-value*="red"] .flex-1 p,.checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] .flex-1 h4,
  .checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] .flex-1 p {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .checkout-section .order-summary-items .swatch-item[data-value*="black"] .flex-1 .text-xs,.checkout-section .order-summary-items 
.swatch-item[data-value*="white"] .flex-1 .text-xs,.checkout-section .order-summary-items 
.swatch-item[data-value*="red"] .flex-1 .text-xs,.checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] .flex-1 .text-xs {
    font-size: 12px;
    color: #6b7280;
    margin-top: 0.15rem;
  }

  .checkout-section .order-summary-items .swatch-item[data-value*="black"] .text-sm,.checkout-section .order-summary-items 
.swatch-item[data-value*="white"] .text-sm,.checkout-section .order-summary-items 
.swatch-item[data-value*="red"] .text-sm,.checkout-section .order-summary-items 
.swatch-item[data-value*="blue"] .text-sm {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    min-width: 60px;
    text-align: right;
  }
}

.swatch-item[data-value*="black"] {
  background-color: #000;
  color: transparent;
}

.swatch-item[data-value*="white"] {
  background-color: #fff;
  color: transparent;
  border-color: #e5e7eb;
}

.swatch-item[data-value*="red"] {
  background-color: #b91c1c;
  color: transparent;
}

.swatch-item[data-value*="blue"] {
  background-color: #2563eb;
  color: transparent;
}

.swatch-item[data-value*="black"].active,
.swatch-item[data-value*="white"].active,
.swatch-item[data-value*="red"].active,
.swatch-item[data-value*="blue"].active {
  /* ring-2 ring-offset-2 ring-black; */
  color: transparent !important;
}

/* Add to Cart Button - Full Width Modern */

.single_add_to_cart_button {
  width: 100% !important;
  background: #111 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  transition: all 0.3s;
  box-shadow: none;
  outline: none;
  opacity: 1;
}

.single_add_to_cart_button::after {
  content: '' !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}

.single_add_to_cart_button:active::after {
  opacity: 0.2;
}

/* Quantity Hidden (as per existing logic) */

.quantity {
  display: none !important;
}

/* Improved Accordion Focus States */

/* Breadcrumb Schema Styling */

[itemprop="itemListElement"]:last-child [itemprop="name"] {
  color: #111827;
  font-weight: 600;
}

/* Mobile Optimizations */

@media (max-width: 1023px) {
  .woocommerce-product-gallery__wrapper {
    border-radius: 0.75rem;
  }

  .flex-control-thumbs li {
    height: 4rem;
  }
}

@media (max-width: 639px) {
  .product-gallery-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .woocommerce-product-gallery__image {
    padding: 0.5rem;
    border-radius: 0;
  }

  .flex-control-thumbs li {
    height: 3.5rem;
    border-radius: 0.5rem;
  }
}

/* Print Styles */

@media print {
  .lg\:sticky,
  .fixed,
  .whatsapp-widget,
  .scroll-to-top {
    display: none !important;
  }
}

/* =========================================
   MODERN CHECKOUT STYLES
   ========================================= */

/* Form Fields Modern Styling */

.checkout-modern .form-row {
  margin-bottom: 1.25rem;
  width: 100%;
}

.checkout-modern .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.checkout-modern .form-row label .required {
  color: #b91c1c;
  margin-left: 2px;
  text-decoration: none;
}

.checkout-modern .form-row input[type="text"],
.checkout-modern .form-row input[type="email"],
.checkout-modern .form-row input[type="tel"],
.checkout-modern .form-row input[type="number"],
.checkout-modern .form-row select,
.checkout-modern .form-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  transition: all 0.2s;
  background-color: #fff;
  color: #111;
}

.checkout-modern .form-row input:focus,
.checkout-modern .form-row select:focus,
.checkout-modern .form-row textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
  outline: none;
}

/* Select2 Styling */

.checkout-modern .select2-container--default .select2-selection--single {
  height: 46px;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #fff;
}

.checkout-modern .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: 1rem;
  color: #111;
}

.checkout-modern .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
  right: 10px;
}

/* Address Fields Grid */

.checkout-modern .woocommerce-address-fields__field-wrapper {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .checkout-modern .woocommerce-address-fields__field-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkout-modern .form-row-wide,
  .checkout-modern #billing_company_field,
  .checkout-modern #shipping_company_field {
    grid-column: 1 / -1;
  }
}

/* Hide Duplicate Headings */

.checkout-modern .woocommerce-billing-fields h3,
.checkout-modern .woocommerce-shipping-fields h3 {
  display: none;
  /* We use our own styled headers */
}

/* Create Account Checkbox */

.checkout-modern #createaccount {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
  accent-color: #000;
}

/* Ship to Different Address */

.checkout-modern #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  cursor: pointer;
}

.checkout-modern #ship-to-different-address input {
  width: 1rem;
  height: 1rem;
  accent-color: #000;
}

/* Mobile Order Summary Toggle */

@media (max-width: 1023px) {
  #order-summary-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 2000px;
    opacity: 1;
  }

  #order-summary-content.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }

  #summary-chevron {
    transition: transform 0.3s ease;
  }

  #summary-chevron.collapsed {
    transform: rotate(-90deg);
  }
}

@media (min-width: 1024px) {
  #order-summary-content {
    display: block !important;
  }
}

/* Payment Box Styling */

.payment_box {
  background: #f9fafb;
  padding: 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  margin-top: 0.75rem;
}

.payment_box p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.payment_box p:last-child {
  margin-bottom: 0;
}

/* Stripe/Card Fields */

.payment_box .form-row {
  margin-bottom: 1rem;
}

/* Terms Checkbox */

.checkout-modern .woocommerce-terms-and-conditions-wrapper {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.checkout-modern .woocommerce-privacy-policy-text {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

.checkout-modern .input-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #000;
  margin-right: 0.5rem;
}

/* Custom Scrollbar for Product List */

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Validation States */

.checkout-modern .form-row.woocommerce-invalid input,
.checkout-modern .form-row.woocommerce-invalid select {
  border-color: #b91c1c;
}

.checkout-modern .form-row.woocommerce-validated input,
.checkout-modern .form-row.woocommerce-validated select {
  border-color: #10b981;
}

/* Checkout Notices */

.checkout-modern .woocommerce-error {
  background: #fef2f2;
  border-left: 4px solid #b91c1c;
  color: #b91c1c;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  list-style: none;
}

.checkout-modern .woocommerce-error li {
  margin-bottom: 0.5rem;
}

.checkout-modern .woocommerce-error li:last-child {
  margin-bottom: 0;
}

/* Loading Overlay */

.checkout-modern .blockUI.blockOverlay {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 0.75rem;
}

.checkout-modern .blockUI.blockOverlay::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

/* Thank You Page Print Styles */

@media print {
  .thankyou-page header,
  .thankyou-page footer,
  .thankyou-page button {
    display: none !important;
  }

  .thankyou-page {
    padding: 0;
    background: white;
  }
}

/* Fix for Shipping Calculator Link */

.woocommerce-shipping-calculator {
  display: none;
  /* Usually not needed in modern checkout flow */
}

/* =========================================
   CLEAN ACCORDION - SINGLE ICON, NO BLACK BG
   ========================================= */

.info-accordion {
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
  width: 100%;
}

.info-accordion details {
  border-bottom: 1px solid #e5e7eb;
  width: 100%;
}

/* Summary - Clean base */

.info-accordion summary {
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent !important;
  /* Force transparent */
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Remove mobile tap highlight */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}

/* CRITICAL: Prevent black background on click/focus/active */

.info-accordion summary:hover,
.info-accordion summary:focus,
.info-accordion summary:active,
.info-accordion summary:focus-visible,
.info-accordion summary:-moz-focusring {
  background: transparent !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove default markers */

.info-accordion summary::-webkit-details-marker {
  display: none !important;
}

.info-accordion summary::marker {
  display: none !important;
}

/* SINGLE ICON ONLY - Using ::after */

.info-accordion summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: #b91c1c;
  /* Red/pink color */
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  /* Push to right */
  padding-left: 1rem;
  background: transparent !important;
}

/* Open state - minus icon */

.info-accordion details[open] summary::after {
  content: '−';
  color: #b91c1c;
}

/* Content area */

.info-accordion .content {
  padding: 0 0 1.5rem 0;
  color: #4b5563;
  line-height: 1.7;
  font-size: 0.9375rem;
  width: 100%;
  background: transparent !important;
  /* Prevent black bg */
}

/* Mobile adjustments */

@media (max-width: 640px) {
  .info-accordion summary {
    padding: 1rem 0;
    font-size: 0.8125rem;
    /* Force no background change on touch */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }

  .info-accordion summary::after {
    font-size: 1.25rem;
  }

  .info-accordion .content {
    padding: 0 0 1.25rem 0;
    font-size: 0.875rem;
  }
}

/* Inner content spacing */

.info-accordion .content>* {
  margin-bottom: 0.75rem;
}

.info-accordion .content>*:last-child {
  margin-bottom: 0;
}

/* SKU styling */

.sku-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #6b7280;
  font-family: monospace;
}

/* Shipping info */

.shipping-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.info-row svg {
  flex-shrink: 0;
  color: #6b7280;
  margin-top: 0.125rem;
}

.info-row strong {
  display: block;
  color: #111;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.info-row p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

/* =========================================
   PRODUCT GALLERY - CLEAN FULL-WIDTH STYLES
   ========================================= */

/* Main gallery container */

.simple-gallery {
  width: 100%;
  position: relative;
}

/* Wrapper for main image + nav */

.main-image-wrapper {
  position: relative;
  width: 100%;
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
}

/* Main image box - fills container completely */

.main-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Square aspect ratio, adjust as needed */
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual slides */

.image-slide {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  height: 100%;
}

.image-slide.active {
  display: flex;
  opacity: 1;
  z-index: 1;
}

/* Main image - fills without grey space using cover */

.gallery-main-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Fills container, crops if needed */
  -o-object-position: center;
     object-position: center;
  display: block;
}

/* Alternative: Use contain if you want to see full image (may have grey bars)
.gallery-main-img {
  object-fit: contain;
  background: #f9fafb;
}
*/

/* Navigation buttons */

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  transition: all 0.2s ease;
  color: #1a1a1a;
}

.main-image-wrapper:hover .nav-btn {
  opacity: 1;
}

.nav-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-btn.prev {
  left: 16px;
}

.nav-btn.next {
  right: 16px;
}

/* Mobile: always show nav */

@media (max-width: 768px) {
  .nav-btn {
    opacity: 1;
    width: 40px;
    height: 40px;
  }

  .nav-btn.prev {
    left: 8px;
  }

  .nav-btn.next {
    right: 8px;
  }
}

/* Slide counter */

.slide-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
}

/* Thumbnails */

.thumbnail-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .thumbnail-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
}

.thumb-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #f9fafb;
  transition: all 0.2s ease;
  position: relative;
}

.thumb-btn:hover {
  border-color: #9ca3af;
}

.thumb-btn.active {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 1px #1a1a1a;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.thumb-btn:hover img,
.thumb-btn.active img {
  opacity: 1;
}

/* No image fallback */

.no-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border-radius: 12px;
  gap: 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================
   PRODUCT LAYOUT RESPONSIVE
   ========================================= */

.product-single-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (max-width: 768px) {
  .product-single-container {
    padding: 1rem;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Sticky gallery on desktop */

@media (min-width: 1024px) {
  .simple-gallery {
    position: sticky;
    top: 2rem;
  }
}

/* =========================================
   PRODUCT INFO STYLES
   ========================================= */

.product-info-column {
  width: 100%;
}

.breadcrumb {
  font-size: 12px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #111;
}

.product-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-price del {
  color: #9ca3af;
  font-size: 1.125rem;
  font-weight: 400;
}

.product-price ins {
  text-decoration: none;
  color: #b91c1c;
}

.save-badge {
  background: #b91c1c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.short-desc {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

.stock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.stock-status.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.stock-status.out-of-stock {
  background: #fee2e2;
  color: #b91c1c;
}

/* =========================================
   ACCORDION STYLES
   ========================================= */

.info-accordion {
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
}

.info-accordion details {
  border-bottom: 1px solid #e5e7eb;
}

.shipping-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.info-row svg {
  flex-shrink: 0;
  color: #6b7280;
  margin-top: 0.125rem;
}

.info-row strong {
  display: block;
  color: #111;
  margin-bottom: 0.25rem;
}

.info-row p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.sku-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #6b7280;
}

/* =========================================
   VARIATION SWATCHES UI FIXES
   ========================================= */

/* Fix color swatches showing as black/empty boxes */

.swatch-item[data-value*="black"],
.swatch-item[data-value*="white"],
.swatch-item[data-value*="red"],
.swatch-item[data-value*="blue"],
.swatch-item[data-value*="brown"],
.swatch-item[data-value*="grey"],
.swatch-item[data-value*="gray"],
.swatch-item[data-value*="green"],
.swatch-item[data-value*="yellow"],
.swatch-item[data-value*="pink"],
.swatch-item[data-value*="purple"],
.swatch-item[data-value*="orange"] {
  width: auto !important;
  height: auto !important;
  min-width: 3.5rem !important;
  min-height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Specific color backgrounds only for visual color swatches, not text buttons */

.swatch-item.color-swatch[data-value*="black"] {
  background-color: #000 !important;
  color: transparent !important;
}

.swatch-item.color-swatch[data-value*="white"] {
  background-color: #fff !important;
  border-color: #d1d5db !important;
}

.swatch-item.color-swatch[data-value*="red"] {
  background-color: #b91c1c !important;
  color: transparent !important;
}

.swatch-item.color-swatch[data-value*="blue"] {
  background-color: #2563eb !important;
  color: transparent !important;
}

.swatch-item.color-swatch[data-value*="brown"] {
  background-color: #92400e !important;
  color: transparent !important;
}

.swatch-item.color-swatch[data-value*="grey"],
.swatch-item.color-swatch[data-value*="gray"] {
  background-color: #6b7280 !important;
  color: transparent !important;
}

.swatch-item.color-swatch[data-value*="green"] {
  background-color: #059669 !important;
  color: transparent !important;
}

/* Active state for color swatches */

.swatch-item.color-swatch.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important;
  transform: scale(1.05) !important;
}

/* Swatch label improvements */

.swatch-label {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #6b7280 !important;
  margin-bottom: 0.625rem !important;
  display: block !important;
}

/* Swatch options container - better spacing */

.swatch-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
  margin-bottom: 1rem !important;
}

/* Hide default WooCommerce variation dropdown completely */

.variations_form .variations select,
.variations_form .variations td.value select {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

/* Ensure variation swatches container shows */

.variation-swatches {
  display: block !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

/* Mobile responsive adjustments */

@media (max-width: 640px) {
  .swatch-options {
    gap: 0.375rem !important;
  }

  .swatch-label {
    font-size: 0.625rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Selected state indicator - optional checkmark for color swatches */

.swatch-item.color-swatch.active::after {
  content: 'v' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* White color swatch special case for checkmark visibility */

.swatch-item.color-swatch[data-value*="white"].active::after {
  color: #000 !important;
  text-shadow: none !important;
}

/* =========================================
   ADD TO CART BUTTON
   ========================================= */

.add-to-cart-section {
  margin-bottom: 1.5rem;
}

.single_add_to_cart_button {
  width: 100%;
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  padding: 1.125rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.single_add_to_cart_button:hover {
  background: #333 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hide quantity selector by default (shop/archive pages) */

body:not(.single-product):not(.woocommerce-cart) .quantity {
  display: none !important;
}

/* Show quantity selector on single product pages */

body.single-product .quantity {
  display: flex !important;
  align-items: center !important;
}

/* Cart page quantity selector */

body.woocommerce-cart .quantity {
  display: inline-flex !important;
  align-items: center;
}

/* =========================================
   HIDE DEFAULT WOOCOMMERCE GALLERY
   ========================================= */

.woocommerce-product-gallery {
  display: none !important;
}

/* Remove any conflicting gallery styles from your existing CSS */

.flex-control-thumbs,
.flex-control-nav,
.flex-direction-nav,
.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* =========================================
   HIDE REVIEW DATE
   ========================================= */

.woocommerce-review__published-date,
.comment-metadata time,
.comment-metadata .woocommerce-review__published-date {
  display: none !important;
}

/* =========================================
   SEARCH AUTOCOMPLETE
   ========================================= */

.threeclothing-search-form {
  position: relative;
}

.threeclothing-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.threeclothing-search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.threeclothing-search-result-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.threeclothing-search-result-link:hover,
.threeclothing-search-result-link.is-active {
  background: #f9fafb;
}

.threeclothing-search-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
}

.threeclothing-search-thumb img,
.threeclothing-search-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.threeclothing-search-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.125rem;
}

.threeclothing-search-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.threeclothing-search-price {
  font-size: 0.75rem;
  color: #6b7280;
}

.threeclothing-search-no-results {
  padding: 0.9rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.threeclothing-search-view-all {
  display: block;
  text-align: center;
  padding: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #111827;
  background: #f9fafb;
}

.threeclothing-search-view-all:hover {
  background: #f3f4f6;
}

/* =========================================
   SKELETON LOADERS (Premium Loading States)
   ========================================= */

/* Shimmer animation for skeleton loaders */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

/* Base skeleton loader style */

.skeleton {
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 6px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  display: block;
}

/* Skeleton product card container */

.skeleton-product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  background: white;
  display: flex;
  flex-direction: column;
}

/* Skeleton product image */

.skeleton-product-image {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 6px;
}

/* Skeleton product content */

.skeleton-product-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Skeleton title (2 lines) */

.skeleton-title {
  height: 1.25rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-title::after {
  content: '';
  display: block;
  height: 1.25rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  margin-top: 0.5rem;
  width: 70%;
}

/* Skeleton price */

.skeleton-price {
  height: 1.5rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  width: 50%;
  margin-top: auto;
}

/* Grid of skeleton cards */

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

@media (max-width: 1024px) {
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Hide content while loading */

.products.loading {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* Show skeleton loaders */

.skeleton-loader-container {
  display: block;
}

.skeleton-loader-container.hidden {
  display: none;
}

/* Skeleton mini cart item */

.skeleton-mini-cart-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  animation-delay: var(--delay, 0s);
}

.skeleton-mini-cart-image {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  flex-shrink: 0;
}

.skeleton-mini-cart-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-mini-cart-title {
  height: 1rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  width: 85%;
}

.skeleton-mini-cart-price {
  height: 0.875rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
  width: 60%;
  margin-top: auto;
}

/* Skeleton button */

.skeleton-button {
  height: 2.5rem;
  background: linear-gradient(90deg,
      #f3f4f6 25%,
      #e5e7eb 50%,
      #f3f4f6 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 6px;
  border: none;
  width: 100%;
  margin-top: 0.75rem;
}

/* Stagger animation for multiple skeleton items */

@keyframes stagger {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

.skeleton-item-1 {
  animation-delay: 0ms;
}

.skeleton-item-2 {
  animation-delay: 100ms;
}

.skeleton-item-3 {
  animation-delay: 200ms;
}

.skeleton-item-4 {
  animation-delay: 300ms;
}

/* Reduce motion support - disable animations for accessibility */

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-product-image,
  .skeleton-title,
  .skeleton-title::after,
  .skeleton-price,
  .skeleton-mini-cart-image,
  .skeleton-mini-cart-title,
  .skeleton-mini-cart-price,
  .skeleton-button {
    animation: none !important;
    background: #f3f4f6 !important;
  }
}

/* Global typography reset: clean, minimal sans-serif across theme UI */

html,
body,
button,
input,
select,
textarea,
.site,
.woocommerce,
.woocommerce-page,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
label,
small {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* Premium Out of Stock Swatch & Dropdown Dimming */

select option:disabled,
select option.is-out-of-stock {
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  opacity: 0.5 !important;
  background-color: #f8fafc !important;
}

/* Generic Swatches Plugin Override - Dims and crosses out out-of-stock variations */

.swatch-element.disabled,
.swatch-element.out-of-stock,
.woo-variation-swatches .wvs-style-squared .variable-item.disabled,
.variable-item.disabled {
  opacity: 0.35 !important;
  position: relative !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  border: 1px dashed #cbd5e1 !important;
  background-color: #f8fafc !important;
}

.swatch-element.disabled::after,
.swatch-element.out-of-stock::after,
.woo-variation-swatches .wvs-style-squared .variable-item.disabled::after,
.variable-item.disabled::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #94a3b8 !important;
  transform: rotate(-45deg) !important;
  transform-origin: center !important;
  z-index: 5 !important;
}

/* =========================================
   2026 UI/UX ENHANCEMENTS - SINGLE PRODUCT
   ========================================= */

/* Desktop Sticky Layout & Bento Grid */

@media (min-width: 1025px) {
  .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  .product-info-column {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: thin;
  }

  .product-info-column::-webkit-scrollbar {
    width: 6px;
  }

  .product-info-column::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
  }
}

/* Glassmorphism Mobile Sticky CTA */

.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1rem;
  z-index: 1000;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

.mobile-sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-sticky-cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.mobile-sticky-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mobile-sticky-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-sticky-price {
  font-size: 1rem;
  font-weight: 800;
  color: #b91c1c;
}

.mobile-sticky-price del {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-right: 0.25rem;
}

.mobile-sticky-btn {
  background: #b91c1c;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.3);
  transition: all 0.2s ease;
}

.mobile-sticky-btn:active {
  transform: scale(0.96);
}

.mobile-sticky-btn.is-sold-out {
  background: #9ca3af !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Bento Style Accordions */

.info-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-accordion details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.info-accordion details:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.info-accordion summary {
  padding: 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111827;
}

.info-accordion summary::-webkit-details-marker {
  display: none;
}

.info-accordion summary::after {
  content: '+';
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.info-accordion details[open] summary::after {
  transform: rotate(45deg);
}

.info-accordion .content {
  padding: 0 1.25rem 1.25rem;
  color: #4b5563;
  animation: slideDown 0.3s ease-out;
}

/* Enhanced Gallery UI */

.main-image-box {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #f8fafc;
  aspect-ratio: 4 / 5;
}

.thumb-btn {
  border-radius: 8px;
}

.thumb-btn.active {
  border: 2px solid #111827 !important;
}

/* Micro-animations */

.trust-badges .badge-item {
  transition: transform 0.2s ease, color 0.2s ease;
}

.trust-badges .badge-item:hover {
  transform: translateY(-2px);
  color: #111827;
}

.hover\:text-red-600:hover {
  color: var(--threeclothing-brand-red) !important;
}

.hover\:border-gray-900:hover{
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.hover\:border-white:hover{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-300:hover{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-60:hover{
  opacity: 0.6;
}

.hover\:opacity-70:hover{
  opacity: 0.7;
}

.focus\:border-black:focus{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.focus\:underline:focus{
  text-decoration-line: underline;
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-white:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-black:focus{
  --tw-ring-offset-color: #000;
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-black:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}

.group:hover .group-hover\:translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

@media (min-width: 640px){
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:min-w-0{
    min-width: 0px;
  }

  .sm\:flex-1{
    flex: 1 1 0%;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 768px){
  .md\:w-\[420px\]{
    width: 420px;
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px){
  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .lg\:mb-10{
    margin-bottom: 2.5rem;
  }

  .lg\:mb-16{
    margin-bottom: 4rem;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:gap-12{
    gap: 3rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:pt-16{
    padding-top: 4rem;
  }

  .lg\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1280px){
  .xl\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}