/*
Author: Ton Hanchai | www.tonhanchai.com
*/

* {
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #333;
}

body, li, a, button {
    font-weight: 400;   /* was 300 — light weight strains reading on mobile screens */
    font-size: 16px;
    text-decoration: none;
}

p {
    padding-top: 1rem;
    line-height: 1.5em;
}

.line-spacing_xsmall { line-height: 0.5em !important; }
.line-spacing_small  { line-height: 1.25em !important; }
.line-spacing_normal { line-height: 1.5em !important; }
.line-spacing_large  { line-height: 2em !important; }

a {
    color: #054f18;
    font-weight: 400;
    font-size: 16px;    /* was: larger — relative value is unpredictable across contexts */
}

a:hover { color: #59ab6e; }

/* Colors */
._green_corp    { color: #054f18; }
._green         { color: #0e7b2a; }
._correct       { color: #0cba39; }
._dark_green    { color: #2B5440; }
._light_green   { color: #0cba39; }
._red, ._error  { color: #D12934; }
._blue          { color: #3455A0; }
._gray          { color: #828887; }
._dark_gray     { color: #111; }
._light_gray    { color: #aaa; }
._very_light_gray { color: #e0e0e0; }
._white         { color: #fff; }
._black         { color: #000; }

._bg_white           { background-color: #fff !important; }
._bg_light_gray      { background-color: #f2f2f2; }
._bg_extra_light_gray{ background-color: #e8e8e8; }
._bg_dark_blue       { background-color: #212934; }
._bg_blue_gray       { background-color: #3a6a79; }
._bg_green_gray      { background-color: #8CA493; }
._bg_dark_green      { background-color: #44584F; }
._bg_brown           { background-color: #7d5734; }
._bg_pinkish_brown   { background-color: #4b2a2e; }
._bg_section_light_gray { background-color: #fbf8f8; }

/* Layout */
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6rem 1fr 16rem;
    grid-template-areas:
        "header"
        "content"
        "footer";
    min-height: 100vh;
    /* FIX: prevent any child from causing horizontal scroll */
    max-width: 100vw;
    overflow-x: hidden;
}

/* Header */
.header_sticky {
    position: fixed;
    top: 0;
    margin-top: 0px;
    width: 100%;
}

header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding-left: 10%;
    padding-right: 10%;
    z-index: 99999;
}

.logo {
    cursor: pointer;
    height: auto !important;
}

.nav_links {
    list-style: none;
    font-weight: 200;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    color: #555555;
    transition: all 0.3s ease 0s;
}

.nav_links li a:hover { color: #59ab6e; }

.nav_links li .focused {
    color: #0e7b2a;
    font-weight: 500;
}

.nav_cart {
    height: 100px;
    display: flex;
    align-items: center;
}

/* Mobile Nav */
#nav_mobile {
    top: 100px;
    padding-left: 0%;
    z-index: 99998;
    background-color: #fff;
    box-shadow: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.06) 0px 2px 4px -1px;
    min-height: -webkit-fill-available;
}

.mobile-nav-panel {
    position: fixed;
    width: 100%;
    z-index: 99998;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: #fff;
    min-height: 0 !important;
    display: block;
}

.mobile-nav-open { max-height: 100vh; }

.mobile_links { list-style: none; font-weight: 200; }
.mobile_links li { display: block; padding: 8px 0px; }
.mobile_links li a { font-size: 24px; color: #777; transition: all 0.3s ease 0s; }
.mobile_links li a:hover { color: #59ab6e; }
.mobile_links li .focused { color: #0e7b2a; font-weight: 500; }

/* Buttons */
button {
    padding: 9px 25px;
    font-size: 14px;
    font-weight: 300;
    background-color: rgba(43,84,64,0.8);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover { background-color: rgba(43,84,64,1); }

.paypal_button {
    width: 100%;
    height: 46px;
    padding: 9px 25px;
    font-size: 16px;
    font-weight: 300;
    background-color: rgba(20,165,95,0.8);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

#paypal-button-container { padding: 0px 10%; }
.paypal_button:hover { background-color: rgba(43,84,64,1); }

.nav_icon { color: #555; transition: all 0.3s ease 0s; }
.nav_icon:hover { color: #0e7b2a; }

/* Main — FIX 1: overflow:visible allows hero margin-top:-100px to work */
main {
    grid-area: content;
    padding: 0;
    background-color: #aaaaaa;
    overflow: visible;
}

/* Text */
.text_logo          { font-weight: 500; font-size: 38px; }
.text_title_heavy   { font-weight: 400; font-size: 38px; }
.text_title         { font-weight: 300; font-size: 38px; }
.text_title_light   { font-weight: 200; font-size: 38px; }
.text_subtitle_heavy{ font-weight: 400; font-size: 24px; }
.text_subtitle      { font-weight: 300; font-size: 24px; }
.text_subtitle_light{ font-weight: 400; font-size: 24px; }
.text_body          { font-weight: 400; font-size: 18px; }

.text_link { color: #054f18; font-size: 16px; }
.text_link:hover { color: #022d0d; font-size: 16px; text-decoration: underline; }

.disclaimer_link { color: #054f18; font-size: 12px; }
.disclaimer_link:hover { color: #022d0d; font-size: 12px; text-decoration: underline; }

.text_footer_link { color: #777; font-size: 16px; }
.text_footer_link:hover { color: #59ab6e; text-decoration: underline; }

.text_copyrights    { color: #aaa; font-size: 16px; }
.text_italic        { font-style: italic; }
.text_bold          { font-weight: 400; }
.text_semibold      { font-weight: 300; }
.text_product_title { font-weight: 400; font-size: 18px; }
.text_product_spec  { font-weight: 200; font-size: 16px; }
.text_product_price { font-weight: 300; font-size: 20px; align-self: end; }
._text_small        { font-size: 13px; }

sup, .sup       { vertical-align: super; font-size: 16px; color: #767676; }
.sup_footer     { vertical-align: super; font-size: 16px; color: #7b7979; }

/* Padding */
.padding-none         { padding: 0 !important; }
.padding-all          { padding: 1rem !important; }
.padding-all-medium   { padding: 2rem !important; }
.padding-all-large    { padding: 4rem !important; }
.padding-top-none     { padding-top: 0 !important; }
.padding-top          { padding-top: 1rem !important; }
.padding-top-medium   { padding-top: 2rem !important; }
.padding-top-large    { padding-top: 4rem !important; }
.padding-bottom-none  { padding-bottom: 0 !important; }
.padding-bottom       { padding-bottom: 1rem !important; }
.padding-bottom-medium{ padding-bottom: 2rem !important; }
.padding-bottom-large { padding-bottom: 4rem !important; }
.padding-left-none    { padding-left: 0 !important; }
.padding-left         { padding-left: 1rem !important; }
.padding-left-medium  { padding-left: 2rem !important; }
.padding-left-large   { padding-left: 4rem !important; }
.padding-right-none   { padding-right: 0 !important; }
.padding-right        { padding-right: 1rem !important; }
.padding-right-medium { padding-right: 2rem !important; }
.padding-right-large  { padding-right: 4rem !important; }

/* Align */
.text_align_left   { text-align: left !important; }
.text_align_center { text-align: center !important; }
.text_align_right  { text-align: right !important; }

.v_align_center {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px;
}

.h_align_center {
    position: absolute;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* HERO BASE — custom.css overrides with !important */
.hero_container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3rem 5% 2rem 5%;
    position: relative;
    overflow: hidden;
    height: 660px;
    width: 100%;
    box-sizing: border-box;
}

/* FIX 2: GPU layer for sharp rendering. Background props only — no layout. */
.hero_background_image {
    background-image: url("../img/home-hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 45%;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero_text_container {
    position: relative;
    z-index: 2;
    max-width: 460px;
    width: 100%;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.80);
    border-radius: 12px;
    border-left: 4px solid #0e7b2a;
}

/* Pulsor section */
.pulsor_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.pulsor_background_image {
    background-image: url("../img/home-pulsor.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 600px;
}

/* FIX: was width:1000px height:400px — fluid with max-width instead */
.about_hero_background_image {
    background-image: url("../img/about-hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* Section Content */
.section_content {
    align-items: center;
    padding: 5% 10%;
    background-color: #fbf9f9;
}

.section_content_footer { align-items: center; }

/* Grids */
.col-1_grid_container {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0% 10%;
    grid-column-gap: 1rem;
    background-color: #fbf9f9;
}

.col-2_grid_container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    padding: 0% 10%;
    grid-column-gap: 1rem;
}

.col-2_grid_container_bio {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 0fr 1fr;
    padding: 0% 10%;
    grid-column-gap: 1rem;
    background-color: #fbf9f9;
}

.col-3_grid_container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2% 10%;
    grid-column-gap: 1rem;
}

.col-4_grid_container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 2% 10%;
    grid-column-gap: 1rem;
}

.column {
    padding: 0rem;
    background-color: #fff;
    border: solid 1px #e4e4e4;
}

/* Page hero banner */
.page_hero_banner_container { padding: 0% 0%; }

.page_hero_row:after {
    content: "";
    display: table;
    clear: both;
    padding: 0% 10%;
}

.page_hero_column {
    float: left;
    margin: auto;
    padding-left: 1rem;
    width: 50%;
    padding: 10px;
    height: 350px;
}

.page_article_container {
    padding: 0% 10%;
    background-color: #fbf8f8;
}

.page_article_row:after {
    content: "";
    display: table;
    clear: both;
    padding: 0% 10%;
}

.page_article_column_left_img  { float: left;  margin: auto; padding: 10px; width: 30%; }
.page_article_column_right_text{ float: left;  margin: auto; padding: 10px; width: 70%; }
.page_article_column_left_text { float: left;  margin: auto; padding: 10px; width: 70%; }
.page_article_column_right_img { float: left;  margin: auto; padding: 10px; width: 30%; }

.article_spot_image_top {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 1rem 0;
}

.article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 100%; }
.article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 100%; }

/* Benefits */
/* FIX: was width:1000px height:350px — fluid with max-width instead */
.benefits_hero_background_image {
    background-image: url("../img/benefits-hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* FIX: was width:425px height:400px — fluid with max-width instead */
.benefits_article_1_background_image {
    background-image: url("../img/benefits-article-1-personal used.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* Products */
/* FIX: was width:1000px height:350px — fluid with max-width instead */
.products_hero_background_image {
    background-image: url("../img/products-hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.products_column {
    padding: 0rem;
    background-color: #f1f1f1;
    border: solid 1px #d3d3d3;
}

.products_button { cursor: pointer; }

.products_button:hover {
    box-shadow: -2px 5px 17px -1px rgba(0,0,0,0.38);
    -webkit-box-shadow: -2px 5px 17px -1px rgba(0,0,0,0.38);
    -moz-box-shadow: -2px 5px 17px -1px rgba(0,0,0,0.38);
    background-color: #fff;
    transition: all 0.3s ease 0s;
}

.product_item { height: 100%; }

/* Product Details */
.page_product_detail_container { padding: 0% 10%; }

.page_product_detail_row:after {
    content: "";
    display: table;
    clear: both;
    padding: 0% 10%;
}

.page_product_detail_column {
    float: right;
    margin: auto;
    padding: 10px;
    width: 70%;
    height: auto;
}

.product_details_selection { padding: 10px; cursor: pointer; }

/* Courses */
/* FIX: was width:1000px height:350px — fluid with max-width instead */
.courses_hero_background_image {
    background-image: url("../img/courses-hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

/* Forms */
select {
    background: #e1e1e1;
    border: 2px solid #c9c9c9;
    width: 100%;
    height: 46px;
    font-size: large;
    border-radius: 4px;
}

select option:checked,
select option:hover { box-shadow: 0 0 10px 100px #000 inset; }

input {
    width: 100%;
    height: 46px;
    font-size: 18px;
    border-color: #212934;
    border-radius: 4px;
    padding: 10px;
}

input[type=checkbox] { height: 24px; width: auto; }
input[type=text]     { height: 46px; }

.valueEmpty {
    width: 100%;
    height: 46px;
    font-size: 18px;
    border-radius: 4px;
    border: solid 2px #D12934;
    padding: 10px;
}

.valueFilled {
    width: 100%;
    height: 46px;
    font-size: 18px;
    border-radius: 4px;
    border: solid 2px #0cba39;
    padding: 10px;
}

.haveRepIdUnchecked { vertical-align: super; font-weight: 100; }
.haveRepIdChecked   { vertical-align: super; font-weight: 400; }

::placeholder        { color: #C9C9C9; opacity: 1; font-size: 15px; }
:-ms-input-placeholder  { color: #C9C9C9; font-size: 15px; }
::-ms-input-placeholder { color: #C9C9C9; font-size: 15px; }

.avoid-clicks { pointer-events: none; }
.course-price { height: 160px; display: grid; }

/* Footer */
footer {
    grid-area: footer;
    padding: 0rem;
    background-color: #212934;
    min-height: 60vh;
}

.footer_links { list-style: none; font-weight: 200; }
.footer_links li { display: block; padding: 8px 0px; }
.footer_links li a { color: #777; transition: all 0.3s ease 0s; }
.footer_links li a:hover { color: #59ab6e; }
.footer_links li .focused { color: #0e7b2a; font-weight: 500; }

.footer_column_container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2% 10%;
    grid-column-gap: 1rem;
}

.footer_column {
    color: #e0e0e0;
    padding: 1rem;
    background-color: #212934;
}

.footer_icon       { font-size: 24px !important; }
.footer_icon_medium{ font-size: 32px !important; }
.footer_icon_large { font-size: 48px !important; }

/* Utilities */
.show_block  { display: block; }
.show_inline { display: inline; }
.show_flex   { display: flex; }
.show_grid   { display: grid; }
.hide        { display: none; }

.anchor { padding-top: 100px; }

.disclaimer {
    font-size: 14px;
    font-weight: 400;
    color: #767676;
}

.disclaimer-card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    background-color: #ecf2f7;
    padding: 0 16px 16px 16px;
}

.h-center-align { text-align: left; align-items: center; }

.kens-bio {
    float: left;
    margin: 5px;
    padding-left: 0px;
    padding-right: 12px;
    padding-bottom: 6px;
}

/* Mobile Cart Icon */
#mobile-cart-icon {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}
#mobile-cart-icon:hover { color: #0e7b2a; }
#mobile-cart-icon svg   { fill: currentColor; }

#mobile-cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #0e7b2a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* ======================================================= */
/* RESPONSIVE BREAKPOINTS                                  */
/* ======================================================= */

/* FIX: removed duplicate @media (min-width: 200px) block — was identical to 320px */

@media (min-width: 320px) {
    #desktop { display: none; }
    #mobile_menu { display: inline-block; }
    #mobile-cart-icon { display: flex; }
    .logo { width: 150px; }
    .hero_text_container { width: 100%; }
    .hero_background_image { background-position: center 20%; }
    .pulsor_background_image { background-position: center center; background-attachment: scroll; background-repeat: no-repeat; background-size: auto; width: 100%; }
    .col-3_grid_container { grid-template-columns: repeat(1, 1fr); grid-row-gap: 1rem; padding: 2% 1%; }
    .col-4_grid_container { grid-template-columns: repeat(1, 1fr); grid-row-gap: 1rem; padding: 2% 1%; }
    .footer_column_container { grid-template-columns: repeat(1, 1fr); grid-row-gap: 1rem; padding: 2% 1%; }
    .page_hero_column { width: 100%; text-align: center; height: 250px; }
    .page_hero_column img { object-position: center center !important; }
    .text_body { font-size: 22px; }
    .text_title { font-size: 28px; }       /* was 38px — too large on small screens */
    .text_title_heavy { font-size: 28px; } /* match */
    .text_subtitle { font-size: 20px; }    /* was 24px — scale down slightly on mobile */
    .text_subtitle_light { font-size: 20px; }
    .text_subtitle_heavy { font-size: 20px; }
    .padding-top { padding-top: 0 !important; }
    .padding-left-medium { padding-left: 0 !important; }
    .page_product_detail_column { width: 100%; }
    .article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 100%; }
    .article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 100%; }
    /* FIX: was min-height:120vh — fights footer.js self-sizing and causes blank space */
    footer { min-height: 60vh; }
    .footer_column_container { align-items: start; }
}

@media (min-width: 600px) {
    #desktop { display: none; }
    #mobile_menu { display: inline-block; }
    #mobile-cart-icon { display: flex; }
    .logo { width: 200px; }
    .hero_text_container { width: 460px; }
    .hero_background_image { background-position: center 20%; }
    .pulsor_background_image { background-position: center center; background-attachment: scroll; background-repeat: no-repeat; background-size: auto; width: 100%; }
    .col-3_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .col-4_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .footer_column_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 1%; }
    footer { min-height: 60vh; }
    .page_hero_column { width: 100%; height: 350px; text-align: left; }
    .text_body { font-size: 16px; }
    .padding-top { padding-top: 10px !important; }
    .padding-left-medium { padding-left: 1rem !important; }
    .page_article_column_left_img { width: 30%; height: 200px; float: left; }
    .page_article_column_right_text { width: 100%; }
    .page_product_detail_column { width: 100%; }
    .article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 260px; }
    .article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 260px; }
    .footer_column_container { align-items: start; }
}

@media (min-width: 815px) {
    #desktop { display: inline-block; }
    #mobile_menu { display: none; }
    #mobile-cart-icon { display: none; }
    .logo { width: 200px; }
    .hero_background_image { background-position: center 20%; }
    .pulsor_background_image { background-position: center center; background-attachment: scroll; background-repeat: no-repeat; background-size: auto; width: 100%; }
    .page_hero_column { width: 50%; height: 350px; text-align: left; }
    .text_body { font-size: 16px; }
    .padding-top { padding-top: 10px !important; }
    .padding-left-medium { padding-left: 1rem !important; }
    .page_product_detail_column { width: 50%; }
    .article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 260px; }
    .article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 260px; }
    .col-3_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .col-4_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    footer { min-height: 60vh; }
    .footer_column_container { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

@media (min-width: 1200px) {
    #desktop { display: inline-block; }
    #mobile_menu { display: none; }
    #mobile-cart-icon { display: none; }
    .logo { width: 200px; }
    .hero_text_container { width: 460px; }
    .hero_background_image { background-position: center 20%; }
    .pulsor_background_image { background-position: -310px 0px; }
    .col-3_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .col-4_grid_container { grid-template-columns: repeat(4, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .page_hero_column { width: 50%; height: 350px; text-align: left; }
    .text_body { font-size: 16px; }
    .padding-top { padding-top: 10px !important; }
    .padding-left-medium { padding-left: 1rem !important; }
    .page_article_column_left_img { width: 30%; }
    .page_article_column_right_text { width: 70%; }
    .article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 260px; }
    .article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 260px; }
    .page_product_detail_column { width: 50%; }
    footer { min-height: 60vh; }
    .footer_column_container { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

@media (min-width: 1400px) {
    #desktop { display: inline-block; }
    #mobile_menu { display: none; }
    #mobile-cart-icon { display: none; }
    .logo { width: 200px; }
    .hero_text_container { width: 460px; }
    .hero_background_image { background-position: center 20%; }
    .col-3_grid_container { grid-template-columns: repeat(3, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .col-4_grid_container { grid-template-columns: repeat(4, 1fr); grid-row-gap: 1rem; padding: 2% 10%; }
    .pulsor_background_image { background-position: -100px 0px; }
    .page_hero_column { width: 50%; height: 350px; text-align: left; }
    .text_body { font-weight: 400; font-size: 18px; }
    .padding-top { padding-top: 10px !important; }
    .padding-left-medium { padding-left: 1rem !important; }
    .page_product_detail_column { width: 50%; }
    .article_spot_image_left  { float: left;  margin: 20px 20px 20px 0px;  width: 260px; }
    .article_spot_image_right { float: right; margin: 20px 0px  20px 20px; width: 260px; }
    .image-wrapper { max-width: 960px; margin: 0 auto; padding: 1rem; }
    footer { min-height: 60vh; }
    .footer_column_container { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* Product image grid fix */
.products_column img {
    height: 250px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Mobile hero fix — phones only */
@media (max-width: 599px) {
    .page_hero_banner_container { padding: 0 !important; margin: 0 !important; overflow: hidden !important; }
    .page_hero_row { display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; }
    .page_hero_row:after { display: none !important; }
    .page_hero_column { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; }
    .page_hero_column:first-child { height: 220px !important; }
    .page_hero_column picture { left: 0 !important; right: 0 !important; width: 100% !important; }
    .page_hero_column img { object-position: center center !important; }
    .page_hero_column:last-child { padding: 1.5rem 1rem !important; }
    .products_hero_background_image { width: 100% !important; background-size: cover !important; background-position: center center !important; }
}