/*!
Theme Name: alpiderma
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpiderma
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpiderma is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: 700;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--ap-text);
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--ap-text);
}

a:visited {
	color: var(--ap-text);
}

a:hover,
a:focus,
a:active {
	color: var(--ap-btn-bg);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Alpiderma — shared chrome & home page
--------------------------------------------------------------*/

/* Self-hosted font (Nunito Sans, free/OFL — stands in for Avenir Light,
   which is a commercial font we don't have a web license for). Nunito
   Sans is a variable font, so one file per subset covers the whole
   200–700 weight range used across the site — no need for a separate
   file per weight. */
@font-face {
	font-family: "Alpiderma Sans";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("fonts/nunito-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: "Alpiderma Sans";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("fonts/nunito-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
	--ap-text: #339933;
	--ap-btn-bg: #007200;
	--ap-btn-bg-hover: #005a00;
	--ap-btn-text: #ffffff;
	--ap-bg: #ffffff;
	--ap-nav-bg: #f4f4f4;
	--ap-sans: "Alpiderma Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--ap-gap: clamp(1.5rem, 4vw, 4rem);
}

/* Sticky footer: on short pages the viewport is taller than the
   content, and without this the extra space below .ap-footer just
   shows body's white background instead of the footer's own grey
   (--ap-nav-bg), reading as a stray white stripe under the footer.
   html/body get an explicit height so #primary (the flex:1 child)
   can grow to fill the gap and push .ap-footer flush to the
   viewport bottom. */
/* Reserves the vertical scrollbar's width up front, on every page,
   whether or not that page currently scrolls. Without this, opening a
   details/accordion (FAQ, mobile menu) that pushes page height past
   the viewport makes the scrollbar appear for the first time, which
   shrinks the available width and shifts the centered content column
   sideways — reads as "the page changed width" when a reply opens. */
html {
	scrollbar-gutter: stable;
}

html,
body {
	height: 100%;
}

body {
	background: var(--ap-bg);
	display: flex;
	flex-direction: column;
}

/* min-width: 0 on the flex items in this chain (#page under body,
   #primary under #page): without it, any descendant with a fixed
   min-width (e.g. a table) props open the whole page wider than the
   phone viewport instead of scrolling inside its own container —
   this exact bug shipped once via the cart table's min-width reaching
   the totals table (mobile Panier page, 2026-08-17). */
#page {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	min-width: 0;
}

#primary {
	flex: 1 0 auto;
	min-width: 0;
}

/* Header
--------------------------------------------- */
.ap-header {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--ap-gap);
}

.ap-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 2rem var(--ap-gap) 0;
	letter-spacing: 1px;
}

/* Text logo shown only in the desktop nav row (see min-width
   62.0625em below) — mobile/tablet keep the big centered .ap-logo
   hero branding below the nav as the only logo. */
.ap-nav-logo {
	display: none;
}

/* Hamburger toggle — <details>/<summary> again, zero JS. Closed by
   default on mobile (native behaviour); forced open/inline at
   desktop (see min-width 62.0625em below), where it's visually
   unwrapped back into a plain row of links. */
.ap-mobile-menu summary {
	list-style: none;
}

.ap-mobile-menu summary::-webkit-details-marker {
	display: none;
}

.ap-hamburger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.ap-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ap-text);
	border-radius: 2px;
}

.ap-hamburger:hover span,
.ap-hamburger:focus span {
	background: var(--ap-btn-bg);
}

/* Mobile: full-width dropdown panel under the top row. .ap-nav-links
   is a SIBLING of .ap-mobile-menu (not nested inside it) — a closed
   <details>'s non-summary content is hidden by the browser in a way
   plain CSS display can't override, so the toggle and the panel it
   controls have to be two separate elements linked via [open] ~. */
.ap-nav-links {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--ap-gap) 1rem;
	background: var(--ap-bg);
	border-top: 1px solid var(--ap-text);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ap-mobile-menu[open] ~ .ap-nav-links {
	display: flex;
}

.ap-nav-links a {
	display: block;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	font-weight: 200;
	text-decoration: none;
	padding: 0.9em 0.25em;
}

.ap-nav-links a:hover,
.ap-nav-links a:focus {
	color: var(--ap-btn-bg);
}

/* Language switcher — <details>/<summary> gives click-to-open with
   zero JS (native disclosure behaviour), consistent with the rest
   of the site. */
.ap-nav-lang {
	position: relative;
}

.ap-nav-lang summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	width: 90px;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	font-weight: 200;
	list-style: none;
	color: #ffffff;
	background: #339933;
	border-radius: 4px;
	padding: 0.35em 0.5em;
	cursor: pointer;
}

.ap-nav-lang summary::-webkit-details-marker {
	display: none;
}

.ap-nav-lang summary:hover,
.ap-nav-lang summary:focus {
	background: var(--ap-btn-bg);
}

.ap-lang-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	box-sizing: border-box;
	width: 90px;
	z-index: 10;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--ap-bg);
	border: 1px solid var(--ap-text);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ap-lang-menu a {
	display: block;
	text-align: center;
	font-family: var(--ap-sans);
	font-size: 0.9rem;
	font-weight: 200;
	text-decoration: none;
	padding: 0.75em 0.5em;
	border-radius: 4px;
}

.ap-lang-menu a:hover,
.ap-lang-menu a:focus {
	background: var(--ap-nav-bg);
	color: var(--ap-btn-bg);
}

.ap-lang-menu a[aria-current="page"] {
	font-weight: 700;
}

.ap-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.5rem 0 2rem;
}

.ap-logo {
	display: inline-block;
}

.ap-logo img {
	width: 150px;
	height: auto;
}

/* Home page products
--------------------------------------------- */
.ap-main {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--ap-gap) 3rem;
}

/* Simple content pages (e.g. À propos) — a bare page title with no hero
   wrapper. Direct-child selector so it doesn't also catch the h1 nested
   inside .ap-product-hero-content on the Huile/Lotion pages.
   width: fit-content + margin-inline: auto centers the title as a block
   (identical to text-align: center for the short single-line titles this
   started with), but keeps each line left-aligned once a longer title
   (e.g. "Conditions générales de vente") wraps on mobile — otherwise a
   plain text-align: center would center every wrapped line individually. */
.ap-main > h1 {
	width: fit-content;
	margin-inline: auto;
	text-align: left;
}

.ap-info-section {
	max-width: 700px;
	margin: 0 auto;
	padding: 2.5rem 0;
	text-align: center;
}

