/*
Theme Name: trantham
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: trantham
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

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

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* =========================================================
   Trantham Trades — Global design tokens & base styles
   These :root variables are shared across all pages.
   ========================================================= */
:root {
  /* Colors */
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
  --color-bg: rgb(255, 255, 255);
  --color-bg-soft: rgb(246, 250, 253);
  --color-text: rgb(0, 0, 0);
  --color-text-muted: rgb(77, 100, 116);
  --color-text-light: rgb(157, 171, 184);
  --color-text-strike: rgb(176, 188, 206);
  --color-heading-dark: rgb(25, 45, 59);
  --color-border-light: rgb(222, 231, 238);
  --color-border-soft: rgb(219, 228, 242);
  --color-border-strong: rgb(98, 98, 98);
  --color-divider: rgb(77, 77, 77);
  --color-nav-divider: rgb(255, 255, 255);
  --color-footer-bg: rgb(0, 0, 0);
  --color-footer-text-muted: rgb(195, 195, 195);
  --color-footer-divider: rgb(37, 37, 37);
  --color-footer-copy: rgb(108, 108, 108);
  --color-accent-red: rgb(234, 43, 15);
  --color-banner-dark: rgb(8, 25, 33);
  --color-card-purple: rgb(55, 37, 71);
  --color-card-onepiece: rgb(0, 0, 0);
  --color-card-light: rgb(217, 217, 217);
  --color-sale-green: rgb(229, 255, 233);
  --color-sale-blue: rgb(229, 234, 255);
  --color-search-bg: rgb(6, 6, 6);
  --color-search-placeholder: rgb(102, 102, 102);
  --color-icon-border: rgb(98, 98, 98);
  --color-footer-icon-border: rgb(33, 33, 33);

  /* Typography */
  --font-primary:
    "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "Onest", "Outfit", system-ui, sans-serif;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-42: 42px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout — desktop frame is 1440px wide, content is 1164 (138 side padding) */
  --frame-max: 1440px;
  --content-max: 1330px;
  --page-pad-x: 138px;
  --section-gap: 80px;

  /* Heights from figma */
  --topbar-h: 30px;
  --header-h: 80px;
  --nav-h: 45px;
  --hero-h: 449px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}

body.trantham-age-gate-active {
  overflow: hidden;
}

body.trantham-age-gate-active .site {
  display: none !important;
}

.trantham-age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.86);
}

.trantham-age-gate-overlay.is-hidden {
  display: none;
}

.trantham-age-gate-card {
  width: min(100%, 520px);
  padding: 36px 28px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.trantham-age-gate-badge {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f7e8ee;
  color: #8f1f46;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trantham-age-gate-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.2;
  color: #111111;
}

.trantham-age-gate-card p {
  margin: 0 0 20px;
  color: #4d6474;
  font-size: 16px;
  line-height: 1.6;
}

.trantham-age-gate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.trantham-age-gate-confirm {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: #111111;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.trantham-age-gate-decline {
  color: #8f1f46;
  font-weight: 600;
  text-decoration: none;
}

.trantham-age-gate-decline:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .trantham-age-gate-card {
    padding: 28px 20px;
  }

  .trantham-age-gate-card h2 {
    font-size: 24px;
  }
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

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

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

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 15px;
}
.woo-container {
  max-width: 1330px;
  margin: 0 auto;
  padding: 0px 15px;
}
.footer-container {
  max-width: 1330px;
  margin: auto;
  /* padding: 15px; */
}
@media (min-width: 1200px) {
  .container {
    padding: 0 15px;
  }
}

.section {
  padding-top: var(--section-gap);
}

/* =========================================================
   TOP UTILITY BAR  (30px, white, social icons + contact)
   ========================================================= */
.site-main {
  padding-top: 155px;
}
.headerwrapper {
  position: fixed;
  /* top: 0; */
  left: 0;
  width: 100%;
  z-index: 999999;
}
.topbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-divider);
  height: var(--topbar-h);
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: var(--fs-12);
  max-width: 1330px;
  margin: 0 auto;
}

.socials {
  display: flex;
  gap: 16px;
  align-items: center;
}

.socials a {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  position: relative;
  transition: all 0.5s ease-in-out 0s;
}
.socials a::after {
  content: "";
  position: absolute;
  background: #d7deea;
  width: 1px;
  height: 100%;
  top: 0;
  right: -8px;
}
.socials a:last-child::after {
  display: none;
}
.socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-contact .divider {
  width: 1px;
  height: 14px;
  background: rgb(215, 222, 234);
}

.topbar-contact .item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-contact svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}
.topbar-contact a:hover,
.contact-item a:hover {
  text-decoration: underline;
}
/* =========================================================
   HEADER (80px black, logo + header_search + actions)
   ========================================================= */
.header {
  background: var(--color-black);
  height: var(--header-h);
  border-bottom: 1px solid var(--color-white);
}

.header-inner {
  height: 100%;
  /* max-width: var(--frame-max); */
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 24px;
  max-width: 1330px;
}

/* Push header_search + actions to the right; logo stays on the left */
.header .header_search {
  margin-left: auto;
}

.logo img {
  height: auto !important;
}
.logo svg {
  width: 36px;
  height: 36px;
}

.header_search,
.mobile-search-form {
  flex: 1;
  max-width: 572px;
  height: 50px;
  background: var(--color-search-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.search-icon {
  padding: 0 16px 0 20px;
  display: flex;
  color: var(--color-text-light);
}

.search-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.header_search input,
.mobile-search-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  height: 100%;
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--fs-14);
}

.header_search input::placeholder {
  color: var(--color-search-placeholder);
}

.search-btn {
  width: 133px;
  height: 50px;
  background: var(--color-white);
  color: var(--color-black);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
  transition: all 0.5s ease-in-out 0s;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.icon-btn {
  width: 45px;
  height: 45px;
  background: var(--color-black);
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--color-white);
  transition: all 0.5s ease-in-out 0s;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.badge {
  position: absolute;
  top: 5px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-red);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.profile {
  width: 184px;
  height: 45px;
  background: var(--color-black);
  border: 1px solid var(--color-border-strong);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  padding-left: 6px;
}

.profile-avatar {
  width: 33px;
  height: 33px;
  background: rgb(28, 28, 28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.profile-avatar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.profile-name {
  font-size: var(--fs-14);
  flex: 1;
}

.profile-caret {
  display: flex;
}

.profile-caret svg {
  width: 9px;
  height: 5px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ============== Account dropdown ============== */
.account-dropdown {
  position: relative;
}

.account-dropdown.open .profile-caret svg {
  transform: rotate(180deg);
}

.profile-caret svg {
  transition: transform 0.2s ease;
}

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
  z-index: 200;
  overflow: hidden;
}

.account-dropdown.open .account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s;
}

.account-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-light);
}

.ah-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ah-avatar svg {
  width: 22px;
  height: 22px;
}

.ah-info {
  min-width: 0;
}

.ah-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading-dark);
  line-height: 1.2;
  margin-bottom: 2px;
}

.ah-email {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu ul {
  padding: 6px 0;
}

.account-menu ul li {
  padding: 0;
}

.account-menu ul li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-heading-dark);
  transition: background 0.15s ease;
}

.account-menu ul li a:hover {
  background: var(--color-bg-soft);
  color: var(--color-black);
}

.account-menu ul li a svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.account-menu-footer {
  border-top: 1px solid var(--color-border-light);
  padding: 6px 0;
}

.account-menu-footer .logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-red);
  transition: background 0.15s ease;
}

.account-menu-footer .logout:hover {
  background: rgba(234, 43, 15, 0.06);
}

.account-menu-footer .logout svg {
  width: 18px;
  height: 18px;
  color: currentColor;
  flex-shrink: 0;
}

/* Mobile menu toggle */
.menu-toggle {
  width: 36px;
  height: 36px;
  background: var(--color-black);
  border: 1px solid var(--color-white);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Show/hide helpers for breakpoint switching */
.mobile-only {
  display: none;
}

.desktop-only {
  display: flex;
}

/* =========================================================
   MOBILE NAV DRAWER (hamburger menu overlay) + ACCORDION
   ========================================================= */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-black);
  border-top: 1px solid var(--color-white);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
  padding: 24px 24px 32px;
  max-height: 100vh;
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateY(0);
}

.mobile-nav .close {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-bottom: 12px;
}

.mobile-nav .close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Top-level mobile nav items: link + toggle button side by side */
.m-nav-list > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.m-nav-list > li.has-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.m-nav-list > li > a,
.m-nav-list .m-nav-link {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 16px 4px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

.m-nav-toggle {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-white);
  flex-shrink: 0;
}

/* Caret rotates on open */
.m-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  display: inline-block;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.m-nav-list li.has-sub.open .m-caret {
  transform: rotate(-135deg);
}

/* Submenu collapse / expand */
.m-submenu {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  padding: 0 0 0 16px;
  flex-basis: 100%;
  width: 100%;
}

.m-nav-list li.has-sub.open .m-submenu {
  max-height: 400px;
  padding: 4px 0 12px 16px;
}

.m-submenu li {
  padding: 0;
}

.m-submenu a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 400;
}

.m-submenu a:hover {
  color: var(--color-white);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   PRIMARY NAVIGATION (45px black)
   ========================================================= */
.nav {
  background: var(--color-black);
  height: var(--nav-h);
  border-bottom: 1px solid var(--color-white);
}

.nav-inner {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
  max-width: 1330px;
  margin: 0 auto;
}

.nav-list {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-white);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

.nav-list > li:not(:last-child)::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/Vector-65.svg);
  opacity: 0.5;
  display: inline-block;
}

