.prod-cat-item .img-wrap-link {
	padding: 0px !important;
}
.img-center {
	width:  100% !important;
}
#al-side-container {
    background-color: #f7f7f7;
    padding: 10px;
    margin-bottom:  10px;
    border-radius: 4px;
}

/* Fix upload progress bar overflowing outside right column */
.fileUploadArea {
    overflow: hidden;
}
.file-upload-progress {
    max-width: 100%;
    box-sizing: border-box;
}
.file-progress-control {
    min-width: 0;
}

/* Tooltip base styles — missing from live layout.css after Pressero CSS compilation */
.toolTip {
    background: rgba(37, 52, 62, 1.0);
    border-radius: 5px;
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.50);
    color: #fff;
    font-size: 0.95em;
    font-weight: 300;
    padding: 10px 20px 10px 10px;
    max-width: 350px;
    position: absolute;
    z-index: 10000;
    margin-right: 20px;
}

/* ============================================================
   Stage 1 — Design refresh (2026-04-16)
   Inter typography + TSP green tokens + breadcrumb / description / footer polish.
   LOW-RISK CSS-only pass — no HTML or JS changes.
   See working-code/mockup-coroplast-signexa/ROLLOUT-PLAN.md for context.
   ============================================================ */

:root {
    --tsp-green: #5cb85c;
    --tsp-green-dark: #4a9d4a;
    --tsp-green-hover: #3d8b3d;
    --tsp-text: #1e3a4a;
    --tsp-muted: #64748b;
    --tsp-subtle: #94a3b8;
    --tsp-border: #e2e8f0;
    --tsp-border-strong: #cbd5e1;
}

/* ---- Typography — Inter as primary, Poppins fallback so nothing breaks if Inter fails to load ---- */
body {
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.pageTitle,
.feature-products-title,
.frontpage-header-title {
    font-family: 'Inter', 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

h1, .pageTitle { font-weight: 900; letter-spacing: -0.03em; }
h2, .feature-products-title { font-weight: 900; letter-spacing: -0.025em; }
h3 { font-weight: 800; }

/* ---- Breadcrumb polish ---- */
.breadcrumb {
    background: transparent;
    padding: 14px 0;
    margin-bottom: 16px;
    font-size: 13px;
    border-radius: 0;
}
.breadcrumb > li + li::before {
    color: var(--tsp-subtle);
    padding: 0 10px;
}
.breadcrumb a {
    color: var(--tsp-muted);
    font-weight: 500;
    transition: color .15s;
}
.breadcrumb a:hover { color: var(--tsp-green-hover); }
.breadcrumb > .active { color: var(--tsp-text); font-weight: 700; }

/* ---- Product description section polish ---- */
.fullDescriptionArea {
    line-height: 1.65;
}
.fullDescriptionArea h2,
.fullDescriptionArea h3 {
    margin-top: 1.75em;
    margin-bottom: 0.75em;
    color: var(--tsp-text);
}
.fullDescriptionArea > :first-child { margin-top: 0; }
.fullDescriptionArea h2 {
    position: relative;
    padding-bottom: 10px;
    font-size: 24px;
}
.fullDescriptionArea h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--tsp-green);
    border-radius: 2px;
}
.fullDescriptionArea ul {
    padding-left: 22px;
}
.fullDescriptionArea ul li {
    margin-bottom: 6px;
}
.fullDescriptionArea ul li::marker {
    color: var(--tsp-green);
}

/* Also apply to the section-title class used in category descriptions */
h2.section-title,
h3.section-title {
    font-family: 'Inter', 'Poppins', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 900;
    position: relative;
    padding-bottom: 10px;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}
h2.section-title::after,
h3.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--tsp-green);
    border-radius: 2px;
}

/* Category description footer (bottom of category pages) gets the same love */
.category-description-footer ul li::marker { color: var(--tsp-green); }

/* ---- Footer polish ---- */
.footer-columns h4,
.footer-columns h5 {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
}
.footer-columns a {
    transition: color .15s;
}
.footer-columns a:hover {
    color: var(--tsp-green);
}

/* ============================================================
   End Stage 1 refresh
   ============================================================ */

/* ============================================================
   Stage 2 — Calculator / price / Add-to-Cart / tooltips (2026-04-16)
   CSS-only. No JS or HTML structure changes.
   ============================================================ */

