/**
 * Custom CSS for The Kitchen Theme
 *
 * This file contains custom font declarations and utility classes
 * that complement the Tailwind CSS framework.
 */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
    --font-helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================
   Helvetica Neue Font Family - Primary Typography
   ============================================ */

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/abc-diatype/ABCDiatype-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/abc-diatype/ABCDiatype-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/abc-diatype/ABCDiatype-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/abc-diatype/ABCDiatype-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* Temporary fallback using system fonts */

/* Font Family Declarations */
.font-helvetica {
    font-family: var(--font-helvetica);
}

/* Mulish Font Family */
.font-mulish {
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Default body font */
body {
    font-family: var(--font-helvetica);
}

/* ============================================
   Font Weight Utilities
   ============================================ */

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 600;
}

/* ============================================
   Letter Spacing Adjustments
   ============================================ */

.tracking-tight-1 {
    letter-spacing: -0.48px;
}

.tracking-tight-2 {
    letter-spacing: -0.75px;
}

.tracking-tight-3 {
    letter-spacing: -0.8px;
}

.tracking-tight-4 {
    letter-spacing: -1.16px;
}

.tracking-tight-5 {
    letter-spacing: -1.2px;
}

.tracking-tight-6 {
    letter-spacing: -1.6px;
}

/* ============================================
   Custom Gradient Backgrounds
   ============================================ */

.gradient-kitchen-accent {
    background: linear-gradient(to right, #4eeba9 33%, transparent);
}

.gradient-kitchen-yellow {
    background: linear-gradient(to right, #e2ff2d 84.6%, transparent);
}

/* ============================================
   Animation & Transition Utilities
   ============================================ */

.transition-default {
    transition: all 0.3s ease;
}

/* Hover effect for cards and images */
.hover-scale:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* ============================================
   Spacing & Layout Utilities
   ============================================ */

.px-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ============================================
   Typography Utilities
   ============================================ */

.text-shadow-default {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Remove default link underlines */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* ============================================
   Custom Component Styles
   ============================================ */

/* Category tags with gradients */
.category-tag {
    display: inline-block;
    padding: 10px 15px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: black;
    line-height: 23px;
    border-radius: 10px 0 0 10px;
}

.category-tag.featured {
    background: linear-gradient(to right, #e2ff2d 84.6%, transparent);
}

.category-tag.podcast {
    background: linear-gradient(to right, #4eeba9 84.6%, transparent);
}

.category-tag.tips {
    background: linear-gradient(to right, #e2ff2d 84.6%, transparent);
}

/* Trending list accent bar */
.trending-item {
    border-left: 3px solid #4eeba9;
}

/* Section title underlines */
.section-underline {
    height: 5px;
    background: linear-gradient(to left, #4eeba9 33%, transparent);
}

/* ============================================
   Responsive Utilities
   ============================================ */

@media (max-width: 1024px) {
    .px-112 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .no-print {
        display: none;
    }
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus states (keyboard-only so custom-styled inputs aren't visually broken on click/autofill) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #4eeba9;
    outline-offset: 2px;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   Pagination
   ============================================ */

.pagination {
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination .nav-links a,
.pagination .nav-links .current,
.pagination .nav-links .page-numbers {
    font-weight: 700;
    font-size: 14px;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #1e1e1e;
    transition: all 0.3s;
}

.pagination .nav-links .dots {
    border: none;
    padding: 10px 4px;
    color: #8f8f8f;
}

.pagination .nav-links a:hover {
    background: #04794d;
    border-color: #04794d;
    color: #fff;
}

.pagination .nav-links .current {
    background: #4eeba9;
    border-color: #4eeba9;
    color: #000;
}

/* ============================================
   WordPress Core Compatibility
   ============================================ */

.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
}

/* ============================================
   Article Body — Content Element Styles
   Scoped to .article-body so both standard posts
   (single.php) and gear posts (single-gear.php,
   which uses .gear-body.article-body) are covered.
   ============================================ */

/* Base typography */
.article-body {
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 28px;
    color: #1e1e1e;
}

/* Paragraphs */
.article-body p {
    margin-bottom: 20px;
}

/* Headings */
.article-body h1 {
    font-weight: 600;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #1e1e1e;
    margin: 40px 0 20px;
}

.article-body h2,
.article-body h3 {
    font-weight: 600;
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: -0.75px;
    color: #1e1e1e;
    margin: 40px 0 20px;
}

.article-body h4 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: #1e1e1e;
    margin: 32px 0 16px;
}

.article-body h5 {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #1e1e1e;
    margin: 28px 0 14px;
}

.article-body h6 {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e1e1e;
    margin: 24px 0 12px;
}

/* Inline links */
.article-body a {
    color: #04794d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.article-body a:hover {
    color: #00452c;
}

/* Inline text formatting */
.article-body strong,
.article-body b {
    font-weight: 700;
}

.article-body em,
.article-body i {
    font-style: italic;
}

.article-body u {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.article-body s,
.article-body del {
    text-decoration: line-through;
    color: #8f8f8f;
}

.article-body ins {
    background: #e2ff2d;
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
}

.article-body mark {
    background: #e2ff2d;
    color: #1e1e1e;
    padding: 0 2px;
    border-radius: 2px;
}

.article-body small {
    font-size: 0.85em;
    color: #8f8f8f;
}

.article-body sub,
.article-body sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
}

.article-body sub { bottom: -0.25em; }
.article-body sup { top: -0.4em; }

/* Horizontal rule */
.article-body hr {
    border: 0;
    height: 1px;
    background: #e5e5e5;
    margin: 40px 0;
}

/* Lists */
.article-body ul,
.article-body ol,
.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.article-body ul,
.entry-content ul {
    list-style-type: disc;
}

.article-body ol,
.entry-content ol {
    list-style-type: decimal;
}

.article-body li,
.entry-content li {
    margin-bottom: 10px;
    line-height: 1.45;
}

.article-body ul ul,
.article-body ol ol,
.article-body ul ol,
.article-body ol ul,
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
    margin: 10px 0 10px;
    padding-left: 25px;
}

.article-body ul ul,
.entry-content ul ul {
    list-style-type: circle;
}

.article-body ul ul ul,
.entry-content ul ul ul {
    list-style-type: square;
}

.article-body ol ol,
.entry-content ol ol {
    list-style-type: lower-alpha;
}

/* Description lists */
.article-body dl {
    margin: 20px 0;
}

.article-body dt {
    font-weight: 700;
    color: #1e1e1e;
    margin-top: 16px;
}

.article-body dd {
    margin: 4px 0 0 20px;
    color: #1e1e1e;
}

/* Media: images, figures */
.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.article-body figure {
    margin: 30px 0;
}

.article-body figcaption {
    font-size: 14px;
    line-height: 1.4;
    color: #8f8f8f;
    margin-top: 10px;
    text-align: center;
}

.article-body .wp-block-image {
    margin: 30px 0;
}

.article-body .wp-block-image img {
    border-radius: 10px;
}

.article-body .wp-block-image figcaption {
    text-align: center;
}

.article-body .wp-block-gallery {
    margin: 30px 0;
}

.article-body .wp-block-gallery img {
    border-radius: 8px;
}

/* Embeds (YouTube, Vimeo, etc.) */
.article-body .wp-block-embed {
    margin: 30px 0;
}

/* Video embeds: enforce a 16:9 aspect ratio so the iframe fills the column
   without overflow. Scoped to is-type-video so it does NOT apply to article-
   to-article (is-type-rich) embeds, which need their own natural height. */
.article-body .wp-block-embed.is-type-video .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.article-body .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.article-body .wp-block-embed.is-type-video .wp-block-embed__wrapper embed,
.article-body .wp-block-embed.is-type-video .wp-block-embed__wrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
}

/* Rich embeds (article-to-article WordPress embeds): the embedded iframe
   carries its own height set by WP's resize message handler. We just need
   the iframe to fill the column width on every viewport so it doesn't get
   clipped on mobile, where the default width="500" attribute would otherwise
   bleed outside the article column. */
.article-body .wp-block-embed.is-type-rich .wp-block-embed__wrapper {
    overflow: hidden;
    border-radius: 10px;
}

.article-body .wp-block-embed.is-type-rich .wp-block-embed__wrapper iframe,
.article-body .wp-block-embed.is-type-rich iframe.wp-embedded-content,
.article-body iframe.wp-embedded-content {
    width: 100%;
    max-width: 100%;
    border: 0;
}

.article-body iframe,
.article-body video,
.article-body audio {
    max-width: 100%;
    border-radius: 10px;
}

.article-body video {
    display: block;
    height: auto;
}

.article-body audio {
    width: 100%;
}

/* Cover & media-text blocks */
.article-body .wp-block-cover {
    margin: 30px 0;
    border-radius: 10px;
    overflow: hidden;
}

.article-body .wp-block-media-text {
    margin: 30px 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Tables */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 10px;
    overflow: hidden;
}

.article-body thead {
    background: #00452c;
    color: #fff;
}

.article-body th {
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid #04794d;
}

.article-body td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e5;
    color: #1e1e1e;
}

.article-body tbody tr:last-child td {
    border-bottom: none;
}

.article-body caption {
    font-size: 14px;
    color: #8f8f8f;
    padding: 8px 0;
    caption-side: bottom;
    text-align: left;
}

.article-body .wp-block-table {
    margin: 30px 0;
}

.article-body .wp-block-table table {
    margin: 0;
}

.article-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: #fafafa;
}

.article-body .wp-block-table.is-style-stripes td {
    border-bottom: none;
}

/* Inline code & preformatted */
.article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    background: #f3f4f6;
    color: #00452c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
}

.article-body pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    background: #1e1e1e;
    color: #f3f4f6;
    padding: 20px;
    border-radius: 10px;
    margin: 30px 0;
    overflow-x: auto;
}

.article-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
}

.article-body .wp-block-code {
    margin: 30px 0;
}

.article-body .wp-block-code pre,
.article-body .wp-block-code code {
    display: block;
}

.article-body .wp-block-preformatted {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 30px 0;
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
}

.article-body kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    background: #1e1e1e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.article-body samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    background: #f3f4f6;
    padding: 1px 4px;
    border-radius: 3px;
}

