/*
Theme Name:   Vinascan
Theme URI:    https://vinascan.com
Description:  Vinascan - Child theme của Flatsome
Author:       Vinascan Team
Author URI:   https://vinascan.com
Template:     flatsome
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vinascan
*/

/* ==========================================================================
   Custom CSS cho Vinascan Child Theme
   ========================================================================== */

/* ==========================================================================
   Global Font Family - Adamina (Headings) & Alegreya (Body)
   ========================================================================== */

/* Apply Alegreya to body text elements */
body,
html,
button,
input,
select,
textarea,
.button,
.nav,
p,
a,
span,
div {
    font-family: 'Alegreya', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply Adamina to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Adamina', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced Button Styles */
.vinascan-custom-button {
    transition: all 0.3s ease-in-out !important;
}

.vinascan-custom-button,
.vinascan-custom-button span {
    transition: background-color 0.3s ease-in-out,
                color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                transform 0.2s ease-in-out !important;
}

.vinascan-custom-button span {
    font-weight: inherit;
}

/* Custom Color Support with CSS Variables */
.vinascan-custom-button {
    background-color: var(--btn-bg-color, inherit) !important;
    color: var(--btn-text-color, inherit) !important;
    border-color: var(--btn-border-color, inherit) !important;
}

.vinascan-custom-button span {
    color: var(--btn-text-color, inherit) !important;
}

/* Hover States */
.vinascan-custom-button:hover {
    background-color: var(--btn-hover-bg-color, var(--btn-bg-color, inherit)) !important;
    color: var(--btn-hover-text-color, var(--btn-text-color, inherit)) !important;
    border-color: var(--btn-hover-border-color, var(--btn-border-color, inherit)) !important;
}

.vinascan-custom-button:hover span {
    color: var(--btn-hover-text-color, var(--btn-text-color, inherit)) !important;
}

/* ==========================================================================
   Basic Button Element
   ========================================================================== */

/* Base Button Styles */
.btn-basic,
button.btn-basic,
a.btn-basic {
    display: inline-block;
    font-family: 'Alegreya', serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-basic:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.btn-basic:disabled,
.btn-basic.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Variants */
/* Primary Button */
.btn-basic.btn-primary {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

.btn-basic.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.btn-basic.btn-primary:active {
    background-color: #004085;
    border-color: #003a75;
    transform: translateY(0);
}

/* Secondary Button */
.btn-basic.btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}

.btn-basic.btn-secondary:hover {
    background-color: #545b62;
    border-color: #4e555b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.btn-basic.btn-secondary:active {
    background-color: #4e555b;
    border-color: #474d52;
    transform: translateY(0);
}

/* Success Button */
.btn-basic.btn-success {
    background-color: #28a745;
    color: #ffffff;
    border-color: #28a745;
}

.btn-basic.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-basic.btn-success:active {
    background-color: #1e7e34;
    border-color: #1c7430;
    transform: translateY(0);
}

/* Danger Button */
.btn-basic.btn-danger {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

.btn-basic.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-basic.btn-danger:active {
    background-color: #bd2130;
    border-color: #b21f2d;
    transform: translateY(0);
}

/* Warning Button */
.btn-basic.btn-warning {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.btn-basic.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.btn-basic.btn-warning:active {
    background-color: #d39e00;
    border-color: #c69500;
    transform: translateY(0);
}

/* Info Button */
.btn-basic.btn-info {
    background-color: #17a2b8;
    color: #ffffff;
    border-color: #17a2b8;
}

.btn-basic.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

.btn-basic.btn-info:active {
    background-color: #117a8b;
    border-color: #10707f;
    transform: translateY(0);
}

/* Light Button */
.btn-basic.btn-light {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #f8f9fa;
}

.btn-basic.btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(248, 249, 250, 0.5);
}

.btn-basic.btn-light:active {
    background-color: #dae0e5;
    border-color: #d3d9df;
    transform: translateY(0);
}

/* Dark Button */
.btn-basic.btn-dark {
    background-color: #343a40;
    color: #ffffff;
    border-color: #343a40;
}

.btn-basic.btn-dark:hover {
    background-color: #23272b;
    border-color: #1d2124;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 58, 64, 0.3);
}

.btn-basic.btn-dark:active {
    background-color: #1d2124;
    border-color: #171a1d;
    transform: translateY(0);
}

/* Outline Button Variants */
.btn-basic.btn-outline-primary {
    background-color: transparent;
    color: #007bff;
    border-color: #007bff;
}

.btn-basic.btn-outline-primary:hover {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

.btn-basic.btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border-color: #6c757d;
}

.btn-basic.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}

.btn-basic.btn-outline-success {
    background-color: transparent;
    color: #28a745;
    border-color: #28a745;
}

.btn-basic.btn-outline-success:hover {
    background-color: #28a745;
    color: #ffffff;
    border-color: #28a745;
}

.btn-basic.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

.btn-basic.btn-outline-danger:hover {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

/* Button Sizes */
.btn-basic.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 3px;
}

.btn-basic.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 6px;
}

/* Full Width Button */
.btn-basic.btn-block {
    display: block;
    width: 100%;
}

/* Rounded Button */
.btn-basic.btn-rounded {
    border-radius: 50px;
}

/* Icon Button Support */
.btn-basic i,
.btn-basic .icon {
    margin-right: 8px;
    vertical-align: middle;
}

.btn-basic i:last-child,
.btn-basic .icon:last-child {
    margin-right: 0;
    margin-left: 8px;
}

/* Button Group */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.btn-group .btn-basic {
    border-radius: 0;
}

.btn-group .btn-basic:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group .btn-basic:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-group .btn-basic:not(:last-child) {
    border-right: 0;
}

/* ==========================================================================
   Product Card Styles
   ========================================================================== */

/* Product Title - Single Line with Ellipsis */
.product-small .box-text .title-wrapper .name.product-title.woocommerce-loop-product__title,
.product-small .box-text .name.product-title,
.box-text .title-wrapper p.name.product-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Mobile: Font-size 16px */
@media (max-width: 549px) {
    .product-small .box-text .title-wrapper .name.product-title.woocommerce-loop-product__title,
    .product-small .box-text .name.product-title,
    .box-text .title-wrapper p.name.product-title {
        font-size: 16px !important;
    }
}

.product-small .box-text .title-wrapper .name.product-title a,
.box-text .name.product-title a {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    display: inline !important;
}

/* Product Price Styling */
.product-small .box-text .price-wrapper .price,
.box-text .price-wrapper .price,
.price-wrapper .price {
    font-weight: 500 !important;
    color: #555 !important;
}

.product-small .box-text .price-wrapper .price span.amount,
.price-wrapper .price span.amount,
.price-wrapper .price .woocommerce-Price-amount,
.price-wrapper .price .woocommerce-Price-amount.amount {
    font-weight: 500 !important;
    color: #555 !important;
}

.price-wrapper .price .woocommerce-Price-amount bdi {
    font-weight: 500 !important;
    color: #555 !important;
}

/* ==========================================================================
   Vinascan Box Element System
   ========================================================================== */

/* Base Box Element */
.vinascan-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* ==========================================================================
   Display Options
   ========================================================================== */

/* Grid Display */
.vinascan-box--grid {
    display: grid;
}

/* Flex Display */
.vinascan-box--flex {
    display: flex;
}

.vinascan-box--block {
    display: block;
}

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

/* ==========================================================================
   Grid Properties
   ========================================================================== */

/* Grid Gap */
.vinascan-box--gap-0 { gap: 0; }
.vinascan-box--gap-5 { gap: 5px; }
.vinascan-box--gap-10 { gap: 10px; }
.vinascan-box--gap-15 { gap: 15px; }
.vinascan-box--gap-20 { gap: 20px; }
.vinascan-box--gap-25 { gap: 25px; }
.vinascan-box--gap-30 { gap: 30px; }
.vinascan-box--gap-40 { gap: 40px; }
.vinascan-box--gap-50 { gap: 50px; }

/* Grid Template Columns */
.vinascan-box--col-1 { grid-template-columns: 1fr; }
.vinascan-box--col-2 { grid-template-columns: repeat(2, 1fr); }
.vinascan-box--col-3 { grid-template-columns: repeat(3, 1fr); }
.vinascan-box--col-4 { grid-template-columns: repeat(4, 1fr); }
.vinascan-box--col-5 { grid-template-columns: repeat(5, 1fr); }
.vinascan-box--col-6 { grid-template-columns: repeat(6, 1fr); }

/* Custom Grid Template Columns */
.vinascan-box--col-1-2 { grid-template-columns: 1fr 2fr; }
.vinascan-box--col-2-1 { grid-template-columns: 2fr 1fr; }
.vinascan-box--col-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
.vinascan-box--col-auto-1 { grid-template-columns: auto 1fr; }
.vinascan-box--col-1-auto { grid-template-columns: 1fr auto; }

/* Grid Template Rows */
.vinascan-box--row-1 { grid-template-rows: 1fr; }
.vinascan-box--row-2 { grid-template-rows: repeat(2, 1fr); }
.vinascan-box--row-3 { grid-template-rows: repeat(3, 1fr); }
.vinascan-box--row-4 { grid-template-rows: repeat(4, 1fr); }
.vinascan-box--row-auto { grid-template-rows: auto; }

/* Responsive Grid - Tablet */
@media (max-width: 989px) {
    .vinascan-box--col-2-md { grid-template-columns: repeat(2, 1fr); }
    .vinascan-box--col-3-md { grid-template-columns: repeat(3, 1fr); }
    .vinascan-box--gap-15-md { gap: 15px; }
    .vinascan-box--gap-20-md { gap: 20px; }
}

/* Responsive Grid - Mobile */
@media (max-width: 549px) {
    .vinascan-box--col-1-sm { grid-template-columns: 1fr; }
    .vinascan-box--col-2-sm { grid-template-columns: repeat(2, 1fr); }
    .vinascan-box--gap-10-sm { gap: 10px; }
    .vinascan-box--gap-15-sm { gap: 15px; }
}

/* ==========================================================================
   Flex Properties
   ========================================================================== */

/* Flex Direction */
.vinascan-box--flex-row { flex-direction: row; }
.vinascan-box--flex-row-reverse { flex-direction: row-reverse; }
.vinascan-box--flex-col { flex-direction: column; }
.vinascan-box--flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.vinascan-box--flex-wrap { flex-wrap: wrap; }
.vinascan-box--flex-nowrap { flex-wrap: nowrap; }

/* Flex Gap */
.vinascan-box--flex-gap-10 { gap: 10px; }
.vinascan-box--flex-gap-15 { gap: 15px; }
.vinascan-box--flex-gap-20 { gap: 20px; }
.vinascan-box--flex-gap-30 { gap: 30px; }

/* ==========================================================================
   Justify Items (Grid)
   ========================================================================== */
.vinascan-box--justify-items-start { justify-items: start; }
.vinascan-box--justify-items-end { justify-items: end; }
.vinascan-box--justify-items-center { justify-items: center; }
.vinascan-box--justify-items-stretch { justify-items: stretch; }

/* ==========================================================================
   Align Items (Grid & Flex)
   ========================================================================== */
.vinascan-box--align-items-start { align-items: start; }
.vinascan-box--align-items-end { align-items: end; }
.vinascan-box--align-items-center { align-items: center; }
.vinascan-box--align-items-stretch { align-items: stretch; }
.vinascan-box--align-items-baseline { align-items: baseline; }

/* ==========================================================================
   Justify Content (Grid & Flex)
   ========================================================================== */
.vinascan-box--justify-content-start { justify-content: start; }
.vinascan-box--justify-content-end { justify-content: end; }
.vinascan-box--justify-content-center { justify-content: center; }
.vinascan-box--justify-content-between { justify-content: space-between; }
.vinascan-box--justify-content-around { justify-content: space-around; }
.vinascan-box--justify-content-evenly { justify-content: space-evenly; }
.vinascan-box--justify-content-stretch { justify-content: stretch; }

/* ==========================================================================
   Align Content (Grid & Flex)
   ========================================================================== */
.vinascan-box--align-content-start { align-content: start; }
.vinascan-box--align-content-end { align-content: end; }
.vinascan-box--align-content-center { align-content: center; }
.vinascan-box--align-content-between { align-content: space-between; }
.vinascan-box--align-content-around { align-content: space-around; }
.vinascan-box--align-content-evenly { align-content: space-evenly; }
.vinascan-box--align-content-stretch { align-content: stretch; }

/* ==========================================================================
   Order (for child elements)
   ========================================================================== */
.vinascan-box__item--order-1 { order: 1; }
.vinascan-box__item--order-2 { order: 2; }
.vinascan-box__item--order-3 { order: 3; }
.vinascan-box__item--order-4 { order: 4; }
.vinascan-box__item--order-5 { order: 5; }
.vinascan-box__item--order-first { order: -1; }
.vinascan-box__item--order-last { order: 999; }

/* ==========================================================================
   Padding
   ========================================================================== */
/* All Sides */
.vinascan-box--p-0 { padding: 0; }
.vinascan-box--p-5 { padding: 5px; }
.vinascan-box--p-10 { padding: 10px; }
.vinascan-box--p-15 { padding: 15px; }
.vinascan-box--p-20 { padding: 20px; }
.vinascan-box--p-25 { padding: 25px; }
.vinascan-box--p-30 { padding: 30px; }
.vinascan-box--p-40 { padding: 40px; }
.vinascan-box--p-50 { padding: 50px; }

/* Top */
.vinascan-box--pt-0 { padding-top: 0; }
.vinascan-box--pt-10 { padding-top: 10px; }
.vinascan-box--pt-20 { padding-top: 20px; }
.vinascan-box--pt-30 { padding-top: 30px; }
.vinascan-box--pt-40 { padding-top: 40px; }
.vinascan-box--pt-50 { padding-top: 50px; }

/* Bottom */
.vinascan-box--pb-0 { padding-bottom: 0; }
.vinascan-box--pb-10 { padding-bottom: 10px; }
.vinascan-box--pb-20 { padding-bottom: 20px; }
.vinascan-box--pb-30 { padding-bottom: 30px; }
.vinascan-box--pb-40 { padding-bottom: 40px; }
.vinascan-box--pb-50 { padding-bottom: 50px; }

/* Left */
.vinascan-box--pl-0 { padding-left: 0; }
.vinascan-box--pl-10 { padding-left: 10px; }
.vinascan-box--pl-20 { padding-left: 20px; }
.vinascan-box--pl-30 { padding-left: 30px; }
.vinascan-box--pl-40 { padding-left: 40px; }
.vinascan-box--pl-50 { padding-left: 50px; }

/* Right */
.vinascan-box--pr-0 { padding-right: 0; }
.vinascan-box--pr-10 { padding-right: 10px; }
.vinascan-box--pr-20 { padding-right: 20px; }
.vinascan-box--pr-30 { padding-right: 30px; }
.vinascan-box--pr-40 { padding-right: 40px; }
.vinascan-box--pr-50 { padding-right: 50px; }

/* Horizontal (Left & Right) */
.vinascan-box--px-0 { padding-left: 0; padding-right: 0; }
.vinascan-box--px-10 { padding-left: 10px; padding-right: 10px; }
.vinascan-box--px-20 { padding-left: 20px; padding-right: 20px; }
.vinascan-box--px-30 { padding-left: 30px; padding-right: 30px; }
.vinascan-box--px-40 { padding-left: 40px; padding-right: 40px; }

/* Vertical (Top & Bottom) */
.vinascan-box--py-0 { padding-top: 0; padding-bottom: 0; }
.vinascan-box--py-10 { padding-top: 10px; padding-bottom: 10px; }
.vinascan-box--py-20 { padding-top: 20px; padding-bottom: 20px; }
.vinascan-box--py-30 { padding-top: 30px; padding-bottom: 30px; }
.vinascan-box--py-40 { padding-top: 40px; padding-bottom: 40px; }

/* ==========================================================================
   Margin
   ========================================================================== */
/* All Sides */
.vinascan-box--m-0 { margin: 0; }
.vinascan-box--m-5 { margin: 5px; }
.vinascan-box--m-10 { margin: 10px; }
.vinascan-box--m-15 { margin: 15px; }
.vinascan-box--m-20 { margin: 20px; }
.vinascan-box--m-25 { margin: 25px; }
.vinascan-box--m-30 { margin: 30px; }
.vinascan-box--m-auto { margin: auto; }

/* Top */
.vinascan-box--mt-0 { margin-top: 0; }
.vinascan-box--mt-10 { margin-top: 10px; }
.vinascan-box--mt-20 { margin-top: 20px; }
.vinascan-box--mt-30 { margin-top: 30px; }
.vinascan-box--mt-40 { margin-top: 40px; }
.vinascan-box--mt-50 { margin-top: 50px; }

/* Bottom */
.vinascan-box--mb-0 { margin-bottom: 0; }
.vinascan-box--mb-10 { margin-bottom: 10px; }
.vinascan-box--mb-20 { margin-bottom: 20px; }
.vinascan-box--mb-30 { margin-bottom: 30px; }
.vinascan-box--mb-40 { margin-bottom: 40px; }
.vinascan-box--mb-50 { margin-bottom: 50px; }

/* Left */
.vinascan-box--ml-0 { margin-left: 0; }
.vinascan-box--ml-10 { margin-left: 10px; }
.vinascan-box--ml-20 { margin-left: 20px; }
.vinascan-box--ml-30 { margin-left: 30px; }
.vinascan-box--ml-auto { margin-left: auto; }

/* Right */
.vinascan-box--mr-0 { margin-right: 0; }
.vinascan-box--mr-10 { margin-right: 10px; }
.vinascan-box--mr-20 { margin-right: 20px; }
.vinascan-box--mr-30 { margin-right: 30px; }
.vinascan-box--mr-auto { margin-right: auto; }

/* Horizontal (Left & Right) */
.vinascan-box--mx-0 { margin-left: 0; margin-right: 0; }
.vinascan-box--mx-10 { margin-left: 10px; margin-right: 10px; }
.vinascan-box--mx-20 { margin-left: 20px; margin-right: 20px; }
.vinascan-box--mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical (Top & Bottom) */
.vinascan-box--my-0 { margin-top: 0; margin-bottom: 0; }
.vinascan-box--my-10 { margin-top: 10px; margin-bottom: 10px; }
.vinascan-box--my-20 { margin-top: 20px; margin-bottom: 20px; }
.vinascan-box--my-30 { margin-top: 30px; margin-bottom: 30px; }

/* ==========================================================================
   Background
   ========================================================================== */
/* Background Colors */
.vinascan-box--bg-white { background-color: #ffffff; }
.vinascan-box--bg-black { background-color: #000000; }
.vinascan-box--bg-gray-light { background-color: #f5f5f5; }
.vinascan-box--bg-gray { background-color: #e0e0e0; }
.vinascan-box--bg-gray-dark { background-color: #333333; }
.vinascan-box--bg-primary { background-color: var(--primary-color, #0073aa); }
.vinascan-box--bg-transparent { background-color: transparent; }

/* Background Image Properties */
.vinascan-box--bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vinascan-box--bg-contain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.vinascan-box--bg-repeat {
    background-repeat: repeat;
}

.vinascan-box--bg-no-repeat {
    background-repeat: no-repeat;
}

.vinascan-box--bg-center {
    background-position: center;
}

.vinascan-box--bg-top {
    background-position: top;
}

.vinascan-box--bg-bottom {
    background-position: bottom;
}

/* Background Image with Inline Style */
/* Use: <div class="vinascan-box vinascan-box--bg-cover" style="background-image: url('your-image.jpg');"></div> */

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

/* Border Radius */
.vinascan-box--rounded-none { border-radius: 0; }
.vinascan-box--rounded-sm { border-radius: 4px; }
.vinascan-box--rounded { border-radius: 8px; }
.vinascan-box--rounded-lg { border-radius: 12px; }
.vinascan-box--rounded-xl { border-radius: 16px; }
.vinascan-box--rounded-full { border-radius: 9999px; }

/* Box Shadow */
.vinascan-box--shadow-none { box-shadow: none; }
.vinascan-box--shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.vinascan-box--shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.vinascan-box--shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* Width */
.vinascan-box--w-full { width: 100%; }
.vinascan-box--w-auto { width: auto; }
.vinascan-box--w-50 { width: 50%; }

/* Height */
.vinascan-box--h-full { height: 100%; }
.vinascan-box--h-auto { height: auto; }
.vinascan-box--h-screen { height: 100vh; }

/* ==========================================================================
   Vinascan Icon Lists Element
   ========================================================================== */

/* CONTAINER STYLES */
.vinascan-icon-lists {
    --icon-size: 24px;
    --icon-spacing: 10px;
    --text-size: 16px;
    --text-weight: 400;
    --gap: 15px;
    --columns: 3;
    
    /* Colors */
    --icon-color: currentColor;
    --icon-bg-color: transparent;
    --icon-border-color: transparent;
    --icon-border-width: 0;
    --icon-border-radius: 0;
    --icon-padding: 0;
    --text-color: inherit;
    
    /* Hover colors */
    --icon-hover-color: var(--icon-color);
    --icon-hover-bg-color: var(--icon-bg-color);
    --icon-hover-border-color: var(--icon-border-color);
    --text-hover-color: var(--text-color);
    
    display: flex;
    width: 100%;
}

/* LAYOUT VARIATIONS */
.vinascan-icon-lists.layout-vertical {
    flex-direction: column;
    gap: var(--gap);
}

.vinascan-icon-lists.layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}

.vinascan-icon-lists.layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gap);
}

/* ALIGNMENT */
.vinascan-icon-lists.align-left {
    justify-content: flex-start;
    text-align: left;
}

.vinascan-icon-lists.align-center {
    justify-content: center;
    text-align: center;
}

.vinascan-icon-lists.align-right {
    justify-content: flex-end;
    text-align: right;
}

/* ICON ITEM */
.vinascan-icon-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.vinascan-icon-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.icon-item-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--icon-spacing);
    width: 100%;
}

.vinascan-icon-lists.align-center .icon-item-wrapper {
    justify-content: center;
}

.vinascan-icon-lists.align-center .vinascan-icon-item {
    justify-content: center;
}

.vinascan-icon-lists.align-right .icon-item-wrapper {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

/* ICON STYLES */
.icon-item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--icon-size) + var(--icon-padding) * 2);
    height: calc(var(--icon-size) + var(--icon-padding) * 2);
    padding: var(--icon-padding);
    background-color: var(--item-icon-bg-color, var(--icon-bg-color));
    border: var(--icon-border-width) solid var(--icon-border-color);
    border-radius: var(--icon-border-radius);
    transition: all 0.3s ease;
}

.icon-item-icon svg,
.icon-item-icon img,
.icon-item-icon i {
    width: var(--icon-size);
    height: var(--icon-size);
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: all 0.3s ease;
}

.icon-item-icon svg {
    fill: var(--item-icon-color, var(--icon-color));
}

.icon-item-icon i {
    font-size: var(--icon-size);
    line-height: 1;
    color: var(--item-icon-color, var(--icon-color));
}

/* TEXT STYLES */
.icon-item-text {
    flex: 1;
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    color: var(--item-text-color, var(--text-color));
    line-height: 1.5;
    transition: color 0.3s ease;
    align-self: center;
}

/* HOVER EFFECTS */
.vinascan-icon-item:hover .icon-item-icon {
    background-color: var(--item-icon-bg-color, var(--icon-hover-bg-color));
    border-color: var(--icon-hover-border-color);
}

.vinascan-icon-item:hover .icon-item-icon svg {
    fill: var(--item-icon-color, var(--icon-hover-color));
}

.vinascan-icon-item:hover .icon-item-icon i {
    color: var(--item-icon-color, var(--icon-hover-color));
}

.vinascan-icon-item:hover .icon-item-text {
    color: var(--item-text-color, var(--text-hover-color));
}

/* HOVER ANIMATIONS */
.vinascan-icon-lists.hover-scale .vinascan-icon-item:hover .icon-item-icon {
    transform: scale(1.1);
}

.vinascan-icon-lists.hover-rotate .vinascan-icon-item:hover .icon-item-icon {
    transform: rotate(15deg);
}

.vinascan-icon-lists.hover-bounce .vinascan-icon-item:hover .icon-item-icon {
    animation: vinascan-bounce 0.6s ease;
}

@keyframes vinascan-bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-4px); }
}

