/*
 * Seoul Skin — Madhësitë.  Kutia "Zgjidh madhësinë" te faqja e produktit.
 *
 * Çdo ngjyrë vjen nga një variabël `--ssm-*`; vlerat e vërteta i shkruan paneli
 * (WooCommerce → Madhësitë → Pamja) si `.ss-mad{…}` menjëherë pas këtij skedari.
 * Parazgjedhjet më poshtë janë preseti "Krem" — pra edhe pa asnjë ruajtje kutia
 * duket si pjesë e dyqanit.
 *
 * Fonti merret nga faqja (`inherit`), që kutia të mos duket widget i ngjitur.
 * Gjithçka tjetër (margjinat e h2/ul/li, ngjyra e linqeve, `del`, `.amount`) rivendoset
 * këtu, sepse WoodMart-i i stilon globalisht.
 */

.ss-mad {
    --ssm-box-bg:    #f8f4ed;
    --ssm-box-line:  #ebe3d6;
    --ssm-ink:       #1f1d1b;
    --ssm-mute:      #665e54;
    --ssm-tile-bg:   #ffffff;
    --ssm-tile-line: #e0d6c6;
    --ssm-accent:    #1f1d1b;
    --ssm-on-accent: #faf7f2;
    --ssm-value-bg:  #2d6a4f;
    --ssm-value-ink: #ffffff;
    --ssm-trial-bg:  #efe6d8;
    --ssm-trial-ink: #4a4137;
    --ssm-stock-bg:  #e4f2e8;
    --ssm-stock-ink: #1b6338;
    --ssm-r:         16px;
    --ssm-scale:     1;
    --ssm-shadow:    0 1px 2px rgba(31, 29, 27, .05), 0 8px 22px rgba(31, 29, 27, .07);

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 18px 0 20px;
    padding: 16px;
    border: 1px solid var(--ssm-box-line);
    border-radius: var(--ssm-r);
    background: var(--ssm-box-bg);
    color: var(--ssm-ink);
    font-family: inherit;
    font-size: calc(15px * var(--ssm-scale));
    line-height: 1.4;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.ss-mad *, .ss-mad *::before, .ss-mad *::after { box-sizing: inherit; }

/* Teksti që vetëm lexuesi i ekranit e dëgjon. */
.ss-mad .ss-mad__sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────────────────────── koka ───── */

.ss-mad .ss-mad__head {
    display: flex;
    align-items: center;
    gap: .75em;
    margin: 0 0 1em;
}
.ss-mad .ss-mad__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: calc(var(--ssm-r) * .65);
    background: var(--ssm-tile-bg);
    border: 1px solid var(--ssm-tile-line);
    color: var(--ssm-ink);
}
.ss-mad .ss-mad__icon svg { width: 1.3em; height: 1.3em; display: block; }
.ss-mad .ss-mad__headtext { min-width: 0; }
.ss-mad .ss-mad__title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--ssm-ink);
}
.ss-mad .ss-mad__sub {
    margin: .15em 0 0;
    padding: 0;
    font-size: .87em;
    line-height: 1.45;
    color: var(--ssm-mute);
}

/* ─────────────────────────────────────────────────── opsionet: pllakat ───── */

.ss-mad .ss-mad__opts {
    display: grid;
    gap: .65em;
    /* `auto-fill` mban kolonat bosh: dy madhësi zënë dy nga tri vende, pra pllakat kanë
       gjithmonë të njëjtën gjerësi dhe duken si zgjedhës, jo si dy shirita që mbushin
       gjithë kutinë. `min(100%, …)` mbron ekranet nën 320px nga rrëshqitja anash. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.4em), 1fr));
    margin: 0;
    padding: .55em 0 0;      /* vend për badge-t që qëndrojnë mbi buzën e pllakës */
    list-style: none;
}
/* Dy madhësi: GJITHMONË krah për krah — kurrë njëra mbi tjetrën për shkak të disa pikselëve. */
.ss-mad--tiles[data-count="2"] .ss-mad__opts { grid-template-columns: repeat(2, minmax(0, 10.5em)); }
.ss-mad .ss-mad__opt {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    display: flex;
}
.ss-mad .ss-mad__opt::before, .ss-mad .ss-mad__opt::marker { content: none; }

