/*
Theme Name: Skendros – Core Design
Author: Quentin + ChatGPT
Version: 1.0.0
*/

/* ==========================================================================
   0.0 :ROOT – Variables
   ========================================================================== */

:root {
    --sk-black: #111010;
    --sk-true-white: #f8f8f8;
    --sk-red: #e30723;

    --white: white;
    /* Typo (Antonio pour les titres) */
    --sk-font-heading: 'Antonio', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --sk-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


    /* Échelles typographiques */
    --sk-fs-2xl: clamp(2.2rem, 3vw + 1rem, 4rem);
    --sk-fs-xl: clamp(1.8rem, 2vw + 1rem, 3rem);
    --sk-fs-lg: clamp(1.25rem, 1vw + 1rem, 2rem);
    --sk-fs-md: 1.0625rem;
    --sk-fs-base: 1rem;

}

.inner {
    /* margin: 0 3em; */
    padding: 0 3em;
}

.wp-block-woocommerce-checkout {
    margin: 0 3em !important;
}

/* ==========================================================================
   0.1 BASE
   ========================================================================== */
.post,
.page,
body {
    margin: 0;
    padding: 0;
}

body {
    color: var(--sk-black);
    background: var(--sk-true-white);
    font: 400 var(--sk-fs-base)/var(--sk-lh-base) var(--sk-font-body);

    font-family: var(--sk-font-body);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   0.2 TYPO
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sk-font-heading);
}

h1 {
    font-size: var(--sk-fs-2xl);
}

h2 {
    font-size: var(--sk-fs-xl);
}

h3 {
    font-size: var(--sk-fs-lg);
}


/* ==========================================================================
   1.0 HEADER 
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--sk-true-white);
    border-bottom: 1.5px solid var(--sk-black);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.site-title {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.75em 1em 0.65em 1.2em;
    margin: 0;
}

.site-title a {
    display: inline-block;
    width: 100px;
    height: 40px;
    background: url('https://skendros.com/wp-content/uploads/2025/09/logotypo_black_skendros.svg') no-repeat center;
    background-size: contain;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.site-title a span,
.site-title a {
    color: transparent;
    white-space: nowrap;
    text-indent: 200%;
    overflow: hidden;
}

.main-navigation {
    width: auto;
}

.main-navigation a {
    color: var(--sk-black);
    font-size: 1rem;
}

.menu-menu-1-container ul {
    display: flex;
    gap: 1em;
    padding: 1.45em 0;

}

.menu-menu-1-container ul li:nth-last-child(2),
.menu-menu-1-container ul li:last-child {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.8em 0;
    z-index: 10000;
}

.menu-menu-1-container ul li:last-child {
    padding-right: 1.2em;
}

.menu-menu-1-container ul li:nth-last-child(2) {
    right: 68px;
}



/* Logo panier (dernier élément du menu) */
.menu-menu-1-container ul li:last-child a {
    display: inline-block;
    width: 27px;
    height: 27px;
    background: url('https://skendros.com/wp-content/uploads/2025/09/skendros-page-compte.svg') no-repeat center;
    background-size: contain;
    overflow: hidden;
    text-decoration: none;
    padding: 0;
    margin: 0;
    position: relative;
    color: transparent;
    white-space: nowrap;
    text-indent: 200%;
    padding-top: 2.42em;
}

/* Logo compte (avant-dernier élément du menu) */
.menu-menu-1-container ul li:nth-last-child(2) a {

    display: inline-block;
    width: 26px;
    height: 26px;
    background: url('https://skendros.com/wp-content/uploads/2025/09/skendros-page-panier.svg') no-repeat center;
    background-size: contain;
    overflow: hidden;
    text-decoration: none;
    padding: 0;
    margin: 0;
    position: relative;
    color: transparent;
    white-space: nowrap;
    text-indent: 200%;
    padding-top: 2.9em;
}

/* Hover: léger lift + couleur */
.primary-nav a:hover,
.primary-nav a:focus-visible,
.main-navigation .menu a:hover,
.main-navigation .menu a:focus-visible {
    color: var(--sk-red);
}