.ap-info-section h2 {
	font-family: var(--ap-sans);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin: 0 0 1rem;
}

.ap-info-section p:not(.ap-info-badges) {
	font-size: 1.2rem;
}

.ap-info-section--origin {
	padding: 2.5rem 3rem;
}

/* Card treatment: brand-green fill at 90% opacity. White text overrides
   the site-wide green (--ap-text) for legibility against that fill.
   Width stays 100% of .ap-info-section's own box (border-box), so the
   padding added here doesn't shrink the visible card inward. */
.ap-info-section--card {
	width: 100%;
	color: #ffffff;
	background: rgba(51, 153, 51, 0.8);
	border-radius: 15px;
	padding: 2.5rem 3rem;
}

/* A standalone element directly in .ap-main (not nested in a padded
   .ap-info-section), so it needs its own max-width/margin to match
   the same 700px content column as the sections around it — same
   pattern as .ap-info-section itself, just applied here directly. */
.ap-info-badges {
	display: block;
	max-width: 700px;
	text-align: center;
	font-size: 1rem;
	letter-spacing: 0.05em;
	color: #ffffff;
	background: #ff0000;
	border-radius: 8px;
	padding: 1em 1.5em;
	margin: 2rem auto;
}

.ap-products-intro {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 0 2rem;
	text-align: center;
}

.ap-products-intro h1 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.8rem;
	margin: 0 0 1rem;
}

.ap-products-intro h2 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1rem;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.ap-products-intro p {
	margin: 0;
}

.ap-products {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ap-gap);
}

.ap-product {
	text-align: center;
}

.ap-product-title {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: calc(clamp(2.25rem, 4vw, 3rem) * 1.3);
	margin: 0 0 1rem;
}

.ap-product-desc {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 0 0 1.75rem;
}

.ap-break-desktop {
	display: none;
}

.ap-product-actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.ap-btn {
	display: inline-block;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	color: var(--ap-btn-text);
	background: var(--ap-btn-bg);
	border: 1px solid var(--ap-btn-bg);
	border-radius: 4px;
	padding: 0.65em 1.5em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

/* Without this, the global `a:visited { color: var(--ap-text); }` rule
   (style.css, Links section) outranks .ap-btn's own color on specificity
   once a visitor has clicked through, turning button text green instead
   of staying white. */
.ap-btn:visited {
	color: var(--ap-btn-text);
}

.ap-btn:hover,
.ap-btn:focus {
	background: var(--ap-btn-bg-hover);
	color: var(--ap-btn-text);
}

.ap-btn--outline {
	background: var(--ap-btn-bg);
}

.ap-product-image {
	position: relative;
	width: clamp(126px, 14.4vw, 180px);
	aspect-ratio: 1 / 3;
	margin: 0 auto;
}

/* Two photos stacked in the same spot, crossfading in an idle loop.
   Hovering either product's text pauses the loop and locks the
   matching photo at full opacity — see .ap-products:has(...) below.
   Negative animation-delay on the lotion photo phase-shifts it half
   a cycle out of sync with huile, using the same keyframes, so one
   fades in exactly as the other fades out. */
.ap-product-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 300ms ease;
	animation: ap-crossfade 8s ease-in-out infinite;
}

.ap-product-photo--huile {
	opacity: 1;
}

.ap-product-photo--lotion {
	animation-delay: -4s;
}

