/**
 * Janyst Midocean Catalog — frontend styles
 * Estetyka: ciemny industrialny, akcent magenta (#d6007f / #c0247a), zgodnie z brandingiem janyst.eu
 */

.midocean-catalog,
.midocean-single {
    --mid-bg:        #14121a;
    --mid-surface:   #1d1b26;
    --mid-surface-2: #26232f;
    --mid-border:    #322e3d;
    --mid-text:      #f2f0f6;
    --mid-muted:     #a39fb0;
    --mid-accent:    #d6007f;
    --mid-accent-2:  #ff3ba0;
    --mid-green:     #1ec885;
    --mid-radius:    14px;
    --mid-shadow:    0 10px 40px rgba(0,0,0,.35);
}

/* ---------- KATALOG (siatka) ---------- */
.midocean-catalog {
    display: grid;
    gap: 26px;
    margin: 32px 0;
}
.midocean-cols-2 { grid-template-columns: repeat(2, 1fr); }
.midocean-cols-3 { grid-template-columns: repeat(3, 1fr); }
.midocean-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) { .midocean-catalog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .midocean-catalog { grid-template-columns: 1fr; } }

.midocean-card {
    position: relative;
    background: var(--mid-surface);
    border: 1px solid var(--mid-border);
    border-radius: var(--mid-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.midocean-card:hover {
    transform: translateY(-4px);
    border-color: var(--mid-accent);
    box-shadow: var(--mid-shadow);
}

.midocean-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }

.midocean-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.midocean-card-img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; }

