/*
Theme Name:   Astra Child - Vapor Fantasy
Theme URI:    https://vaporfantasy.ae
Description:  Astra child theme for vaporfantasy-ae. All custom edits live
              here so theme/plugin updates never overwrite them.
Author:       Local
Template:     astra
Version:      1.0.0
License:      GPL-2.0+
Text Domain:  astra-child
*/

/* ============================================================
   Vapor Fantasy brand palette
   dark   #111111 / #0F0F0F
   red    #E02424 (accent) / #8E1616 (warning)
   green  #25D366 (WhatsApp)
   ============================================================ */

/* ---------- WooCommerce product cards ---------- */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    padding: 14px 14px 18px;
    margin-bottom: 24px;
    text-align: center;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(17, 17, 17, .12);
    border-color: #E02424;
}

/* product image: fill the card width, height follows the source ratio */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    max-height: 320px;
    max-width: 100%;
    margin: 0 auto 12px;
    object-fit: contain;
}

/* title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    min-height: 42px;
    padding: 0 4px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: #E02424;
}

/* category label above the title */
.woocommerce ul.products li.product .wf-category-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #9A9A9A;
    margin-bottom: 4px;
}

/* prices */
.woocommerce ul.products li.product .price {
    color: #E02424 !important;
    font-size: 15px;
    font-weight: 700;
    float: none !important;
    display: block;
    margin: 6px 0 2px;
}

.woocommerce ul.products li.product .price del {
    color: #9A9A9A !important;
    font-weight: 400;
    opacity: .75;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 800;
}

/* loop buttons: brand style, inside the card */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    position: static !important;
    transform: none !important;
    width: auto !important;
    float: none !important;
    display: inline-block !important;
    margin: 10px auto 0 !important;
    padding: 9px 20px !important;
    background: #E02424 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    transition: background .15s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
    background: #8E1616 !important;
    color: #FFFFFF !important;
}

/* sale badge — Astra paints .ast-onsale-card with --ast-global-color-primary,
   which defaults to blue, and falls back to .onsale on the classic shop style.
   Both are pinned to the same colour on every page, drawn as a circle with a
   white ring so it stays readable over the red product artwork. */
.ast-onsale-card,
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    border: 2px solid #FFFFFF;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .22);
    z-index: 5;
}

/* ---------- section headings ---------- */

h1, h2, h3 { font-family: inherit; }

.elementor-widget-heading h2.elementor-heading-title {
    position: relative;
    padding-bottom: 10px;
}

/* ---------- single product page ---------- */

.woocommerce div.product .product_title {
    font-weight: 800;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #E02424 !important;
    font-weight: 800;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 22px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 11px 24px !important;
    transition: background .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce div.product form.cart .button:hover {
    background: #8E1616 !important;
    color: #FFFFFF !important;
}

/* ---------- WhatsApp strip + generic link hover ---------- */

a { transition: color .15s ease; }

::selection { background: #E02424; color: #FFFFFF; }

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

/* category label above the title (printed by functions.php) */
a.vf-single-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 13px 5px 12px;
    background: #F4F7FB;
    border: 1px solid #DCE6F2;
    border-radius: 999px;
    color: var(--ast-global-color-0, #046bd2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

a.vf-single-cat::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

a.vf-single-cat:hover {
    background: #E8F0FB;
    border-color: var(--ast-global-color-0, #046bd2);
    box-shadow: 0 2px 8px rgba(4, 107, 210, .16);
}

/* gallery */
.woocommerce div.product div.images img {
    border-radius: 14px;
    border: 1px solid #ECECEC;
    background: #FFFFFF;
}

/* title + price */
.woocommerce div.product .product_title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #1A1A1A;
    margin-bottom: 8px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 26px;
    background: #FDF1F1;
    border-radius: 10px;
    padding: 8px 16px;
    display: inline-block;
}

/* trust badges under the cart button */
.vf-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.vf-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: #F7F9FC;
    border: 1px solid #E7EDF5;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #1E293B;
}

.vf-trust-badge > b {
    display: inline-flex;
    flex: 0 0 auto;
}

.vf-trust-badge img.emoji {
    width: 15px;
    height: 15px;
    margin: 0;
    vertical-align: middle;
}

/* meta (SKU etc.) */
.woocommerce div.product .product_meta {
    border-top: 1px dashed #E5E5E5;
    padding-top: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: #777777;
}

.woocommerce div.product .product_meta > span {
    display: inline-block;
    margin: 0 16px 4px 0;
}

.woocommerce div.product .product_meta a {
    color: #E02424;
    font-weight: 600;
}

/* tabs — theme red, sitting on the panel */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 -3px;
    padding: 0;
    border: 0;
    list-style: none;
}

/* Astra draws a 1px line along the TOP of the strip (ul.tabs::before, absolutely
   positioned with z-index 1) and a clearfix after it — neither is wanted now that
   the red block is the active indicator. Astra ships its own display:none for
   these inside a small-screen block, so !important is needed on desktop. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: none !important;
    border: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: #F1F3F6;
    border: 0;
    border-radius: 10px 10px 0 0;
    transition: background-color .18s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 22px;
    color: #475569;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: color .18s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    background: #FDECEC;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
    color: #E02424;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #E02424;
}

/* Astra paints a blue indicator bar on the active tab — the red block is the
   indicator now, so the bar has to go. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    background: transparent !important;
    height: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a {
    color: #FFFFFF;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs .panel {
    border: 1px solid #ECECEC;
    border-top: 3px solid #E02424;
    border-radius: 0 14px 14px 14px;
    padding: 28px 30px;
    line-height: 1.8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* related products reuse the loop cards */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    font-size: 24px;
    font-weight: 800;
    padding-bottom: 8px;
    position: relative;
}

.woocommerce .related.products > h2::after,
.woocommerce .upsells.products > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: #E02424;
    border-radius: 2px;
}

/* ============================================================
   VARIATION PICKER + QUANTITY + ADD TO CART
   ============================================================ */

/* "Colors:" label — small uppercase caption */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.label {
    padding: 0 0 8px;
    vertical-align: top;
}

.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations .label label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748B;
}

.woocommerce div.product form.cart .variations td.value {
    padding: 0 0 12px;
}

/* the variation price/stock block is empty until something is picked — don't let
   it reserve height and push the button row down */
.woocommerce div.product form.cart .woocommerce-variation {
    margin-bottom: 0;
}

.woocommerce div.product form.cart .woocommerce-variation:empty {
    display: none;
}

.woocommerce div.product form.cart .woocommerce-variation > *:not(:empty) {
    margin-bottom: 12px;
}

.woocommerce div.product form.cart .woocommerce-variation-description,
.woocommerce div.product form.cart .woocommerce-variation-availability {
    font-size: 14.5px;
    font-weight: 600;
    color: #475569;
}

/* the dropdown */
.woocommerce div.product form.cart .variations select {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E02424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #1E293B;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce div.product form.cart .variations select:hover {
    border-color: #F1B7B7;
}

.woocommerce div.product form.cart .variations select:focus {
    outline: none;
    border-color: #E02424;
    box-shadow: 0 0 0 4px rgba(224, 36, 36, .12);
}

/* the "Clear" link under the dropdown */
.woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #E02424;
}

.woocommerce div.product form.cart .reset_variations:hover {
    color: #8E1616;
    text-decoration: underline;
}

/* quantity + button share one row */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #E9E9E9;
}

/* stepper: - [ 1 ] + */
.woocommerce div.product form.cart div.quantity {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin: 0;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color .18s ease;
}

.woocommerce div.product form.cart div.quantity:hover {
    border-color: #C9D3E0;
}

.woocommerce div.product form.cart div.quantity .vf-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 46px;
    padding: 0;
    border: 0;
    background: #F7F9FC;
    box-shadow: none;
    border-radius: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.woocommerce div.product form.cart div.quantity .vf-qty-btn:hover {
    background: #FDECEC;
    color: #E02424;
}

.woocommerce div.product form.cart div.quantity .vf-qty-btn:focus-visible {
    outline: 2px solid #E02424;
    outline-offset: -3px;
}

.woocommerce div.product form.cart div.quantity .qty {
    width: 52px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #1E293B;
    -moz-appearance: textfield;
    appearance: textfield;
}

.woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce div.product form.cart div.quantity .qty:focus {
    outline: none;
}

/* the button: solid theme red, full height of the row */
.woocommerce div.product form.cart .single_add_to_cart_button {
    /* Astra adds a 15px bottom margin here — inside the flex row it makes the
       button's margin box taller than the stepper, which used to drop the
       stepper 8px lower. Zero it so both sit on one line. */
    margin: 0 !important;
    min-height: 48px;
    padding: 0 34px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(224, 36, 36, .22);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    box-shadow: 0 8px 20px rgba(224, 36, 36, .3);
    transform: translateY(-1px);
}

.woocommerce div.product form.cart .single_add_to_cart_button:active {
    transform: translateY(0);
}

/* still waiting for a variation — light red instead of Astra's washed-out
   half-opacity red */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
    background: #FCE7E7 !important;
    color: #B91C1C !important;
    opacity: 1 !important;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ============================================================
   PRODUCT REVIEWS TAB
   ============================================================ */

/* "There are no reviews yet." — a note instead of a bare sentence */
.woocommerce #reviews .woocommerce-noreviews {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #E7EDF5;
    border-radius: 12px;
    background: #F7F9FC;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #475569;
}

/* "N reviews for …" */
.woocommerce #reviews .woocommerce-Reviews-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
}

/* ---------- the form card ---------- */

/* Astra styles #review_form with a 2-ID selector, so match its depth (and rely
   on this stylesheet loading after Astra's) to own the padding and border. */
.woocommerce-js #reviews #review_form {
    padding: 30px 32px;
    border: 1px solid #E7EDF5;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.woocommerce-js #reviews #review_form #respond .comment-reply-title {
    display: block;
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    color: #0F172A;
}

.woocommerce-js #reviews #review_form #respond .comment-notes {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748B;
}

.woocommerce-js #reviews #review_form #respond .comment-form .required {
    color: #E02424;
}

/* field captions — same treatment as the product form labels */
.woocommerce-js #reviews #review_form #respond .comment-form label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748B;
}

/* Astra gives these two labels `display: inline-block; min-width: 100px`,
   at equal depth — re-state the override so they stack above their inputs. */
.woocommerce-js #reviews #review_form #respond p.comment-form-author label,
.woocommerce-js #reviews #review_form #respond p.comment-form-email label {
    display: block;
    min-width: 0;
}

/* the rating row keeps its caption inline, next to the stars */
.woocommerce-js #reviews #review_form #respond .comment-form-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
}

.woocommerce-js #reviews #review_form #respond .comment-form-rating label {
    display: inline-block;
    margin: 0;
}

/* ---------- fields ---------- */

.woocommerce-js #reviews #review_form #respond .comment-form input[type="text"],
.woocommerce-js #reviews #review_form #respond .comment-form input[type="email"],
.woocommerce-js #reviews #review_form #respond .comment-form input[type="url"],
.woocommerce-js #reviews #review_form #respond .comment-form textarea {
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: 15px;
    color: #1E293B;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-js #reviews #review_form #respond .comment-form textarea {
    height: auto;
    min-height: 150px;
    padding: 14px 16px;
    line-height: 1.7;
    resize: vertical;
}

.woocommerce-js #reviews #review_form #respond .comment-form input:hover,
.woocommerce-js #reviews #review_form #respond .comment-form textarea:hover {
    border-color: #C9D3E0;
}

.woocommerce-js #reviews #review_form #respond .comment-form input:focus,
.woocommerce-js #reviews #review_form #respond .comment-form textarea:focus {
    outline: none;
    border-color: #E02424;
    box-shadow: 0 0 0 4px rgba(224, 36, 36, .12);
}

.woocommerce-js #reviews #review_form #respond .comment-form input::placeholder,
.woocommerce-js #reviews #review_form #respond .comment-form textarea::placeholder {
    color: #94A3B8;
}

/* ---------- star picker ---------- */

.woocommerce-js #reviews #review_form #respond .comment-form-rating p.stars {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    line-height: 1;
}

.woocommerce-js #reviews #review_form #respond .comment-form-rating p.stars a {
    color: #E02424;
    font-size: 20px;
    transition: color .15s ease, transform .15s ease;
}

.woocommerce-js #reviews #review_form #respond .comment-form-rating p.stars a::before {
    color: inherit;
}

.woocommerce-js #reviews #review_form #respond .comment-form-rating p.stars a:hover {
    transform: scale(1.12);
}

/* ---------- "save my details" checkbox ---------- */

.woocommerce-js #reviews #review_form #respond .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.woocommerce-js #reviews #review_form #respond .comment-form-cookies-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #E02424;
    cursor: pointer;
}

.woocommerce-js #reviews #review_form #respond .comment-form-cookies-consent label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.55;
    color: #475569;
    cursor: pointer;
}

/* ---------- submit ---------- */

.woocommerce-js #reviews #review_form #respond .form-submit {
    margin: 0;
}

.woocommerce-js #reviews #review_form #respond .form-submit input#submit,
.woocommerce-js #reviews #review_form #respond .form-submit input[type="submit"] {
    min-height: 48px;
    padding: 0 34px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #E02424 !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(224, 36, 36, .22);
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.woocommerce-js #reviews #review_form #respond .form-submit input#submit:hover,
.woocommerce-js #reviews #review_form #respond .form-submit input[type="submit"]:hover {
    background: #8E1616 !important;
    box-shadow: 0 8px 20px rgba(224, 36, 36, .3);
    transform: translateY(-1px);
}

.woocommerce-js #reviews #review_form #respond .form-submit input#submit:active {
    transform: translateY(0);
}

/* ---------- form layout ---------- */

.woocommerce-js #reviews #review_form #respond .comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
}

.woocommerce-js #reviews #review_form #respond .comment-form > * {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    float: none;
}

/* Astra puts a bottom margin on the individual <p> rows at equal depth — the
   element in the selector is what tips the tie back to the flex gap. */
.woocommerce-js #reviews #review_form #respond .comment-form > p,
.woocommerce-js #reviews #review_form #respond .comment-form > div {
    margin: 0;
}

/* name + email share a row when there is room */
.woocommerce-js #reviews #review_form #respond .comment-form .comment-form-author,
.woocommerce-js #reviews #review_form #respond .comment-form .comment-form-email {
    flex: 1 1 calc(50% - 10px);
    width: auto;
}

/* ---------- existing reviews ---------- */

.woocommerce-js #reviews #comments ol.commentlist {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.woocommerce-js #reviews #comments ol.commentlist li.review {
    margin: 0 0 16px;
    padding: 20px 22px;
    border: 1px solid #E7EDF5;
    border-radius: 14px;
    background: #FFFFFF;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .comment_container {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.woocommerce-js #reviews #comments ol.commentlist li.review img.avatar {
    position: static;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .comment-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .star-rating {
    float: right;
    color: #E02424;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .meta {
    margin: 0 0 8px;
    font-size: 13px;
    color: #64748B;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .meta strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #0F172A;
}

.woocommerce-js #reviews #comments ol.commentlist li.review .description {
    font-size: 15px;
    line-height: 1.75;
    color: #334155;
}

@media (max-width: 767px) {
    .woocommerce-js #reviews #review_form {
        padding: 22px 20px;
        border-radius: 14px;
    }

    .woocommerce-js #reviews #review_form #respond .comment-reply-title {
        font-size: 17px;
    }

    /* stack name + email, and give the thumb a full-width target */
    .woocommerce-js #reviews #review_form #respond .comment-form .comment-form-author,
    .woocommerce-js #reviews #review_form #respond .comment-form .comment-form-email,
    .woocommerce-js #reviews #review_form #respond .form-submit input#submit,
    .woocommerce-js #reviews #review_form #respond .form-submit input[type="submit"] {
        flex: 1 1 100%;
        width: 100%;
    }

    .woocommerce-js #reviews #review_form #respond .comment-form textarea {
        min-height: 130px;
    }

    .woocommerce-js #reviews #review_form #respond .comment-form-rating p.stars a {
        font-size: 22px;
    }

    .woocommerce-js #reviews #comments ol.commentlist li.review {
        padding: 16px 16px;
    }
}

/* ============================================================
   SINGLE BLOG POST
   ============================================================ */

/* featured image */
.vf-single-post .post-img img,
.vf-single-post .wp-post-image {
    border-radius: 14px;
    width: 100%;
}

/* title + entry header */
.vf-single-post .entry-header .entry-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
    color: #1A1A1A;
}

/* meta row: date / author, rendered by Astra */
.vf-single-post .entry-header .entry-meta,
.vf-single-post .ast-single-post .entry-meta {
    color: #777777;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .3px;
}

.vf-single-post .entry-header .entry-meta a,
.vf-single-post .ast-single-post .entry-meta a {
    color: #E02424;
}

/* content typography */
.vf-single-post .entry-content {
    font-size: 17px;
    line-height: 1.85;
    color: #333333;
}

.vf-single-post .entry-content h2 {
    font-size: 26px;
    font-weight: 800;
    color: #1A1A1A;
    position: relative;
    padding-left: 16px;
    margin: 34px 0 14px;
}

.vf-single-post .entry-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 2px;
    background: #E02424;
}

.vf-single-post .entry-content h3 {
    font-size: 21px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 26px 0 10px;
}

.vf-single-post .entry-content a {
    color: #E02424;
    font-weight: 600;
    text-decoration: underline;
}

.vf-single-post .entry-content img {
    border-radius: 12px;
}

.vf-single-post .entry-content blockquote {
    background: #F7F7F7;
    border-left: 4px solid #E02424;
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    margin: 24px 0;
    font-style: italic;
    color: #555555;
}

/* tags */
.vf-single-post .tags-links a,
.vf-single-post .cat-links a {
    display: inline-block;
    background: #F1F1F1;
    color: #444444 !important;
    border-radius: 16px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    margin: 0 6px 8px 0;
}

.vf-single-post .tags-links a:hover,
.vf-single-post .cat-links a:hover {
    background: #E02424;
    color: #FFFFFF !important;
}

/* author box */
.vf-author-box {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #111111;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 40px 0;
}

.vf-author-box img {
    border-radius: 50% !important;
    border: 3px solid #E02424;
}

.vf-author-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #E02424;
}

.vf-author-name {
    font-size: 17px;
    color: #FFFFFF;
    display: block;
    margin: 2px 0 6px;
}

.vf-author-info p {
    margin: 0;
    color: #B9B9B9;
    font-size: 13.5px;
    line-height: 1.6;
}

/* related posts grid */
.vf-related { margin: 34px 0 10px; }

.vf-related-title {
    font-size: 24px;
    font-weight: 800;
    color: #1A1A1A;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.vf-related-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: #E02424;
    border-radius: 2px;
}

.vf-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vf-related-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vf-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(17, 17, 17, .12);
    border-color: #E02424;
}

.vf-related-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.vf-related-card-title {
    display: block;
    padding: 14px 16px 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.45;
}

.vf-related-card time {
    display: block;
    padding: 0 16px 16px;
    font-size: 12.5px;
    color: #9A9A9A;
    font-weight: 600;
}

/* responsive */
@media (max-width: 768px) {
    .vf-related-grid { grid-template-columns: 1fr; }
    .woocommerce div.product .product_title { font-size: 24px; }
    .vf-single-post .entry-header .entry-title { font-size: 28px; }
    .vf-author-box { flex-direction: column; text-align: center; }
}

/* title visibility: some stacked CSS hides it; the child theme owns this */
.woocommerce div.product .product_title {
    display: block !important;
    margin: 0 0 6px;
}


/* branded placeholder for related posts without a featured image */
.vf-related-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: linear-gradient(135deg, #111111 0%, #2A0A0A 100%);
    color: #FFFFFF;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.vf-related-noimg b { color: #E02424; }

/* single post title: same visibility fix as product titles */
.vf-single-post .entry-title,
.single .entry-title {
    display: block !important;
    margin: 6px 0 10px;
}

/* h2 accent: border beats any stacked padding override */
.vf-single-post .entry-content h2 {
    border-left: 5px solid #E02424 !important;
    padding-left: 14px !important;
}

/* post meta links in brand red */
.single .entry-meta a,
.single .post-meta a,
.vf-single-post .entry-meta a {
    color: #E02424 !important;
}

/* the post body uses h3 for section headings too — give both the accent */
.vf-single-post .entry-content h3 {
    border-left: 4px solid #E02424 !important;
    padding-left: 12px !important;
}

/* author/date links in the post meta, whatever wrapper Astra uses */
.single .posted-by a,
.single a.url,
.single .ast-post-meta-html a,
.single .entry-meta a {
    color: #E02424 !important;
}

/* ============================================================
   HEADER MIDDLE BAR: search / socials / cart  (matches original layout)
   ============================================================ */

/* search pill */





/* social icons: plain glyphs like the original header */
.vf-socials .elementor-social-icon {
    background: transparent !important;
    border: none !important;
    color: #C9C9C9 !important;
    --e-social-icon-icon-color: #C9C9C9;
    font-size: 18px;
    transition: color .15s ease;
}

.vf-socials .elementor-social-icon:hover {
    color: #E02424 !important;
    --e-social-icon-icon-color: #E02424;
}

.vf-socials .elementor-social-icon i,
.vf-socials .elementor-social-icon svg { color: inherit; }

/* menu cart: white text on the dark bar */
.vf-cart .elementor-menu-cart__toggle .elementor-button {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 6px 4px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    font-size: 15px !important;
}

.vf-cart .elementor-menu-cart__toggle .elementor-button-icon,
.vf-cart .elementor-menu-cart__toggle .elementor-button-icon svg,
.vf-cart .elementor-menu-cart__toggle .elementor-button-icon i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    font-size: 22px;
}