.article-body var {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-style: italic;
    color: #04794d;
}

/* Blockquotes & pull quotes */
.article-body blockquote,
.article-body .wp-block-quote {
    background: #fafafa;
    border: 1px solid #4eeba9;
    border-radius: 20px;
    padding: 24px 28px;
    margin: 30px 0;
    font-size: 18px;
    line-height: 1.55;
    color: #1e1e1e;
}

.article-body blockquote p,
.article-body .wp-block-quote p {
    margin-bottom: 14px;
}

.article-body blockquote p:first-child,
.article-body .wp-block-quote p:first-child {
    margin-top: 0;
}

.article-body blockquote p:last-child,
.article-body .wp-block-quote p:last-child {
    margin-bottom: 0;
}

/* Headings inside a blockquote shouldn't carry the big top/bottom
   margins they'd have in body copy. The blockquote itself already
   provides padding, so strip the outer margins and use a tighter
   internal gap between heading and following content. */
.article-body blockquote h2,
.article-body blockquote h3,
.article-body blockquote h4,
.article-body .wp-block-quote h2,
.article-body .wp-block-quote h3,
.article-body .wp-block-quote h4 {
    margin-top: 0;
    margin-bottom: 12px;
}

.article-body blockquote h2:last-child,
.article-body blockquote h3:last-child,
.article-body blockquote h4:last-child,
.article-body .wp-block-quote h2:last-child,
.article-body .wp-block-quote h3:last-child,
.article-body .wp-block-quote h4:last-child {
    margin-bottom: 0;
}

.article-body blockquote cite,
.article-body .wp-block-quote cite {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: #8f8f8f;
    margin-top: 8px;
}

.article-body blockquote a,
.article-body .wp-block-quote a {
    color: #04794d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.article-body blockquote a:hover,
.article-body .wp-block-quote a:hover {
    color: #00452c;
}

.article-body .wp-block-pullquote {
    background: transparent;
    border-top: 2px solid #4eeba9;
    border-bottom: 2px solid #4eeba9;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 30px 0;
    margin: 40px 0;
    text-align: center;
}

.article-body .wp-block-pullquote p {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #1e1e1e;
    margin: 0 0 12px;
}

.article-body .wp-block-pullquote cite {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: #8f8f8f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-body .wp-block-verse {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.6;
    background: #fafafa;
    border-left: 3px solid #4eeba9;
    padding: 20px 24px;
    margin: 30px 0;
    white-space: pre-wrap;
    border-radius: 0 10px 10px 0;
}

/* Buttons */
.article-body .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0;
}

.article-body .wp-block-button {
    margin: 0;
}

.article-body .wp-block-button__link {
    display: inline-block;
    background: #4eeba9;
    color: #000;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.article-body .wp-block-button__link:hover {
    background: #3dd494;
    color: #000;
    text-decoration: none;
}

.article-body .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: #00452c;
    border: 2px solid #00452c;
}

.article-body .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: #00452c;
    color: #fff;
}

/* Separators */
.article-body .wp-block-separator {
    border: 0;
    height: 1px;
    background: #e5e5e5;
    margin: 40px auto;
    max-width: 100px;
}

.article-body .wp-block-separator.is-style-wide {
    max-width: 100%;
}

.article-body .wp-block-separator.is-style-dots {
    background: none;
    height: auto;
    text-align: center;
    border: 0;
    line-height: 1;
}

.article-body .wp-block-separator.is-style-dots::before {
    content: "\00b7 \00b7 \00b7";
    color: #8f8f8f;
    font-size: 24px;
    letter-spacing: 1em;
    padding-left: 1em;
}

/* Columns (pre-existing) */
.article-body .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: #fafafa;
    border: 1px solid #4eeba9;
    border-radius: 20px;
    padding: 20px;
    margin: 30px 0;
}

.article-body .wp-block-column {
    background: #eee;
    padding: 20px;
    border-radius: 20px;
}

/* Alignments (scoped to article-body; global fallbacks remain above) */
.article-body .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-body .alignleft {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 50%;
}

.article-body .alignright {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 50%;
}

.article-body .alignwide {
    margin-left: -40px;
    margin-right: -40px;
    max-width: calc(100% + 80px);
}

.article-body .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

@media (max-width: 1024px) {
    .article-body .alignwide {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .article-body .alignleft,
    .article-body .alignright {
        float: none;
        margin: 20px 0;
        max-width: 100%;
    }

    .article-body .wp-block-columns {
        grid-template-columns: 1fr;
    }

    .article-body table {
        font-size: 14px;
    }

    .article-body th,
    .article-body td {
        padding: 8px 10px;
    }
}

/* ============================================
   Homepage news rows & single "You Might Also Like"
   (shared with front-page news stream)
   ============================================ */

.section-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
    color: #1e1e1e;
    margin-bottom: 12px;
}