/* ---- Configure & Price — 2-col Width/Height grid + full-width everything else ---- */
#calcParmInputs ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}
#calcParmInputs ol > li {
    margin: 0;
    grid-column: 1 / -1;        /* default: full width */
    /* Override legacy layout.css rules that force inline-block + 49% width
       on .PriceCalc_Quantity for specific product pages */
    width: 100% !important;
}
#calcParmInputs ol > li:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
}
/* Width (2) + Height (3) share a row */
#calcParmInputs ol > li:nth-child(2),
#calcParmInputs ol > li:nth-child(3) {
    grid-column: auto;
}

/* Ensure inputs fill their grid cell */
#calcParmInputs ol > li input.form-control,
#calcParmInputs ol > li select.form-control {
    width: 100%;
    box-sizing: border-box;
}

/* ---- Labels ---- */
#calcParmInputs label,
.product-custom-form .form-group > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tsp-text);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}

/* ---- Inputs + Selects ---- */
#calcParmInputs input.form-control,
#calcParmInputs select.form-control,
.product-custom-form .form-group input.form-control,
.product-custom-form .form-group select.form-control,
.product-custom-form .form-group textarea.form-control {
    border-radius: 10px;
    border: 1px solid var(--tsp-border-strong);
    padding: 10px 14px;
    height: auto;
    min-height: 42px;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--tsp-text);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#calcParmInputs input.form-control:focus,
#calcParmInputs select.form-control:focus,
.product-custom-form .form-group input.form-control:focus,
.product-custom-form .form-group select.form-control:focus,
.product-custom-form .form-group textarea.form-control:focus {
    outline: none;
    border-color: var(--tsp-green);
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2);
}

/* ---- Tooltip "?" icons inside labels and pricing headings ---- */
label .tip,
.pricingHeading .tip,
.renameItemHeading .tip,
.pricingOrderNotesHeading .tip,
.fileUploadArea .tip,
h4 .tip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: rgba(92, 184, 92, 0.18) !important;
    color: var(--tsp-green-dark) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    text-transform: none !important;
    line-height: 1 !important;
    margin-left: 6px !important;
    padding: 0 !important;
    cursor: pointer;
    user-select: none;
    opacity: 1 !important;
    vertical-align: middle;
    transition: background .15s, color .15s;
}
label .tip:hover,
.pricingHeading .tip:hover,
h4 .tip:hover {
    background: var(--tsp-green) !important;
    color: #fff !important;
}

/* Special artwork "View Artwork Requirements" tip — keep it visible as a link, not a circle */
label .tipartwork {
    display: inline-block;
    background: transparent;
    color: var(--tsp-green-hover);
    width: auto;
    height: auto;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--tsp-green);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
label .tipartwork:hover {
    background: var(--tsp-green);
    color: #fff;
}

/* ---- Price display area ---- */
.calc-results.calculatorResults,
.calculatorResults {
    margin: 18px 0 14px;
    padding: 16px 0;
    border-top: 1px solid var(--tsp-border);
    border-bottom: 1px solid var(--tsp-border);
}
.calculatorTotalArea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.calculatorTotalLabel {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tsp-muted);
}
.calculatorTotal {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 32px !important;
    font-weight: 900;
    color: var(--tsp-green) !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-left: auto !important;
    text-align: right;
}
.calculatorPerPieceArea {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tsp-subtle);
    font-weight: 600;
}
.calculatorPerPieceLabel {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calculatorPerPiecePrice {
    font-weight: 700;
    color: var(--tsp-muted);
}

/* ---- Add to Cart button ---- */
#btnAddToCartButton,
#btnAddToCartButton.btn.btn-primary.btn-lg {
    background: var(--tsp-green);
    border-color: var(--tsp-green);
    color: #fff;
    border-radius: 10px;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 24px;
    font-size: 15px;
    width: 100%;
    min-height: 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background .15s, transform .1s, box-shadow .15s;
}
#btnAddToCartButton:hover,
#btnAddToCartButton.btn.btn-primary.btn-lg:hover {
    background: var(--tsp-green-dark);
    border-color: var(--tsp-green-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#btnAddToCartButton:active {
    transform: translateY(1px);
}
.addToCartButton {
    margin: 18px 0 8px;
}

/* ---- Numbofpage helper (custom field that tspcustom2.js moves below upload) ---- */
#numbofpage > span {
    color: var(--tsp-muted);
    font-size: 11px !important;
    font-style: italic;
    line-height: 1.4;
    margin-top: -35px !important;
    display: block !important;
    padding-left: 4px;
}

/* ============================================================
   End Stage 2 refresh
   ============================================================ */

/* ============================================================
   Stage 2b — Card wrapper + secondary fields + # of pages helper
   ============================================================ */

