/*
Theme Name: Roma Tech Store
Theme URI: https://mobileaccessories.shop
Author: Roma Tech Store
Author URI: https://mobileaccessories.shop
Description: Tema WordPress leggero per un negozio di accessori computer e mobile con ordini via WhatsApp, senza carrello né checkout. Prodotti gestibili facilmente dal pannello di amministrazione (Custom Post Type "Prodotto").
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: roma-tech-store
Tags: e-commerce, whatsapp, negozio, mobile, accessori
*/

/* ==========================================================================
   0. RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; }

:root{
    --rts-green: #25D366;
    --rts-green-dark: #1EBE5A;
    --rts-dark: #1a1a1a;
    --rts-gray: #666666;
    --rts-light-gray: #f4f5f7;
    --rts-border: #e5e5e5;
    --rts-radius: 10px;
    --rts-max-width: 1280px;
}

html { scroll-behavior: smooth; }

body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--rts-dark);
    background:#ffffff;
    line-height:1.5;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.25; }
p{ margin:0 0 1em; }

.rts-container{
    max-width: var(--rts-max-width);
    margin:0 auto;
    padding:0 20px;
}

.screen-reader-text{
    position:absolute !important;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
}

/* ==========================================================================
   1. TOP BAR
   ========================================================================== */
.rts-topbar{
    background:#111111;
    color:#cfcfcf;
    font-size:13px;
}
.rts-topbar .rts-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:8px;
    padding-bottom:8px;
}
.rts-topbar a{ color:#cfcfcf; }
.rts-topbar a:hover{ color:#ffffff; }
.rts-topbar-links{ display:flex; gap:16px; align-items:center; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.rts-header{
    border-bottom:1px solid var(--rts-border);
    padding:18px 0;
}
.rts-header .rts-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}
.rts-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:800;
    white-space:nowrap;
}
.rts-logo img{ max-height:44px; width:auto; }
.rts-logo .rts-logo-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:8px;
    background:var(--rts-dark);
    color:#fff;
    font-size:18px;
}

.rts-searchform{
    flex:1 1 320px;
    max-width:520px;
    display:flex;
}
.rts-searchform input[type="search"]{
    flex:1;
    padding:10px 14px;
    border:1px solid var(--rts-border);
    border-right:none;
    border-radius:6px 0 0 6px;
    font-size:14px;
    outline:none;
}
.rts-searchform button{
    border:1px solid var(--rts-dark);
    background:var(--rts-dark);
    color:#fff;
    padding:0 16px;
    border-radius:0 6px 6px 0;
    cursor:pointer;
}

.rts-header-actions{ display:flex; align-items:center; gap:18px; }
.rts-header-actions a{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:11px;
    color:var(--rts-dark);
    gap:2px;
}
.rts-header-actions .dashicons{ font-size:22px; width:22px; height:22px; }

/* ==========================================================================
   3. NAV MENU
   ========================================================================== */
