/**
 * Single Product Page Styles
 *
 * Redesigned to match the IMS prototype (redesign-product-detail.html).
 * Everything is scoped under .ims-pdp (the outer <main>) so it can't leak
 * into other pages. Legacy class names that still exist in markup
 * (summary, entry-summary, product_title, woocommerce-product-gallery, etc.)
 * are targeted from within that scope.
 *
 * @package IMS_by_Soul_Country
 */

/* ==========================================================================
   Tokens (aligned with prototype)
   ========================================================================== */

.ims-pdp {
    --pdp-gold:         var(--color-cta, #FAB000);
    --pdp-gold-light:   #FDE17F;
    --pdp-dark:         var(--color-dark-charcoal, #111111);
    --pdp-text:         #111111;
    --pdp-text-muted:   #6B7280;
    --pdp-border:       #E8EAED;
    --pdp-gray-50:      #ffffff; /* Pass 1: white instead of pale-blue grey, to match listing card aesthetic. */
    --pdp-gray-100:     #E8EAED;
    --pdp-gray-200:     #D4D6DA;
    --pdp-gray-400:     #9CA3AF;
    --pdp-gray-500:     #6B7280;
    --pdp-gray-600:     #4B5563;
    --pdp-success:      #007041;
    --pdp-danger:       #DC2626;
    --pdp-radius:       8px;
    --pdp-radius-lg:    12px;
    --pdp-shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --pdp-shadow-lg:    0 8px 24px rgba(0,0,0,0.12);

    display: block;
    background: #ffffff;
    color: var(--pdp-text);
    padding: 0 0 2rem;
}

/* Kill the empty band that sits between the sticky header and the
   breadcrumbs on the PDP. Two separate rules stack to produce it, both
   from wrappers that aren't part of single-product.html itself:
   1) WooCommerce wraps the product in <div class="wp-block-group
      woocommerce product is-layout-flow"> directly under .wp-site-blocks,
      which picks up a 24px block-gap margin-top from WordPress core.
   2) Our theme's .woocommerce-main wrapper (added via
      ims_woocommerce_wrapper_start) gets `padding: 2rem 0` from
      assets/css/woocommerce.css — the archive override at the top of
      that file already strips this for category/shop pages, but
      single-product was never included.
   The listing template doesn't hit either because archive-product.html
   uses <main class="ims-product-listing"> as the direct .wp-site-blocks
   child, with no intermediate woocommerce wrappers. */
.wp-site-blocks > .wp-block-group.woocommerce.product {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

.single-product .woocommerce-main {
    padding-top: 0 !important;
}

.ims-pdp *,
.ims-pdp *::before,
.ims-pdp *::after {
    box-sizing: border-box;
}

.ims-pdp__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Breadcrumb (Woo default, restyled)
   ========================================================================== */

.ims-pdp .woocommerce-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    margin: 0;
    font-size: 12.5px;
    color: var(--pdp-text-muted);
    border-bottom: 1px solid var(--pdp-border);
}

.ims-pdp .woocommerce-breadcrumb a {
    color: var(--pdp-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ims-pdp .woocommerce-breadcrumb a:hover {
    color: var(--pdp-gold);
}

/* ==========================================================================
   Layout — override core/columns to behave as a grid
   ========================================================================== */

.ims-pdp .ims-pdp-layout.wp-block-columns,
.ims-pdp .ims-pdp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 20px 0 0;
    align-items: start;
    margin: 0;
    flex-wrap: nowrap;
}

.ims-pdp .ims-pdp-layout > .wp-block-column {
    flex-basis: auto !important;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.ims-pdp .ims-pdp-gallery {
    position: sticky;
    top: 100px;
    align-self: start;
}

/*
 * `position: sticky` already creates a positioning context, so the
 * absolutely-positioned volume-metric chip (.ims-pdp-vm-chip) inside
 * this column anchors to the gallery wrapper rather than to the page.
 * We still set `position: relative` on the *plain* gallery selector so
 * the chip continues to anchor correctly if the sticky rule is ever
 * scoped or overridden in a future layout tweak.
 */
.ims-pdp-gallery {
    position: relative;
}

/* Title block (core/post-title) */
.ims-pdp h1.ims-pdp-name,
.ims-pdp .ims-pdp-name {
    font-size: 26px;
    font-weight: 800;
    color: var(--pdp-dark);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    padding: 0;
}

/* ==========================================================================
   Gallery (WooCommerce default, restyled — minimal overrides so FlexSlider
   can still size and position slides correctly)
   ========================================================================== */

.ims-pdp-gallery .woocommerce-product-gallery {
    width: 100%;
    float: none;
    margin: 0;
    opacity: 1;
    position: relative;
}


.ims-pdp-gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

/* Frame the main image area */
.ims-pdp-gallery .flex-viewport,
.ims-pdp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__image:first-of-type,
.ims-pdp-gallery .woocommerce-product-gallery__image--placeholder {
    background: var(--pdp-gray-50);
    border: 1.5px solid var(--pdp-border);
    border-radius: var(--pdp-radius-lg);
    overflow: hidden;
    margin-bottom: 10px;
}

.ims-pdp-gallery .woocommerce-product-gallery__image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Thumbnail grid */
.ims-pdp-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

.ims-pdp-gallery .flex-control-thumbs li {
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
}

.ims-pdp-gallery .flex-control-thumbs li img {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    padding: 6px;
    border-radius: 8px;
    border: 2px solid var(--pdp-border);
    background: var(--pdp-gray-50);
    object-fit: contain;
    opacity: 1;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ims-pdp-gallery .flex-control-thumbs li img:hover {
    border-color: var(--pdp-gold-light);
}

.ims-pdp-gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--pdp-gold);
}

/* Zoom trigger */
.ims-pdp-gallery .woocommerce-product-gallery__trigger {
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--pdp-border);
    border-radius: 6px;
    padding: 6px;
    font-size: 12px;
    z-index: 5;
}

/* Hide WooCommerce's default on-sale chip in the gallery — both the
   classic-storefront class (.onsale) AND the block-gallery class
   (.wc-block-components-product-sale-badge). We surface sale status
   via the top-right red .ims-pdp-vm-chip (driven by the NetSuite
   volume metric meta) and via a strikethrough/discount in the price
   block, so the corner badge is redundant and visually competes with
   the chip. The block-based gallery (wp:woocommerce/product-image)
   honours `showSaleBadge:false` in the template attrs, but this rule
   keeps the chip hidden even if a cached/edited template revision
   still has the badge enabled. */
.ims-pdp-gallery .onsale,
.ims-pdp-gallery .wc-block-components-product-sale-badge,
.ims-pdp-gallery .wp-block-woocommerce-product-sale-badge {
    display: none !important;
}

/* ==========================================================================
   Info Column
   ========================================================================== */

.ims-pdp-info {
    width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Badges */
.ims-pdp-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ims-pdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.ims-pdp-badge svg {
    width: 12px;
    height: 12px;
}

/* Item-number tag/shield icon was previously rendered inline in the badge.
   It's now hidden so the badge is just the "Item # XXXXX" label. */
.ims-pdp-badge--part svg {
    display: none !important;
}

.ims-pdp-badge--part    { background: var(--pdp-gold-light); color: #111; }
.ims-pdp-badge--stock,
.ims-pdp-badge--return  { background: #D1FAE5; color: #065F46; }
.ims-pdp-badge--oos     { background: #FEE2E2; color: #991B1B; }
.ims-pdp-badge--catalog { background: var(--pdp-gray-100); color: var(--pdp-gray-600); }

/* Volume-metric chip (auto-derived from _netsuite_volume_metric).
 * Keeps the shape/size of the surrounding pills but uses the same
 * colour language as the hero slider and listing-card thumbnails so a
 * SALE / NEW / BESTSELLER flag reads identically site-wide. */
.ims-pdp-badge--vm {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ims-pdp-badge--vm-sale       { background: #DC2626; }
.ims-pdp-badge--vm-new        { background: #16A34A; }
.ims-pdp-badge--vm-bestseller { background: #1F2937; }

/*
 * Volume-metric corner chip overlaid on the PDP gallery (see the
 * `render_block` filter in includes/woocommerce-setup.php which injects
 * this element just inside `.ims-pdp-gallery`).
 *
 * Sits in the top-right of the gallery image area to mirror the
 * placement used on the listing-card thumbnails and the hero slider's
 * product cards, so SALE / NEW / BEST reads identically across every
 * catalog surface.
 */
.ims-pdp-vm-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
.ims-pdp-vm-chip--sale       { background: #DC2626; }
.ims-pdp-vm-chip--new        { background: #16A34A; }
.ims-pdp-vm-chip--bestseller { background: #1F2937; }

/* Title */
.ims-pdp-name {
    font-size: 26px;
    font-weight: 800;
    color: var(--pdp-dark);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    padding: 0;
}

/* Category trail */
.ims-pdp-category-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--pdp-text-muted);
}

.ims-pdp-category-trail a {
    color: var(--pdp-gold);
    text-decoration: none;
}

.ims-pdp-category-trail a:hover {
    color: #d89800;
}

.ims-pdp-category-trail .sep {
    color: var(--pdp-gray-400);
}

/* Price block */
.ims-pdp-price-block {
    background: var(--pdp-gray-50);
    border: 1.5px solid var(--pdp-border);
    border-radius: var(--pdp-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.ims-pdp-price-block .ims-product-pricing,
.ims-pdp-price-block .wp-block-ims-product-pricing {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

.ims-pdp-price-block .ims-product-pricing__amount {
    font-size: 30px;
    font-weight: 900;
    color: var(--pdp-dark);
    letter-spacing: -1px;
    line-height: 1.1;
}

.ims-pdp-price-block .ims-product-pricing__amount--call {
    font-size: 22px;
    letter-spacing: -0.5px;
}

.ims-pdp-price-block .ims-product-pricing__unit {
    font-size: 14px;
    color: var(--pdp-text-muted);
    font-weight: 500;
    text-transform: uppercase;
}

/* Sale display inside the PDP price card. Scale the strikethrough and
   discount pill up from the base sizes so they sit comfortably next to
   the 30px price amount, and tint the live price red to match the
   SALE chip in the gallery. */
.ims-pdp-price-block .ims-product-pricing__regular {
    font-size: 16px;
    color: var(--pdp-gray-400);
    margin-right: 4px;
    text-decoration-thickness: 2px;
}

.ims-pdp-price-block .ims-product-pricing__amount--sale {
    color: var(--pdp-danger);
}

.ims-pdp-price-block .ims-product-pricing__discount {
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

.ims-pdp-price-sub {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--pdp-text-muted);
}

.ims-pdp-price-sub a {
    color: var(--pdp-gold);
}

/* ==========================================================================
   Purchase Row — restyle ims/product-add-to-cart output
   ========================================================================== */

.ims-pdp .ims-pdp-purchase-row {
    margin-bottom: 16px;
}

.ims-pdp .ims-pdp-purchase-row .ims-product-add-to-cart-block,
.ims-pdp .ims-pdp-purchase-row .wp-block-ims-product-add-to-cart {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0;
    background: none;
    border: none;
}

/* Quantity input group */
.ims-pdp .ims-pdp-purchase-row .ims-atc-quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--pdp-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 40px;
    margin: 0;
    padding: 0;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-qty-btn {
    background: var(--pdp-gray-100);
    border: none;
    width: 32px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
    color: var(--pdp-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-qty-btn:hover {
    background: var(--pdp-gray-200);
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-qty-input {
    width: 48px;
    height: 38px;
    border: none;
    outline: none;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--pdp-text);
    background: #fff;
    padding: 0;
    -moz-appearance: textfield;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-qty-input::-webkit-outer-spin-button,
.ims-pdp .ims-pdp-purchase-row .ims-atc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Primary Add to Cart button */
.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--cart {
    flex: 1;
    min-width: 160px;
    background: var(--pdp-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    height: 40px;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--cart:hover {
    background: #333;
    transform: translateY(-1px);
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--cart.success {
    background: var(--pdp-gold);
    color: var(--pdp-dark);
}

/* Add to Quote outline button */
.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--quote {
    background: transparent;
    color: var(--pdp-gold);
    border: 2px solid var(--pdp-gold);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    height: 40px;
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--quote:hover {
    background: var(--pdp-gold-light);
}

.ims-pdp .ims-pdp-purchase-row .ims-atc-btn--quote.success {
    background: var(--pdp-gold);
    color: var(--pdp-dark);
}

/* ==========================================================================
   Meta List
   ========================================================================== */

.ims-pdp-meta-list {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--pdp-border);
    border-radius: var(--pdp-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.ims-pdp-meta-row {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--pdp-border);
    gap: 12px;
}

.ims-pdp-meta-row:last-child {
    border-bottom: none;
}

.ims-pdp-meta-row:nth-child(even) {
    background: var(--pdp-gray-50);
}

.ims-pdp-meta-key {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pdp-text-muted);
    min-width: 130px;
}

.ims-pdp-meta-val {
    font-size: 13px;
    color: var(--pdp-text);
}

.ims-pdp-meta-val.green { color: var(--pdp-success); font-weight: 600; }
.ims-pdp-meta-val.red   { color: var(--pdp-danger);  font-weight: 600; }

.ims-pdp-meta-val a {
    color: var(--pdp-gold);
    text-decoration: none;
}

.ims-pdp-meta-val a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Share
   ========================================================================== */

.ims-pdp-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.ims-pdp-share-label {
    font-size: 12px;
    color: var(--pdp-text-muted);
}

.ims-pdp-share-btn {
    padding: 6px 12px;
    border: 1px solid var(--pdp-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdp-text-muted);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ims-pdp-share-btn svg {
    width: 13px;
    height: 13px;
}

.ims-pdp-share-btn:hover {
    border-color: var(--pdp-gold);
    color: var(--pdp-gold);
}

/* Prop 65 sits just below share */
.ims-pdp-prop65 {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}

.ims-pdp-prop65 .ims-prop65-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ==========================================================================
   Tabs Section
   ========================================================================== */

.ims-pdp-tabs {
    padding: 24px 0 0;
    border-top: 1px solid var(--pdp-border);
    margin-top: 32px;
}

.ims-pdp-tab-list {
    display: flex;
    border-bottom: 2px solid var(--pdp-border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ims-pdp-tab-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pdp-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.ims-pdp-tab-btn:hover {
    color: var(--pdp-text);
}

.ims-pdp-tab-btn.is-active {
    color: var(--pdp-gold);
    border-bottom-color: var(--pdp-gold);
}

.ims-pdp-tab-panel {
    display: none;
    animation: imsPdpFade 0.2s ease;
}

.ims-pdp-tab-panel.is-active {
    display: block;
}

@keyframes imsPdpFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ims-pdp-tab-panel h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--pdp-dark);
    margin: 0 0 16px;
}

.ims-pdp-tab-panel p {
    font-size: 14px;
    color: var(--pdp-text-muted);
    line-height: 1.75;
    margin: 0 0 14px;
}

.ims-pdp-tab-panel ul,
.ims-pdp-tab-panel ol {
    font-size: 14px;
    color: var(--pdp-text-muted);
    line-height: 1.75;
    padding-left: 20px;
    margin: 0 0 14px;
}

/* Specs table */
.ims-pdp-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    border: 1.5px solid var(--pdp-border);
    border-radius: var(--pdp-radius);
    overflow: hidden;
}

.ims-pdp-specs-table th {
    background: var(--pdp-gray-50);
    padding: 10px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pdp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid var(--pdp-border);
    width: 40%;
}

.ims-pdp-specs-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--pdp-border);
    color: var(--pdp-text);
}

.ims-pdp-specs-table tr:last-child td,
.ims-pdp-specs-table tr:last-child th {
    border-bottom: none;
}

.ims-pdp-specs-table tr:nth-child(even) td,
.ims-pdp-specs-table tr:nth-child(even) th {
    background: var(--pdp-gray-50);
}

/* ==========================================================================
   Related Products (Woo default markup restyled to 4-col grid)
   ========================================================================== */

.ims-pdp-related {
    padding: 32px 0 16px;
}

.ims-pdp-related .related.products,
.ims-pdp-related .upsells.products {
    margin: 0;
    padding: 0;
    clear: both;
}

.ims-pdp-related .related > h2,
.ims-pdp-related .upsells > h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--pdp-dark);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
}

.ims-pdp-related ul.products,
.ims-pdp-related .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ims-pdp-related ul.products li.product,
.ims-pdp-related .products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: #fff;
    border-radius: var(--pdp-radius-lg);
    border: 1.5px solid var(--pdp-border);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.ims-pdp-related ul.products li.product:hover {
    box-shadow: var(--pdp-shadow-lg);
    transform: translateY(-2px);
}

.ims-pdp-related ul.products li.product > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ims-pdp-related ul.products li.product img {
    width: 100% !important;
    height: 140px;
    object-fit: contain;
    background: var(--pdp-gray-50);
    border-bottom: 1px solid var(--pdp-border);
    margin: 0 !important;
    padding: 16px;
    display: block;
}

.ims-pdp-related ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--pdp-text);
    line-height: 1.4;
    padding: 14px 14px 0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ims-pdp-related ul.products li.product .price {
    padding: 8px 14px 14px;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--pdp-dark);
}

.ims-pdp-related ul.products li.product .price del,
.ims-pdp-related ul.products li.product .price ins {
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: none;
    color: inherit;
}

.ims-pdp-related ul.products li.product .price del {
    color: var(--pdp-text-muted);
    text-decoration: line-through;
    font-weight: 500;
    margin-right: 6px;
}

.ims-pdp-related ul.products li.product .button {
    display: block;
    margin: 0 14px 14px;
    padding: 8px;
    background: var(--pdp-dark);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s ease;
    text-decoration: none;
}

.ims-pdp-related ul.products li.product .button:hover {
    background: #333;
}

/* ==========================================================================
   Loader states
   ========================================================================== */

.ims-pdp-purchase-row .single_add_to_cart_button.loading::after {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .ims-pdp-layout {
        gap: 24px;
    }

    .ims-pdp-related ul.products,
    .ims-pdp-related .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* Match the specificity of the base .ims-pdp .ims-pdp-layout.wp-block-columns
       selector so this override actually wins on mobile and the columns stack. */
    .ims-pdp .ims-pdp-layout.wp-block-columns,
    .ims-pdp .ims-pdp-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Match the specificity of the base .ims-pdp .ims-pdp-gallery rule so
       the sticky behavior is actually disabled on mobile. Without this,
       desktop's `position: sticky; top: 100px` keeps winning and the
       image floats over the info section as you scroll. */
    .ims-pdp .ims-pdp-gallery {
        position: static;
        top: auto;
        align-self: auto;
    }

    /* Force the main image to fill the full-width container on mobile.
       Many product photos have small intrinsic widths, so without an
       explicit width: 100% they stay at their natural pixel size and
       look like a thumbnail floating in a large frame. object-fit: contain
       (inherited from the base rule) preserves aspect ratio without
       distortion. max-height keeps it from dominating the viewport. */
    .ims-pdp .ims-pdp-gallery .woocommerce-product-gallery__image img,
    .ims-pdp .ims-pdp-gallery .wp-block-woocommerce-product-image img,
    .ims-pdp .ims-pdp-gallery .wc-block-components-product-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }

    /* Give the framed viewport a sensible aspect so the placeholder /
       loading state doesn't collapse before the gallery hydrates. */
    .ims-pdp .ims-pdp-gallery .flex-viewport,
    .ims-pdp .ims-pdp-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__image:first-of-type,
    .ims-pdp .ims-pdp-gallery .woocommerce-product-gallery__image--placeholder,
    .ims-pdp .ims-pdp-gallery .wp-block-woocommerce-product-gallery-large-image {
        min-height: 60vw;
    }

    /* Defensive reset: the All Products grid block ships rules that pin
       .wc-block-grid__product-image to 100x100 with !important. If that
       class ever ends up on or inside the PDP gallery, neutralize it so
       it can't shrink the main product image back down to a thumbnail. */
    .ims-pdp .ims-pdp-gallery .wc-block-grid__product-image,
    .ims-pdp .ims-pdp-gallery .wc-block-grid__product-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .ims-pdp-name {
        font-size: 20px;
    }

    .ims-pdp-purchase-row {
        flex-wrap: wrap;
    }

    .ims-pdp-related ul.products,
    .ims-pdp-related .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ims-pdp-related ul.products,
    .ims-pdp-related .products {
        grid-template-columns: 1fr;
    }

    .ims-pdp-meta-key {
        min-width: 100px;
    }
}


/* =============================================================
 * Per-product NetSuite Minimum Order Quantity inline note.
 * Rendered just below the .ims-quantity-wrapper on cards / PDP /
 * matrix rows when a product has _netsuite_minimum_quantity > 1.
 * ============================================================= */
.ims-pdp .ims-quantity-min-note,
.ims-pdp-purchase-row .ims-quantity-min-note,
.ims-product-add-to-cart-block .ims-quantity-min-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #6b7280;
    flex-basis: 100%;
}