/**
 * Products CSS
 * -----------------------------------------------------------------------
 * Styles for the products archive (/products/) and all single product pages.
 * Per-product overrides are scoped by WordPress post ID (e.g. .postid-271).
 * -----------------------------------------------------------------------
 */


/* ==========================================================================
   Products Archive — /products/
   ========================================================================== */

/* Product card — each individual card in the archive grid */
.single-product { padding: 0; flex-direction: column; }

/* Filter sidebar — sticky filter form on the left side of the archive */
.dce-basic-form-products { margin: 10px 0 !important; position: sticky !important; top: 100px !important; z-index: 20 !important; background: #fff; padding: 10px 0 !important; }

/* Archive grid — left-aligns cards instead of centering them */
.products-grid { justify-content: flex-start; gap: 20px; }

/* Responsive grid columns */
@media screen and (max-width: 600px) {
    .single-product { width: 100%; }
}
@media (min-width: 601px) and (max-width: 767px) {
    .single-product { width: 44% !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .single-product { width: 32%; }
    .products-grid { gap: 14px; }
}
@media screen and (min-width: 1024px) {
    /* Desktop: sidebar + grid layout, card hover reveals excerpt */
    .single-product { width: 32%; }
    .products-grid { gap: 15px; }
    .products-view .elementor-widget-container { display: flex; flex-direction: row; }
    .dce-view-results-wrapper { width: 80%; }
    .dce-basic-form-products { max-width: 20%; margin-right: 20px !important; }
    .excerpt-container { height: 0; transition: all 0.5s ease-out; }
    .product-excerpt { opacity: 0; transition: all 0.3s ease-out; }
    .single-produc-template:hover .excerpt-container { height: 200px; }
    .single-produc-template:hover .product-excerpt { opacity: 1; }
}


/* ==========================================================================
   Single Product — Shared Styles (used across all product pages)
   ========================================================================== */

/* Accessory product type — hides the image area and removes content padding
   Used on accessory/consumable products that have no hero image */
.accessory .dce-image-area { display: none !important; }
.accessory .dce-content-area { padding: 0px !important; }

/* Product hero — full-bleed background image section at the top of each product page */
.product-hero { background-size: cover !important; background-position: right bottom !important; background-repeat: no-repeat; }
.product-hero ul { padding-inline-start: 10px !important; }

/* Accordion item layout — image + text side by side inside accordion panels */
.accordion-item-layout { margin: 15px 0; align-items: center; display: flex; flex-direction: row; }
.accordion-item-layout-image { width: 25% !important; margin-right: 20px; }
.accordion-item-layout-content { width: 75% !important; }

/* Spec table — two-column technical specifications table on product pages */
.spec-table-container { width: 100%; }
.spec-table table { width: 100% !important; }
.spec-table td { width: 50%; }
.spec-table tr { height: 40px; }
.spec-table tr, .spec-table td { border-bottom: dotted 1px; }
.spec-table-container ul { padding-inline-start: 15px !important; }

/* Supply/ordering table — 3-column table (part number, description, price) used on product order pages */
.supply-table table { width: 100%; }
.supply-table tr { height: 40px; }
.supply-table tr, .supply-table td { border-bottom: dotted 1px #d3d3d3; }
.supply-table td:nth-child(1), .supply-table th:nth-child(1) { width: 20%; }
.supply-table td:nth-child(2), .supply-table th:nth-child(2) { width: 30%; }
.supply-table td:nth-child(3), .supply-table th:nth-child(3) { width: 50%; }

/* DataTables plugin — hides the "Showing X of Y entries" info row below supply tables */
.dataTables_info { display: none; }

/* Flex bullet columns — used to split long bullet lists into 2, 3, or 4 columns on product pages */
@media (min-width: 769px) {
    .flex-bullet-2c { column-count: 2; column-gap: 50px; }
    .flex-bullet-2c li { margin-bottom: 10px; break-inside: avoid; }
    .flex-bullet-3c { column-count: 3; column-gap: 50px; }
    .flex-bullet-4c { column-count: 4; }
    /* Swiper nav buttons — white background on product carousel columns */
    .cols-car .swiper-button-next,
    .cols-car .swiper-button-prev { background: #fff; padding: 3px; }
}
@media (max-width: 1024px) { .flex-bullet-4c { column-count: 3; } }
@media (max-width: 768px) {
    .flex-bullet-4c { column-count: 1; }
    .flex-bullet-2c { column-count: 1 !important; }
    .flex-bullet-2c ul { padding: 20px !important; }
}

/* Hotspot tooltip — hides interactive hotspot tooltips on mobile (too small to be usable) */
@media (max-width: 768px) { .e-hotspot--tooltip-position { display: none; } }

/* Grid box repeater — dark blue card grid used in "Why" / features sections on product pages
   Hover changes background to orange (brand secondary color) */
.grid-box-repeater { border: solid 1px #fff; padding: 30px; height: 100%; transition: 0.3s; background: var(--e-global-color-primary); }
.grid-box-repeater-content { display: flex; flex-direction: column; }
.grid-box-repeater:hover { background-color: var(--e-global-color-b270943); }
.grid-box-repeater:hover .grid-box-repeater-title h3 { color: var(--e-global-color-secondary); }
.grid-box-repeater-title h3 { color: #fff; }
.grid_box_repeater_content { color: #fff; }
.divider-grid { width: 50px; height: 2px; background-color: #fff; margin: 20px 0; }

/* Various model table — alternating row colors for model comparison tables on product pages */
.various-model-table:nth-child(even) { background-color: #f0f0f0; }

/* Section 006 repeater — background color for the ACF repeater in section "006" on product pages */
.section006 .dce-acf-repeater-item { background: var(--e-global-color-ced374f); align-self: stretch !important; padding: 20px; height: auto !important; }

/* Flexible image section — forces images to cover their container on product detail sections */
.flexible-image-section img { object-fit: cover !important; }

/* Why Carousel — animated expanding swiper used in "Why Micromeritics" sections on product pages
   Active slide expands to 78%, next slide collapses to 20%, content fades in */
@keyframes p-fadeIn {
    0%   { opacity: 0; }
    80%  { opacity: 0; }
    100% { opacity: 1; }
}
@media (min-width: 1300px) {
    .why-carousel .swiper-slide { transition: width 0.5s ease-in-out !important; }
    .why-carousel .swiper-slide-next { width: 20% !important; padding: 0 !important; }
    .why-carousel .swiper-slide-active { width: 78% !important; max-height: 600px !important; }
    .why-carousel .dynamic-content-for-elementor-acf p { transition: opacity 1s ease-in-out !important; transition-delay: 0.8s !important; opacity: 0; }
    .why-carousel .swiper-slide-active .dynamic-content-for-elementor-acf p { opacity: 1; }
    .why-carousel .swiper-slide-next .dynamic-content-for-elementor-acf p { font-size: 1px; height: 1px; overflow: hidden; }
    .why-carousel-image-container { opacity: 0; }
    .why-carousel .swiper-slide-active .why-carousel-image-container { opacity: 0; animation: p-fadeIn 1s ease-in-out forwards; }
    .why-carousel .why-carousel-content-container h3 { width: 200px; }
    .why-carousel .swiper-slide-active .why-carousel-content-container h3 { width: 100%; opacity: 0; animation: p-fadeIn 1s ease-in-out forwards; }
}


/* ==========================================================================
   Single Product — Per Product Overrides
   Scoped by WordPress post ID (body class .postid-XXX)
   ========================================================================== */

/* ASAP 2020 Plus — postid-271 (/asap-2020-plus/)
   Shifts and sizes the hero product image at different breakpoints */
@media (min-width: 1440px) {
    .postid-271 .product-hero-image { transform: translateX(-100px); }
    .postid-271 .product-hero-image img { max-width: 600px !important; }
}
@media (min-width: 1023px) and (max-width: 1439px) {
    .postid-271 .product-hero-image { transform: translateX(-100px) !important; transform: translateY(100px) !important; }
    .postid-271 .product-hero-image img { max-width: 400px !important; }
}

/* Accupore — postid-6506 (/accupore/)
   Custom overview cards, two-section layout, and bubble size measurement table */
.accupore-overview-container { display: flex; flex-direction: row; justify-content: space-between; }
.accupore-overview { width: 32%; color: #fff; background: var(--e-global-color-primary); padding: 30px; display: flex; flex-direction: column; }
.accupore-overview-icon { padding: 10px; }
.accupore-overview-icon img { max-width: 60px; }
.accupore-overview-content { display: flex; flex-direction: column; align-content: flex-start; justify-content: center; }
.accupore-1 { display: flex; min-height: 240px; flex-direction: row; }
.accupore-1-image { width: 50%; padding: 20px; }
.accupore-1-image img { max-width: 300px; }
.accupore-2 { display: flex; flex-direction: row; margin-top: 20px; }
.accupore-2-a { width: 50%; padding: 20px; background: #f0f0f0; }
.accupore-2-image { width: 50%; padding: 30px; }
.accupore-3-text { min-height: 280px; }
.accupore-3-image { text-align: center; margin-top: 50px; }

/* Accupore custom swiper — small centered swiper for the particle size result carousel */
@media (min-width: 1024px) { .my-custom-swiper { width: 230px !important; } }
.my-custom-swiper { margin: 50px auto; width: 300px; }
.my-custom-swiper .swiper-button-next,
.my-custom-swiper .swiper-button-prev { color: #fff; font-size: 22px; font-weight: 700; z-index: 33; }
.my-custom-swiper .swiper-button-prev { transform: translateX(-60px); }
.my-custom-swiper .swiper-button-next { transform: translateX(60px); }

/* Accupore postid-6506 specific — full-width DCE field and min-height on repeater titles */
.postid-6506 .elementor-4381 .elementor-element.elementor-element-bd7e575 .dynamic-content-for-elementor-acf { width: 100%; }
.postid-6506 .grid-box-repeater-title { min-height: 70px; }

/* Accupore — re-shows icon box descriptions on mobile (global CSS hides them; Accupore needs them visible) */
@media (max-width: 600px) {
    .postid-6506 .elementor-icon-box-description { display: block; }
}

/* Accupore bubble size table — #first-bubble is the measurement results comparison table */
#first-bubble { width: 100%; border-collapse: collapse; font-family: 'Montserrat', sans-serif; font-size: 14px; }
#first-bubble td { border: 1px solid #dee2e6; padding: 10px !important; text-align: right; color: #1f3363; background-color: #fff; }
#first-bubble .top-th { border: none; background-color: #2b4a7d; color: #fff; text-align: center !important; }
#first-bubble th { background-color: #c9d5e4; padding: 15px; text-align: left; color: #2b4a7d; font-weight: 500; border: 1px solid #fff; }
#first-bubble .average-row td,
#first-bubble .stddev-row td { background-color: #2b4a7d; color: #fff; }
@media (max-width: 768px) {
    #first-bubble { font-size: 10px; }
    #first-bubble td { width: 20% !important; font-size: 10px; padding: 10px !important; }
    #first-bubble th { font-size: 7px; font-weight: 900; line-height: 11px; }
    #first-bubble .average-row td, #first-bubble .stddev-row td { font-size: 10px; line-height: 11px; padding: 10px !important; }
    .accupore-overview-container { flex-direction: column; }
    .accupore-overview { width: 100%; }
    .accupore-2 { flex-direction: column; }
    .accupore-2-a, .accupore-2-image { width: 100%; }
}
@media (max-width: 1440px) {
    .accupore-overview-container { display: flex; flex-direction: column; width: 100% !important; }
    .accupore-overview { width: 100% !important; padding: 20px !important; flex-direction: row; margin-bottom: 10px; }
}
@media (max-width: 600px) {
    .accupore-1, .accupore-2 { flex-direction: column; }
    .accupore-2-a, .accupore-2-image { width: 100%; }
    .accupore-1-image { width: 100%; }
}

/* Geopyc — postid-3042 (/geopyc-1380/)
   Limits hero image size and fixes image height in the product listing section */
@media (max-width: 1024px) { .postid-3042 .product-hero-image img { width: 370px !important; height: auto !important; } }
.postid-3042 .product-hero-image img { max-width: 450px !important; }
.postid-3042 .pli-image img { height: 200px !important; }

/* Autopore — postid-268 (/autopore-iv-9500/)
   Tall hero image with no bottom padding; scales down at smaller viewports */
.postid-268 .product-hero-image img { height: 600px !important; }
.postid-268 .product-hero-image-container { padding: 0 !important; }
.postid-268 .product-hero { padding-bottom: 0px !important; }
@media (max-width: 1390px) {
    .postid-268 .product-hero-image img { max-width: 350px !important; height: 350px !important; }
}
@media (max-width: 600px) {
    .postid-268 .product-hero-image img { width: 320px !important; height: 350px !important; }
}

/* Mic-SAS — postid-3045 (/mic-sas/)
   Moves the grid box image to the top of the card, white lightbox background */
.postid-3045 .grid-box-repeater-image { width: 100px !important; order: -1; }
.postid-3045 .elementor-lightbox-image { background: #fff; padding: 100px; }

/* Accupyc — postid-272 (/accupyc-1340/)
   Limits hero image height, offsets the time icon, white lightbox background */
.postid-272 .product-hero-image img { max-height: 320px !important; }
.postid-272 .time-icon { margin-left: 100px; }
.postid-272 .elementor-lightbox-image { background: #fff; padding: 100px; }
@media (max-width: 600px) { .accupyc-ex { flex-direction: column !important; } }
/* Accupyc volume table — removes borders and adds padding for the measurement volume table */
.accupyc-volume td { border: 0; padding: 20px; }

/* Flow Reactor — postid-263 (/flow-reactor/)
   White lightbox, contained carousel images, system config flex layout */
.postid-263 .elementor-lightbox-image { background: #fff; padding: 100px; }
.postid-263 .carousel-v2-image img { max-height: 300px; object-fit: contain; }
.postid-263 .fr-sys-config-container { display: flex; column-gap: 20px; }
.postid-263 .fr-sys-config-container .fr-box { flex: 1; display: flex; flex-direction: column; padding: 20px; background: rgb(228, 228, 228); align-items: center; justify-content: center; }
.fr-box img { width: 200px; height: auto; margin-bottom: 40px; }
/* Custom reactor section — image + text side by side */
.custom-reactor { display: flex; gap: 30px; }
.custom-reactor-img { display: flex; align-items: center; }
.custom-reactor-txt { display: flex; flex-direction: column; align-content: center; }
@media (max-width: 600px) {
    .postid-263 .fr-sys-config-container,
    .postid-263 .custom-reactor { flex-direction: column; }
}

/* FT4 Powder Rheometer — postid-262 (/ft4-powder-rheometer/)
   Adds right padding to a specific repeater item, inverts SVG icons to white */
.postid-262 .elementor-repeater-item-e408924 { padding-right: 50px !important; }
.ft4-svg { filter: invert(1); }

/* BTA — postid-267 (/bta/)
   Styles the two-column ACF repeater table: bold gray values, padded labels */
.postid-267 .dce-elementor-rendering-id-2 .dce-acf-repeater-table td:nth-child(2) { padding-left: 20px; font-weight: 600; color: #7e8286; }
.postid-267 .dce-elementor-rendering-id-2 .dce-acf-repeater-table td:nth-child(1) { padding-right: 20px; }

/* Mastersizer — postid-7390, 7454, 7518, 7511, 7442 (/mastersizer-3000/ and related pages)
   Controls the overview h2 visibility, padding, and image display across Mastersizer pages.
   All rules scoped to Mastersizer post IDs to prevent affecting other pages. */

/* Hide overview h2 on all Mastersizer pages except postid-7390 */
.postid-7390 #overview h2,
.postid-7454 #overview h2,
.postid-7518 #overview h2,
.postid-7511 #overview h2,
.postid-7442 #overview h2,
.postid-7390 .partial-overview h2,
.postid-7454 .partial-overview h2,
.postid-7518 .partial-overview h2,
.postid-7511 .partial-overview h2,
.postid-7442 .partial-overview h2 { display: none; }

/* postid-7390 — shows its own overview h2 */
.post-7390 #overview h2 { display: block !important; }

/* How it works section padding + overview padding on postid-7390 */
.postid-7390 #howitworks,
.postid-7390 #overview { padding: 50px 12%; }
.postid-7390 #howitworks img { margin: 20px 0px; }

/* postid-7454, 7518, 7511 — full-width overview, hides the overview image */
.postid-7454 #mp-overview, .postid-7518 #mp-overview, .postid-7511 #mp-overview { width: 100% !important; }
.postid-7454 .mp-overview-image, .postid-7518 .mp-overview-image, .postid-7511 .mp-overview-image { display: none; }

/* Hides embedded content blocks on Mastersizer pages only */
.postid-7390 .c-embed,
.postid-7454 .c-embed,
.postid-7518 .c-embed,
.postid-7511 .c-embed,
.postid-7442 .c-embed { display: none; }

/* postid-7442 — contained background image for the overview section */
.postid-7442 .mp-overview-image { background-size: contain !important; background-position: center center; }


/* ChemiSorb HTP — postid-266 (/chemisorb-htp/)
   Hides divider, centers card content, tall hero image; scales down at smaller viewports */
.postid-266 .divider-grid { display: none; }
.postid-266 .grid-box-repeater-content { text-align: center; }
.postid-266 .product-hero-image img { height: 600px !important; max-width: 600px !important; }
.postid-266 .product-hero-image-container { padding: 0 !important; }
@media (max-width: 1390px) {
    .postid-266 .product-hero-image img { max-width: 350px !important; height: 350px !important; }
}
@media (max-width: 600px) {
    .postid-266 .product-hero-image img { width: 320px !important; height: 350px !important; }
}