.nav-list a {
  white-space: nowrap;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-list li.current_page_item a,
.footer-col ul li.current_page_item a {
  color: rgba(255, 255, 255, 0.8);
}
/* Desktop dropdown submenus */
.nav-list .has-sub {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-list .has-sub > a {
  padding-right: 4px;
}

.nav-list .has-sub .sub-toggle {
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.nav-list .has-sub .caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  display: inline-block;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-list .has-sub.open .caret,
.nav-list .has-sub:hover .caret {
  transform: translateY(0) rotate(-135deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: -20px;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
  z-index: 100;
}

/* Small arrow pointing to the parent nav item */
.submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  transform: rotate(45deg);
}

/* Invisible hover-bridge so the dropdown doesn't disappear when moving the cursor down */
.submenu::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.submenu li {
  display: block;
  gap: 0;
  border: none;
  padding: 0;
}

.submenu li::after {
  display: none;
}

.submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--color-heading-dark);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  position: relative;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    padding 0.15s ease;
}

.submenu a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-light);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  flex-shrink: 0;
}

.submenu a::after {
  content: "›";
  margin-left: auto;
  font-size: 18px;
  color: var(--color-text-light);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.submenu a:hover {
  background: var(--color-bg-soft);
  color: var(--color-black);
  padding-left: 16px;
}

.submenu a:hover::before {
  background: var(--color-accent-red);
  transform: scale(1.2);
}

.submenu a:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-black);
}

.nav-list .has-sub:hover > .submenu,
.nav-list .has-sub:focus-within > .submenu,
.nav-list .has-sub.open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: var(--hero-h);
  background-color: var(--color-card-light);
  background-image: url("assets/hero.png");
  background-size: cover;
  background-position: right center;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Dark on the LEFT (where the text lives) fading to transparent on the right */
  /* background: linear-gradient(to right,
			rgb(8, 25, 33) 22%,
			rgba(8, 25, 33, 0.7) 42%,
			rgba(8, 25, 33, 0) 78%); */
  /* background: linear-gradient(
    270deg,
    rgba(8, 25, 33, 0) 22.05%,
    rgba(8, 25, 33, 0.5) 35.84%,
    #081921 57.86%
  ); */
  background: linear-gradient(
    270deg,
    rgba(8, 25, 33, 0) 22.05%,
    rgba(8, 25, 33, 0.5) 98.84%,
    #081921 57.86%
  );
}

.hero-inner {
  position: relative;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

@media (min-width: 1200px) {
  .hero-inner {
    padding: 0;
  }
}

.hero-content {
  max-width: 550px;
  color: var(--color-white);
}

.hero-title {
  font-size: var(--fs-42);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0 0 24px;
}

.hero-sub {
  font-size: var(--fs-18);
  line-height: 1.5;
  margin: 0 0 40px;
  max-width: 550px;
  font-weight: var(--fw-regular);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 44px;
  background: rgba(0, 10, 17, 0.2);
  border: 1px solid var(--color-white);
  backdrop-filter: blur(4px);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-arrow svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.hero-arrow.left {
  left: 0;
}

.hero-arrow.right {
  right: 0;
}

/* =========================================================
   BUTTONS (Property1On + Property1Off pattern)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 0 20px;
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out 0s;
  white-space: nowrap;
}

.btn:hover {
  opacity: 0.9;
}

.btn-line {
  width: 20px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.btn-on {
  background: var(--color-white);
  color: #000a11;
  border: 1px solid var(--color-white);
}

.btn-off {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}

/* =========================================================
   SECTION HEADERS (title + arrow nav)
   ========================================================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.section-title {
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  margin: 0;
  line-height: 1;
}

.arrow-group {
  display: flex;
}

.arrow-btn {
  width: 48px;
  height: 44px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  color: rgb(2, 0, 42);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out 0s;
}

.arrow-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.arrow-btn + .arrow-btn {
  border-left: none;
}

/* =========================================================
   SHOP BY CATEGORY
   ========================================================= */
.category-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.category-grid::-webkit-scrollbar {
  display: none;
}

/* Slider mode (horizontal scroll snap when arrows are used) */
.scroller {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller > * {
  scroll-snap-align: start;
}

.category-card {
  text-align: center;
  flex: 0 0 174px;
  scroll-snap-align: start;
}

.category-img {
  width: 100%;
  aspect-ratio: 174 / 210;
  background: var(--color-card-light);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.category-img.purple {
  background-color: var(--color-card-purple);
}

.category-img.dark {
  background-color: var(--color-card-onepiece);
}

.category-img .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 12px;
}

.category-img.purple .label {
  color: rgb(245, 230, 200);
}

.category-img .label.dim {
  color: rgb(120, 132, 148);
  font-weight: var(--fw-medium);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.category-card .name {
  font-size: var(--fs-16);
  color: var(--color-black);
  font-weight: var(--fw-medium);
  margin-top: 14px;
  line-height: 1.5;
}

/* =========================================================
   FEATURED PRODUCTS
   ========================================================= */
.product-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.product-grid::-webkit-scrollbar {
  display: none;
}

.product-card {
  display: flex;
  flex-direction: column;
  /* flex: 0 0 273px; */
  scroll-snap-align: start;
}

.product-img {
  position: relative;
  width: 100%;
  /* aspect-ratio: 273 / 280; */
  background: rgb(230, 230, 230) center/cover no-repeat;
  border: 1px solid rgb(222, 231, 244);
  margin-bottom: 10px;
}

.wishlist {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(74, 74, 74, 0.5);
  border: 1px solid rgba(217, 221, 227, 0.49);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.wishlist svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.product-tag {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 14px 0 8px;
}

.product-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-heading-dark);
  margin: 0 0 12px;
  line-height: 1;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0px;
}
.product-footer{
  margin-top: auto;
}
.product-price .now {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.product-price .was {
  font-size: var(--fs-18);
  color: var(--color-text-strike);
  text-decoration: line-through;
}

.add-cart {
  height: 40px;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

.add-cart svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.product-card
  .yith-wcwl-add-to-wishlist-button
  .yith-wcwl-add-to-wishlist-button__label {
  display: none;
}
.product-card .yith-wcwl-add-to-wishlist-button {
  border: 1px solid rgba(217, 221, 227, 0.49);
  width: 36px;
  height: 36px;
  border-radius: 25px;
  backdrop-filter: blur(2px);
  background: rgba(74, 74, 74, 0.5);
}
.product-card .yith-wcwl-add-to-wishlist-button svg {
  width: 20px;
  height: 20px;
}
.product-card .yith-add-to-wishlist-button-block {
  position: absolute;
  top: 6px;
  right: 12px;
}
.product-card .yith-add-to-wishlist-button-block svg {
  stroke: var(--color-white);
}
.product-card
  .yith-add-to-wishlist-button-block
  .yith-wcwl-add-to-wishlist-button--added
  svg {
  stroke: var(--color-black);
  fill: var(--color-black);
}
.wishlist_table
  .product-card
  .yith-add-to-wishlist-button-block
  .yith-wcwl-add-to-wishlist-button--added
  svg {
  stroke: transparent;
  fill: transparent;
}
/*
li.product.removing {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
  */

.woocommerce-wishlist .wishlist-title-container {
    display: none;
}

.woocommerce-message {
  border-top-color: #358f1f;
}
.woocommerce-message::before {
  color: #358f1f;
}
.yith-add-to-wishlist-button-block.yith-add-to-wishlist-button-block--single{
  margin-bottom: 0;
}
/* =========================================================
   NEW ARRIVALS BANNER
   ========================================================= */
.arrivals {
  background: var(--color-black);
  height: 293px;
  position: relative;
  overflow: hidden;
}

.arrivals-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/arrivals-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}

.arrivals-left,
.arrivals-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
  background-position: center;
}

.arrivals-left {
  left: 13px;
  width: 262px;
  height: 294px;
  background-image: url("assets/arrivals-left.png");
}

.arrivals-right {
  right: 9px;
  width: 315px;
  height: 266px;
  background-image: url("assets/arrivals-right.png");
  transform: none;
  top: auto;
  bottom: 0;
}

.arrivals-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  padding: 0 13px;
}

.arrivals-title {
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  margin: 0 0 16px;
  line-height: 1.1;
}

.arrivals-sub {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  margin: 0 0 28px;
  max-width: 470px;
  line-height: 1.4;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.how-card {
  height: 121px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  padding: 22px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.how-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.how-card h3 {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  margin: 0 0 10px;
  color: var(--color-black);
  line-height: 1;
}

.how-card p {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================
   PROMO PAIR
   ========================================================= */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.promo {
  height: 300px;
  position: relative;
  overflow: hidden;
  padding: 40px 30px;
}

.promo.green {
  background: var(--color-sale-green)
    url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/green-bg-pattren.png)
    no-repeat 0 0;
}

.promo.blue {
  background: var(--color-sale-blue)
    url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/purple-bg-pattren.png)
    no-repeat 0 0;
}

.promo-title {
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  margin: 0 0 24px;
  line-height: 1.2;
  max-width: 380px;
  color: var(--color-black);
}

.promo-sub {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 32px;
  max-width: 274px;
}

.promo-img {
  position: absolute;
  /* border: 1px solid var(--color-black); */
  bottom: 0;
  right: 20px;
  max-width: 247px;
}

.promo.green .promo-img.a {
  right: 70px;
  bottom: 30px;
  width: 140px;
  height: 198px;
  background-color: var(--color-card-light);
}

.promo.green .promo-img.b {
  right: 145px;
  bottom: 0;
  width: 140px;
  height: 162px;
  background-color: var(--color-card-light);
  transform: rotate(-6deg);
}

.promo.blue .promo-img.a {
  right: 70px;
  bottom: 60px;
  width: 110px;
  height: 124px;
  background-image: url("assets/sale-card-1.png");
  transform: rotate(-15deg);
}

.promo.blue .promo-img.b {
  right: 30px;
  bottom: 40px;
  width: 67px;
  height: 80px;
  background-image: url("assets/sale-card-2.png");
  transform: rotate(-12deg);
}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter {
  border: 1px solid rgb(230, 230, 230);
  /* padding: 52px 24px; */
  padding: 10px;

  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: "";
  position: absolute;
  inset: 10px;
  background-image: url("assets/newsletter-bg.png");
  background-repeat: repeat;
  opacity: 0.1;
  pointer-events: none;
}
.newsletter-bg {
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/news-letter-bg-pattern.png)
    no-repeat 0 0;
  padding: 50px 15px;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.newsletter-inner {
  position: relative;
  max-width: 525px;
  margin: 0 auto;
}

.newsletter h2 {
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  margin: 0 0 16px;
  color: var(--color-black);
  line-height: 1.1;
}

.newsletter p {
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  max-width: 419px;
  margin: auto;
  margin-bottom: 28px;
  line-height: 1.4;
  color: var(--color-black);
}

.subscribe-form {
  display: flex;
  width: 100%;
  max-width: 493px;
  margin: 0 auto;
  height: 50px;
  background: var(--color-white);
  border: 1px solid rgb(215, 222, 234);
  box-shadow: 0 2px 2px 0 rgba(217, 221, 227, 0.3);
}
.newsletter-form .input-wrap p {
  margin: 0;
}
.newsletter-form .input-wrap {
  position: relative;
}
.newsletter-form .input-wrap input[type="email"] {
  width: 100%;
  /* max-width: 493px; */
  margin: 0 auto;
  height: 50px;
  background: var(--color-white);
  border: 1px solid rgb(215, 222, 234);
  box-shadow: 0 2px 2px 0 rgba(217, 221, 227, 0.3);
  padding-left: 50px;
  font-family: var(--font-primary);
}
.newsletter-form .input-wrap input[type="email"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #9dabb8;
  opacity: 1;
}
.newsletter-form .input-wrap input[type="email"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #9dabb8;
  opacity: 1;
}
.newsletter-form .input-wrap input[type="email"]:-ms-input-placeholder {
  /* IE 10+ */
  color: #9dabb8;
  opacity: 1;
}
.newsletter-form .input-wrap input[type="email"]:-moz-placeholder {
  /* Firefox 18- */
  color: #9dabb8;
  opacity: 1;
}
.newsletter-form .input-wrap input[type="submit"] {
  width: 133px;
  background: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-primary);
  cursor: pointer;
}
.newsletter-form .input-wrap p .newsletter-icon {
  width: 24px;
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 1;
}
.input-wrap .wpcf7-not-valid-tip {
  text-align: left;
  font-size: 14px;
  margin-top: 10px;
}
.subscribe-form .input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  color: var(--color-text-light);
  border: 0;
  background: none;
}
.newsletter-form .input-wrap input:focus-visible {
  outline: none !important;
}
.subscribe-form svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.subscribe-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  height: 100%;
  font-size: var(--fs-14);
  color: var(--color-black);
  font-family: inherit;
}

