/* =========================================================
   START : OOKLA PACKAGING SINGLE PRODUCT CSS
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.ookla-single-product-page {
    width: 100%;
    padding: 25px 20px 40px;
    background: #faf8f4;
    box-sizing: border-box;
}

.ookla-product-wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
    padding:0 20px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.ookla-product-breadcrumb {
    width: 100%;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 18px;

    font-family: Montserrat, sans-serif;
    font-size: 12px;
    line-height: 1.5;

    box-sizing: border-box;
}

.ookla-product-breadcrumb a {
    color: #777;
    text-decoration: none;
}

.ookla-product-breadcrumb a:hover {
    color: #c08a43;
}

.breadcrumb-separator {
    color: #aaa;
}

.breadcrumb-current {
    color: #10251d;
    font-weight: 600;
}


/* =========================================================
   MAIN TWO COLUMN LAYOUT
========================================================= */

.ookla-product-top {
    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr) !important;

    gap: 26px;

    align-items: start;

    box-sizing: border-box;
}


/* =========================================================
   IMPORTANT LEFT COLUMN
========================================================= */

.ookla-product-left {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEFT COLUMN CHILDREN
========================================================= */

.ookla-product-left
.ookla-product-gallery,

.ookla-product-left
.ookla-product-benefits,

.ookla-product-left
.ookla-product-extra-cards {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   GALLERY
========================================================= */

.ookla-product-gallery {
    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
        62px minmax(0, 1fr) !important;

    gap: 12px;

    align-items: stretch;

    box-sizing: border-box !important;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.ookla-product-thumbnails {
    width: 62px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 10px;

    max-height: 478px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;

    box-sizing: border-box;
}

.ookla-product-thumbnails::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   THUMBNAIL
========================================================= */

.ookla-product-thumb {
    flex: 0 0 62px !important;

    width: 62px !important;
    height: 62px !important;

    min-width: 62px !important;
    min-height: 62px !important;

    max-width: 62px !important;
    max-height: 62px !important;

    display: block !important;

    margin: 0 !important;
    padding: 2px !important;

    background: #fff !important;

    border: 2px solid transparent !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    cursor: pointer;

    box-sizing: border-box !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.10);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.ookla-product-thumb:hover {
    transform: translateY(-2px);
}

.ookla-product-thumb.active {
    border-color: #c08a43 !important;
}

.ookla-product-thumb img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    object-fit: cover !important;

    border-radius: 5px !important;
}


/* =========================================================
   MAIN IMAGE BOX
========================================================= */

.ookla-product-main-image {
    position: relative;

    width: 100% !important;
    height: 478px !important;

    min-width: 0 !important;

    background: #f6e6cf;

    border-radius: 11px;

    overflow: hidden !important;

    box-sizing: border-box !important;

    isolation: isolate;
}

.ookla-main-image-inner {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.ookla-main-product-img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;

    position: relative;

    z-index: 1;

    opacity: 1;

    transition: opacity .2s ease;
}


/* =========================================================
   NO IMAGE
========================================================= */

.ookla-product-no-image {
    width: 100%;
    height: 478px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f6e6cf;

    border-radius: 11px;

    overflow: hidden;

    box-sizing: border-box;
}

.ookla-product-no-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   GALLERY ARROWS
========================================================= */

.ookla-gallery-arrow {
    position: absolute !important;

    top: 50% !important;

    z-index: 20 !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: #fff !important;

    color: #10251d !important;

    font-family: Arial, sans-serif !important;

    font-size: 25px !important;

    line-height: 1 !important;

    cursor: pointer;

    transform: translateY(-50%) !important;

    box-shadow:
        0 3px 15px rgba(0,0,0,.18);

    box-sizing: border-box !important;

    opacity: 1 !important;

    visibility: visible !important;
}

.ookla-gallery-arrow:hover {
    background: #c08a43 !important;

    color: #fff !important;
}

.ookla-gallery-prev {
    left: 12px !important;
}

.ookla-gallery-next {
    right: 12px !important;
}


/* =========================================================
   BENEFITS BAR
   EXACTLY 4 EQUAL COLUMNS
========================================================= */

.ookla-product-benefits {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 0 !important;

    margin: 13px 0 0 !important;
    padding: 0 !important;

    background: #fff;

    border: 1px solid #eadfce;

    border-radius: 10px;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.ookla-product-benefit {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    height: 64px !important;

    min-height: 64px !important;

    margin: 0 !important;

    padding: 8px 10px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 8px !important;

    border: 0 !important;

    border-right:
        1px solid #eadfce !important;

    box-sizing: border-box !important;

    float: none !important;
}

.ookla-product-benefit:last-child {
    border-right: 0 !important;
}


/* =========================================================
   BENEFIT ICON
========================================================= */

.benefit-icon {
    flex: 0 0 28px !important;

    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #10251d;

    font-size: 17px;

    line-height: 1;

    box-sizing: border-box !important;
}


/* =========================================================
   BENEFIT CONTENT
========================================================= */

.benefit-content {
    width: auto !important;

    min-width: 0 !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.ookla-product-benefit strong {
    display: block;

    margin: 0 0 2px;

    font-family: Montserrat, sans-serif;

    font-size: 9px;

    line-height: 1.3;

    color: #10251d;
}

.ookla-product-benefit span {
    display: block;

    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 7px;

    line-height: 1.3;

    color: #777;
}


/* =========================================================
   PREMIUM + HELP
   EXACT 50% / 50%
========================================================= */

.ookla-product-extra-cards {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 13px !important;

    margin: 13px 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    clear: both !important;
}


/* =========================================================
   PREMIUM QUALITY CARD
========================================================= */

.ookla-quality-card {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 126px;

    margin: 0 !important;

    padding: 20px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 13px !important;

    background: #063b29;

    color: #fff;

    border-radius: 10px;

    box-sizing: border-box !important;

    float: none !important;
}


/* =========================================================
   QUALITY ICON
========================================================= */

.quality-icon {
    flex: 0 0 25px !important;

    width: 25px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #c08a43;

    font-size: 27px;

    line-height: 1;

    box-sizing: border-box;
}


/* =========================================================
   QUALITY CONTENT
========================================================= */

.quality-content {
    width: auto !important;

    min-width: 0 !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.quality-content h3 {
    margin: 0 0 7px;

    font-family: Montserrat, sans-serif;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 700;

    color: #fff;
}

.quality-content p {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 9px;

    line-height: 1.55;

    color: #fff;
}


/* =========================================================
   HELP CARD
========================================================= */

.ookla-help-card {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 126px;

    margin: 0 !important;

    padding: 20px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    background: #f4e7d6;

    color: #10251d;

    border-radius: 10px;

    box-sizing: border-box !important;

    float: none !important;
}

.help-icon {
    margin: 0 0 7px;

    color: #b47e35;

    font-size: 25px;

    line-height: 1;
}

.help-content {
    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.help-content h3 {
    margin: 0 0 7px;

    font-family: Montserrat, sans-serif;

    font-size: 16px;

    line-height: 1.25;

    color: #10251d;
}

.help-content p {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 9px;

    line-height: 1.5;

    color: #555;
}

.help-content a {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    min-width: 100px;

    margin-top: 10px;

    padding: 7px 10px;

    border: 1px solid #c08a43;

    border-radius: 6px;

    color: #10251d;

    text-decoration: none;

    font-family: Montserrat, sans-serif;

    font-size: 9px;

    font-weight: 600;

    box-sizing: border-box;
}

.help-content a:hover {
    background: #c08a43;

    color: #fff;
}


/* =========================================================
   RIGHT PRODUCT INFORMATION
========================================================= */

.ookla-product-information {
    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.ookla-product-title {
    margin: 0 0 14px;

    font-family: Montserrat, sans-serif;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.18;

    color: #10251d;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

.ookla-product-short-description {
    margin: 0 0 14px;

    font-family: Montserrat, sans-serif;

    font-size: 11px;

    line-height: 1.7;

    color: #555;
}

.ookla-product-short-description p {
    margin: 0 0 8px;
}


/* =========================================================
   SKU
========================================================= */

.ookla-product-sku {
    margin: 0 0 14px;

    font-family: Montserrat, sans-serif;

    font-size: 10px;

    color: #777;
}

.ookla-product-sku strong {
    color: #10251d;
}


/* =========================================================
   QUOTE BOX
========================================================= */

.ookla-product-quote-box {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 16px !important;

    background: #fff;

    border: 1px solid #e9e0d6;

    border-radius: 11px;

    box-shadow:
        0 6px 22px rgba(16,37,29,.07);

    box-sizing: border-box !important;
}


/* =========================================================
   QUOTE HEADER
========================================================= */

.ookla-quote-header {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 13px;

    box-sizing: border-box;
}

.ookla-quote-number {
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #10251d;

    color: #fff;

    font-family: Montserrat, sans-serif;

    font-size: 10px;

    font-weight: 700;
}

.ookla-quote-header h2 {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;

    color: #10251d;
}


/* =========================================================
   GRAVITY FORM
========================================================= */

.ookla-quote-form {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.ookla-quote-form .gform_wrapper {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.ookla-quote-form .gform_heading {
    display: none !important;
}

.ookla-quote-form .gform_body {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   GRAVITY GRID
========================================================= */

.ookla-quote-form .gform_fields {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(12, minmax(0, 1fr)) !important;

    column-gap: 10px !important;

    row-gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RESET GRAVITY FIELD
========================================================= */

.ookla-quote-form .gfield {
    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    float: none !important;
}


/* =========================================================
   FIELD WIDTHS
========================================================= */

.ookla-quote-form
.gfield--width-quarter {
    grid-column: span 3 !important;
}

.ookla-quote-form
.gfield--width-third {
    grid-column: span 4 !important;
}

.ookla-quote-form
.gfield--width-half {
    grid-column: span 6 !important;
}

.ookla-quote-form
.gfield--width-two-thirds {
    grid-column: span 8 !important;
}

.ookla-quote-form
.gfield--width-three-quarters {
    grid-column: span 9 !important;
}

.ookla-quote-form
.gfield--width-full {
    grid-column: span 12 !important;
}


/* =========================================================
   LABEL
========================================================= */

.ookla-quote-form .gfield_label {
    display: block !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    color: #10251d !important;
}


/* =========================================================
   INPUT
========================================================= */

.ookla-quote-form input[type="text"],
.ookla-quote-form input[type="email"],
.ookla-quote-form input[type="tel"],
.ookla-quote-form input[type="number"],
.ookla-quote-form input[type="url"],
.ookla-quote-form select {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 37px !important;

    min-height: 37px !important;

    margin: 0 !important;

    padding: 0 12px !important;

    border: 1px solid #d9b688 !important;

    border-radius: 7px !important;

    background: #fff !important;

    color: #333 !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 10px !important;

    line-height: normal !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.ookla-quote-form textarea {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 127px !important;

    min-height: 127px !important;

    margin: 0 !important;

    padding: 12px !important;

    border: 1px solid #d9b688 !important;

    border-radius: 7px !important;

    background: #fff !important;

    color: #333 !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 10px !important;

    line-height: 1.5 !important;

    resize: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FOCUS
========================================================= */

.ookla-quote-form input:focus,
.ookla-quote-form select:focus,
.ookla-quote-form textarea:focus {
    border-color: #c08a43 !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   RADIO
========================================================= */

.ookla-quote-form .gfield_radio,
.ookla-quote-form .gfield_checkbox {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.ookla-quote-form .gchoice {
    width: auto !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.ookla-quote-form
.gchoice
.gfield-choice-input {
    width: 15px !important;
    height: 15px !important;

    min-width: 15px !important;
    min-height: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: #c08a43;
}

.ookla-quote-form
.gchoice
label {
    margin: 0 !important;
    padding: 0 !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 9px !important;

    line-height: 15px !important;

    color: #333 !important;
}


/* =========================================================
   RADIO FIELD FULL WIDTH
========================================================= */

.ookla-quote-form
.gfield:has(.gfield_radio) {
    grid-column: span 12 !important;
}


/* =========================================================
   UPLOAD
========================================================= */

.ookla-quote-form
.gfield--type-fileupload {
    grid-column: span 6 !important;

    min-width: 0 !important;
}

.ookla-quote-form
.ginput_container_fileupload {
    width: 100% !important;

    min-height: 127px !important;

    border: 1px dashed #c08a43 !important;

    border-radius: 10px !important;

    padding: 10px 20px !important;

    background: #fffaf3 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}

.ookla-quote-form
.gform_drop_area {
    min-height: 100px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    border: 0 !important;

    background: transparent !important;

    padding: 0 !important;
}

.ookla-quote-form
.gform_drop_instructions {
    font-family: Montserrat, sans-serif !important;

    font-size: 11px !important;

    line-height: 1.5 !important;

    color: #555 !important;
}

.ookla-quote-form
.gform_fileupload_rules {
    font-family: Montserrat, sans-serif !important;

    font-size: 8px !important;

    color: #777 !important;
}


/* =========================================================
   UPLOAD BUTTON
========================================================= */

.ookla-quote-form
.gform_button_select_files {
    display: inline-block !important;

    margin-top: 8px !important;

    padding: 9px 20px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background: #10251d !important;

    color: #fff !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    cursor: pointer !important;
}

.ookla-quote-form
.gform_button_select_files:hover {
    background: #c08a43 !important;
}


/* =========================================================
   HIDE UPLOAD RULE
========================================================= */

#gfield_upload_rules_1_18 {
    display: none !important;
}


/* =========================================================
   SUBMIT
========================================================= */

.ookla-quote-form
.gform_footer,
.ookla-quote-form
.gform_page_footer {
    width: 100% !important;

    margin: 12px 0 0 !important;

    padding: 0 !important;
}

.ookla-quote-form
.gform_button {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 43px !important;

    min-height: 43px !important;

    margin: 0 !important;

    padding: 0 25px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background: #10251d !important;

    color: #fff !important;

    font-family: Montserrat, sans-serif !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}

.ookla-quote-form
.gform_button:hover {
    background: #c08a43 !important;
}


/* =========================================================
   FOAM NOTE
========================================================= */

.ookla-foam-note {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 12px 0 0 !important;

    padding: 10px 12px !important;

    background: #f4e7d6;

    border: 1px solid #ead5b7;

    border-radius: 8px;

    box-sizing: border-box !important;
}

.ookla-foam-icon {
    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 50%;

    background: #fff;

    color: #c08a43;

    font-size: 14px;
}

.ookla-foam-content {
    min-width: 0 !important;

    flex: 1 1 auto !important;
}

.ookla-foam-content strong {
    display: block;

    margin: 0 0 2px;

    font-family: Montserrat, sans-serif;

    font-size: 10px;

    color: #10251d;
}

.ookla-foam-content span {
    display: block;

    font-family: Montserrat, sans-serif;

    font-size: 8px;

    line-height: 1.4;

    color: #666;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .ookla-product-top {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 20px;
    }

    .ookla-product-main-image {
        height: 430px !important;
    }

    .ookla-product-thumbnails {
        max-height: 430px;
    }

    .ookla-product-title {
        font-size: 29px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .ookla-product-top {
        grid-template-columns: 1fr !important;
    }

    .ookla-product-main-image {
        height: 500px !important;
    }

    .ookla-product-thumbnails {
        max-height: 500px;
    }

    .ookla-product-title {
        font-size: 31px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ookla-single-product-page {
        padding: 18px 14px 55px;
    }


    /* BREADCRUMB */

    .ookla-product-breadcrumb {
        margin-bottom: 15px;

        font-size: 10px;
    }


    /* GALLERY */

    .ookla-product-gallery {
        grid-template-columns:
            52px minmax(0, 1fr) !important;

        gap: 8px;
    }

    .ookla-product-main-image {
        height: 360px !important;
    }

    .ookla-product-thumbnails {
        width: 52px !important;

        max-height: 360px;

        gap: 7px;
    }

    .ookla-product-thumb {
        flex: 0 0 50px !important;

        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;

        max-width: 50px !important;
        max-height: 50px !important;
    }


    /* BENEFITS 2 + 2 */

    .ookla-product-benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .ookla-product-benefit {
        height: 62px !important;

        min-height: 62px !important;

        border-right:
            1px solid #eadfce !important;

        border-bottom:
            1px solid #eadfce !important;
    }

    .ookla-product-benefit:nth-child(2n) {
        border-right: 0 !important;
    }

    .ookla-product-benefit:nth-last-child(-n+2) {
        border-bottom: 0 !important;
    }


    /* EXTRA CARDS */

    .ookla-product-extra-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }


    /* FORM */

    .ookla-quote-form
    .gform_fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 8px !important;
    }

    .ookla-quote-form
    .gfield--width-quarter,
    .ookla-quote-form
    .gfield--width-third,
    .ookla-quote-form
    .gfield--width-half {
        grid-column: span 1 !important;
    }

    .ookla-quote-form
    .gfield--type-fileupload {
        grid-column: span 1 !important;
    }

    .ookla-quote-form
    .gfield:has(.gfield_radio) {
        grid-column: span 2 !important;
    }

    .ookla-quote-form
    .gsection {
        grid-column: span 2 !important;
    }

    .ookla-product-title {
        font-size: 27px;
    }

    .ookla-product-short-description {
        font-size: 10px;
    }

    .ookla-product-quote-box {
        padding: 13px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .ookla-product-gallery {
        grid-template-columns:
            48px minmax(0, 1fr) !important;

        gap: 7px;
    }

    .ookla-product-main-image {
        height: 310px !important;
    }

    .ookla-product-thumbnails {
        width: 48px !important;

        max-height: 310px;
    }

    .ookla-product-thumb {
        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        max-width: 46px !important;
        max-height: 46px !important;
    }


    /* BENEFITS */

    .ookla-product-benefits {
        grid-template-columns: 1fr !important;
    }

    .ookla-product-benefit {
        border-right: 0 !important;

        border-bottom:
            1px solid #eadfce !important;
    }

    .ookla-product-benefit:last-child {
        border-bottom: 0 !important;
    }


    /* CARDS */

    .ookla-product-extra-cards {
        grid-template-columns: 1fr !important;
    }


    /* FORM */

    .ookla-quote-form
    .gform_fields {
        grid-template-columns: 1fr !important;
    }

    .ookla-quote-form
    .gfield,
    .ookla-quote-form
    .gfield--width-quarter,
    .ookla-quote-form
    .gfield--width-third,
    .ookla-quote-form
    .gfield--width-half,
    .ookla-quote-form
    .gfield--type-fileupload {
        grid-column: span 1 !important;
    }

    .ookla-quote-form
    .gfield:has(.gfield_radio) {
        grid-column: span 1 !important;
    }

    .ookla-product-title {
        font-size: 24px;
    }

    .ookla-quote-header h2 {
        font-size: 14px;
    }

}


/* =========================================================
   END : OOKLA PACKAGING SINGLE PRODUCT CSS
========================================================= */

/* =========================================================
   START : PRODUCT TRUST FEATURES
========================================================= */

.ookla-trust-features {
    width: 100%;
    background: #063b29;
    margin: 0 0;
    padding: 0;
    box-sizing: border-box;
}

.ookla-trust-features-inner {
    width: 100%;
    max-width: 1240px;
    min-height: 108px;
    margin: 0 auto;
    padding: 20px 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   TRUST ITEM
========================================================= */

.ookla-trust-item {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 8px 28px;

    box-sizing: border-box;
}


/* =========================================================
   ICON
========================================================= */

.ookla-trust-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.ookla-trust-icon svg {
    display: block;

    width: 46px;
    height: 46px;

    fill: none;

    stroke: #d9ad68;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    box-sizing: border-box;
}


/* =========================================================
   CONTENT
========================================================= */

.ookla-trust-content {
    min-width: 0;
    flex: 1 1 auto;
}

.ookla-trust-content h3 {
    margin: 0 0 4px;

    font-family: Montserrat, sans-serif;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.25;

    color: #ffffff;
}

.ookla-trust-content p {
    margin: 0;

    font-family: Montserrat, sans-serif;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.45;

    color: #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .ookla-trust-features-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        padding: 20px 15px;
    }

    .ookla-trust-item {
        padding: 12px 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ookla-trust-features {
        margin-top: 25px;
    }

    .ookla-trust-features-inner {
        grid-template-columns: 1fr;

        padding: 10px 15px;
    }

    .ookla-trust-item {
        padding: 13px 10px;

        gap: 12px;
    }

    .ookla-trust-icon {
        flex-basis: 43px;

        width: 43px;
        height: 43px;
    }

    .ookla-trust-icon svg {
        width: 41px;
        height: 41px;
    }

    .ookla-trust-content h3 {
        font-size: 15px;
    }

    .ookla-trust-content p {
        font-size: 10px;
    }

}


/* =========================================================
   END : PRODUCT TRUST FEATURES
========================================================= */

/* =========================================================
   START : Single Product Long Content Section
========================================================= */

.ookla-product-content-section{

    position:relative;

    width:100%;

    background:#ffffff;

    overflow:hidden;

}


/* =========================================================
   START : Content Inner
========================================================= */

.ookla-product-content-inner{

    position:relative;

    width:100%;

    max-width:1240px;

    height:100%;

    margin:0 auto;

    padding:40px 30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    box-sizing:border-box;

}


/* =========================================================
   START : Section Label
========================================================= */

.ookla-product-content-label{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    flex-shrink:0;

}


.ookla-product-content-label span{

    display:block;

    width:32px;

    height:1px;

    background:#c08a43;

}


.ookla-product-content-label strong{

    font-family:Montserrat,sans-serif;

    font-size:11px;

    line-height:1;

    font-weight:600;

    letter-spacing:4px;

    color:#c08a43;

    text-transform:uppercase;

}


/* =========================================================
   START : PRODUCT CONTENT / INTERNAL SCROLL
========================================================= */

.ookla-product-content{

    position:relative;

    width:100%;

    max-width:1240px;

    height:590px;

    margin:0 auto;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:20px;

    box-sizing:border-box;

    scroll-behavior:smooth;

}


/* =========================================================
   START : CUSTOM SCROLLBAR
========================================================= */

.ookla-product-content::-webkit-scrollbar{

    width:5px;

}


.ookla-product-content::-webkit-scrollbar-track{

    background:#f1ede7;

    border-radius:10px;

}


.ookla-product-content::-webkit-scrollbar-thumb{

    background:#c08a43;

    border-radius:10px;

}


/* Firefox */

.ookla-product-content{

    scrollbar-width:thin;

    scrollbar-color:#c08a43 #f1ede7;

}


/* =========================================================
   START : H1
========================================================= */

.ookla-product-content h1{

    margin:0 0 30px;

    font-family:Montserrat,sans-serif;

    font-size:48px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    color:#10251d;

}


/* =========================================================
   START : H2
========================================================= */

.ookla-product-content h2{

    position:relative;

    margin:30px 0 22px;

    padding-left:20px;

    font-family:Montserrat,sans-serif;

    font-size:30px;

    line-height:1.3;

    font-weight:700;

    color:#10251d;

}


.ookla-product-content h2::before{

    content:"";

    position:absolute;

    left:0;

    top:4px;

    width:4px;

    height:30px;

    border-radius:10px;

    background:#c08a43;

}


/* =========================================================
   START : H3
========================================================= */

.ookla-product-content h3{

    margin:38px 0 14px;

    font-family:Montserrat,sans-serif;

    font-size:21px;

    line-height:1.4;

    font-weight:700;

    color:#10251d;

}


/* =========================================================
   START : PARAGRAPH
========================================================= */

.ookla-product-content p{

    margin:0 0 22px;

    font-family:Montserrat,sans-serif;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

    color:#555555;

}


.ookla-product-content > p:first-of-type{

    font-size:18px;

    line-height:1.85;

    color:#343a35;

}


/* =========================================================
   START : STRONG
========================================================= */

.ookla-product-content strong{

    font-weight:700;

    color:#10251d;

}


/* =========================================================
   START : UNORDERED LIST
========================================================= */

.ookla-product-content ul{

    margin:25px 0 30px;

    padding:0;

    list-style:none;

}


.ookla-product-content ul li{

    position:relative;

    margin-bottom:13px;

    padding-left:27px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    line-height:1.7;

    color:#555b56;

}


.ookla-product-content ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#c08a43;

}


/* =========================================================
   START : ORDERED LIST
========================================================= */

.ookla-product-content ol{

    margin:25px 0 30px;

    padding-left:25px;

}


.ookla-product-content ol li{

    margin-bottom:12px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    line-height:1.7;

    color:#555b56;

}


/* =========================================================
   START : BLOCKQUOTE
========================================================= */

.ookla-product-content blockquote{

    margin:40px 0;

    padding:28px 32px;

    border-left:3px solid #c08a43;

    border-radius:0 12px 12px 0;

    background:#faf5ed;

}


.ookla-product-content blockquote p{

    margin:0;

    font-size:18px;

    line-height:1.7;

    font-weight:500;

    color:#10251d;

}


/* =========================================================
   START : LINKS
========================================================= */

.ookla-product-content a{

    color:#126b59;

    font-weight:600;

    text-decoration:none;

}


.ookla-product-content a:hover{

    color:#c08a43;

}


/* =========================================================
   START : HR
========================================================= */

.ookla-product-content hr{

    width:100%;

    height:1px;

    margin:45px 0;

    border:0;

    background:#e8e2da;

}


/* =========================================================
   START : BOTTOM DECORATION
========================================================= */

.ookla-product-content-bottom{

    display:flex;

    justify-content:center;

    margin-top:25px;

    flex-shrink:0;

}


.ookla-product-content-bottom span{

    display:block;

    width:70px;

    height:1px;

    background:#c08a43;

}





/* =========================================================
   START : TABLET
========================================================= */

@media(max-width:991px){

    .ookla-product-content-inner{

        padding:60px 30px;

    }


    .ookla-product-content{

        height:500px;

    }


    .ookla-product-content h1{

        font-size:42px;

    }


    .ookla-product-content h2{

        font-size:28px;

        margin-top:48px;

    }


    .ookla-product-content p{

        font-size:16px;

        line-height:1.85;

    }

}


/* =========================================================
   START : MOBILE
========================================================= */

@media(max-width:600px){

    .ookla-product-content-inner{

        padding:50px 22px;

        justify-content:flex-start;

    }


    .ookla-product-content-label{

        justify-content:center;

        margin-bottom:25px;

    }


    .ookla-product-content-label strong{

        font-size:9px;

        letter-spacing:3px;

    }


    .ookla-product-content-label span{

        width:22px;

    }


    .ookla-product-content{

        height:510px;

        max-width:none;

        padding-right:12px;

    }


    .ookla-product-content h1{

        font-size:32px;

        line-height:1.18;

        letter-spacing:-.5px;

    }


    .ookla-product-content h2{

        margin-top:45px;

        margin-bottom:18px;

        padding-left:16px;

        font-size:24px;

    }


    .ookla-product-content h2::before{

        width:3px;

        height:25px;

    }


    .ookla-product-content h3{

        margin-top:30px;

        font-size:19px;

    }


    .ookla-product-content p{

        font-size:14px;

        line-height:1.85;

        margin-bottom:18px;

    }


    .ookla-product-content > p:first-of-type{

        font-size:15px;

    }


    .ookla-product-content ul{

        margin:20px 0 25px;

    }


    .ookla-product-content ul li{

        font-size:14px;

        padding-left:24px;

    }


    .ookla-product-content ol li{

        font-size:14px;

    }


    .ookla-product-content blockquote{

        margin:30px 0;

        padding:22px 20px;

    }


    .ookla-product-content blockquote p{

        font-size:15px;

    }


    .ookla-product-content-bottom{

        margin-top:25px;

    }


    .ookla-product-content-inner::after{

        bottom:50px;

    }

}


/* =========================================================
   START : REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .ookla-product-content{

        scroll-behavior:auto;

    }

}


/* =========================================================
   END : Single Product Long Content Section
========================================================= */
/* =========================================================
   START : OOKLA PACKAGING PROCESS SECTION
========================================================= */

.ookla-process-section{

    width:100%;

    background:#d9bd98;

    padding:55px 0;

    overflow:hidden;

    box-sizing:border-box;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.ookla-process-container{

    width:100%;

    max-width:1240px;

    margin:0 auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:200px minmax(0,1fr);

    gap:28px;

    box-sizing:border-box;

}


/* =========================================================
   LEFT TABS
========================================================= */

.ookla-process-tabs{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* =========================================================
   TAB BUTTON
========================================================= */

.ookla-process-tab{

    position:relative;

    width:100%;

    min-height:62px;

    padding:14px 18px;

    border:0;

    border-radius:14px;

    background:rgba(91,78,55,.28);

    color:#18382d;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    font-family:Montserrat,sans-serif;

    font-size:14px;

    line-height:1.3;

    font-weight:600;

    text-align:left;

    cursor:pointer;

    outline:none;

    box-sizing:border-box;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease,

        box-shadow .3s ease;

}


/* TAB HOVER */

.ookla-process-tab:hover{

    background:rgba(11,51,37,.45);

    color:#ffffff;

    transform:translateX(3px);

}


/* ACTIVE TAB */

.ookla-process-tab.active{

    background:#0b3325;

    color:#ffffff;

    box-shadow:

        0 8px 22px rgba(11,51,37,.18);

}


/* ACTIVE LEFT INDICATOR */

.ookla-process-tab.active::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    bottom:12px;

    width:4px;

    border-radius:0 5px 5px 0;

    background:#c08a43;

}


/* =========================================================
   RIGHT CONTENT AREA
========================================================= */

.ookla-process-content{

    min-width:0;

    width:100%;

    background:#fffaf4;

    border-radius:22px;

    padding:38px;

    box-sizing:border-box;

    box-shadow:

        0 12px 40px rgba(55,42,25,.09);

}


/* =========================================================
   PANELS
========================================================= */

.ookla-process-panel{

    display:none !important;

    width:100%;

    min-width:0;

}


.ookla-process-panel.active{

    display:block !important;

}


/* =========================================================
   PROCESS GRID
========================================================= */

.ookla-process-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(6,minmax(0,1fr));

    gap:18px;

    box-sizing:border-box;

}


/* =========================================================
   CARD POSITIONING

   3 CARDS TOP
   2 CARDS BOTTOM CENTERED
========================================================= */

.ookla-process-card:nth-child(1){

    grid-column:1 / span 2;

}


.ookla-process-card:nth-child(2){

    grid-column:3 / span 2;

}


.ookla-process-card:nth-child(3){

    grid-column:5 / span 2;

}


.ookla-process-card:nth-child(4){

    grid-column:2 / span 2;

}


.ookla-process-card:nth-child(5){

    grid-column:4 / span 2;

}


/* =========================================================
   CARD
========================================================= */

.ookla-process-card{

    min-width:0;

    width:100%;

    background:#ffffff;

    border:1px solid #eee4d7;

    border-radius:13px;

    overflow:hidden;

    box-sizing:border-box;

    box-shadow:

        0 5px 18px rgba(50,40,25,.08);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.ookla-process-card:hover{

    transform:translateY(-5px);

    box-shadow:

        0 12px 30px rgba(50,40,25,.14);

}


/* =========================================================
   CARD IMAGE
========================================================= */

.ookla-process-image{

    position:relative;

    width:100%;

    height:190px;

    background:#faf7f1;

    overflow:hidden;

}


.ookla-process-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .45s ease;

}


.ookla-process-card:hover
.ookla-process-image img{

    transform:scale(1.04);

}


/* =========================================================
   CARD TITLE
========================================================= */

.ookla-process-card h3{

    margin:0;

    padding:17px 16px 6px;

    font-family:Montserrat,sans-serif;

    font-size:14px;

    line-height:1.35;

    font-weight:700;

    text-align:center;

    color:#103d31;

}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.ookla-process-card p{

    margin:0;

    padding:0 17px 19px;

    font-family:Montserrat,sans-serif;

    font-size:12px;

    line-height:1.6;

    font-weight:400;

    text-align:center;

    color:#666b66;

}


/* =========================================================
   EMPTY IMAGE PLACEHOLDER
========================================================= */

.ookla-process-image img[src=""],
.ookla-process-image img:not([src]){

    display:none;

}


/* =========================================================
   TAB CONTENT ANIMATION
========================================================= */

.ookla-process-panel.active{

    animation:ooklaProcessPanelFade .35s ease;

}


@keyframes ooklaProcessPanelFade{

    0%{

        opacity:0;

        transform:translateY(8px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .ookla-process-container{

        grid-template-columns:180px minmax(0,1fr);

        gap:22px;

        padding:0 18px;

    }


    .ookla-process-content{

        padding:28px;

    }


    .ookla-process-grid{

        gap:15px;

    }


    .ookla-process-image{

        height:165px;

    }


    .ookla-process-card h3{

        font-size:13px;

    }


    .ookla-process-card p{

        font-size:11px;

    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media(max-width:850px){

    .ookla-process-section{

        padding:40px 0;

    }


    .ookla-process-container{

        grid-template-columns:1fr;

        gap:20px;

    }


    /* Tabs become horizontal grid */

    .ookla-process-tabs{

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:10px;

    }


    .ookla-process-tab{

        min-height:54px;

        justify-content:center;

        text-align:center;

        border-radius:11px;

        padding:10px;

    }


    .ookla-process-tab:hover{

        transform:none;

    }


    .ookla-process-tab.active::before{

        left:12px;

        right:12px;

        top:auto;

        bottom:0;

        width:auto;

        height:3px;

        border-radius:5px 5px 0 0;

    }


    .ookla-process-content{

        border-radius:18px;

        padding:25px;

    }


    .ookla-process-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:15px;

    }


    /* Reset desktop card positioning */

    .ookla-process-card:nth-child(1),
    .ookla-process-card:nth-child(2),
    .ookla-process-card:nth-child(3),
    .ookla-process-card:nth-child(4),
    .ookla-process-card:nth-child(5){

        grid-column:auto;

    }


    .ookla-process-image{

        height:190px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .ookla-process-section{

        padding:28px 0;

    }


    .ookla-process-container{

        padding:0 14px;

        gap:15px;

    }


    /* 2 COLUMN TABS */

    .ookla-process-tabs{

        grid-template-columns:repeat(2,1fr);

        gap:9px;

    }


    .ookla-process-tab{

        min-height:50px;

        padding:9px 8px;

        font-size:11px;

        border-radius:10px;

    }


    .ookla-process-content{

        padding:18px;

        border-radius:15px;

    }


    /* SINGLE COLUMN CARDS */

    .ookla-process-grid{

        grid-template-columns:1fr;

        gap:14px;

    }


    .ookla-process-image{

        height:210px;

    }


    .ookla-process-card h3{

        padding:15px 14px 5px;

        font-size:13px;

    }


    .ookla-process-card p{

        padding:0 15px 17px;

        font-size:11px;

        line-height:1.6;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .ookla-process-container{

        padding:0 11px;

    }


    .ookla-process-tabs{

        gap:7px;

    }


    .ookla-process-tab{

        min-height:47px;

        font-size:10px;

    }


    .ookla-process-content{

        padding:14px;

    }


    .ookla-process-image{

        height:190px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .ookla-process-panel.active{

        animation:none;

    }


    .ookla-process-card,
    .ookla-process-card:hover,
    .ookla-process-image img,
    .ookla-process-tab{

        transition:none;

        transform:none;

    }

}


/* =========================================================
   END : OOKLA PACKAGING PROCESS SECTION
========================================================= */
/* =========================================================
   START : RELATED PRODUCTS SECTION
========================================================= */

.product-related-section{

    width:100%;

    padding:40px 0 70px;

    box-sizing:border-box;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.product-related-section .section-heading{

    text-align:center;

    margin-bottom:55px;

}


.product-related-section .divider{

    width:190px;

    margin:0 auto 20px;

}


.product-related-section .divider img{

    width:100%;

    height:auto;

    display:block;

}


.product-related-section .section-heading span{

    display:block;

    font-family:Montserrat,sans-serif;

    font-size:16px;

    line-height:1.4;

    font-weight:700;

    color:#D7A869;

    margin-bottom:8px;

}


.product-related-section .section-heading h2{

    margin:0;

    font-family:Montserrat,sans-serif;

    font-size:32px;

    line-height:1.3;

    font-weight:600;

    color:#111710;

}


.product-related-section .section-heading h2 strong{

    color:#305544;

    font-weight:700;

    text-decoration:underline;

    text-decoration-thickness:2px;

    text-underline-offset:8px;

}



/* =========================================================
   RELATED PRODUCTS GRID
========================================================= */

.product-related-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:24px;

    width:100%;

}



/* =========================================================
   RELATED PRODUCT CARD
========================================================= */

.related-product-card{

    width:100%;

    min-width:0;

    box-sizing:border-box;

    background:#f8f0e7;

    border:1px solid #e4d7c8;

    border-radius:18px;

    padding:18px 18px 22px;

    text-align:left;

    overflow:hidden;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease,

        background .3s ease;

}


.related-product-card:hover{

    transform:translateY(-6px);

    background:#ffffff;

    border-color:#d3a15e;

    box-shadow:
        0 14px 30px rgba(0,0,0,.09);

}



/* =========================================================
   PRODUCT IMAGE LINK
========================================================= */

.related-product-image-link{

    display:block;

    width:100%;

    color:inherit;

    text-decoration:none;

}


.related-product-image-link:hover{

    color:inherit;

    text-decoration:none;

}



/* =========================================================
   PRODUCT IMAGE
========================================================= */

.related-product-image{

    width:100%;

    height:210px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 0 18px;

    padding:0;

    overflow:hidden;

    background:transparent;

    box-sizing:border-box;

}


.related-product-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    transition:
        transform .35s ease;

}



/* =========================================================
   IMAGE HOVER
========================================================= */

.related-product-card:hover
.related-product-image img{

    transform:scale(1.045);

}



/* =========================================================
   NO IMAGE
========================================================= */

.related-product-no-image{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f1e7dc;

    border-radius:10px;

    color:#888;

    font-family:Montserrat,sans-serif;

    font-size:13px;

}



/* =========================================================
   PRODUCT CONTENT
========================================================= */

.related-product-content{

    width:100%;

    box-sizing:border-box;

}



/* =========================================================
   PRODUCT TITLE
========================================================= */

.related-product-content h3{

    margin:0 0 17px;

    padding:0;

    font-family:Montserrat,sans-serif;

    font-size:20px;

    line-height:1.4;

    font-weight:700;

    color:#111710;

}


.related-product-content h3 a{

    color:#111710;

    text-decoration:none;

    transition:
        color .25s ease;

}


.related-product-content h3 a:hover{

    color:#006b61;

    text-decoration:none;

}



/* =========================================================
   GET A QUOTE BUTTON
========================================================= */

.related-product-quote-btn{
    width:100%;

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    min-width:145px;

    height:43px;

    padding:0 6px 0 18px;

    box-sizing:border-box;

    border-radius:50px;

    background:#12382a;

    color:#ffffff !important;

    font-family:Montserrat,sans-serif;

    font-size:13px;

    line-height:1;

    font-weight:600;

    text-decoration:none !important;

    overflow:hidden;

    transition:

        background .3s ease,

        transform .3s ease,

        box-shadow .3s ease;

}


.related-product-quote-btn:hover{

    background:#102f24;

    color:#ffffff !important;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(18,56,42,.18);

}



/* =========================================================
   QUOTE TEXT
========================================================= */

.related-product-quote-text{

    display:flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

}



/* =========================================================
   GOLD ARROW CIRCLE
========================================================= */

.related-product-quote-arrow{

    width:34px;

    height:34px;

    min-width:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#C08A43;

    color:#ffffff;

    font-family:Arial,sans-serif;

    font-size:19px;

    line-height:1;

    font-weight:400;

    transition:

        transform .3s ease,

        background .3s ease;

}


.related-product-quote-btn:hover
.related-product-quote-arrow{

    transform:translateX(2px);

    background:#D3A15E;

}



/* =========================================================
   REMOVE OLD DESCRIPTION
========================================================= */

.related-product-card p{

    display:none !important;

}



/* =========================================================
   REMOVE OLD VIEW ALL BUTTON
========================================================= */

.product-related-section .view-all-btn{

    display:none;

}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .product-related-section{

        padding:50px 0 70px;

    }


    .product-related-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:20px;

    }


    .related-product-card{

        padding:18px 18px 22px;

    }


    .related-product-image{

        height:220px;

    }


    .product-related-section .section-heading h2{

        font-size:29px;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .product-related-section{

        padding:50px 0 60px;

    }


    .product-related-section .section-heading{

        margin-bottom:40px;

    }


    .product-related-section .divider{

        width:160px;

        margin-bottom:17px;

    }


    .product-related-section .section-heading span{

        font-size:14px;

    }


    .product-related-section .section-heading h2{

        font-size:26px;

        line-height:1.3;

    }


    .product-related-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


    .related-product-card{

        padding:18px 18px 22px;

        border-radius:17px;

    }


    .related-product-image{

        height:250px;

        margin-bottom:18px;

    }


    .related-product-content h3{

        font-size:16px;

        margin-bottom:16px;

    }


    .related-product-quote-btn{

        min-width:150px;

        height:44px;

        font-size:13px;

        padding-left:18px;

        padding-right:6px;

    }


    .related-product-quote-arrow{

        width:35px;

        height:35px;

        min-width:35px;

    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .product-related-section{

        padding:45px 0 55px;

    }


    .product-related-section .section-heading h2{

        font-size:23px;

    }


    .product-related-section .divider{

        width:140px;

    }


    .related-product-card{

        padding:16px 16px 20px;

    }


    .related-product-image{

        height:220px;

    }


    .related-product-content h3{

        font-size:15px;

    }


    .related-product-quote-btn{

        min-width:145px;

    }

}



/* =========================================================
   END : RELATED PRODUCTS SECTION
========================================================= */