.vinascan-icon-lists.hover-pulse .vinascan-icon-item:hover .icon-item-icon {
    animation: vinascan-pulse 0.6s ease;
}

@keyframes vinascan-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* RESPONSIVE - Tablet */
@media (max-width: 849px) {
    .vinascan-icon-lists {
        --icon-size: var(--icon-size-md, var(--icon-size));
        --text-size: var(--text-size-md, var(--text-size));
    }
    
    .vinascan-icon-lists.layout-grid {
        grid-template-columns: repeat(var(--columns-md, var(--columns)), 1fr);
    }
    
    .vinascan-icon-lists.layout-horizontal {
        flex-direction: column;
    }
}

/* RESPONSIVE - Mobile */
@media (max-width: 549px) {
    .vinascan-icon-lists {
        --icon-size: var(--icon-size-sm, var(--icon-size-md, var(--icon-size)));
        --text-size: var(--text-size-sm, var(--text-size-md, var(--text-size)));
    }
    
    .vinascan-icon-lists.layout-grid {
        grid-template-columns: repeat(var(--columns-sm, 1), 1fr);
    }
    
    .vinascan-icon-lists.layout-horizontal,
    .vinascan-icon-lists.layout-grid {
        display: flex;
        flex-direction: column;
    }
}

/* ACCESSIBILITY */
.vinascan-icon-item a:focus,
.vinascan-icon-item a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .vinascan-icon-item,
    .icon-item-icon,
    .icon-item-icon svg,
    .icon-item-icon img,
    .icon-item-icon i,
    .icon-item-text {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   Footer Subscribe Form Styles
   ========================================================================== */

/* Container */
#footer-subscribe {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 500px;
}

