/**
 * Everything Kitchens - Amasty Blog styling for the Hyva theme.
 *
 * Ports the visual design already used on the live production blog
 * (https://www.everythingkitchens.com/blog.html) into the Hyva-based
 * Amasty_Blog templates, since the Hyva theme's CSS reset otherwise
 * leaves these pages unstyled.
 *
 * Scope: this file is only enqueued on Amasty Blog pages (see
 * layout/amblog_index_font.xml), and every rule below is additionally
 * namespaced under the blog route body classes as a safety net so
 * nothing here can leak onto non-blog pages.
 */

:is(body.amblog-index-index,
    body.amblog-index-post,
    body.amblog-index-category,
    body.amblog-index-author,
    body.amblog-index-tag,
    body.amblog-index-search) {
    --amblog-accent: #8b0b04;
    --amblog-accent-dark: #6e0903;
    --amblog-text: #333333;
    --amblog-text-light: #999999;
    --amblog-input-text: #525252;
    --amblog-border: #e5e5e5;
    --amblog-title-dark: #1a1a1a;
    --amblog-card-radius: 6px;
    --amblog-btn-radius: 3px;
    --amblog-card-shadow: 0 2px 4px rgba(84, 95, 125, .12), 0 5px 8px rgba(155, 159, 174, .1);
}

/* -----------------------------------------------------------------
   Page title ("Blog", category name, tag name, author name, ...)
   ----------------------------------------------------------------- */
