/* --- Page --------------------------------------------------------------- */

/* Vertical rhythm from the shared token, so every layout 1 page clears the
   header by the same amount instead of each sheet picking its own literal. */
.app-shell .product.spad {
    padding: var(--app-page-top) 0 var(--app-page-bottom);
}

.app-shell .product .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--app-pad);
}

/* v1/base.css gives every .row a negative inline margin (half the gutter) to
   cancel the padding Bootstrap columns normally carry. The column padding is
   zeroed below, so that margin has nothing left to cancel and instead pulled
   the heading and the card grid ~11px left of the breadcrumb and chip row
   above them. Both halves have to be reset together or the two edges never
   line up. */
.app-shell .product > .container > .row {
    margin-inline: 0;
}

.app-shell .product > .container > .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: 0;
}

.app-shell .sub-categories {
    margin-bottom: 14px;
}

/* Inside the heading card the chip row is a second block under the title and
   its blurb, so a rule divides the two — as in the reference. Scoped to the
   card: where .sub-categories renders on its own elsewhere there is nothing
   above it to divide from. */
.app-shell .pl-head .sub-categories {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eceef1;
}

/* Inside the card the chips stay within its padding rather than bleeding to the
   frame edge: the full-bleed below is for a row sitting directly on the page,
   and here it would run the chips out past the divider and the label that now
   sit above them. They still scroll sideways when they do not fit. */
.app-shell .pl-head .sub-categories ul {
    margin-inline: 0;
    padding-inline: 0;
}

/* Section label above the chips ("SUB-CATEGORIES"). Small-caps and muted, so it
   names the row without competing with the category title above it.

   Keyed on .pl-subcat-label, not the .hero__categories__all it also carries:
   that second class is shared with the sidebar and several other layouts'
   templates, so styling it by name would be a wider target than intended. */
.app-shell .sub-categories .pl-subcat-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-shell .sub-categories ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    /* Full-bleed so the row runs to the frame edge and the next chip peeks,
       rather than stopping short at the section's padding. */
    margin-inline: calc(var(--app-pad) * -1);
    padding-inline: var(--app-pad);
}

.app-shell .sub-categories ul::-webkit-scrollbar {
    display: none;
}

.app-shell .sub-categories li {
    flex: 0 0 auto;
}

.app-shell .sub-categories li a {
    display: block;
    padding: 7px 14px;
    border: 1px solid #e4e6ea;
    border-radius: 18px;
    background: #fff;
    color: var(--app-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

/* Chips tint on hover but do not move: the row is an overflow-x scroller, so a
   transform would be clipped at its edges. */
.app-shell .sub-categories li:not(.active) a:hover {
    border-color: var(--app-theme);
    color: var(--app-theme);
    background: var(--app-theme-soft);
}

/* Current sub-category. The template marks the <li>, not the link. */
.app-shell .sub-categories li.active a {
    background: var(--app-theme);
    border-color: var(--app-theme);
    color: #fff;
}

/* --- Page heading ---------------------------------------------------------
   Title with its product-count badge on one line, and the sort control opposite.
   (The Bootstrap row this replaced held the sort in a 4-column grid with two
   empty spacer columns, which is why the control sat alone on the left.) */

.app-shell .pl-head {
    margin-bottom: 20px;
}

/* Title block and sort control at opposite ends, vertically centred on each
   other now that the left side is a single line. */
.app-shell .pl-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.app-shell .pl-head-titles {
    min-width: 0;
}

.app-shell .pl-head-titlerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.app-shell .pl-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--app-ink);
}

/* Soft theme-tinted pill beside the title, as in the reference. */
.app-shell .pl-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--app-theme-soft, #eef4ff);
    color: var(--app-theme);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* (.pl-desc is gone with the meta_description line it styled — that value is
   SEO copy written for a search result, not a page subtitle, so it dropped a
   paragraph between the heading and the products.) */

/* Sort: a label and its select on one line, pinned right. Still .filter__item
   so nothing that referenced the old wrapper breaks. */
.app-shell .filter__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
}

.app-shell .pl-sort-label {
    margin: 0;
    font-size: 13px;
    color: var(--app-muted);
    white-space: nowrap;
}

/* Below the title on a narrow screen, where the two side by side left the
   select too cramped to read. */
@media (max-width: 640px) {
    .app-shell .pl-head-main {
        flex-direction: column;
        align-items: stretch;
    }

    .app-shell .filter__item {
        justify-content: space-between;
    }
}

/* The inline `padding: 3px 0.75rem` this used to override is gone from the
   template, so no !important is needed any more. Sized to its content rather
   than stretched full width, which is what the old grid column did to it. */
.app-shell #sort_by {
    height: 40px;
    width: auto;
    min-width: 172px;
    padding: 0 12px;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--app-ink);
    background-color: #fff;
}

.app-shell #sort_by:focus {
    border-color: var(--app-theme);
    box-shadow: 0 0 0 3px var(--app-theme-soft);
    outline: 0;
}

