/* ===== FanShop — тёмно-зелёный/белый, адаптивный ===== */
:root{
    --green-900:#0b2e22; --green-800:#0f3d2e; --green-700:#12513c;
    --green-600:#12805c; --green-500:#16a06f; --green-050:#e9f5ef;
    --ink:#1c2b26; --muted:#6b7c74; --line:#e2e8e4; --bg:#f4f7f5;
    --white:#fff; --danger:#c0392b; --warn:#b7791f; --radius:14px;
    --shadow:0 6px 24px rgba(15,61,46,.08); --wrap:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;color:var(--ink);
    background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
.container{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%}
.section{padding:44px 0}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---- Кнопки ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;
    background:var(--green-600);color:#fff;border:2px solid var(--green-600);
    padding:11px 22px;border-radius:10px;font-weight:600;cursor:pointer;
    font-size:15px;transition:.15s;text-decoration:none}
.btn:hover{background:var(--green-700);border-color:var(--green-700);text-decoration:none}
.btn-lg{padding:14px 30px;font-size:16px}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--green-700);border-color:var(--line)}
.btn-ghost:hover{background:var(--green-050);border-color:var(--green-600)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#a5301f;border-color:#a5301f}

/* ---- Шапка ---- */
.site-header{background:var(--green-800);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;gap:.35em}
.logo:hover{text-decoration:none}
.logo span{font-size:19px}
.main-nav{display:flex;align-items:center;gap:22px}
.main-nav a{color:#e9f5ef;font-weight:500;font-size:15px}
.main-nav a:hover{color:#fff;text-decoration:none}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:6px;
    background:var(--green-600);padding:8px 14px;border-radius:9px}
.cart-badge{background:#fff;color:var(--green-800);font-size:12px;font-weight:700;
    min-width:20px;height:20px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

/* ---- Флеш ---- */
.flash{padding:12px 16px;border-radius:10px;margin:14px 0;font-size:14px;border:1px solid}
.flash-ok{background:#e6f6ee;border-color:#b6e3cd;color:#0f6b46}
.flash-err{background:#fdecea;border-color:#f5c6c0;color:#a5301f}
.flash-warn{background:#fdf6e3;border-color:#f0e0b0;color:#8a6d1a}

/* ---- Hero ---- */
.hero{background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff}
.hero-inner{display:flex;align-items:center;gap:30px;padding:60px 20px}
.hero-text{flex:1}
.hero-text h1{font-size:clamp(28px,5vw,46px);margin-bottom:16px}
.hero-text p{font-size:18px;color:#dff0e8;max-width:520px;margin-bottom:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero-emoji{font-size:150px;line-height:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}

/* ---- Заголовки секций ---- */
.section-title{font-size:26px;color:var(--green-800)}
.page-title{font-size:30px;color:var(--green-800);margin-bottom:18px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.link-more{font-weight:600;white-space:nowrap}

/* ---- Категории ---- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:24px 18px;text-align:center;transition:.15s;box-shadow:var(--shadow)}
.cat-card:hover{transform:translateY(-3px);text-decoration:none;border-color:var(--green-500)}
.cat-card__icon{font-size:40px;display:block;margin-bottom:10px}
.cat-card__name{display:block;font-weight:700;color:var(--ink);font-size:17px}
.cat-card__cnt{display:block;color:var(--muted);font-size:13px;margin-top:4px}

/* ---- Сетка товаров ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;transition:.15s;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-4px);text-decoration:none;border-color:var(--green-500)}
.product-card__img{position:relative;aspect-ratio:1/1;background:var(--green-050);overflow:hidden}
.product-card__img img{width:100%;height:100%;object-fit:cover}
.badge-pop{position:absolute;top:10px;left:10px;background:var(--green-600);color:#fff;
    font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}
.product-card__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card__name{font-size:15px;color:var(--ink);margin:0;font-weight:600;flex:1}
.product-card__price{font-size:19px;font-weight:800;color:var(--green-700)}
.ph-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:56px;background:var(--green-050);color:var(--green-500)}
.ph-img--lg{font-size:120px;aspect-ratio:1/1}

/* ---- Преимущества ---- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.feature span{font-size:36px;display:block;margin-bottom:10px}
.feature h4{margin:0 0 6px;color:var(--green-800)}
.feature p{margin:0;color:var(--muted);font-size:14px}

/* ---- Каталог: фильтр ---- */
.catalog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 18px;
    font-size:14px;font-weight:600;color:var(--ink);transition:.15s}
.chip:hover{border-color:var(--green-500);text-decoration:none}
.chip--active{background:var(--green-700);border-color:var(--green-700);color:#fff}
.empty-state{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center;color:var(--muted)}

/* ---- Хлебные крошки ---- */
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--green-600)}

/* ---- Страница товара ---- */
.product-page{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:40px}
.product-page__media{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.product-page__media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.product-cat-tag{display:inline-block;background:var(--green-050);color:var(--green-700);
    font-size:13px;font-weight:600;padding:4px 12px;border-radius:20px;margin-bottom:12px}
.product-page__info h1{font-size:28px}
.product-page__price{font-size:30px;font-weight:800;color:var(--green-700);margin:10px 0}
.stock{font-size:14px;font-weight:600;margin-bottom:16px}
.stock--in{color:var(--green-600)}
.stock--out{color:var(--warn)}
.product-desc{color:#374b43;margin-bottom:22px}
.add-to-cart{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qty-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.qty-btn{width:42px;height:46px;border:0;background:#fff;font-size:20px;cursor:pointer;color:var(--green-700)}
.qty-btn:hover{background:var(--green-050)}
.qty-input{width:52px;height:46px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:16px}
.product-page__note{margin-top:14px;font-size:13px}
/* Галерея товара */
.product-gallery__thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.product-gallery__thumb{padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;
    background:#fff;cursor:pointer;width:72px;height:72px;line-height:0;transition:border-color .15s}
.product-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.product-gallery__thumb:hover{border-color:var(--green-300,#a7d7bf)}
.product-gallery__thumb.is-active{border-color:var(--green-600)}

/* ---- Карточки/формы ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
label{display:block;font-weight:600;font-size:14px;margin-bottom:14px;color:#33453d}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
    font-size:15px;font-family:inherit;margin-top:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-050)}
textarea{resize:vertical}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-weight:400}
.checkbox input{width:auto;margin-top:3px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- Auth ---- */
.auth-box{max-width:440px;margin:0 auto}
.auth-box h1{font-size:24px;color:var(--green-800)}
.auth-alt{text-align:center;font-size:14px;margin:14px 0 0}

/* ---- Корзина ---- */
.cart-table{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.cart-row{display:grid;grid-template-columns:80px 1fr 100px 120px;gap:16px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.cart-row__img img,.cart-row__img .ph-img{width:64px;height:64px;border-radius:8px;object-fit:cover;font-size:30px}
.cart-row__name{display:flex;flex-direction:column;gap:3px}
.cart-row__name a{font-weight:600;color:var(--ink)}
.cart-row__sum{font-weight:700;text-align:right;color:var(--green-700)}
.cart-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cart-total{font-size:20px}
.cart-actions{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---- Checkout ---- */
.checkout-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start}
.checkout-form h2,.checkout-summary h2{font-size:19px;color:var(--green-800);margin-bottom:16px}
.pay-note{background:var(--green-050);border-radius:10px;padding:14px;font-size:14px;margin:6px 0 16px}
.summary-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.summary-total{display:flex;justify-content:space-between;padding-top:14px;font-size:18px;font-weight:700;color:var(--green-800)}
.checkout-auth h2{font-size:20px;color:var(--green-800);margin-bottom:10px}
.checkout-auth__form{margin-top:16px}
.checkout-auth__reg{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.checkout-auth__reg .muted{display:block;margin-bottom:8px;font-size:14px}
.field-note{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-weight:400}
.cart-note{margin-top:14px;font-size:14px;line-height:1.5}
.nav-cta{background:var(--green-600,#12805c);padding:6px 14px;border-radius:8px;color:#fff!important}
.nav-cta:hover{background:var(--green-700,#0f6b4d)}

/* ---- Success ---- */
.success-box{max-width:560px;margin:0 auto;text-align:center}
.success-icon{width:74px;height:74px;border-radius:50%;background:var(--green-050);color:var(--green-600);
    font-size:38px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.success-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.err-code{font-size:70px;font-weight:800;color:var(--green-700)}

/* ---- Личный кабинет / заказы ---- */
.account-head{margin-bottom:26px}
.orders-table{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.orders-table__head,.orders-table__row{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr 1fr;gap:12px;padding:14px 18px;align-items:center}
.orders-table__head{background:var(--green-050);font-weight:700;font-size:13px;color:var(--green-800);text-transform:uppercase;letter-spacing:.03em}
.orders-table__row{border-top:1px solid var(--line);font-size:15px}
.status{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600}
.status--new{background:#eef2f6;color:#33506b}
.status--confirmed{background:#e7f0ff;color:#2a5db0}
.status--shipped{background:#fff3dd;color:#9a6a15}
.status--delivered{background:#e6f6ee;color:#0f6b46}
.status--cancelled{background:#fdecea;color:#a5301f}

/* ---- Order detail ---- */
.order-detail__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.order-items{margin:18px 0}
.order-info{border-top:1px solid var(--line);padding-top:18px}
.order-info h3{color:var(--green-800);font-size:17px}
.order-info p{margin:6px 0}

/* ---- Prose (текстовые страницы) ---- */
.prose{max-width:820px}
.prose h1{font-size:30px;color:var(--green-800)}
.prose h2{font-size:21px;color:var(--green-800);margin-top:28px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:7px 0}
.contacts-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:20px 0}
.contact-card{text-align:center;flex:1 1 240px;max-width:340px}
.contacts-note{margin-top:8px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.contact-card__icon{font-size:34px;display:block;margin-bottom:8px}
.contact-card h3{margin:0 0 6px;font-size:17px}

/* ---- Footer ---- */
.site-footer{background:var(--green-900);color:#cfe3da;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:44px 20px 24px}
.footer-logo{color:#fff;font-weight:800;font-size:19px;margin-bottom:10px}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.site-footer a{display:block;color:#a9c9bb;font-size:14px;margin-bottom:8px}
.site-footer a:hover{color:#fff}
.site-footer .muted{color:#8fb0a2}
.copyright{border-top:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:13px;color:#8fb0a2}

/* ---- Cookie ---- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:var(--green-800);color:#fff;z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;flex-wrap:wrap}
.cookie-inner p{margin:0;font-size:14px;color:#dff0e8}
.cookie-inner a{color:#fff;text-decoration:underline}
.cookie-inner .btn{background:#fff;color:var(--green-800);border-color:#fff}

/* ---- Админка ---- */
.admin-header{background:var(--green-900)}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.admin-orders{display:flex;flex-direction:column;gap:16px}
.admin-order__head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.admin-order__total{font-size:18px;font-weight:800;color:var(--green-700)}
.admin-order__body{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.admin-order__client p{margin:3px 0;font-size:14px}
.admin-order__status{display:flex;gap:10px;align-items:flex-end}
.admin-order__status label{margin:0}
.admin-list{display:flex;flex-direction:column;gap:12px}
.admin-list__row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;padding:14px 18px}
.admin-list__img img,.admin-list__img .ph-img{width:64px;height:64px;border-radius:8px;object-fit:cover;font-size:28px}
.admin-list__main{display:flex;flex-direction:column;gap:3px}
.admin-list__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:12px;margin-right:4px}
.tag--off{background:#fdecea;color:#a5301f}
.tag--pop{background:var(--green-050);color:var(--green-700)}
.admin-form{max-width:640px}
.admin-form__preview img{width:120px;height:120px;object-fit:cover;border-radius:10px;margin-top:8px;border:1px solid var(--line)}
/* Галерея фото в форме товара */
.admin-photos{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 4px}
.admin-photo{position:relative;width:96px}
.admin-photo img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.admin-photo__del{display:flex;align-items:center;gap:5px;font-size:12px;margin-top:5px;cursor:pointer;color:#a5301f}
.admin-photo--main .admin-photo img{border-color:var(--green-600);border-width:2px}
.admin-photo__badge{position:absolute;top:5px;left:5px;background:var(--green-600);color:#fff;
    font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.admin-hint{font-size:12px;color:#5a6b63;margin:2px 0 0}
.form-photos{margin:4px 0 6px}
.form-photos__title{display:block;font-weight:600;margin-bottom:6px}
.form-checks{margin:6px 0 14px}
.form-actions{display:flex;gap:12px}
.admin-cats-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.inline-edit{display:flex;gap:8px;align-items:center}
.inline-edit input{margin-top:0}
.admin-form--new h3{color:var(--green-800);margin-bottom:14px}

/* ===== Адаптив ===== */
@media(max-width:900px){
    .cat-grid{grid-template-columns:repeat(2,1fr)}
    .product-grid{grid-template-columns:repeat(3,1fr)}
    .checkout-layout,.product-page,.admin-cats-layout{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    .admin-order__body{grid-template-columns:1fr}
    .feature-grid{grid-template-columns:1fr}
    .hero-emoji{font-size:110px}
}
@media(max-width:640px){
    .burger{display:block}
    .main-nav{position:absolute;top:64px;left:0;right:0;background:var(--green-800);
        flex-direction:column;align-items:stretch;gap:0;padding:8px 0;display:none}
    body.nav-open .main-nav{display:flex}
    .main-nav a{padding:12px 20px}
    .cart-link{margin:8px 20px;justify-content:center}
    .product-grid{grid-template-columns:repeat(2,1fr)}
    .hero-inner{flex-direction:column;text-align:center;padding:40px 20px}
    .hero-actions{justify-content:center}
    .cart-row{grid-template-columns:60px 1fr;grid-template-areas:"img name" "img qty" "sum sum"}
    .cart-row__img{grid-area:img}.cart-row__name{grid-area:name}
    .cart-row__qty{grid-area:qty}.cart-row__sum{grid-area:sum;text-align:left}
    .orders-table__head{display:none}
    .orders-table__row{grid-template-columns:1fr 1fr;gap:8px}
    .orders-table__row span[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:12px}
    .form-row{grid-template-columns:1fr}
    .admin-list__row{grid-template-columns:56px 1fr}
    .admin-list__actions{grid-column:1/-1}
}
@media(max-width:400px){
    .product-grid,.cat-grid{grid-template-columns:1fr}
}