@keyframes ap-crossfade {
	0%,
	45% {
		opacity: 1;
	}

	50%,
	95% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.ap-products:has(.ap-product--huile:hover) .ap-product-photo--huile,
.ap-products:has(.ap-product--lotion:hover) .ap-product-photo--lotion {
	animation-play-state: paused;
	opacity: 1 !important;
}

.ap-products:has(.ap-product--huile:hover) .ap-product-photo--lotion,
.ap-products:has(.ap-product--lotion:hover) .ap-product-photo--huile {
	animation-play-state: paused;
	opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ap-product-photo {
		animation: none;
		opacity: 0;
	}

	.ap-product-photo--huile {
		opacity: 1;
	}
}

.ap-made-in {
	font-family: var(--ap-sans);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 1rem 0 0;
}

/* Product hero (Huile / Lotion detail pages)
--------------------------------------------- */

/* Deliberately its own component rather than reusing .ap-product /
   .ap-product-actions from the home page grid — those are centered
   and scoped for a 3-column layout, while this hero is a 2-column
   image-left/text-left layout. Reuses .ap-product-title / .ap-product-desc
   / .ap-btn directly since those carry no layout assumptions of their own. */
.ap-product-hero {
	display: flex;
	align-items: center;
	gap: var(--ap-gap);
	max-width: 960px;
	margin: 0 auto;
	padding: 1.4rem 0 4rem;
}

.ap-product-hero-image {
	flex: 0 0 auto;
	width: clamp(160px, 16vw, 260px);
	aspect-ratio: 1 / 3;
	margin: 0;
}

.ap-product-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap-product-hero-content {
	flex: 1 1 auto;
}

/* Price line between the description and the Commander button — the
   value is read live from WooCommerce by SKU (alpiderma_product_price_html()
   in inc/woocommerce.php); the template omits the element entirely when
   no product matches, so no empty-state styling is needed. */
.ap-product-price {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.35rem;
	margin: 0 0 1.75rem;
}

.ap-product-hero-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

@media screen and (max-width: 62em) {
	.ap-product-hero {
		flex-direction: column;
		text-align: center;
	}

	.ap-product-hero-actions {
		justify-content: center;
	}

	.ap-product-details-cta {
		justify-content: center;
	}
}

/* Product details (Huile / Lotion pages)
--------------------------------------------- */

/* Left-aligned, capped to a comfortable reading width (unlike the
   centered .ap-info-section blurbs on the home page) — this is
   dense spec/benefit copy meant to be scanned, not a short call-out. */
.ap-product-details {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

.ap-product-details h2 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1rem;
}

.ap-product-details h2:not(:first-child) {
	margin-top: 3rem;
}

.ap-product-details h3 {
	font-family: var(--ap-sans);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 2rem 0 1rem;
}

.ap-product-details p {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.ap-product-details ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.ap-product-details li {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 0.5rem;
}

/* No bottom margin — relies on the next h2's own margin-top: 3rem
   (via h2:not(:first-child) above) collapsing through, same gap as
   every other section transition in this block. */
.ap-product-details-cta {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 2rem 0 0;
}

/* Legal pages (Conditions générales de vente, and later Politique de
   confidentialité, Conditions d'utilisation, etc.) — long-form prose,
   left-aligned within a centered, readable-width column. Same
   typographic scale as .ap-product-details, but narrower (matches
   .ap-info-section/.ap-contact-form) since this is plain text with no
   product imagery competing for width. */
.ap-legal-content {
	max-width: 700px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

.ap-legal-content h2 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 2rem 0 1rem;
}

.ap-legal-content h2:first-child {
	margin-top: 0;
}

.ap-legal-content p {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.ap-legal-content ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.ap-legal-content li {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 0.5rem;
}

.ap-legal-content .ap-article-title {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.20rem;
	margin: 2rem 0 1rem;
}

/* FAQ page
--------------------------------------------- */

.ap-faq-intro {
	max-width: 700px;
	margin: 0 auto;
	padding: 0.5rem 0 0;
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.1rem;
}

/* Numbered accordion, bordered as one container (unlike the borderless
   dividers used elsewhere) so opening a row never changes the block's
   width — only its height. Each row is still a plain <details>/<summary>,
   zero JS, consistent with the language switcher and mobile menu. */
.ap-faq {
	max-width: 700px;
	margin: 0 auto;
	padding: 1.5rem 0 3rem;
	border: 1px solid rgba(51, 153, 51, 0.25);
	border-radius: 15px;
	overflow: hidden;
	counter-reset: ap-faq;
	--ap-faq-indent: 3rem;
}

.ap-faq-item {
	counter-increment: ap-faq;
}

.ap-faq-item:not(:last-child) {
	border-bottom: 1px solid rgba(51, 153, 51, 0.25);
}

/* Full-row tint on open — .ap-faq's overflow: hidden clips it to the
   container's rounded corners on the first/last item. */
.ap-faq-item[open] {
	background: rgba(51, 153, 51, 0.06);
}

/* flex-start, not baseline — the chevron SVG's intrinsic baseline sits
   at its bottom edge, not the text baseline, so baseline alignment
   drifts the icon toward whichever line it lands on once a long
   question wraps to 2-3 lines on mobile. flex-start plus a small
   top nudge on the number/chevron (below) keeps both pinned to the
   first line's cap-height regardless of wrap. */
.ap-faq-item summary {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	list-style: none;
}

.ap-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Leading "01", "02"… — generated, so the markup never hardcodes a
   number that would drift if a question is added or reordered. */
.ap-faq-item summary::before {
	content: counter(ap-faq, decimal-leading-zero);
	flex: 0 0 auto;
	width: calc(var(--ap-faq-indent) - 1rem);
	margin-top: 0.2em;
	font-family: var(--ap-sans);
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	color: var(--ap-btn-bg);
}

.ap-faq-q {
	flex: 1 1 auto;
	font-family: var(--ap-sans);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.5;
}

.ap-faq-item summary:hover .ap-faq-q,
.ap-faq-item summary:focus .ap-faq-q {
	color: var(--ap-btn-bg);
}

.ap-faq-chevron {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 0.3em;
	color: var(--ap-btn-bg);
	transition: transform 200ms ease;
}

.ap-faq-item[open] .ap-faq-chevron {
	transform: rotate(180deg);
}

.ap-faq-item p {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
	padding: 0 1.5rem 1.5rem var(--ap-faq-indent);
}

@media screen and (max-width: 30em) {
	.ap-faq {
		--ap-faq-indent: 2.25rem;
	}

	.ap-faq-item summary {
		padding: 1rem;
	}

	.ap-faq-item p {
		padding: 0 1rem 1rem var(--ap-faq-indent);
	}
}

/* Contact page
--------------------------------------------- */

/* Same centering technique as .ap-info-section (max-width + margin:
   0 auto), but without text-align: center — Fluent Forms renders its
   own labels/inputs/buttons, which need to stay left-aligned regardless
   of how the site centers plain text blocks. The h1 above stays
   centered via the shared ".ap-main > h1" rule (Header section). */
.ap-contact-form {
	max-width: 700px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

/* Footer
--------------------------------------------- */

/* .ap-footer carries no max-width, so its background spans edge-to-edge
   naturally — same full-bleed technique as .ap-nav (see CLAUDE.md for
   the vw-trick pitfall this avoids). .ap-footer-inner holds the capped,
   centered content, matching .ap-header / .ap-main / .ap-nav-inner. */
.ap-footer {
	position: relative;
	background: var(--ap-nav-bg);
}

/* Decorative Matterhorn skyline, anchored to the footer's top edge and
   rising above it (bottom: 100% puts the image's own bottom flush with
   the footer's top). z-index: -1, combined with .ap-footer having no
   z-index of its own (so it doesn't trap the image in a sub-context),
   sends it behind every normal-flow element on the page — both the
   footer's own content and whatever section happens to sit just above
   the footer on any given page — without needing to coordinate with
   each page template individually. */
.ap-footer-mountain {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: auto;
	z-index: -1;
	opacity: 0.1;
	pointer-events: none;
}

.ap-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 2.5rem var(--ap-gap) 2rem;
}

.ap-footer-brand {
	display: flex;
	justify-content: center;
	margin: 0 0 2.5rem;
}

.ap-footer-logo {
	display: inline-block;
}

.ap-footer-logo img {
	width: 100px;
	height: auto;
}

.ap-footer-columns {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-align: center;
}

.ap-footer-col p {
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}

.ap-footer-col a,
.ap-footer-legal a {
	text-decoration: none;
}

.ap-footer-col p:last-child {
	margin-bottom: 0;
}

.ap-footer-divider {
	border: none;
	border-top: 1px solid var(--ap-text);
	opacity: 0.3;
	margin: 2rem 0 1.5rem;
}

.ap-footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.ap-footer-text,
.ap-footer-legal {
	font-family: var(--ap-sans);
	font-size: 0.8rem;
	margin: 0;
}

/* Responsive
--------------------------------------------- */

/* Desktop only (3-column layout): lean each product's text/buttons
   toward the bottle in the center column. Mobile stays centered
   via the .ap-product / .ap-product-actions defaults above. */
@media screen and (min-width: 62.0625em) {
	.ap-break-desktop {
		display: inline;
	}

	/* .ap-nav itself has no max-width, so it's naturally exactly as
	   wide as #page's real content box (no scrollbar/vw math involved
	   — that's what caused a horizontal scrollbar in an earlier
	   version). No background on load — .is-scrolled (toggled by
	   js/nav-sticky.js) adds it once the user scrolls. */
	.ap-nav {
		position: sticky;
		top: 0;
		z-index: 50;
		background: transparent;
		transition: background-color 200ms ease;
	}

	.ap-nav.is-scrolled {
		background: var(--ap-nav-bg);
	}

	/* Logo far left, links far right, both on one row, no width cap —
	   deliberately not constrained to the site's usual 1440px column
	   here, unlike everywhere else, per explicit request. */
	.ap-nav-inner {
		max-width: none;
		margin: 0;
		padding: 1rem var(--ap-gap);
		gap: 1.75rem;
	}

	/* No hamburger at desktop — hide the toggle entirely and show the
	   links list unconditionally, unwrapped back into a plain inline
	   row (order matches the original logo-left/links-right layout). */
	.ap-mobile-menu {
		display: none;
	}

	.ap-nav-links {
		display: flex;
		order: 2;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.5rem 1.75rem;
		padding: 0;
		background: none;
		border-top: none;
		box-shadow: none;
	}

	.ap-nav-logo {
		order: 1;
		margin-right: auto;
		display: inline-block;
		font-family: var(--ap-sans);
		font-size: 1.1rem;
		font-weight: 600;
		text-decoration: none;
	}

	.ap-nav-lang {
		order: 3;
	}

	.ap-product--huile {
		text-align: right;
	}

	.ap-product--huile .ap-product-actions {
		justify-content: flex-end;
	}

	.ap-product--lotion {
		text-align: left;
	}

	.ap-product--lotion .ap-product-actions {
		justify-content: flex-start;
	}

	/* Product hero image at 70% of its base clamp() — desktop only,
	   mobile keeps the full-size clamp defined above. */
	.ap-product-hero-image {
		width: clamp(112px, 11.2vw, 182px);
	}

	.ap-footer-columns {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.ap-footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	/* One extra blank line between the FAQ intro and the accordion,
	   desktop only — mobile keeps them closer per the default spacing. */
	.ap-faq-intro {
		margin-bottom: 1lh;
	}

	.ap-info-badges {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 62em) {
	.ap-products {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 2.5rem;
	}

	.ap-product-image {
		order: -1;
	}
}

@media screen and (max-width: 30em) {
	.ap-nav-inner {
		padding-top: 1.5rem;
	}
}

/* WooCommerce — Panier (cart) page
   ----------------------------------------------
   CSS-only reskin of the default [woocommerce_cart] shortcode markup —
   no woocommerce/ template overrides in this theme (see
   docs/superpowers/specs/2026-08-17-panier-cart-page-design.md). Default
   WooCommerce styles are dequeued (inc/woocommerce.php), so every rule
   below is load-bearing: removing one leaves that part of the cart
   entirely unstyled, not just less polished. */

.ap-cart {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

/* Tablet-and-up fallback: the table can scroll sideways inside the
   form if it ever runs out of room. Below 40em this is superseded by
   the stacked mobile layout (see the max-width: 40em block at the end
   of this section) — scroll-instead-of-stack was tried as the only
   mobile treatment first and proved broken on real phones: iOS grew
   the layout viewport instead of scrolling, pushing everything
   (including content outside this form) off the right screen edge. */
.ap-cart .woocommerce-cart-form {
	overflow-x: auto;
}

.ap-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
}

/* The 480px floor belongs to the ITEMS table only (it has 6 columns
   and scrolls inside the form when squeezed). The totals table also
   carries .shop_table — giving it this min-width shipped a real bug:
   on phones it propped the whole page open to 528px (via the
   body/#page flex chain) instead of scrolling, pushing content off
   the right edge of the screen. */
.ap-cart .woocommerce-cart-form table.shop_table {
	min-width: 480px;
}

.ap-cart table.shop_table th,
.ap-cart table.shop_table td {
	padding: 1rem 0.5rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--ap-nav-bg);
}

.ap-cart table.shop_table thead th {
	font-weight: 200;
	letter-spacing: 0.02em;
	color: var(--ap-text);
}

.ap-cart .product-thumbnail img {
	display: block;
	width: 64px;
	height: auto;
}

.ap-cart .product-remove {
	width: 2rem;
}

/* Plain green "×", not a filled badge — #666666 (Neutral Badge Grey) is
   reserved for the "Marque déposée" credential badge only, never general
   UI (see DESIGN.md's Neutral Badge Grey rule). */
.ap-cart .product-remove a.remove {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ap-text);
	text-decoration: none;
}

.ap-cart .product-remove a.remove:hover,
.ap-cart .product-remove a.remove:focus {
	color: var(--ap-btn-bg-hover);
}

.ap-cart .quantity .qty {
	width: 4rem;
	font-family: var(--ap-sans);
	font-size: 1rem;
	padding: 0.4em 0.5em;
	border: 1px solid var(--ap-nav-bg);
	border-radius: 4px;
}

/* Coupon (left) and "Update cart" (right) share one row. Two gotchas
   hit here, both confirmed on the live site:
   - the "actions" class is on the <td> itself in WooCommerce's cart
     markup (<td colspan="6" class="actions">), not on its <tr>;
   - td.actions must KEEP display: table-cell — display: flex on it
     voids colspan, collapsing the cell to the first column's width and
     stacking the controls vertically. Floats do the left/right split
     instead; a table cell contains its own floats (it's a block
     formatting context), so no clearfix is needed and the divider
     line/padding from the generic th/td rule above are unaffected. */
.ap-cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	float: left;
}

/* Direct child only — "Apply coupon" is also a .button but sits inside
   .coupon, so it stays in the left group. */
.ap-cart td.actions > .button {
	float: right;
}

.ap-cart .coupon label {
	display: none;
}

/* Same font-size, vertical padding, and border as .ap-cart .button —
   that makes the input, "Appliquer le code promo", and the floated
   "Mettre à jour le panier" exactly equal in height by construction,
   which is what keeps the left and right ends of this row on one
   visual line (float alignment is top-based; unequal heights showed
   as the update button sitting a few px higher). */
.ap-cart .coupon #coupon_code {
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	padding: 0 0.75em;
	border: 1px solid var(--ap-nav-bg);
	border-radius: 4px;
}

/* One explicit height for everything in the actions row — the coupon
   input, "Appliquer le code promo", and the right-floated "Mettre à
   jour le panier". Float alignment is top-based, so any height
   difference reads as the update button riding high. Intrinsic
   heights CANNOT be trusted equal here: text inputs floor their
   content box at the font's natural height (unlike buttons), and that
   floor depends on the loaded font's metrics — tuning paddings to
   match worked with fallback system fonts but broke by 3px on the
   live site under Nunito Sans. An explicit shared height is
   font-independent; buttons and single-line inputs both center their
   content vertically within it. */
.ap-cart td.actions .button,
.ap-cart td.actions #coupon_code {
	height: 2.5rem;
}