/* Paragraph wrappers */
#footer-subscribe > p {
    display: flex;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

#footer-subscribe > p:first-child {
    flex: 1 1 auto;
}

#footer-subscribe > p:last-child {
    flex: 0 0 auto;
}

/* CF7 Control Wrapper */
#footer-subscribe .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
}

/* Email Input - Override Flatsome styles */
#footer-subscribe input[type="email"],
#footer-subscribe input[type="email"].wpcf7-form-control {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-right: none !important;
    border-radius: 50rem 0 0 50rem !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    height: auto !important;
    min-height: 48px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#footer-subscribe input[type="email"]::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

#footer-subscribe input[type="email"]:focus,
#footer-subscribe input[type="email"].wpcf7-form-control:focus {
    border-color: var(--fs-color-primary, #0073aa) !important;
    border-right: none !important;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3) !important;
    background-color: #fff !important;
    color: #333 !important;
}

#footer-subscribe input[type="email"]:hover,
#footer-subscribe input[type="email"].wpcf7-form-control:hover {
    border-color: #ccc !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Submit Button - Override Flatsome styles */
#footer-subscribe input[type="submit"],
#footer-subscribe input[type="submit"].wpcf7-submit {
    padding: 12px 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    background-color: var(--fs-color-primary, #0073aa) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-left: none !important;
    border-radius: 0 50rem 50rem 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: auto !important;
    max-width: none !important;
}