.rts-nav{
    background:#fafafa;
    border-bottom:1px solid var(--rts-border);
}
.rts-nav .rts-container{ display:flex; }
.rts-nav ul{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}
.rts-nav ul li a{
    display:block;
    padding:12px 14px;
    font-size:14px;
    font-weight:600;
    color:#333;
    border-bottom:2px solid transparent;
}
.rts-nav ul li a:hover,
.rts-nav ul li.current-cat a,
.rts-nav ul li.current-menu-item a{
    color:var(--rts-green-dark);
    border-bottom-color:var(--rts-green);
}
.rts-menu-toggle{
    display:none;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    padding:10px 0;
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.rts-hero{
    text-align:center;
    padding:48px 20px 32px;
}
.rts-hero h1{ font-size:34px; font-weight:800; }
.rts-hero p{ color:var(--rts-gray); font-size:16px; }

/* ==========================================================================
   5. DELIVERY BANNER
   ========================================================================== */
.rts-banner{
    background:var(--rts-light-gray);
    border-radius:16px;
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 0 36px;
}
.rts-banner h2{ font-size:26px; font-weight:800; margin:0; }
.rts-banner .rts-banner-icon{ font-size:56px; }

/* ==========================================================================
   6. CATEGORY GRID
   ========================================================================== */
.rts-cat-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
    margin-bottom:44px;
}
.rts-cat-card{
    border:1px solid var(--rts-border);
    border-radius:var(--rts-radius);
    padding:22px 10px;
    text-align:center;
    transition:box-shadow .15s ease, transform .15s ease;
}
.rts-cat-card:hover{
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transform:translateY(-2px);
    border-color:var(--rts-green);
}
.rts-cat-card .rts-cat-icon{
    font-size:30px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.rts-cat-card .rts-cat-icon img{ width:34px; height:34px; object-fit:contain; margin:0 auto; }
.rts-cat-card span{ font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }

/* ==========================================================================
   7. PRODUCT GRID / CARDS
   ========================================================================== */
.rts-section-title{
    font-size:22px;
    font-weight:800;
    margin:0 0 20px;
}
.rts-product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:40px;
}
.rts-product-card{
    border:1px solid var(--rts-border);
    border-radius:var(--rts-radius);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#fff;
    transition:box-shadow .15s ease;
}
.rts-product-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.08); }
.rts-product-card .rts-product-thumb{
    aspect-ratio:1/1;
    background:#fafafa;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.rts-product-card .rts-product-thumb img{ width:100%; height:100%; object-fit:cover; }
.rts-product-body{ padding:16px; display:flex; flex-direction:column; flex:1; gap:6px; }
.rts-product-body h3{ font-size:16px; font-weight:700; }
.rts-product-body h3 a{ color:var(--rts-dark); }
.rts-price{ font-size:15px; font-weight:700; }
.rts-availability{ font-size:13px; font-weight:700; }
.rts-availability.in-stock{ color:#1a8a3e; }
.rts-availability.out-stock{ color:#c0392b; }
.rts-delivery-note{ font-size:12.5px; color:var(--rts-gray); }
.rts-desc{ font-size:13px; color:#444; margin:2px 0 0; }
.rts-features{ margin:6px 0 0; padding-left:0; }
.rts-features li{ font-size:12.5px; color:#333; position:relative; padding-left:14px; margin-bottom:3px; }
.rts-features li:before{ content:"•"; position:absolute; left:0; color:var(--rts-green-dark); }
.rts-meta-row{
    display:flex;
    justify-content:space-between;
    font-size:11.5px;
    color:#999;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--rts-border);
}

/* WhatsApp button */
.rts-whatsapp-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--rts-green);
    color:#fff !important;
    font-weight:700;
    font-size:14.5px;
    padding:12px 16px;
    border-radius:8px;
    margin-top:10px;
    transition:background .15s ease;
}
.rts-whatsapp-btn:hover{ background:var(--rts-green-dark); }
.rts-whatsapp-btn svg{ width:18px; height:18px; fill:#fff; flex:none; }

/* ==========================================================================
   8. SINGLE PRODUCT PAGE
   ========================================================================== */
.rts-single-product{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:48px;
    padding:40px 0 60px;
}
.rts-single-gallery-main{
    border:1px solid var(--rts-border);
    border-radius:var(--rts-radius);
    overflow:hidden;
    aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    background:#fafafa;
}
.rts-single-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.rts-single-gallery-thumbs{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.rts-single-gallery-thumbs img{
    width:70px;height:70px;object-fit:cover;
    border-radius:6px;border:1px solid var(--rts-border);
    cursor:pointer;
}
.rts-single-info .rts-breadcrumb{ font-size:12.5px; color:var(--rts-gray); margin-bottom:10px; }
.rts-single-info h1{ font-size:28px; font-weight:800; }
.rts-single-info .rts-price{ font-size:24px; margin:8px 0; }
.rts-single-info .rts-features{ margin:16px 0; }
.rts-single-info .rts-features li{ font-size:14.5px; }
.rts-single-info .rts-whatsapp-btn{ max-width:340px; font-size:16px; padding:14px 20px; }
.rts-sku-cat{ margin-top:18px; font-size:12.5px; color:#999; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.rts-footer{
    background:var(--rts-light-gray);
    padding:36px 0;
    margin-top:20px;
}
.rts-footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:center;
}
.rts-footer-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
}
.rts-footer-item .dashicons{ font-size:26px; width:26px; height:26px; color:var(--rts-green-dark); }
.rts-footer-bottom{
    text-align:center;
    font-size:12px;
    color:var(--rts-gray);
    margin-top:26px;
}

/* ==========================================================================
   10. PAGINATION / MISC
   ========================================================================== */
.rts-pagination{
    display:flex; gap:8px; justify-content:center; margin:20px 0 50px;
}
.rts-pagination a, .rts-pagination span{
    padding:8px 14px; border:1px solid var(--rts-border); border-radius:6px; font-size:14px;
}
.rts-pagination .current{ background:var(--rts-dark); color:#fff; border-color:var(--rts-dark); }

.rts-empty{ text-align:center; padding:60px 20px; color:var(--rts-gray); }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
    .rts-cat-grid{ grid-template-columns:repeat(4,1fr); }
    .rts-product-grid{ grid-template-columns:repeat(3,1fr); }
    .rts-footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:782px){
    .rts-single-product{ grid-template-columns:1fr; }
}
@media (max-width:640px){
    .rts-nav .rts-container{ flex-direction:column; align-items:flex-start; }
    .rts-menu-toggle{ display:block; }
    .rts-nav ul{ display:none; flex-direction:column; width:100%; }
    .rts-nav.open ul{ display:flex; }
    .rts-cat-grid{ grid-template-columns:repeat(3,1fr); }
    .rts-product-grid{ grid-template-columns:repeat(2,1fr); }
    .rts-banner{ flex-direction:column; text-align:center; }
    .rts-hero h1{ font-size:26px; }
}