/* ============================================================
   Velox WooTabs Pro — Widget CSS  v2.3.2
   Scope: .vwtp-widget  (safe, no theme bleed)
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties
   ------------------------------------------------------------ */
.vwtp-widget {
    --vwtp-accent:     #c9a84c;
    --vwtp-dark:       #111;
    --vwtp-mid:        #555;
    --vwtp-light:      #f4f4f4;
    --vwtp-white:      #fff;
    --vwtp-border:     #e0e0e0;
    --vwtp-radius:     6px;
    --vwtp-cols:       4;
    --vwtp-gap:        24px;
    --vwtp-transition: 0.22s ease;
    /* Correct readable text color for anything sitting directly on top of
       --vwtp-accent as a background (Buy Now button, sale badge, active
       tab/filter pills). Defaults to a warm dark shade because the
       plugin's own default accent (#c9a84c, gold) needs dark text to stay
       readable — verified by computing actual contrast ratios rather than
       assuming white always works, which was the root cause of "Buy Now
       text unreadable on gold" and "sale badge unreadable on gold". */
    --vwtp-on-accent:  #1a1208;
    box-sizing: border-box;
    position: relative;
}
.vwtp-widget *, .vwtp-widget *::before, .vwtp-widget *::after {
    box-sizing: inherit;
}

/* ============================================================
   COLOR PRESETS  (19)
   ============================================================ */
