/* Price info shown under the price on the product page and in the product box. */
/* The product box reserves a fixed 40px row for the price (min-height) while the price
   text itself is only ~17px, leaving ~23px unused underneath. Where this block follows the
   price, drop that reservation so the block occupies the empty space instead of stacking
   below it - the price text does not move, only what sits under it.
   On PDP, _ProductPrice.cshtml's wrapper is <div class="prices mb-4"> - Bootstrap's mb-4 (24px)
   is meant for the gap before the whole ProductPriceBottom zone, not for a block landing right
   under it (LIN-447: the anchor price directly under the main price uses exactly that spot) - so
   that margin is zeroed here too, the same way min-height already is for the PLP box case. */
/* General sibling combinator (~), not adjacent (+): since LIN-447 moved the anchor block to
   render after the loyalty block, ".prices" is no longer guaranteed to be immediately followed
   by ".xip-perstore-price-info" whenever ShowLowestPrice is off (the loyalty block, which carries
   no such class, becomes the immediate sibling instead) - this still needs to zero the gap once
   the anchor block eventually shows up later in the row. */
.prices:has(~ .xip-perstore-price-info) {
    min-height: 0;
    margin-bottom: 0;
}

.xip-perstore-price-info {
    /* Small gaps on purpose: sits just under the price, clear of the buy button. */
    margin: 3px 0 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #777;
}

.xip-perstore-price-info .price-label {
    margin: 0;
}

.xip-perstore-price-info .price-label + .price-label {
    margin-top: 2px;
}

/* Anchor price spec (LIN-447): color #545454, 11px. More specific than the parent's inherited
   12px/#777 default above, and still loses to an admin's own inline appearance override (an
   inline style attribute always wins over an external stylesheet rule), so this only sets what
   an untouched install looks like out of the box. */
.anchor-price {
    color: #545454;
    font-size: 11px;
}

/* Anchor price under the cart/checkout unit price (LIN-447 - plugin's shadow copy of
   Views/Shared/Components/OrderSummary/Default.cshtml). Scoped to that column's own siblings so
   this never touches the PDP/PLP anchor block, which gets its top spacing from its own wrapper. */
.product-unit-price + .anchor-price,
.product-unit-price-strikethrough + .anchor-price {
    margin-top: 4px;
}

/* Anchor price under the Mini Cart unit price (LIN-447 - plugin's shadow copy of
   Views/Shared/Components/FlyoutShoppingCart/Default.cshtml). Sits below the quantity/price row.
   Right-aligned to land under the price: the row above it (.mini-shopping-cart .item .data) is a
   flex row with space-between, so the quantity sits left and the unit price right, while this
   line is a plain block below and would otherwise start at the left, under the quantity. */
.mini-shopping-cart .anchor-price {
    margin-top: 2px;
    text-align: right;
}

/* Anchor price under the checkout sidebar's line subtotal (LIN-447 - plugin's shadow copies of
   Views/Shared/Components/OrderSummary/CheckoutSlim.cshtml and Checkout.cshtml). */
.subtotal .anchor-price {
    margin-top: 2px;
}

/* Anchor price under the compared products' price (LIN-447 - plugin's shadow copy of
   Views/Product/CompareProducts.cshtml). The cell is centred by the theme (.text-center) and the
   label follows it, so only the same small gap the other surfaces give it is needed here. */
.compare-products-table tr.product-price .anchor-price {
    margin-top: 4px;
}

/* Anchor price under the price in the search-box autocomplete dropdown (LIN-447 - plugin's shadow
   copy of Views/Shared/Components/SearchBox/Default.cshtml). The row's .autocomplete-details is a
   flex column holding name / price, so the line simply follows the price; it only needs the same
   small gap the other surfaces give it. */
.ui-autocomplete .autocomplete-details .anchor-price {
    margin-top: 2px;
}

/* The theme gives EVERY <span> in an autocomplete row `margin-left: 1.5rem` and a fixed
   .9rem/normal font (.ui-menu-item .ui-menu-item-wrapper span, main.css). That is written for the
   row's name/price pair, which are one span each; the anchor line is two spans, so its second one
   - the amount - was pushed a full 1.5rem away from its own label, and the theme's font size also
   overrode both the 11px above and whatever the admin set in the label's appearance editor (an
   inline style on the wrapper does not reach the spans inside it).
   Undone here for this one line only, which then reads like the anchor price everywhere else: the
   label in its own font with the amount right beside it. Deliberately one class more specific than
   the theme's rule, so it wins regardless of which stylesheet the browser loaded last. */
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .anchor-price span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* Only the SECOND span loses the theme's 1.5rem. The first one keeps it, because that is the very
   indent the row's name and price get from the same rule - zeroing it too pulled the anchor line
   out to the left of the price it belongs under. Left as a margin rather than an indent of our
   own so the line stays aligned at any width, desktop and mobile alike: whatever the theme gives
   the name and the price, this span is given by the identical declaration.

   Zero, not a small margin: the single space between the two spans in the markup is the whole
   gap, which is exactly what separates them on the product page, where no such rule applies. */
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .anchor-price span + span {
    margin-left: 0;
}

