/*
 * Boutique, séries et fiche photo. Mobile d'abord.
 * La photo porte la page : jamais recadrée, texte discret autour.
 */

/* En-tête de la boutique. Mobile : titre, puis la liste déroulante des séries. Grand écran : séries en liens. */

.shop { padding-top: 1.5rem; }

.shop__title { margin-bottom: 0.5rem; }

.shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.shop__select { position: relative; flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; }
.shop__select::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.shop__select select {
  appearance: none;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1.5rem 0 0;
  border: 0;
  background: none;
  font-size: 1rem;           /* 16 px : pas de zoom automatique à l'ouverture sur iPhone */
  font-weight: 400;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shop__filters { display: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shop__intro { margin-bottom: 2rem; color: var(--muted); }

/* Mobile : une photo par ligne, bord à bord. Grand écran : maçonnerie (colonnes CSS, sans JavaScript). */

.shop-grid {
  display: grid;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; }

/* La photo entière, dans ses proportions, sans marge autour */
.card__media { display: block; margin: 0 calc(-1 * var(--gutter)) 0.6rem; }
.card__media picture { display: block; }
.card__media img { width: 100%; height: auto; }

.card__title {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
}
@media (hover: hover) { .card:hover .card__title { text-decoration: underline; } }

@media (min-width: 48rem) {
  .shop { padding-top: var(--space); }
  .shop__title { margin-bottom: 1.25rem; }
  .shop__bar { margin-bottom: 3rem; border-bottom: 0; }
  .shop__select { display: none; }
  .shop__filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .shop__filters a {
    padding: 0.35rem 0;
    font-size: var(--label);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-decoration: none;
    color: var(--muted);
  }
  .shop__filters a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
  .shop-grid { display: block; columns: 3; column-gap: 2rem; }
  .shop-grid > li { break-inside: avoid; margin-bottom: 3rem; }
  .card__media { margin-left: 0; margin-right: 0; }
  .card__title { font-size: 0.875rem; }
}

@media (min-width: 80rem) {
  .shop-grid { columns: 4; column-gap: 2.5rem; }
}

/* Fiche photo : photo pleine largeur sur mobile, deux colonnes sur grand écran */

.product { display: grid; gap: 2rem; padding-top: 0; }

/* La photo tient toujours entière dans l'écran : proportions conservées, hauteur limitée à l'espace sous l'en-tête */
.product { --visible: calc(100svh - var(--header-h, 4.8rem) - var(--adminbar, 0px)); }
.admin-bar .product { --adminbar: 46px; }
.product__media { display: grid; gap: 0.5rem; margin: 0 calc(-1 * var(--gutter)); }
.product__image { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--visible); margin: 0 auto; }

.product__series {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  text-decoration: none;
}
.product__series:hover { color: var(--ink); }
.product__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: 1rem; }
.product__description { margin-top: 2.5rem; }

@media (min-width: 64rem) {
  .product { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); gap: 4rem; align-items: start; padding-top: 2.5rem; --visible: calc(100svh - var(--header-h, 6.4rem) - var(--adminbar, 0px) - 5rem); }
  .admin-bar .product { --adminbar: 32px; }
  /* Photo calée à droite, contre les choix d'achat, même quand elle est verticale */
  .product__media { margin: 0; justify-items: end; }
  .frame-preview { justify-content: flex-end; }
  .frame-preview[data-finish="cadre-c2"],
  .frame-preview[data-finish="caisse-americaine"] { padding: 0 0 2rem; }
  .product__image { margin: 0; }
  .product__info { position: sticky; top: 2rem; }
}

/* Aperçu de la finition sur la photo principale. Cadre C2 : noir. Caisse américaine : chêne clair, avec l'espace
   sombre où l'œuvre « flotte ». Cadres en CSS : rien à préparer, valable pour toutes les fiches. */
.frame-preview { margin: 0; display: flex; justify-content: center; }
.frame-preview > span > span { display: block; }
.frame-preview > span {
  display: block;
  padding: 0;
  transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.frame-preview .product__image { transition: max-height 0.35s ease, box-shadow 0.35s ease; }
.frame-preview[data-finish="cadre-c2"],
.frame-preview[data-finish="caisse-americaine"] { padding: 1.5rem var(--gutter); }
.frame-preview[data-finish="cadre-c2"] .product__image,
.frame-preview[data-finish="caisse-americaine"] .product__image { max-height: calc(var(--visible) - 3rem - 9vmin); }

.frame-preview[data-finish="cadre-c2"] > span {
  padding: clamp(0.6rem, 2.2vmin, 1.4rem);
  background: #121212;
  box-shadow: inset 0 0 0 1px #2c2c2c, inset 0 0 0 3px #0a0a0a, 0 0.9rem 2rem -0.6rem rgb(0 0 0 / 0.45);
}

.frame-preview[data-finish="caisse-americaine"] > span {
  padding: clamp(0.8rem, 2.8vmin, 1.8rem);
  background:
    repeating-linear-gradient(90deg, rgb(140 98 52 / 0.07) 0 1px, transparent 1px 5px, rgb(140 98 52 / 0.05) 5px 7px, transparent 7px 13px),
    linear-gradient(90deg, #dcc196, #d1b07f 35%, #dfc59b 65%, #d4b484);
  box-shadow: inset 0 0 0 1px rgb(120 84 44 / 0.35), 0 0.9rem 2rem -0.6rem rgb(0 0 0 / 0.35);
}
.frame-preview[data-finish="caisse-americaine"] > span > span {
  display: block;
  padding: clamp(0.35rem, 1.1vmin, 0.7rem);
  background: #1b1916;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.6);
}
.frame-preview[data-finish="caisse-americaine"] .product__image { box-shadow: 0 0 0.5rem rgb(0 0 0 / 0.7); }

@media (prefers-reduced-motion: reduce) {
  .frame-preview > span, .frame-preview .product__image { transition: none; }
}

/* Choix d'achat */

.buy__price { font-size: 1.375rem; font-weight: 400; margin-bottom: 1.5rem; }

.buy__option { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.buy__option legend {
  margin-bottom: 0.6rem;
  padding: 0;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}
.buy__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.choice { position: relative; font-size: 0.9375rem; text-transform: none; letter-spacing: 0; }
.choice[hidden] { display: none; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: block;
  min-width: 3.5rem;
  padding: 0.7em 1em;
  border: 1px solid var(--line);
  text-align: center;
  font-weight: 400;
}
.choice input:hover + span { border-color: var(--ink); }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input:disabled { cursor: not-allowed; }
.choice input:disabled + span { color: #b0b0b0; border-color: var(--line); text-decoration: line-through; }

/* Édition limitée : une ligne et un trait d'un pixel qui se remplit au fil des ventes */
.edition { margin: 0.25rem 0 1.5rem; }
.edition[hidden] { display: none; }
.edition__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.5rem;
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.edition__row span:first-child { color: var(--muted); }
.edition__bar { display: block; height: 1px; background: var(--line); }
.edition__bar span { display: block; height: 100%; background: var(--ink); }
.buy__submit { width: 100%; padding: 1.15em 2em; }
.buy__hint { margin: 0.75rem 0 0; font-size: var(--small); color: var(--muted); }

/* Messages WooCommerce (ajout au panier, erreurs) */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  list-style: none;
  font-size: var(--small);
}
.woocommerce-message .button { float: right; margin-left: 1rem; padding: 0.4em 0.8em; }