@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Theme colors (--color-primary/--color-secondary/--color-button-bg/--color-button-text)
   are declared per-site in base.html's inline <style> block, via site_color() in
   app/services/theming.py (Site column, falling back to its SiteTheme column, falling
   back to a hardcoded default here of the real shopandsavetrends.com brand palette:
   orange #f16047 (the "Shop & Save" wordmark + carousel-arrow color, confirmed against
   the live site's compiled CSS), maroon #7d1c16 (the logo's shopping-bag icon color),
   and orangered #ff4500 (the live site's footer/CTA background). No :root block here -
   this file loads after that inline <style> in <head>, so a same-specificity :root rule
   here would always win the cascade and silently override every dynamic value,
   regardless of what's set in the DB. */

/* -------------------------------------------------------------------- */
/* Reset (ported from enginex-shopandsavetrends.com assets/css/base/_reset.scss
   and assets/css/base/_shopandsavetrends.scss) */
/* -------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;
    font-weight: 400;
}
body {
    line-height: 1;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
    color: #1f1f1f;
    background: #fff;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    color: #000;
    text-decoration: none;
}
button {
    font-family: inherit;
}

.content-wrapper {
    max-width: 1776px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
@media (max-width: 1535px) {
    .content-wrapper { max-width: 1186px; }
}
@media (max-width: 1175px) {
    .content-wrapper { width: 95%; }
}
@media (max-width: 920px) {
    .content-wrapper { width: 97%; }
}
@media (max-width: 768px) {
    .content-wrapper { width: 90%; }
}

article figure { overflow: hidden; }
article figure img { transition: all 0.2s ease; }
article:hover figure img { transform: scale(1.1); }

.read-more-btn {
    border: 2px solid #000;
    width: fit-content;
    margin: 20px auto 0;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 35px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    display: inline-block;
}
@media (max-width: 1535px) {
    .read-more-btn { font-size: 14px; padding: 12px 20px; }
}

/* -------------------------------------------------------------------- */
/* Header */
/* -------------------------------------------------------------------- */
.header {
    position: relative;
    margin: auto;
    background-color: #fff;
}
.header .content-wrapper {
    border-bottom: 2px solid #9f9f9f;
}
@media (max-width: 1535px) {
    .header { width: 95%; padding: 20px 0; }
}
.header .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header .hamburger {
    width: 26px;
    height: 20px;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
.header .hamburger span {
    width: 100%;
    height: 3px;
    background-color: #1f1f1f;
    border-radius: 5px;
    display: block;
}
@media (max-width: 768px) {
    .header .hamburger { display: flex; }
}
.header-logo {
    width: 252px;
    padding: 25px;
    background-color: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin: 0 auto;
}
.header-logo img { width: 100%; display: block; }
@media (max-width: 1535px) {
    .header-logo { width: 190px; padding: 10px 0; }
}
@media (max-width: 768px) {
    .header-logo { width: 175px; margin: 0; }
}
.header .search-icon { width: 33px; flex-shrink: 0; }
@media (max-width: 1535px) {
    .header .search-icon { width: 25px; }
}
.header .search-icon img { width: 100%; display: block; }

/* inner (non-home) pages: search form expands from a small icon-button */
.header-inner .header-form { position: relative; }
.header-inner .header-form form {
    position: relative;
    display: flex;
    align-items: center;
}
.header-inner .header-form input {
    display: none;
    width: 220px;
    max-width: 60vw;
    height: 40px;
    border: 1px solid #e2e2e2;
    border-radius: 20px;
    padding: 0 45px 0 18px;
    font-size: 13px;
    color: #333;
    background: #f5f5f5;
}
.header-inner .header-form input.active { display: block; }
@media (max-width: 765px) {
    .header-inner .header-form input { width: 150px; }
}
.header-inner .header-form button {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-button-bg, #ff4500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-inner .header-form button img { width: 16px; filter: brightness(0) invert(1); }

/* -------------------------------------------------------------------- */
/* Section header (listing pages) */
/* -------------------------------------------------------------------- */
.header-content {
    background-color: #f8f8f8;
    padding: 60px 0;
    text-align: center;
}
@media (max-width: 1535px) {
    .header-content { padding: 40px 0; }
}
.header-content .purpose {
    font-size: 20px;
    display: block;
    color: #666;
    margin-top: 10px;
}
.header-content .heading {
    font-family: "Marcellus", serif;
    font-weight: 400;
    margin-top: 10px;
    display: block;
    font-size: 48px;
    text-align: center;
    text-transform: capitalize;
}
@media (max-width: 1535px) {
    .header-content .heading { font-size: 36px; }
}
@media (max-width: 765px) {
    .header-content .heading { font-size: 28px; }
}

/* -------------------------------------------------------------------- */
/* Hero (home-hero-post: grid of 5 latest articles, carousel on mobile) */
/* -------------------------------------------------------------------- */
.hero-sec {
    margin-top: 50px;
}
@media (max-width: 1535px) {
    .hero-sec { margin-top: 10px; }
}
.hero-sec .list-articles {
    display: grid;
    min-height: 30vh;
    grid-gap: 40px;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 2px solid #9f9f9f;
    padding-bottom: 50px;
}
@media (max-width: 1535px) {
    .hero-sec .list-articles { padding-bottom: 25px; grid-gap: 20px; }
}
@media (max-width: 973px) {
    .hero-sec .list-articles { padding-bottom: 10px; min-height: 25vh; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .hero-sec .list-articles { display: none; }
}
.hero-sec .list-articles article figure { height: 233px; }
@media (max-width: 1535px) {
    .hero-sec .list-articles article figure { height: 195px; }
}
@media (max-width: 973px) {
    .hero-sec .list-articles article figure { height: 159px; }
}
.hero-sec article figure img { width: 100%; object-fit: cover; height: 100%; display: block; }
.hero-sec article h5 {
    margin-top: 15px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 26px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .hero-sec article h5 { font-size: 15px; line-height: 22px; }
}
@media (max-width: 973px) {
    .hero-sec article h5 { font-size: 13px; line-height: 18px; margin-top: 10px; }
}
.hero-sec .carousel {
    width: 100%;
    margin: 20px auto 0;
    position: relative;
    display: none;
}
@media (max-width: 765px) {
    .hero-sec .carousel { display: block; }
}
.hero-sec .carousel article figure { height: 250px; }
.hero-sec .carousel article h5 { font-size: 16px; line-height: 22px; }

/* -------------------------------------------------------------------- */
/* Popular articles */
/* -------------------------------------------------------------------- */
.popular-articles-sec { margin: 60px 0; }
@media (max-width: 768px) {
    .popular-articles-sec { margin-top: 40px; }
}
.popular-articles-sec h2 {
    font-family: "Marcellus", serif;
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 25px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-secondary, #7d1c16);
}
@media (max-width: 1535px) {
    .popular-articles-sec h2 { font-size: 22px; letter-spacing: 4px; }
}
.popular-articles-sec .list-articles {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
@media (max-width: 768px) {
    .popular-articles-sec .list-articles { flex-direction: column; }
}
.popular-articles-sec .left-article {
    flex: 0 1 65%;
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {
    .popular-articles-sec .left-article { flex-direction: column; }
}
.popular-articles-sec .left-article figure {
    height: 500px;
    flex: 0 1 70%;
}
@media (max-width: 1535px) {
    .popular-articles-sec .left-article figure { height: 420px; }
}
@media (max-width: 973px) {
    .popular-articles-sec .left-article figure { height: 340px; }
}
.popular-articles-sec .left-article figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popular-articles-sec .left-article .content {
    flex: 0 1 35%;
    position: relative;
    margin-left: -80px;
    padding: 40px 45px;
    background-color: #ededed;
}
@media (max-width: 973px) {
    .popular-articles-sec .left-article .content { padding: 25px; }
}
@media (max-width: 768px) {
    .popular-articles-sec .left-article .content { margin-left: 0; top: -50px; width: 88%; }
}
.popular-articles-sec .left-article .content h4 {
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 40px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .popular-articles-sec .left-article .content h4 { font-size: 22px; line-height: 28px; }
}
.popular-articles-sec .left-article .content p {
    margin-top: 20px;
    font-size: 17px;
    line-height: 24px;
    color: #555;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .popular-articles-sec .left-article .content p { font-size: 14px; line-height: 20px; }
}
.popular-articles-sec .left-article .content a { display: block; margin-top: 25px; width: 42px; }
.popular-articles-sec .left-article .content a img { width: 100%; }
.popular-articles-sec .right-articles { flex: 0 1 30%; }
.popular-articles-sec .right-articles .articles {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
}
.popular-articles-sec .right-articles figure {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 235px;
    display: flex;
    align-items: end;
}
@media (max-width: 1535px) {
    .popular-articles-sec .right-articles figure { height: 195px; }
}
.popular-articles-sec .right-articles h4 {
    margin: 25px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 24px;
}
@media (max-width: 1535px) {
    .popular-articles-sec .right-articles h4 { font-size: 15px; line-height: 20px; }
}

/* -------------------------------------------------------------------- */
/* Editor's Choice + Latest News */
/* -------------------------------------------------------------------- */
.editors-latest-articles-sec { margin: 60px 0; }
.editors-latest-articles-sec h2 {
    font-family: "Marcellus", serif;
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 25px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-secondary, #7d1c16);
}
@media (max-width: 1535px) {
    .editors-latest-articles-sec h2 { font-size: 22px; letter-spacing: 4px; }
}
.editors-latest-articles-sec .list-articles {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
@media (max-width: 973px) {
    .editors-latest-articles-sec .list-articles { flex-direction: column; }
}
.editors-latest-articles-sec .editors-choice { flex: 0 1 65%; }
.editors-latest-articles-sec .editors-choice .list-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}
@media (max-width: 1535px) {
    .editors-latest-articles-sec .editors-choice .list-items { grid-gap: 20px; }
}
@media (max-width: 768px) {
    .editors-latest-articles-sec .editors-choice .list-items { display: none; }
}
.editors-latest-articles-sec .editors-choice article {
    box-shadow: rgba(100, 100, 111, 0.15) 0 7px 22px 0;
    padding-bottom: 25px;
}
.editors-latest-articles-sec .editors-choice figure { height: 200px; }
@media (max-width: 1535px) {
    .editors-latest-articles-sec .editors-choice figure { height: 165px; }
}
.editors-latest-articles-sec .editors-choice figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editors-latest-articles-sec .editors-choice h3 {
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 24px;
    margin: 18px 18px 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.editors-latest-articles-sec .editors-choice h3 a { color: #1f1f1f; }
.editors-latest-articles-sec .carousel { display: none; margin-top: 20px; }
@media (max-width: 768px) {
    .editors-latest-articles-sec .carousel { display: block; }
}
.editors-latest-articles-sec .carousel article {
    box-shadow: rgba(100, 100, 111, 0.15) 0 7px 22px 0;
    padding-bottom: 25px;
    margin: 0 10px;
}
.editors-latest-articles-sec .carousel figure { height: 190px; }
.editors-latest-articles-sec .carousel figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editors-latest-articles-sec .carousel h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; line-height: 22px; margin: 18px; }
.editors-latest-articles-sec .carousel h3 a { color: #1f1f1f; }
.editors-latest-articles-sec .latest-news {
    background-color: #ededed;
    flex: 0 1 28%;
    padding: 25px;
}
@media (max-width: 973px) {
    .editors-latest-articles-sec .latest-news { flex: 0 1 auto; margin-top: 30px; }
}
.editors-latest-articles-sec .latest-news h2 { font-size: 22px; letter-spacing: 3px; }
.editors-latest-articles-sec .latest-news .list-items a {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 24px;
    padding: 18px 5px;
    border-top: 2px solid #000;
}
.editors-latest-articles-sec .latest-news .list-items a:last-child { border-bottom: 2px solid #000; }
@media (max-width: 1535px) {
    .editors-latest-articles-sec .latest-news .list-items a { font-size: 14px; padding: 14px 5px; border-top: 1px solid #000; }
    .editors-latest-articles-sec .latest-news .list-items a:last-child { border-bottom: 1px solid #000; }
}

/* -------------------------------------------------------------------- */
/* Trending articles */
/* -------------------------------------------------------------------- */
.trending-articles { margin: 60px 0; }
.trending-articles h2 {
    font-family: "Marcellus", serif;
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 25px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-secondary, #7d1c16);
}
@media (max-width: 1535px) {
    .trending-articles h2 { font-size: 22px; letter-spacing: 4px; }
}
.trending-articles .top-two-items {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .trending-articles .top-two-items { grid-template-columns: repeat(1, 1fr); }
}
.trending-articles .top-two-items figure {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 380px;
    display: flex;
    align-items: end;
}
@media (max-width: 1535px) {
    .trending-articles .top-two-items figure { height: 300px; }
}
.trending-articles .top-two-items .content {
    background-color: rgba(255, 255, 255, 0.92);
    position: relative;
    padding: 35px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
@media (max-width: 1535px) {
    .trending-articles .top-two-items .content { padding: 20px; width: 90%; }
}
.trending-articles .top-two-items .content h3 {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 28px;
}
@media (max-width: 1535px) {
    .trending-articles .top-two-items .content h3 { font-size: 17px; line-height: 22px; }
}
.trending-articles .top-two-items .content img { width: 45px; flex-shrink: 0; }
@media (max-width: 1535px) {
    .trending-articles .top-two-items .content img { width: 32px; }
}
.trending-articles .list-items {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}
@media (max-width: 973px) {
    .trending-articles .list-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .trending-articles .list-items { grid-template-columns: repeat(1, 1fr); }
}
.trending-articles .list-items article {
    box-shadow: rgba(100, 100, 111, 0.15) 0 7px 22px 0;
    padding-bottom: 25px;
}
.trending-articles .list-items figure { height: 220px; }
@media (max-width: 1535px) {
    .trending-articles .list-items figure { height: 190px; }
}
.trending-articles .list-items figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trending-articles .list-items h5 {
    font-size: 16px;
    margin: 18px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 22px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* -------------------------------------------------------------------- */
/* Bottom articles ("Interesting World" / article "Popular Articles") */
/* -------------------------------------------------------------------- */
.bottom-articles { margin: 60px 0; }
.bottom-articles h2 {
    font-family: "Marcellus", serif;
    font-size: 30px;
    letter-spacing: 6px;
    margin-bottom: 25px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-secondary, #7d1c16);
}
@media (max-width: 1535px) {
    .bottom-articles h2 { font-size: 22px; letter-spacing: 4px; }
}
.bottom-articles .list-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}
@media (max-width: 1535px) {
    .bottom-articles .list-articles { grid-gap: 25px; }
}
@media (max-width: 768px) {
    .bottom-articles .list-articles { grid-template-columns: 1fr; }
}
.bottom-articles .list-item { display: flex; align-items: center; }
@media (max-width: 973px) {
    .bottom-articles .list-item { flex-direction: column; }
}
.bottom-articles .list-item figure { height: 320px; flex: 0 1 65%; }
@media (max-width: 1535px) {
    .bottom-articles .list-item figure { height: 260px; }
}
.bottom-articles .list-item figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bottom-articles .list-item .content {
    flex: 0 1 45%;
    position: relative;
    margin-left: -60px;
    padding: 30px;
    background-color: #ededed;
}
@media (max-width: 973px) {
    .bottom-articles .list-item .content { margin-left: 0; top: -35px; width: 88%; }
}
.bottom-articles .list-item .content h4 {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 28px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.bottom-articles .list-item .content p {
    margin-top: 15px;
    font-size: 15px;
    line-height: 22px;
    color: #555;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.bottom-articles .list-item .content a { display: block; margin-top: 15px; width: 36px; }
.bottom-articles .list-item .content a img { width: 100%; }
.bottom-articles .list-items {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}
@media (max-width: 973px) {
    .bottom-articles .list-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .bottom-articles .list-items { grid-template-columns: 1fr; }
}
.bottom-articles .list-items article {
    box-shadow: rgba(100, 100, 111, 0.15) 0 7px 22px 0;
    padding-bottom: 20px;
}
.bottom-articles .list-items figure { height: 190px; }
.bottom-articles .list-items figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bottom-articles .list-items h5 {
    font-size: 15px;
    margin: 16px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.article-read-next { margin-top: 20px; }

/* -------------------------------------------------------------------- */
/* "More Categories" (article detail bottom, reasonable addition - the
   reference twig didn't ship real markup for this block, this reuses the
   already-flattened section language + a themed category chip row) */
/* -------------------------------------------------------------------- */
.home-categories-sec {
    background-color: #f8f8f8;
    padding: 50px 0;
    text-align: center;
    margin-top: 20px;
}
.home-categories-sec h2 {
    font-family: "Marcellus", serif;
    font-size: 26px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.home-categories-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.home-categories-item {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid var(--color-primary, #f16047);
    border-radius: 30px;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.home-categories-item:hover {
    background-color: var(--color-primary, #f16047);
    color: #fff;
}

/* -------------------------------------------------------------------- */
/* Home form (bottom search prompt) */
/* -------------------------------------------------------------------- */
.home-form-sec {
    padding: 100px 0 60px;
    text-align: center;
}
.home-form-sec .badge { width: 70px; margin: 0 auto 20px; display: block; }
.home-form-sec h2 {
    font-size: 31px;
    color: #000;
}
@media (max-width: 1535px) {
    .home-form-sec h2 { font-size: 26px; }
}
@media (max-width: 765px) {
    .home-form-sec h2 { font-size: 19px; }
}
.home-form-sec form {
    width: 60%;
    margin: 20px auto 0;
    border: 1px solid #000;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
}
@media (max-width: 765px) {
    .home-form-sec form { width: 90%; }
}
.home-form-sec form input {
    display: block;
    width: 95%;
    outline: none;
    border: none;
    font-size: 15px;
}
.home-form-sec form button {
    background: none;
    outline: none;
    border: none;
    display: block;
    cursor: pointer;
}
.home-form-sec form button img { width: 26px; }
@media (max-width: 1535px) {
    .home-form-sec form button img { width: 20px; }
}
.home-form-sec span {
    display: block;
    width: 65%;
    margin: 80px auto 0;
    text-align: center;
    font-size: 21px;
    line-height: 1.3;
    color: #333;
}
@media (max-width: 1535px) {
    .home-form-sec span { font-size: 18px; margin-top: 40px; width: 80%; }
}
.home-form-sec span a { display: inline-block; font-weight: 700; color: var(--color-primary, #f16047); }
.home-form-sec .line {
    width: 48%;
    margin: 30px auto 0;
    border-bottom: 2px solid #000;
}
.home-form-sec small { display: block; text-align: center; margin-top: 40px; color: #999; }

/* -------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------- */
.footer-section {
    background-color: var(--color-button-bg, #ff4500);
    padding: 25px 0;
    text-align: center;
}
@media (max-width: 675px) {
    .footer-section { display: flex; align-items: center; padding: 20px 0; }
}
.footer-section .footer-links {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 30px;
}
@media (max-width: 925px) {
    .footer-section .footer-links { width: 85%; }
}
@media (max-width: 675px) {
    .footer-section .footer-links { width: 60%; flex-direction: column; align-items: flex-start; gap: 16px; }
}
.footer-section .footer-links a {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}
.footer-section .footer-links a:hover { text-decoration: underline; }
.footer-section .footer-logo {
    display: none;
}
@media (max-width: 675px) {
    .footer-section .footer-logo {
        display: block;
        background-color: #fff;
        padding: 10px 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 183px;
        flex-shrink: 0;
    }
    .footer-section .footer-logo img { width: 100%; display: block; }
}
.footer-section .footer-copy {
    max-width: 700px;
    margin: 15px auto 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
}
.footer-section .footer-copy a { color: #fff; font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Single article */
/* -------------------------------------------------------------------- */
.article-sec-content { margin-top: 30px; }
.article-sec-content .content-wrapper { width: 60%; margin: auto; }
@media (max-width: 765px) {
    .article-sec-content .content-wrapper { width: 95%; }
}
.article-sec-content .title-heading {
    font-family: "Marcellus", serif;
    font-size: 46px;
    margin: auto;
    font-weight: 400;
    width: 90%;
    text-align: center;
    line-height: 54px;
    color: #1f1f1f;
}
@media (max-width: 1535px) {
    .article-sec-content .title-heading { font-size: 34px; line-height: 40px; }
}
@media (max-width: 765px) {
    .article-sec-content .title-heading { font-size: 28px; line-height: 34px; width: 100%; }
}
.article-sec-content .article-author {
    text-align: center;
    color: #6b6b6b;
    font-size: 14px;
    margin-top: 15px;
}
.article-sec-content figure { margin: 30px auto 0; }
@media (max-width: 765px) {
    .article-sec-content figure { height: 320px; width: 100%; }
}
.article-sec-content figure img { width: 100%; height: 100%; object-fit: cover; }
.article-sec-content .article-body { font-size: 15px; color: #444; }
.article-sec-content .article-body p { font-size: 18px; line-height: 32px; margin-top: 30px; }
@media (max-width: 1535px) {
    .article-sec-content .article-body p { font-size: 16px; margin-top: 24px; line-height: 26px; }
}
.article-sec-content .article-body h2,
.article-sec-content .article-body h3,
.article-sec-content .article-body h4 {
    font-family: "Marcellus", serif;
    font-size: 28px;
    line-height: 36px;
    margin-top: 35px;
    font-weight: 400;
    color: #000;
}
.article-sec-content .article-body h3 { font-size: 22px; }
.article-sec-content .article-body h4 { font-size: 18px; }
.article-sec-content .article-body ul { list-style: disc; list-style-position: inside; margin: 10px 0; }
.article-sec-content .article-body li { margin: 10px 0 10px 20px; line-height: 1.3; }
.article-sec-content .article-body ol { list-style-type: decimal; }
.article-sec-content .article-body strong { font-weight: 600; }
.article-sec-content .article-body a { color: var(--color-primary, #f16047); text-decoration: underline; }

/* -------------------------------------------------------------------- */
/* Articles listing page (reasonable addition - articles.html.twig in the
   reference relies on the default clicksco theme's shopping-results-list
   styling rather than carrying shopandsavetrends-specific CSS of its own,
   so this reuses the card language already established above) */
/* -------------------------------------------------------------------- */
.articles-listing-header { padding: 50px 0; }
.articles-listing-sec { padding: 50px 0 60px; }
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
@media (max-width: 1100px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .articles-grid { grid-template-columns: 1fr; }
}
.article-card {
    box-shadow: rgba(100, 100, 111, 0.15) 0 7px 22px 0;
}
.article-card figure { height: 220px; }
.article-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card .content { padding: 22px 20px; }
.article-card .content h4 {
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 25px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-card .content p {
    font-size: 14px;
    line-height: 21px;
    margin: 14px 0;
    color: #666;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.article-card .content .read-more-btn { margin: 0; font-size: 12px; padding: 10px 18px; }
.no-articles-msg { text-align: center; padding: 40px 0; color: #666; }

.pagination-articles { text-align: center; margin: 40px 0 0; }
.pagination-articles a {
    display: inline-block;
    color: #1f1f1f;
    border: 1px solid #ddd;
    margin: 0 6px;
    border-radius: 25px;
    padding: 10px 18px;
    font-size: 14px;
}
.pagination-articles a.active,
.pagination-articles a:hover {
    background-color: var(--color-button-bg, #ff4500);
    border-color: var(--color-button-bg, #ff4500);
    color: #fff;
}

/* -------------------------------------------------------------------- */
/* Search results (query stub page) */
/* -------------------------------------------------------------------- */
.search-page-sec { padding: 50px 0; min-height: 50vh; }
.no-results-msg { text-align: center; color: #666; font-size: 16px; }
.shopping-results-list .search-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e8e8e8;
    margin-bottom: 12px;
}
.shopping-results-list .search-list-item__name a { color: var(--color-primary, #f16047); font-size: 18px; font-weight: 600; }
.shopping-results-list .search-list-item__descr { color: #666; font-size: 14px; margin-top: 6px; }
.shopping-results-list .search-list-item__retailer a { color: #3ca3fa; font-size: 13px; }
.shopping-results-list .read-more-btn {
    flex-shrink: 0;
    border-color: var(--color-button-bg, #ff4500);
    background-color: var(--color-button-bg, #ff4500);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

/* -------------------------------------------------------------------- */
/* Yahoo top5 ad feed (ported from _shopandsavetrends.scss .hotspots-ads) */
/* -------------------------------------------------------------------- */
.hotspots-ads {
    margin-top: 30px;
    min-height: 78vh;
    padding-bottom: 60px;
}
.hotspots-ads .sponsored {
    font-size: 15px;
    margin-top: 25px;
    display: block;
    color: #666;
}
@media (max-width: 765px) {
    .hotspots-ads .sponsored { margin-top: 10px; }
}
.hotspots-ads .list-ads { margin-top: 20px; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads { margin-top: 10px; }
}
.hotspots-ads .list-ads article {
    position: relative;
    background-color: #f8f8f8;
    padding: 23px 45px 20px 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads article { flex-direction: column; align-items: start; padding: 15px; }
}
/* Decorative "sponsored" ribbon tab on the card's left edge - theme's own
   --color-primary, not a fixed color, so it stays on-brand per site. */
.hotspots-ads .list-ads .ad-ribbon {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 84px;
    background: var(--color-primary, #f16047);
    clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads .ad-ribbon { left: -8px; width: 18px; height: 56px; }
}
.hotspots-ads .list-ads .left-content { width: 85%; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .left-content { width: 100%; }
}
.hotspots-ads .list-ads .left-content h3 { font-size: 20px; color: #010101; font-weight: 700; }
/* Ad links only as wide as their own text - a full-width block <a> makes the
   white space beside it clickable, which Yahoo flags as a policy violation. */
.hotspots-ads .list-ads .left-content a { margin: 10px 0; color: #999; font-weight: 300; font-size: 14px; display: block; width: fit-content; max-width: 100%; }
/* title/description can wrap, so they go inline instead - their 10px
   spacing moves onto the h3/p itself, and the h3 takes the link's own 14px
   so its line box stays the same height the block link had */
.hotspots-ads .list-ads .left-content h3, .hotspots-ads .list-ads .left-content p { margin: 10px 0; }
.hotspots-ads .list-ads .left-content h3 { font-size: 14px; }
.hotspots-ads .list-ads .left-content h3 a, .hotspots-ads .list-ads .left-content p a { display: inline; margin: 0; }
.hotspots-ads .list-ads .left-content p { color: #999; font-size: 14px; font-weight: 300; line-height: 1.5; }
.hotspots-ads .list-ads .li-links {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.hotspots-ads .list-ads .li-link a span {
    color: #999;
    font-weight: 300;
    font-size: 14px;
    text-decoration: none;
}
.hotspots-ads .list-ads .li-link a:hover span { text-decoration: underline; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .li-links { flex-direction: column; gap: 0; margin-top: 6px; }
    .hotspots-ads .list-ads .li-link {
        padding: 12px 0;
        border-top: 1px solid #e5e5e5;
    }
    .hotspots-ads .list-ads .li-link a span { font-size: 15px; }
}
.hotspots-ads .list-ads .right-content { flex-shrink: 0; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .right-content { margin-top: 20px; width: 100%; }
}
.hotspots-ads .list-ads .right-content a {
    background-color: var(--color-button-bg, #ff4500);
    width: 110px;
    padding: 10px 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-button-bg, #ff4500);
    font-weight: 600;
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads .right-content a { width: 100%; }
}
.hotspots-ads .list-ads .right-content span { font-size: 18px; color: #fff; display: block; }
/* No card-level :hover effect - the card itself isn't a link, so it mustn't
   look interactive (Yahoo: no clickable-looking white space). Only the CTA
   button reacts, and only when it's hovered itself. */
.hotspots-ads .list-ads .right-content a:hover { background: none; }
.hotspots-ads .list-ads .right-content a:hover span { color: var(--color-button-bg, #ff4500); }
.hotspots-ads .no-ads-msg { padding: 30px 0; color: #666; }

/* -------------------------------------------------------------------- */
/* Static content pages (about / contact / terms / privacy / cookies -
   ported from _shopandsavetrends.scss's .about-wrapper/.contact-wrapper/
   .terms/.privacy/.cookie rules) */
/* -------------------------------------------------------------------- */
.about-wrapper, .contact-wrapper, .terms, .privacy, .cookie {
    min-height: 60vh;
    margin-top: 20px;
    padding: 40px 0;
}
.about-wrapper .about-subheader,
.contact-wrapper .about-subheader {
    color: var(--color-primary, #f16047);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}
.about-wrapper h1, .contact-wrapper h1, .terms h1, .privacy h1, .cookie h1 {
    font-family: "Marcellus", serif;
    font-size: 36px;
    margin: 15px 0 20px;
    font-weight: 400;
}
.contact-wrapper h2, .terms h2, .privacy h2, .cookie h2 {
    font-size: 24px;
    margin-top: 25px;
    margin-bottom: 8px;
    font-weight: 600;
}
.terms h3, .privacy h3, .cookie h3 { font-size: 20px; margin: 20px 0 10px; font-weight: 600; }
.about-wrapper p, .contact-wrapper p, .terms p, .privacy p, .cookie p {
    font-size: 16px;
    margin: 15px 0;
    line-height: 1.7;
}
.about-wrapper a, .contact-wrapper a, .terms a, .privacy a, .cookie a {
    color: var(--color-primary, #f16047);
    text-decoration: underline;
}
.about-wrapper strong, .contact-wrapper strong, .terms strong, .privacy strong, .cookie strong { font-weight: 600; }
.terms ul, .privacy ul, .cookie ul { line-height: 1.5; margin: 15px 0 15px 20px; }
.terms ul li, .privacy ul li, .cookie ul li { list-style-type: disc; margin-top: 8px; }
.contact-subheader { line-height: 1.6; }
.contact-items { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 30px; }
.contact-items > div { flex: 1 1 220px; }
.contact-btn, .contact-button {
    display: inline-block;
    margin-top: 15px;
    padding: 14px 30px;
    background-color: var(--color-button-bg, #ff4500);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 30px;
    font-weight: 600;
}
.contact-btn:hover, .contact-button:hover { background-color: var(--color-primary, #f16047); }

/* -------------------------------------------------------------------- */
/* Mobile menu */
/* -------------------------------------------------------------------- */
.mobile-menu {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;
}
.mobile-menu.active { display: block; }
.mobile-menu-wrapper {
    background: #fff;
    width: 100%;
    max-width: 320px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 50px 25px 0;
}
.mobile-menu-close {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: pointer;
    top: 15px;
    right: 15px;
    color: #1f1f1f;
    font-size: 22px;
}
.mobile-menu-items { display: flex; flex-direction: column; }
.mobile-menu-items a {
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding: 14px 0;
}
.mobile-menu-items a:hover { color: var(--color-primary, #f16047); }

/* -------------------------------------------------------------------- */
/* Slick carousel arrows (nav-left-middle.png / nav-right-middle.png
   composited over a solid brand-color circle, same treatment the live
   site uses for its own carousel arrows) */
/* -------------------------------------------------------------------- */
.slick-prev, .slick-next {
    transform: none;
    z-index: 10;
    width: 45px;
    height: 45px;
}
.slick-prev { left: -10px; }
.slick-next { right: -10px; }
@media (max-width: 1535px) {
    .slick-prev, .slick-next { width: 36px; height: 36px; }
}
.slick-next:before, .slick-prev:before {
    content: "" !important;
    background-color: var(--color-primary, #f16047);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    width: 100%;
    height: 100%;
    display: block;
}
.slick-next:before { background-image: url('../images/nav-right-middle.png'); }
.slick-prev:before { background-image: url('../images/nav-left-middle.png'); }
.slick-dots li button:before { font-size: 10px; }
.slick-dots li.slick-active button:before { color: var(--color-primary, #f16047); }

/* Article byline: bold "Author:" label - this theme's reset sets <strong>
   back to normal weight, so it needs restating here. */
.article-author strong { font-weight: 700; }