.app-shell .products-merge {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    /* This element carries .row too, so it picks up base.css's negative inline
       margin — which on a grid has no column padding to cancel and just pushed
       the whole card grid left of the heading above it. */
    margin-inline: 0;
}

/* Two per line on a phone: four would leave each card too narrow for a name,
   price and two buttons. */
@media (max-width: 720px) {
    .app-shell .products-merge {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* The desktop card is a fixed-width float/column; in the grid the track sets
   the width, so the card fills its cell. */
.app-shell .products-merge > .product-sec-xls,
.app-shell .products-merge > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

.app-shell .product__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid #eceef1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    /* Containing block for the absolutely-positioned discount badge below. */
    position: relative;
}

/* .products-merge is a wrapping grid, not a scroller, so it does not clip —
   these cards can lift, unlike the home page's horizontally-scrolling rows. */
/* --- Card tag row ---------------------------------------------------------
   Sub-category as a tinted pill on the left, category as plain text on the
   right — the pair the reference shows across the top of each card, above the
   image. Matches the home screen's .app-card-tags treatment so a product reads
   the same in both places. */

.app-shell .pl-card-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    /* Holds the row's height when only one of the two is present, so the images
       below stay aligned across the grid. */
    min-height: 20px;
}

.app-shell .pl-card-tag {
    background: var(--app-theme-soft, #eef4ff);
    color: var(--app-theme);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    /* Never wraps: a second line here would push the image down on one card and
       not its neighbour. No blanket max-width — a flat cap truncated
       "Reverse Osmosis Water" even when the pill had the row to itself; it only
       has to yield when a category label sits beside it. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.app-shell .pl-card-tag:not(:last-child) {
    max-width: 62%;
}

.app-shell .pl-card-cat {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--app-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* --- Stock badge --------------------------------------------------------- */

.app-shell .pl-stock {
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e8f6ee;
    color: #17864a;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
}

.app-shell .pl-stock--out {
    background: #fdeceb;
    color: #c0392b;
}

.app-shell .product__item {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.app-shell .product__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(16, 24, 40, .15);
    border-color: var(--app-theme-border);
}

/* Image zoom inside the media frame, which already clips. */
.app-shell .product__item__pic img,
.app-shell .product-img-tag {
    transition: transform .4s ease;
}

.app-shell .product__item:hover .product__item__pic img,
.app-shell .product__item:hover .product-img-tag {
    transform: scale(1.07);
}

/* Product name warms to the theme colour as the card is hovered. */
.app-shell .product__item__text a {
    transition: color .2s ease;
}

.app-shell .product__item:hover .pd-name-all {
    color: var(--app-theme);
}

/* Both CTAs respond to the card, not just to themselves. */
.app-shell .product__item .add_to_cart,
.app-shell .product__item .subscribe_button,
.app-shell .pd-btn-row .site-btn {
    transition: filter .18s ease, background .18s ease, border-color .18s ease;
}

.app-shell .product__item:hover .add_to_cart,
.app-shell .product__item:hover .pd-btn-row .site-btn {
    filter: brightness(.93);
}

.app-shell .product__item:hover .subscribe_button {
    background: var(--app-theme);
    border-color: var(--app-theme);
    color: #fff;
}

.app-shell .product__item__pic {
    position: relative;
    aspect-ratio: 1 / 1;
    /* pb-100's padding-bottom would stack with the ratio and double the height. */
    padding-bottom: 0 !important;
    height: auto !important;
    border-radius: 10px;
    background-color: #fafafa;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: 8px;
}

.app-shell .product__item__pic img,
.app-shell .product-img-tag {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover action list (wishlist / compare) — a desktop affordance with no touch
   equivalent, and it covers the artwork on a small card. */
.app-shell .product__item__pic__hover {
    display: none;
}

/* --- Card text ---------------------------------------------------------- */

.app-shell .product__item__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    text-align: left;
}

/* The name is an <a>; without this it renders as blue underlined link text,
   which made the rows read as a list of links rather than cards. */
.app-shell .product__item__text a {
    color: var(--app-ink);
    text-decoration: none;
}

.app-shell .pd-name-all {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
    /* Clamped at two lines, but only as tall as the name needs. The
       min-height:35px this carried reserved a second line on EVERY card, so a
       one-line name ("Bebe Agua") hung a blank line under itself before the
       price. Cards still line up: .pd-btn-row is pushed to the bottom by its
       own auto margin, not by padding the name out. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-shell .brandName {
    display: block;
    font-size: 11px;
    color: var(--app-muted);
    margin-bottom: 2px;
}

/* The price + stepper row. Its .mb-2 resolves to 10px from base.css, which on
   top of the name's own margin left a visible band between the two; 6px keeps
   them related without crowding the buttons below. No !important needed —
   equal specificity to .app-shell .mb-2, and this sheet loads after base.css. */
.app-shell .pd-info-wrap {
    margin-bottom: 6px;
}

.app-shell .product__details__price {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-ink);
    margin: 0 0 2px;
}

/* Struck-through original price, emitted inside the price block. */
.app-shell .product__details__price del,
.app-shell .product__details__price s {
    font-size: 11px;
    font-weight: 500;
    color: var(--app-muted);
}

.app-shell .product__details__mtr,
.app-shell .product-innertxt {
    font-size: 11px;
    color: var(--app-muted);
    margin-bottom: 6px;
}

.app-shell .product__item > p[id^="discount_"] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4574d, #d92b1f);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 8px rgba(217, 43, 31, .45);
}

.app-shell .def-number-input {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

.app-shell .def-number-input .quantity {
    display: block;
}

/* Scoped under .def-number-input: the variant <select> also carries .pro-qty. */
.app-shell .def-number-input .pro-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Overrides w-auto / ml-auto / mr-0 from the markup. */
    width: 100% !important;
    margin: 0 !important;
    height: 38px;
    border: 1px solid #e3e5e9 !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* The +/- spans are EMPTY in the markup; the glyphs are the ::before/::after
   bars below (style_modern.css draws them, and layout 1 does not load it). */
.app-shell .def-number-input .qtybtn {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 100%;
    border: 0;
    background: #f6f7f9;
    color: var(--app-ink);
    cursor: pointer;
    /* The spans are inline by default, which collapses them to zero height. */
    display: block;
    /* Any stray whitespace text node inside must not show beside the bars. */
    font-size: 0;
    transition: background .15s ease;
}

.app-shell .def-number-input .qtybtn:hover {
    background: #eceef1;
}

/* Horizontal bar — present on both, so it reads as the minus sign. */
.app-shell .def-number-input .qtybtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--app-ink);
}

