/* Start custom CSS *//* =========================================================
   GABRIC - ID CARD PRODUCT FORM
   Product: 2136
   Gravity Form: 4
   Scoped to #gform_4 so other forms are not affected
   ========================================================= */


/* ---------- Main form ---------- */

#gform_4 {
    direction: rtl !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ---------- Gravity Forms wrapper ---------- */

#gform_4 #gform_wrapper_4,
#gform_4 .gform_variation_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* =========================================================
   FORM GRID
   Desktop = 2 columns
   Mobile = 1 column
   ========================================================= */

#gform_4 #gform_fields_4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}


/* Reset old Gravity Forms float system */

#gform_4 #gform_fields_4 > .gfield {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* Old GF half-width fields */

#gform_4 #gform_fields_4 > .gf_left_half,
#gform_4 #gform_fields_4 > .gf_right_half {
    grid-column: span 1 !important;
    width: 100% !important;
}


/* Fields that should use full row */

#gform_4 #field_4_4,
#gform_4 #field_4_23,
#gform_4 #field_4_25,
#gform_4 #field_4_26,
#gform_4 #field_4_10,
#gform_4 #field_4_11,
#gform_4 #field_4_24,
#gform_4 .gfield--type-fileupload,
#gform_4 .gfield--type-total {
    grid-column: 1 / -1 !important;
}


/* =========================================================
   LABELS
   ========================================================= */

#gform_4 .gfield_label,
#gform_4 .gform-field-label:not(.gform-field-label--type-inline) {
    display: block !important;
    width: 100% !important;
    margin: 0 0 9px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;

    color: #1f2937 !important;
    text-align: right !important;
}


/* Required star */

#gform_4 .gfield_required,
#gform_4 .gfield_required_asterisk {
    color: #e53935 !important;
    margin-right: 3px !important;
}


/* =========================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================= */

#gform_4 input[type="text"],
#gform_4 input[type="tel"],
#gform_4 input[type="email"],
#gform_4 input[type="number"],
#gform_4 input[type="password"],
#gform_4 input[type="url"],
#gform_4 select,
#gform_4 textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    border: 1px solid #d7dde5 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #1f2937 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    outline: none !important;

    box-shadow: none !important;
    box-sizing: border-box !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease !important;
}


#gform_4 textarea {
    min-height: 120px !important;
    height: auto !important;
    resize: vertical !important;
}


/* Focus */

#gform_4 input[type="text"]:focus,
#gform_4 input[type="tel"]:focus,
#gform_4 input[type="email"]:focus,
#gform_4 input[type="number"]:focus,
#gform_4 input[type="password"]:focus,
#gform_4 input[type="url"]:focus,
#gform_4 select:focus,
#gform_4 textarea:focus {
    border-color: #0f7c73 !important;
    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(15, 124, 115, .12) !important;
}


/* Placeholder */

#gform_4 input::placeholder,
#gform_4 textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}


/* =========================================================
   SELECT
   ========================================================= */

#gform_4 select {
    appearance: auto !important;
    -webkit-appearance: auto !important;

    cursor: pointer !important;

    padding-left: 35px !important;
    padding-right: 14px !important;
}


/* =========================================================
   RADIO + CHECKBOX
   ========================================================= */

#gform_4 .gfield_radio,
#gform_4 .gfield_checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    width: 100% !important;

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

    list-style: none !important;
}


#gform_4 .gfield_radio > li,
#gform_4 .gfield_checkbox > li,
#gform_4 .gchoice {
    display: flex !important;
    align-items: center !important;

    flex: 1 1 180px !important;

    min-height: 46px !important;

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

    border: 1px solid #e0e5eb !important;
    border-radius: 10px !important;

    background: #f8fafb !important;

    box-sizing: border-box !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}


#gform_4 .gchoice:hover {
    border-color: #9ccbc6 !important;
    background: #f2fbfa !important;
}


/* Radio / Checkbox controls */

