/* Bio Willow Coffins - V5 shared tokens and components (HOCKERTY_SPEC_V5 G9). One definition for account, checkout, landing.
   Radius 0 everywhere except buttons (40px) and round icon buttons / swatches (50%). */
:root {
    --hk-font: 'Albert Sans', Arial, sans-serif;
    --hk-ink: #212127; --hk-ink-2: #595959; --hk-grey: #6F7377; --hk-grey-2: #999999; --hk-draw: #262425;
    --hk-line: #E3E5E7; --hk-line-2: #C5C7C2; --hk-line-3: #D9D7D0;
    --hk-paper: #FFFFFF; --hk-cream: #F5F4EF; --hk-cream-2: #F2F1EC; --hk-tile: #EFEEEA; --hk-dark: #212727;
    --hk-accent: #A0622F; --hk-accent-hov: #87511F; --hk-mark: #B8955A; --hk-err: #A1261E; --hk-ok: #2F6B3A;
    --hk-pill: 40px;
    --hk-field: #D6D8D4; --hk-field-ro: #F4F3EF; --hk-form-w: 600px;   /* fix 29/10: field frame, read-only ground, ONE form width */
}
/* ---- fields ---- */
/* fix 29/10 (LE 28/10: "the Delivery address fields are banal, I do not like them at all"). The bare underline with an 11px
   letter-spaced label read as an empty wireframe (about 98px of blank band per field). Now ONE field language for the account,
   the checkout and the sign-in, as in Hockerty's "Aggiungi indirizzo": a readable 13px sentence-case label close above a clear
   48px field with a faint 1px hairline frame on white, square corners (LE: no rounding), the ink line on focus; textarea and
   read-only values (country, locked details) use the SAME frame (read-only = a light warm-grey ground). 20px between fields. */
.cmp-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.cmp-field--wide { grid-column: 1 / -1; }
.cmp-field label, .hk-label { margin: 0; font: 400 13px/18px var(--hk-font); letter-spacing: 0; text-transform: none; color: var(--hk-grey); }
.cmp-req { display: none; }
.cmp-opt { margin-left: 2px; font: inherit; letter-spacing: inherit; color: var(--hk-grey-2); }
.cmp-field input, .cmp-field select, .cmp-field textarea, .hk-value {
    box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--hk-field); border-radius: 0; background: #fff; box-shadow: none;
    font: 300 15px/22px var(--hk-font); color: var(--hk-ink); -webkit-appearance: none; appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cmp-field input, .cmp-field select, .hk-value { height: 48px; padding: 12px 14px; }
