/*
Theme Name:   Hello Elementor Pride Child
Theme URI:    https://www.pridemilling.co.za/
Description:  Child theme of Hello Elementor for Pride Milling Company.
              Preserves all custom functionality (AJAX filters, Pods queries,
              Gravity Forms integration, OptionTree options) during the
              migration from the original Pride custom theme.
Author:       Pride Milling
Author URI:   https://www.pridemilling.co.za/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-pride-child
Tags:         elementor, custom, child-theme
*/

/* =============================================================
   PRIDE MILLING — GLOBAL CUSTOM STYLES
   All styles below are migrated from the original Pride theme
   (assets/css/style.css, brand-templates/brands.css, etc.)
   Edit here rather than in the parent Hello Elementor theme.
   ============================================================= */

/* ── Grid system (Bootstrap-equivalent) ──────────────────────
   The original theme relies heavily on Bootstrap's .row/.col-*
   grid classes across nearly every template, but Bootstrap itself
   was removed during this migration. Earlier rounds patched this
   bug page-by-page with narrowly scoped flex rules (e.g. just
   ".locations .row > .col-md-6"), which works but means any new
   page using these classes breaks by default unless a matching
   scoped fix is remembered each time. This is the general-purpose
   fix: every .row/.col-* combination actually used anywhere in the
   original theme, covering all 5 breakpoints it relies on
   (col-X = all sizes, col-sm-X = ≥576px, col-md-X = ≥768px,
   col-lg-X = ≥992px, col-xl-X = ≥1200px), plus offset-md-7 and
   .no-gutters. Page-specific scoped grid rules added in earlier
   sessions still work fine alongside this — they're more specific
   and simply reinforce the same widths.
   ── */
.container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.row.no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.row.no-gutters > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

[class*="col-"] {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* Unprefixed col-N — applies at all sizes */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-1_5 { flex: 0 0 12%; max-width: 12%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* col-sm-N — ≥576px */
@media (min-width: 576px) {
    .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* col-md-N — ≥768px */
@media (min-width: 768px) {
    .col-md { flex: 1 1 0%; max-width: 100%; }
    .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .col-md-auto { flex: 1 1 auto; max-width: 100%; }
    .offset-md-7 { margin-left: 58.3333%; }
}

/* col-lg-N — ≥992px */
@media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
}

/* col-xl-N — ≥1200px */
@media (min-width: 1200px) {
    .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}


/* ── Typography ───────────────────────────────────────────── */

body,
{
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', Arial, sans-serif;
}

/* Headings pulled from ACF often contain a <strong> tag around one word
   for emphasis (e.g. "OUR <strong>Management Team</strong>"). Without
   this rule the browser default bold looks like an accident; this makes
   it a deliberate weight step instead. Matches the original theme's
   `h1 strong { font-weight: 600; }` pattern, applied across all
   heading levels since H2–H4 use the same emphasis pattern on this site. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-weight: 600;
}

.text-center {
    text-align: center;
}


/* ── Colours (Brand Palette) ──────────────────────────────── */

:root {
    --pride-green:           #0B7533;   /* Primary dark green   */
    --pride-mid-green:       #2e7d52;   /* Mid green            */
    --pride-light-green:     #5aad7c;   /* Light green / CTA    */
    --pride-accent:          #9BC322;   /* Amber accent         */
    --pride-grey:            #f5f5f5;   /* Light grey sections  */
    --pride-dark:            #333333;   /* Body text            */
    --pride-white:           #ffffff;
}

/* ── Buttons ──────────────────────────────────────────────── */

.elementor-button.elementor-button-link,
.btn {
	min-width: 150px;
}

.btn,
.btn-green {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    background-color: var(--pride-green);
    color: var(--pride-white) !important;
    text-align: center;
}

.btn:hover,
.btn-green:hover {
    background-color: var(--pride-accent);
}

.btn-light-green {
    background-color: var(--pride-light-green);
}
.btn-light-green:hover {
    background-color: var(--pride-mid-green);
}

.btn-white {
    background-color: #ffffff;
    color: var(--pride-green) !important;
}
.btn-white:hover {
    background-color: var(--pride-mid-green);
    color: #ffffff;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */

.breadcrumbs {
    background-color: #f0f0f0;
    padding: 10px 0;
    font-size: 13px;
}

.breadcrumbs a {
    color: var(--pride-green);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .current {
    color: #666;
}

.breadcrumbs i {
    font-size: 10px;
    margin: 0 5px;
    color: #999;
}


/* ── Sections ─────────────────────────────────────────────── */
/* .section.grey rules are defined below under "Popup form panels"
   (consolidated there since the sliding enquiry form panel is the
   main place this class is used). */

.section-fullwidth {
    position: relative;
    min-width: 100%;
    max-width: none !important;
    width: 99.6vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}


/* ── Cookie Banner ────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: #666;
    text-align: center;
    z-index: 99999;
}

.cookie-banner p {
    color: white;
    margin: 0 0 8px;
}

.cookie-banner a {
    color: white;
    text-decoration: underline;
}

.cookie-banner .btn {
    text-decoration: none;
    margin: auto;
    padding: 5px 15px !important;
    width: auto !important;
    min-width: 0 !important;
}

.cookie-banner.hide_permant,
.cookie-banner.hidden {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    .cookie-banner {
        display: none;
    }
}


/* Product Cards (listing pages) */

#product-items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
}

#product-items .product {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 576px) {
    #product-items .product.col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    #product-items .product.col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.product {
    margin-bottom: 30px;
    text-align: center;
}

.product .thumbnail img {
    max-width: 100%;
    height: auto;
}

.product h3 {
    font-size: 16px;
    margin-top: 10px;
}

.product h3 a {
    color: var(--pride-dark);
    text-decoration: none;
}

.product h3 a:hover {
    color: var(--pride-green);
}


/* ── Article / News Cards ─────────────────────────────────── */

.article {
    margin-bottom: 30px;
}

.article-inner {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 0 15px;
}

.article-image img {
    width: 100%;
    height: auto;
}

.article-content h3 {
    font-size: 17px;
    margin-bottom: 8px;
    color: var(--pride-dark);
}

.article-content p {
    font-size: 14px;
    color: #555;
}

.article-content a,
.article-content .link {
    color: var(--pride-green);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}


/* ── Gravity Forms overrides ──────────────────────────────── */

.gform_wrapper ul li.gfield.global-sales-products-field,
.gform_wrapper ul li.industrial-products-field {
    width: 100%;
}

.gform_wrapper ul li.gfield.global-sales-products-field label,
.gform_wrapper ul li.gfield.industrial-products-field label {
    font-weight: 600;
}

.gform_wrapper .global-sales-products-field ul.gfield_checkbox li,
.gform_wrapper .industrial-products-field ul.gfield_checkbox li {
    width: 33.33%;
    display: inline-block;
}

.gform_wrapper ul li.gfield.industrial-products-field .gfield_checkbox li label {
    width: 75% !important;
}

.gform_wrapper ul.gfield_checkbox,
.gform_wrapper ul.gfield_radio {
    display: flex;
    flex-wrap: wrap;
}

.gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.medium,
.gform_wrapper textarea.medium {
    width: 100%;
}

.gform_wrapper ul li.gfield label {
    font-size: 14px;
}

.gform_body,
.gform_wrapper .gform_footer {
    padding: 0;
}

.gform_wrapper ul li.gfield {
	clear: none !important;
	float: left;
	width: 49%;
	padding: 0 20px !important;
	box-sizing: border-box;
	margin-bottom: 15px !important;
	margin-top: 0px !important;
	position: relative;
	min-height: 55px;
	margin-right: 1% !important;
}

.gform_wrapper .top_label .gfield_error {
	width: 49%;
}

.gform_button.button {
	min-width: 150px;
	padding: 12px;
	font-weight: 600;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	text-align: center;
	border-radius: 0;
	color: white;
	background: #0B7533;
}

.gform_wrapper ul li.gfield {
	clear: none !important;
	float: left;
	width: 49%;
	padding: 0 20px !important;
	box-sizing: border-box;
	margin-bottom: 15px !important;
	margin-top: 0px !important;
	position: relative;
	min-height: 55px;
	margin-right: 1% !important;
}

.gform_wrapper .top_label .gfield_error {
	width: 49%;
}

.single-careers .gform_wrapper .top_label .gfield_error {
	width: 100%;
}


.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
	max-width: 35% !important;
}

.gform_wrapper ul li.gfield label {
	width: 180px;
	float: left;
	line-height: 25px;
	margin-top: 5px !important;
}

.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
	position: absolute;
	top: 17px;
}

.gform_wrapper.gf_browser_chrome .gfield_error input[type=email],
.gform_wrapper.gf_browser_chrome .gfield_error input[type=number],
.gform_wrapper.gf_browser_chrome .gfield_error input[type=password],
.gform_wrapper.gf_browser_chrome .gfield_error input[type=tel],
.gform_wrapper.gf_browser_chrome .gfield_error input[type=text],
.gform_wrapper.gf_browser_chrome .gfield_error input[type=url],
.gform_wrapper.gf_browser_chrome .gfield_error select,
.gform_wrapper.gf_browser_chrome .gfield_error textarea,
.gform_wrapper.gf_browser_chrome li.gfield_error.field_sublabel_above .ginput_complex input[type=text] {
	margin-bottom: 10px;
}


.gform_wrapper .top_label .gfield_description {
	margin-left: 180px;
}

.gform_wrapper ul li.gfield.full-width {
	width: 100%;
}

.gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.medium,
.gform_wrapper textarea.medium {
	width: calc(100% - 190px);
	float: left;
}

.gform_wrapper ul li.gfield.full-width label,
.gform_wrapper ul li.gfield.full-width textarea.medium {
	float: none;
	width: 100%;
}

.gform_wrapper ul li.gfield.agree-to-terms {
	width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.gform_wrapper ul li.gfield.agree-to-terms .gfield_label {
	width: calc(100% - 50px);
	float: right;
}

.gform_wrapper ul li.gfield.agree-to-terms .gfield_checkbox {
	float: left;
	width: 50px;
}

.gform_body,
.gform_wrapper .gform_footer {

	margin: auto;
}

.gform_wrapper .gform_footer {
	padding: 15px;
}

.gfield_checkbox input[type="checkbox"] {
	height: 24px;
}

.gfield_checkbox input[type="checkbox"]:after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid #727272;
	border-radius: 5px;
	background-color: white;
}