.vf-cart .elementor-button-text { color: #FFFFFF !important; }

/* cart count badge */
.vf-cart .elementor-menu-cart__toggle .elementor-button-icon-qty {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 800;
}

/* middle-bar column alignment */
.vf-header-search .elementor-widget-container,
.vf-header-socials .elementor-widget-container,
.vf-header-cart .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* header cart button */





/* keep the four social glyphs on one line */
.vf-socials .elementor-social-icons-wrapper {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center;
}

/* keep the logo on one line */
.vf-header-logo p { white-space: nowrap; overflow: visible; }

/* breathing room between logo and search pill */
.vf-header-search { padding-left: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Header: stack into clean rows on small screens ---- */
@media (max-width: 1024px) {

    /* logo + cart share a row; search full width beneath */
    .vf-header-logo .elementor-widget-container,
    .vf-header-cart .elementor-widget-container {
        justify-content: flex-start;
    }

    .vf-header-logo p,
    .vf-header-logo span {
        font-size: 20px !important;
        letter-spacing: 1.4px !important;
    }

    .vf-header-cart { text-align: right; }
    .vf-header-cart .elementor-widget-container { justify-content: flex-end !important; }

    /* search spans the full width */
    .vf-header-search {
        width: 100%;
        padding-left: 0;
        margin-top: 10px;
    }


    .vf-socials,
    .vf-header-socials { margin-top: 10px; }
}

@media (max-width: 767px) {

    /* middle bar section padding */
    .elementor-section:has(.vf-header-search) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* nav menu: no mid-word wrapping */
    .elementor-widget-text-editor p[style*="text-align:center"] a {
        display: inline-block;
        margin: 0 12px 8px !important;
        line-height: 1.9;
    }


    /* product cards: 2 per row on phones */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: calc(50% - 8px) !important;
        margin: 0 0 12px !important;
        padding: 10px 10px 14px;
    }

    .woocommerce ul.products li.product a img { max-height: 200px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; min-height: 54px; }
    .woocommerce ul.products li.product .button { padding: 8px 14px !important; font-size: 12px !important; }

    /* single product: stack gallery above summary */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary { width: 100%; float: none; }

    .woocommerce div.product .woocommerce-tabs .panel { padding: 18px 16px; }

    .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 6px; }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 14px; font-size: 13px; }

    /* related grid single column */
    .vf-related-grid { grid-template-columns: 1fr; }

    .vf-trust-badge { font-size: 11.5px; padding: 6px 11px; }

    .vf-author-box { padding: 18px; }
    .vf-single-post .entry-content { font-size: 16px; }
}

@media (max-width: 400px) {
    .woocommerce ul.products li.product a img { max-height: 175px; }
    .vf-header-logo p,
    .vf-header-logo span { font-size: 18px !important; }
}

/* header rows: logo left / socials+cart right on desktop,
   search on its own full-width row */
.vf-header-logo { order: 1; }
.vf-header-socials { order: 2; }
.vf-header-cart { order: 2; }



/* ---- Hero sizing on phones ---- */
@media (max-width: 767px) {
    .elementor-section:has(.elementor-widget-heading h1) {
        padding: 48px 16px !important;
    }

    .elementor-section:has(.elementor-widget-heading h1) h1.elementor-heading-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    .elementor-section:has(.elementor-widget-heading h1) .elementor-widget-text-editor p {
        font-size: 14px !important;
        line-height: 1.6;
    }

    /* section headings */
    .elementor-widget-heading h2.elementor-heading-title { font-size: 23px !important; }

    /* keep the background image from fighting the text */
    .elementor-section:has(.elementor-widget-heading h1) {
        background-overlay-color: rgba(10, 10, 10, 0.88) !important;
    }
}

/* ---- Product grid on phones: one column ----
   Elementor/Woo set card width in %, so overriding width alone collides
   with the 4-col rule and squeezes text to one letter per line.
   flex + width:auto forces a clean single-column stack instead. */
@media (max-width: 767px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -6px !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 0 16px !important;
        padding: 14px 14px 18px !important;
        overflow: hidden;
    }

    .woocommerce ul.products li.product a img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin: 0 auto 12px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        min-height: 0 !important;
        font-size: 15px !important;
        padding: 0 !important;
        overflow-wrap: break-word;
        word-break: normal !important;
    }

    .woocommerce ul.products li.product .button {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        margin: 12px auto 0 !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 16px !important;
        overflow-wrap: break-word;
    }
}

/* quantity + cart button on small screens */
@media (max-width: 767px) {
    .woocommerce div.product form.cart .button,
    .woocommerce div.product form.cart .button:hover {
        background: #E02424 !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
        flex: 1 1 190px;
        text-align: center;
        justify-content: center;
    }

    /* disabled still has to read as disabled */
    .woocommerce div.product form.cart .single_add_to_cart_button.disabled,
    .woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
    .woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
        background: #FCE7E7 !important;
        color: #B91C1C !important;
    }

    .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
    .woocommerce div.product form.cart:not(.variations_form) {
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
    }

    .woocommerce div.product form.cart div.quantity {
        flex: 0 0 auto;
    }

    .woocommerce div.product form.cart div.quantity .vf-qty-btn {
        width: 40px;
    }

    .woocommerce div.product form.cart .variations select {
        height: 46px;
        padding: 0 40px 0 14px;
        background-position: right 14px center;
        font-size: 15px;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        padding: 0 22px !important;
    }
}

/* the button sits beside the stepper while there is room, and drops to its own
   full-width row on narrow phones — the 190px basis above handles the break */

@media (min-width: 1025px) {
    /* socials + cart sit together on the right of the search bar */
    .vf-header-socials .elementor-widget-container,
    .vf-header-cart .elementor-widget-container {
        justify-content: center;
    }
}

