.custom-meta-inline {
  font-size: 12px;
  color: #0cc0df;
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.custom-product-info {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #303030;
}
/* ════════════════════════════════════════════════════════════════
   PMI: Quick View Modal — premium redesign (CSS-only, no markup/JS
   functionality changes). Replaces the old "responsive fix" block.

   Structure this relies on (YITH core markup, unchanged):
     #yith-quick-view-modal
       .yith-quick-view-overlay
       .yith-wcqv-wrapper                 (JS-sized/positioned box)
         .yith-wcqv-main                  (visual card: radius/shadow)
           .yith-wcqv-head > a.yith-quick-view-close   (close button)
           #yith-quick-view-content                     (ONLY scroller)
             .product > div[id^="product"]  (flex row: image | summary)
               div.images > a.woocommerce-main-image > img
               div.summary.entry-summary > .summary-content

   .yith-wcqv-wrapper's width/height below are read once by YITH's own
   JS (frontend.min.js) as the "natural" size, then clamped to the
   viewport with margin on resize — so these values are the effective
   desktop max-width/max-height (~1160px / ~760px), auto-shrinking on
   smaller screens without further JS changes.
   ════════════════════════════════════════════════════════════════ */

/* ── Overlay: soft + blurred instead of heavy black ──
   YITH prints the overlay's background as an inline <style> block
   from its admin color setting - !important is required to beat it. */
#yith-quick-view-modal .yith-quick-view-overlay {
    background: rgba(24, 26, 27, 0.42) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Let the overlay cover the full viewport (the old rule shrank the
   whole #yith-quick-view-modal to 95vw + re-centered it, which left
   two un-dimmed strips down the sides). */
#yith-quick-view-modal {
    max-width: none !important;
    width: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
}

/* ── Wrapper: desktop target size (auto-clamped by YITH's JS) ── */
/* YITH's own JS sets a fixed inline `top: 60px; left: 60px;` on this
   element (a corner offset, not real centering) every time the modal
   opens or the window resizes - confirmed via the live inline style
   attribute. Overriding position/top/left/transform here with
   !important beats that inline style and gives true, viewport-relative
   centering instead, regardless of what YITH's JS computed. */
#yith-quick-view-modal .yith-wcqv-wrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 1160px !important;
    height: 760px !important;
    /* The tablet/mobile media queries below already clamp this by
       viewport WIDTH, but a desktop-width window that's simply short
       (small laptop screen, browser not maximized, zoomed in) was never
       covered - the wrapper stayed a fixed 760px tall and ran off the
       bottom of the actual browser window, with nothing left for
       #yith-quick-view-content to scroll (its own box was sized to
       match the oversized wrapper, so it never overflowed internally).
       Capping height by viewport height here lets it shrink correctly,
       which is what actually makes the inner content scrollable. */
    max-height: 90vh !important;
    overflow: visible !important;
}

/* ── Main card: rounded corners, soft shadow, single scroll child ── */
#yith-quick-view-modal .yith-wcqv-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px -12px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}
#yith-quick-view-modal.open .yith-wcqv-main {
    transform: translateY(0) scale(1);
}

/* ── Close button: fixed top-right, never overlaps the (hidden)
   scrollbar because #yith-quick-view-content - not .yith-wcqv-main -
   is the scroll container. 24px from both edges, 44px hit area. ── */
#yith-quick-view-modal .yith-wcqv-head {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 20 !important;
}
#yith-quick-view-modal .yith-quick-view-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#yith-quick-view-modal .yith-quick-view-close:hover {
    background: #fff !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}
#yith-quick-view-modal .yith-quick-view-close svg {
    width: 18px !important;
    height: 18px !important;
    color: #303030 !important;
    stroke: #303030 !important;
}

/* ── Content: the ONLY scrollable region, header stays put ──
   Scrollbar hidden on every engine while wheel/touch/keyboard
   scrolling keeps working normally. */
#yith-quick-view-modal #yith-quick-view-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;      /* Firefox */
    -ms-overflow-style: none !important;    /* legacy Edge/IE */
}
#yith-quick-view-modal #yith-quick-view-content::-webkit-scrollbar {
    display: none !important;               /* Chrome, Safari, Chromium Edge */
    width: 0 !important;
    height: 0 !important;
}

/* ── Two-column layout: image | product details ── */
#yith-quick-view-modal #yith-quick-view-content div[id^="product"] {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* ── Image column: centered, contain (never crop/stretch), balanced
   whitespace, scales for any source image size. ── */
