:root {
    /* Colors */
    --brand-red: #E8332A;
    --brand-blue: #6FB6D9;
    --btn-blue: #469BC2;
    --btn-blue-hover: #5C93AF;
    --link-blue: #00AFFF;
    --link-blue2: #469BC2;

    --text-dark: #303233;
    --text-black: #000000;
    --text-muted: #6B7280;
    --text-input: #1C1917;
    --placeholder: #9CA3AF;
    --lable: #57534D;

    --border: #D8DCE1;
    --border-light: #00000040;
    --border-divi: #00000033;

    --bg: #FFFFFF;

    /* Radius */
    --radius: 4px;

    /* Transition */
    --transition: all .3s ease;
}

/* ===========================
   Reset
=========================== */

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

html {
    font-size: 1rem;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--text-dark);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===========================
   Typography
=========================== */

h1,
.h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 4.5rem;
    letter-spacing: .05px;
    margin: 0 0 1rem;
}

h2,
.h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3rem;
    letter-spacing: 1px;
    margin: 0 0 1rem;
}

h3,
.h3 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.75rem;
    margin: 0 0 1rem;
}

h4,
.h4 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.625rem;
    margin: 0 0 1rem;
    color: var(--text-dark);
}

h5,
.h5 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    margin: 0 0 .75rem;
    color: var(--text-dark);
}

h6,
.h6 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: .5px;
    margin: 0 0 .75rem;
}

p {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
}

small {
    font-size: .875rem;
}

/* ===========================
   Links
=========================== */

a {
    color: var(--link-blue);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    text-decoration:none;
    color: #469bc2 !important;
}
a:focus, a:active {
    outline: none;
    border: none;
}
.nav-menu a:hover{
   color: #469bc2; 
}

/* ===========================
   Lists
=========================== */

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: .5rem;
}

/* ===========================
   Utilities
=========================== */

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

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

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

.product-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    /* margin-top: 0px;
    padding: 59px 15px; */
    margin-top: 50px;
}

.pagination-summary ,.items-per-page span {
    margin: 0;
    color: #00113A;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    font-weight: 500;
}

.pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination-pages  li{
    margin-bottom: 0px;
}
.pagination-button,
.pagination-ellipsis {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #00113A66;
    font-family: Plus Jakarta Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    vertical-align: middle;
    box-shadow: 0px 0px 4px 0px #0000001A;
    padding: 5px; 
    background-color: transparent;
    border: none;
}

.pagination-button { cursor: pointer; }

.pagination-button:hover:not(:disabled) {
    border-color: #b9d8e7;
    color: #fff;
    background: #469bc2;
}

.pagination-button.is-active {
    border-color: var(--btn-blue);
    background: var(--btn-blue);
    color: #fff !important;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
}

.pagination-button:disabled {
    color: #c7cbd1;
    cursor: not-allowed;
}

/* The "…" ellipsis paginate_links() renders between distant page numbers
   (woocommerce/archive-product.php) -- a plain <span>, not clickable, so it
   shouldn't invite a click the way every other .pagination-button does. */
.pagination-button.dots {
    cursor: default;
}

.select-wrapper{
    position: relative;
}

.select-wrapper::after{
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 14px;
    margin-top: 18px;

}

.select-wrapper select{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 72px;
    height: 40px;
    padding: 0 10px 0 10px;
    border: none;
    border-radius: 6px;
    background-color: #fff;
    color: #45454AE5;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 4px 0px #0000001A;
}
.items-per-page {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
}

nav.breadcrumbs{
    padding-top: 27px;
    padding-bottom:29px;
}
nav.breadcrumbs a {
    font-size: 13px;
    font-weight: 500;
    color: #a8a8aa;
}
nav.breadcrumbs span {
    font-size: 13px;
    font-weight: 500;
    color: #a8a8aa;
}
 nav.breadcrumbs i{
    font-size: 10px;
    color: #a8a8aa;
    margin-left: 10px;
    margin-right: 5px;
}
 nav.breadcrumbs .current-page {
    color: #16161DE5 !important;
}

/* Cart/Checkout's own title strip (template-parts/content-page.php) -- a
   breadcrumb + <h1>, no hero image/description (those pages don't have
   one), just enough to stop them opening with no heading at all. */
.page-title-bar {
    border-bottom: 1px solid var(--border-divi);
}

.page-title-bar nav.breadcrumbs {
    padding-bottom: 8px;
}

.page-title-bar .page-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
}

/* =========================================================
   HEADER
========================================================= */

.header {
    position: relative;
    z-index: 1000;
    background: #06153f;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 15px 0;
    border-bottom: 1px solid #00000014;
}

.logo img {
    display: block;
    width: 90px;
}


/* =========================================================
   SEARCH
========================================================= */

.search-box {
    position: relative;
    flex: 1;
}

.search-box input {
    width: 100%;
    height: 45px;
    padding: 0 55px 0 20px;
    border: 0;
    border-radius: 50px;
    outline: none;
    background: #f9f9f9;
    color: #00000080;
    font-size: 0.875rem;
}

.search-box input:focus {
    box-shadow: 0 1px 11px 1px #00000057;
}

.search-box button {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #469bc2;
    color: #fff;
    cursor: pointer;
}


/* =========================================================
   HEADER RIGHT ICONS
========================================================= */

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

.header-right .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-right .icon img {
    display: block;
    filter: invert(1) brightness(100);
}

.header-right .icon span {
    position: absolute;
    top: -5px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d02229;
    color: #fff;
    font-size: 0.625rem;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.notification-dropdown {
    position: relative;
    display: inline-block;
}

.notification-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.notification-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

.notification-toggle span {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50px;
    background: #e8332a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

/* Dropdown */
.notification-menu {
    position: absolute;
    top: calc(100% + 12px); /* slightly lowered for smooth slide-down */
    right: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;

    /* Plain display:none default -- NOT the opacity/visibility system below
       (kept for the moment, but dead: nothing ever toggles a `.active` class
       onto `.notification-dropdown`, see header.js). assets/js/header.js
       shows/hides this panel via jQuery's .fadeToggle(), which only ever
       manipulates the `display` property -- with visibility:hidden as the
       actual default (as this rule had before), the panel stayed invisible
       forever regardless of `display`, since fadeToggle() never touches
       `visibility`. Matches .wishlist-menu's own (correct, working) default
       for the exact same reason. */
    display: none;
}

/* Arrow */
.notification-toggle::before,
.notification-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* 1. Caret Border (Outer) */
.notification-toggle::before {
  bottom: -13px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e2e8f0;
  z-index: 101;
  transform: translateX(-50%) translateY(-6px);
}

/* 2. Caret Fill (Inner) */
.notification-toggle::after {
  bottom: -14px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffffff;
  z-index: 102;
  transform: translateX(-50%) translateY(-6px);
}

/* -------------------------------------------
   Active / Open State (Synced opening & closing)
   ------------------------------------------- */
.notification-dropdown.active .notification-menu,
.notification-dropdown.active .notification-toggle::before,
.notification-dropdown.active .notification-toggle::after {
  opacity: 1;
  visibility: visible;
}

.notification-dropdown.active .notification-menu {
  transform: translateY(0);
}

.notification-dropdown.active .notification-toggle::before,
.notification-dropdown.active .notification-toggle::after {
  transform: translateX(-50%) translateY(0);
}

/* Header Messages icon -- deliberately its own separate .messages-*
   classes, NOT reusing .notification-dropdown/.notification-toggle/
   .notification-menu on the icon/wrapper (only the shared CONTENT classes
   -- .notification-header/.notification-item/.notification-icon/
   .notification-content -- carry over, for a consistent look). Sharing the
   dropdown/toggle/menu classes themselves would make header.js's
   delegated-selector toggle system (assets/js/header.js's own
   `zurglePanels` array) treat a click on either icon as a click on BOTH,
   since it re-resolves each panel's selector against the whole DOM at
   click time. This block is a straight mirror of .notification-dropdown's
   own positioning/badge/caret/active-state rules above. */
.messages-dropdown {
    position: relative;
    display: inline-block;
}

.messages-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.messages-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

.messages-toggle span {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50px;
    background: #e8332a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

.messages-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

.messages-toggle::before,
.messages-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.messages-toggle::before {
  bottom: -13px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e2e8f0;
  z-index: 101;
  transform: translateX(-50%) translateY(-6px);
}

.messages-toggle::after {
  bottom: -14px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffffff;
  z-index: 102;
  transform: translateX(-50%) translateY(-6px);
}

.messages-dropdown.active .messages-menu,
.messages-dropdown.active .messages-toggle::before,
.messages-dropdown.active .messages-toggle::after {
  opacity: 1;
  visibility: visible;
}

.messages-dropdown.active .messages-menu {
  transform: translateY(0);
}

.messages-dropdown.active .messages-toggle::before,
.messages-dropdown.active .messages-toggle::after {
  transform: translateX(-50%) translateY(0);
}

/* Header */
.notification-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.notification-header h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.notification-header a {
    font-size: 11px;
    color: #469bc2;
    text-decoration: none;
}

/* Notification item */
.notification-item {
    display: flex;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s ease;
}

.notification-item:hover {
    background: #f8fafb;
}

.notification-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef7fb;
    color: #469bc2;
    font-size: 13px;
}

.notification-content {
    min-width: 0;
}

.notification-content p {
    margin: 0 0 4px;
    color: #282c3f;
    font-size: 14px;
    line-height: 1.4;
}

.notification-content small {
    color: #282c3f;
    font-size: 12px;
}

/* Footer */
.notification-footer {
    padding: 12px 15px;
    text-align: center;
}

.notification-footer a {
    color: #469bc2;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

/* Unread state -- notification bell dropdown + My Account > Notifications tab share this class */
.notification-item.is-unread {
    background: #f0f8fc;
}

.notification-item.is-unread .notification-content p {
    font-weight: 600;
}

.notification-item.is-unread .notification-icon {
    background: #469bc2;
    color: #fff;
}

.notification-content a.notification-link {
    color: inherit;
    text-decoration: none;
}

/* My Account > Notifications tab -- full list, same .notification-item/.notification-icon/
   .notification-content styling as the header dropdown, just in a bordered card instead of
   an absolutely-positioned panel. */
.notification-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.notification-list .notification-item {
    padding: 15px;
}

.zurgle-store-announcement-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark, #303233);
    margin: 0 0 16px;
}

/* My Account > Store Announcements tab -- list->detail AJAX swap
   (assets/js/store-announcements.js). Each row is clickable; the base
   .notification-item background transition above already covers the hover
   color change, this just adds the pointer affordance and a themed left
   accent to make "clickable" obvious at a glance. */
.zurgle-store-announcement-list .notification-item {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-left-color 0.2s ease;
}

.zurgle-store-announcement-list .notification-item:hover,
.zurgle-store-announcement-list .notification-item:focus-visible {
    border-left-color: var(--btn-blue);
}

.zurgle-store-announcement-list .notification-item:focus-visible {
    outline: none;
}

.zurgle-store-announcement-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.zurgle-store-announcement-detail-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark, #303233);
    margin: 0;
}

.zurgle-store-announcement-back {
    background: transparent;
    border: 1px solid var(--btn-blue);
    color: var(--btn-blue);
    border-radius: var(--radius, 4px);
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.zurgle-store-announcement-back:hover {
    background: var(--btn-blue);
    color: #fff;
}

.zurgle-store-announcement-detail-meta {
    color: #646970;
    font-size: 12px;
    margin-bottom: 14px;
}

.zurgle-store-announcement-detail-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark, #303233);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
}

/* My Account > Messages tab (assets/js/messages.js) -- same list->detail AJAX
   swap shape as Store Announcements above, reusing its heading/back-button/
   hover-accent rules via the shared .notification-item base; only the
   snippet line and the conversation-history bubbles below are unique to this
   tab. */
.zurgle-message-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark, #303233);
    margin: 0 0 16px;
}