/* all four social glyphs must stay on one line */
@media (min-width: 1025px) {
    .vf-socials .elementor-social-icons-wrapper {
        flex-wrap: nowrap !important;
        display: flex !important;
        gap: 14px !important;
        align-items: center;
        justify-content: center;
    }
    .vf-socials .elementor-social-icon {
        width: auto !important;
        height: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
}


/* ============================================================
   HEADER MIDDLE BAR — white scheme (matches main site)
   White bar, purple wordmark, light grey controls.
   ============================================================ */

/* the bar itself */
.elementor-section:has(.vf-header-search) {
    background-color: #FFFFFF !important;
}

/* purple wordmark */
.vf-header-logo span,
.vf-header-logo p span {
    color: #E02424 !important;
}

.vf-header-logo span span {
    color: #E02424 !important;
}

.vf-header-logo p { color: #E02424 !important; }

/* search: light grey pill on white */



/* social icons: mid grey, purple on hover */
.vf-socials .elementor-social-icon {
    color: #A8A8A8 !important;
    --e-social-icon-icon-color: #A8A8A8;
}

.vf-socials .elementor-social-icon:hover {
    color: #E02424 !important;
    --e-social-icon-icon-color: #E02424;
}

/* cart: dark grey text + icon, purple hover, divider before it */
.vf-header-cart .elementor-column > .elementor-widget-container,
.vf-header-cart::before {
    border-left: 1px solid #DDDDDD;
}

.vf-header-cart {
    padding-left: 18px;
    border-left: 1px solid #DDDDDD;
}


/* count badge as a bordered box, like the original */

/* cart divider only makes sense in the desktop row */
@media (max-width: 1024px) {
    .vf-header-cart {
        border-left: none !important;
        padding-left: 0 !important;
        justify-content: center !important;
    }
}

/* ============================================================
   REAL ELEMENTOR WIDGETS in the header middle bar
   (replaces the shortcode-based styling above)
   ============================================================ */

/* --- logo: Image widget --- */
.vf-header-logo .elementor-widget-container { display: flex; align-items: center; justify-content: flex-start; }
.vf-header-logo img {
    width: 190px !important;
    max-width: 190px;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- search: Elementor Search widget --- */
.vf-header-search .elementor-widget-container { display: block; }

.vf-header-search .elementor-search-form,
.vf-header-search form.elementor-search-form {
    display: flex !important;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #F1F1F1 !important;
    border: none !important;
    border-radius: 26px !important;
    padding: 0 6px 0 20px !important;
    height: 46px;
    box-shadow: none !important;
}

.vf-header-search input.elementor-search-form__input,
.vf-header-search .elementor-search-form__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    font-size: 14.5px !important;
    padding: 12px 0 !important;
    min-height: 0 !important;
}

.vf-header-search input.elementor-search-form__input::placeholder { color: #8A8A8A !important; }

.vf-header-search .elementor-search-form__input::-webkit-search-cancel-button { display: none; }

.vf-header-search button.elementor-search-form__button,
.vf-header-search .elementor-search-form__button {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vf-header-search .elementor-search-form__button svg,
.vf-header-search .elementor-search-form__button .elementor-search-icon {
    width: 18px !important;
    height: 18px !important;
    fill: #6B6B6B !important;
    stroke: #6B6B6B !important;
    color: #6B6B6B !important;
}

.vf-header-search .elementor-search-form__button:hover { background: rgba(75, 46, 131, .08) !important; }
.vf-header-search .elementor-search-form__button:hover svg { fill: #E02424 !important; stroke: #E02424 !important; }

/* the Search widget collapses to 0 height without an explicit box */
.vf-header-search .elementor-search-form {
    min-height: 46px !important;
    box-sizing: border-box !important;
}

.vf-header-search .elementor-search-form__input {
    min-height: 44px !important;
    line-height: 1.4 !important;
}

.vf-header-search .elementor-widget-container > .elementor-search-form { display: flex !important; }

/* Elementor hides search widgets without a skin loaded; force ours */
.vf-header-search .elementor-search-form__button-wrapper { display: flex !important; }
.vf-header-search .elementor-search-form__button { display: flex !important; }

/* WooCommerce product search widget in the header */
.vf-header-search .widget-product_search,
.vf-header-search .woocommerce-product-search {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.vf-header-search form.woocommerce-product-search {
    display: flex !important;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #F1F1F1 !important;
    border: 1px solid #E4E4E4 !important;
    border-radius: 26px !important;
    padding: 4px 4px 4px 20px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.vf-header-search .search-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 8px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #333333 !important;
    font-size: 14.5px !important;
}

.vf-header-search .search-field:focus { box-shadow: none !important; outline: none !important; }
.vf-header-search .search-field::placeholder { color: #8A8A8A !important; }

.vf-header-search button[type="submit"],
.vf-header-search .button {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #6B6B6B !important;
    font-size: 0 !important;          /* hide the label text, keep the icon */
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vf-header-search button[type="submit"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
}

.vf-header-search button[type="submit"]:hover { color: #E02424 !important; background: rgba(224,36,36,.08) !important; }

/* ============================================================
   HFE Cart widget in the white header bar
   ============================================================ */

.vf-header-cart .hfe-cart,
.vf-header-cart .hfe-menu-cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

.vf-header-cart .hfe-cart a,
.vf-header-cart .hfe-menu-cart a {
    background: transparent !important;
    color: #4A4A4A !important;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.vf-header-cart .hfe-cart a:hover,
.vf-header-cart .hfe-menu-cart a:hover { color: #E02424 !important; }

.vf-header-cart .hfe-cart-count,
.vf-header-cart .hfe-menu-cart .hfe-cart-count,
.vf-header-cart .hfe-cart-count-mini {
    background: #FFFFFF !important;
    color: #E02424 !important;
    border: 2px solid #E02424 !important;
    border-radius: 4px !important;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    font-size: 12px !important;
    font-weight: 800;
    padding: 0 3px;
    position: absolute;
    top: -8px;
    left: -2px;
}

.vf-header-cart .hfe-cart a:hover .hfe-cart-count { background: #E02424 !important; color: #FFFFFF !important; }

/* HFE cart: "CART / total" + bag icon with count, matching the main site */
.vf-header-cart .hfe-menu-cart__toggle,
.vf-header-cart .hfe-button-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vf-header-cart a.hfe-cart-container {
    background: transparent !important;
    color: #4A4A4A !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: .5px;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    padding: 0 !important;
}

.vf-header-cart a.hfe-cart-container:hover { color: #E02424 !important; }

/* prefix the total with CART / */
.vf-header-cart .hfe-subtotal::before {
    content: "CART / ";
    color: inherit;
}

/* bag icon on the right with the count badge */
.vf-header-cart .elementor-button-icon {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    order: 2;
}

.vf-header-cart .elementor-button-icon .eicon {
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L6 8z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L6 8z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.vf-header-cart .elementor-button-icon::after {
    content: attr(data-counter);
    position: absolute;
    top: -8px;
    right: -10px;
    background: #FFFFFF;
    color: #E02424;
    border: 2px solid #E02424;
    border-radius: 4px;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    padding: 0 3px;
}

/* Elementor button widget hides its label for icon-only carts — force it back */
.vf-header-cart .elementor-button-text.hfe-subtotal {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .5px;
}

.vf-header-cart .elementor-button-text.hfe-subtotal .woocommerce-Price-amount {
    color: inherit !important;
}

/* stop the cart label wrapping inside its narrow column */
.vf-header-cart a.hfe-cart-container { white-space: nowrap; }
.vf-header-cart .elementor-button-text.hfe-subtotal { white-space: nowrap; }

/* Logo sizing: source PNG is 400x84, so 190px wide gives ~40px tall */
.vf-header-logo img {
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
}

/* Footer logo sits on the dark panel, so give it a light plate to read against */
.elementor-section:has(.elementor-widget-image img[src*="vaporfantasy-logo.png"]) {
    background-image: none;
}

.elementor-section:has(.elementor-widget-image img[src*="vaporfantasy-logo.png"]) .elementor-widget-image img {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 8px 14px;
    width: 185px !important;
    max-width: 185px !important;
}

/* ============================================================
   HEADER NAVIGATION — real WordPress menu (Elementor Nav Menu)
   ============================================================ */

.vf-main-nav .elementor-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    width: 100%;
}

.vf-main-nav li { position: relative; }

.vf-main-nav a {
    display: inline-block !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    padding: 6px 16px !important;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}

.vf-main-nav a:hover,
.vf-main-nav .current-menu-item > a,
.vf-main-nav .current_page_item > a {
    color: #E02424 !important;
    background: rgba(255, 255, 255, .07);
}

/* dropdown submenus */
.vf-main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #1A1A1A;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
    padding: 6px 0;
    z-index: 60;
    display: none;
}

.vf-main-nav li:hover > .sub-menu,
.vf-main-nav li:focus-within > .sub-menu { display: block; }

.vf-main-nav .sub-menu a {
    display: block !important;
    width: 100%;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0;
}

.vf-main-nav .sub-menu a:hover { color: #E02424 !important; background: rgba(255, 255, 255, .06); }

/* caret on parents */
.vf-main-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}

/* Elementor wraps items in a list; normalise spacing */
.vf-main-nav > ul,
.vf-main-nav .elementor-nav-menu { list-style: none; margin: 0; padding: 0; }
.vf-main-nav li { list-style: none; }

@media (max-width: 767px) {
    .vf-main-nav a { font-size: 14px !important; padding: 6px 11px !important; }
    .vf-main-nav .sub-menu { position: static; box-shadow: none; background: rgba(255,255,255,.04); }
}

/* WordPress nav_menu markup (wp-widget-nav_menu) inside the header bar */
.vf-main-nav .menu,
.vf-main-nav > ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 4px;
    list-style: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}

.vf-main-nav li { list-style: none !important; position: relative; }

.vf-main-nav li a {
    display: inline-block !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    padding: 7px 16px !important;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}

.vf-main-nav li a:hover,
.vf-main-nav li.current-menu-item > a,
.vf-main-nav li.current_page_item > a {
    color: #E02424 !important;
    background: rgba(255, 255, 255, .08);
}

/* dropdowns */
.vf-main-nav li .sub-menu,
.vf-main-nav ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #1A1A1A;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    padding: 6px 0;
    z-index: 60;
    display: none;
    list-style: none;
    margin: 0;
}

.vf-main-nav li:hover > ul,
.vf-main-nav li:focus-within > ul { display: block; }

.vf-main-nav li ul li a {
    display: block !important;
    width: 100%;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0;
}

.vf-main-nav li ul li a:hover { color: #E02424 !important; background: rgba(255, 255, 255, .06); }

.vf-main-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .vf-main-nav li a { font-size: 13.5px !important; padding: 6px 10px !important; }
    .vf-main-nav li ul { position: static; box-shadow: none; background: rgba(255,255,255,.05); width: 100%; }
}

/* HFE navigation-menu widget in the black bar */
.vf-main-nav .hfe-navigation-menu,
.vf-main-nav ul,
.vf-main-nav .menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 4px;
    list-style: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}

.vf-main-nav li { list-style: none !important; position: relative; }

.vf-main-nav li > a {
    display: inline-block !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 7px 16px !important;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}

.vf-main-nav li > a:hover,
.vf-main-nav li.current-menu-item > a,
.vf-main-nav li.current_page_item > a {
    color: #E02424 !important;
    background: rgba(255, 255, 255, .08);
}

.vf-main-nav ul ul,
.vf-main-nav li .sub-menu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 210px;
    background: #1A1A1A;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
    padding: 6px 0;
    z-index: 60;
    display: none;
}
.vf-main-nav li:hover > ul,
.vf-main-nav li:focus-within > ul { display: block !important; }
.vf-main-nav ul ul li > a {
    display: block !important; width: 100%;
    padding: 8px 18px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 0;
}
.vf-main-nav .menu-item-has-children > a::after {
    content: ""; display: inline-block; margin-left: 7px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; vertical-align: middle;
}

/* ============================================================
   HFE NAV MENU — correct selectors
   HFE renders .hfe-nav-menu > .hfe-nav-menu__dropdown, not a plain ul.menu
   ============================================================ */

.vf-main-nav .hfe-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}

.vf-main-nav .hfe-nav-menu li {
    list-style: none !important;
    position: relative;
}

.vf-main-nav .hfe-nav-menu li > a {
    display: inline-block !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    padding: 8px 17px !important;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

.vf-main-nav .hfe-nav-menu li > a:hover,
.vf-main-nav .hfe-nav-menu li.current-menu-item > a,
.vf-main-nav .hfe-nav-menu li.current_page_item > a {
    color: #E02424 !important;
    background: rgba(255, 255, 255, .09);
}

/* submenus */
.vf-main-nav .hfe-nav-menu .hfe-nav-menu__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px;
    background: #161616;
    border: 1px solid #262626;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    padding: 8px;
    margin: 0;
    list-style: none;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}

.vf-main-nav .hfe-nav-menu li:hover > .hfe-nav-menu__dropdown,
.vf-main-nav .hfe-nav-menu li:focus-within > .hfe-nav-menu__dropdown {
    opacity: 1;
    visibility: visible;
}

.vf-main-nav .hfe-nav-menu .hfe-nav-menu__dropdown li > a {
    display: block !important;
    width: 100%;
    padding: 9px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px;
    color: #D8D8D8 !important;
}

.vf-main-nav .hfe-nav-menu .hfe-nav-menu__dropdown li > a:hover {
    color: #FFFFFF !important;
    background: rgba(224, 36, 36, .18);
}

/* caret */
.vf-main-nav .hfe-nav-menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    opacity: .85;
}

/* hide HFE's mobile toggle on desktop */
.vf-main-nav .hfe-nav-menu__toggle { display: none !important; }

/* ============================================================
   HFE nav — submenu markup uses .hfe-has-submenu, not
   .hfe-nav-menu__dropdown. Corrected selectors.
   ============================================================ */

.vf-main-nav .hfe-has-submenu {
    position: relative;
}

/* caret on items that have children */
.vf-main-nav .hfe-has-submenu > a::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    opacity: .9;
    transition: transform .15s ease;
}

.vf-main-nav .hfe-has-submenu:hover > a::after { transform: rotate(180deg); }

/* the submenu list */
.vf-main-nav .hfe-has-submenu > ul,
.vf-main-nav .hfe-has-submenu .hfe-nav-menu__dropdown {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 215px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
    padding: 8px;
    margin: 0;
    list-style: none;
    z-index: 80;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.vf-main-nav .hfe-has-submenu:hover > ul,
.vf-main-nav .hfe-has-submenu:focus-within > ul {
    opacity: 1;
    visibility: visible;
}

.vf-main-nav .hfe-has-submenu > ul li { list-style: none !important; }

.vf-main-nav .hfe-has-submenu > ul li > a {
    display: block !important;
    width: 100%;
    color: #D5D5D5 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
    border-radius: 8px;
    white-space: nowrap;
}

.vf-main-nav .hfe-has-submenu > ul li > a:hover {
    color: #FFFFFF !important;
    background: rgba(224, 36, 36, .2);
}

/* ============================================================
   HFE nav — the parent link sits inside .hfe-has-submenu-container,
   so `> a` never matched. Target the container's link instead, and
   hide HFE's built-in caret span (we draw our own).
   ============================================================ */

.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a,
.vf-main-nav li > a {
    display: inline-block !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    padding: 8px 17px !important;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a:hover,
.vf-main-nav li.current-menu-item > a,
.vf-main-nav li.current_page_item > a {
    color: #E02424 !important;
    background: rgba(255, 255, 255, .09);
}

/* HFE renders its own caret <span>; hide it and draw ours */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a > span { display: none !important; }

.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    opacity: .9;
}

.vf-main-nav .hfe-has-submenu:hover > .hfe-has-submenu-container > a::after { transform: rotate(180deg); }

/* submenu list is a sibling .sub-menu of the container */
.vf-main-nav .hfe-has-submenu > ul.sub-menu,
.vf-main-nav .hfe-has-submenu > .hfe-nav-menu__dropdown {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 215px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
    padding: 8px;
    margin: 0;
    list-style: none;
    z-index: 80;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}

.vf-main-nav .hfe-has-submenu:hover > ul.sub-menu,
.vf-main-nav .hfe-has-submenu:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
}

.vf-main-nav .hfe-has-submenu > ul.sub-menu li > a {
    display: block !important;
    width: 100%;
    color: #D5D5D5 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
    border-radius: 8px;
    white-space: nowrap;
}

.vf-main-nav .hfe-has-submenu > ul.sub-menu li > a:hover {
    color: #FFFFFF !important;
    background: rgba(224, 36, 36, .2);
}

/* ============================================================
   HEADER — reference design
   row 1 red info bar | row 2 white main bar | row 3 black icon nav
   ============================================================ */

/* ---------- row 1: red info bar ---------- */
.vf-topbar-left .elementor-icon-list-text,
.vf-topbar-right .elementor-icon-list-text {
    color: #FFFFFF !important;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
}

.vf-topbar-left .elementor-icon-list-icon,
.vf-topbar-right .elementor-icon-list-icon { color: #FFFFFF !important; }

.vf-topbar-right .elementor-icon-list-item { text-align: right; }
.vf-topbar-right .elementor-icon-list-text { text-align: right; }

/* ---------- row 2: account / wishlist ---------- */



/* social icons closer together beside account */
.vf-header-socials .elementor-social-icons-wrapper { gap: 13px !important; }
.vf-header-socials .elementor-social-icon { color: #4A4A4A !important; --e-social-icon-icon-color: #4A4A4A; font-size: 17px; }
.vf-header-socials .elementor-social-icon:hover { color: #E02424 !important; --e-social-icon-icon-color: #E02424; }

/* search button inside the pill (reference has a labelled Search button) */
.vf-header-search form.woocommerce-product-search {
    padding-right: 5px !important;
}

.vf-header-search button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 104px !important;
    height: 38px !important;
    border-radius: 20px !important;
    background: #E02424 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 20px !important;
}

.vf-header-search button[type="submit"]::before { display: none !important; }
.vf-header-search button[type="submit"]:hover { background: #8E1616 !important; color: #FFFFFF !important; }

/* cart: outlined red pill like the reference */
.vf-header-cart a.hfe-cart-container {
    border: 2px solid #E02424;
    border-radius: 12px;
    padding: 7px 14px !important;
    gap: 10px;
    background: #FFFFFF !important;
}

.vf-header-cart a.hfe-cart-container:hover { background: #FFF3F3 !important; }
.vf-header-cart .elementor-button-icon .eicon { color: #E02424 !important; background: #E02424; }

.vf-header-cart .elementor-button-icon::after {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    top: -12px;
    right: -12px;
}

.vf-header-cart .elementor-button-text.hfe-subtotal { color: #2B2B2B !important; }

/* ---------- row 3: black icon nav ---------- */
.vf-main-nav .hfe-nav-menu { gap: 4px !important; }

.vf-main-nav .hfe-nav-menu li > a,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a {
    padding: 14px 20px !important;
    font-size: 15px !important;
}

.vf-main-nav .hfe-nav-menu li > a:hover,
.vf-main-nav .hfe-nav-menu li.current-menu-item > a,
.vf-main-nav .hfe-nav-menu li.current_page_item > a,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a:hover {
    color: #E02424 !important;
    background: rgba(224, 36, 36, .12);
}

/* Home highlighted in red, like the reference */
.vf-main-nav .hfe-nav-menu > li:first-child > a,
.vf-main-nav .current-menu-item > a {
    color: #FFFFFF !important;
    background: #E02424 !important;
    border-radius: 8px;
}

.vf-main-nav .hfe-nav-menu > li:first-child > a:hover {
    color: #FFFFFF !important;
    background: #C81E1E !important;
}

/* category icons before each top-level label */
.vf-main-nav .hfe-nav-menu > li > a::before,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    background-color: #FFFFFF;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

.vf-main-nav .hfe-nav-menu > li:nth-child(1) > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.vf-main-nav .hfe-nav-menu > li:nth-child(2) > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='2'/%3E%3Cpath d='M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='2'/%3E%3Cpath d='M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E");
}
.vf-main-nav .hfe-nav-menu > li:nth-child(3) > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2s6 6.5 6 11a6 6 0 1 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2s6 6.5 6 11a6 6 0 1 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
}
.vf-main-nav .hfe-nav-menu > li:nth-child(4) > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 15a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 4.6 8.3l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.6h.1a2 2 0 1 1 4 0V5a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21 11h.1a2 2 0 1 1 0 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 15a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 4.6 8.3l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 10 4.6h.1a2 2 0 1 1 4 0V5a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21 11h.1a2 2 0 1 1 0 4z'/%3E%3C/svg%3E");
}

/* caret only on items that have children (not Home) */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after { display: inline-block; }
.vf-main-nav .hfe-nav-menu > li:not(.menu-item-has-children) > a::after { content: ""; }

.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::before { display: none !important; }

/* ============================================================
   HEADER — reference design
   row 1 red info bar | row 2 white main bar | row 3 black icon nav
   ============================================================ */

/* ---------- row 1: red info bar ---------- */
.vf-topbar-left .elementor-icon-list-text,
.vf-topbar-right .elementor-icon-list-text {
    color: #FFFFFF !important;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
}

.vf-topbar-left .elementor-icon-list-icon,
.vf-topbar-right .elementor-icon-list-icon { color: #FFFFFF !important; }

.vf-topbar-right .elementor-icon-list-item,
.vf-topbar-right .elementor-icon-list-text { text-align: right; }

/* ---------- row 2: account / wishlist ---------- */



.vf-header-socials .elementor-social-icons-wrapper { gap: 13px !important; }
.vf-header-socials .elementor-social-icon { color: #4A4A4A !important; --e-social-icon-icon-color: #4A4A4A; font-size: 17px; }
.vf-header-socials .elementor-social-icon:hover { color: #E02424 !important; --e-social-icon-icon-color: #E02424; }

/* labelled Search button inside the pill */
.vf-header-search form.woocommerce-product-search { padding-right: 5px !important; }

.vf-header-search button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 104px !important;
    height: 38px !important;
    border-radius: 20px !important;
    background: #E02424 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 20px !important;
}

.vf-header-search button[type="submit"]::before { display: none !important; }
.vf-header-search button[type="submit"]:hover { background: #8E1616 !important; color: #FFFFFF !important; }

/* cart: outlined red pill */
.vf-header-cart a.hfe-cart-container {
    border: 2px solid #E02424;
    border-radius: 12px;
    padding: 7px 14px !important;
    gap: 10px;
    background: #FFFFFF !important;
}

.vf-header-cart a.hfe-cart-container:hover { background: #FFF3F3 !important; }
.vf-header-cart .elementor-button-icon .eicon { color: #E02424 !important; background: #E02424; }

.vf-header-cart .elementor-button-icon::after {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    top: -12px;
    right: -12px;
}

.vf-header-cart .elementor-button-text.hfe-subtotal { color: #2B2B2B !important; }

/* ---------- row 3: black icon nav ---------- */
.vf-main-nav .hfe-nav-menu { gap: 4px !important; }

.vf-main-nav .hfe-nav-menu li > a,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a {
    padding: 14px 20px !important;
    font-size: 15px !important;
}

.vf-main-nav .hfe-nav-menu li > a:hover,
.vf-main-nav .hfe-nav-menu li.current-menu-item > a,
.vf-main-nav .hfe-nav-menu li.current_page_item > a,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a:hover {
    color: #E02424 !important;
    background: rgba(224, 36, 36, .12);
}

/* Home highlighted red, as in the reference */
.vf-main-nav .hfe-nav-menu > li:first-child > a,
.vf-main-nav .current-menu-item > a {
    color: #FFFFFF !important;
    background: #E02424 !important;
    border-radius: 8px;
}

.vf-main-nav .hfe-nav-menu > li:first-child > a:hover {
    color: #FFFFFF !important;
    background: #C81E1E !important;
}

/* category icons on top-level items (not Home) */
.vf-main-nav .hfe-nav-menu > li:not(:first-child) > a::before,
.vf-main-nav .hfe-nav-menu > li:not(:first-child) > .hfe-has-submenu-container > a::before {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    background-color: #FFFFFF;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* per-item icons, keyed to the reference design */
.vf-main-nav .hfe-nav-menu > li:nth-child(2) > a::before,
.vf-main-nav .hfe-nav-menu > li:nth-child(2) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='2'/%3E%3Cpath d='M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='8' y='2' width='8' height='20' rx='2'/%3E%3Cpath d='M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E");
}

.vf-main-nav .hfe-nav-menu > li:nth-child(3) > a::before,
.vf-main-nav .hfe-nav-menu > li:nth-child(3) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2s6 6.5 6 11a6 6 0 1 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2s6 6.5 6 11a6 6 0 1 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E");
}

.vf-main-nav .hfe-nav-menu > li:nth-child(4) > a::before,
.vf-main-nav .hfe-nav-menu > li:nth-child(4) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
}

/* caret only on items that have children */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after { display: inline-block; }

@media (max-width: 767px) {
    .vf-main-nav .hfe-nav-menu li > a,
    .vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a { padding: 10px 12px !important; font-size: 13.5px !important; }
    .vf-header-search button[type="submit"] { min-width: 78px !important; font-size: 13px !important; }
}

/* ============================================================
   HEADER v2 — Account/Wishlist as icon-boxes, tidier cart
   ============================================================ */

/* icon-over-label boxes (Account, Wishlist) */
.vf-iconbox .elementor-icon-box-icon {
    margin-bottom: 4px !important;
}

.vf-iconbox .elementor-icon-box-icon i,
.vf-iconbox .elementor-icon-box-icon svg {
    font-size: 21px !important;
    color: #2B2B2B !important;
}

.vf-iconbox .elementor-icon-box-title,
.vf-iconbox .elementor-icon-box-title a {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    letter-spacing: .2px;
    text-decoration: none !important;
}

.vf-iconbox a:hover .elementor-icon-box-icon i,
.vf-iconbox a:hover .elementor-icon-box-icon svg { color: #E02424 !important; }
.vf-iconbox a:hover .elementor-icon-box-title,
.vf-iconbox a:hover .elementor-icon-box-title a { color: #E02424 !important; }

.vf-iconbox .elementor-widget-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* cart: bag icon left, CART over total — like the reference */
.vf-header-cart a.hfe-cart-container {
    gap: 11px;
    padding: 8px 16px !important;
    border-radius: 14px !important;
    align-items: center;
}

.vf-header-cart .elementor-button-icon {
    order: -1;
}

/* subtotal as two stacked lines: CART (dark) over total (red) */
.vf-header-cart .elementor-button-text.hfe-subtotal {
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25 !important;
}

.vf-header-cart .elementor-button-text.hfe-subtotal::before {
    content: "CART";
    color: #2B2B2B !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .6px;
}

.vf-header-cart .elementor-button-text.hfe-subtotal .woocommerce-Price-amount {
    color: #E02424 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Main bar: flex sizing lives further down, where the Elementor 4 markup
   (columns as direct children of .elementor-container) is targeted. */
@media (min-width: 1025px) {
    .vf-header-search .elementor-widget-container { width: 100%; }
    .vf-header-search form.woocommerce-product-search { width: 100% !important; max-width: 560px !important; }
    .vf-header-search .search-field { min-width: 220px !important; }
}

/* breathing room between the six header columns */
@media (min-width: 1025px) {
    .vf-iconbox .elementor-widget-container { min-width: 72px; }
    .vf-header-socials .elementor-social-icons-wrapper { gap: 12px !important; }
}

/* Account/Wishlist labels were touching: keep both on one line */
@media (min-width: 1025px) {
    .vf-iconbox .elementor-icon-box-title,
    .vf-iconbox .elementor-icon-box-title a {
        white-space: nowrap;
        text-align: center;
    }
}

/* Elementor 4: header columns are direct flex children of .elementor-container,
   not the legacy row + column-wrap wrapper — flex sizing with real gaps */
@media (min-width: 1025px) {
    .elementor-container:has(.vf-header-search) {
        display: flex !important;
        column-gap: 14px;
        align-items: center;
    }

    .elementor-container:has(.vf-header-search) > .elementor-column {
        float: none !important;
    }

    .elementor-column:has(.vf-header-logo) {
        flex: 0 0 190px !important;
        width: 190px !important;
    }

    .elementor-column:has(.vf-header-search) {
        flex: 1 1 auto !important;
        width: auto !important;
    }

    .elementor-column:has(.vf-iconbox) {
        flex: 0 0 80px !important;
        width: 80px !important;
    }

    .vf-header-search form.woocommerce-product-search {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Account / Wishlist: uniform sizing, spacing and colors site-wide */
.vf-iconbox .elementor-widget-container {
    min-height: 52px;
    gap: 3px;
}

.vf-iconbox .elementor-icon-box-icon i,
.vf-iconbox .elementor-icon-box-icon svg {
    font-size: 20px !important;
    color: #333333 !important;
    line-height: 1;
}

.vf-iconbox .elementor-icon-box-title,
.vf-iconbox .elementor-icon-box-title a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.vf-iconbox a:hover .elementor-icon-box-icon i,
.vf-iconbox a:hover .elementor-icon-box-icon svg { color: #E02424 !important; }
.vf-iconbox a:hover .elementor-icon-box-title,
.vf-iconbox a:hover .elementor-icon-box-title a { color: #E02424 !important; }

/* ============================================================
   TOP INFO BAR — uniform: even spacing, one height, all centered
   ============================================================ */

@media (min-width: 1025px) {
    .elementor-container:has(.vf-topbar-left) {
        display: flex !important;
        align-items: center !important;
        column-gap: 24px;
    }

    .elementor-container:has(.vf-topbar-left) > .elementor-column {
        display: flex;
        align-items: center;
    }
}

/* left + right items on one line each */
.vf-topbar-left .elementor-icon-list-item,
.vf-topbar-right .elementor-icon-list-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important;
}

.vf-topbar-left .elementor-icon-list-text,
.vf-topbar-right .elementor-icon-list-text {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.vf-topbar-right .elementor-icon-list-text { text-align: right; }

/* vertical centering inside each column */
.vf-topbar-left .elementor-widget-container,
.vf-topbar-right .elementor-widget-container {
    display: flex;
    align-items: center;
    height: 100%;
}

/* right block keeps its two lines but stays compact */
.vf-topbar-right .elementor-icon-list-text br { line-height: 1.1; }

/* Top bar: true 3-column grid — left / centered warning / right */
@media (min-width: 1025px) {
    .elementor-container:has(.vf-topbar-left) {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 24px;
    }

    .elementor-container:has(.vf-topbar-left) > .elementor-column {
        width: auto !important;
    }

    .elementor-container:has(.vf-topbar-left) > .elementor-column:first-child {
        justify-self: start;
    }

    .elementor-container:has(.vf-topbar-left) > .elementor-column:nth-child(2) {
        justify-self: center;
    }

    .elementor-container:has(.vf-topbar-left) > .elementor-column:last-child {
        justify-self: end;
    }
}

/* Account/Wishlist: tight icon+label pair, vertically centered like the rest */
.vf-iconbox .elementor-widget-container {
    min-height: 0 !important;
    gap: 2px !important;
    justify-content: center !important;
}

.vf-iconbox .elementor-icon-box-icon { margin-bottom: 0 !important; }
.vf-iconbox .elementor-icon-box-icon i,
.vf-iconbox .elementor-icon-box-icon svg { font-size: 19px !important; line-height: 1 !important; }
.vf-iconbox .elementor-icon-box-title { line-height: 1.1 !important; }

/* every main-bar column vertically centered */
.elementor-container:has(.vf-header-search) {
    align-items: center !important;
}

.elementor-container:has(.vf-header-search) > .elementor-column > .elementor-widget-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}

.vf-header-logo .elementor-widget-container,
.vf-header-cart .elementor-widget-container {
    align-items: center !important;
}

/* remove the divider bar before the cart on all breakpoints */
.vf-header-cart {
    border-left: none !important;
    padding-left: 0 !important;
}

/* ============================================================
   NAV ICONS — one small icon per top-level item (reference design)
   ============================================================ */

/* base: icon slot before every top-level label */
.vf-main-nav .hfe-nav-menu > li > a::before,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* 1 Home — house (red pill item, white icon) */
.vf-main-nav .hfe-nav-menu > li:first-child > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21a1 1 0 0 1-1 1h-5.4v-6.6h-5.2V22H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21a1 1 0 0 1-1 1h-5.4v-6.6h-5.2V22H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

/* Home: red pill like the reference */
.vf-main-nav .hfe-nav-menu > li:first-child > a {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 8px;
}

.vf-main-nav .hfe-nav-menu > li:first-child > a:hover {
    background: #C81E1E !important;
    color: #FFFFFF !important;
}

/* 2 Vape Kits — vape device */
.vf-main-nav .hfe-nav-menu > li:nth-child(2) > a::before,
.vf-main-nav .hfe-has-submenu:nth-child(2) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='14' rx='2'/%3E%3Cpath d='M9 9h6M12 17v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='14' rx='2'/%3E%3Cpath d='M9 9h6M12 17v4'/%3E%3C/svg%3E");
}

/* 3 Disposable — slim pod stick */
.vf-main-nav .hfe-nav-menu > li:nth-child(3) > a::before,
.vf-main-nav .hfe-has-submenu:nth-child(3) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9.5' y='2' width='5' height='17' rx='2.4'/%3E%3Cpath d='M10.5 7.5h3'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9.5' y='2' width='5' height='17' rx='2.4'/%3E%3Cpath d='M10.5 7.5h3'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}

/* 4 E-Juices — droplet */
.vf-main-nav .hfe-nav-menu > li:nth-child(4) > a::before,
.vf-main-nav .hfe-has-submenu:nth-child(4) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 5.5 13.2C5.5 8.8 12 2 12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 5.5 13.2C5.5 8.8 12 2 12 2z'/%3E%3C/svg%3E");
}

/* 5 Accessories — gear */
.vf-main-nav .hfe-nav-menu > li:nth-child(5) > a::before,
.vf-main-nav .hfe-has-submenu:nth-child(5) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3.2M12 18.3v3.2M2.5 12h3.2M18.3 12h3.2M5.3 5.3l2.2 2.2M16.5 16.5l2.2 2.2M18.7 5.3l-2.2 2.2M7.5 16.5l-2.2 2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3.2M12 18.3v3.2M2.5 12h3.2M18.3 12h3.2M5.3 5.3l2.2 2.2M16.5 16.5l2.2 2.2M18.7 5.3l-2.2 2.2M7.5 16.5l-2.2 2.2'/%3E%3C/svg%3E");
}

/* 6 Nicotine Pouches — leaf */
.vf-main-nav .hfe-nav-menu > li:nth-child(6) > a::before,
.vf-main-nav .hfe-has-submenu:nth-child(6) > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 3c-9 0-15 4.5-15 12 0 1.8.5 3.4 1.3 4.7C7.5 15 12 11.5 18 10c-5 2.5-8.5 6-10.2 10.2.9.5 2 .8 3.2.8 7 0 10-6.5 9-18z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 3c-9 0-15 4.5-15 12 0 1.8.5 3.4 1.3 4.7C7.5 15 12 11.5 18 10c-5 2.5-8.5 6-10.2 10.2.9.5 2 .8 3.2.8 7 0 10-6.5 9-18z'/%3E%3C/svg%3E");
}

/* 7 Blog — document */
.vf-main-nav .hfe-nav-menu > li:nth-child(7) > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4.5'/%3E%3C/svg%3E");
}

/* dropdown children get no icon slot */
.vf-main-nav .hfe-has-submenu > ul.sub-menu li > a::before { content: none !important; }

/* Home pill: keep caret hidden (no children) */
.vf-main-nav .hfe-nav-menu > li:first-child > a::after { content: none !important; }

/* ============================================================
   NAV ICONS v2 — keyed to menu-item IDs (nth-child hit HFE's
   internal arrow elements and the kit's green accent leaked in)
   ============================================================ */

/* base slot: white icons on the black bar, top level only */
.vf-main-nav li[id^="menu-item-"] > a::before,
.vf-main-nav li[id^="menu-item-"] > .hfe-has-submenu-container > a::before {
    background-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Home 11859 — house (inside the red pill) */
.vf-main-nav li#menu-item-11859 > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21a1 1 0 0 1-1 1h-5.4v-6.6h-5.2V22H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21a1 1 0 0 1-1 1h-5.4v-6.6h-5.2V22H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

/* 41 Vape Kits — device */
.vf-main-nav li#menu-item-41 > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='14' rx='2'/%3E%3Cpath d='M9 9h6M12 17v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='14' rx='2'/%3E%3Cpath d='M9 9h6M12 17v4'/%3E%3C/svg%3E");
}

/* 34 Disposable — pod stick */
.vf-main-nav li#menu-item-34 > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9.5' y='2' width='5' height='17' rx='2.4'/%3E%3Cpath d='M10.5 7.5h3M12 19v3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9.5' y='2' width='5' height='17' rx='2.4'/%3E%3Cpath d='M10.5 7.5h3M12 19v3'/%3E%3C/svg%3E");
}

/* 35 E-Juices — droplet */
.vf-main-nav li#menu-item-35 > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 5.5 13.2C5.5 8.8 12 2 12 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2s6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 5.5 13.2C5.5 8.8 12 2 12 2z'/%3E%3C/svg%3E");
}

/* 33 Accessories — gear */
.vf-main-nav li#menu-item-33 > .hfe-has-submenu-container > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3.2M12 18.3v3.2M2.5 12h3.2M18.3 12h3.2M5.3 5.3l2.2 2.2M16.5 16.5l2.2 2.2M18.7 5.3l-2.2 2.2M7.5 16.5l-2.2 2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3.2M12 18.3v3.2M2.5 12h3.2M18.3 12h3.2M5.3 5.3l2.2 2.2M16.5 16.5l2.2 2.2M18.7 5.3l-2.2 2.2M7.5 16.5l-2.2 2.2'/%3E%3C/svg%3E");
}

/* 6883 Nicotine Pouches — leaf */
.vf-main-nav li#menu-item-6883 > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 3c-9 0-15 4.5-15 12 0 1.8.5 3.4 1.3 4.7C7.5 15 12 11.5 18 10c-5 2.5-8.5 6-10.2 10.2.9.5 2 .8 3.2.8 7 0 10-6.5 9-18z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 3c-9 0-15 4.5-15 12 0 1.8.5 3.4 1.3 4.7C7.5 15 12 11.5 18 10c-5 2.5-8.5 6-10.2 10.2.9.5 2 .8 3.2.8 7 0 10-6.5 9-18z'/%3E%3C/svg%3E");
}

/* 9432 Blog — document */
.vf-main-nav li#menu-item-9432 > a::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4.5'/%3E%3C/svg%3E");
}

/* dropdown children: never get icon slots */
.vf-main-nav ul.sub-menu li a::before { content: none !important; }

/* ============================================================
   NAV ICONS v3 — background-image SVGs (mask-image does not paint
   in some Chromium builds here). White icons baked into the SVG.
   ============================================================ */

.vf-main-nav li[id^="menu-item-"] > a::before,
.vf-main-nav li[id^="menu-item-"] > .hfe-has-submenu-container > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin-right: 9px !important;
    vertical-align: -2px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Home 11859 */
.vf-main-nav li#menu-item-11859 > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 11.2 12 3l9 8.2V21a1 1 0 0 1-1 1h-5.4v-6.6h-5.2V22H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") !important;
}

/* 41 Vape Kits */
.vf-main-nav li#menu-item-41 > .hfe-has-submenu-container > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='14' rx='2'/%3E%3Cpath d='M9 9h6M12 17v4'/%3E%3C/svg%3E") !important;
}

/* 34 Disposable */
.vf-main-nav li#menu-item-34 > .hfe-has-submenu-container > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9.5' y='2' width='5' height='17' rx='2.4'/%3E%3Cpath d='M10.5 7.5h3M12 19v3'/%3E%3C/svg%3E") !important;
}

/* 35 E-Juices */
.vf-main-nav li#menu-item-35 > .hfe-has-submenu-container > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2s6.5 6.8 6.5 11.2A6.5 6.5 0 0 1 5.5 13.2C5.5 8.8 12 2 12 2z'/%3E%3C/svg%3E") !important;
}

/* 33 Accessories */
.vf-main-nav li#menu-item-33 > .hfe-has-submenu-container > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3.2M12 18.3v3.2M2.5 12h3.2M18.3 12h3.2M5.3 5.3l2.2 2.2M16.5 16.5l2.2 2.2M18.7 5.3l-2.2 2.2M7.5 16.5l-2.2 2.2'/%3E%3C/svg%3E") !important;
}

/* 6883 Nicotine Pouches */
.vf-main-nav li#menu-item-6883 > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 3c-9 0-15 4.5-15 12 0 1.8.5 3.4 1.3 4.7C7.5 15 12 11.5 18 10c-5 2.5-8.5 6-10.2 10.2.9.5 2 .8 3.2.8 7 0 10-6.5 9-18z'/%3E%3C/svg%3E") !important;
}

/* 9432 Blog */
.vf-main-nav li#menu-item-9432 > a::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4.5'/%3E%3C/svg%3E") !important;
}