/* Shared by "Update cart", "Apply coupon", and the checkout button —
   same visual treatment as .ap-btn elsewhere on the site, duplicated
   here (rather than adding the ap-btn class, which would require a
   template override) since these buttons come from WooCommerce's own
   un-overridden markup. */
.ap-cart .button {
	display: inline-block;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	color: var(--ap-btn-text);
	background: var(--ap-btn-bg);
	border: 1px solid var(--ap-btn-bg);
	border-radius: 4px;
	padding: 0.65em 1.5em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.ap-cart .button:visited {
	color: var(--ap-btn-text);
}

.ap-cart .button:hover,
.ap-cart .button:focus {
	background: var(--ap-btn-bg-hover);
	color: var(--ap-btn-text);
}

.ap-cart .cart-collaterals {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 1.5rem;
}

/* Cross-sells ("suggested product") come before cart totals in
   WooCommerce's own markup order, but this site wants the suggestion
   to read as secondary — always fully below the totals/checkout
   button, at every width, not beside or above it. */
.ap-cart .cart_totals {
	order: 1;
}

.ap-cart .cross-sells {
	order: 2;
}

.ap-cart .cross-sells h2,
.ap-cart .cart_totals h2 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1rem;
}

/* Suggested-product card: 1px brand-green border on white (per explicit
   request: #339933 border / #FFFFFF background — same values as the
   --ap-text / --ap-bg tokens, used here as border/surface colors like
   the language dropdown's border). Square corners, flat — no shadow
   (the Flat-Unless-Floating rule: this card sits in flow, it doesn't
   float over content). */