.section-divider {
    height: 5px;
    width: 100%;
    background: linear-gradient(to right, #4eeba9 0%, transparent 100%);
}

.section-divider--left {
    background: linear-gradient(to left, #4eeba9 0%, transparent 100%);
}

.related-posts {
    margin-top: 60px;
}

.related-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-posts-grid > .news-article + .news-article {
    border-top: 1px solid #9ca3af;
    padding-top: 20px;
}

@media (min-width: 1024px) {
    .related-posts-grid {
        gap: 40px;
    }

    .related-posts-grid > .news-article + .news-article {
        padding-top: 40px;
    }
}

.news-article {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.news-article-image {
    width: 350px;
    aspect-ratio: 16/9;
    overflow: hidden;
    flex-shrink: 0;
}

.news-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-article:hover .news-article-image img {
    transform: scale(1.05);
}

.news-article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.news-article-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.65px;
    color: #1e1e1e;
    margin: 0;
}

.news-article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.news-article-title a:hover {
    color: #04794d;
}

.news-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 14px;
    letter-spacing: -0.28px;
    color: #8f8f8f;
}

.news-article-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.news-article-author {
    font-weight: 400;
    color: #1e1e1e;
}

.news-article-sep {
    color: #c0c0c0;
}

@media (max-width: 1200px) {
    .news-article-image {
        width: 300px;
    }

    .news-article-title {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .trending-title,
    .section-title {
        font-size: 25px;
        letter-spacing: -1px;
    }

    .news-article {
        flex-direction: row;
        gap: 12px;
        align-items: stretch;
    }

    .news-article-image {
        width: 160px;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
    }

    .news-article-content {
        width: auto;
        flex: 1;
        min-width: 0;
        justify-content: space-between;
    }

    .news-article-title {
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: -0.3px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-article-meta {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
        padding-top: 8px;
        gap: 2px;
    }

    .news-article-avatar,
    .news-article-sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .trending-title,
    .section-title {
        font-size: 22px;
    }

    .news-article-image {
        width: 140px;
    }

    .news-article-title {
        font-size: 15px;
    }
}

/* ============================================================
   Trending Sidebar Widget — shared by homepage, gear archive, tips archive.
   Originally defined inline in front-page.php; moved here so the gear and
   tips category templates render the widget identically to the homepage.

   The wrapper `.sidebar-top-aligned` is a flex column containing the
   trending widget on top and a tall vertical ad below. The ad uses
   `flex: 1` so it stretches to fill the remaining sidebar height, which
   makes the bottom of the ad align with the bottom of the main column.
   ============================================================ */

.trending-sidebar-widget {
    border: 1px solid #e5e7eb;
    padding: 20px;
    background: #fafafa;
}

.trending-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
    color: #1e1e1e;
    margin-bottom: 10px;
}

.trending-list {
    display: flex;
    flex-direction: column;
}

.trending-item {
    padding: 12px 0;
    padding-left: 14px;
    border-left: 3px solid #4eeba9;
    border-bottom: 1px solid #eee;
}

.trending-item:first-child {
    padding-top: 0;
}

.trending-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.trending-item a {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.05;
    letter-spacing: -0.48px;
    color: #1e1e1e;
    text-decoration: none;
    transition: color 0.3s;
}

.trending-item a:hover {
    color: #04794d;
}

.sidebar-top-aligned {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sidebar-top-ad {
    flex: 1;
    min-height: 88px;
    height: auto;
}

/* ============================================================
   Best Of List — Layout & Content Styles
   Used by both the legacy meta-box renderer and the
   kitchen/best-of-list + kitchen/product-card Gutenberg blocks.
   ============================================================ */

.gear-body {
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 28px;
    color: #1e1e1e;
}

.bestof-intro-image {
    aspect-ratio: 16/9;
    margin-bottom: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.bestof-hero-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

.bestof-intro-text {
    font-size: 16px;
    line-height: 1.6;
    color: #1e1e1e;
    margin-bottom: 50px;
}

.bestof-intro-text p {
    margin-bottom: 15px;
}

.bestof-items-list {
    display: flex;
    flex-direction: column;
}

.bestof-item {
    padding: 10px 0 14px;
    border-bottom: 1px solid #e5e5e5;
}

.bestof-item:first-child {
    padding-top: 0;
}

.bestof-item:last-child {
    border-bottom: 0;
}

.bestof-item-heading {
    margin-bottom: 0;
}

.article-body h2.bestof-title,
h2.bestof-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #1e1e1e;
    margin: 0;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    background: #f4f4f4;
    border-radius: 9px;
    padding: 14px 22px;
    margin: 10px auto 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Rank badge: a circular numbered chip that hangs off the top-left
   corner of the product card when the card sits inside a best-of
   list. Replaces the old h2 'N.' heading that sat awkwardly above
   the card. Hidden on standalone product cards (no list index). */
.product-card-rank-badge {
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 2;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: #4eeba9;
    color: #ffffff;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bestof-item-scorecard {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 28px;
    box-sizing: border-box;
}

.bestof-item-scorecard-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 9px;
}

.bestof-item-scorecard-link {
    display: block;
    line-height: 0;
    transition: transform 0.2s ease;
}

.bestof-item-scorecard-link:hover .bestof-item-scorecard-img {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.product-card-image {
    position: relative;
    flex: 0 0 216px;
    width: 216px;
    align-self: stretch;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.product-card-thumb {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.product-card-info {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding-top: 0;
}

.affiliate-box {
    margin: 0;
    padding: 0;
    text-align: left;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
}

.article-body h3.product-card-name,
h3.product-card-name {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1e1e1e;
    margin: 10px 0 10px;
}

.product-card-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.product-card-links a {
    text-decoration: none;
    max-width: 400px;
    width: 100%;
}

.product-card-affiliate-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #e8f9ef;
    border-left: 3px solid #4eeba9;
    border-radius: 0 6px 6px 0;
    color: #00452c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

.product-card-affiliate-note__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #04794d;
    display: block;
    align-self: center;
}

p.product-card-affiliate-note__text {
    margin: 0;
    color: #00452c;
}

.product-card-affiliate-note__text strong,
.product-card-affiliate-note__text b {
    color: #04794d;
    font-weight: 700;
}

.aff-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    background: #4eeba9;
    border: none;
    color: #000;
    font-size: 17px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s, filter 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.aff-btn:hover {
    filter: brightness(0.95);
    color: #000;
}

.aff-price {
    font-weight: 700;
    color: #000;
}

.aff-label {
    font-weight: 600;
    color: #000;
}

.aff-label-prefix {
    color: #000;
}

.bestof-item-description {
    font-size: 16px;
    line-height: 1.6;
    color: #1e1e1e;
}

.bestof-item-description p {
    margin-bottom: 15px;
}

.bestof-item--empty,
.bestof-item--missing,
.bestof-items-list--empty {
    padding: 20px;
    background: #fff7e6;
    border: 1px dashed #d4a72c;
    border-radius: 8px;
    color: #6d5b1f;
    font-style: italic;
}

@media (max-width: 768px) {
    .bestof-intro-image {
        display: none;
    }

    h2.bestof-title {
        font-size: 24px;
    }

    .bestof-item {
        padding: 35px 0 25px;
    }

    /* Keep the product card side-by-side on mobile (matches desktop
       layout). The previous version wrapped to a stacked column at
       phone widths, which wasted vertical space and made the image
       float in a sea of whitespace. Image stays compact on the left,
       info column takes the rest. */
    .product-card {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
        gap: 5px;
        padding: 16px;
    }

    .product-card-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        background: #ffffff;
        aspect-ratio: auto;
        min-height: 200px;
    }

    .product-card-thumb {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 260px;
        object-fit: contain;
        background: #ffffff;
    }

    .product-card-info {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        text-align: center;
    }

    .affiliate-box {
        align-items: center;
    }

    h3.product-card-name {
        font-size: 20px;
        margin-top: 0;
        margin-bottom: 8px;
        text-align: center;
    }

    .product-card-rank-badge {
        top: 4px;
        left: 4px;
        width: 53px;
        height: 53px;
        font-size: 26px;
    }

    .aff-btn {
        font-size: 13px;
        padding: 8px 10px;
        gap: 4px;
    }

    .product-card-links {
        gap: 6px;
        align-items: center;
    }

    .product-card-affiliate-note {
        font-size: 13px;
        margin-top: 10px;
        padding: 8px 10px;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .product-card-affiliate-note__icon {
        width: 16px;
        height: 16px;
    }

    .bestof-intro-text {
        font-size: 15px;
    }
}

.best-in-gear-widget {
    margin-top: 10px;
}

/* Hide the gear-only sidebar widget on mobile. The sidebar stacks below the
   article body there, so "Best in Gear" lands far below the fold where it
   adds no value. Ad slots still render on mobile. */
@media (max-width: 900px) {
    .best-in-gear-widget--desktop-only {
        display: none;
    }
}

.best-in-gear-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #1e1e1e;
    margin: 0 0 12px;
}

.best-in-gear-divider {
    height: 2px;
    background: #1e1e1e;
    margin-bottom: 20px;
}

.best-in-gear-list {
    display: flex;
    flex-direction: column;
}

.best-in-gear-item {
    padding: 12px 0;
    padding-left: 14px;
    border-left: 3px solid #4eeba9;
    border-bottom: 1px solid #eee;
}

.best-in-gear-item:first-child {
    padding-top: 0;
}

.best-in-gear-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.best-in-gear-item h4 {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.best-in-gear-item h4 a {
    color: #1e1e1e;
    text-decoration: none;
    transition: color 0.3s;
}

.best-in-gear-item h4 a:hover {
    color: #04794d;
}

/* =====================================================================
   Affiliate link inline format (front end)
   Rendered by the kitchen/affiliate-link RichText format. The href, rel,
   and target attributes are injected server-side by the_content filter
   (see inc/affiliate-link-format.php).
   ===================================================================== */

a.kitchen-affiliate-link,
.kitchen-affiliate-link a {
    font-weight: 600;
}

/* =====================================================================
   Product Archive (archive-kitchen_product.php, taxonomy-product_category.php)
   ===================================================================== */

.product-archive__header {
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    padding: 40px 0 30px;
}

.product-archive__title {
    font-size: 32px;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0 0 10px;
}

.product-archive__intro {
    color: #555;
    font-size: 16px;
    margin: 0 0 20px;
}

.product-archive__category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-archive__cat-link {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.product-archive__cat-link:hover,
.product-archive__cat-link.is-active {
    background: #00452c;
    border-color: #00452c;
    color: #fff;
}

.product-archive__content {
    padding: 40px 0 60px;
}

.product-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1024px) {
    .product-archive__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .product-archive__grid {
        grid-template-columns: 1fr;
    }
}

.product-archive__pagination {
    margin-top: 40px;
}

/* Product card */
.product-card-archive {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.product-card-archive:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.product-card-archive__image-link {
    display: block;
    background: #f8f8f8;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.product-card-archive__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 16px;
}

.product-card-archive__img-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}

.product-card-archive__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card-archive__category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #04794d;
    margin-bottom: 8px;
    display: block;
}

.product-card-archive__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}

.product-card-archive__title a {
    color: #1e1e1e;
    text-decoration: none;
}

.product-card-archive__title a:hover {
    color: #00452c;
}

.product-card-archive__brand {
    font-size: 13px;
    color: #8f8f8f;
    margin: 0 0 10px;
}

.product-card-archive__pricing {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.product-card-archive__price {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
}

.product-card-archive__compare-price {
    font-size: 14px;
    color: #8f8f8f;
    text-decoration: line-through;
}

.product-card-archive__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.product-card-archive__details-link {
    font-size: 14px;
    color: #00452c;
    text-decoration: none;
    font-weight: 600;
}

.product-card-archive__details-link:hover {
    text-decoration: underline;
}

.product-card-archive__buy-btn {
    display: block;
    background: #00452c;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.product-card-archive__buy-btn:hover {
    background: #006644;
    color: #fff;
}

/* =====================================================================
   Single Product Page (single-kitchen_product.php)
   ===================================================================== */

.single-product {
    padding: 30px 0 60px;
    background: #fff;
}

.single-product__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Inter', sans-serif;
}

@media (min-width: 768px) {
    .single-product__container {
        padding: 0 32px;
    }
}

.single-product__breadcrumb {
    font-size: 13px;
    color: #8f8f8f;
    margin-bottom: 28px;
    font-family: 'Helvetica Neue', 'Inter', sans-serif;
}

.single-product__breadcrumb a {
    color: #555;
    text-decoration: none;
}

.single-product__breadcrumb a:hover {
    color: #04794d;
    text-decoration: underline;
}

.single-product__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
    align-items: start;
}

@media (max-width: 768px) {
    .single-product__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Gallery */
.single-product__gallery-main {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product__gallery-hero {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 520px;
}

.single-product__gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.single-product__thumb {
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    background: #f5f5f5;
    padding: 6px;
    cursor: pointer;
    width: 76px;
    height: 76px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.single-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.single-product__thumb.is-active,
.single-product__thumb:hover {
    border-color: #04794d;
}

.single-product__gallery-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: #f0f0f0;
    border-radius: 12px;
}

/* Info panel */
.single-product__brand {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #04794d;
    margin: 0 0 12px;
}

.single-product__brand-logo {
    max-height: 36px;
    width: auto;
    display: block;
}

.single-product__title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.6px;
    color: #1e1e1e;
    margin: 0 0 14px;
}

@media (max-width: 768px) {
    .single-product__title {
        font-size: 32px;
        letter-spacing: -1.2px;
    }
}

.single-product__divider {
    height: 5px;
    width: 100%;
    background: linear-gradient(to right, #4eeba9 0%, transparent 100%);
    margin: 0 0 20px;
}

.single-product__category {
    font-size: 14px;
    color: #8f8f8f;
    margin: 0 0 16px;
}

.single-product__category a {
    color: #555;
    text-decoration: none;
}

.single-product__category a:hover {
    color: #04794d;
}

.single-product__aff-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.single-product__buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #e2ff2d;
    color: #1e1e1e;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.single-product__buy-btn:hover {
    background: #d2ee20;
    color: #1e1e1e;
    transform: translateY(-1px);
}

.single-product__buy-price {
    font-weight: 700;
    font-size: 17px;
    color: #1e1e1e;
}

.single-product__affiliate-notice {
    font-size: 12px;
    color: #8f8f8f;
    margin: 8px 0 0;
}

/* Content + specs */
.single-product__content {
    border-top: 1px solid #e5e5e5;
    margin-top: 32px;
    padding-top: 24px;
    margin-bottom: 36px;
    font-size: 17px;
    line-height: 1.7;
    color: #1e1e1e;
}

.single-product__specs {
    border-top: 1px solid #e5e5e5;
    padding-top: 36px;
    margin-bottom: 36px;
}

.single-product__specs-heading {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
    margin: 0 0 12px;
    color: #1e1e1e;
}

.single-product__specs-body {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.single-product__bottom-cta {
    border-top: 1px solid #e5e5e5;
    padding-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ============================================
   FAQ Section block (kitchen/faq-section)
   Native <details>/<summary> accordion + FAQPage
   JSON-LD. Renders from blocks/faq-section/render.php.
   ============================================ */
.kitchen-faq-section {
    margin: 40px 0;
}

.kitchen-faq-section__heading {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #1e1e1e;
    margin: 0 0 10px;
}

.kitchen-faq-section__divider {
    height: 2px;
    background: #1e1e1e;
    margin-bottom: 20px;
}

.kitchen-faq-section__list {
    display: flex;
    flex-direction: column;
}

.kitchen-faq-section__item {
    border-bottom: 1px solid #e5e5e5;
}

.kitchen-faq-section__item:first-of-type {
    border-top: 1px solid #e5e5e5;
}

.kitchen-faq-section__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    color: #1e1e1e;
    transition: color 0.2s ease;
}

.kitchen-faq-section__question::-webkit-details-marker {
    display: none;
}

.kitchen-faq-section__question:hover {
    color: #04794d;
}

.kitchen-faq-section__question-text {
    flex: 1 1 auto;
    min-width: 0;
}

.kitchen-faq-section__toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: #1e1e1e;
    transition: transform 0.2s ease;
}

.kitchen-faq-section__item[open] .kitchen-faq-section__toggle {
    transform: rotate(45deg);
}

.kitchen-faq-section__answer {
    padding: 0 4px 22px;
    font-size: 16px;
    line-height: 1.6;
    color: #1e1e1e;
}

.kitchen-faq-section__answer p {
    margin: 0 0 12px;
}

.kitchen-faq-section__answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .kitchen-faq-section {
        margin: 30px 0;
    }
    .kitchen-faq-section__heading {
        font-size: 24px;
    }
    .kitchen-faq-section__question {
        font-size: 16px;
        padding: 16px 0;
    }
    .kitchen-faq-section__answer {
        padding: 0 0 18px;
        font-size: 15px;
    }
}

/* =====================================================================
   Page wrapper used by single.php AND page templates (formerly inline
   in single.php so pages like /discounts inherited none of it). Caps
   page content at 1200px, matches the article layout's gutter.
   ===================================================================== */

.article-wrapper {
    padding: 25px 0 60px;
}

.article-wrapper > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .article-wrapper > .container {
        padding: 0 1.25rem;
    }
}

/* =====================================================================
   Page hero (title + optional subhead) used by page templates that
   don't have their own custom hero. Centered, generous breathing room.
   ===================================================================== */

.entry-header {
    text-align: center;
    margin: 0 0 28px;
}

.article-body h1.entry-title,
h1.entry-title {
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: #1e1e1e;
    margin: 0;
}

@media (max-width: 768px) {
    .article-body h1.entry-title,
    h1.entry-title {
        font-size: 32px;
        letter-spacing: -0.6px;
    }
}

/* =====================================================================
   Discounts page hero (page-discounts.php). Hardcoded title + KITCHEN-
   code subhead, centered axis with the discount grid below.
   ===================================================================== */

.discounts-hero {
    text-align: center;
    margin: 0 0 20px;
}

.discounts-hero__title {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -1.1px;
    color: #1e1e1e;
    margin: 0 0 14px;
}

.discounts-hero__title-break {
    display: none;
}

.discounts-hero__emoji {
    display: inline-block;
    margin-left: 4px;
}

/* Hero subhead styled like the brand-card offer callout:
   light-green pill with kitchen-green border + tag icon, so the
   page's anchor message ('Use code KITCHEN') reads in the same
   visual language as the per-brand offer below. Box stretches to
   the full container width on desktop so the sentence fits on
   one line and 'brands.' doesn't orphan onto a second row.
   Wraps gracefully on smaller viewports via the mobile rules
   below. */
.discounts-hero__lede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 22px;
    background: #e8f9ef;
    border-left: 4px solid #4eeba9;
    border-radius: 0 8px 8px 0;
    color: #00452c;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
}