.vwtp-color-obsidian-gold   { --vwtp-accent:#c9a84c; --vwtp-dark:#0d0d0d; --vwtp-on-accent:#1a1208; }
.vwtp-color-noir-prestige   { --vwtp-accent:#e0c87a; --vwtp-dark:#1a1a1a; --vwtp-on-accent:#1a1208; }
.vwtp-color-luxe-ivory-gold { --vwtp-accent:#b8962e; --vwtp-dark:#3a2f12; --vwtp-mid:#5c5040; --vwtp-on-accent:#1a1208; }
.vwtp-color-royal-gold-luxe {
    --vwtp-accent: #d4af37; /* metallic gold */
    --vwtp-dark:   #f3e9d2; /* used as TEXT color throughout — must stay light for readability against the dark card background below */
    --vwtp-mid:    #b9ad8f; /* secondary text (description, SKU) */
    --vwtp-light:  #161616; /* image placeholder background */
    --vwtp-white:  #141210; /* used as the card BACKGROUND color — near-black here, despite the variable's name */
    --vwtp-border: #3a2f12;
    --vwtp-on-accent: #1a1208;
}
.vwtp-color-royal-grid      { --vwtp-accent:#7c5cbf; --vwtp-dark:#1e003a; --vwtp-on-accent:#fff; }
.vwtp-color-editorial-card  { --vwtp-accent:#1a1a1a; --vwtp-dark:#1a1a1a; --vwtp-mid:#333; --vwtp-on-accent:#fff; }
.vwtp-color-elegant-border  { --vwtp-accent:#8d7b5b; --vwtp-dark:#3a3127; --vwtp-mid:#4a3f35; --vwtp-on-accent:#120c06; }
.vwtp-color-compact-elite   { --vwtp-accent:#2d2d2d; --vwtp-dark:#1f1f1f; --vwtp-mid:#555; --vwtp-on-accent:#fff; }
.vwtp-color-minimal-modern  { --vwtp-accent:#222;    --vwtp-dark:#1a1a1a; --vwtp-mid:#666; --vwtp-on-accent:#fff; }
.vwtp-color-premium-solid   { --vwtp-accent:#ff4b4b; --vwtp-dark:#141414; --vwtp-on-accent:#1a0404; }
.vwtp-color-soft-card       { --vwtp-accent:#4a90d9; --vwtp-dark:#1c2733; --vwtp-mid:#444; --vwtp-on-accent:#0a1824; }
.vwtp-color-red-luxe        { --vwtp-accent:#c0392b; --vwtp-dark:#1c0a08; --vwtp-on-accent:#fff; }
.vwtp-color-green-sage      { --vwtp-accent:#4a7c59; --vwtp-dark:#1f3327; --vwtp-mid:#2d4d38; --vwtp-on-accent:#fff; }
.vwtp-color-blue-ocean      { --vwtp-accent:#1a5ea8; --vwtp-dark:#102a45; --vwtp-mid:#1a3a5c; --vwtp-on-accent:#fff; }
.vwtp-color-gray-silver     { --vwtp-accent:#7d8fa0; --vwtp-dark:#2e3742; --vwtp-mid:#4a5566; --vwtp-on-accent:#1a1f26; }
.vwtp-color-royal-blue      { --vwtp-accent:#1850a8; --vwtp-dark:#0d2b5c; --vwtp-mid:#3a5a85; --vwtp-on-accent:#fff; }
.vwtp-color-emerald-green   { --vwtp-accent:#0f9d68; --vwtp-dark:#0d4d35; --vwtp-mid:#2e6b50; --vwtp-on-accent:#042015; }
.vwtp-color-premium-black {
    --vwtp-accent: #c9a84c; /* warm gold accent against true black for a premium feel */
    --vwtp-dark:   #f0f0f0; /* TEXT color — light, for readability against the dark card background below */
    --vwtp-mid:    #9a9a9a; /* secondary text */
    --vwtp-light:  #161616; /* image placeholder background */
    --vwtp-white:  #0c0c0c; /* card BACKGROUND — true black, despite the variable's name */
    --vwtp-border: #2a2a2a;
    --vwtp-on-accent: #1a1208;
}
.vwtp-color-custom          { /* user-defined */ }

/* ============================================================
   LAYOUT: Top / Bottom / Left / Right  +  Vertical
   ============================================================ */
.vwtp-widget.vwtp-pos-left,
.vwtp-widget.vwtp-pos-right {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.vwtp-widget.vwtp-pos-left  .vwtp-tabs-nav { flex-direction: column; }
.vwtp-widget.vwtp-pos-right .vwtp-tabs-nav { flex-direction: column; order: 2; }
.vwtp-widget.vwtp-pos-right .vwtp-panels   { order: 1; flex: 1; }
.vwtp-widget.vwtp-pos-left  .vwtp-panels   { flex: 1; }

/* ============================================================
   PREMIUM HEADING
   ============================================================ */
.vwtp-heading-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.vwtp-heading-wrap.vwtp-heading-align-center { justify-content: center; text-align: center; }
.vwtp-heading-wrap.vwtp-heading-align-right  { justify-content: flex-end; text-align: right; }
.vwtp-heading-wrap.vwtp-heading-thumb-right  { flex-direction: row-reverse; }
.vwtp-heading-wrap.vwtp-heading-thumb-top,
.vwtp-heading-wrap.vwtp-heading-thumb-bottom { flex-direction: column; align-items: flex-start; }
.vwtp-heading-wrap.vwtp-heading-align-center.vwtp-heading-thumb-top,
.vwtp-heading-wrap.vwtp-heading-align-center.vwtp-heading-thumb-bottom { align-items: center; }

.vwtp-heading-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}
.vwtp-heading-content { flex: 1; min-width: 0; }
.vwtp-heading {
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vwtp-dark);
}
.vwtp-heading-description {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--vwtp-mid);
    line-height: 1.5;
}

/* ============================================================
   PREMIUM BREADCRUMB
   ============================================================ */
.vwtp-breadcrumb { margin-bottom: 12px; }
.vwtp-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.82rem;
}
.vwtp-breadcrumb-item { display: flex; align-items: center; gap: 4px; }
.vwtp-breadcrumb-link {
    color: var(--vwtp-mid);
    text-decoration: none;
    transition: color var(--vwtp-transition);
}
.vwtp-breadcrumb-link:hover { color: var(--vwtp-accent); }
.vwtp-breadcrumb-text { color: var(--vwtp-dark); font-weight: 500; }
.vwtp-breadcrumb-separator { color: var(--vwtp-mid); opacity: .6; font-size: 0.9em; }

/* Modern */
.vwtp-breadcrumb-modern .vwtp-breadcrumb-list { gap: 0; }
.vwtp-breadcrumb-modern .vwtp-breadcrumb-link,
.vwtp-breadcrumb-modern .vwtp-breadcrumb-text {
    padding: 3px 8px;
    border-radius: 3px;
}
.vwtp-breadcrumb-modern .vwtp-breadcrumb-link:hover { background: var(--vwtp-light); }
/* Pill */
.vwtp-breadcrumb-pill .vwtp-breadcrumb-list { gap: 4px; }
.vwtp-breadcrumb-pill .vwtp-breadcrumb-link,
.vwtp-breadcrumb-pill .vwtp-breadcrumb-text {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--vwtp-light);
    font-size: 0.78rem;
}
.vwtp-breadcrumb-pill .vwtp-breadcrumb-link:hover { background: var(--vwtp-border); }
.vwtp-breadcrumb-pill .vwtp-breadcrumb-separator { display: none; }
/* Bordered */
.vwtp-breadcrumb-bordered .vwtp-breadcrumb-link,
.vwtp-breadcrumb-bordered .vwtp-breadcrumb-text {
    padding: 3px 10px;
    border: 1px solid var(--vwtp-border);
    border-radius: var(--vwtp-radius);
}
/* Underline */
.vwtp-breadcrumb-underline .vwtp-breadcrumb-link { text-decoration: underline; text-decoration-color: var(--vwtp-border); }
.vwtp-breadcrumb-underline .vwtp-breadcrumb-link:hover { text-decoration-color: var(--vwtp-accent); }
/* Dark */
.vwtp-breadcrumb-dark {
    background: rgba(0,0,0,.04);
    border-radius: var(--vwtp-radius);
    padding: 6px 12px;
}


/* ============================================================
   TABS NAV — Base
   ============================================================ */
.vwtp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0;
    list-style: none;
    position: relative;
}

/* Scrollable layout */
.vwtp-layout-scrollable .vwtp-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.vwtp-layout-scrollable .vwtp-tabs-nav::-webkit-scrollbar { display: none; }

/* Stretch layout */
.vwtp-layout-stretch .vwtp-tabs-nav { justify-content: stretch; }
.vwtp-layout-stretch .vwtp-tab-btn  { flex: 1; text-align: center; }

/* Base button */
.vwtp-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--vwtp-radius);
    background: none;
    color: var(--vwtp-mid);
    transition: color var(--vwtp-transition), background var(--vwtp-transition), border-color var(--vwtp-transition), box-shadow var(--vwtp-transition);
    text-decoration: none;
    line-height: 1.4;
}
.vwtp-tab-btn:focus-visible {
    outline: 2px solid var(--vwtp-accent);
    outline-offset: 2px;
}
.vwtp-tab-icon {
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.vwtp-tab-icon svg { display: block; }
.vwtp-tab-badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    background: var(--vwtp-accent);
    color: var(--vwtp-on-accent);
    line-height: 1.6;
    vertical-align: middle;
}

/* ============================================================
   TAB DESIGN PRESETS  (9)
   ============================================================ */

/* 1. Default — inherit theme */
.vwtp-design-default .vwtp-tab-btn        { color: inherit; background: none; border: none; }
.vwtp-design-default .vwtp-tab-btn.vwtp-tab-active { color: var(--vwtp-accent); }

/* 2. Minimal Modern */
.vwtp-design-minimal-modern .vwtp-tab-btn { color: #888; background: #f5f5f5; border-color: #f5f5f5; border-radius: 4px; }
.vwtp-design-minimal-modern .vwtp-tab-btn:hover { color: #222; background: #ebebeb; }
.vwtp-design-minimal-modern .vwtp-tab-btn.vwtp-tab-active { color: var(--vwtp-on-accent); background: var(--vwtp-accent); border-color: var(--vwtp-accent); }

/* 3. Premium Solid */
.vwtp-design-premium-solid .vwtp-tab-btn { color: var(--vwtp-dark); background: transparent; border: 2px solid var(--vwtp-dark); border-radius: 3px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.vwtp-design-premium-solid .vwtp-tab-btn:hover { background: var(--vwtp-dark); color: var(--vwtp-white); }
.vwtp-design-premium-solid .vwtp-tab-btn.vwtp-tab-active { background: var(--vwtp-dark); color: var(--vwtp-white); border-color: var(--vwtp-dark); }

/* 4. Soft Card Elevated */
.vwtp-design-soft-card .vwtp-tab-btn { background: var(--vwtp-white); border: 1px solid var(--vwtp-border); border-radius: 10px; color: var(--vwtp-mid); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.vwtp-design-soft-card .vwtp-tab-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); color: var(--vwtp-dark); }
.vwtp-design-soft-card .vwtp-tab-btn.vwtp-tab-active { background: var(--vwtp-accent); border-color: var(--vwtp-accent); color: var(--vwtp-on-accent); box-shadow: 0 4px 14px rgba(0,0,0,.15); }

/* 5. Underline Luxury */
.vwtp-design-underline .vwtp-tabs-nav  { border-bottom: 2px solid var(--vwtp-border); gap: 0; }
.vwtp-design-underline .vwtp-tab-btn   { background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; color: var(--vwtp-mid); padding: 10px 18px; margin-bottom: -2px; }
.vwtp-design-underline .vwtp-tab-btn:hover { color: var(--vwtp-dark); border-bottom-color: rgba(0,0,0,.2); }
.vwtp-design-underline .vwtp-tab-btn.vwtp-tab-active { color: var(--vwtp-accent); border-bottom-color: var(--vwtp-accent); font-weight: 700; }

/* 6. Pill Buttons */
.vwtp-design-pill .vwtp-tab-btn { border-radius: 999px; background: var(--vwtp-light); border: 1px solid var(--vwtp-border); color: var(--vwtp-mid); }
.vwtp-design-pill .vwtp-tab-btn:hover { background: var(--vwtp-border); }
.vwtp-design-pill .vwtp-tab-btn.vwtp-tab-active { background: var(--vwtp-accent); border-color: var(--vwtp-accent); color: var(--vwtp-on-accent); }

/* 7. Glass / Soft Blur */
.vwtp-design-glass-soft .vwtp-tabs-nav { padding: 6px; background: rgba(255,255,255,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; border: 1px solid rgba(255,255,255,.6); }
.vwtp-design-glass-soft .vwtp-tab-btn  { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); border-radius: 10px; color: var(--vwtp-dark); font-weight: 500; }
.vwtp-design-glass-soft .vwtp-tab-btn:hover { background: rgba(255,255,255,.5); }
.vwtp-design-glass-soft .vwtp-tab-btn.vwtp-tab-active { background: var(--vwtp-white); border-color: var(--vwtp-white); color: var(--vwtp-accent); box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* 8. Bold Commerce */
.vwtp-design-bold-commerce .vwtp-tab-btn { background: #1a1a1a; color: #bbb; border: 2px solid #1a1a1a; border-radius: 2px; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vwtp-design-bold-commerce .vwtp-tab-btn:hover { color: var(--vwtp-white); }
.vwtp-design-bold-commerce .vwtp-tab-btn.vwtp-tab-active { background: var(--vwtp-accent); border-color: var(--vwtp-accent); color: var(--vwtp-on-accent); }

/* 9. Editorial Thin-Line */
.vwtp-design-editorial-thin .vwtp-tabs-nav { border-bottom: 1px solid #ddd; gap: 0; }
.vwtp-design-editorial-thin .vwtp-tab-btn  { background: none; border: none; border-bottom: 1px solid transparent; border-radius: 0; color: #aaa; padding: 10px 16px; margin-bottom: -1px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vwtp-design-editorial-thin .vwtp-tab-btn:hover { color: #555; }
.vwtp-design-editorial-thin .vwtp-tab-btn.vwtp-tab-active { color: #111; border-bottom-color: #111; font-weight: 700; }

/* ============================================================
   PANELS
   ============================================================ */
.vwtp-panels { width: 100%; min-width: 0; }

.vwtp-tab-panel { display: block; }
.vwtp-tab-panel[hidden] { display: none !important; }

/* Panel enter animation */
.vwtp-panel-in {
    animation: vwtp-fadein 0.28s ease forwards;
}
@keyframes vwtp-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.vwtp-grid {
    display: grid;
    /* --vwtp-cols is set per-breakpoint by Elementor's own responsive
       "Columns" control (desktop/tablet/mobile via add_responsive_control),
       so this single rule automatically follows whatever the user picked
       at each screen size — Elementor emits its own @media rules that set
       this variable, so no column count should be hardcoded here, or it
       would silently override the user's setting. The fallback value (4)
       only applies if the widget is viewed with no Elementor styles loaded
       at all (e.g. raw HTML preview), not as a per-breakpoint default. */
    grid-template-columns: repeat(var(--vwtp-cols, 4), minmax(0, 1fr));
    gap: var(--vwtp-gap, 24px);
    container-type: inline-size;
    container-name: vwtp-grid;
}

/* ============================================================
   PRODUCT CARD — Base
   ============================================================ */
.vwtp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vwtp-white);
    border: 1px solid var(--vwtp-border);
    border-radius: var(--vwtp-radius);
    overflow: hidden;
    transition: box-shadow var(--vwtp-transition), transform var(--vwtp-transition);
}
.vwtp-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
/* CSS Grid items stretch to row height by default, so every .vwtp-card in a
   row is already the same height; .vwtp-card > *:last-child below pins the
   price/buttons row (or any trailing single element such as a standalone
   stock/SKU line) to the bottom of the card so action buttons always align
   across a row, no matter how long an individual product's title or
   description is. */

/* Card image */
.vwtp-card-image {
    position: relative;
    overflow: hidden;
    height: 220px;
    background: var(--vwtp-light);
    margin-bottom: 12px;
}
.vwtp-card-image a { display: block; width: 100%; height: 100%; }
.vwtp-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: opacity .4s ease, transform .4s ease, filter .4s ease, box-shadow .3s ease;
    will-change: transform, opacity;
}
/* Secondary-image swap — ONLY when .vwtp-has-secondary is present, so single-
   image products never get a blank image on hover (the previous bug). */
.vwtp-card-image .vwtp-img-hover {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
}
.vwtp-card-image.vwtp-has-secondary:hover .vwtp-img-main  { opacity: 0; }
.vwtp-card-image.vwtp-has-secondary:hover .vwtp-img-hover { opacity: 1; }
/* Fallback hover animations — used when no secondary image exists.
   The animation class is output by PHP based on the Elementor control. */
.vwtp-hover-anim-zoom:hover img    { transform: scale(1.08); }
.vwtp-hover-anim-scale:hover img   { transform: scale(1.13); }
.vwtp-hover-anim-lift:hover        { box-shadow: 0 16px 36px rgba(0,0,0,.2); transform: translateY(-4px); }
.vwtp-hover-anim-float:hover img   { transform: translateY(-8px) scale(1.03); }
.vwtp-hover-anim-overlay::after    { content:''; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .35s ease; pointer-events:none; }
.vwtp-hover-anim-overlay:hover::after { background:rgba(0,0,0,.15); }
.vwtp-hover-anim-fade-zoom:hover img   { opacity:.88; transform:scale(1.1); }
.vwtp-hover-anim-blur-reveal:hover img { filter:blur(2.5px); transform:scale(1.06); }
.vwtp-hover-anim-parallax:hover img    { transform:scale(1.1) translateY(-4%); }
.vwtp-hover-anim-rotate:hover img      { transform:scale(1.06) rotate(2deg); }
.vwtp-hover-anim-brighten:hover img    { filter:brightness(1.12) contrast(1.04); transform:scale(1.03); }

/* Row grouping */
.vwtp-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Each card responds to ITS OWN rendered width via container queries, not
   the viewport — this is what actually fixes "buttons overflow on mobile":
   no matter whether narrowness comes from 3 mobile columns, 5 desktop
   columns, or the widget sitting in a narrow Elementor column/sidebar, the
   moment a card drops under ~190px wide its price/button row stacks
   vertically instead of crushing two side-by-side buttons. */
@container vwtp-grid (max-width: 560px) {
    .vwtp-card-row:has(.vwtp-btn-cart, .vwtp-btn-buy-now, .vwtp-btn-custom) {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Padding on card body elements */
.vwtp-card > *:not(.vwtp-card-image) {
    padding-left: 14px;
    padding-right: 14px;
}
.vwtp-card > *:first-child:not(.vwtp-card-image) { padding-top: 14px; }
.vwtp-card > .vwtp-card-image + * { padding-top: 12px; }
.vwtp-card > *:last-child { padding-bottom: 14px; margin-top: auto; }

/* Badges */
.vwtp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.vwtp-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vwtp-badge-sale { background: var(--vwtp-accent); color: var(--vwtp-on-accent); }
.vwtp-badge-oos  { background: #555; color: var(--vwtp-white); }

/* Category / Brand */
.vwtp-card-category,
.vwtp-card-brand {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vwtp-accent);
    margin-bottom: 4px;
}

/* Title */
.vwtp-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.35;
}
.vwtp-card-title a { color: var(--vwtp-dark); text-decoration: none; }
.vwtp-card-title a:hover { color: var(--vwtp-accent); }

/* Rating */
.vwtp-card-rating { margin-bottom: 8px; }
.vwtp-card-rating .star-rating { color: var(--vwtp-accent); }
.vwtp-review-count { font-size: 12px; color: var(--vwtp-mid); margin-left: 4px; }

/* Description */
.vwtp-card-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vwtp-mid);
    margin: 0 0 10px;
}

/* Price */
.vwtp-card-price {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--vwtp-dark);
}
.vwtp-card-price del .amount { color: #999; font-weight: 400; font-size: .85em; }
.vwtp-card-price ins { text-decoration: none; }
.vwtp-card-price ins .amount { color: var(--vwtp-accent); }

/* Buttons */
.vwtp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--vwtp-radius);
    cursor: pointer;
    transition: background var(--vwtp-transition), color var(--vwtp-transition),
                opacity var(--vwtp-transition), transform var(--vwtp-transition),
                box-shadow var(--vwtp-transition);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* lets a flex-item button shrink below its text width instead of forcing the card to overflow */
}
.vwtp-btn:focus-visible {
    outline: 2px solid var(--vwtp-accent);
    outline-offset: 2px;
}
/* Add to Cart reads as the secondary action: solid but quiet, a gentle
   darken on hover rather than a shadow, so it doesn't compete visually
   with Buy Now. */
.vwtp-btn-cart {
    background: var(--vwtp-dark);
    color: var(--vwtp-white);
    border-color: var(--vwtp-dark);
    flex: 1 1 0;
}
.vwtp-btn-cart:hover {
    filter: brightness(1.18);
}
/* Buy Now is the primary/higher-intent action: a touch larger presence via
   shadow + lift on hover, so the two buttons no longer read as identical
   twins — this is purely visual polish, both still perform real actions. */
.vwtp-btn-buy-now {
    background: var(--vwtp-accent);
    color: var(--vwtp-on-accent);
    flex: 1 1 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.vwtp-btn-buy-now:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    transform: translateY(-1px);
}
.vwtp-btn-buy-now:active,
.vwtp-btn-cart:active,
.vwtp-btn-custom:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
/* Custom Button is a tertiary action: an outline style keeps it visually
   lighter than Add to Cart (filled dark) and Buy Now (filled accent +
   shadow), so all three read as distinct actions rather than three
   identical buttons stacked together. */
.vwtp-btn-custom {
    background: transparent;
    color: var(--vwtp-dark);
    border-color: var(--vwtp-dark);
    flex: 1 1 0;
}
.vwtp-btn-custom:hover {
    background: var(--vwtp-dark);
    color: var(--vwtp-white);
}

/* Add to Cart / Buy Now AJAX states */
.vwtp-btn.vwtp-btn-busy {
    opacity: .65;
    cursor: wait;
    pointer-events: none;
    transform: none;
}
.vwtp-btn-cart.added::after {
    content: "✓";
    margin-left: 6px;
}

/* Stock */
.vwtp-stock { font-size: 12px; font-weight: 500; }
.vwtp-stock-instock     { color: #2d8a4c; }
.vwtp-stock-outofstock  { color: #c0392b; }
.vwtp-stock-onbackorder { color: #d67c1c; }

/* SKU */
.vwtp-sku { font-size: 11px; color: var(--vwtp-mid); }

/* ============================================================
   COLOR PRESET OVERRIDES — Card Accent
   ============================================================ */
.vwtp-color-premium-solid  .vwtp-btn-cart { background: var(--vwtp-accent); border-color: var(--vwtp-accent); color: var(--vwtp-on-accent); }
.vwtp-color-royal-grid     .vwtp-btn-cart { background: var(--vwtp-accent); border-color: var(--vwtp-accent); }
.vwtp-color-royal-gold-luxe .vwtp-badge-oos { background: #3a3a3a; color: #f3e9d2; }
.vwtp-color-royal-gold-luxe .vwtp-btn-buy-now {
    background: linear-gradient(135deg, #d4af37 0%, #f4e5a8 50%, #d4af37 100%);
    color: #141210;
    font-weight: 700;
}
.vwtp-color-royal-gold-luxe .vwtp-card {
    border-color: var(--vwtp-border);
    box-shadow: 0 1px 0 rgba(212,175,55,.15) inset;
}
.vwtp-color-royal-gold-luxe .vwtp-card:hover {
    box-shadow: 0 10px 32px rgba(212,175,55,.18);
    border-color: #d4af37;
}
.vwtp-color-premium-black .vwtp-badge-oos { background: #3a3a3a; color: #f0f0f0; }
.vwtp-color-premium-black .vwtp-btn-buy-now {
    background: linear-gradient(135deg, #c9a84c 0%, #e8d49a 50%, #c9a84c 100%);
    color: #0c0c0c;
    font-weight: 700;
}
.vwtp-color-premium-black .vwtp-card {
    border-color: var(--vwtp-border);
}
.vwtp-color-premium-black .vwtp-card:hover {
    box-shadow: 0 10px 32px rgba(201,168,76,.15);
    border-color: #c9a84c;
}

/* ============================================================
   FILTER BAR — Base
   ============================================================ */
.vwtp-filter-bar {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}
.vwtp-filter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.vwtp-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vwtp-filter-label { font-size: 12px; font-weight: 600; color: var(--vwtp-mid); white-space: nowrap; }
.vwtp-filter-bar select {
    padding: 7px 28px 7px 10px;
    font-size: 13px;
    border: 1px solid var(--vwtp-border);
    border-radius: var(--vwtp-radius);
    background: var(--vwtp-white);
    color: var(--vwtp-dark);
    cursor: pointer;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.vwtp-filter-bar select:focus { outline: 2px solid var(--vwtp-accent); border-color: var(--vwtp-accent); }

/* Pill group base */
.vwtp-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.vwtp-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--vwtp-border);
    background: var(--vwtp-white);
    color: var(--vwtp-mid);
    cursor: pointer;
    transition: background var(--vwtp-transition), color var(--vwtp-transition), border-color var(--vwtp-transition);
}
.vwtp-pill:hover,
.vwtp-pill.vwtp-pill-active { background: var(--vwtp-dark); color: var(--vwtp-white); border-color: var(--vwtp-dark); }

/* Filter spinner */
.vwtp-filter-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--vwtp-border);
    border-top-color: var(--vwtp-accent);
    border-radius: 50%;
    display: none;
    animation: vwtp-spin .7s linear infinite;
}
.vwtp-filter-spinner.vwtp-spinner-active { display: block; }
@keyframes vwtp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   FILTER PRESETS  (9)
   ============================================================ */

/* 1. Default — already styled above */

/* 2. Minimal Pills */
.vwtp-filter-pills .vwtp-filter-bar select { display: none; }

/* 3. Premium Rounded Pills */
.vwtp-filter-rounded-pills .vwtp-pill { border-radius: 999px; padding: 7px 18px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vwtp-filter-rounded-pills .vwtp-pill.vwtp-pill-active { background: var(--vwtp-accent); border-color: var(--vwtp-accent); color: var(--vwtp-on-accent); box-shadow: 0 3px 8px rgba(0,0,0,.15); }

/* 4. Underline Navigation */
.vwtp-filter-underline-nav .vwtp-filter-bar { border-bottom: 1px solid var(--vwtp-border); padding-bottom: 0; }
.vwtp-filter-underline-nav .vwtp-pill { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 14px; }
.vwtp-filter-underline-nav .vwtp-pill:hover,
.vwtp-filter-underline-nav .vwtp-pill.vwtp-pill-active { background: none; color: var(--vwtp-accent); border-bottom-color: var(--vwtp-accent); }

/* 5. Solid Buttons */
.vwtp-filter-solid-buttons .vwtp-filter-bar select,
.vwtp-filter-solid-buttons .vwtp-pill {
    border-radius: 3px;
    background: var(--vwtp-dark);
    color: var(--vwtp-white);
    border: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vwtp-filter-solid-buttons .vwtp-pill:hover,
.vwtp-filter-solid-buttons .vwtp-pill.vwtp-pill-active { background: var(--vwtp-accent); color: var(--vwtp-on-accent); }

/* 6. Soft Card Filters */
.vwtp-filter-soft-cards .vwtp-filter-bar,
.vwtp-filter-soft-cards .vwtp-filter-inner {
    background: var(--vwtp-light);
    border-radius: 10px;
    padding: 12px 16px;
    gap: 16px;
}
.vwtp-filter-soft-cards .vwtp-filter-bar select {
    border-color: var(--vwtp-border);
    border-radius: 8px;
    background-color: var(--vwtp-white);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vwtp-filter-soft-cards .vwtp-pill {
    background: var(--vwtp-white);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border-color: var(--vwtp-border);
}
.vwtp-filter-soft-cards .vwtp-pill.vwtp-pill-active { background: var(--vwtp-accent); color: var(--vwtp-on-accent); }

/* 7. Glass / Soft Blur */
.vwtp-filter-glass-soft .vwtp-filter-inner {
    background: rgba(255,255,255,.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 12px;
    padding: 10px 16px;
}
.vwtp-filter-glass-soft .vwtp-filter-bar select,
.vwtp-filter-glass-soft .vwtp-pill {
    background: rgba(255,255,255,.55);
    border-color: rgba(255,255,255,.8);
    border-radius: 8px;
    color: var(--vwtp-dark);
}
.vwtp-filter-glass-soft .vwtp-pill.vwtp-pill-active {
    background: var(--vwtp-accent);
    color: var(--vwtp-on-accent);
    border-color: var(--vwtp-accent);
}

/* 8. Compact Store */
.vwtp-filter-compact-store .vwtp-filter-inner { gap: 6px; }
.vwtp-filter-compact-store .vwtp-filter-bar select,
.vwtp-filter-compact-store .vwtp-pill {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .03em;
}
.vwtp-filter-compact-store .vwtp-pill.vwtp-pill-active { background: var(--vwtp-dark); color: var(--vwtp-white); }

/* 9. Luxury Thin-Line */
.vwtp-filter-luxury-thin-line .vwtp-filter-inner { border-top: 1px solid var(--vwtp-dark); border-bottom: 1px solid var(--vwtp-dark); padding: 10px 0; }
.vwtp-filter-luxury-thin-line .vwtp-filter-bar select,
.vwtp-filter-luxury-thin-line .vwtp-pill {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    color: #999;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
}
.vwtp-filter-luxury-thin-line .vwtp-pill:hover,
.vwtp-filter-luxury-thin-line .vwtp-pill.vwtp-pill-active {
    color: var(--vwtp-dark);
    border-bottom-color: var(--vwtp-dark);
}

/* ============================================================
   LOAD MORE
   ============================================================ */
.vwtp-load-more-wrap { padding-top: 40px; }
.vwtp-btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 32px;
    border: 2px solid var(--vwtp-dark);
    background: transparent;
    color: var(--vwtp-dark);
    border-radius: var(--vwtp-radius);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--vwtp-transition), color var(--vwtp-transition);
}
.vwtp-btn-load-more:hover { background: var(--vwtp-dark); color: var(--vwtp-white); }
.vwtp-btn-load-more:disabled { opacity: .5; cursor: default; }
.vwtp-btn-load-more.vwtp-lm-loading { opacity: .7; cursor: wait; }

.vwtp-lm-spinner {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: vwtp-spin .6s linear infinite;
}
.vwtp-btn-load-more.vwtp-lm-loading .vwtp-lm-spinner { display: inline-block; }

/* ============================================================
   STICKY TAB BAR
   ============================================================ */
.vwtp-sticky-enabled .vwtp-tabs-nav {
    position: sticky;
    top: 0;
    z-index: 99;
    transition: background var(--vwtp-transition), box-shadow var(--vwtp-transition);
}
.vwtp-sticky-enabled.vwtp-sticky-shadow.vwtp-sticky-active .vwtp-tabs-nav {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.vwtp-sticky-enabled.vwtp-sticky-active .vwtp-tabs-nav {
    background: var(--vwtp-white);
    padding: 8px 12px;
    border-radius: 0 0 8px 8px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.vwtp-empty-state {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--vwtp-mid);
    font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .vwtp-widget.vwtp-pos-left,
    .vwtp-widget.vwtp-pos-right { flex-direction: column; }
    .vwtp-widget.vwtp-pos-left  .vwtp-tabs-nav,
    .vwtp-widget.vwtp-pos-right .vwtp-tabs-nav { flex-direction: row; }
    .vwtp-widget.vwtp-pos-right .vwtp-tabs-nav { order: 0; }
}

@media (max-width: 767px) {
    .vwtp-tabs-nav:not(.vwtp-layout-scrollable) { flex-wrap: wrap; }
    .vwtp-tab-btn { font-size: 13px; padding: 8px 14px; }
    .vwtp-filter-inner { gap: 8px; }
    .vwtp-pill { font-size: 11px; padding: 5px 10px; }
    .vwtp-card-image { height: 170px; }
    .vwtp-btn { font-size: 12px; padding: 8px 10px; }
    .vwtp-card-title { font-size: 13px; }
    .vwtp-card-price { font-size: 14px; }
}

@media (max-width: 480px) {
    /* Re-reads the same --vwtp-cols variable (already set by Elementor's
       mobile breakpoint at 767px and below) purely to tighten the grid gap
       on very small phones — it does not force a different column count. */
    .vwtp-grid { grid-template-columns: repeat(var(--vwtp-cols, 2), minmax(0, 1fr)); gap: 12px; }
    .vwtp-tab-btn { padding: 7px 10px; font-size: 12px; }
    .vwtp-layout-scrollable .vwtp-tabs-nav { padding-bottom: 6px; }
}