.zurgle-message-list .notification-item {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-left-color 0.2s ease;
}

.zurgle-message-list .notification-item:hover,
.zurgle-message-list .notification-item:focus-visible {
    border-left-color: var(--btn-blue);
}

.zurgle-message-list .notification-item:focus-visible {
    outline: none;
}

.zurgle-message-snippet {
    font-size: 13px;
    color: #646970;
    margin: 2px 0;
}

.zurgle-message-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}

.zurgle-message-detail-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark, #303233);
    margin: 0;
}

.zurgle-message-back {
    background: transparent;
    border: 1px solid var(--btn-blue);
    color: var(--btn-blue);
    border-radius: var(--radius, 4px);
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.zurgle-message-back:hover {
    background: var(--btn-blue);
    color: #fff;
}

.zurgle-message-detail-meta {
    color: #646970;
    font-size: 12px;
    margin-bottom: 14px;
}

.zurgle-message-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zurgle-message-bubble {
    max-width: 80%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 15px;
}

/* The buyer's own messages align right (their side of the conversation);
   seller/admin replies align left -- a plain, familiar chat-thread layout. */
.zurgle-message-bubble--buyer {
    align-self: flex-end;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.zurgle-message-bubble--seller,
.zurgle-message-bubble--admin {
    align-self: flex-start;
}

.zurgle-message-bubble-meta {
    font-size: 12px;
    color: #646970;
    margin-bottom: 6px;
}

.zurgle-message-bubble-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark, #303233);
}

.zurgle-message-bubble-body p:last-child {
    margin-bottom: 0;
}

i.fa-solid.fa-star {
    color: #e9a207;
}
/* Mobile */


.cart-dropdown {
    position: relative;
    display: inline-block;
}

.cart-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cart-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

.cart-toggle span {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50px;
    background: #e8332a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

/* Cart Dropdown */
.cart-menu {
    position: absolute;
    top: calc(100% + 12px); /* slightly lowered for smooth slide-down */
    right: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;

    /* Plain display:none default -- same fix as .notification-menu right
       above, for the identical reason: header.js's .cart-toggle handler
       shows/hides this panel via jQuery's .fadeToggle(), which only ever
       manipulates `display`. The opacity/visibility system this replaced
       relied on a `.active` class nothing ever added to `.cart-dropdown`,
       so `visibility: hidden` never actually cleared and the cart dropdown
       stayed invisible regardless of `display`. */
    display: none;
  }

/* Caret Shared Rules */
.cart-toggle::before,
.cart-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* 1. Caret Border (Outer) */
.cart-toggle::before {
  bottom: -13px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e2e8f0;
  z-index: 101;
  transform: translateX(-50%) translateY(-6px);
}

/* 2. Caret Fill (Inner) */
.cart-toggle::after {
  bottom: -14px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffffff;
  z-index: 102;
  transform: translateX(-50%) translateY(-6px);
}

/* -------------------------------------------
   Active / Open State (Synced opening & closing)
   ------------------------------------------- */
.cart-dropdown.active .cart-menu,
.cart-dropdown.active .cart-toggle::before,
.cart-dropdown.active .cart-toggle::after {
  opacity: 1;
  visibility: visible;
}

.cart-dropdown.active .cart-menu {
  transform: translateY(0);
}

.cart-dropdown.active .cart-toggle::before,
.cart-dropdown.active .cart-toggle::after {
  transform: translateX(-50%) translateY(0);
}


/* Header */
.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.cart-header h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.cart-header span {
    font-size: 12px;
    color: #333;
}

/* Cart Item -- one row: thumb (fixed, small) / title+qty (flexible, title
   truncated to however much width is actually left -- text-overflow:ellipsis
   adapts to the real available space instead of a fixed character count) /
   price (own fixed-width column, pinned right, never wraps). Shared by both
   the Cart dropdown and the Wishlist dropdown (see .wishlist-menu's own
   docblock above) -- a wishlist row has no .cart-item-content span (no
   quantity to show), everything else is identical. */
.cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f1f1;
}

/* .cart-item-thumb wraps the actual <img> WooCommerce's get_image() outputs
   -- a plain <span> for the Cart dropdown (no link needed, "View Cart"
   already covers that), an <a> for the Wishlist dropdown (each row IS the
   only link straight to that product). Targeting the descendant `img`
   (not `.cart-item > img`, which the Wishlist markup's <a> wrapper broke
   entirely -- that image rendered at WordPress's own native thumbnail
   size, unstyled, which is what actually made it look "so big") keeps one
   rule working for both cases. */
.cart-item-thumb,
.cart-item-thumb img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.cart-item-thumb {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f7f7;
}

.cart-item-thumb img {
    -o-object-fit: cover;
       object-fit: cover;
}

.cart-item-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.cart-item-content h6 {
    overflow: hidden;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #282c3f;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cart-item-content h6 a {
    color: inherit;
    text-decoration: none;
}

.cart-item-content span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Its own fixed-width column at the end of the row -- never wraps onto a
   second line regardless of how long the title/currency text is, and never
   gets squeezed by a long title either (.cart-item-content above is the
   only flexible column). Sale-price markup (a WooCommerce product's own
   get_price_html(), when on sale) renders its real <del>/<ins> strikethrough
   here exactly as WooCommerce does everywhere else on this site. */
.cart-item-price {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--btn-blue);
    text-align: right;
    white-space: nowrap;
}

.cart-item-price del {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 1;
}

.remove-cart-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding-left: 8px;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.remove-cart-item:hover {
    color: #e8332a;
}

/* Full-drawer loading overlay while a remove-from-cart AJAX request is in
   flight (assets/js/cart-remove-overlay.js) -- covers the entire .cart-menu
   panel (`.cart-menu` already has position:absolute, so it's a valid
   containing block for this inset:0 child), not just the row being removed,
   so every OTHER remove button underneath is genuinely unclickable for that
   moment too (a plain opaque-enough layer on top already blocks click-
   through on its own -- no need to separately disable each button). Hidden
   by default; the JS only ever toggles the `.is-visible` class. */
.cart-menu-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.cart-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.cart-menu-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--btn-blue);
    border-radius: 50%;
    animation: cart-menu-spin 0.7s linear infinite;
}

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

/* Caps the visible item list to roughly 4 rows (44px thumb + 12px top/bottom
   padding each ~= 68px/row) before it scrolls internally, instead of the
   whole drawer growing taller the more items are in the cart. .cart-footer
   below is a normal sibling AFTER this box, not inside it -- so it's never
   part of what scrolls, and always stays visible right under the list
   (functionally "sticky" for this layout, without needing real
   position:sticky -- there's nothing taller than the drawer itself for it to
   stick within). */
.cart-items-scroll {
    max-height: 280px;
    overflow-y: auto;
}

/* Footer */
.cart-footer {
    padding: 15px;
    border-top: 1px solid #f1f1f1;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-total span {
    font-size: 13px;
    color: #555;
}

.cart-total strong {
    font-size: 18px;
    color: #222;
}

/* Side by side (was stacked, full-width, one above the other) -- each
   button shares the row equally via flex: 1. */
.cart-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-cart-btn,
.checkout-btn {
    display: block;
    flex: 1;
    padding: 9px 15px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0px !important;
    border: 1px solid var(--btn-blue);
    transition: var(--transition);
}

.view-cart-btn {
    background: transparent;
    color: #469bc2;
}

/* Hover inverts each button's own scheme -- outline fills solid, solid
   empties to outline -- rather than one flat hover treatment for both.
   Every property forced !important, background included -- the sitewide
   `a:hover { color: var(--btn-blue) !important; }` rule (style.css line
   132) otherwise beats a same-tier declaration here on source order alone
   for whichever property it also happens to set, which on .checkout-btn
   specifically would leave its text forced back to --btn-blue on a
   background this rule ALSO turns blue-ish, instead of the white this
   button's hover is actually supposed to end up on. */
