/*
 * Soumi overrides.
 *
 * Loaded after the theme's styles.css so a theme update cannot clobber it.
 * Keep project-specific tweaks here rather than editing styles.css directly.
 */

/* ---------------------------------------------------------------------------
 * Product card — the attribute-value bar that slides up over the image on hover
 *
 * The wrapper is `aspect-ratio: 1/1.4; overflow: hidden`, so its height lands on
 * a fractional pixel. A bar pinned to `bottom: 0` then leaves a hairline of the
 * image showing beneath it, which is most obvious while the transform is
 * running. The ::after fill paints the bar's own background past that boundary
 * (the wrapper clips it), so the bottom edge is solid at every frame.
 * ------------------------------------------------------------------------- */
.card-product .card-product-wrapper .size-list {
    /* No halo underneath: a full-spread shadow darkened the seam where the bar
       meets the white card body. Lift it upward instead. */
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
    /* Promotes the bar to its own layer so the edge is not resampled mid-slide. */
    will-change: transform;
    backface-visibility: hidden;
}

.card-product .card-product-wrapper .size-list::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background-color: inherit;
    pointer-events: none;
}

/* The seam itself sits *between* the wrapper and .card-product-info, so the
 * ::after above cannot reach it — overflow: hidden clips the bar and its fill at
 * the same boundary. `aspect-ratio: 1/1.4` makes the wrapper's height land on a
 * fractional pixel, and the browser rounds the clip and the next block's start
 * independently, leaving a hairline between them.
 *
 * Two belts:
 *  1. the wrapper paints white, so anything peeking at that boundary matches the
 *     bar and the card body rather than showing the page through;
 *  2. the info block is pulled up one pixel and given that pixel back as a white
 *     top border, so it covers the seam at zero net layout cost. A border rather
 *     than padding on purpose: the theme already sets padding-top on this
 *     element (10px, 5px on style-7) and overriding it would collapse the gap
 *     above the product name. */
.card-product .card-product-wrapper {
    background-color: var(--white);
}

.card-product .card-product-info {
    position: relative;
    z-index: 1;
    margin-top: -1px;
    border-top: 1px solid var(--white);
}

/* Squaring the bottom corners on hover lets the white bar run straight into the
 * white card body instead of ending in two rounded notches. Deliberately not
 * transitioned: animating border-radius re-rasterises the clip on every frame,
 * which is its own flicker along the same edge. */
.card-product:hover .card-product-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Wishlist toggle
 *
 * The "already saved" state used a bin icon, which reads as "delete this
 * product". A filled heart with a small cross says "remove from favourites"
 * without implying the product itself is going anywhere.
 * ------------------------------------------------------------------------- */
.box-icon.wishlist.is-wishlisted {
    position: relative;
}

.box-icon.wishlist.is-wishlisted .icon-heart-full {
    color: #e35d6a;
}