#yith-quick-view-modal #yith-quick-view-content div.images {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    background: #fafbfc !important;
}
#yith-quick-view-modal #yith-quick-view-content div.images a.woocommerce-main-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 560px !important;
}
#yith-quick-view-modal #yith-quick-view-content div.images img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 480px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ── Details column ── */
#yith-quick-view-modal #yith-quick-view-content div.summary.entry-summary {
    flex: 1 1 56% !important;
    max-width: 56% !important;
    padding: 40px 44px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    max-height: none !important;
}

/* Consistent vertical rhythm (16-24px) between every block in the
   summary - title, price, description, meta, add-to-cart - via one
   flex gap instead of scattered margins. */
#yith-quick-view-modal .summary-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
#yith-quick-view-modal .summary-content > * {
    margin: 0 !important;
}

/* Typographic hierarchy */
#yith-quick-view-modal #yith-quick-view-content .product_title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #232323 !important;
}
#yith-quick-view-modal #yith-quick-view-content .price {
    font-size: 22px !important;
}
#yith-quick-view-modal #yith-quick-view-content .woocommerce-product-details__short-description p {
    max-width: 46em !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
#yith-quick-view-modal #yith-quick-view-content .product_meta,
#yith-quick-view-modal #yith-quick-view-content .product_meta span {
    font-size: 13px !important;
}
#yith-quick-view-modal #yith-quick-view-content .product_meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* ── Add to Cart row: quantity + button same height, aligned,
   centered, no awkward stretching. ── */
#yith-quick-view-modal #yith-quick-view-content form.cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
}
/* For weight-priced products, the Flexible Quantity plugin injects the
   Maximum Weight / Product Price block as another child of this same
   form.cart (via woocommerce_before_add_to_cart_button), ahead of the
   quantity input and Add to Cart button. Without this rule it becomes
   just another item in the flex row above and gets squeezed onto the
   same line as quantity+button. Force it onto its own full-width line
   so it stacks above them, matching the Product Detail page layout. */
#yith-quick-view-modal #yith-quick-view-content form.cart .fq-price-calculator {
    flex: 1 1 100% !important;
    width: 100% !important;
}
#yith-quick-view-modal #yith-quick-view-content form.cart .quantity {
    display: flex !important;
    margin: 0 !important;
}
#yith-quick-view-modal #yith-quick-view-content .quantity .qty {
    height: 48px !important;
    width: 80px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
#yith-quick-view-modal #yith-quick-view-content .single_add_to_cart_button {
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 32px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* ── Tablet: keep two columns, reduce padding proportionally ── */
@media (min-width: 769px) and (max-width: 1024px) {
    #yith-quick-view-modal .yith-wcqv-wrapper {
        width: 92vw !important;
        max-width: 860px !important;
        height: 80vh !important;
        max-height: 700px !important;
    }
    #yith-quick-view-modal #yith-quick-view-content div.images,
    #yith-quick-view-modal #yith-quick-view-content div.summary.entry-summary {
        padding: 28px !important;
    }
}

/* ── Mobile: stack vertically, full-width button, sticky close ── */
@media (max-width: 768px) {
    #yith-quick-view-modal .yith-wcqv-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    #yith-quick-view-modal .yith-wcqv-main {
        border-radius: 0 !important;
    }
    #yith-quick-view-modal #yith-quick-view-content div[id^="product"] {
        flex-direction: column !important;
    }
    #yith-quick-view-modal #yith-quick-view-content div.images,
    #yith-quick-view-modal #yith-quick-view-content div.summary.entry-summary {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 22px !important;
    }
    #yith-quick-view-modal #yith-quick-view-content div.images {
        padding-top: 64px !important; /* clears the sticky close button */
    }
    #yith-quick-view-modal #yith-quick-view-content div.images img {
        max-height: 320px !important;
    }
    #yith-quick-view-modal #yith-quick-view-content form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #yith-quick-view-modal #yith-quick-view-content form.cart .quantity,
    #yith-quick-view-modal #yith-quick-view-content .quantity .qty,
    #yith-quick-view-modal #yith-quick-view-content .single_add_to_cart_button {
        width: 100% !important;
    }
}


/* ── "Maximum Weight (lbs): 10" — force correct position, high specificity ── */
table.shop_table tbody tr.cart_item td.product-name dl.variation {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    position: static !important;
}