body.amblog-index-index .page-title,
body.amblog-index-category .page-title,
body.amblog-index-author .page-title,
body.amblog-index-tag .page-title,
body.amblog-index-search .page-title,
body.amblog-index-post .page-title {
    /* EK: article page title, same style as the list pages */
    color: var(--amblog-text) !important;
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

/* -----------------------------------------------------------------
   Shared card look for post containers + sidebar widgets
   ----------------------------------------------------------------- */
.amblog-index-index .amblog-post-list,
.amblog-index-index .amblog-post-container,
.amblog-index-index .amblog-widget-container,
.amblog-index-post .amblog-post-list,
.amblog-index-post .amblog-post-container,
.amblog-index-post .amblog-widget-container,
.amblog-index-category .amblog-post-list,
.amblog-index-category .amblog-post-container,
.amblog-index-category .amblog-widget-container,
.amblog-index-author .amblog-post-list,
.amblog-index-author .amblog-post-container,
.amblog-index-author .amblog-widget-container,
.amblog-index-tag .amblog-post-list,
.amblog-index-tag .amblog-post-container,
.amblog-index-tag .amblog-widget-container,
.amblog-index-search .amblog-post-list,
.amblog-index-search .amblog-post-container,
.amblog-index-search .amblog-widget-container,
.amblog-container-list .amblog-post-container,
.amblog-grid-list .amblog-post-container,
.amblog-search {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: var(--amblog-card-radius) !important;
    box-shadow: var(--amblog-card-shadow) !important;
    overflow: hidden !important;
}

.amblog-container-list .amblog-post-container,
.amblog-grid-list > .amblog-post-container,
.amblog-grid-list > .list-item {
    margin-bottom: 24px !important;
}

.amblog-post-list,
.amblog-widget-container,
.amblog-search {
    margin-bottom: 24px !important;
}


/* Widget / card heading ("Featured posts", "Categories", "Search the
   blog", "Recent Posts", ...) */
.amblog-title {
    color: var(--amblog-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 20px 25px !important;
    margin: 0 !important;
    display: block !important;
}

/* -----------------------------------------------------------------
   Post title, meta line, tags, excerpt
   ----------------------------------------------------------------- */
.amblog-post-title,
h2.amblog-post-title {
    margin: 0 0 8px !important;
    padding: 0 25px !important;
}

a.post-title,
a.amblog-headline,
.amblog-post-title a {
    color: var(--amblog-title-dark) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

a.post-title,
a.amblog-headline,
.amblog-post-title a {
    font-size: 1.5rem;
}

a.post-title:hover,
a.amblog-headline:hover,
.amblog-post-title a:hover {
    color: var(--amblog-accent) !important;
    text-decoration: underline !important;
}

.amblog-dates {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 25px 0 !important;
    color: var(--amblog-text-light) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}

.amblog-content > .amblog-dates:first-child {
    padding-top: 20px !important;
}

.amblog-date,
.amblog-views,
.amblog-minread {
    color: var(--amblog-text-light) !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}

.amblog-content {
    padding-bottom: 4px !important;
}

.amblog-content .tags {
    padding: 0 25px !important;
}

.amblog-shot {
    color: var(--amblog-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 8px 25px 0 !important;
}

/* Post image */
.amblog-post-container > .post-image,
.amblog-post-container .post-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.amblog-footer {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 25px 0 !important;
}

.amblog-features {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 4px !important;
    column-gap: 10px !important;
    color: var(--amblog-text) !important;
    font-size: 13px !important;
}

.amblog-wrap > svg,
.amblog-wrap > .amblog-author-avatar {
    flex-shrink: 0 !important;
}

.amblog-no-comments {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.amblog-no-comments > svg {
    flex-shrink: 0 !important;
}

.amblog-wrap .amblog-ref:not(:last-child)::after {
    content: ",";
}

.amblog-features > *:not(:last-child) {
    position: relative !important;
    padding-right: 10px !important;
}

.amblog-features > *:not(:last-child)::after {
    content: "\2022";
    position: absolute !important;
    right: -6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--amblog-text-light) !important;
}

.amblog-read {
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    background: var(--amblog-accent) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 12px 20px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.amblog-read::after {
    content: "\2192";
}

.amblog-read:hover {
    background: var(--amblog-accent-dark) !important;
    color: #ffffff !important;
}

/* Visible focus state (WCAG 2.4.7): a 2px outline in the darker accent
   shade, offset so it doesn't get clipped by the button's own radius. */
.amblog-read:focus-visible {
    outline: 2px solid var(--amblog-accent-dark) !important;
    outline-offset: 2px !important;
    background: var(--amblog-accent-dark) !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------
   Grid view (grid.phtml)
   ----------------------------------------------------------------- */
.amblog-grid-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
}

.amblog-grid-list > .list-item {
    margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------
   "Posted in: category" line (on grid/list items and post page)
   ----------------------------------------------------------------- */
.amblog-wrap {
    font-size: 14px !important;
}

.amblog-posted-in {
    color: var(--amblog-text) !important;
    font-weight: 400 !important;
}

.amblog-ref {
    color: var(--amblog-accent) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.amblog-ref:hover {
    text-decoration: underline !important;
}

/* -----------------------------------------------------------------
   Featured posts widget (slick carousel). Amasty renders this as a
   slick slider; the fallback rules below keep it looking like a row
   of cards any time the slider script hasn't taken over the markup
   (e.g. slick JS not yet initialized).
   ----------------------------------------------------------------- */
.amblog-post-list .amblog-list {
    padding: 0 25px 25px;
}

.post-items:not(.slick-initialized) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.post-items:not(.slick-initialized) > .post-item {
    flex: 1 1 220px !important;
    /*max-width: 280px !important;*/
}

.post-item {
    color: var(--amblog-text) !important;
}

.post-item .post-image {
    display: block !important;
    border-radius: var(--amblog-card-radius) !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

.post-item .post-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.post-item-details .post-title,
.post-item-details .amblog-headline {
    display: block !important;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
}

.post-item-details .short-description {
    font-size: 13px !important;
    color: var(--amblog-text-light) !important;
    margin-bottom: 6px !important;
}

.amblog-featured-card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 12px !important;
}

.ampost-link {
    color: var(--amblog-accent) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.ampost-link:hover {
    text-decoration: underline !important;
}

.sidebar.sidebar-additional .amblog-widget-container.-recent-posts .amblog-list,
.sidebar.sidebar-additional .amblog-widget-container.-recent-posts .amblog-title,
.sidebar.sidebar-additional .amblog-widget-container.-comments .amblog-list,
.sidebar.sidebar-additional .amblog-widget-container.-comments .amblog-title,
.sidebar.sidebar-additional .amblog-widget-container.-categories .amblog-list,
.sidebar.sidebar-additional .amblog-widget-container.-categories .amblog-title {
    padding: 4px 10px !important
}

.sidebar.sidebar-additional .amblog-widget-container.-comments .amblog-comment {
    padding: 10px 0;
}

/* -----------------------------------------------------------------
   Sidebar: categories list
   ----------------------------------------------------------------- */
.amblog-list {
    padding: 0 25px 25px !important;
}

@media (max-width: 850px) {
    .amblog-list {
        padding: 0 8px 0 !important;
    }

    .amblog-post-list .amblog-list {
        padding: 0 25px 25px !important;
    }

    .sidebar.sidebar-additional .amblog-widget-container.-categories .amblog-list {
        padding: 0 !important;
    }
}

.amblog-categories {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.amblog-categories .amblog-categories {
    padding-left: 16px !important;
}

.amblog-category {
    /*border-bottom: 1px solid var(--amblog-border) !important;*/
}

.amblog-category:last-child {
    border-bottom: 0 !important;
}

.amblog-category > .amblog-link {
    display: flex !important;
    /*align-items: center !important;*/
    justify-content: space-between !important;
    gap: 8px !important;
    /*padding: 10px 0 !important;*/
    color: var(--amblog-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.amblog-category > .amblog-link:hover,
.amblog-category.active > .amblog-link {
    color: var(--amblog-accent) !important;
}

.amblog-category-count {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: var(--amblog-text-light) !important;
    font-weight: 400 !important;
}

/* -----------------------------------------------------------------
   Sidebar: search
   ----------------------------------------------------------------- */
.amblog-form-container {
    display: block !important;
}

.amblog-field {
    position: relative !important;
}

.amblog-input {
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--amblog-input-text) !important;
    background: #ffffff !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--amblog-border) !important;
    border-radius: var(--amblog-btn-radius) !important;
    margin-bottom: 10px !important;
}

.amblog-input:focus {
    outline: none !important;
    border-color: var(--amblog-accent) !important;
}

.amblog-btn {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    background: var(--amblog-accent) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 15px !important;
    border: 0 !important;
    border-radius: var(--amblog-btn-radius) !important;
    cursor: pointer !important;
}

.amblog-btn:hover,
.amblog-btn:focus {
    background: var(--amblog-accent-dark) !important;
}

.amblog-form-comment .amblog-btn {
    display: inline-block !important;
    width: 230px !important;
    padding: 14px 0 !important;
}

.amblog-form-comment .amblog-input {
    background: #f9f9f9 !important;
}

.amblog-form-search.amblog-item {
    padding: 0 25px 25px;
}

@media (min-width: 1024px) {
    .amblog-form-comment .amblog-wrapper {
        width: 49% !important;
    }
}

/* -----------------------------------------------------------------
   Sidebar: recent posts / recent comments / author info
   ----------------------------------------------------------------- */
.amblog-post-list.amblog-widget-container .amblog-list,
.amblog-widget-container .amblog-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.post-item-info {
    display: flex !important;
    gap: 12px !important;
}

.post-item-info .post-image {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: var(--amblog-card-radius) !important;
    overflow: hidden !important;
}

.post-item-info .post-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.post-item-info .post-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.post-item-info .post-title,
.post-item-info .amblog-headline {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
}

.amblog-widget-container.-comments .amblog-headline {
    font-size: 1rem;
}

.post-item-info .amblog-dates {
    padding: 0 !important;
    gap: 8px !important;
}

.amblog-item.-comment {
    font-size: 14px;
}

.amblog-comment.-level-top {
    margin-bottom: 20px;
}

/* -----------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------- */
.amblog-pager-container {
    padding: 20px 25px !important;
}

.amblog-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}

.amblog-pagination {
    color: var(--amblog-text) !important;
    font-size: 16px !important;
}

/* Vendor pager.phtml only gives the "newer" link the -new class, so both arrows
   are styled via .amblog-link and the glyph is chosen from rel="prev|next". */
.amblog-pager-container .amblog-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    background: var(--amblog-accent) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.amblog-pager-container .amblog-link[rel="prev"]::before {
    content: "\2190";
}

.amblog-pager-container .amblog-link[rel="next"]::before {
    content: "\2192";
}

.amblog-pager-container .amblog-link.-disabled {
    background: #c4c4c4 !important;
    color: var(--amblog-accent) !important;
    pointer-events: none !important;
}

/* -----------------------------------------------------------------
   Comment form icons

   Amasty's "-classic" color scheme (the icon color class rendered by
   $block->getColorClass(), used on the comment-bubble icon in the
   comment form as well as the post-list/sidebar icons) defaults to
   their brand blue (#499bf8). Production recolors it to a neutral
   gray to match the rest of the site's icon palette instead.
   ----------------------------------------------------------------- */
.amblog-svg.-classic {
    fill: #999999 !important;
}

@media (max-width: 767px) {
    .amblog-form-comment .amblog-svg.comment {
        display: none !important;
    }
}

/* -----------------------------------------------------------------
   Sidebar "Recent comments" footer (author + date)
   The user icon is an <svg><use> sprite with no intrinsic size; without
   an explicit size the browser gives it a default 300x150 box, which
   pushed the author name far below the icon.
   ----------------------------------------------------------------- */
.amblog-footer-block .amblog-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.amblog-footer-block .amblog-author .amblog-svg {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
}

.amblog-footer-block .amblog-date {
    margin-top: 2px;
    font-size: 12px;
    color: #707070;
}

/* -----------------------------------------------------------------
   Comment item header (author + date), incl. comments posted via AJAX.
   The user icon is an <svg><use> sprite with no intrinsic size and
   would otherwise render as a default 300x150 box.
   ----------------------------------------------------------------- */
.amblog-comment .amblog-header .amblog-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amblog-comment .amblog-header .amblog-author .amblog-svg {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
}

.amblog-comment .amblog-header .amblog-date {
    margin: 2px 0 6px;
    font-size: 12px;
    color: #707070;
}

/* -----------------------------------------------------------------
   Empty states
   ----------------------------------------------------------------- */
.amblog-empty,
.message.notice {
    background: #ffffff !important;
    border-radius: var(--amblog-card-radius) !important;
    box-shadow: var(--amblog-card-shadow) !important;
    padding: 20px 25px !important;
    color: var(--amblog-text-light) !important;
    margin-bottom: 24px !important;
}

/* -----------------------------------------------------------------
   Related products slider (post/related_products.phtml override)

   Amasty's vendor markup wraps this grid in data-mage-init="amBlogSlider",
   which needs Magento's legacy jQuery-widget bootstrap to turn it into a
   Slick carousel - Hyva never loads that bootstrap, so the override
   template replaces it with a plain scrollable track (CSS scroll-snap)
   plus two Alpine-driven arrow buttons. This section styles that track,
   the arrows, and the product cards inside it - none of which had any
   EK styling before (the vendor CSS only ever expected Slick's own
   generated markup, which never existed on this theme).
   ----------------------------------------------------------------- */
.amblog-related-wrapper .amblog-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--amblog-title-dark) !important;
    padding: 20px 25px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--amblog-border) !important;
}

.amblog-related-slider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 25px !important;
}

@media (max-width: 850px) {
    .amblog-related-slider {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .amblog-aside-right .amblog-widget-container.-comments .amblog-comment {
        padding: 10px 0;
    }
}

.amblog-related-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.amblog-related-track::-webkit-scrollbar {
    display: none !important;
}

.amblog-related-track > .amblog-item-product {
    scroll-snap-align: start !important;
    flex: 0 0 calc(100% - 10px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid var(--amblog-border) !important;
    border-radius: var(--amblog-card-radius) !important;
    overflow: hidden !important;
    padding: 16px !important;
}

@media (min-width: 480px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(50% - 10px) !important;
    }
}

@media (min-width: 768px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(50% - 10px) !important;
    }
}

@media (min-width: 1024px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(25% - 15px) !important;
    }
}

.amblog-related-wrapper {
    container-type: inline-size !important;
    container-name: amblog-related !important;
}

@container amblog-related (min-width: 480px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(50% - 10px) !important;
    }
}

@container amblog-related (min-width: 768px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(50% - 10px) !important;
    }
}

@container amblog-related (min-width: 1024px) {
    .amblog-related-track > .amblog-item-product {
        flex-basis: calc(25% - 15px) !important;
    }
}

.amblog-related-track .product-item-photo {
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

.amblog-related-track .product-item-photo .product-image-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.amblog-related-track .product-item-photo .product-image-wrapper {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

.amblog-related-track .product-item-photo img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.amblog-related-track .product-item-link {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    color: var(--amblog-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    min-height: calc(1.4em * 2) !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
}

.amblog-related-track .product-item-link:hover {
    color: var(--amblog-accent) !important;
    text-decoration: underline !important;
}

.amblog-related-track .price-box {
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.amblog-related-track .product-item-actions {
    margin-top: auto !important;
}

.amblog-related-track .action.tocart {
    display: block !important;
    width: 100% !important;
    background: #3a9b3a !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: var(--amblog-btn-radius) !important;
    cursor: pointer !important;
}

.amblog-related-track .action.tocart:hover,
.amblog-related-track .action.tocart:focus {
    background: #2f7f2f !important;
}

.amblog-add-to-cart-form {
    margin: 0 !important;
}

.amblog-related-track .stock.unavailable {
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--amblog-text-light) !important;
    padding: 10px !important;
    border: 1px solid var(--amblog-border) !important;
    border-radius: var(--amblog-btn-radius) !important;
}

.amblog-related-arrow {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--amblog-border) !important;
    background: #ffffff !important;
    color: var(--amblog-text) !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.amblog-related-arrow svg {
    width: 18px !important;
    height: 18px !important;
}

.amblog-related-arrow:hover,
.amblog-related-arrow:focus-visible {
    background: var(--amblog-accent) !important;
    border-color: var(--amblog-accent) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* -----------------------------------------------------------------
   Responsive

   The footer row (Posted by / Posted in / comments on the left, Read
   More on the right) stays a single row down to 421px - only the
   padding/gaps/font-size tighten as the viewport narrows. Below 420px
   there isn't room for both columns on one line at a readable size,
   so the left column wraps to its own full-width line and the button
   drops to a second line, right-aligned via margin-left:auto (a
   deliberate stack, not an accident of flex-wrap).
   ----------------------------------------------------------------- */
@media (max-width: 1200px) {
    .amblog-footer {
        padding: 14px 20px 20px !important;
    }
}

@media (max-width: 992px) {
    .amblog-footer {
        padding: 14px 18px 18px !important;
        gap: 10px !important;
    }

    .amblog-features {
        font-size: 12px !important;
        column-gap: 8px !important;
    }
}

@media (max-width: 768px) {

    body.amblog-index-index .page-title,
    body.amblog-index-category .page-title,
    body.amblog-index-author .page-title,
    body.amblog-index-tag .page-title,
    body.amblog-index-search .page-title,
    body.amblog-index-post .page-title {
        font-size: 1.75rem !important;
    }

    .amblog-footer {
        padding: 12px 16px 16px !important;
    }

    .amblog-read {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 420px) {
    .amblog-footer {
        flex-wrap: wrap !important;
        row-gap: 10px !important;
    }

    .amblog-features {
        flex: 1 1 100% !important;
    }

    .amblog-read {
        margin-left: auto !important;
    }
}

.amblog-comment-content .amblog-reply {
    text-align: left !important;
}

.amblog-comment-content .amblog-reply a.amblog-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--amblog-accent) !important;
}

.amblog-comment-content .amblog-reply a.amblog-button:hover,
.amblog-comment-content .amblog-reply a.amblog-button:focus {
    color: var(--amblog-accent-dark) !important;
    text-decoration: underline !important;
}

.amblog-comment-content .amblog-reply a.amblog-button .amblog-icon {
    fill: currentColor !important;
}

/* =====================================================================
   Off-canvas "Blog Menu" (mobile only)
   Ported from source/mkcss/amblog.css, which no Hyva page loads, so the
   panel (rendered only for mobile user agents by
   templates/list/mobile_wrapper.phtml), its open button, the close x, the
   overlay and the collapsible widget headings were all unstyled.
   ===================================================================== */
.amblog-swipe.-left,
.amblog-swipe.-right {
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    z-index: 5;
    width: 50px;
    height: 50px;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    background: #f7f7f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.amblog-swipe.-right {
    right: 24px;
}

.amblog-swipe.-left {
    left: 24px;
}

.amblog-swipe:focus-visible {
    outline: 2px solid var(--amblog-accent);
    outline-offset: 2px;
}

.ek-hyva-title {
    position: relative;
}

.ek-hyva-title:has(.amblog-swipe) .page-title {
    padding-right: 64px;
}

@media only screen and (max-width: 767px) {
    .ek-hyva-title:has(.amblog-swipe) .page-title {
        font-size: 1.75rem;
        line-height: 1.25;
    }
}

.amblog-aside-right,
.amblog-aside-left {
    position: fixed;
    z-index: 1000;
    top: 0;
    display: none;
    width: 300px;
    height: 100vh;
    padding-top: 20px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 98, 176, 0.1);
    overflow-y: scroll;
}

.amblog-aside-right.active,
.amblog-aside-left.active {
    display: block;
}

.amblog-aside-right {
    right: 0;
}

.amblog-aside-left {
    left: 0;
}

.amblog-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(60, 60, 60, 0.3);
}

/* EK: off-canvas "Blog Menu" panel (opened by the swipe button above), styled
   to match production. This file's older compile drew the close button as
   two rotated bars and the widget headings with a blue two-bar arrow;
   production (newer Amasty CSS) uses a 300px white panel, a 26px "Blog
   Menu" heading with a light-grey x on its right, the widgets as cards with
   a 20px gutter, and sentence-case widget headings that end in a light-grey
   chevron which flips when the widget is open (-active, toggled by the
   script in templates/list/mobile_wrapper.phtml). */
.amblog-aside-right,
.amblog-aside-left {
    height: calc(100% - 20px);
    background: #fff;
}

.amblog-aside-right .aside-title,
.amblog-aside-left .aside-title {
    position: relative;
    margin: 10px 20px 20px;
    padding: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: #333;
}

.amblog-aside-right .amblog-close,
.amblog-aside-left .amblog-close {
    position: absolute !important;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    transform: translateY(-50%);
    cursor: pointer;
}

.amblog-aside-right .amblog-close::before,
.amblog-aside-left .amblog-close::before {
    content: none !important;
    display: none !important;
}

.amblog-aside-right .amblog-close::after,
.amblog-aside-left .amblog-close::after {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M19.09 2.35091L17.6483 0.90918L9.99911 8.55836L2.34993 0.90918L0.908203 2.35091L8.55738 10.0001L0.908203 17.6493L2.34993 19.091L9.99911 11.4418L17.6483 19.091L19.09 17.6493L11.4408 10.0001L19.09 2.35091Z' fill='%23C7C7C7'/%3E%3C/svg%3E") no-repeat center / 18px 18px !important;
}

.amblog-aside-right .mobile-block.amblog-element-block,
.amblog-aside-left .mobile-block.amblog-element-block {
    margin: 20px;
}

.amblog-aside-right .amblog-title,
.amblog-aside-left .amblog-title {
    position: relative !important;
    padding: 20px 50px 20px 25px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    cursor: pointer;
}

.amblog-aside-right .amblog-title::after,
.amblog-aside-left .amblog-title::after {
    content: none !important;
    display: none !important;
}

.amblog-aside-right .amblog-title::before,
.amblog-aside-left .amblog-title::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    width: 20px !important;
    height: 12px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='11' viewBox='0 0 20 11' fill='none'%3E%3Cpath d='M9.87656 0.454103L0.909058 8.80056L2.34879 10.2573L9.87656 3.24938L17.6511 10.4541L19.0909 9.03678L10.4113 0.926544L9.87656 0.454103Z' fill='%23C7C7C7'/%3E%3C/svg%3E") no-repeat center / contain !important;
    transform: translateY(-50%) rotate(-180deg) !important;
    cursor: pointer;
}

.amblog-aside-right .amblog-title.-active::before,
.amblog-aside-left .amblog-title.-active::before {
    transform: translateY(-50%) rotate(0deg) !important;
}

.amblog-aside-right #amblog-sidebar-categories-title,
.amblog-aside-right #amblog-sidebar-recent-post-title,
.amblog-aside-right #amblog-sidebar-recent-comments-title {
    padding: 5px 0px 5px 8px !important;
}