/* hide HFE's mobile menu copy on desktop (it leaks a second Home pill) */
@media (min-width: 1025px) {
    .vf-main-nav .hfe-nav-menu__toggle,
    .vf-main-nav .hfe-nav-menu__layout-mobile,
    .vf-main-nav [data-layout="mobile"],
    .vf-main-nav .hfe-mobile-nav,
    .vf-main-nav .hfe-nav-menu__mobile {
        display: none !important;
    }
}

/* inline SVG walker icons replace the pseudo-element slots */
.vf-main-nav li a::before { display: none !important; }
.vf-main-nav .vf-nav-icon {
    width: 15px;
    height: 15px;
    margin-right: 9px;
    vertical-align: -2px;
    fill: #FFFFFF;
}
.vf-main-nav li a:hover .vf-nav-icon { fill: #E02424; }
.vf-main-nav .hfe-nav-menu > li:first-child > a .vf-nav-icon { fill: #FFFFFF; }

/* keep icon + label on one line: HFE constrains li widths */
.vf-main-nav .hfe-nav-menu > li,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a {
    width: auto !important;
    white-space: nowrap !important;
}

/* HFE creative-menu stacks icon above text vertically — force horizontal */
.vf-main-nav .hfe-creative-menu a,
.vf-main-nav .hfe-menu-item,
.vf-main-nav .hfe-has-submenu-container > a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.vf-main-nav .vf-nav-icon { margin-right: 9px !important; flex: 0 0 auto; }

/* li must size to its one-line content (icon + label), not shrink */
.vf-main-nav .hfe-nav-menu > li,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a,
.vf-main-nav .hfe-nav-menu > li > a {
    width: max-content !important;
    white-space: nowrap !important;
}

/* the theme forces svg { display: block } — icons must be inline */
.vf-main-nav .vf-nav-icon {
    display: inline-block !important;
    vertical-align: -2px !important;
}

/* icon + label on one line, vertically centered:
   the label container is a block div — make it inline-flex */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
}

/* icons align to the middle of their taller neighbors */
.vf-main-nav li[id^="menu-item-"] > svg.vf-nav-icon,
.vf-main-nav .vf-nav-icon {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ============================================================
   Remove the old CSS-pseudo nav icons.
   Inline SVG icons (walker filter) are the only icons now — these
   pseudo rules still painted a second icon next to them.
   ============================================================ */

.vf-main-nav a::before,
.vf-main-nav .hfe-has-submenu-container > a::before,
.vf-main-nav .hfe-has-submenu > a::before,
.vf-main-nav .hfe-nav-menu > li > a::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* ============================================================
   NAV ICONS — larger and solid so they read at menu size
   ============================================================ */

.vf-main-nav .vf-nav-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    fill: #FFFFFF;
    stroke: none;
}

/* outline-style glyphs read better as strokes at this size */
.vf-main-nav .vf-nav-icon[stroke] {
    fill: none !important;
    stroke: #FFFFFF !important;
    stroke-width: 2 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vf-main-nav a:hover .vf-nav-icon,
.vf-main-nav a:focus-visible .vf-nav-icon { fill: #E02424 !important; }
.vf-main-nav a:hover .vf-nav-icon[stroke],
.vf-main-nav a:focus-visible .vf-nav-icon[stroke] { stroke: #E02424 !important; }

/* dropdown arrows sit closer now that icons are wider */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after { margin-left: 7px; }

/* ============================================================
   DROPDOWN SUBMENUS — dark panel, readable links.
   HFE/Astra theme styles force a white panel + near-white text, so
   these need higher specificity than the theme's own rules.
   ============================================================ */

.elementor-widget-nav-menu .vf-main-nav ul.sub-menu,
.elementor-widget-nav-menu .hfe-nav-menu ul.sub-menu,
.vf-main-nav li.hfe-has-submenu > ul.sub-menu {
    background: #161616 !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
    padding: 8px !important;
    min-width: 215px;
    margin: 0 !important;
    z-index: 999 !important;
}

.elementor-widget-nav-menu .vf-main-nav ul.sub-menu li,
.vf-main-nav li.hfe-has-submenu > ul.sub-menu li {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.elementor-widget-nav-menu .vf-main-nav ul.sub-menu li a,
.vf-main-nav li.hfe-has-submenu > ul.sub-menu li a {
    display: block !important;
    color: #E6E6E6 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-widget-nav-menu .vf-main-nav ul.sub-menu li a:hover,
.vf-main-nav li.hfe-has-submenu > ul.sub-menu li a:hover {
    color: #FFFFFF !important;
    background: rgba(224, 36, 36, .22) !important;
}

/* drop below the parent, not overlapping it */
.vf-main-nav li.hfe-has-submenu > ul.sub-menu {
    top: 100% !important;
}

/* ============================================================
   NAV LAYOUT — icon is a sibling of the link in HFE markup, so it
   must be pulled into the same inline flow (and the caret must not
   sit on top of the label).
   ============================================================ */

.vf-main-nav li[id^="menu-item-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vf-main-nav li[id^="menu-item-"] > .hfe-has-submenu-container {
    display: inline-flex !important;
    align-items: center !important;
}

.vf-main-nav .hfe-has-submenu-container > a {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* caret after the label, not overlapping it */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after {
    display: inline-block !important;
    margin-left: 8px !important;
    position: static !important;
    vertical-align: middle !important;
}

.vf-main-nav li[id^="menu-item-"]:not(.hfe-has-submenu) > a { display: inline-flex !important; align-items: center !important; }

/* ============================================================
   NAV — HFE specifics
   The link is display:block and the caret is a real <span class="sub-arrow">,
   not ::after. Target the exact elements so icon + label + caret sit in
   one horizontal line.
   ============================================================ */

.elementor-widget-nav-menu .vf-main-nav li.hfe-has-submenu,
.elementor-widget-nav-menu .vf-main-nav li.hfe-has-submenu > .hfe-has-submenu-container {
    display: inline-flex !important;
    align-items: center !important;
}

.elementor-widget-nav-menu .vf-main-nav li.hfe-has-submenu > .hfe-has-submenu-container > a.hfe-menu-item,
.elementor-widget-nav-menu .vf-main-nav li > a.hfe-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* HFE's real caret element, not a pseudo-element */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a > span.hfe-menu-toggle.sub-arrow {
    display: inline-block !important;
    position: static !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a > span.sub-arrow > i {
    font-size: 10px !important;
    line-height: 1 !important;
}

/* disable our pseudo caret (superseded by the real span) */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::after,
.vf-main-nav li > a::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   NAV — final: force inline-flex on every menu link.
   Some HFE links sit under extra wrappers, so target the link
   element itself with !important, and restore fill on the
   outline glyphs so they are visible.
   ============================================================ */

.vf-main-nav .hfe-nav-menu li a.hfe-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

/* outline glyphs need stroke, not fill */
.vf-main-nav .vf-nav-icon[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

.vf-main-nav .vf-nav-icon:not([stroke]) { fill: currentColor !important; stroke: none !important; }
.vf-main-nav a:hover .vf-nav-icon { fill: #E02424 !important; stroke: #E02424 !important; }

/* ============================================================
   NAV — final pass
   Force inline-flex on every HFE menu link (some sit under extra
   wrappers), and give outline glyphs stroke instead of fill so the
   pod/device icons are actually visible.
   ============================================================ */

.vf-main-nav .hfe-nav-menu li a.hfe-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
}

.vf-main-nav .vf-nav-icon[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

.vf-main-nav .vf-nav-icon:not([stroke]) {
    fill: currentColor !important;
    stroke: none !important;
}

.vf-main-nav a:hover .vf-nav-icon {
    fill: #E02424 !important;
    stroke: #E02424 !important;
}/* ============================================================
   NAV ICONS — solid white.
   currentColor resolved to a grey (#334155 slate) because the anchor
   inherits Astra's link colour, so the icons read as faint ghosts.
   ============================================================ */

.vf-main-nav .vf-nav-icon[stroke] {
    fill: none !important;
    stroke: #FFFFFF !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
}

.vf-main-nav .vf-nav-icon:not([stroke]) {
    fill: #FFFFFF !important;
    stroke: none !important;
    opacity: 1 !important;
}

.vf-main-nav a:hover .vf-nav-icon[stroke],
.vf-main-nav a:focus-visible .vf-nav-icon[stroke] {
    stroke: #E02424 !important;
}

.vf-main-nav a:hover .vf-nav-icon:not([stroke]),
.vf-main-nav a:focus-visible .vf-nav-icon:not([stroke]) {
    fill: #E02424 !important;
}

/* Home sits on a red pill: keep its icon white */
.vf-main-nav .hfe-nav-menu > li:first-child > a .vf-nav-icon[stroke] { stroke: #FFFFFF !important; }
.vf-main-nav .hfe-nav-menu > li:first-child > a .vf-nav-icon:not([stroke]) { fill: #FFFFFF !important; }/* ============================================================
   NAV — clean text-only layout (icons removed)
   Labels only: no icon slot, no leftover margins, carets kept.
   ============================================================ */

.vf-main-nav .vf-nav-icon { display: none !important; }

/* any element that was only reserving icon space collapses */
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a > .vf-nav-icon,
.vf-main-nav li > a > .vf-nav-icon {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}

.vf-main-nav .hfe-nav-menu li a.hfe-menu-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    white-space: nowrap !important;
}/* ============================================================
   NAV — remove HFE's built-in hover icons.
   The plugin's own CSS injects a ::before background icon on
   menu links, which still showed after our inline SVGs were gone.
   ============================================================ */

.vf-main-nav a::before,
.vf-main-nav .hfe-has-submenu-container > a::before,
.vf-main-nav .hfe-nav-menu > li > a::before,
.vf-main-nav .hfe-nav-menu li a::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}/* ============================================================
   NAV — hard-off for link pseudo-elements.
   HFE keeps a ::before icon on .hfe-menu-item; our earlier rule
   used content:none + display:none but the plugin's rule has
   equal specificity and loads later in some contexts. Set every
   property to its neutral value so nothing can paint.
   ============================================================ */

.vf-main-nav .hfe-nav-menu a.hfe-menu-item::before,
.vf-main-nav .hfe-has-submenu-container > a.hfe-menu-item::before,
.vf-main-nav li > a.hfe-menu-item::before,
.elementor-widget-nav-menu .vf-main-nav a.hfe-menu-item::before {
    content: none !important;
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border: 0 !important;
    transform: none !important;
}/* ============================================================
   NAV — kill HFE's hover/pointer icons.
   These come from the plugin's own stylesheet:
     .hfe-nav-menu .menu-item a.hfe-menu-item:hover:before
     .hfe-pointer__* .menu-item.parent a.hfe-menu-item:before/after
   so the override has to match those exact selectors.
   ============================================================ */

.hfe-nav-menu .menu-item a.hfe-menu-item:hover:before,
.hfe-nav-menu .menu-item a.hfe-menu-item:before,
.hfe-nav-menu .menu-item a.hfe-menu-item::before,
.hfe-pointer__double-line .menu-item.parent a.hfe-menu-item:before,
.hfe-pointer__overline .menu-item.parent a.hfe-menu-item:before,
.hfe-pointer__framed .menu-item.parent a.hfe-menu-item:before,
.hfe-pointer__underlined .menu-item.parent a.hfe-menu-item:before,
.hfe-pointer__framed .menu-item.parent a.hfe-menu-item:after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* ============================================================
   NAV — keep the menu centred and compact.
   ============================================================ */

.vf-main-nav .hfe-nav-menu {
    justify-content: center !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
}

.vf-main-nav .hfe-nav-menu > li {
    flex: 0 0 auto !important;
    width: auto !important;
}

.vf-main-nav .hfe-nav-menu > li > a,
.vf-main-nav .hfe-nav-menu > li > .hfe-has-submenu-container > a {
    padding: 12px 20px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
}
/* ============================================================
   NAV — submenus must never occupy layout space when closed.
   They were visibility/opacity only, so the panels still reserved
   height and could sit over page content. display:none removes them
   from flow entirely; :hover / :focus-within restores them.
   ============================================================ */

.vf-main-nav li.hfe-has-submenu > ul.sub-menu,
.vf-main-nav .hfe-has-submenu > ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 215px;
    margin: 0 !important;
    padding: 8px !important;
    background: #161616 !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
    z-index: 999 !important;
    height: auto !important;
    overflow: visible !important;
}

.vf-main-nav li.hfe-has-submenu:hover > ul.sub-menu,
.vf-main-nav li.hfe-has-submenu:focus-within > ul.sub-menu,
.vf-main-nav li.hfe-has-submenu:focus > ul.sub-menu {
    display: block !important;
}

.vf-main-nav li.hfe-has-submenu > ul.sub-menu li > a {
    display: block !important;
    width: 100% !important;
    color: #E6E6E6 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.vf-main-nav li.hfe-has-submenu > ul.sub-menu li > a:hover {
    color: #FFFFFF !important;
    background: rgba(224, 36, 36, .22) !important;
}/* ============================================================
   PRODUCT CATEGORY PAGES
   Banner + product grid styled to match the site (dark/red brand).
   ============================================================ */







/* red accent rule under the title */




/* ---------- toolbar (result count + sort) ---------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    font-size: 13px;
    color: #777777;
    font-weight: 600;
}

.woocommerce .woocommerce-ordering select {
    border: 1px solid #DDDDDD !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #FFFFFF !important;
    min-height: 0 !important;
}

/* ---------- grid density on category archives ---------- */
.woocommerce.archive.category .woocommerce ul.products,
.woocommerce.single-product-archive .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px;
    margin: 0 !important;
}

.woocommerce.archive.category ul.products li.product,
.woocommerce.single-product-archive ul.products li.product {
    width: calc(25% - 15px) !important;
    margin: 0 !important;
    float: none !important;
}

@media (max-width: 1024px) {
    .woocommerce.archive.category ul.products li.product,
    .woocommerce.single-product-archive ul.products li.product {
        width: calc(33.333% - 14px) !important;
    }
}

@media (max-width: 767px) {
    .vf-cat-title { font-size: 30px !important; }
    .vf-cat-desc { font-size: 15px; }
    .woocommerce.archive.category ul.products li.product,
    .woocommerce.single-product-archive ul.products li.product {
        width: 100% !important;
    }
}
/* ============================================================
   CATEGORY BANNER
   Markup comes from vf_cat_banner() in functions.php: H1, rule,
   one keyword H2, intro line, description, product count.
   ============================================================ */

.vf-cat-banner {
    /* No max-width: the banner sits in the same container as the product
       grid, so it lines up edge-to-edge with ul.products on desktop. */
    max-width: none;
    margin: 0 auto 12px;
    text-align: center;
}

/* Astra gives #primary a 4em (64px) top margin. On product category archives
   the card is the first thing in there, so that reads as a big gap above it.
   The bottom margin is the space between the last block and the footer. */
body.tax-product_cat #primary.content-area,
body.post-type-archive-product #primary.content-area {
    margin-top: 24px;
    margin-bottom: 40px;
}

/* Width + centring only — the card surface (background, border, radius,
   shadow, padding) is designed in the "VF Category Card" Elementor
   template, so it can be edited without touching this file. */
.vf-cat-card { margin: 0 auto; }

/* The breadcrumb lives inside the card now, at its top-left. */
.vf-cat-card nav.woocommerce-breadcrumb {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #777;
    text-align: left;
}

.vf-cat-card nav.woocommerce-breadcrumb a {
    color: #777;
    text-decoration: none;
}

.vf-cat-card nav.woocommerce-breadcrumb a:hover {
    color: var(--ast-global-color-0, #046bd2);
    text-decoration: underline;
}

/* Elementor keeps each widget's last child margin inside the widget box and
   adds its own 20px gap on top, so every block got doubled spacing. */
.vf-cat-card .elementor-widget:not(:last-child) {
    margin-bottom: 10px;
}

.vf-cat-card .elementor-widget > *:last-child,
.vf-cat-card .elementor-widget > * > *:last-child,
.vf-cat-card nav.woocommerce-breadcrumb {
    margin-bottom: 0;
}

/* Used only if that Elementor template is missing, so the fallback
   still looks like a card. */
.vf-cat-card--plain {
    padding: 14px 32px;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 18px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.08);
}

.vf-cat-slot-note {
    margin: 0 auto 12px;
    font-size: 12px;
    color: #999;
}

.vf-cat-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
}

.vf-cat-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 14px auto 18px;
    background: var(--ast-global-color-0, #046bd2);
    border-radius: 3px;
}

/* the single clean keyword phrase, directly under the H1 */
.vf-cat-keyword-h2 {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--ast-global-color-2, #1e293b);
}

.vf-cat-intro p {
    /* full width of the card — the copy is not a narrow centred column */
    max-width: none;
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a5568;
}

.vf-cat-desc {
    max-width: none;
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a5568;
}

/* The Elementor widgets set their own alignment; the PHP fallback has no
   widget to do that, so align its copy left here. */
.vf-cat-card--plain .vf-cat-intro p,
.vf-cat-card--plain .vf-cat-desc {
    text-align: left;
}

.vf-cat-desc p { margin: 0 0 12px; }

.vf-cat-desc h3 {
    margin: 22px 0 10px;
    font-size: 19px;
    line-height: 1.35;
    color: var(--ast-global-color-2, #1e293b);
}

.vf-cat-count {
    display: inline-block;
    margin-top: 4px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #f0f5fa;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* The stored description opens with a keyword-stuffed H1/H2; functions.php
   strips it so the page keeps one clear H1 and one clean H2. */

/* ============================================================
   CATEGORY LAYOUT — full width banner, styled pagination
   ============================================================ */

/* WooCommerce wraps the banner + loop in a narrow column by default;
   force the archive content to the full container width. */
.woocommerce.archive.category .woocommerce-products-header,
.woocommerce.archive.post-type-archive-product .woocommerce-products-header,
.woocommerce.single-product-archive .woocommerce-products-header {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    clear: both !important;
    max-width: 1200px;
    text-align: center;
}

.woocommerce div.product-category { display: none; }

/* description must span the full width, never a narrow float column */
.vf-cat-desc ul {
    float: none;
    max-width: none;
    margin: 0 0 12px;
    padding-left: 22px;
    text-align: left;
}

/* the store-notice float WooCommerce injects can squeeze content */
.woocommerce .woocommerce-result-count { float: none; }
.woocommerce .woocommerce-ordering { float: none; text-align: right; margin-bottom: 10px; }

/* ---------- pagination ---------- */
.woocommerce .woocommerce-pagination {
    clear: both !important;
    margin: 34px auto 10px !important;
    text-align: center !important;
    border-top: 1px solid #ECECEC;
    padding-top: 26px;
}

.woocommerce .woocommerce-pagination ul.page-numbers {
    border: 0 !important;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce .woocommerce-pagination ul.page-numbers li {
    border: 0 !important;
    margin: 0 !important;
}

.woocommerce .woocommerce-pagination ul.page-numbers li a,
.woocommerce .woocommerce-pagination ul.page-numbers li span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px !important;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    color: #444444 !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.woocommerce .woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce .woocommerce-pagination ul.page-numbers li a:focus {
    /* Astra paints this hover state with the blue accent (--ast-global-color-0).
       Pin the background too, or the blue tile keeps our red text. */
    background: #FDECEC !important;
    border-color: #E02424 !important;
    color: #E02424 !important;
}

.woocommerce .woocommerce-pagination ul.page-numbers li span.current {
    background: #E02424 !important;
    border-color: #E02424 !important;
    color: #FFFFFF !important;
}

.woocommerce .woocommerce-pagination ul.page-numbers li span.dots {
    background: transparent;
    border-color: transparent;
    color: #9A9A9A;
}

/* ---------- back to top ---------- */
/* Astra paints #ast-scroll-top with the blue accent (--ast-global-color-0) as a
   small 2px-radius square. Keep the theme red, make it a circle, and give it
   the lift + shadow hover. */
#ast-scroll-top {
    width: 46px;
    height: 46px;
    line-height: 46px;
    background-color: #E02424;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(224, 36, 36, .28);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
    width: 20px;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
    background-color: #8E1616;
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(224, 36, 36, .38);
}

/* clear the floats WooCommerce sets around the archive header */
.woocommerce .woocommerce-products-header::before,
.woocommerce .woocommerce-products-header::after { content: none; }


.woocommerce .woocommerce-products-header__title,
.woocommerce .woocommerce-products-header__description-title {
    float: none !important;
    width: 100% !important;
    text-align: center;
}
/* ============================================================
   SEO BLOCK (homepage r18) — full width, edge to edge
   Native Elementor content now: r18_seo > r18_col holds five
   inner sections (r18_intro + r18_c1..r18_c4) in a CSS grid.
   Scoped to the column so the outer r18_seo section keeps its
   boxed 1140px container (which is what caps the block width).
   ============================================================ */

.elementor-11855 .elementor-element-r18_col .elementor-section {
    width: 100% !important;
    max-width: none !important;
}

.elementor-11855 .elementor-element-r18_col .elementor-container {
    max-width: none !important;
    width: 100% !important;
}

.elementor-11855 .elementor-element-r18_col .elementor-column {
    max-width: none !important;
    width: 100% !important;
}

/* keep the text readable on very wide screens */
.elementor-11855 .elementor-element-r18_col p,
.elementor-11855 .elementor-element-r18_col h3,
.elementor-11855 .elementor-element-r18_col h2 {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Header — mobile layout

   Elementor only emits width CSS for its fixed set of column
   presets, and its per-breakpoint column overrides are not
   honoured on this site, so the phone layout is written directly
   against the header's element ids:

     118fba90  top bar
       62c54387 free shipping   70ba4967 warning   2980e5c2 authorised
     36ed18b0  main row
       2f9ef724 logo  6c481e5a search  1de15438 account
       1d4908cb wishlist  7b05e6fb social  480a6768 cart
     2b9380ef  nav
   ============================================================ */

@media (max-width: 1024px) {

    /* ---------- top bar: centre warning only ---------- */
    #masthead .elementor-element-62c54387,
    #masthead .elementor-element-2980e5c2 {
        display: none;
    }

    #masthead .elementor-element-70ba4967 {
        width: 100%;
    }

    #masthead .elementor-element-70ba4967 .elementor-widget-wrap {
        justify-content: center;
    }

    #masthead .elementor-element-70ba4967 p {
        font-size: 11px !important;
        line-height: 1.45;
        margin: 0 !important;
        text-align: center;
    }

    /* ---------- main row ---------- */
    #masthead .elementor-element-36ed18b0 {
        padding: 10px 14px 0 !important;
        position: relative;
    }

    #masthead .elementor-element-36ed18b0 .elementor-container {
        flex-wrap: wrap;
        align-items: center;
    }

    /* social icons have no room on a phone */
    #masthead .elementor-element-7b05e6fb {
        display: none;
    }

    /* account / wishlist / cart share the right side */
    #masthead .elementor-element-1de15438,
    #masthead .elementor-element-1d4908cb,
    #masthead .elementor-element-480a6768 {
        width: auto;
        flex: 0 0 auto;
    }

    #masthead .elementor-element-1de15438 .elementor-widget,
    #masthead .elementor-element-1d4908cb .elementor-widget,
    #masthead .elementor-element-480a6768 .elementor-widget {
        margin: 0 1px;
    }

    /* icon-only account and wishlist */
    #masthead .elementor-element-1de15438 .elementor-icon-box-title,
    #masthead .elementor-element-1d4908cb .elementor-icon-box-title {
        display: none;
    }

    #masthead .elementor-element-1de15438 .elementor-icon-box,
    #masthead .elementor-element-1d4908cb .elementor-icon-box {
        width: 26px;
    }

    /* logo — pushed right of the menu button */
    #masthead .elementor-element-2f9ef724 {
        width: auto;
        flex: 0 0 auto;
        margin-left: 46px;
        margin-right: auto;
    }

    #masthead .elementor-element-2f9ef724 img {
        width: 126px;
        height: auto;
    }

    /* search drops onto its own full-width row */
    #masthead .elementor-element-6c481e5a {
        width: 100%;
        flex: 0 0 100%;
        order: 10;
        padding: 10px 0 12px;
    }

    #masthead .elementor-element-6c481e5a form,
    #masthead .elementor-element-6c481e5a .woocommerce-product-search {
        width: 100%;
    }

    /* The pill itself is capped at 520px by the rules for the boxed desktop
       bar ("search pill" / "WooCommerce product search widget in the header").
       On this full-width row that cap made the search stop well short of the
       icons sitting above it - 117px short at 600px wide, 564px at 1000px - so
       lift it here and let the pill span the row like the rest of the header. */
    #masthead .elementor-element-6c481e5a form.woocommerce-product-search,
    #masthead .elementor-element-6c481e5a form.elementor-search-form {
        max-width: none !important;
        margin: 0 !important;
    }

    #masthead .elementor-element-6c481e5a input[type="search"] {
        height: 44px;
        width: 100%;
        border-radius: 999px;
        border: 1px solid #E3E3E3;
        padding: 0 6px 0 18px;
        background: #FFFFFF;
    }

    #masthead .elementor-element-6c481e5a button[type="submit"] {
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: #E02424;
        color: #FFFFFF;
        padding: 0 20px;
        font-weight: 700;
        cursor: pointer;
    }

    /* ---------- nav moves into the drawer ---------- */
    #masthead .elementor-element-2b9380ef {
        display: none;
    }

}