/* ---- Card wrapper around the whole Configure & Price + upload + add-to-cart column ---- */
.calculator-wrap {
    background: #fff;
    border: 1px solid var(--tsp-border);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* Section headings within the card — File Upload, Name Your Job, Special Instructions */
/* layout.css sets font-size: 18px !important on .pricingHeading — we override with !important */
.calculator-wrap .pricingHeading,
.calculator-wrap h4.pricingHeading,
h4.pricingHeading {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: var(--tsp-muted) !important;
    margin: 22px 0 12px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--tsp-border) !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.calculator-wrap .pricingHeading:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.calculator-wrap .pricingHeading small {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tsp-subtle);
    margin-left: 4px;
}
.pricingHeading .tip {
    opacity: 1;
}

/* ---- File upload control (Artwork Upload) ---- */
.fileUploadSelect .input-group.file-upload-control,
.fileUploadArea .input-group.file-upload-control {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--tsp-border-strong);
    transition: border-color .15s, box-shadow .15s;
}
.fileUploadSelect .input-group.file-upload-control:focus-within,
.fileUploadArea .input-group.file-upload-control:focus-within {
    border-color: var(--tsp-green);
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2);
}
.fileUploadSelect .input-group.file-upload-control input.form-control,
.fileUploadArea .input-group.file-upload-control input.form-control {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 14px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: var(--tsp-text) !important;
    background: #fff !important;
}
.fileUploadSelect .file-upload-button.btn,
.fileUploadArea .file-upload-button.btn {
    background: var(--tsp-text);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 20px !important;
    height: 44px !important;
    line-height: 44px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.fileUploadSelect .file-upload-button.btn:hover,
.fileUploadArea .file-upload-button.btn:hover {
    background: var(--tsp-green-dark);
}

/* ---- # of pages helper text — input left, helper text to its right ---- */
#numbofpage {
    margin: 12px 0 4px;
    display: grid !important;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}
#numbofpage label {
    display: block !important;
    float: none !important;
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    color: var(--tsp-text) !important;
}
#numbofpage input {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: 120px !important;
    height: 44px !important;
    font-size: 14px !important;
}
#numbofpage > span {
    grid-column: 2;
    grid-row: 2;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--tsp-subtle) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    align-self: center;
}

/* ---- Name Your Job + Special Instructions fields ---- */
.renameArea input.form-control,
.renameArea input#txtCustomName,
#txtCustomName,
.orderNotesArea textarea.form-control,
.orderNotesArea textarea#txtOrderNotes,
#txtOrderNotes {
    border-radius: 10px !important;
    border: 1px solid var(--tsp-border-strong) !important;
    padding: 10px 14px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--tsp-text) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
#txtCustomName {
    height: 44px !important;
    line-height: 24px !important;
}
#txtOrderNotes {
    min-height: 80px !important;
    line-height: 1.5 !important;
    resize: vertical;
}
#txtCustomName:focus,
#txtOrderNotes:focus {
    outline: none;
    border-color: var(--tsp-green) !important;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2) !important;
}
.renameArea,
.orderNotesArea {
    border-bottom: none !important;
    border-top: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
}

/* Name Your Job + Special Instructions headings — match field-label style (13px/700, dark, no uppercase) */
.renameItemHeading,
.pricingOrderNotesHeading,
h4.renameItemHeading.pricingHeading,
h4.pricingOrderNotesHeading.pricingHeading {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--tsp-text) !important;
    margin: 16px 0 6px !important;
    padding: 0 !important;
    border-top: none !important;
    display: block !important;
}
.renameItemHeading > span {
    font-weight: 400;
    color: var(--tsp-subtle);
    text-transform: none;
    font-size: 12px;
    margin-left: 4px;
}

/* ---- Corners / Custom Shape custom image-select (ul.ul-sel built by tspcustom2.js) ----
   Don't touch display — JS toggles inline display:block/none on click.
   Only restyle appearance to match other .form-control selects. */
.ul-sel {
    border-radius: 10px !important;
    border: 1px solid var(--tsp-border-strong) !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    transition: border-color .15s, box-shadow .15s;
}
.ul-sel:hover {
    border-color: var(--tsp-green) !important;
}
.ul-sel .li-option {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--tsp-text) !important;
    padding: 10px 44px 10px 14px !important;
    line-height: 23px !important;
    height: 43px !important;
    box-sizing: border-box !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    background-size: auto 22px !important;
    border-bottom: 1px solid var(--tsp-border) !important;
    cursor: pointer;
    transition: background-color .12s;
}
.ul-sel .li-option:hover {
    background-color: rgba(92, 184, 92, 0.08) !important;
}
.ul-sel .li-option:last-child {
    border-bottom: none !important;
}
/* caret arrow for the collapsed dropdown (Corners + generic custom selects) */
.CornersorCustomShape > .caret,
.PriceCalc_CalcParm > .custom-select-caret,
.PriceCalc_CalcParm > .caret {
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid var(--tsp-muted) !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: none !important;
    background: transparent !important;
    right: 14px !important;
    margin-top: 18px !important;
    pointer-events: none;
}