/* Vertical bar — only on .inc, crossing the bar above to make a plus. */
.app-shell .def-number-input .qtybtn.inc::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 11px;
    border-radius: 2px;
    background: var(--app-ink);
}

.app-shell .def-number-input .qty-txt,
.app-shell .def-number-input input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100% !important;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-ink);
    -webkit-text-fill-color: var(--app-ink);
    opacity: 1;
}

/* !important: the markup hardcodes `background: var(--default-color,#7fad39)`
   as an inline style, which no selector can outrank. */
.app-shell .product_drop_down {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid #e3e5e9 !important;
    border-radius: 10px;
    background: #fff !important;
    color: var(--app-ink) !important;
    font-size: 12.5px;
    font-weight: 500 !important;
    box-sizing: border-box;
}

.app-shell .select-product-configuration-cls {
    display: block;
    width: 100%;
    margin: 0 0 8px !important;
    padding: 0;
}

/* --- Card actions ------------------------------------------------------- */

.app-shell .pd-btn-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Pinned to the card's foot so buttons line up across a row whatever the
       name and price above them measure. */
    margin-top: auto;
}

.app-shell .pd-btn-row .site-btn,
.app-shell .product__item .add_to_cart,
.app-shell .product__item .subscribe_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--app-theme);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Subscribe is the secondary action of the two. */
.app-shell .product__item .subscribe_button {
    background: var(--app-theme-soft);
    border: 1px solid var(--app-theme-border);
    color: var(--app-theme);
}

.app-shell .pd-btn-row .site-btn i,
.app-shell .product__item .add_to_cart i,
.app-shell .product__item .subscribe_button i {
    font-size: 12px;
}

/* --- Empty state --------------------------------------------------------
   The markup is .empty-subproducts wrapping an <img class="empty-img-wrap">
   and an <h3>. It carries Bootstrap's .text-center, but layout 1 never loads
   Bootstrap, so without these rules the block sat flush left.

   Centring is done with flex rather than text-align alone: the image is a
   replaced element at its natural size, so text-align on the parent would not
   pull it in, and the state also needs vertical centring in the empty frame. */

/* The empty state's .col-lg-12 is a direct child of the .products-merge grid,
   so it would otherwise be laid into a single 1-of-2 column and sit half-width
   on the left — the actual reason this block appeared left-aligned. Span every
   track so it owns the full row. Product cards carry col-xl-3/col-lg-4 and
   never col-lg-12, so this child is only ever the empty state. */
.app-shell .products-merge > .col-lg-12 {
    grid-column: 1 / -1;
}

.app-shell .empty-subproducts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46vh;
    padding: 28px var(--app-pad);
    text-align: center;
    color: var(--app-muted);
}

/* .empty-img-wrap is the <img> itself, not a wrapper — the previous
   `.empty-img-wrap img` descendant selector matched nothing. */
.app-shell .empty-subproducts .empty-img-wrap {
    display: block;
    max-width: 150px;
    width: 100%;
    height: auto;
    margin: 0 auto 16px;
    filter: opacity(.7);
}

.app-shell .empty-subproducts h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--app-ink);
}