/* ==============================================================
   elm-card.css — ELM-CARD-REBUILD-001 (v1.14.6, 2026-10-23)
   Owner-approved FROZEN design: mockup harm-opt1 («تاییده، اجرا کن»).
   ONE coherent card system replacing 6 stacked legacy blocks that
   were purged from style.css (ELM-PRICE-REFINE / Card Text Harmony /
   ELM-HARMONY-DEBUG / ELM-CARD-INLINE / ELM-CARD-BUILD + FIX).
   FROZEN visual contract:
     card  : dashed rgba(29,36,54,.25) r8, padding 12, bg #fff
     price : dashed rgba(29,36,54,.30) r5 box INSIDE card
     title : 14px/700 ink #1d2436, line-height 1.6
     price : 13px/600 ink #1d2436, tabular-nums
     del   : 10.5px/400 muted #5c6579
     meta  : 11px/500 cat badge (brand on soft wash), right (RTL start)
     CTA   : 12.5px/700 white on #253e88 r5, hover #1e3170,
             focus-visible outline #e4b823
   Scope: only our semantic elm-* classes + minimal structural
   helpers under the live shop grid. No !important (enqueued after
   flatsome-style; higher specificity where needed).
   ============================================================== */

/* ---------- card frame ---------- */
div.product-small .elm-card {
    border: 1px dashed rgba(29, 36, 54, .25);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    height: 100%;
    overflow: hidden;
}

/* neutralize Flatsome inner box chrome inside our frame */
div.product-small .elm-card > .product-small.box {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---------- image ---------- */
div.product-small .elm-card .box-image {
    width: 100%;
    margin: 0;
}
div.product-small .elm-card .box-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 5px;
}
/* % discount badge keeps its absolute spot inside the frame */
div.product-small .col-inner > .badge-container.absolute {
    z-index: 2;
}

/* ---------- text area ---------- */
div.product-small .elm-card .box-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 8px 0 0;
}
div.product-small .elm-card .elm-card-head {
    flex: 1;
}

/* cat meta badge: 11/500, brand-on-soft-wash, RTL start aligned */
div.product-small .elm-card .box-text p.product-cat,
div.product-small .elm-card .box-text .product-meta {
    display: inline-block;
    align-self: flex-start;
    margin-inline-start: 0;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: #253e88;
    background: rgba(37, 62, 136, .07);
    border-radius: 5px;
    padding: 3px 8px;
    margin: 0 0 2px;
}

/* title: 14/700 ink (FROZEN ladder) */
div.product-small .elm-card .box-text .title-wrapper,
div.product-small .elm-card .box-text h2.product-title,
div.product-small .elm-card .box-text .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #1d2436;
    text-align: start;
    padding: 0;
}
div.product-small .elm-card .box-text h2.product-title a {
    color: #1d2436;
}

/* ---------- price box: the ONE dashed inner surface ---------- */
div.product-small .elm-card .elm-price-box {
    border: 1px dashed rgba(29, 36, 54, .30);
    border-radius: 5px;
    padding: 6px 10px;
    text-align: center;
}
div.product-small .elm-card .elm-price-box .price,
div.product-small .elm-card .elm-price-box .price .woocommerce-Price-amount {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #1d2436;
    font-variant-numeric: tabular-nums;
}
div.product-small .elm-card .elm-price-box .price del,
div.product-small .elm-card .elm-price-box .price del .woocommerce-Price-amount {
    font-size: 10.5px;
    font-weight: 400;
    color: #5c6579;
}

/* ---------- CTA: 12.5/700 white on brand ---------- */
div.product-small .elm-card .elm-card-cta .button,
div.product-small .elm-card .elm-card-cta .add_to_cart_button,
div.product-small .elm-card .elm-card-cta button {
    width: 100%;
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: #253e88;
    border: 0;
    border-radius: 5px;
    padding: 9px 12px;
    text-align: center;
    transition: background .18s ease;
}
div.product-small .elm-card .elm-card-cta .button:hover,
div.product-small .elm-card .elm-card-cta button:hover {
    background: #1e3170;
    color: #fff;
}
div.product-small .elm-card .elm-card-cta .button:focus-visible,
div.product-small .elm-card .elm-card-cta button:focus-visible {
    outline: 2px solid #e4b823;
    outline-offset: 2px;
}


