.article-template {
    padding-top: 10px;
    padding-bottom: 80px;
}

.article-template>*:first-child {
    padding-top: 0;
}

.article-template .media {
    display: block;
    position: relative;
    overflow: hidden;
}
/* 
.article-template .media>* {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
} */

.article-template .media>img {
    object-fit: cover;
    object-position: center center;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* .article-template__hero-container {
    padding-top: 40px;
    padding-bottom: 40px;
} */

.article-template__hero-container+.article-template__content {
    padding-top: 0;
}

.article-template__hero-small {
    height: 110px;
}

.article-template__hero-medium {
    height: 220px;
}

.article-template__hero-large {
    height: 330px;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
    .article-template__hero-small {
        height: 220px;
    }

    .article-template__hero-medium {
        height: 440px;
    }

    .article-template__hero-large {
        height: 660px;
    }
}

@media screen and (min-width: 990px) {
    .article-template__hero-small {
        height: 275px;
    }

    .article-template__hero-medium {
        height: 550px;
    }

    .article-template__hero-large {
        height: 825px;
    }
}

.article-template .caption-with-letter-spacing {
    opacity: 0.6;
    font-weight: 400;
}

.article-template header {
    padding-top: 40px;
    padding-bottom: 20px;
}

.article-template__link {
    display: flex;
    text-decoration: none;
    align-items: center;
}

.article-template__link .icon-wrap {
    display: flex;
    margin-right: 10px;
    transform: rotate(90deg);
    position: relative;
    transform-origin: center;
    width: 10px;
    height: 10px;
}

.article-template__content {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

.article-template__divide {
    width: 100%;
}

.article-template__divide:before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(var(--color-entry-line));
}

.article-template__social-sharing {
    padding-top: 40px;
    padding-bottom: 40px;
}

.article-template__comment-title {
    text-transform: uppercase;
    padding-bottom: 40px;
}

.article-template__comments-comment {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    width: 100%;
    min-height: 145px;
    background: var(rgba(--color-page-background));
    border: 1px solid rgb(var(--color-entry-line));
    border-radius: var(--card-border-radius);
    margin-bottom: 20px;
}

.article-template__comments-comment .caption-with-letter-spacing {
    opacity: 1;
}

.article-template__comments-comment .right {
    text-align: right;
    padding-top: 30px;
}

.article-template__comments-comment:last-of-type {
    padding-bottom: 0;
}

.article-template__comment-warning {
    margin-top: 20px;
}

.article-template__comment-submit {
    text-align: center;
    padding-top: 40px;
}

.article-template__back {
    padding-top: 40px;
    padding-bottom: 80px;
}

.article-template .circle-divider::after {
    content: "\2022";
    margin: 0 13px 0 15px;
}

.article-template .circle-divider:last-of-type::after {
    display: none;
}

.article-template .comment_title {
    text-transform: uppercase;
    padding-bottom: 40px;
}

.article-template .field__info {
    padding-bottom: 40px;
}

.article-template__comments-fields>.field:last-child {
    margin-bottom: 0;
}

@media (min-width: 960px) {
    .article-template .article-template__comment-fields {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
    }
}

@media (max-width: 959px) {
    .article-template {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .article-template__hero-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .article-template header {
        padding-top: 20px;
    }

    .article-template__content {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .article-template__social-sharing {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .article-template__back {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .article-template__comment-wrapper {
        padding-bottom: 40px;
    }

    .article-template__comments-comment {
        padding: 20px;
        min-height: 100px;
    }

    .article-template .comment_title {
        padding-bottom: 20px;
    }

    .article-template__comments {
        padding-bottom: 40px;
    }

    .article-template__comment-title {
        padding-bottom: 20px;
    }

    .article-template__comment-warning {
        margin-top: 10px;
    }

    .article-template .field__info {
        padding-bottom: 20px;
    }

    .article-template__comment-submit {
        padding-top: 30px;
    }
}

/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */
/* ================================ Esōes — Article page overrides ================================ */
/* 1) Make ALL titles bold (page title + any headings in content) */
.article-template__title,
.article-template__content h1,
.article-template__content h2,
.article-template__content h3,
.article-template__content h4,
.article-template__content h5,
.article-template__content h6 {
    font-weight: 800 !important;
    color: #000 !important;
}

/* (optional) nicer hierarchy */
.article-template__content h2 {
    font-size: 1.6em;
    /* margin: 1.5em 0 .5em; */
}

.article-template__content h3 {
    font-size: 1.3em;
    margin: 1.2em 0 .4em;
}

/* Make the date/author meta bolder and more legible */
.article-template .caption-with-letter-spacing {
    opacity: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #000;
}

/* 2) Center and pink-ify the “← Back to blog” link */
.article-template__back {
    text-align: center !important;
    padding-top: 40px;
    /* keep your spacing */
    padding-bottom: 80px;
}

.article-template__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* center contents inside the link */
    margin: 0 auto;
    /* center the link block itself */
    color: #ff1fa6 !important;
    /* pink */
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: all .2s ease-in-out;
}

.article-template__link:hover {
    border-bottom: 2px solid #ff1fa6;
    transform: translateY(-1px);
}

/* Keep the arrow pink and nicely spaced */
.article-template__link .icon-wrap {
    color: #ff1fa6 !important;
    margin-right: 8px;
}

/* Big, bold article title */
.article-template__title {
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    font-size: clamp(34px, 6vw, 72px) !important;
    max-width: 726px;
    /* adjust to taste */
    margin: 0 0 12px 0 !important;
}

/* Social: show pink link, hide the old icon block */
.article-template__social-sharing {
    padding-top: 18px;
    padding-bottom: 0;
}

/* hide the original share-card icons */
.article-template__social-sharing .share-card,
.article-template__social-sharing .share-card * {
    display: none !important;
}

/* pink "Share This Blog Post" */
.share-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ff1fa6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.share-inline:hover {
    text-decoration: underline !important;
}

/* Center + pink "← Back to blog" */
.article-template__back {
    text-align: center;
}

.article-template__back .article-template__link {
    justify-content: center;
    color: #ff1fa6 !important;
    font-weight: 700;
    text-decoration: none;
}

.article-template__back .article-template__link:hover {
    text-decoration: underline;
}

/* ===== Esōes – Article header cleanup ===== */
/* Tighten header spacing and remove the divider line */
.article-template header {
    padding-top: 24px;
    padding-bottom: 0;
}

.article-template__divide {
    display: none !important;
}

/* Big-but-not-giant bold title like your “after” shot */
.article-template__title {
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .01em;
    /* 36px on mobile → scales → caps at ~64px on large desktop */
    font-size: clamp(36px, 4.2vw, 64px) !important;
    margin: 0 0 12px !important;
    color: #000 !important;
}

/* Make all in-article headings bold as well (optional, matches your look) */
.article-template__content h1,
.article-template__content h2,
.article-template__content h3,
.article-template__content h4,
.article-template__content h5,
.article-template__content h6 {
    font-weight: 800 !important;
    color: #000 !important;
}

/* Show pink text link; hide the original share icon row */
.article-template__social-sharing {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
}

.article-template__social-sharing .share-card,
.article-template__social-sharing .share-card * {
    display: none !important;
}

.share-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ff1fa6 !important;
    /* Esōes pink */
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.share-inline:hover {
    text-decoration: underline !important;
}

/* Center + pink “← Back to blog” link (from your earlier request) */
.article-template__back {
    text-align: center !important;
}

.article-template__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ff1fa6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: all .2s ease-in-out;
    margin: 0 auto;
}

.article-template__link:hover {
    border-bottom: 2px solid #ff1fa6;
    transform: translateY(-1px);
}

.article-template__link .icon-wrap {
    color: #ff1fa6 !important;
    margin-right: 8px;
}

/* Keep paragraph/content spacing tidy under the new header */
.article-template__content {
    padding-top: 24px;
    padding-bottom: 40px;
}

/* Completely hide the default Shopline share card */
share-card,
share-card.third-party-share,
.share-card.third-party-share,
.third-party-share.notranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide Shopline/third-party share widget completely */
.article-template__social-sharing share-card,
.article-template__social-sharing .share-card,
.article-template__social-sharing .third-party-share,
.article-template__social-sharing share-card.third-party-share,
.article-template__social-sharing share-card.third-party-share.notranslate,
.article-template__social-sharing share-card[data-id="third-party-share"],
share-card.third-party-share.notranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide Shopline/third-party share widget completely */
.article-template__social-sharing share-card,
.article-template__social-sharing .share-card,
.article-template__social-sharing .third-party-share,
.article-template__social-sharing share-card.third-party-share,
.article-template__social-sharing share-card.third-party-share.notranslate,
.article-template__social-sharing share-card[data-id="third-party-share"],
share-card.third-party-share.notranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Pink inline share link styles (keeps your current look) */
.share-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ff1fa6 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer
}

.share-inline:hover {
    text-decoration: underline !important
}

.share-inline__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 2px;
    background: #ff1fa6;
    transform: translate(-50%, -50%) rotate(45deg)
}

/* === Esōes Blog – Match content layout to your screenshot === */
/* Reduce top gap below title */
.article-template header {
    padding-bottom: 0 !important;
}

/* Bring content closer to the share link */
.article-template__social-sharing {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

/* Tight and balanced spacing before the first paragraph */
.article-template__content {
    padding-top: 0 !important;
    margin-top: 4px !important;
    line-height: 1.65 !important;
    color: #000 !important;
}

/* Make emoji icons and bold text align cleanly with paragraph spacing */
.article-template__content p,
.article-template__content h2,
.article-template__content h3 {
    margin-top: 0.6em !important;
    margin-bottom: 0.6em !important;
}

/* Optional: ensure no weird large gap under the share link */
.article-template__content p:first-of-type {
    margin-top: 0.2em !important;
}

/* === FINAL FIX: Full-width hero image + centered text content === */

/* Keep hero image edge to edge */
.article-template__hero-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Center and limit only the text blocks under the hero */
.article-template header.page-width,
.article-template .article-template__social-sharing.page-width,
.article-template .article-template__content.page-width,
.article-template .article-template__back.page-width {
    max-width: 1150px !important;
    /* desktop reading width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 55px !important;
    padding-right: 55px !important;
}

/* Title centered like reference */
.article-template header {
    text-align: center !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
}

.article-template__title {
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em;
    color: #000 !important;
    text-align: center !important;
    margin: 0 auto 12px auto !important;
    /* limit line width for clean look */
    font-size: clamp(36px, 4vw, 64px);
}

/* Share text centered just below title */
.article-template__social-sharing {
    text-align: center !important;
    margin: 10px 0 12px 0 !important;
    padding: 0 !important;
}

/* Paragraph content aligned and centered in container */
.article-template__content {
    text-align: left !important;
    padding-top: 8px !important;
    padding-bottom: 40px !important;
    line-height: 1.65 !important;
    color: #000 !important;
}

/* First paragraph spacing */
.article-template__content>*:first-child {
    margin-top: 0 !important;
}

/* Keep “Back to blog” centered */
.article-template__back {
    text-align: center !important;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Responsive tweaks */
@media (max-width: 768px) {

    .article-template header.page-width,
    .article-template .article-template__social-sharing.page-width,
    .article-template .article-template__content.page-width,
    .article-template .article-template__back.page-width {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .article-template__title {
        font-size: clamp(28px, 6vw, 42px);
        /* max-width: 22ch; */
    }
}

/* === Esōes blog – match 2nd screenshot (keep hero full-width) === */

/* 1) Keep the hero image edge-to-edge (don’t change its width) */
.article-template .page-width.article-template__hero-container {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 50% !important;
    /* escape any parent padding */
    transform: translateX(-50%);
}

/* 2) Constrain & center the TEXT area only */
.article-template header.page-width,
.article-template .article-template__social-sharing.page-width,
.article-template .article-template__content.page-width,
.article-template .article-template__back.page-width {
    max-width: 1150px !important;
    /* desktop reading width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 55px !important;
    padding-right: 55px !important;
}

/* 3) Left-align title + share (like the reference) */
.article-template header {
    text-align: left !important;
    padding-top: 32px !important;
    padding-bottom: 0 !important;
}

.article-template__title {
    margin: 0 0 14px 0 !important;
    max-width: none !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: 1.12 !important;
}

.article-template__social-sharing {
    text-align: left !important;
    margin: 6px 0 14px !important;
    padding: 0 !important;
}

/* 4) Pull the first paragraph closer under the share link */
.article-template__social-sharing+.article-template__content {
    padding-top: 6px !important;
}

.article-template__content>*:first-child {
    margin-top: 0 !important;
}

/* 5) A bit more breathing room on large desktop */
@media (min-width: 1200px) {

    .article-template header.page-width,
    .article-template .article-template__social-sharing.page-width,
    .article-template .article-template__content.page-width {
        padding-left: 72px !important;
        padding-right: 72px !important;
    }
}

/* 6) Keep mobile gutters comfy */
@media (max-width: 768px) {

    .article-template header.page-width,
    .article-template .article-template__social-sharing.page-width,
    .article-template .article-template__content.page-width {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* === Fix white gap below hero image (mobile only) === */
@media (max-width: 768px) {

    /* Remove padding around hero image */
    .article-template__hero-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Also tighten spacing on the title block below */
    .article-template header.page-width {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Optional: remove any default gap between hero and header */
    .article-template__hero-container+header {
        margin-top: 0 !important;
    }

    /* Ensure hero image fits snugly */
    .article-template__hero-container .media img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
}
/* === Esōes – fix hero image cropping on article page === */

/* Let the hero be as tall as it needs, based on the image */
.article-template__hero-small,
.article-template__hero-medium,
.article-template__hero-large {
    height: auto !important;
}

/* Stop forcing the image to stretch + crop */
.article-template .media {
    overflow: visible !important;
    height: auto !important;
}

.article-template .media>* {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
}

/* Optional: if you *still* see cropping, kill cover */
.article-template .media>img {
    object-fit: contain !important;
    object-position: center center !important;
}

/* === RESTORE ORIGINAL SHOPLINE ARTICLE LAYOUT === */

/* Restore the default title spacing */
.article-template header {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
    text-align: left !important;
}

/* Restore original title style */
.article-template__title {
    font-size: clamp(36px, 4vw, 64px) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    font-weight: 900 !important;
}

/* Restore default spacing below "Share" */
.article-template__social-sharing {
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

/* Restore default paragraph spacing */
.article-template__content p {
    margin: 12px 0 !important;
    line-height: 1.65 !important;
    font-size: 16px !important;
}

/* Restore default h2 (your red flag section headings) */
.article-template__content h2 {
    margin: 24px 0 12px !important;
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

/* Force bold to actually look bold inside article content */
.article-template__content strong,
.article-template__content b {
    font-weight: 700 !important;
    /* or 800 if you like it heavier */
}

/* === FINAL WIDTH TWEAK – MATCH NICE READING WIDTH === */
.article-template header.page-width,
.article-template .article-template__social-sharing.page-width,
.article-template .article-template__content.page-width,
.article-template .article-template__back.page-width {
    max-width: 726px !important;
    /* narrower, like original */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* slightly tighter on very large screens */
@media (min-width: 1400px) {

    .article-template header.page-width,
    .article-template .article-template__social-sharing.page-width,
    .article-template .article-template__content.page-width,
    .article-template .article-template__back.page-width {
        max-width: 880px !important;
    }
}

/* === EXACT ORIGINAL ARTICLE SPACING (FINAL) === */

/* Remove extra space above the title */
.article-template header.page-width {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    margin-top: 0 !important;
}

/* Title spacing */
.article-template__title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Share link spacing (tight under title) */
.article-template__social-sharing {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 12px !important;
}

/* First paragraph directly under Share */
.article-template__social-sharing+.article-template__content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* First paragraph spacing */
.article-template__content>*:first-child {
    margin-top: 0 !important;
}

/* Normal paragraph spacing */
.article-template__content p {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    line-height: 1.65 !important;
}

/* Section heading spacing (🚨 Red Flags...) */
.article-template__content h2 {
    margin-top: 28px !important;
    margin-bottom: 14px !important;
}

/* Section body spacing under the h2 */
.article-template__content h2+p {
    margin-top: 0 !important;
}

/* === FIX: Back link spacing to match original site === */

/* Pull the back link closer to the content */
.article-template__back {
    padding-top: 20px !important;
    /* instead of 40–80 */
    padding-bottom: 20px !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* Ensure the link itself is centered and tight */
.article-template__back .article-template__link {
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Reduce huge gap between the last paragraph and the back link */
.article-template__content+.article-template__back {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* Reduce space before the Read More section */
.article-template__back+.shopline-section,
.article-template__back+.element-margin-top,
.article-template__back+div {
    margin-top: 0 !important;
    padding-top: 10px !important;
}
/* === Esōes – fix hero image size on article page === */

/* 1. Stop forcing 100vw + translate */
.article-template .page-width.article-template__hero-container {
    max-width: 100% !important;
    /* similar width as text */
    width: 100% !important;
    margin: 0 auto 24px auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    transform: none !important;
}

/* 2. Let the hero size itself naturally */
.article-template__hero-small,
.article-template__hero-medium,
.article-template__hero-large {
    height: auto !important;
}

/* 3. Make the hero image scale down nicely inside that box */
.article-template__hero-container .media {
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
}

/* IMPORTANT: kill the absolute positioning from earlier */
.article-template__hero-container .media>img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* FINAL HERO WIDTH FIX – same width as article content */
.article-template .page-width.article-template__hero-container {
    max-width: 726px !important;
    /* same as your content column */
    width: 100% !important;
    margin: 0 auto 24px auto !important;
    /* centered under the logo */
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* FINAL: make hero wider, like original */
.article-template .page-width.article-template__hero-container {
    max-width: 1200px !important;
    /* wider than the text column */
    width: 100% !important;
    margin: 0 auto 24px auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
}