/* Store INOVATECH — catalogue (style vitrine), fiche produit, panier, commande, suivi */
:root { --st-red: #e11d48; --st-radius: 14px; }

/* Barre des catégories (défilement horizontal) */
.st-cats { display: flex; gap: .55rem; overflow-x: auto; padding: .25rem .1rem .75rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.st-cats a { flex: none; scroll-snap-align: start; display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; width: 92px; text-align: center; text-decoration: none; color: var(--navy); font-size: .76rem; font-weight: 600; line-height: 1.2; }
.st-cats a span.ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: 1.35rem; color: var(--brand); transition: transform .2s, border-color .2s, background .2s; }
.st-cats a:hover span.ic { transform: translateY(-2px); border-color: var(--brand); }
.st-cats a.active span.ic { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Barre filtres / tri */
.st-toolbar { position: sticky; top: calc(var(--nav-h, 76px) - 1px); z-index: 20; background: rgba(243, 247, 253, .94); backdrop-filter: blur(8px); margin: 0 -12px 1rem; padding: .6rem 12px; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-bottom: 1px solid var(--line); }
.st-toolbar .form-control, .st-toolbar .form-select { border-radius: 999px; font-size: .88rem; }
.st-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.st-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; }
.st-search .form-control { padding-left: 2.3rem; }
.st-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.st-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.st-count { font-size: .82rem; color: var(--muted); margin-left: auto; }

/* Grille produits */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 768px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .st-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.st-card { position: relative; background: #fff; border-radius: var(--st-radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); transition: box-shadow .25s, transform .25s; }
.st-card:hover { box-shadow: 0 14px 30px rgba(11, 31, 58, .12); transform: translateY(-3px); }
.st-media { position: relative; aspect-ratio: 1 / 1; background: #f4f6fa; overflow: hidden; }
.st-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .35s; }
.st-card:hover .st-media img { transform: scale(1.04); }
.st-ph { width: 100%; height: 100%; display: grid; place-items: center; color: #b8c2d4; font-size: 2.6rem; }
.st-badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.st-badge { font-size: .68rem; font-weight: 800; padding: .18rem .45rem; border-radius: 6px; color: #fff; background: var(--st-red); letter-spacing: .02em; }
.st-badge.dark { background: var(--navy); }
.st-badge.amber { background: #f59e0b; color: #1f2937; }
.st-badge.green { background: #16a34a; }
.st-body { padding: .65rem .75rem .8rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.st-brand { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.st-name { font-size: .86rem; line-height: 1.3; color: #1f2937; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.25em; }
.st-name a { color: inherit; text-decoration: none; }
.st-price { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; padding-top: .3rem; }
.st-price strong { color: var(--st-red); font-size: 1.02rem; font-weight: 800; }
.st-price del { color: var(--muted); font-size: .76rem; }
.st-stock { font-size: .72rem; font-weight: 600; }
.st-quick { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; }
.st-quick button, .st-quick a { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); display: grid; place-items: center; text-decoration: none; }
.st-quick button:hover, .st-quick a:hover { background: var(--navy); color: #fff; }

/* Fiche produit */
.st-gallery { position: sticky; top: calc(var(--nav-h, 76px) + 1rem); }
.st-main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--st-radius); background: #fff; border: 1px solid var(--line); scrollbar-width: none; }
.st-main::-webkit-scrollbar { display: none; }
.st-main img, .st-main .st-ph { flex: none; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 4%; scroll-snap-align: center; }
.st-thumbs { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; }
.st-thumbs button { flex: none; width: 64px; height: 64px; border-radius: 10px; border: 2px solid transparent; background: #fff; padding: 3px; }
.st-thumbs button.on { border-color: var(--brand); }
.st-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.st-title { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--navy); }
.st-bigprice strong { font-size: 1.7rem; color: var(--st-red); font-weight: 800; }
.st-bigprice del { color: var(--muted); margin-left: .5rem; }
.st-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-opts input { position: absolute; opacity: 0; pointer-events: none; }
.st-opts label { cursor: pointer; padding: .45rem .9rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: .86rem; font-weight: 600; }
.st-opts input:checked + label { border-color: var(--navy); background: var(--navy); color: #fff; }
.st-opts input:disabled + label { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.st-opts input:focus-visible + label { outline: 3px solid rgba(21, 101, 224, .35); }
.st-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.st-qty button { width: 38px; height: 38px; border: 0; background: transparent; font-size: 1.05rem; color: var(--navy); }
.st-qty input { width: 48px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.st-qty input::-webkit-outer-spin-button, .st-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.st-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .88rem; }
.st-perks i { width: 1.4rem; color: var(--brand); }
.st-specs { width: 100%; font-size: .88rem; }
.st-specs th { width: 38%; color: var(--muted); font-weight: 500; padding: .45rem .6rem; background: #f8fafc; }
.st-specs td { padding: .45rem .6rem; }
.st-specs tr { border-bottom: 1px solid var(--line); }
.st-buybar { display: none; }
@media (max-width: 991.98px) {
    .st-gallery { position: static; }
    .st-buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 20px rgba(10, 31, 68, .12); }
    .st-buybar .btn { flex: 1; border-radius: 999px; font-weight: 700; }
    body.has-buybar .whatsapp-float, body.has-buybar .back-to-top { bottom: 84px !important; }
    body.has-buybar footer { padding-bottom: 72px; }
}

/* Panier / commande */
.st-line { display: grid; grid-template-columns: 76px 1fr auto; gap: .8rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.st-line img, .st-line .st-ph { width: 76px; height: 76px; object-fit: contain; border-radius: 10px; background: #f4f6fa; font-size: 1.5rem; }
.st-summary { position: sticky; top: calc(var(--nav-h, 76px) + 1rem); }
.st-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin: 0; font-size: .92rem; }
.st-summary dd { margin: 0; text-align: right; font-weight: 600; }
.st-summary .tot { font-size: 1.15rem; font-weight: 800; color: var(--navy); border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .2rem; }
.st-choice { display: block; cursor: pointer; border: 1.5px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: #fff; height: 100%; }
.st-choice:has(input:checked) { border-color: var(--brand); background: #f0f6ff; }
.st-choice input { margin-right: .4rem; }
.st-track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; counter-reset: s; }
.st-track li { position: relative; text-align: center; font-size: .74rem; color: var(--muted); padding-top: 30px; }
.st-track li::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; border: 3px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; z-index: 1; }
.st-track li::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: #e2e8f0; }
.st-track li:first-child::after { display: none; }
.st-track li.on { color: var(--navy); font-weight: 700; }
.st-track li.on::before { background: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
.st-track li.on::after { background: #16a34a; }

/* Icône panier dans le menu */
.nav-cart { position: relative; }
@media (max-width: 575.98px) {
    .st-card .st-body { padding: .55rem .6rem .7rem; }
    .st-price strong { font-size: .95rem; }
    .st-toolbar { margin: 0 -12px .8rem; }
}

/* Carnet d'adresses (Mes adresses + choix à la commande) */
.st-addr-choice { position: relative; display: flex; gap: .55rem; align-items: flex-start; padding-right: 4.5rem; }
.st-addr-choice > input { margin-top: .3rem; flex-shrink: 0; }
.st-addr-body { flex: 1; min-width: 0; }
.st-addr-head { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; }
.st-addr-edit { position: absolute; top: .8rem; right: .9rem; font-weight: 600; text-decoration: none; }
.st-addr-new { padding-right: .9rem; color: var(--brand); }
.st-newaddr { border: 1.5px dashed var(--line); border-radius: 12px; padding: 1rem; background: #fbfcfe; }
.st-addr-card.is-default { border: 1.5px solid var(--brand); }
.st-addr-labels { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-addr-labels label { cursor: pointer; }
.st-addr-labels input { position: absolute; opacity: 0; pointer-events: none; }
.st-addr-labels span { display: inline-flex; align-items: center; padding: .38rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .85rem; font-weight: 600; color: var(--navy); }
.st-addr-labels input:checked + span { border-color: var(--brand); background: #f0f6ff; color: var(--brand); }
.st-addr-labels input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Formulaire d'adresse au style Shein / Temu */
.sh-addr .form-control, .sh-addr .form-select, .sh-addr .input-group-text { border-radius: 2px; border-color: #dcdfe4; box-shadow: none; }
.sh-addr .form-floating > .form-control, .sh-addr .form-floating > .form-select { height: 3.6rem; min-height: 3.6rem; }
.sh-addr .form-floating > label { color: #767676; font-size: .92rem; }
.sh-addr .form-control:focus, .sh-addr .form-select:focus { border-color: #222; box-shadow: none; }
.sh-addr .form-select:disabled { background-color: #f6f6f6; color: #222; opacity: 1; }
.sh-addr .sh-prefix { background: #fff; color: #222; font-size: .92rem; padding-inline: .9rem; }
.sh-addr .input-group > .form-floating > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Lignes d'adresse : libellé toujours en haut, exemple visible dessous (comme Shein) */
.sh-addr .sh-fixed > textarea.form-control { height: 4.6rem; min-height: 4.6rem; padding-top: 1.7rem; resize: vertical; }
.sh-addr .sh-fixed > textarea::placeholder { color: #a3a3a3; }
.sh-addr .sh-fixed > label { transform: scale(.85) translateY(-.5rem) translateX(.15rem); }
/* Erreurs : fond rosé + texte rouge sous le champ */
.sh-addr .form-control.is-invalid, .sh-addr .form-select.is-invalid,
.was-validated .sh-addr .form-control:invalid, .was-validated .sh-addr .form-select:invalid { background-color: #fbefed; border-color: #c44a2b; background-image: none; }
.was-validated .sh-addr .form-control:valid, .was-validated .sh-addr .form-select:valid, .sh-addr .form-control.is-valid { border-color: #dcdfe4; background-image: none; }
.sh-addr .invalid-feedback { color: #c44a2b; font-size: .8rem; margin-top: .3rem; }
.sh-addr .sh-help { font-size: .8rem; color: #767676; }
.sh-labels { display: flex; flex-wrap: wrap; gap: .5rem; }
.sh-labels label { cursor: pointer; }
.sh-labels input { position: absolute; opacity: 0; pointer-events: none; }
.sh-labels span { display: inline-flex; align-items: center; padding: .4rem .9rem; border: 1px solid #dcdfe4; border-radius: 2px; background: #fff; font-size: .85rem; color: #222; }
.sh-labels input:checked + span { border-color: #222; font-weight: 600; box-shadow: inset 0 0 0 1px #222; }
.sh-labels input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sh-tips summary { font-size: .82rem; color: #555; text-decoration: underline; cursor: pointer; list-style: none; }
.sh-tips summary::-webkit-details-marker { display: none; }
.sh-tips[open] ul { margin-top: .4rem; color: #555; }
.sh-secure { font-size: .78rem; color: #666; line-height: 1.45; }
.sh-secure span { display: block; color: #198754; font-size: .9rem; font-weight: 600; margin-bottom: .15rem; }
.btn-sh { background: #000; color: #fff; border-radius: 0; font-weight: 700; padding: .85rem 2rem; min-width: min(100%, 240px); border: 0; }
.btn-sh:hover, .btn-sh:focus { background: #222; color: #fff; }
.sh-title { font-weight: 800; padding-bottom: .6rem; border-bottom: 1px solid #e5e5e5; }
.was-validated .sh-addr .form-floating:has(:invalid) + .invalid-feedback,
.was-validated .sh-addr .input-group:has(:invalid) > .invalid-feedback { display: block; }
.was-validated .sh-addr .input-group:has(:invalid) > .sh-prefix { border-color: #c44a2b; background: #fbefed; }
.sh-addr .input-group:has(.is-invalid) > .sh-prefix { border-color: #c44a2b; background: #fbefed; }
.sh-addr .form-floating > label::after { background: transparent !important; }
.sh-addr .form-floating > .form-control:disabled ~ label, .sh-addr .form-floating > .form-select:disabled ~ label { color: #767676; }
.was-validated .sh-addr .form-check-input:valid { border-color: #adb5bd; }
.was-validated .sh-addr .form-check-input:valid:checked { background-color: var(--brand); border-color: var(--brand); }
.was-validated .sh-addr .form-check-input:valid ~ .form-check-label { color: inherit; }

/* Petit panier rapide (comme Shein) : bouton 🛒+ sur la carte, fenêtre d'options, message, animation */
.st-addcart-form { margin-left: auto; position: relative; z-index: 2; }
.st-addcart { position: relative; width: 34px; height: 26px; border-radius: 999px; border: 1px solid #222; background: #fff; color: #222; display: inline-grid; place-items: center; font-size: .8rem; padding: 0; transition: background .2s, color .2s, transform .15s; }
.st-addcart span { position: absolute; top: -6px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: #222; color: #fff; font-size: .62rem; line-height: 14px; font-weight: 700; text-align: center; }
.st-addcart:hover { background: #222; color: #fff; }
.st-addcart:active { transform: scale(.92); }
.st-addcart.done { background: #198754; border-color: #198754; color: #fff; }
.st-addcart.done span { background: #198754; }
.st-price { align-items: center; }
.nav-cart.st-bump { animation: st-bump .45s ease; }
@keyframes st-bump { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } }
.st-fly { position: fixed; z-index: 2000; border-radius: 10px; object-fit: contain; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); pointer-events: none; transition: all .65s cubic-bezier(.55, .06, .68, .19); }
.st-toast { position: fixed; left: 50%; bottom: 88px; z-index: 2100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: .55rem; background: rgba(20, 20, 20, .92); color: #fff; padding: .7rem 1rem; border-radius: 10px; font-size: .9rem; max-width: calc(100vw - 32px); transition: opacity .2s, transform .2s; }
.st-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.st-toast i { color: #4ade80; }
.st-toast.err i { color: #fca5a5; }
.st-toast a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; margin-left: .35rem; }
.st-sheet { position: fixed; inset: 0; z-index: 2050; }
.st-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.st-sheet-box { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; transform: translateY(100%); transition: transform .22s ease; }
.st-sheet.open .st-sheet-bg { opacity: 1; }
.st-sheet.open .st-sheet-box { transform: none; }
.st-sheet-x { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: #555; }
.st-sheet-head { display: flex; gap: .8rem; padding-right: 1.5rem; }
.st-sheet-head img, .st-sheet-ph { width: 92px; height: 92px; flex-shrink: 0; object-fit: contain; border-radius: 8px; background: #f4f6fa; }
.st-sheet-price { color: var(--st-red); font-size: 1.25rem; font-weight: 800; margin-right: .4rem; }
.st-sheet-info del { color: var(--muted); font-size: .85rem; }
.st-sheet-name { font-size: .88rem; color: #333; margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-sheet-stock { font-size: .8rem; font-weight: 600; margin-top: .25rem; }
.st-sheet-label { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; }
.st-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1rem 0; }
.st-sheet-more { font-size: .85rem; color: #222; text-decoration: underline; }
.st-sheet-add { width: 100%; background: #000; color: #fff; border-radius: 0; font-weight: 700; padding: .85rem; border: 0; }
.st-sheet-add:hover, .st-sheet-add:focus { background: #222; color: #fff; }
.st-sheet-add:disabled { background: #9a9a9a; color: #fff; }
body.st-sheet-open { overflow: hidden; }
@media (min-width: 768px) {
    .st-sheet-box { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; border-radius: 12px; transform: translate(-50%, -45%); opacity: 0; transition: transform .2s, opacity .2s; }
    .st-sheet.open .st-sheet-box { transform: translate(-50%, -50%); opacity: 1; }
    .st-toast { bottom: 32px; }
}
/* Fiche produit (téléphone) : icône panier dans la barre d'achat */
.st-buybar-cart { position: relative; flex: 0 0 46px !important; height: 42px; display: grid; place-items: center; color: #222; font-size: 1.2rem; text-decoration: none; }
.st-buybar-cart .nav-bell-badge { position: absolute; top: 0; right: 2px; }
.st-toast { width: max-content; }
.st-toast span { flex: 1 1 auto; }