#gform_4 input[type="radio"],
#gform_4 input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;

    height: 18px !important;

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

    accent-color: #0f7c73 !important;

    cursor: pointer !important;
}


/* Inline labels */

#gform_4 .gform-field-label--type-inline {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    color: #374151 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;

    cursor: pointer !important;
}


/* =========================================================
   DATE FIELD - DAY / MONTH / YEAR
   ========================================================= */

#gform_4 #input_4_10,
#gform_4 .ginput_complex {
    width: 100% !important;
    max-width: 100% !important;
}


#gform_4 #input_4_10 .clear-multi {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
}


#gform_4 #input_4_10 .ginput_container_date {
    width: 100% !important;
    max-width: 100% !important;

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


#gform_4 #input_4_10 select {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   FIELD DESCRIPTION / HELP TEXT
   ========================================================= */

#gform_4 .gfield_description,
#gform_4 .gform_fileupload_rules {
    display: block !important;

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

    color: #6b7280 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}


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

#gform_4 input[type="file"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 52px !important;

    padding: 8px !important;

    border: 1px dashed #b9c4ce !important;
    border-radius: 10px !important;

    background: #f8fafb !important;
    color: #4b5563 !important;

    font-family: inherit !important;
    font-size: 13px !important;

    box-sizing: border-box !important;

    cursor: pointer !important;
}


#gform_4 input[type="file"]::file-body.elementor-page-2136-button {
    border: 0 !important;
    border-radius: 7px !important;

    margin-left: 12px !important;

    padding: 8px 14px !important;

    background: #e8f5f3 !important;
    color: #08675f !important;

    font-family: inherit !important;
    font-weight: 600 !important;

    cursor: pointer !important;
}


/* =========================================================
   VALIDATION / ERRORS
   ========================================================= */

#gform_4 .gfield_error input:not([type="radio"]):not([type="checkbox"]),
#gform_4 .gfield_error select,
#gform_4 .gfield_error textarea {
    border-color: #e53935 !important;

    box-shadow:
        0 0 0 3px rgba(229, 57, 53, .08) !important;
}


#gform_4 .validation_message,
#gform_4 .gfield_validation_message {
    margin-top: 7px !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #d32f2f !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* =========================================================
   ADD TO CART BUTTON
   ========================================================= */

#gform_4 #gform_submit_button_4,
#gform_4 .single_add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 52px !important;

    margin: 25px 0 0 !important;
    padding: 12px 25px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: #0f7c73 !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 6px 18px rgba(15, 124, 115, .18) !important;

    transition:
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


#gform_4 #gform_submit_button_4:hover,
#gform_4 .single_add_to_cart_button:hover {
    background: #0b6962 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 22px rgba(15, 124, 115, .25) !important;
}


#gform_4 #gform_submit_button_4:active,
#gform_4 .single_add_to_cart_button:active {
    transform: translateY(0) !important;
}


/* =========================================================
   REMOVE OLD LEGACY GF SPACING
   ========================================================= */

#gform_4 .gform_body,
#gform_4 .ginput_container {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


#gform_4 .gfield {
    border: 0 !important;
}


/* =========================================================
   CONDITIONAL FIELDS
   Do NOT force display:block here.
   Gravity Forms needs inline display:none for conditional logic.
   ========================================================= */


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

@media (max-width: 900px) {

    #gform_4 #gform_fields_4 {
        gap: 18px 14px !important;
    }

    #gform_4 .gfield_radio > li,
    #gform_4 .gfield_checkbox > li,
    #gform_4 .gchoice {
        flex: 1 1 160px !important;
    }

}


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