.gfield_checkbox input[type="checkbox"]:checked:after {
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	background-color: #f2f2f2;
	border-color: #165A40;
	color: #165A40;
	text-align: left;
	line-height: 18px;
	padding: 2px;
}

.gform_wrapper ul li.gfield.global-sales-products-field, .gform_wrapper ul li.industrial-products-field {
    width: 100%;
    clear: both !important;
}


/* ── Popup form panels ────────────────────────────────────── */

.section.grey {
    padding: 0;
    background-color: #F2F2F2; /* exact original value — note: --pride-grey is #f5f5f5, a close but different shade */
}

.section.grey .popup-form {
    padding: 40px 0 30px;
    text-align: center;
}

.popup-form {
    background: var(--pride-white);
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.section.form h2 {
    margin-bottom: 10px;
}

.section.form a#hide-form,
.section.form .close-popup-form {
    text-decoration: underline;
    font-size: 11px;
    color: #000000;
    letter-spacing: 2.2px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

/* ── Form show/hide state ──────────────────────────────────
   Ported from page.php's inline <style> block (the "Enquire Now"
   sliding form pattern used on procurement, certificates, and
   similar pages). Uses a max-height transition rather than
   display:none/block so the panel slides open smoothly instead
   of snapping instantly. ── */
.section.form {
    max-height: 0;
    overflow: hidden;
    transition: all 1s;
}

.section.form.show {
    max-height: 3000px;
    transition: all 2s;
}

@media (max-width: 1000px) {
    .section.form.show {
        max-height: 3000px;
    }
}

@media (max-width: 540px) {
    .section.form.show {
        max-height: unset;
    }
}


/* ── Responsive ───────────────────────────────────────────── */

/* =============================================================
   ADDITIONAL CLASSES — from template audit
   ============================================================= */

/* ── Brand colour utility classes (generated dynamically per-brand
      in landing-page.php and product-range.php via inline <style>.
      These base definitions ensure fallback styling exists.     ── */
.primary-bg   { background-color: var(--pride-green); color: #fff; }
.secondary-bg { background-color: var(--pride-mid-green); color: #fff; }
.tertiary-bg  { background-color: var(--pride-light-green); color: #fff; }
.alternate-bg { background-color: var(--pride-accent); color: #fff; }
.primary-color   { color: var(--pride-green); }
.secondary-color { color: var(--pride-mid-green); }
.tertiary-color  { color: var(--pride-light-green); }

/* ── AJAX filter — card-filtered (result cards from AJAX handlers) ── */
.card-filtered { margin-bottom: 24px; }

/* .enquiry_form and .section-break styling is defined further down
   under "CONTACT PAGE TEMPLATE" — ported exactly from the original
   pride/page-contact.php inline <style> block once that source was
   read. The rules previously here were guessed beforehand: the
   .enquiry_form.active variant was never actually used by any JS
   (the real show/hide toggle is inline display via jQuery .hide()/
   .show(), not a class), and the section-break styling guessed a
   different visual treatment (border-top, green text, pointer-events:
   none) than the original's actual plain bold-label styling. Removed
   to avoid two conflicting rule sets for the same selectors. */

/* ── Banner sections ── */
.banner {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 350px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}
.banner .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}
.banner .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.banner .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.banner [class^="col-"],
.banner [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
}
.banner h1, .banner h2, .banner h4 {
    color: #fff;
    position: relative;
}

/* ── Slider controls (custom prev/next arrows) ── */
.slider-controls { display: flex; gap: 10px; margin-top: 12px; }
.slider-control {
    width: 36px; height: 36px;
    background: var(--pride-green);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.slider-control:hover { background: var(--pride-mid-green); }

/* .brand-banner / .brand-banner-content / .brand-hero / .brand-range-banner
   etc. are defined further down under "CONSUMER BRANDS TAXONOMY
   TEMPLATE" — ported exactly from the original brand-templates/brands.css
   once taxonomy-consumer_brands.php and its includes were read. This
   placeholder block (guessed before that source was available) has
   been removed to avoid conflicting rule sets. */


/* .brand-news-section is also defined further down under
   "CONSUMER BRANDS TAXONOMY TEMPLATE" with the accurate ported
   values (the speculative .primary-bg padding guess and the
   background-color guess here have been removed). */

/* .certificate-slide styling is defined further down under
   "PRODUCTS LISTING PAGE TEMPLATE" — ported exactly from the
   original .industrial-products .certificate-slide rules once
   page-products.php's source was read. This placeholder block
   (a bordered card style the real original doesn't use) has
   been removed to avoid two conflicting rule sets. */


/* Testimonial styling is defined further down under "TRAINING PAGE
   TEMPLATE" — ported exactly from the original .testimonial /
   .testimonial-badge / .testimonial-content / .testimonial-inner
   rules once page-training.php's source was read. This placeholder
   block (generic flex layout, guessed before that source was
   available) has been removed to avoid two conflicting rule sets
   for the same classes. */

/* ── Careers slider wrapper ── */
.news-slider-wrapper {
    margin-top: 30px;
}

/* .program-inner styling is defined further down under "TRAINING
   PAGE TEMPLATE" — ported exactly from the original .program-inner /
   .opportunities .program-inner rules once page-training.php's
   source was read. This placeholder block (guessed before that
   source was available — a dark overlay + rounded corners style
   that the real original doesn't use) has been removed. */

/* Mills and Stamps base rules are defined later in this file
   under "ABOUT US — MILLS/STAMPS SECTION" with the exact
   values ported from the original theme. */

/* .location / .locations styling is defined further down under
   "CONTACT PAGE TEMPLATE" — ported exactly from the original
   pride/style.css once page-contact.php's source was read. The
   previous .location-inner / .location-image rules here were
   guessed before that source was available (and didn't even exist
   as styled selectors in the original — they're unstyled structural
   wrapper divs in the real markup). Removed to avoid confusion. */

/* ── Store listings slider ── */
.stores-slider .slick-slide { padding: 5px; }
.stores-slider .slick-slide img { max-width: 100%; height: auto; }

.stores-slider .slick-track {
    display: flex !important;
    align-items: center;
}

/* ── Product slide (home brands slider) ── */
.product-slide-inner {
	padding: 15px;
	text-align: center;
	background-size: cover;
	margin: 5px;
	height: 480px;
	font-weight: 900;
	font-size: 20px;
	color: white;
	font-family: 'Raleway', sans-serif;
	line-height: 20px;
	max-width: 280px;
    margin: 0 auto;
}

.product-slide-inner .logo {
	height: 120px;
}

.product-slide-inner .logo {
	height: 120px;
	width: auto;
}

.product-slide-inner .logo img {
	max-width: 160px;
    display: inline-block;
}

.product-slide-inner .title {
	height: 65px;
	color: white;
}

.product-slide-inner .product-thumbnail {
	height: 220px;
}

.product-slide-inner .product-thumbnail img {
	height: 200px;
	padding: 10px;
	width: auto;
    display: inline-block;
}

.slick-slide img {
    margin: 0 auto;
}

.product-slider-wrapper,
.news-slider-wrapper,
.certificates,
.global-sales,
.countries-slider,
.slider-wrapper,
.campaigns-slider-wrapper,
.stores-slider,
.recipes-slider,
.careerpath-slider-wrapper,
.related-products-slider {
    position: relative;
}

.product-slider-wrapper .slider-controls,
.news-slider-wrapper .slider-controls,
.certificates .slider-controls,
.global-sales .product-exports .slider-controls,
.countries-slider .slider-controls,
.slider-wrapper .slider-controls,
.campaigns-slider-wrapper .slider-controls,
.stores-slider .slider-controls,
.recipes-slider .slider-controls,
.careerpath-slider-wrapper .slider-controls,
.related-products-slider .slider-controls {
    margin: 0 -15px;
    position: absolute;
    width: calc(100% + 30px);
    top: calc(100% / 2);
    justify-content: space-between;
}

/* ── Home section 1 ── */
.section-1 { position: relative; }
.section-1 .background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

/* ── Campaigns ── */
.campaigns { padding: 40px 0; }
.campaign { margin-bottom: 24px; }

/* ── Background image utility ── */
.background-image { width: 100%; height: auto; object-fit: cover; }

/* Form show/hide state is handled by .section.form / .section.form.show
   above (under "Popup form panels") using a max-height transition. */

/* ── Industrial products filter scrollers ── */
.scroller-control {
    cursor: pointer;
    padding: 6px 12px;
    background: var(--pride-green);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block;
}
.scroller-control:hover { background: var(--pride-mid-green); }

/* ── Application / category filter tabs ── */
.application-filter, .category-filter, .type-filter {
    overflow-x: auto;
    white-space: nowrap;
}
.application-filter .col, .category-filter .col, .type-filter .col {
    display: inline-block;
    float: none;
    white-space: normal;
}

/* ── Countries grid ── */
.countries { padding: 40px 0; }

/* ── Print utility ── */
@media print {
    .top-bar, .site-header, .breadcrumbs, .site-footer, .slider-controls { display: none !important; }
}

/* =============================================================
   ABOUT US BLOCKS (homepage [pride_about_blocks] shortcode)
   Ported exactly from the original pride/style.css .block rules.

   NOTE: The original theme relied on Bootstrap's grid (.container,
   .row, .col-md-6) which is intentionally NOT loaded in this child
   theme (Elementor handles layout natively — see inc/enqueue.php).
   Since this shortcode still outputs Bootstrap-style grid markup,
   minimal scoped grid CSS is defined below so .row / .col-md-6
   behave correctly without pulling in all of Bootstrap.
   ============================================================= */

.about.section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.about.section .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.about.section [class^="col-"],
.about.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 768px) {
    .about.section .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .about.section .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .about.section .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.block {
    border: 1px solid #f2f2f2;
}

.block .heading {
    padding: 5px 15px;
    background: #f2f2f2;
}

.block .heading h2 {
    margin-bottom: 0;
    line-height: 42px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.block .heading h2 img {
    margin-right: 15px;
}

.block .content {
    padding: 15px;
    position: relative;
    height: 320px;
}

.block .about-banner {
    padding: 30px 20px;
    margin-bottom: 25px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.block .content .btn {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.block .content p {
    color: #000;
}

@media (max-width: 991px) {
    .block .content {
        height: auto;
        padding-bottom: 50px;
    }

    .block .heading h2 {
        font-size: 13px;
    }

    .about.section {
        margin-bottom: 0;
    }
}

/* =============================================================
   ABOUT US — STAMPS SECTION ([pride_about_stamps])
   Ported from pride/style.css lines ~1995-2049, 3968, 4018,
   4503-4521, 4643-4667
   ============================================================= */

.stamps.section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.stamps.section .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.stamps.section [class^="col-"],
.stamps.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 992px) {
    .stamps.section .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.stamp-inner {
    position: relative;
    margin-bottom: 20px; /* default — original only set this under 1000px, applied always here for consistent mobile spacing */
}

.stamp-inner .background-image {
    width: 100%;
}

.stamp h2,
.stamp h3,
.stamp p,
.stamp li {
    color: #ffffff;
}

.stamp ul {
    margin: 0;
}

.stamp li {
    text-align: left;
    margin-bottom: 10px;
}

.stamp h2 {
    font-size: 20px;
    color: #F9F9F9;
    letter-spacing: 1.25px;
}

.stamp h3 {
    font-size: 14px;
    letter-spacing: 2.1px;
}

.stamp-content {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 45px;
}

@media (max-width: 1000px) {
    .stamp-content p {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .stamp-content {
        padding: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .stamp-content h3 {
        line-height: 20px !important;
    }

    .stamp-content p {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .stamp-content .stamp-icon {
        display: none;
    }
}

@media (max-width: 576px) {
    .stamp h2 {
        font-size: 14px;
        margin-bottom: 8px;
        line-height: 16px;
    }

    .stamp h3 {
        font-size: 9px;
        line-height: 14px !important;
        margin-bottom: 8px;
    }

    .stamp-content p {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 13px;
    }

    .stamp li {
        font-size: 11px !important;
        line-height: 13px !important;
        margin-bottom: 5px !important;
    }
}


/* =============================================================
   ABOUT US — VALUES SECTION ([pride_about_values])
   Ported from pride/style.css lines ~2051-2074
   ============================================================= */

.values.section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.values.section .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.values.section [class^="col-"],
.values.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 768px) {
    .values.section .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .values.section .col-lg-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

.values h1 {
    text-align: center;
}

.value-inner {
    background: #F2F2F2;
    text-align: center;
    color: #000000;
    padding: 30px;
    height: 340px;
    margin-bottom: 15px;
}

.value-inner h2 {
    font-size: 20px;
    letter-spacing: 1.25px;
    line-height: 24px;
    margin-top: 10px;
}

.value-icon {
    height: 120px;
    line-height: 120px;
}


/* =============================================================
   ABOUT US — MANAGEMENT TEAM SECTION ([pride_about_management])
   Ported from pride/style.css lines ~2166-2206, 4300-4303
   ============================================================= */

.management.section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.management.section .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.management.section [class^="col-"],
.management.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 768px) {
    .management.section .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.management {
    background: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 0;
}

.management h1 {
    text-align: center;
    margin-bottom: 35px;
}

.team-member-inner {
    padding: 15px;
}

.team-member-image {
    width: 100%;
    height: 200px;
    background-color: #ffffff;
    border-bottom: 3px solid #9BC322;
    overflow: hidden;
}

.team-member-image img {
    width: 100%;
}

.team-member-content {
    background: #f0f0f0;
    padding: 10px;
}

.team-member-content h3 {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
}

.team-member-content p {
    margin-bottom: 0;
    color: #4A4A4A;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .team-member-image {
        height: auto;
    }
}


/* =============================================================
   ABOUT US — MILLS SECTION ([pride_about_mills])
   Ported from pride/style.css lines ~2208-2257, 4301-4317
   ============================================================= */

.mills.section .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.mills.section .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.mills.section [class^="col-"],
.mills.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%; /* full width by default — mobile-first */
}

@media (min-width: 768px) {
    .mills.section .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.mills {
    padding-top: 50px;
    padding-bottom: 40px;
    background-color: #727272;
    color: #ffffff;
    margin-bottom: 0;
}

.mills h1 {
    color: #ffffff;
}

.our-mills {
    margin-top: 30px;
    margin-bottom: 30px;
}

.our-mills h3 {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 1.25px;
    font-weight: 600;
}

.our-mills-image {
    width: 100%;
    height: 200px;
}

.our-mills-content {
    position: relative;
}

.our-mills-content p {
    margin-top: 5px;
    padding-right: 45px;
    color: #ffffff;
}

.our-mills p {
    color: #ffffff;
}

@media (max-width: 768px) {
    .our-mills-image {
        height: auto;
    }

    .our-mills-content p {
        position: relative;
        top: 0;
        transform: translateY(0);
        padding-right: 0;
        padding-top: 15px;
    }

    .our-mills {
        margin: 0;
    }
}

/* =============================================================
   PRIDE BASIC PAGE TEMPLATE (page-pride-basic.php)
   Hero (featured image background + title) + content + View All
   ============================================================= */

.pride-basic-hero {
    position: relative;
    min-height: 280px;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.pride-basic-hero:not(.pb-0) {
    margin-bottom: 2rem;
}

.pride-basic-hero .container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.pride-basic-hero h1 {
    text-transform: none;
}

.pride-basic-hero p {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    margin-top: 20px;
}

.pride-basic-hero-dark p {
    color: #000000;
}

.pride-basic-hero .align-self-end {
    text-align: left;
}

/* Fallback background when the page has no Featured Image set,
   so the hero never collapses to nothing. */
.pride-basic-hero:not([style*="background-image"]) {
    background-color: #727272;
}

.pride-basic-content {
    padding-top: 50px;
    padding-bottom: 30px;
}

.pride-basic-view-all {
    padding-bottom: 50px;
}

.pride-basic-view-all hr {
    border: none;
    border-top: 1px solid #E6E6E6;
    margin-bottom: 30px;
}

.pride-basic-view-all .text-center {
    text-align: center;
}
/* =============================================================
   CERTIFICATES PAGE TEMPLATE (page-certificates-custom.php)
   Ported exactly from the original pride/style.css
   .certificates-page rules.
   ============================================================= */

.certificates-page .certificates .listings {
    border-bottom: 1px solid #979797;
    padding: 0 60px;
}

.certificates-page .entry-content {
    padding: 0 60px;
    text-align: center;
}

.certificate {
    margin-bottom: 50px;
}

.certificate h4 {
    margin-bottom: 20px;
    text-transform: uppercase;
    margin-left: -15px;
}

.certificate p {
    margin-bottom: 5px;
}

.certificate .image {
    padding: 10px;
    line-height: 180px;
    text-align: center;
    border: 2px solid #ccc;
    flex: 0 0 200px;
    max-width: 200px;
}

.certificate .image img {
    width: 180px;
}

.certificate .content {
    background: #F2F2F2;
    padding: 40px;
    flex: 0 0 calc(100% - 200px);
    max-width: calc(100% - 200px);
}

.certificate .row {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .certificate .content,
    .certificate .image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .certificate .image img {
        width: auto !important;
    }

    .certificates-page .certificates .listings,
    .certificates-page .entry-content {
        padding: 20px;
    }
}

/* "Read More" heading above the news/articles slider */
.container.view-more {
    text-align: center;
    padding-bottom: 40px;
}

.section.certificates {
    margin-bottom: 20px;
}
/* =============================================================
   NEWS LISTING PAGE TEMPLATE (page-news-listing.php)
   Sidebar filter form, custom radio buttons, results grid.
   Ported exactly from the original pride/style.css.
   ============================================================= */

/* ── Custom radio buttons (filter sidebar) ── */
.radio-button {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #000000;
    letter-spacing: 2.1px;
    font-weight: 500;
}

.radio-button input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 17px;
    width: 17px;
    border: 4px solid #165A40;
    border-radius: 50%;
}

.radio-button:hover input ~ .checkmark {
    background-color: #ccc;
}

.radio-button input:checked ~ .checkmark {
    background-color: #165A40;
}

/* ── Sidebar ── */
.sidebar h4 {
    padding-bottom: 10px;
    border-bottom: 2px solid #979797;
    text-transform: uppercase;
}

.sidebar .clear-filter {
    display: inline-block;
    font-size: 11px;
    color: #000000;
    letter-spacing: 2.2px;
    text-decoration: underline;
    font-weight: 700;
    margin-bottom: 20px;
}

.spacer {
    height: 40px;
}

/* ── Results grid ── */
.posts h4 {
    text-transform: uppercase;
}

.posts .banner h1 {
    font-size: 32px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.92px;
    text-align: center;
    line-height: 39px;
    margin: auto;
}

.news-items-wrapper {
    margin-top: 10px;
}

.pride-news-listing-content {
    padding-top: 50px;
    padding-bottom: 30px;
}

.posts .container.section > .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.posts .container.section [class^="col-"],
.posts .container.section [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .posts .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .posts .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

#news-items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

#news-items [class^="col-"],
#news-items [class*=" col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 576px) {
    #news-items .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    #news-items .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}


/* =============================================================
   PRODUCTS LISTING PAGE TEMPLATE (page-products.php)
   Filter sidebar (maize/category/application/type icon grids),
   results grid, GMO-free/export content block, certificate slider.
   Ported exactly from the original pride/style.css, scoped to
   .industrial-products (the body class used by this template for
   BOTH industrial and global-sales variants, matching the original).
   ============================================================= */

.industrial-products .search-filters h4 {
    margin-top: 30px;
    margin-bottom: 0;
}

.industrial-products .search-filters a {
    font-size: 11px;
    color: #000000;
    letter-spacing: 2.2px;
    text-decoration: underline;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

.industrial-products .search-filters h1 {
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #979797;
}

.industrial-products .search-filters .icon {
    padding: 10px;
    background: #f2f2f2;
    border: 4px solid #f2f2f2;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 72px;
    text-align: center;
    margin: 15px auto;
}

.industrial-products .filter-category .col {
    text-align: center;
}

/* Maize / Category filter rows — plain side-by-side icon grid that
   wraps on small screens (NOT the horizontal-scroll .filters pattern
   used by Application/Type below). The original relied on global
   Bootstrap .row/.col-md-2 classes for this, which no longer exist
   after the Bootstrap removal — this is the scoped flexbox
   replacement. */
.industrial-products .row.filter-maize,
.industrial-products .row.filter-category {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px;
}

.industrial-products .row.filter-maize .col,
.industrial-products .row.filter-category .col {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 50%;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .industrial-products .row.filter-maize .col.col-md-2,
    .industrial-products .row.filter-category .col.col-md-2 {
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
        width: 16.6666%;
    }
}

.industrial-products .filters {
    border: 1px solid #858585;
    padding: 30px 60px;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.industrial-products .scroller-control {
    position: absolute;
    top: 0;
    height: 100%;
    width: 30px;
    background-color: #f2f2f2;
    cursor: pointer;
    color: #bbb;
}

.industrial-products .scroller-control:hover {
    background-color: #D8D8D8;
    color: #777;
}

.industrial-products .scroller-control i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.industrial-products .scroller-control.left {
    left: 0;
}

.industrial-products .scroller-control.right {
    right: 0;
}

.industrial-products .filters .row {
    width: 320%;
}

.industrial-products .filters .row.type-filter {
    width: 100%;
}

.industrial-products .filters .row .col {
    text-align: center;
}

@media (max-width: 768px) {
    .industrial-products .filters .row {
        flex-wrap: nowrap;
    }
}

.industrial-products .products {
    background-color: #F2F2F2;
    padding: 50px 0;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.industrial-products .products .container {
    max-width: 1140px;
    margin: 0 auto;
}

.industrial-products .products h1,
.industrial-products .products h2,
.industrial-products .products .products-heading {
    margin-bottom: 50px;
    text-align: center;
}

.industrial-products .product {
    text-align: center;
}

.industrial-products .product h3 {
    background: #ffffff;
    padding: 15px;
    height: 62px;
    position: relative;
}

.industrial-products .product h3 a {
    font-size: 14px;
    color: #000000;
    letter-spacing: 2.1px;
    text-align: center;
    font-weight: 600;
    position: absolute;
    padding: 15px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    box-sizing: border-box;
}

.industrial-products .product:hover h3 a {
    text-decoration: underline;
}

.industrial-products .product .thumbnail {
    border-bottom: 3px solid #9BC322;
}

/* GMO-Free (industrial) / Export (global) content block */
.gmo-free,
.gt-export {
    position: relative;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 50px;
}

.gmo-free .row,
.gt-export .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.gmo-free .col-md-6,
.gt-export .col-md-6 {
    width: 100%;
}

@media (min-width: 768px) {
    .gmo-free .col-md-6,
    .gt-export .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.gmo-free .image,
.gt-export .image {
    background-color: #5a5a5a;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

.industrial-products .gmo-free .content {
    background-color: #9BC322;
}

.industrial-products .gt-export .content {
    background-color: #0B7533;
}

.industrial-products .gmo-free h4,
.industrial-products .gmo-free p,
.industrial-products .gt-export h2,
.industrial-products .gt-export p {
    color: #ffffff;
    text-align: left;
}

.industrial-products .gmo-free .content-inner,
.industrial-products .gt-export .content-inner {
    padding: 75px 60px;
    max-width: 570px;
    padding-right: 0;
}

@media (max-width: 768px) {
    .gmo-free .content-inner,
    .gt-export .content-inner {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/* ── Certificate slider (this page's variant — 5 slides, icons centred) ── */
.industrial-products .certificate-slide {
    text-align: center;
    line-height: 120px;
}

.industrial-products .certificate-slide img,
.certificate-slide img {
    display: inline !important;
    max-width: 60%;
}

.industrial-products .certificates a {
    font-weight: 700;
    font-size: 11px;
    color: #000000;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.industrial-products .certificates {
    text-align: center;
}

.industrial-products #certificate-slider {
    margin: 30px 0;
}

/* ── Filter icon grids (maize / category icon styling) ── */
.industrial-products label {
    cursor: pointer;
}

.industrial-products label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.industrial-products label input:checked ~ .icon {
    border: 4px solid #165A40;
}

.industrial-products .filter-maize .icon,
.industrial-products .filter-category .icon {
    padding: 0;
    border: 0;
    overflow: hidden;
}

.industrial-products .filter-maize .icon.all .left,
.industrial-products .filter-maize .icon.all .right {
    width: 50%;
    float: left;
    overflow: hidden;
}

.industrial-products .filter-maize .icon.all .left img,
.industrial-products .filter-maize .icon.all .right img {
    width: 200%;
    max-width: 200%;
}

/* ── section-break (Gravity Forms checkbox grouping, shared with
      page-pride-basic/contact pattern but duplicated here since this
      page's inline <style> originally redefined it) ── */
.industrial-products .section-break {
    width: 100% !important;
}

.industrial-products .section-break input {
    display: none !important;
}

.industrial-products .section-break label {
    font-weight: bold;
    margin-top: 10px;
    margin-left: 0 !important;
}

/* =============================================================
   GLOBAL SALES PAGE TEMPLATE (page-global_sales.php)
   Geared to Export, Global Sales Banner, Product Exports,
   Countries, FAQ Banner. Ported exactly from the original
   pride/style.css, scoped to .global-sales.
   ============================================================= */

.global-sales .global-sales-banner {
    text-align: center;
}

.global-sales .global-sales-banner h2 {
    font-weight: 300;
}

.global-sales .global-sales-banner p {
    color: #ffffff;
    margin-bottom: 1.5rem;
    margin-top: 10px;
}

.global-sales .faq-banner h2 {
    font-weight: 300;
    color: #000;
}

.global-sales .geared-to-export h3 {
    text-align: center;
    margin-bottom: 60px;
}

.global-sales .feature {
    margin-bottom: 50px;
    position: relative;
}

.global-sales .feature .row {
    display: flex;
    flex-wrap: wrap;
}

.global-sales .feature .col-12 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.global-sales .feature h4 {
    margin-bottom: 15px;
}

.global-sales .feature .image {
    padding: 85px;
    background-size: cover;
    width: 100%;
}

.global-sales .feature .image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.global-sales .feature .content {
    padding: 30px;
    background-color: #F2F2F2;
    width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    .global-sales .feature .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .global-sales .feature .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.global-sales .feature .content-inner {
    position: absolute;
    top: 50%;
    left: 30px;
    right: 30px;
    transform: translateY(-50%);
    padding-right: 15px;
}

@media (max-width: 1200px) {
    .global-sales .feature .content-inner {
        position: initial;
        top: 0;
        left: auto;
        right: auto;
        transform: translateY(0);
    }

    .global-sales .feature .image {
        text-align: center;
    }
}

@media (max-width: 1000px) {
    .global-sales .feature .image {
        padding: 45px;
    }
}

@media (max-width: 768px) {
    .global-sales .feature {
        padding: 0 15px;
    }
}

.global-sales h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.global-sales .product-exports {
    background-color: #F2F2F2;
    padding: 50px 0;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 60px 0;
    background-color: #F2F2F2;
}

.global-sales .product-exports h1 {
    margin-bottom: 50px;
}

.global-sales .product-exports .container {
    max-width: 1140px;
    margin: 0 auto;
}

.global-sales .product-exports .article {
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.global-sales .product-exports .article-inner {
    display: block;
    text-decoration: none;
}

.global-sales .product-exports .article-image {
    border-bottom: 3px solid #9BC322;
}

.global-sales .product-exports .article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.global-sales .product-exports .article-content {
    background-color: #ffffff;
    font-size: 14px;
    color: #000000;
    letter-spacing: 2.1px;
    text-align: center;
    font-weight: 600;
    min-height: auto;
    text-transform: uppercase;
    padding: 15px;
    height: 62px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-sales .product-exports .article:hover .article-content {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .global-sales .product-exports {
        overflow: hidden;
    }
}

.global-sales .countries h1 {
    margin-bottom: 50px;
}

.global-sales .countries-slider {
    position: relative;
    margin-bottom: 90px;
}

.global-sales #countries-prev {
    left: -30px;
}

.global-sales #countries-next {
    right: -30px;
}

@media (max-width: 768px) {
    .global-sales #countries-prev {
        left: 0;
    }
    .global-sales #countries-next {
        right: 0;
    }
}

.global-sales .country {
    text-align: center;
}

.global-sales .country .icon {
    margin-bottom: 15px;
    padding: 6px;
}

.global-sales .country .icon img {
    margin: auto;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    border-radius: 100%;
    display: block;
    max-width: 100px;
}

@media (max-width: 768px) {
    .global-sales .banner.faq-banner,
    .global-sales .banner.faq-banner h2,
    .global-sales .banner.faq-banner p {
        text-align: center;
    }

    .global-sales .banner.faq-banner.section::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        opacity: 0.2;
    }

    .global-sales .banner.faq-banner h2 {
        padding: 0;
        padding-left: 0;
    }
}

/* h2.frequent / p.expert — page-specific overrides from the
   original page-global_sales.php's own inline <style> block */
h2.frequent {
    text-align: left !important;
}

p.expert {
    margin: 10px 0;
}

/* Bootstrap-style offset grid class (needed for the FAQ Banner's
      col-md-5.offset-md-7 layout not used elsewhere in this theme,
      so it wasn't part of the earlier scoped grid work) */
@media (min-width: 768px) {
    .offset-md-7 {
        margin-left: 58.3333%;
    }
}

/* =============================================================
   TRAINING PAGE TEMPLATE (page-training.php)
   Opportunities program blocks, testimonials, FAQs.
   Ported exactly from the original pride/style.css.
   ============================================================= */

/* ── Opportunities (program blocks) ── */
.opportunities {
    background: #F2F2F2;
    padding: 60px 0;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.opportunities .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.opportunities h2 {
    margin-bottom: 45px;
    text-align: center;
}

.opportunities .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.opportunities .program {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .opportunities .program.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.program-inner {
    border: 1px solid #F9F9F9;
}

.opportunities .program-inner {
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    padding: 60px;
    height: calc(42vw - 30px);
    max-height: 450px;
    border: 0;
    position: relative;
    display: block;
}

@media (max-width: 768px) {
    .opportunities .program-inner {
        height: calc(84vw - 30px);
    }
}

.opportunities .program-inner .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.opportunities .program-inner h2 {
    background: transparent;
    font-size: 20px;
    color: #F9F9F9;
    letter-spacing: 1.25px;
    text-align: center;
    margin-top: 20px;
    line-height: 28px;
    height: auto;
}

.opportunities .program-inner .btn {
    color: #ffffff;
}

.opportunities .program-inner .btn:hover {
    text-decoration: underline;
}

.opportunities .program-icon {
    float: none;
    margin: 0;
}

/* ── Testimonials ── */
.testimonials {
    background: #F2F2F2;
    padding: 50px 0;
}

.training .testimonials {
    background: transparent;
    margin-bottom: 0;
    margin-top: 0;
}

.training .testimonials,
.careers .testimonials {
    padding-top: 40px;
}

.testimonials .row {
    margin-top: 50px;
    margin-bottom: 20px;
}

.testimonials h2 {
    margin-bottom: 75px;
    text-align: center;
}

.testimonial {
    position: relative;
}

.testimonial-badge {
    position: absolute;
    background: #F9F9F9;
    top: 0;
    left: 0;
    width: 200px;
}

@media (max-width: 768px) {
    .testimonial-badge {
        position: static;
        width: auto;
        left: 30px;
        right: 30px;
        background: none;
    }
}

.testimonial-badge .thumbnail {
    border-bottom: 2px solid #9BC322;
    text-align: center;
    background: #ffffff;
    padding: 0;
    width: 100%;
}

.training .testimonials .testimonial-badge .thumbnail {
    background-color: #5a5a5a;
    height: 202px;
}

@media (max-width: 768px) {
    .training .testimonials .testimonial-badge {
        position: static;
    }
    .training .testimonials .testimonial-badge .thumbnail {
        width: 100%;
        height: auto;
    }
}

.testimonial-badge h3,
.testimonial-badge p {
    margin: 10px;
}

.testimonial-badge h3 {
    margin-bottom: 0;
    letter-spacing: 1.4px;
}

.testimonial-badge p {
    margin-top: 0;
}

.testimonial-inner {
    padding-left: 130px;
    padding-top: 60px;
    padding-bottom: 30px;
    padding-right: 30px;
    position: relative;
    max-width: 700px;
    margin: auto;
}

@media (max-width: 768px) {
    .testimonial-inner {
        padding-left: 30px;
        padding-top: 50px;
    }
}

.testimonial-content {
    background-color: #ffffff;
    box-shadow: 0 0 23px 0 rgba(0, 0, 0, 0.11);
    padding: 55px 20px 55px 90px;
    font-weight: 300;
    font-size: 16px;
    color: #000000;
    letter-spacing: 1.25px;
    height: 270px;
    display: table-cell;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .testimonial-content {
        padding-left: 20px;
        padding-top: 50px;
        height: 205px;
    }
}

.testimonial .quote {
    color: #0B7533;
    font-size: 80px;
    letter-spacing: 1.05px;
    font-weight: 300;
    display: block;
    line-height: 0;
}

/* FAQs */
.faqs {
    background-color: #165A40;
    padding: 60px 0;
    margin-bottom: 0;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.faqs .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.faqs h2,
.faqs h3,
.faqs p {
    color: #ffffff;
}

.faqs h2 {
    margin-bottom: 15px;
    text-align: center;
}

.faqs h3 {
    margin-top: 15px;
}

.faqs .row {
    display: flex;
    flex-wrap: wrap;
}

.faq-inner {
    padding: 0 15px;
}

/* =============================================================
   CONSUMER BRANDS TAXONOMY TEMPLATE
   (taxonomy-consumer_brands.php, template-parts/brand-landing-page.php,
   template-parts/brand-product-range.php)
   Ported exactly from the original brand-templates/brands.css,
   scoped consistently with how the original used these classes.
   ============================================================= */

/* ── Tab icon flip (brand-category "Select Range" tabs) ── */
.nav-link {
    perspective: 1000px;
    cursor: pointer;
}

.nav-link .icon {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    padding: 0;
    border: 0 !important;
    width: 110px;
    height: 110px;
    box-shadow: 0 0 1px 0 #ffffff inset, 0 0 1px 0 #ffffff;
    border-radius: 50%;
    margin: 15px auto;
}

.nav-link .icon .front,
.nav-link .icon .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.nav-link .icon img {
    position: relative;
    max-width: 160px;
    left: -25px;
    top: 25px;
}

.nav-link .icon .front {
    z-index: 2;
    transform: rotateY(0deg);
}

.nav-link .icon .back {
    transform: rotateY(180deg);
    display: flex;
}

.nav-link:hover .icon,
.nav-link.active .icon {
    transform: rotateY(180deg);
}

.nav-link .icon .tab-label {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    color: #ffffff;
    text-transform: uppercase;
    margin: auto;
    padding: 5px;
}

.product-range-name {
    display: none;
}

@media (max-width: 768px) {
    .back {
        transform: none;
        display: none;
    }
    .nav-link:hover .icon,
    .nav-link.active .icon {
        transform: none;
    }
    .nav-link:hover .icon .back,
    .nav-link.active .icon .back {
        display: flex;
    }
    .nav-link:hover .icon .front,
    .nav-link.active .front {
        display: none;
    }
    .product-range-name {
        display: block;
    }
}

.brand-range-content .select-range h3 {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
}

.bc-banner {
    display: none;
    overflow: hidden;
}

.bc-banner.active {
    display: block;
}

.bc-banner img {
    width: 110%;
    max-width: 110%;
    margin-left: -5%;
}

/* #brand-content is the top-level wrapper for the whole brand
   landing page (template-parts/brand-landing-page.php) — needs to
   reach true full viewport width since it sits inside Hello
   Elementor's constrained content wrapper otherwise, same pattern
   used for .pride-basic-hero / .products / .gmo-free elsewhere in
   this theme. */
#brand-content {
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* ── Slider control colours (brand-scoped) ── */
.news-slider-controls .slider-control {
    background: transparent;
    color: #0B7533;
}

.consumer-brand .recipes-slider-controls .slider-control {
    background: transparent;
    color: #0B7533;
}

.primary-bg .news-slider-controls .slider-control,
.consumer-brand .primary-bg .recipes-slider-controls .slider-control,
.consumer-brand .secondary-bg .recipes-slider-controls .slider-control {
    color: #ffffff;
}

.recipes-slider .article-inner,
.campaigns-slider-wrapper .article-inner {
    max-width: 250px;
    margin: auto;
}

/* ── Top-level landing page: desktop brand strip ── */
.brand-banner-strip {
    padding: 60px;
    padding-top: 30px;
    text-align: center;
    width: 420px;
    float: left;
    min-height: 600px;
}

.brand-banner-strip img {
    margin-bottom: 60px;
    max-height: 180px;
}

.range-option {
    color: #ffffff;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    padding: 23px 0;
    text-align: center;
    border-top: 1px solid #fff;
    cursor: pointer;
}

.range-option:hover {
    color: #000000;
}

.range-option.active {
    background-color: rgba(255, 255, 255, 0.3);
}

.brand-banner-content {
    width: 600px;
    display: none;
    float: right;
    margin-right: 150px;
    margin-top: 60px;
}

.brand-banner-content.active {
    display: block;
}

.brand-banner-heading h2 {
    font-weight: bold;
    font-size: 90px;
    line-height: 90px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #00000059;
    text-transform: uppercase;
    text-align: center;
}

.brand-banner {
    background-size: cover;
    background-position: center top;
    position: relative;
    margin-bottom: 60px;
}

.brand-range-content h2 {
    color: #000000;
}

@media (min-width: 1201px) {
    .brand-banner::after {
        content: '';
        display: block;
        clear: both;
    }
}

@media (max-width: 1200px) {
    .brand-banner-content {
        max-width: 450px;
        margin-right: 100px;
    }
    .brand-banner-heading h2 {
        font-size: 70px;
        line-height: 70px;
    }
}

@media (max-width: 1000px) {
    .brand-banner-content {
        max-width: calc(100vw - 460px);
        margin-right: 50px;
    }
    .brand-banner-strip {
        padding-left: 30px;
        padding-right: 30px;
        width: 360px;
    }
    .brand-banner-heading h2 {
        font-size: 50px;
        line-height: 50px;
    }
}

@media (max-width: 768px) {
    .brand-banner {
        display: none;
    }
    .brand-banner-strip {
        width: 100%;
        padding-bottom: 120px;
    }
    .brand-banner-content {
        float: none;
        width: auto;
        max-width: 100%;
        margin: 0;
    }
    .brand-banner-heading h2 {
        font-size: 40px;
        line-height: 40px;
        margin-top: 0 !important;
        margin-bottom: 40px;
        margin-right: 15px;
        margin-left: 15px;
    }
    .range-option {
        border-top: 0;
        border-bottom: 1px solid #ffffff;
        margin-bottom: -1px;
        font-size: 14px;
    }
}

/* ── Top-level landing page: mobile brand strip ── */
.brand-banner-mobile {
    display: none;
}

.brand-banner-logo {
    text-align: center;
}

.brand-banner-hero {
    background-size: cover;
    background-position: center;
    position: relative;
}

.brand-banner-hero .brand-banner-content {
    display: none;
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    text-align: center;
    padding: 30px 15px;
}

.brand-banner-hero .brand-banner-content.active {
    display: block;
}

@media (max-width: 768px) {
    .brand-banner-logo {
        width: 100%;
        left: 0;
        padding-bottom: 30px;
        z-index: 999;
        padding-top: 30px;
    }
    .brand-banner-hero {
        background-position: center right;
        text-align: center;
        padding-bottom: 60px;
        position: relative;
        min-height: 190px;
    }
    .brand-banner-mobile {
        display: block;
        position: relative;
    }
    .brand-banner-mobile .range-options {
        margin-bottom: 40px;
    }
}

/* ── Brand intro ── */
.brand-main-content h2 {
    font-weight: bold;
    font-size: 40px;
    line-height: 54px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
}

.brand-main-content p {
    text-align: center;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #707070;
}

.consumer-brand .brand-main-content {
    margin-bottom: 70px;
}

@media (max-width: 576px) {
    .brand-main-content h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

/* ── Brand range hero slider (Slick, second-level pages) ── */
.brand-range-banner {
    position: relative;
    overflow: hidden;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.brand-range-banner.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.brand-range-banner.slick-slider .slick-track {
    display: flex !important;
}

.brand-range-banner-slide.slick-slide {
    padding: 60px;
    background-size: cover;
    background-position: center;
    min-height: 600px;
    height: auto !important;
}

.brand-range-banner-slide.double-height {
    min-height: 600px;
}

.brand-range-banner-slide-content {
    width: 45%;
}

.full-width .brand-range-banner-slide-content {
    width: 100%;
}

.partial-width .brand-range-banner-slide-content {
    width: 60%;
}

.right .brand-range-banner-slide-content {
    float: right;
    text-align: right;
}

.center .brand-range-banner-slide-content,
.center-text .brand-range-banner-slide-content {
    text-align: center;
}

.brand-range-banner-slide h1 {
    font-weight: bold;
    font-size: 141px;
    line-height: 141px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 30px;
    text-shadow: 3px 3px 6px #00000059;
}

.brand-range-banner-slide h2 {
    font-weight: bold;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 30px;
    text-shadow: 3px 3px 6px #00000059;
}

.brand-range-banner-slide h2 em {
    font-style: normal;
    color: #E2001A;
}

.brand-range-banner-slide h3 {
    font-weight: normal;
    font-size: 31px;
    line-height: 34px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 30px;
    text-shadow: 3px 3px 6px #00000059;
}

.brand-range-banner-slide h4 {
    font-weight: normal;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0;
    text-transform: lowercase;
    color: #ffffff;
    margin-bottom: 30px;
    text-shadow: 3px 3px 6px #00000059;
}

.brand-range-banner-slide p {
    font-weight: normal;
    font-size: 45px;
    line-height: 55px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 3px 6px #00000029;
}

@media (max-width: 768px) {
    .brand-range-banner-slide-content {
        width: 100%;
    }
    .right .brand-range-banner-slide-content,
    .brand-range-banner-slide-content {
        text-align: center;
    }
    .partial-width .brand-range-banner-slide-content {
        width: 100%;
    }
    .brand-range-banner-slide.double-height,
    .brand-range-banner-slide {
        min-height: 360px;
    }
    .brand-range-banner-slide h1 {
        font-size: 74px;
        line-height: 74px;
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .brand-range-banner-slide-content h2 {
        font-size: 36px !important;
        line-height: 36px !important;
        margin-bottom: 10px;
    }
    .brand-range-banner-slide p {
        font-size: 30px;
        line-height: 30px;
    }
    .brand-range-banner-slide {
        padding: 30px 15px;
    }
}

/* ── Social bar (second-level pages) ── */
.social-bar {
    text-align: center;
    margin-bottom: 60px;
    overflow: hidden;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.social-bar a {
    color: #ffffff;
    display: inline-block;
    text-align: center;
    width: 33%;
    border-right: 1px solid #fff;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
}

.social-bar a:first-child {
    border-left: 1px solid #fff;
}

.social-bar a:hover {
    color: #ffffff;
}

.social-bar a img {
    margin-right: 15px;
}

@media (max-width: 768px) {
    .social-bar a {
        width: 100%;
        border: 0 !important;
    }
}

/* ── Brand-scoped product grid (template-parts/brand-product-range.php) ──
   Scoped to .consumer-brand specifically since this is a different
   card layout from the industrial-products-page .product cards
   defined earlier in this file (different inner markup: .image +
   .product-brand-name + .product-name, vs .thumbnail + h3). */
/* .products.row — the product grid in template-parts/brand-product-range.php.
   Original relied on global Bootstrap .row/.col-* classes for this,
   same gap pattern hit on other pages after Bootstrap's removal. */
.consumer-brand .products.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.consumer-brand .products.row .product {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .consumer-brand .products.row .product.col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .consumer-brand .products.row .product.col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.consumer-brand .product {
    text-decoration: none !important;
    margin-bottom: 30px;
}

.consumer-brand .product .image {
    height: 265px;
    position: relative;
}

.consumer-brand .product .image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: none;
    object-position: center;
}

.consumer-brand .product:hover .image img {
    height: 245px;
}

.consumer-brand .product .name p,
.consumer-brand .product .product-name p {
    font-size: 16px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: center;
    line-height: 19px;
    font-weight: 700;
    text-decoration: none;
    text-transform: capitalize;
}

.consumer-brand .product:hover,
.consumer-brand .product:hover .name p {
    text-decoration: underline !important;
}

.product-brand-name {
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
    color: #707172;
    text-transform: uppercase;
    margin-top: 20px !important;
}

.product .image .coming-soon {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 80px;
    font-weight: bold;
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    left: 0;
    padding: 30px;
    display: block;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .product .image .coming-soon {
        width: 180px;
        left: 50%;
        margin-left: -90px;
        top: 50px;
    }
}

/* ── Brand-scoped article cards (recipes/news/campaigns) ──
   Scoped to .consumer-brand since these override the generic
   .article-image / .article-content rules used elsewhere in the
   theme (e.g. transparent background, different heading sizes). */
.consumer-brand .article-image {
    border-color: transparent;
    border-bottom: 0;
}

.consumer-brand .article-content {
    background-color: transparent !important;
    min-height: unset;
}

.consumer-brand .article-content h3,
.recipes .article-content h3 {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    color: #000000;
    text-transform: capitalize;
}

.consumer-brand .article-content h5 {
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
    color: #707172;
    margin-bottom: 0;
}

.consumer-brand .primary-bg .article-content h3,
.consumer-brand .secondary-bg .article-content h3,
.consumer-brand .tertiary-bg .article-content h3,
.consumer-brand .primary-bg .article-content h5,
.consumer-brand .secondary-bg .article-content h5,
.consumer-brand .tertiary-bg .article-content h5 {
    color: #ffffff;
}

.consumer-brand a.article-inner {
    text-align: left;
}

@media (max-width: 576px) {
    .consumer-brand .article-inner {
        padding-bottom: 0;
    }
    .consumer-brand .article-content {
        padding: 0;
        padding-top: 15px;
    }
}

/* ── Brand-scoped buttons ── */
#page .consumer-brand .btn {
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    text-decoration: none;
    padding: 15px 50px;
}

@media (max-width: 768px) {
    #page .consumer-brand .btn {
        padding: 8px 24px;
    }
}

/* "View All" links under Recipes / Read More / Previous Campaigns —
   centered, block-level so the centering actually applies (the base
   .btn rule above has no display set, so as an inline <a> it would
   otherwise just sit left-aligned in the text flow). primary-color
   gets an explicit green fallback here since it's otherwise driven
   per-brand by the brand's own ACF colour field, which isn't
   guaranteed to be green for every brand. */
.consumer-brand .brand-news-section > .container > .btn,
.consumer-brand .section.recipes > .container > .btn,
.consumer-brand .brand-past-campaigns > .btn {
    display: block;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.consumer-brand .primary-color {
    color: var(--pride-green);
}

.consumer-brand .btn.primary-color {
    color: var(--pride-green);
    background-color: #ffffff;
}

/* ── Recipes / Read More / Previous Campaigns sections ── */
.recipes {
    text-align: center;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 60px 0;
}

.recipes .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.recipes .container h2,
.recipes .container .article-content h3 {
    color: #ffffff;
    text-align: center;
}

.store-listings {
    padding: 60px 0;
}

.consumer-brand .brand-news-section {
    padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 0;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.consumer-brand .brand-news-section .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.brand-past-campaigns {
    padding: 60px;
    margin-bottom: 0;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.brand-past-campaigns .article {
    margin: 0 10px;
}

.brand-news-section h2,
.brand-past-campaigns h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.brand-news-section h2 {
    color: #ffffff;
}

.brand-range-content .nav.nav-tabs {
    list-style: none;
    justify-content: space-around;
    margin: 60px 0;
    padding: 0;
}

.brand-range-content .nav.nav-tabs .nav-link {
    background: none;
}

.brand-range-content .brand-hero {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.brand-hero li {
    font: 700 30px 'Montserrat';
    letter-spacing: 0;
    color: #FFFFFF;
    text-shadow: 0px 0px 6px #00000026;
}

.consumer-brand .store-listings h2 {
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .consumer-brand .brand-news-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* ── Secondary hero banner (template-parts/brand-product-range.php) ── */
.brand-hero {
    padding: 100px 0 100px;
    color: #ffffff;
    background-size: cover;
    background-position: center;
    margin-top: 0;
    margin-bottom: 40px;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.brand-hero .container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.brand-hero h1 {
    font-weight: bold;
    font-size: 44px;
    line-height: 50px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #00000059;
}

.brand-hero h2 {
    font-weight: bold;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #00000059;
    text-transform: uppercase;
    margin-bottom: 0;
}

.brand-hero h3 {
    font-weight: bold;
    font-size: 34px;
    line-height: 36px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #00000059;
    text-transform: uppercase;
}

.brand-hero p {
    font-weight: bold;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #00000029;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.brand-hero .content {
    width: 40%;
    position: relative;
}

.brand-hero .content.right {
    float: right;
    text-align: right;
}

@media (max-width: 1200px) {
    .brand-hero {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .brand-hero .content {
        width: 100%;
    }
    .brand-hero {
        background-position: center left;
        padding-top: 60px;
        padding-bottom: 60px;
        margin-top: 0;
    }
    .brand-hero.right {
        background-position: center right;
    }
    .brand-hero .content.right {
        text-align: center;
    }
    .brand-hero h1 {
        font-size: 20px;
        line-height: 36px;
        margin-top: 30px;
    }
    .brand-range-content .brand-hero.secondhero {
        min-height: auto !important;
    }
}

/* ── Brand-scoped list bullets (used inside hero_text rich content) ── */
.consumer-brand .content ul li {
    position: relative;
    list-style: none;
    padding-left: 10px;
}

.consumer-brand .content ul li::before {
    content: '';
    display: block;
    position: absolute;
    width: 9px;
    height: 18px;
    border-right: 2px solid;
    border-bottom: 3px solid;
    transform: rotate(45deg);
    left: -11px;
    top: 8px;
    color: #ffffff;
    border-top: 2px solid transparent;
    border-left: 3px solid transparent;
}

.consumer-brand .content ul li::after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 50%;
    left: -20px;
    top: 12px;
    color: #ffffff;
}
/* =============================================================
   CAREERS PAGE TEMPLATE (page-careers.php)
   Career paths slider, vacancy listings, testimonials (shared
   pattern with page-training.php). Ported exactly from the
   original pride/style.css.
   ============================================================= */

.career-path {
    text-align: center;
    padding: 40px 0;
}

.career-path h3 {
    margin-bottom: 30px;
}

.career-path .view-all {
    text-decoration: underline;
    font-size: 11px;
    color: #000000;
    letter-spacing: 2.2px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 30px;
    display: inline-block;
}

.path-icon {
    margin: 10px auto;
    padding: 15px;
    background-color: #F2F2F2;
    border-radius: 50%;
    display: inline-block;
    height: 100px;
    width: 100px;
    line-height: 70px;
}

.path-icon img {
    display: inline !important;
}

.career-listings {
    background: #F2F2F2;
    padding: 60px 0 30px;
    width: 99.6vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.career-listings h2 {
    margin-bottom: 30px;
    text-align: center;
}

.career-listings .article-content {
    background: #ffffff;
    padding: 15px 10px;
}

/* "Read More" link pinned to the bottom of the card — matches the
   page-specific override from the original page-careers.php's
   trailing <style> block. .article-content needs position:relative
   so the absolute-positioned link anchors to its own card, not some
   further-up ancestor (same fix pattern used on the products page). */
.career-listings .article-content {
    position: relative;
    padding-bottom: 40px;
}

.career-listings .article-content .link,
.career-listings .article-content a.read-more {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

@media (max-width: 680px) {
    .career-listings .article-content .link,
    .career-listings .article-content a.read-more {
        bottom: 2px;
    }
}

/* Vacancies slider arrows — original hides them entirely on desktop
   when there are 4 or fewer listings (no need to scroll). Mirrors
   the existing news-slider-controls-N / certificate-slider-N
   counted-class pattern used elsewhere in this theme. */
@media (min-width: 820px) {
    .vacancies-slider.news-slider-controls-0,
    .vacancies-slider.news-slider-controls-1,
    .vacancies-slider.news-slider-controls-2,
    .vacancies-slider.news-slider-controls-3,
    .vacancies-slider.news-slider-controls-4 {
        display: none !important;
    }
}

/* =============================================================
   CONTACT PAGE TEMPLATE (page-contact.php)
   Multi-form enquiry selector + locations grid. Ported exactly
   from the original pride/style.css and the original page's own
   inline <style> block.
   ============================================================= */

/* ── Multi-form enquiry selector ── */
.enquiry_form {
    display: none;
}

.contact-form h2 {
    text-align: center;
}

.select-contact-form {
    padding-left: 20px;
    margin-bottom: 15px;
    width: 50%;
}

.select-contact-form label {
    width: 180px;
}

.select-contact-form select {
    display: inline-block;
    margin-left: -2px;
    width: calc(100% - 230px);
}

@media (max-width: 1000px) {
    .select-contact-form label {
        width: 130px;
    }
    .select-contact-form select {
        width: calc(100% - 170px);
    }
}

@media (max-width: 768px) {
    .select-contact-form {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .select-contact-form {
        padding-right: 25px;
    }
    .select-contact-form select {
        width: 100%;
    }
}

/* ── Gravity Forms layout tweaks specific to this page ── */
.gsection {
    width: 100% !important;
    margin-top: 0 !important;
    border-bottom: 0 !important;
}

.ginput_container.ginput_container_fileupload {
    float: left;
    width: calc(100% - 180px);
}

.ginput_container.ginput_container_fileupload input {
    width: 100% !important;
}

.gform_wrapper h2.gsection_title {
    font-weight: normal !important;
    border-bottom: 1px solid #CCC;
}

/* "Section break" checkbox-list labels (e.g. "Foods", "Feeds") mark
   the start of a new product-category group within the multi-select
   checkbox fields. The .section-break class is added by JS
   (pride-custom.js, section 6) matching labels by exact text. */
.section-break {
    width: 100% !important;
}

.section-break input {
    display: none !important;
}

.section-break label {
    font-weight: bold;
    margin-top: 10px;
    margin-left: 0 !important;
}

.gform_wrapper ul li.gfield.global-sales-products-field,
.gform_wrapper ul li.industrial-products-field {
    width: 100%;
    clear: both !important;
}

.gform_wrapper ul li.gfield.global-sales-products-field label,
.gform_wrapper ul li.gfield.industrial-products-field label {
    float: none;
}

.gform_wrapper .global-sales-products-field ul.gfield_checkbox li,
.gform_wrapper .industrial-products-field ul.gfield_checkbox li {
    width: calc(25% - 2px);
    float: left;
    box-sizing: border-box;
    padding: 0 5px !important;
    margin: 1px !important;
}

.gfield_checkbox::after {
    content: '';
    display: block;
    clear: both;
}

.gform_wrapper ul li.gfield.global-sales-products-field .gfield_checkbox li label,
.gform_wrapper ul li.gfield.industrial-products-field .gfield_checkbox li label {
    margin-left: 30px;
}

body .gform_wrapper ul li.field_description_below div.ginput_container_checkbox,
body .gform_wrapper ul li.field_description_below div.ginput_container_radio {
    margin-top: 0 !important;
}

.gform_wrapper ul.gfield_checkbox,
.gform_wrapper ul.gfield_radio {
    margin: 0 !important;
}

.gform_wrapper ul li.gfield.full-width.gfield_html {
    min-height: unset;
    margin-bottom: 25px !important;
}

@media (max-width: 1000px) {
    .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
        padding-bottom: 30px !important;
        position: relative;
    }
    .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
        bottom: -2px;
        top: auto;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .gform_wrapper .global-sales-products-field ul.gfield_checkbox li,
    .gform_wrapper .industrial-products-field ul.gfield_checkbox li {
        width: calc(50% - 2px);
    }
    .gform_wrapper ul.gfield_checkbox li label {
        width: calc(100% - 60px) !important;
    }
}

@media (max-width: 540px) {
    .gform_wrapper .global-sales-products-field ul.gfield_checkbox li,
    .gform_wrapper .industrial-products-field ul.gfield_checkbox li {
        width: calc(100% - 2px);
    }
    body #primary .gform_wrapper.gf_browser_chrome select {
        width: 100% !important;
    }
    .site .gform_wrapper .top_label .gfield_error {
        width: 100%;
    }
}

/* ── Locations grid ── */
.locations.section {
    margin-bottom: 0;
}

.locations p {
    text-align: center;
    margin-bottom: 40px;
}

.locations h2 {
    margin-bottom: 40px;
    text-align: center;
}

.locations h4 {
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* .locations .row — the original relied on global Bootstrap
   .row/.col-* classes for both the outer two-up location grid and
   the inner image/content split within each card. Same gap pattern
   hit on other pages after Bootstrap's removal. */
.locations > .container > .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.location.col-md-6 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .location.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.location-inner .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.location-inner .row > .col-md-6 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.location-image img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .location-inner .row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.location {
    margin-bottom: 80px;
    padding-right: 45px;
}

.location p {
    text-align: left;
    margin-bottom: 10px;
    color: #000000;
    letter-spacing: 0;
}

.location a {
    color: #000000;
    text-decoration: underline;
}
/* =============================================================
   SINGLE CAREER TEMPLATE (single-careers.php)
   Apply Now embedded Gravity Form layout tweaks. Ported exactly
   from the original single-careers.php's inline <style> block.
   ============================================================= */

.single-careers .gform_wrapper ul li.gfield {
    width: 100%;
    padding: 0;
}

.single-careers input[type="text"],
.single-careers textarea,
.single-careers select {
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 11.11px;
    color: #373D40;
    width: 285px;
    border: 0;
    padding: 8px !important;
}

.single-careers .site .gform_wrapper .top_label input.medium,
.single-careers .site .gform_wrapper .top_label select.medium,
.single-careers .site .gform_wrapper textarea.medium {
    width: calc(100% - 245px);
}

.single-careers .gform_wrapper ul li.gfield label {
    width: 240px;
}

@media (max-width: 768px) {
    .single-careers .site .gform_wrapper .top_label input.medium,
    .single-careers .site .gform_wrapper .top_label select.medium,
    .single-careers .site .gform_wrapper textarea.medium {
        width: 100%;
    }
    .single-careers .gform_wrapper ul.gfield_checkbox li label {
        width: calc(100% - 60px) !important;
    }
}

/* =============================================================
   SINGLE CAMPAIGN TEMPLATE (single-campaigns.php)
   Terms and conditions print panel + heading layout. Ported
   exactly from the original single-campaigns.php's inline
   <style> block.
   ============================================================= */

.single-campaigns ol,
.campaign ol {
    margin-left: 0;
    padding-left: 20px;
}

.campaign ol li {
    margin-bottom: 20px;
}

.campaign-banner {
    height: 300px;
}

.campaign a {
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    font-weight: 700;
    text-decoration: underline;
}

.campaign .heading {
    position: relative;
}

.campaign .heading a {
    position: absolute;
    right: 0;
    bottom: 45px;
}

#terms {
    padding: 30px;
    border: 1px solid #c7c7c7;
    height: 500px;
    max-height: 90vh;
    overflow-y: scroll;
}

/* =============================================================
   SINGLE PRODUCT TEMPLATE (single-products.php,
   template-parts/single-product-brand.php)
   Ingredients/Nutritional/Storage/Allergens tabs, zoom image
   gallery, related products slider. Ported exactly from the
   original brand-templates/products.css and the inline <style>
   blocks in both single-products.php and
   brand-templates/single-product.php.
   ============================================================= */

/* ── Tab show/hide (Ingredients/Nutritional/Storage/Allergens/
   Certifications) — Bootstrap used to provide .tab-pane's display
   toggling and .nav-tabs/.nav-item's flex row layout via its own
   framework CSS, none of which exists anymore. Without this, every
   pane renders stacked simultaneously and the tab buttons stack
   vertically instead of laying out in a row. The JS toggle
   (pride-custom.js, section 5) already correctly adds/removes
   .show.active — this CSS is what makes that toggle visible. ── */
.single-product .tab-pane {
    display: none;
    max-width: 1140px;
    margin: auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.single-product .tab-pane.show.active {
    display: block;
}

.single-product .nav.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    border-bottom: 0;
    list-style: none;
    padding-left: 0;
}

.single-product .nav-tabs .nav-item {
    flex: 1 1 auto;
    display: block;
    text-align: center;
    width: auto;
}

.single-product .nav-tabs li {
    font-size: 14px;
    color: #000000;
    letter-spacing: 2.1px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
}

.single-product .nav-tabs .nav-item.show .nav-link,
.single-product .nav-tabs .nav-link.active {
    border: 0;
    border-bottom: 3px solid #9BC322;
}

.single-product .tab-content {
    padding: 30px 0;
    background-color: #F2F2F2;
}

.single-product .certificates .col {
    line-height: 108px;
    color: #ffffff;
    margin-bottom: 0;
}

/* ── Selling points (pack sizes, applications, reasons-to-believe
   lists, "loved by" grid) ── */
.single-product .selling-point {
    text-align: center;
}

.single-product .selling-point .icon {
    background: #F9F9F9;
    border: 1px solid #979797;
    padding: 8px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 50px;
    margin-bottom: 15px;
}

.single-product .selling-point .icon img {
    max-height: 40px;
    width: auto;
}

/* Consumer Brand Product pages override the base badge styling
   above with a smaller, borderless version — the actual fill colour
   comes from the .secondary-bg class also applied on this element
   in the markup (per-brand dynamic colour), not from this rule.
   Matches the original's products.css override, which only ever
   loaded on these pages. */
.consumer-brand-product .selling-point .icon {
    width: 50px;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    font-family: 'Montserrat', sans-serif;
    border: 0;
    padding: 0;
    color: #ffffff;
}

.single-product .content .description {
    margin-top: 20px;
    margin-bottom: 30px;
}

.single-product .nav-tabs .nav-link {
    color: #212529;
    display: block;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid transparent;
}

.single-product .nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link {
    border-radius: 0;
    margin-right: 1px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    display: inline-block;
    padding: 12px 30px;
    text-align: center;
}

.nav-tabs .nav-item:last-child .nav-link {
    margin-right: 0;
}

.nav-tabs {
    margin-top: 60px;
}

.single-product .nav-tabs .nav-item.show .nav-link,
.single-product .nav-tabs .nav-link.active {
    border: 2px solid transparent;
    margin-top: -1px;
    background-image: none;
}

.consumer-brand-product .tab-content {
    border: 1px solid #757474;
    background-color: #ffffff;
    margin-top: -2px;
    margin-right: 1px;
}

.tab-content table {
    border-collapse: collapse;
}

.tab-content td {
    border: 1px solid #707070;
    padding: 5px;
    color: #707070;
}

@media (max-width: 1000px) {
    .nav-tabs .nav-link {
        font-size: 11px;
        padding: 12px;
    }
    .col-1_5 {
        flex: 0 0 15%;
        max-width: 15%;
    }
}

@media (max-width: 768px) {
    .nav-tabs {
        margin-top: 20px;
    }
    .nav-tabs .nav-link {
        font-size: 11px;
        padding: 12px;
        margin-bottom: 1px;
        background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
    }
    .single-product .nav-tabs .nav-item.show .nav-link,
    .single-product .nav-tabs .nav-link.active {
        margin-top: 0;
    }
    .col-1_5 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ── Related products slider (#product-items) ── */
.related-products-slider {
    position: relative;
}

#prds-prev {
    left: -30px;
    padding-top: 2px;
    padding-right: 1px;
}

#prds-next {
    right: -30px;
    padding-top: 2px;
    padding-left: 2px;
}

.single-product #product-items {
    display: block;
}

.single-product #product-items .product {
    padding: 10px;
}

.related-products {
    background-color: #F5F5F5;
    text-align: center;
    padding: 30px 0 60px;
    margin: 60px 0;
}

.related-products h2 {
    font-size: 30px;
    line-height: 93px;
    letter-spacing: 0;
    color: #000000;
    text-align: center;
}

.related-products .product .image img {
    height: 250px;
    width: auto;
}

.related-products .product .image {
    height: 260px;
}

.related-products .product:hover .image img {
    height: 255px;
}

.related-products .product {
    margin-bottom: 30px;
}

.related-products .product .product-name p {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.related-products .product-brand-name {
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
    color: #707172;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .related-products .product .image img {
        height: 200px;
    }
    .related-products .product .image {
        height: 205px;
    }
    .related-products .product:hover .image img {
        height: 205px;
    }
}

@media (max-width: 768px) {
    #prds-prev {
        left: 0;
    }
    #prds-next {
        right: 0;
    }
}

@media (max-width: 676px) {
    .related-products h2 {
        line-height: 30px !important;
    }
}

/* ── Zoom image gallery (Consumer Brand Product pages) ── */
.zoom {
    height: 500px;
}

.zoom-main {
    height: 85%;
}

.zoom-main span {
    border: 0;
    background-color: #ffffff;
    max-width: 500px;
    border-radius: 20%;
}

.zoom-thumb {
    height: 15%;
}

.zoom .zoom-thumb {
    margin-top: 40px;
}

.zoom .zoom-thumb a {
    border: 3px solid transparent;
    padding: 0;
}

@media (max-width: 1000px) {
    .zoom-main {
        height: 70%;
    }
}

@media (max-width: 768px) {
    .zoom-main {
        height: 80%;
    }
    .zoom-main span {
        max-width: 400px;
    }
    .zoom .zoom-thumb {
        margin-top: 0;
        height: 15%;
    }
    .zoom-thumb a {
        height: 100% !important;
    }
}

/* ── Single product heading / content ── */
.single-product .section .heading h2 {
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0;
    margin-bottom: 30px;
    text-align: left;
}

.single-product .heading h3 {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
}

.single-product .section .heading {
    border: 0;
}

.product-image {
    border: 0;
}

@media (max-width: 768px) {
    .single-product .section .heading h2 {
        margin-top: 5px;
    }
}

/* ── Industrial / Global Sales product pages specifically (the
   non-brand branch of single-products.php) ── */
.single-product.article {
    margin-bottom: 0;
}

.single-product .more-products {
    background-color: #F2F2F2;
    padding: 20px 50px;
    margin-bottom: 0;
}

.single-product .more-products .view-more {
    text-align: center;
}

.single-product:not(.consumer-brand-product) .product-image img {
    border-radius: 50%;
    width: 100%;
}

/* The original's .slick-track / .slick-list overrides apply
   specifically to the related-products slider on this template,
   making Slick lay tracks out as a flex row so fewer-than-full
   slides stay centred rather than left-aligned. */
.single-product .related-products-slider .slick-track {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.single-product .related-products-slider .slick-list.draggable {
    display: flex !important;
}

/* ── .btn-grey — "Contact Global Sales" secondary button, single
   product pages ── */
.single-product .btn-grey {
    color: #ffffff;
    background: #727272;
}

.single-product .btn-grey:hover {
    color: #ffffff;
    background-color: #9BC322;
}

#page .single-product .btn-green:hover {
    background: #9BC322;
}

/* ── #product-items card styling specific to the Industrial /
   Global Sales related-products grid in single-products.php
   (the non-brand branch) — different markup (h3 > a) from the
   brand-product related-products section (.product-name > p > a),
   so scoped separately to avoid colliding with that card style. ── */
.single-product #product-items .product {
    text-align: center;
}

.single-product #product-items .product h3 {
    background: #ffffff;
    padding: 15px;
    height: 62px;
    position: relative;
}

.single-product #product-items .product h3 a {
    position: absolute;
    padding: 15px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    box-sizing: border-box;
}

.single-product #product-items .product:hover h3 a {
    text-decoration: underline;
}

.single-product #product-items .product .thumbnail {
    border-bottom: 3px solid #9BC322;
}

.single-product #product-items {
    margin-top: 30px;
}

/* ── Checkmark-style list bullets (selling points, reasons to
   believe) — pure CSS checkmark built from rotated borders (:before)
   inside a circle outline (:after). Colour is set dynamically per
   brand in template-parts/single-product-brand.php's generated
   <style> block (.content ul li:before/:after { color: ... }) —
   that rule only set the colour, never the shape itself, which is
   why checkmarks weren't appearing despite the colour being
   correctly themed. Ported exactly from the original products.css. ── */
.single-product .content ul {
    margin-left: -0.5em;
    margin-bottom: 1.5rem;
}

.single-product .content ul li {
    position: relative;
    list-style: none;
    padding-left: 10px;
}

.single-product .content ul li:before {
    content: '';
    display: block;
    position: absolute;
    width: 7px;
    height: 15px;
    border-right: 2px solid;
    border-bottom: 3px solid;
    transform: rotate(45deg);
    left: -13px;
    top: -3px;
    border-top: 1px solid transparent;
    border-left: 2px solid transparent;
}

.single-product .content ul li:after {
    content: '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid;
    border-radius: 50%;
    left: -20px;
    top: 0;
}

.single-product .zoom-main span {
    border: 2px solid #ffffff;
}

.single-product .container {
    text-align: left;
    margin-bottom: 50px;
}

.single-product h2 {
    text-align: center;
}

.single-product .brand-news-section {
    margin-bottom: 60px;
}

.single-product .banner h2 {
    text-align: left;
}