#footer-subscribe input[type="submit"]:hover,
#footer-subscribe input[type="submit"].wpcf7-submit:hover {
    background-color: var(--fs-color-primary, #0073aa) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    border-left: none !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    transform: none !important;
}

#footer-subscribe input[type="submit"]:active,
#footer-subscribe input[type="submit"].wpcf7-submit:active {
    transform: scale(0.98) !important;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.3) !important;
}

#footer-subscribe input[type="submit"]:disabled,
#footer-subscribe input[type="submit"].wpcf7-submit:disabled {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    border-left: none !important;
    color: #999 !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    box-shadow: none !important;
}

/* Spinner */
#footer-subscribe .wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 100%;
    background-color: #6c757d;
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: 999;
    transition: opacity 0.3s ease;
}

#footer-subscribe .wpcf7-spinner::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: none;
    border-radius: 100%;
    transform-origin: 7px 7px;
    animation: footer-subscribe-spin 1s linear infinite;
}

#footer-subscribe .wpcf7-form.submitting .wpcf7-spinner {
    visibility: visible;
    opacity: 0.8;
}

@keyframes footer-subscribe-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Validation Messages */
#footer-subscribe .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    font-size: 13px;
    color: #dc3545;
    background: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#footer-subscribe .wpcf7-form-control.wpcf7-not-valid {
    border-color: #dc3545 !important;
}

/* Response Messages */
#footer-subscribe .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
}

#footer-subscribe .wpcf7-mail-sent-ok {
    border: 1px solid #28a745;
    background-color: #d4edda;
    color: #155724;
}

#footer-subscribe .wpcf7-validation-errors,
#footer-subscribe .wpcf7-mail-sent-ng {
    border: 1px solid #dc3545;
    background-color: #f8d7da;
    color: #721c24;
}

/* Responsive - Mobile */
@media (max-width: 576px) {
    #footer-subscribe {
        max-width: 100%;
        flex-direction: column;
    }
    
    #footer-subscribe > p:first-child,
    #footer-subscribe > p:last-child {
        flex: 1 1 100%;
        width: 100%;
    }
    
    #footer-subscribe input[type="email"] {
        border-radius: 50rem 50rem 0 0;
        border-right: 1px solid #e0e0e0;
        border-bottom: none;
    }
    
    #footer-subscribe input[type="submit"] {
        border-radius: 0 0 50rem 50rem;
        border-left: 1px solid #e0e0e0;
        border-top: none;
        width: 100%;
    }
    
    #footer-subscribe .wpcf7-spinner {
        right: 1rem;
        top: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #footer-subscribe input[type="email"],
    #footer-subscribe input[type="submit"],
    #footer-subscribe .wpcf7-spinner {
        transition: none;
    }
    
    #footer-subscribe .wpcf7-spinner::before {
        animation: none;
    }
}

/* ==========================================================================
   Flickity Slider Navigation - Always Visible
   ========================================================================== */

