/*
 * Socle des thèmes de la vitrine.
 *
 * Chargé après la feuille Melipona et nos feuilles DÉRIVÉES (themes/socle/genere),
 * avant la feuille du thème. Tout passe par des variables `--t-*` :
 *   - le manifeste du thème et les réglages du marchand les posent dans
 *     <style id="shop-design"> (StorefrontDesign::variablesSocle) ;
 *   - la feuille du thème peut en ajouter ou les nuancer ;
 *   - les réglages de Site web › Thèmes arrivent en classes sur <body>
 *     (t-header--centered, t-card--minimal…), lues ici.
 *
 * Les variables de Melipona (--primary-color, --title-fonts…) sont rebranchées
 * sur celles du thème : les pages communes (fiche, panier, commande) suivent
 * sans être réécrites.
 */

:root {
    --t-primary: #1f1f1f;
    --t-secondary: var(--t-primary);
    --t-text: #1d1d1f;
    --t-bg: #ffffff;
    --t-dark: #141414;
    --t-on-primary: #ffffff;
    --t-muted: color-mix(in srgb, var(--t-text) 62%, var(--t-bg));
    --t-surface: color-mix(in srgb, var(--t-primary) 6%, var(--t-bg));
    --t-border: color-mix(in srgb, var(--t-text) 13%, var(--t-bg));
    --t-primary-fonce: color-mix(in srgb, var(--t-primary) 78%, #000);
    --t-radius: 8px;
    --t-btn-radius: var(--t-radius);
    --t-font-head: Inter, "Segoe UI", Arial, sans-serif;
    --t-font-body: Inter, "Segoe UI", Arial, sans-serif;
    --t-font-arabe: Tajawal, "Segoe UI", Tahoma, sans-serif;
    --t-head-weight: 700;
    --t-head-spacing: -0.01em;
    --t-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35);
    --t-header-h: 76px;

    /* Melipona et nos feuilles maison, rebranchées sur le thème. */
    --primary-color: var(--t-primary);
    --dark-color: var(--t-dark);
    --secondary-color: var(--t-muted);
    --grey-color: var(--t-surface);
    --title-fonts: var(--t-font-head);
    --body-fonts: var(--t-font-body);
    --subtitle-fonts: var(--t-font-head);
    --pq-themes-color: var(--t-primary);
    --pq-dark-color: var(--t-dark);
    --rr-theme-primary: var(--t-primary);
    --shop-primary: var(--t-primary);
}

/* ------------------------------------------------------------------ base */

body.theme-socle {
    background: var(--t-bg);
    color: var(--t-text);
    font-family: var(--t-font-body);
    -webkit-font-smoothing: antialiased;
}
.theme-socle p,
.theme-socle li { color: inherit; }
.theme-socle h1, .theme-socle h2, .theme-socle h3, .theme-socle h4, .theme-socle h5, .theme-socle h6,
.theme-socle .bb__title, .theme-socle .pq-product-name {
    font-family: var(--t-font-head);
    font-weight: var(--t-head-weight);
    letter-spacing: var(--t-head-spacing);
    color: var(--t-text);
}
.t-titres--upper h1, .t-titres--upper h2, .t-titres--upper h3,
.t-titres--upper .bb__title, .t-titres--upper .t-footer__titre {
    text-transform: uppercase;
    letter-spacing: .08em;
}
.theme-socle a { color: inherit; }
.theme-socle a:hover { color: var(--t-primary); }
.theme-socle ::selection { background: var(--t-primary); color: var(--t-on-primary); }
.theme-socle .vm-ar, .theme-socle [lang="ar"] { font-family: var(--t-font-arabe); }
.theme-socle .pq-bg-grey { background: var(--t-surface) !important; }

/* --------------------------------------------------------------- boutons */

