/* =========================================================================
   CheapestOil – Custom Styles
   Bootstrap 5.3 is the base. This file adds site-specific components and
   layout helpers only. We deliberately avoid overriding Bootstrap globals
   (label, input, p, h1-h5, .btn, .form-control, .row, etc.).
   ========================================================================= */

/* ----- Base ------------------------------------------------------------- */
body {
    font-family: 'Open Sans', 'Roboto', sans-serif;
    font-weight: 300;
    color: #474747;
    background: #fff;
    padding: 20px 50px 50px;
}

/* ----- Custom float grid ------------------------------------------------
   These complement Bootstrap's grid for legacy layout sections.
   On mobile (≤768px) all col_* collapse to full width (see media query).
   ----------------------------------------------------------------------- */
.col_01  { width: 100%;     float: left; }
.col_02  { width: 50%;      float: left; }
.col_03  { width: 33.333%;  float: left; }
.col_04  { width: 25%;      float: left; }
.col_05  { width: 20%;      float: left; }
.col_06  { width: 66.666%;  float: left; }
.col_09  { width: 11.111%;  float: left; }
.col_12  { width: 8.3333%;  float: left; }
.col_13  { width: 20%;      float: left; }
.col_14  { width: 80%;      float: left; }
.col_15  { width: 16.667%;  float: left; }
.col_10p { width: 10%;      float: left; }
.col_15p { width: 15%;      float: left; }
.col_30p { width: 30%;      float: left; }
.col_40p { width: 40%;      float: left; }