.midocean-no-image { width: 100%; height: 100%; background: linear-gradient(135deg, #2a2733, #1d1b26); }
.midocean-no-image-large { aspect-ratio: 1/1; border-radius: var(--mid-radius); }

.midocean-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    padding: 5px 10px; border-radius: 999px;
    color: #fff; backdrop-filter: blur(4px);
}
.midocean-badge-stock { background: rgba(30,200,133,.92); }
.midocean-badge-out   { background: rgba(120,116,132,.92); }

.midocean-card-body { padding: 18px 18px 8px; flex: 1; }
.midocean-card-title {
    font-size: 17px; line-height: 1.3; margin: 0 0 8px;
    color: var(--mid-text); font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.midocean-card-excerpt {
    font-size: 13.5px; color: var(--mid-muted); margin: 0 0 14px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3em;
}

.midocean-card-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.midocean-price-label { font-size: 12px; color: var(--mid-muted); text-transform: uppercase; letter-spacing: .05em; }
.midocean-price-value { font-size: 22px; font-weight: 800; color: var(--mid-accent-2); }
.midocean-price-unit  { font-size: 12px; color: var(--mid-muted); }

.midocean-card-cta {
    display: block; text-align: center; text-decoration: none;
    margin: 12px 18px 18px;
    padding: 11px 16px; border-radius: 10px;
    background: var(--mid-accent); color: #fff;
    font-weight: 700; font-size: 14px; letter-spacing: .02em;
    transition: background .2s ease;
}
.midocean-card-cta:hover { background: var(--mid-accent-2); color: #fff; }

/* ---------- PAGINACJA ---------- */
.midocean-pagination { display: flex; gap: 8px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.midocean-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    background: var(--mid-surface); border: 1px solid var(--mid-border);
    border-radius: 10px; color: var(--mid-text); text-decoration: none; font-weight: 600;
    transition: all .2s ease;
}
.midocean-pagination .page-numbers.current,
.midocean-pagination .page-numbers:hover { background: var(--mid-accent); border-color: var(--mid-accent); color: #fff; }

.midocean-empty { color: var(--mid-muted); font-style: italic; padding: 40px; text-align: center; }

/* ---------- POJEDYNCZY PRODUKT ---------- */
.midocean-single {
    max-width: 1100px; margin: 40px auto; padding: 0 20px;
    color: var(--mid-text);
}
.midocean-single-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start;
}
@media (max-width: 820px) {
    .midocean-single-grid { grid-template-columns: 1fr; gap: 28px; }
    .midocean-single-gallery { position: static !important; top: auto !important; }
}

.midocean-single-gallery {
    background: #fff; border-radius: var(--mid-radius); overflow: hidden;
    border: 1px solid var(--mid-border); position: sticky; top: 24px;
}
.midocean-single-img { width: 100%; height: auto; display: block; padding: 24px; box-sizing: border-box; object-fit: contain; }

.midocean-single-title { font-size: 32px; line-height: 1.15; margin: 0 0 14px; font-weight: 800; }
.midocean-single-lead { font-size: 16px; color: var(--mid-muted); line-height: 1.6; margin: 0 0 22px; }

.midocean-stock-box {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--mid-surface); border: 1px solid var(--mid-border);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 24px;
}
.midocean-stock-dot { width: 10px; height: 10px; border-radius: 50%; }
.midocean-stock-in  { background: var(--mid-green); box-shadow: 0 0 10px rgba(30,200,133,.6); }
.midocean-stock-out { background: #888; }
.midocean-stock-arrival { font-size: 13px; color: var(--mid-muted); margin-left: auto; }

/* Kalkulator */
.midocean-calc {
    background: var(--mid-surface); border: 1px solid var(--mid-border);
    border-radius: var(--mid-radius); padding: 24px; margin-bottom: 24px;
}
.midocean-calc h3 { margin: 0 0 18px; font-size: 19px; font-weight: 700; }
.midocean-calc-row { margin-bottom: 16px; }
.midocean-calc-row label {
    display: block; font-size: 13px; color: var(--mid-muted);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.midocean-calc-row select,
.midocean-calc-row input {
    width: 100%; box-sizing: border-box;
    background: var(--mid-surface-2); border: 1px solid var(--mid-border);
    border-radius: 10px; padding: 12px 14px; color: var(--mid-text);
    font-size: 15px; font-family: inherit;
}
.midocean-calc-row select:focus,
.midocean-calc-row input:focus { outline: none; border-color: var(--mid-accent); }

.midocean-calc-result {
    border-top: 1px solid var(--mid-border); margin-top: 20px; padding-top: 18px;
}
.midocean-calc-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.midocean-calc-line span { color: var(--mid-muted); font-size: 14px; }
.midocean-calc-line strong { font-size: 17px; }
.midocean-calc-total strong { font-size: 24px; color: var(--mid-accent-2); font-weight: 800; }
.midocean-calc-note { font-size: 12.5px; color: var(--mid-muted); line-height: 1.5; margin: 10px 0 0; }

.midocean-cta-button {
    display: block; text-align: center; text-decoration: none;
    margin-top: 18px; padding: 15px; border-radius: 12px;
    background: linear-gradient(135deg, var(--mid-accent), var(--mid-accent-2));
    color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em;
    transition: transform .15s ease, box-shadow .2s ease;
}
.midocean-cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(214,0,127,.4); color: #fff; }

/* Specyfikacja */
.midocean-specs { width: 100%; border-collapse: collapse; }
.midocean-specs tr { border-bottom: 1px solid var(--mid-border); }
.midocean-specs th, .midocean-specs td { text-align: left; padding: 11px 0; font-size: 14px; }
.midocean-specs th { color: var(--mid-muted); font-weight: 600; width: 45%; }
.midocean-specs td { color: var(--mid-text); }

.midocean-single-description { margin-top: 44px; line-height: 1.7; color: var(--mid-text); }
.midocean-single-description h2 { font-size: 22px; margin-bottom: 14px; }

/* ---------- GALERIA MINIATUR ---------- */
.midocean-thumbs {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #fff;
    border-top: 1px solid var(--mid-border);
}
.midocean-thumb {
    width: 60px; height: 60px; padding: 4px; border: 2px solid #e5e5e5;
    border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s ease;
}
.midocean-thumb img { width: 100%; height: 100%; object-fit: contain; }
.midocean-thumb:hover, .midocean-thumb.active { border-color: var(--mid-accent); }

/* ---------- WRAP + SEKCJE ---------- */
.midocean-wrap {
    --mid-bg:#14121a;--mid-surface:#1d1b26;--mid-surface-2:#26232f;--mid-border:#322e3d;
    --mid-text:#f2f0f6;--mid-muted:#a39fb0;--mid-accent:#d6007f;--mid-accent-2:#ff3ba0;--mid-green:#1ec885;
    background:var(--mid-bg); color:var(--mid-text); padding:24px; border-radius:16px;
}
.midocean-section-title { font-size:22px; font-weight:800; color:var(--mid-text); margin:8px 0 16px; }

/* ---------- PASEK KATEGORII ---------- */
.midocean-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.midocean-cat {
    font-size:13px; padding:8px 16px; border-radius:999px; text-decoration:none;
    background:var(--mid-surface-2); color:var(--mid-text); border:1px solid var(--mid-border);
    transition:all .2s ease;
}
.midocean-cat:hover { border-color:var(--mid-accent); color:#fff; }
.midocean-cat.active { background:var(--mid-accent); border-color:var(--mid-accent); color:#fff; }

/* ---------- LOSOWE W NAGŁÓWKU ---------- */
.midocean-header-feature { margin-bottom:30px; }
.midocean-header-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:780px){ .midocean-header-grid { grid-template-columns:1fr; } }

/* ---------- SLIDER NOWOŚCI ---------- */
.midocean-new { margin-bottom:30px; }
.midocean-new-head { display:flex; align-items:center; justify-content:space-between; }
.midocean-new-nav { display:flex; gap:8px; }
.midocean-arrow {
    width:36px; height:36px; border-radius:50%; border:1px solid var(--mid-border);
    background:var(--mid-surface-2); color:var(--mid-text); font-size:20px; cursor:pointer; line-height:1;
    transition:all .2s ease;
}
.midocean-arrow:hover { background:var(--mid-accent); border-color:var(--mid-accent); color:#fff; }
.midocean-slider { overflow:hidden; }
.midocean-track { display:flex; gap:16px; transition:transform .4s ease; }
.midocean-slide { min-width:calc(25% - 12px); }
@media (max-width:980px){ .midocean-slide { min-width:calc(33.333% - 11px); } }
@media (max-width:680px){ .midocean-slide { min-width:calc(50% - 8px); } }

.midocean-badge-new { background:var(--mid-accent-2); color:#fff; }
.midocean-price-ask { font-size:15px; color:var(--mid-muted); font-style:italic; }

/* ---------- FORMULARZ ZAPYTANIA ---------- */
.midocean-form {
    margin-top:40px; padding:28px; border-radius:14px;
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d);
    --mid-accent:#d6007f; --mid-accent-2:#ff3ba0; --mid-muted:#a39fb0; --mid-border:#322e3d; --mid-surface-2:#26232f; --mid-text:#f2f0f6;
    color:var(--mid-text);
}
.midocean-form h3 { font-size:20px; font-weight:800; margin:0 0 8px; color:var(--mid-text); }
.midocean-form-lead { font-size:14px; color:var(--mid-muted); margin:0 0 20px; line-height:1.5; }
.midocean-form-row { margin-bottom:14px; }
.midocean-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .midocean-form-grid { grid-template-columns:1fr; } }
.midocean-form label { display:block; font-size:12px; color:var(--mid-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.midocean-form input, .midocean-form textarea {
    width:100%; box-sizing:border-box; background:var(--mid-surface-2); border:1px solid var(--mid-border);
    border-radius:10px; padding:12px 14px; color:var(--mid-text); font-size:15px; font-family:inherit;
}
.midocean-form input:focus, .midocean-form textarea:focus { outline:none; border-color:var(--mid-accent); }
.midocean-form-submit {
    margin-top:6px; padding:14px 28px; border:none; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg,var(--mid-accent),var(--mid-accent-2)); color:#fff;
    font-weight:800; font-size:15px; transition:transform .15s ease,box-shadow .2s ease;
}
.midocean-form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(214,0,127,.4); }
.midocean-form-submit:disabled { opacity:.6; cursor:wait; transform:none; }
.midocean-form-note { font-size:12px; color:var(--mid-muted); margin:10px 0 0; }
.midocean-form-msg { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.midocean-form-ok { background:rgba(30,200,133,.15); color:#1ec885; border:1px solid rgba(30,200,133,.3); }
.midocean-form-err { background:rgba(214,54,56,.15); color:#ff6b6b; border:1px solid rgba(214,54,56,.3); }

/* ---------- v0.5: 4 KOLUMNY ---------- */
.midocean-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:1100px){ .midocean-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:820px){ .midocean-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .midocean-cols-4 { grid-template-columns: 1fr; } }

/* ---------- CENA W PRAWY RÓG KARTY ---------- */
.midocean-card-body { display:flex; flex-direction:column; }
.midocean-card-price { margin-top:auto; align-self:flex-end; text-align:right; align-items:baseline; }

/* ---------- BADGE STOCK: niebieski zamiast zielonego ---------- */
.midocean-badge-stock { background: rgba(55,138,221,.95) !important; color:#fff !important; }

/* ---------- MOŻLIWOŚCI ZNAKOWANIA (PRINT DATA) ---------- */
.midocean-print {
    margin-top:40px;
    --mid-surface:#1d1b26; --mid-surface-2:#26232f; --mid-border:#322e3d;
    --mid-text:#f2f0f6; --mid-muted:#a39fb0; --mid-accent:#d6007f;
    color:var(--mid-text);
}
.midocean-print h2 { font-size:22px; font-weight:800; margin:0 0 6px; }
.midocean-print-lead { font-size:14px; color:var(--mid-muted); margin:0 0 20px; }
.midocean-print-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; align-items:start; }
.midocean-print-pos {
    background:var(--mid-surface); border:1px solid var(--mid-border); border-radius:12px; overflow:hidden;
    display:flex; flex-direction:column;
}
.midocean-print-img {
    background:#fff !important;
    height:210px !important;          /* stała wysokość - klucz, by karty się nie rozjeżdżały */
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:10px; box-sizing:border-box;
}
.midocean-print-img img {
    max-width:100% !important;
    max-height:100% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}
.midocean-print-body { padding:14px; }
.midocean-print-body h4 { margin:0 0 8px; font-size:15px; font-weight:700; color:var(--mid-text); text-transform:uppercase; letter-spacing:.03em; }
.midocean-print-size { font-size:13px; color:var(--mid-accent); font-weight:600; margin:0 0 10px; display:flex; align-items:center; gap:5px; }
.midocean-print-size .dashicons { font-size:16px; width:16px; height:16px; }
.midocean-print-techs { display:flex; flex-wrap:wrap; gap:6px; }
.midocean-tech {
    font-size:11.5px; padding:4px 9px; border-radius:999px;
    background:var(--mid-surface-2); border:1px solid var(--mid-border); color:var(--mid-text);
}
.midocean-tech em { color:var(--mid-muted); font-style:normal; }

/* ---------- v0.6: WYSZUKIWARKA ---------- */
.midocean-search { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.midocean-search-input {
    flex:1; min-width:200px; background:var(--mid-surface-2,#26232f); border:1px solid var(--mid-border,#322e3d);
    border-radius:10px; padding:12px 16px; color:var(--mid-text,#f2f0f6); font-size:15px; font-family:inherit;
}
.midocean-search-input:focus { outline:none; border-color:var(--mid-accent,#d6007f); }
.midocean-search-btn {
    padding:12px 24px; border:none; border-radius:10px; cursor:pointer;
    background:var(--mid-accent,#d6007f); color:#fff; font-weight:700; font-size:14px;
}
.midocean-search-btn:hover { background:var(--mid-accent-2,#ff3ba0); }
.midocean-search-clear { align-self:center; color:var(--mid-muted,#a39fb0); font-size:13px; text-decoration:none; }
.midocean-search-clear:hover { color:var(--mid-text,#f2f0f6); }

/* ---------- LAYOUT: SIDEBAR + TREŚĆ ---------- */
.midocean-layout { display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start; }
@media (max-width:860px){
    .midocean-layout { grid-template-columns:1fr; }
    .midocean-sidebar-inner { position:static !important; top:auto !important; }
}
.midocean-main { min-width:0; }

/* ---------- LEWE MENU ---------- */
.midocean-sidebar-inner {
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d);
    border-radius:12px; padding:16px; position:sticky; top:20px;
}
.midocean-sidebar-title { font-size:15px; font-weight:800; margin:0 0 12px; color:var(--mid-text,#f2f0f6); text-transform:uppercase; letter-spacing:.04em; }
.midocean-side-all {
    display:block; padding:8px 10px; border-radius:8px; text-decoration:none; margin-bottom:6px;
    color:var(--mid-text,#f2f0f6); font-weight:600; font-size:14px;
}
.midocean-side-all:hover, .midocean-side-all.active { background:var(--mid-accent,#d6007f); color:#fff; }
.midocean-side-tree { list-style:none; margin:0; padding:0; }
.midocean-side-item { margin:0; }
.midocean-side-row { display:flex; align-items:center; gap:4px; }
.midocean-side-toggle {
    background:none; border:none; color:var(--mid-muted,#a39fb0); cursor:pointer; font-size:12px;
    width:20px; padding:6px 0; transition:transform .15s; flex-shrink:0;
}
.midocean-side-spacer { display:inline-block; width:20px; flex-shrink:0; }
.midocean-side-link {
    flex:1; display:block; padding:7px 8px; border-radius:7px; text-decoration:none;
    color:var(--mid-text,#f2f0f6); font-size:13.5px; transition:background .15s;
}
.midocean-side-link:hover { background:var(--mid-surface-2,#26232f); color:#fff; }
.midocean-side-link.active { color:var(--mid-accent-2,#ff3ba0); font-weight:700; }
.midocean-side-sub { list-style:none; margin:0 0 4px 18px; padding:0; border-left:1px solid var(--mid-border,#322e3d); }
.midocean-side-sub .midocean-side-link { font-size:12.5px; color:var(--mid-muted,#a39fb0); }
.midocean-side-sub .midocean-side-link:hover { color:#fff; }

/* ---------- WYBÓR LICZBY NA STRONĘ ---------- */
.midocean-perpage { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:13px; color:var(--mid-muted,#a39fb0); }
.midocean-pp {
    min-width:34px; text-align:center; padding:5px 10px; border-radius:7px; text-decoration:none;
    background:var(--mid-surface-2,#26232f); border:1px solid var(--mid-border,#322e3d); color:var(--mid-text,#f2f0f6); font-weight:600;
}
.midocean-pp:hover { border-color:var(--mid-accent,#d6007f); color:#fff; }
.midocean-pp.active { background:var(--mid-accent,#d6007f); border-color:var(--mid-accent,#d6007f); color:#fff; }

/* ---------- v0.6.1: zaokrąglona wyszukiwarka + load more ---------- */
.midocean-search-input { border-radius:14px; }
.midocean-search-btn { border-radius:14px; }

.midocean-loadmore-wrap { text-align:center; margin:30px 0; }
.midocean-loadmore {
    padding:14px 36px; border:1px solid var(--mid-border,#322e3d); border-radius:14px; cursor:pointer;
    background:var(--mid-surface,#1d1b26); color:var(--mid-text,#f2f0f6); font-weight:700; font-size:15px;
    transition:all .2s ease;
}
.midocean-loadmore:hover { background:var(--mid-accent,#d6007f); border-color:var(--mid-accent,#d6007f); color:#fff; }
.midocean-loadmore:disabled { opacity:.6; cursor:wait; }

/* ---------- v0.7: wymuszenie zaokrągleń wyszukiwarki (nadpisanie motywu) ---------- */
.midocean-wrap .midocean-search-input,
.midocean-wrap input[type="search"].midocean-search-input {
    border-radius: 14px !important;
    -webkit-appearance: none;
    appearance: none;
}
.midocean-wrap .midocean-search-btn { border-radius: 14px !important; }

/* 4 kolumny - utrzymaj dłużej mimo sidebara */
.midocean-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:1280px){ .midocean-cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:1024px){ .midocean-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:760px){ .midocean-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:460px){ .midocean-cols-4 { grid-template-columns: 1fr; } }

/* ---------- v0.8: SZYBKI DOSTĘP ---------- */
.midocean-quick { margin-bottom:30px; }
.midocean-quick-title { font-size:22px; font-weight:800; text-align:center; color:var(--mid-text,#f2f0f6); margin:0 0 18px; }
.midocean-quick-bar {
    display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:16px;
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d); border-radius:14px;
}
@media (max-width:1100px){ .midocean-quick-bar { grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){ .midocean-quick-bar { grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .midocean-quick-bar { grid-template-columns:repeat(2,1fr); } }
.midocean-quick-item {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:16px 8px 12px; border-radius:10px; text-decoration:none; color:var(--mid-text,#f2f0f6);
    position:relative; transition:background .2s ease;
}
.midocean-quick-item:hover { background:var(--mid-surface-2,#26232f); color:#fff; }
.midocean-quick-top { position:absolute; top:0; left:16px; right:16px; height:3px; border-radius:0 0 3px 3px; }
.midocean-quick-ico { width:40px; height:40px; color:var(--mid-text,#f2f0f6); }
.midocean-quick-ico svg { width:100%; height:100%; }
.midocean-quick-label { font-size:12px; text-align:center; line-height:1.3; color:var(--mid-muted,#a39fb0); }
.midocean-quick-item:hover .midocean-quick-label { color:#fff; }

/* ---------- 3 KARTY (Nowości/Bestsellery/Promocje) ---------- */
.midocean-features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }
@media (max-width:600px){ .midocean-features { grid-template-columns:1fr; } }
.midocean-feature {
    display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px;
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d); border-radius:16px;
    text-decoration:none; color:var(--mid-text,#f2f0f6); transition:transform .2s ease, border-color .2s ease;
}
.midocean-feature:hover { transform:translateY(-3px); border-color:var(--mid-accent,#d6007f); color:#fff; }
.midocean-feature-ico {
    width:56px; height:56px; border-radius:50%; border:2px solid; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.03);
}
.midocean-feature-ico svg { width:28px; height:28px; }
.midocean-feature-label { font-size:17px; font-weight:700; }

/* ---------- v0.9.3: SZLIFY MOBILNE ---------- */
@media (max-width:600px){
    .midocean-wrap { padding:14px; }
    .midocean-single { padding:0 14px; margin:24px auto; }
    .midocean-single-title { font-size:24px; }       /* było 32px - za duże na telefon */
    .midocean-single-img { padding:14px; }
    .midocean-search-input { min-width:0; }           /* nie wypycha layoutu */
    .midocean-search { gap:6px; }
    .midocean-search-btn { padding:12px 16px; }
    .midocean-section-title { font-size:19px; }
    .midocean-quick-title { font-size:19px; }
    /* galeria miniatur - mniejsze kafelki, by się mieściły */
    .midocean-thumb { width:48px; height:48px; }
    /* karty produktów - czytelniejsze na 1 kolumnie */
    .midocean-card-title { font-size:16px; }
    /* kalkulator i formularz - pełna szerokość, wygodne pola */
    .midocean-calc, .midocean-form { padding:18px; }
    .midocean-print { margin-top:28px; }
}

/* Bezpiecznik: nic nie wychodzi poza ekran w poziomie */
.midocean-wrap, .midocean-single { overflow-x:hidden; }
.midocean-wrap img, .midocean-single img { max-width:100%; height:auto; }

/* ---------- v0.9.4: STAN POD RAMKĄ (zintegrowany, mniejszy) ---------- */
.midocean-stockline {
    display:inline-flex; align-items:center; gap:6px;
    font-size:9px;                      /* było 12px na badge -> mniejsze o 3pkt */
    font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    margin-bottom:8px;
}
.midocean-stockdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.midocean-stockline-in  { color:#378add; }
.midocean-stockline-in .midocean-stockdot  { background:#378add; box-shadow:0 0 6px rgba(55,138,221,.6); }
.midocean-stockline-out { color:#8b8794; }
.midocean-stockline-out .midocean-stockdot { background:#8b8794; }

/* NOWOŚĆ zostaje na zdjęciu jako jedyny badge */
.midocean-card-image { position:relative; }

/* ---------- v0.9.5: STRONA METODY ZNAKOWANIA ---------- */
.midocean-methods { color:var(--mid-text,#f2f0f6); }
.midocean-methods-intro { font-size:16px; line-height:1.7; color:var(--mid-muted,#a39fb0); margin:0 0 30px; }
.midocean-methods-intro strong { color:var(--mid-text,#f2f0f6); }
.midocean-methods-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:760px){ .midocean-methods-grid { grid-template-columns:1fr; } }
.midocean-method {
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d);
    border-radius:14px; padding:22px;
}
.midocean-method-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.midocean-method-ico {
    width:46px; height:46px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:rgba(214,0,127,.12); color:var(--mid-accent-2,#ff3ba0);
}
.midocean-method-ico svg { width:26px; height:26px; }
.midocean-method-name { font-size:19px; font-weight:800; margin:0; color:var(--mid-text,#f2f0f6); }
.midocean-method-desc { font-size:14px; line-height:1.6; color:var(--mid-muted,#a39fb0); margin:0 0 14px; }
.midocean-method-meta { margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; }
.midocean-method-meta dt { color:var(--mid-accent-2,#ff3ba0); font-weight:700; }
.midocean-method-meta dd { color:var(--mid-text,#f2f0f6); margin:0; }
.midocean-methods-cta {
    margin-top:30px; padding:28px; text-align:center; border-radius:16px;
    background:linear-gradient(135deg, rgba(214,0,127,.15), rgba(255,59,160,.08));
    border:1px solid var(--mid-border,#322e3d);
}
.midocean-methods-cta h3 { font-size:21px; font-weight:800; margin:0 0 8px; color:var(--mid-text,#f2f0f6); }
.midocean-methods-cta p { font-size:15px; color:var(--mid-muted,#a39fb0); margin:0 0 18px; line-height:1.6; }
.midocean-methods-cta .midocean-cta-button { display:inline-block; width:auto; }

/* ---------- v0.9.6: BLOK POD KATEGORIAMI (metody/FAQ/CTA) ---------- */
.midocean-side-extras { margin-top:18px; padding-top:18px; border-top:1px solid var(--mid-border,#322e3d); }
.midocean-side-promo {
    display:flex; gap:10px; align-items:flex-start; padding:14px;
    background:linear-gradient(135deg, rgba(214,0,127,.15), rgba(255,59,160,.06));
    border:1px solid var(--mid-border,#322e3d); border-radius:12px; text-decoration:none; margin-bottom:16px;
}
.midocean-side-promo-ico { flex-shrink:0; width:34px; height:34px; color:var(--mid-accent-2,#ff3ba0); }
.midocean-side-promo-ico svg { width:100%; height:100%; }
.midocean-side-promo-txt { display:flex; flex-direction:column; gap:3px; }
.midocean-side-promo-txt strong { font-size:14px; color:var(--mid-text,#f2f0f6); }
.midocean-side-promo-txt small { font-size:11.5px; color:var(--mid-muted,#a39fb0); line-height:1.4; }
.midocean-side-promo:hover { border-color:var(--mid-accent,#d6007f); }

.midocean-side-faq h4 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--mid-muted,#a39fb0); margin:0 0 8px; }
.midocean-faq-item { border-bottom:1px solid var(--mid-border,#322e3d); }
.midocean-faq-item summary {
    cursor:pointer; padding:9px 0; font-size:13px; font-weight:600; color:var(--mid-text,#f2f0f6);
    list-style:none; display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.midocean-faq-item summary::-webkit-details-marker { display:none; }
.midocean-faq-item summary::after { content:'+'; color:var(--mid-accent-2,#ff3ba0); font-size:16px; flex-shrink:0; }
.midocean-faq-item[open] summary::after { content:'−'; }
.midocean-faq-item p { font-size:12.5px; color:var(--mid-muted,#a39fb0); line-height:1.5; margin:0 0 10px; }

.midocean-side-cta {
    margin-top:16px; padding:14px; text-align:center; border-radius:12px;
    background:var(--mid-surface-2,#26232f); border:1px solid var(--mid-border,#322e3d);
}
.midocean-side-cta strong { display:block; font-size:13px; color:var(--mid-muted,#a39fb0); margin-bottom:6px; }
.midocean-side-phone { font-size:19px; font-weight:800; color:var(--mid-accent-2,#ff3ba0); text-decoration:none; }

/* ---------- v0.9.9: zagnieżdżone podkategorie (L3) w sidebarze ---------- */
.midocean-side-sub .midocean-side-sub {
    margin-left:14px; border-left:1px solid var(--mid-border,#322e3d);
}
.midocean-side-sub .midocean-side-toggle { font-size:11px; }
.midocean-side-sub .midocean-side-link { font-size:12.5px; }
.midocean-side-sub .midocean-side-sub .midocean-side-link { font-size:12px; color:var(--mid-muted,#a39fb0); }

/* ---------- v1.2: KONFIGURATOR NADRUKU (krokowy) ---------- */
.midocean-configurator {
    margin-top:18px; padding-top:18px; border-top:1px solid var(--mid-border,#322e3d);
}
.midocean-cfg-title { font-size:15px; font-weight:700; margin:0 0 14px; color:var(--mid-text,#f2f0f6); }
.midocean-cfg-step { display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.midocean-cfg-num {
    flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--mid-accent,#d6007f); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.midocean-cfg-body { flex:1; min-width:0; }
.midocean-cfg-body > label { display:block; font-size:12px; color:var(--mid-muted,#a39fb0); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }

.midocean-cfg-positions { display:flex; gap:8px; flex-wrap:wrap; }
.midocean-cfg-pos {
    width:90px; padding:8px; border:2px solid var(--mid-border,#322e3d); border-radius:10px; background:var(--mid-surface-2,#26232f);
    cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; transition:border-color .15s;
}
.midocean-cfg-pos:hover { border-color:var(--mid-accent-2,#ff3ba0); }
.midocean-cfg-pos.active { border-color:var(--mid-accent,#d6007f); background:rgba(214,0,127,.1); }
.midocean-cfg-pos img { width:100%; height:54px; object-fit:contain; background:#fff; border-radius:6px; }
.midocean-cfg-pos-name { font-size:11px; font-weight:600; color:var(--mid-text,#f2f0f6); text-align:center; line-height:1.2; }
.midocean-cfg-pos-size { font-size:10px; color:var(--mid-accent-2,#ff3ba0); }

.midocean-cfg-techs { display:flex; gap:8px; flex-wrap:wrap; }
.midocean-cfg-tech {
    position:relative; padding:10px 14px; border:2px solid var(--mid-border,#322e3d); border-radius:10px;
    background:var(--mid-surface-2,#26232f); cursor:pointer; transition:border-color .15s; text-align:left;
}
.midocean-cfg-tech:hover { border-color:var(--mid-accent-2,#ff3ba0); }
.midocean-cfg-tech.active { border-color:var(--mid-accent,#d6007f); background:rgba(214,0,127,.1); }
.midocean-cfg-tech.recommended { border-color:var(--mid-accent-2,#ff3ba0); }
.cfg-tech-name { display:block; font-size:13px; font-weight:600; color:var(--mid-text,#f2f0f6); }
.cfg-tech-badge { display:inline-block; margin-top:3px; font-size:9px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:999px; background:var(--mid-accent-2,#ff3ba0); color:#fff; }
.cfg-tech-ind { display:block; margin-top:3px; font-size:10px; color:var(--mid-muted,#a39fb0); font-style:italic; }
.cfg-tech-lead { display:inline-block; margin-top:3px; margin-right:5px; font-size:10px; color:var(--mid-muted,#a39fb0); }
.midocean-lead-line .midocean-line-lead { color:var(--mid-text,#f2f0f6); font-weight:600; }
.midocean-lead-line span { color:var(--mid-muted,#a39fb0); }

.midocean-cfg-step-colours .midocean-colours {
    width:80px; background:var(--mid-surface-2,#26232f); border:1px solid var(--mid-border,#322e3d);
    border-radius:8px; padding:8px 12px; color:var(--mid-text,#f2f0f6); font-size:15px;
}

/* ---------- v1.3: KOLOROWE BOKSY WARIANTÓW ---------- */
.midocean-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.midocean-swatch {
    width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer;
    padding:0; box-shadow:0 0 0 1px rgba(255,255,255,.12); transition:transform .12s, border-color .12s;
}
.midocean-swatch:hover { transform:scale(1.1); }
.midocean-swatch.active { border-color:var(--mid-accent-2,#ff3ba0); box-shadow:0 0 0 2px var(--mid-accent,#d6007f); }
.midocean-variant-name { color:var(--mid-text,#f2f0f6); }

/* konfigurator: techniki jako pełna szerokość, pozycje jako karty obok */
.midocean-cfg-techs { display:flex; gap:8px; flex-wrap:wrap; }
.midocean-cfg-step { align-items:flex-start; }

/* ---------- v1.4: PRZEŁĄCZNIK CENA ZA SZTUKĘ / CAŁOŚĆ ---------- */
.midocean-price-toggle {
    display:flex; gap:0; margin-bottom:14px; border:1px solid var(--mid-border,#322e3d); border-radius:10px; overflow:hidden;
}
.midocean-pt-btn {
    flex:1; padding:9px 12px; border:none; cursor:pointer; font-size:13px; font-weight:600;
    background:var(--mid-surface-2,#26232f); color:var(--mid-muted,#a39fb0); transition:all .15s;
}
.midocean-pt-btn.active { background:var(--mid-accent,#d6007f); color:#fff; }
.midocean-calc-qtynote { font-size:12px; color:var(--mid-muted,#a39fb0); margin:4px 0 0; text-align:right; }
.midocean-calc-total .midocean-total-price { font-size:26px; }

/* ---------- v1.5: PRODUKTY POWIĄZANE ---------- */
.midocean-related { margin-top:44px; --mid-surface:#1d1b26; --mid-border:#322e3d; --mid-text:#f2f0f6; --mid-muted:#a39fb0; --mid-accent-2:#ff3ba0; }
.midocean-related-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media (max-width:1100px){ .midocean-related-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .midocean-related-grid { grid-template-columns:repeat(2,1fr); } }
.midocean-related-card {
    display:flex; flex-direction:column; gap:6px; text-decoration:none; padding:8px;
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d); border-radius:10px;
    transition:border-color .15s, transform .15s;
}
.midocean-related-card:hover { border-color:var(--mid-accent-2,#ff3ba0); transform:translateY(-3px); }
.midocean-related-img { aspect-ratio:1; background:#fff; border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.midocean-related-img img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.midocean-related-name { font-size:12px; font-weight:600; color:var(--mid-text,#f2f0f6); line-height:1.25; }
.midocean-related-price { font-size:12px; color:var(--mid-accent-2,#ff3ba0); font-weight:700; }

/* ---------- PŁYWAJĄCE PRZYCISKI ---------- */
.midocean-floating { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:9999; }
.midocean-float-btn {
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    background:#d6007f; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.35); transition:background .2s, transform .15s;
}
.midocean-float-btn:hover { background:#ff3ba0; transform:translateY(-2px); }
.midocean-float-btn span { font-size:24px; line-height:1; color:#fff !important; font-weight:700; }
.midocean-float-btn svg { width:22px; height:22px; }

/* ---------- v1.6: BREADCRUMBS + linia obsługi ---------- */
.midocean-breadcrumbs {
    font-size:13px; color:#a39fb0; margin:0 0 18px; padding:10px 0; line-height:1.6;
}
.midocean-breadcrumbs a { color:#a39fb0; text-decoration:none; }
.midocean-breadcrumbs a:hover { color:#ff3ba0; }
.midocean-bc-current { color:#f2f0f6; font-weight:600; }
.midocean-bc-sep { color:#56525f; margin:0 2px; }
.midocean-handling-line span, .midocean-handling-line strong { font-size:12px; color:#a39fb0; font-weight:500; }

/* ---------- v1.9: STRONA WARUNKI I FAQ ---------- */
.midocean-terms { --mid-surface:#1d1b26; --mid-border:#322e3d; --mid-text:#f2f0f6; --mid-muted:#a39fb0; --mid-accent-2:#ff3ba0; color:var(--mid-text,#f2f0f6); }
.midocean-terms-list { display:flex; flex-direction:column; gap:14px; }
.midocean-term {
    display:flex; gap:16px; align-items:flex-start; padding:20px;
    background:var(--mid-surface,#1d1b26); border:1px solid var(--mid-border,#322e3d); border-radius:14px;
}
.midocean-term-ico {
    flex-shrink:0; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:rgba(214,0,127,.12); color:var(--mid-accent-2,#ff3ba0);
}
.midocean-term-ico svg { width:24px; height:24px; }
.midocean-term-body h3 { font-size:18px; font-weight:800; margin:0 0 8px; color:var(--mid-text,#f2f0f6); }
.midocean-term-body p { font-size:14px; line-height:1.65; color:var(--mid-muted,#a39fb0); margin:0; }
.midocean-term-body strong { color:var(--mid-text,#f2f0f6); }
.midocean-term-body a { color:var(--mid-accent-2,#ff3ba0); }
.midocean-terms-faq { max-width:820px; }
.midocean-terms-faq .midocean-faq-item { border-bottom:1px solid var(--mid-border,#322e3d); }
.midocean-terms-faq summary { padding:14px 0; font-size:15px; font-weight:600; color:var(--mid-text,#f2f0f6); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.midocean-terms-faq summary::-webkit-details-marker { display:none; }
.midocean-terms-faq summary::after { content:'+'; color:var(--mid-accent-2,#ff3ba0); font-size:20px; }
.midocean-terms-faq .midocean-faq-item[open] summary::after { content:'−'; }
.midocean-terms-faq p { font-size:14px; color:var(--mid-muted,#a39fb0); line-height:1.6; margin:0 0 14px; }

/* ---------- v1.11: STRONY MIAST ---------- */
.midocean-city-h1 { font-size:30px; font-weight:800; color:var(--mid-text,#f2f0f6); margin:0 0 18px; }
.midocean-city-intro { font-size:15px; line-height:1.7; color:var(--mid-muted,#a39fb0); margin-bottom:26px; max-width:900px; }
.midocean-city-intro p { margin:0 0 14px; }

/* ---------- v1.12: STRONA MIASTA - struktura ---------- */
.midocean-city-hook {
    font-size:20px; font-weight:700; line-height:1.4; color:var(--mid-text,#f2f0f6);
    margin:0 0 16px; padding-left:14px; border-left:3px solid var(--mid-accent,#d6007f);
}
.midocean-city-intro { font-size:15px; line-height:1.7; color:var(--mid-muted,#a39fb0); margin-bottom:18px; max-width:900px; }
.midocean-city-intro p { margin:0 0 14px; }
.midocean-city-benefits {
    list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; max-width:700px;
}
@media (max-width:600px){ .midocean-city-benefits { grid-template-columns:1fr; } }
.midocean-city-benefits li { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--mid-text,#f2f0f6); font-weight:600; }
.midocean-city-check {
    flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(30,200,133,.18); color:#1ec885;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.midocean-city-ctahook {
    display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
    background:linear-gradient(135deg, rgba(214,0,127,.15), rgba(255,59,160,.06));
    border:1px solid var(--mid-border,#322e3d); border-radius:14px; padding:18px 22px; margin-bottom:28px;
}
.midocean-city-ctahook span { font-size:16px; font-weight:600; color:var(--mid-text,#f2f0f6); flex:1; min-width:240px; }

/* ---------- v1.14: REALIZACJE (portfolio) ---------- */
.midocean-portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .midocean-portfolio-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .midocean-portfolio-grid { grid-template-columns:1fr; } }
.midocean-portfolio-card {
    text-decoration:none; border:1px solid #322e3d; border-radius:14px; overflow:hidden;
    background:#1d1b26; transition:transform .15s, border-color .15s; display:block;
}
.midocean-portfolio-card:hover { transform:translateY(-4px); border-color:#ff3ba0; }
.midocean-portfolio-img { aspect-ratio:4/3; background:#fff; overflow:hidden; }
.midocean-portfolio-img img { width:100%; height:100%; object-fit:cover; }
.midocean-portfolio-info { padding:14px 16px; }
.midocean-portfolio-info h3 { font-size:16px; font-weight:700; color:#f2f0f6; margin:0 0 8px; }
.midocean-portfolio-tech {
    display:inline-block; font-size:11px; padding:3px 9px; border-radius:999px;
    background:rgba(214,0,127,.15); color:#ff3ba0; font-weight:600; margin-right:6px;
}
.midocean-portfolio-client { font-size:12px; color:#a39fb0; }
.midocean-real-hero { border-radius:16px; overflow:hidden; margin:18px 0 24px; background:#fff; }
.midocean-real-hero img { width:100%; height:auto; display:block; }
.midocean-real-meta { margin-bottom:6px; }
.midocean-real-fb { margin:24px 0; }

/* Pasek wyszukiwania na karcie produktu */
.midocean-search-single{margin:0 0 22px;max-width:560px;}
.midocean-search-single .midocean-search-input{flex:1;}

/* Strony miast — blok technik/atutów */
.midocean-city-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0 6px;}
.midocean-city-method{border:1px solid #e6e6ea;border-left:3px solid #d6007f;border-radius:10px;padding:12px 14px;background:#fff;}
.midocean-city-method strong{display:block;font-size:15px;margin-bottom:3px;}
.midocean-city-method span{font-size:13px;color:#555;line-height:1.4;}
.midocean-city-approach{margin:10px 0 4px;color:#444;font-size:14px;}
.midocean-city-links{margin-top:24px;padding-top:14px;border-top:1px solid #eee;font-size:13px;color:#555;line-height:1.9;}
.midocean-city-links a{color:#d6007f;text-decoration:none;}
.midocean-city-links a:hover{text-decoration:underline;}

/* Badge dostawy na karcie */
.midocean-delivery-badge{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0;padding:9px 12px;background:#f0fbf4;border:1px solid #cdeed8;border-radius:10px;font-size:13px;}
.midocean-deliv-fast{font-weight:700;color:#1d7a3e;}
.midocean-deliv-print{color:#1d2327;font-weight:600;}
.midocean-deliv-note{color:#646970;font-size:12px;}