/* =========================================================================
   1. RÉGLAGES GÉNÉRAUX
   ========================================================================= */

#ph-pc-categories-box,
#ph-pc-category-box,
#ph-pc-item-box,
#ph-pc-checkout-box,
#ph-pc-user-box,
#ph-pc-comparison-box,
#ph-pc-wishlist-box {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    color: #1b1b1b;
    font-size: 15px;
    line-height: 1.5;
}

#ph-pc-categories-box .ph-cb,
#ph-pc-category-box .ph-cb,
#ph-pc-item-box .ph-cb,
#ph-pc-checkout-box .ph-cb,
#ph-pc-user-box .ph-cb {
    clear: both;
}

/* Bouton retour (Categories / Back) présent sur presque toutes les vues */
#ph-pc-categories-box .ph-top,
#ph-pc-category-box .ph-top,
#ph-pc-item-box .ph-top,
#ph-pc-checkout-box .ph-top {
    margin-bottom: 25px;
}

#ph-pc-categories-box .ph-top .btn,
#ph-pc-category-box .ph-top .btn,
#ph-pc-item-box .ph-top .btn,
#ph-pc-checkout-box .ph-top .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 0 !important;
    color: #071b78 !important;
    background: #eef3ff !important;
    font-size: 14px;
    text-decoration: none;
}

#ph-pc-categories-box .ph-top .btn:hover,
#ph-pc-category-box .ph-top .btn:hover,
#ph-pc-item-box .ph-top .btn:hover,
#ph-pc-checkout-box .ph-top .btn:hover {
    background: #dde8ff !important;
}

/* Titre principal de chaque vue */
#ph-pc-categories-box > .ph-header,
#ph-pc-category-box > .ph-header,
#ph-pc-item-box .ph-header,
#ph-pc-checkout-box .ph-header,
#ph-pc-user-box .ph-header {
    margin: 0 0 30px;
    color: #071b78;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 700;
}


/* =========================================================================
   2. VUE CATÉGORIES (liste des catégories elle-même)
   ========================================================================= */

#ph-pc-categories-box #phItems.ph-items.grid,
#ph-pc-categories-box #phCategories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
}

#ph-pc-categories-box .ph-category-box,
#ph-pc-categories-box .ph-item-box {
    height: 100%;
}

#ph-pc-categories-box .ph-thumbnail {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(7, 27, 120, .10);
    transition: transform .2s ease, box-shadow .2s ease;
}

#ph-pc-categories-box .ph-thumbnail:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(7, 27, 120, .17);
}

#ph-pc-categories-box .ph-category-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 20px;
    background: #f5f8fc;
}

#ph-pc-categories-box .ph-category-item-image img {
    display: block;
    max-width: 100%;
    height: 160px;
    object-fit: contain;
}

#ph-pc-categories-box .ph-category-item-body {
    padding: 20px;
}

#ph-pc-categories-box .ph-category-item-body h2,
#ph-pc-categories-box .ph-category-item-body h3 {
    margin: 0 0 8px;
    color: #071b78;
    font-size: 19px;
    font-weight: 700;
}

#ph-pc-categories-box .ph-category-item-body a {
    color: inherit;
    text-decoration: none;
}

#ph-pc-categories-box .ph-category-item-body p {
    color: #667085;
    font-size: 14px;
}


/* =========================================================================
   3. VUE CATÉGORIE / PRODUITS (liste de produits d'une catégorie)
   ========================================================================= */

#ph-pc-category-box #phItemsBox {
    width: 100%;
}

#ph-pc-category-box #phItems > .row.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
}

#ph-pc-category-box .row-item {
    width: auto;
    max-width: none;
    padding: 0;
}

/* Barre au-dessus de la liste : tri, affichage, filtre */
#ph-pc-category-box .ph-pagination-top,
#ph-pc-category-box .ph-pagination {
    align-items: center;
    margin-bottom: 20px;
}

#ph-pc-category-box .ph-pagination-top select,
#ph-pc-category-box .ph-pagination select {
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0 10px;
}


/* =========================================================================
   4. CARTES PRODUITS (communes catégorie + résultats de recherche)
   ========================================================================= */

#ph-pc-category-box .ph-item-box,
#ph-pc-categories-box .ph-item-box {
    width: 100%;
    height: 100%;
}

#ph-pc-category-box .ph-thumbnail {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(7, 27, 120, .10);
    transition: transform .2s ease, box-shadow .2s ease;
}

#ph-pc-category-box .ph-thumbnail:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(7, 27, 120, .17);
}

#ph-pc-category-box .ph-item-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Zone image + icônes flottantes (comparaison, wishlist, aperçu rapide) */
#ph-pc-category-box .ph-category-item-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 210px;
    padding: 25px;
    background: #f5f8fc;
}