/* ==============================================================
   v1.14.1 refinements (owner feedback, ELM-CARD-REFINE-1141)
   1) mockup = dashed border ONLY, no shadow anywhere on the card
      (!important kills Flatsome box-shadow-* utility classes)
   2) % discount badge styled per mockup .save chip:
      e4b823 bg, ink text, r4, INSIDE image top-start
   3) CTA compacted: padding 9px -> 6px vertical, min-height 34
   ============================================================== */

/* 1) no shadows on card, its inner surfaces, or column wrapper */
div.product-small .elm-card,
div.product-small .elm-card .box,
div.product-small .col-inner {
    box-shadow: none !important;
}

/* 2) discount badge: live markup is .badge-container.absolute >
      .callout.badge.badge-square > .badge-inner.secondary.on-sale.
      Flatsome owns bg/font on .badge-inner -> needs !important */
div.product-small .elm-card > .badge-container.absolute {
    z-index: 3;
    top: 8px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
}
div.product-small .elm-card > .badge-container.absolute .badge-inner {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #1d2436 !important;
    background: #e4b823 !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    text-align: center;
}

/* 3) compact CTA: Flatsome .is-small sets min-height 42 / pad 11x18 */
div.product-small .elm-card .elm-card-cta .button,
div.product-small .elm-card .elm-card-cta .add_to_cart_button,
div.product-small .elm-card .elm-card-cta button {
    min-height: 34px !important;
    height: auto !important;
    padding: 6px 14px !important;
    line-height: 1.4 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* v1.14.5 (ELM-CARD-FIX-1145): homepage context de-scoping + chip icon - see bottom block */
/* v1.14.3 - discount chip separated from price box (owner 2026-10-23, ELM-CARD-FIX-1143) */
.elm-save-row {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 2px;
}
.elm-save {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: #e4b823;
    border-radius: 5px;
    padding: 3px 8px;
}
div.product-small .elm-price-box .price-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
div.product-small .elm-price-box .price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
/* hide old Flatsome absolute overlay badge inside our card only */
div.product-small .elm-card .elm-card-cta {
    margin-top: 10px;
}
div.product-small .elm-card .elm-card-cta .button,
div.product-small .elm-card .elm-card-cta .add_to_cart_button,
div.product-small .elm-card .elm-card-cta button {
    min-height: 0 !important;
    height: auto !important;
    padding: 9px 12px !important;
}


/* ==============================================================
   v1.14.4 - equal heights + chip text + homepage scope (owner
   2026-10-23, ELM-CARD-FIX-1144)
   1) equal card heights: flex column card, CTA pinned to bottom.
      margin-top:auto keeps >=10px visual gap via padding-top.
   2) chip text ink (owner: black text inside discount box).
   3) scope widen div.product-small -> #main
      div.product-small for CTA/price/chip: homepage ux-slider
      loop has NO .products ancestor (verified 2026-10-23).
   4) Flatsome legacy on-sale badge hidden in ALL elm-cards and
      recolored gold where visible (homepage section).
   ============================================================== */

/* 1) equal heights + bottom-pinned CTA */
div.product-small,
div.product-small .col-inner {
    height: 100%;
}
div.product-small .elm-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
div.product-small .elm-card .box-text {
    flex: 1 1 auto;
}
div.product-small .elm-card .elm-card-cta {
    margin-top: auto;
    padding-top: 10px;
}

/* 2) chip text ink (was #fff) */
.elm-save {
    color: #1d2436;
}

/* 3) CTA + price + save-row scope: also match non-.products loops */
div.product-small .elm-card .elm-card-cta .button,
div.product-small .elm-card .elm-card-cta .add_to_cart_button,
div.product-small .elm-card .elm-card-cta button {
    width: 100%;
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: #253e88;
    border: 0;
    border-radius: 5px;
    padding: 9px 12px;
    text-align: center;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    transition: background .18s ease;
}
div.product-small .elm-card .elm-card-cta .button:hover,
div.product-small .elm-card .elm-card-cta button:hover {
    background: #1e3170;
    color: #fff;
}
div.product-small .elm-card .elm-card-cta .button:focus-visible,
div.product-small .elm-card .elm-card-cta button:focus-visible {
    outline: 2px solid #e4b823;
    outline-offset: 2px;
}

/* 4) legacy on-sale badge: hidden inside every elm-card context and
      recolored gold where a variant surface still shows it */
.elm-card .badge-container.absolute,
div.product-small .elm-card .badge-container.absolute .badge-inner,
div.product-small .badge-container.absolute .badge-inner.on-sale {
    display: none !important;
}


/* ==============================================================
   v1.14.5 (ELM-CARD-FIX-1145, owner 2026-10-23)
   1) homepage special-offer slider cards have NO .products ancestor
      (verified in live HTML 2026-10-23): dashed price box + centered
      price chain re-scoped without .products so BOTH contexts match.
   2) discount chip icon: inline SVG tag glyph inside .elm-save
      (::before, 12px, RTL-safe margin-inline-end) — owner request.
   3) chip ink text re-asserted with the same specificity shape for
      every loop context.
   ============================================================== */

/* 1) price dashed box — context-independent (works shop + homepage) */
div.product-small .elm-card .elm-price-box {
    border: 1px dashed rgba(29, 36, 54, .30);
    border-radius: 5px;
    padding: 6px 10px;
    text-align: center;
}
div.product-small .elm-card .price-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
div.product-small .elm-card .price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 2) chip icon (inline SVG data-URI, fill #1d2436) + ink text */
.elm-save {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    color: #1d2436 !important;
}
.elm-save::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background: no-repeat center / 12px 12px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2436' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 12 22 2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.6'/%3E%3C/svg%3E");
}


