/* Secal Regalia® — plg_system_secalscripts — feuille 06 : fiche-produit
   Chargée sur : pages HikaShop. */

/* ============================================================================
   FICHE PRODUIT
   ----------------------------------------------------------------------------
   Regroupe la colonne de droite (prix, quantité, bouton) en un bloc unique au
   lieu d'éléments dispersés, encadre l'image et ramène la description à une
   largeur de lecture confortable.
   ============================================================================ */

#hikashop_product_top_part,
#hikashop_product_top_part + .hk-row-fluid,
#hikashop_product_bottom_part {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Titre ---------- */
/* Espace entre la colonne image et la colonne achat.
   Les deux colonnes étant encadrées, leurs bordures se touchaient. */
#hikashop_product_top_part + .hk-row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

#hikashop_product_top_part + .hk-row-fluid > #hikashop_product_left_part,
#hikashop_product_top_part + .hk-row-fluid > #hikashop_product_right_part {
    flex: 1 1 320px;
    width: auto;
    max-width: none;
    margin: 0;
}

#hikashop_product_top_part h1 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    text-align: center;
}

/* La référence domine le titre : c'est par elle que les clubs commandent.
   Le nom du produit passe en second, plus léger et en gris. */
.hikashop_product_code_main {
    font-weight: 700;
    color: rgba(0, 0, 0, .9);
}

.hikashop_product_name_main {
    font-weight: 400;
    color: rgba(0, 0, 0, .6);
}

.hikashop_product_code_separator {
    color: rgba(0, 0, 0, .3);
}

/* Sur les variantes, HikaShop ajoute la caractéristique au nom :
   « Fanion en tissu personnalisé: 20 x 28 cm ». L'information fait doublon
   avec la référence (« Fanion 20x28 ») et avec le sélecteur de taille situé
   juste en dessous. Masquée dans le titre UNIQUEMENT — elle reste affichée
   dans le panier et sur la commande, où elle distingue les lignes. */
#hikashop_product_top_part .hikashop_product_variant_subname {
    display: none;
}

/* ---------- Image ----------
   Un seul cadre, posé sur la colonne entière : encadrer aussi les conteneurs
   internes de HikaShop produisait des cadres imbriqués et des vignettes qui
   débordaient sur l'image principale. */
#hikashop_product_left_part {
    padding: 20px;
    background: rgba(0, 0, 0, .025);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    box-sizing: border-box;
}

#hikashop_product_left_part img {
    max-width: 100%;
    height: auto;
}

/* Vignettes : en ligne, et bornées en taille.
   Les images sont servies en 220 px par HikaShop ; sans contrainte, elles
   s'empilent et débordent sur l'image principale. La limite porte sur les
   IMAGES, jamais sur le conteneur — qui doit rester pleine largeur. */
#hikashop_small_image_div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}

#hikashop_small_image_div > a {
    display: inline-flex;
    line-height: 0;
}

#hikashop_small_image_div img.hikashop_child_image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 3px;
    padding: 4px;
    box-sizing: border-box;
}

#hikashop_small_image_div img.hikashop_child_image_active {
    border-color: var(--azur, #2DA0CE);
}

/* ---------- Colonne de droite : un seul bloc ---------- */
#hikashop_product_right_part {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 28px;
    background: rgba(0, 0, 0, .025);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    box-sizing: border-box;
}

#hikashop_product_price_main {
    font-size: 1.6rem;
    line-height: 1.2;
    width: 100%;
}

/* Prix unique : montant en gras, mention « l'unité » en petit gris.
   Les valeurs sont posées explicitement plutôt que laissées à l'héritage,
   pour que le rendu reste cohérent avec celui des prix dégressifs. */
#hikashop_product_price_main .hikashop_product_price {
    font-weight: 700;
}

#hikashop_product_price_main .hikashop_product_price_per_unit,
#hikashop_product_price_main .hikashop_product_price_per_unit_x {
    font-size: .85rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .55);
}

/* Prix barré et prix promotionnel, le cas échéant */
#hikashop_product_price_main .hikashop_product_price_before_discount {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .45);
    text-decoration: line-through;
}