/* ========= Soulignement animé par lien =========
   ::after = barre qui “push” depuis le centre vers les bords au hover
*/
.primary-nav a::after,
.main-navigation .menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35em;
    height: 1.5px;
    background: currentColor;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .35s, opacity .35s;
}

.primary-nav>li.current-menu-item>a::after,
.primary-nav>li.current_page_item>a::after,
.primary-nav a[aria-current="page"]::after,
.main-navigation .menu>li.current-menu-item>a::after,
.main-navigation .menu>li.current_page_item>a::after,
.main-navigation .menu a[aria-current="page"]::after,
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.main-navigation .menu a:hover::after,
.main-navigation .menu a:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
    background-color: var(--sk-red);
}


/* fin header  */
/* start main */
.site-main {
    padding-top: 4.2em;
    min-height: 95vh;
}

.woocommerce-breadcrumb {
    display: none;
}

.entry-title,
.woocommerce-products-header,
.woocommerce-notices-wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* footer */

.site-info {
    text-align: center;
    font-size: 0.9rem;
    color: var(--sk-true-white);
    padding: 20px 0;
    background-color: var(--sk-black);
}

.site-info a {
    color: var(--sk-true-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-info a:hover {
    color: var(--sk-red);
}

.footer-signature {
    letter-spacing: 0.5px;
}


.wc-block-product-template__responsive>li {
    margin-block-start: 0;
    background: var(--white);
    padding: 1em;
    border: 1.5px solid var(--sk-black);

}

.wc-block-product-template__responsive>li a:visited {
    color: var(--sk-black);
}

.wc-block-product-template__responsive>li p {
    font-size: 0.8em;
    color: var(--sk-red);
}

.cart-count {
    position: fixed;
    top: 3.7em;
    right: 85px;
    background-color: var(--sk-red);
    color: var(--sk-true-white);
    padding: 5px 5px;
    border-radius: 1000px;
    font-size: 10px;
    z-index: 1000;
}

.entry-content {
    margin: 3em 0 0;
}

.image-skendros {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
}

.image-skendros img {
    width: 100%;
    margin: 0 3em 3em 3em;
}

.home .wp-block-woocommerce-product-collection {
    margin: -8em 3em 3em 3em;
}


.prix-info {
    display: flex;
    justify-content: flex-end;
}

.prix-info span {
    font-weight: bold;

}


.wc-block-grid__products li {
    background-color: var(--white);
    border: solid var(--sk-black) 1.5px;
    text-align: left;
    padding: 1em;
    max-width: 316px;
}

.wc-block-grid__products li .wc-block-grid__product-title {
    font-family: var(--sk-font-heading);
    font-size: var(--wp--preset--font-size--medium) !important;
}


.wc-block-grid__products li img {
    width: 100%;
    text-align: center;
}

.wc-block-grid__products li a:visited {
    color: var(--sk-black);
}

.wc-block-grid__products li a {
    border-radius: 0 !important;
}

.wc-block-grid__products li a.add_to_cart_button {
    color: var(--sk-true-white);
    background-color: var(--sk-black);
    text-align: center;
}

.wc-block-grid__products li .wc-block-grid__product-price {
    text-align: right;
}

.wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: none !important;
    max-width: none !important;
}

.wc-block-grid__product .wc-block-grid__product-link {
    display: flex !important;
    flex-direction: column;
}

.wc-block-grid__product .wc-block-grid__product-link div {
    width: 100%;
}

.wp-block-product-new {
    margin: 0 3em;
}

.wc-block-grid__product-price {
    font-weight: bold;
}

.wc-block-cart-item__wrap {
    font-size: 1.2em;
}

/* page panier  */

.wc-block-cart__submit-container {
    background-color: var(--sk-black);
}

.wc-block-cart__submit-container A {
    color: var(--sk-true-white);
}


.wc-block-checkout__sidebar {
    top: 6em !important;
}

/* page info comende tiket */

.woocommerce-order {
    margin: 0 3em;
}

.woocommerce-order .woocommerce-notice--success {
    text-align: center;
    padding: 2em;
    font-size: 3em;
    font-weight: bold;
}

ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
    background: var(--sk-black);
    list-style: none;
    margin: 0;
    padding: 2em;
    color: white;
}