/* ----- Typography ------------------------------------------------------- */
/* Headings keep Bootstrap's block layout; we only set font/size/weight.    */
.paraheading {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 500 !important;
    text-transform: uppercase;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5 { font-family: 'Roboto', 'Open Sans', sans-serif; }
h1 { font-size: 24px; font-weight: 500 !important; text-transform: uppercase; }
h2 { font-size: 20px; font-weight: 500 !important; text-transform: uppercase; }
h3 { font-size: 16px; font-weight: 500 !important; }
h4 { font-size: 16px; font-weight: 300 !important; }
h5 { font-size: 14px; font-weight: 300 !important; }

/* ----- Spacing helpers -------------------------------------------------- */
.padding           { padding: 50px; }
.padding_top       { padding-top: 50px; }
.padding_right     { padding-right: 50px; }
.padding_bottom    { padding-bottom: 50px; }
.padding_left      { padding-left: 50px; }

.small_padding         { padding: 25px; }
.small_padding_top     { padding-top: 25px; }
.small_padding_right   { padding-right: 25px; }
.small_padding_bottom  { padding-bottom: 25px; }
.small_padding_left    { padding-left: 25px; }

.no_padding_right  { padding-right: 0; }
.no_padding_left   { padding-left: 0; }
.no_border_left    { border-left: 0 !important; }
.no_border_right   { border-right: 0 !important; }

.margin_top          { margin-top: 50px; }
.margin_bottom       { margin-bottom: 50px; }
.small_margin_top    { margin-top: 25px; }
.small_margin_bottom { margin-bottom: 25px; }

.border_top    { border-top: 1px solid #bfbfbf; }
.border_bottom { border-bottom: 1px solid #bfbfbf; }
.float_right   { float: right; }

/* ----- Site buttons ----------------------------------------------------- */
/* .button  = orange CTA. Use Bootstrap .btn for standard buttons.         */
.button {
    display: inline-block;
    background: #ec6408;
    color: #fff;
    padding: 5px 10px;
    margin-bottom: 10px;
    cursor: pointer;
    text-decoration: none;
}
.button:hover, .button:focus { background: #ff7e26; color: #fff; text-decoration: none; }
.button a { color: #fff; }

/* .button_grey = dark-grey secondary action                               */
.button_grey {
    display: inline-block;
    background: #474747;
    color: #fff;
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    float: left;
}
.button_grey:hover, .button_grey:focus { background: #848484; color: #fff; text-decoration: none; }
.button_grey a, .button_grey a:visited { color: #fff; }

/* ----- Product Cards ---------------------------------------------------- */
.product-card {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    padding: 16px;
    transition: box-shadow 0.2s ease;
}
.product-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.product-card__image {
    flex: 0 0 160px;
    margin-right: 20px;
    text-align: center;
}
.product-card__image img {
    max-width: 160px;
    height: auto;
}
.product-card__body {
    flex: 1;
    min-width: 0;
}
.product-card__body h3 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 18px;
}
.product-card__price {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* ----- Banner ----------------------------------------------------------- */
.banner {
    width: 100%;
    padding: 0 0 30px;
    float: left;
    position: relative;
    border-bottom: 1px solid #bfbfbf;
    display: block;
}
.banner a   { text-decoration: none; }
.banner img { float: left; padding-right: 50px; }

/* Site navigation — scoped to .banner so it doesn't fight Bootstrap .nav  */
.banner .nav { width: auto; float: left; }
.banner .nav a {
    padding: 20px 20px 0 0;
    float: left;
    color: #474747;
    font-size: 14px;
    text-decoration: none;
}
.banner .nav a:hover { color: #ef7d30; }

/* ----- Footer ----------------------------------------------------------- */
.footer {
    float: left;
    width: 100%;
    padding: 50px 0 0;
    border-top: 1px solid #bfbfbf;
    margin: 50px 0 0;
}
.footer h4 { padding: 0 0 10px; margin: 0 0 10px; font-weight: 500 !important; }
.footer p  { font-size: 12px; }
.footer a  { color: #474747; float: left; width: 100%; font-size: 12px; margin-bottom: 10px; }

/* ----- Search / filter panel -------------------------------------------- */
.search  { background: #f1f1f1; padding: 25px; }
.filters { float: left; width: 100%; }

/* ----- Price grid ------------------------------------------------------- */
.pricegrid    { background: #fff;    padding: 10px; border-bottom: 1px solid #bfbfbf; }
.pricegridalt { background: #eeeff0; padding: 10px; border-bottom: 1px solid #bfbfbf; }

.grid_headings      { background: #474747; padding: 5px 10px; }
.grid_headings h3   { margin: 0; padding: 0; color: #fff; }
.grid_filters       { padding: 0 0 10px; }

.showing       { width: auto; float: left; }
.showing span  { width: auto; padding: 5px 0 0; }
.sort_by       { float: right; width: auto; }
.sort_by select { padding: 5px; border: 1px solid #bfbfbf; }

.pricegridsupplier { font-size: 1.25rem; color: #0053f9; width: 100%; float: left; }
.delivery_area     { width: 100%; float: left; }
.ppl               { font-size: .9em; }

.mobileprice {
    width: 100%;
    grid-template-columns: 30% 30% 30%;
    gap: 5%;
}

.gridclickheadings {
    margin: 0;
    padding: 0;
    background: none !important;
    color: #fff;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500 !important;
    text-decoration: underline;
}

/* ----- Home page banner ------------------------------------------------- */
/* Image Banner */
.image_banner {
    margin: 0 0 50px;
    position: relative;
}

    .image_banner img {
        width: 100%;
    }

.image_banner_heading {
    position: absolute;
    top: 50px;
    right: 50px;
    color: #ffffff;
    text-align: right;
}

.image_banner_content {
    position: absolute;
    bottom: 50px;
    right: 50px;
    color: #ffffff;
    text-align: right;
}

    .image_banner_content label {
        color: #ffffff;
        float: right;
        width: 100%;
    }

    .image_banner_content .form-control {
        width: 60%;
    }

    .image_banner_content .btn {
        width: 40%;
        background: #ec6408;
        color: #ffffff;
        border: medium none;
    }

/* ----- Misc components -------------------------------------------------- */
.adbox {
    margin-left: 4px;
    padding: 1px 2px 0 2px;
    color: #767676;
    border: 1px solid #ddd;
    font-size: 11px;
    line-height: 11px;
    border-radius: 6px;
    display: inline-block;
}

.distributor_desc { width: 100%; float: left; font-weight: bold !important; }
.disclaimer, .disclaimer li { font-size: 11px !important; }
.red { color: #c9282a; }

/* ----- Responsive ------------------------------------------------------- */
@media only screen and (max-width: 960px) {
    body                  { padding: 35px; }
    .padding              { padding: 35px; }
    .padding_top          { padding-top: 35px; }
    .padding_bottom       { padding-bottom: 35px; }
    .padding_left         { padding-left: 25px; }
    .padding_right        { padding-right: 25px; }
    .small_padding        { padding: 20px; }
    .small_padding_top    { padding-top: 20px; }
    .small_padding_right  { padding-right: 20px; }
    .small_padding_bottom { padding-bottom: 20px; }
    .small_padding_left   { padding-left: 20px; }
    .margin_top           { margin-top: 35px; }
    .margin_bottom        { margin-bottom: 35px; }
    .banner img           { padding-right: 20px; width: 125px; }
    .banner .nav a        { font-size: 14px; padding: 10px 20px 0 0; }
}

@media only screen and (max-width: 768px) {
    /* Collapse all custom col_* columns to full width */
    [class*="col_"]        { width: 100%; }

    body                   { padding: 25px; }
    .padding               { padding: 25px; }
    .padding_top           { padding-top: 25px; }
    .padding_bottom        { padding-bottom: 25px; }
    .padding_left          { padding-left: 0; }
    .padding_right         { padding-right: 0; }
    .small_padding         { padding: 15px; }
    .small_padding_top     { padding-top: 15px; }
    .small_padding_right   { padding-right: 15px; }
    .small_padding_bottom  { padding-bottom: 15px; }
    .small_padding_left    { padding-left: 15px; }
    .margin_top            { margin-top: 25px; }
    .margin_bottom         { margin-bottom: 25px; }

    .banner img            { padding-right: 20px; width: 125px; }
    .banner .nav a         { font-size: 12px; padding: 12px 15px 0 0; }

    .side_panel            { padding-top: 50px; }

    .showing               { width: 100%; margin-bottom: 10px; }
    .sort_by               { width: 100%; }
    .showing span          { color: #fff; }
    .search                { margin: 0; padding: 10px; }
    .grid_filters          { background: #474747; padding: 10px; }
    .grid_headings         { display: none; }
    .delivery_area::before { content: "Delivers To: "; }
    .pricegridsupplier     { font-size: calc(1.325rem + .9vw) !important; }

    .footer                { margin: 25px 0 0; padding: 25px 0 0; }
    .footer .col_04        { padding-top: 25px; width: 100%; }

    .product-card {
        flex-direction: column;
    }
    .product-card__image {
        flex: none;
        margin-right: 0;
        margin-bottom: 12px;
    }
}