.theme-socle .t-btn,
.theme-socle .rr-btn,
.theme-socle .pq-summary-cta,
.theme-socle .button-flat,
.theme-socle .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid var(--t-primary);
    border-radius: var(--t-btn-radius);
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-family: var(--t-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.theme-socle .t-btn:hover,
.theme-socle .rr-btn:hover,
.theme-socle .pq-summary-cta:hover,
.theme-socle .button-flat:hover,
.theme-socle .btn-primary:hover {
    background: var(--t-primary-fonce);
    border-color: var(--t-primary-fonce);
    color: var(--t-on-primary);
    filter: none;
}
.theme-socle .t-btn--contour,
.theme-socle .bb__btn-ghost {
    background: transparent;
    color: var(--t-text);
    border: 1px solid currentColor;
    border-radius: var(--t-btn-radius);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}
.theme-socle .t-btn--contour:hover,
.theme-socle .bb__btn-ghost:hover { background: var(--t-text); color: var(--t-bg); border-color: var(--t-text); }
/* Le bouton d'achat du formulaire garde sa jauge, mais prend la forme du thème. */
.theme-socle .vm-envoi { border-radius: var(--t-btn-radius); font-family: var(--t-font-body); }

.theme-socle .form-control,
.theme-socle input[type="text"], .theme-socle input[type="email"], .theme-socle input[type="tel"],
.theme-socle input[type="number"], .theme-socle select, .theme-socle textarea {
    border-radius: min(var(--t-radius), 12px);
    border-color: var(--t-border);
}
.theme-socle .form-control:focus,
.theme-socle input:focus, .theme-socle select:focus, .theme-socle textarea:focus {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary) 18%, transparent);
    outline: none;
}

/* --------------------------------------------------------------- en-tête */