.woocommerce-order table {
    text-align: left;
}

.woocommerce-order section.woocommerce-customer-details {
    margin-bottom: 10em;
}

.post-10 button,
.post-8 button {
    background-color: var(--sk-black);
    border-radius: 0;
    border: none;
    color: var(--sk-true-white) !important;
}

.post-10 button .wc-block-components-button__text,
.post-8 button .wc-block-components-button__text {
    color: var(--sk-true-white) !important;
    opacity: 1 !important;
}

/* page personne */
.post-10 .entry-content {
    margin: 3em;
}

.post-10 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-10 ul a:visited,
.post-10 ul a {
    color: var(--sk-black);
}

.post-10 .woocommerce {
    display: flex;
    justify-content: flex-start;
    gap: 3em;
}

.woocommerce-MyAccount-navigation {
    width: 20%;
}

.woocommerce-MyAccount-content {
    width: 80%;
    max-width: 1200px;
}

body .woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
    background-color: rgba(255, 255, 255, 0) !important;
}

.post-10 .woocommerce-MyAccount-content .woocommerce-info,
.post-10 .woocommerce-MyAccount-content .woocommerce-PaymentMethods {
    margin-bottom: 3em;
}

.post-10 .woocommerce-MyAccount-content .button {
    padding: 1em;
    background-color: var(--sk-black);
    color: var(--sk-true-white);
}

.post-10 .woocommerce-MyAccount-content table {
    border-spacing: 0px 0px;
    /* pas d'espacement global */
}

.post-10 .woocommerce-MyAccount-content table tbody tr td,
.post-10 .woocommerce-MyAccount-content table tbody tr th,
.post-10 .woocommerce-MyAccount-content table tbody tr {
    padding-top: 60px;
    /* effet de "marche" entre les lignes */

}

.post-10 .woocommerce-MyAccount-content table tbody tr th a,
.post-10 .woocommerce-MyAccount-content table tbody tr th a:visited {
    color: var(--sk-black);
}

.woocommerce-MyAccount-content div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.woocommerce-Address {
    min-width: 100%;
    flex-direction: column;
    align-items: flex-start !important;
}

.show-password-input {
    display: none;
}

.post-8 button {
    color: var(--sk-black) !important;
}

p.woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* page article */





























/* === Woo gallery — patch CSS-only === */

/* 0) Ne rétrécis pas la galerie à 50% (si tu as cette règle, on l'annule) */
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images{
  width: 100% !important;   /* annule width:50% précédent */
  background: transparent;  /* optionnel: enlève le violet de debug */
}

/* 1) Le viewport ne doit PAS être forcé au carré */
.woocommerce-product-gallery .flex-viewport{
  height: auto !important;          /* remplace le 300px inline */
  aspect-ratio: auto !important;    /* annule ton aspect-ratio: 1/1 */
  overflow: hidden !important;
  background: transparent;          /* pas de grand fond noir imposé */
}

/* 2) On ne touche pas à la largeur calculée des slides par Flexslider :
      pas de width:100% sur .woocommerce-product-gallery__image ! */

/* 3) L'image DOIT prendre 100% de la largeur du slide, avec hauteur auto */
.single-product div.product
  .woocommerce-product-gallery__image img{
  display: block;
  width: 100% !important;    /* remplace les 300px initiaux */
  height: auto !important;   /* garde les proportions */
  max-width: none !important;
  background: transparent;
}

/* 4) Le lien enveloppe correctement l'image (pas de boîte étriquée) */
.single-product div.product
  .woocommerce-product-gallery__image > a{
  display: block;
  width: 100% !important;
}

/* 5) (Optionnel) Thumbnails: fond neutre + grille propre */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
  background: transparent !important;   /* annule ton 'ol { background:red }' */
  gap: .6rem;
}

/* Mobile-first : 100% */
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto; /* centre sur mobile */
}

/* Desktop : 50% avec limite max */
@media (min-width: 1024px) {
  .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    width: 50% !important;
    max-width: 670px !important;
    margin: 0; /* aligne à gauche si tu veux la description à côté */
    float: left; /* permet au contenu texte de passer à droite */
  }
}