.ss-mad .ss-mad__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2em;
    width: 100%;
    min-height: 4.7em;
    padding: .9em .95em .85em;
    border: 1px solid var(--ssm-tile-line);
    border-radius: max(0px, calc(var(--ssm-r) - 5px));
    background: var(--ssm-tile-bg);
    color: var(--ssm-ink);
    text-decoration: none;
    cursor: default;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ss-mad a.ss-mad__tile { cursor: pointer; touch-action: manipulation; }
.ss-mad a.ss-mad__tile:hover {
    border-color: var(--ssm-accent);
    box-shadow: var(--ssm-shadow);
    color: var(--ssm-ink);
}
.ss-mad a.ss-mad__tile:active { transform: scale(.985); }
.ss-mad a.ss-mad__tile:focus { outline: none; }
.ss-mad a.ss-mad__tile:focus-visible {
    outline: 2px solid var(--ssm-accent);
    outline-offset: 3px;
}

/* E zgjedhura: kufi 2px pa ndryshuar përmasat (hija e brendshme shton piksel-in e dytë). */
.ss-mad .is-current .ss-mad__tile {
    border-color: var(--ssm-accent);
    box-shadow: inset 0 0 0 1px var(--ssm-accent);
}

/* Në pllaka: madhësia → çmimi → çmimi/njësi → shënimi. `contents` i lejon fëmijët e
   blloqeve të renditen lirshëm, pa ndryshuar HTML-në që përdor edhe pamja "listë". */
.ss-mad--tiles .ss-mad__main,
.ss-mad--tiles .ss-mad__meta,
.ss-mad--tiles .ss-mad__end { display: contents; }
.ss-mad--tiles .ss-mad__img   { order: 0; }
.ss-mad--tiles .ss-mad__size  { order: 1; }
.ss-mad--tiles .ss-mad__price { order: 2; }
.ss-mad--tiles .ss-mad__unit  { order: 3; }
.ss-mad--tiles .ss-mad__note  { order: 4; }

.ss-mad .ss-mad__size {
    display: block;
    font-size: 1.14em;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ssm-ink);
    overflow-wrap: break-word;
}
.ss-mad .ss-mad__price {
    display: block;
    font-size: .93em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ssm-ink);
    font-variant-numeric: tabular-nums;
}
.ss-mad .ss-mad__price *,
.ss-mad .ss-mad__unit * {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
.ss-mad .ss-mad__price del {
    margin-right: .2em;
    font-weight: 400;
    color: var(--ssm-mute) !important;
    opacity: 1;
    text-decoration: line-through;
}
.ss-mad .ss-mad__price del * { color: var(--ssm-mute) !important; font-weight: 400 !important; }
.ss-mad .ss-mad__unit {
    display: block;
    font-size: .8em;
    line-height: 1.35;
    color: var(--ssm-mute);
    font-variant-numeric: tabular-nums;
}
.ss-mad .ss-mad__note,
.ss-mad .ss-mad__here {
    display: block;
    font-size: .78em;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ssm-mute);
}

/* ✓ e madhësisë aktuale — në QOSHE, mbi buzë, që të mos përplaset kurrë me çmimin
   (as te pllaka, as te rreshti i telefonit). Unaza me ngjyrën e kutisë e ndan nga kufiri.
   Shigjeta › shfaqet vetëm te pamja "listë". */
.ss-mad .ss-mad__mark { display: none; }
.ss-mad .is-current .ss-mad__mark {
    position: absolute;
    top: -.5em;
    right: -.5em;
    display: grid;
    place-items: center;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    background: var(--ssm-accent);
    color: var(--ssm-on-accent);
    box-shadow: 0 0 0 2px var(--ssm-box-bg);
}
.ss-mad .ss-mad__mark svg { display: block; width: .72em; height: .72em; }