/* ============================================================
   Mobile header — menu button + drawer

   The button is printed by astra_header_before(), which renders it as
   a sibling immediately BEFORE <header>. It therefore cannot be a flex
   child of the header's row, so it is positioned against the page
   wrapper and offset past the top bar to sit level with the logo.
   ============================================================ */

@media (max-width: 1024px) {

    .hfeed.site {
        position: relative;
    }

    .vf-mobile-bar {
        position: absolute;
        left: 14px;
        top: 60px;              /* top bar is ~48px tall */
        z-index: 60;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .vf-mobile-bar svg {
        display: block;
        width: 23px;
        height: 23px;
        color: #111111;
    }

    /* keep the logo clear of it */
    #masthead .elementor-element-2f9ef724 {
        margin-left: 44px;
    }

    /* a closed drawer must not occupy the page */
    #vf-mobile-nav .vf-drawer {
        display: none;
    }

    #vf-mobile-nav.is-open .vf-drawer {
        display: block;
    }
}

/* the drawer exists only below the breakpoint */
/* ---------- off-canvas drawer ---------- */
#vf-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .45);
}

#vf-mobile-nav.is-open {
    display: block;
}

#vf-mobile-nav .vf-drawer {
    width: 78%;
    max-width: 320px;
    height: 100%;
    background: #111111;
    padding: 20px;
    overflow-y: auto;
    animation: vf-slide .22s ease;
}

@keyframes vf-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

#vf-mobile-nav .vf-drawer a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 1025px) {
    .vf-mobile-bar,
    #vf-mobile-nav {
        display: none !important;
    }
}

/* ---------- keep the icon group on the logo row ---------- */
@media (max-width: 1024px) {

    #masthead .elementor-element-2f9ef724 {
        flex: 0 0 auto;
        margin-right: 8px;
    }

    #masthead .elementor-element-1de15438,
    #masthead .elementor-element-1d4908cb,
    #masthead .elementor-element-480a6768 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    #masthead .elementor-element-1de15438 { order: 3; }
    #masthead .elementor-element-1d4908cb { order: 4; }
    #masthead .elementor-element-480a6768 { order: 5; margin-left: auto; }

    /* cart: bag icon only, the price text is what makes it wrap */
    #masthead .elementor-element-480a6768 .hfe-subtotal,
    #masthead .elementor-element-480a6768 .elementor-button-text {
        display: none !important;
    }

    #masthead .elementor-element-480a6768 .hfe-site-header-cart,
    #masthead .elementor-element-480a6768 .hfe-site-header-cart-li,
    #masthead .elementor-element-480a6768 .hfe-menu-cart__toggle {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #masthead .elementor-element-480a6768 .hfe-cart-container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        min-width: 0;
    }

    #masthead .elementor-element-480a6768 .elementor-button-icon {
        position: relative;
        width: 22px;
        height: 22px;
    }
}

/* ---------- drawer: close button clear of the first link ---------- */
#vf-mobile-nav .vf-drawer {
    position: relative;
    padding-top: 14px;
}

#vf-mobile-nav .vf-drawer .vf-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    z-index: 2;
}

#vf-mobile-nav .vf-drawer nav {
    margin-top: 44px;
}

#vf-mobile-nav .vf-drawer nav a:first-child {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ============================================================
   The button is a sibling of <header>, and Elementor's sections build
   their own stacking contexts, so it needs a z-index above the header
   wrapper to be clickable and visible.
   ============================================================ */

@media (max-width: 1024px) {
    .vf-mobile-bar {
        position: absolute;
        z-index: 999;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }

    #masthead,
    #masthead .elementor-element-36ed18b0,
    #masthead .elementor-element-36ed18b0 .elementor-container {
        position: relative;
        z-index: auto;
    }

    /* ensure nothing in the header row paints over the button */
    #masthead .elementor-element-2f9ef724,
    #masthead .elementor-element-1de15438,
    #masthead .elementor-element-1d4908cb,
    #masthead .elementor-element-480a6768 {
        position: relative;
        z-index: 1;
    }
}

/* ============================================================
   STICKY HEADER - rows 2 (logo/search) and 3 (nav) stay pinned

   Free Elementor has no sticky control and HFE 2.x only promotes the Pro
   one, so the header wrapper is the sticky element instead of the rows
   themselves: its parent (#page) spans the whole document, so it stays
   pinned for the entire scroll, whereas a sticky row could only stick
   inside the ~186px header box.

   The negative `top` equals the top bar's height, so that row scrolls out
   of view first and rows 2 + 3 are what remain on screen. The top bar
   changes height per breakpoint (the nicotine warning wraps), so the
   values below are fallbacks only - the footer script in functions.php
   measures the real height and sets `top` inline.

   !important: Astra positions #masthead inline, and the id is also
   positioned `relative` inside the <=1024px block above.

   118fba90  top bar (scrolls away)   36ed18b0  main row   2b9380ef  nav
   ============================================================ */

#masthead {
    position: sticky !important;
    top: -50px;
    z-index: 900 !important;
}

@media (max-width: 1024px) {
    #masthead { top: -44px; }
}

@media (max-width: 767px) {
    #masthead { top: -32px; }
}

/* ---------- Homepage product rows: horizontal scroller ----------
   Woo sets each card to 25% width, so a multi-up row overflows and the card's
   overflow:hidden crops the title and add-to-cart button. Cards are pinned to
   a fixed track instead, which also lets long titles wrap.
   2-up on phones, 4-up on small laptops, 5-up from 1280px. */
.vf-scroller {
    position: relative;
}

body.home .elementor-section ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    margin: 0 !important;
    padding: 0 0 6px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* proximity, not mandatory: mandatory + smooth locked programmatic
       scrolling entirely on touch widths (scrollLeft stayed 0, no
       scroll events fired). Proximity keeps the snap feel without
       ever trapping the list. No CSS smooth here either — the arrows
       already request smooth per scroll call, and instant default
       keeps touch + direct sets reliable. */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.home .elementor-section ul.products::-webkit-scrollbar {
    display: none;
}

body.home .elementor-section ul.products li.product {
    flex: 0 0 calc((100% - 20px) / 2);
    width: auto !important;
    float: none !important;
    margin: 0 0 10px !important;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

body.home .elementor-section ul.products li.product > * {
    max-width: 100%;
    min-width: 0;
}

body.home .elementor-section ul.products li.product .woocommerce-loop-product__title {
    overflow-wrap: anywhere;
    word-break: normal;
    height: auto;
}

body.home .elementor-section ul.products li.product .button {
    margin-top: auto !important;
    align-self: center;
    max-width: 100%;
}

@media (min-width: 768px) {
    body.home .elementor-section ul.products li.product {
        flex-basis: calc((100% - 60px) / 4);
        margin-bottom: 0 !important;
    }

    body.home .elementor-section ul.products li.product .woocommerce-loop-product__title {
        min-height: 42px;
    }
}

@media (min-width: 1280px) {
    body.home .elementor-section ul.products li.product {
        flex-basis: calc((100% - 80px) / 5);
    }
}

.vf-scroller__arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 6;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #ECECEC;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1A1A1A;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 17, 17, .14);
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.vf-scroller__arrow:hover {
    background: #E02424;
    color: #FFFFFF;
    border-color: #E02424;
}

.vf-scroller__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.vf-scroller__arrow--prev { left: -18px; }
.vf-scroller__arrow--next { right: -18px; }

/* Phones: smaller arrows pulled inside so they stay on screen */
@media (max-width: 767px) {
    .vf-scroller__arrow {
        width: 34px;
        height: 34px;
        font-size: 15px;
        top: 38%;
    }

    .vf-scroller__arrow--prev { left: -8px; }
    .vf-scroller__arrow--next { right: -8px; }
}

/* "Show more" under each homepage product row.
   Matched on data-id because Elementor does not emit the widget's
   css_classes setting on the front end. */
body.home .elementor-element[data-id$="_more"] {
    text-align: center;
    margin-top: 26px;
}

body.home .elementor-element[data-id$="_more"] .elementor-button {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 2px solid #E02424;
    border-radius: 24px;
    padding: 12px 34px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: background .15s ease, color .15s ease;
}

body.home .elementor-element[data-id$="_more"] .elementor-button:hover {
    background: #E02424;
    color: #FFFFFF;
}

/* ---------- Shop & product-category grids ----------
   The theme's last mobile rule forces cards to width:100%, leaving one huge
   card per row. Archives get the same card treatment as the homepage (wrapping
   titles, buttons pinned to the bottom) but as a plain grid, without the
   horizontal scroller or arrows. */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 !important;
}

body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

body.post-type-archive-product ul.products li.product > *,
body.tax-product_cat ul.products li.product > *,
body.tax-product_tag ul.products li.product > * {
    max-width: 100%;
    min-width: 0;
}

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title {
    overflow-wrap: anywhere;
    word-break: normal;
    height: auto;
    min-height: 42px;
}

body.post-type-archive-product ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button {
    margin-top: auto !important;
    align-self: center;
    max-width: 100%;
}

@media (min-width: 768px) {
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- Archive result count & sort control ----------
   Astra's shop layout ships no .woocommerce-toolbar wrapper, so the count and
   the ordering form stack full width and the select spans the whole column.
   Floats put the count left and the compact sort pill right. ul.products is a
   grid, which establishes its own formatting context and clears both floats. */
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count {
    float: left;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 40px;
    color: #666666;
}

body.post-type-archive-product .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering {
    float: right;
    width: auto;
    margin: 0 0 12px;
}

body.post-type-archive-product .woocommerce-ordering select.orderby,
body.tax-product_cat .woocommerce-ordering select.orderby,
body.tax-product_tag .woocommerce-ordering select.orderby {
    width: auto;
    min-width: 210px;
    max-width: 290px;
    height: 42px;
    padding: 0 28px !important;
    font-size: 13px;
    line-height: normal;
    text-align: center;
    text-indent: 0;
    color: #1A1A1A;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 11px;
    border: 1px solid #E5E5E5;
    border-radius: 21px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

body.post-type-archive-product .woocommerce-ordering select.orderby:hover,
body.tax-product_cat .woocommerce-ordering select.orderby:hover,
body.tax-product_tag .woocommerce-ordering select.orderby:hover {
    border-color: #E02424;
}

/* ---------- "Why shop with us" cards on shop & category pages ----------
   Elementor does not emit the icon-boxes' css_classes on the front end, so
   they are matched on the data-id assigned when the template is built. The
   widget_type check keeps the surrounding columns from matching too. */
[data-widget_type^="icon-box"][data-id^="vfab_card"] {
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 14px;
    padding: 26px 20px;
    margin-bottom: 24px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

[data-widget_type^="icon-box"][data-id^="vfab_card"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(17, 17, 17, .10);
    border-color: #E02424;
}

[data-widget_type^="icon-box"][data-id^="vfab_card"] .elementor-icon-box-icon {
    font-size: 30px;
    margin-bottom: 6px;
    color: #E02424;
}

[data-widget_type^="icon-box"][data-id^="vfab_card"] .elementor-icon-box-icon svg,
[data-widget_type^="icon-box"][data-id^="vfab_card"] .elementor-icon-box-icon svg path {
    fill: #E02424;
}

[data-widget_type^="icon-box"][data-id^="vfab_card"] .elementor-icon-box-title {
    margin-bottom: 8px;
}

[data-widget_type^="icon-box"][data-id^="vfab_card"] .elementor-icon-box-description {
    color: #666666;
}

@media (min-width: 768px) {
    [data-widget_type^="icon-box"][data-id^="vfab_card"] {
        margin-bottom: 0;
    }
}

/* ============================================================
   Mobile drawer menu — parent rows toggle their sub-list
   ============================================================ */

#vf-mobile-nav .vf-menu,
#vf-mobile-nav .vf-m-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

#vf-mobile-nav .vf-m-item {
    margin: 0;
}

#vf-mobile-nav .vf-m-item > a,
#vf-mobile-nav .vf-m-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

/* the chevron rotates when the sub-list is open */
#vf-mobile-nav .vf-m-chev {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);
    transition: transform .2s ease;
    margin-right: 4px;
}

#vf-mobile-nav .vf-m-toggle[aria-expanded="true"] .vf-m-chev {
    transform: rotate(-135deg);
    margin-right: 7px;
}

/* sub-list */
#vf-mobile-nav .vf-m-sub {
    background: rgba(255, 255, 255, .04);
}

#vf-mobile-nav .vf-m-sub[hidden] {
    display: none;
}

#vf-mobile-nav .vf-m-sub .vf-m-item > a,
#vf-mobile-nav .vf-m-sub .vf-m-toggle {
    padding-left: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #E2E2E2;
    border-bottom-color: rgba(255, 255, 255, .07);
}

/* ============================================================
   Nav active state — follow the current page

   Earlier rules in this file painted the FIRST nav item (Home) as a red
   pill unconditionally (`.hfe-nav-menu > li:first-child > a`), so Home
   stayed highlighted on every page. WordPress already marks the right
   item with .current-menu-item / .current-menu-ancestor, so the pill is
   re-bound to those. The per-item icons are untouched.
   ============================================================ */

.vf-main-nav .hfe-nav-menu > li:first-child > a {
    background: transparent !important;
    color: #FFFFFF !important;
}

.vf-main-nav .hfe-nav-menu > li:first-child > a:hover {
    background: rgba(255, 255, 255, .10) !important;
}

/* the page you are on, and any parent of it */
.vf-main-nav .hfe-nav-menu > li.current-menu-item > a,
.vf-main-nav .hfe-nav-menu > li.current-menu-ancestor > a,
.vf-main-nav .hfe-nav-menu > li.current_page_item > a,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > a {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 8px;
}

.vf-main-nav .hfe-nav-menu > li.current-menu-item > a:hover,
.vf-main-nav .hfe-nav-menu > li.current-menu-ancestor > a:hover,
.vf-main-nav .hfe-nav-menu > li.current_page_item > a:hover,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > a:hover {
    background: #C81E1E !important;
}

/* Items with a dropdown wrap their link in .hfe-has-submenu-container,
   so the pill has to be applied to the link inside that wrapper too. */
.vf-main-nav .hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a,
.vf-main-nav .hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a,
.vf-main-nav .hfe-nav-menu > li.current_page_item > .hfe-has-submenu-container > a,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > .hfe-has-submenu-container > a {
    background: #E02424 !important;
    color: #FFFFFF !important;
    border-radius: 8px;
}

.vf-main-nav .hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a:hover,
.vf-main-nav .hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a:hover,
.vf-main-nav .hfe-nav-menu > li.current_page_item > .hfe-has-submenu-container > a:hover,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > .hfe-has-submenu-container > a:hover {
    background: #C81E1E !important;
}


/* ============================================================
   HEADER RIGHT CLUSTER — single source of truth

     [person]      [heart]      f ig bird mail    [ bag  CART ]
      Account       Wishlist                       39.00 د.إ

   ink  #3A3A3A / #4A4A4A   ·   accent #E02424
   ============================================================ */

/* ---------- account / wishlist ---------- */
.vf-iconbox .elementor-icon,
.vf-iconbox .elementor-icon i,
.vf-iconbox .elementor-icon svg {
    color: #3A3A3A !important;
    fill: #3A3A3A !important;
}

.vf-iconbox a:hover .elementor-icon,
.vf-iconbox a:hover .elementor-icon svg,
.vf-iconbox .elementor-icon-box-title:hover {
    color: #E02424 !important;
    fill: #E02424 !important;
}

.vf-iconbox .elementor-icon-box-title,
.vf-iconbox .elementor-icon-box-content {
    color: #3A3A3A !important;
    font-weight: 600;
}

/* ---------- socials ---------- */
.vf-header-socials .elementor-social-icon,
.vf-header-socials .elementor-social-icon svg {
    color: #3A3A3A !important;
    fill: #3A3A3A !important;
    background-color: transparent;
}

.vf-header-socials a:hover .elementor-social-icon,
.vf-header-socials a:hover .elementor-social-icon svg {
    color: #E02424 !important;
    fill: #E02424 !important;
}

/* ---------- cart: red outline pill ---------- */
.vf-header-cart a.hfe-cart-container {
    background: transparent !important;
    border: 1px solid #E02424 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    color: #4A4A4A !important;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .5px;
    text-decoration: none !important;
}

.vf-header-cart a.hfe-cart-container:hover {
    background: rgba(224, 36, 36, .06) !important;
    border-color: #C81E1E !important;
}

/* bag glyph */
.vf-header-cart .elementor-button-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 2px;
}

.vf-header-cart .elementor-button-icon .eicon {
    width: 24px;
    height: 24px;
    color: #E02424 !important;
    background: currentColor;
}

/* count badge, offset clear of the bag.
   top was -10px, which pushed the badge ~6px higher than the account and
   wishlist glyphs sitting next to it (it floated above the bag instead of
   resting on its corner). -4px lines the badge up with those two icons. */
.vf-header-cart .elementor-button-icon::after {
    content: attr(data-counter);
    position: absolute;
    top: -4px !important;
    left: -12px !important;
    right: auto !important;
    background: #E02424 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 3px !important;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px !important;
    font-weight: 800;
    padding: 0 3px;
}

/* "CART" stacked over the total */
.vf-header-cart .elementor-button-text.hfe-subtotal {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.15;
    background: transparent !important;
    color: #3A3A3A !important;
    white-space: nowrap;
}

.vf-header-cart .elementor-button-text.hfe-subtotal::before {
    content: "CART";
    color: #3A3A3A !important;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .5px;
}

/* the total, in red — scoped by element id so nothing else can win */
#masthead .elementor-element-480a6768 .hfe-subtotal .woocommerce-Price-amount,
#masthead .elementor-element-480a6768 .hfe-subtotal .amount,
#masthead .elementor-element-480a6768 .hfe-subtotal .amount span,
#masthead .elementor-element-480a6768 .hfe-subtotal .woocommerce-Price-currencySymbol {
    color: #E02424 !important;
    background: transparent !important;
    font-weight: 800 !important;
    font-size: 15px;
}

/* ---------- account / wishlist: red glyphs, dark label ----------
   (reference shows the person and heart in the accent colour) */
.vf-iconbox .elementor-icon,
.vf-iconbox .elementor-icon svg,
.vf-iconbox .elementor-icon i {
    color: #E02424 !important;
    fill: #E02424 !important;
}

.vf-iconbox .elementor-icon-box-title,
.vf-iconbox .elementor-icon-box-content {
    color: #3A3A3A !important;
}

/* ============================================================
   MOBILE DRAWER — refined design
   ------------------------------------------------------------
   Branded head (logo + round close), icon-badged menu rows,
   an animated sub-list, and a quick-action foot. Everything is
   scoped under #vf-mobile-nav .vf-drawer so it beats the older,
   bare-bones drawer rules earlier in this file.
   ============================================================ */

