/* ============================================================
   ASSOBAY - Mobile Responsive Fix v9
   SOLO media queries mobile — NON modifica il desktop
   Specificità alta: html body ... per vincere su inline styles
   ============================================================ */

@media (max-width: 768px) {

  /* === GLOBAL === */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  main, #header, #wrapper, #footer, .js-footer {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Kill bullets everywhere */
  html body, html body *, html body section, html body footer {
    list-style: none !important;
    list-style-type: none !important;
  }

  /* === LOGO === */
  html body .logo-section {
    padding: 0.4rem 0 !important;
    gap: 0.2rem !important;
  }
  html body .logo-section img,
  html body .logo-section a img,
  html body .logo-section .logo.img-fluid {
    max-width: 140px !important;
    height: 36px !important;
    width: auto !important;
  }

  /* === DONATION BADGE === */
  html body .donation-badge {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.65rem !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }
  html body .donation-icon { font-size: 0.85rem !important; }
  html body .donation-percentage { font-size: 0.85rem !important; }

  /* === NAVIGATION CONTAINER === */
  html body .navigation-container {
    padding: 0.3rem 0.5rem !important;
    gap: 0.3rem !important;
    background: #f8fafc !important;
  }

  /* ============================================================
     SHOPPING MODE → BOTTONI FLAT PREMIUM
     ============================================================ */
  html body .cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
  }
  html body .modern-card {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  html body .modern-card:hover { transform: none !important; }

  html body .navigation-container .card-image-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  html body .navigation-container .card-image { display: none !important; }
  html body .navigation-container .card-description { display: none !important; }

  html body .navigation-container .card-title {
    position: relative !important;
    background: #1e293b !important;
    backdrop-filter: none !important;
    border: 1px solid #475569 !important;
    border-radius: 10px !important;
    padding: 0.7rem 0.5rem !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-shadow: none !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
  }

  /* ATTIVO badge */
  html body .navigation-container .card-active-badge,
  html body .navigation-container .card-image-container .card-active-badge {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-block !important;
    background: #fbbf24 !important;
    color: #000 !important;
    padding: 0.08rem 0.35rem !important;
    border-radius: 3px !important;
    font-size: 0.45rem !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    animation: none !important;
    z-index: 10 !important;
    line-height: 1.3 !important;
  }

  /* Active mode green button (CSS :has) */
  html body .navigation-container .card-image-container:has(.card-active-badge) .card-title {
    background: #0d7549 !important;
    border-color: #0d7549 !important;
    color: #fff !important;
  }
  /* JS fallback .mode-active */
  html body .navigation-container .modern-card.mode-active .card-title {
    background: #0d7549 !important;
    border-color: #0d7549 !important;
    color: #fff !important;
  }

  html body .modern-card:active .card-title { opacity: 0.85 !important; }
  html body .modern-card:hover .card-title { transform: none !important; }

  /* === NAV TOP BAR === */
  html body .nav-top-bar {
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body .nav-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0.25rem 0.3rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body .nav-container > div:first-child {
    flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important;
  }
  html body .nav-container > div:last-child {
    flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important;
  }
  html body .nav-item {
    padding: 0 0.15rem !important; flex-shrink: 1 !important;
  }
  html body .nav-item .js-nav-exchange { display: none !important; }
  html body .nav-item > div[style*="inline-flex"] {
    padding: 0.1rem 0.3rem !important; border-radius: 6px !important;
  }
  html body .nav-item > div[style*="inline-flex"] span { font-size: 0.6rem !important; }
  html body .nav-text { display: none !important; }
  html body .user-name-text { display: none !important; }
  html body .nav-item .dropdown-toggle svg { display: none !important; }
  html body .nav-item-border { border: none !important; }
  html body .nav-item svg { width: 0.95rem !important; height: 0.95rem !important; }
  html body .cart-icon-container { margin-right: 0 !important; }
  html body .nav-container > div:first-child span[style*="0.65rem"] {
    display: none !important;
  }

  /* === BARRA VERDE === */
  html body #ps_categorymenu {
    width: 100% !important; max-width: 100vw !important;
    overflow: hidden !important; padding: 0 !important; box-sizing: border-box !important;
  }
  html body #ps_categorymenu .main-container {
    width: 100% !important; max-width: 100% !important;
    padding: 0.25rem 0.3rem !important; overflow: hidden !important;
    box-sizing: border-box !important; flex-wrap: nowrap !important; gap: 0.2rem !important;
  }
  html body .categories-dropdown { margin-right: 0.2rem !important; flex-shrink: 0 !important; }
  html body .dropdown-toggle {
    min-width: 75px !important; max-width: 90px !important;
    padding: 0.2rem 0.35rem !important; font-size: 0.65rem !important;
  }
  html body .featured-categories {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    gap: 0.25rem !important; flex: 1 !important; min-width: 0 !important;
  }
  html body .featured-categories::-webkit-scrollbar { display: none !important; }
  html body .featured-category-wrapper { flex-shrink: 0 !important; }
  html body .featured-category {
    font-size: 0.6rem !important; white-space: nowrap !important;
    padding: 0.15rem 0.35rem !important; display: inline-block !important;
  }

  /* === CAROUSEL — full bleed === */
  html body #carousel-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-0.5rem) !important;
    margin-right: calc(-0.5rem) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  html body #carousel-banner > div,
  html body #carousel-banner > .relative {
    padding: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  html body .banner-container {
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .carousel-visible-wrapper {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  html body .carousel-items {
    width: 100% !important;
  }
  html body .carousel-item {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  html body .carousel-item a {
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  html body .carousel-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }
  html body .carousel-btn,
  html body #carousel-banner button {
    display: none !important;
  }

  /* === CONTAINERS === */
  html body #wrapper {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
  }
  html body .container {
    padding-left: 0.5rem !important; padding-right: 0.5rem !important;
    max-width: 100% !important; box-sizing: border-box !important;
  }
  html body #content-wrapper { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  html body .page-home, html body #content {
    max-width: 100vw !important; overflow-x: hidden !important;
    width: 100% !important; box-sizing: border-box !important;
  }
  html body .row { margin-left: 0 !important; margin-right: 0 !important; }
  html body .header-top { padding: 0 !important; width: 100% !important; }
  html body .header-top .container { padding: 0 !important; max-width: 100% !important; }
  html body .header-top .row { margin: 0 !important; width: 100% !important; }
  html body .breakout-safe { max-width: 100vw !important; overflow-x: hidden !important; }
  html body .content-wide { max-width: 100% !important; padding: 0 0.5rem !important; }
  html body #footer { max-width: 100vw !important; overflow-x: hidden !important; }
  html body .products .product-miniature { max-width: 100% !important; overflow: hidden !important; }

  /* MODALS */
  html body #assobay-popup .max-w-lg { max-width: calc(100vw - 2rem) !important; }
  html body #nav-exchange-modal > div:nth-child(2) > div {
    width: 100vw !important; height: 100vh !important; border-radius: 0 !important;
  }

  /* ============================================================
     PRODUCT PAGE — MOBILE LAYOUT
     Stack columns vertically, full-width image, compact info
     Overrides inline <style> in catalog/product.tpl
     ============================================================ */

  /* Product row: stack vertically */
  html body.page-product section#main > .row,
  html body.page-product section#main > .row[style*="gap"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Column 1: Image — full width */
  html body.page-product .col-md-4.image-section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    padding: 0.75rem !important;
    border-radius: 10px !important;
    order: 1 !important;
  }

  /* Hide vertical "IMMAGINE ILLUSTRATIVA" label on mobile */
  html body.page-product .vertical-label {
    display: none !important;
  }

  /* Product image: big and centered */
  html body.page-product .product-images-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.page-product .product-images-section img,
  html body.page-product .product-cover img,
  html body.page-product .js-qv-product-cover {
    max-height: 280px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
  html body.page-product .product-cover {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Thumbnails row: FORCE horizontal scroll on mobile */
  /* Override product.tpl inline: .product-images-section .js-qv-mask { display: none } */
  html body.page-product .product-images-section .js-qv-mask,
  html body.page-product .product-images-section .js-qv-mask.mask {
    display: block !important;
    margin-top: 0.5rem !important;
  }
  /* Override product-cover-thumbnails.tpl inline: flex-direction: column */
  html body.page-product .js-qv-mask ul.product-images.js-qv-product-images,
  html body.page-product .product-images-section ul.product-images,
  html body.page-product ul.product-images.js-qv-product-images {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: #ccc #f1f1f1 !important;
  }
  /* Visible scrollbar for thumbnails */
  html body.page-product ul.product-images.js-qv-product-images::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
  }
  html body.page-product ul.product-images.js-qv-product-images::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
  }
  html body.page-product ul.product-images.js-qv-product-images::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
  }
  /* Override product-cover-thumbnails.tpl inline: margin: 5px auto */
  html body.page-product .js-qv-mask li.thumb-container.js-thumb-container,
  html body.page-product li.thumb-container.js-thumb-container {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  html body.page-product .js-qv-mask .thumb-container img,
  html body.page-product li.thumb-container.js-thumb-container img {
    width: 100% !important;
    height: 100% !important;
    max-height: 60px !important;
    object-fit: contain !important;
  }
  /* Hide old scroll-box-arrows, keep nav arrows from template hidden on mobile */
  html body.page-product .scroll-box-arrows,
  html body.page-product .thumbnails-nav-arrows {
    display: none !important;
  }
  /* Column 2: Title + Info — full width */
  html body.page-product section#main > .row > .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    padding: 0.75rem !important;
    border: none !important;
    order: 2 !important;
  }

  /* Product title */
  html body.page-product .col-md-5 h1.h1 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Rating container compact */
  html body.page-product .product-rating-container {
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html body.page-product .stars-container .star {
    font-size: 14px !important;
  }
  html body.page-product .rating-text,
  html body.page-product .review-count {
    font-size: 0.75rem !important;
  }
  html body.page-product .rating-actions {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  html body.page-product .rating-actions .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
  }

  /* Description compact */
  html body.page-product .product-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    max-height: 6em !important;
  }
  html body.page-product .read-more-link {
    font-size: 0.8rem !important;
  }

  /* Supplier/vendor section */
  html body.page-product .supplier-info-section {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  html body.page-product .vendor-3col-layout {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  html body.page-product .vendor-col-info {
    min-width: 0 !important;
    width: 100% !important;
  }
  html body.page-product .supplier-info-section h6 {
    font-size: 0.8rem !important;
  }
  html body.page-product .supplier-details > div {
    font-size: 0.75rem !important;
  }

  /* Certifications compact */
  html body.page-product .product-certifications {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  html body.page-product .product-certifications h6 {
    font-size: 0.8rem !important;
  }
  html body.page-product .product-certifications img {
    height: 40px !important;
  }

  /* Social sharing compact */
  html body.page-product .social-sharing-container {
    margin-bottom: 0.5rem !important;
  }

  /* Column 3: Price box — full width */
  html body.page-product section#main > .row > .col-md-3 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem !important;
    margin-top: 0 !important;
    order: 3 !important;
    border-radius: 10px !important;
  }

  /* Price breakdown box */
  html body.page-product .price-breakdown-box {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body.page-product .price-line span:first-child {
    font-size: 0.8rem !important;
  }
  html body.page-product .price-line span:last-child {
    font-size: 0.9rem !important;
  }
  html body.page-product #variant-total-display {
    font-size: 1.1rem !important;
  }

  /* Shipping selector compact */
  html body.page-product .shipping-selector-standalone {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body.page-product .shipping-option {
    padding: 0.5rem !important;
  }

  /* Add to cart button: prominent */
  html body.page-product .product-actions .btn,
  html body.page-product .add-to-cart {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }

  /* Quantity selector compact */
  html body.page-product .product-quantity {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  html body.page-product .qty {
    width: 100% !important;
    max-width: 120px !important;
  }
  html body.page-product .input-group.bootstrap-touchspin {
    max-width: 120px !important;
  }

  /* Product tabs below */
  html body.page-product .tabs {
    margin-top: 0.5rem !important;
  }
  html body.page-product .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  html body.page-product .nav-tabs::-webkit-scrollbar { display: none !important; }
  html body.page-product .nav-tabs .nav-link {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    padding: 0.4rem 0.75rem !important;
  }
  html body.page-product .tab-content {
    padding: 0.75rem !important;
    font-size: 0.85rem !important;
  }

  /* Product details section */
  html body.page-product .product-information,
  html body.page-product #product-details {
    padding: 0.5rem !important;
  }

  /* Breadcrumb compact */
  html body.page-product .breadcrumb {
    font-size: 0.75rem !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 0.25rem !important;
  }
  html body.page-product .breadcrumb li {
    display: inline !important;
  }

  /* Product modal (image zoom) */
  html body.page-product #product-modal .modal-dialog {
    max-width: 100vw !important;
    margin: 0 !important;
  }
  html body.page-product #product-modal .modal-content {
    border-radius: 0 !important;
    height: 100vh !important;
  }

  /* Address dropdown on mobile */
  html body.page-product #address-dropdown {
    min-width: auto !important;
    width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 50vh !important;
  }

  /* === HIDE SCROLLBAR === */
  html, html body {
    scrollbar-width: none !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  /* =============================================
     CHECKOUT PAGE (/it/order) - MOBILE FIXES
     ============================================= */

  /* 1. Step titles: reduce size on mobile */
  html body#checkout .checkout-step .step-title.h3,
  html body#checkout .checkout-step h1.step-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    padding: 0.6rem 0.8rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  html body#checkout .checkout-step .step-title .step-number {
    font-size: 1rem !important;
    min-width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
  }
  html body#checkout .checkout-step .step-title .step-edit {
    margin-left: auto !important;
  }
  html body#checkout .checkout-step .step-title .material-icons {
    font-size: 1.1rem !important;
  }

  /* 2. "Vedi/Nascondi" toggle button: push to far right inside step-title flex row */
  html body#checkout .checkout-step .step-title .step-view-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  /* 3. Checkout general mobile improvements */
  html body#checkout section#content {
    padding: 0 0.5rem !important;
  }
  html body#checkout .checkout-step {
    margin-bottom: 0.5rem !important;
  }
}