/* Quantité et bouton alignés à gauche, non plus dispersés */
#hikashop_product_quantity_main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
}

#hikashop_product_quantity_main .hikashop_product_quantity_div,
#hikashop_product_quantity_main form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#hikashop_product_quantity_main .hikabtn,
#hikashop_product_contact_main .hikabtn {
    padding: 12px 28px;
    font-size: 1rem;
}

/* Bouton d'ajout au panier centré dans la colonne */
#hikashop_product_quantity_main .hikashop_product_quantity_div,
#hikashop_product_quantity_main .hikacart,
#hikashop_product_quantity_main .hikabtn {
    align-self: center;
}

/* Les <br /> parasites du gabarit HikaShop sont des enfants DIRECTS de la
   colonne. Le sélecteur ">" est indispensable : sans lui, cette règle masquait
   aussi les <br/> qui séparent les paliers de prix dégressifs, rendant la
   liste illisible. */
#hikashop_product_right_part > br {
    display: none;
}

/* ---------- Prix dégressifs par quantité ---------- */
.hikashop_product_several_prices {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hikashop_product_several_prices br {
    display: none;
}

.hikashop_product_price_with_min_qty {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.hikashop_product_price_with_min_qty:last-child {
    border-bottom: 0;
}

.hikashop_product_several_prices .hikashop_product_price {
    font-size: 1.15rem;
    white-space: nowrap;
}

.hikashop_product_several_prices .hikashop_product_price_per_unit_x {
    font-size: .85rem;
    color: rgba(0, 0, 0, .55);
    text-align: right;
}

/* ---------- Champs personnalisés du produit ----------
   HikaShop rend chaque champ dans une ligne de tableau : libellé à gauche,
   champ à droite. Les lignes passent en blocs pour empiler le libellé
   au-dessus de son champ, ce qui laisse toute la largeur aux listes
   déroulantes et au bouton de téléversement. */
#hikashop_product_right_part table tr[class*="hikashop_item_"] {
    display: block;
    margin-bottom: 14px;
}

#hikashop_product_right_part table tr[class*="hikashop_item_"] > td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
}

/* Le libellé : première cellule de la ligne */
#hikashop_product_right_part table tr[class*="hikashop_item_"] > td:first-child {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: .95rem;
}

#hikashop_product_right_part table tr[class*="hikashop_item_"] select,
#hikashop_product_right_part table tr[class*="hikashop_item_"] input[type="text"],
#hikashop_product_right_part table tr[class*="hikashop_item_"] input[type="file"] {
    width: 100%;
}

/* Le sélecteur de variantes occupe lui aussi toute la largeur */
#hikashop_product_characteristics,
#hikashop_product_characteristics table,
#hikashop_product_characteristics select {
    width: 100%;
}

/* Astérisque des champs obligatoires : collée au libellé plutôt qu'isolée
   sur sa propre ligne sous le champ. */
#hikashop_product_right_part .hikashop_field_required {
    color: #d9534f;
    font-weight: 700;
}

/* ---------- Description ---------- */
#hikashop_product_bottom_part {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

#hikashop_product_description_main {
    max-width: 68ch;
    line-height: 1.65;
}

/* Description déplacée par la surcharge de vue : à droite sous le bouton
   quand le produit a peu de champs, à gauche sous les images au-delà de deux
   champs personnalisés. Même traitement dans les deux cas. */
#hikashop_product_right_part #hikashop_product_description_main,
#hikashop_product_left_part #hikashop_product_description_main {
    width: 100%;
    max-width: none;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    font-size: .95rem;
}

#hikashop_product_description_main p {
    margin: 0 0 .7em;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    #hikashop_product_top_part + .hk-row-fluid {
        gap: 20px;
    }

    #hikashop_product_right_part {
        padding: 20px;
    }

    #hikashop_product_left_part .hikashop_product_main_image_subdiv,
    #hikashop_product_left_part .hikashop_product_main_image {
        padding: 16px;
    }
}