@media (max-width: 1024px) {

    /* ---------- the burger: subtle rounded tap target ---------- */
    .vf-mobile-bar {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        color: #111111;
        transition: background .18s ease, color .18s ease;
    }

    .vf-mobile-bar:hover,
    .vf-mobile-bar:focus-visible {
        background: rgba(224, 36, 36, .10);
        color: #E02424;
    }

    .vf-mobile-bar svg { width: 22px; height: 22px; }

    /* ---------- overlay: dark + soft blur, fades in ---------- */
    #vf-mobile-nav {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(8, 8, 10, .5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: opacity .28s ease, visibility .28s ease;
    }

    #vf-mobile-nav.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: block !important;
    }

    /* ---------- panel ---------- */
    #vf-mobile-nav .vf-drawer {
        display: flex !important;
        flex-direction: column;
        position: relative;
        /* slimmer panel so the menu covers less of the page */
        width: min(78%, 330px);
        max-width: 330px;
        height: 100%;
        padding: 0 !important;
        overflow: hidden;
        background: linear-gradient(180deg, #191919 0%, #0d0d0f 100%);
        border-right: 1px solid rgba(255, 255, 255, .07);
        box-shadow: 30px 0 70px rgba(0, 0, 0, .55);
        transform: translateX(-102%);
        transition: transform .34s cubic-bezier(.22, .61, .36, 1);
        animation: none;
    }

    #vf-mobile-nav.is-open .vf-drawer { transform: translateX(0); }

    /* red hairline along the top edge */
    #vf-mobile-nav .vf-drawer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E02424 0%, #ff5a5a 55%, #E02424 100%);
        z-index: 2;
    }

    /* ---------- head: logo + close ---------- */
    #vf-mobile-nav .vf-drawer .vf-drawer__head {
        position: relative;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 24px 18px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__brand {
        display: inline-flex;
        align-items: center;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        text-decoration: none;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__brand img {
        display: block;
        max-height: 36px;
        width: auto;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__brand-text {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: .5px;
        color: #FFFFFF;
    }

    #vf-mobile-nav .vf-drawer .vf-close {
        position: static;
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1;
        color: #FFFFFF;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 50%;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, transform .22s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-close:hover,
    #vf-mobile-nav .vf-drawer .vf-close:focus-visible {
        background: #E02424;
        border-color: #E02424;
        transform: rotate(90deg);
    }

    /* ---------- body: the scrollable menu ---------- */
    #vf-mobile-nav .vf-drawer .vf-drawer__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0 !important;
        padding: 10px 14px 18px;
        -webkit-overflow-scrolling: touch;
    }

    #vf-mobile-nav .vf-drawer .vf-menu,
    #vf-mobile-nav .vf-drawer .vf-m-sub {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #vf-mobile-nav .vf-drawer .vf-m-item { position: relative; }

    /* ---------- a menu row ---------- */
    #vf-mobile-nav .vf-drawer .vf-m-item > a,
    #vf-mobile-nav .vf-drawer .vf-m-toggle {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        padding: 11px 10px !important;
        color: #FFFFFF !important;
        font-family: inherit;
        font-size: 15.5px !important;
        font-weight: 600 !important;
        line-height: 1.25;
        text-align: left;
        text-decoration: none;
        background: none;
        border: 0 !important;
        border-radius: 12px;
        cursor: pointer;
        transition: background .18s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-m-item > a:hover,
    #vf-mobile-nav .vf-drawer .vf-m-toggle:hover,
    #vf-mobile-nav .vf-drawer .vf-m-item.is-open > .vf-m-toggle {
        background: rgba(255, 255, 255, .06);
    }

    /* icon badge in front of every row */
    #vf-mobile-nav .vf-drawer .vf-m-ico {
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        font-size: 13.5px;
        color: #FFFFFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 10px;
        transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-m-item > a:hover .vf-m-ico,
    #vf-mobile-nav .vf-drawer .vf-m-toggle:hover .vf-m-ico,
    #vf-mobile-nav .vf-drawer .vf-m-item.is-open > .vf-m-toggle .vf-m-ico {
        background: #E02424;
        border-color: #E02424;
        color: #FFFFFF;
    }

    #vf-mobile-nav .vf-drawer .vf-m-label { flex: 1 1 auto; }

    /* ---------- active page ---------- */
    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-item > a,
    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-ancestor > a,
    #vf-mobile-nav .vf-drawer .vf-m-item.current_page_item > a,
    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-parent > a {
        background: rgba(224, 36, 36, .14);
    }

    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-item > a .vf-m-ico,
    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-ancestor > a .vf-m-ico,
    #vf-mobile-nav .vf-drawer .vf-m-item.current_page_item > a .vf-m-ico,
    #vf-mobile-nav .vf-drawer .vf-m-item.current-menu-parent > a .vf-m-ico {
        background: #E02424;
        border-color: #E02424;
    }

    /* ---------- chevron ---------- */
    #vf-mobile-nav .vf-drawer .vf-m-chev {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        border-right: 2px solid rgba(255, 255, 255, .7);
        border-bottom: 2px solid rgba(255, 255, 255, .7);
        transform: rotate(45deg);
        transition: transform .24s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-m-toggle[aria-expanded="true"] .vf-m-chev {
        transform: rotate(-135deg);
    }

    /* ---------- sub-list: animated reveal ----------
       JS drives max-height between 0 and the measured height, so a
       collapsed parent leaves no gap behind it. */
    #vf-mobile-nav .vf-drawer .vf-m-subwrap {
        overflow: hidden;
        max-height: 0;
        transition: max-height .32s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-m-sub {
        margin: 0 !important;
        padding: 4px 0 10px 16px !important;
        border-left: 2px solid rgba(255, 255, 255, .13);
    }

    #vf-mobile-nav .vf-drawer .vf-m-sub .vf-m-item > a {
        padding: 9px 10px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, .74) !important;
        border-radius: 9px;
    }

    #vf-mobile-nav .vf-drawer .vf-m-sub .vf-m-item > a:hover {
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, .05);
    }

    /* sub rows swap the glyph for a small dot */
    #vf-mobile-nav .vf-drawer .vf-m-sub .vf-m-item > a .vf-m-ico {
        width: 8px;
        height: 8px;
        font-size: 0;
        background: rgba(255, 255, 255, .35);
        border: 0;
        border-radius: 50%;
    }

    #vf-mobile-nav .vf-drawer .vf-m-sub .vf-m-item > a:hover .vf-m-ico {
        background: #E02424;
    }

    /* ---------- foot: quick actions ---------- */
    #vf-mobile-nav .vf-drawer .vf-drawer__foot {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: rgba(255, 255, 255, .02);
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 6px !important;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, .82);
        text-decoration: none;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 12px;
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__action i {
        font-size: 16px;
        color: #E02424;
        transition: color .18s ease;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__action:hover {
        background: #E02424;
        border-color: #E02424 !important;
        color: #FFFFFF;
        transform: translateY(-2px);
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__action:hover i { color: #FFFFFF; }
}

/* ============================================================
   MOBILE HEADER ROW — one uniform line

     [ menu ]        LOGO (centred)        [ acct ] [ wish ] [ cart ]

   The logo takes the free space and centres itself inside it, so it
   reads as centred no matter how wide the icon cluster is; the three
   icons share one size and one even gap so nothing looks stuck.
   ============================================================ */

@media (max-width: 1024px) {

    #masthead .elementor-element-36ed18b0 > .elementor-container {
        --vf-ico: 38px;
        --vf-gap: 12px;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: var(--vf-gap);
        row-gap: 12px;
    }

    /* A spacer the size of the (burger + gap) that the icon cluster leaves on
       the other side, so the logo lands on the true centre of the bar. */
    #masthead .elementor-element-36ed18b0 > .elementor-container::before {
        content: "";
        flex: 0 0 auto;
        width: calc(2 * var(--vf-ico) + var(--vf-gap));
    }

    /* ---------- menu button: rides in the row, first slot ---------- */
    .vf-mobile-bar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        order: -1;
        flex: 0 0 auto;
        width: var(--vf-ico) !important;
        height: var(--vf-ico) !important;
        margin: 0 !important;
        z-index: auto;
    }

    /* ---------- centred logo ---------- */
    #masthead .elementor-element-2f9ef724 {
        order: 0;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #masthead .elementor-element-2f9ef724 .elementor-widget-container,
    #masthead .elementor-element-2f9ef724 .elementor-element-75791944,
    #masthead .elementor-element-2f9ef724 .elementor-image {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #masthead .elementor-element-2f9ef724 img {
        width: auto !important;
        max-width: 100%;
        max-height: 34px;
        margin: 0 auto;
    }

    /* ---------- right cluster: three equal buttons, one even gap ---------- */
    #masthead .elementor-element-1de15438,
    #masthead .elementor-element-1d4908cb,
    #masthead .elementor-element-480a6768 {
        order: 2;
        flex: 0 0 auto !important;
        width: var(--vf-ico) !important;
        max-width: var(--vf-ico) !important;
        margin: 0 !important;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #masthead .elementor-element-1de15438 .elementor-widget-container,
    #masthead .elementor-element-1d4908cb .elementor-widget-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #masthead .elementor-element-480a6768 .hfe-cart-container {
        width: var(--vf-ico);
        height: var(--vf-ico);
        justify-content: center;
    }

    /* ---------- search: its own full-width row below ---------- */
    #masthead .elementor-element-6c481e5a {
        order: 3;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0;
    }

    /* socials never join the compact bar */
    #masthead .elementor-element-7b05e6fb { display: none !important; }
}

@media (max-width: 480px) {
    #masthead .elementor-element-36ed18b0 > .elementor-container {
        --vf-ico: 34px;
        --vf-gap: 6px;
        row-gap: 10px;
    }

    #masthead .elementor-element-2f9ef724 img { max-height: 28px; }
    .vf-mobile-bar svg { width: 20px; height: 20px; }
}

/* ============================================================
   DESKTOP NAV — icon badges (matches the mobile drawer)

   The top-level rows of the header menu get the same rounded,
   gradient icon badge the mobile drawer uses, so all three
   menus read as one design.

   The glyphs themselves are injected by the footer script in
   functions.php (vf_menu_icon_class), which is why the older
   mask-image icons are switched off below.
   ============================================================ */

/* retire the old inline mask glyphs — the badge replaces them */
.vf-main-nav .hfe-nav-menu > li > a::before,
.vf-main-nav .hfe-nav-menu > li > .hfe-has-submenu-container > a::before,
.vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a::before {
    display: none !important;
    content: none !important;
    background: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* the badge box */
.vf-main-nav .hfe-nav-menu > li > a > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li > .hfe-has-submenu-container > a > .vf-nav-ico {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 9px;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.vf-main-nav .hfe-nav-menu > li > a > .vf-nav-ico::before {
    display: block;
    line-height: 1;
}

/* hover, open, and the active page turn the badge solid red */
.vf-main-nav .hfe-nav-menu > li > a:hover > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li.current-menu-item > a > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > a > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li.current-menu-ancestor > a > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li.current_page_item > a > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li > .hfe-has-submenu-container > a:hover > .vf-nav-ico,
.vf-main-nav .hfe-nav-menu > li.current-menu-parent > .hfe-has-submenu-container > a > .vf-nav-ico {
    background: #E02424;
    border-color: #E02424;
    color: #FFFFFF;
}

/* the "Home" row sits on a solid red pill — a dark badge keeps it readable */
.vf-main-nav .hfe-nav-menu > li:first-child > a > .vf-nav-ico {
    background: rgba(0, 0, 0, .20);
    border-color: rgba(255, 255, 255, .28);
}

.vf-main-nav .hfe-nav-menu > li:first-child > a:hover > .vf-nav-ico {
    background: rgba(0, 0, 0, .32);
    border-color: rgba(255, 255, 255, .34);
}

/* tighter badge on the narrow desktop / landscape-tablet range, where seven
   badges plus labels would otherwise crowd the bar */
@media (min-width: 1025px) and (max-width: 1240px) {
    .vf-main-nav .hfe-nav-menu { gap: 0 !important; }

    .vf-main-nav .hfe-nav-menu li > a,
    .vf-main-nav .hfe-has-submenu > .hfe-has-submenu-container > a {
        padding: 12px 12px !important;
        font-size: 14px !important;
    }

    .vf-main-nav .hfe-nav-menu > li > a > .vf-nav-ico,
    .vf-main-nav .hfe-nav-menu > li > .hfe-has-submenu-container > a > .vf-nav-ico {
        width: 26px;
        height: 26px;
        margin-right: 7px;
        font-size: 11.5px;
    }
}

/* ============================================================
   HOMEPAGE HERO — "Dubai's #1 online vape shop"

   Left-aligned hero built from the r1_hero / r2_cta Elementor
   rows (the copy itself lives in the Elementor data). Both rows
   are full-width, so the container is capped here to the same
   1024px the boxed rows below use — that lines the badge and
   headline up with the rest of the homepage.
   ============================================================ */

.elementor-11855 .elementor-element.elementor-element-r1_hero > .elementor-container,
.elementor-11855 .elementor-element.elementor-element-r2_cta > .elementor-container {
    max-width: 1024px;
}

/* soft red wash, standing in for the reference's teal/purple glow */
.elementor-11855 .elementor-element.elementor-element-r1_hero {
    background-image:
        radial-gradient(560px 300px at 100% 0%, rgba(224, 36, 36, .22), rgba(224, 36, 36, 0) 72%),
        radial-gradient(520px 340px at 0% 18%, rgba(224, 36, 36, .14), rgba(224, 36, 36, 0) 74%);
    background-repeat: no-repeat;
}

/* ---------- close the gap under the copy, shorten the banner ----------

   The buttons live in their own Elementor row (r2_cta) that sits
   BELOW the hero row (r1_hero). The dead space you see between the
   description and the buttons is the hero's own bottom padding, so
   trimming it pulls the buttons up into that gap. Trimming r2_cta's
   bottom padding then lowers the overall banner height. */
.elementor-11855 .elementor-element.elementor-element-r1_hero {
    padding-bottom: 6px !important;   /* was 40px — buttons rise into the gap */
}

.elementor-11855 .elementor-element.elementor-element-r2_cta {
    padding-bottom: 34px !important;  /* was 80px — shorter banner */
}

/* ---------- desktop only: sit the buttons just under the copy ----------

   The buttons live in their own row (r2_cta) BELOW the hero row, and on
   desktop the hero is taller than the copy because the 466px device image
   drives its height (copy ends at y=614, hero at y=735). A negative margin
   pulls r2_cta up into that dead space.

   Two things matter here:

   1. z-index. r1_hero carries z-index:1, r2_cta would default to auto, so
      the hero - including its rgb(10,10,10) background - paints OVER the
      lifted row and the buttons disappear. r2_cta must outrank it.
   2. The lift is a measurement: it depends on where the copy ends, so the
      value below has to be re-checked whenever the hero copy changes
      length. Divider math for the current copy (1378px wide, copy bottom
      614, hero bottom 735, r2_cta 105px tall with its buttons 10px in):

         buttons should start 26px under the copy  ->  640
         r2_cta top = 640 - 10                      ->  630
         margin-top = 630 - 735                     -> -105

      and the hero's own bottom padding absorbs the overflow so r2_cta ends
      flush with the hero's bottom edge - no white seam above the trust bar.

   The measurement is constant across desktop widths because the hero
   container is capped at 1024px, so the copy wraps identically. */
@media (min-width: 1025px) {
    .elementor-11855 .elementor-element.elementor-element-r1_hero {
        padding-bottom: 18px !important;   /* was 6px - lets the row reach the trust bar */
    }

    .elementor-11855 .elementor-element.elementor-element-r2_cta {
        position: relative;
        z-index: 2;                        /* must outrank r1_hero's z-index:1 */
        background: transparent !important;
        padding-bottom: 0 !important;      /* the hero's own padding supplies the bottom space,
                                              so the row can never stick out past the hero */
        margin-top: -105px !important;     /* buttons land 26px under the copy */
    }
}

/* the highlighted words in the headline */
.elementor-11855 .vf-hl {
    background-image: linear-gradient(115deg, #FF6B6B 0%, #E02424 52%, #B21B1B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #E02424;
}

/* keep the headline to a readable measure so it wraps like the reference */
.elementor-11855 .elementor-element-r1_heading .elementor-heading-title {
    max-width: 900px;
}

/* ---------- hero buttons ---------- */
.vf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
}

.vf-hero-btn {
    display: inline-block;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    /* the site's content-link style underlines links, which a button label
       must not be — the rule above was already trying to say that */
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.vf-hero-btn--primary {
    padding: 16px 34px;
    background: #E02424;
    color: #FFFFFF;
}

.vf-hero-btn--primary:hover,
.vf-hero-btn--primary:focus-visible {
    background: #C81E1E;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.vf-hero-btn--ghost {
    padding: 14px 32px;
    background: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, .45);
}

.vf-hero-btn--ghost:hover,
.vf-hero-btn--ghost:focus-visible {
    color: #FFFFFF;
    border-color: #E02424;
    background: rgba(224, 36, 36, .14);
}

/* ---------- hero media: the device, right-hand column ---------- */
.elementor-11855 .elementor-element.elementor-element-r1_media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* red glow pooled behind the device, echoing the reference's halo */
.elementor-11855 .elementor-element.elementor-element-r1_media::before {
    content: "";
    position: absolute;
    inset: 5% 3%;
    background: radial-gradient(closest-side, rgba(224, 36, 36, .50), rgba(224, 36, 36, .16) 56%, rgba(224, 36, 36, 0) 78%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
}

.elementor-11855 .vf-hero-media {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* the artwork is a wide transparent PNG, so cropping it to a portrait box
   simply zooms in on the device and its smoke */
.elementor-11855 .vf-hero-media img {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
    aspect-ratio: 44 / 50;
    object-fit: cover;
    object-position: 50% 50%;
    margin: 0 auto;
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6));
}

@media (max-width: 1024px) {
    .elementor-11855 .vf-hero-media img {
        max-width: 380px;
        aspect-ratio: 44 / 46;
        margin-bottom: 6px;
    }
}

@media (max-width: 767px) {
    .elementor-11855 .elementor-element.elementor-element-r1_hero {
        padding-top: 32px;
        padding-bottom: 30px;
    }

    .elementor-11855 .elementor-element.elementor-element-r2_cta {
        padding-bottom: 60px;
    }

    /* on phones the two CTAs stack, so centre them under the hero copy */
    .vf-hero-actions { gap: 10px; justify-content: center; }

    .elementor-11855 .vf-hero-media img { max-width: 290px; }

    .vf-hero-btn--primary { padding: 15px 28px; font-size: 15px; }
    .vf-hero-btn--ghost   { padding: 13px 26px; font-size: 15px; }
}

/* ============================================================
   FOOTER — refined  (Elementor HFE template #11853)
   Everything is scoped under #colophon so these rules outrank
   the inline <style> Elementor prints inside the body — no
   template edits, so plugin/theme updates can't wipe it out.
   ============================================================ */

/* --- 1. Richer surface + red accent line + soft glow --- */
#colophon .elementor-11853 .elementor-element.elementor-element-a783dc1 {
    position: relative;
    background-color: #0c0c0e !important;
    padding: 66px 30px 46px !important;
    overflow: hidden;
}

/* gradient hairline across the very top */
#colophon .elementor-11853 .elementor-element.elementor-element-a783dc1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8E1616 0%, #E02424 50%, #8E1616 100%);
    z-index: 2;
}

/* faint red bloom so the dark panel isn't flat */
#colophon .elementor-11853 .elementor-element.elementor-element-a783dc1::after {
    content: "";
    position: absolute;
    top: -150px;
    left: 50%;
    width: 820px;
    height: 340px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(224, 36, 36, .15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#colophon .elementor-11853 .elementor-element.elementor-element-a783dc1 > .elementor-container {
    position: relative;
    z-index: 1;
}

/* a little breathing room between the four columns */
#colophon .elementor-11853 .elementor-top-column {
    padding-right: 22px;
}

/* --- 2. Logo: white transparent mark straight on the dark panel ---
   This used to be a white "chip" (background + padding + radius) because the
   mark was a dark purple wordmark. The footer logo is a white transparent
   image now, so the chip made it white-on-white and it disappeared.
   Chip removed — the mark sits directly on the dark footer. */
#colophon .elementor-11853 .elementor-element.elementor-element-f502d21 img {
    width: 172px !important;
    height: auto;
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 6px;
}

/* --- 3. Brand blurb --- */
#colophon .elementor-11853 .elementor-element.elementor-element-204194c {
    font-size: 13.5px !important;
    line-height: 1.78 !important;
    color: #9a9aa2 !important;
    max-width: 300px;
}

/* --- 4. Column headings: uppercase + red underline accent --- */
#colophon .elementor-11853 .elementor-element.elementor-element-967ca05 .elementor-heading-title,
#colophon .elementor-11853 .elementor-element.elementor-element-ffed0ca .elementor-heading-title,
#colophon .elementor-11853 .elementor-element.elementor-element-9c555e6 .elementor-heading-title {
    position: relative;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
    text-transform: uppercase;
    color: #ffffff !important;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

#colophon .elementor-11853 .elementor-element.elementor-element-967ca05 .elementor-heading-title::after,
#colophon .elementor-11853 .elementor-element.elementor-element-ffed0ca .elementor-heading-title::after,
#colophon .elementor-11853 .elementor-element.elementor-element-9c555e6 .elementor-heading-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #E02424, #8E1616);
}

/* --- 5. Link lists: hairline rows + red slide-in on hover --- */
#colophon .elementor-11853 .elementor-widget-text-editor ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#colophon .elementor-11853 .elementor-widget-text-editor ul li {
    margin-bottom: 0 !important;
    color: #b6b6bd;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

#colophon .elementor-11853 .elementor-widget-text-editor ul li:last-child {
    border-bottom: none;
}

#colophon .elementor-11853 .elementor-widget-text-editor ul li a {
    position: relative;
    display: block;
    padding: 11px 0;
    color: #c7c7ce !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color .22s ease, padding-left .22s ease;
}

/* the little red dash that grows in on hover */
#colophon .elementor-11853 .elementor-widget-text-editor ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1.5px;
    background: #E02424;
    transform: translateY(-50%);
    transition: width .22s ease;
}

#colophon .elementor-11853 .elementor-widget-text-editor ul li a:hover {
    color: #ffffff !important;
    padding-left: 18px;
}

#colophon .elementor-11853 .elementor-widget-text-editor ul li a:hover::before {
    width: 12px;
}

/* --- 6. Buttons: matching red + WhatsApp pills --- */
#colophon .elementor-11853 .elementor-element.elementor-element-14c74c5 .elementor-button {
    background: linear-gradient(135deg, #E02424, #8E1616) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border: none;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    padding: 11px 22px !important;
    box-shadow: 0 8px 20px rgba(224, 36, 36, .3);
    transition: transform .25s ease, box-shadow .25s ease;
}

#colophon .elementor-11853 .elementor-element.elementor-element-14c74c5 .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(224, 36, 36, .42);
}

#colophon .elementor-11853 .elementor-element.elementor-element-25e47ad .elementor-button {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}

#colophon .elementor-11853 .elementor-element.elementor-element-25e47ad .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(34, 197, 94, .4);
}

/* --- 7. Copyright bar --- */
#colophon .elementor-11853 .elementor-element.elementor-element-f269e5e {
    background-color: #000000 !important;
    padding: 18px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

#colophon .elementor-11853 .elementor-element.elementor-element-b8751be {
    font-size: 12.5px !important;
    color: #83838c !important;
    letter-spacing: .3px;
}