/* .ul-sel-plain: text-only variant, reduce right padding since no icon */
.ul-sel-plain .li-option {
    padding-right: 32px !important;
}

/* ---- Price block polish — push label small+tight top-left, amount dominant right ---- */
.calc-results.calculatorResults,
.calculatorResults {
    margin: 20px 0 16px !important;
    padding: 14px 0 !important;
}
.calculatorTotalArea {
    align-items: center !important;
}
.calculatorTotalLabel {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
}
.calculatorPerPieceArea {
    margin-top: 4px !important;
    font-size: 14px !important;
}
.calculatorPerPieceLabel {
    font-size: 12px !important;
}
.calculatorPerPiecePrice {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* ============================================================
   Stage 6c — Page bg + card framing (site-wide)
   ============================================================ */
/* Remove the legacy "boxed banner" treatment: 1px gray border + negative top margin
   on #main-content. Let the content flow cleanly under the green accent strip. */
#main-content {
    border: 0 !important;
    background: transparent !important;
    margin-top: 24px !important;
    padding: 0 15px 60px !important;
    box-shadow: none !important;
}
/* The wrap that held the 40px bottom margin — drop it so description + footer line up.
   Also kill the 1px gray border-top that shows as a faint line under the nav accent. */
#main-content-wrap {
    margin-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
}


body,
body.aleyantW2P-v6 {
    background: #f8fafc !important;
    color: var(--tsp-text);
}

/* Content areas that sit on body — ensure they don't draw their own white bg */
#main-container,
#main-content-wrap,
#main-content,
#content-col {
    background: transparent !important;
}

/* Inline description (inside gallery column, under the gallery) — framed as card */
.product-description-inline {
    background: #fff;
    border: 1px solid var(--tsp-border);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin-top: 20px;
}
.product-description-inline .product-description {
    margin: 0;
    padding: 0;
}
.product-description-inline .product-description h2,
.product-description-inline .section-title {
    background: transparent !important;
    color: var(--tsp-text) !important;
    padding: 0 0 14px !important;
    margin: 0 0 18px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
}
.product-description-inline .product-description h2::after,
.product-description-inline .section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--tsp-green);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}

/* Description body typography — readable 16px */
.product-description-inline .product-description,
.product-description-inline .product-description p {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    font-weight: 400 !important;
}
.product-description-inline .product-description p {
    margin: 0 0 14px !important;
}
.product-description-inline .product-description p:last-child {
    margin-bottom: 0 !important;
}
.product-description-inline .product-description strong,
.product-description-inline .product-description b {
    color: var(--tsp-text) !important;
    font-weight: 700 !important;
}
.product-description-inline .product-description h3,
.product-description-inline .product-description h4 {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--tsp-text) !important;
    margin: 22px 0 10px !important;
    letter-spacing: -0.01em !important;
}
.product-description-inline .product-description ul,
.product-description-inline .product-description ol {
    margin: 0 0 16px !important;
    padding-left: 24px !important;
}
.product-description-inline .product-description li {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin-bottom: 4px;
}
.product-description-inline .product-description ul li::marker {
    color: var(--tsp-green);
}

/* Suggested products panel — frame as card */
.suggestive-sell-panel,
.general-panel.suggestive-sell-panel {
    background: #fff;
    border: 1px solid var(--tsp-border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin-top: 28px;
}
.suggestive-sell-panel .general-panel-heading {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
    border: none !important;
}
.suggestive-sell-panel .general-panel-heading h2,
.suggestive-sell-panel .section-title {
    color: var(--tsp-text) !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Breadcrumb strip: tighter padding, no underlines */
.breadcrumb {
    background: transparent !important;
    padding: 14px 0 8px !important;
    margin: 0 !important;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--tsp-muted);
}
.breadcrumb a {
    color: var(--tsp-muted) !important;
    font-weight: 500;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--tsp-green-hover) !important;
}
.breadcrumb .active {
    color: var(--tsp-text) !important;
    font-weight: 700;
}