.ap-cart .cross-sells {
	border: 1px solid var(--ap-text);
	background: var(--ap-bg);
	border-radius: 4px;
	padding: 1.5rem 1.5rem 2rem;
}

.ap-cart .cross-sells h2 {
	text-align: center;
}

.ap-cart .cross-sells ul.products {
	display: flex;
	gap: var(--ap-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-cart .cross-sells li.product {
	flex: 1;
	text-align: center;
}

.ap-cart .cross-sells img {
	width: 100%;
	max-width: 160px;
	height: auto;
}

/* Breathing room between the product price and the "Add to cart"
   button beside it. */
.ap-cart .cross-sells .add_to_cart_button {
	margin-left: 0.75rem;
}

/* Browser-default underlines off — for everything in the suggestion
   card (title, price) and for product-name links in the cart table. */
.ap-cart .cross-sells a,
.ap-cart .product-name a {
	text-decoration: none;
}

.ap-cart .cart_totals table {
	width: 100%;
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
}

.ap-cart .cart_totals th,
.ap-cart .cart_totals td {
	padding: 0.75rem 0;
	text-align: left;
	border-bottom: 1px solid var(--ap-nav-bg);
}

.ap-cart .cart_totals tr.order-total th,
.ap-cart .cart_totals tr.order-total td {
	font-weight: 700;
	font-size: 1.75rem;
	text-align: right;
	border-bottom: none;
}

/* "(dont CHF x,xx TVA)" tax note in the total line — smaller and
   lighter than the amount, per explicit request (1.25rem). */
.ap-cart .cart_totals tr.order-total .includes_tax {
	font-size: 1.25rem;
	font-weight: 300;
}

/* Shipping row (Expédition) inside the totals table.
   The single shipping method renders as a default <ul> — kill the
   40px default indent so the line starts flush with the destination
   line below it ("Livraison à …"); list-style-position: inside keeps
   the bullet, rendered inline at the left edge. */
.ap-cart .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

/* Calculator fields: label on its own line, field below it — the
   short Ville / Code postal inputs otherwise sit inline next to
   their labels. */
.ap-cart .woocommerce-shipping-calculator .form-row label {
	display: block;
	margin: 0 0 0.4rem;
}

/* The "Expédition" <th> is vertically centered in its (tall) cell by
   the shop_table rule above. With the calculator expanded, dead center
   lands one field-line below the "Canton (facultatif)" label; this
   nudge pins it to the Canton line per explicit request (verified:
   centers within 3px at desktop width). Scoped two ways: via :has() to
   the expanded state only ([style*="block"] — WooCommerce's cart script
   slideToggles the section with inline display), and to desktop widths
   only — at narrow widths the wrapped text makes the cell far taller,
   the fixed nudge lands nowhere near Canton (measured), and the natural
   centering looks right there anyway. */
@media screen and (min-width: 62.0625em) {
	.ap-cart .shipping:has(.shipping-calculator-form[style*="block"]) th {
		position: relative;
		top: -1.5rem;
	}
}

/* Mobile cart layout. The desktop treatment (480px min-width table,
   sideways scroll inside the form) proved actively broken on real
   phones: iOS grows the layout viewport instead of scrolling, shoving
   the totals, checkout button and suggestion card off the right edge
   of the screen. Below 40em the items table becomes the stacked
   label/value layout WooCommerce's markup is designed for — every td
   carries a data-title attribute for exactly this. Scoped to the
   items table (.woocommerce-cart-form) only: the totals table is a
   narrow two-column th/td list that fits phones as-is, and stacking
   it would double its labels (visible th + data-title ::before). */
@media screen and (max-width: 40em) {
	/* The table ROOT must become a block along with its internals —
	   leaving it display: table while tbody/tr/td are blocks makes
	   Firefox still run table layout over anonymous boxes and compute
	   a too-wide table (confirmed: Firefox RDM overflowed while
	   Chromium tolerated it). With every level a block, no table
	   layout algorithm runs in any engine. */
	.ap-cart .woocommerce-cart-form table.shop_table {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.ap-cart .woocommerce-cart-form thead {
		display: none;
	}

	.ap-cart .woocommerce-cart-form tbody,
	.ap-cart .woocommerce-cart-form tr,
	.ap-cart .woocommerce-cart-form td {
		display: block;
	}

	.ap-cart .woocommerce-cart-form tr.cart_item {
		border-bottom: 1px solid var(--ap-nav-bg);
		padding: 0.5rem 0;
	}

	.ap-cart .woocommerce-cart-form td {
		border-bottom: none;
		padding: 0.35rem 0;
	}

	/* Label (from data-title) on the left, value on the right. */
	.ap-cart .woocommerce-cart-form td[data-title] {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		text-align: right;
	}

	.ap-cart .woocommerce-cart-form td[data-title]::before {
		content: attr(data-title);
		font-weight: 700;
		text-align: left;
	}

	/* No room for thumbnails in the stacked view — WooCommerce's own
	   responsive stylesheet hides them there too. */
	.ap-cart .woocommerce-cart-form .product-thumbnail {
		display: none;
	}

	.ap-cart .woocommerce-cart-form .product-remove {
		width: auto;
		padding-bottom: 0;
	}

	/* Coupon row and "Mettre à jour le panier" stack full-width —
	   the floated left/right split has no room at phone widths. */
	.ap-cart td.actions .coupon,
	.ap-cart td.actions > .button {
		float: none;
		width: 100%;
	}

	.ap-cart .coupon #coupon_code {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ap-cart td.actions > .button {
		margin-top: 0.75rem;
	}
}

.ap-cart .wc-proceed-to-checkout {
	margin-top: 1.5rem;
}

.ap-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

.ap-cart p.cart-empty,
.ap-cart p.return-to-shop {
	font-family: var(--ap-sans);
}

.ap-cart p.return-to-shop {
	text-align: center;
}

.ap-cart p.cart-empty {
	font-weight: 300;
	font-size: 1.05rem;
	margin: 0 0 1.5rem;
}

/* WooCommerce — Login / register (Mon compte page)
   ----------------------------------------------
   CSS-only reskin of the restructured login/register markup from
   woocommerce/myaccount/form-login.php — see
   docs/superpowers/specs/2026-08-17-login-account-page-design.md. Default
   WooCommerce styles are dequeued (inc/woocommerce.php), so every rule
   below is load-bearing. */

.ap-login {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

.ap-login-forms {
	max-width: 480px;
	margin: 0 auto;
	font-family: var(--ap-sans);
	font-weight: 300;
}

.ap-login-col .woocommerce-form-row,
.ap-register-col .woocommerce-form-row {
	margin: 0 0 1.25rem;
}

.ap-login-col label,
.ap-register-col label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
}

.ap-login-col .input-text,
.ap-register-col .input-text {
	width: 100%;
	font-family: var(--ap-sans);
	font-size: 1rem;
	padding: 0.55em 0.75em;
	border: 1px solid var(--ap-nav-bg);
	border-radius: 4px;
	color: var(--ap-text);
}

/* WooCommerce's frontend JS injects an empty
   <button class="show-password-input"> after every WC password field;
   its eye icon exists only in WooCommerce's stylesheet, which this theme
   dequeues entirely — so the button renders as a bare grey box.
   Unscoped on purpose: kills it on every WC password field (login,
   register, checkout, account details), not just this page. */
.show-password-input {
	display: none;
}

.ap-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

.ap-login .button {
	display: inline-block;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	/* _s's base `button { line-height: 1 }` only reaches the real
	   <button> elements; the <a> and <summary> carrying class="button"
	   would inherit 1.5 and render ~8px taller. Pin it here so all
	   buttons on the page compute the exact same box. */
	line-height: 1;
	color: var(--ap-btn-text);
	background: var(--ap-btn-bg);
	border: 1px solid var(--ap-btn-bg);
	border-radius: 4px;
	padding: 0.65em 1.5em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.ap-login .button:visited {
	color: var(--ap-btn-text);
}

.ap-login .button:hover,
.ap-login .button:focus {
	background: var(--ap-btn-bg-hover);
	color: var(--ap-btn-text);
}

.ap-login .woocommerce-LostPassword {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

/* Divider + "S'inscrire" button at the bottom of the login form,
   linking to the standalone /inscription/ page (page-inscription.php),
   which reuses .ap-login-forms/.ap-register-col above for the form
   itself. Replaced the old <details class="ap-register-toggle">
   disclosure — with the form on its own page, the details box-sizing
   shadow-slot gotcha (see CLAUDE.md, language switcher) no longer
   applies here. */
.ap-register-cta {
	margin-top: 2.5rem;
	border-top: 1px solid var(--ap-nav-bg);
	padding-top: 1.5rem;
}

/* WooCommerce — Account dashboard (bare minimum) + notices
   ----------------------------------------------
   Deliberately minimal: enough that the logged-in dashboard (order
   history, addresses, account details, logout) isn't visually broken,
   not a full reskin — see
   docs/superpowers/specs/2026-08-17-login-account-page-design.md, "Out of
   scope". Notices stay inside the One Hue Rule (DESIGN.md): errors and
   success/info messages are differentiated by a leading glyph and font
   weight, not by color. */

.ap-login .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0 0 1rem;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	border-bottom: 1px solid var(--ap-nav-bg);
}

.ap-login .woocommerce-MyAccount-navigation a {
	color: var(--ap-text);
	text-decoration: none;
}

.ap-login .woocommerce-MyAccount-navigation a:hover,
.ap-login .woocommerce-MyAccount-navigation a:focus {
	text-decoration: underline;
}

.ap-login .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--ap-btn-bg-hover);
}

.ap-login .woocommerce-MyAccount-content {
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1.05rem;
	overflow-x: auto;
}

.ap-login .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	margin: 1rem 0;
}