.view-cart-btn:hover {
    background: var(--btn-blue) !important;
    border-color: var(--btn-blue) !important;
    color: #fff !important;
}

.checkout-btn {
    background: #469bc2;
    color: #fff;
}

.checkout-btn:hover {
    background: #fff !important;
    border-color: var(--btn-blue) !important;
    color: var(--btn-blue) !important;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar-menu {
    background: #fff;
}

.navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 22px;
}

.header-inner-page .navbar-wrapper {
    border-bottom: 1px solid #00000014;
}


/* =========================================================
   CATEGORY DROPDOWN
========================================================= */

.category-dropdown {
    position: relative;
    flex-shrink: 0;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 45px;
    padding: 0 18px 0 0;
    border: 0;
    border-right: 1px solid #D9D9D9;
    background: transparent;
    color: #000000cc;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.category-btn .fa-chevron-down {
    margin-left: 4px;
    font-size: 8px;
    transition: transform 0.25s ease;
    color:#000000;

}

.category-dropdown {
    position: relative;
    display: inline-block;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    cursor: pointer;
}

.category-arrow {
    transition: transform 0.3s ease;
}

.category-btn.active .category-arrow {
    transform: rotate(180deg);
}

.category-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 220px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: none;
}


/* Category menu - CLOSED */

.category-menu {
    position: absolute;
    top: calc(100% + -1px);
    right: 20px;
    width: 175px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 9999;
    display: none;    
}


/* Category menu - OPEN */

.category-dropdown.active .category-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    display: block;
}


/* Chevron */

.category-dropdown.active .category-btn .fa-chevron-down {
    transform: rotate(180deg);
}


/* Category items */

.category-menu li {
    width: 100%;
    margin: 0;
}

.category-menu li a {
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #000000CC;
    text-decoration: none;
    font-size: 1rem;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
    font-weight: 500;    
}

.category-menu li a:hover {
    background: #f5f8fa;
    color: #469bc2;
}


/* =========================================================
   MAIN NAV MENU
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 40px;

    margin: 0;
    padding: 0 0 0 30px;

    list-style: none;
}

.nav-menu li {
    margin: 0;
}

.nav-menu li a {
    position: relative;
    display: block;
    color: #000000CC;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

.nav-menu li a::after {
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    content: "";
    background: #d02229;

    transition: width 0.3s ease;
}

.nav-menu li a:hover::after {
    width: 100%;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-box {
    position: relative;
    margin-left: auto;
}

.profile-toggle::before,
.profile-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
/* 1. Caret Border (Outer) */
.profile-toggle::before {
    bottom: -11px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e2e8f0;
    z-index: 101;
    transform: translateX(-50%) translateY(-6px);
  }
  
  /* 2. Caret Fill (Inner) */
  .profile-toggle::after {
    bottom: -11px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
    z-index: 102;
    transform: translateX(-50%) translateY(-6px);
  }
  
  /* -------------------------------------------
     Active / Open State (Synced opening & closing)
     -------------------------------------------
     `.profile-links` itself is NOT shown/hidden via this `.active` class --
     see header.css's own docblock on that selector: assets/js/header.js's
     shared zurglePanels toggle never actually adds `.active` to
     `.profile-toggle` (only notification/messages set `activeToggle: true`
     in that panel list; profile -- like cart/wishlist -- opens/closes purely
     via jQuery's fadeIn()/fadeOut() against a plain `display: none` default
     instead). This rule's own `.profile-links` half is therefore dead/
     unreachable; kept matched here only because the caret pseudo-elements
     right below (`::before`/`::after`) DO still need their own opacity/
     visibility toggled by SOME mechanism -- they have no fade/display
     equivalent of their own, so they still rely on this class. */
  .active.profile-toggle::before,
  .active.profile-toggle::after {
    opacity: 1;
    visibility: visible;
  }
  
  .active.profile-menu {
    transform: translateY(0);
  }
  
  .active.profile-toggle::before,
  .active.profile-toggle::after {
    transform: translateX(-80%) translateY(0);
  }
  

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0px;
    background: #fff;
    cursor: pointer;
}

.user-avatar {
    width: 45px;
    height: 45px;
    min-width: 45px;

    overflow: hidden;
    border-radius: 50%;
    background: #f5f5f5;
}
.user-info .user-details {
    display: flex;
    flex-direction: column;
    gap: 0px 10px;
}
.user-info div{
   display: flex;
   gap: 0px 8px;   
}
.user-info .user-details {
    display: flex;
    flex-direction: column;
}
.user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-info i{
    font-size: 8px;
    color: #000;
}
.user-details {
    min-width: 0;
}

.user-details h6 {
    margin: 0 0 3px;

    color: #282c3f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.user-details span {
    display: block;
    overflow: hidden;

    color: #696e79;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;

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


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.profile-links {
   position: absolute;
    top: calc(100% + -1px);
    right: 0px;
    width: 175px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 9999;
    display: none;
    
    /* top: calc(100% + 5px);
    right: 0;
    z-index: 9999;

    width: 240px;
    padding: 7px 0;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease; */
}

.profile-links a {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 11px 16px;

    color: #282c3f;
    background: transparent;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.profile-links a:hover {
    color: #469bc2;
    background: #f8f8f8;
}

.profile-links a i {
    width: 18px;
    min-width: 18px;

    color: #696e79;
    font-size: 14px;
    text-align: center;
}

.profile-links a:hover i {
    color: #469bc2;
}

.profile-links .logout {
    margin-top: 5px;
    padding-top: 13px;

    border-top: 1px solid #eee;
    color: #d02229;
}

.profile-links .logout i {
    color: #d02229;
}


.user-info img{
    width:40px;
    height:40px;
    border-radius:50%;
    border:2px solid #469BC2;
    padding:3px;
}
.header-top .profile-box{
    display: none;
}
/* =========================================================
   TABLET / MOBILE
========================================================= */
/* ===========================
   Layout
=========================== */

.page {
    display: flex;
    min-height: 100vh;
}

.hero-panel,
.form-panel {
    flex: 1;
}

.hero-panel {
    position: relative;
    overflow: hidden;
}

.hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-panel {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding: 9rem 1.5rem;
}

.form-panel.age-verification {
    padding: 10rem 1.5rem;
}


.form-wrap {
    width: 100%;
    max-width: 640px;
}
.form-wrap.welcome-form-wrap{
    max-width: 504px;
}
/* Two fields per row -- registration and reset-password forms only. Login
   and Forgot Password stay single-field-per-row (their fields don't pair up
   naturally the way Password/Confirm Password or the registration fields
   do). Shortens the right panel's overall content height (the underlying
   fix for the left/right panel height mismatch: less height difference means
   less of a mismatch to begin with, no JS/height tricks needed), and puts
   the wider .form-wrap above to use. */
#signupFormRest,
#resetPasswordForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}

/* .reg-section (the buyer/seller/company-specific field group) gets its OWN
   full-width row rather than sharing #signupFormRest's row with Email --
   sharing a row squeezed its own several fields into a single half-width
   column (assets/css/signup.css's own overflow:hidden/max-height rule for
   this element's show/hide animation also rules out flattening it into the
   parent grid via display:contents, which would disable that animation
   entirely). It keeps its own independent 2-column grid for its own fields. */
.reg-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    grid-column: 1 / -1;
}

/* Not currently used by any signup field (Email now pairs with Username in
   #signupFormRest's first row instead of taking it alone -- see
   signup-registration-form.php's own docblock) -- kept as a reusable utility
   for any future field that genuinely needs the whole grid row to itself. */
.field--full-width {
    grid-column: 1 / -1;
}

.consent,
.submit-btn,
.login-link {
    grid-column: 1 / -1;
}

/* ===========================
   Logo
=========================== */

.brand {
    text-align: center;
    margin-bottom:20px;
}
.form-wrap .brand img{
   width: 100%;
}
.form-wrap .brand {
    width: 161px;
    height: 113px;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.brand svg {
    width: 96px;
    height: 96px;
}
button.btn.seller-profile-msg-btn:hover {
    color: #fff !important;
    border-color: transparent !important;
}

/* ===========================
   Form
=========================== */

.title {
    text-align: center;
}

.subtitle {
    text-align: center;
    margin-bottom:28px;
}

.divider,
.form-divider {
    border: 0;
    border-top: 1px solid var(--border-divi);
    margin-top: 36.76px;
    margin-bottom: 21.15px;
}

.field {
    margin-bottom: 1rem;
}

.field label {
    display: block;
    margin-bottom:9.29px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--lable);
}

.required {
    color: var(--brand-red);
}

.input-wrap {
    position: relative;
}

.field input {
    width: 100%;
    padding: 10px 13px;
    border: 0.8px solid var(--border-light);
    border-radius:0px;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    font-style: normal;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    transition: var(--transition);
    height: 44px;
}

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

.field input:focus {
    border-color: var(--btn-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(111,168,196,.2);
}

.has-toggle input {
    padding-right: 2.75rem;
}

/* .toggle-visibility {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
} */
.input-wrap {
    position: relative;
}

.input-wrap input {
    width: 100%;
    padding-right: 45px;
}

.toggle-visibility {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: #8C8C8C;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-symbols-outlined {
    font-size: 1.375rem;
}

/* ===========================
   Checkbox
=========================== */

.consent {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #303233E5;
}
.consent a {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #303233E5;
    text-decoration: none;
}
.consent input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: var(--btn-blue);
}
.consent label {
    color: #303233E5;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
}

/* Welcome page's "check both boxes" gate (#welcomeConsentError, toggled by
   assets/js/welcome.js) -- a highlighted callout instead of plain text, so a
   visitor who clicks "I Agree" without checking every box actually notices
   why nothing happened. Defined here (not signup.css) since page-welcome.php
   never enqueues that stylesheet. */
#welcomeConsentError {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 18px 0 1rem;
    padding: 10px 14px;
    background: #fdecea;
    border: 1px solid #f3b6b2;
    border-radius: var(--radius);
    color: #7a2018;
    font-size: 0.8125rem;
    font-weight: 600;
}