/* Badge-t qëndrojnë MBI buzën e sipërme. Ankorohen me `bottom`, pra një tekst i gjatë
   i shkruar nga stafi rritet lart (në hapësirën bosh), kurrë mbi madhësinë. */
.ss-mad .ss-mad__badge {
    position: absolute;
    left: .8em;
    bottom: calc(100% - .7em);
    max-width: calc(100% - 1.6em);
    width: max-content;
    padding: .3em .65em;
    border-radius: 999px;
    font-size: .7em;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: normal;
    pointer-events: none;
}
.ss-mad .ss-mad__badge--value { background: var(--ssm-value-bg); color: var(--ssm-value-ink); }
.ss-mad .ss-mad__badge--trial {
    background: var(--ssm-trial-bg);
    color: var(--ssm-trial-ink);
    box-shadow: 0 0 0 1px var(--ssm-tile-bg);
}

/*
 * "Kemi në stok" — kur madhësia e faqes s'ka stok, te madhësitë e tjera që kanë.
 * Pika e gjelbër + teksti: kuptimi s'varet vetëm nga ngjyra.
 */
.ss-mad .ss-mad__badge--stock {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: var(--ssm-stock-bg);
    color: var(--ssm-stock-ink);
    box-shadow: 0 0 0 1px var(--ssm-tile-bg);
}
.ss-mad .ss-mad__badge--stock::before {
    content: "";
    flex: none;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: currentColor;
}
/* Pllakat kanë një vend të vetëm mbi buzë: aty fiton stoku. "Më e leverdishme" kthehet
   vetvetiu sapo madhësia e faqes të ketë sërish stok. */
.ss-mad--tiles .has-avail .ss-mad__badge:not(.ss-mad__badge--stock) { display: none; }

.ss-mad .ss-mad__img {
    display: block;
    flex: none;
    width: 3em;
    height: 3em;
    margin-bottom: .25em;
    overflow: hidden;
    border-radius: calc(var(--ssm-r) * .45);
    background: var(--ssm-box-bg);
}
.ss-mad .ss-mad__img img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Madhësia pa stok (kur stafi zgjedh t'i shfaqë): e lexueshme, por qartë e dytë. */
.ss-mad .is-oos .ss-mad__tile { background: transparent; border-style: dashed; }
.ss-mad .is-oos .ss-mad__size,
.ss-mad .is-oos .ss-mad__price { color: var(--ssm-mute); }

/* ──────────────────────────────────────────────────── pamja "listë" ───── */

.ss-mad--list .ss-mad__opts { grid-template-columns: minmax(0, 1fr); gap: .55em; padding-top: 0; }
.ss-mad--list .ss-mad__tile {
    flex-direction: row;
    align-items: center;
    gap: .85em;
    min-height: 3.6em;
    padding: .7em .85em;
}
.ss-mad--list .ss-mad__img { width: 2.9em; height: 2.9em; margin: 0; }
/* ⚠️ `min-width` me qëllim (gabim i kapur 10 tetor 2026): në telefon, me çmim zbritjeje,
   kolona e çmimit e shtypte madhësinë derisa "60ml" dilte shkronjë-për-shkronjë në vertikal. */
.ss-mad--list .ss-mad__main { flex: 1 1 auto; min-width: 4.2em; display: flex; flex-direction: column; gap: .15em; }
.ss-mad--list .ss-mad__size { padding-right: 0; overflow-wrap: normal; }
.ss-mad--list .ss-mad__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .6em; }
.ss-mad--list .ss-mad__end { flex: none; margin-left: auto; text-align: right; }
.ss-mad--list .ss-mad__price { font-size: 1em; }
/* Çmimi i vjetër SIPËR të riut — kolona e çmimit mbetet e ngushtë edhe me zbritje. */
.ss-mad--list .ss-mad__price del { display: block; margin: 0; font-size: .85em; }
.ss-mad--list .ss-mad__badge {
    position: static;
    max-width: none;
    font-size: .7em;
    white-space: nowrap;     /* rreshti i meta-s mbështillet; pill-i kurrë në dy rreshta */
    box-shadow: none;
}
.ss-mad--list .ss-mad__main { order: 2; }
.ss-mad--list .ss-mad__img  { order: 1; }
.ss-mad--list .ss-mad__end  { order: 4; }
.ss-mad--list .ss-mad__mark {
    order: 6;
    position: static;
    display: grid;
    place-items: center;
    flex: none;
    width: 1.3em;
    height: 1.3em;
    color: var(--ssm-mute);
}
.ss-mad--list .is-current .ss-mad__mark { position: static; }
.ss-mad--list .ss-mad__here { font-weight: 600; color: var(--ssm-ink); }
/* Lista: "Kemi në stok" mbi buzën e rreshtit; badge-t e tjerë mbeten brenda tij. */
.ss-mad--list .ss-mad__badge--stock { position: absolute; left: .85em; bottom: calc(100% - .7em); }
.ss-mad--list.has-avail .ss-mad__opts { gap: 1.05em; padding-top: .6em; }