.ap-login .woocommerce-MyAccount-content table.shop_table th,
.ap-login .woocommerce-MyAccount-content table.shop_table td {
	padding: 0.75rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--ap-nav-bg);
}

.ap-login .woocommerce-MyAccount-content .input-text,
.ap-login .woocommerce-MyAccount-content select {
	display: block;
	width: 100%;
	max-width: 480px;
	font-family: var(--ap-sans);
	font-size: 1rem;
	padding: 0.55em 0.75em;
	margin: 0 0 1rem;
	border: 1px solid var(--ap-nav-bg);
	border-radius: 4px;
	color: var(--ap-text);
}

.ap-login .woocommerce-MyAccount-content .woocommerce-Address {
	margin: 0 0 2rem;
}

.ap-login .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.25rem;
}

.ap-login .woocommerce-error,
.ap-login .woocommerce-message,
.ap-login .woocommerce-info {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	background: var(--ap-nav-bg);
	border: 1px solid var(--ap-text);
	border-radius: 4px;
	list-style: none;
}

.ap-login .woocommerce-error li + li {
	margin-top: 0.5rem;
}

.ap-login .woocommerce-error li::before {
	content: "! ";
	font-weight: 700;
}

.ap-login .woocommerce-message::before,
.ap-login .woocommerce-info::before {
	content: "\2713 ";
	font-weight: 700;
}