#ph-pc-category-box .ph-category-item-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 180px;
    object-fit: contain;
}

#ph-pc-category-box .ph-category-action-icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s ease;
}

#ph-pc-category-box .ph-category-item-image:hover .ph-category-action-icons {
    opacity: 1;
}

#ph-pc-category-box .ph-category-action-icons a,
#ph-pc-category-box .ph-category-action-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    color: #071b78;
}

/* Corps de la carte */
#ph-pc-category-box .ph-category-item-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px;
}

#ph-pc-category-box .ph-product-header {
    margin: 0 0 14px;
    color: #071b78;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

#ph-pc-category-box .ph-product-header a {
    color: inherit;
    text-decoration: none;
}

#ph-pc-category-box .ph-product-header a:hover {
    color: #08c8dc;
}

/* Description courte, si activée dans les options */
#ph-pc-category-box .ph-category-item-description,
#ph-pc-category-box .ph-description {
    margin-bottom: 14px;
    color: #667085;
    font-size: 13.5px;
}

/* Bloc prix */
#ph-pc-category-box .ph-item-action-box,
#ph-pc-category-box .ph-category-action-box-buttons {
    margin-top: auto;
}

#ph-pc-category-box [id^="phItemPriceBoxCategory"],
#ph-pc-category-box .ph-category-price-box {
    margin-bottom: 18px;
}

#ph-pc-category-box .ph-price-txt {
    color: #667085;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#ph-pc-category-box .ph-price-brutto {
    color: #071b78;
    font-size: 23px;
    font-weight: 700;
}

#ph-pc-category-box .ph-price-netto {
    color: #667085;
    font-size: 13px;
}

/* Prix barré / promotion */
#ph-pc-category-box .ph-price-original,
#ph-pc-category-box del {
    color: #98a2b3;
    font-size: 14px;
    text-decoration: line-through;
}

/* Stock */
#ph-pc-category-box .ph-product-stock,
#ph-pc-category-box .ph-stock-status {
    display: inline-block;
    margin-bottom: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #eafaf0;
    color: #1a7f4b;
    font-size: 12px;
    font-weight: 600;
}

#ph-pc-category-box .ph-stock-status.ph-out-of-stock,
#ph-pc-category-box .ph-product-stock.ph-out {
    background: #fdeaea;
    color: #b42318;
}

/* Zone boutons (voir produit / ajouter au panier) */
#ph-pc-category-box .ph-category-action-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#ph-pc-category-box .ph-button-view-product-box,
#ph-pc-category-box .ph-button-add-to-cart-box {
    float: none;
    width: auto;
    margin: 0;
}


/* =========================================================================
   5. ICÔNES, LABELS ET TAGS
   ========================================================================= */

/* Labels affichés au-dessus du produit (ex: Nouveau, Promo) */
#ph-pc-category-box .ph-label,
#ph-pc-item-box .ph-label {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: #071b78;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Tags affichés sous le produit */
#ph-pc-category-box .ph-tag,
#ph-pc-item-box .ph-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    color: #667085;
    font-size: 12px;
}

/* Icônes SVG Phoca (panier, vue, retour...) */
#ph-pc-categories-box .pc-si,
#ph-pc-category-box .pc-si,
#ph-pc-item-box .pc-si,
#ph-pc-checkout-box .pc-si {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}


/* =========================================================================
   6. VUE PRODUIT (fiche détaillée)
   ========================================================================= */

#ph-pc-item-box .ph-item-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 45px;
    align-items: start;
}

/* Colonne image + galerie */
#ph-pc-item-box .ph-product-image-box,
#ph-pc-item-box .ph-image-main {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f5f8fc;
    padding: 25px;
    text-align: center;
}

#ph-pc-item-box .ph-product-image-box img,
#ph-pc-item-box .ph-image-main img {
    max-width: 100%;
    height: auto;
}

#ph-pc-item-box .ph-thumbs,
#ph-pc-item-box .ph-image-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

#ph-pc-item-box .ph-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
}

/* Colonne informations produit */
#ph-pc-item-box .ph-product-header,
#ph-pc-item-box h1.ph-header {
    margin: 0 0 15px;
    color: #071b78;
    font-size: 30px;
    font-weight: 700;
}

#ph-pc-item-box .ph-price-box {
    margin: 15px 0 20px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #f5f8fc;
}

#ph-pc-item-box .ph-price-brutto {
    color: #071b78;
    font-size: 30px;
    font-weight: 700;
}

#ph-pc-item-box .ph-price-netto {
    color: #667085;
    font-size: 14px;
}