.discounts-hero__lede-icon {
    flex-shrink: 0;
    color: #04794d;
    align-self: center;
}

.discounts-hero__lede-text {
    flex: 1 1 auto;
}

.discounts-hero__lede strong {
    color: #04794d;
    font-weight: 700;
}

/* FTC affiliate disclosure under the hero callout. Required because
   the discounts page is the most affiliate-heavy URL on the site —
   every card is a paid partnership. Set in muted plain (not italic)
   weight so it reads as fine print rather than competing emphasis,
   with the second sentence indented to sit visually under the first. */
.discounts-hero__ftc {
    max-width: 700px;
    margin: 12px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
    font-weight: 400;
    text-align: center;
}

.discounts-hero__ftc-trailing {
    display: block;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .discounts-hero__title {
        font-size: 30px;
        letter-spacing: -0.5px;
    }
    .discounts-hero__title-break {
        display: inline;
    }
    .discounts-hero__lede {
        font-size: 16px;
        padding: 12px 16px;
        gap: 10px;
    }
    .discounts-hero__lede-icon {
        width: 18px;
        height: 18px;
    }
    /* Shrink + tighten the FTC line on phones so it doesn't sprawl
       across 3-4 lines under the callout. Drop the indented-second-
       sentence treatment too — at narrow widths the indent looks
       like an accident, sentences flow more naturally inline. */
    .discounts-hero__ftc {
        font-size: 11px;
        line-height: 1.45;
        max-width: 92%;
        margin-top: 10px;
    }
    .discounts-hero__ftc-trailing {
        display: inline;
        padding: 0;
        margin: 0;
    }
}