/* Make navigation buttons always visible - Override Flatsome */
.flickity-prev-next-button,
.slider .flickity-prev-next-button,
.row-slider .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Default: Background #efefea, Icon #111, No shadow, No border */
.slider-nav-circle .flickity-prev-next-button .arrow,
.slider-nav-circle .flickity-prev-next-button svg,
.slider .slider-nav-circle .flickity-prev-next-button .arrow,
.slider .slider-nav-circle .flickity-prev-next-button svg {
    background-color: #efefea !important;
    fill: #111 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Hover: Background primary, Icon white - Override Flatsome hover */
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider .slider-nav-circle .flickity-prev-next-button:hover .arrow,
.slider .slider-nav-circle .flickity-prev-next-button:hover svg,
.slider .flickity-prev-next-button:hover .arrow,
.slider .flickity-prev-next-button:hover svg {
    background-color: var(--fs-color-primary) !important;
    fill: #fff !important;
    border: none !important;
    border-color: transparent !important;
}

/* Override Flatsome's hover opacity */
.slider .flickity-prev-next-button:hover {
    opacity: 1 !important;
}

/* Ensure disabled buttons remain hidden */
.flickity-prev-next-button:disabled {
    opacity: 0 !important;
}

/* Mobile: Keep buttons visible and override Flatsome mobile styles */
@media screen and (max-width: 549px) {
    .row-slider .flickity-prev-next-button {
        opacity: 1 !important;
    }
    
    .row-slider .flickity-prev-next-button svg,
    .row-slider .slider-nav-circle .flickity-prev-next-button svg {
        background-color: #efefea !important;
        fill: #111 !important;
        border: none !important;
        border-color: transparent !important;
    }
    
    .row-slider .flickity-prev-next-button:hover svg {
        background-color: var(--fs-color-primary) !important;
        fill: #fff !important;
        border: none !important;
        border-color: transparent !important;
    }
}

/* ==========================================================================
   Product Card - Wishlist Button Position
   ========================================================================== */

/* Move wishlist button to bottom right and always show */
.product-small .box-image .image-tools.top.right {
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    padding: 0 !important;
}

/* ==========================================================================
   Sale Badge Styling - Rectangle Shape for xsmall text size
   ========================================================================== */

/* Override badge-square to rectangle for xsmall products */
.col-inner:has(.box-text.is-xsmall) .badge-container {
    margin-top: 10px !important;
    margin-left: 10px !important;
}

.col-inner:has(.box-text.is-xsmall) .badge-container .callout.badge {
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

.col-inner:has(.box-text.is-xsmall) .badge-container .badge-inner {
    display: inline-block !important;
    padding: 0.4em 0.7em !important;
    padding-top: 0.2em !important;
    border-radius: 2px !important;
    background-color: #e74c3c !important; /* Red background for sale */
    line-height: 1.2 !important;
}

.col-inner:has(.box-text.is-xsmall) .badge-container .onsale {
    font-size: 0.75em !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* Reduce padding and title size for xsmall text */
.box-text.is-xsmall {
    padding-top: 0.5em !important;
}

/* Override product title font-size for xsmall - more specific selector */
.product-small .box-text.is-xsmall .title-wrapper .name.product-title.woocommerce-loop-product__title,
.product-small .box-text.is-xsmall .name.product-title,
.box-text.is-xsmall .title-wrapper p.name.product-title,
.box-text.is-xsmall .product-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Smaller wishlist button for xsmall products */
.col-inner:has(.box-text.is-xsmall) .wishlist-button,
.col-inner:has(.box-text.is-xsmall) .wishlist-icon .wishlist-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    background-size: 14px 14px !important;
}

.col-inner:has(.box-text.is-xsmall) .box-image .image-tools.top.right {
    bottom: 6px !important;
    right: 6px !important;
}

/* Mobile: Adjust badge and wishlist for xsmall */
@media (max-width: 549px) {
    .col-inner:has(.box-text.is-xsmall) .badge-container {
        margin-top: 8px !important;
        margin-left: 8px !important;
    }
    
    .col-inner:has(.box-text.is-xsmall) .badge-container .badge-inner {
        padding: 0.35em 0.6em !important;
    }
    
    .col-inner:has(.box-text.is-xsmall) .badge-container .onsale {
        font-size: 0.7em !important;
    }
    
    .col-inner:has(.box-text.is-xsmall) .wishlist-button,
    .col-inner:has(.box-text.is-xsmall) .wishlist-icon .wishlist-button {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        background-size: 12px 12px !important;
    }
    
    .col-inner:has(.box-text.is-xsmall) .box-image .image-tools.top.right {
        bottom: 5px !important;
        right: 5px !important;
    }
    
    /* Mobile: Even smaller padding and title */
    .box-text.is-xsmall {
        padding-top: 0.4em !important;
    }
    
    /* Override product title for xsmall on mobile */
    .product-small .box-text.is-xsmall .title-wrapper .name.product-title.woocommerce-loop-product__title,
    .product-small .box-text.is-xsmall .name.product-title,
    .box-text.is-xsmall .title-wrapper p.name.product-title,
    .box-text.is-xsmall .product-title {
        font-size: 12px !important;
    }
}

/* Always show wishlist button */
.product-small .box-image .image-tools.show-on-hover,
.product-small .show-on-hover {
    opacity: 1 !important;
    pointer-events: inherit !important;
    transform: scale(1) translateZ(0) translateY(0) !important;
}

/* Wishlist button styling - background #efefea, icon black outline */
.product-small .wishlist-button,
.product-small .wishlist-icon .wishlist-button {
    background-color: #efefea !important;
    border-color: #efefea !important;
    color: #111 !important;
}

.product-small .wishlist-button i,
.product-small .wishlist-icon .wishlist-button i {
    color: #111 !important;
}

/* Hide default icon */
.product-small .wishlist-button i.icon-heart,
.product-small .wishlist-icon .wishlist-button i.icon-heart,
.product-small .yith-wcwl-add-to-wishlist svg,
.product-small .yith-wcwl-icon-svg {
    display: none !important;
}

/* Use background image for outline heart icon */
.product-small .wishlist-button,
.product-small .wishlist-icon .wishlist-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}

/* Hover state - keep same icon */
.product-small .wishlist-button:hover,
.product-small .wishlist-icon .wishlist-button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Hover state - same background and icon */
.product-small .wishlist-button:hover,
.product-small .wishlist-icon .wishlist-button:hover {
    box-shadow: none !important;
}

/* When added to wishlist - filled red heart */
.product-small .wishlist-button.wishlist-added,
.product-small .wishlist-icon .wishlist-button.wishlist-added {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000' stroke='%23ff0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Hover state when added - keep red heart */
.product-small .wishlist-button.wishlist-added:hover,
.product-small .wishlist-icon .wishlist-button.wishlist-added:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000' stroke='%23ff0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Ensure button is visible on mobile */
@media only screen and (max-device-width: 1024px) {
    .product-small .box-image .image-tools.top.right {
        bottom: 5px !important;
        right: 5px !important;
    }
}

/* ==========================================================================
   Header Full Width
   ========================================================================== */

/* Make header container full width - Override all container max-width */
#masthead .container,
#masthead .header-inner,
#masthead .header-inner.container,
.header-main .container,
.header-main .header-inner,
.header-main .header-inner.container,
.header-wrapper .container,
div#masthead.header-main .container,
div.header-main .header-inner.container,
.show-logo-center .header-inner.container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Also apply to divider container */
.header-main + .container,
#masthead + .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Override Flatsome embedded style */
body .header-inner.container {
    max-width: none !important;
    width: 100% !important;
}

/* Mobile: Reduce padding */
@media (max-width: 549px) {
    #masthead .container,
    #masthead .header-inner,
    #masthead .header-inner.container,
    .header-main .container,
    .header-main .header-inner,
    .header-main .header-inner.container,
    .header-main + .container,
    #masthead + .container,
    body .header-inner.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ==========================================================================
   Header Search Form Customization
   ========================================================================== */

/* Reduce search input height to 42px */
.header-search-form .dgwt-wcas-sf-wrapp,
.header-search-form .dgwt-wcas-search-wrapp {
    height: auto !important;
}

.header-search-form .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    height: 42px !important;
    line-height: 42px !important;
    padding: 8px 24px 8px 48px !important;
    font-size: 15px !important;
}

.header-search-form .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    height: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
}

/* Adjust search icon position - center vertically */
.header-search-form .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 18px !important;
}

