/* Sudotronic typography trial: body 18px; all headings 20px.
 * Load after the store and blog styles. Keep these overrides together so the
 * trial can be adjusted or removed without editing vendor stylesheets.
 */
body {
    font-size: 18px;
    line-height: 1.6;
}

/* OpenCart, Bootstrap and the blog theme each set their own heading sizes. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.panel-title,
footer h5,
.bm .block-title,
.bm .bm-categories .item-cateogry .title,
.bm .post-thumb .post-thumb-heading .title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    overflow-wrap: break-word;
}

h1, .h1 {
    font-weight: 700;
}

/* Text controls also have explicit 12px rules in the original theme. */
label, legend,
small, .small, .help-block,
.btn, .btn-group > .btn,
.form-control,
input.form-control, select.form-control, textarea.form-control,
.input-group input, .input-group select, .input-group .input-group-addon,
.dropdown-menu, .popover, .tooltip-inner,
#top .btn-link strong,
#search .btn-lg,
#cart > .btn,
#menu .nav > li > a, #menu .dropdown-inner a, #menu .see-all, #menu #category,
.product-thumb .price-tax,
.product-thumb .button-group button,
.pagination > li > a, .pagination > li > span,
pre, code, kbd, samp {
    font-size: 18px !important;
}

.btn, .form-control, .input-group-addon,
.dropdown-menu, .popover, .tooltip-inner,
#cart > .btn, #search .btn-lg,
#menu .dropdown-inner a, #menu .see-all {
    line-height: 1.4;
}

/* Give the larger text enough room inside the existing controls. */
input.form-control, select.form-control,
#search .input-lg {
    height: 44px;
    line-height: 1.4;
}

textarea.form-control {
    height: auto;
    min-height: 140px;
    line-height: 1.6;
}

/* Bootstrap's small input groups otherwise keep 18px text in a 30px box. */
.input-group-sm > select.form-control {
    height: 44px;
    min-height: 44px;
    padding: 6px 10px;
    line-height: 1.4;
}

#search .btn-lg, #cart > .btn {
    min-height: 44px;
}

#search .btn-lg {
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn {
    white-space: normal;
}

.input-group-btn > .btn {
    min-height: 44px;
}

.product-thumb .button-group {
    display: flex;
}

.product-thumb .button-group button {
    float: none;
    min-height: 44px;
    padding: 8px 4px;
    line-height: 1.4;
    white-space: normal;
}

.breadcrumb > li {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Category controls also work with the existing Theme Editor template.
 * Hide both comparison entry points and reclaim their layout space.
 */
#product-category #compare-total,
#product-category .product-thumb .button-group > button[onclick^="compare.add("],
#product-category #content > .row > div:has(> .form-group > #compare-total) {
    display: none;
}

#product-category #content > .row:has(#input-sort) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#product-category #content > .row > div:has(#list-view) {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 15px;
}

#product-category #content > .row > div:has(#input-sort) {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
}

#product-category #content > .row > div:has(#input-limit) {
    width: auto;
    flex: 0 0 190px;
}

#product-category .product-thumb .button-group:not(.qbutton) > button:first-child {
    width: auto;
    flex: 1 1 auto;
}

#product-category .product-thumb .button-group > button[onclick^="wishlist.add("] {
    width: 25%;
    min-width: 44px;
    flex: 0 0 25%;
}

/* Keep the purchase action recognizable at every breakpoint. The template
 * already contains a translated label; Bootstrap hides it below 1200px.
 */
#product-category .product-thumb .button-group:has(> button[onclick^="cart.add("]) {
    gap: 6px;
    padding: 8px 6px;
    border: 0;
    background: transparent;
    overflow: visible;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    padding: 10px 6px;
    border: 1px solid #16728d;
    border-radius: 6px;
    background: #16728d;
    color: #fff;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("] > span {
    display: inline !important;
    min-width: 0;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("] > .fa {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("]:hover,
#product-category .product-thumb .button-group > button[onclick^="cart.add("]:focus {
    border-color: #10586d;
    background: #10586d;
    color: #fff;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("]:active {
    background: #0b4354;
}