.subscribe-form input::placeholder {
  color: var(--color-text-light);
}

.subscribe-form button {
  width: 133px;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  letter-spacing: 0.05em;
  height: 100%;
  transition: all 0.5s ease-in-out 0s;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--color-footer-bg);
  color: var(--color-white);
  padding: 60px 0px 20px;
  margin-top: var(--section-gap);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  /* padding-bottom: 40px; */
}

.footer-col h4 {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  margin: 0 0 24px;
  color: var(--color-white);
  position: relative;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  background: rgba(37, 37, 37, 1);
  width: 35px;
  height: 1px;
  bottom: -10px;
  left: -20px;
}
.footer-col ul li {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col ul li a {
  color: var(--color-white);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  padding-left: 18px;
  position: relative;
}

.footer-col ul li a::before {
  content: "";
  width: 12px;
  height: 12px;
  /* background: var(--color-divider); */
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/footer_list-icon.svg)
    no-repeat 0 0;
  position: absolute;
  top: 2px;
  left: 0;
}

.footer-brand-text {
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--color-footer-text-muted);
  opacity: 0.9;
  margin: 24px 0;
  max-width: 250px;
}

.footer-logo {
  /* width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1.8px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white); */
  margin-bottom: 8px;
}
.footer-logo img {
  height: auto !important;
}
.footer-logo svg {
  width: 50px;
  height: 50px;
}

.footer-socials {
  display: flex;
  gap: 18px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  background: var(--color-black);
  border: 1px solid var(--color-footer-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all 0.3s ease-in-out 0s;
}
.footer-col:last-child::after {
  display: none;
}
.footer-socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.footer-socials img {
  width: auto !important;
  height: auto !important;
}
.footer-col {
  position: relative;
}
.footer-col::after {
  content: "";
  position: absolute;
  background: rgba(37, 37, 37, 1);
  height: 100%;
  width: 1px;
  top: 0;
  right: -20px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-item .icon {
  width: 42px;
  height: 42px;
  background: var(--color-black);
  border: 1px solid var(--color-footer-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(137, 137, 137);
  flex-shrink: 0;
}

.contact-item .icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.contact-item .text {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid var(--color-footer-divider);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.copyright {
  font-size: var(--fs-12);
  color: var(--color-footer-copy);
  font-weight: var(--fw-medium);
}

.payment-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.payment-icons .pi {
  width: 46px;
  height: 30px;
  background: var(--color-white);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.05em;
}
.desktop-hide {
  display: none;
}
/* =========================================================
   Login/signup css
   ========================================================= */
.login-signup-wrap {
  max-width: 460px;
  margin: auto;
  padding-top: 40px;
}
.login-signup-wrap h1 {
  text-align: center;
  /* font-size: 32px; */
  font-weight: var(--fw-semibold);
}
.woocommerce form .form-row label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--color-black);
}
.woocommerce form .form-row {
  margin-bottom: 20px;
  padding-left: 0;
  padding-right: 0;
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  border-color: #d7deea;
  border-radius: 0;
  padding: 15px 20px;
  font-size: 14px;
  color: var(--color-black);
}
/* .woocommerce form .form-row .input-text{
  text-transform: capitalize;
} */
.woocommerce form.login,
.woocommerce form.register {
  padding: 0;
  border: none;
}
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pass-show.svg)
    no-repeat 0 0;
  width: 24px;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pass-hide.svg)
    no-repeat 0 0;
  width: 24px;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce form .form-row label.checkbox {
  position: relative;
  flex: 1;
  margin-bottom: 0;
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"],
.woocommerce form .form-row label.checkbox input[type="checkbox"],.form-row label.checkbox input[type="checkbox"]{
  opacity: 0;
  position: absolute;
  width: 100%;
  /* height: 100%; */
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"]
  + span,
.woocommerce form .form-row label.checkbox input[type="checkbox"] + span,.form-row label.checkbox input[type="checkbox"] + span {
  padding-left: 30px;
  cursor: pointer;
  font-size: 14px;
  color: #4d6474;
  line-height: 1.5;
}
.woocommerce form .form-row label.checkbox input[type="checkbox"] + span a {
  color: #020f19;
  font-weight: 500;
}
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]
  + span
  a:hover {
  text-decoration: underline;
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"]:checked
  + span::after,
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]:checked
  + span::after,.form-row label.checkbox input[type="checkbox"]:checked + span::after{
  content: "";
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/checkbox-check.svg)
    no-repeat 0 0;
  position: absolute;
  width: 11px;
  height: 9px;
  top: 12px;
  left: 5px;
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"]:checked
  + span::after {
  top: 6px;
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"]
  + span::before,
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]
  + span::before,.form-row label.checkbox input[type="checkbox"]:checked + span::before {
  border: 1px solid #ccd2db;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 0;
  content: "";
}
.woocommerce
  .woocommerce-form-login
  .woocommerce-form-login__rememberme
  input[type="checkbox"]:checked
  + span::before,
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]:checked
  + span::before,.form-row label.checkbox input[type="checkbox"]:checked + span::before {
  border-color: #000;
  background: #000;
}
.woocommerce form .form-row.form-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.woocommerce-LostPassword a {
  font-size: 14px;
  text-transform: capitalize;
  color: #4d6474;
  text-decoration: underline;
  font-weight: 500;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce .woocommerce-form-register__submit {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  background: #000000 !important;
  float: none;
  width: 100%;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-top: 20px !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) !important;
}
.reguster-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #4d6474;
}
.reguster-link a {
  text-transform: capitalize;
  color: #000000;
  font-weight: 600;
  text-decoration: underline;
  margin-right: 5px;
}
.woocommerce-privacy-policy-text p {
  font-size: 14px;
  font-weight: 400;
  color: #4d6474;
  line-height: 1.5;
}
.woocommerce form .form-row .input-text::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #9dabb8;
  opacity: 1;
}
.woocommerce form .form-row .input-text::-moz-placeholder {
  /* Firefox 19+ */
  color: #9dabb8;
  opacity: 1;
}
.woocommerce form .form-row .input-text:-ms-input-placeholder {
  /* IE 10+ */
  color: #9dabb8;
  opacity: 1;
}
.woocommerce form .form-row .input-text:-moz-placeholder {
  /* Firefox 18- */
  color: #9dabb8;
  opacity: 1;
}
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]
  + span::before {
  top: 0;
}
.woocommerce
  form
  .form-row
  label.checkbox
  input[type="checkbox"]:checked
  + span::after {
  top: 6px;
}
/* =========================================================
   Login/signup css
   ========================================================= */

/* =========================================================
   Product listing css
   ========================================================= */