#welcomeConsentError::before {
    content: "\26A0";
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
button.submit-btn {
    background: #469BC2;
    padding: 12px 20px;
    border: 0px;
    color: #fff;
    font-size: 16px;
    line-height: 19.5px;
    font-weight: 700;
    width: 100%;
    border-radius: 4px;
}

/* ===========================
   Button
=========================== */

.primary-btn {
    width: 100%;
    height:44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--btn-blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    line-height: 19.5px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--btn-blue);
}

.primary-btn:hover {
    background: var(--btn-blue-hover);
}

.primary-btn:focus-visible {
    outline: 2px solid var(--btn-blue-hover);
    outline-offset: 2px;
}
.btn-secondary {
    background-color: #FFFFFF;
    border-radius: var(--radius);
    color: #303233;
    border:1px solid #303233;
    font-weight: 700;
    font-size: 1rem;
    line-height: 19.5px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
}

.btn-secondary:hover {
    background-color: #F5F5F5;
    border-color: #C8CDD3;
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.btn-blank {
    background-color: transparent;
    border: 1px solid var(--btn-blue);
    border-radius: 0;
    color: var(--btn-blue);
    font-weight: 700;
    font-size: 1rem;
    line-height: 19.5px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
}
.btn-blank:hover {
    background-color: var(--btn-blue);
    color: #fff;
}

/* ===========================
   Login
=========================== */

/* Inline, single-row layout for however many links a form has (Login has 2,
   Registration has 3, Forgot Password/Reset Password have just 1 -- no
   divider needed then) -- no more leading prompt text ("Already have an
   account?" etc.), just the links themselves. Wraps gracefully with its own
   row-gap on narrow widths instead of overflowing. A thin vertical rule
   between items (drawn with a pseudo-element, not a literal "|" glyph)
   keeps consistent height/color regardless of font, rather than a character
   that sits at a different baseline in every typeface. */
.login-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
    row-gap: 0.5rem;
    font-size: .875rem;
    font-weight: 400;
    color: #303233BF;
}


.login-link > *:not(:first-child) {
    position: relative;
    margin-left: 1rem;
    padding-left: 1rem;
}

.login-link > *:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 0.9em;
    background: currentColor;
    opacity: 0.2;
}

.login-link a {
    font-weight: 600;
    color: var(--btn-blue);
    white-space: nowrap;
}

.login-link a:hover {
    text-decoration: underline;
}

.form-panel.age-verification h1{
    margin-bottom: 8px;
}
.form-panel.age-verification p {
    text-align: center;
    font-size: 0.875rem;
    max-width: 412px;
    margin: 0 auto;
    line-height: 20px;
    letter-spacing: 0px;
    color: #303233E5;
}
.form-panel.age-verification .divider, .form-panel.age-verification .form-divider {
    border: 0;
    border-top: 1px solid var(--border-divi);
    margin-top: 28.76px;
    margin-bottom: 37.15px;
}
.form-panel.age-verification .subtitle {
    text-transform: uppercase;
    margin-bottom: 8px;
}
.form-panel.age-verification .custom-check-list{
   padding-top: 38px;
}
.custom-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.7;
    color: #303233E5;
}

.custom-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background: url("../images/check-blue-icon.svg") no-repeat center;
    background-size: contain;
}
.form-panel.age-verification .notes{
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.7;
    color: #303233;
    text-align: left;
    margin: 0px;
}
.form-panel.age-verification .notes a{
    text-decoration: underline;
}
.form-panel.age-verification .consent{
    margin-bottom: 2px;
}
.form-panel.age-verification .btn-wrp {
  display: flex;
  gap: 10px;
  margin-top: 21px;
}
.form-panel.age-verification .btn {
    padding: 12px 30px;
    width: auto;
}
.form-panel.age-verification .form-divider-two {
    margin-top: 25px;
    margin-bottom: 26px;
}



/* =========================================
   MOBILE
========================================= */

/* slider css */
.hero-section{
    position:relative;
}

.hero-slide{
    position:relative;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    max-height: 648px;
}

.hero-content{
    position:absolute;
    top:50%;
    left:130px;
    transform:translateY(-50%);
    max-width:50%;
    color:#fff;
    z-index:2;
}

.hero-content p{
    max-width: 571px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 30px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-bottom: 22px;
    margin-top: 1px;
}

.hero-btn{
    display:inline-block;
    background:#fff;
    color:#16161D;
    text-decoration:none;
    padding:12px 30px;
    font-weight:700;
    transition:.3s;
    font-size: 1rem;
    line-height: 24px;
    border: 1px solid #FFFFFF66;
    margin-bottom: 77px;
}

.hero-btn:hover{
    background:#000;
    color:#fff;
}

.hero-section .swiper-pagination{
    text-align:left;
    left:130px;
    bottom:35px !important;
}

.hero-section .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:#fff;
    opacity:.5;
}

.hero-section .swiper-pagination-bullet-active{
    width:28px;
    border-radius:20px;
    opacity:1;
}
.hero-pagination{
    position:absolute;
    left:130px !important;
    bottom:70px !important;
    display:flex;
    align-items:center;
    gap:14px;
    width:auto !important;
}

.hero-pagination::before{
    content:"";
    width:72px;
    height:1px;
    background:#FFFFFF;
    margin-right:14px;
}

.hero-pagination .swiper-pagination-bullet{
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid #FFFFFF33;
    background:transparent;
    color:#fff;
    opacity:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 0.625rem;
    font-weight:500;
    transition:.3s;
    margin:0 !important;
}

.hero-pagination .swiper-pagination-bullet-active{
    width:50px;
    height:50px;
    background:rgba(255,255,255,.25);
    border:1px solid rgba(255,255,255,.25);
    font-size: 1.1875rem;
    font-weight:500;
}

/* Optional per-Page banner's own Slider mode (template-parts/page-banner.php,
   inc/class-zurgle-page-banner.php) -- same real .hero-section/.hero-slide/
   .hero-content/.hero-pagination markup + Swiper setup as the homepage hero
   slider above, just toned down to roughly this site's own
   `.inner-page-banner` height (product-listing.css -- Shop/category
   archives, ~128px vertical padding around a heading+paragraph, no fixed
   height) instead of the homepage's own full 648px. */
.is-inner-banner .hero-slide img{
    max-height: 400px;
}
.is-inner-banner .hero-content{
    top: 50%;
    left: 60px;
    max-width: 60%;
}
.is-inner-banner .hero-content h1{
    font-size: 2.5rem;
    line-height: 3rem;
}
.is-inner-banner .hero-content p{
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0;
}
.is-inner-banner .hero-pagination{
    left: 60px !important;
    bottom: 24px !important;
}
.is-inner-banner .swiper-pagination{
    left: 60px;
    bottom: 16px !important;
}

.popular-categories {
    background: #fff;
    padding: 90px 0px 101px;
}

.view-all{
    text-decoration:none;
    color:var(--link-blue2);
    font-weight:500;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
a.view-all:hover {
    color: #d02229 !important;
}

.category-card{
    background: #F9F9F9;
    border-radius: 10px;
    text-align: center;
    padding: 41px 15px 15px 24px;
    transition: .3s;
    height: 100%;
    display: flex;
    position: relative;
    height: 157px;
    margin-top: 50px;
}
.category-card:hover{
    background: #7acbf055;
}
.category-card::after{
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/after-img.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 108px;
    height: 90px;
}
.category-card:hover::after{
    background-color: #d02229;
    background-blend-mode: luminosity;
    border-radius: 85px 0 0px 0px;
}

.category-card:hover{
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.category-card img{
    height: 195px;
    width: auto;
    object-fit: contain;
    margin: 0px;
    display: block;
    position: relative;
    z-index: 999;
    top: -88px;
    right: 0px;
    transition: .5s ease;
}
.category-card:hover img{
    transform: scale(1.1);
}
.category-card h5{
    margin-bottom: 3px;
}

.category-card p{
    color:#30323380;
    font-size: 0.9375rem;
    margin-bottom:10px;
    font-weight: 500;
    text-align: left;
}

.category-card a{
    color:#046799;
    text-decoration:underline;
    font-size: 0.9375rem;
    font-weight:500;
    letter-spacing: 0.5px;
    text-align: left;
    display: block;
}
.category-card:hover a{
    color: #d02229;
}

.popular-categories .swiper-button-next:after,
.popular-categories .swiper-button-prev:after{
    font-size: 0.6875rem;
    font-weight:500;
    color: #00000066;
}
.popular-categories .swiper-button-prev ,.popular-categories .swiper-button-next {
    top: 70%;
    box-shadow: 2px 0px 8px 0px #00000014;
    width: 40px !important;
    height: 40px;
    border: 1px solid #00000014;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.popular-categories .swiper-button-prev{
   left: -20px;
}
.popular-categories .swiper-button-next{
   right: -20px;
}

.trending-auctions {
    background: linear-gradient(281.57deg, #00113A 6.07%, #002FA0 115.41%);
    padding: 90px 0 101px;
}

.trending-auctions .section-title {
    color: #fff;
    font-weight: 700;
}

.trending-auctions .view-all {
    color: #fff;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.auction-card {
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: .3s;
}
 .auction-card {
    box-shadow: 0px 0px 4px 0px #00000033;
}

.product-image-header {
    display: flex;
    position: absolute;
    width: 100%;
    top: 2px;
    left: 0px;
    justify-content: space-between;
    padding: 8px 10px;
    z-index: 1090;
}
.product-image-header .timer {
    background: #fff4f4;
    color: #ff4d4f;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 5;
    font-weight: 600;
    white-space: nowrap;
}
.product-image-header a.btn.buy-btn {
    font-size: 11px;
    color: #fff;
    background: #ff4d4f;
    border-radius: 25px;
    width: max-content;
    height: 27px;
    display: flex;
    align-items: center;
    padding: 2px 15px;
    margin-left: auto;
}
i.fa-solid.fa-heart {
    color: #d02229;
}
a.btn.view-btn {
    /* background: #1997D1; */
    color: #1997D1 !important;
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 5;
    font-weight: 600;
    height: 27px;
    display: flex;
    align-items: center;
    background:transparent;
    margin-left: auto;
}
a.btn.buy-btn {
    margin-left: auto;
    width: max-content;
    font-size: 11px;
    background: #1997d1;
    margin-bottom: 12px;
    color: #fff;
    padding: 2px 10px;
}
a.btn.view-btn:hover{
    background: transparent !important;
    color: #D02229;
}
.btn:hover {
    background: #D02229 !important;
    color: #fff !important;
}
/* .timer {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff4f4;
    color: #ff4d4f;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 5;
    font-weight: 600;
} */

.product-image {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-height: 230px;
    transition: .4s;
}

.auction-card:hover img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transition: .3s;
    height: 280px;
}

.auction-card:hover .card-overlay {
    opacity: 1;
}

.bid-btn {
    width: 160px;
    background: #0ea5e9;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 0;
    font-weight: 600;
}

.buy-btn {
    width: 160px;
    background: #fff;
    color: #000;
    border-radius: 0;
    font-weight: 600;
}
.buy-btn:hover, .btn-blue:hover, .bid-btn:hover, .btn-white:hover{
    color: #fff !important;
}
.rating-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
a.btn.buy-btn.custom-btn-icon {
    margin-left: auto;
    width: max-content;
    padding: 0;
    background: transparent;
}
a.btn.buy-btn.custom-btn-icon i {
color: #1997d1;
font-size: 20px;
}
.rating-wrp .custom-btn-icon:hover{
    background-color: transparent !important;
} 

.card-body-custom {
    padding: 20px;
}

.category {
    color: #444650CC;
    display: block;
    margin-bottom: 5px;
    font-size: 0.75rem;
    line-height: 13.5px;
    font-weight: 700;
}

.product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #00113A;
    margin-bottom: 2px;
    line-height: 20px;
    letter-spacing: 1px;
}

.price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00113A;
    margin-bottom: 12px;
    line-height: 28px;
    letter-spacing: 0.5px;
}