/* ──────────────────────────────────────────────────── pamja "çipa" ───── */

.ss-mad--chips {
    /* Titulli SIPËR, çipat poshtë — i njëjti rend në desktop dhe në telefon, si
       "Madhësia" mbi zgjedhësit e varianteve. Krah për krah, titulli dhe "Kemi në stok"
       mbi çipin s'rreshtoheshin dot bukur. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6em;
    padding: 0;
    border: 0;
    background: none;
}
.ss-mad--chips .ss-mad__title { font-weight: 600; }
.ss-mad--chips .ss-mad__opts {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    padding: 0;
}
.ss-mad .ss-mad__chip {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    min-height: 2.75em;          /* ≥ 44px objektiv preku */
    padding: .6em 1.05em;
    border: 1px solid var(--ssm-tile-line);
    border-radius: 999px;
    background: var(--ssm-tile-bg);
    color: var(--ssm-ink);
    font-size: .93em;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}
.ss-mad a.ss-mad__chip { cursor: pointer; touch-action: manipulation; }
.ss-mad a.ss-mad__chip:hover { border-color: var(--ssm-accent); color: var(--ssm-ink); }
.ss-mad a.ss-mad__chip:focus-visible { outline: 2px solid var(--ssm-accent); outline-offset: 2px; }
.ss-mad .ss-mad__chip .ss-mad__size { padding: 0; font-size: 1em; font-weight: 600; }
.ss-mad .ss-mad__chip .ss-mad__price { font-size: .86em; font-weight: 500; color: var(--ssm-mute); }
.ss-mad .is-current .ss-mad__chip {
    background: var(--ssm-accent);
    border-color: var(--ssm-accent);
    color: var(--ssm-on-accent);
}
.ss-mad .is-current .ss-mad__chip .ss-mad__size,
.ss-mad .is-current .ss-mad__chip .ss-mad__price { color: var(--ssm-on-accent); }
.ss-mad .is-oos .ss-mad__chip { border-style: dashed; color: var(--ssm-mute); }
/* Çipat: "Kemi në stok" mbi buzën e çipit. */
.ss-mad--chips .ss-mad__badge--stock { left: .9em; bottom: calc(100% - .6em); max-width: none; font-size: .72em; }
.ss-mad--chips.has-avail .ss-mad__opts { padding-top: .8em; }

/* ───────────────────────────────────────────────────────── telefoni ───── */