@media (max-width: 767px) {

    #gform_4 {
        margin-top: 20px !important;
    }

    #gform_4 #gform_fields_4 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }


    /* Every field becomes full width */

    #gform_4 #gform_fields_4 > .gfield,
    #gform_4 #gform_fields_4 > .gf_left_half,
    #gform_4 #gform_fields_4 > .gf_right_half {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;

        float: none !important;
        clear: both !important;
    }


    #gform_4 .gfield_label,
    #gform_4 .gform-field-label:not(.gform-field-label--type-inline) {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }


    #gform_4 input[type="text"],
    #gform_4 input[type="tel"],
    #gform_4 input[type="email"],
    #gform_4 input[type="number"],
    #gform_4 input[type="password"],
    #gform_4 input[type="url"],
    #gform_4 select {
        height: 48px !important;

        font-size: 16px !important;
        /* prevents iOS auto zoom */
    }


    /* Radio / checkbox stack */

    #gform_4 .gfield_radio,
    #gform_4 .gfield_checkbox {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 8px !important;
    }


    #gform_4 .gfield_radio > li,
    #gform_4 .gfield_checkbox > li,
    #gform_4 .gchoice {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 46px !important;
    }


    /* Keep date selects in one row */

    #gform_4 #input_4_10 .clear-multi {
        grid-template-columns:
            minmax(0, .8fr)
            minmax(0, .8fr)
            minmax(0, 1.4fr) !important;

        gap: 7px !important;
    }


    #gform_4 #input_4_10 select {
        padding-left: 5px !important;
        padding-right: 8px !important;

        font-size: 14px !important;
    }


    #gform_4 #gform_submit_button_4,
    #gform_4 .single_add_to_cart_button {
        min-height: 54px !important;

        margin-top: 20px !important;

        font-size: 15px !important;

        border-radius: 9px !important;
    }

}


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

@media (max-width: 420px) {

    #gform_4 #input_4_10 .clear-multi {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }


    #gform_4 #input_4_10 select {
        padding: 7px 5px !important;
        font-size: 13px !important;
    }


    #gform_4 .gfield_radio > li,
    #gform_4 .gfield_checkbox > li,
    #gform_4 .gchoice {
        padding: 9px 10px !important;
    }

}


/* =========================================================
   PRODUCT PAGE - BOXED LAYOUT
   ========================================================= */

body.single-product #primary.content-area {
    width: calc(100% - 40px) !important;
    max-width: 1180px !important;

    margin: 40px auto !important;
    padding: 35px !important;

    float: none !important;

    background: #ffffff !important;

    border: 1px solid #e8ecef !important;
    border-radius: 16px !important;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.05) !important;

    box-sizing: border-box !important;
}


body.single-product #main.site-main {
    width: 100% !important;
    max-width: 100% !important;

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

    float: none !important;
}


/* =========================================================
   PRODUCT TOP SECTION
   Smaller image / larger information section
   ========================================================= */

body.single-product .product .woocommerce-product-gallery {
    width: 34% !important;
    max-width: 390px !important;

    float: right !important;

    margin: 0 0 35px 5% !important;
}


body.single-product .product .summary.entry-summary {
    width: 61% !important;

    float: left !important;

    margin: 0 0 35px !important;
}


/* Product image itself */

body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img.wp-post-image {
    display: block !important;

    width: 100% !important;
    max-width: 390px !important;
    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    border-radius: 12px !important;
}


/* =========================================================
   DISABLE VISIBLE PRODUCT IMAGE ZOOM
   ========================================================= */

/* WooCommerce creates this image for hover zoom */
body.single-product .woocommerce-product-gallery .zoomImg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* Remove zoom cursor */

body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image,
body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image a,
body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    cursor: default !important;
}


/* Remove magnifying glass icon */

body.single-product .woocommerce-product-gallery__trigger {
    display: none !important;
}


/* Prevent image from visually enlarging */

body.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    transform: none !important;
    scale: 1 !important;

    transition: none !important;
}


/* =========================================================
   GALLERY VIEWPORT
   Your existing HTML contains inline viewport height
   ========================================================= */

body.single-product .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
}


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

body.single-product
.woocommerce-product-gallery
.flex-control-thumbs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

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