/* ==============================================================
   v1.14.6 (ELM-CARD-FIX-1146 + owner mid-turn, 2026-10-23)
   1) full de-scoping: every rule above now targets div.product-small
      or .elm-card directly (homepage ux-slider has no #main/.products
      ancestors - proven in live DOM). elm-* classes are ours -> safe.
   2) discount chip = image overlay, top-LEFT (physical left, owner:
      «سمت چپ بالای تصویر»), DOM moved into .box-image via template.
      Card heights equalize (no extra text row).
   ============================================================== */
div.product-small .elm-card .box-image,
div.product-small .elm-card .box-image .image-hover {
    position: relative;
}
div.product-small .elm-card .elm-save-row {
    position: absolute;
    top: 8px;
    left: 10px;
    right: auto;
    z-index: 5;
    margin: 0;
    display: block;
    pointer-events: none;
}
div.product-small .elm-card .elm-save {
    /* frozen chip style re-asserted on new position */
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #1d2436 !important;
    background: #e4b823 !important;
    border-radius: 5px;
    padding: 3px 8px;
    box-shadow: 0 1px 3px rgba(29, 36, 54, .18);
}

/* ==============================================================
   v1.14.8 (ELM-CARD-BUG-1146-HOME, owner 2026-10-23)
   Slider context only (.row-slider — Flickity): Flickity measures
   cells before images and sets an absolute small height; the
   height:100% chain (elm-card > box > col-inner > box-image) then
   locks to it -> 26px white pills. Break the percent chain here;
   shop grid (.products) keeps height:100% equal-height behavior.
   ============================================================== */
div.row-slider .product-small.col {
    height: auto !important;
}
div.row-slider .product-small.col .col-inner {
    height: auto !important;
}
div.row-slider .product-small .elm-card {
    height: auto !important;
}
div.row-slider .product-small .elm-card > .product-small.box {
    height: auto !important;
}
/* prime cell height at first Flickity measure: image box always
   reserves 1:1 space via aspect-ratio (modern browsers; graceful
   no-op if unsupported) */
div.row-slider .product-small .elm-card .box-image {
    min-height: 0;
}
div.row-slider .product-small .elm-card .box-image img:first-child {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}