/* --- 8. Stack gracefully on smaller screens --- */
@media (max-width: 1024px) {
    #colophon .elementor-11853 .elementor-element.elementor-element-a783dc1 {
        padding: 52px 24px 38px !important;
    }

    #colophon .elementor-11853 .elementor-top-column {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    /* on a single column, drop the side padding and add vertical rhythm */
    #colophon .elementor-11853 .elementor-widget-text-editor ul li {
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    #colophon .elementor-11853 .elementor-element.elementor-element-204194c {
        max-width: none;
    }
}

/* ============================================================
   USP STRIP — switch the trust band (r3_trust) to a white
   background. Text flips from white to dark so it stays
   readable; the red icon circles are kept, they pop nicely
   on white. !important because Elementor paints this section
   via its own per-page stylesheet.
   ============================================================ */

.elementor-element-r3_trust {
    background-color: #ffffff !important;
    /* the section below is also light, so a soft shadow keeps
       the two bands visually separated */
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05),
                0 10px 30px rgba(0, 0, 0, .05);
}

/* titles: were white, now near-black */
.elementor-element-r3_trust .elementor-icon-box-title,
.elementor-element-r3_trust .elementor-icon-box-title span {
    color: #141414 !important;
}

/* descriptions: the old grey was tuned for dark, darken it for white */
.elementor-element-r3_trust .elementor-icon-box-description {
    color: #6b6b73 !important;
}

/* icons: keep the red circles, just add a whisper of shadow so
   they sit on the white instead of looking pasted on */
.elementor-element-r3_trust .elementor-icon {
    box-shadow: 0 10px 24px rgba(224, 36, 36, .28) !important;
}

/* ------------------------------------------------------------
   USP STRIP on phones (<=767px): show the four badges as a 2x2
   grid instead of one-per-row. Elementor's mobile rule sets
   every column to width:100% (stacked); turning the section
   container into a 2-column grid makes those full-width columns
   fill half-row tracks — percentage widths resolve against the
   grid area, so no width override is needed. Desktop and the
   768-1024px range are untouched.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element-r3_trust > .elementor-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 10px;
        row-gap: 24px;
        align-items: start;
    }

    .elementor-element-r3_trust .elementor-column {
        min-width: 0;
    }
}

/* ============================================================
   SHOP BY CATEGORY — reference-style band
   Cream section, red accent above the title, four white cards
   with a pastel blob behind each product shot. Copy stays in
   the Elementor data; all of this is presentation only.
   ============================================================ */

/* the cream band (header row + cards row) */
.elementor-11855 .elementor-element.elementor-element-r4_cat_head,
.elementor-11855 .elementor-element.elementor-element-r5_cats {
    background-color: #F7F4EF;
}

/* red accent line above the title */
.elementor-11855 .elementor-element.elementor-element-r4_h .elementor-heading-title::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: #E02424;
    margin: 0 auto 16px;
}

.elementor-11855 .elementor-element.elementor-element-r4_h .elementor-heading-title {
    color: #141B26;
    font-size: 42px;
    letter-spacing: -0.6px;
}

.elementor-11855 .elementor-element.elementor-element-r4_sub,
.elementor-11855 .elementor-element.elementor-element-r4_sub p {
    color: #5B6470;
    font-size: 16.5px;
}

/* ---------- the four cards ---------- */
.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-widget-image-box {
    background: #FFFFFF;
    border: 1px solid #EDE8E0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 27, 38, .04), 0 16px 32px rgba(20, 27, 38, .06);
    padding: 26px 18px 28px;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-widget-image-box:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 36, 36, .28);
    box-shadow: 0 2px 4px rgba(20, 27, 38, .05), 0 22px 40px rgba(20, 27, 38, .10);
}

/* pastel blob behind each shot — the white product backgrounds melt
   into it via multiply, so the pictures read as cut-outs */
.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img {
    position: relative;
    width: 100% !important;
    max-width: 232px;
    height: 212px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img::before {
    content: "";
    position: absolute;
    inset: 0 -6%;
    border-radius: 50% 50% 47% 53% / 55% 45% 55% 45%;
    z-index: 0;
}

.elementor-11855 .elementor-element.elementor-element-r5_c1 .elementor-image-box-img::before {
    background: radial-gradient(closest-side, #F6D3CB 70%, rgba(246, 211, 203, 0) 100%);
}

.elementor-11855 .elementor-element.elementor-element-r5_c2 .elementor-image-box-img::before {
    background: radial-gradient(closest-side, #D3E2F6 70%, rgba(211, 226, 246, 0) 100%);
}

.elementor-11855 .elementor-element.elementor-element-r5_c3 .elementor-image-box-img::before {
    background: radial-gradient(closest-side, #D2EAE5 70%, rgba(210, 234, 229, 0) 100%);
}

.elementor-11855 .elementor-element.elementor-element-r5_c4 .elementor-image-box-img::before {
    background: radial-gradient(closest-side, #F6E0C6 70%, rgba(246, 224, 198, 0) 100%);
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img a {
    display: block;
    width: 86%;
    height: 86%;
    line-height: 0;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    mix-blend-mode: multiply;
    /* nudges the last of the source watermark to pure white; the
       product tones are dark enough not to notice */
    filter: brightness(1.06);
}

/* card text */
.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-title {
    color: #141B26 !important;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 8px;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-title a,
.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img a {
    text-decoration: none !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-title a {
    transition: color .18s ease;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-widget-image-box:hover .elementor-image-box-title a {
    color: #E02424;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-description {
    color: #5B6470 !important;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-content,
.elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-wrapper {
    width: 100%;
}

@media (max-width: 1024px) {
    .elementor-11855 .elementor-element.elementor-element-r4_h .elementor-heading-title { font-size: 36px; }

    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img { height: 186px; }
}

@media (max-width: 959px) {
    /* four columns get cramped below this — go 2 across and let the
       blob grow a little so the wider card doesn't look empty */
    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-column {
        width: 50% !important;
    }

    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img {
        max-width: 268px;
        height: 210px;
    }
}

@media (max-width: 767px) {
    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-widget-image-box { padding: 24px 16px 26px; }

    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-img { height: 196px; }

    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-title { font-size: 18px; }

    .elementor-11855 .elementor-element.elementor-element-r5_cats .elementor-image-box-description { font-size: 13.5px; }

    .elementor-11855 .elementor-element.elementor-element-r4_h .elementor-heading-title { font-size: 30px; }
}

/* ============================================================
   HOMEPAGE - CLOSING SEGMENTS (decoration + layout only)
   r16_info ("Get Ready..."), r17_whatsapp, r18_seo.

   Colours, type sizes, paddings and the card surfaces for these
   rows now live in the Elementor panel, so they are editable
   there. What stays here is only what Elementor has no control
   for: accent rules, the checklist card rows, the WhatsApp
   chip/bubbles, and the SEO card grid.
   ============================================================ */

/* ------------------------------------------------------------
   1) "GET READY..." - dark feature band
   ------------------------------------------------------------ */

/* short red rule above the headline, same accent as the category band */
.elementor-11855 .elementor-element.elementor-element-r16_h .elementor-heading-title::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: #E02424;
    margin: 0 0 20px;
}

/* ---------- checklist: one soft card per point ----------
   (the icon-list widget has no per-item background/border control) */
.elementor-11855 .elementor-element.elementor-element-r16_list .elementor-icon-list-item {
    display: flex !important;
    align-items: center;
    padding: 13px 16px !important;
    margin: 0 0 10px !important;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.elementor-11855 .elementor-element.elementor-element-r16_list .elementor-icon-list-item:hover {
    background: rgba(255, 255, 255, .075);
    border-color: rgba(224, 36, 36, .45);
    transform: translateX(4px);
}

/* round gradient chip behind each tick */
.elementor-11855 .elementor-element.elementor-element-r16_list .elementor-icon-list-icon i {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #FF5A4D 0%, #C81E1E 100%);
    box-shadow: 0 6px 14px rgba(224, 36, 36, .34);
}

/* tick glyph inside the red button (the button widget has no icon field) */
.elementor-11855 .elementor-element.elementor-element-r16_btn .elementor-button-text::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    margin-right: 9px;
    vertical-align: -1px;
}

/* hover lift - Elementor's own hover animations loop instead of lifting once */
.elementor-11855 .elementor-element.elementor-element-r16_btn .elementor-button {
    transition: transform .2s ease;
}

.elementor-11855 .elementor-element.elementor-element-r16_btn .elementor-button:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   2) WHATSAPP ORDER BAND
   ------------------------------------------------------------ */

.elementor-11855 .elementor-element.elementor-element-r17_whatsapp {
    overflow: hidden;
}

/* two soft bubbles so the flat green has some depth */
.elementor-11855 .elementor-element.elementor-element-r17_whatsapp::before,
.elementor-11855 .elementor-element.elementor-element-r17_whatsapp::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.elementor-11855 .elementor-element.elementor-element-r17_whatsapp::before {
    width: 300px;
    height: 300px;
    top: -150px;
    right: -70px;
    background: rgba(255, 255, 255, .10);
}

.elementor-11855 .elementor-element.elementor-element-r17_whatsapp::after {
    width: 190px;
    height: 190px;
    bottom: -110px;
    left: -50px;
    background: rgba(0, 0, 0, .07);
}

.elementor-11855 .elementor-element.elementor-element-r17_whatsapp > .elementor-container {
    position: relative;
    z-index: 1;
}

/* white chip with the WhatsApp glyph above the headline */
.elementor-11855 .elementor-element.elementor-element-r17_h .elementor-heading-title::before {
    content: "\f232";
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #ffffff;
    color: #25D366;
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 32px;
    line-height: 58px;
    text-align: center;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* keep the headline to a comfortable measure */
.elementor-11855 .elementor-element.elementor-element-r17_h .elementor-heading-title {
    max-width: 760px;
    margin: 0 auto 26px !important;
}

/* whatsapp glyph inside the white button */
.elementor-11855 .elementor-element.elementor-element-r17_btn .elementor-button-text::before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 20px;
    color: #25D366;
    margin-right: 10px;
    vertical-align: -2px;
}

.elementor-11855 .elementor-element.elementor-element-r17_btn .elementor-button {
    transition: transform .2s ease;
}

.elementor-11855 .elementor-element.elementor-element-r17_btn .elementor-button:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   3) SEO / ABOUT BLOCK - 2x2 card grid
   Native Elementor content on the homepage: r18_seo > r18_col
   holds five inner sections - the intro (r18_intro) and four
   article cards (r18_c1..r18_c4). Each card's white surface,
   border, radius, shadow and padding are Elementor settings;
   only the grid arrangement and the red accent bars live here.
   ------------------------------------------------------------ */

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 30px !important;
}

/* the intro spans the full width and sits above the cards */
.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:first-child {
    grid-column: 1 / -1;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:first-child .elementor-heading-title {
    max-width: 900px;
    margin: 0 auto 18px !important;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:first-child .elementor-heading-title::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: #E02424;
    margin: 0 auto 20px;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:first-child .elementor-widget-text-editor,
.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:first-child .elementor-widget-text-editor p {
    max-width: 860px;
}

/* ---------- the four article cards: hover + accent bars ---------- */
.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:not(:first-child) {
    margin: 0 !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:not(:first-child):hover {
    transform: translateY(-4px);
    border-color: rgba(224, 36, 36, .28);
    box-shadow: 0 2px 4px rgba(20, 27, 38, .05), 0 22px 40px rgba(20, 27, 38, .10);
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:not(:first-child) .elementor-heading-title {
    position: relative;
    padding-left: 15px;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:not(:first-child) .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 999px;
    background: #E02424;
}

.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element:not(:first-child) .elementor-widget-text-editor p:last-child {
    margin-bottom: 0 !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap { gap: 18px; }
}

@media (max-width: 959px) {
    /* two cards side by side get too narrow - stack them */
    .elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .elementor-11855 .elementor-element.elementor-element-r16_list .elementor-icon-list-item { padding: 12px 14px !important; }

    .elementor-11855 .elementor-element.elementor-element-r17_h .elementor-heading-title::before {
        width: 50px;
        height: 50px;
        font-size: 27px;
        line-height: 50px;
    }

    .elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap { gap: 16px; }
}

/* ---------- FAQ card (r18_faq): full-width + native accordion ----------
   The FAQ is the last cell of the 2-up grid; alone in its row it
   sat half-width with dead space beside it. It now spans the full
   row and holds a native Elementor Accordion widget (r18fqt). */
.elementor-11855 .elementor-element-r18_col > .elementor-widget-wrap > .elementor-element-r18_faq {
    grid-column: 1 / -1;
}

/* accordion: hairline rows like the site's other cards */
.elementor-element-r18fqt .elementor-accordion-item + .elementor-accordion-item {
    border-top: 1px solid #EDE8E0;
}

.elementor-element-r18fqt .elementor-accordion-title {
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
    padding: 15px 2px;
    transition: color .15s ease;
}

.elementor-element-r18fqt .elementor-accordion-title:hover {
    color: #E02424;
}

/* + / − icon in a red circle, filled when open */
.elementor-element-r18fqt .elementor-accordion-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    border: 1.5px solid rgba(224, 36, 36, .45);
    border-radius: 50%;
    font-size: 11px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.elementor-element-r18fqt .elementor-tab-title.elementor-active .elementor-accordion-icon {
    background: #E02424;
    border-color: #E02424;
    color: #FFFFFF;
}

/* Elementor's generated icon_color rule sets an explicit svg fill —
   force the open (minus) glyph white to sit on the red circle */
.elementor-element-r18fqt .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
    fill: #FFFFFF !important;
}

.elementor-element-r18fqt .elementor-tab-content {
    padding: 2px 2px 18px;
    color: #4B5563;
}

.elementor-element-r18fqt .elementor-tab-content p {
    margin: 0 0 10px !important;
}

.elementor-element-r18fqt .elementor-tab-content p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .elementor-element-r18fqt .elementor-accordion-title { font-size: 15px; padding: 13px 2px; }
}

/* ============================================================
   SINGLE POST — TOC layout + reading progress
   (pairs with the vf_build_toc filter in functions.php)
   Desktop: sticky TOC rail on the right. Mobile/tablet: a
   collapsible TOC box pinned above the content.
   ============================================================ */

/* two-column article grid (aside stretches full height so the
   sticky card inside it has room to travel) */
.vf-single-post .vf-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: stretch;
}

/* widen Astra's narrow single-post container so the article + TOC
   rail fit side by side (desktop only — archives untouched) */
@media (min-width: 1025px) {
    .vf-single-post .ast-container {
        max-width: 1160px !important;
    }
}

.vf-single-post .vf-post-main {
    min-width: 0;
}

/* anchor offset so headings never hide under the pinned header
   (--vf-hdr-pinned is the header height that stays on screen when stuck,
   measured in functions.php; 136px is the desktop fallback) */
.vf-single-post .vf-post-main h2,
.vf-single-post .vf-post-main h3 {
    scroll-margin-top: calc(var(--vf-hdr-pinned, 136px) + 18px);
}

/* --- TOC card --- */
.vf-single-post .vf-toc-card {
    position: sticky;
    top: 110px;
    background: #FFFFFF;
    border: 1px solid #ECECF0;
    border-radius: 16px;
    padding: 20px 20px 14px;
    box-shadow: 0 14px 34px rgba(17, 17, 17, .07);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.vf-single-post .vf-toc-card::before {
    content: "";
    display: block;
    height: 2px;
    border-radius: 16px 16px 0 0;
    margin: -20px -20px 0;
    background: linear-gradient(90deg, #8E1616 0%, #E02424 50%, #8E1616 100%);
}

.vf-single-post .vf-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 14px 0 12px;
    cursor: pointer;
    color: #1A1A1A;
}

.vf-single-post .vf-toc-toggle-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.vf-single-post .vf-toc-toggle .fas {
    color: #E02424;
    font-size: 17px;
    transition: transform .2s ease;
    flex: none;
}

.vf-single-post .vf-toc-card:not(.is-collapsed) .vf-toc-toggle .fas {
    transform: rotate(180deg);
}

.vf-single-post .vf-toc-card.is-collapsed .vf-toc-nav {
    display: none;
}

/* --- TOC list --- */
.vf-single-post .vf-toc-list,
.vf-single-post .vf-toc-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vf-single-post .vf-toc-list {
    counter-reset: vf-toc;
    padding-bottom: 6px;
}

.vf-single-post .vf-toc-list > li {
    counter-increment: vf-toc;
    border-top: 1px solid #F1F1F4;
}

.vf-single-post .vf-toc-list > li:first-child {
    border-top: none;
}

.vf-single-post .vf-toc-list a {
    position: relative;
    display: block;
    padding: 9px 0 9px 30px;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    color: #4A4A52 !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

.vf-single-post .vf-toc-list > li > a::before {
    content: counter(vf-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 9px;
    font-size: 11px;
    font-weight: 800;
    color: #B9B9C2;
    transition: color .18s ease;
}

.vf-single-post .vf-toc-sub a {
    padding: 7px 0 7px 30px;
    font-size: 12.5px;
    font-weight: 500;
    color: #6B6B73 !important;
}

.vf-single-post .vf-toc-sub a::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D8D8DE;
    transition: background .18s ease;
}

.vf-single-post .vf-toc-list a:hover {
    color: #E02424 !important;
}

.vf-single-post .vf-toc-list > li > a:hover::before {
    color: #E02424;
}

.vf-single-post .vf-toc-sub a:hover::before {
    background: #E02424;
}

/* scroll-spy active row */
.vf-single-post .vf-toc-list a.is-active {
    color: #E02424 !important;
}

.vf-single-post .vf-toc-list > li > a.is-active::before {
    color: #E02424;
}

.vf-single-post .vf-toc-sub a.is-active::before {
    background: #E02424;
    box-shadow: 0 0 0 3px rgba(224, 36, 36, .18);
}

/* --- reading progress bar --- */
.vf-read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99990;
    background: transparent;
    pointer-events: none;
}

.vf-read-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #8E1616, #E02424);
}

/* --- tablet + mobile: TOC becomes a top box --- */
@media (max-width: 1024px) {
    .vf-single-post .vf-post-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .vf-single-post .vf-toc {
        order: -1;
        margin-bottom: 22px;
    }

    .vf-single-post .vf-toc-card {
        position: static;
        max-height: none;
        padding: 6px 18px 12px;
    }

    .vf-single-post .vf-toc-card::before {
        margin: -6px -18px 0;
    }
}

/* ============================================================
   SINGLE POST — comment form + comments list
   (Astra renders #respond / #ast-commentform; Woo review styles
   above are scoped to .woocommerce-js and don't touch this.)
   ============================================================ */

/* --- form card --- */
.vf-single-post #respond {
    background: #FFFFFF;
    border: 1px solid #ECECF0;
    border-radius: 16px;
    padding: 28px 28px 26px;
    margin-top: 40px;
    box-shadow: 0 14px 34px rgba(17, 17, 17, .06);
    overflow: hidden;
}

.vf-single-post #respond::before {
    content: "";
    display: block;
    height: 2px;
    border-radius: 16px 16px 0 0;
    margin: -28px -28px 0;
    background: linear-gradient(90deg, #8E1616 0%, #E02424 50%, #8E1616 100%);
}

/* --- title with the same red-bar accent as article h2s --- */
.vf-single-post #reply-title {
    position: relative;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    padding-left: 14px;
    margin: 22px 0 6px !important;
}

.vf-single-post #reply-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: #E02424;
}

.vf-single-post #cancel-comment-reply-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #E02424 !important;
    margin-left: 8px;
}

/* --- helper note --- */
.vf-single-post #respond .comment-notes,
.vf-single-post #respond .logged-in-as {
    font-size: 13.5px !important;
    color: #83838C !important;
    margin-bottom: 18px !important;
}

.vf-single-post #respond .comment-notes .required {
    color: #E02424;
}

/* --- fields --- */
.vf-single-post #ast-commentform .ast-comment-formwrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.vf-single-post #ast-commentform .ast-comment-formwrap > p {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vf-single-post #ast-commentform textarea,
.vf-single-post #ast-commentform input[type="text"],
.vf-single-post #ast-commentform input[type="email"],
.vf-single-post #ast-commentform input[type="url"] {
    width: 100%;
    background: #FAFAFB;
    border: 1.5px solid #E3E3E8;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.6;
    color: #1A1A1A;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vf-single-post #ast-commentform textarea {
    min-height: 150px;
    resize: vertical;
    margin-bottom: 14px;
}

.vf-single-post #ast-commentform textarea::placeholder,
.vf-single-post #ast-commentform input::placeholder {
    color: #A9A9B2;
}

.vf-single-post #ast-commentform textarea:hover,
.vf-single-post #ast-commentform input:hover {
    border-color: #CFCFD8;
}

.vf-single-post #ast-commentform textarea:focus,
.vf-single-post #ast-commentform input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: #E02424;
    box-shadow: 0 0 0 4px rgba(224, 36, 36, .12);
}

/* --- save-details checkbox row --- */
.vf-single-post #ast-commentform .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #6B6B73;
    margin: 4px 0 20px !important;
}

.vf-single-post #ast-commentform .comment-form-cookies-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
    accent-color: #E02424;
    cursor: pointer;
}

.vf-single-post #ast-commentform .comment-form-cookies-consent label {
    cursor: pointer;
}

/* --- submit: brand red pill --- */
.vf-single-post #ast-commentform .form-submit {
    margin: 0 !important;
}

.vf-single-post #ast-commentform #submit {
    background: linear-gradient(135deg, #E02424, #8E1616) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 38px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .4px;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(224, 36, 36, .3);
    transition: transform .18s ease, box-shadow .18s ease;
}

.vf-single-post #ast-commentform #submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(224, 36, 36, .4);
}

/* --- existing comments list --- */
.vf-single-post .comment-list {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.vf-single-post .comments-title {
    font-size: 20px;
    font-weight: 800;
    color: #1A1A1A;
    margin-bottom: 6px;
}

.vf-single-post .comment-list .comment-body {
    background: #FFFFFF;
    border: 1px solid #ECECF0;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 14px;
}

.vf-single-post .comment-list .comment-author img {
    border-radius: 50% !important;
    border: 2px solid #E02424;
}

.vf-single-post .comment-list .comment-metadata {
    font-size: 12.5px;
    color: #83838C;
}

.vf-single-post .comment-list .comment-metadata a {
    color: #83838C !important;
    text-decoration: none !important;
}

.vf-single-post .comment-list .comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #333333;
}

.vf-single-post .comment-list .reply a {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #E02424 !important;
    text-decoration: none !important;
    border: 1.5px solid rgba(224, 36, 36, .4);
    border-radius: 999px;
    padding: 7px 18px;
    transition: background .18s ease, color .18s ease;
}