/* =====================================================================
   Affiliate Discount Grid block (kitchen/affiliate-discount-grid)

   Visually mirrors the product card: same light-gray card background,
   same green callout for the offer line, same kitchen-green pill CTA.
   ===================================================================== */

/* Search filter actually hiding cards: our .affiliate-discount-card
   rule sets display: flex, which beats the browser's default
   [hidden] { display: none } on specificity. The JS sets card.hidden
   = true correctly (the count line proves that), but the cards stay
   visible without this explicit override. Same applies to sections
   that empty out after a category-chip filter. */
.affiliate-discount-block [hidden] {
    display: none !important;
}

/* Search bar above the grid: pill input with magnifier glyph,
   live-filters cards by brand name. Status line announces match
   count for screen readers and keyboard users. */
.affiliate-discount-search {
    margin: 0 0 20px;
}

/* Search row: input grows, view toggle pinned to the right. On
   narrow viewports the toggle disappears entirely (we force grid
   mode in CSS below — list mode looks cramped under ~600px). */
.affiliate-discount-search__row {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 580px;
    margin: 0 auto;
}

.affiliate-discount-search__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Grid / List view toggle: two icon buttons in a rounded pill
   container. The active button takes the kitchen-green fill,
   the inactive button stays transparent.

   Mobile-only by design: list mode adds real value on phone width
   (grid collapses to 1-column there anyway, so the dense horizontal
   row layout shows ~3x more brands per scroll). On desktop the
   grid is already a horizontal layout — list mode would just sprawl
   each brand across the full content column and waste space. So
   the toggle is hidden above 720px and the data-view attribute
   has no visual effect there (its CSS overrides are also wrapped
   in max-width: 720px). */
.affiliate-discount-view-toggle {
    display: none;
    flex-shrink: 0;
    padding: 3px;
    background: #f4f4f4;
    border-radius: 9999px;
    gap: 2px;
}

@media (max-width: 720px) {
    .affiliate-discount-view-toggle {
        display: inline-flex;
    }
}

.affiliate-discount-view-toggle__btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.affiliate-discount-view-toggle__btn:hover {
    color: #1e1e1e;
}

.affiliate-discount-view-toggle__btn.is-active {
    background: #04794d;
    color: #ffffff;
}

.affiliate-discount-view-toggle__btn:focus-visible {
    outline: 2px solid #4eeba9;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    /* Toggle stays visible on mobile so visitors can still switch
       between grid and list. Buttons shrink slightly so the search
       input keeps more of the row. */
    .affiliate-discount-view-toggle__btn {
        width: 32px;
        height: 32px;
    }
    .affiliate-discount-view-toggle__btn svg {
        width: 16px;
        height: 16px;
    }
}

.affiliate-discount-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
}

.affiliate-discount-search__input {
    width: 100%;
    padding: 11px 44px 11px 46px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    font-size: 15px;
    line-height: 1.3;
    color: #1e1e1e;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Native search inputs render their own X clear in WebKit/Blink that
   sits over our custom button — kill it so only ours shows. */
.affiliate-discount-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Custom clear (×) button — appears when input has text, sits inside
   the right edge of the pill input. Hidden via the [hidden] attr,
   toggled by the search JS based on input value. */
.affiliate-discount-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: #e5e7eb;
    border: none;
    border-radius: 9999px;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.affiliate-discount-search__clear:hover {
    background: #d1d5db;
    color: #1f2937;
}

.affiliate-discount-search__clear:focus-visible {
    outline: 2px solid #4eeba9;
    outline-offset: 2px;
}

.affiliate-discount-search__input::placeholder {
    color: #9ca3af;
}

.affiliate-discount-search__input:focus {
    outline: none;
    border-color: #4eeba9;
    box-shadow: 0 0 0 3px rgba(78, 235, 169, 0.25);
}

.affiliate-discount-search__status {
    text-align: center;
    margin: 10px 0 0;
    font-size: 13px;
    color: #6b7280;
}

/* Hide category chips until we have meaningful spread across categories.
   When all/most brands are paddle brands, the chips just feel noisy.
   Remove this rule (or comment out) to bring them back. */
.affiliate-discount-chips {
    display: none !important;
}

.affiliate-discount-empty {
    text-align: center;
    margin: 24px 0;
    padding: 24px;
    background: #f4f4f4;
    border-radius: 9px;
    color: #6b7280;
    font-size: 15px;
}

/* Filter chips: pill row above the grid. Active chip is dark-filled,
   inactive chips are outline-only. Counts hint at how many brands sit
   under each category so visitors know what they're filtering into. */
.affiliate-discount-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 22px;
}

