/* Inkland Skin : surcouche Girly (palette de /ftc). Active uniquement avec <html data-skin="girly">.
   Le thème ZOneTheme a ses couleurs en dur (#191919 pour l'accent) : on les surcharge ici sans toucher au thème. */

/* ---------- sélecteur Normal / Girly (même look que celui de /ftc), visible dans les deux skins ---------- */
.inkskin-seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid #F2B8CF; border-radius: 999px; background: #fff;
}
.inkskin-seg button {
    display: grid; place-items: center; width: 28px; height: 26px; margin: 0; padding: 0;
    border: 0; border-radius: 999px; background: none; color: #8F5F7C; cursor: pointer;
    transition: background .15s, color .15s;
}
.inkskin-seg button svg { width: 15px; height: 15px; }
.inkskin-seg button:hover { color: #3B1730; }
.inkskin-seg button[aria-checked="true"] { background: linear-gradient(135deg, #F0418F 0%, #B04BE0 100%); color: #fff; }
.inkskin-seg button:focus-visible { outline: 2px solid #3B1730; outline-offset: 1px; }

/* Placé par skin.js : tout à droite de la barre « Ouvrir Compte Pro / Livraison en 48-72h » (bureau).
   Sur mobile (pas de barre) il reste flottant ; masqué tant que sa place n'est pas décidée. */
.inkskin-seg:not(.inkskin-inline):not(.inkskin-floating):not(.inkskin-menu) { visibility: hidden; }
.inkskin-seg.inkskin-inline { margin-left: 14px; padding: 2px; align-self: center; }
.inkskin-seg.inkskin-inline button { width: 24px; height: 22px; }
.inkskin-seg.inkskin-inline button svg { width: 13px; height: 13px; }
.inkskin-menu-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 8px; padding: 14px 20px; border-top: 1px solid #ededed;
    font-size: 14px; font-weight: 600; color: inherit;
}
html[data-skin="girly"] .inkskin-menu-row { border-top-color: var(--sk-line); color: var(--sk-text); }
.inkskin-seg.inkskin-floating {
    position: fixed; right: 10px; bottom: 14px; z-index: 1040;
    box-shadow: 0 4px 14px rgba(59, 23, 48, .18);
}

/* ---------- palette ---------- */
html[data-skin="girly"] {
    --sk-bg: #FFF0F6;
    --sk-surface: #FFFFFF;
    --sk-surface-2: #FFE2EE;
    --sk-line: #F9D5E4;
    --sk-control: #F2B8CF;
    --sk-text: #3B1730;
    --sk-text-soft: #5E3450;
    --sk-muted: #8F5F7C;
    --sk-accent: #E0288A;
    --sk-accent-press: #C21774;
    --sk-accent-soft: rgba(224, 40, 138, .10);
    --sk-fill: linear-gradient(135deg, #F0418F 0%, #B04BE0 100%);
    --sk-fill-press: linear-gradient(135deg, #D8337F 0%, #9A3CC9 100%);
    --sk-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23E0288A' fill-opacity='.07'%3E%3Cpath d='M18 26s-7-4.3-8.6-8.5C8.2 14.4 10.2 11 13.4 11c1.9 0 3.1 1 4.6 2.8 1.5-1.8 2.7-2.8 4.6-2.8 3.2 0 5.2 3.4 4 6.5C25 21.7 18 26 18 26z'/%3E%3Cpath d='M54 62s-4.7-2.9-5.8-5.7c-.8-2.1.6-4.3 2.7-4.3 1.3 0 2.1.7 3.1 1.9 1-1.2 1.8-1.9 3.1-1.9 2.1 0 3.5 2.2 2.7 4.3C58.7 59.1 54 62 54 62z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- fond de page et textes ---------- */
html[data-skin="girly"] body {
    background-color: var(--sk-bg);
    background-image: var(--sk-pattern);
    background-attachment: fixed;
    color: var(--sk-text);
}
html[data-skin="girly"] #wrapper,
html[data-skin="girly"] #main,
html[data-skin="girly"] .breadcrumb-wrapper { background-color: transparent; }
html[data-skin="girly"] h1, html[data-skin="girly"] h2, html[data-skin="girly"] h3,
html[data-skin="girly"] h4, html[data-skin="girly"] .h1, html[data-skin="girly"] .h2,
html[data-skin="girly"] .h3, html[data-skin="girly"] .h4 { color: var(--sk-text); }
html[data-skin="girly"] .breadcrumb a, html[data-skin="girly"] .breadcrumb li { color: var(--sk-muted); }
html[data-skin="girly"] ::selection { background: var(--sk-accent); color: #fff; }

/* ---------- accent « texte » (liens, prix, icônes) : noir -> fuchsia ---------- */
html[data-skin="girly"] a:hover,
html[data-skin="girly"] .btn-link, html[data-skin="girly"] .btn-link:hover,
html[data-skin="girly"] .page-link, html[data-skin="girly"] .text-primary,
html[data-skin="girly"] .btn-outline-primary,
html[data-skin="girly"] .products-selection .total-products p,
html[data-skin="girly"] .products-selection .products-sort-order .product-display .display-select .selected,
html[data-skin="girly"] #header .left-nav-trigger .left-nav-icon,
html[data-skin="girly"] #footer .footer-about-us .fa,
html[data-skin="girly"] #footer .footer-about-us .material-icons,
html[data-skin="girly"] .feature .material-icons, html[data-skin="girly"] .feature .fa,
html[data-skin="girly"] .feature2 .material-icons, html[data-skin="girly"] .feature2 .fa,
html[data-skin="girly"] .feature a:hover, html[data-skin="girly"] .feature2 a:hover,
html[data-skin="girly"] .product-price, html[data-skin="girly"] .price-total,
html[data-skin="girly"] .product-name a:hover, html[data-skin="girly"] a.product-name:hover,
html[data-skin="girly"] .dropdown .expand-more:hover, html[data-skin="girly"] .dropdown-item:hover,
html[data-skin="girly"] .checkout-step-order .step-part .edit,
html[data-skin="girly"] .page-my-account #content .links a:hover,
html[data-skin="girly"] .active-filters .filter-block .material-icons,
html[data-skin="girly"] .product-list .product-miniature .grid-hover-btn a,
html[data-skin="girly"] .icon-link:hover,
html[data-skin="girly"] .header-banner a:hover, html[data-skin="girly"] .header-nav a:not(.dropdown-item):hover,
html[data-skin="girly"] .main-header a:not(.dropdown-item):hover,
html[data-skin="girly"] .anav-top .adropdown a:hover,
html[data-skin="girly"] .anav-top .acategory-content .category-title a:hover,
html[data-skin="girly"] #footer a:hover { color: var(--sk-accent); }

/* ---------- accent « fond » (boutons, pastilles, pagination) : noir -> dégradé fuchsia/lilas ---------- */
html[data-skin="girly"] .btn-primary, html[data-skin="girly"] .btn.btn-primary,
html[data-skin="girly"] .add-to-cart, html[data-skin="girly"] .bg-primary,
html[data-skin="girly"] .badge-primary, html[data-skin="girly"] .nav-pills .nav-link.active,
html[data-skin="girly"] .page-item.active .page-link,
html[data-skin="girly"] .pagination .page-list .current a,
html[data-skin="girly"] .btn-outline-primary:hover,
html[data-skin="girly"] .group-span-filestyle .btn-default,
html[data-skin="girly"] .bootstrap-touchspin .btn-touchspin,
html[data-skin="girly"] #header .mobile-header-version .mobile-menu-icon,
html[data-skin="girly"] .discount-percentage, html[data-skin="girly"] .discount-amount,
html[data-skin="girly"] .product-flags .product-flag.discount span,
html[data-skin="girly"] .product-flags .product-flag.on-sale span,
html[data-skin="girly"] .cart-preview .cart-header .cart-products-count,
html[data-skin="girly"] #header .sticky-icon-cart .cart-products-count,
html[data-skin="girly"] #scrollTopButton .scroll-button,
html[data-skin="girly"] .slick-prev, html[data-skin="girly"] .slick-next,
html[data-skin="girly"] .slick-dots li button,
html[data-skin="girly"] .anav-top .amenu-link > sup,
html[data-skin="girly"] .custom-checkbox input[type="checkbox"]:checked + .check-shape,
html[data-skin="girly"] .custom-radio input[type="radio"]:checked + .check-shape {
    background-color: var(--sk-accent);
    background-image: var(--sk-fill);
    border-color: transparent;
    color: #fff;
}
html[data-skin="girly"] .btn-primary:hover, html[data-skin="girly"] .btn-primary:focus,
html[data-skin="girly"] .btn.btn-primary:hover, html[data-skin="girly"] .add-to-cart:hover,
html[data-skin="girly"] .btn-primary:not(:disabled):not(.disabled):active,
html[data-skin="girly"] .add-to-cart:not(:disabled):not(.disabled):active {
    background-color: var(--sk-accent-press);
    background-image: var(--sk-fill-press);
    color: #fff;
}
html[data-skin="girly"] .btn-primary.disabled, html[data-skin="girly"] .btn-primary:disabled,
html[data-skin="girly"] .add-to-cart.disabled, html[data-skin="girly"] .add-to-cart:disabled { opacity: .55; }
html[data-skin="girly"] .btn-outline-primary { border-color: var(--sk-accent); background: transparent; }
html[data-skin="girly"] .btn-outline-primary:hover { color: #fff; }

/* ---------- bordures d'accent ---------- */
html[data-skin="girly"] .border-primary,
html[data-skin="girly"] .custom-checkbox input[type="checkbox"]:hover + .check-shape,
html[data-skin="girly"] .custom-radio input[type="radio"]:hover + .check-shape,
html[data-skin="girly"] .product-combinations .combination-item.active .switch-cbnt,
html[data-skin="girly"] .product-swatches .swatches-list > li.selected > span,
html[data-skin="girly"] .main-product-details .product-images li.thumb-container .thumb.selected,
html[data-skin="girly"] #product-modal .product-images img.selected { border-color: var(--sk-accent); }

/* ---------- en-tête ---------- */
html[data-skin="girly"] .header-event-banner { background: #3B1730 !important; }
html[data-skin="girly"] .header-nav, html[data-skin="girly"] .main-header { background: var(--sk-surface); }
html[data-skin="girly"] .main-header { border-bottom: 1px solid var(--sk-line); }
html[data-skin="girly"] .header-bottom, html[data-skin="girly"] #header-main-menu { background: var(--sk-surface-2); }
html[data-skin="girly"] .anav-top .amenu-link { color: var(--sk-text); }
html[data-skin="girly"] .anav-top .amenu-link:hover { color: var(--sk-accent); }
html[data-skin="girly"] .search-widget input[type="text"] { border-color: var(--sk-control); background: #fff; }
html[data-skin="girly"] .search-widget input[type="text"]:focus { border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); }

/* ---------- cartes produit, blocs, formulaires ---------- */
html[data-skin="girly"] .product-miniature .thumbnail-container,
html[data-skin="girly"] .card, html[data-skin="girly"] .block-category,
html[data-skin="girly"] .page-content.card, html[data-skin="girly"] .cart-grid-body .card { border-color: var(--sk-line); }
html[data-skin="girly"] .product-miniature .thumbnail-container:hover { box-shadow: 0 6px 20px rgba(224, 40, 138, .16); }
html[data-skin="girly"] .form-control:focus, html[data-skin="girly"] select:focus,
html[data-skin="girly"] textarea:focus { border-color: var(--sk-accent); box-shadow: 0 0 0 3px var(--sk-accent-soft); }
html[data-skin="girly"] hr, html[data-skin="girly"] .separator { border-color: var(--sk-line); }

/* ---------- pied de page ---------- */
html[data-skin="girly"] #footer { background: var(--sk-surface-2); color: var(--sk-text-soft); }
html[data-skin="girly"] #footer a, html[data-skin="girly"] #footer p,
html[data-skin="girly"] #footer li, html[data-skin="girly"] #footer .h4 { color: var(--sk-text-soft); }
html[data-skin="girly"] #footer .footer-bottom { background: var(--sk-surface-2); border-top: 1px solid var(--sk-line); }
html[data-skin="girly"] #footer .footer-bottom, html[data-skin="girly"] #footer .footer-bottom * { color: var(--sk-text-soft) !important; }
html[data-skin="girly"] #footer .footer-bottom a:hover { color: var(--sk-accent) !important; }