.next-price {
    color: #000000CC;
    font-size: 0.75rem;
    line-height: 13.5px;
    font-weight: 500;

}
.mt-20{
    margin-top: 20px;
}
.mb-41{
    margin-bottom: 41px;
}
.wishlist {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #777;
}
.wishlist .fa-regular {
    font-size: 1.3125rem;
    font-weight: 400;
    color: #00000099;
}

.wishlist:hover {
    color: red;
}

.wishlist {
    cursor: pointer;
}

.wishlist.is-active,
.wishlist .fa-solid.fa-heart {
    color: var(--brand-red);
}
.auction-card{
    position:relative;
    overflow:hidden;
}

.card-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:5;
}

.auction-card:hover .card-overlay{
    opacity:1;
    visibility:visible;
}

.overlay-buttons{
    /* width:130px; */
    width:160px;
}

.bid-btn,
.buy-btn{
    width:100%;
    border-radius:0;
}

.bid-btn{
    margin-bottom:10px;
}

.timer{
    z-index:6;
}

.card-body-custom,
.product-image{
    position:relative;
    z-index:1;
}

.bestsellers{
    padding:70px 0;
    background:#fff;
}

.section-title{
    color: #000000CC;
    letter-spacing: 0.5px;
}

.view-all{
    color:#1890d8;
    text-decoration:none;
    font-size: 0.875rem;
    font-weight:600;
    display: flex;
    align-items: center;
    gap: 17px;
}
.view-all i{
    font-size: 0.5rem;
}

.product-card{
    position:relative;
    background:#fff;
    border:1px solid #ECECEC;
    transition:.35s;
    overflow:hidden;
    box-shadow: 0px 0px 4px 0px #00000033;

}

.product-card:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Image + title/category/wishlist row share one positioning context so the
   hover .overlay below has something to anchor to -- the overlay itself is
   now fixed-height (matches .product-img's own 240px), covering only the
   image, never the title row underneath it. Rating/price/notice stay in
   .product-content, below this wrapper, always visible either way. */
.product-card-media{
    position:relative;
}

.product-img{
    height:240px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.product-img img{
    max-height:180px;
    transition:.35s;
}

.product-card:hover img{
    transform:scale(1.06);
}

.product-card-title-row{
    padding:18px 18px 0;
}

.product-content{
    padding:0 18px 18px;
}

.product-content h5{
    font-size: 1rem;
    font-weight:700;
    color:#00113A;
    margin-bottom:2px;
    line-height: 16px;
}
.product-content h5 a{
    font-size: 1rem;
    font-weight:700;
    color:#00113A;
    margin-bottom:2px;
    line-height: 16px;
}

.product-content span.woocommerce-Price-amount{
    font-size: 1.25rem;
    color: #00113A;
    font-weight: 700;
}
.product-content span a{
    font-size: 0.75rem;
    color:#666;
    font-weight: 700;
}

.product-card-title-row span a{
    color: #444650CC;
    display: block;
    margin-bottom: 5px;
    font-size: 0.75rem;
    line-height: 13.5px;
    font-weight: 700;
}
.rating{
    margin:10px 0;
    color:#E9A207;
    font-size: 0.8125rem;
}

.rating span{
    font-size: 1rem;
    color: #00113A !important;
    font-weight: 400;
    line-height: 20px;
    margin-left: 12px;
}

.product-content h4{
    color: #00113A;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 28px;
    letter-spacing: 0.5px;
}

.wishlist{
    background:none;
    border:none;
    color:#777;
    font-size: 1.25rem;
    padding: 0;
    display: flex;
    margin-top: 10px;
}

/* Darkening scrim -- fixed height matching .product-img's own 240px, so it
   covers only the product image area and never bleeds over the title/
   category/wishlist row underneath it. */
.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:240px;
    background: rgba(0, 0, 0, 0.6);
    opacity:0;
    transition:.35s;
    z-index:5;
}

.overlay-actions{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

/* Auction card's own version of the above -- kept as a separate selector
   since .overlay-buttons already has its own fixed width:160px (further
   down this file) that centering via width:100%+align-items would override;
   centering it by position instead preserves that fixed width. */
.overlay .overlay-buttons{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.product-card:hover .overlay{
    opacity:1;
}

.btn-blue{
    width:140px;
    background:#1997D1;
    color:#fff;
    border-radius:0;
    margin-bottom:10px;
    border: 1px solid #469BC2;
}
.btn-blue:hover{
  background:#fff !important;
  color: #1997D1 !important;
  border-color: #fff;
}

.btn-white{
    width:140px;
    background:#fff;
    color:#000;
    border-radius:0;
}

.btn-blue:hover{
    background:#179fdf;
    color:#fff;
}

.btn-white:hover{
    background:#f3f3f3;
}

.seller-slider-wrapper{
    position:relative;
}

.seller-card{
    background: #fff;
    padding: 12px 19px 23px;
    transition: .3s;
    box-shadow: 0px 0px 4px 0px #00000033;
    margin: 10px 1px;
    transition: .3s;
}

.seller-card:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.seller-card img{
    height: 127px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    object-fit: contain;
    transition: .3s;
}
.seller-card:hover img {
    transform: scale(1.2);
}
.seller-card h6{
    font-size: 1rem;
    font-weight:700;
    color:#00113A;
    margin-bottom:4px;
    line-height: 20px;
    letter-spacing: 1px;
}

.seller-card p{
    font-size: 0.75rem;
    color: rgba(68, 70, 80, 0.8);
    margin-bottom: 12px;
    line-height: 13.5px;
    letter-spacing: 1px;
    font-weight: 700;
}

.seller-card a{
    font-size: 0.9375rem;
    color: rgba(4, 103, 153, 1);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: underline;
}

.seller-card a:hover {
    color: #cf2229 !important;
}

/* Navigation */

.seller-prev,
.seller-next{
    width:36px !important;
    height:36px !important;
    background:#fff;
    border:1px solid #ddd;
    border-radius:50%;
}

.seller-prev::after,
.seller-next::after{
    font-size: 0.875rem !important;
    color:#00113A;
}

.seller-prev{
    left:-18px;
}

.seller-next{
    right:-18px;
}

.toy-bundle{
    padding:0px 0px 70px 0;
    background:#fff;
}

.bundle-slider-wrapper{
    position:relative;
}

.bundle-card{
    position:relative;
    overflow:hidden;
}

.bundle-card img{
    width:100%;
    height:568px;
    object-fit:cover;
    transition:.4s;
}

.bundle-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.75) 10%,
        rgba(0,0,0,.15) 60%,
        rgba(0,0,0,0));
    z-index:1;
}

.bundle-card:hover img{
    transform:scale(1.05);
}

.bundle-content{
    position:absolute;
    left: 24px;
    right: 24px;
    bottom: 32px;
    z-index:2;
    color:#fff;
    max-height: 115px;
    min-height: 115px;
}

.bundle-content h5{
    color: #FFFFFF;
    letter-spacing: 1px;
    margin-bottom: 17.13px;
    font-weight: 700;
    font-size: 24px;
    line-height: 20px;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
}

.bundle-content p{
    font-weight: 600;
    font-size: 1rem;
    line-height: 20px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    max-width:280px;
}

.bundle-prev,
.bundle-next{
    width:42px !important;
    height:42px !important;
    background:#fff;
    border-radius:50%;
    border:1px solid #e5e5e5;
}