body.single-product
.woocommerce-product-gallery
.flex-control-thumbs li {
    width: 70px !important;
    max-width: 70px !important;

    margin: 0 !important;
}


body.single-product
.woocommerce-product-gallery
.flex-control-thumbs img {
    width: 70px !important;
    height: 70px !important;

    object-fit: cover !important;

    border: 1px solid #e2e6ea !important;
    border-radius: 8px !important;

    cursor: pointer !important;
}


/* active thumbnail */

body.single-product
.woocommerce-product-gallery
.flex-control-thumbs img.flex-active {
    border-color: #0f7c73 !important;

    box-shadow:
        0 0 0 2px rgba(15, 124, 115, 0.12) !important;
}


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

body.single-product .summary .product_title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;

    font-size: clamp(24px, 2.2vw, 34px) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;

    color: #1f2937 !important;
}


/* Price */

body.single-product .summary .price {
    margin: 0 0 20px !important;

    font-size: 20px !important;
    font-weight: 700 !important;

    color: #0f7c73 !important;
}


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

body.single-product
.woocommerce-product-details__short-description {
    margin-bottom: 25px !important;

    color: #4b5563 !important;

    font-size: 14px !important;
    line-height: 2 !important;
}


body.single-product
.woocommerce-product-details__short-description p {
    margin-bottom: 12px !important;
}


/* =========================================================
   TABS MUST STAY BELOW PRODUCT
   ========================================================= */

body.single-product .woocommerce-tabs {
    clear: both !important;

    width: 100% !important;

    padding-top: 25px !important;
}


/* Related products etc. */

body.single-product .related,
body.single-product .upsells {
    clear: both !important;

    width: 100% !important;
}


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

@media (max-width: 1024px) {

    body.single-product #primary.content-area {
        width: calc(100% - 30px) !important;

        margin: 25px auto !important;
        padding: 25px !important;
    }


    body.single-product .product .woocommerce-product-gallery {
        width: 38% !important;
        max-width: 340px !important;

        margin-left: 4% !important;
    }


    body.single-product .product .summary.entry-summary {
        width: 58% !important;
    }

}


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

@media (max-width: 767px) {

    body.single-product #primary.content-area {
        width: calc(100% - 20px) !important;

        margin: 15px auto !important;
        padding: 18px 15px !important;

        border-radius: 12px !important;
    }


    body.single-product .product .woocommerce-product-gallery,
    body.single-product .product .summary.entry-summary {
        width: 100% !important;
        max-width: 100% !important;

        float: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    body.single-product .product .woocommerce-product-gallery {
        margin-bottom: 25px !important;
    }


    /* Don't let the image become huge on phones */

    body.single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image img.wp-post-image {
        width: auto !important;
        max-width: min(100%, 320px) !important;

        margin: 0 auto !important;
    }


    body.single-product .summary .product_title {
        font-size: 23px !important;
    }


    body.single-product .summary .price {
        font-size: 18px !important;
    }


    body.single-product
    .woocommerce-product-gallery
    .flex-control-thumbs li {
        width: 58px !important;
    }


    body.single-product
    .woocommerce-product-gallery
    .flex-control-thumbs img {
        width: 58px !important;
        height: 58px !important;
    }

}


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

@media (max-width: 420px) {

    body.single-product #primary.content-area {
        width: calc(100% - 14px) !important;

        padding: 15px 12px !important;
    }


    body.single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image img.wp-post-image {
        max-width: 280px !important;
    }

}



body.single-product .product_meta {
    display: none !important;
}


/* Hide Additional Information tab + its content */
body.single-product .additional_information_tab,
body.single-product #tab-additional_information {
    display: none !important;
}





/* Hide WooCommerce description tab navigation */
body.single-product .woocommerce-tabs ul.tabs {
    display: none !important;
}

/* Hide "توضیحات" heading inside description panel */
body.single-product #tab-description > h2 {
    display: none !important;
}