.vf-single-post .comment-list .reply a:hover {
    background: #E02424;
    color: #FFFFFF !important;
}

/* --- mobile: stack the three fields --- */
@media (max-width: 767px) {
    .vf-single-post #respond {
        padding: 22px 18px 20px;
    }

    .vf-single-post #respond::before {
        margin: -22px -18px 0;
    }

    .vf-single-post #ast-commentform .ast-comment-formwrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .vf-single-post #ast-commentform #submit {
        width: 100%;
    }
}

/* ============================================================
   BLOG ARCHIVE (/blog/) + category/tag archives + search
   Card design matching the brand. Same Astra markup everywhere,
   so one selector list covers all three.
   ============================================================ */

.blog .ast-article-post .ast-article-inner,
.archive .ast-article-post .ast-article-inner,
.search .ast-article-post .ast-article-inner {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #ECECF0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(17, 17, 17, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.blog .ast-article-post .ast-article-inner:hover,
.archive .ast-article-post .ast-article-inner:hover,
.search .ast-article-post .ast-article-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(17, 17, 17, .12);
}

/* --- featured image zoom on hover --- */
.blog .ast-article-post .post-thumb,
.archive .ast-article-post .post-thumb,
.search .ast-article-post .post-thumb {
    overflow: hidden;
    margin-bottom: 0 !important;
}

.blog .ast-article-post .post-thumb img,
.archive .ast-article-post .post-thumb img,
.search .ast-article-post .post-thumb img {
    width: 100%;
    transition: transform .45s ease;
}

.blog .ast-article-post .ast-article-inner:hover .post-thumb img,
.archive .ast-article-post .ast-article-inner:hover .post-thumb img,
.search .ast-article-post .ast-article-inner:hover .post-thumb img {
    transform: scale(1.06);
}

/* --- category as a red badge floating over the image --- */
.blog .ast-article-post .cat-links,
.archive .ast-article-post .cat-links,
.search .ast-article-post .cat-links {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    margin: 0 !important;
}

.blog .ast-article-post .cat-links a,
.archive .ast-article-post .cat-links a,
.search .ast-article-post .cat-links a {
    display: inline-block;
    background: linear-gradient(135deg, #E02424, #8E1616) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 999px;
    padding: 7px 15px;
    margin: 0 6px 0 0 !important;
    box-shadow: 0 8px 18px rgba(224, 36, 36, .35);
}

/* --- card body rhythm --- */
.blog .ast-article-post .post-content,
.archive .ast-article-post .post-content,
.search .ast-article-post .post-content {
    padding: 22px 24px 26px !important;
}

/* --- title --- */
.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title,
.search .ast-article-post .entry-title {
    margin: 0 0 8px !important;
}

.blog .ast-article-post .entry-title a,
.archive .ast-article-post .entry-title a,
.search .ast-article-post .entry-title a {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #1A1A1A !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

.blog .ast-article-post .entry-title a:hover,
.archive .ast-article-post .entry-title a:hover,
.search .ast-article-post .entry-title a:hover {
    color: #E02424 !important;
}

/* --- meta: muted, red author --- */
.blog .ast-article-post .entry-meta,
.archive .ast-article-post .entry-meta,
.search .ast-article-post .entry-meta {
    font-size: 13px !important;
    font-weight: 600;
    color: #83838C !important;
    margin-bottom: 10px !important;
}

.blog .ast-article-post .entry-meta a,
.archive .ast-article-post .entry-meta a,
.search .ast-article-post .entry-meta a {
    color: #E02424 !important;
    text-decoration: none !important;
}

.blog .ast-article-post .entry-meta a:hover,
.archive .ast-article-post .entry-meta a:hover,
.search .ast-article-post .entry-meta a:hover {
    text-decoration: underline !important;
}

/* --- excerpt --- */
.blog .ast-article-post .ast-excerpt-container p,
.archive .ast-article-post .ast-excerpt-container p,
.search .ast-article-post .ast-excerpt-container p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #55555C !important;
    margin-bottom: 16px !important;
}

/* --- read-more pill (injected by excerpt_more filter) --- */
.blog .ast-article-post .vf-read-more,
.archive .ast-article-post .vf-read-more,
.search .ast-article-post .vf-read-more {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .4px;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #E02424, #8E1616);
    text-decoration: none !important;
    border-radius: 999px;
    padding: 10px 24px;
    box-shadow: 0 8px 18px rgba(224, 36, 36, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.blog .ast-article-post .vf-read-more:hover,
.archive .ast-article-post .vf-read-more:hover,
.search .ast-article-post .vf-read-more:hover {
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(224, 36, 36, .38);
}

/* --- pagination --- */
.blog .navigation.pagination .nav-links,
.archive .navigation.pagination .nav-links,
.search .navigation.pagination .nav-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
}

.blog .navigation.pagination .page-numbers,
.archive .navigation.pagination .page-numbers,
.search .navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 800;
    color: #4A4A52 !important;
    background: #FFFFFF;
    border: 1.5px solid #E3E3E8;
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.blog .navigation.pagination a.page-numbers:hover,
.archive .navigation.pagination a.page-numbers:hover,
.search .navigation.pagination a.page-numbers:hover {
    border-color: #E02424;
    color: #E02424 !important;
}

.blog .navigation.pagination .page-numbers.current,
.archive .navigation.pagination .page-numbers.current,
.search .navigation.pagination .page-numbers.current {
    background: linear-gradient(135deg, #E02424, #8E1616) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(224, 36, 36, .3);
}

/* ============================================================
   HOMEPAGE — tighten the gaps between segments
   Product grids carried 60-80px bottom padding and each heading
   row 80px top padding (140-160px of dead space between bands).
   r4+r5 share one cream band so their inner rhythm is untouched;
   only the space BETWEEN bands is trimmed.
   !important because Elementor's per-page CSS loads after the
   theme stylesheets.
   ============================================================ */

/* heading rows: 80px top -> 44px */
.elementor-11855 .elementor-element.elementor-element-r4_cat_head,
.elementor-11855 .elementor-element.elementor-element-r6_bs_head,
.elementor-11855 .elementor-element.elementor-element-r8_disp_head,
.elementor-11855 .elementor-element.elementor-element-r10_kits_head,
.elementor-11855 .elementor-element.elementor-element-r12_pod_head,
.elementor-11855 .elementor-element.elementor-element-r14_ej_head {
    padding-top: 44px !important;
}

/* product grids: 60-80px bottom -> 36px */
.elementor-11855 .elementor-element.elementor-element-r5_cats,
.elementor-11855 .elementor-element.elementor-element-r7_bs_products,
.elementor-11855 .elementor-element.elementor-element-r9_disp,
.elementor-11855 .elementor-element.elementor-element-r11_kits,
.elementor-11855 .elementor-element.elementor-element-r13_pod,
.elementor-11855 .elementor-element.elementor-element-r15_ej {
    padding-bottom: 36px !important;
}

/* lower info bands: 56-84px -> 48px */
.elementor-11855 .elementor-element.elementor-element-r16_info,
.elementor-11855 .elementor-element.elementor-element-r17_whatsapp,
.elementor-11855 .elementor-element.elementor-element-r18_seo {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* ============================================================
   AGE VERIFICATION popup  (dispensary-age-verification plugin)

   This is NOT an Elementor widget — the plugin injects
   .avwp-av / .avwp-av-overlay via JS at runtime, so it can't be
   edited in the Elementor editor. It is restyled here from the
   child theme instead, which keeps the plugin update-proof.
   ============================================================ */

/* --- backdrop: softer than the plugin's flat 90% black --- */
.avwp-av-overlay {
    background: rgba(8, 8, 10, .82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: default !important;
}

/* --- card --- */
.avwp-av {
    background: #ffffff !important;
    border-radius: 22px !important;
    padding: 42px 38px 36px !important;
    width: 430px !important;
    text-align: center;
    /* the plugin sets a harsh 0 0 15px #000 — replace with a layered,
       diffused shadow plus a faint red halo so it matches the brand */
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55),
                0 0 0 1px rgba(255, 255, 255, .06),
                0 0 60px rgba(224, 36, 36, .18) !important;
    overflow: hidden;
}

/* red gradient hairline across the top of the card */
.avwp-av::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8E1616 0%, #E02424 50%, #8E1616 100%);
}

/* the plugin positions the card with inline top/left, so it needs
   a positioning context for the ::before above */
.avwp-av h2,
.avwp-av p {
    position: relative;
}

/* --- 18+ roundel, drawn above the title --- */
.avwp-av h2::before {
    content: "18+";
    display: block;
    width: 62px;
    height: 62px;
    line-height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E02424, #8E1616);
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
    box-shadow: 0 12px 26px rgba(224, 36, 36, .35);
}

/* --- title --- */
.avwp-av h2 {
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
    color: #141414 !important;
    margin: 0 0 14px !important;
    padding-bottom: 0 !important;
}

/* --- body copy --- */
.avwp-av p {
    color: #6b6b73 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

.avwp-av p strong {
    color: #E02424 !important;
    font-weight: 800;
}

/* --- buttons --- */
.avwp-av button {
    border: none !important;
    border-radius: 999px !important;
    padding: 13px 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px;
    width: 48% !important;
    margin-top: 26px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.avwp-av button.yes {
    background: linear-gradient(135deg, #E02424, #8E1616) !important;
    color: #ffffff !important;
    margin-left: 0 !important;
    margin-right: 2% !important;
    box-shadow: 0 12px 26px rgba(224, 36, 36, .32) !important;
}

.avwp-av button.yes:hover,
.avwp-av button.yes:focus {
    background: linear-gradient(135deg, #EF3131, #9C1A1A) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(224, 36, 36, .42) !important;
}

.avwp-av button.no {
    background: #F1F1F3 !important;
    color: #4A4A52 !important;
}

.avwp-av button.no:hover,
.avwp-av button.no:focus {
    background: #E4E4E9 !important;
    transform: translateY(-2px);
}

/* --- small screens: keep the card comfortable --- */
@media (max-width: 500px) {
    .avwp-av {
        width: auto !important;
        margin: 0 16px !important;
        padding: 34px 24px 28px !important;
        border-radius: 18px !important;
    }

    .avwp-av h2 { font-size: 21px !important; }

    .avwp-av h2::before {
        width: 54px;
        height: 54px;
        line-height: 54px;
        font-size: 17px;
        margin-bottom: 14px;
    }

    .avwp-av button { width: 100% !important; margin-right: 0 !important; }
}

/* ------------------------------------------------------------------ *
 * Blog index heading + post -> shop internal links
 * ------------------------------------------------------------------ */
.vf-blog-title { margin: 0 0 26px; }

.vf-post-shop-links {
    margin: 2.4em 0 0;
    padding: 24px 26px;
    background: #F7F4EF;
    border: 1px solid #EDE8E0;
    border-radius: 10px;
}

.vf-post-shop-links h2 {
    margin: 0 0 0.45em;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #141B26;
}

.vf-post-shop-links p {
    margin: 0 0 0.9em;
    color: #5B6470;
    font-size: 0.95rem;
}

.vf-post-shop-links ul {
    margin: 0 0 1.1em;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vf-post-shop-links li { margin: 0; }

.vf-post-shop-links li a {
    display: inline-block;
    padding: 7px 15px;
    background: #fff;
    border: 1px solid #EDE8E0;
    border-radius: 999px;
    color: #C81E1E;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vf-post-shop-links li a:hover,
.vf-post-shop-links li a:focus {
    background: #E02424;
    border-color: #E02424;
    color: #fff;
}

.vf-post-shop-links .vf-post-shop-cta {
    display: inline-block;
    padding: 11px 20px;
    background: #E02424;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.vf-post-shop-links .vf-post-shop-cta:hover,
.vf-post-shop-links .vf-post-shop-cta:focus { background: #C81E1E; color: #fff; }

@media (max-width: 544px) {
    .vf-post-shop-links { padding: 20px 18px; }
    .vf-post-shop-links h2 { font-size: 1.15rem; }
}



/* ============================================================
   SINGLE POST — featured-image hero
   Astra's Customizer disables the featured image on singles, so
   the hero never rendered (even for posts WITH a thumbnail).
   Injected via the_content at priority 8, so it sits at the top
   of the article above the TOC/content. Full-width, 16:9 crop,
   rounded 18px with a hairline + soft shadow to match the cards.
   The WebP fallback (via post_thumbnail_html) covers imageless
   posts automatically, so this rule styles both cases.
   ============================================================ */
.vf-single-hero {
    margin: 0 0 26px;
    line-height: 0;
}

.vf-single-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(17, 17, 17, .08);
    box-shadow: 0 18px 40px rgba(17, 17, 17, .12);
}

/* phones: taller crop so the device fills the frame */
@media (max-width: 767px) {
    .vf-single-hero {
        margin-bottom: 20px;
    }

    .vf-single-hero img {
        border-radius: 14px;
        aspect-ratio: 4 / 3;
    }
}


/* ============================================================
   LIVE SEARCH SUGGESTIONS — dropdown panel
   Injected by the vf_suggest frontend as position:fixed under
   the active search input. White card, red hairline, product
   rows with thumbnail + price and a blog section. .is-active is
   driven by arrow-key navigation.
   ============================================================ */
.vf-suggest {
    position: fixed;
    z-index: 999999;
    background: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, .10);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(17, 17, 17, .18);
    overflow: hidden;
    max-height: 74vh;
    overflow-y: auto;
    font-family: inherit;
    animation: vf-suggest-in .14s ease;
}

@keyframes vf-suggest-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vf-suggest-label {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9A9AA2;
}

.vf-suggest-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    text-decoration: none !important;
    color: #1A1A1A;
    transition: background .12s ease;
}

.vf-suggest-row:hover,
.vf-suggest-row.is-active {
    background: rgba(224, 36, 36, .07);
}

.vf-suggest-thumb {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(17, 17, 17, .08);
    background: #F7F4EF;
}

.vf-suggest-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vf-suggest-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-suggest-price {
    font-size: 13px;
    font-weight: 700;
    color: #E02424;
}

.vf-suggest-meta {
    font-size: 12px;
    color: #9A9AA2;
}

.vf-suggest-empty {
    padding: 18px 16px;
    font-size: 14px;
    color: #6B6B73;
}

.vf-suggest-all {
    display: block;
    padding: 12px 16px;
    margin-top: 4px;
    border-top: 1px solid rgba(17, 17, 17, .07);
    background: #FBFAF8;
    font-size: 13px;
    font-weight: 700;
    color: #E02424 !important;
    text-decoration: none !important;
    transition: background .12s ease;
}

.vf-suggest-all:hover { background: rgba(224, 36, 36, .06); }

@media (max-width: 767px) {
    .vf-suggest { border-radius: 12px; max-height: 60vh; }
    .vf-suggest-thumb { width: 38px; height: 38px; flex-basis: 38px; }
}

/* ============================================================
   SERVICE + LEGAL PAGES — branded accents (restyle 2026-10-17)
   About Us (2682), Contact Us (3352), Terms (11893),
   Privacy (3), Refund (12). Scoped to their body page-id
   classes — no other page is touched. Purely cosmetic; the
   layout/content stay fully editable in Elementor.
   ============================================================ */
body.page-id-3 .elementor-widget-heading h1.elementor-heading-title,
body.page-id-12 .elementor-widget-heading h1.elementor-heading-title,
body.page-id-2682 .elementor-widget-heading h1.elementor-heading-title,
body.page-id-3352 .elementor-widget-heading h1.elementor-heading-title,
body.page-id-11893 .elementor-widget-heading h1.elementor-heading-title {
    color: #111111 !important;
    position: relative;
    padding-bottom: 18px;
}

body.page-id-3 .elementor-widget-heading h1.elementor-heading-title::after,
body.page-id-12 .elementor-widget-heading h1.elementor-heading-title::after,
body.page-id-2682 .elementor-widget-heading h1.elementor-heading-title::after,
body.page-id-3352 .elementor-widget-heading h1.elementor-heading-title::after,
body.page-id-11893 .elementor-widget-heading h1.elementor-heading-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: #E02424;
}

/* clause headings inside the text cards: short red tick above */
body.page-id-3 .elementor-widget-text-editor h2,
body.page-id-12 .elementor-widget-text-editor h2,
body.page-id-2682 .elementor-widget-text-editor h2,
body.page-id-3352 .elementor-widget-text-editor h2,
body.page-id-11893 .elementor-widget-text-editor h2 {
    position: relative;
    padding-top: 15px;
    margin-top: 8px !important;
    color: #1A1A1A !important;
}

body.page-id-3 .elementor-widget-text-editor h2::before,
body.page-id-12 .elementor-widget-text-editor h2::before,
body.page-id-2682 .elementor-widget-text-editor h2::before,
body.page-id-3352 .elementor-widget-text-editor h2::before,
body.page-id-11893 .elementor-widget-text-editor h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #E02424;
}

/* branded list bullets + emphasis */
body.page-id-3 .elementor-widget-text-editor li::marker,
body.page-id-12 .elementor-widget-text-editor li::marker,
body.page-id-2682 .elementor-widget-text-editor li::marker,
body.page-id-3352 .elementor-widget-text-editor li::marker,
body.page-id-11893 .elementor-widget-text-editor li::marker {
    color: #E02424;
}

body.page-id-3 .elementor-widget-text-editor strong,
body.page-id-3 .elementor-widget-text-editor b,
body.page-id-12 .elementor-widget-text-editor strong,
body.page-id-12 .elementor-widget-text-editor b,
body.page-id-2682 .elementor-widget-text-editor strong,
body.page-id-2682 .elementor-widget-text-editor b,
body.page-id-3352 .elementor-widget-text-editor strong,
body.page-id-3352 .elementor-widget-text-editor b,
body.page-id-11893 .elementor-widget-text-editor strong,
body.page-id-11893 .elementor-widget-text-editor b {
    color: #8E1616;
}

/* ============================================================
   MOBILE HEADER BAR — shorter, so the logo row reads centred

   On phones the bar is two lines:
       [ burger ]   LOGO (centred)   [ acct ] [ wish ] [ cart ]
       [ ---------- product search, full width ---------- ]

   The row that holds the logo and the icons was hugging the top of
   the white block because the section carried 10px top / 0 bottom
   padding, a 10-12px row gap and a search column padded 10px/12px
   of its own. Trimmed to 8px / 8px, an 8px row gap and a 38px pill
   (= the height of the icon buttons), so the bar loses ~34px and
   the logo + icons sit on the optical centre of the white area.
   ============================================================ */

@media (max-width: 1024px) {

    /* the white bar itself — even padding top and bottom */
    #masthead .elementor-element-36ed18b0 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #masthead .elementor-element-36ed18b0 > .elementor-container {
        row-gap: 8px;
    }

    /* search row: carries no vertical padding of its own any more */
    #masthead .elementor-element-6c481e5a {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    #masthead .elementor-element-6c481e5a .elementor-widget-container,
    #masthead .elementor-element-6c481e5a .widget-product_search {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* slimmer search pill, exactly the height of the icon buttons */
    #masthead .elementor-element-6c481e5a form.woocommerce-product-search,
    #masthead .elementor-element-6c481e5a form.elementor-search-form {
        height: 38px !important;
        min-height: 38px !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #masthead .elementor-element-6c481e5a input[type="search"],
    #masthead .elementor-element-6c481e5a .search-field {
        height: 38px !important;
        min-height: 38px !important;
    }
}

/* ============================================================
   MOBILE MENU BUTTON — no flash while the page loads

   The button is printed as the first child of <header> and the footer
   script then hoists it into the bar's row. In between it would sit in
   normal flow ABOVE the red announcement bar, painting a hamburger over
   the dark page background (and pushing the header down) on every load.

   A tiny rule in <head> ("vf-header-preload-guard") hides the button and
   the drawer from the very first paint. The rule below — same !important,
   but an ID + two classes — brings the button back the moment it really
   is inside the bar's row. Nothing to do with JS order: if the hoist
   happens before or after the stylesheet, the result is the same.
   ============================================================ */

@media (max-width: 1024px) {

    #masthead .elementor-element-36ed18b0 .vf-mobile-bar {
        display: inline-flex !important;
    }
}

/* ============================================================
   MOBILE HEADER — account + wishlist icons on the cart's centre line

   The account and wishlist widgets are Elementor icon-boxes whose
   title/description are hidden, but the box still reserves its 15px
   gap under the glyph. That made the glyph sit at the TOP of its
   34px slot, ~7px higher than the cart's bag, so the three icons
   looked out of step.

   Collapse the empty content and centre the glyph instead: the
   person, the heart and the bag then all share one centre line.
   ============================================================ */

@media (max-width: 1024px) {

    #masthead .vf-iconbox .elementor-widget-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #masthead .vf-iconbox .elementor-icon-box-wrapper {
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* the title/description are hidden anyway — drop the empty box */
    #masthead .vf-iconbox .elementor-icon-box-content {
        display: none !important;
    }
}

/* ============================================================
   CHECKOUT — payment description box (the note panel under each
   payment method, e.g. the Cash-on-delivery note). Sharp thin
   red border: 1px + border-radius 0. The gray fill and the
   pointer triangle are left WooCommerce-default so the panel
   keeps its "speech bubble" shape. Applies to every payment
   method so the boxes stay visually consistent.
   ============================================================ */

.woocommerce-checkout #payment .payment_box {
    border: 1px solid #E02424 !important;
    border-radius: 0 !important;
}

/* ============================================================
   Keep the layout width constant whether or not the page scrolls.

   Opening the mobile drawer locks the page (documentElement gets
   overflow: hidden). On browsers with a classic scrollbar that makes
   the scrollbar vanish, the viewport widens ~15px and the whole page
   — header, drawer, everything — jumps to the right. Reserving the
   gutter up front means nothing moves when the drawer opens.
   (No effect on phones, where scrollbars are overlay-only.)
   ============================================================ */

html {
    scrollbar-gutter: stable;
}

/* ============================================================
   MOBILE DRAWER — white brand mark, centred in the head

   The drawer panel is dark (#191919 -> #0d0d0f) and the old mark
   was a purple wordmark, so it read poorly there. The drawer brand
   now uses the same white transparent image the footer uses, and it
   is centred: the head becomes a 3-column grid (spacer | brand |
   close) so the mark sits in the middle of the panel instead of
   being pushed left by the close button.

   The image carries transparent padding above/below the wordmark,
   so size it by width and let the height follow.
   ============================================================ */

@media (max-width: 1024px) {

    #vf-mobile-nav .vf-drawer .vf-drawer__head {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        align-items: center;
        column-gap: 12px;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__brand {
        grid-column: 2;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
    }

    #vf-mobile-nav .vf-drawer .vf-drawer__brand img {
        width: 168px;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    #vf-mobile-nav .vf-drawer .vf-close {
        grid-column: 3;
        justify-self: end;
    }
}