.bundle-prev::after,
.bundle-next::after{
    font-size: 0.875rem;
    color:#00113A;
}

.bundle-prev{
    left:-20px;
}

.bundle-next{
    right:-20px;
}
.swiper-button-prev ,.swiper-button-next {
    box-shadow: 2px 0px 8px 0px #00000014;
    border: 1px solid #00000014;
    width: 42px !important;
    height: 42px !important;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after ,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    font-size: 0.6875rem !important;
    color: #0000004D;
    font-weight: 800;
}

/* ==========================================
   PROMO PANELS
========================================== */

.promo-panel {
    position: relative;
    height: 920px;
    overflow: hidden;
    padding: 0 !important;

}
/* ==========================================
   BEFORE BACKGROUND IMAGE
========================================== */

.promo-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 224px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 99;
    pointer-events: none;
    background: linear-gradient(360deg, rgb(46 45 45 / 7%) 0%, rgba(194, 194, 194, 0) 30%, #00000054 65%, rgb(3 3 3 / 37%) 100%, rgb(4 4 4) 100%);
}

/* ==========================================
   AFTER BACKGROUND IMAGE
========================================== */

.promo-panel::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 230px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 99;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(46 45 45 / 7%) 0%, rgba(194, 194, 194, 0) 30%, #00000054 65%, rgb(3 3 3 / 37%) 100%, rgb(4 4 4) 100%);
}

/* ==========================================
   PANEL 1
========================================== */

/* .panel-1 {
    background: linear-gradient(
        145deg,
        #a51459 0%,
        #d51b68 50%,
        #b5125b 100%
    );
} */

/* .panel-1::before {
    background-image: url("../images/top-before-bg.png");
}

.panel-1::after {
    background-image: url("../images/pink-bottom.png");
} */

/* ==========================================
   PANEL 2
========================================== */

/* .panel-2 {
    background: linear-gradient(
        145deg,
        #9e1458 0%,
        #cf1b68 50%,
        #ae125a 100%
    );
} */

/* .panel-2::before {
    background-image: url("../images/red-bg-img.png");
}

.panel-2::after {
    background-image: url("../images/panel-2-after-bg.png");
} */

/* ==========================================
   PANEL 3
========================================== */

/* .panel-3 {
    background: linear-gradient(
        145deg,
        #a7145b 0%,
        #d21b6c 50%,
        #b5135e 100%
    );
} */

/* .panel-3::before {
    background-image: url("../images/blue-top-bg.png");
}

.panel-3::after {
    background-image: url("../images/blue-img.png");
} */

/* ==========================================
   PRODUCT IMAGE
========================================== */

.promo-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 2;

    display: block;
    transition: .4s;
}
.promo-panel{
    overflow: hidden;
}
.promo-panel:hover img {
    transform: scale(1.05);
}
/* ==========================================
   CONTENT
========================================== */

.promo-panel-inner {
   position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 83px 20px 53px;
    text-align: center;
    margin: 0 auto;
    align-items: center;
}

/* ==========================================
   HEADING
========================================== */

.promo-heading {
    font-weight: 700;
    font-style: Bold;
    font-size: 2rem;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #FFFEFE;
}

/* ==========================================
   TEXT
========================================== */

.promo-text {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 36px;
    letter-spacing: 0.5px;
    text-align: center;
    vertical-align: middle;
    color: #F2F3F7;
    margin-bottom: 40px;
    padding: 0px 97px;
}

/* ==========================================
   SHOP BUTTON
========================================== */
  .btn-shop {
    background: #fff;
    color: #16161D;
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 28px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease, color 0.15s ease;
    border: 1px solid #FFFFFF66;
    width: max-content;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.3s ease;
  }

.btn-shop:hover ,.hero-btn:hover{
    background: #469BC2;
    color: #fff !important;
    text-decoration: none;
}

.mb-60{
    margin-bottom: 60px;
}
.common-padding {
    padding: 90px 0px;
}

/* footer css */
.footer{
    background:#06153F;
    padding:54px 0 0;
}

.footer-logo img{
    max-width:70px;
    margin-bottom:20px;
}

.footer-text{
     color: #FFFFFFE5;
    font-size: 1rem;
    line-height:24px;
    max-width:300px;
    margin-bottom:20px;
    opacity: 0.8;
}

.footer h5{
    color:#fff;
    font-size: 1rem;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:20px;
    line-height: 19.5px;
}

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

.footer ul li{
    margin-bottom:20px;
}

.footer ul li a{
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0px;
    text-decoration:none;
    transition:.3s;
    color: #FFFFFFE5;
    font-weight: 500;
    opacity: 0.8;

}

.footer ul li a:hover{
    color:#fff;
}
.footer a:hover i{
    color: #fff;
}
.contact-info li{
    display:flex;
    gap:10px;
    color: #FFFFFFE5;
    font-size: 0.875rem;
    line-height:20px;
     font-weight: 500;
}
.btn:hover{
    background:#469BC2;
    color:#fff;
}
.contact-info i{
    color: #FFFFFFE5;
    width:18px;
    margin-top:4px;
}

.footer-social,
.footer-bottom-social{
    display:flex;
    gap:10px;
}

/* page-unrestricted.php ("Unrestricted Content" template) -- Privacy Policy,
   Terms of Use, Contact Us, etc. Explicit heading size override for the same
   reason Store Announcements needed one earlier: the theme's global h1 is
   4rem (sized for hero headings), which this plain content page's own <h1>
   would otherwise inherit. */
.unrestricted-content{
    padding:60px 0;
}