.woocommerce-breadcrumb {
  font-size: var(--fs-14);
  color: var(--color-black);
  font-weight: var(--fw-medium);
  display: flex;
  gap: 6px;
  align-items: center;

  margin-bottom: 7px;
}
.woocommerce-wishlist .woocommerce-breadcrumb{
  margin-left: -6px !important;
}
.woocommerce .woocommerce-breadcrumb {
  margin-top: 17px;
}
.woocommerce-breadcrumb a {
  color: #4a5d6e;
  text-transform: capitalize;
}
.woocommerce-breadcrumb a:hover {
  color: var(--color-black);
}
p.p-FieldError.Error{

}
.woocommerce-archive-page {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.woocommerce-archive-page .woocommerce-sidebar-wrapper {
  background: #f3f6f9;
  border: 1px solid #e6ebef;
  padding: 20px 14px;
  min-width: 279px;
}
.woocommerce-archive-page .woocommerce-sidebar-wrapper h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 13px;
}
.woocommerce-archive-page
  .woocommerce-sidebar-wrapper
  .bapf_sfilter
  .bapf_colaps_smb,
.woocommerce-archive-page
  .woocommerce-sidebar-wrapper
  .bapf_sfilter
  .bapf_desci {
  font-size: 12px;
}
.woocommerce-archive-page .woocommerce-sidebar-wrapper .bapf_sfilter ul li {
  font-size: 16px;
  color: #4d6474;
  margin-bottom: 10px !important;
}
.woocommerce-archive-page .bapf_ckbox_sqchck input[type="checkbox"] {
  border: 1px solid #ccd2db;
  background: #fff;
}
.woocommerce-archive-page
  .bapf_ckbox_sqchck
  input[type="checkbox"]:checked:after {
  border: none;
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/filter-check-arrow.svg)
    no-repeat 0 0;
  width: 13px;
  height: 9px;
  transform: none;
  top: 4px;
  left: 3px;
}
.woocommerce-archive-page .bapf_ckbox_sqchck input[type="checkbox"]:checked {
  background: #000;
}
.woocommerce-archive-page .bapf_sfilter .bapf_body ul li ul {
  margin-top: 10px;
}
.woocommerce-archive-page .bapf_sfilter .bapf_cchild,
.woocommerce-archive-page .bapf_sfilter .bapf_ochild {
  float: right;
  margin-top: 6px;
  font-size: 12px;
  color: #000;
}
.woocommerce-archive-page .products-archive {
  flex: 1;
}
.woocommerce .woocommerce-result-count {
  font-size: 22px;
  font-weight: 700;
  color: #000a11;
  margin-bottom: 0;
}
.woocommerce .woocommerce-ordering select {
  border-color: #d7deea;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 500 !important;
  color: #000a11 !important;
  -webkit-appearance: none;
  appearance: none;
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/drop_arrow.svg)
    no-repeat 93%;
  font-family: var(--font-primary) !important;
  padding-right: 30px;
}
.woocommerce .woocommerce-ordering {
  margin-bottom: 0px;
}
.shop-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 10px;
}
#secondary {
  display: block;
}
.woocommerce ul.products li.product .button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  background: transparent;
  border: 1px solid #000000;
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  gap: 8px;
  margin-top: 0px;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{
  display: none;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message{
  line-height: 1.5;
}
.woocommerce ul.products li.product .product-action {
  margin-top: auto;
}
/* Only top row */
#secondary > .berocket_ajax_group_filter_title {
  display: inline-block;
  width: 50%;
  margin: 0;
  vertical-align: middle;
}

#secondary > .berocket_single_filter_widget_241 {
  display: inline-flex;
  width: 50%;
  justify-content: flex-end;
}

/* Other filters normal */
#secondary
  > .berocket_single_filter_widget:not(.berocket_single_filter_widget_241) {
  display: block;
  width: 100%;
}
.berocket_single_filter_widget .bapf_sfilter {
  margin-bottom: 0px;
}
.bapf_sfilter .bapf_button {
  font-size: 12px;
  font-weight: 500;
  color: #4a5d6e;
  text-decoration: underline;
}
.bapf_sfilter .bapf_button:hover {
  color: var(--color-black);
}
.woocommerce-sidebar-wrapper .Filter {
  border-bottom: 1px solid #deecf5;
  padding-bottom: 20px;
}
.woocommerce-archive-page
  .woocommerce-sidebar-wrapper
  .bapf_sfilter
  ul
  li:last-child {
  margin-bottom: 0px !important;
}
.woocommerce-archive-page .woocommerce-sidebar-wrapper h3 {
  margin-top: 20px;
}
#secondary > .berocket_single_filter_widget_241.Filter {
  padding-bottom: 0px;
  border-bottom: 0px;
}
.woocommerce-sidebar-wrapper .Filter:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.woocommerce-sidebar-wrapper .bapf_slidr_jqrui h3 {
  margin-bottom: 25px !important;
  display: block;
}
.woocommerce-sidebar-wrapper
  .bapf_slidr_main.ui-widget-content
  .ui-slider-handle {
  background: #fff;
  border: 6px solid var(--color-black);
  width: 22px;
  height: 22px;
  top: -10px;
}
.woocommerce-sidebar-wrapper .bapf_slidr_main.ui-widget-content {
  background: none repeat scroll 0 0 #91a5c2;
}
.woocommerce-sidebar-wrapper .bapf_slidr_jqrui .bapf_from,
.bapf_slidr_jqrui .bapf_to {
  margin-top: 6px;
  color: #324373;
  font-weight: 500;
}
.woocommerce nav.woocommerce-pagination {
  margin-top: 40px;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  float: none;
  width: 50px;
  height: 50px;
  border: none;
  border: 1px solid #e6e6e6;
  background: none;
  background: transparent;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-black);
  color: var(--color-white);
}
.woocommerce nav.woocommerce-pagination ul li a.next {
  position: relative;
  font-size: 0;
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pagination-next.svg)
    no-repeat center;
}
.woocommerce nav.woocommerce-pagination ul li a.next:hover {
  background: #000
    url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pagination-next-hover.svg)
    no-repeat center;
}
.woocommerce nav.woocommerce-pagination ul li a.prev {
  position: relative;
  font-size: 0;
  background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pagination-prev.svg)
    no-repeat center;
}
.woocommerce nav.woocommerce-pagination ul li a.prev:hover {
  background: #000
    url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/pagination-prev-hover.svg)
    no-repeat center;
}
.product-card-detail {
  margin-bottom: 12px;
  flex: 1;
}
.woocommerce ul.products li.product .button{
  margin-top: 12px;
}
.woocommerce-sidebar-wrapper .bapf_slidr_jqrui .bapf_slidr_main {
  margin-left: 10px;
  margin-right: 12px;
}
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  float: unset !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  padding: 0;
}

.product-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.product-card-detail {
  flex: 1;
}