/* PLP layout (LIN-447 + loyalty block, both plugin- and store-owned).
   The theme's product box (_ProductBox.cshtml) only has widget zones ABOVE the price - there is
   no zone that actually sits below it, confirmed by reading the theme. Flexbox reordering is the
   only way to land content between the price and the buttons without a theme change, so the
   card-footer is a flex column and the buttons are pinned last.

   The plugin's own blocks are NOT part of that order scale: PerStorePriceZone wraps all three in
   .xip-perstore-price-zone on this surface (see the note in its Default.cshtml), so they are one
   flex child that lands right under the price, with lowest -> loyalty -> anchor decided by
   document order inside it. They used to be three separate children sharing the row with whatever
   else renders into the same widget zone - the delivery badge (.product-decoration-wrapper) among
   them - which is how the anchor price ended up at the bottom of the card: the order:2 it needed
   to stay below a loyalty block carrying order:1 from the store's own template also pushed it
   below that badge.

   Scoped to the product box's own card-footer (.card.mobile-card > .card-footer) so this never
   touches an unrelated .card-footer elsewhere on the page. */
.card.mobile-card > .card-footer {
    display: flex;
    flex-direction: column;
}
.card.mobile-card > .card-footer > .product-actions {
    order: 3;
}

/* Line these labels up with the price. The price column is right-aligned here (.product-price
   carries the theme's .text-end), unlike the product page where it reads left, and these are
   prices too - left-aligned they read as a caption of the card rather than part of the price.
   Targeted at the plugin's own blocks rather than the wrapper, so the loyalty block, which is the
   store's own markup and brings its own alignment and insets, is left exactly as it renders
   today. */
.card.mobile-card > .card-footer > .xip-perstore-price-zone .xip-perstore-price-info {
    text-align: right;
}

/* The same side inset the price has, and from the same breakpoint: main.css gives
   .card-footer .product-price this padding only from 576px up, and below that the card-footer's
   own padding insets the price instead. The anchor block used to apply 1rem unconditionally,
   which indented it past the price on the narrowest screens. */
@media (min-width: 576px) {
    .card.mobile-card > .card-footer > .xip-perstore-price-zone .xip-perstore-price-info {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Below 576px the theme puts two separate gaps under the price, and the anchor label lands after
   both of them: `.card-footer .product-price { min-height: 42px }` in main.css's
   @media (max-width: 575.98px) block, and the `mb-3` utility on the element itself - which the
   very same markup drops to `mb-sm-1` from 576px up. Together they read as roughly 36px of empty
   space on a phone against 4px on desktop, which is why the label looked like it belonged to the
   buttons rather than to the price.

   Only the margin is touched, and only down to the `mb-sm-1` the theme itself uses one breakpoint
   higher - so the phone gets the desktop's spacing and nothing more is invented here.

   The 42px reserve itself is deliberately LEFT ALONE: it is what makes a one-line price occupy
   the same height as a discounted two-line one, which is what keeps every card's buttons on the
   same line across a row. The anchor price is an addition to these cards - it does not get to
   change how they line up.

   What the reserve does NOT have to decide is WHERE inside those 42px the price sits. The box is
   a flex column below 576px (`d-flex flex-column` in the markup) and the theme's
   `justify-content-start` utility parks the price at the top of it, which is what left the ~20px
   of slack sitting between the price and the anchor label under it. Flipping that one box to
   flex-end drops the price to the bottom of its own reserve: the slack moves ABOVE the price,
   where it is simply air in the card, and the label lands directly under the price it belongs to.
   The box still measures 42px, so everything after it - label, buttons - stays exactly where the
   theme puts it, on every card. Confined to the phone breakpoint, where the box is a column; from
   576px up it is `flex-sm-row` and justify-content would move the price sideways instead.

   Scoped to a price that actually has the plugin's block after it, inside the product box's own
   card-footer, so any card this plugin renders nothing into keeps the theme's layout exactly.
   `!important` on both because `mb-3` and `justify-content-start` are Bootstrap utilities and
   carry their own; this selector outranks them. */
@media (max-width: 575.98px) {
    .card.mobile-card > .card-footer > .product-price:has(~ .xip-perstore-price-zone) {
        justify-content: flex-end !important;
        margin-bottom: .25rem !important;
    }
}

/* Hide the redundant struck-through "Cijena" (non-discounted price) line on the product page
   when a discount is active. It repeats the pre-discount price, so the customer sees three
   prices (Stara cijena / Cijena / Vaša cijena) - confusing. "Stara cijena" (old price) and
   "Vaša cijena" (your price) stay. The .non-discounted-price class is applied ONLY while a
   discount is present, so this never hides the actual price. Scoped to .prices = product page
   only; product boxes use .overview / .variant-overview and are left untouched. */
.prices .non-discounted-price {
    display: none;
}