/*
 * ⚠️ VETËM MEDIA QUERIES — KURRË CONTAINER QUERIES (gabim i kapur live, 10 tetor 2026).
 *    Versioni 1.0.0 e vendoste kutinë si `container: inline-size`. Brenda kolonave flex të
 *    Elementor-it, shfletuesi (Chrome dhe Firefox) e mat widget-in PARA se të zbatojë
 *    rregullat e kontejnerit — pra rezervonte lartësinë e pamjes së pa-përshtatur (~353px)
 *    ndërsa kutia vetë ishte ~190px: një hapësirë bosh poshtë kutisë në çdo telefon.
 *    Media queries nuk e kanë këtë problem. Masat: te ky dyqan, në telefon kutia është
 *    ≈ gjerësia e ekranit − 85px (375px → 290px).
 *
 *   • ≤ 767px (pika e telefonit e Elementor-it): pllaka kompakte; 2 madhësi = 2 kolona të
 *     barabarta; foto (kur është e ndezur) e vogël MAJTAS e teksteve, jo sipër tyre;
 *     3+ madhësi = rreshta:   [foto] 30ml [Për ta provuar]  ·····  10.50 €
 *                                     0.35 €/ml
 *   • ≤ 340px (telefonat 320px): edhe 2 madhësi bëhen rreshta, badge-i nën madhësi.
 */
@media (max-width: 767px) {
    .ss-mad:not(.ss-mad--chips) { padding: 14px; }
    .ss-mad .ss-mad__head { margin-bottom: .8em; gap: .6em; }
    .ss-mad .ss-mad__icon { width: 2.1em; height: 2.1em; }
    .ss-mad .ss-mad__icon svg { width: 1.15em; height: 1.15em; }

    .ss-mad--tiles[data-count="2"] .ss-mad__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }

    .ss-mad--tiles:not(.is-many) .ss-mad__tile { min-height: 0; padding: .8em .8em .75em; gap: .1em; }
    .ss-mad--tiles:not(.is-many) .ss-mad__size { font-size: 1.07em; }
    .ss-mad--tiles:not(.is-many) .ss-mad__price del { display: block; margin: 0; font-size: .92em; }

    .ss-mad--tiles:not(.is-many) .ss-mad__tile:has(.ss-mad__img) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .6em;
        align-content: start;
    }
    .ss-mad--tiles:not(.is-many) .ss-mad__tile:has(.ss-mad__img) .ss-mad__img {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 2.4em;
        height: 2.4em;
        margin: 0;
    }
    .ss-mad--tiles:not(.is-many) .ss-mad__tile:has(.ss-mad__img) :is(.ss-mad__size, .ss-mad__price, .ss-mad__unit, .ss-mad__note) {
        grid-column: 2;
    }

    .ss-mad--tiles.is-many .ss-mad__opts { grid-template-columns: minmax(0, 1fr); gap: .55em; padding-top: .35em; }
    .ss-mad--tiles.is-many .ss-mad__tile {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        row-gap: .1em;
        min-height: 3.4em;
        padding: .7em .9em;
    }
    .ss-mad--tiles.is-many .ss-mad__img   { grid-column: 1; grid-row: 1 / span 2; width: 2.5em; height: 2.5em; margin: 0 .7em 0 0; }
    .ss-mad--tiles.is-many .ss-mad__size  { grid-column: 2; grid-row: 1; }
    .ss-mad--tiles.is-many .ss-mad__badge {
        position: static;
        grid-column: 3;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
        max-width: calc(100% - .7em);
        margin-left: .7em;
        overflow-wrap: normal;      /* mbështillet te hapësirat, kurrë në mes të fjalës */
        box-shadow: none;
    }
    .ss-mad--tiles.is-many .ss-mad__unit,
    .ss-mad--tiles.is-many .ss-mad__note  { grid-column: 2 / span 2; }
    .ss-mad--tiles.is-many .ss-mad__price { grid-column: 4; grid-row: 1 / span 2; margin-left: .75em; text-align: right; }
    .ss-mad--tiles.is-many .ss-mad__price del { display: block; margin: 0; }

    /* Me foto, rreshti s'ka vend për badge-in krah madhësisë — zbret nën të. */
    .ss-mad--tiles.is-many .ss-mad__tile:has(.ss-mad__img) .ss-mad__badge { grid-column: 2 / span 2; grid-row: 2; margin: .3em 0 .15em; max-width: 100%; }
    .ss-mad--tiles.is-many .ss-mad__tile:has(.ss-mad__img) :is(.ss-mad__img, .ss-mad__price) { grid-row: 1 / span 3; }
}

