/* ==========================================================================
   Boutique : tuiles de catégories, filtres, grille de fiches (charte CCN)
   ========================================================================== */

body.woocommerce-shop .ast-container,
body.tax-product_cat .ast-container,
body.tax-product_tag .ast-container { max-width: calc(var(--content-max) + 2 * var(--gutter)); }

.ccn-shop { font-family: var(--font); color: var(--ink); display: grid; gap: 40px; padding-block: 8px 80px; }

/* ---------- En-tête ---------- */
.ccn-shop-head { display: grid; gap: 10px; max-width: 760px; }
.ccn-eyebrow { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--terre-700); }
.ccn-eyebrow a { color: inherit; text-decoration: none; }
.ccn-eyebrow a:hover { text-decoration: underline; }
.ccn-shop .ccn-shop-title { margin: 0; font-family: var(--font); font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 300; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ccn-shop-intro, .ccn-shop-intro p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--graphite); }

/* ---------- Tuiles de catégories ---------- */
.ccn-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; }
.ccn-cat { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); border-radius: 14px; padding: 8px; border: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.ccn-cat:hover { background: var(--cream); color: var(--ink); }
.ccn-cat.is-on { border-color: var(--ink); background: #fff; }
.ccn-cat-img { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cream); margin-bottom: 6px; }
.ccn-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ccn-cat:hover .ccn-cat-img img { transform: scale(1.04); }
.ccn-cat-all { display: grid; place-items: center; background: var(--ink); }
.ccn-cat-all svg { width: 34%; fill: none; stroke: #fff; stroke-width: 1.4; }
.ccn-cat-name { font-size: 15.5px; font-weight: 500; line-height: 1.25; }
.ccn-cat-count { font-size: 13px; color: var(--stone); }

/* ---------- Corps : filtres + grille ---------- */
.ccn-shop-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }

.ccn-filters { position: sticky; top: 90px; }
.ccn-filters-box { border-top: 1px solid var(--ink); }
.ccn-filters-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding-block: 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ccn-filters-box > summary::-webkit-details-marker { display: none; }
.ccn-filters-box > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.ccn-filters-box[open] > summary::after { transform: rotate(-135deg); }
.ccn-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--terre-600); color: #fff; font-size: 11px; letter-spacing: 0; }
.ccn-filter-form { display: grid; gap: 22px; padding-bottom: 8px; }
.ccn-filter-form fieldset { border: 0; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--sand); min-width: 0; }
.ccn-filter-form legend { padding: 0; margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); float: left; width: 100%; }
.ccn-filter-form legend + * { clear: both; }
.ccn-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ccn-sub a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--graphite); font-size: 15.5px; }
.ccn-sub a span { color: var(--stone); font-size: 13px; font-variant-numeric: tabular-nums; }
.ccn-sub a:hover { background: var(--cream); color: var(--ink); }
.ccn-sub a.is-on { background: var(--ink); color: #fff; }
.ccn-sub a.is-on span { color: var(--sand); }
.ccn-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.ccn-radios label { position: relative; cursor: pointer; }
.ccn-radios input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ccn-radios label { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--sand); border-radius: var(--radius-btn); font-size: 15px; color: var(--graphite); transition: border-color .2s, background-color .2s, color .2s; }
.ccn-radios label:hover { border-color: var(--ink); }
.ccn-radios label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.ccn-radios label:has(input:focus-visible) { outline: 2px solid var(--terre-600); outline-offset: 2px; }
.ccn-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccn-price label { display: grid; gap: 4px; font-size: 13px; color: var(--stone); }
.ccn-shop .ccn-price input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--sand); border-radius: var(--radius-field); background: #fff; font: inherit; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ccn-shop .ccn-price input:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.ccn-filter-actions { display: flex; align-items: center; gap: 16px; }
.ccn-reset { font-size: 14.5px; color: var(--graphite); }