/* Category grid cards (product listing) */
.prod-cat-item {
    background: #fff;
    border: 1px solid var(--tsp-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.prod-cat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    border-color: var(--tsp-green);
}

/* ============================================================
   Stage 6b — Footer refresh (site-wide)
   ============================================================ */
footer.footer {
    background: #1e3a4a !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    padding: 56px 0 0 !important;
    margin-top: 48px;
    border-top: none !important;
}
footer.footer .footer-columns {
    padding-bottom: 32px;
}
footer.footer .footer-col-title h4,
footer.footer h4 {
    color: #fff !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
}
footer.footer p,
footer.footer .custom-html,
footer.footer .footermodule,
footer.footer .contactblcok {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}
footer.footer a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.12s;
    background: transparent !important;
}
footer.footer a:hover {
    color: var(--tsp-green) !important;
    text-decoration: none !important;
}
footer.footer ul.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer.footer ul.footer-nav li {
    margin: 0 0 8px;
}
footer.footer ul.footer-nav li a {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75) !important;
}
footer.footer ul.footer-nav li a:hover {
    color: var(--tsp-green) !important;
}

/* iframe (Google Map) — soften edges */
footer.footer iframe {
    border-radius: 8px;
    margin-top: 8px;
    filter: grayscale(0.2) brightness(0.95);
}

/* Footer logo row */
footer.footer .footer-logo {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
footer.footer .footer-logo img {
    max-height: 42px;
    opacity: 0.85;
}

/* Bottom copyright bar */
footer.footer .footer-bottom {
    background: #152838 !important;
    padding: 16px 0 !important;
    margin-top: 0 !important;
    border: none !important;
}
footer.footer .footer-bottom ul,
footer.footer .footer-bottom .footer-bottom-link {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
footer.footer .footer-bottom li {
    display: inline-block;
    padding: 0 10px;
}
footer.footer .footer-bottom a {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.03em;
}
footer.footer .footer-bottom a:hover {
    color: var(--tsp-green) !important;
}

/* Eliminate any lingering light-bg inherited from inline styles on phone link */
footer.footer a[style*="background-color"] {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   Stage 6a — Header / Nav refresh (site-wide)
   ============================================================ */
/* Unified dark navy across header-banner + header-nav, edge-to-edge.
   Put the green accent on .header-banner itself so the empty non-home
   banner.inc div doesn't add a dark sliver below the green. */
.header-banner {
    background: #1e3a4a !important;        /* TSP header navy */
    border-bottom: 3px solid var(--tsp-green) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.header-nav {
    background: #152838 !important;        /* slightly darker nav strip */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none !important;         /* moved to .header-banner */
    margin-bottom: 0 !important;
}
/* Collapse the banner-container div that banner.inc emits on non-home pages */
.header-banner > .banner-container {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
/* Kill extra padding on the inner <header> so .header-nav sits flush with the
   green accent (no dark "blue" sliver above the green). */
.header-banner > header#header,
.header-banner > header {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.header-banner > .banner-container:empty,
.header-banner > .banner-container > #home-banner:empty {
    display: none !important;
}

/* Top navbar: kill Bootstrap inverse chrome, go flat */
.header-nav #top-navbar.navbar.navbar-inverse,
#top-navbar.navbar.navbar-inverse {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

/* Nav items — uppercase, Inter, tighter spacing */
#top-navbar .nav.navbar-nav > li > a,
#top-navbar #nav-main > li > a {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 14px 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: background 0.12s, color 0.12s;
}
#top-navbar .nav.navbar-nav > li > a:hover,
#top-navbar .nav.navbar-nav > li:hover > a,
#top-navbar .nav.navbar-nav > li.active > a,
#top-navbar .nav.navbar-nav > li.open > a {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

/* Dropdown panels — white card, rounded bottom, shadow */
#top-navbar .dropdown-menu,
.navbar-inverse .dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--tsp-border) !important;
    border-top: 3px solid var(--tsp-green) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    padding: 6px 0 !important;
    min-width: 240px !important;
}
#top-navbar .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tsp-text) !important;
    padding: 10px 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    transition: background 0.1s, color 0.1s;
}
#top-navbar .dropdown-menu > li > a:hover,
#top-navbar .dropdown-menu > li.active > a,
.navbar-inverse .dropdown-menu > li > a:hover {
    background: rgba(92, 184, 92, 0.08) !important;
    color: var(--tsp-green-hover) !important;
}

/* Header-banner internal — search pill + cart pill */
.header-banner .container {
    padding-top: 14px;
    padding-bottom: 14px;
}
.header-banner a.brand img,
.header-banner .brand img,
.header-banner #logo img,
.header-banner img[alt*="Sign"] {
    max-height: 58px;
    width: auto;
}

/* Search box — dark translucent pill matching mockup */
.header-banner .pr-search,
#siteSearch .pr-search,
#siteSearch .input-group.pr-search {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    overflow: hidden;
    display: inline-flex !important;
    align-items: stretch;
    transition: border-color 0.15s, box-shadow 0.15s;
    padding: 0 !important;
    margin: 0 !important;
}
.header-banner .pr-search:focus-within,
#siteSearch .pr-search:focus-within {
    border-color: var(--tsp-green) !important;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2);
}
.header-banner .pr-search-input,
#siteSearch .pr-search-input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    min-width: 200px;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
}
.header-banner .pr-search-input::placeholder,
#siteSearch .pr-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}
.header-banner .pr-search .input-group-btn,
#siteSearch .input-group-btn {
    background: transparent !important;
}
.header-banner .pr-search-button,
#siteSearch .pr-search-button {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color 0.12s;
}
.header-banner .pr-search-button:hover,
#siteSearch .pr-search-button:hover {
    color: var(--tsp-green) !important;
    background: transparent !important;
}

