/* Jou-commerce — styles boutique publique. Classes préfixées .jc- pour
   éviter toute collision avec le CSS d'un thème ou du cœur, même
   convention que les thèmes (voir .claude/skills/theme.md). Volontairement
   sobre/neutre : un thème garde son identité visuelle, ceci ne fait que
   rendre les grilles/formulaires lisibles sur n'importe quel arrière-plan. */

:root {
    --jc-primary: #0f172a;
    --jc-accent: #38bdf8;
    --jc-danger: #dc2626;
    --jc-success: #16a34a;
    --jc-border: #e2e8f0;
    --jc-radius: 10px;
    --jc-container: 1240px;
}

.jc-shop, .jc-product, .jc-cart, .jc-checkout, .jc-confirmation, .jc-tracking {
    max-width: var(--jc-container);
    margin: 0 auto;
    padding: 3rem 20px;
}

.jc-shop-header, .jc-product-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.jc-cart-link { text-decoration: none; font-weight: 600; }

.jc-categories { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.jc-categories a { text-decoration: none; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--jc-border); }
.jc-cat-active { background: var(--jc-primary); color: #fff; border-color: var(--jc-primary); }

.jc-sort { display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: .85rem; }

.jc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
.jc-card { border: 1px solid var(--jc-border); border-radius: var(--jc-radius); overflow: hidden; }
.jc-card-link { text-decoration: none; color: inherit; display: block; }
.jc-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.jc-card-img-placeholder { background: #f1f5f9; }
.jc-card-title { font-size: .95rem; margin: .6rem .75rem .3rem; }
.jc-card-price { margin: 0 .75rem 0; font-weight: 600; }
.jc-card-price-usd { margin: 0 .75rem .75rem; font-size: .78rem; }

.jc-price-old { text-decoration: line-through; font-weight: 400; margin-right: .4rem; }
.jc-price-sale { font-weight: 600; }
.jc-badge-outofstock { font-size: .8rem; margin: 0 .75rem .75rem; }

.jc-pagination { display: flex; gap: .5rem; margin-top: 1.5rem; }
.jc-pagination a { text-decoration: none; padding: .35rem .7rem; border: 1px solid var(--jc-border); border-radius: 6px; }
.jc-page-active { background: var(--jc-primary); color: #fff; border-color: var(--jc-primary); }

.jc-empty { }

.jc-product-layout { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 2rem; }
.jc-product-img { width: 100%; border-radius: var(--jc-radius); aspect-ratio: 1 / 1; object-fit: cover; }
.jc-product-category { font-size: .85rem; }
.jc-product-price { font-size: 1.4rem; font-weight: 700; }
.jc-product-description { white-space: pre-line; line-height: 1.6; }

.jc-variations { margin: 1rem 0; }
.jc-variation-label { display: block; font-weight: 600; margin-bottom: .5rem; }
.jc-variation-option { display: block; margin-bottom: .4rem; }

.jc-qty-row { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.jc-qty-input { width: 4.5rem; }
.jc-qty-box { display: inline-flex; align-items: center; border: 1px solid var(--jc-border); border-radius: 6px; overflow: hidden; }
.jc-qty-box button { width: 2.4rem; height: 2.4rem; border: none; background: transparent; cursor: pointer; font-size: 1rem; }
.jc-qty-box input { width: 3rem; text-align: center; border: none; border-left: 1px solid var(--jc-border); border-right: 1px solid var(--jc-border); height: 2.4rem; -moz-appearance: textfield; }
.jc-qty-box input::-webkit-outer-spin-button, .jc-qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jc-payment-row { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.jc-payment-row img { height: 20px; opacity: .7; }

.jc-currency-converter { margin-top: 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--jc-border); border-radius: var(--jc-radius); }
.jc-currency-title { font-weight: 600; margin: 0 0 .6rem; font-size: .9rem; }
.jc-currency-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.jc-currency-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.jc-currency-code { opacity: .65; }
.jc-currency-amount { font-weight: 600; }
.jc-currency-note { margin: 0; font-size: .75rem; opacity: .55; }

.jc-btn-primary { display: inline-block; padding: .7rem 1.4rem; border-radius: 8px; font-weight: 600; text-decoration: none; cursor: pointer; }
.jc-btn-ghost { background: transparent; border: 1px solid var(--jc-border); padding: .3rem .7rem; border-radius: 6px; cursor: pointer; }
.jc-btn-whatsapp { display: inline-block; background: #25d366; color: #fff; border: none; padding: .7rem 1.4rem; border-radius: 8px; font-weight: 600; text-decoration: none; }

.jc-cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.jc-cart-line-product { display: flex; align-items: center; gap: .8rem; }
.jc-cart-line-img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.jc-cart-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.jc-cart-table th, .jc-cart-table td { border-bottom: 1px solid var(--jc-border); padding: .8rem .6rem; text-align: left; }
.jc-order-summary { border: 1px solid var(--jc-border); border-radius: var(--jc-radius); padding: 1.5rem; position: sticky; top: 1.5rem; }
.jc-order-summary h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.jc-order-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; padding: .8rem 0; border-top: 1px solid var(--jc-border); }
.jc-cart-total { font-size: 1.1rem; margin: 1rem 0; }
.jc-cart-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: .5rem; }
.jc-cart-actions .jc-btn-primary, .jc-cart-actions .jc-btn-whatsapp { text-align: center; }
.jc-inline-form { display: flex; align-items: center; gap: .4rem; }

.jc-checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.jc-checkout-form { display: flex; flex-direction: column; gap: .3rem; }
.jc-checkout-form label { font-weight: 600; margin-top: .9rem; font-size: .88rem; }
.jc-checkout-form input[type="text"], .jc-checkout-form input[type="tel"] { padding: .8rem .9rem; border: 1px solid var(--jc-border); border-radius: 6px; font-size: .95rem; }
.jc-payment-methods { border: 1px solid var(--jc-border); border-radius: var(--jc-radius); padding: 1rem; margin-top: 1.3rem; }
.jc-payment-methods label { display: block; font-weight: 400; margin: .4rem 0; }
.jc-checkout-summary-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }
.jc-checkout-summary-list li { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.jc-checkout-summary-list li span { opacity: .6; margin-right: auto; margin-left: .4rem; }
.jc-checkout-submit { width: 100%; margin-top: 1.2rem; }

.jc-error { color: var(--jc-danger); font-weight: 600; }
.jc-confirmation { max-width: 640px; }