table.shop_table tbody tr.cart_item td.product-name dl.variation dt.variation-MaximumWeightlbs,
table.shop_table tbody tr.cart_item td.product-name dl.variation dd.variation-MaximumWeightlbs {
    display: inline-block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important;
    background: none !important;
    border: none !important;
    color: inherit !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: none !important;
}

table.shop_table tbody tr.cart_item td.product-name dl.variation dt.variation-MaximumWeightlbs {
    order: 1 !important;
   
}

table.shop_table tbody tr.cart_item td.product-name dl.variation dd.variation-MaximumWeightlbs {
    order: 2 !important;
}

table.shop_table tbody tr.cart_item td.product-name dl.variation dd.variation-MaximumWeightlbs p {
    display: inline !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}
/* ── YITH Quick View: match site theme colors ── */

/* Price color → site cyan */
#yith-quick-view-content .price,
#yith-quick-view-content .price .woocommerce-Price-amount,
#yith-quick-view-content .price-unit {
    color: #00bcd4 !important;
    font-weight: 600 !important;
}

/* "per lb" unit text after the price (product page + Quick View).
   .pmi-price-unit intentionally has no rules of its own - it inherits
   font family/weight/size/color straight from the price it's rendered
   inside, so it reads as part of the price rather than a separate label.
   Only spacing is added, to keep it visually separated from the digits. */
.pmi-price-unit {
    margin-left: .25em;
}

/* Product title → match site's dark heading color */
#yith-quick-view-content .product_title {
    color: #303030 !important;
    font-family: inherit !important;
}

/* Description text → match site body text */
#yith-quick-view-content .woocommerce-product-details__short-description p {
    color: #555 !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
}

/* Add to cart button → site cyan instead of purple */
#yith-quick-view-content .single_add_to_cart_button {
    background-color: #00bcd4 !important;
    border: 1px solid #00bcd4 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
}

#yith-quick-view-content .single_add_to_cart_button:hover {
    background-color: #00a5bb !important;
    border-color: #00a5bb !important;
}

/* Quantity input → clean border matching site inputs */
#yith-quick-view-content .quantity .qty {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    color: #303030 !important;
}

/* SKU / Category / Brand labels → subtle site-matching gray */
#yith-quick-view-content .product_meta,
#yith-quick-view-content .product_meta span {
    color: #555 !important;
    font-size: 14px !important;
}

#yith-quick-view-content .product_meta a {
    color: #00bcd4 !important;
    text-decoration: none !important;
}

#yith-quick-view-content .product_meta a:hover {
    text-decoration: underline !important;
}

/* Close (×) icon → subtle, matches site's understated UI */
.yith-quick-view-close svg {
    color: #303030 !important;
    stroke: #303030 !important;
}

/* ══════════════════════════════════════════════════════════════
   "Maximum Weight (lbs)" / "Product Price" rows on the product page
   (Flexible Quantity calculator). Rebuilt as flex rows — the plugin's
   own markup was a <table>, which forced every row to share one
   column width (sized to the widest label), producing an uneven gap
   before shorter values. This is the single source of styling for
   these rows; do not duplicate spacing/colon rules elsewhere (they
   previously also lived in the Customizer's Additional CSS, which
   caused doubled colons — removed from there).
   ══════════════════════════════════════════════════════════════ */
.fq-price-calculator {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 24px;
}

.fq-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}

/* Match the "Brand:" / "Kashrut:" labels above (.posted_in,
   .woocommerce-product-attributes-item__label): 16px / 400 / Jost / #000. */
.fq-price-row__label {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
}

.fq-price-row__label::after {
    content: ":";
}

/* Reset the plugin's own label sizing — without this, the label gets
   a fixed height + overflow:hidden and clips onto 2 lines whenever
   the column narrows (eg. inside the YITH Quick View modal). */