.ccn-shop .ccn-btn-main,
.ccn-shop .ccn-btn-main:hover,
.ccn-shop .ccn-btn-main:focus { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius-btn); background: var(--terre-600); color: #fff; font-family: var(--font); font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.ccn-shop .ccn-btn-main:hover { background: var(--terre-700); }

/* ---------- Barre d'outils ---------- */
.ccn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--sand); }
.ccn-shop .woocommerce-result-count { float: none; margin: 0; font-size: 15px; color: var(--stone); }
.ccn-shop .woocommerce-ordering { float: none; margin: 0 0 0 auto; }
.ccn-shop .woocommerce-ordering select { height: 48px; padding: 0 36px 0 14px; border: 1px solid var(--sand); border-radius: var(--radius-btn); background-color: #fff; font-family: var(--font); font-size: 15px; color: var(--ink); cursor: pointer; }
.ccn-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ccn-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: var(--radius-btn); background: var(--cream); color: var(--ink); font-size: 14px; text-decoration: none; }
.ccn-chips a:hover { background: var(--sand); }
.ccn-chips b { font-weight: 400; font-size: 16px; line-height: 1; }

/* ---------- Grille de fiches (boutique, catégories et listes dans les pages) ---------- */
:is(.ccn-shop, .woocommerce) ul.products.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
:is(.ccn-shop, .woocommerce) ul.products.products::before,
:is(.ccn-shop, .woocommerce) ul.products.products::after { display: none; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card { float: none; width: auto; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 0; border-radius: var(--radius-card); overflow: hidden; text-align: left; transition: box-shadow .3s ease, transform .3s ease; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card:hover { transform: translateY(-2px); }
.ccn-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.ccn-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ccn-card:hover .ccn-card-media img { transform: scale(1.03); }
.ccn-card-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--stone); }
.ccn-card-flag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--radius-btn); background: var(--terre-600); color: #fff; font-size: 12.5px; font-weight: 500; }
.ccn-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.ccn-card .ccn-card-cat { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
:is(.ccn-shop, .woocommerce) ul.products li.product .ccn-card-title { margin: 0; padding: 0; font-family: var(--font); font-size: 19px; line-height: 1.3; font-weight: 500; color: var(--ink); }
.ccn-card-title a { color: inherit; text-decoration: none; }
.ccn-card-title a::after { content: ""; position: absolute; inset: 0; }
.ccn-card { position: relative; }
.ccn-card .ccn-card-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--graphite); }
.ccn-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ccn-card-price { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ccn-card-price del { font-weight: 400; color: var(--stone); font-size: 15px; margin-right: 6px; }
.ccn-card-price ins { text-decoration: none; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .ccn-card-foot .button { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 44px; min-width: 0; margin: 0; padding: 0 16px; border-radius: var(--radius-btn); background: var(--terre-600); color: #fff; font-family: var(--font); font-size: 14.5px; font-weight: 500; line-height: 1; border: 0; transition: background-color .2s; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .ccn-card-foot .button:hover { background: var(--terre-700); color: #fff; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .ccn-card-foot .ccn-card-more { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .ccn-card-foot .ccn-card-more:hover { background: var(--ink); color: #fff; }
:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .added_to_cart { position: relative; z-index: 1; font-size: 14px; color: var(--terre-700); padding: 0; }

/* ---------- Pagination et vide ---------- */
.ccn-shop .woocommerce-pagination { margin-top: 40px; }
.ccn-shop .woocommerce-pagination ul.page-numbers { border: 0; display: flex; gap: 6px; justify-content: center; }
.ccn-shop .woocommerce-pagination ul.page-numbers li { border: 0; }
.ccn-shop .woocommerce-pagination .page-numbers a,
.ccn-shop .woocommerce-pagination .page-numbers span { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: var(--radius-btn); border: 1px solid var(--sand); color: var(--ink); }
.ccn-shop .woocommerce-pagination .page-numbers span.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.ccn-empty { display: grid; justify-items: start; gap: 16px; padding: 40px 0; font-size: 18px; color: var(--graphite); }
.ccn-empty p { margin: 0; }

:is(.ccn-shop) :focus-visible { outline: 2px solid var(--terre-600); outline-offset: 3px; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 900px) {
	.ccn-shop { gap: 28px; }
	.ccn-shop-body { grid-template-columns: 1fr; gap: 20px; }
	.ccn-filters { position: static; }
	.ccn-filters-box { border: 1px solid var(--sand); border-radius: 14px; padding: 0 16px; }
	.ccn-cats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
	.ccn-cats::-webkit-scrollbar { display: none; }
	.ccn-cat { flex: 0 0 120px; scroll-snap-align: start; }
	.ccn-shop-intro, .ccn-shop-intro p { font-size: 16px; }
}
@media (max-width: 560px) {
	:is(.ccn-shop, .woocommerce) ul.products.products { grid-template-columns: 1fr 1fr; gap: 14px; }
	.ccn-card-body { padding: 12px 12px 14px; gap: 6px; }
	:is(.ccn-shop, .woocommerce) ul.products li.product .ccn-card-title { font-size: 16px; }
	.ccn-card .ccn-card-text { display: none; }
	.ccn-card-price { font-size: 16px; }
	:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card .ccn-card-foot .button { height: 44px; padding: 0 12px; font-size: 14px; }
	.ccn-toolbar { gap: 10px; }
	.ccn-shop .woocommerce-ordering { margin-left: 0; width: 100%; }
	.ccn-shop .woocommerce-ordering select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ccn-cat-img img, .ccn-card-media img, :is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card { transition: none; }
	.ccn-card:hover .ccn-card-media img, .ccn-cat:hover .ccn-cat-img img { transform: none; }
	:is(.ccn-shop, .woocommerce) ul.products li.product.ccn-card:hover { transform: none; }
}

/* Recherche et cases « Type » */
.ccn-search input { width: 100%; }
.ccn-checks-f { display: grid; gap: 2px; }
.ccn-checks-f label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: var(--radius-btn); font-size: 15.5px; font-weight: 400; color: var(--graphite); cursor: pointer; }
.ccn-checks-f label:hover { background: var(--surface); }
.ccn-checks-f input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.ccn-checks-f span { flex: 1; }
.ccn-checks-f small { font-size: 13px; color: var(--stone); font-variant-numeric: tabular-nums; }
.ccn-checks-f label.is-empty { opacity: .55; cursor: default; }
.ccn-checks-f label:has(input:checked) { background: var(--ink); color: #fff; }
.ccn-checks-f label:has(input:checked) small { color: var(--sand); }

/* Guide et FAQ de catégorie, sous les produits */
.ccn-shop-guide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7, 40px) var(--col-gap, 96px); margin-top: var(--sec-pad, 80px); padding-top: var(--sec-pad, 80px); border-top: 1px solid var(--line); }
.ccn-shop-guide h2 { margin: 0 0 var(--s-4, 16px); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; line-height: 1.2; }
.ccn-shop-guide h3 { margin: var(--s-6, 32px) 0 var(--s-3, 12px); font-size: 1.1875rem; font-weight: 500; }
.ccn-shop-guide p, .ccn-shop-guide li { color: var(--graphite, #303030); line-height: 1.65; }
.ccn-shop-guide ul, .ccn-shop-guide ol { padding-left: 1.2em; }
.ccn-shop-guide li { margin-bottom: 6px; }
.ccn-shop-guide a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ccn-shop-faq details { border-bottom: 1px solid var(--line); }
.ccn-shop-faq summary { list-style: none; cursor: pointer; padding: 18px 32px 18px 0; position: relative; font-weight: 500; }
.ccn-shop-faq summary::-webkit-details-marker { display: none; }
.ccn-shop-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 300; color: var(--text-soft); }
.ccn-shop-faq details[open] summary::after { content: "−"; }
.ccn-shop-faq details p { margin: 0 0 18px; }
@media (max-width: 1023px) { .ccn-shop-guide { grid-template-columns: 1fr; } }