.product-action {
  margin-top: auto;
}
.woocommerce ul.products li.product a.added_to_cart {
  width: 100%;
  text-decoration: underline;
  text-align: center;
}
.newsletter-form .wpcf7-spinner {
  margin-top: 20px;
}
.newsletter-form .wpcf7-response-output {
  margin-top: 0px !important;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  .woocommerce-breadcrumb {
  font-size: var(--fs-14);
  color: var(--color-black);
  font-weight: var(--fw-medium);
}
.single-product.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb{
  margin-left: -6px;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  .woocommerce-breadcrumb
  a {
  color: #4a5d6e;
}

.woo-variation-gallery-thumbnail-slider .wvg-thumbnail-next-arrow,
.woo-variation-gallery-thumbnail-slider .wvg-thumbnail-prev-arrow {
  height: 42px !important;
  width: 42px !important;
  opacity: 1;
  visibility: visible;
  top: 50%;
}
 .cart-coupon button {
  min-width: 121px;
}
/* =============================================================
   CHECKOUT
   ============================================================= */

.woocommerce-checkout .checkout-main-container {
  display: flex;
  gap:22px;
}

.woocommerce-checkout .col2-set {
  width: 67%;
}
.woocommerce-checkout .col2-set .col-1 {
  width: 100%;
}
.woocommerce-checkout .col2-set .col-2 {
  width: 100%;
}

.woocommerce-checkout .custom-checkout-wrapper {
  width: 420px;
  background: #F3F6F9;
  border:1px solid #DEECF5;
  padding: 30px 20px;
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table{
  border: none;
}
.woocommerce-checkout .custom-checkout-wrapper h3{
  font-size: 18px;
  font-weight: 600;
  color:#1C478B;
  margin-top: 0px;
  margin-bottom: 28px;
}
.checkout-main-container label.checkbox input[type="checkbox"] + span::before{
  background: #fff;
  /* border-radius: 0px; */
}
.woocommerce-billing-fields label.checkbox input[type="checkbox"] + span{
  color:#515F7C;
}
 .woocommerce table.shop_table tfoot .cart-subtotal td:first-child, .woocommerce table.shop_table tfoot .cart-subtotal th:first-child{
border-top: none !important;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot  td{
  padding-right: 0px !important;
}
 .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot  th{
  padding-left: 0px !important;
 }
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table .table-summary td{
  padding: 0;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table td{
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.custom-checkout-item:nth-child(2) td{
  padding-top: 0px;
}
.woocommerce-checkout .woocommerce-checkout-payment {
  width: 67%;
}
.woocommerce-checkout .custom-checkout-wrapper .product-image{
  width: 80px;
}
span#ship-to-different-address {
  display: flex;
  width: 100%;
}
.checkout-main-container .col-2:has(.woocommerce-shipping-fields) {
  background: #f3f6f9;
  border: 1px solid #deecf5;
  padding: 30px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.woocommerce-checkout #payment{
  background: #f3f6f9;
  border: 1px solid #deecf5;
  padding: 30px 20px;
}
.woocommerce-checkout #payment h3{
  margin-top: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
}
.woocommerce-checkout #payment div.payment_box{
  background: transparent;
  padding: 0;
  margin: 0;
}
.woocommerce-checkout #payment fieldset{
  border: none;
  padding: 0;
}
.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}
.woocommerce-checkout #payment label{
  font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--color-black);
}
.woocommerce-checkout #payment .Label{
  margin-bottom: 10px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.order-title td,.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.custom-coupon-row td{
  padding-bottom: 0px;
  border: none;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.custom-coupon-row td{
  padding-top: 0px;
}
.checkout_coupon{
  position: relative;
  margin-bottom: 20px !important;
}
.checkout_coupon .form-row.form-row-first{
  margin-bottom: 0;
  width: 100%;
}
.checkout_coupon  p.form-row.form-row-last{
  position: absolute;
  margin-bottom: 0;
  top:0;
  right: 0;
  display: flex;
  justify-content: flex-end;
}
.woocommerce form.checkout_coupon  .form-row .input-text{
  height: 40px;
  padding-right: 150px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table .custom-coupon-row td{
  border: none;
}
.custom-coupon-row  input[type="text"]{
  flex: 1;
    height: 40px;
    border: 1px solid #cdd5de;
    border-right: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    border-radius: 0px;
    color: #000;
        font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.cart-coupon{
  display: flex;
}
/* =============================================================
   CHECKOUT
   ============================================================= */
/* =========================================================
   Product listing css
   ========================================================= */
/* =========================================================
   My acccount  css
   ========================================================= */
.woocommerce-page .entry-content {
  padding: 30px 0 20px;
}
.woocommerce-page nav.woocommerce-MyAccount-navigation ul li a {
  border: 1px solid #d7deea;
  border-bottom: none;
  display: flex;
  padding: 15px 30px;
  font-weight: 500;
}
.woocommerce-page nav.woocommerce-MyAccount-navigation ul li:last-child a {
  border-bottom: 1px solid #d7deea;
}
.woocommerce-page nav.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.woocommerce-MyAccount-content p {
  font-size: 16px;
  color: #4d6474;
  line-height: 1.5;
}
.woocommerce-MyAccount-content p a {
  color: #000;
}
.woocommerce-MyAccount-content p a:hover {
  text-decoration: underline;
}
.woocommerce .woocommerce-info .button,
.woocommerce .button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
    :not(.edit-post-visual-editor)
  )
  .woocommerce
  a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
    :not(.edit-post-visual-editor)
  )
  .woocommerce
  button.button,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {
  background: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  border-radius: 0px;
  padding: 0.618em 1em;
  text-transform: capitalize;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce-MyAccount-content a.button {
  text-transform: capitalize;
}
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background: #f3f6f9;
  color: #4d6474;
}
.woocommerce-Address {
  border: 1px solid #d7deea;
  padding: 20px;
}
.woocommerce-Address h2 {
  margin-top: 0px;
  text-transform: capitalize;
}
.woocommerce-account .addresses .title .edit {
  font-weight: 500;
  color: var(--color-black);
  font-size: 16px;
}
.woocommerce-Address address {
  padding-top: 10px;
  font-style: normal;
  line-height: 1.6;
}
.woocommerce-EditAccountForm {
  background: #f3f6f9;
  border: 1px solid #deecf5;
  padding: 30px 20px;
}
.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin-top: 40px;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm p span:has(em) {
  margin-top: 5px;
  display: block;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm p span em {
  font-size: 13px;
}
.woocommerce-EditAccountForm fieldset legend {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 20px;
  /* text-transform: capitalize; */
}
.woocommerce-EditAccountForm p:has(.woocommerce-Button) {
  margin-bottom: 0px;
}

.single-product .quantity:has(input.qty[type="hidden"]) .qty-minus,
.single-product .quantity:has(input.qty[type="hidden"]) .qty-plus {
  display: none !important;
}
:where(.woocommerce) .select2-container .select2-selection {
  border: 1px solid #d7deea;
  border-radius: 0px;
}
:where(.woocommerce)
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  padding: 15px 20px;
}
.woocommerce-MyAccount-content:has(.woocommerce-address-fields) {
  background: #f3f6f9;
  border: 1px solid #deecf5;
  padding: 30px 20px;
}
.woocommerce-MyAccount-content:has(.woocommerce-address-fields) h2 {
  margin-top: 0px;
}
:where(.woocommerce)
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  right: 20px;
}
.woocommerce span.onsale {
  width: 50px;
  height: 50px;
  background: #000;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.woocommerce form .form-row label {
  text-align: left;
  /* text-transform: capitalize; */
}
.woocommerce-notices-wrapper .woocommerce-error li strong{
  text-transform: capitalize;
}
.select2-container {
  text-align: left;
}
.woocommerce
  .woocommerce-MyAccount-content
  .woocommerce-customer-details
  address {
  border: none;
  padding: 0;
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses {
  display: flex;
  justify-content: space-between;
  /* margin: 0 -10px; */
}
.woocommerce
  .woocommerce-MyAccount-content
  .col2-set
  .woocommerce-column--billing-address.col-1,
.woocommerce .woocommerce-MyAccount-content .col2-set .col-2 {
  border: 1px solid #d7deea;
  border-radius: 6px;
  width: 100%;
  padding: 20px;
  /* margin: 0 10px; */
}
.woocommerce
  .woocommerce-MyAccount-content
  .col2-set
  .woocommerce-column--billing-address.col-1{
    margin-right: 5px;
  }
  .woocommerce .woocommerce-MyAccount-content .col2-set .col-2{
    margin-left: 5px;
  }
.woocommerce
  .woocommerce-MyAccount-content
  .woocommerce-customer-details
  address {
  line-height: 1.6;
  color: #4d6474;
}
.woocommerce .u-columns.col2-set .col-1 {
  width: 100%;
  margin: 0 10px;
  border-radius: 6px;
}
.woocommerce-page .u-columns.col2-set {
  display: flex;
  margin: 0 -10px;
}
.woocommerce-Address address {
  line-height: 1.6;
  color: #4d6474;
}
/* =========================================================
   My acccount  css
========================================================= */
/* =========================================================
   product detail  css
========================================================= */
.summary .product-categories-above-title {
  font-size: 12px;
  font-weight: 500;
  color: #4d6474;
  margin-bottom: 12px;
  letter-spacing: 10%;
  text-transform: uppercase;
}
.single_add_to_cart_button {
  text-transform: none;
}
.woocommerce div.product .product_title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}
.product-stock-status .label {
  font-size: 16px;
  font-weight: 500;
  color: #4d6474;
}
.product-stock-status .in-stock {
  color: #55AF39;
  font-weight: 600;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  div.product
  p.price,.woocommerce-variation-price {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 20px 0;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
   color: #000000;
   font-size: 22px;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price del .woocommerce-Price-amount{
    font-weight: 400;
    color: #b0bcce;
}
.woocommerce-variation-price{
  margin-top: 0px;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  div.product
  p.price
  del {
  font-weight: 400;
  color: #b0bcce;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  opacity: 1;
}
.section-divider {
  border-top: 1px solid #d7deea;
  width: 100%;
  margin-bottom: 20px;
}
.sku_wrapper .lable-bold {
  font-size: 16px;
  font-weight: 500;
  color: #4d6474;
}
.sku_wrapper .sku {
  color: #000000;
  font-weight: 600;
}
.single_add_to_cart_button.btn{
  font-size: 18px;
  font-weight: 500;
}
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description ol li,
.woocommerce-product-details__short-description ul li {
  font-size: 14px;
  color: #4d6474;
  line-height: 1.5;
  margin-bottom: 10px;
}
.woocommerce-product-details__short-description p{
  font-size: 16px;
}
.quantity {
  display: flex;
  align-items: center;
  border: 1px solid #d7deea;
  border-radius: 0px;
  overflow: hidden;
  width: fit-content;
  box-shadow: 0px 2px 2px 0px rgba(217, 221, 227, 0.3);
}
.qty-minus,
.qty-plus {
  width: 36px;
  height: 52px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}

.qty-minus:hover,
.qty-plus:hover {
  background: #e6ebef;
}
input.qty {
  width: 44px;
  height: 38px;
  border: none;
  /* border-left: 1px solid #ddd;
	border-right: 1px solid #ddd; */
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  background: #fff;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  width: 3.631em;
  text-align: center;
  margin: 0;
  vertical-align: middle;
  font-family: var(--font-primary);
}
.product-quantity input.qty::-webkit-inner-spin-button,
.product-quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gallery-wrapper .summary form {
  display: flex;
  gap: 0px;
  margin-top: 18px;
}
.gallery-wrapper .summary form .single_add_to_cart_button {
  flex: 1;
  min-height: 54px;
  text-transform: unset;
  letter-spacing: 0;
}
.woocommerce div.product form.cart .variations label{
  text-transform: capitalize;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .out-of-stock{
  color: #ea2b0f !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}
span.required{
  color:#EA2B0F;
}
.wpcf7 form.sent .wpcf7-response-output {
  text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  text-align: center !important;
}
.woocommerce div.product form.cart div.quantity {
  margin-right: 20px;
}
.product .gallery-image-wrapper .woo-variation-product-gallery .woo-variation-gallery-container{
  border: 1px solid #d7deea;
}
.product .gallery-image-wrapper .woo-variation-product-gallery{
  margin-bottom: 0;
}
.product .woo-variation-gallery-thumbnail-wrapper {
  padding: 20px 10px;
}
.product
  .woo-variation-gallery-thumbnail-position-bottom-bottom
  .woo-variation-gallery-container
  .wvg-thumbnail-prev-arrow,
.product
  .woo-variation-gallery-thumbnail-position-bottom-bottom
  .woo-variation-gallery-container
  .wvg-thumbnail-next-arrow {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  background: transparent;
  border: 1px solid #dbe4f2;
  width: 43px;
  height: 39px;
  border-radius: 0px;
}
.woo-variation-gallery-thumbnail-wrapper.no-gallery {
    display: none;
}
.product
  .woo-variation-gallery-thumbnail-position-bottom-bottom
  .woo-variation-gallery-thumbnail-slider {
  display: flex;
  align-items: center;
  margin: 0px !important;
}
.product .woo-variation-gallery-thumbnail-slider .slick-list {
  flex: 1;
  margin: 0 10px;
}
.product .wvg-thumbnail-prev-arrow::before {
  content: "";
  background: url(images/tranthm-prev-arrow.svg) no-repeat 0 0;
  width: 7px;
  height: 11px;
}
.product .wvg-thumbnail-next-arrow::before {
  content: "";
  background: url(images/tranthm-next-arrow.svg) no-repeat 0 0;
  width: 7px;
  height: 11px;
}
.product .wvg-thumbnail-prev-arrow:hover::before {
  background: url(images/tranthm-prev-arrow-hover.svg) no-repeat 0 0;
}
.product .wvg-thumbnail-next-arrow:hover::before {
  background: url(images/tranthm-next-arrow-hover.svg) no-repeat 0 0;
}
.product
  .woo-variation-gallery-thumbnail-slider
  .wvg-thumbnail-next-arrow:hover,
.product
  .woo-variation-gallery-thumbnail-slider
  .wvg-thumbnail-prev-arrow:hover {
  background: var(--color-black);
  color: var(--color-black);
}
.product
  .woo-variation-gallery-thumbnail-position-bottom-bottom
  .woo-variation-gallery-container
  .woo-variation-gallery-thumbnail-slider.slick-initialized
  .slick-slide
  > div {
  margin: 0 7px;
}
.product .gallery-image-wrapper .wvg-gallery-image {
  min-height: 481px;
  position: relative;
}
.product .gallery-image-wrapper .wvg-gallery-image img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.woocommerce div.product .woocommerce-tabs {
  border: 1px solid #e6ebef;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 21px 0px 0;
  background: #f3f6f9;
  margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: #e6ebef;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  padding: 0;
  border-radius: 0px;
  margin: 0;
  border: none;
  background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  color: #6d869f;
  min-width: 141px;
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 5px solid transparent;
  padding-left: 10px;
  padding-right: 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent;
  color: var(--color-black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-color: var(--color-black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
  display: none;
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 20px 20px 40px;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  margin-top: 0px;
}
.woocommerce div.product .woocommerce-tabs .panel p strong {
  font-weight: 500;
  color: var(--color-black);
}
.woocommerce div.product .woocommerce-tabs .panel p {
  line-height: 1.5;
  color: #4d6474;
}
.woocommerce div.product .woocommerce-tabs .panel p:last-child {
  margin-bottom: 0px;
}
.related.products {
  padding-top: 60px;
}
.related h2 {
  margin-top: 0px;
  font-size: 30px;
  color: var(--color-black);
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 33px;
}
.quantity input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme))
  div.product
  p.price {
  display: flex;
  gap: 10px;
  /* flex-direction: row-reverse;
  justify-content: flex-end; */
}
span.out-stock {
  color: #ea2b0f;
  font-weight: 600;
}
.gallery-wrapper {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}
.woo-variation-product-gallery {
  max-width: 100% !important;
}
.gallery-image-wrapper {
  max-width: 550px;
  width: 100%;
}
.woocommerce div.product div.summary {
  float: none;
  width: 100%;
  margin-bottom: 0;
}
.woocommerce-product-details__short-description ol,
.woocommerce-tabs ol {
  padding-left: 16px;
  margin-bottom: 30px;
}
.woocommerce-product-details__short-description ul li {
  position: relative;
  padding-left: 20px;
}
.woocommerce-product-details__short-description ul,
.woocommerce-tabs ul {
  margin-bottom: 30px;
}
.woocommerce-product-details__short-description ul li::before,
.woocommerce-tabs ul li::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #4d6474;
  top: 7px;
  left: 0;
  border-radius: 15px;
}
.woocommerce-tabs ul li {
  position: relative;
  padding-left: 20px;
}
.woocommerce-tabs ol li,
.woocommerce-tabs ul li {
  font-size: 14px;
  color: #4d6474;
  line-height: 1.5;
  margin-bottom: 10px;
}
.woocommerce-product-details__short-description ul li:last-child,
.woocommerce-product-details__short-description ol li:last-child,
.woocommerce-tabs ul li:last-child,
.woocommerce-tabs ol li:last-child {
  margin-bottom: 0px;
}
.single_variation_wrap {
  width: 100%;
  /* display: flex; */
}
.gallery-wrapper .summary form.variations_form {
  flex-wrap: wrap;
}
.gallery-wrapper .woocommerce-variation-add-to-cart {
  display: flex;
  width: 100%;
}

.woocommerce div.product form.cart .variations select {
  border: none;
  background: none;
  border: 1px solid #d7deea;
  padding: 0px 16px;
  font-size: 14px;
  color: #000;
  font-family: var(--font-primary);
  width: 100%;
  background: url(images/drop_arrow.svg) no-repeat 96%;
  min-height: 50px;
}
.woocommerce div.product form.cart .variations select:focus {
  outline: none;
}
.woocommerce div.product form.cart .variations {
  margin-bottom: 20px;
}
.woocommerce div.product form.cart .variations th {
  text-align: left;
  vertical-align: top;
}
.woocommerce div.product form.cart .reset_variations {
  display: none;
}
.variations th.label{
  width: 139px;
}
.woocommerce div.product form.cart .variations td.value{
  padding-left: 20px;
}
/* =========================================================
   product detail  css
========================================================= */
/* =========================================================
   404 page  css
========================================================= */
.error-404 {
  text-align: center;
  width: 100%;
}

.error-404 .page-content {
  display: inline-block;
  width: 100%;
}

.error-404 a.button {
  display: inline-block;
  margin-top: 30px;
}

.error-404.not-found {
  max-width: 600px;
  margin: 0 auto;
}

.error-404 h1.page-title {
  font-weight: 600;
  font-size: 240px;
  margin-bottom: 40px;
  margin-top: 80px;
}
.error-404 .page-content p {
  margin-top: 0px;
  font-size: 16px;
  line-height: 1.6;
  color: #4d6474;
}
.error-404 .page-content p:last-child {
  margin-bottom: 0px;
}
.error-404 .btn {
  margin-top: 30px;
}
.checkout-main-container .woocommerce-billing-fields {
  background: #f3f6f9;
  border: 1px solid #deecf5;
  padding: 30px 20px;
}
.checkout-main-container .woocommerce-billing-fields h3,.checkout-main-container .woocommerce-shipping-fields h3 {
  margin-top: 0;
  font-size: 24px;
  color: var(--color-black);
  font-weight: 600;
  margin-bottom: 20px;
}
/* =========================================================
   404 page  css
========================================================= */
/* =========================================================
   thank you page  css
========================================================= */
.woocommerce ul.order_details li {
  width: 18%;
}
.woocommerce ul.order_details li:last-child {
  margin-right: 0px;
  padding-right: 0px;
}
.woocommerce-thankyou-order-received {
  font-size: 20px;
  color: #358f1f;
  font-weight: 600;
  margin-bottom: 40px;
}
.woocommerce ul.order_details {
  display: flex;
  justify-content: space-between;
}
.woocommerce-order .woocommerce-customer-details .woocommerce-columns {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.woocommerce table.shop_table.order_details thead th:last-child {
  border-bottom: 1px solid #d7deea;
}
.woocommerce table.shop_table.order_details {
  border-color: #d7deea;
}
.woocommerce table.shop_table.order_details td {
  border-color: #d7deea;
}
.woocommerce table.shop_table.order_details td.product-total {
  border-bottom-style: solid;
}
.woocommerce table.shop_table.order_details {
  border-collapse: collapse;
}
.woocommerce .woocommerce-order .woocommerce-customer-details address {
  border: none;
  padding: 0px;
  line-height: 1.6;
}
.woocommerce .woocommerce-order .woocommerce-column--shipping-address,
.woocommerce .woocommerce-order .woocommerce-column--billing-address {
  border: 1px solid #d7deea;
  padding: 20px;
  border-radius: 6px;
  width: calc(100% - 10px);
}
.woocommerce .woocommerce-order .woocommerce-column--shipping-address {
  margin-left: 10px;
}
.woocommerce .woocommerce-order .woocommerce-column--billing-address {
  margin-right: 10px;
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last{
  width: 49%;
}
.woocommerce form .form-row.notes{
  margin-bottom: 0px;
}
.checkbox{
  position: relative;
}
.checkbox input{
  opacity: 0;
    position: absolute;
    width: 100%;
}
label.checkbox input[type="checkbox"] + span::before{
  border: 1px solid #ccd2db;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0;
    content: "";
}
label.checkbox input[type="checkbox"] + span {
  padding-left: 30px;
    cursor: pointer;
    font-size: 14px;
    color: #4d6474;
    line-height: 1.5;
}
label.checkbox input[type="checkbox"]:checked + span::before {
    border-color: #000;
    background: #000;
}
label.checkbox input[type="checkbox"]:checked + span::after {
    content: "";
    background: url(https://projects.theglobalwebdev.com/trantham/wp-content/uploads/2026/05/checkbox-check.svg) no-repeat 0 0;
    position: absolute;
    width: 11px;
    height: 9px;
    top: 6px;
    left: 5px;
}
.login-signup-wrap .u-column1{
  width: 100%;
}
 .woocommerce .woocommerce-form-login .woocommerce-form-login__submit{
  display: block;
  width: auto;

 }
/* =========================================================
    thank you page  css
========================================================= */
.woocommerce div.product .woocommerce-tabs ol{
  margin-bottom: 0px;
}
.woocommerce div.product .woocommerce-tabs .panel{
    margin-bottom: 0;
}
.woocommerce ul.products li.product h3{
  padding-bottom: 0;
}
.gallery-wrapper .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--anchor svg.yith-wcwl-icon-svg{
  width: 26px;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message:focus-visible {
  outline: none !important;
}
.woocommerce .page-hero  .woocommerce-breadcrumb{
  margin-top: 0px;
  margin-bottom: 7px;
}
.woocommerce .wishlist_table ul.products{
  gap: 24px;
  margin-bottom: 0px;
}
.woocommerce-wishlist.woocommerce-page .entry-content{
  padding-bottom: 0px;
}
.woocommerce .wishlist_table ul.products li.product .button{
  margin-bottom: 0 !important;
}
.woocommerce-wishlist.woocommerce-page .footer{
  margin-top: 60px;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
  font-size: 18px;
}
.search-no-results .footer{
  margin-top: 40px;
}
 .woocommerce-info::before {
    color: var(--color-black);
  }
  .woocommerce-info {
    border-top-color: var(--color-black);
  }
 .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{
    display: inline-block;
    width: 100%;
 }
 .woocommerce-account.woocommerce-page .entry-content{
  padding-bottom: 0;
 }
 .shop_table.cart thead th.product-quantity{
  text-align: center;
 }
 .shop_table.cart thead td.product-quantity{
  text-align: center;
 }
  .shop_table.cart  .quantity{
    margin: auto;
 }
  .checkout_coupon button.button{
  min-height: 40px;
      min-width: 121px;
 }
 .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 500;
 }
.form-row .woocommerce-terms-and-conditions-wrapper label.checkbox input[type="checkbox"] + span{
  font-weight: 400;
 }
 .woocommerce form .form-row .required,.woocommerce form .form-row.woocommerce-invalid label,p.p-FieldError.Error{
  color:#EA2B0F !important;
 }
 .woocommerce ul.order_details li strong{
  word-break: break-all;
 }
 .woocommerce .woocommerce-order-details table.shop_table.order_details td.product-total{
  border-bottom: none;
 }
 .checkout-main-container .woocommerce-account-fields{
  margin-top: 30px;
 }
 .woocommerce-checkout .checkout .checkout-inline-error-message{
  line-height: 1.4;
  display: block;
  margin-top: 5px !important;
 }
.gallery-wrapper .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single.yith-wcwl-add-to-wishlist-button--anchor{
  margin: 10px 0;
}
.woocommerce div.product .woocommerce-tabs .panel p a,.woocommerce div.product .woocommerce-tabs .panel a{
    color:#000;
    text-decoration: underline;
  }
.woocommerce-product-details__short-description a{
  color:#000;
  text-decoration: underline;
}
.woocommerce table.woocommerce-MyAccount-orders.shop_table{
  margin-bottom: 0px;
}
.cart-container .shop_table.cart .product-price-title{
  font-size: 16px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot .cart-subtotal td{
  border-top:none !important;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td{
  text-align: right;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.payment-method-card td{
  text-align: left;
}
.woocommerce .woocommerce-order .woocommerce-order-details table.shop_table.order_details td.product-total{
  border-bottom: 1px solid #d7deea;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions{
  display: none !important;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 1025px) {
  .btn-on:hover,
  .prestige-card .btn-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
  }
  .search-btn:hover {
    opacity: 0.6;
  }
  .hero-arrow:hover {
    background: var(--color-black);
  }
  .header-actions a:hover {
    background: var(--color-white);
    color: var(--color-black);
  }
  .nav-list a:hover {
    opacity: 0.8;
  }
  .arrow-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
  }
  .category-card {
    display: block;
    overflow: hidden;
  }
  .category-img-wrap {
    overflow: hidden;
    height: 210px;
  }
  .category-img {
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
  }
  .newsletter-form .input-wrap input[type="submit"]:hover {
    background: var(--color-white);
    color: var(--color-black);
  }
  .category-card:hover .category-img {
    transform: scale(1.1);
  }
  .footer-socials a:hover,
  .socials a:hover {
    transform: translateY(-2px);
  }
  .footer-col ul li a:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .product-title:hover {
    color: rgba(0, 0, 0, 0.6);
  }
  
  .woocommerce div.product .woocommerce-tabs .panel p a:hover,.woocommerce div.product .woocommerce-tabs .panel a:hover{
    text-decoration: none;
  }
  .woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover,
  .woocommerce .woocommerce-form-register__submit:hover,
  .btn-off:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover {
    background: transparent !important;
    color: #000 !important;
  }
  .reguster-link a:hover {
    text-decoration: none;
  }
  .woocommerce-LostPassword a:hover,.woocommerce-product-details__short-description a:hover {
    color: #000;
    text-decoration: none;
  }
  .woocommerce ul.products li.product .button:hover {
    background: var(--color-black);
    color: var(--color-white);
  }
  .page-hero .breadcrumb:hover {
    color: #000;
  }
  .woocommerce ul.products li.product a.added_to_cart {
    text-decoration: none;
  }
  .woocommerce .woocommerce-info .button:hover,
  :where(body:not(.woocommerce-block-theme-has-button-styles)):where(
      :not(.edit-post-visual-editor)
    )
    .woocommerce
    a.button:hover,
  .woocommerce .button:hover,
  :where(body:not(.woocommerce-block-theme-has-button-styles)):where(
      :not(.edit-post-visual-editor)
    )
    .woocommerce
    button.button:hover {
    background: transparent;
    color: var(--color-black);
  }
  
  .woocommerce-account .addresses .title .edit:hover {
    text-decoration: underline;
  }
  .woocommerce:where(body:not(.woocommerce-uses-block-theme))
    .woocommerce-breadcrumb
    a:hover {
    color: var(--color-black);
  }
}
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-grid > :nth-child(1) {
    grid-column: 1 / -1;
  }

  .footer {
    padding-left: 32px;
    padding-right: 32px;
  }
  .nav-list {
    gap: 10px;
  }
  .nav-list li {
    gap: 10px;
  }
}

/* TABLET & MOBILE — single 2-row header layout */
@media (max-width: 820px) {
  :root {
    --section-gap: 56px;
  }

  /* Hide top utility bar + nav (Figma mobile design) */
  .topbar {
    display: none;
  }

  .nav {
    display: none;
  }

  /* Show mobile-only chrome, hide desktop-only */
  .mobile-only {
    display: flex;
  }

  .desktop-only {
    display: none !important;
  }

  /* ------- Header: 2 rows ------- */
  .header {
    height: auto;
    border-top: none;
    padding: 8px 0px 0;
  }

  .header-inner {
    height: auto;
    padding: 0;
    gap: 0 10px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Logo on the left of row 1 */
  .header .logo {
    width: 52px;
    height: 52px;
    border-width: 1.05px;
    margin-right: auto;
    margin-left: 15px;
    margin-bottom: 8px;
  }

  .header .logo svg {
    width: 30px;
    height: 30px;
  }

  /* Mobile search icon button sits next to wishlist/cart */
  .header .search-btn-mobile {
    order: 1;
    align-self: center;
  }

  .header-actions {
    order: 2;
    gap: 10px;
    margin-left: 0;
    align-self: center;
    margin-right: 15px;
  }

  /* Force second row + white divider line that spans full header width */
  .header-row-break {
    flex-basis: 100%;
    width: 100%;
    margin: 0px 0px 0px;
    height: 1px;
    background: var(--color-white);
    display: block;
    order: 3;
  }

  /* Row-2 icons match figma: square boxes with full white border on all 4 sides,
     flush against the divider lines */
  .header .profile-mobile,
  .header .menu-toggle {
    border: 1px solid var(--color-white);
    width: 36px;
    height: 36px;
    margin: 0;
    background: var(--color-black);
    border-top: none;
    border-bottom: none;
  }

  /* Row 2: profile icon on left, hamburger on right */
  .header .profile-mobile {
    order: 4;
  }

  .header .menu-toggle {
    order: 5;
    margin-left: auto;
  }

  /* Icon button sizing */
  .icon-btn {
    width: 36px;
    height: 36px;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

  .menu-toggle svg {
    width: 18px;
    height: 18px;
  }

  .badge {
    width: 16px;
    height: 16px;
    font-size: 10px;
    top: 2px;
    right: 0;
  }

  /* ------- Hero ------- */
  .hero {
    height: auto;
    /*min-height: 520px;*/
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(8, 25, 33, 0) 0%, #081921 90.32%);
  }

  .hero-inner {
    padding: 60px 15px;
    align-items: center;
    justify-content: center;
    padding-top: 209px;
  }

  .hero-content {
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-sub {
    font-size: 16px;
  }

  .hero .btn {
    margin: 0 auto;
  }

  /* ------- Section header centered ------- */
  .section-head {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }

  .section-head .arrow-group {
    order: 2;
  }
  .hero-arrow {
    display: none;
  }
  /* ------- Grids ------- */
  .category-grid {
    gap: 16px;
  }

  .category-card {
    flex: 0 0 158px;
  }

  /* .product-card {
    flex: 0 0 240px;
  } */

  .how-grid {
    grid-template-columns: 1fr;
  }

  .promo-grid {
    grid-template-columns: 1fr;
  }

  .arrivals {
    height: auto;
    padding: 56px 24px 0px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .arrivals-left,
  .arrivals-right {
    display: none;
  }
  .arrivals-right {
    display: block;
    position: relative;
    right: 0;
  }
  .arrivals-title {
    font-size: 32px;
  }

  .arrivals-sub {
    font-size: 16px;
  }

  .newsletter h2 {
    font-size: 32px;
  }

  .newsletter p {
    font-size: 16px;
  }

  .footer {
    padding: 40px 15px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-grid > :nth-child(1) {
    grid-column: 1 / -1;
  }
  .btn {
    padding: 0 32px;
  }
  .desktop-hide {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .mobile-hide {
    display: none;
  }
  .header .profile-mobile {
    margin-left: 15px;
  }
  .header .menu-toggle {
    margin-right: 15px;
  }
  .site-main {
    padding-top: 107px;
  }
  .woocommerce-archive-page {
    gap: 15px;
  }
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 50%;
    margin-bottom: 10px;
  }
  .woocommerce .woocommerce-result-count {
    margin-bottom: 20px;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    padding: 0;
  }
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    margin: 0;
  }
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .arrivals-bg {
    background-image: none !important;
  }
  .how-card {
    height: auto;
  }
  .about-main-section {
    padding-top: 80px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 40px;
  }
  .woocommerce .col2-set .col-1 {
    margin-bottom: 30px;
  }
  .woocommerce .woocommerce-order .col2-set .col-1 {
    margin-bottom: 0px;
  }
  .woocommerce div.product div.summary {
    float: none;
    width: 100%;
  }
  .product .woo-variation-product-gallery {
    max-width: 100% !important;
  }
  .woocommerce div.product .woocommerce-tabs .panel {
    margin-bottom: 0px;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 16px;
    min-width: inherit;
    border-width: 3px;
    padding-bottom: 15px;
  }
  .related.products {
    padding-top: 40px;
  }
  .gallery-wrapper {
    flex-wrap: wrap;
  }
  .gallery-image-wrapper {
    max-width: 100%;
  }
  .woo-variation-product-gallery {
    margin-bottom: 0px;
  }
  .woocommerce div.product div.summary {
    margin-bottom: 0;
  }
  .woocommerce-checkout .checkout-main-container{
    flex-wrap: wrap;
  }
  .woocommerce-checkout .col2-set{
    width: 100%;
  }
  .woocommerce-checkout .custom-checkout-wrapper{
    width: 100%;
  }
  .woocommerce-checkout .woocommerce-checkout-payment{
    margin-top: 30px !important;
  }
  .cart-container .shop_table.cart .quantity{
    margin-left: auto !important;
    margin-right: 0 !important;
  }
   .cart-container  .shop_table.cart .product-subtotal{
    padding-right: 16px;
  }
  .cart-container .shop_table.cart .product-col .product-col-inner{
    justify-content: space-between;
  }
  .shop_table.cart tbody .cart_item td.product-price{
  padding-right: 0;
  padding-left: 0;
}
.shop_table.cart tbody .cart_item td.product-quantity{
  padding-right: 0;
  padding-left: 0;
}
.woocommerce-cart-form .shop_table.cart .product-subtotal{
  padding-right: 0;
  padding-left: 0;
}
}

/* PHONE — single column tweaks */
@media (max-width: 640px) {
  .category-card {
    flex: 0 0 166px;
  }

  /* .product-card {
    flex: 0 0 220px;
  } */

  .hero-title {
    font-size: 30px;
  }

  .arrivals-title {
    font-size: 26px;
  }

  .newsletter h2 {
    font-size: 38px;
  }

  .subscribe-form {
    flex-direction: column;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 12px;
  }

  .subscribe-form .input-wrap {
    height: 50px;
    background: var(--color-white);
    border: 1px solid rgb(215, 222, 234);
  }

  .subscribe-form button {
    width: 100%;
    height: 50px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .promo-img {
    display: none;
  }

  .section {
    padding-top: 80px;
  }
  .promo {
    padding: 18px;
    height: auto;
  }
  .promo-title {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .newsletter-form .input-wrap input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    position: relative;
  }
  .footer-col::after {
    width: 100%;
    height: 1px;
    top: auto;
    bottom: -20px;
    right: 0;
    left: 0;
  }
  .footer-logo {
    text-align: center;
  }
  .footer-logo img {
    margin: auto;
  }
  .footer-brand-text {
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  .footer-socials {
    justify-content: center;
  }
  .footer-col h4::after {
    display: none;
  }
  .footer-col ul li:last-child {
    margin-bottom: 0;
  }
  .footer-col ul li:last-child a {
    margin-bottom: 0;
  }
  .footer-bottom {
    flex-direction: row-reverse;
  }
  .footer-col {
    margin-top: 10px;
  }
  .woocommerce-archive-page .woocommerce-sidebar-wrapper {
    min-width: 100%;
  }
  .woocommerce-archive-page {
    gap: 40px;
  }
  .woocommerce nav.woocommerce-pagination ul li span,
  .woocommerce nav.woocommerce-pagination ul li a {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  .woocommerce nav.woocommerce-pagination ul li a.next,
  .woocommerce nav.woocommerce-pagination ul li a.prev {
    background-size: 8px;
  }
  .woocommerce-breadcrumb {
    margin-bottom: 20px;
  }
  /* .footer{
    margin-top: 0px;
  } */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last {
    width: 100%;
  }
  .product .gallery-image-wrapper .wvg-gallery-image {
    height: 300px;
    min-height: inherit;
  }
  .woo-variation-gallery-wrapper {
    min-height: inherit !important;
  }
  .product
    .woo-variation-gallery-thumbnail-position-bottom-bottom
    .woo-variation-gallery-container
    .woo-variation-gallery-thumbnail-slider.slick-initialized
    .slick-slide
    > div {
    margin: 0 4px;
  }
  .product .woo-variation-gallery-thumbnail-slider .wvg-thumbnail-next-arrow,
  .woo-variation-gallery-thumbnail-slider .wvg-thumbnail-prev-arrow {
    height: 32px !important;
    width: 32px !important;
  }
  .product .woo-variation-gallery-thumbnail-wrapper {
    padding: 10px;
  }
  .woocommerce div.product .woocommerce-tabs .panel {
    padding-bottom: 20px;
  }
  .error-404.not-found {
    max-width: 100%;
    padding: 0 15px;
  }
  .error-404 h1.page-title {
    font-size: 140px;
    margin-top: 60px;
  }
  .woocommerce ul.order_details {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .woocommerce ul.order_details li {
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .woocommerce-order .woocommerce-customer-details .woocommerce-columns {
    flex-wrap: wrap;
  }
  .woocommerce .woocommerce-order .woocommerce-column--billing-address {
    margin-right: 0px;
    width: 100%;
  }
  .woocommerce .woocommerce-order .woocommerce-column--shipping-address {
    margin-left: 0px;
    margin-top: 30px;
    width: 100%;
  }
  .woocommerce .woocommerce-order .woocommerce-customer-details {
    margin-bottom: 0px;
  }
  .footer {
    margin-top: 20px;
  }
  .woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses {
    margin: 0;
    flex-wrap: wrap;
  }
  .woocommerce
    .woocommerce-MyAccount-content
    .col2-set
    .woocommerce-column--billing-address.col-1,
  .woocommerce .woocommerce-MyAccount-content .col2-set .col-2 {
    margin: 0;
  }
  .woocommerce
    .woocommerce-MyAccount-content
    .col2-set
    .woocommerce-column--billing-address.col-1 {
    margin-bottom: 30px;
  }
  .woocommerce-page .u-columns.col2-set {
    flex-wrap: wrap;
    margin: 0;
  }
  .woocommerce .u-columns.col2-set .col-1 {
    margin: 0;
    margin-bottom: 30px;
  }
  .shop-top-bar {
    flex-wrap: wrap;
  }
  .gallery-wrapper{
    margin-bottom: 40px;
  }
  .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button{
    margin-top: 10px;
  }
  .single_add_to_cart_button.btn{
    font-size: 14px;
  }
  .woocommerce div.product form.cart div.quantity{
    margin-right: 10px;
  }
  .woocommerce-wishlist.woocommerce-page .footer{
    margin-top: 40px;
  }
  .search-no-results .woocommerce-error,.search-no-results .woocommerce-info,.search-no-results .woocommerce-message{
    margin-bottom: 0;
  }
  .woocommerce-account.woocommerce-page .footer{
    margin-top: 40px;
  }
  .single-product .footer{
    margin-top: 40px;
  }
  .woocommerce .cart_totals .cart-totals-container table.shop_table td{
    padding-left: 0;
  } 
  .woocommerce div.product form.cart .variations td.value{
  padding-left: 10px;
}
.cart-coupon button{
  min-width: inherit;
}
body .select2-container, body .ui-widget.ui-datepicker{
  z-index: 1 !important;
}

}
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Main popup */
.yith-wcwl-feedback-messages-container {
    width: 600px !important;
    max-width: 600px !important;
}

/* Actual message */
.yith-wcwl-add-to-wishlist__feedback {
    font-size: 18px !important;
    line-height: 1.6 !important;
    padding: 20px !important;
    min-width: 500px !important;
}

/* Success message */
.yith-wcwl-add-to-wishlist__feedback--success {
    font-size: 18px !important;
}

/* Error message */
.yith-wcwl-add-to-wishlist__feedback--error {
    font-size: 18px !important;
}

/* Mobile */
@media (max-width: 767px) {

    .yith-wcwl-feedback-messages-container {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
    }
    .yith-wcwl-add-to-wishlist__feedback {
      font-size: 16px !important;
    }
    /* Success message */
    .yith-wcwl-add-to-wishlist__feedback--success {
        font-size: 16px !important;
    }

    /* Error message */
    .yith-wcwl-add-to-wishlist__feedback--error {
        font-size: 16px !important;
    }
  .single-product.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb svg{
    margin: 0 6px;  
    
  }
  .single-product.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a{
    line-height: 1.5;
  }
  .woocommerce .woocommerce-breadcrumb{
    gap: 0;
    flex-wrap: wrap;
  }
  .single-product.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb{
    margin-left: 0;
  }
  .hero{
    min-height: auto;
  }
  }