/* === EXTRA SMALL === */
@media (max-width: 400px) {
  html body .dropdown-toggle { min-width: 65px !important; font-size: 0.6rem !important; }
  html body .featured-category { font-size: 0.55rem !important; padding: 0.12rem 0.25rem !important; }
  html body .navigation-container .card-title { font-size: 0.7rem !important; padding: 0.6rem 0.4rem !important; }
  html body .logo-section img, html body .logo-section a img {
    max-width: 110px !important; height: 30px !important;
  }
}

/* ============================================================
   VENDOR PANEL FORMS (addproduct / editproduct / products)
   Body id: module-ps_vendorpanel-products
   Compatta spacing verticale, tabs, form fields, bottoni.
   SOLO mobile ≤767px — desktop intoccato.
   ============================================================ */
@media (max-width: 767px) {

  /* Padding del main container ridotto (era p-6 = 24px → 8px) */
  html body[id^="module-ps_vendorpanel"] main.p-6,
  html body[id^="module-ps_vendorpanel"] main.md\:w-3\/4 {
    padding: 0.5rem !important;
    padding-top: 3.75rem !important; /* spazio per hamburger */
  }

  /* Card header/body padding ridotto */
  html body[id^="module-ps_vendorpanel"] .card-header,
  html body[id^="module-ps_vendorpanel"] .card-body {
    padding: 0.5rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .card-header h3 {
    font-size: 1rem !important;
    margin: 0 !important;
  }

  /* Tabs di navigazione interna: scroll orizzontale invece di wrap */
  html body[id^="module-ps_vendorpanel"] #product-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.6rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.4rem !important;
    scrollbar-width: none !important;
  }
  html body[id^="module-ps_vendorpanel"] #product-tabs::-webkit-scrollbar { display: none !important; }
  html body[id^="module-ps_vendorpanel"] #product-tabs .tab-link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
  }
  html body[id^="module-ps_vendorpanel"] #product-tabs .tab-link.text-green-600,
  html body[id^="module-ps_vendorpanel"] #product-tabs .tab-link.font-bold {
    background: #16a34a !important;
    color: #fff !important;
  }

  /* Form spacing: space-y-6 (1.5rem) → space-y-3 (0.75rem) */
  html body[id^="module-ps_vendorpanel"] #product-form.space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }

  /* Form group / label: spacing ridotto */
  html body[id^="module-ps_vendorpanel"] .form-group {
    margin-bottom: 0.6rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .form-group label,
  html body[id^="module-ps_vendorpanel"] .form-control-label,
  html body[id^="module-ps_vendorpanel"] form label {
    font-size: 0.85rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* Inputs e textarea: padding e font-size leggibile */
  html body[id^="module-ps_vendorpanel"] .form-control,
  html body[id^="module-ps_vendorpanel"] input[type="text"],
  html body[id^="module-ps_vendorpanel"] input[type="number"],
  html body[id^="module-ps_vendorpanel"] input[type="email"],
  html body[id^="module-ps_vendorpanel"] select,
  html body[id^="module-ps_vendorpanel"] textarea {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.9rem !important; /* ≥16px su iOS evita zoom */
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* iOS evita zoom-in su focus se font ≥ 16px */
  html body[id^="module-ps_vendorpanel"] input,
  html body[id^="module-ps_vendorpanel"] select,
  html body[id^="module-ps_vendorpanel"] textarea {
    font-size: 16px !important;
  }
  html body[id^="module-ps_vendorpanel"] textarea {
    min-height: 4.5rem !important;
  }

  /* Sezioni form interne (.bg-white card style) padding ridotto */
  html body[id^="module-ps_vendorpanel"] .section-content .bg-white,
  html body[id^="module-ps_vendorpanel"] .section-content > div {
    padding: 0.6rem !important;
  }

  /* Generic spacing kill: gap-4/6 nei flex internal → gap-2 */
  html body[id^="module-ps_vendorpanel"] .section-content .gap-4,
  html body[id^="module-ps_vendorpanel"] .section-content .gap-6 {
    gap: 0.5rem !important;
  }

  /* Heading ridotti dentro le sezioni */
  html body[id^="module-ps_vendorpanel"] .section-content h2,
  html body[id^="module-ps_vendorpanel"] .section-content h3 {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.3rem !important;
  }

  /* Bottone "Genera descrizione AI" e bottoni primari: full width comodo da toccare */
  html body[id^="module-ps_vendorpanel"] .section-content button:not(.tab-link),
  html body[id^="module-ps_vendorpanel"] .section-content .btn,
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper input[type="submit"],
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper button {
    min-height: 40px !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper {
    margin-top: 1rem !important;
  }
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper input[type="submit"],
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper button {
    width: 100% !important;
  }

  /* Tabella varianti: scroll orizzontale, NON deformare layout pagina */
  html body[id^="module-ps_vendorpanel"] #variants-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  html body[id^="module-ps_vendorpanel"] #variants-table-body {
    /* Mantieni min-w grande perché tabella con molte colonne, ma è in wrapper scrollable */
    font-size: 0.8rem !important;
  }

  /* Toolbar / filtri prodotti: gap e padding ridotti */
  html body[id^="module-ps_vendorpanel"] .bg-white.p-4 {
    padding: 0.6rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .mb-4 {
    margin-bottom: 0.5rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .mt-6 {
    margin-top: 0.75rem !important;
  }

  /* Layout principale: stack non-flex su mobile (sidebar è position:fixed da dashboard_base) */
  html body[id^="module-ps_vendorpanel"] .flex.flex-col.md\:flex-row {
    display: block !important;
  }

  /* ============================================================
     VENDOR PANEL FORMS - FIX v2 (addproduct sections)
     Fix specifici per headings/step/padding troppo grandi su mobile
     ============================================================ */

  /* Card interne con p-6: padding ridotto (tags, variants cards) */
  html body[id^="module-ps_vendorpanel"] .section-content .bg-white.p-6,
  html body[id^="module-ps_vendorpanel"] .section-content .p-6 {
    padding: 0.75rem !important;
  }

  /* Heading text-3xl / text-2xl dentro section-content: scala giù */
  html body[id^="module-ps_vendorpanel"] .section-content .text-3xl {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .text-2xl {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .text-xl {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .text-lg {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }

  /* Margini verticali grandi (mb-8, mb-6, mt-8) nelle sezioni: ridotti */
  html body[id^="module-ps_vendorpanel"] .section-content .mb-8 {
    margin-bottom: 0.75rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .mt-8 {
    margin-top: 0.75rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .my-8 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .section-content .py-8 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Step circles (shipping tab) - riduci dimensioni e connettori */
  html body[id^="module-ps_vendorpanel"] #section-shipping .w-10.h-10.rounded-full {
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }
  html body[id^="module-ps_vendorpanel"] #section-shipping .flex.items-center.justify-center.max-w-2xl {
    max-width: 100% !important;
    padding: 0 0.25rem !important;
  }
  html body[id^="module-ps_vendorpanel"] #section-shipping .h-1.mx-4 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  /* Testi tipo "scegli la modalità..." e descrizioni: più compatti e senza wrap verticale aggressivo */
  html body[id^="module-ps_vendorpanel"] .section-content p.text-center,
  html body[id^="module-ps_vendorpanel"] .section-content .text-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card di scelta (Formato unico, Varianti, Solo Ritiro, etc.): padding ridotto */
  html body[id^="module-ps_vendorpanel"] .section-content .rounded-lg.shadow,
  html body[id^="module-ps_vendorpanel"] .section-content .rounded-xl.shadow,
  html body[id^="module-ps_vendorpanel"] .section-content [class*="rounded-"][class*="shadow"] {
    padding: 0.5rem !important;
  }

  /* Grid grande di scelte: 1 colonna su mobile (già lo fa tailwind, ma per sicurezza) */
  html body[id^="module-ps_vendorpanel"] .section-content .grid.grid-cols-1.md\:grid-cols-2,
  html body[id^="module-ps_vendorpanel"] .section-content .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 0.5rem !important;
  }

  /* AI description button: mantieni leggibile ma padding compatto */
  html body[id^="module-ps_vendorpanel"] .section-content button.bg-gradient-to-r,
  html body[id^="module-ps_vendorpanel"] .section-content [class*="from-purple"],
  html body[id^="module-ps_vendorpanel"] .section-content [class*="to-indigo"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* Submit button wrapper: padding a destra per evitare clipping */
  html body[id^="module-ps_vendorpanel"] #submit-product-wrapper {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Tag popolari "Caricamento..." box: compatto */
  html body[id^="module-ps_vendorpanel"] #popular-tags-loading,
  html body[id^="module-ps_vendorpanel"] #popular-tags-container {
    padding: 0.5rem !important;
  }

  /* ============================================================
     VENDOR PANEL FORMS - FIX v3
     Tabs non troncati, cards Prezzi full-width, icone Spedizione ridotte
     ============================================================ */

  /* Tabs: assicuro che tutti 4 entrino senza troncamento - padding/font ancora più compatti */
  html body[id^="module-ps_vendorpanel"] #product-tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== PREZZI TAB - .choice-card (Formato Unico / Varianti) =====
     Le card hanno width:160px hardcoded: forzo full-width su mobile e stack verticale */
  /* Il grandparent ha .items-center/.justify-center che limita il parent a content-width:
     forzo il parent e il grandparent a width 100% */
  html body[id^="module-ps_vendorpanel"] #section-variants .flex.flex-col.items-center {
    align-items: stretch !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  html body[id^="module-ps_vendorpanel"] #section-variants .flex.gap-8 {
    gap: 0.6rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  /* .choice-card contiene SOLO una <img> che include testo+illustrazione
     Quindi rendo la card full-width e l'immagine grande per leggibilità */
  html body[id^="module-ps_vendorpanel"] #section-variants .choice-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0.4rem !important;
    display: block !important;
    text-align: center !important;
  }
  /* Immagine: grande, occupa gran parte della card per essere leggibile */
  html body[id^="module-ps_vendorpanel"] #section-variants .choice-card img {
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ===== SPEDIZIONE TAB - Icone gradient giganti (w-20 h-20 = 80px) =====
     Riduco a 44px per recuperare spazio verticale */
  html body[id^="module-ps_vendorpanel"] #section-shipping .w-20.h-20 {
    width: 2.75rem !important;   /* 44px */
    height: 2.75rem !important;
    margin-bottom: 0.4rem !important;
    border-radius: 0.75rem !important;
  }
  /* Icone SVG interne ridotte in proporzione */
  html body[id^="module-ps_vendorpanel"] #section-shipping .w-20.h-20 svg,
  html body[id^="module-ps_vendorpanel"] #section-shipping .w-20.h-20 i,
  html body[id^="module-ps_vendorpanel"] #section-shipping .w-20.h-20 .material-icons {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1.5rem !important;
  }

  /* Shipping cards: la card interna .text-center contiene tutto.
     Trasformo .text-center in flex row per layout orizzontale (icona sx, contenuto dx) */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option {
    padding: 0.75rem 2.5rem 0.75rem 0.75rem !important; /* padding-right per radio assoluto */
    margin-bottom: 0.5rem !important;
  }
  /* .text-center diventa grid: icona a sx (auto), contenuto a dx (1fr, flex-column) */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "icon title"
      "icon desc"
      "icon badge" !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.15rem 0.75rem !important;
  }
  /* Icona in colonna sinistra, span 3 righe */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center > .w-20 {
    grid-area: icon !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }
  /* Titolo h3: compatto */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center > h3 {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  /* Descrizione p: compatta */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center > p {
    grid-area: desc !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    color: #6b7280 !important;
  }
  /* Badge (Gratuito, Flessibile, Professional): dimensione ridotta, inline-flex naturale */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center > div:not(.w-20) {
    grid-area: badge !important;
    margin: 0 !important;
    justify-self: start !important;
    padding: 0.15rem 0.5rem !important;
    font-size: 0.7rem !important;
  }
  /* Nasconde la lista UL dettagli extra su mobile per risparmiare spazio */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > .text-center > ul {
    display: none !important;
  }
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option h3,
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .text-xl,
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .text-lg {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option p {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }
  /* Blocco interno "contenuto" della card (tutto tranne icona e radio) */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .flex-1,
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option > div:not(.w-20):not(.rounded-full) {
    flex: 1 !important;
  }

  /* Badge "Gratuito", "Flessibile": più piccoli */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .rounded-full,
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .badge {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.5rem !important;
  }
  /* Ma NON ridurre il cerchio del radio/checkbox a destra della card (w-6 h-6 o simili) */
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option .w-6.h-6,
  html body[id^="module-ps_vendorpanel"] #section-shipping .shipping-mode-option [class*="border-2"].rounded-full {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
  }

  /* Step indicators (1-2-3): più piccoli e compatti, la barra di collegamento ridotta */
  html body[id^="module-ps_vendorpanel"] #section-shipping .flex.items-center.justify-center .h-1 {
    height: 2px !important;
  }

  /* ============================================================
     PRESENTA ATTIVITÀ - (/ps_vendorpanel/presentattivita)
     Cards "Vendita servizi" / "Vendita prodotti" + banner + info
     ============================================================ */

  /* Banner header viola compatto */
  html body[id^="module-ps_vendorpanel"] .bg-gradient-to-r.from-purple-600 {
    padding: 0.6rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.5rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-gradient-to-r.from-purple-600 h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.15rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-gradient-to-r.from-purple-600 p {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-gradient-to-r.from-purple-600 .material-icons {
    font-size: 1.5rem !important;
  }

  /* Grid cards Servizi/Prodotti: gap ridotto */
  html body[id^="module-ps_vendorpanel"] .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
    gap: 0.6rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Service-type-card: layout orizzontale compatto (icona sx + testo dx) */
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    border-width: 2px !important;
  }
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content .flex.flex-col {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "icon content radio" !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-align: left !important;
  }
  /* Blocco interno "icon + h3 + p" wrappati in un <div> */
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content .flex.flex-col > div:first-child {
    display: contents !important;
  }
  /* Icona purple grande -> piccola a sinistra */
  html body[id^="module-ps_vendorpanel"] .service-type-card .material-icons.text-6xl,
  html body[id^="module-ps_vendorpanel"] .service-type-card .material-icons {
    grid-area: icon !important;
    font-size: 2rem !important;
    margin: 0 !important;
    color: #7c3aed !important;
  }
  /* Titolo + descrizione stacked al centro */
  html body[id^="module-ps_vendorpanel"] .service-type-card h3 {
    grid-area: content !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  html body[id^="module-ps_vendorpanel"] .service-type-card p {
    grid-area: content !important;
    align-self: end !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    /* Tronca dopo 3 righe per risparmiare spazio */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* Radio circle a destra */
  html body[id^="module-ps_vendorpanel"] .service-type-card input[type="radio"] + .card-content .rounded-full,
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content [class*="rounded-full"][class*="border"] {
    grid-area: radio !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
  }

  /* Poiché grid ha solo 1 riga "icon content radio" ma h3 e p sono entrambi in content:
     meglio riorganizzare con una sottogriglia di 2 righe */
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content .flex.flex-col {
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "icon title  radio"
      "icon desc   radio" !important;
  }
  html body[id^="module-ps_vendorpanel"] .service-type-card .material-icons {
    grid-area: icon !important;
    align-self: center !important;
  }
  html body[id^="module-ps_vendorpanel"] .service-type-card h3 {
    grid-area: title !important;
    align-self: end !important;
  }
  html body[id^="module-ps_vendorpanel"] .service-type-card p {
    grid-area: desc !important;
    align-self: start !important;
  }

  /* Nasconde l'effetto hover:scale che su mobile non serve e causa jumpy layout */
  html body[id^="module-ps_vendorpanel"] .service-type-card .card-content {
    transform: none !important;
  }

  /* Bottone "Continua" ben visibile, non troppo grande */
  html body[id^="module-ps_vendorpanel"] button.bg-gradient-to-r.from-purple-600,
  html body[id^="module-ps_vendorpanel"] .bg-gradient-to-r.from-purple-600.hover\:from-purple-700 {
    padding: 0.5rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  /* Box "Come funziona?" compatto */
  html body[id^="module-ps_vendorpanel"] .bg-white.rounded-xl.p-6.border-l-4 {
    padding: 0.75rem 0.75rem 0.75rem 1rem !important;
    margin-top: 1rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-white.rounded-xl.p-6.border-l-4 h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-white.rounded-xl.p-6.border-l-4 p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }
  html body[id^="module-ps_vendorpanel"] .bg-white.rounded-xl.p-6.border-l-4 .material-icons {
    font-size: 1.25rem !important;
  }

  /* ============================================================
     v10 — SERVICECARD (lista card servizi/prodotti)
     Pagina: /it/module/ps_vendorpanel/servicecard
     ============================================================ */

  /* Breadcrumb più compatto, tronca il testo lungo in 1-2 righe */
  html body#module-ps_vendorpanel-servicecard nav[class*="flex"][class*="text-sm"] {
    font-size: 0.7rem !important;
    gap: 0.25rem !important;
    line-height: 1.25 !important;
  }
  html body#module-ps_vendorpanel-servicecard nav[class*="flex"][class*="text-sm"] > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body#module-ps_vendorpanel-servicecard .mb-6:has(> nav) {
    margin-bottom: 0.5rem !important;
  }

  /* Hero header compatto (pattern identico a presentattivita) */
  html body#module-ps_vendorpanel-servicecard .bg-gradient-to-r.rounded-xl.mb-6 {
    padding: 0.6rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-gradient-to-r.rounded-xl.mb-6 h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-gradient-to-r.rounded-xl.mb-6 p {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin-top: 0.1rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-gradient-to-r.rounded-xl.mb-6 .material-icons {
    font-size: 1.35rem !important;
    margin-right: 0.4rem !important;
  }

  /* Main: ridurre padding esterno su mobile, lasciando spazio per hamburger fisso */
  html body#module-ps_vendorpanel-servicecard main {
    padding: 0.75rem !important;
    padding-top: 3.5rem !important; /* spazio per hamburger button */
  }

  /* Contenitore lista card: ridurre padding e margini */
  html body#module-ps_vendorpanel-servicecard main > div > .bg-white.rounded-2xl.shadow-xl {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* Heading "Le Tue Card Servizi (N)" */
  html body#module-ps_vendorpanel-servicecard main h2.text-2xl {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
    align-items: center !important;
  }
  html body#module-ps_vendorpanel-servicecard main h2.text-2xl .material-icons {
    font-size: 1.15rem !important;
    margin-right: 0.4rem !important;
  }

  /* Grid lista card: gap ridotto */
  html body#module-ps_vendorpanel-servicecard .grid {
    gap: 0.75rem !important;
  }

  /* Singola card-preview: bordi più sottili, meno padding interno */
  html body#module-ps_vendorpanel-servicecard .card-preview {
    border-radius: 0.6rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .h-48 {
    height: 8rem !important; /* 128px invece di 192px */
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .absolute.top-4.right-4 {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .absolute.top-4.right-4 span {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.55rem !important;
  }

  /* Contenuto card: padding compattato */
  html body#module-ps_vendorpanel-servicecard .card-preview .p-6 {
    padding: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview h3 {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .italic {
    font-size: 0.75rem !important;
    margin-bottom: 0.35rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .line-clamp-3 {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
    -webkit-line-clamp: 2 !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .flex.items-center.space-x-4 {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem !important;
    gap: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .flex.items-center.space-x-4 .material-icons {
    font-size: 0.85rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .bg-purple-50,
  html body#module-ps_vendorpanel-servicecard .card-preview .bg-green-50 {
    padding: 0.4rem 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .bg-purple-50 p,
  html body#module-ps_vendorpanel-servicecard .card-preview .bg-green-50 p {
    font-size: 0.75rem !important;
  }

  /* Bottoni azione card: più compatti */
  html body#module-ps_vendorpanel-servicecard .card-preview .flex.items-center.space-x-2 {
    gap: 0.4rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview .flex.items-center.space-x-2 > * {
    margin-left: 0 !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview button {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .card-preview button .material-icons {
    font-size: 0.9rem !important;
  }

  /* Stato vuoto */
  html body#module-ps_vendorpanel-servicecard .bg-white.rounded-2xl.shadow-xl.p-12 {
    padding: 1.5rem 1rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-white.rounded-2xl.shadow-xl.p-12 .material-icons.text-8xl {
    font-size: 3rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-white.rounded-2xl.shadow-xl.p-12 h3 {
    font-size: 1.05rem !important;
  }
  html body#module-ps_vendorpanel-servicecard .bg-white.rounded-2xl.shadow-xl.p-12 p {
    font-size: 0.8rem !important;
  }

  /* ============================================================
     v10 — MODALE MULTI-STEP (card-modal)
     Applicato solo su mobile, il desktop mantiene layout ricco
     ============================================================ */

  /* Outer modal: usa quasi tutta la viewport */
  html body#module-ps_vendorpanel-servicecard #card-modal {
    padding: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: calc(100vh - 1rem) !important;
    border-radius: 0.75rem !important;
  }

  /* Barra superiore Reset/Chiudi: bottoni compatti */
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gray-100 {
    padding: 0.4rem 0.6rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gray-100 button {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gray-100 button .material-icons {
    font-size: 0.95rem !important;
    margin-right: 0.25rem !important;
  }

  /* Header gradient progress: compatto */
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gradient-to-r {
    padding: 0.75rem !important;
    top: 44px !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gradient-to-r h2 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
  }
  /* Step indicators: cerchi più piccoli, separatori stretti */
  html body#module-ps_vendorpanel-servicecard #card-modal .step-indicator > div:first-child {
    width: 1.4rem !important;
    height: 1.4rem !important;
    font-size: 0.7rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal .step-indicator {
    gap: 0 !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal > div > .bg-gradient-to-r .flex-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    height: 2px !important;
  }

  /* Form: niente scroll orizzontale, altezza generosa */
  html body#module-ps_vendorpanel-servicecard #card-form {
    padding: 0.75rem !important;
    max-height: calc(100vh - 16rem) !important;
    overflow-x: hidden !important;
  }
  /* Tutti i figli flex dentro il form: min-width 0 impedisce overflow */
  html body#module-ps_vendorpanel-servicecard #card-form .flex > * {
    min-width: 0 !important;
  }
  /* Box blu "Auto-compila da sito web" e viola "Genera con AI": stack verticale */
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl {
    padding: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex.items-start.space-x-3 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex.items-start.space-x-3 > * {
    margin-left: 0 !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex-shrink-0 {
    width: auto !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .material-icons {
    font-size: 1.8rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl svg.w-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl h4 {
    font-size: 0.85rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  /* La riga input URL + Importa: stacking verticale per evitare overflow */
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex.gap-2 {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex.gap-2 input {
    width: 100% !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .border-2.rounded-xl .flex.gap-2 button {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
  }

  /* Headings degli step */
  html body#module-ps_vendorpanel-servicecard #card-form .form-step h3 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form .form-step h3 .material-icons {
    font-size: 1.15rem !important;
  }

  /* Input e textarea: padding ridotto */
  html body#module-ps_vendorpanel-servicecard #card-form input[type="text"],
  html body#module-ps_vendorpanel-servicecard #card-form input[type="url"],
  html body#module-ps_vendorpanel-servicecard #card-form input[type="number"],
  html body#module-ps_vendorpanel-servicecard #card-form input[type="email"],
  html body#module-ps_vendorpanel-servicecard #card-form input[type="tel"],
  html body#module-ps_vendorpanel-servicecard #card-form select,
  html body#module-ps_vendorpanel-servicecard #card-form textarea {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.85rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-form label {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
    text-align: left !important; /* override theme-b2eed723.css che allinea a destra */
  }

  /* Barra navigazione inferiore (Indietro / Passo N di 5 / Avanti) */
  html body#module-ps_vendorpanel-servicecard #card-modal .flex.justify-between.items-center.bg-gray-50,
  html body#module-ps_vendorpanel-servicecard #card-modal > div > div:last-child {
    padding: 0.5rem 0.6rem !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal button#prev-btn,
  html body#module-ps_vendorpanel-servicecard #card-modal button#next-btn,
  html body#module-ps_vendorpanel-servicecard #card-modal button[id*="prev"],
  html body#module-ps_vendorpanel-servicecard #card-modal button[id*="next"],
  html body#module-ps_vendorpanel-servicecard #card-modal button[id*="submit"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    min-width: 0 !important;
  }
  html body#module-ps_vendorpanel-servicecard #card-modal button[id*="prev"] .material-icons,
  html body#module-ps_vendorpanel-servicecard #card-modal button[id*="next"] .material-icons {
    font-size: 1rem !important;
  }

  /* Anteprima (step 5) e tutte le card preview interne */
  html body#module-ps_vendorpanel-servicecard #card-form .rounded-xl.shadow {
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================================
   v11 - Mobile optimizations for Loyalty Bonus page
   Target: body#module-ps_vendorpanel-loyaltybonus
   Rule: mobile only (max-width: 768px), never affect desktop,
         reduce vertical waste, no horizontal scroll.
   ============================================================ */
@media (max-width: 768px) {

  /* Main content: ridurre pt-20 (80px) per recuperare spazio verticale,
     lasciando comunque spazio all'hamburger fixed */
  html body#module-ps_vendorpanel-loyaltybonus main {
    padding: 0.75rem !important;
    padding-top: 3.5rem !important;
    overflow-x: hidden !important;
  }

  /* Header: compattare titoli e spazi */
  html body#module-ps_vendorpanel-loyaltybonus main > .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main h1 + p,
  html body#module-ps_vendorpanel-loyaltybonus main .text-gray-600.mt-1 {
    font-size: 0.8rem !important;
    margin-top: 0.125rem !important;
    line-height: 1.35 !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .mb-6 .inline-flex.items-center.px-3 {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
  }

  /* Card sezioni: ridurre padding e margini */
  html body#module-ps_vendorpanel-loyaltybonus main .bg-white.rounded-xl,
  html body#module-ps_vendorpanel-loyaltybonus main .bg-gradient-to-br.from-indigo-50 {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  /* Icone circolari sezione: più piccole */
  html body#module-ps_vendorpanel-loyaltybonus main .w-10.h-10.rounded-full {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .w-10.h-10.rounded-full .material-icons {
    font-size: 1rem !important;
  }

  /* Titoli sezione h2 e paragrafi */
  html body#module-ps_vendorpanel-loyaltybonus main h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .text-gray-600,
  html body#module-ps_vendorpanel-loyaltybonus main .text-gray-700 {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .text-gray-500.italic {
    font-size: 0.7rem !important;
    margin-top: 0.375rem !important;
  }

  /* Gap più piccolo tra icona e contenuto delle sezioni */
  html body#module-ps_vendorpanel-loyaltybonus main .flex.items-start.gap-3 {
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Bottoni "Vedi Mail" / "Copia link" - più compatti */
  html body#module-ps_vendorpanel-loyaltybonus main button#btn-open-mail-modal,
  html body#module-ps_vendorpanel-loyaltybonus main button#btn-copy-referral-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main button#btn-open-mail-modal .material-icons,
  html body#module-ps_vendorpanel-loyaltybonus main button#btn-copy-referral-link .material-icons {
    font-size: 1rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .mt-4.flex.flex-col {
    margin-top: 0.5rem !important;
    gap: 0.375rem !important;
  }

  /* Lista bullet (Member Fidelity Profile) */
  html body#module-ps_vendorpanel-loyaltybonus main ul.space-y-2 > li {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    gap: 0.375rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main ul.space-y-2 {
    margin-top: 0.25rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main ul.space-y-2 .material-icons {
    font-size: 1rem !important;
  }

  /* Tabella Riepilogo: font più piccolo, padding ridotto */
  html body#module-ps_vendorpanel-loyaltybonus main .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main table {
    font-size: 0.72rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main table th,
  html body#module-ps_vendorpanel-loyaltybonus main table td {
    padding: 0.375rem 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main .overflow-x-auto + p {
    font-size: 0.65rem !important;
    margin-top: 0.5rem !important;
  }

  /* Titolo "Riepilogo Bonus e Punti" */
  html body#module-ps_vendorpanel-loyaltybonus main h2.flex.items-center {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    gap: 0.375rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus main h2.flex.items-center .material-icons {
    font-size: 1.1rem !important;
  }

  /* ===== Modal Mail Pre-compilata ===== */
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal {
    padding: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal > div {
    max-height: 95vh !important;
    border-radius: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal .px-4,
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal .p-4 {
    padding: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal h3 {
    font-size: 0.95rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal label {
    text-align: left !important;
    font-size: 0.7rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal input,
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal textarea {
    font-size: 0.8rem !important;
    padding: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal textarea {
    rows: 8 !important;
    min-height: 10rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal .text-xs {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal #btn-copy-mail-body,
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal #btn-open-mailto {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-loyaltybonus #mail-preview-modal .flex.flex-col.sm\:flex-row {
    gap: 0.375rem !important;
  }
}

/* ============================================================
   v12 - Mobile optimizations for Loyalty Points page
   Target: body#module-ps_vendorpanel-loyaltypoints
   Rule: mobile only (max-width: 768px), never affect desktop,
         reduce vertical waste, NO horizontal scroll.
         Table is transformed into stacked cards (no scroll).
   ============================================================ */
@media (max-width: 768px) {

  /* Main: ridurre pt-20 per recuperare spazio, evitare overflow x */
  html body#module-ps_vendorpanel-loyaltypoints main {
    padding: 0.75rem !important;
    padding-top: 3.5rem !important;
    overflow-x: hidden !important;
  }

  /* Header: compattare */
  html body#module-ps_vendorpanel-loyaltypoints main > .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main h1 + p,
  html body#module-ps_vendorpanel-loyaltypoints main .text-gray-600.mt-1 {
    font-size: 0.78rem !important;
    margin-top: 0.125rem !important;
    line-height: 1.35 !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .mb-6 .inline-flex.items-center.px-3 {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.68rem !important;
  }

  /* Card statistiche principali: più compatte */
  html body#module-ps_vendorpanel-loyaltypoints main .grid.grid-cols-1.md\:grid-cols-3 {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Tutte le card */
  html body#module-ps_vendorpanel-loyaltypoints main .bg-white.rounded-xl,
  html body#module-ps_vendorpanel-loyaltypoints main .bg-assobay.rounded-xl {
    padding: 0.625rem 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  /* Card statistiche: testi più piccoli */
  html body#module-ps_vendorpanel-loyaltypoints main .text-xs.md\:text-sm.text-gray-700.uppercase,
  html body#module-ps_vendorpanel-loyaltypoints main .text-xs.md\:text-sm.uppercase {
    font-size: 0.65rem !important;
    letter-spacing: 0.04em !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .text-2xl.md\:text-3xl.font-black {
    font-size: 1.5rem !important;
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .text-lg.md\:text-xl.font-bold.text-white {
    font-size: 1rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .text-sm.md\:text-base.text-gray-700.font-medium,
  html body#module-ps_vendorpanel-loyaltypoints main .text-sm.md\:text-base.text-white.font-medium {
    font-size: 0.75rem !important;
  }

  /* Cap mensili: barre progresso più sottili e testo compatto */
  html body#module-ps_vendorpanel-loyaltypoints main h3.text-sm.md\:text-base.font-semibold {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    gap: 0.375rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main h3.font-semibold .material-icons {
    font-size: 1rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .w-full.bg-gray-200.rounded-full {
    height: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .w-full.bg-gray-200.rounded-full > div {
    height: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .text-xs.text-gray-500.mt-2 {
    font-size: 0.68rem !important;
    margin-top: 0.375rem !important;
    line-height: 1.3 !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .flex.items-center.justify-between.mb-2 {
    margin-bottom: 0.375rem !important;
  }

  /* Titolo "Dettaglio per tipo di operazione" */
  html body#module-ps_vendorpanel-loyaltypoints main h2.text-lg.md\:text-xl {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
    gap: 0.375rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main h2.text-lg.md\:text-xl .material-icons {
    font-size: 1.1rem !important;
  }

  /* =================================================================
     TABELLA: trasformata in card stack (NO scroll laterale!)
     ================================================================= */
  html body#module-ps_vendorpanel-loyaltypoints main .overflow-x-auto {
    overflow-x: visible !important;
    overflow: visible !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table,
  html body#module-ps_vendorpanel-loyaltypoints main table tbody,
  html body#module-ps_vendorpanel-loyaltypoints main table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table thead {
    display: none !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody {
    border-top: none !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody tr {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.625rem !important;
    margin-bottom: 0.5rem !important;
    background: #fafafa !important;
    overflow: hidden !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td {
    display: inline-block !important;
    padding: 0 !important;
    text-align: left !important;
    vertical-align: baseline !important;
    border: none !important;
  }

  /* Prima colonna: etichetta operazione a blocco, in evidenza */
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td:first-child {
    display: block !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px dashed #e5e7eb !important;
  }

  /* Colonne 2,3,4: distribuite equamente (1/3 ciascuna) tramite float */
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td:nth-child(n+2) {
    float: left !important;
    width: 33.33% !important;
    font-size: 0.72rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td:nth-child(2)::before {
    content: "Mov: ";
    color: #6b7280;
    font-weight: 400;
    margin-right: 0.125rem;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td:nth-child(3)::before {
    content: "Punti: ";
    color: #6b7280;
    font-weight: 400;
    margin-right: 0.125rem;
  }
  html body#module-ps_vendorpanel-loyaltypoints main table tbody td:nth-child(4)::before {
    content: "ASSO: ";
    color: #6b7280;
    font-weight: 400;
    margin-right: 0.125rem;
  }

  /* Divider di tbody non servono nella versione card */
  html body#module-ps_vendorpanel-loyaltypoints main table .divide-y > :not([hidden]) ~ :not([hidden]),
  html body#module-ps_vendorpanel-loyaltypoints main table tbody.divide-y > tr {
    border-top: 1px solid #e5e7eb !important;
  }

  /* Messaggio info "Non hai ancora movimenti" */
  html body#module-ps_vendorpanel-loyaltypoints main .bg-yellow-50 {
    padding: 0.625rem !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  /* Link "Vedi archivio completo" */
  html body#module-ps_vendorpanel-loyaltypoints main .text-right a.inline-flex {
    font-size: 0.78rem !important;
  }
  html body#module-ps_vendorpanel-loyaltypoints main .text-right a.inline-flex .material-icons {
    font-size: 1rem !important;
  }
}

/* ============================================================
   v13 - Mobile optimizations for Loyalty Archive page
   Target: body#module-ps_vendorpanel-loyaltyarchive
   Rule: mobile only (max-width: 768px), never affect desktop,
         NO horizontal scroll, tabella convertita in card stack.
   Tabella: Data | Operazione | Riferimento | Punti | Bonus ASSO
   ============================================================ */
@media (max-width: 768px) {

  /* Main */
  html body#module-ps_vendorpanel-loyaltyarchive main {
    padding: 0.75rem !important;
    padding-top: 3.5rem !important;
    overflow-x: hidden !important;
  }

  /* Header */
  html body#module-ps_vendorpanel-loyaltyarchive main > .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main h1 + p {
    font-size: 0.78rem !important;
    margin-top: 0.125rem !important;
    line-height: 1.35 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main .mb-6 .inline-flex.items-center.px-3 {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.68rem !important;
  }

  /* Form Filtri: più compatto */
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.75rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white .grid {
    gap: 0.5rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white label {
    font-size: 0.7rem !important;
    margin-bottom: 0.125rem !important;
    text-align: left !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white input,
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white select {
    padding: 0.4rem 0.625rem !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white button[type="submit"] {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white button[type="submit"] .material-icons,
  html body#module-ps_vendorpanel-loyaltyarchive main form.bg-white a[title="Reset"] .material-icons {
    font-size: 1rem !important;
  }

  /* Contenitore tabella: niente overflow (è la card esterna) */
  html body#module-ps_vendorpanel-loyaltyarchive main .bg-white.rounded-xl.overflow-hidden {
    padding: 0.5rem !important;
    border-radius: 0.75rem !important;
  }

  /* =================================================================
     TABELLA: convertita in CARD STACK (no scroll laterale!)
     ================================================================= */
  html body#module-ps_vendorpanel-loyaltyarchive main .overflow-x-auto {
    overflow-x: visible !important;
    overflow: visible !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table,
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody,
  html body#module-ps_vendorpanel-loyaltyarchive main table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table thead {
    display: none !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody tr {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.625rem !important;
    margin-bottom: 0.5rem !important;
    background: #fafafa !important;
    overflow: hidden !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td {
    display: block !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
    vertical-align: baseline !important;
  }

  /* Data (colonna 1): piccola, grigia, in alto */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(1) {
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Operazione (colonna 2): in evidenza con il badge */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(2) {
    margin-bottom: 0.25rem !important;
  }
  /* Override regola globale che forza .rounded-full a 2.5rem×2.5rem */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(2) .inline-flex.rounded-full,
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(2) .inline-flex {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    padding: 0.125rem 0.5rem !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(2) p {
    font-size: 0.7rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.3 !important;
  }

  /* Riferimento (colonna 3): piccolo, grigio chiaro */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(3) {
    font-size: 0.7rem !important;
    color: #9ca3af !important;
    padding-bottom: 0.375rem !important;
    margin-bottom: 0.375rem !important;
    border-bottom: 1px dashed #e5e7eb !important;
  }

  /* Punti + ASSO (colonne 4,5): distribuite equamente su una riga */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(4),
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(5) {
    float: left !important;
    width: 50% !important;
    font-size: 0.78rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(4)::before {
    content: "Punti: ";
    color: #6b7280;
    font-weight: 400;
    margin-right: 0.125rem;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody td:nth-child(5)::before {
    content: "ASSO: ";
    color: #6b7280;
    font-weight: 400;
    margin-right: 0.125rem;
  }

  /* Riga vuota (colspan 5 "Nessun movimento"): resta a riga intera */
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody tr td[colspan] {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 0.5rem !important;
    font-size: 0.8rem !important;
    border-bottom: none !important;
    margin: 0 !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main table tbody tr td[colspan] .material-icons {
    font-size: 2rem !important;
  }

  /* Paginazione */
  html body#module-ps_vendorpanel-loyaltyarchive main .flex.items-center.justify-between.mt-4 {
    margin-top: 0.75rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main .flex.items-center.justify-between.mt-4 p {
    font-size: 0.68rem !important;
  }
  html body#module-ps_vendorpanel-loyaltyarchive main .flex.items-center.justify-between.mt-4 a {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   v14 - Mobile optimizations for my-account Referral Card (top block)
   Target: body#my-account main .referral-card
   Rule: mobile only (max-width: 768px), never affect desktop.
   Layout mobile:
     [cerchio piccolo a sx] [ LIVELLO REFERRAL
                              Nome Livello            ]
     ── (stats + progress journey full width) ──
     ── (3 CTA buttons, tutti visibili)        ──
   ============================================================ */
@media (max-width: 768px) {

  /* Card: padding più contenuto */
  html body#my-account main .referral-card {
    padding: 0.875rem !important;
  }

  /* Colonna circle: la trasformo in RIGA (cerchio a sx, testo a dx) */
  html body#my-account main .referral-card .rc-inner > .flex.flex-col > div:first-child {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.875rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Cerchio (sigillo) più piccolo */
  html body#my-account main .referral-card .rc-seal {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
  }
  html body#my-account main .referral-card .rc-seal .rc-seal-letter {
    font-size: 26px !important;
  }
  html body#my-account main .referral-card .rc-seal::before,
  html body#my-account main .referral-card .rc-seal::after {
    width: 10px !important;
    height: 10px !important;
  }

  /* Laurel: nascosto su mobile (era assoluto rispetto alla colonna, ora è riga) */
  html body#my-account main .referral-card .rc-laurel {
    display: none !important;
  }

  /* Gruppo testo (eyebrow + livello): a destra del cerchio, centrato vert. */
  html body#my-account main .referral-card .rc-title-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body#my-account main .referral-card .rc-title-group > p {
    margin-top: 0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  html body#my-account main .referral-card .rc-title-group > h2 {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-top: 0.125rem !important;
    text-align: left !important;
  }

  /* Colonna progress: full width, sotto */
  html body#my-account main .referral-card .rc-inner > .flex.flex-col > div.flex-1 {
    width: 100% !important;
  }
  html body#my-account main .referral-card .rc-inner > .flex.flex-col {
    gap: 0.875rem !important;
  }

  /* Stats (x punti · mancano N) */
  html body#my-account main .referral-card .rc-inner .text-center.text-sm {
    font-size: 0.78rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }

  /* Journey: nodi e rail più piccoli */
  html body#my-account main .referral-card .rc-node-bullet {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
  html body#my-account main .referral-card .rc-journey-rail,
  html body#my-account main .referral-card .rc-journey-marker {
    top: 26px !important;
  }
  html body#my-account main .referral-card .rc-journey-marker {
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    margin-left: -7px !important;
  }
  html body#my-account main .referral-card .rc-node-label {
    font-size: 12px !important;
  }
  html body#my-account main .referral-card .rc-node-range {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }

  /* CTA grid: 3 bottoni devono entrare tutti */
  html body#my-account main .referral-card .rc-cta-grid {
    gap: 6px !important;
    margin-top: 0.875rem !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  html body#my-account main .referral-card .rc-cta {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.72rem !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }
}

/* ============================================================
   FIX HOMEPAGE — Dropdown "Categorie" mobile (23/05/2026)
   Su mobile il dropdown veniva clippato da overflow:hidden di
   <header>, #ps_categorymenu e .main-container. Inoltre era
   posizionato off-screen a sinistra (left:45px → x=-90 in
   viewport 296px).
   Fix: rendiamo overflow:visible i parent SOLO mentre il menu
   è aperto (selettore :has) e riposizioniamo il dropdown.
   Nessun impatto sul desktop.
   ============================================================ */
@media (max-width: 768px) {
  html body header:has(#categories-menu.show),
  html body header:has(#categories-menu.show) #ps_categorymenu,
  html body header:has(#categories-menu.show) #ps_categorymenu .main-container {
    overflow: visible !important;
  }
  html body #ps_categorymenu #categories-menu.dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: calc(100vw - 1rem) !important;
    max-width: 320px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
  }
}