#ph-pc-item-box .ph-description,
#ph-pc-item-box .ph-description-long {
    margin: 20px 0;
    color: #344054;
    font-size: 15px;
    line-height: 1.6;
}

/* Attributs / variantes (taille, couleur, format) */
#ph-pc-item-box .ph-attributes,
#ph-pc-item-box .ph-attribute-box {
    margin: 20px 0;
}

#ph-pc-item-box .ph-attributes label,
#ph-pc-item-box .ph-attribute-box label {
    display: block;
    margin-bottom: 6px;
    color: #071b78;
    font-weight: 600;
    font-size: 13px;
}

#ph-pc-item-box .ph-attributes select,
#ph-pc-item-box .ph-attribute-box select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Zone ajout au panier de la fiche produit */
#ph-pc-item-box .ph-cart-box,
#ph-pc-item-box .phItemCartBoxForm {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
}

#ph-pc-item-box .ph-btn {
    min-height: 46px;
    padding: 12px 22px !important;
    font-size: 15px;
}


/* =========================================================================
   7. QUANTITÉ / TOUCHSPIN (catégorie, fiche produit, panier)
   ========================================================================= */

#ph-pc-item-box .ph-input-quantity,
#ph-pc-checkout-box .ph-input-quantity,
#ph-pc-category-box .ph-input-quantity {
    width: 60px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
}

#ph-pc-item-box .bootstrap-touchspin .input-group-btn-vertical,
#ph-pc-checkout-box .bootstrap-touchspin .input-group-btn-vertical {
    z-index: 2;
}


/* =========================================================================
   8. VUE PANIER / COMMANDE (checkout)
   ========================================================================= */

#ph-pc-checkout-box .ph-cart-table,
#ph-pc-checkout-box table.ph-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

#ph-pc-checkout-box .ph-cart-table th,
#ph-pc-checkout-box table.ph-table th {
    padding: 12px;
    background: #f5f8fc;
    color: #071b78;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
}

#ph-pc-checkout-box .ph-cart-table td,
#ph-pc-checkout-box table.ph-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

#ph-pc-checkout-box .ph-cart-table img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Total de commande */
#ph-pc-checkout-box .ph-total-box,
#ph-pc-checkout-box .ph-cart-summary {
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background: #f5f8fc;
}

#ph-pc-checkout-box .ph-total-box .ph-total-price,
#ph-pc-checkout-box .ph-grand-total {
    color: #071b78;
    font-size: 22px;
    font-weight: 700;
}

/* Étapes de commande (adresse, livraison, paiement) */
#ph-pc-checkout-box .ph-checkout-step {
    margin-bottom: 30px;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

#ph-pc-checkout-box .ph-checkout-step h3,
#ph-pc-checkout-box .ph-checkout-step-title {
    margin: 0 0 16px;
    color: #071b78;
    font-size: 18px;
    font-weight: 700;
}

/* Champs de formulaire (adresse, facturation) */
#ph-pc-checkout-box input[type="text"],
#ph-pc-checkout-box input[type="email"],
#ph-pc-checkout-box input[type="tel"],
#ph-pc-checkout-box select,
#ph-pc-checkout-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}

#ph-pc-checkout-box label {
    display: block;
    margin-bottom: 6px;
    color: #071b78;
    font-weight: 600;
    font-size: 13px;
}

/* Modes de paiement / livraison présentés en boutons */
#ph-pc-checkout-box .ph-payment-method,
#ph-pc-checkout-box .ph-shipping-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
}

#ph-pc-checkout-box .ph-payment-method.active,
#ph-pc-checkout-box .ph-shipping-method.active {
    border-color: #08c8dc;
    background: #f0fdff;
}


/* =========================================================================
   9. VUE COMPTE CLIENT
   ========================================================================= */

#ph-pc-user-box .ph-user-menu {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

#ph-pc-user-box .ph-user-menu a {
    padding: 10px 16px;
    border-radius: 8px;
    background: #eef3ff;
    color: #071b78;
    font-size: 14px;
    text-decoration: none;
}

#ph-pc-user-box .ph-user-menu a.active,
#ph-pc-user-box .ph-user-menu a:hover {
    background: #071b78;
    color: #fff;
}

#ph-pc-user-box .ph-orders-table {
    width: 100%;
    border-collapse: collapse;
}

#ph-pc-user-box .ph-orders-table th {
    padding: 10px;
    background: #f5f8fc;
    color: #071b78;
    font-size: 13px;
    text-align: left;
}

#ph-pc-user-box .ph-orders-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
}

#ph-pc-user-box .ph-order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: #eafaf0;
    color: #1a7f4b;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================================
   10. VUE COMPARAISON / LISTE DE SOUHAITS
   ========================================================================= */

#ph-pc-comparison-box table,
#ph-pc-wishlist-box table {
    width: 100%;
    border-collapse: collapse;
}