.cmp-field input[type="tel"], .cmp-field input[type="email"], .cmp-field input[type="text"] { font-size: 16px; }   /* 16px: no zoom on iOS */
.cmp-field select { padding-right: 38px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23212127' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
.cmp-field textarea { min-height: 104px; padding: 12px 14px; resize: vertical; }
.cmp-field input:hover, .cmp-field select:hover, .cmp-field textarea:hover { border-color: var(--hk-grey-2); }
.cmp-field input:focus, .cmp-field select:focus, .cmp-field textarea:focus,
.cmp-field input:focus-visible, .cmp-field select:focus-visible, .cmp-field textarea:focus-visible {
    outline: none; border-color: var(--hk-ink); box-shadow: inset 0 0 0 1px var(--hk-ink); }
.cmp-field input[readonly], .hk-value { background: var(--hk-field-ro); border-color: var(--hk-field-ro); color: var(--hk-ink-2); cursor: default; }
.cmp-field input[readonly]:hover { border-color: var(--hk-field-ro); }
.cmp-field input[readonly]:focus, .cmp-field input[readonly]:focus-visible { border-color: var(--hk-grey-2); box-shadow: none; }
.hk-value { display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmp-field input[aria-invalid="true"], .cmp-field select[aria-invalid="true"], .cmp-field textarea[aria-invalid="true"] { border-color: var(--hk-err); }
.cmp-field__err { margin: 0; font: 400 12px/16px var(--hk-font); color: var(--hk-err); }
.cmp-field__note { margin: 0; font: 300 12px/18px var(--hk-font); color: var(--hk-grey); }
.hk-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 20px; max-width: var(--hk-form-w); }
.hk-form > .cmp-field--wide, .hk-form > .hk-wide { grid-column: 1 / -1; }
/* fix 29/10 (v5_check_B): ".hk-code .cmp-field input" too, else the 16px rule for text inputs above won over the 28px code */
.hk-code input, .hk-code .cmp-field input { height: 64px; padding: 0 14px; font-size: 28px; line-height: 36px; letter-spacing: 12px; text-align: center; }
.hk-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; font: 300 13px/20px var(--hk-font); color: var(--hk-ink-2); cursor: pointer; }
.hk-check input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--hk-ink); border-radius: 0; background: #fff; cursor: pointer; }
.hk-check input:checked { background: var(--hk-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.hk-check input:focus-visible { outline: 1px solid var(--hk-ink); outline-offset: 3px; }
.hk-check input[aria-invalid="true"] { border-color: var(--hk-err); }
@media (max-width: 600px) { .hk-form { grid-template-columns: minmax(0, 1fr); } }
/* ---- buttons and links ---- */
.cmp-pill, .hk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: 52px; min-width: 180px;
    padding: 0 40px; border: 0; border-radius: var(--hk-pill); background: var(--hk-accent); color: #fff; box-shadow: none;
    font: 400 15px/1 var(--hk-font); letter-spacing: .5px; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
body a.cmp-pill, body a.hk-btn { color: #fff; }
.cmp-pill:hover, .hk-btn:hover { background: var(--hk-accent-hov); }
.hk-btn--dark, body a.hk-btn--dark { height: 46px; padding: 0 32px; font-size: 14px; background: var(--hk-ink); color: #fff; }
.hk-btn--dark:hover { background: #000; }
.cmp-pill--ghost, .hk-btn--line, body a.cmp-pill--ghost, body a.hk-btn--line { height: 46px; padding: 0 32px; font-size: 14px; background: transparent; color: var(--hk-ink); box-shadow: inset 0 0 0 1px var(--hk-ink); }
.cmp-pill--ghost:hover, .hk-btn--line:hover, body a.cmp-pill--ghost:hover, body a.hk-btn--line:hover { background: var(--hk-ink); color: #fff; }
.hk-btn--light, body a.hk-btn--light { height: 46px; padding: 0 32px; font-size: 14px; background: #fff; color: var(--hk-ink); }
.hk-btn--light:hover, body a.hk-btn--light:hover { background: var(--hk-cream); color: var(--hk-ink); }
.cmp-pill--sm, .hk-btn--sm, body a.cmp-pill--sm, body a.hk-btn--sm { height: 36px; min-width: 0; padding: 0 20px; font-size: 12px; letter-spacing: .3px; background: transparent; color: var(--hk-grey); box-shadow: inset 0 0 0 1px var(--hk-line); }
.cmp-pill--sm:hover, .hk-btn--sm:hover, body a.cmp-pill--sm:hover, body a.hk-btn--sm:hover { background: transparent; color: var(--hk-ink); box-shadow: inset 0 0 0 1px var(--hk-ink); }
.cmp-pill--block, .hk-btn--block { display: flex; width: 100%; }
.cmp-pill[disabled], .hk-btn[disabled] { opacity: .6; cursor: progress; }
.cmp-pill:focus-visible, .hk-btn:focus-visible, .hk-link:focus-visible, .hk-click:focus-visible { outline: 1px solid var(--hk-ink); outline-offset: 3px; }
.cmp-link, .hk-link { font: 400 14px/20px var(--hk-font); letter-spacing: 0; text-transform: none; color: var(--hk-ink); border: 0; padding: 0;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hk-link--caps { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; text-underline-offset: 6px; }
/* ---- clickbox (icon culture R4) ---- */
.hk-clicks { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px 40px; margin: 0; padding: 0; list-style: none; }
.hk-click { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 200px; padding: 13px 10px 20px; border: 0; border-radius: 0;
    background: none; color: var(--hk-ink); text-align: center; text-decoration: none; cursor: pointer; }
.hk-click__img { display: block; width: 112px; height: 112px; color: var(--hk-draw); }   /* fix 29/10: the configurator's 3/4 drawings (illus.php hk_drawing) */
.hk-click__img svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hk-click__label { position: relative; padding-bottom: 9px; font: 400 13px/18px var(--hk-font); letter-spacing: 0; text-transform: uppercase; color: var(--hk-ink); }
.hk-click__label::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 90px; height: 3px; margin-left: -45px; background: var(--hk-mark);
    transform: scaleX(0); transition: transform .2s ease; }
.hk-click:hover .hk-click__label::after, .hk-click:focus-visible .hk-click__label::after,
.hk-click[aria-current] .hk-click__label::after, .hk-click[aria-pressed="true"] .hk-click__label::after { transform: scaleX(1); }
.hk-click[aria-current] .hk-click__label, .hk-click[aria-pressed="true"] .hk-click__label { font-weight: 700; letter-spacing: .8px; color: #555; }
.hk-click__sub { max-width: 200px; font: 300 13px/20px var(--hk-font); text-transform: none; color: var(--hk-grey); }
@media (max-width: 767px) { .hk-click { width: 160px; } .hk-click__img { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .hk-click__label::after { transition: none; } }
/* ---- rows, states, notices (R2) ---- */
.hk-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hk-line); }
.hk-rows > li, .hk-row { padding: 18px 0; border-bottom: 1px solid var(--hk-line); }
.hk-caps { margin: 0; font: 400 12px/16px var(--hk-font); letter-spacing: .5px; text-transform: uppercase; color: var(--hk-grey-2); }
.hk-state { margin: 0; font: 400 13px/20px var(--hk-font); color: var(--hk-ink-2); }
.hk-notice { margin: 0 0 32px; padding: 16px 0; border-top: 1px solid var(--hk-line); border-bottom: 1px solid var(--hk-line);
    font: 300 14px/22px var(--hk-font); color: var(--hk-ink); border-radius: 0; background: none; box-shadow: none; }
.hk-notice b { font-weight: 500; }
.hk-notice--err { color: var(--hk-err); }
.hk-notice--ok { color: var(--hk-ok); }
mark.cmt-le { border-radius: 0; }