/* Adjust search wrapper padding */
.header-search-form .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    padding: 8px !important;
}

/* Adjust preloader position */
.header-search-form .dgwt-wcas-preloader {
    right: 42px !important;
}

/* Focus state - change border to primary color */
.header-search-form .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
    border-color: var(--primary-color, #446084) !important;
    box-shadow: none !important;
}

/* Override hover state */
.header-search-form .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
    background-color: #e8e8e8 !important;
}

/* ==========================================================================
   Header Navigation Menu Customization
   ========================================================================== */

/* Override font weight to 500 and color to #111 */
.header-nav .nav > li > a,
.header-nav.header-nav-main .nav > li > a,
.nav.header-nav-main > li > a,
ul.header-nav.header-nav-main.nav > li > a {
    font-family: 'Alegreya', serif !important;
    font-weight: 500 !important;
    color: #111 !important;
    font-size: 1rem !important;
}

/* Hover state - keep #111 color */
.header-nav .nav > li > a:hover,
.header-nav.header-nav-main .nav > li > a:hover,
.nav.header-nav-main > li > a:hover,
ul.header-nav.header-nav-main.nav > li > a:hover {
    color: #111 !important;
}

/* Active state - use primary color */
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a,
.header-nav.header-nav-main .nav > li.active > a,
.header-nav.header-nav-main .nav > li.current-menu-item > a,
.nav.header-nav-main > li.active > a,
.nav.header-nav-main > li.current-menu-item > a {
    color: var(--primary-color) !important;
}

/* Override the nav-uppercase class that sets font-weight to bolder */
.header-nav.nav-uppercase > li > a,
.nav-uppercase.header-nav-main > li > a {
    font-weight: 500 !important;
}

/* Remove the default opacity effect on hover */
.header-nav.nav:hover > li:not(:hover) > a,
.nav.header-nav-main:hover > li:not(:hover) > a {
    opacity: 1 !important;
}

/* Override Flatsome default link color */
.nav > li > a {
    color: #111 !important;
}

.nav > li > a:hover {
    color: #111 !important;
}

.nav > li.active > a,
.nav > li.current-menu-item > a {
    color: var(--primary-color) !important;
}

/* ==========================================================================
   Product Gallery - Custom Scrollbar & Image Aspect Ratio
   ========================================================================== */

/* Remove padding-bottom from large-10 column in product gallery */
.single-product--images .large-10 {
    padding-bottom: 0 !important;
}

/* Sleek Custom Scrollbar for Vertical Thumbnails */
.vertical-thumbnails::-webkit-scrollbar {
    width: 8px;
}

.vertical-thumbnails::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.vertical-thumbnails::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #888 0%, #666 100%);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.vertical-thumbnails::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #555 0%, #333 100%);
}