/* WooCommerce — Commander (checkout) page
   ----------------------------------------------
   CSS-only reskin of the classic [woocommerce_checkout] shortcode output
   (and the order-received / order-pay content the same shortcode renders)
   — see docs/superpowers/specs/2026-08-17-commander-checkout-page-design.md.
   Markup verified against WooCommerce core checkout templates (stable
   6.8 → current trunk). Default WooCommerce styles are dequeued
   (inc/woocommerce.php), so every rule below is load-bearing. selectWoo
   is dequeued on this page, so country/canton are native <select>s. */

.ap-checkout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
	font-family: var(--ap-sans);
	font-weight: 300;
	font-size: 1rem;
}

/* Section headings (Détails de facturation, Votre commande, …). The
   ship-to-different-address h3 is a checkbox row, not a visual heading —
   overridden further down. */
.ap-checkout h3 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.5rem;
	margin: 0 0 1.25rem;
}

/* Fields — label above input, flat 1px brand-green border, 4px radius. */
.ap-checkout .form-row {
	margin: 0 0 1.25rem;
}

.ap-checkout .form-row label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
}

.ap-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}

.ap-checkout label abbr.required {
	text-decoration: none;
	border-bottom: none;
	cursor: default;
}

.ap-checkout .input-text,
.ap-checkout select {
	width: 100%;
	font-family: var(--ap-sans);
	font-size: 1rem;
	color: var(--ap-text);
	background: #fff;
	padding: 0.55em 0.75em;
	border: 1px solid var(--ap-text);
	border-radius: 4px;
}

.ap-checkout textarea.input-text {
	min-height: 6em;
	resize: vertical;
}

.ap-checkout .input-text:focus-visible,
.ap-checkout select:focus-visible {
	outline: 2px solid var(--ap-btn-bg);
	outline-offset: 1px;
}

/* wc-checkout.js toggles .woocommerce-invalid on p.form-row at blur/
   submit — strengthened border + inset shadow, same green family, no
   layout shift (border-width is unchanged, only its color/emphasis). */
.ap-checkout .form-row.woocommerce-invalid .input-text,
.ap-checkout .form-row.woocommerce-invalid select {
	border-color: var(--ap-btn-bg);
	box-shadow: inset 0 0 0 1px var(--ap-btn-bg);
}

.ap-checkout input[type="checkbox"],
.ap-checkout input[type="radio"] {
	accent-color: var(--ap-btn-bg);
	width: 1rem;
	height: 1rem;
}

/* First/last name and postcode/city pairs share a row at every width —
   the field-wrappers are 2-col grids, wide fields span both columns. */
.ap-checkout .woocommerce-billing-fields__field-wrapper,
.ap-checkout .woocommerce-shipping-fields__field-wrapper,
.ap-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

.ap-checkout .form-row-wide,
.ap-checkout .form-row.notes {
	grid-column: 1 / -1;
}

/* Checkbox rows (ship elsewhere, create account, terms): inline flex,
   body scale — the h3 wrapper must not look like a heading. */
.ap-checkout h3#ship-to-different-address {
	font-size: 1rem;
	font-weight: 300;
	margin: 0 0 1.25rem;
}

.ap-checkout label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	cursor: pointer;
}

/* Billing block, then shipping toggle/notes below it — .col-1/.col-2
   stack in source order inside #customer_details. */
.ap-checkout .col2-set .col-2 {
	margin-top: 0.5rem;
}

/* Notices (validation errors, coupon prompt, login prompt) — same One
   Hue treatment as the Mon compte notices: differentiated by glyph and
   weight, never by a new color. */
.ap-checkout .woocommerce-error,
.ap-checkout .woocommerce-message,
.ap-checkout .woocommerce-info {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	background: var(--ap-nav-bg);
	border: 1px solid var(--ap-text);
	border-radius: 4px;
	list-style: none;
}

.ap-checkout .woocommerce-error li + li {
	margin-top: 0.5rem;
}

.ap-checkout .woocommerce-error li::before {
	content: "! ";
	font-weight: 700;
}

/* Success notices only (e.g. "Coupon appliqué avec succès.") get the
   checkmark — NOT .woocommerce-info, which styles the coupon/login
   prompts here, where a checkmark would be wrong. */
.ap-checkout .woocommerce-message::before {
	content: "\2713 ";
	font-weight: 700;
}

/* Generic button (Appliquer le code promo, login submit, failed-order
   Pay links) — the primary treatment from DESIGN.md. */
.ap-checkout .button {
	display: inline-block;
	font-family: var(--ap-sans);
	font-size: 0.95rem;
	color: var(--ap-btn-text);
	background: var(--ap-btn-bg);
	border: 1px solid var(--ap-btn-bg);
	border-radius: 4px;
	padding: 0.65em 1.5em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.ap-checkout .button:visited {
	color: var(--ap-btn-text);
}

.ap-checkout .button:hover,
.ap-checkout .button:focus {
	background: var(--ap-btn-bg-hover);
	color: var(--ap-btn-text);
}

/* Coupon form: code field and Apply button on one row. Explicit shared
   height — inputs floor their content height on loaded-font metrics,
   buttons don't (the Panier 3px lesson). */
.ap-checkout form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	max-width: 480px;
}

.ap-checkout form.checkout_coupon p {
	margin: 0;
}

/* The intro sentence ("Si vous avez un code promo, …") is a plain <p>
   with no .form-row class — real WooCommerce prints it before the
   input/button row. Without this it becomes a third flex item on the
   same row as the field and button, squeezing them. Forcing it to full
   width wraps it onto its own line, then the field+button pair flows
   onto the next line together. */
.ap-checkout form.checkout_coupon > p:first-child {
	flex: 1 0 100%;
}

.ap-checkout form.checkout_coupon .form-row-first {
	flex: 1;
}

.ap-checkout form.checkout_coupon .input-text,
.ap-checkout form.checkout_coupon .button {
	height: 2.5rem;
	padding-top: 0;
	padding-bottom: 0;
	white-space: nowrap;
}

