/* ==========================================================================
Dr. Martens storefront additions on top of the reference CSS modules.
RULE: never override a reference component class (`.G2H0Lq_*`, `.PLPs6q_*`,
`._2bXnlW_*`, `.jZ8eKG_*`, `.tcli2G_*`, `.FflACq_*`, `.PyiYLW_*`, …).
The reference CSS is the pixel source of truth and the markup mirrors the
reference DOM; this file only styles things the reference site does not
have (WooCommerce forms, countdown, social proof, local payment icons) and
adds a small number of defensive rules.
========================================================================== */
:root {
--drm-black: #000;
--drm-white: #fff;
--drm-grey: #6E6E6E;
--drm-line: #D8D8D8;
--drm-bg-soft: #F4F2EE;
--drm-error: #B3261E;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
main.drm-main { display: block; min-height: 40vh; }
/* WordPress admin bar offsets */
body.admin-bar .yDhQaW_nav { top: 32px; }
body.admin-bar .k1imiG_nav { top: 32px; }
.drm-visually-hidden,
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------- utility */
.drm-container { width: 100%; max-width: 96rem; margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
.drm-page { padding-block: clamp(2rem, 5vw, 4.5rem); }
.drm-page-title { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 900; line-height: .92; text-transform: uppercase; margin: 0 0 2rem; }
.drm-page-content { max-width: 52rem; line-height: 1.55; }
.drm-page-content h2, .drm-page-content h3 { text-transform: uppercase; font-weight: 900; line-height: 1; margin-top: 2.5rem; }
.drm-page-content a { text-decoration: underline; }
.drm-link { font-size: .8125rem; text-decoration: underline; color: inherit; }
.drm-empty-state { padding: 3rem 1rem; text-align: center; color: var(--drm-grey); }
.drm-route-fallback { padding: 6rem 0; }
.drm-404 { padding: 6rem 0; text-align: center; }
.drm-404__title { font-size: 5rem; line-height: 1; margin: 0; }
.drm-placeholder { display: block; width: 100%; height: 100%; background: #E5E1DC; }
.drm-placeholder--cover { position: absolute !important; inset: 0; }
/* Keep the media box of an image that has not been mapped to S3 yet. */
.PLPs6q_imageContainer .drm-placeholder { aspect-ratio: 4 / 5; }
._3PxZrq_visual .drm-placeholder { aspect-ratio: 4 / 5; }
.tcli2G_subcategoryImageWrap .drm-placeholder { position: absolute; inset: 0; }
.jZ8eKG_slide .drm-placeholder { aspect-ratio: 4 / 5; }
/* Buttons used by WooCommerce / native forms (reference has its own button) */
.drm-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem; min-height: 3rem; padding: .875rem 1.75rem;
font: inherit; font-size: .875rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
border: 1px solid var(--drm-black); border-radius: 0;
background: transparent; color: var(--drm-black);
cursor: pointer; text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.drm-btn:hover { background: var(--drm-black); color: var(--drm-white); }
.drm-btn--solid { background: var(--drm-black); color: var(--drm-white); }
.drm-btn--solid:hover { background: #333; }
.drm-btn--outline { background: transparent; }
.drm-btn--block { width: 100%; margin-top: 1rem; }
.drm-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.drm-table th, .drm-table td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--drm-line); }
.drm-table th { text-transform: uppercase; font-size: .75rem; }
.drm-size-table { max-width: 26rem; }
/* ------------------------------------------------------------- header bits */
/* Cart count badge (the reference renders it client side). */
.drm-bag-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.1rem; height: 1.1rem; margin-left: .25rem;
font-size: .625rem; font-weight: 700; line-height: 1;
background: var(--drm-black); color: var(--drm-white); border-radius: 999px;
}
.yDhQaW_nav[data-theme="dark"] .drm-bag-count { background: var(--drm-white); color: var(--drm-black); }
/* Logo sizing when rendered through ![]()
/