#ph-pc-comparison-box th,
#ph-pc-comparison-box td,
#ph-pc-wishlist-box th,
#ph-pc-wishlist-box td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

#ph-pc-comparison-box th,
#ph-pc-wishlist-box th {
    background: #f5f8fc;
    color: #071b78;
}


/* =========================================================================
   11. MESSAGES, ALERTES, INFO VIEW
   ========================================================================= */

#ph-pc-category-box .alert,
#ph-pc-item-box .alert,
#ph-pc-checkout-box .alert,
#ph-pc-user-box .alert,
.ph-info-box .alert {
    padding: 14px 18px;
    border-radius: 10px;
    border: 0;
    font-size: 14px;
}

#ph-pc-checkout-box .alert-success,
.ph-info-box .alert-success {
    background: #eafaf0;
    color: #1a7f4b;
}

#ph-pc-checkout-box .alert-danger,
.ph-info-box .alert-danger {
    background: #fdeaea;
    color: #b42318;
}

.ph-info-box {
    max-width: 700px;
    margin: 60px auto;
    padding: 40px;
    border-radius: 16px;
    background: #f5f8fc;
    text-align: center;
}


/* =========================================================================
   12. PAGINATION
   ========================================================================= */

#ph-pc-category-box .phPaginationBox,
#ph-pc-category-box .pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
}

#ph-pc-category-box .pagination a,
#ph-pc-category-box .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    color: #071b78;
    background: #eef3ff;
    text-decoration: none;
    font-size: 14px;
}

#ph-pc-category-box .pagination .active span,
#ph-pc-category-box .pagination a:hover {
    background: #071b78;
    color: #fff;
}


/* =========================================================================
   13. BOUTONS GÉNÉRIQUES PHOCA CART (toutes vues confondues)
   ========================================================================= */

#ph-pc-categories-box .ph-btn,
#ph-pc-category-box .ph-btn,
#ph-pc-item-box .ph-btn,
#ph-pc-checkout-box .ph-btn,
#ph-pc-user-box .ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px;
    padding: 10px 14px !important;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

#ph-pc-categories-box .ph-btn:hover,
#ph-pc-category-box .ph-btn:hover,
#ph-pc-item-box .ph-btn:hover,
#ph-pc-checkout-box .ph-btn:hover,
#ph-pc-user-box .ph-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* Bouton "voir le produit" (secondaire) */
#ph-pc-category-box .ph-button-view-product-box .ph-btn,
#ph-pc-categories-box .ph-button-view-category-box .ph-btn {
    color: #071b78;
    background: #eef3ff;
}

/* Bouton "ajouter au panier" (principal) */
#ph-pc-category-box .ph-button-add-to-cart-box .ph-btn,
#ph-pc-item-box .ph-btn.btn-primary,
#ph-pc-checkout-box .ph-btn.btn-primary {
    color: #fff;
    background: linear-gradient(100deg, #071b78 0%, #08c8dc 100%);
}

/* Bouton neutre / annuler / retour */
#ph-pc-checkout-box .ph-btn.btn-secondary,
#ph-pc-user-box .ph-btn.btn-secondary {
    color: #071b78;
    background: #eef3ff;
}

/* Bouton de suppression (panier) */
#ph-pc-checkout-box .ph-btn.btn-danger,
#ph-pc-checkout-box .ph-btn-remove {
    color: #b42318;
    background: #fdeaea;
}


/* =========================================================================
   14. RESPONSIVE
   ========================================================================= */

@media (max-width: 992px) {
    #ph-pc-item-box .ph-item-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 900px) {
    #ph-pc-categories-box #phItems.ph-items.grid,
    #ph-pc-category-box #phItems > .row.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #ph-pc-categories-box,
    #ph-pc-category-box,
    #ph-pc-item-box,
    #ph-pc-checkout-box,
    #ph-pc-user-box {
        padding: 22px 15px 45px;
    }

    #ph-pc-categories-box #phItems.ph-items.grid,
    #ph-pc-category-box #phItems > .row.grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #ph-pc-category-box .ph-category-action-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    #ph-pc-category-box .ph-button-view-product-box,
    #ph-pc-category-box .ph-button-add-to-cart-box,
    #ph-pc-categories-box .ph-btn,
    #ph-pc-category-box .ph-btn,
    #ph-pc-item-box .ph-btn,
    #ph-pc-checkout-box .ph-btn {
        width: 100% !important;
    }

    #ph-pc-checkout-box .ph-cart-table,
    #ph-pc-checkout-box table.ph-table {
        display: block;
        overflow-x: auto;
    }

    #ph-pc-user-box .ph-user-menu {
        flex-direction: column;
    }
}