.ap-checkout form.checkout_coupon .clear {
	display: none;
}

/* Returning-customer login form (printed before form.checkout when
   login-at-checkout is enabled) — same width constraint as the coupon
   form above, so its inputs don't run the full 1200px. */
.ap-checkout form.woocommerce-form-login {
	max-width: 480px;
}

/* Desktop: customer form left, order summary right. Everything printed
   BEFORE the form (notices, coupon, login) stays naturally full-width
   above the grid — but checkout.js's AJAX validation NoticeGroup is
   prepended INSIDE form.checkout itself, so it needs an explicit
   full-width row 1 or it auto-places under the billing form instead.
   #customer_details/#order_review_heading/#order_review all shift down
   one row to make room. With no notices present, row 1 auto-sizes to 0
   — zero visual change from before this row existed. */
@media screen and (min-width: 62.0625em) {

	.ap-checkout form.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	.ap-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.ap-checkout #customer_details {
		grid-column: 1;
		grid-row: 2 / 4;
	}

	.ap-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}

	.ap-checkout #order_review {
		grid-column: 2;
		grid-row: 3;
	}
}

/* Order summary panel — bordered like the cart's suggestion card; the
   one deliberate "card" so the summary reads as a unit next to the form. */
.ap-checkout #order_review {
	border: 1px solid var(--ap-text);
	border-radius: 4px;
	padding: 1.25rem;
}

/* Review table: the cart-table vocabulary (light hairlines, right-
   aligned amounts, emphasized total). Two columns only — no min-width
   anywhere, so it can never prop the page open on phones (the Panier
   mobile-overflow lesson). */
.ap-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.ap-checkout table.shop_table th,
.ap-checkout table.shop_table td {
	padding: 0.75rem 0.25rem;
	text-align: left;
	border-bottom: 1px solid var(--ap-nav-bg);
	vertical-align: top;
}

.ap-checkout table.shop_table th:last-child,
.ap-checkout table.shop_table td:last-child {
	text-align: right;
}

.ap-checkout table.shop_table thead th {
	font-weight: 700;
	border-bottom-color: var(--ap-text);
}

.ap-checkout table.shop_table .product-quantity {
	font-weight: 300;
}

.ap-checkout table.shop_table tfoot th {
	font-weight: 300;
}

.ap-checkout table.shop_table tr.order-total th,
.ap-checkout table.shop_table tr.order-total td {
	font-weight: 700;
	font-size: 1.05rem;
	border-bottom: none;
	padding-top: 1rem;
}

.ap-checkout table.shop_table .includes_tax {
	display: block;
	font-size: 0.8rem;
	font-weight: 300;
}

/* Shipping method line(s) inside the review table. */
.ap-checkout #shipping_method,
.ap-checkout table.shop_table ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-checkout table.shop_table ul li {
	margin: 0 0 0.5rem;
}

.ap-checkout table.shop_table ul li:last-child {
	margin-bottom: 0;
}

/* Payment methods: quiet bordered list inside the summary panel. */
.ap-checkout #payment ul.wc_payment_methods {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border: 1px solid var(--ap-text);
	border-radius: 4px;
}

.ap-checkout li.wc_payment_method {
	padding: 0.9rem 1rem;
}

.ap-checkout li.wc_payment_method + li.wc_payment_method {
	border-top: 1px solid var(--ap-nav-bg);
}

.ap-checkout li.wc_payment_method > label {
	display: inline;
	font-size: 1rem;
	cursor: pointer;
}

.ap-checkout li.wc_payment_method input.input-radio {
	margin-right: 0.5rem;
	vertical-align: baseline;
}

.ap-checkout li.wc_payment_method label img {
	max-height: 1.5rem;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.ap-checkout .payment_box {
	margin: 0.6rem 0 0 1.5rem;
	font-size: 0.9rem;
}

.ap-checkout .payment_box p {
	margin: 0 0 0.5rem;
}

.ap-checkout .payment_box p:last-child {
	margin-bottom: 0;
}

/* Terms/privacy line + the Commander button. */
.ap-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.ap-checkout .place-order {
	margin: 0;
}

.ap-checkout #place_order {
	display: block;
	width: 100%;
	font-family: var(--ap-sans);
	font-size: 1rem;
	color: var(--ap-btn-text);
	background: var(--ap-btn-bg);
	border: 1px solid var(--ap-btn-bg);
	border-radius: 4px;
	padding: 0.75em 1.5em;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.ap-checkout #place_order:hover,
.ap-checkout #place_order:focus {
	background: var(--ap-btn-bg-hover);
}

/* Order-received ("Commande reçue") confirmation — rendered by the same
   shortcode at the order-received endpoint, same template and wrapper. */
.ap-checkout .woocommerce-thankyou-order-received {
	font-size: 1.35rem;
	font-weight: 200;
	margin: 0 0 2rem;
}

.ap-checkout ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 0;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ap-text);
	border-radius: 4px;
	font-size: 0.9rem;
}

.ap-checkout ul.woocommerce-order-overview li {
	margin: 0 1.5rem 0 0;
	padding: 0 1.5rem 0 0;
	border-right: 1px solid var(--ap-nav-bg);
}

.ap-checkout ul.woocommerce-order-overview li:last-child {
	margin-right: 0;
	padding-right: 0;
	border-right: none;
}

.ap-checkout ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.15rem;
	font-size: 1rem;
}

.ap-checkout .woocommerce-order-details,
.ap-checkout .woocommerce-customer-details,
.ap-checkout .woocommerce-bacs-bank-details {
	margin: 0 0 2.5rem;
	max-width: 700px;
}

.ap-checkout .woocommerce-order h2 {
	font-family: var(--ap-sans);
	font-weight: 200;
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.ap-checkout .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ap-nav-bg);
	border-radius: 4px;
}

/* BACS bank-details list (virement bancaire confirmation) — override the
   _s base ul's bulleted 3em indent. */
.ap-checkout .wc-bacs-bank-details {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.ap-checkout .wc-bacs-bank-details li {
	margin: 0 0 0.5rem;
}

/* Failed-order fallback: notice + Pay/My account buttons, no red. */
.ap-checkout .woocommerce-thankyou-order-failed {
	font-weight: 700;
	margin: 0 0 1.5rem;
}

.ap-checkout .woocommerce-thankyou-order-failed-actions .button {
	margin-right: 0.75rem;
}