/* ============================================
   CUSTOM STYLES - Porto Child Theme
   Modern Checkout, Cart & Category Enhancements
   ============================================ */

/* -----------------------------------------------
   0. BRAND PALETTE — Usatomania
   ----------------------------------------------- */
:root {
    --usm-gold: #efbf17;
    --usm-primary: #EBBD17;
    --usm-red: #183f23;
    --usm-gold-light: #f5d44a;
    --usm-primary-light: #2a5e3b;
    --usm-red-light: #b35a5d;
}

/* Global focus-visible for keyboard accessibility */
*:focus-visible {
    outline: 2px solid var(--usm-primary, #EBBD17);
    outline-offset: 2px;
}

/* -----------------------------------------------
   1. CATEGORY BANNER — Usatomania (with/without image)
   ----------------------------------------------- */
.usm-category-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    margin-bottom: 30px;
}
/* With image */
.usm-category-banner.has-image {
    max-height: 350px;
}
.usm-category-banner-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.usm-category-banner.has-image .usm-category-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 30px;
}
/* Without image — gradient brand background */
.usm-category-banner.no-image {
    background: linear-gradient(135deg, var(--usm-primary, #EBBD17) 0%, #2a5e3b 50%, var(--usm-primary, #EBBD17) 100%);
    padding: 40px 0;
}
.usm-category-banner.no-image .usm-category-banner-overlay {
    display: flex;
    align-items: center;
}
/* Title */
.usm-category-banner-title {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
    margin: 0 0 5px;
}
/* Description under title */
.usm-category-banner-desc {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    max-width: 600px;
    margin: 0;
    line-height: 1.5;
}
/* Also support old class name */
.category-image-banner { display: none; }

@media (max-width: 767px) {
    .usm-category-banner.has-image { max-height: 220px; }
    .usm-category-banner-img { height: 220px; }
    .usm-category-banner.no-image { padding: 28px 0; }
    .usm-category-banner-title { font-size: 22px; letter-spacing: 0.5px; }
    .usm-category-banner-desc { font-size: 13px; }
    .usm-category-banner.has-image .usm-category-banner-overlay { padding-bottom: 18px; }
}

/* -----------------------------------------------
   2. CART - Modern Quantity Selector
   ----------------------------------------------- */
.cart.table-wrapper .col.qty .field.qty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart.table-wrapper .qty-control {
    display: inline-flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s;
}
.cart.table-wrapper .qty-control:hover {
    border-color: #333;
}
.cart.table-wrapper .qty-control .qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    transition: background 0.2s, color 0.2s;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    line-height: 1;
}
.cart.table-wrapper .qty-control .qty-btn:hover {
    background: #f5f5f5;
    color: #000;
}
.cart.table-wrapper .qty-control .qty-btn:active {
    background: #e8e8e8;
}
.cart.table-wrapper .qty-control .input-text.qty {
    width: 50px;
    height: 40px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    background: #fff;
    color: #333;
}
.cart.table-wrapper .qty-control .input-text.qty::-webkit-outer-spin-button,
.cart.table-wrapper .qty-control .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Hide old Porto qty-changer */
.cart.table-wrapper .qty-changer {
    display: none !important;
}
/* Hide the old update cart button row, show inline auto-update */
.cart.table-wrapper .col.qty .label {
    display: none;
}

/* -----------------------------------------------
   3. CHECKOUT - Modern Design
   ----------------------------------------------- */

/* -- General checkout container -- */
.checkout-index-index .page-main {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

/* -- Step titles -- */
.checkout-index-index .step-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    padding-bottom: 15px;
    border-bottom: 2px solid var(--usm-primary, #EBBD17);
    margin-bottom: 25px;
    text-transform: none;
    letter-spacing: 0;
}

/* -- Checkout progress bar -- */
.checkout-index-index .opc-progress-bar {
    margin: 0 0 40px;
    display: flex;
    justify-content: center;
}
.checkout-index-index .opc-progress-bar-item {
    flex: 0 0 auto;
    margin: 0 10px;
}
.checkout-index-index .opc-progress-bar-item._active > span {
    color: var(--usm-primary, #EBBD17);
    font-weight: 700;
}
.checkout-index-index .opc-progress-bar-item._active:before {
    background: var(--usm-primary, #EBBD17);
}
.checkout-index-index .opc-progress-bar-item > span:before {
    font-size: 18px;
}

/* -- Form fields -- */
.checkout-index-index .field .control input,
.checkout-index-index .field .control select,
.checkout-index-index .field .control textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: border-color 0.25s, box-shadow 0.25s;
    background: #fafafa;
    height: auto;
}
.checkout-index-index .field .control input:focus,
.checkout-index-index .field .control select:focus,
.checkout-index-index .field .control textarea:focus {
    border-color: var(--usm-primary, #EBBD17);
    box-shadow: 0 0 0 3px rgba(30,67,41,0.1);
    outline: none;
    background: #fff;
}
.checkout-index-index .field .label {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* -- Shipping methods -- */
.checkout-index-index .table-checkout-shipping-method {
    width: 100%;
}
.checkout-index-index .table-checkout-shipping-method tbody tr {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.checkout-index-index .table-checkout-shipping-method tbody tr:hover {
    border-color: var(--usm-primary, #EBBD17);
    background: #f8f7f3;
}
.checkout-index-index .table-checkout-shipping-method tbody tr td {
    border: none;
    padding: 4px 8px;
}

/* -- Primary buttons (Continue, Place Order) -- */
.checkout-index-index .action.primary {
    background: var(--usm-primary, #EBBD17);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
}
.checkout-index-index .action.primary:hover {
    background: #EBBD17;
    transform: translateY(-1px);
}

/* -- Order Summary (sidebar) -- */
.checkout-index-index .opc-block-summary {
    background: #fafafa;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.checkout-index-index .opc-block-summary > .title {
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: block;
    cursor: default;
}
/* Always show the summary items - disable the collapse */
.checkout-index-index .opc-block-summary .items-in-cart {
    border: none;
}
.checkout-index-index .opc-block-summary .items-in-cart > .title {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    position: relative;
}
.checkout-index-index .opc-block-summary .items-in-cart > .title > span {
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
.checkout-index-index .opc-block-summary .items-in-cart .product-item {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.checkout-index-index .opc-block-summary .items-in-cart .product-item:last-child {
    border-bottom: none;
}
.checkout-index-index .opc-block-summary .product-item .product-item-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.checkout-index-index .opc-block-summary .product-item .product-item-name-block {
    flex: 1;
}
.checkout-index-index .opc-block-summary .product-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.checkout-index-index .opc-block-summary .product-item .subtotal {
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
/* Summary totals */
.checkout-index-index .opc-block-summary .table-totals {
    margin-top: 20px;
    border-top: 2px solid #eee;
}
.checkout-index-index .opc-block-summary .table-totals tr {
    border: none;
}
.checkout-index-index .opc-block-summary .table-totals th,
.checkout-index-index .opc-block-summary .table-totals td {
    padding: 10px 0;
    font-size: 14px;
}
.checkout-index-index .opc-block-summary .table-totals .grand.totals th,
.checkout-index-index .opc-block-summary .table-totals .grand.totals td {
    font-size: 18px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    padding-top: 15px;
    border-top: 2px solid var(--usm-primary, #EBBD17);
}
/* Force summary items visible on desktop */
@media (min-width: 768px) {
    .checkout-index-index .opc-block-summary .items-in-cart .content.minicart-items {
        display: block !important;
    }
}

/* -- Checkout sidebar -- */
.checkout-index-index .opc-sidebar {
    margin-top: 0;
}

/* -- Payment methods -- */
.checkout-index-index .payment-method {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-index-index .payment-method._active {
    border-color: var(--usm-primary, #EBBD17);
    box-shadow: 0 0 0 1px var(--usm-primary, #EBBD17);
}
.checkout-index-index .payment-method-title {
    font-weight: 600;
    font-size: 15px;
}
.checkout-index-index .payment-method .payment-method-content {
    padding: 15px 0 0;
}

/* -- Place order -- */
.checkout-index-index .payment-method .actions-toolbar .primary .action.checkout {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 16px;
}

/* -----------------------------------------------
   4. CART PAGE - Modern Look
   ----------------------------------------------- */
.checkout-cart-index .page-title-wrapper {
    margin-bottom: 30px;
}
.checkout-cart-index .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
.checkout-cart-index .cart.table-wrapper {
    border: none;
}
.checkout-cart-index .cart.table-wrapper .cart.item {
    border-bottom: 1px solid #f0f0f0;
}
.checkout-cart-index .cart.table-wrapper thead th {
    background: transparent;
    border-bottom: 2px solid var(--usm-primary, #EBBD17);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #888;
    padding: 12px 15px;
}
.checkout-cart-index .cart.table-wrapper .item-info td {
    padding: 20px 15px;
    vertical-align: middle;
}
.checkout-cart-index .cart.table-wrapper .product-item-name a {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}
.checkout-cart-index .cart.table-wrapper .product-item-name a:hover {
    color: #000;
}
.checkout-cart-index .cart.table-wrapper .col.price .price,
.checkout-cart-index .cart.table-wrapper .col.subtotal .price {
    font-weight: 700;
    font-size: 15px;
    color: var(--usm-primary, #EBBD17);
}
/* Remove action link */
.checkout-cart-index .action.action-delete {
    opacity: 0.4;
    transition: opacity 0.2s;
}
.checkout-cart-index .action.action-delete:hover {
    opacity: 1;
}
/* Cart Summary */
.checkout-cart-index .cart-summary {
    background: #fafafa;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #eee;
}
.checkout-cart-index .cart-summary .summary.title {
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
/* Proceed to Checkout button */
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary {
    background: var(--usm-primary, #EBBD17);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    width: 100%;
    text-align: center;
    transition: background 0.2s, transform 0.15s;
}
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary:hover {
    background: #EBBD17;
    transform: translateY(-1px);
}

/* -----------------------------------------------
   4.1 CART — Shipping Methods Info Box
   ----------------------------------------------- */
.usm-shipping-methods-box {
    background: #fff;
    border: 1px solid var(--usm-primary, #EBBD17);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 24px;
}
.usm-shipping-methods-title {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--usm-primary, #EBBD17);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.usm-shipping-methods-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.usm-shipping-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fafaf8;
    transition: background 0.2s;
}
.usm-shipping-method:hover {
    background: #f0efe8;
}
.usm-sm-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--usm-primary, #EBBD17);
    border-radius: 8px;
    color: #fff;
    line-height: 1;
}
.usm-sm-info {
    flex: 1;
    min-width: 0;
}
.usm-sm-name {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #222;
    line-height: 1.3;
}
.usm-sm-desc {
    display: block;
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    margin-top: 2px;
}
.usm-sm-price {
    font-weight: 700;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
    flex-shrink: 0;
}
.usm-sm-free {
    color: var(--usm-primary, #EBBD17);
}
@media (max-width: 767px) {
    .usm-shipping-methods-box {
        padding: 14px 14px;
        margin-bottom: 16px;
        border-radius: 10px;
    }
    .usm-shipping-method {
        gap: 10px;
        padding: 8px 10px;
    }
    .usm-sm-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .usm-sm-name { font-size: 12px; }
    .usm-sm-desc { font-size: 10px; }
    .usm-sm-price { font-size: 13px; }
}

/* Cart discount / coupon */
.checkout-cart-index .cart-discount {
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #eee;
    margin-top: 20px;
}
.checkout-cart-index .cart-discount .title {
    font-weight: 600;
}
.checkout-cart-index .cart-discount .field .control input {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 10px 14px;
}

/* -----------------------------------------------
   5. CHECKOUT - Fields in Row/Columns
   ----------------------------------------------- */
.checkout-index-index .fieldset.address {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
.checkout-index-index .fieldset.address > .field {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
/* Full width for street (multi-line) and specific fields */
.checkout-index-index .fieldset.address > .field[name*="street"],
.checkout-index-index .fieldset.address > .field.field-group-count {
    flex: 0 0 100%;
    max-width: 100%;
}
/* Shipping form full width */
form#co-shipping-form {
    max-width: 100% !important;
}
@media (max-width: 767px) {
    .checkout-index-index .fieldset.address > .field {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* -----------------------------------------------
   6. HIDE QTY CONTROL WHEN MAX=1
   ----------------------------------------------- */
/* Cart: hide qty-control when item has data-max-qty="1" - handled via JS class */
.cart.table-wrapper .col.qty .qty-single-item .qty-control {
    display: none;
}
.cart.table-wrapper .col.qty .qty-single-item .qty-value-display {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* -----------------------------------------------
   7. HIDE CURRENCY & LANGUAGE SELECTORS
   ----------------------------------------------- */
.switcher.switcher-language,
.switcher.switcher-currency,
.switcher-language,
.switcher-currency,
#switcher-language,
#switcher-currency {
    display: none !important;
}

/* -----------------------------------------------
   8. CUSTOMER ACCOUNT - Simplified Navigation
   ----------------------------------------------- */
/* Nothing extra needed - blocks are removed via layout XML */

/* -----------------------------------------------
   9. MINICART - Hide QTY for single items
   ----------------------------------------------- */
.minicart-items .product-item-details .details-qty.qty-single {
    display: none;
}

/* -----------------------------------------------
   10. GLOBAL TOUCHES
   ----------------------------------------------- */
/* Smooth transitions on all buttons */
.action.primary,
.action.tocart {
    transition: all 0.3s ease;
}

/* =============================================
   11. HOMEPAGE - USATOMANIA (Porto-native)
   ============================================= */

/* -- Homepage section spacing -- */
.usm-section { padding: 50px 0; }
.usm-section-gray { background: #f4f4f4; }
.usm-section-title {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin-bottom: 10px;
    color: #222529;
}
.usm-section-subtitle {
    font-size: 15px;
    color: #777;
    margin-bottom: 30px;
}

/* -- Porto ibanner enhancements -- */
.cms-index-index .porto-ibanner { overflow: hidden; position: relative; }
.cms-index-index .porto-ibanner .porto-ibanner-img {
    transition: transform .4s ease;
    width: 100%;
    display: block;
}
.cms-index-index .porto-ibanner:hover .porto-ibanner-img { transform: scale(1.05); }
.cms-index-index .porto-ibanner:hover { box-shadow: 0 0 40px 0 rgba(0,0,0,.08); }
.usm-cat-link { display: block; text-decoration: none !important; }

/* -- Porto ultimate-content-box dark overlay -- */
.cms-index-index .porto-ultimate-content-box { position: relative; }
.cms-index-index .porto-ultimate-content-box:before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,.1); opacity: 0; transition: opacity .25s;
}
.cms-index-index .porto-ultimate-content-box:hover:before { opacity: 1; }
.cms-index-index .porto-ultimate-content-box > * { position: relative; z-index: 1; }

/* -- Product carousel section spacing -- */
.usm-section .porto-products { margin-top: 10px; }

/* -- Responsive -- */
@media (max-width: 767px) {
    .usm-section { padding: 30px 0; }
    .usm-section-title { font-size: 22px; }
    .usm-hero-section .porto-ibanner .porto-ibanner-img { height: 250px !important; }
}

/* =============================================
   12. TASK 5.1 — Fix Footer Layout (flex)
   ============================================= */
@media (min-width: 992px) {
    .footer-middle > .container > .row > div {
        flex: 0 0 auto !important;
        max-width: none !important;
    }
}

/* =============================================
   13. TASK 5.2 — Hide PLP Filter CTA Button
   ============================================= */
.block.filter .filter-title,
.filter-toggle-button,
a.action.filter-toggle,
button.action.filter-toggle,
.toolbar-sorter .filter-btn,
.block.filter .block-title.filter-title {
    display: none !important;
}

/* =============================================
   14. TASK 5.3 — Hide "Impostazioni/Settings" in Mobile Menu
   ============================================= */
/* Hide Account/Settings tab in mobile nav — keep only the first (Menu) tab.
   Use nth-child(n+3) instead of :last-child to avoid hiding the menu
   when Porto DOM has a single nav-sections pair. */
.nav-sections .nav-sections-items > *:nth-child(n+3) {
    display: none !important;
}

/* =============================================
   15. TASK 5.4 — Remove "Menu" and "Features" Nav Items
   ============================================= */
.navigation li.level0 > a span:not([class]) {
    /* Nav items are controlled by Megamenu admin - use CSS to hide specific ones */
}
/* Hide nav items by their text content - using attribute selectors on links */
.navigation li.level0 a[href*="/menu"],
.navigation li.level0 a[href*="/features"],
.navigation li.level0 a[href*="menu.html"],
.navigation li.level0 a[href*="features.html"] {
}
/* Also hide the parent li if possible */
.navigation li.level0:has(> a[href*="/menu"]),
.navigation li.level0:has(> a[href*="/features"]),
.navigation li.level0:has(> a[href*="menu.html"]),
.navigation li.level0:has(> a[href*="features.html"]) {
}

/* =============================================
   16. TASK 5.5 — Mobile Logo: Centered & Larger
   ============================================= */
@media (max-width: 767px) {
    .page-header .header-main .header.content.header-row {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .page-header .header-main .header-left {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    .page-header .header-main .header-left .nav-toggle {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .page-header .header-main .header-left .logo {
        margin: 0 auto;
    }
    .page-header .header-main .header-left .logo img {
        max-height: 38px;
        width: auto;
        height: auto;
    }
    .page-header .header-main .header-right {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .page-header .header-main .header-center {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =============================================
   17. TASK 5.6 — Carousel Mobile: Max 2 Slides
   ============================================= */
@media (max-width: 767px) {
    .owl-carousel .owl-stage {
        /* Let owl config handle it, but force 2-item display */
    }
    .cms-index-index .owl-carousel .owl-item {
        min-width: calc(50% - 10px) !important;
    }
    .porto-products .owl-carousel .owl-item {
        min-width: calc(50% - 10px) !important;
    }
    /* Porto product carousel: force 2 columns */
    .products-grid .product-items {
        display: flex;
        flex-wrap: wrap;
    }
    .products-grid .product-items .product-item {
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* =============================================
   18. TASK 5.7 — Homepage Section Spacing
   ============================================= */
.cms-index-index .widget,
.cms-index-index .block-static-block,
.cms-index-index .cms-content > div,
.cms-index-index .porto-block-html {
    margin-bottom: 60px;
}
.cms-index-index .usm-section {
    padding: 40px 0 60px;
}
@media (max-width: 767px) {
    .cms-index-index .widget,
    .cms-index-index .block-static-block,
    .cms-index-index .cms-content > div,
    .cms-index-index .porto-block-html {
        margin-bottom: 32px;
    }
    .cms-index-index .usm-section {
        padding: 24px 0 32px;
    }
}

/* =============================================
   19. TASK 5.8 — Footer: Logo Usatomania
   ============================================= */
.footer .usm-footer-logo {
    display: block;
    margin-bottom: 20px;
}
.footer .usm-footer-logo img {
    max-height: 50px;
    width: auto;
}
.footer .usm-footer-logo a {
    display: inline-block;
}

/* =============================================
   20. TASK 5.9 — Top Banner: Copy Usatomania
   ============================================= */
/* Banner styling - the text content is set via CMS/admin config */
.page-header .main-panel-top,
.page-header .header-top,
.topbar-wrapper,
.top-bar {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* =============================================
   21. TASK 5.10 — PDP: Hide Availability & SKU Labels
   ============================================= */
.product-info-main .product.attribute.sku,
.product-info-main .stock.available,
.product-info-main .stock.unavailable,
.product-info-main .product-info-stock-sku {
    display: none !important;
}

/* =============================================
   22. TASK 5.11 — PDP: Hide Compare Button
   ============================================= */
.product-info-main .action.tocompare,
.product-social-links .action.tocompare,
.product-addto-links .action.tocompare,
a.action.tocompare {
    display: none !important;
}

/* =============================================
   23. TASK 5.12 — Cart Mobile: Premium Layout
   ============================================= */
@media (max-width: 767px) {
    .checkout-cart-index .cart.table-wrapper .cart.items {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .checkout-cart-index .cart.table-wrapper thead {
        display: none;
    }
    .checkout-cart-index .cart.table-wrapper .cart.item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        background: #fff;
        position: relative;
    }
    .checkout-cart-index .cart.table-wrapper .item-info {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
    }
    .checkout-cart-index .cart.table-wrapper .item-info td {
        border: none;
        padding: 4px 8px;
    }
    .checkout-cart-index .cart.table-wrapper .col.item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 8px;
    }
    .checkout-cart-index .cart.table-wrapper .col.item .product-item-photo {
        flex: 0 0 80px;
    }
    .checkout-cart-index .cart.table-wrapper .col.item .product-item-photo img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
    }
    .checkout-cart-index .cart.table-wrapper .col.item .product-item-details {
        flex: 1;
    }
    .checkout-cart-index .cart.table-wrapper .col.item .product-item-name a {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
    }
    .checkout-cart-index .cart.table-wrapper .col.qty {
        width: auto;
        flex: 0 0 auto;
    }
    .checkout-cart-index .cart.table-wrapper .col.price,
    .checkout-cart-index .cart.table-wrapper .col.subtotal {
        width: auto;
        text-align: right;
    }
    .checkout-cart-index .cart.table-wrapper .col.subtotal .price {
        font-size: 16px;
        font-weight: 700;
    }
    .checkout-cart-index .cart.table-wrapper .action.action-delete {
        position: absolute;
        top: 12px;
        right: 12px;
    }
    /* Checkout button prominent */
    .checkout-cart-index .cart-summary {
        position: sticky;
        bottom: 0;
        z-index: 10;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        padding: 20px;
    }
    .checkout-cart-index .cart-summary .checkout-methods-items .action.primary {
        padding: 18px;
        font-size: 16px;
        font-weight: 700;
    }
    .checkout-cart-index .page-title {
        font-size: 22px;
    }
}

/* =============================================
   24. TASK 5.13 — Cart: Hide Coupon Area
   ============================================= */
.checkout-cart-index .cart-discount,
.checkout-cart-index .block.discount,
.checkout-cart-index #block-discount,
.cart-summary .block.discount {
    display: none !important;
}

/* =============================================
   25. TASK 5.14 — Checkout: Additional Optimizations
   ============================================= */
/* Mobile checkout refinements */
@media (max-width: 767px) {
    .checkout-index-index .page-main {
        padding: 16px;
    }
    .checkout-index-index .step-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .checkout-index-index .opc-block-summary {
        padding: 20px;
        border-radius: 12px;
    }
    .checkout-index-index .opc-block-summary > .title {
        font-size: 17px;
    }
    .checkout-index-index .field .control input,
    .checkout-index-index .field .control select {
        padding: 10px 14px;
        font-size: 15px;
    }
    .checkout-index-index .field .label {
        font-size: 12px;
    }
    .checkout-index-index .action.primary {
        padding: 14px 24px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
    .checkout-index-index .payment-method {
        padding: 14px 16px;
        border-radius: 10px;
    }
    .checkout-index-index .opc-progress-bar {
        margin: 0 0 24px;
    }
    /* Order summary spacing on mobile */
    .checkout-index-index .opc-block-summary .table-totals th,
    .checkout-index-index .opc-block-summary .table-totals td {
        font-size: 13px;
        padding: 8px 0;
    }
    .checkout-index-index .opc-block-summary .table-totals .grand.totals th,
    .checkout-index-index .opc-block-summary .table-totals .grand.totals td {
        font-size: 16px;
    }
}
/* Labels refinement */
.checkout-index-index .field .label span:after {
    content: none;
}
/* Order summary items spacing */
.checkout-index-index .opc-block-summary .product-item {
    padding: 12px 0;
}
/* Totals alignment */
.checkout-index-index .opc-block-summary .table-totals {
    width: 100%;
}

/* =============================================
   26. (removed — banner now handled in section 1 with .usm-category-banner)
   ============================================= */

/* =============================================
   27. Login Page — Hide duplicate Create Account
   ============================================= */
.customer-account-login .action.create {
    display: none;
}
.customer-account-login .actions-toolbar .action.create {
    display: block;
}

/* =============================================
   28. HEADER — Top Bar Info & Social Styling
   ============================================= */
/* Top bar contact info row */
.usm-header-top-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.usm-header-top-info a {
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
.usm-header-top-info a:hover {
    color: var(--usm-gold, #efbf17);
}
.usm-header-top-info i {
    margin-right: 3px;
}
/* Gap separator */
.header-top .gap {
    opacity: 0.3;
    margin: 0 6px;
}
@media (max-width: 767px) {
    .usm-header-top-info {
        display: none;
    }
    .header-top .gap {
        display: none;
    }
}

/* =============================================
   29. HEADER — Menu CTA Appuntamenti Styling
   ============================================= */
/* CTA "Prenota Appuntamento" nel menu header desktop */
.sw-megamenu .usm-menu-cta > a.level-top {
    background-color: var(#efbf17) !important;
    color: var( #151616) !important;
    font-weight: 700 !important;
    border-radius: 6px;
    padding: 8px 18px !important;
    margin-left: 10px;
    transition: all 0.3s ease;
}
.sw-megamenu .usm-menu-cta > a.level-top:hover {
    background-color: var(--usm-primary, #EBBD17) !important;
    color: #fff !important;
}
.sw-megamenu .usm-menu-cta > a.level-top i {
    margin-right: 5px;
}

/* =============================================
   30. MOBILE — CTA Appuntamenti Fixed Bottom
   ============================================= */
/* Bottone fisso in basso su mobile per prenotare appuntamento */
.usm-mobile-cta-bar {
    display: none;
}
@media (max-width: 767px) {
    .usm-mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--usm-primary, #EBBD17);
        padding: 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }
    .usm-mobile-cta-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        padding: 16px 12px;
        min-height: 56px; /* touch target >= 44px */
        text-align: center;
        gap: 8px;
    }
    .usm-mobile-cta-bar a.usm-cta-primary {
        background: var(--usm-gold, #efbf17);
        color: var(--usm-primary, #EBBD17);
    }
    .usm-mobile-cta-bar a.usm-cta-secondary {
        background: var(--usm-primary, #EBBD17);
        color: #fff;
    }
    .usm-mobile-cta-bar a:active {
        opacity: 0.85;
    }
    .usm-mobile-cta-bar i {
        font-size: 16px;
    }
    /* Prevent content from being hidden behind the fixed bar */
    body {
        padding-bottom: 56px;
    }
    /* Ensure cart summary on cart page isn't hidden behind our bar */
    .checkout-cart-index .cart-summary {
        bottom: 56px;
    }
}

/* =============================================
   31. HEADER — Mobile Touch Targets & Spacing
   ============================================= */
@media (max-width: 767px) {
    /* Ensure all header interactive elements have min 44px touch target */
    .page-header .nav-toggle,
    .page-header .action.showcart,
    .page-header .header-right a,
    .page-header .header-right button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Search trigger — ensure visible and tappable */
    .page-header .block-search .action.search,
    .page-header .minisearch .action.search {
        min-width: 44px;
        min-height: 44px;
    }
    /* Nav panel: ensure links are tappable */
    .nav-sections .navigation li.level0 > a {
        padding: 14px 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 15px;
    }
    /* Sticky header on mobile — ensure it doesn't overflow */
    .page-header.sticky-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* =============================================
   32. HEADER — Notice Bar Close Button Hide
   ============================================= */
/* Porto notice bar: hide close button to keep brand message always visible */
.porto-block-html-top .close-notice,
.porto-block-html-top .porto-notice-close {
    display: none !important;
}

/* =============================================
   33. HOMEPAGE — Hero Banner
   ============================================= */
.usm-hero {
    position: relative;
    overflow: hidden;
}
.usm-hero::after {
    content: '';
    position: absolute;
    right: -5%;
    top: -20%;
    width: 50%;
    height: 140%;
    background: radial-gradient(ellipse, rgba(239, 191, 23, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.usm-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--usm-gold, #efbf17);
    margin-bottom: 12px;
    font-weight: 600;
}
.usm-hero-title {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
}
.usm-hero-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 500px;
}
.usm-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.usm-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.usm-hero-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(239, 191, 23, 0.15);
    border: 3px solid var(--usm-gold, #efbf17);
}
.usm-hero-badge-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--usm-gold, #efbf17);
    line-height: 1;
}
.usm-hero-badge-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.3;
    margin-top: 4px;
}
@media (max-width: 767px) {
    .usm-hero { padding: 40px 0 50px !important; }
    .usm-hero-title { font-size: 28px; }
    .usm-hero-subtitle { font-size: 15px; }
    .usm-hero-visual { margin-top: 30px; }
    .usm-hero-badge { width: 130px; height: 130px; }
    .usm-hero-badge-number { font-size: 26px; }
    .usm-hero-cta { flex-direction: column; }
    .usm-hero-cta .usm-btn { width: 100%; text-align: center; }
}

/* =============================================
   34. HOMEPAGE — Buttons (shared)
   ============================================= */
.usm-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 2px solid transparent;
}
.usm-btn-gold {
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17) !important;
    border-color: var(--usm-gold, #efbf17);
}
.usm-btn-gold:hover {
    background: var(--usm-gold-light, #f5d44a);
    color: var(--usm-primary, #EBBD17) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 191, 23, 0.3);
}
.usm-btn-green {
    background: var(--usm-primary, #EBBD17);
    color: #fff !important;
    border-color: var(--usm-primary, #EBBD17);
}
.usm-btn-green:hover {
    background: var(--usm-primary-light, #2a5e3b);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 67, 41, 0.3);
}
.usm-btn-outline {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5);
}
.usm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff !important;
}
.usm-btn-lg {
    padding: 18px 40px;
    font-size: 16px;
}

/* =============================================
   35. HOMEPAGE — Value Proposition Strip
   ============================================= */
.usm-vob-section {
    border-bottom: 1px solid #eee;
}
.usm-vob-item {
    padding: 20px 15px;
}
.usm-vob-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--usm-primary, #EBBD17);
    color: var(--usm-gold, #efbf17);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px;
}
.usm-vob-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    color: #222;
}
.usm-vob-text {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 767px) {
    .usm-vob-item { padding: 16px 8px; }
    .usm-vob-icon { width: 44px; height: 44px; font-size: 18px; }
    .usm-vob-title { font-size: 12px; }
    .usm-vob-text { font-size: 11px; }
}

/* =============================================
   36. HOMEPAGE — Category Grid
   ============================================= */
.usm-cat-grid {
    gap: 0;
}
.usm-cat-card-wrap {
    padding: 10px;
}
.usm-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    text-decoration: none !important;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 180px;
}
.usm-cat-card:hover {
    border-color: var(--usm-primary, #EBBD17);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}
.usm-cat-card i {
    font-size: 32px;
    color: var(--usm-primary, #EBBD17);
    margin-bottom: 14px;
    transition: color 0.3s;
}
.usm-cat-card:hover i {
    color: var(--usm-gold, #efbf17);
}
.usm-cat-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}
.usm-cat-count {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}
@media (max-width: 767px) {
    .usm-cat-card-wrap { padding: 6px; }
    .usm-cat-card { padding: 20px 12px; min-height: 140px; }
    .usm-cat-card i { font-size: 24px; }
    .usm-cat-card h3 { font-size: 13px; }
}

/* =============================================
   37. HOMEPAGE — Appointment Steps Section
   ============================================= */
.usm-appointment-section {
    padding: 60px 0 70px !important;
}
.usm-steps {
    margin-top: 40px;
}
.usm-step {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 30px;
}
.usm-step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.usm-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.usm-step-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}
@media (max-width: 767px) {
    .usm-appointment-section { padding: 40px 0 50px !important; }
    .usm-step-number { width: 48px; height: 48px; font-size: 20px; }
    .usm-step-title { font-size: 16px; }
}

/* =============================================
   38. HOMEPAGE — About & Contact Section
   ============================================= */
.usm-about-section {
    padding: 60px 0 !important;
}
.usm-about-text p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}
.usm-contact-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--usm-gold, #efbf17);
}
.usm-contact-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    margin-bottom: 14px;
}
.usm-contact-card h3 i {
    color: var(--usm-gold, #efbf17);
    margin-right: 8px;
}
.usm-contact-card p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 16px;
}
.usm-contact-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.usm-contact-row a {
    color: var(--usm-primary, #EBBD17);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.usm-contact-row a:hover {
    color: var(--usm-gold, #efbf17);
}
.usm-contact-row a i {
    margin-right: 5px;
    width: 18px;
    text-align: center;
}
.usm-contact-social {
    margin-top: 16px;
    display: flex;
    gap: 10px;
}
.usm-contact-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--usm-primary, #EBBD17);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
    text-decoration: none !important;
}
.usm-contact-social a:hover {
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
}
@media (max-width: 767px) {
    .usm-about-section { padding: 40px 0 !important; }
    .usm-about-text { margin-bottom: 30px; }
    .usm-contact-card { padding: 24px 20px; }
}

/* ==========================================================================
   #39 — FLOATING APPOINTMENT CTA (desktop only)
   ========================================================================== */
.usm-floating-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1;
}
.usm-floating-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    line-height: 1;
}
.usm-floating-btn:hover {
    background: var(--usm-primary, #EBBD17);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    text-decoration: none !important;
}
.usm-floating-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}
/* Hide on mobile (mobile CTA bar is already visible) */
@media (max-width: 767px) {
    .usm-floating-cta { display: none; }
}

/* ==========================================================================
   #40 — CATEGORY GRID 10 CARDS (homepage, 4-col desktop)
   ========================================================================== */
.usm-cat-grid .col-lg-3 {
    margin-bottom: 20px;
}
.usm-cat-card h3 {
    font-size: 15px;
}
@media (max-width: 767px) {
    .usm-cat-card { padding: 20px 10px; }
    .usm-cat-card h3 { font-size: 13px; }
    .usm-cat-card i { font-size: 28px; }
}

/* ==========================================================================
   #41 — FOOTER USATOMANIA V2 (charcoal theme, matching homepage mockup)
   ========================================================================== */

/* ── Base footer ── */
.page-footer .footer-middle {
    padding: 64px 0 28px;
}

/* Override Porto Bootstrap grid with CSS grid for exact proportions */
.page-footer .footer-middle .container > .row {
    display: grid !important;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 48px;
}
.page-footer .footer-middle .container > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

/* ── Column titles ── */
.page-footer .footer-middle .widget-title,
.page-footer .footer-middle h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 20px;
}

/* ── Brand column (column 1) ── */
.usm-ft-brand {
    max-width: 320px;
}
.usm-ft-logo {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: #FAF7F2 !important;
    letter-spacing: -1px;
    margin-bottom: 14px;
    text-decoration: none;
}
.usm-ft-logo i {
    color: #edbe14;
    font-style: italic;
    font-weight: 300;
}
.usm-ft-brand > p {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,.35) !important;
    max-width: 320px;
}

/* ── Social icons (column 1) ── */
.usm-ft-socials {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.usm-ft-socials a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    color: rgba(255,255,255,.5) !important;
}
.usm-ft-socials a:hover {
    background: #edbe14 !important;
    border-color: #edbe14;
    color: #fff !important;
}
.usm-ft-socials svg {
    width: 17px;
    height: 17px;
    fill: rgba(255,255,255,.5);
}
.usm-ft-socials a:hover svg {
    fill: #fff;
}

/* ── Link columns (columns 2–4) ── */
.page-footer .footer-middle .textwidget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-footer .footer-middle .textwidget ul li {
    margin-bottom: 12px;
}
.page-footer .footer-middle .textwidget ul li a {
    font-size: 14px;
    color: rgba(255,255,255,.35) !important;
    transition: color .3s;
    text-decoration: none;
}
.page-footer .footer-middle .textwidget ul li a:hover {
    color: #edbe14 !important;
}

/* ── Footer bottom bar ── */
.page-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 24px 0 0;
}
.page-footer .footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-footer .footer-bottom address {
    font-size: 12px;
    color: rgba(255,255,255,.2);
    font-style: normal;
}
/* Add Luckiest Guy tagline via pseudo-element on copyright */
.page-footer .footer-bottom address::after {
    content: 'Dal 1998, con passione ♻️';
    font-family: 'Luckiest Guy', cursive;
    font-size: 14px;
    color: rgba(255,255,255,.3);
    float: right;
}
/* Hide the now-empty custom block */
.page-footer .footer-bottom .custom-block {
    display: none;
}

/* ── Responsive: tablet ── */
@media (max-width: 1100px) {
    .page-footer .footer-middle .container > .row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
    .page-footer .footer-middle {
        padding: 0;
        padding-left: 1em;
        background: #222220;
    }
    .page-footer .footer-middle .container > .row {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .page-footer .footer-bottom .container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .page-footer .footer-bottom address::after {
        float: none;
        display: block;
        margin-top: 6px;
    }
    .page-footer .footer {
        padding: 0;
        padding-left: 1em;
        background: #222220;
    }
}

/* ==========================================================================
   #42 — PLP PRODUCT CARD REFINEMENT
   ========================================================================== */
/* Product card — cleaner look */
.products-grid .product-item .product-item-info {
    padding-bottom: 15px;
}
.products-grid .product-item .product-item-name {
    font-size: 13px;
    line-height: 1.4;
    min-height: 36px;
    margin-bottom: 6px;
}
.products-grid .product-item .product-item-name a {
    color: #333;
    text-decoration: none;
}
.products-grid .product-item .product-item-name a:hover {
    color: var(--usm-primary, #EBBD17);
}
/* Price */
.products-grid .product-item .price-box .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
.products-grid .product-item .price-box .old-price .price {
    font-size: 13px;
    color: #999;
    font-weight: 400;
}
.products-grid .product-item .price-box .special-price .price {
    color: var(--usm-red, #183f23);
}
/* Sale badge */
.products-grid .product-item .product-label.sale-label {
    background: var(--usm-red, #183f23);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
}
/* Add to cart button in grid */
.products-grid .product-item .action.tocart {
    background: var(--usm-primary, #EBBD17);
    border-color: var(--usm-primary, #EBBD17);
    color: #fff;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 4px;
    transition: all 0.2s;
}
.products-grid .product-item .action.tocart:hover {
    background: var(--usm-gold, #efbf17);
    border-color: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
}

/* ==========================================================================
   #43 — PLP TOOLBAR & PAGINATION
   ========================================================================== */
/* Toolbar clean-up */
.toolbar-products .toolbar-amount {
    font-size: 13px;
    color: #666;
}
.toolbar-products .toolbar-amount .toolbar-number {
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
/* Sorter */
.toolbar-products .sorter-label {
    font-size: 13px;
}
/* Pagination */
.pages .items .item a,
.pages .items .item strong {
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
}
.pages .items .item.current strong {
    background: var(--usm-primary, #EBBD17);
    color: #fff;
    border-radius: 4px;
}
.pages .items .item a:hover {
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
    border-radius: 4px;
}

/* ==========================================================================
   #44 — PLP EMPTY STATE
   ========================================================================== */
.message.info.empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #666;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px dashed #ddd;
}

/* ==========================================================================
   #45 — PLP MOBILE REFINEMENTS
   ========================================================================== */
@media (max-width: 767px) {
    /* Product name truncation on mobile */
    .products-grid .product-item .product-item-name {
        font-size: 12px;
        min-height: 32px;
    }
    /* Tighter card spacing */
    .products-grid .product-item {
        margin-bottom: 10px;
    }
    /* Filter sidebar better spacing */
    .sidebar .filter-options .filter-options-title {
        font-size: 14px;
        padding: 12px 0;
    }
    .sidebar .filter-options .filter-options-content {
        padding-bottom: 10px;
    }
}

/* ==========================================================================
   #46 — PDP TRUST BLOCK
   ========================================================================== */
.usm-pdp-trust {
    margin-top: 20px;
    padding: 16px 20px;
    background: #f8f7f3;
    border: 1px solid #e8e5db;
    border-radius: 8px;
}
.usm-pdp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}
.usm-pdp-trust-item + .usm-pdp-trust-item {
    border-top: 1px solid #e8e5db;
}
.usm-pdp-trust-item i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--usm-primary, #EBBD17);
}
.usm-pdp-trust-item a {
    color: var(--usm-primary, #EBBD17);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.usm-pdp-trust-item a:hover {
    color: var(--usm-gold, #efbf17);
}

/* ==========================================================================
   #47 — PDP VISUAL REFINEMENTS
   ========================================================================== */

/* Product title */
.catalog-product-view .page-title-wrapper.product .page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    line-height: 1.3;
    margin-bottom: 10px;
}

/* Price — prominent */
.catalog-product-view .product-info-price .price {
    font-size: 28px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
.catalog-product-view .product-info-price .old-price .price {
    font-size: 18px;
    color: #999;
}

/* Add to Cart button — brand styled */
.catalog-product-view .box-tocart .action.tocart {
    background: var(--usm-primary, #EBBD17);
    border-color: var(--usm-primary, #EBBD17);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0.3px;
    transition: background 0.2s, transform 0.15s;
}
.catalog-product-view .box-tocart .action.tocart:hover {
    background: #EBBD17;
    transform: translateY(-1px);
}

/* Qty field refinement */
.catalog-product-view .field.qty .control {
    display: flex;
    align-items: center;
}
.catalog-product-view .field.qty .input-text.qty {
    width: 52px;
    text-align: center;
    font-size: 16px;
    border-radius: 4px;
}

/* Wishlist link — subtle */
.catalog-product-view .product-addto-links .action.towishlist {
    color: #666;
    font-size: 13px;
}
.catalog-product-view .product-addto-links .action.towishlist:hover {
    color: var(--usm-primary, #EBBD17);
}

/* Description tab — cleaner */
.catalog-product-view .product.info.detailed .data.item.title a {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 12px 20px;
}
.catalog-product-view .product.info.detailed .data.item.title.active a {
    color: var(--usm-primary, #EBBD17);
    border-bottom-color: var(--usm-primary, #EBBD17);
}
.catalog-product-view .product.info.detailed .data.item.content {
    padding: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* Prev/Next product navigation — subtle */
.catalog-product-view .prev-next-products {
    margin-bottom: 8px;
}
.catalog-product-view .prev-next-products a {
    font-size: 12px;
    color: #888;
}
.catalog-product-view .prev-next-products a:hover {
    color: var(--usm-primary, #EBBD17);
}

/* ==========================================================================
   #48 — PDP MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .catalog-product-view .page-title-wrapper.product .page-title {
        font-size: 20px;
    }
    .catalog-product-view .product-info-price .price {
        font-size: 24px;
    }
    .catalog-product-view .box-tocart .action.tocart {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }
    .usm-pdp-trust {
        margin-top: 16px;
        padding: 12px 14px;
    }
    .usm-pdp-trust-item {
        font-size: 13px;
        padding: 7px 0;
        gap: 8px;
    }
    .usm-pdp-trust-item i {
        font-size: 14px;
    }
    /* Description tab */
    .catalog-product-view .product.info.detailed .data.item.title a {
        font-size: 14px;
        padding: 10px 14px;
    }
    .catalog-product-view .product.info.detailed .data.item.content {
        padding: 14px;
        font-size: 14px;
    }
}

/* ==========================================================================
   #49 — CART BRAND REFINEMENTS
   ========================================================================== */

/* Single-item qty display */
.qty-single-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-single-item .qty-value-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
}

/* Cart product name hover — brand */
.checkout-cart-index .cart.table-wrapper .product-item-name a:hover {
    color: var(--usm-primary, #EBBD17);
}

/* Empty cart message — friendlier */
.checkout-cart-index .cart-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #666;
}
.checkout-cart-index .cart-empty p:first-child {
    font-size: 20px;
    font-weight: 600;
    color: var(--usm-primary, #EBBD17);
    margin-bottom: 12px;
}

/* Cart summary border brand */
.checkout-cart-index .cart-summary {
    border-color: #e8e5db;
}

/* Update cart button — subtle */
.checkout-cart-index .action.update {
    color: var(--usm-primary, #EBBD17);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--usm-primary, #EBBD17);
    border-radius: 4px;
    padding: 8px 16px;
    background: transparent;
}
.checkout-cart-index .action.update:hover {
    background: var(--usm-primary, #EBBD17);
    color: #fff;
}

@media (max-width: 767px) {
    .checkout-cart-index .cart-summary .checkout-methods-items .action.primary {
        padding: 18px;
        font-size: 16px;
        font-weight: 700;
    }
}

/* ==========================================================================
   #50 — LOGIN & REGISTRATION PAGES
   ========================================================================== */

/* Login page */
.customer-account-login .block-title strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}
.customer-account-login .block-content .field.note {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}
.customer-account-login .fieldset.login .field .label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.customer-account-login .fieldset.login .input-text {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color 0.2s;
}
.customer-account-login .fieldset.login .input-text:focus {
    border-color: var(--usm-primary, #EBBD17);
    box-shadow: 0 0 0 3px rgba(30,67,41,0.1);
    outline: none;
}
.customer-account-login .fieldset.login .input-text::placeholder {
    color: #aaa;
    font-size: 13px;
}
/* Login button */
.usm-btn-login {
    display: block;
    width: 100%;
    background: var(--usm-primary, #EBBD17) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
}
.usm-btn-login:hover {
    background: #EBBD17 !important;
    transform: translateY(-1px);
}
/* Register link button */
.usm-btn-register {
    display: block;
    width: 100%;
    background: transparent !important;
    border: 2px solid var(--usm-primary, #EBBD17) !important;
    color: var(--usm-primary, #EBBD17) !important;
    border-radius: 6px !important;
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center;
    text-decoration: none !important;
    margin-top: 12px;
    transition: background 0.2s, color 0.2s;
}
.usm-btn-register:hover {
    background: var(--usm-primary, #EBBD17) !important;
    color: #fff !important;
}
/* Forgot password link */
.customer-account-login .action.remind {
    color: #666;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.customer-account-login .action.remind:hover {
    color: var(--usm-primary, #EBBD17);
}

/* Registration page */
.customer-account-create .legend {
    font-size: 20px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
    border-bottom: 2px solid var(--usm-primary, #EBBD17);
    padding-bottom: 10px;
    margin-bottom: 20px;
    width: 100%;
}
.customer-account-create .fieldset .field .label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.customer-account-create .fieldset .input-text,
.customer-account-create .fieldset select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color 0.2s;
}
.customer-account-create .fieldset .input-text:focus,
.customer-account-create .fieldset select:focus {
    border-color: var(--usm-primary, #EBBD17);
    box-shadow: 0 0 0 3px rgba(30,67,41,0.1);
    outline: none;
}
/* Action back link */
.customer-account-create .action.back {
    color: #666;
    font-size: 14px;
}
.customer-account-create .action.back:hover {
    color: var(--usm-primary, #EBBD17);
}

@media (max-width: 767px) {
    .customer-account-login .block-title strong {
        font-size: 20px;
    }
    .customer-account-login .block-content .field.note {
        font-size: 14px;
    }
    .customer-account-create .legend {
        font-size: 18px;
    }
}

/* ==========================================================================
   #51 — CUSTOMER ACCOUNT AREA
   ========================================================================== */

/* Account sidebar navigation */
.account .sidebar-main .block-collapsible-nav .item a,
.account .sidebar-main .block-collapsible-nav .item strong {
    font-size: 14px;
    padding: 10px 16px;
    color: #444;
    border-left: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.account .sidebar-main .block-collapsible-nav .item.current a,
.account .sidebar-main .block-collapsible-nav .item.current strong {
    color: var(--usm-primary, #EBBD17);
    font-weight: 700;
    border-left-color: var(--usm-primary, #EBBD17);
    background: rgba(30,67,41,0.04);
}
.account .sidebar-main .block-collapsible-nav .item a:hover {
    color: var(--usm-primary, #EBBD17);
    background: rgba(30,67,41,0.03);
}

/* Account page titles */
.account .page-title-wrapper .page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}

/* Account box titles */
.account .block-dashboard-info .box-title,
.account .block-dashboard-addresses .box-title,
.account .block-title strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--usm-primary, #EBBD17);
}

/* Account action links */
.account .box-actions a,
.account .action.edit,
.account .action.change-password {
    color: var(--usm-primary, #EBBD17);
    font-size: 13px;
    font-weight: 600;
}
.account .box-actions a:hover,
.account .action.edit:hover {
    color: var(--usm-gold, #efbf17);
}

/* Orders table */
.account .table-order-items thead th,
.account .table-wrapper .data.table thead th {
    background: transparent;
    border-bottom: 2px solid var(--usm-primary, #EBBD17);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}
.account .table-wrapper .data.table .action.view,
.account .table-wrapper .data.table .action.order {
    color: var(--usm-primary, #EBBD17);
    font-weight: 600;
}

@media (max-width: 767px) {
    .account .page-title-wrapper .page-title {
        font-size: 20px;
    }
    .account .sidebar-main .block-collapsible-nav .item a,
    .account .sidebar-main .block-collapsible-nav .item strong {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ============================================
   #52 — HOMEPAGE CARDS & HOVER
   ============================================ */
.cms-index-index .col-6 a[style*="border-radius: 6px"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.cms-index-index .col-6 a[style*="border-radius: 6px"] {
    transition: transform .25s, box-shadow .25s;
}

/* ============================================
   #53 — MENU DESKTOP: nomi corti, no overflow
   ============================================ */
@media (min-width: 992px) {
    .navigation .level0 > a {
        font-size: 13px !important;
        padding: 10px 12px !important;
        white-space: nowrap;
        letter-spacing: 0;
    }
    /* Megamenu dropdown (no accordion) — clean look */
    .navigation .level0 .submenu {
        background: #fff;
        border-top: 3px solid var(--usm-primary, #EBBD17);
        box-shadow: 0 8px 30px rgba(0,0,0,.12);
        padding: 20px 25px;
    }
    .navigation .level0 .submenu .level1 > a {
        font-size: 13px;
        color: #333;
        padding: 6px 0;
    }
    .navigation .level0 .submenu .level1 > a:hover {
        color: var(--usm-primary, #EBBD17);
    }
    /* Menu items: compact spacing */
    .navigation .level0 {
        margin: 0 !important;
    }
}

/* ============================================
   #54 — MENU MOBILE: lista pulita, no accordion brutto
   ============================================ */
@media (max-width: 991px) {
    /* Mobile nav: clean vertical list */
    .nav-sections-item-content .navigation .level0 > a {
        font-size: 14px;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        color: #333;
    }
    .nav-sections-item-content .navigation .level0.active > a,
    .nav-sections-item-content .navigation .level0 > a:hover {
        color: var(--usm-primary, #EBBD17);
        background: #f8f8f8;
    }
    /* Submenu: indented, clean */
    .nav-sections-item-content .navigation .level0 .submenu a {
        font-size: 13px;
        padding: 10px 15px 10px 30px;
        border-bottom: 1px solid #f4f4f4;
    }
}

/* ==========================================================================
   #55 — HOMEPAGE V2 — Usatomania Homepage Redesign
   Tutte le classi prefissate .usm-hp-* per evitare conflitti con Porto/Magento.
   Il contenuto è wrappato in .usm-hp nel CMS page.
   ========================================================================== */

/* --- Custom properties (scoped) --- */
.usm-hp {
    --hp-bg: #ffffff;
    --hp-bg-warm: #EDE6DB;
    --hp-bg-deep: #1A1A17;
    --hp-olive: #183f23;
    --hp-rust: #edbe14;
    --hp-rust-light: #edbe14;
    --hp-rust-dark: #183f23;
    --hp-sage: #8FA484;
    --hp-sage-light: #C7D4BF;
    --hp-gold: #BDA168;
    --hp-cream: #FAF7F2;
    --hp-charcoal: #222220;
    --hp-text: #3A3A36;
    --hp-text-muted: #8A897E;
    --hp-text-light: #B5B3A8;
    --hp-white: #FFF;
    font-family: 'Oswald', sans-serif;
    color: var(--hp-text);
    overflow-x: hidden;
    /* Full-width breakout from Magento content container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.usm-hp *,
.usm-hp *::before,
.usm-hp *::after {
    box-sizing: border-box;
}
.usm-hp ::selection {
    background: var(--hp-rust);
    color: var(--hp-cream);
}
.usm-hp a {
    text-decoration: none;
    color: inherit;
}

/* --- ANNOUNCE BAR (marquee) --- */
.usm-hp-announce {
    background: var(--hp-olive);
    overflow: hidden;
    height: 42px;
    display: flex;
    align-items: center;
}
.usm-hp-announce-track {
    display: flex;
    animation: usm-hp-marquee 40s linear infinite;
    white-space: nowrap;
}
.usm-hp-announce-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 48px;
    color: var(--hp-sage-light);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.usm-hp-dot {
    width: 4px;
    height: 4px;
    background: var(--hp-rust);
    border-radius: 50%;
    flex-shrink: 0;
}
@keyframes usm-hp-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- HERO --- */
.usm-hp {
    background: var(--hp-bg);
}
.usm-hp-hero {
    min-height: 92vh;
    display: grid;
    grid-template-columns: 1.1fr 0.8fr;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 48px;
    gap: 60px;
    align-items: center;
}
.usm-hp-hero-left {
    padding: 80px 0;
}
.usm-hp-hero-eyebrow {
    font-family: 'Luckiest Guy', cursive;
    font-size: 22px;
    color: var(--hp-rust);
    margin-bottom: 20px;
    opacity: 0;
    animation: usm-hp-fadeUp .8s .2s forwards;
}
.usm-hp-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 5.5vw, 82px);
    font-weight: 300;
    line-height: 1.02;
    color: var(--hp-charcoal);
    margin-bottom: 28px;
    opacity: 0;
    animation: usm-hp-fadeUp .8s .35s forwards;
}
.usm-hp-hero-title strong {
    font-weight: 700;
    font-style: italic;
    color: var(--hp-olive);
}
.usm-hp-hero-title em {
    font-style: italic;
    color: var(--hp-rust);
    font-weight: 300;
    position: relative;
}
.usm-hp-hero-title em::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(194, 90, 48, .12);
    z-index: -1;
}
.usm-hp-hero-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--hp-text-muted);
    max-width: 500px;
    margin-bottom: 44px;
    opacity: 0;
    animation: usm-hp-fadeUp .8s .5s forwards;
}
.usm-hp-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    opacity: 0;
    animation: usm-hp-fadeUp .8s .65s forwards;
}

/* --- BUTTONS --- */
.usm-hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 36px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
}
.usm-hp-btn-fill {
    background: var(--hp-rust);
    color: #fff;
}
.usm-hp-btn-fill:hover {
    background: var(--hp-rust-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(194, 90, 48, .25);
    color: #fff;
}
.usm-hp-btn-ghost {
    background: transparent;
    color: var(--hp-charcoal);
    border: 1.5px solid var(--hp-charcoal);
}
.usm-hp-btn-ghost:hover {
    background: var(--hp-charcoal);
    color: var(--hp-cream);
}
.usm-hp-btn-glass {
    background: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(10px);
    width: fit-content;
}
.usm-hp-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform .3s;
}
.usm-hp-btn:hover svg {
    transform: translateX(3px);
}

/* --- HERO METRICS --- */
.usm-hp-hero-metrics {
    display: flex;
    gap: 48px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    opacity: 0;
    animation: usm-hp-fadeUp .8s .8s forwards;
}
.usm-hp-metric-val {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--hp-olive);
    line-height: 1;
}
.usm-hp-metric-accent {
    font-size: 24px;
    color: var(--hp-rust);
}
.usm-hp-metric-accent-gold {
    font-size: 24px;
    color: var(--hp-gold);
}
.usm-hp-metric-label {
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--hp-text-muted);
    margin-top: 6px;
}

/* --- HERO RIGHT (cards) --- */
.usm-hp-hero-right {
    position: relative;
    height: 600px;
    opacity: 0;
    animation: usm-hp-fadeUp .8s .4s forwards;
}
.usm-hp-hero-card {
    position: absolute;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.usm-hp-hero-card:hover {
    transform: translateY(-8px) rotate(0deg) !important;
}
.usm-hp-hc1 {
    width: 320px;
    height: 400px;
    top: 20px;
    left: 0;
    transform: rotate(-3deg);
    background: linear-gradient(155deg, #C4A882, #A08060, #8B7050);
    z-index: 3;
}
.usm-hp-hc2 {
    width: 260px;
    height: 340px;
    top: 80px;
    right: 0;
    transform: rotate(4deg);
    background: linear-gradient(155deg, var(--hp-sage), #6B8A5E);
    z-index: 2;
}
.usm-hp-hc3 {
    width: 240px;
    height: 280px;
    bottom: 20px;
    left: 60px;
    transform: rotate(-1deg);
    background: linear-gradient(155deg, var(--hp-rust-light), var(--hp-rust));
    z-index: 4;
}
.usm-hp-hc-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    color: #fff;
}
.usm-hp-hc-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, transparent 60%);
}
.usm-hp-hc-emoji {
    font-size: 44px;
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}
.usm-hp-hc-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}
.usm-hp-hc-sub {
    font-size: 13px;
    opacity: .8;
    position: relative;
    z-index: 2;
    margin-top: 4px;
}
.usm-hp-hc-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    padding: 6px 14px;
    border-radius: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    z-index: 5;
}

/* --- TRUST BAR --- */
.usm-hp-trust {
    background: var(--hp-cream);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}
.usm-hp-trust-inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.usm-hp-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.usm-hp-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--hp-bg);
}
.usm-hp-trust-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hp-charcoal);
}
.usm-hp-trust-text span {
    font-size: 12px;
    color: var(--hp-text-muted);
}

/* --- SECTION / TITLE COMMON --- */
.usm-hp-section {
    max-width: 90%;
    margin: 0 auto;
    padding: 100px 48px;
}
.usm-hp-stitle {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 52px;
}
.usm-hp-stitle-h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 300;
    color: var(--hp-charcoal);
    line-height: 1.1;
}
.usm-hp-stitle-h2 strong {
    font-weight: 700;
    font-style: italic;
    color: var(--hp-olive);
}
.usm-hp-stitle-h2 em {
    color: var(--hp-rust);
    font-style: italic;
    font-weight: 300;
}
.usm-hp-stitle-sub {
    font-size: 15px;
    color: var(--hp-text-muted);
    margin-top: 10px;
    max-width: 440px;
    line-height: 1.7;
}
.usm-hp-stitle-link {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--hp-rust);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .3s;
    flex-shrink: 0;
}
.usm-hp-stitle-link:hover {
    gap: 14px;
    color: var(--hp-rust-dark);
}

/* --- CATEGORIES GRID --- */
.usm-hp-cats {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 280px 280px;
    gap: 16px;
}
.usm-hp-cat {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .45s cubic-bezier(.16, 1, .3, 1);
    display: block;
}
.usm-hp-cat:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.usm-hp-cat:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; }
.usm-hp-cat:nth-child(2) { grid-column: 6 / 9; }
.usm-hp-cat:nth-child(3) { grid-column: 9 / 13; }
.usm-hp-cat:nth-child(4) { grid-column: 6 / 8; }
.usm-hp-cat:nth-child(5) { grid-column: 8 / 11; }
.usm-hp-cat:nth-child(6) { grid-column: 11 / 13; }
.usm-hp-cat-bg {
    position: absolute;
    inset: 0;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.usm-hp-cat:hover .usm-hp-cat-bg {
    transform: scale(1.08);
}
.usm-hp-cat:nth-child(1) .usm-hp-cat-bg { background: linear-gradient(160deg, #B8A088, #8B7050, #6B5030); }
.usm-hp-cat:nth-child(2) .usm-hp-cat-bg { background: linear-gradient(160deg, #8FA484, #5E7A50); }
.usm-hp-cat:nth-child(3) .usm-hp-cat-bg { background: linear-gradient(160deg, #7A9AB8, #4A6A88); }
.usm-hp-cat:nth-child(4) .usm-hp-cat-bg { background: linear-gradient(160deg, var(--hp-rust-light), var(--hp-rust)); }
.usm-hp-cat:nth-child(5) .usm-hp-cat-bg { background: linear-gradient(160deg, var(--hp-gold), #8A7040); }
.usm-hp-cat:nth-child(6) .usm-hp-cat-bg { background: linear-gradient(160deg, #9A7A9A, #6A4A6A); }
.usm-hp-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 50%, transparent 100%);
    z-index: 2;
}
.usm-hp-cat-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    z-index: 3;
    color: #fff;
}
.usm-hp-cat-icon {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}
.usm-hp-cat h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.usm-hp-cat:nth-child(1) h3 {
    font-size: 32px;
}
.usm-hp-cat p {
    font-size: 13px;
    opacity: .78;
    margin-top: 4px;
    color: #fff;
}
.usm-hp-cat-count {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    padding: 5px 14px;
    border-radius: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    z-index: 4;
}
.usm-hp-cat-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    transform: translateX(-10px);
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
}
.usm-hp-cat:hover .usm-hp-cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- PRODUCTS SECTION --- */
.usm-hp-products-section {
    background: var(--hp-cream);
    padding: 100px 0;
}
.usm-hp-products-section .usm-hp-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- HOW IT WORKS --- */
.usm-hp-how {
    background: var(--hp-olive);
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}
.usm-hp-how::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 90, 48, .08) 0%, transparent 70%);
    top: -300px;
    right: -200px;
}
.usm-hp-how .usm-hp-section {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 2;
}
.usm-hp-how .usm-hp-stitle-h2 {
    color: var(--hp-cream);
}
.usm-hp-how .usm-hp-stitle-h2 strong {
    color: var(--hp-sage-light);
}
.usm-hp-how .usm-hp-stitle-sub {
    color: rgba(255, 255, 255, .45);
}
.usm-hp-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.usm-hp-how-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 44px 36px;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
}
.usm-hp-how-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--hp-rust), transparent);
    opacity: 0;
    transition: opacity .4s;
}
.usm-hp-how-card:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-4px);
}
.usm-hp-how-card:hover::before {
    opacity: 1;
}
.usm-hp-how-num {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 700;
    color: var(--hp-rust);
    line-height: 1;
    margin-bottom: 20px;
    opacity: .7;
}
.usm-hp-how-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--hp-cream);
    margin-bottom: 14px;
}
.usm-hp-how-card p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .5);
}
.usm-hp-how-tag {
    display: inline-block;
    margin-top: 22px;
    padding: 6px 16px;
    border-radius: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgb(250 247 242 / 26%);
    color: var(--hp-rust-light);
}

/* --- DISCOUNT BANNER --- */
.usm-hp-discount {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.usm-hp-discount-left {
    background: var(--hp-rust);
    padding: 90px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.usm-hp-discount-left::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    top: -100px;
    right: -50px;
}
.usm-hp-discount-left h2 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 300;
    line-height: 1.05;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    color: #fff;
}
.usm-hp-discount-left h2 strong {
    font-weight: 700;
    color: #fff;
}
.usm-hp-discount-left > p {
    font-size: 17px;
    line-height: 1.75;
    opacity: .85;
    max-width: 400px;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}
.usm-hp-tiers {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}
.usm-hp-tier {
    flex: 1;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all .3s;
}
.usm-hp-tier:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-3px);
}
.usm-hp-tier-pct {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.usm-hp-tier-when {
    font-size: 12px;
    opacity: .75;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}
.usm-hp-discount-right {
    background: linear-gradient(155deg, #E8945A, #edbe14, #183f23);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.usm-hp-big-pct {
    font-family: 'Playfair Display', serif;
    font-size: 220px;
    font-weight: 700;
    color: rgba(255, 255, 255, .12);
    line-height: 1;
    user-select: none;
}
.usm-hp-recycle-icon {
    position: absolute;
    font-size: 120px;
    opacity: .08;
    bottom: 30px;
    right: 40px;
}

/* --- REVIEWS --- */
.usm-hp-reviews {
    background: white;
    padding: 100px 0;
}
.usm-hp-reviews .usm-hp-section {
    padding-top: 0;
    padding-bottom: 0;
}
.usm-hp-rev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.usm-hp-rev-card {
    background: var(--hp-white);
    border-radius: 20px;
    padding: 36px;
    border: 1px solid rgba(0, 0, 0, .04);
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    position: relative;
}
.usm-hp-rev-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
}
.usm-hp-rev-quote {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: 'Playfair Display', serif;
    font-size: 72px;
    color: var(--hp-rust);
    opacity: .1;
    line-height: 1;
    user-select: none;
}
.usm-hp-rev-stars {
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 18px;
    color: var(--hp-gold);
}
.usm-hp-rev-text {
    line-height: 1.8;
    color: var(--hp-text);
    margin-bottom: 24px;
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
}
.usm-hp-rev-author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.usm-hp-rev-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.usm-hp-rev-avatar-1 { background: var(--hp-rust); }
.usm-hp-rev-avatar-2 { background: var(--hp-olive); }
.usm-hp-rev-avatar-3 { background: var(--hp-gold); }
.usm-hp-rev-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--hp-charcoal);
}
.usm-hp-rev-loc {
    font-size: 12px;
    color: var(--hp-text-muted);
}

.columns .column.main {
    padding-bottom: 0 !important;
}

/* --- STORE INFO --- */
.usm-hp-store {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}
.usm-hp-store-map-side {
    background: var(--hp-sage-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.usm-hp-store-map-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(0, 0, 0, .02) 30px, rgba(0, 0, 0, .02) 31px),
        repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(0, 0, 0, .02) 30px, rgba(0, 0, 0, .02) 31px);
}
.usm-hp-map-content {
    text-align: center;
    position: relative;
    z-index: 2;
}
.usm-hp-map-pin {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
    animation: usm-hp-float 3s ease-in-out infinite;
}
@keyframes usm-hp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.usm-hp-map-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--hp-olive);
    margin-bottom: 6px;
}
.usm-hp-map-content p {
    color: var(--hp-text-muted);
    font-size: 14px;
}
.usm-hp-map-btn {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--hp-olive);
    color: #fff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s;
    border: none;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
}
.usm-hp-map-btn:hover {
    background: var(--hp-charcoal);
    transform: translateY(-2px);
    color: #fff;
}
.usm-hp-store-details {
    padding: 80px;
    background: var(--hp-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.usm-hp-store-details h2 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--hp-olive);
    margin-bottom: 32px;
}
.usm-hp-sd-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.usm-hp-sd-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #efbf17;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.usm-hp-sd-icon svg {
    stroke: black;
}
.usm-hp-sd-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hp-text-light);
    margin-bottom: 4px;
}
.usm-hp-sd-value {
    font-size: 16px;
    color: var(--hp-charcoal);
    font-weight: 500;
}

/* --- NEWSLETTER --- */
.usm-hp-newsletter {
    background: var(--hp-bg-deep);
    padding: 90px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.usm-hp-newsletter::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 90, 48, .06) 0%, transparent 70%);
}
.usm-hp-newsletter h2 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 300;
    color: var(--hp-cream);
    margin-bottom: 12px;
    position: relative;
}
.usm-hp-newsletter h2 strong {
    font-weight: 700;
    font-style: italic;
    color: var(--hp-cream);
}
.usm-hp-newsletter > p {
    color: rgba(255, 255, 255, .4);
    font-size: 15px;
    margin-bottom: 36px;
    position: relative;
}
/* Stile per il form newsletter nativo Magento dentro la sezione homepage */
.usm-hp-newsletter .block.newsletter {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}
.usm-hp-newsletter .block.newsletter .title {
    display: none;
}
.usm-hp-newsletter .block.newsletter .content {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.usm-hp-newsletter .block.newsletter .form.subscribe {
    display: flex;
    width: 100%;
}
.usm-hp-newsletter .block.newsletter input[type="email"] {
    flex: 1;
    padding: 18px 24px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-right: none;
    color: var(--hp-cream);
    font-size: 15px;
    font-family: 'Oswald', sans-serif;
    outline: none;
    border-radius: 12px 0 0 12px;
}
.usm-hp-newsletter .block.newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, .25);
}
.usm-hp-newsletter .block.newsletter .action.subscribe {
    padding: 18px 32px;
    background: var(--hp-rust);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    transition: background .3s;
    border-radius: 0 12px 12px 0;
    white-space: nowrap;
}
.usm-hp-newsletter .block.newsletter .action.subscribe:hover {
    background: var(--hp-rust-dark);
}

/* --- ANIMATIONS --- */
@keyframes usm-hp-fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE: TABLET / SMALL DESKTOP --- */
@media (max-width: 1100px) {
    .usm-hp-hero {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .usm-hp-hero-right {
        display: none;
    }
    .usm-hp-cats {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .usm-hp-cat {
        aspect-ratio: 1.2;
    }
    .usm-hp-cat:nth-child(1) {
        grid-column: 1 / 3;
        aspect-ratio: 2.2;
    }
    .usm-hp-cat:nth-child(2),
    .usm-hp-cat:nth-child(3),
    .usm-hp-cat:nth-child(4),
    .usm-hp-cat:nth-child(5),
    .usm-hp-cat:nth-child(6) {
        grid-column: auto;
    }
    .usm-hp-how-grid {
        grid-template-columns: 1fr;
    }
    .usm-hp-discount {
        grid-template-columns: 1fr;
    }
    .usm-hp-discount-right {
        min-height: 260px;
    }
    .usm-hp-store {
        grid-template-columns: 1fr;
    }
    .usm-hp-store-details {
        padding: 50px 30px;
    }
    .usm-hp-rev-grid {
        grid-template-columns: 1fr;
    }
    .usm-hp-section {
        padding: 60px 24px;
    }
}

/* --- RESPONSIVE: MOBILE --- */
@media (max-width: 640px) {
    .usm-hp-hero-left {
        padding: 40px 0;
    }
    .usm-hp-hero {
        padding: 0 24px;
    }
    .usm-hp-hero-metrics {
        flex-wrap: wrap;
        gap: 28px;
    }
    .usm-hp-cats {
        grid-template-columns: 1fr;
    }
    .usm-hp-cat:nth-child(1) {
        grid-column: auto;
        aspect-ratio: 1.3;
    }
    .usm-hp-tiers {
        flex-direction: column;
    }
    .usm-hp-discount-left {
        padding: 50px 24px;
    }
    .usm-hp-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .usm-hp-newsletter {
        padding: 60px 20px;
    }
    .usm-hp-trust-inner {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }
    .usm-hp-stitle {
        flex-direction: column;
        gap: 16px;
    }
}

.usm-hp-store-map-side iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    .page-header.type14 .navigation:not(.side-megamenu) > ul {
        flex-wrap: unset !important;
    }
}

@media (max-width: 992px) {
    div#minicart-content-wrapper {
        min-height: 400px;
    }
    .minicart-wrapper.minicart-offcanvas .block-minicart {
        background: white;
        height: fit-content;
        width: 100%;
    }
}

a.porto-product-filters-toggle.sidebar-toggle.d-inline-flex.d-lg-none {
    display: none !important;
}
.modes {
    display: none;
}

.minicart-wrapper.minicart-offcanvas .block-minicart {
    width: 420px;
}

.minicart-wrapper .block-minicart .total-count .actions {
    display: none;
}

.box-tocart .field.qty {
    display: none;
}

.product-add-form .box-tocart fieldset.fieldset {
    display: flex;
}

.box-tocart .actions {
    width: 100%;
}

.catalog-product-view .box-tocart .action.tocart {
    padding: 2px 20px;
}

.catalog-product-view .product-addto-links .action.towishlist {
    border-radius: 10px;
    margin-top: -2px;
}

.product-social-links {
    display: none;
}

.prev-next-products {
    margin-right: 0 !important;
}

button#product-updatecart-button {
    padding-top: 0;
}

.catalog-product-view .page-title-wrapper.product .page-title {
    font-size: 19px !important;
}

li.opc-progress-bar-item {
    width: 50%;
}

.opc-progress-bar-item._active > span:before {
    background: #efc114;
}

.authentication-wrapper {
    display: none;
}

fieldset.field.street.admin__control-fields.required legend {
    display: none;
}

select {
    height: 50px !important;
}

input {
    height: 50px !important;
}

form.form.form-login {
    width: 100% !important;
    max-width: 100%;
}

span.field-tooltip-action.action-help {
    position: relative;
    top: 10px;
    right: 10px;
}

label.label {
    margin: 0 !important;
}

input#customer-email {
    width: 100%;
}

li#opc-shipping_method {
    margin-bottom: 30px;
    background: #fafafa;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
    list-style: none;
}