#product-category .product-thumb .button-group:has(> button[onclick^="cart.add("]) > button[onclick^="wishlist.add("] {
    width: 48px;
    min-height: 48px;
    flex: 0 0 48px;
    border: 1px solid #cbd5da;
    border-radius: 6px;
    background: #f5f7f8;
    color: #53636b;
    cursor: pointer;
}

#product-category .product-thumb .button-group:has(> button[onclick^="cart.add("]) > button[onclick^="wishlist.add("] > .fa {
    font-size: 18px;
}

#product-category .product-thumb .button-group:has(> button[onclick^="cart.add("]) > button[onclick^="wishlist.add("]:hover {
    background: #e5edf0;
    color: #344850;
}

#product-category .product-thumb .button-group > button[onclick^="cart.add("]:focus-visible,
#product-category .product-thumb .button-group:has(> button[onclick^="cart.add("]) > button[onclick^="wishlist.add("]:focus-visible {
    outline: 3px solid #16728d;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    #product-category #content > .row > div:has(#input-sort),
    #product-category #content > .row > div:has(#input-limit) {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* On narrow phones, put the label above the select to fit long options. */
@media (max-width: 359px) {
    #product-category .input-group:has(> #input-sort),
    #product-category .input-group:has(> #input-limit) {
        display: block;
    }

    #product-category label[for="input-sort"],
    #product-category label[for="input-limit"] {
        display: block;
        width: 100%;
        height: auto;
        padding: 0 0 6px;
        border: 0;
        background: transparent;
        text-align: left;
    }

    #product-category #input-sort,
    #product-category #input-limit {
        float: none;
        width: 100%;
        border-radius: 3px;
    }
}

/* Dreamvention's macart theme has separate 10–14px body/metadata rules.
 * Only text is overridden: icon glyphs and rating stacks keep their sizes.
 */
.bm,
.bm .bm-category-info .description,
.bm .bm-author-info .description,
.bm .bm-post-info .title-information .details,
.bm .bm-post-content .description,
.bm .bm-post-content .bm-author .author-description,
.bm .bm-post-content .bm-author .read-more,
.bm .post-thumb .post-thumb-body .short-description,
.bm .post-thumb .post-thumb-heading .author,
.bm .post-thumb .post-thumb-heading .date-published,
.bm .post-thumb .post-thumb-footer .review,
.bm .post-thumb .post-thumb-footer .view,
.bm .post-thumb .post-thumb-footer .read-more,
.bm .category-title,
.bm .bm-post-info .category li a,
.bm .post-thumb .post-thumb-heading .category li a,
.bm .bm-post-content .bm-reviews .media-heading .date-added,
.bm .form-review .control-label,
.bm .form-review .customer-info .name {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

.bm .post-thumb .post-thumb-heading .author,
.bm .post-thumb .post-thumb-heading .date-published,
.bm .category-title,
.bm .bm-post-info .category li a,
.bm .post-thumb .post-thumb-heading .category li a {
    letter-spacing: normal;
}

/* Let rich-text body copy follow the site scale, including legacy font tags.
 * Heading descendants still inherit their parent's 20px size.
 */
#tab-description,
.bm .bm-post-content .description,
.bm .post-thumb .short-description {
    font-size: 18px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

#tab-description [style*="font-size"],
#tab-description font,
.bm .description [style*="font-size"],
.bm .description font,
.bm .short-description [style*="font-size"],
.bm .short-description font {
    font-size: inherit !important;
    line-height: inherit;
}

/* Preserve 20px headings even when the editor stored an inline size. */
#tab-description h1, #tab-description h2, #tab-description h3,
#tab-description h4, #tab-description h5, #tab-description h6,
.bm .description h1, .bm .description h2, .bm .description h3,
.bm .description h4, .bm .description h5, .bm .description h6 {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

/* Existing article images/tables use fixed HTML widths. Keep readable text
 * inside a phone viewport; wide technical tables scroll within themselves.
 */
#tab-description img,
.bm .description img {
    max-width: 100%;
    height: auto !important;
}

#tab-description table,
.bm .description table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}