/* Header-right layout: search + cart in a nice horizontal flex, pushed to the RIGHT */
.header-banner .header-right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 14px;
    float: none !important;
    width: 100%;
}
.header-banner #siteSearch {
    order: 2;
    margin: 0 !important;
    float: none !important;
}
.header-banner #cart {
    order: 1;
    float: none !important;
    margin: 0 !important;
}

/* Cart pill — uppercase text to match mockup */
.header-banner #cart.cart-link,
.header-banner #cart {
    background: var(--tsp-green) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    transition: background 0.12s, transform 0.12s;
    margin: 0 !important;
}
.header-banner #cart:hover {
    background: var(--tsp-green-dark) !important;
    transform: translateY(-1px);
}
.header-banner #cart > a,
.header-banner #cart-button {
    color: #fff !important;
    padding: 9px 16px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.header-banner #cart > a:hover {
    color: #fff !important;
    background: transparent !important;
}
.header-banner #cart .fa-shopping-cart {
    font-size: 14px;
}

/* Cart link — green pill */
.header-banner .cart-link,
.header-banner .shopping-cart a,
.header-banner a[href*="/cart"] {
    background: var(--tsp-green) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, transform 0.12s;
}
.header-banner .cart-link:hover,
.header-banner .shopping-cart a:hover,
.header-banner a[href*="/cart"]:hover {
    background: var(--tsp-green-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ============================================================
   Stage 4 — Hero Layout: tagline + full-width description
   ============================================================ */
.product-tagline {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--tsp-muted);
    font-weight: 500;
    margin: 4px 25px 24px;           /* match H1's 25px left/right margins */
    max-width: 72ch;
}
/* Reset H1 side margins to 0 is risky (skin-wide), so align the tagline instead. */
.product-description-row {
    margin-top: 32px;
}
.product-description-row .product-detail-info {
    padding: 0;
}
.product-description-row .product-description {
    padding: 0;
    margin: 0;
}

/* ============================================================
   Stage 3 — Custom Image Carousel
   ============================================================ */
.product-image-gallery.desktop.tsp-gallery-built {
    background: #fff;
    border: 1px solid var(--tsp-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tsp-gallery-built .gallery-main {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--tsp-surface, #f5f7fa);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tsp-gallery-built .gallery-main-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.tsp-gallery-built .gallery-main-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s;
}
.tsp-gallery-built .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95);
    color: var(--tsp-text);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tsp-gallery-built .gallery-nav:hover {
    background: var(--tsp-green);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}
.tsp-gallery-built .gallery-nav.prev { left: 12px; }
.tsp-gallery-built .gallery-nav.next { right: 12px; }
.tsp-gallery-built .gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(30, 58, 74, 0.85);
    color: #fff;
    padding: 4px 10px;
    border-radius: 9999px;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 2;
}
.tsp-gallery-built .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.tsp-gallery-built .gallery-thumbs .thumb {
    aspect-ratio: 1/1;
    background: var(--tsp-surface, #f5f7fa);
    border: 2px solid var(--tsp-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tsp-gallery-built .gallery-thumbs .thumb:hover {
    border-color: var(--tsp-green);
    transform: translateY(-1px);
}
.tsp-gallery-built .gallery-thumbs .thumb.active {
    border-color: var(--tsp-green);
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.15);
}
.tsp-gallery-built .gallery-thumbs .thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Hide any "Click To Zoom" caption left behind */
.tsp-gallery-built .gallery-intro { display: none; }

/* ---- "Configure & Price" heading at top of calc card ---- */
.calculator-wrap::before {
    content: 'Configure & Price';
    display: block;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tsp-muted);
    margin: 0 0 18px;
    padding-bottom: 4px;
}

/* ---- Tooltip popup (clicking the "?" icons) — match mockup styling ---- */
.toolTip {
    background: #1e2b36 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 30px 12px 14px !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    max-width: 280px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18),
                0 4px 10px rgba(0, 0, 0, 0.12) !important;
    position: absolute;
    z-index: 10000;
    animation: tspTooltipIn 0.18s ease-out;
}
.toolTip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 12px;
    height: 12px;
    background: #1e2b36;
    transform: rotate(45deg);
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
}
.toolTip .cerrar {
    position: absolute !important;
    top: 4px !important;
    right: 8px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: none !important;
    font-size: 0 !important;     /* hide the raw "x" */
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
    padding: 2px 6px !important;
    width: auto !important;
    height: auto !important;
    min-width: 20px;
    text-align: center;
}
.toolTip .cerrar::before {
    content: '\00D7';            /* unicode × */
    font-size: 20px;
    line-height: 1;
    display: inline-block;
}
.toolTip .cerrar:hover {
    color: #fff !important;
}
.toolTip strong {
    color: #fff;
    font-weight: 700;
}
@keyframes tspTooltipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive QA — tablet + phone adjustments
   ============================================================ */
@media (max-width: 991px) {
    /* Tablet: tighten overall spacing */
    .calculator-wrap { padding: 20px 18px; }
    .product-description-inline { padding: 22px 22px; }
    h1.pageTitle { font-size: 30px !important; }
    .product-tagline { font-size: 16px !important; max-width: 100%; }
}

@media (max-width: 767px) {
    /* Un-fix the header so content doesn't slide under it.
       Pressero's base_skin.min.css sets .header-banner { position: fixed } on small
       screens, which pushed the H1/gallery up behind the nav. Also remove the
       body top-padding Pressero added to make room for that fixed header. */
    .header-banner {
        position: static !important;
    }
    body,
    body.aleyantW2P-v6 {
        padding-top: 0 !important;
    }
    #main-container { padding-top: 0 !important; }

    /* On mobile: use compact icons (hamburger + small cart icon + search icon).
       Hide the big desktop CART pill and the desktop search pill. Specificity
       boosted past the general-scope rule that set #cart to inline-flex. */
    .header-banner #cart.cart-link,
    .header-banner #cart.header-cart,
    .header-banner #cart,
    .header-banner #siteSearch {
        display: none !important;
    }
    .header-mobile-links > a[href="/search"] {
        display: none !important;  /* keep it simple: no search icon on mobile */
    }

    /* Mobile-links container: flex row with 2 visible icons (cart + search).
       The hamburger is promoted out of the right group and pinned to the LEFT
       of the header via position:absolute. */
    .header-mobile-links {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    .header-mobile-links > a.mobile-nav-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #fff !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        transition: background 0.12s;
        position: relative;
        padding: 0 !important;
    }
    .header-mobile-links > a.mobile-nav-btn:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    /* HAMBURGER: pin to top-left of the header-banner (left of logo).
       Bootstrap 3 cols default to position:relative which would catch the
       absolute — neutralize that on mobile so the hamburger anchors to
       .header-top. Bootstrap mobile uses floats so static is safe here. */
    .header-banner .header-top { position: relative; }
    .header-banner .header-top .col-xs-6,
    .header-banner .header-top .col-sm-4,
    .header-banner .header-top .col-sm-8 {
        position: static !important;
    }
    .header-mobile-links > a.mobile-nav-btn:first-child {
        position: absolute !important;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }

    /* Hamburger glyph — Pressero's FA build doesn't ship .fa-bars content.
       fa-fw class adds a width that offsets the glyph; override. */
    .header-mobile-links > a.mobile-nav-btn > i.fa-bars,
    .header-mobile-links > a.mobile-nav-btn > i.fa.fa-bars.fa-fw {
        font-style: normal;
        font-size: 0;
        width: auto !important;
        text-align: center !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .header-mobile-links > a.mobile-nav-btn > i.fa-bars::before {
        content: '\2630';
        font-size: 22px;
        font-family: 'Inter', 'Poppins', sans-serif;
        color: #fff;
        line-height: 1;
        display: inline-block;
        text-align: center;
    }
    /* Cart icon — keep FA glyph but tone size, add green badge for count */
    .header-mobile-links > a.mobile-nav-btn-cart > i.fa-shopping-cart {
        font-size: 16px;
        color: #fff;
    }
    .header-mobile-links > a.mobile-nav-btn-cart .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--tsp-green);
        color: #fff;
        font-family: 'Inter', 'Poppins', sans-serif;
        font-size: 10px;
        font-weight: 800;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 2px solid #1e3a4a;
    }

    /* Header-right container: flex row, packed to right */
    .header-banner .header-right {
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    /* Tighten up header-top row so logo+icons don't collide */
    .header-banner .header-top { padding: 8px 0 !important; }

    /* Logo: slightly smaller on mobile, pushed right to clear the absolute hamburger */
    .header-banner .site-logo img,
    .header-banner .default-header-logo-height {
        max-height: 36px !important;
        width: auto !important;
    }
    .header-banner .header-logo,
    .header-banner .site-logo-wrap {
        padding-left: 88px !important;      /* more breathing room — logo sits
                                               more centered between hamburger
                                               on the left and cart/search on the right */
    }

    /* Mobile gallery: Pressero emits .product-image-gallery.mobile inside the
       calc column + .desktop inside col-md-7. Our JS only builds .desktop, and
       Bootstrap hides .desktop below md. Flip it: force .desktop visible on
       mobile (so our nice carousel shows) and hide the empty .mobile one. */
    .product-base-info.hidden-xs.hidden-sm,
    .product-image-gallery.desktop {
        display: block !important;
    }
    .product-base-info.hidden-md.hidden-lg,
    .product-image-gallery.mobile {
        display: none !important;
    }

    /* Mobile stack order: put gallery+description FIRST, calc SECOND.
       Without this, push/pull doesn't apply on mobile so calc renders first. */
    .product-detail > .row {
        display: flex !important;
        flex-direction: column;
    }
    .product-detail > .row > .col-md-7.col-md-pull-5 {
        order: 1;
    }
    .product-detail > .row > .col-md-5.col-md-push-7 {
        order: 2;
    }

    /* Phone */
    h1.pageTitle {
        font-size: 24px !important;
        margin: 16px 15px 12px !important;
        line-height: 1.15 !important;
    }
    .product-tagline {
        font-size: 15px !important;
        margin: 4px 15px 20px !important;
    }

    /* Cards: less padding on tight screens */
    .calculator-wrap {
        padding: 18px 16px !important;
        border-radius: 12px;
    }
    .product-description-inline {
        padding: 20px 18px !important;
        border-radius: 12px;
    }
    .tsp-gallery-built {
        padding: 12px !important;
        border-radius: 12px;
    }
    .suggestive-sell-panel {
        padding: 18px 16px !important;
        border-radius: 12px;
    }

    /* Description headings */
    .product-description-inline .product-description h2,
    .product-description-inline .section-title {
        font-size: 22px !important;
    }
    .product-description-inline .product-description h3,
    .product-description-inline .product-description h4 {
        font-size: 16px !important;
    }

    /* Configure & Price heading smaller on mobile */
    .calculator-wrap::before {
        font-size: 12px;
        margin: 0 0 14px;
    }

    /* Header: logo slightly smaller, cart becomes icon-heavy */
    .header-banner .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Collapsed header-nav strip: reduce visual weight on phone */
    .header-nav {
        border-top: none;
    }
    #top-navbar.navbar {
        padding: 0 !important;
    }
    .navbar-header {
        padding: 6px 10px;
    }

    /* Breadcrumb on mobile: smaller */
    .breadcrumb {
        font-size: 12px;
        padding: 10px 0 4px !important;
    }

    /* Footer columns stack nicely on mobile */
    footer.footer {
        padding-top: 36px !important;
    }
    footer.footer .footer-col-title h4,
    footer.footer h4 {
        margin-top: 16px !important;
    }
    footer.footer iframe {
        height: 180px !important;
    }

    /* Prevent horizontal overflow on wide embedded content */
    body, #main-container, #main-content-wrap { overflow-x: hidden; }

    /* Description body fonts slightly smaller on phone */
    .product-description-inline .product-description p,
    .product-description-inline .product-description li {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 480px) {
    h1.pageTitle { font-size: 22px !important; }
    .product-description-inline .product-description h2,
    .product-description-inline .section-title { font-size: 20px !important; }
    .calculatorTotal { font-size: 26px !important; }
}

/* ============================================================
   End Stage 2b
   ============================================================ */