.fq-price-row__label label {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* Match the "Brand"/"Kashrut" values (their <a> links): 16px / 400 / #505050.
   The calculated price itself keeps the site's teal accent (below). */
.fq-price-row__value {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #505050;
}

.fq-price-row.calculated-price .fq-price-row__value {
    color: #0cc0df;
    font-weight: 500;
}

/* The weight field's range is fixed per product (min = max), so it's
   effectively a read-only value — render it as plain text, not a
   boxed form input. */
.fq-price-row__value input.amount_needed {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    width: auto;
    font: inherit;
    color: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fq-price-row__value input.amount_needed::-webkit-outer-spin-button,
.fq-price-row__value input.amount_needed::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Quick View: keep "SKU: KS038970" on one line ──
   The inner .sku span is display:block by default, forcing the value
   onto its own line below the "SKU:" label. */
.yith-wcqv-main .sku_wrapper .sku {
    display: inline !important;
}

/* ── Quick View: hide Tag (internal use only, not customer-facing) ── */
.yith-wcqv-main .tagged_as {
    display: none !important;
}

/* ── Quick View: Kashrut line matches Brand/Category styling ── */
.yith-wcqv-main .pmi-kashrut {
    display: block;
}

/* ════════════════════════════════════════════════════════════════
   Mobile/Tablet header: make the cart icon match the hamburger
   button (same size, border and radius) instead of the mismatched
   plain grey circle, and give both a bit of breathing room.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* The icon's own parent container (an Elementor layout column) is set
       to a fixed 5% width. At tablet widths that's only ~35-40px — less
       than the 45px icon needs — so the flex item shrinks and the icon
       gets visibly clipped/squeezed. Force it (and the icon itself) to
       never shrink below the size the button actually needs. */
    .elementor-element-80dc886 {
        width: auto !important;
        min-width: 53px !important;
        flex-shrink: 0 !important;
    }

    .pmi-header-cart-icon {
        margin-right: 8px;
        flex-shrink: 0 !important;
        width: auto !important;
    }

    .pmi-header-cart-icon .elementor-icon {
        width: 45px !important;
        height: 43px !important;
        background-color: #fff !important;
        border: 1px solid #000 !important;
        border-radius: 6px !important;
        color: #303030 !important;
        flex-shrink: 0 !important;
    }

    .pmi-header-cart-icon .elementor-icon:hover {
        background-color: #f5f5f5 !important;
    }

    .pmi-header-cart-icon .elementor-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}
/* Header cart count badge */
.pmi-header-cart-icon .elementor-icon {
	position: relative;
	overflow: visible;
}

.pmi-cart-count {
	display: none;
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

/* ── Single product page: meta line shows only Brand + Kashrut ──
   Category and Tag are still fully functional (taxonomy pages, filters,
   order data untouched) — just hidden from this specific summary line,
   to match the original simpler product-page design. This theme's
   Elementor template wraps the meta line in .wpr-product-meta (not
   WooCommerce's default .summary), hence the selector below. */
.single-product .wpr-product-meta .product_meta .posted_in:has(a[href*="/product-category/"]) {
    display: none !important;
}
.single-product .wpr-product-meta .product_meta .tagged_as {
    display: none !important;
}

/* ── Follow-up UI tweaks: Kashrut on its own row, Add to Cart spacing,
   product excerpt text in black ── */
.single-product .wpr-product-meta .product_meta {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
.single-product .wpr-product-meta .product_meta > .posted_in {
    flex: 0 0 100% !important;
    display: block !important;
}
.single-product .single_add_to_cart_button {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}
.single-product .wpr-product-excerpt,
.single-product .wpr-product-excerpt p {
    color: #000000 !important;
}

/* ── Hide "back to top" button site-wide (desktop, tablet, mobile) ── */
.elementor-widget-wpr-back-to-top,
.wpr-stt-btn {
    display: none !important;
}

/* ── Shop sidebar search button color ── */
html body #product-filter .plugincy-search-submit {
    background-color: #0cc0df !important;
}

/* ── Additional Information table: keep label + value on one row
   on mobile/tablet too ──
   The widget switches th/td to display:block on small screens (each
   attribute splits into a label line then a value line below it,
   with the label box keeping its narrow desktop width). Force the
   table back to real table/table-row/table-cell layout at all sizes
   so "Weight | 10 lbs" etc. stays a single row like on desktop. */
@media (max-width: 1024px) {
    .single-product .woocommerce-product-attributes {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    .single-product .woocommerce-product-attributes tbody {
        display: table-row-group !important;
    }
    .single-product .woocommerce-product-attributes tr {
        display: table-row !important;
        width: auto !important;
    }
    .single-product .woocommerce-product-attributes th.woocommerce-product-attributes-item__label,
    .single-product .woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
        display: table-cell !important;
        width: 40% !important;
        max-width: none !important;
        vertical-align: middle !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }
    .single-product .woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
        width: 60% !important;
    }
}