.unrestricted-content-title{
    font-size:2rem;
    font-weight:700;
    color:var(--text-dark, #303233);
    margin-bottom:24px;
}

.unrestricted-content-body{
    font-size:1rem;
    line-height:1.7;
    color:var(--text-dark, #303233);
}

.unrestricted-content-body h2{
    font-size:1.375rem;
    font-weight:700;
    margin:32px 0 12px;
}

.unrestricted-content-body h3{
    font-size:1.125rem;
    font-weight:700;
    margin:24px 0 10px;
}

.unrestricted-content-body p{
    margin-bottom:16px;
}

.unrestricted-content-body ul,
.unrestricted-content-body ol{
    margin-bottom:16px;
    padding-left:20px;
}

/* header-unrestricted.php / footer-unrestricted.php -- Privacy Policy, Terms
   of Use, Contact Us, and any other page using the "Unrestricted Content"
   template. Redesigned per a client-supplied mockup: three columns
   (logo/tagline/social, Quick Links, Contact Us) with column dividers, and a
   scroll-to-top button in the bottom bar. Scoped entirely to
   `.footer-unrestricted` classes so none of it leaks onto the main site
   footer (footer.php), which keeps its own existing look. Deliberately the
   SAME flat `#06153F` background as `.footer` (no decorative overlay) --
   an earlier wave-texture version of this file made the footer read as a
   visibly different, lighter shade than header-unrestricted.php's own flat
   `.header` background right above it on the same page; matching that
   header exactly took priority over the mockup's own subtle texture. */

.footer-unrestricted {
    padding-bottom: 30px;
}

/* header-unrestricted.php's own .header-top has nothing else in it (no
   search/nav/account icons like the main header), so its base
   `justify-content: space-between` just leaves the logo sitting at the far
   left with empty space next to it -- fine on desktop, but reads as
   off-center/lopsided on a narrow mobile screen where the mockup expects
   the logo centered. Explicit `display: flex` here too, not just
   `justify-content` -- media.css's own `.header-top` mobile rule (<=991px)
   switches to `display: grid` with named areas ("logo icons menu"/"search
   search search") built for the MAIN header's logo+icons+menu-toggle
   layout, which pins .logo to a fixed left-hand grid cell regardless of any
   justify-content on the container. This selector is more specific (two
   classes vs. that rule's one) so it wins outright and drops back to a
   plain flex row -- the .logo child's own now-inert `grid-area` declaration
   has no effect once the parent isn't a grid. */
@media (max-width: 767px) {
    .header-unrestricted .header-top {
        display: flex;
        justify-content: center;
    }

    /* header.css's own bare `.logo { margin-right: auto; }` at this same
       breakpoint (its own "small mobile" section) pushes the logo to the
       far left regardless of the parent's justify-content -- it's there to
       shove the MAIN header's hamburger/search icons to the right of the
       logo, which header-unrestricted has none of. Cancelling it here is
       what actually lets justify-content: center take visible effect. */
    .header-unrestricted .logo {
        margin-right: 0;
    }
}

.footer-unrestricted-col--divided {
    border-left: 1px solid #FFFFFF1A;
    padding-left: 32px;
}

@media (max-width: 767px) {
    .footer-unrestricted-col--divided {
        border-left: none;
        /* NOT 0 -- these columns' own padding-left above (32px, for the
           divider gap) is the ONLY horizontal inset they have once that
           divider is gone; the base Bootstrap column gutter it was
           replacing is a shorthand override, not additive, so dropping it
           to 0 here left Quick Links/Contact Us flush against the screen
           edge with no breathing room at all. */
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Quick Links -- a vertical list (unlike the old single-row variant this
   replaces), each item with a trailing chevron via ::after rather than
   extra markup per menu item (wp_nav_menu() has no easy per-item slot
   without a custom Walker). Compact like the main footer's own Browse By
   Type/Company/Support lists (.footer ul li, plain block list, no
   space-between stretch) -- the arrow sits directly after the text via
   inline-flex + a small gap, not pushed out to the row's far edge. */
.footer-unrestricted-menu li {
    margin-bottom: 10px;
}

.footer-unrestricted-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-unrestricted-menu a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 12px;
    opacity: 0.7;
}

/* Social icons for this file's own logo column reuse footer.php's own
   .footer-bottom-social markup/classes verbatim (bordered faint-white
   circle, same as the main footer's bottom bar) -- see .footer-bottom-social
   a below for that shared rule, nothing new needed here. */
.footer-unrestricted .footer-bottom-social {
    margin-top: 16px;
}

/* Contact Us -- same plain-icon treatment as the main footer's own
   .contact-info i (no filled circle background), just laid out with a
   label above the value instead of one inline row. */
.footer-unrestricted-contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-unrestricted-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.footer-unrestricted-contact-icon {
    flex-shrink: 0;
    width: 18px;
    display: flex;
    justify-content: center;
    margin-top: 4px;
    color: #FFFFFFE5;
    font-size: 14px;
}

.footer-unrestricted-contact-text {
    display: flex;
    flex-direction: column;
    color: #FFFFFFE5;
    font-size: 0.875rem;
    line-height: 20px;
}

.footer-unrestricted-contact-text strong {
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}

.footer-unrestricted-contact-text a {
    color: #FFFFFFE5;
    text-decoration: none;
}

.footer-unrestricted-contact-text a:hover {
    color: #fff;
}

/* Bottom bar -- copyright + scroll-to-top (no social icons here, unlike the
   main footer's bottom bar -- this design already puts social icons in the
   logo column above). .footer-bottom's own base rule already gives this the
   space-between layout it needs, nothing to override here. */
.footer-scroll-top {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #FFFFFF33;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
    flex-shrink: 0;
}

.footer-scroll-top:hover {
    background: var(--btn-blue, #469BC2);
    border-color: var(--btn-blue, #469BC2);
}

.footer-social a{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: .3s;
    border: 1px solid #FFFFFF1A;
    background: #FFFFFF0D;
}
.footer-bottom-social a{
    width:38px;
    height:38px;
    text-decoration: none;
    transition: .3s;
    border: 1px solid #FFFFFF1A;
    background: #FFFFFF0D;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer-social a:hover,
.footer-bottom-social a:hover{
    background:#169FE8;
    border-color:#169FE8;
}

.footer-bottom{
    margin-top: 32px;
    border-top: 1px solid #D9D9D980;
    padding: 24px 0 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    color: #FFFFFFE5;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 29.25px;
    letter-spacing: 0px;
    opacity: 0.8;
}
.adv-banner{
    background: #E3D4E5;
    padding: 75px 0px 71px;
    overflow: hidden;
}
/* .adv-banner .custom-container{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}
.adv-banner img{
    position: relative;
} */
.adv-banner h2{
    font-size: 3rem;
    line-height: 72px;
    margin-bottom: 5px;
    font-weight: 800;
}
.adv-banner p{
    font-size: 1.5rem;
    line-height: 36px;
    letter-spacing: .4px;
    font-weight: 500;
    margin-bottom: 27px;
}
.cta-content{
    /* padding-left: 130px; */
}

.custom-container img {
	object-fit: contain;
	position: absolute;
	display: block;
	height: 100%;
	right: 0;
	top: 0;
	width: auto;
	z-index: 0;
}

.swiper-button-prev:hover, .swiper-button-next:hover {
    background: #469bc28c;
    color: #fff;
}

.buy-now-btn {
    width: 75px;
    height: 25px;
    background: #1997d1;
    border: 1px solid #1997d1;
    border-radius:0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.buy-now-btn i {
    font-size: 13px;
}

.buy-now-btn:hover {
    background:#1997d1;
    transform: translateY(-1px);
    border: 1px solid transparent;
}
.buy-now-btn span{
    color: #fff;
}
.buy-now-btn:active {
    transform: translateY(0);
}

.cart-btn {
          width: 140px;
    height: 36px;
    background: #ffffff;
    color: #000000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .cart-btn span{
        color: #000 !important;
        font-size: 16px;
        font-weight: 600;
    }
    .cart-btn i {
      font-size: 13px;
      color: #000;
    }

    .cart-btn:hover {
        background: var(--btn-blue-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(70, 155, 194, .4);
        border: none;
    }

    .cart-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(70, 155, 194, .35);
    }


/* Product_Country_Restriction (plugin) -- shown in place of the Add to
   Cart button (product-card.php's shop-loop card, content-single-product.php's
   detail page) for a logged-in buyer whose own registered country matches
   this product's seller/admin-set restriction. Same warning tone already
   established for a pending-review state elsewhere in this project
   (.profile-photo-pending in profile.css) -- an explanation, not an error. */
.country-restricted-notice {
    display: inline-block;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #f0dca0;
    border-radius: var(--radius);
    background: #fff8e5;
    color: #8a6d00;
    font-size: 0.8125rem;
    font-weight: 500;
    width: 100%;
}

   span.timer.absolute {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff4f4;
    color: #ff4d4f;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 5;
    font-weight: 600;
}
/* Product card's own timer badge -- same badge, same colors, just the
   top-right corner instead of top-left (that corner is already taken by
   the New/Bestseller/country-restricted badges, .product-stocks). */
span.timer.absolute.timer--top-right {
    left: auto;
    right: 15px;
}
.winned-for.auction{
    
font-size: 18px !important;
  color: #469bc2 !important;
}
.overlay-buttons .bid-btn {
    width: 160px !important;
    background: #0ea5e9;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 0;
    font-weight: 600;
    display: block;
    padding: 10px 30px;
}
.overlay-buttons .btn.buy-btn {
    width: 160px !important;
    background: #fff;
    color:  #16161D;
    margin-bottom: 10px;
    border-radius: 0;
    font-weight: 600;
    display: block;
    padding: 10px 30px;
    font-size: 16px;
} 

h5 a {
    font-size: 1rem;
    font-weight: 700;
    color: #00113A;
    margin-bottom: 2px;
    line-height: 20px;
    letter-spacing: 1px;
}
.category a {
    color: #444650CC;
    display: block;
    margin-bottom: 5px;
    font-size: 0.75rem;
    line-height: 13.5px;
    font-weight: 700;
}
a.btn.btn-blue , a.btn.btn-white {
    font-weight: 700;
}

/* ===========================
   Content Blocks: "Contact Details"
   (inc/flexible-content/blocks/contact-details) -- global, not page-specific,
   since this block can be added to any Page via Content Blocks, not only
   the Contact Us page.
=========================== */

.contact-details-section {
    padding: 56px 0;
    background: #f7f9fb;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.contact-details-heading {
    margin-bottom: 28px;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.contact-details-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.contact-details-item i {
    color: var(--btn-blue);
    font-size: 1.125rem;
    margin-top: 3px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.contact-details-item a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
}

.contact-details-item a:hover {
    color: var(--link-blue2);
}

.contact-details-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.contact-details-social-links {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.contact-details-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--btn-blue);
    color: #fff;
    transition: var(--transition);
}

.contact-details-social-links a:hover {
    background: var(--btn-blue-hover);
}

/* .contact-details-item i's own rule above (color: var(--btn-blue), a fixed
   20px width, text-align: center) also matches these icons -- they're
   inside a .contact-details-item too (the "Follow Us" row) -- which made
   every social icon render the same blue as its own circle background
   (invisible) instead of the white .contact-details-social-links a already
   sets. More specific selector wins back the real, intended styling. */
.contact-details-social-links a i {
    color: #fff;
    font-size: 0.875rem;
    width: auto;
    margin-top: 0;
}

/* ===========================
   Default Page template (template-parts/content-page.php) --
   plain content pages (Privacy Policy, Terms of Use, Refund and Returns
   Policy, General FAQs, etc.) get the same site-wide .container width/
   centering every other section already uses, plus standard vertical
   section spacing -- previously .entry-content had no width constraint at
   all (rendered full browser width, edge to edge).
=========================== */

.entry-content {
    padding: 56px 0 72px;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

/* ===========================
   Content Blocks: "FAQs"
   (inc/flexible-content/blocks/faqs) -- global, not page-specific, since
   this block can be added to any Page via Content Blocks.
=========================== */

.faqs-section {
    padding: 56px 0;
}

.faqs-heading {
    margin-bottom: 28px;
}


.faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.faq-question-wrap {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
}

.faq-question:hover {
    background: #f7f9fb;
}

.faq-icon {
    flex-shrink: 0;
    color: var(--btn-blue);
    transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-item.is-open .faq-question {
    background: #f7f9fb;
}

.faq-answer {
    padding: 0 20px 20px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-top: 14px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* ===========================
   Content Blocks: "Shortcode" and "Rich Content"
   (inc/flexible-content/blocks/shortcode, /rich-content) -- global, not
   page-specific, since both can be added to any Page via Content Blocks.
=========================== */

.shortcode-block-section {
    padding: 32px 0;
}

/* ===========================
   Header wishlist dropdown -- identical structure/behavior to
   .cart-dropdown/.cart-toggle/.cart-menu just above (header.php,
   assets/js/header.js); reuses .cart-header/.cart-item/.cart-item-content/
   .cart-footer/.view-cart-btn as-is for the inner content, since a
   wishlist-preview item (thumbnail + name + price) is visually identical to
   a cart item minus the quantity line.
=========================== */

.wishlist-dropdown {
    position: relative;
    display: inline-block;
}

.wishlist-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.wishlist-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

.wishlist-toggle .wishlist-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50px;
    background: #e8332a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

.wishlist-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
}

/* Scoped to .wishlist-menu only -- .cart-item-thumb is shared with the Cart
   dropdown (see the shared-class docblock above .cart-item), so overriding
   the bare class would also resize/reshape the Cart drawer's own thumbnails.
   Restyled here to match .notification-icon's size/shape (34px, circular)
   instead of the Cart dropdown's 44px rounded-square, per direct request
   that the Wishlist drawer read visually like the Notification drawer. */
.wishlist-menu .cart-item-thumb,
.wishlist-menu .cart-item-thumb img {
    width: 34px;
    height: 34px;
}

.wishlist-menu .cart-item-thumb {
    border-radius: 50%;
}

/* Same "cap to ~4 rows, scroll for the rest" treatment as the Cart
   dropdown's own .cart-items-scroll -- see that rule's own comment for why
   the footer below doesn't need real position:sticky to stay put. Wishlist
   rows are shorter (34px circular thumb vs. Cart's 44px square, see
   .wishlist-menu .cart-item-thumb above), so this uses its own smaller
   max-height rather than sharing Cart's number. */
.wishlist-items-scroll {
    max-height: 240px;
    overflow-y: auto;
}

/* Its own dedicated classes (not .cart-footer/.view-cart-btn, which the Cart
   dropdown still uses for its bordered Total/View Cart/Checkout block) --
   styled to match .notification-footer/.notification-footer a exactly
   (plain centered text link, no button box), per direct request that this
   link read the same as the Notification drawer's own "View All
   Notifications". */
.wishlist-footer {
    padding: 12px 15px;
    text-align: center;
    border-top: 1px solid #f1f1f1;
}

.wishlist-view-all {
    color: #469bc2;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.woocommerce-MyAccount-content.content-right{
    width: 100%;
}
.woocommerce-MyAccount-navigation.content-left{
    width: 100%;
}

/* ---- Global product card (template-parts/product-card.php) --
        "New"/"Bestseller" badge, needed everywhere that card renders now
        (Shop, Home, single-product Similar Products), not just the Shop
        page -- duplicated from product-listing.css's own identical rules
        (kept there too, untouched, since that file is scoped to the Shop
        page specifically and other Shop-only rules there still depend on
        `.product-stocks` existing in that file's own cascade position). ---- */
.product-stocks {
    display: flex;
    padding: 25px 25px 0;
    gap: 10px;
    position: absolute;
    align-items: center;
    width: 100%;
    z-index: 100;
}

.product-stocks .product-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-stocks .product-badge i {
    font-size: 11px;
}

.product-card:hover .product-stocks .product-badge {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .24);
}

.product-badge--new {
    background: linear-gradient(135deg, var(--btn-blue), var(--btn-blue-hover));
}

.product-badge--bestseller {
    background: linear-gradient(135deg, #f5a623, #d6860a);
}

/* Product_Country_Restriction badge -- a reddish warning tone (this is a
   limitation notice, not a positive attribute like New/Bestseller).
   Replaces the old `.country-restricted-notice` box this card used to
   render lower down (still used as-is on the single product page,
   content-single-product.php). `flex: 1 1 auto` fills whatever width
   `.product-stocks` has left (its own flex row) so the full text sits on
   one line whenever there's room; `white-space: normal` is the fallback
   for when there genuinely isn't, letting it wrap instead of overflowing
   or getting clipped. */
.product-badge--restricted {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}


/* ============================================================
   Quick View popup (footer.php modal + template-parts/quick-view-content.php,
   assets/js/quick-view.js) -- global since the trigger button
   (.quick-view-btn, template-parts/product-card.php) can appear on any
   page, so this can't be scoped to a page-specific stylesheet.
   ============================================================ */

.quick-view-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 17, 58, 0.65);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

body.zurgle-quick-view-open {
    overflow: hidden;
}

.quick-view-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.quick-view-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.quick-view-close:hover {
    background: #f2f4f6;
}

.quick-view-loading {
    padding: 100px 24px;
    text-align: center;
    font-size: 1.75rem;
    color: var(--btn-blue);
}

.quick-view-error {
    padding: 60px 24px;
    text-align: center;
    font-size: 1rem;
    color: var(--text-muted);
}

.quick-view {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 44px;
}

.quick-view-image {
    flex: 1 1 320px;
    max-width: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fb;
    border-radius: 8px;
    padding: 24px;
}

.quick-view-image img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
}

.quick-view-details {
    flex: 1 1 320px;
    min-width: 0;
}

.quick-view-category a {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--btn-blue);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.quick-view-title {
    margin: 6px 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00113A;
}

.quick-view-rating {
    margin-bottom: 12px;
}

.quick-view-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00113A;
    margin-bottom: 16px;
}

.quick-view-excerpt {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.quick-view-excerpt p:last-child {
    margin-bottom: 0;
}

.quick-view-auction-info {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    background: #f7f9fb;
    border-radius: 8px;
    margin-bottom: 16px;
}

.quick-view-auction-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-view-auction-stat .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.quick-view-auction-stat .value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #00113A;
}

.quick-view-cta {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 0;
    margin-bottom: 16px;
    text-align: center;
}

.quick-view-full-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--btn-blue);
    margin-top: 12px;
}

.quick-view-full-link i {
    font-size: 0.75rem;
}

/* The embedded add-to-cart form is the SAME real WooCommerce form
   (woocommerce_template_single_add_to_cart(), including the "Buy Now"
   button hooked onto it) content-single-product.php uses -- but that
   form's own layout styling lives in product-details.css, which is only
   enqueued on the actual product page (is_product()), not Shop/Home/
   wherever else Quick View can be triggered from. Re-declared here, scoped
   under .quick-view-add-to-cart only, so it stays looking correct
   regardless of which page opened the popup, without loading the rest of
   that page-specific stylesheet globally just for this one form. */
.quick-view-add-to-cart {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

/* Visual order only (source order stays stock -> form -> seller row, see
   quick-view-content.php's own comment on why) -- puts the Vendor name/Get
   Support row between the stock line and the Add to Cart/Buy Now buttons,
   per direct request, without touching the shared add-to-cart/simple.php
   override this same markup comes from (that file is also the real single
   product page's template, not just Quick View's). */
.quick-view-add-to-cart > .stock {
    order: 1;
}

.quick-view-add-to-cart > .quick-view-seller-row {
    order: 2;
}

.quick-view-add-to-cart > form.cart {
    order: 3;
}

.quick-view-add-to-cart form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.quick-view-add-to-cart form.cart::before,
.quick-view-add-to-cart form.cart::after {
    content: none;
    display: none;
}

/* Both buttons carry Bootstrap's own `.w-100` (`width:100% !important`),
   which forces each onto its own full-width row regardless of the form's
   flex layout above -- confirmed live as the actual reason they stacked
   instead of sitting side by side. This wins back over that `!important`
   for these two specifically (Quick View only -- product-details.css is
   where the real single product page's own equivalent override would live,
   deliberately not touched here since it wasn't asked for). */
.quick-view-add-to-cart form.cart .single_add_to_cart_button,
.quick-view-add-to-cart form.cart .btn-buy-now {
    width: auto !important;
}

.quick-view-add-to-cart .btn-buy-now {
    background-color: #1ba0d7;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 0;
    flex: 1 1 0;
    min-width: 120px;
    padding: .5rem 1rem;
    min-height: 50px;
}

.quick-view-add-to-cart .btn-buy-now:hover {
    background-color: #158bbd;
    color: #fff;
}

.quick-view-add-to-cart .single_add_to_cart_button {
    flex: 1 1 0;
    min-width: 120px;
    min-height: 50px;
    padding: .5rem 1rem;
    border: 1px solid #469BC2;
    border-radius: 0;
    background-color: #fff;
    color: #334155;
    font-weight: 700;
}

.quick-view-add-to-cart .single_add_to_cart_button:hover {
    background-color: #f8fafc;
}

/* Vendor name + (relocated, real) Get Support button row -- see
   quick-view-content.php/quick-view.js for why the button itself is moved
   here via JS rather than rebuilt. Styled to read as a plain link
   ("... anchor") per direct request, even though the underlying element is
   still Dokan's own real <button>, not a rebuilt <a>. */
.quick-view-seller-row {
    order: 2;
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 4px 0 12px;
}

.quick-view-seller-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    /* text-transform: uppercase; */
    letter-spacing: 0.3px;
}


.quick-view-seller-row .dokan-store-support-btn {
    border: 0 !important;
    padding: 0 !important;
    margin-left: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.quick-view-seller-row .dokan-store-support-btn:hover {
    font-weight: 700 !important;
    background: none !important;
}

@media (max-width: 767px) {
    .quick-view {
        padding: 28px;
    }
}

/* ---- "Trending Auctions" Content Block -- Text Theme option
        (inc/flexible-content/blocks/trending-auctions). The existing
        .trending-auctions rules above (ported from html/index.php) always
        assume light text on a dark background; these two rules are what
        actually make the admin's Text Theme = Dark choice work when a
        lighter Background Color is picked. Higher specificity than the
        base rules (2 classes vs 1) so they win regardless of source order,
        no !important needed. ---- */
.zurgle-trending-auctions.zurgle-text-dark .section-title {
    color: #00113A;
}

.zurgle-trending-auctions.zurgle-text-dark .view-all {
    color: #00113A;
}

/* Cancels dokan-lite's own `.dokan-store-wrap { margin: 20px 0; }` so the
   hero banner (now shared by every single-store tab -- store.php,
   store-header.php, vendor-biography.php, return-policy.php, store-toc.php,
   store-reviews.php) sits flush under the site header on all of them, not
   just the Products tab -- originally only store.php carried this class,
   which is exactly why the hero banner had a visible ~20px gap above it on
   every OTHER tab but not this one. */
.dokan-store-wrap.zurgle-store-page.no-margin{
    margin: 0;
}

/* The shorthand `margin: 15px` (all four sides) was a real bug -- it
   overrides .container's own `margin: 0 auto` centering with a flat 15px on
   every side, so this pinned to the LEFT edge instead of centering with the
   same wide gutters every other .container on the site uses (confirmed
   live: x=15 here vs. x=162.5 for the header's own .container at the same
   1920px viewport), which is what made every tab's content
   (About me/Return Policy/Terms/Reviews) look like it ran screen-edge to
   screen-edge instead of matching the rest of the page's content width.
   `auto` on left/right restores centering; 15px top/bottom is the only
   part that was ever actually intentional here. */
.container.zurgle-store-tab-content{
    margin: 15px auto;
}

.my-account-heading {
    font-size: 2.25rem;
  font-weight: 700;
  color: #16161DCC;
}