/* Only the V6 journal card: shared product templates remain unchanged. */
.journal-card { --journal-border: #e2e9e5; --journal-green: #258347; }
/*.journal-card > .main-container { padding: 0; }*/
.journal-card #telo {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 240px;
    grid-template-areas: "gallery options purchase";
    gap: 24px;
    align-items: start;
    margin: 24px 0;
}
.journal-card #telo::before, .journal-card #telo::after { content: none; }
.journal-card #telo > .left,
.journal-card #telo > .center,
.journal-card #telo > .right {
    float: none !important;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    order: initial;
}
.journal-card #telo > .left { grid-area: gallery; }
.journal-card #telo > .center {
    grid-area: options;
    container-type: inline-size;
    border: 1px solid var(--journal-border);
    border-radius: 14px;
    padding: 20px;
    background: #fff;
}
.journal-card #telo > .right { grid-area: purchase; }
.journal-card .product-right-sidebar {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 14px;
    border: 1px solid var(--journal-border);
    border-radius: 14px;
    background: #f7faf8;
    box-shadow: none;
}
/* Keep the purchase panel inside its reserved grid track, including on scroll. */
.journal-card #poz_fixed { position: static !important; width: 100% !important; margin: 0; }
.journal-card .product-right-sidebar-1 { margin: 0 0 12px; text-align: center; }
.journal-card .product-right-sidebar-1 img { max-width: 100%; height: auto; }
.journal-card #kupit .cart_button {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--journal-green);
    color: #fff;
}
.journal-card #kupit .cart_button:hover { background: #1b6837; }
.journal-card .tovar__info > ul { line-height: 1.7; }
.journal-card .journal-card__heading {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    margin: 22px 10px 18px;
    color: #213e2c;
}
.journal-card .center > .row,
.journal-card .center .row { min-width: 0; }
.journal-card .center .form-control { max-width: 100%; min-height: 40px; border-radius: 7px; }
.journal-card #pereplet, .journal-card #plotnost { width: 100% !important; }
.journal-card .center .propBlok { width: 100%; max-width: 100%; box-sizing: border-box; }
.journal-card .center .propBlok input[type="range"] { width: 100%; max-width: 100%; }
.journal-card .current-value { display: flex; clear: both; width: 100%; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 20px; }
.journal-card #pageSelect { min-height: 38px; margin: 0 !important; box-shadow: none; }
.journal-card .center .checkbox-one { max-width: 100%; }
.journal-card .center label.check {
    display: inline-flex;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    white-space: normal;
    line-height: 1.5 !important;
    padding-top: 7px;
    padding-bottom: 7px !important;
}
.journal-card .center label.check svg { flex-shrink: 0; }
.journal-card .center .labelInput { white-space: normal; }
.journal-card #coverGrid { display: block; height: auto; min-height: 0; }
.journal-card .center .cover-group-grid {
    display: grid;
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(auto-fill, 74px);
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    gap: 10px;
}
.journal-card .center .cover-card {
    width: 74px;
    height: auto;
    min-height: 0;
    align-self: start;
    padding: 6px 0;
    border-radius: 8px;
    box-shadow: none;
}
.journal-card .center .cover-group-title { margin: 18px 0 10px; }
.journal-card .two-pane { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.journal-card .two-pane .pane { min-width: 0; }
.journal-card .two-pane .divider { width: 100%; height: 1px; background: var(--journal-border); }
.journal-card .uploader_text { font-size: 14px !important; max-width: 100%; }
.journal-card .left img { max-width: 100%; }
.journal-card .left .clearfix { display: flow-root; }

/* Give every field room instead of squeezing two Bootstrap columns together. */
.journal-card .center .row > [class*="col-"] { width: 100%; float: none; }
.journal-card .center .row > [class*="col-"] + [class*="col-"] { margin-top: 16px; }
.journal-card .center .journal-binding,
.journal-card .center .binding-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 20px !important;
}
.journal-card .journal-binding::before,
.journal-card .journal-binding::after,
.journal-card .binding-options::before,
.journal-card .binding-options::after { content: none; }
.journal-card .center .journal-binding > [class*="col-"] {
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0;
    justify-items: start !important;
}
.journal-card .center .journal-binding > [class*="col-"]:first-child { flex-basis: 100%; }
.journal-card .journal-binding p { margin: 0 !important; }
.journal-card .journal-binding label { margin: 0; white-space: nowrap; }
.journal-card .binding-options .binding-title { flex-basis: 100%; }
.journal-card .binding-options .binding-item { flex: 0 0 auto !important; min-width: 0 !important; }
.journal-card .binding-options label { margin: 0; white-space: nowrap; }

/* Compact groups sized to the calculator itself, not the viewport. */
.journal-card .journal-paper-fields { gap: 16px; align-items: start; }
.journal-card .journal-finishing,
.journal-card .journal-extras { gap: 8px 20px; align-items: start; }
.journal-card .journal-finishing > p,
.journal-card .journal-extras > p { grid-column: 1 / -1; margin-bottom: 4px; }
.journal-card .journal-extras > .journal-cover-options,
.journal-card .journal-extras > .hard_cover { display: contents; }
.journal-card .journal-extras > .checkbox-one { width: auto !important; }
.journal-card .journal-finishing label.check,
.journal-card .journal-extras label.check { margin-bottom: 0; }
.journal-card .two-pane .pane { align-content: start; gap: 8px; }
.journal-card .two-pane .uploader { min-height: 80px; }
.journal-card .two-pane .uploader_text { min-height: 80px; display: grid; align-content: center; }

@container (min-width: 560px) {
    .journal-card .journal-paper-fields,
    .journal-card .journal-finishing,
    .journal-card .journal-extras,
    .journal-card .two-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-card .two-pane .divider { display: none; }
}

@media (min-width: 1200px) and (min-height: 900px) {
    .journal-card #telo > .left,
    .journal-card #telo > .right {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .journal-card #telo {
        grid-template-columns: 210px minmax(0, 1fr);
        grid-template-areas: "gallery options" "purchase options";
        grid-template-rows: auto 1fr;
        gap: 20px;
    }
}
@media (max-width: 767px) {
    .journal-card #telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "gallery" "options" "purchase";
        gap: 20px;
        margin-top: 12px;
    }
    .journal-card #telo > .left { width: 100%; max-width: 320px; justify-self: center; }
    .journal-card #telo > .center { padding: 16px; }
    .journal-card .journal-card__heading { font-size: 18px; }
    .journal-card .center .clearfix { display: flow-root; }
    .journal-card .current-value > span { white-space: normal !important; }
    .journal-card .product-right-sidebar-1 img {
        width: min(100%, 360px);
        max-width: 360px;
    }
    .journal-card #delivery-block {
        width: 100% !important;
        max-width: none;
        box-sizing: border-box;
    }
}