.affiliate-discount-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.affiliate-discount-chip:hover {
    border-color: #4eeba9;
    color: #00452c;
}

.affiliate-discount-chip.is-active {
    background: #00452c;
    border-color: #00452c;
    color: #ffffff;
}

.affiliate-discount-chip__count {
    font-weight: 500;
    opacity: 0.75;
}

.affiliate-discount-grid {
    display: grid;
    gap: 24px;
    margin: 24px 0;
    grid-template-columns: repeat(var(--affiliate-grid-cols, 3), minmax(0, 1fr));
}

.affiliate-discount-grid--cols-2 { --affiliate-grid-cols: 2; }
.affiliate-discount-grid--cols-3 { --affiliate-grid-cols: 3; }
.affiliate-discount-grid--cols-4 { --affiliate-grid-cols: 4; }

.affiliate-discount-grid--empty {
    display: block;
    padding: 20px;
    background: #fafafa;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    color: #6b7280;
    text-align: center;
}

/* Featured row above the main grid, when any affiliates are flagged. */
.affiliate-discount-section {
    margin: 0 0 28px;
}

.article-body h3.affiliate-discount-section__title,
h3.affiliate-discount-section__title {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #1e1e1e;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.affiliate-discount-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f4f4f4;
    border-radius: 9px;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.affiliate-discount-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Discount badge: small light-mint pill in the top-right of each
   card summarizing the offer (e.g., "15% off", "Free hat", "$10
   off"). Derived from the first link's offer text via
   kitchen_affiliate_extract_discount_badge(). Empty for brands whose
   offers don't summarize cleanly (Selkirk's future-purchase coupon).
   Positioned absolute so it overlays the logo box corner.
   Light-mint background (same callout color used for the offer
   pill below) + dark forest text. Quiet, on-brand, and visually
   ties to the existing offer callout treatment instead of fighting
   for first-look attention. */
.affiliate-discount-card__discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 4px 10px;
    background: #e8f9ef;
    color: #00452c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 9999px;
    line-height: 1.2;
    box-shadow: none;
    pointer-events: none;
    white-space: nowrap;
}

.affiliate-discount-card__featured-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #4eeba9;
    color: #00452c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.affiliate-discount-card__logo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
}

.affiliate-discount-card__logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.affiliate-discount-card__logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
}

/* Logo-less card: render the brand name as big type so the card keeps
   the same shape as cards with logos. Reads as intentional placeholder,
   not a missing image. Disappears once the admin uploads a real logo. */
.affiliate-discount-card__logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
}

.affiliate-discount-card__logo--placeholder a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.affiliate-discount-card__logo-placeholder-text {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #1e1e1e;
    text-align: center;
    padding: 14px 20px;
    max-width: 100%;
    word-break: break-word;
}

.affiliate-discount-card__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    flex: 1 1 auto;
}

.article-body h3.affiliate-discount-card__name,
h3.affiliate-discount-card__name {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: #1e1e1e;
    margin: 0;
    text-align: center;
}

/* Each link row inside the card: offer callout + CTA button.
   Single-link partners get one row; multi-link partners (e.g. JOOLA)
   get a row per funnel, stacked with their own offer + button.
   flex:1 lets this row grow to fill the card body so the CTA can
   bottom-align via margin-top:auto — keeps every card's "Shop X"
   button on the same baseline regardless of how many lines the
   offer text takes. */
.affiliate-discount-card__link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.affiliate-discount-card__link + .affiliate-discount-card__link {
    padding-top: 14px;
    border-top: 1px dashed #d8dadc;
}

/* Offer line styled like the product-card affiliate note callout:
   light-green background, kitchen-green left border, tag icon.
   Content (icon + text) is centered so the code reads as the visual
   focal point of the card, matching the centered logo / name / CTA. */
.affiliate-discount-card__offer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background: #e8f9ef;
    border-left: 3px solid #4eeba9;
    border-radius: 0 6px 6px 0;
    color: #00452c;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.affiliate-discount-card__offer-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #04794d;
    display: block;
    align-self: center;
}

.article-body p.affiliate-discount-card__offer,
p.affiliate-discount-card__offer {
    margin: 0;
    color: #00452c;
    font-size: 14px;
    line-height: 1.35;
}

.affiliate-discount-card__offer strong,
.affiliate-discount-card__offer b {
    color: #04794d;
    font-weight: 700;
}

.affiliate-discount-card__offer a {
    color: #04794d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* CTA: same pill as product-card aff-btn. margin-top:auto pushes the
   CTA to the bottom of the flex link container, aligning every card's
   "Shop X" button at the same vertical position across the grid. */
.affiliate-discount-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    background: #4eeba9;
    border: none;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s, filter 0.2s;
    width: 100%;
    max-width: 400px;
    margin: auto auto 0;
    box-sizing: border-box;
    text-align: center;
}

.affiliate-discount-card__cta:hover {
    filter: brightness(0.95);
    color: #000000;
}

/* ============================================
   LIST VIEW MODE — mobile-only
   Activated when the block container has
   data-view="list" AND the viewport is <=720px.
   Desktop never enters list mode (the toggle
   is hidden above 720px so the option doesn't
   surface there). On mobile, list mode is a
   real win: ~3x denser scroll than grid mode.
   ============================================ */