/* Remove unnecessary top spacing */
body.single-product .woocommerce-tabs,
body.single-product #tab-description {
    padding-top: 0 !important;
    margin-top: 0 !important;
}









/* =========================================================
   MOBILE OVERFLOW FIX
   Put this at the END of the existing CSS
   ========================================================= */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

.gbr-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    position: relative !important;
}


/* Never allow media/content to exceed viewport */
.gbr-page img,
.gbr-page video,
.gbr-page iframe,
.gbr-page svg {
    max-width: 100% !important;
}


/* Important for grid/flex children */
.gbr-page section,
.gbr-page header,
.gbr-page footer,
.gbr-page section > div,
.gbr-page header > div,
.gbr-page footer > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* Allow flex/grid children to actually shrink */
.gbr-page div,
.gbr-page a,
.gbr-page p,
.gbr-page span {
    min-width: 0;
}


/* Prevent long content from forcing width */
.gbr-page p,
.gbr-page div,
.gbr-page a,
.gbr-page span {
    overflow-wrap: anywhere;
    word-break: normal;
}


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

@media (max-width: 700px) {

    /*
     * These are the problem grids.
     *
     * Desktop currently uses:
     * minmax(240px)
     * minmax(270px)
     * minmax(280px)
     * minmax(290px)
     *
     * On small phones they can exceed the real available width.
     */
     
    .gbr-page div[style*="minmax(240px"],
    .gbr-page div[style*="minmax(270px"],
    .gbr-page div[style*="minmax(280px"],
    .gbr-page div[style*="minmax(290px"] {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Sections */
    .gbr-page section {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    /* Large cards */
    .gbr-page div[style*="padding:40px"],
    .gbr-page div[style*="padding:38px"],
    .gbr-page div[style*="padding:36px"],
    .gbr-page div[style*="padding:34px"],
    .gbr-page div[style*="padding:28px"] {
        padding-left: 18px !important;
        padding-right: 18px !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       KEEP BOOKS AT 2 COLUMNS
       ===================================================== */

    .gbr-page #books div[style*="minmax(230px"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* Merchandise can also remain 2 columns */
    .gbr-page #merch div[style*="minmax(200px"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    /* Cards themselves */
    .gbr-page #books .gh17,
    .gbr-page #books .gh20,
    .gbr-page #books .gh23,
    .gbr-page #books .gh26,
    .gbr-page #books .gh29,
    .gbr-page #books .gh32,
    .gbr-page #merch [class^="gh"] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Product card content */
    .gbr-page #books div[style*="padding:18px"] {
        padding: 12px !important;
        min-width: 0 !important;
    }


    /* Prevent price + button rows from overflowing */
    .gbr-page #books div[style*="justify-content:space-between"],
    .gbr-page #merch div[style*="justify-content:space-between"] {
        min-width: 0 !important;
        gap: 6px !important;
    }


    /* Add-to-cart buttons */
    .gbr-page .gbr-ajax-add {
        max-width: 100% !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }


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

    .gbr-page .gbr-bar {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        box-sizing: border-box !important;
    }


    .gbr-page .gbr-actions {
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .gbr-page footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }


    .gbr-page footer > div {
        width: 100% !important;
        max-width: 100% !important;

        padding: 24px 16px !important;

        box-sizing: border-box !important;
    }


    .gbr-page footer > div > div {
        width: 100% !important;
        max-width: 100% !important;

        overflow-wrap: anywhere !important;
    }


    /* AJAX notice */
    .gbr-cart-notice {
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        max-width: calc(100vw - 24px) !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .gbr-page section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .gbr-page div[style*="padding:40px"],
    .gbr-page div[style*="padding:38px"],
    .gbr-page div[style*="padding:36px"],
    .gbr-page div[style*="padding:34px"],
    .gbr-page div[style*="padding:28px"] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    /* Still keep books 2-column */
    .gbr-page #books div[style*="minmax(230px"],
    .gbr-page #merch div[style*="minmax(200px"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

}/* End custom CSS */