/* ===========================================================
   Maseo Sofa — design tokens
   Palette: deep green-teal accent on a neutral base
   Type: system fonts only (no remote fonts = fast on 3G)
   Change the whole look from this block.
   =========================================================== */

:root{
    --bg:           #F7F8F7;
    --panel:        #E8EFED;
    --ink:          #1A1A1A;
    --ink-soft:     #475553;
    --accent:       #1E5F5A;
    --accent-dark:  #174A46;
    --deep:         #12312E;
    --soft-accent:  #9CC3BE;
    --line:         #D5DEDB;
    --white:        #FFFFFF;
    --danger:       #9B2C1F;
    --danger-bg:    #FBEAE7;
    --danger-line:  #EBC3BC;
    --ok:           #1E5F3A;
    --ok-bg:        #E5F2EB;
    --ok-line:      #BFDDCB;

    --font-display: Georgia, "Times New Roman", serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --container: 1180px;
    --radius: 4px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--deep);
    line-height:1.15;
    margin:0 0 .5em;
}
p{ margin:0 0 1em; max-width:62ch; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 20px; }
button, input, select{ font-family:var(--font-body); }
.muted{ color:var(--ink-soft); font-size:.9rem; }
.grow{ flex:1; min-width:0; }
.text-link{ color:var(--accent); text-decoration:underline; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Header ---------------- */
.site-header{
    position:sticky; top:0; z-index:100;
    background:rgba(247,248,247,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{
    font-family:var(--font-display);
    font-size:1.5rem; font-weight:600; color:var(--deep); letter-spacing:.01em;
}
.brand span{ color:var(--accent); }

.main-nav{ display:flex; gap:28px; }
.main-nav a{
    font-size:.98rem; color:var(--ink-soft);
    padding:6px 2px; border-bottom:2px solid transparent;
    transition:border-color .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--accent); border-bottom-color:var(--accent); }

.nav-toggle{
    display:none; background:none; border:none; cursor:pointer;
    width:44px; height:44px; padding:12px 8px;
    flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--deep); border-radius:2px; }

@media (max-width:760px){
    .nav-toggle{ display:flex; }
    .main-nav{
        position:absolute; top:64px; left:0; right:0;
        background:var(--bg); border-bottom:1px solid var(--line);
        flex-direction:column; gap:0; max-height:0; overflow:hidden;
        transition:max-height .3s ease;
    }
    .main-nav.open{ max-height:220px; }
    .main-nav a{ padding:14px 20px; border-bottom:1px solid var(--line); }
}

/* ---------------- Buttons ---------------- */
.btn{
    display:inline-block; background:var(--accent); color:var(--white);
    padding:13px 28px; border-radius:var(--radius); font-size:1rem;
    margin-top:10px; border:1px solid var(--accent); cursor:pointer;
    transition:background .2s ease;
}
.btn:hover{ background:var(--accent-dark); }
.btn.ghost{ background:transparent; color:var(--deep); border:1px solid var(--deep); }
.btn.ghost:hover{ background:var(--deep); color:var(--white); }
.btn-sm{ padding:9px 18px; font-size:.92rem; margin-top:0; }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:#7d2217; }
.btn-block{ width:100%; text-align:center; }

/* ---------------- Hero ---------------- */
.hero{ padding:44px 0 56px; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){
    .hero-grid{ grid-template-columns:0.85fr 1.15fr; align-items:center; gap:48px; }
}
.hero-copy .kicker{ color:var(--accent); font-size:.95rem; margin-bottom:10px; display:block; }
.hero-copy h1{ font-size:clamp(2.1rem, 5vw, 3.2rem); max-width:14ch; }
.hero-copy p{ color:var(--ink-soft); font-size:1.05rem; }

.hero-media{ position:relative; }
.hero-scroller{
    display:flex; width:100%; aspect-ratio:4 / 3;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    border-radius:var(--radius); background:var(--panel);
    scrollbar-width:none; -ms-overflow-style:none;
}
.hero-scroller::-webkit-scrollbar{ display:none; height:0; }
.hero-empty{ align-items:center; justify-content:center; color:var(--ink-soft); }
.hero-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-controls{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
    padding:0 10px; pointer-events:none;
}
.hero-nav{
    pointer-events:auto; width:40px; height:40px; border-radius:50%;
    background:rgba(18,49,46,.55); color:var(--white); border:none;
    font-size:1.4rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
}
.hero-nav:hover{ background:rgba(18,49,46,.8); }
.hero-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.hero-dot{
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.65); border:none; padding:0; cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.hero-dot.active{ background:var(--accent); transform:scale(1.25); }

/* ---------------- Sections ---------------- */
.section{ padding:56px 0; }
.section-tight{ padding-top:0; }
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.section-head p{ color:var(--ink-soft); }

.feature-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:760px){ .feature-row{ grid-template-columns:1fr; } }
.feature{ padding:22px 20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.feature h3{ font-size:1.15rem; margin-bottom:6px; }
.feature p{ color:var(--ink-soft); font-size:.95rem; margin:0; }
.section-cta{ text-align:center; margin-top:32px; }

/* ---------------- Model cards ---------------- */
.model-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.model-grid-pad{ padding:24px 0 60px; }
@media (max-width:900px){ .model-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .model-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.model-card{
    display:flex; flex-direction:column; gap:4px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;
}
.model-card:hover{ border-color:var(--soft-accent); box-shadow:0 4px 14px rgba(18,49,46,.08); }
.model-thumb{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--panel); }
.model-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.model-card:hover .model-thumb img{ transform:scale(1.04); }
.no-photo{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:var(--ink-soft); font-size:.85rem; }
.model-name{ padding:10px 12px 0; font-family:var(--font-display); font-weight:600; color:var(--deep); }
.model-price{ padding:0 12px 12px; color:var(--accent); font-weight:600; }

/* ---------------- Model page / thumbnails ---------------- */
.gallery-intro{ padding:40px 0 8px; }
.gallery-intro h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
.gallery-intro p{ color:var(--ink-soft); }
.crumbs a{ color:var(--accent); font-size:.95rem; }
.price-big{ font-size:1.5rem; color:var(--accent); font-weight:600; margin-bottom:6px; }

.thumb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:24px 0 60px; }
@media (max-width:900px){ .thumb-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .thumb-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } }
.thumb-item{
    border:none; padding:0; cursor:pointer; aspect-ratio:1/1;
    overflow:hidden; border-radius:var(--radius); background:var(--panel);
}
.thumb-item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.thumb-item:hover img{ transform:scale(1.05); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }

/* ---------------- Lightbox ---------------- */
.lightbox{
    position:fixed; inset:0; z-index:1000;
    background:rgba(10,20,19,.95);
    display:none; align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox-swiper{ width:100%; height:100%; }
.lightbox-swiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
.lightbox-slide-inner{ position:relative; max-width:94vw; max-height:82vh; overflow:hidden; cursor:zoom-in; }
.lightbox-slide-inner img{
    max-width:94vw; max-height:82vh; width:auto; height:auto; object-fit:contain;
    user-select:none; -webkit-user-drag:none; transition:transform .3s ease; transform-origin:50% 50%;
}
.lightbox-slide-inner.zoomed{ cursor:zoom-out; }
.lightbox-slide-inner.zoomed img{ transform:scale(2.2); }
.lightbox-close{
    position:absolute; top:16px; right:18px; z-index:1010;
    background:rgba(255,255,255,.14); border:none; color:var(--white);
    width:44px; height:44px; border-radius:50%; font-size:1.4rem; line-height:1; cursor:pointer;
}
.lightbox-hint{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.8); font-size:.85rem; background:rgba(0,0,0,.4);
    padding:6px 14px; border-radius:20px; pointer-events:none; white-space:nowrap;
}
.swiper-button-next, .swiper-button-prev{
    color:var(--white) !important; --swiper-navigation-size:20px;
    background:rgba(255,255,255,.16); width:40px !important; height:40px !important; border-radius:50%;
}