@media (max-width: 720px) {

.affiliate-discount-block[data-view="list"] .affiliate-discount-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "logo name cta"
        "logo offer cta";
    align-items: center;
    gap: 6px 16px;
    padding: 14px 16px;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card:hover {
    transform: none;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__logo {
    grid-area: logo;
    aspect-ratio: 1.4;
    width: 110px;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Force the logo image to fill its container box so small source
   logos (DOMINATOR, Diadem, Engage) don't render at their tiny
   natural size and look lost in white space. object-fit: contain
   preserves aspect ratio so wide and tall logos both fit cleanly. */
.affiliate-discount-block[data-view="list"] .affiliate-discount-card__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__body {
    display: contents;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    grid-area: name;
    margin: 0 0 4px;
    padding-left: 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.3px;
    color: #1e1e1e;
    align-self: end;
    line-height: 1.2;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__link {
    display: contents;
}

/* Keep the kitchen-green callout treatment in list mode too — same
   light-green pill background + left border + tag icon as the grid
   view. Tighten padding so the row stays compact, and align text
   to the left of the pill (icon → text → empty space on the right)
   so the offer reads as a natural sentence rather than centered ad
   copy. The brand name above has matching padding-left so it sits
   over the icon for a clean vertical column. */
.affiliate-discount-block[data-view="list"] .affiliate-discount-card__offer-row {
    grid-area: offer;
    padding: 8px 12px;
    font-size: 13px;
    gap: 8px;
    text-align: left;
    justify-content: flex-start;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__offer-icon {
    width: 16px;
    height: 16px;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__offer,
.affiliate-discount-block[data-view="list"] .article-body p.affiliate-discount-card__offer {
    font-size: 13px;
    text-align: left;
}

/* CTA sits on the right, spanning both rows of the card. Allow the
   label to wrap to two lines for long brand names (Shop Pickleball
   Apes, Shop Pickleball Central) and grow the button taller to
   accommodate. Caps width so it doesn't sprawl across the card on
   mid-length labels. Rounded rectangle (vs pill) reads cleaner at
   any wrap state since a wrapped pill looks like an awkward capsule. */
.affiliate-discount-block[data-view="list"] .affiliate-discount-card__cta {
    grid-area: cta;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: 160px;
    margin: 0;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    border-radius: 10px;
}

/* Discount badge is HIDDEN in list mode — the offer text in the
   green callout already says "Use code KITCHEN for 10% off" so the
   corner sticker is redundant noise. List mode prioritizes density,
   so we drop the visual repetition. Grid mode still shows it (corner
   pill is helpful when the card is denser and you can't read the
   full offer at a glance). */
.affiliate-discount-block[data-view="list"] .affiliate-discount-card__discount-badge {
    display: none;
}

/* Featured row keeps its section heading but cards inside it use
   the same horizontal list layout. */
.affiliate-discount-block[data-view="list"] .affiliate-discount-card--featured {
    border-left: 3px solid #4eeba9;
}

.affiliate-discount-block[data-view="list"] .affiliate-discount-card__featured-badge {
    top: 6px;
    right: 6px;
    font-size: 9px;
    padding: 2px 6px;
}

} /* end @media (max-width: 720px) outer wrap — list mode is mobile-only */

@media (max-width: 520px) {
    /* Phone width: keep the logo at a readable size (90px) so brand
       marks stay recognizable. Content column tightens, badge text
       shrinks, CTA padding pulls in. No internal padding on the logo
       box — image fills edge-to-edge. */
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card {
        grid-template-columns: 90px minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px;
    }
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__logo {
        width: 90px;
        aspect-ratio: 1.3;
        padding: 0;
    }
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__name {
        font-size: 16px;
    }
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__offer-row,
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__offer {
        font-size: 11px;
        line-height: 1.3;
    }
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__cta {
        padding: 6px 12px;
        font-size: 12px;
    }
    .affiliate-discount-block[data-view="list"] .affiliate-discount-card__discount-badge {
        font-size: 9px;
        padding: 3px 7px;
    }
}

/* Secondary brand-hub link. Deliberately ghost-styled — outline only,
   smaller font, no background — so it reads as "and also" rather than
   competing with the revenue-driving Shop CTA above. */
.affiliate-discount-card__brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 8px 14px;
    background: transparent;
    color: #04794d;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #4eeba9;
    border-radius: 9999px;
    box-sizing: border-box;
    transition: background 0.2s, color 0.2s;
}

.affiliate-discount-card__brand-link:hover {
    background: #e8f9ef;
    color: #00452c;
}

@media (max-width: 1024px) {
    .affiliate-discount-grid--cols-4 { --affiliate-grid-cols: 3; }
}

@media (max-width: 768px) {
    .affiliate-discount-grid {
        gap: 14px;
        margin: 18px 0;
    }
    .affiliate-discount-grid--cols-3,
    .affiliate-discount-grid--cols-4 { --affiliate-grid-cols: 2; }
    .affiliate-discount-card {
        padding: 10px;
        gap: 10px;
    }
    .affiliate-discount-card__body {
        gap: 10px;
    }
    .article-body h3.affiliate-discount-card__name,
    h3.affiliate-discount-card__name {
        font-size: 17px;
    }
    .affiliate-discount-card__offer-row,
    .article-body p.affiliate-discount-card__offer,
    p.affiliate-discount-card__offer {
        font-size: 13px;
    }
    .affiliate-discount-card__cta {
        font-size: 14px;
        padding: 9px 14px;
    }
}

/* Stay 2-up on small phones — single-column means 33+ brands of
   scroll for no real legibility win at ~170-180px card widths. */
@media (max-width: 360px) {
    .affiliate-discount-grid--cols-2,
    .affiliate-discount-grid--cols-3,
    .affiliate-discount-grid--cols-4 { --affiliate-grid-cols: 1; }
}

/* =====================================================================
   Brand archive (/brand/{slug}/) — taxonomy-kitchen_brand.php
   ===================================================================== */

.brand-archive {
    background: #ffffff;
}

/* Hero: flat dark band by default, switches to a backdrop image when
   the brand has one set. Overlay keeps text legible regardless. */
.brand-archive__hero {
    position: relative;
    background-color: #00452c;
    color: #ffffff;
    padding: 56px 0 48px;
    overflow: hidden;
}

.brand-archive__hero--has-image {
    background-size: cover;
    background-position: center;
}

.brand-archive__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 69, 44, 0.55) 0%, rgba(0, 69, 44, 0.92) 100%);
    pointer-events: none;
}

.brand-archive__hero--has-image .brand-archive__hero-overlay {
    background: linear-gradient(180deg, rgba(0, 69, 44, 0.7) 0%, rgba(0, 69, 44, 0.94) 100%);
}

.brand-archive__hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.brand-archive__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 22px;
    margin: 0 auto 18px;
    max-width: 220px;
    max-height: 110px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.brand-archive__logo {
    display: block;
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.brand-archive__title {
    font-weight: 700;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: #ffffff;
    margin: 0 0 16px;
}

.brand-archive__intro {
    max-width: 640px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.brand-archive__intro p {
    margin: 0 0 12px;
}

.brand-archive__intro p:last-child {
    margin-bottom: 0;
}

.brand-archive__intro a {
    color: #4eeba9;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Offer callout sitting below the hero. Mirrors the product-card
   affiliate-note callout color palette so the visual language is
   consistent across the site. */
.brand-archive__offer {
    margin: -28px 0 0;
    position: relative;
    z-index: 2;
}

.brand-archive__offer-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #e8f9ef;
    border-left: 4px solid #4eeba9;
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    color: #00452c;
}

.brand-archive__offer-icon {
    flex-shrink: 0;
    color: #04794d;
    padding-top: 2px;
}

.brand-archive__offer-body {
    flex: 1 1 auto;
    min-width: 0;
}

.brand-archive__offer-eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #04794d;
}

.brand-archive__offer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.brand-archive__offer-row + .brand-archive__offer-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 69, 44, 0.2);
}

.brand-archive__offer-text {
    margin: 0;
    flex: 1 1 60%;
    min-width: 240px;
    font-size: 16px;
    line-height: 1.4;
    color: #00452c;
}

.brand-archive__offer-text strong,
.brand-archive__offer-text b {
    color: #04794d;
    font-weight: 700;
}

.brand-archive__offer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    background: #4eeba9;
    color: #000000;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 9999px;
    transition: filter 0.2s;
    white-space: nowrap;
}

.brand-archive__offer-cta:hover {
    filter: brightness(0.95);
    color: #000000;
}

/* Section blocks below the hero/offer */
.brand-archive__products,
.brand-archive__articles {
    padding: 40px 0;
}

.brand-archive__section-title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #1e1e1e;
    margin: 0 0 24px;
}

.brand-archive__section-count {
    color: #6b7280;
    font-weight: 500;
    font-size: 18px;
    margin-left: 8px;
}

.brand-archive__empty {
    margin: 0;
    padding: 20px;
    background: #fafafa;
    border: 1px dashed #d1d5db;
    border-radius: 9px;
    color: #6b7280;
    text-align: center;
}

.brand-archive__articles {
    background: #f7f7f5;
}

.brand-archive__article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.brand-archive__article-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #1e1e1e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-archive__article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.brand-archive__article-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #e5e7eb;
    background-size: cover;
    background-position: center;
}

.brand-archive__article-body {
    padding: 14px 16px 16px;
}

.brand-archive__article-title {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: #1e1e1e;
}