.t-header { position: relative; z-index: 50; }
.t-header--sticky .t-header { position: sticky; top: 0; }
.t-header .t-bar {
    background: var(--t-bg);
    border-bottom: 1px solid var(--t-border);
    transition: box-shadow .3s ease;
}
.t-header-dark .t-bar { background: var(--t-dark); border-bottom-color: transparent; color: #fff; }
.t-header-primary .t-bar { background: var(--t-primary); border-bottom-color: transparent; color: var(--t-on-primary); }
.t-header-dark .t-bar a, .t-header-primary .t-bar a { color: inherit; }

.t-topbar {
    background: var(--t-dark);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
}
.t-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.t-topbar__contact { display: flex; gap: 20px; }
.t-topbar a { color: inherit; text-decoration: none; }
.t-topbar a:hover { color: #fff; }
.t-topbar i { margin-inline-end: 6px; opacity: .8; }

.t-social { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.t-social a {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    text-decoration: none; transition: background-color .2s ease;
}
.t-social a:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.t-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav actions";
    align-items: center;
    gap: 24px;
    min-height: var(--t-header-h);
}
.t-logo { grid-area: logo; display: inline-flex; align-items: center; text-decoration: none; }
.t-logo img { max-height: 52px; width: auto; }
.t-logo__texte {
    font-family: var(--t-font-head);
    font-weight: var(--t-head-weight);
    font-size: 24px;
    letter-spacing: var(--t-head-spacing);
    white-space: nowrap;
}
.t-nav { grid-area: nav; }
.t-nav__liste { display: flex; flex-wrap: wrap; gap: 4px 26px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; }
.t-nav__liste a {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.t-nav__liste a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.t-nav__liste a:hover::after, .t-nav__liste .is-actif a::after { transform: scaleX(1); }
.t-header-light .t-nav__liste a:hover, .t-header-light .t-nav__liste .is-actif a { color: var(--t-primary); }
.t-actions { grid-area: actions; display: flex; align-items: center; gap: 6px; }
.t-action {
    position: relative; display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    font-size: 18px; text-decoration: none;
    transition: background-color .2s ease;
}
.t-action:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.t-panier__nombre {
    position: absolute; top: 2px; inset-inline-end: 0;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px; display: grid; place-items: center;
    background: var(--t-primary); color: var(--t-on-primary);
    font-size: 11px; font-weight: 700; line-height: 1;
}
.t-header-primary .t-panier__nombre { background: var(--t-dark); color: #fff; }
.t-burger { display: none; }

/* Logo centré, menu en dessous */
.t-header--centered .t-bar__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". logo actions" "nav nav nav";
    row-gap: 0;
    padding-top: 14px;
}
.t-header--centered .t-logo { justify-self: center; }
.t-header--centered .t-actions { justify-self: end; }
.t-header--centered .t-nav__liste { justify-content: center; padding: 6px 0 4px; }

/* Menu à gauche, logo au centre */
.t-header--split .t-bar__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo actions"; }
.t-header--split .t-nav__liste { justify-content: flex-start; }
.t-header--split .t-actions { justify-self: end; }

@media (max-width: 991.98px) {
    .t-bar__inner,
    .t-header--centered .t-bar__inner,
    .t-header--split .t-bar__inner {
        grid-template-columns: 44px 1fr auto;
        grid-template-areas: "burger logo actions";
        min-height: 64px;
        padding-top: 0;
        gap: 10px;
    }
    .t-logo { justify-self: center; }
    .t-logo img { max-height: 42px; }
    .t-logo__texte { font-size: 20px; }
    .t-nav { display: none; }
    .t-burger {
        grid-area: burger;
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 10px;
        border: 0; background: transparent; color: inherit; cursor: pointer;
    }
    .t-burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
    .t-topbar__email { display: none; }
    .t-action--tel { display: none; }
}

/* --------------------------------------------------------- pied de page */

.t-footer { background: var(--t-dark); color: rgba(255, 255, 255, .78); margin-top: 0; }
.t-footer-light .t-footer { background: var(--t-surface); color: var(--t-muted); border-top: 1px solid var(--t-border); }
.t-footer-primary .t-footer { background: var(--t-primary); color: color-mix(in srgb, var(--t-on-primary) 85%, transparent); }
.t-footer a { color: inherit; text-decoration: none; }
.t-footer a:hover { color: #fff; }
.t-footer-light .t-footer a:hover { color: var(--t-primary); }
.t-footer .t-logo__texte, .t-footer .t-footer__titre, .t-footer .t-footer__lettre-titre { color: #fff; }
.t-footer-light .t-footer .t-logo__texte,
.t-footer-light .t-footer .t-footer__titre,
.t-footer-light .t-footer .t-footer__lettre-titre { color: var(--t-text); }
.t-footer-primary .t-footer .t-logo__texte,
.t-footer-primary .t-footer .t-footer__titre,
.t-footer-primary .t-footer .t-footer__lettre-titre { color: var(--t-on-primary); }

.t-footer__lettre { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.t-footer__lettre-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 40px; }
.t-footer__lettre-titre { margin: 0; font-size: clamp(20px, 2.4vw, 28px); }
.t-surtitre { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.t-lettre { display: flex; gap: 8px; flex: 1 1 340px; max-width: 480px; }
.t-lettre input {
    flex: 1; min-width: 0; padding: 12px 16px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: var(--t-btn-radius);
    background: transparent; color: inherit;
}
.t-lettre input::placeholder { color: inherit; opacity: .6; }
.t-footer-primary .t-lettre .t-btn { background: var(--t-dark); border-color: var(--t-dark); }

.t-footer__grille {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 36px;
    padding-block: 56px 40px;
}
.t-footer__marque p { margin: 14px 0 18px; line-height: 1.7; max-width: 340px; }
.t-logo--pied img { max-height: 56px; filter: none; }
.t-footer__titre { font-size: 15px; margin: 0 0 16px; letter-spacing: .02em; }
.t-footer__liens, .t-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.t-footer__contact i { width: 18px; margin-inline-end: 6px; opacity: .7; }
.t-footer__bas { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 13.5px; }
.t-footer__bas-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 18px; }

.t-footer--centered .t-footer__grille { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 24px; }
.t-footer--centered .t-footer__marque p { margin-inline: auto; }
.t-footer--centered .t-social { justify-content: center; }
.t-footer--centered .t-footer__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.t-footer--centered .t-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.t-footer--centered .t-footer__bas-inner { justify-content: center; text-align: center; }

@media (max-width: 991.98px) {
    .t-footer__grille { grid-template-columns: 1fr 1fr; }
    .t-footer__marque { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .t-footer__grille { grid-template-columns: 1fr; gap: 26px; padding-block: 40px 28px; }
}

/* ------------------------------------------------------ fil d'Ariane */
/* Melipona pose une photo de rucher sous chaque titre de page : le socle la
   remplace par un bandeau sobre aux couleurs du thème. */
.theme-socle .pq-breadcrumb {
    background: var(--t-surface) !important;
    color: var(--t-text);
    padding: 44px 0;
    text-align: start;
}
.theme-socle .pq-breadcrumb::before { display: none; }
.theme-socle .pq-breadcrumb h1 { color: var(--t-text); font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 8px; }
.theme-socle .pq-breadcrumb .breadcrumb { margin: 0; padding: 0; background: none; font-size: 14px; }
.theme-socle .pq-breadcrumb .breadcrumb-item,
.theme-socle .pq-breadcrumb .breadcrumb-item a,
.theme-socle .pq-breadcrumb .breadcrumb-item::before { color: var(--t-muted); }
.theme-socle .pq-breadcrumb .breadcrumb-item.active { color: var(--t-text); }

/* ------------------------------------------------------- cartes produit */

.theme-socle .pq-shop-box {
    border-radius: var(--t-radius);
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    box-shadow: none;
}
.t-card--shadow .pq-shop-box { border-color: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px -16px rgba(0, 0, 0, .25); }
.t-card--shadow .pq-shop-box:hover { box-shadow: var(--t-shadow), 0 18px 40px -22px rgba(0, 0, 0, .35); }
.t-card--bordered .pq-shop-box:hover { border-color: var(--t-primary); box-shadow: none; }
.t-card--minimal .pq-shop-box { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.t-card--minimal .pq-shop-box:hover { transform: none; box-shadow: none; }
.t-card--minimal .pq-shop-product-img { border-radius: var(--t-radius); background: var(--t-surface); }
.t-card--minimal .pq-shop-box .pq-product-detail { padding-inline: 2px; }

.theme-socle .pq-shop-product-img { background: #fff; }
.theme-socle .pq-shop-product-img::after { background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--t-primary) 10%, transparent)); }
.t-card-ratio--portrait .pq-shop-product-img img { aspect-ratio: 3 / 4; object-fit: cover; padding: 0; }
.t-card-ratio--landscape .pq-shop-product-img img { aspect-ratio: 4 / 3; }
.t-card-ratio--portrait .pq-no-image { aspect-ratio: 3 / 4; }
.t-card-ratio--landscape .pq-no-image { aspect-ratio: 4 / 3; }
/* Pas d'image : un aplat teinté plutôt qu'un pot de miel. */
.theme-socle .pq-no-image { background: var(--t-surface); color: transparent; }
.theme-socle .pq-no-image i { display: none; }

.theme-socle .pq-shop-box .pq-product-detail .pq-product-name { font-size: 16px; color: var(--t-text); justify-content: flex-start; text-align: start; }
.theme-socle .pq-shop-box .pq-product-detail { text-align: start; }
.t-card-align--center .pq-shop-box .pq-product-detail { text-align: center; }
.t-card-align--center .pq-shop-box .pq-product-detail .pq-product-name { justify-content: center; text-align: center; }
.theme-socle .pq-shop-box .pq-product-detail .pq-product-price { color: var(--t-text); font-family: var(--t-font-body); font-size: 17px; }
.theme-socle .pq-shop-box .pq-product-detail .pq-product-price del { color: var(--t-muted); }

.theme-socle .pq-shop-box .pq-button-contain .pq-cart-button {
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-family: var(--t-font-body);
    font-size: 15px;
    letter-spacing: .02em;
}
.theme-socle .pq-shop-box .pq-button-contain .pq-cart-button:hover { background: var(--t-primary-fonce); }
/* « Toujours visible » : le bouton quitte le survol et passe sous la photo. */
.t-card-btn--always .pq-shop-box .pq-button-contain { position: static; transform: none; }
.t-card-btn--always .pq-shop-box .pq-button-contain .pq-cart-button { border-radius: 0; }
.t-card--minimal.t-card-btn--always .pq-shop-box .pq-button-contain .pq-cart-button {
    border-radius: var(--t-btn-radius);
    margin-top: 10px;
}
.theme-socle .pq-badge-sale { background: var(--t-primary); color: var(--t-on-primary); }

/* -------------------------------------------------------- blocs génériques */

.theme-socle .bb { padding-block: clamp(48px, 7vw, 88px); }
.theme-socle .bb__eyebrow { color: var(--t-primary); font-family: var(--t-font-body); }
.theme-socle .bb-hero:not(.bb-hero--cover) { background: var(--t-surface); }

/* Annonces : le défilé reste, sa police suit le thème. */
.theme-socle .vm-annonces { font-family: var(--t-font-body); }

/* Menu : une entrée ne se coupe jamais en deux lignes ; le surplus va dans « Plus ». */
.t-nav__liste > li > a { white-space: nowrap; }
.t-nav__plus { position: relative; }
.t-nav__plus summary {
    list-style: none; cursor: pointer; padding: 8px 0;
    font-size: 15px; font-weight: 500; white-space: nowrap;
}
.t-nav__plus summary::-webkit-details-marker { display: none; }
.t-nav__plus summary i { font-size: 10px; margin-inline-start: 4px; }
.t-nav__sous {
    position: absolute; top: 100%; inset-inline-end: 0; z-index: 60;
    min-width: 220px; margin: 6px 0 0; padding: 8px; list-style: none;
    background: var(--t-bg); color: var(--t-text);
    border: 1px solid var(--t-border); border-radius: min(var(--t-radius), 12px);
    box-shadow: var(--t-shadow);
}
.t-nav__sous a { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--t-text) !important; }
.t-nav__sous a:hover { background: var(--t-surface); }
.t-header--split .t-nav__sous { inset-inline-end: auto; inset-inline-start: 0; }
.t-titres--upper .t-nav__plus summary { text-transform: inherit; }

/* Bannière sur fond sombre : le bouton secondaire passe en blanc. */
.theme-socle .bb-hero--cover .t-btn--contour { color: #fff; border-color: rgba(255, 255, 255, .75); }
.theme-socle .bb-hero--cover .t-btn--contour:hover { background: #fff; color: var(--t-dark); border-color: #fff; }

/* Titres d'avantages : en majuscules, ils se coupaient en plein mot sur téléphone. */
.theme-socle .bb-feature h6 { text-transform: none; letter-spacing: 0; font-size: 16px; overflow-wrap: break-word; hyphens: auto; }

/* Formulaire de commande : bandeau et bouton d'achat portent la couleur
   principale ; leur texte prend celle prévue pour elle (blanc par défaut).
   Sur l'ambre du miel, le texte sombre était voulu ; pas sur un bleu ou un indigo. */
.theme-socle .shop-order-form .pq-quick-order-title,
.theme-socle .shop-order-form .pq-quick-order-title .vm-ar {
    color: var(--t-on-primary);
}
.theme-socle .shop-order-form .pq-quick-order-title {
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-primary) 82%, #fff) 0%, var(--t-primary) 100%);
    font-family: var(--t-font-body);
}
.theme-socle .shop-order-form .vm-envoi.vm-envoi--achat,
.theme-socle .shop-order-form .vm-envoi.vm-envoi--achat .vm-envoi__texte,
.theme-socle .shop-order-form .vm-envoi.vm-envoi--achat .vm-ar {
    color: var(--t-on-primary);
}
.theme-socle .shop-order-form .vm-envoi.vm-envoi--achat { border-radius: var(--t-btn-radius); }

/* ------------------------------------------------- recherche de l'en-tête */
/* Thèmes dont l'en-tête propose une recherche (themes/_partials/recherche) :
   un <details> sans JavaScript, ouvert sous l'icône. */
.t-recherche { position: relative; }
.t-recherche > summary { list-style: none; cursor: pointer; }
.t-recherche > summary::-webkit-details-marker { display: none; }
.t-recherche__form {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
    display: flex; gap: 6px; width: min(360px, calc(100vw - 32px)); padding: 8px;
    background: var(--t-bg); color: var(--t-text);
    border: 1px solid var(--t-border); border-radius: calc(var(--t-radius) + 4px);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35);
}
.t-recherche__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--t-border); border-radius: var(--t-btn-radius); background: transparent; color: inherit; }
.theme-socle .t-recherche__form .t-btn { padding: 0 16px; height: 44px; box-shadow: none; }
@media (max-width: 991.98px) {
    .t-recherche__form { position: fixed; top: 72px; inset-inline: 16px; width: auto; }
}

/* Pastille de remise en arabe : « -52 % » ne contient aucune lettre, il
   prendrait le sens de la page et s'afficherait « % 52- ». Le sens est tiré
   du texte de la pastille lui-même : chiffres de gauche à droite, mot arabe
   (« جديد ») de droite à gauche. */
.pq-badge-sale, .pq-badge-new, .pq-badge { unicode-bidi: plaintext; }

/* Montants de la carte produit : « 48,000 DT » ne se coupe jamais avant « DT ».
   Sur une petite carte, le prix barré passe au-dessus du prix. */
.pq-product-price del, .pq-montant { white-space: nowrap; }
@media (max-width: 420px) {
    .pq-shop-box .pq-product-price del { display: block; font-size: .85em; line-height: 1.2; }
}