/* Firefox Scrollbar */
.vertical-thumbnails {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Main Product Image - 3:4 Aspect Ratio */
.woocommerce-product-gallery__image {
    position: relative;
    width: 100%;
}

.woocommerce-product-gallery__image::before {
    content: '';
    display: block;
    padding-top: 100%; 
}

.woocommerce-product-gallery__image a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Alternative: Contain fit (shows full image without cropping) */
.woocommerce-product-gallery__image.contain-fit img {
    object-fit: contain;
}

/* Ensure Flickity slider respects aspect ratio */
.product-gallery-slider .flickity-viewport {
    transition: height 0.3s ease;
}

/* Mobile Responsiveness for Gallery */
@media (max-width: 849px) {
    .vertical-thumbnails::-webkit-scrollbar {
        width: 6px;
    }
}

/* Smooth scrolling behavior */
.vertical-thumbnails {
    scroll-behavior: smooth;
}

/* Optional: Add subtle shadow to main image container */
.woocommerce-product-gallery__image a {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.woocommerce-product-gallery__image a:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Product Quantity Buttons - Custom Styling (Unified Rounded Container)
   ========================================================================== */

/* Quantity container - Unified rounded style */
.quantity.buttons_added,
.ux-quantity.quantity.buttons_added {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Quantity buttons styling */
.quantity.buttons_added .button.minus,
.quantity.buttons_added .button.plus,
.ux-quantity.buttons_added .button.minus,
.ux-quantity.buttons_added .button.plus,
.ux-quantity__button--minus,
.ux-quantity__button--plus,
input[type=button].ux-quantity__button {
    border-radius: 0 !important;
    width: 2.2em !important;
    height: 2.2em !important;
    min-width: 2.2em !important;
    min-height: 2.2em !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #f9f9f9 !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Override Flatsome border radius rules - keep them square inside rounded container */
.quantity.buttons_added .button.minus,
.ux-quantity.buttons_added .button.minus {
    border-radius: 0 !important;
    border-right: 1px solid #e5e5e5 !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.quantity.buttons_added .button.plus,
.ux-quantity.buttons_added .button.plus {
    border-radius: 0 !important;
    border-left: 1px solid #e5e5e5 !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

/* Icon styling for + and - buttons */
.quantity.buttons_added .button.minus::before,
.quantity.buttons_added .button.plus::before,
.ux-quantity.buttons_added .button.minus::before,
.ux-quantity.buttons_added .button.plus::before {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 1.2em !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* Ensure text/icon is centered */
.quantity.buttons_added .button.minus,
.quantity.buttons_added .button.plus,
.ux-quantity.buttons_added .button.minus,
.ux-quantity.buttons_added .button.plus {
    font-size: 1.1em !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* Hover effect with primary color */
.quantity.buttons_added .button.minus:hover,
.quantity.buttons_added .button.plus:hover,
.ux-quantity.buttons_added .button.minus:hover,
.ux-quantity.buttons_added .button.plus:hover,
.ux-quantity__button--minus:hover,
.ux-quantity__button--plus:hover,
input[type=button].ux-quantity__button:hover {
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Quantity input styling */
.quantity.buttons_added input[type=number],
.ux-quantity.buttons_added input[type=number] {
    border-radius: 0 !important;
    border: none !important;
    text-align: center !important;
    font-weight: 600 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    height: 2.2em !important;
    margin: 0 !important;
}

/* Mobile responsive */
@media (max-width: 549px) {
    .quantity.buttons_added .button.minus,
    .quantity.buttons_added .button.plus,
    .ux-quantity.buttons_added .button.minus,
    .ux-quantity.buttons_added .button.plus,
    .ux-quantity__button--minus,
    .ux-quantity__button--plus,
    input[type=button].ux-quantity__button {
        width: 2em !important;
        height: 2em !important;
        min-width: 2em !important;
        min-height: 2em !important;
        font-size: 0.95em !important;
    }
    
    .quantity.buttons_added input[type=number],
    .ux-quantity.buttons_added input[type=number] {
        height: 2em !important;
    }
}

/* ==========================================================================
   Add to Cart Button - Rounded Style
   ========================================================================== */

/* Ensure all elements are on the same row */
.woocommerce-variation-add-to-cart,
.variations_button {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5em !important;
}

.woocommerce-variation-add-to-cart > *,
.variations_button > * {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Add to cart button rounded styling */
.single_add_to_cart_button,
button.single_add_to_cart_button,
.single_add_to_cart_button.button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    border-radius: 50px !important;
    padding: 0 2em !important;
    height: 2.2em !important;
    min-height: 2.2em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover effect */
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
    box-shadow: none !important;
}

/* Disabled state */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Contact button next to add to cart */
.woocommerce-variation-add-to-cart::after,
.add-to-cart-container::after {
    content: '';
    display: table;
    clear: both;
}

/* Contact button styling */
.product-contact-button,
a.product-contact-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    padding: 0 2em !important;
    height: 2.2em !important;
    min-height: 2.2em !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    text-decoration: none !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 0.97em !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Contact button hover */
.product-contact-button:hover,
a.product-contact-button:hover {
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Mobile responsive */
@media (max-width: 549px) {
    /* Stack elements vertically on mobile */
    .woocommerce-variation-add-to-cart,
    .variations_button {
        flex-wrap: wrap !important;
    }
    
    .ux-quantity.quantity.buttons_added {
        flex: 1 1 100% !important;
        margin-bottom: 0.5em !important;
    }
    
    .single_add_to_cart_button,
    button.single_add_to_cart_button {
        padding: 0 1.5em !important;
        height: 2em !important;
        min-height: 2em !important;
        line-height: 1 !important;
        font-size: 0.95em !important;
        flex: 1 1 100% !important;
    }
    
    .product-contact-button,
    a.product-contact-button {
        padding: 0 1.5em !important;
        height: 2em !important;
        min-height: 2em !important;
        line-height: 1 !important;
        font-size: 0.95em !important;
        flex: 1 1 100% !important;
    }
}

/* ==========================================================================
   Mini Cart Styling - Modern Design
   ========================================================================== */

/* Cart popup title styling */
.cart-popup-title {
    margin-bottom: 20px !important;
}

.cart-popup-title > span {
    font-size: 1.5em !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

.cart-popup-title .is-divider {
    margin: 15px auto 0 !important;
    background-color: #e5e5e5 !important;
    height: 2px !important;
    max-width: 50px !important;
}

/* Mini cart items list */
ul.product_list_widget.woocommerce-mini-cart {
    margin: 0 !important;
    padding: 0 !important;
}

ul.product_list_widget li.mini_cart_item {
    padding: 20px 0 20px 95px !important;
    min-height: auto !important;
    border-bottom: 1px solid #f5f5f5 !important;
    position: relative !important;
}

ul.product_list_widget li.mini_cart_item:last-child {
    border-bottom: none !important;
}

/* Product image in mini cart */
ul.product_list_widget li img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    border: 1px solid #f0f0f0 !important;
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
}

/* Product title - limit to 2 lines */
ul.product_list_widget li a:not(.remove) {
    font-size: 0.95em !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: 2.8em !important;
}

ul.product_list_widget li a:not(.remove):hover {
    color: var(--fs-color-primary, #446084) !important;
}

/* Remove button styling - Trash icon with background image */
.widget_shopping_cart ul.product_list_widget li a.remove {
    position: absolute !important;
    right: 0 !important;
    top: 15px !important;
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}

.widget_shopping_cart ul.product_list_widget li a.remove:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Quantity and price row in mini cart */
.ux-mini-cart-qty {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-top: 12px !important;
    margin-right: 0 !important;
}

/* Quantity selector in mini cart - circular button style */
.ux-mini-cart-qty .quantity.buttons_added {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.ux-mini-cart-qty .quantity.buttons_added .button.minus,
.ux-mini-cart-qty .quantity.buttons_added .button.plus {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background-color: #efefea !important;
    font-size: 1em !important;
    color: #333 !important;
    border: 1px solid #efefea !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

.ux-mini-cart-qty .quantity.buttons_added .button.minus:hover,
.ux-mini-cart-qty .quantity.buttons_added .button.plus:hover {
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    color: #fff !important;
}

.ux-mini-cart-qty .quantity.buttons_added input[type=number] {
    width: 40px !important;
    height: 36px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    color: #333 !important;
}

/* Price in mini cart */
.ux-mini-cart-qty .product-subtotal {
    font-size: 1em !important;
    font-weight: 600 !important;
    color: #333 !important;
    opacity: 1 !important;
}

/* Mini cart footer */
.ux-mini-cart-footer {
    padding: 20px 30px 30px !important;
    margin: 0 -30px -30px !important;
    border-top: 2px solid #f5f5f5 !important;
    background-color: #fafafa !important;
}

/* Subtotal row */
.woocommerce-mini-cart__total.total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 !important;
    margin-bottom: 15px !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.woocommerce-mini-cart__total strong {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.woocommerce-mini-cart__total .woocommerce-Price-amount {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #333 !important;
}

/* Cart buttons */
.woocommerce-mini-cart__buttons.buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.woocommerce-mini-cart__buttons .button {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2em !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* View cart button - outline style */
.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    background-color: transparent !important;
    border: 2px solid #333 !important;
    color: #333 !important;
}

.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
    background-color: #333 !important;
    color: #fff !important;
}

/* Checkout button - primary style */
.woocommerce-mini-cart__buttons .button.checkout {
    background-color: #1a2332 !important;
    border: 2px solid #1a2332 !important;
    color: #fff !important;
}

.woocommerce-mini-cart__buttons .button.checkout:hover {
    background-color: #2a3442 !important;
    border-color: #2a3442 !important;
    box-shadow: 0 4px 12px rgba(26, 35, 50, 0.3) !important;
}

/* Cart popup inner padding adjustment */
.cart-popup-inner {
    padding: 30px !important;
}

/* Additional text styling */
.ux-mini-cart-footer p {
    font-size: 0.9em !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

/* Mobile responsive for mini cart */
@media (max-width: 549px) {
    /* Adjust mini cart item padding for smaller screens */
    ul.product_list_widget li.mini_cart_item {
        padding: 15px 0 15px 70px !important;
    }
    
    /* Smaller product image on mobile */
    ul.product_list_widget li img {
        width: 60px !important;
        height: 60px !important;
        top: 15px !important;
    }
    
    /* Adjust quantity buttons size on mobile */
    .ux-mini-cart-qty .quantity.buttons_added {
        gap: 6px !important;
    }
    
    .ux-mini-cart-qty .quantity.buttons_added .button.minus,
    .ux-mini-cart-qty .quantity.buttons_added .button.plus {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 0.9em !important;
    }
    
    /* Smaller input width on mobile */
    .ux-mini-cart-qty .quantity.buttons_added input[type=number] {
        width: 35px !important;
        height: 32px !important;
        font-size: 0.9em !important;
    }
    
    /* Adjust remove button on mobile */
    .widget_shopping_cart ul.product_list_widget li a.remove {
        right: 0 !important;
        top: 10px !important;
        width: 24px !important;
        height: 24px !important;
        background-size: 14px 14px !important;
    }
    
    /* Adjust footer padding on mobile */
    .ux-mini-cart-footer {
        padding: 15px 20px 20px !important;
        margin: 0 -30px -30px !important;
    }
    
    /* Smaller buttons on mobile */
    .woocommerce-mini-cart__buttons .button {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 0.9em !important;
    }
}

.woof-front-builder-container .woof_block_html_items{
    padding: 0 !important;
}

/* ==========================================================================
   Checkout Form Styling
   ========================================================================== */

/* Input fields styling */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
    border-radius: 2px !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, outline 0.3s ease !important;
}

/* Focus state with primary color border */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Select2 dropdown styling */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    border-radius: 2px !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    height: auto !important;
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    outline: none !important;
}

/* Select2 dropdown arrow */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

/* Select2 results dropdown */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
}

/* Textarea specific */
.woocommerce-checkout textarea {
    border-radius: 2px !important;
    resize: vertical !important;
}

/* Form row spacing */
.woocommerce-checkout .form-row {
    margin-bottom: 1.5em !important;
}

/* Labels */
.woocommerce-checkout label {
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 0.5em !important;
}

/* Required field indicator */
.woocommerce-checkout .required {
    color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
}

/* Placeholder styling */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Mobile Menu Styling
   ========================================================================== */

/* Mobile sidebar background */
.off-canvas-left .mfp-content {
    background-color: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Menu items styling */
.mobile-sidebar .nav-vertical > li > a {
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 16px !important;
}

/* Search form in mobile menu */
.mobile-sidebar .header-search-form {
    padding: 15px 20px !important;
}

.mobile-sidebar .searchform-wrapper {
    border-radius: 50px !important;
    overflow: hidden !important;
    background-color: #f9f9f9 !important;
}

.mobile-sidebar .searchform .flex-row {
    border-radius: 50px !important;
    overflow: hidden !important;
    border: 1px solid #e5e5e5 !important;
}

.mobile-sidebar .search-field {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 1em !important;
    height: 38px !important;
    font-size: 0.9em !important;
}

.mobile-sidebar .search-field:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.mobile-sidebar .ux-search-submit {
    border-radius: 0 50px 50px 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 1em !important;
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    border: none !important;
    margin: 0 !important;
}

.mobile-sidebar .ux-search-submit:hover {
    background-color: var(--fs-color-primary, var(--primary-color, #446084)) !important;
    opacity: 0.9 !important;
}

/* ========================================
   Vinascan Banner Slider Styles
   ======================================== */

.vinascan-banner-slider-wrapper {
    position: relative;
    overflow: hidden;
}

.vinascan-banner-slider-wrapper .banner-slider-container {
    position: relative;
}

.vinascan-banner-slider-wrapper .banner-slide-item {
    width: 100%;
}

/* Content Styling */
.vinascan-banner-slider-wrapper .banner-meta {
    font-size: 0.85em;
    margin-bottom: 15px;
}

.vinascan-banner-slider-wrapper .banner-title {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.3;
}

.vinascan-banner-slider-wrapper .banner-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

.vinascan-banner-slider-wrapper .banner-title a:hover {
    opacity: 0.8;
}

.vinascan-banner-slider-wrapper .banner-description {
    font-size: 0.95em;
    line-height: 1.6;
}

.vinascan-banner-slider-wrapper .banner-description p:last-child {
    margin-bottom: 0;
}

/* Button Styling */
.vinascan-banner-slider-wrapper .banner-button-wrapper .button {
    display: inline-block;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 50rem !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    background-color: inherit !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.vinascan-banner-slider-wrapper .banner-button-wrapper .button:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.vinascan-banner-slider-wrapper .banner-button-wrapper .button:focus {
    color: inherit !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(51, 51, 51, 0.25);
}

/* Custom Navigation */
.vinascan-banner-slider-wrapper .banner-nav-controls {
    pointer-events: none;
    max-width: calc(100% - 80px); /* 40px margin on each side */
}

.vinascan-banner-slider-wrapper .banner-nav-controls > * {
    pointer-events: auto;
}

/* Flex wrapper for button, counter, and nav arrows */
.vinascan-banner-slider-wrapper .banner-nav-flex-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.vinascan-banner-slider-wrapper .banner-nav-flex-wrapper::-webkit-scrollbar {
    display: none;
}

/* Button styling */
.vinascan-banner-slider-wrapper .banner-button-wrapper {
    flex-shrink: 0;
}

.vinascan-banner-slider-wrapper .banner-button-wrapper .button {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    height: 38px !important;
    padding: 0 18px !important;
    background-color: #fff !important;
    border: none !important;
    border-radius: 50rem !important;
}

.vinascan-banner-slider-wrapper .banner-button-wrapper .button:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Custom dots styling */
.vinascan-banner-slider-wrapper .banner-custom-dots {
    display: flex !important;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.vinascan-banner-slider-wrapper .banner-dot {
    width: 20px !important;
    height: 2px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: currentColor !important;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* Counter styling */
.vinascan-banner-slider-wrapper .banner-counter {
    white-space: nowrap;
    min-width: 40px;
    flex-shrink: 0;
}

/* Navigation arrows */
.vinascan-banner-slider-wrapper .banner-nav-arrows {
    flex-shrink: 0;
    display: flex !important;
    gap: 8px !important;
}

/* Mobile responsive - keep everything on one line */
@media (max-width: 549px) {
    .vinascan-banner-slider-wrapper .banner-nav-controls {
        margin: 20px !important;
        max-width: calc(100% - 40px); /* 20px margin on each side */
    }
    
    .vinascan-banner-slider-wrapper .banner-nav-flex-wrapper {
        gap: 10px !important;
    }
    
    .vinascan-banner-slider-wrapper .banner-button-wrapper .button {
        font-size: 0.9rem !important;
        padding: 0 14px !important;
        height: 34px !important;
    }
    
    .vinascan-banner-slider-wrapper .banner-counter {
        font-size: 12px !important;
    }
    
    .vinascan-banner-slider-wrapper .banner-nav-arrows button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button {
    position: relative;
    overflow: visible;
    margin: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    background-color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    transition: all 0.3s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    transform: none !important;
    opacity: 1 !important;
}

/* SVG icon styling */
.vinascan-banner-slider-wrapper .banner-nav-arrows button svg {
    transition: all 0.3s;
    display: block;
    flex-shrink: 0;
    margin: 0 auto;
}

/* Ensure SVG is visible */
.vinascan-banner-slider-wrapper .banner-nav-arrows button:not(.has-bg-image) {
    padding: 0 !important;
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button:not(.has-bg-image) svg {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}

/* Custom arrow with background image support */
.vinascan-banner-slider-wrapper .banner-nav-arrows button.has-bg-image:before {
    display: none;
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button.has-bg-image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    background-color: transparent !important;
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button.has-bg-image:hover {
    transform: none !important;
    opacity: 0.8 !important;
    background-color: transparent !important;
}

.vinascan-banner-slider-wrapper .banner-nav-arrows button.has-bg-image:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.vinascan-banner-slider-wrapper .banner-dot:hover {
    opacity: 0.6 !important;
}

/* Flickity Custom Styles */
.vinascan-banner-slider-wrapper .flickity-button {
    display: none;
}

.vinascan-banner-slider-wrapper .flickity-viewport {
    overflow: hidden;
    position: relative;
}

.vinascan-banner-slider-wrapper .flickity-slider {
    display: flex;
}

/* Responsive adjustments */
@media (max-width: 849px) {
    .vinascan-banner-slider-wrapper .banner-title {
        font-size: 1.5em;
    }
    
    .vinascan-banner-slider-wrapper .banner-content-col {
        padding: 30px !important;
        padding-bottom: 80px !important; /* Add space for navigation */
    }
    
    .vinascan-banner-slider-wrapper .banner-nav-controls {
        margin: 20px !important;
        max-width: calc(100% - 40px); /* 20px margin on each side */
    }
    
    /* Force image on top, content below on tablet and mobile */
    .vinascan-banner-slider-wrapper .banner-content-col {
        order: 2 !important;
    }
    
    .vinascan-banner-slider-wrapper .banner-image-col {
        order: 1 !important;
    }
}

@media (max-width: 549px) {
    .vinascan-banner-slider-wrapper .banner-title {
        font-size: 1.3em;
    }
    
    .vinascan-banner-slider-wrapper .banner-content-col {
        padding: 20px !important;
        padding-bottom: 70px !important; /* Add space for navigation */
    }
    
    .vinascan-banner-slider-wrapper .banner-description {
        font-size: 0.9em;
    }
    
    .vinascan-banner-slider-wrapper .banner-nav-controls {
        margin: 15px !important;
        left: 0 !important;
        bottom: 0 !important;
    }
    
    .vinascan-banner-slider-wrapper .banner-nav-arrows button {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Image fade in animation */
.vinascan-banner-slider-wrapper .banner-image-container img {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}