.brand-archive__article-meta {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .brand-archive__article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .brand-archive__hero {
        padding: 40px 0 36px;
    }
    .brand-archive__title {
        font-size: 32px;
        letter-spacing: -0.6px;
    }
    .brand-archive__intro {
        font-size: 15px;
    }
    .brand-archive__offer-card {
        flex-direction: column;
        gap: 12px;
        padding: 18px 20px;
    }
    .brand-archive__offer-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .brand-archive__offer-cta {
        width: 100%;
    }
    .brand-archive__products,
    .brand-archive__articles {
        padding: 28px 0;
    }
    .brand-archive__section-title {
        font-size: 22px;
    }
    .brand-archive__article-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   /best-of hub landing page
   Groups of curated best-of article cards.
   Each card auto-pulls hero image + title +
   excerpt from the linked article via
   Customizer → Best Of Hub Page.
   ============================================ */

.bestof-hub__hero {
    max-width: 780px;
    margin: 40px auto 32px;
    text-align: center;
    padding: 0 16px;
}

.bestof-hub__title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.05;
    color: #1e1e1e;
    margin: 0 0 16px;
}

.bestof-hub__emoji {
    display: inline-block;
    font-size: 40px;
    vertical-align: middle;
    margin-left: 6px;
}

.bestof-hub__lede {
    font-size: 18px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}

.bestof-hub__intro {
    max-width: 780px;
    margin: 0 auto 40px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
}

.bestof-hub__intro:empty {
    display: none;
    margin: 0;
}

.bestof-hub__group {
    margin: 0 auto 56px;
    max-width: 1200px;
    padding: 0 16px;
}

.bestof-hub__group-heading {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1e1e1e;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #4eeba9;
}

.bestof-hub__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.bestof-hub__card {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bestof-hub__card::before,
.bestof-hub__card::marker {
    content: none;
    display: none;
}

.bestof-hub__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.bestof-hub__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.bestof-hub__card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f4f4;
}

.bestof-hub__card-thumb--placeholder {
    background: linear-gradient(135deg, #f4f4f4 0%, #e5e7eb 100%);
}

.bestof-hub__card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bestof-hub__card:hover .bestof-hub__card-img {
    transform: scale(1.03);
}

.bestof-hub__card-body {
    padding: 18px 20px 20px;
}

.bestof-hub__card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: #1e1e1e;
    margin: 0 0 10px;
}

.bestof-hub__card-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bestof-hub__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #04794d;
}

.bestof-hub__card:hover .bestof-hub__card-cta {
    color: #00452c;
}

@media (max-width: 1024px) {
    .bestof-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bestof-hub__hero {
        margin: 24px auto 24px;
    }
    .bestof-hub__title {
        font-size: 32px;
    }
    .bestof-hub__lede {
        font-size: 16px;
    }
    .bestof-hub__group {
        margin-bottom: 40px;
    }
    .bestof-hub__group-heading {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .bestof-hub__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   Sitewide breadcrumbs
   Renders above the article H1 / page title.
   Two-level for now (Home › Section › Title);
   future format-taxonomy upgrade adds a third
   level. BreadcrumbList JSON-LD ships in
   inc/breadcrumbs.php for SERP rich results.
   ============================================ */

.kitchen-breadcrumbs {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

.kitchen-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.kitchen-breadcrumbs__item {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.kitchen-breadcrumbs__item::before,
.kitchen-breadcrumbs__item::marker {
    content: none;
    display: none;
}

.kitchen-breadcrumbs__item a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}

.kitchen-breadcrumbs__item a:hover,
.kitchen-breadcrumbs__item a:focus-visible {
    color: #04794d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kitchen-breadcrumbs__item--current span {
    color: #1e1e1e;
    font-weight: 600;
}

.kitchen-breadcrumbs__sep {
    margin: 0 8px;
    color: #d1d5db;
}

/* Truncate the current crumb on mobile so the trail stays
   single-line even for long article titles. */
@media (max-width: 640px) {
    .kitchen-breadcrumbs {
        font-size: 12px;
        margin-bottom: 10px;
    }
    .kitchen-breadcrumbs__list {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .kitchen-breadcrumbs__item--current span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .kitchen-breadcrumbs__sep {
        margin: 0 6px;
    }
}

/* ============================================
   Best Of lists section on /discounts (#87)
   Centered heading + stacked link list below
   the affiliate grid. Hardcoded list lives in
   page-discounts.php so the section survives
   page-record-loss / fresh-site spin-ups.
   ============================================ */

.discounts-bestof {
    margin: 56px auto 32px;
    max-width: 900px;
    padding: 0 16px;
    text-align: center;
}

.discounts-bestof__title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #1e1e1e;
    margin: 0 0 28px;
}

.discounts-bestof__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.discounts-bestof__item {
    margin: 0;
    padding: 0;
}

.discounts-bestof__link {
    display: inline-block;
    font-size: 19px;
    font-weight: 700;
    color: #04794d;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: color 0.15s, text-decoration-thickness 0.15s;
}

.discounts-bestof__link:hover,
.discounts-bestof__link:focus-visible {
    color: #00452c;
    text-decoration-thickness: 3px;
}

@media (max-width: 640px) {
    .discounts-bestof {
        margin: 40px auto 24px;
    }
    .discounts-bestof__title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .discounts-bestof__link {
        font-size: 16px;
    }
    .discounts-bestof__list {
        gap: 14px;
    }
}

/* ============================================
   Contact page (#20)
   page-contact.php template. Hero + simple
   form with department routing, success/error
   states, and a hidden honeypot for spam.
   ============================================ */

.contact-hero {
    text-align: center;
    margin: 32px auto 24px;
    max-width: 720px;
    padding: 0 16px;
}

.contact-hero__title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0 0 12px;
    color: #1e1e1e;
}

.contact-hero__lede {
    font-size: 17px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}

.contact-form {
    max-width: 640px;
    margin: 24px auto 48px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form__label {
    font-size: 14px;
    font-weight: 600;
    color: #1e1e1e;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 11px 14px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    color: #1e1e1e;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #04794d;
    box-shadow: 0 0 0 3px rgba(78, 235, 169, 0.25);
}

.contact-form__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.contact-form__submit {
    appearance: none;
    -webkit-appearance: none;
    background: #04794d;
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.contact-form__submit:hover {
    background: #00452c;
}

.contact-form__submit:active {
    transform: translateY(1px);
}

/* Honeypot field: visually hidden but still focusable for screen
   readers (we tabindex=-1 to keep it out of keyboard nav). Bots
   that auto-fill all inputs will trip it; real users never see it. */
.contact-form__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-success {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    background: #e8f9ef;
    border-left: 4px solid #4eeba9;
    border-radius: 6px;
    color: #00452c;
    font-size: 15px;
}

.contact-form-errors {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #991b1b;
    font-size: 14px;
}

.contact-form-errors p {
    margin: 0 0 6px;
}

.contact-form-errors ul {
    margin: 0;
    padding-left: 20px;
}

.contact-form-errors li {
    margin: 2px 0;
}

/* Social row sits inside the contact hero, directly under the H1.
   Icon-only circles in the light kitchen-mint callout color (same
   tone as the discount grid offer callouts). Quick, friendly
   secondary contact path that doesn't compete with the form CTA. */
.contact-social__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Theme content CSS adds bullet markers to UL>LI elsewhere; force
   them off here so the social row doesn't get dots next to each icon. */
.contact-social__list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-social__list li::before,
.contact-social__list li::marker {
    content: none;
    display: none;
}

.contact-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #e8f9ef;
    color: #00452c;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.contact-social__link:hover {
    background: #c2eed4;
    color: #00452c;
}

.contact-social__link:active {
    transform: translateY(1px);
}

.contact-social__link:focus-visible {
    outline: 2px solid #4eeba9;
    outline-offset: 2px;
}

.contact-social__link svg {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .contact-hero__title {
        font-size: 32px;
    }
    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .contact-social__link {
        padding: 7px 12px;
        font-size: 13px;
    }
}