/* ---------------- Contact ---------------- */
.contact-wrap{
    display:grid; grid-template-columns:1fr; gap:40px;
    padding-top:44px; padding-bottom:64px;   /* top/bottom only: keeps the .wrap side padding on mobile */
}
.contact-wrap > *{ min-width:0; }
@media (min-width:880px){ .contact-wrap{ grid-template-columns:1fr 1fr; } }
.contact-info h1{ font-size:clamp(1.8rem,4vw,2.4rem); }
.contact-cards{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.contact-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.contact-card .label{ font-size:.85rem; color:var(--accent); margin-bottom:2px; display:block; }
.contact-card .value{ font-family:var(--font-display); font-size:1.15rem; color:var(--deep); overflow-wrap:anywhere; }
.map-frame{
    width:100%; min-height:340px; border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
}
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; }
.prose{ max-width:64ch; color:var(--ink-soft); }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--deep); color:var(--panel); padding:44px 0 26px; margin-top:40px; }
.footer-inner{ text-align:center; }
.footer-brand{ font-family:var(--font-display); font-size:1.4rem; margin-bottom:8px; }
.footer-brand span{ color:var(--soft-accent); }
.footer-tag{ color:rgba(255,255,255,.75); max-width:40ch; margin:0 auto 18px; }
.footer-links{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.footer-links a{ color:rgba(255,255,255,.88); font-size:.95rem; padding:6px 2px; }
.footer-links a:hover{ color:var(--soft-accent); }
.footer-copy{ color:rgba(255,255,255,.6); font-size:.82rem; margin:0 auto; }
.share-wa{
    display:inline-flex; align-items:center; gap:10px; margin:14px 0; padding:12px 20px;
    background:#1F7A4D; color:#fff; border-radius:999px; font-size:1rem; font-weight:600;
}
.share-wa:hover{ background:#196440; }

/* ---------------- Login ---------------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{
    width:100%; max-width:380px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px;
}
.auth-card h1{ font-size:1.6rem; margin-bottom:4px; }
.auth-card p.sub{ color:var(--ink-soft); font-size:.92rem; margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.88rem; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select{
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius);
    font-size:1rem; background:var(--bg); color:var(--ink);
}
.field input:focus, .field select:focus{ border-color:var(--accent); outline:none; }
.auth-error{
    background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line);
    padding:10px 14px; border-radius:var(--radius); font-size:.9rem; margin-bottom:16px;
}

/* ---------------- Admin ---------------- */
.admin-bar{ background:var(--deep); color:var(--panel); padding:12px 0; }
.admin-bar .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; }
.admin-bar .brand{ color:var(--panel); font-size:1.2rem; }
.admin-bar .brand span{ color:var(--soft-accent); }
.admin-nav{ display:flex; gap:4px 16px; flex-wrap:wrap; flex:1; }
.admin-nav a{ color:rgba(255,255,255,.85); font-size:.95rem; padding:8px 4px; border-bottom:2px solid transparent; }
.admin-nav a:hover{ color:var(--white); }
.admin-nav a.active{ color:var(--white); border-bottom-color:var(--soft-accent); }
.logout-form{ display:flex; align-items:center; gap:12px; margin:0; }
.admin-bar .who{ font-size:.92rem; color:rgba(255,255,255,.75); }
.admin-bar button.logout{
    background:none; cursor:pointer; color:var(--soft-accent); font-size:.92rem;
    border:1px solid rgba(255,255,255,.35); padding:8px 14px; border-radius:var(--radius);
}
.admin-main{ padding:32px 0 60px; }
.admin-main h1{ font-size:1.7rem; }

.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:24px; }
.card h2{ font-size:1.15rem; margin-bottom:14px; }
.card.narrow{ max-width:420px; }
.danger-zone{ border-color:var(--danger-line); }
.inline-form{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.inline-form .field{ margin-bottom:0; }
.inline-form .btn{ margin-top:0; }
.file-input{ padding:10px !important; border:1px dashed var(--accent) !important; background:var(--bg); font-size:.92rem !important; }
.flash{ padding:10px 14px; border-radius:var(--radius); margin-bottom:18px; font-size:.92rem; }
.flash.success{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line); }
.flash.error{ background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line); }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.stat{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:block; }
.stat .num{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--deep); }
.stat .lbl{ display:block; font-size:.85rem; color:var(--ink-soft); }
.stat.warn{ border-color:var(--danger-line); background:var(--danger-bg); }
.stat.warn .num{ color:var(--danger); }

.list-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.list-row:first-child{ border-top:none; }
.thumb-sm{ width:56px; height:56px; border-radius:var(--radius); overflow:hidden; background:var(--panel); flex:0 0 56px; }
.thumb-sm img{ width:100%; height:100%; object-fit:cover; }

.price-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.price-row:first-child{ border-top:none; }
.price-row input{
    width:140px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
    font-size:1rem; text-align:right; background:var(--bg);
}
.price-row input:focus{ border-color:var(--accent); outline:none; }
.form-actions{ margin-top:16px; }
.form-actions .btn{ margin-top:0; }

.admin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin-top:20px; }
.admin-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.admin-item .thumb-wrap{ aspect-ratio:1/1; overflow:hidden; background:var(--panel); }
.admin-item img{ width:100%; height:100%; object-fit:cover; }
.admin-item .meta{ padding:10px 12px; }
.admin-item .row-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.admin-item .row-actions form{ margin:0; }
.badge{ display:inline-block; background:var(--panel); color:var(--accent); font-size:.78rem; padding:2px 8px; border-radius:20px; margin-bottom:6px; }
.btn-del, .btn-link{ background:none; border:none; font-size:.88rem; cursor:pointer; padding:8px 0; }
.btn-del{ color:var(--danger); }
.btn-link{ color:var(--accent); }
.btn-del:hover, .btn-link:hover{ text-decoration:underline; }

.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tabs a{ padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); font-size:.92rem; }
.tabs a.active{ background:var(--accent); color:var(--white); border-color:var(--accent); }
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); font-size:.85rem; }
.table th, .table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.table th{ background:var(--panel); white-space:nowrap; }
.pager{ display:flex; gap:10px; margin-top:16px; }
.pager .btn{ margin-top:0; }