.box-icon.wishlist.is-wishlisted::after {
    content: "\00d7";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #e35d6a;
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Home page testimonial carousel (.tf-sw-testimonial)
 *
 * The theme ships `.testimonial-item .box-author` as a horizontal flex row —
 * avatar on the left, name beside it — which fought the centred card the home
 * page actually renders: the avatar's `margin: 0 auto` was inert inside a flex
 * row, `.rating` (display: flex, no justify-content) left the stars pinned to
 * the left of an otherwise centred card, and slides sized to their own content
 * so a short review and a long one produced two different card heights sitting
 * side by side.
 *
 * Everything below is scoped to the testimonial slider so the theme's other
 * `.testimonial-item` variants keep their own layout.
 * ------------------------------------------------------------------------- */

/* Swiper sizes each slide to its content by default; `height: auto` on the
 * slide plus `height: 100%` on the card lets flexbox stretch every card in a
 * row to the tallest one. */
.tf-sw-testimonial .swiper-slide {
    height: auto;
}

.tf-sw-testimonial .testimonial-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    background-color: var(--white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.tf-sw-testimonial .testimonial-item:hover {
    border-color: rgba(224, 88, 62, 0.3);
    box-shadow: 0 12px 28px rgba(224, 88, 62, 0.1);
    transform: translateY(-4px);
}

/* The review is the only element allowed to grow, so the divider and the author
 * block line up across every card in the row regardless of review length. */
.tf-sw-testimonial .testimonial-item .text {
    flex-grow: 1;
    margin-bottom: 18px;
}

.tf-sw-testimonial .testimonial-item .rating {
    justify-content: center;
    gap: 4px;
    margin-bottom: 14px;
}

/* Unrated slots. The theme has no empty-star glyph, so the filled one is reused
 * at the page background's contrast level. */
.tf-sw-testimonial .testimonial-item .rating i.is-empty {
    color: var(--line);
}

.tf-sw-testimonial .testimonial-item .divider {
    margin-bottom: 18px;
}

/* Avatar above the name rather than beside it — the card is centred. */
.tf-sw-testimonial .testimonial-item .box-author {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.tf-sw-testimonial .testimonial-item .box-author .box-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.tf-sw-testimonial .testimonial-item .box-author .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-sw-testimonial .testimonial-item .box-author .metas {
    font-size: 14px;
    line-height: 22px;
}

@media (max-width: 767px) {
    .tf-sw-testimonial .testimonial-item {
        padding: 24px 20px 20px;
    }
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs — <x-breadcrumbs> renders a semantic <ol> inside the theme's
 * .tf-breadcrumb-list, laid out the way the theme laid out its bare spans.
 * ------------------------------------------------------------------------- */
.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-trail__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.breadcrumb-trail__item .icon {
    font-size: 8px;
    font-weight: 700;
}

.breadcrumb-trail__current {
    color: var(--text);
}

@media (max-width: 767px) {
    /* A long product name would otherwise wrap the trail onto three lines. */
    .breadcrumb-trail__current {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
 * Headings promoted to <h1>. The product and pack titles used to be an <h4> /
 * <h5>; the theme sizes h1 at 80px, so they carry their own size now.
 * ------------------------------------------------------------------------- */
h1.tf-product-title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 600;
}

@media (max-width: 767px) {
    h1.tf-product-title {
        font-size: 24px;
    }
}

/* ---------------------------------------------------------------------------
 * Product page: category / concern links under the title.
 * ------------------------------------------------------------------------- */
.tf-product-info-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 22px;
}

.tf-product-info-meta a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tf-product-info-meta a:hover {
    color: rgb(224, 88, 62);
}

/* ---------------------------------------------------------------------------
 * Sticky add-to-cart, mobile product page only.
 *
 * Shown (body.sticky-atc-visible, toggled from livewire/product.blade.php)
 * while the real add-to-cart button is off screen, so the two never compete.
 * The body gets matching bottom padding so the bar never covers the footer,
 * and the back-to-top button moves up out of its way.
 * ------------------------------------------------------------------------- */
.sticky-atc {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: var(--white);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
}

body.sticky-atc-visible .sticky-atc {
    transform: none;
    visibility: visible;
}

.sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-atc__img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
}

.sticky-atc__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sticky-atc__name {
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticky-atc__price {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.sticky-atc__btn {
    flex-shrink: 0;
    padding: 11px 18px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    body.sticky-atc-visible {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    body.sticky-atc-visible .progress-wrap {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 768px) {
    .sticky-atc {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-atc {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Homepage placeholder slide — sits in the hero slot only while no carousel
 * slide is active, and gives way to the real slideshow as soon as one is.
 *
 * Phones need nothing here for height: the theme's `.tf-slideshow .wrap-slider
 * { height: 450px }` below 768px already applies, as it does to a real slide.
 * Arabic needs nothing either: the theme sets `direction: rtl` on the slide and
 * mirrors slide images, so the logical properties below swap photo and text,
 * and the photo's fade flips over with it.
 * ------------------------------------------------------------------------- */
.home-placeholder-slide {
    height: clamp(460px, 64vh, 680px);
    overflow: hidden;
    background: linear-gradient(115deg, #fbf5f1 0%, #f4e4da 55%, #eed6c8 100%);
}

/* The theme stretches every slide image to the full slide. This one is a 736px
   square, so it takes the half it can fill without going soft and fades into
   the gradient where it meets the copy. */
.home-placeholder-slide .home-placeholder-slide__photo {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}

/* left/right first, then the logical side: in LTR the last one wins as left,
   in RTL it resolves to right and left stays auto. */
.home-placeholder-slide .box-content.home-placeholder-slide__content {
    left: auto;
    right: auto;
    inset-inline-start: 0;
    width: 50%;
}

.home-placeholder-slide .home-placeholder-slide__title {
    margin-bottom: 18px;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 1.15;
}

.home-placeholder-slide .box-content p.home-placeholder-slide__text {
    max-width: 440px;
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
}

@media only screen and (max-width: 767px) {
    /* Too narrow to split: the photo becomes a soft backdrop behind the copy. */
    .home-placeholder-slide .home-placeholder-slide__photo {
        width: 100%;
        opacity: 0.4;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home-placeholder-slide .box-content.home-placeholder-slide__content {
        width: 100%;
    }

    /* The theme hides slide subtitles on phones; this one is the site's
       introduction, not promotional copy, so it stays. */
    .home-placeholder-slide .box-content p.home-placeholder-slide__text {
        display: block;
        margin-bottom: 24px;
        font-size: 15px;
    }
}

/* ---------------------------------------------------------------------------
 * Chip links: subcategories on a category page, suggestions on the 404 page.
 * ------------------------------------------------------------------------- */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-chip {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    line-height: 20px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.category-chip:hover {
    border-color: rgb(224, 88, 62);
    color: rgb(224, 88, 62);
}

/* ---------------------------------------------------------------------------
 * 404 page.
 * ------------------------------------------------------------------------- */
.page-not-found__inner {
    max-width: 640px;
    margin: 0 auto;
}

.page-not-found__code {
    margin-bottom: 12px;
    font-size: clamp(72px, 18vw, 140px);
    font-weight: 600;
    line-height: 1;
    color: #f1b8a4;
}

.page-not-found__title {
    margin-bottom: 14px;
    font-size: clamp(26px, 5vw, 36px);
    line-height: 1.25;
}

.page-not-found__text {
    margin-bottom: 28px;
    color: var(--text);
}

.page-not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.page-not-found__search {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto 36px;
}

.page-not-found__search input {
    flex: 1;
    min-width: 0;
}

.page-not-found__subtitle {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 26px;
}

.page-not-found__categories ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-not-found__chip {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    line-height: 20px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.page-not-found__chip:hover {
    border-color: rgb(224, 88, 62);
    color: rgb(224, 88, 62);
}

@media (max-width: 575px) {
    .page-not-found__actions .tf-btn {
        width: 100%;
    }

    .page-not-found__search {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------------------
 * Confirmation panel: order confirmation and contact thank-you page.
 * ------------------------------------------------------------------------- */
.success-panel__card {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 32px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: var(--white);
}

.success-panel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: rgba(241, 184, 164, 0.35);
    color: rgb(224, 88, 62);
    font-size: 24px;
}

.success-panel__title {
    margin-bottom: 12px;
    font-size: clamp(24px, 4.5vw, 32px);
    line-height: 1.3;
}

.success-panel__text {
    margin-bottom: 28px;
    color: var(--text);
}

.success-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 575px) {
    .success-panel__card {
        padding: 36px 20px;
    }

    .success-panel__actions .tf-btn {
        width: 100%;
    }
}

/* Home slideshow copy: beside the photo on wide screens. It was an inline 45%
 * everywhere, which on a phone left the title and button a ~170px column. */
.home-slide__content {
    width: 45%;
}

@media (max-width: 767px) {
    .home-slide__content {
        width: 100%;
    }
}

/* <x-ltr> tokens — order, tracking and phone numbers — are read as one unit:
 * never broken at their hyphens or spaces onto two lines. */
bdi[dir="ltr"] {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Account order list on phones. The theme gives the table a 700px minimum
 * inside a sideways-scrolling box with a 3px scrollbar, so state, total and
 * the "View" button sat off-screen. Below 768px each order is a card whose
 * cells stack with their column name (data-label) beside the value.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .account-order .wrap-account-order {
        overflow-x: visible;
    }

    .account-order table {
        min-width: 0;
    }

    .account-order .wrap-account-order > table > thead {
        display: none;
    }

    .account-order .wrap-account-order > table,
    .account-order .wrap-account-order > table > tbody,
    .account-order .wrap-account-order > table > tbody > tr {
        display: block;
        width: 100%;
    }

    .account-order .wrap-account-order > table > tbody {
        margin-bottom: 16px;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
    }

    .account-order .tf-order-item > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
    }

    .account-order .tf-order-item > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 600;
    }

    .account-order .tf-order-item > td > * {
        text-align: end;
    }

    /* Order number, then the tracking number on a line of its own. */
    .account-order .tf-order-item > td:first-child {
        flex-wrap: wrap;
    }

    .account-order .tf-order-item > td:first-child > div + div {
        flex-basis: 100%;
    }

    .account-order .tf-order-item > td.tf-order-item__action {
        display: block;
    }

    .account-order .tf-order-item__action .tf-btn {
        width: 100%;
    }

    .account-order .tf-order-detail {
        display: block;
        padding: 12px !important;
    }

    /* The items inside an order: photo beside name, quantity and variant. */
    .account-order .tf-order-detail table thead {
        display: none;
    }

    .account-order .tf-order-detail table,
    .account-order .tf-order-detail table tbody {
        display: block;
    }

    .account-order .tf-order-detail table tr {
        display: grid;
        grid-template-columns: 64px 1fr auto;
        align-items: center;
        gap: 4px 12px;
        padding: 10px 0;
    }

    .account-order .tf-order-detail table td {
        display: block;
        padding: 0 !important;
        text-align: start !important;
    }

    .account-order .tf-order-detail table td:first-child {
        grid-row: span 3;
    }

    .account-order .tf-order-detail table td:first-child img {
        max-width: 64px !important;
        border-radius: 6px;
    }

    .account-order .tf-order-detail table td:last-child {
        grid-column: 3;
        grid-row: 1;
    }
}

/* ---------------------------------------------------------------------------
 * Order summary under the confirmation panel, and the shipment block it
 * shares with the account's order list. Logical properties (inline-start /
 * end) so Arabic mirrors without rtl.css.
 * ------------------------------------------------------------------------- */
.order-summary {
    padding-bottom: 60px;
}

.order-summary__card {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: var(--white);
}

.order-summary__head {
    margin-bottom: 20px;
}

.order-summary__title {
    margin-bottom: 4px;
    font-size: 22px;
}

.order-summary__meta {
    color: var(--text);
}

.order-summary__items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.order-summary__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.order-summary__item img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.order-summary__item-info {
    flex: 1;
    min-width: 0;
}

.order-summary__item-info p {
    margin: 0;
}

.order-summary__price {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
}

.order-summary__totals,
.order-shipment {
    margin: 20px 0 0;
}

.order-summary__totals > div,
.order-shipment__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.order-summary__totals dt,
.order-shipment dt {
    font-weight: 400;
    color: var(--text);
}

.order-summary__totals dd,
.order-shipment dd {
    margin: 0;
    text-align: end;
}

.order-summary__total {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 1px solid var(--line);
    font-size: 18px;
    font-weight: 600;
}

.order-summary__total dt {
    color: inherit !important;
    font-weight: 600 !important;
}

.order-shipment {
    padding: 16px;
    border-radius: 8px;
    background-color: rgba(241, 184, 164, 0.15);
}

.order-shipment__tracking {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.order-shipment__status {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 14px;
}

.order-summary__contact {
    margin: 16px 0 0;
    color: var(--text);
    text-align: center;
}

@media (max-width: 575px) {
    .order-summary__card {
        padding: 20px 16px;
    }

    .order-summary__item img {
        width: 52px;
        height: 52px;
    }

    .order-shipment__row {
        flex-direction: column;
        gap: 2px;
    }

    .order-shipment dd {
        text-align: start;
    }
}

/* ---------------------------------------------------------------------------
 * Contact form.
 * ------------------------------------------------------------------------- */
.contact-form {
    max-width: 705px;
    margin: 0 auto;
}

.contact-form__row {
    display: flex;
    gap: 15px;
}

.contact-form fieldset {
    width: 100%;
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    text-align: start;
}

.contact-form .text-danger {
    margin-top: 4px;
    font-size: 13px;
    text-align: start;
}

.contact-form__hint,
.contact-form__privacy {
    font-size: 13px;
    color: var(--text);
    text-align: start;
}

.contact-form__privacy a {
    text-decoration: underline;
}

/* Honeypot: off screen for people, still in the form for bots. */
.contact-form__honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 575px) {
    .contact-form__row {
        flex-direction: column;
        gap: 0;
    }
}

/* ---------------------------------------------------------------------------
 * Privacy policy.
 * ------------------------------------------------------------------------- */
.policy-content {
    max-width: 820px;
    margin: 0 auto;
}

.policy-content h2 {
    margin: 36px 0 12px;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
}

.policy-content h3 {
    margin: 20px 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
}

.policy-content p,
.policy-content li {
    margin-bottom: 10px;
    color: var(--text);
    line-height: 1.75;
}

.policy-content ul {
    margin-bottom: 12px;
    padding-inline-start: 22px;
    list-style: disc;
}

.policy-content a {
    text-decoration: underline;
}

.policy-updated {
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Average rating on product / pack pages. It was an <h1> — a second one on the
 * page — and took its size from the tag; it keeps that size as a <div>.
 * ------------------------------------------------------------------------- */
.tab-reviews .tab-reviews-heading .top .number {
    font-size: clamp(48px, 10vw, 80px);
    line-height: 1.2;
}

/* A gap the business still has to fill in — meant to be seen. */
.policy-placeholder {
    padding: 0 4px;
    border-radius: 3px;
    background-color: #fff3cd;
    color: #664d03;
}

/* ---------------------------------------------------------------------------
 * Headings: unitless line-heights
 *
 * The theme sizes every heading with a fixed pixel line-height matched to its
 * own default font size (h3: 56px on 67.2px lines). Any heading shrunk by a
 * class — a card's name at 18px — kept the 67px lines, so the moment its text
 * wrapped the second line landed a whole line-and-a-half below the first.
 * The same ratios, unitless, scale with the font instead. Where a heading keeps
 * the theme's size nothing moves; class-level line-heights still win.
 * ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
}

h6 {
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Product and pack cards (.soumi-card)
 *
 * - Sizes scale with the viewport (clamp) instead of Bootstrap's !important
 *   fs-5 / fs-6, which kept a 20px name on 19.2px theme lines and 16px text in
 *   a half-width phone card.
 * - A price and its currency never part ("1500 / DA"); when the old price does
 *   not fit beside it, it drops below on a tight line.
 * - The card is a column that fills its grid cell or slide and the price sits
 *   at the bottom, so cards in a row line up however their names wrap.
 * ------------------------------------------------------------------------- */
.card-product.soumi-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-product.soumi-card .card-product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
}

.card-product.soumi-card .soumi-card__categories {
    display: flex;
    flex-direction: column;
    font-size: clamp(12px, 0.7rem + 0.3vw, 15px);
    line-height: 1.3;
}

.card-product.soumi-card .card-product-info .title {
    font-size: clamp(15px, 0.85rem + 0.35vw, 19px);
    line-height: 1.3;
}

.card-product.soumi-card .soumi-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 0;
    margin-top: auto;
    font-size: clamp(14px, 0.8rem + 0.3vw, 16px);
    line-height: 1.3;
}

.card-product.soumi-card .soumi-card__price > span {
    white-space: nowrap;
}

.card-product.soumi-card .soumi-card__price .old-price {
    font-size: 0.8em;
    margin-right: 0;
}

/* The shop grid already spaces its rows (gap); the theme's extra 30px under
   each card doubled that to 60px between rows from tablet width up. */
.grid-layout.wrapper-shop > .card-product.soumi-card {
    margin-bottom: 0;
}

/* Carousels: Swiper gives every slide `height: 100%` of a wrapper with no set
   height, which resolves to the slide's own content. Auto lets the flex wrapper
   stretch each slide to the tallest one, so the cards' prices line up there too. */
.swiper-slide:has(> .card-product.soumi-card) {
    height: auto;
}