@media (max-width: 340px) {
    .ss-mad.ss-mad--tiles .ss-mad__opts { grid-template-columns: minmax(0, 1fr); gap: .55em; padding-top: .35em; }
    .ss-mad.ss-mad--tiles .ss-mad__tile {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        row-gap: .1em;
        min-height: 3.4em;
        padding: .7em .9em;
    }
    .ss-mad.ss-mad--tiles .ss-mad__img   { grid-column: 1; grid-row: 1 / span 2; width: 2.5em; height: 2.5em; margin: 0 .7em 0 0; }
    .ss-mad.ss-mad--tiles .ss-mad__size  { grid-column: 2; grid-row: 1; }
    .ss-mad.ss-mad--tiles .ss-mad__badge {
        position: static;
        grid-column: 3;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
        max-width: calc(100% - .7em);
        margin-left: .7em;
        overflow-wrap: normal;      /* mbështillet te hapësirat, kurrë në mes të fjalës */
        box-shadow: none;
    }
    .ss-mad.ss-mad--tiles .ss-mad__unit,
    .ss-mad.ss-mad--tiles .ss-mad__note  { grid-column: 2 / span 2; }
    .ss-mad.ss-mad--tiles .ss-mad__price { grid-column: 4; grid-row: 1 / span 2; margin-left: .75em; text-align: right; }
    .ss-mad.ss-mad--tiles .ss-mad__price del { display: block; margin: 0; }
    /* Shumë ngushtë: badge-i zbret në rreshtin e vet, nën madhësi, në vend që të ndahet në mes të fjalës. */
    .ss-mad.ss-mad--tiles .ss-mad__badge { grid-column: 2 / span 2; grid-row: 2; margin: .3em 0 .15em; max-width: 100%; }
    .ss-mad.ss-mad--tiles .ss-mad__price { grid-row: 1 / span 3; }
    .ss-mad.ss-mad--tiles .ss-mad__tile:has(.ss-mad__img) { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 0; }
    .ss-mad.ss-mad--tiles .ss-mad__tile:has(.ss-mad__img) .ss-mad__img { grid-row: 1 / span 3; width: 2.5em; height: 2.5em; margin: 0 .7em 0 0; }
    .ss-mad.ss-mad--tiles .ss-mad__tile:has(.ss-mad__img) .ss-mad__price { grid-column: 4; }
}

/*
 * Vendi "Nën çmim" (v1.2.0): kutia rri pas rreshtit ÇMIM + "Me porosi", brenda widget-it të
 * përshkrimit të shkurtër dhe para tekstit të tij. Mbi të e ndan kolona e Elementor-it (20px);
 * poshtë saj — deri te përshkrimi — 24px. Pa margin sipër: dy hapësira njëra mbi tjetrën do ta
 * shkëpusnin kutinë nga çmimi të cilit i përket.
 */
.ss-mad.ss-mad--pos-price { margin: 0 0 24px; }
@media (max-width: 767px) {
    .ss-mad.ss-mad--pos-price { margin-bottom: 20px; }
}

/* Pa sfond dhe pa kufi: pa mbushje anash — rreshtohet me pjesën tjetër të kolonës. */
.ss-mad.ss-mad--bare { padding-left: 0; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
    .ss-mad .ss-mad__tile, .ss-mad .ss-mad__chip { transition: none; }
    .ss-mad a.ss-mad__tile:active { transform: none; }
}