:root {
    --tnd-accent: #a8c400;
    --tnd-accent-2: #7c9300;
    --tnd-accent-deep: #5f7000;
    --tnd-paper: #faf3e3;
    --tnd-paper-2: #f3e9d2;
    --tnd-kraft: #e7d7b8;
    --tnd-kraft-2: #d9c49c;
    --tnd-ink: #241e17;
    --tnd-ink-2: #4a4034;
    --tnd-mute: #6e6252;
    --tnd-rule: #c9b893;
    --tnd-rule-2: #ddcfae;
    --tnd-green: #17503a;
    --tnd-green-2: #0f3a2a;
    --tnd-alert: #a8321f;
    --tnd-wood: #b98a4b;
    --tnd-display: 'Passion One', 'Arial Narrow', 'Haettenschweiler', sans-serif;
    --tnd-body: 'Palanquin', 'Segoe UI', system-ui, sans-serif;
    --tnd-mono: 'Ubuntu Mono', 'Consolas', monospace;
    --tnd-wrap: 1200px;
    --tnd-gut: 22px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tnd-paper);
    color: var(--tnd-ink);
    font-family: var(--tnd-body);
    font-size: 17px;
    line-height: 1.62;
    font-weight: 400;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--tnd-accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--tnd-ink);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--tnd-display);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.005em;
}

p {
    margin: 0;
    overflow-wrap: anywhere;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tnd-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 90;
    background: var(--tnd-ink);
    color: var(--tnd-paper);
    padding: 10px 16px;
    font-family: var(--tnd-mono);
}

.tnd-skip:focus {
    left: 8px;
    top: 8px;
}

.tnd-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--tnd-gut);
}

.tnd-mono {
    font-family: var(--tnd-mono);
    letter-spacing: 0.02em;
}

.tnd-top {
    position: relative;
    z-index: 20;
    background: var(--tnd-paper);
    border-bottom: 2px solid var(--tnd-ink);
}

.tnd-top-in {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 14px var(--tnd-gut) 12px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.tnd-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
    border-left: 7px solid var(--tnd-green);
    text-decoration: none;
    color: var(--tnd-ink);
    flex: 0 0 auto;
}

.tnd-brand-w {
    font-family: var(--tnd-display);
    font-size: 42px;
    line-height: 0.8;
    letter-spacing: 0.01em;
}

.tnd-brand-s {
    font-family: var(--tnd-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tnd-green);
}

.tnd-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.tnd-nav a {
    font-family: var(--tnd-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tnd-ink-2);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.tnd-nav a:hover,
.tnd-nav a[aria-current='page'] {
    color: var(--tnd-ink);
    border-bottom-color: var(--tnd-accent);
}

.tnd-basket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--tnd-ink);
    padding: 7px 10px 6px;
    text-decoration: none;
    color: var(--tnd-ink);
    font-family: var(--tnd-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--tnd-kraft);
    flex: 0 0 auto;
}

.tnd-basket:hover {
    background: var(--tnd-accent);
}

.tnd-basket-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    background: var(--tnd-ink);
    color: var(--tnd-paper);
    font-size: 12px;
    padding: 0 4px;
}

.tnd-awning {
    height: 17px;
    background: repeating-linear-gradient(90deg, var(--tnd-green) 0 34px, var(--tnd-paper) 34px 68px);
    position: relative;
}

.tnd-awning::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 13px;
    background: radial-gradient(circle at 17px 0, var(--tnd-green) 0 15px, transparent 15.5px) 0 0 / 34px 13px repeat-x;
    pointer-events: none;
}

.tnd-hero {
    position: relative;
    padding: 46px 0 34px;
    background:
        repeating-linear-gradient(90deg, rgba(36, 30, 23, 0.035) 0 1px, transparent 1px 26px),
        var(--tnd-paper);
    border-bottom: 1px solid var(--tnd-rule);
}

.tnd-hero-in {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 0 var(--tnd-gut);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 48px;
    align-items: center;
}

.tnd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tnd-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tnd-green);
    border: 1px solid var(--tnd-green);
    padding: 5px 10px 4px;
    margin-bottom: 18px;
}

.tnd-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--tnd-accent);
    display: inline-block;
}

.tnd-hero h1 {
    font-size: clamp(46px, 6.1vw, 84px);
    letter-spacing: -0.005em;
    margin-bottom: 18px;
    text-wrap: balance;
}

.tnd-hero h1 em {
    font-style: normal;
    color: var(--tnd-green);
    background: linear-gradient(transparent 74%, var(--tnd-accent) 74%);
    padding: 0 2px;
}

.tnd-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--tnd-ink-2);
    max-width: 46ch;
    margin-bottom: 26px;
}

.tnd-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.tnd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tnd-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 22px 13px;
    border: 2px solid var(--tnd-ink);
    background: transparent;
    color: var(--tnd-ink);
    cursor: pointer;
    transition: background 0.15s linear, color 0.15s linear, transform 0.15s linear;
}

.tnd-btn:hover {
    transform: translateY(-2px);
}

.tnd-btn-accent {
    background: var(--tnd-accent);
    border-color: var(--tnd-ink);
    color: var(--tnd-ink);
}

.tnd-btn-accent:hover {
    background: var(--tnd-accent-2);
}

.tnd-btn-dark {
    background: var(--tnd-green);
    border-color: var(--tnd-green);
    color: var(--tnd-paper);
}

.tnd-btn-dark:hover {
    background: var(--tnd-green-2);
    color: var(--tnd-paper);
}

.tnd-btn-line {
    border-color: var(--tnd-ink);
    background: transparent;
}

.tnd-btn-line:hover {
    background: var(--tnd-kraft);
}

.tnd-btn-sm {
    font-size: 13px;
    padding: 9px 12px 8px;
    letter-spacing: 0.04em;
}

.tnd-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-family: var(--tnd-mono);
    font-size: 12.5px;
    color: var(--tnd-mute);
    letter-spacing: 0.03em;
}

.tnd-hero-facts li {
    position: relative;
    padding-left: 15px;
}

.tnd-hero-facts li::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--tnd-accent-deep);
    font-weight: 700;
}

.tnd-stall {
    position: relative;
    background: var(--tnd-kraft);
    border: 2px solid var(--tnd-ink);
    padding: 0 20px 22px;
}

.tnd-stall::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 26px;
    background: repeating-linear-gradient(90deg, var(--tnd-green) 0 26px, var(--tnd-accent) 26px 52px);
    border-bottom: 2px solid var(--tnd-ink);
}

.tnd-stall-sign {
    position: absolute;
    top: 40px;
    right: -14px;
    background: var(--tnd-ink);
    color: var(--tnd-paper);
    font-family: var(--tnd-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 10px 5px;
    transform: rotate(2.2deg);
    z-index: 3;
}

.tnd-stall-sign b {
    color: var(--tnd-accent);
    font-weight: 700;
}

.tnd-rail {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    position: relative;
}

.tnd-rail::before {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: 92px;
    height: 6px;
    background: linear-gradient(var(--tnd-kraft-2), var(--tnd-wood));
    border-top: 1px solid #8f6a34;
}

.tnd-hang {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 26px;
}

.tnd-hang::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 24px;
    background: var(--tnd-ink);
    transform: translateX(-1px);
}

.tnd-hang::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid var(--tnd-ink);
    border-radius: 50%;
    background: var(--tnd-kraft);
    transform: translateX(-4.5px);
}

.tnd-hang img {
    width: 100%;
    height: 146px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--tnd-rule);
    padding: 6px;
}

.tnd-hang-tag {
    margin-top: 8px;
    background: var(--tnd-paper);
    border: 1px solid var(--tnd-ink);
    padding: 5px 8px 4px;
    font-family: var(--tnd-mono);
    font-size: 12px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-1.6deg);
}

.tnd-hang-tag b {
    display: block;
    font-size: 14px;
}

.tnd-hang:nth-child(2) .tnd-hang-tag {
    transform: rotate(1.8deg);
}

.tnd-hang:nth-child(3) .tnd-hang-tag {
    transform: rotate(-0.8deg);
}

.tnd-sec {
    padding: 62px 0;
    border-bottom: 1px solid var(--tnd-rule);
}

.tnd-sec-alt {
    background: var(--tnd-paper-2);
}

.tnd-sec-kraft {
    background: var(--tnd-kraft);
}

.tnd-sec-dark {
    background: var(--tnd-green-2);
    color: var(--tnd-paper);
    border-bottom-color: var(--tnd-green-2);
}

.tnd-sec-dark h2,
.tnd-sec-dark h3 {
    color: var(--tnd-paper);
}

.tnd-sec-dark a {
    color: var(--tnd-accent);
}

.tnd-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--tnd-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tnd-green);
    margin-bottom: 14px;
}

.tnd-label::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--tnd-accent-deep);
}

.tnd-sec-dark .tnd-label {
    color: var(--tnd-accent);
}

.tnd-sec-dark .tnd-sub,
.tnd-sec-dark .tnd-tiny,
.tnd-sec-dark .tnd-small {
    color: #cbdcC4;
}

.tnd-sec-dark .tnd-btn,
.tnd-sukat .tnd-btn {
    color: var(--tnd-ink);
}

.tnd-sec-dark .tnd-btn-dark,
.tnd-sukat .tnd-btn-dark {
    background: var(--tnd-accent);
    border-color: var(--tnd-accent);
    color: var(--tnd-ink);
}

.tnd-sec-dark .tnd-btn-dark:hover,
.tnd-sukat .tnd-btn-dark:hover {
    background: var(--tnd-accent-2);
    border-color: var(--tnd-accent-2);
}

.tnd-sec-dark .tnd-label::before {
    background: var(--tnd-accent);
}

.tnd-h2 {
    font-size: clamp(34px, 4.4vw, 58px);
    margin-bottom: 14px;
    text-wrap: balance;
}

.tnd-sub {
    font-size: 17px;
    color: var(--tnd-ink-2);
    max-width: 62ch;
}

.tnd-sec-dark .tnd-sub {
    color: #cbd9c6;
}

.tnd-sec-head {
    margin-bottom: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.tnd-sec-head-l {
    max-width: 62ch;
}

.tnd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.tnd-chip {
    font-family: var(--tnd-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--tnd-ink);
    background: transparent;
    color: var(--tnd-ink);
    padding: 7px 12px 6px;
    cursor: pointer;
}

.tnd-chip:hover {
    background: var(--tnd-kraft);
}

.tnd-chip[aria-pressed='true'] {
    background: var(--tnd-ink);
    color: var(--tnd-paper);
}

.tnd-board {
    background:
        repeating-linear-gradient(0deg, rgba(36, 30, 23, 0.05) 0 1px, transparent 1px 34px),
        var(--tnd-kraft);
    border: 2px solid var(--tnd-ink);
    padding: 26px 22px 30px;
}

.tnd-board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 18px;
    margin-top: 24px;
}

.tnd-pin {
    position: relative;
    background: var(--tnd-paper);
    border: 1px solid var(--tnd-rule);
    padding: 20px 16px 16px;
    transform: rotate(-0.7deg);
    transition: transform 0.2s ease;
}

.tnd-pin:nth-child(3n + 2) {
    transform: rotate(0.6deg);
}

.tnd-pin:nth-child(3n) {
    transform: rotate(-1.2deg);
}

.tnd-pin:hover {
    transform: rotate(0);
}

.tnd-pin::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tnd-alert);
    border: 1px solid #6d1f13;
    transform: translateX(-5px);
}

.tnd-pin-code {
    font-family: var(--tnd-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--tnd-mute);
    margin-bottom: 2px;
}

.tnd-pin h3 {
    font-size: 26px;
    margin-bottom: 10px;
}

.tnd-pin dl {
    margin: 0;
    display: grid;
    gap: 3px;
    font-family: var(--tnd-mono);
    font-size: 13px;
    border-top: 1px dashed var(--tnd-rule);
    padding-top: 8px;
}

.tnd-pin dl > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.tnd-pin dt {
    color: var(--tnd-mute);
}

.tnd-pin dd {
    margin: 0;
    font-weight: 700;
}

.tnd-pin-note {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tnd-ink-2);
}

.tnd-pin-kg {
    display: inline-block;
    background: var(--tnd-accent);
    color: var(--tnd-ink);
    font-family: var(--tnd-mono);
    font-weight: 700;
    font-size: 12px;
    padding: 2px 6px 1px;
    margin-left: 4px;
}

.tnd-shelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
}

.tnd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tnd-paper);
    border: 1px solid var(--tnd-ink);
    padding: 0 0 14px;
    transition: transform 0.18s ease;
}

.tnd-card:hover {
    transform: translateY(-3px);
}

.tnd-card::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -10px;
    height: 9px;
    background: linear-gradient(var(--tnd-wood), #8f6a34);
    border: 1px solid #6f5227;
    border-top: 0;
}

.tnd-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: var(--tnd-accent);
    color: var(--tnd-ink);
    font-family: var(--tnd-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px 5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 7px 50%);
    padding-left: 12px;
}

.tnd-card-img {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--tnd-rule);
}

.tnd-card-img img {
    width: 100%;
    height: 196px;
    object-fit: contain;
    padding: 12px;
}

.tnd-card-body {
    padding: 14px 14px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.tnd-card-kicker {
    font-family: var(--tnd-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tnd-mute);
    margin-bottom: 6px;
}

.tnd-card h3 {
    font-family: var(--tnd-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.tnd-card h3 a {
    color: var(--tnd-ink);
    text-decoration: none;
}

.tnd-card h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--tnd-accent-2);
}

.tnd-card-note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--tnd-ink-2);
    margin-bottom: 10px;
}

.tnd-fit {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--tnd-mono);
    font-size: 12.5px;
    color: var(--tnd-ink);
    border-top: 1px dashed var(--tnd-rule);
    padding-top: 8px;
    margin-top: auto;
}

.tnd-fit b {
    font-size: 17px;
    color: var(--tnd-green);
}

.tnd-fit-off b {
    color: var(--tnd-alert);
}

.tnd-card-act {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.tnd-card-act .tnd-btn {
    flex: 1 1 auto;
    justify-content: center;
}

.tnd-card-act .tnd-btn-line {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 9px 10px 8px;
    text-transform: none;
    letter-spacing: 0;
}

.tnd-sukat {
    background: var(--tnd-green-2);
    color: var(--tnd-paper);
    padding: 64px 0;
}

.tnd-sukat-in {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 0 var(--tnd-gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: start;
}

.tnd-counter {
    background: var(--tnd-kraft);
    border: 2px solid var(--tnd-ink);
    padding: 22px;
    color: var(--tnd-ink);
    position: relative;
}

.tnd-counter::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--tnd-accent) 0 18px, var(--tnd-green) 18px 36px);
}

.tnd-field {
    display: block;
    margin-bottom: 16px;
}

.tnd-field-l {
    display: block;
    font-family: var(--tnd-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tnd-ink-2);
    margin-bottom: 6px;
}

.tnd-field select,
.tnd-field input {
    width: 100%;
    font-family: var(--tnd-body);
    font-size: 16px;
    color: var(--tnd-ink);
    background: #fff;
    border: 1px solid var(--tnd-ink);
    padding: 11px 12px 10px;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.tnd-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--tnd-ink) 50%), linear-gradient(135deg, var(--tnd-ink) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.tnd-field input:focus,
.tnd-field select:focus {
    outline: 2px solid var(--tnd-accent-2);
    outline-offset: 1px;
}

.tnd-cm {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.tnd-cm .tnd-field {
    margin: 0;
}

.tnd-sukat-note {
    font-family: var(--tnd-mono);
    font-size: 12px;
    color: var(--tnd-ink-2);
    margin-top: 12px;
    line-height: 1.45;
}

.tnd-verdict {
    position: relative;
    min-height: 300px;
    padding-top: 12px;
}

.tnd-verdict-flag {
    display: block;
    background: var(--tnd-paper);
    color: var(--tnd-ink);
    border: 2px solid var(--tnd-paper);
    padding: 18px 20px 16px;
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1), background 0.3s linear;
}

.tnd-verdict-flag.flip {
    transform: rotateX(92deg);
}

.tnd-verdict-word {
    font-family: var(--tnd-display);
    font-size: clamp(38px, 5vw, 56px);
    line-height: 0.9;
    display: block;
}

.tnd-verdict-sub {
    font-family: var(--tnd-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tnd-ink-2);
    margin-top: 6px;
    display: block;
}

.tnd-verdict[data-state='ok'] .tnd-verdict-flag {
    background: var(--tnd-accent);
}

.tnd-verdict[data-state='no'] .tnd-verdict-flag {
    background: #f3c9bf;
}

.tnd-verdict[data-state='no'] .tnd-verdict-word {
    color: var(--tnd-alert);
}

.tnd-verdict-line {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #d8e3d3;
}

.tnd-ticks {
    margin-top: 16px;
    display: grid;
    gap: 6px;
    font-family: var(--tnd-mono);
    font-size: 13px;
}

.tnd-ticks li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px dashed #2f5a48;
    padding-bottom: 5px;
}

.tnd-ticks .tick-ok {
    color: var(--tnd-accent);
}

.tnd-ticks .tick-no {
    color: #f2a08c;
}

.tnd-ruler {
    height: 62px;
    background:
        repeating-linear-gradient(90deg, var(--tnd-ink) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(90deg, var(--tnd-ink) 0 2px, transparent 2px 50px);
    background-size: 100% 26px, 100% 44px;
    background-position: 0 100%, 0 100%;
    background-repeat: repeat-x;
    border-bottom: 3px solid var(--tnd-ink);
    margin: 8px 0 26px;
    position: relative;
}

.tnd-ruler::before,
.tnd-ruler::after {
    content: attr(data-a);
    position: absolute;
    bottom: 48px;
    font-family: var(--tnd-mono);
    font-size: 12px;
    color: var(--tnd-mute);
}

.tnd-ruler::before {
    left: 0;
}

.tnd-ruler::after {
    right: 0;
    content: attr(data-b);
}

.tnd-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.tnd-step {
    border-top: 3px solid var(--tnd-ink);
    padding-top: 14px;
}

.tnd-step-n {
    font-family: var(--tnd-display);
    font-size: 44px;
    line-height: 0.8;
    color: var(--tnd-accent-deep);
    display: block;
    margin-bottom: 8px;
}

.tnd-step h3 {
    font-family: var(--tnd-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.tnd-step p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--tnd-ink-2);
}

.tnd-receipt {
    background: #fff;
    color: var(--tnd-ink);
    border: 1px solid var(--tnd-ink);
    padding: 26px 24px 22px;
    max-width: 560px;
    border-top: 6px double var(--tnd-ink);
    border-bottom: 6px double var(--tnd-ink);
}

.tnd-receipt-h {
    font-family: var(--tnd-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tnd-ink-2);
    margin-bottom: 12px;
}

.tnd-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-family: var(--tnd-mono);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--tnd-rule);
}

.tnd-receipt-row span:last-child {
    font-weight: 700;
}

.tnd-receipt-total {
    border-bottom: 0;
    border-top: 2px solid var(--tnd-ink);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 15px;
}

.tnd-handoff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 40px;
    align-items: start;
}

.tnd-faq {
    display: grid;
    gap: 10px;
    max-width: 880px;
}

.tnd-q {
    border: 1px solid var(--tnd-rule);
    background: var(--tnd-paper);
}

.tnd-q summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 50px 15px 18px;
    font-weight: 700;
    font-size: 16.5px;
    position: relative;
}

.tnd-q summary::-webkit-details-marker {
    display: none;
}

.tnd-q summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 12px;
    font-family: var(--tnd-mono);
    font-size: 22px;
    line-height: 1;
    color: var(--tnd-accent-deep);
}

.tnd-q[open] summary::after {
    content: '−';
}

.tnd-q p {
    padding: 0 18px 18px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--tnd-ink-2);
}

.tnd-legal {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--tnd-rule);
}

.tnd-legal-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--tnd-rule);
}

.tnd-legal-row dt {
    font-family: var(--tnd-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tnd-green);
}

.tnd-legal-row dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tnd-ink-2);
}

.tnd-foot,
footer {
    background: #0f3a2a;
}

.tnd-foot {
    color: #d8e3d3;
    position: relative;
    padding-bottom: 26px;
}

.tnd-foot-awning {
    height: 15px;
    background: repeating-linear-gradient(90deg, var(--tnd-accent) 0 30px, var(--tnd-green) 30px 60px);
}

.tnd-foot-in {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 44px var(--tnd-gut) 30px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr));
    gap: 34px;
}

.tnd-foot-w {
    font-family: var(--tnd-display);
    font-size: 46px;
    line-height: 0.85;
    color: var(--tnd-paper);
    display: block;
    margin-bottom: 12px;
}

.tnd-foot-tag {
    font-size: 15px;
    line-height: 1.55;
    color: #b9cbb3;
    max-width: 36ch;
    margin-bottom: 16px;
}

.tnd-foot-cta {
    display: inline-block;
    font-family: var(--tnd-mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tnd-ink);
    background: var(--tnd-accent);
    padding: 9px 14px 8px;
    text-decoration: none;
}

.tnd-foot-cta:hover {
    background: var(--tnd-paper);
    color: var(--tnd-ink);
}

.tnd-foot-col h2 {
    font-family: var(--tnd-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tnd-accent);
    font-weight: 400;
    margin-bottom: 12px;
}

.tnd-foot-col a {
    display: block;
    color: #d8e3d3;
    text-decoration: none;
    font-size: 15px;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    width: fit-content;
}

.tnd-foot-col a:hover {
    color: var(--tnd-paper);
    border-bottom-color: var(--tnd-accent);
}

.tnd-foot-pub {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 0 var(--tnd-gut) 22px;
}

.tnd-foot-pub-h {
    font-family: var(--tnd-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tnd-accent);
    margin-bottom: 6px;
}

.tnd-foot-pub-b {
    font-size: 14.5px;
    line-height: 1.6;
    color: #b9cbb3;
}

.tnd-foot-pub-b a {
    color: var(--tnd-paper);
}

.tnd-foot-rule {
    max-width: var(--tnd-wrap);
    margin: 0 auto 18px;
    padding: 0 var(--tnd-gut);
    height: 1px;
    background: #2f5a48;
}

.tnd-foot-rule::before {
    content: '';
}

.tnd-foot-base {
    max-width: var(--tnd-wrap);
    margin: 0 auto;
    padding: 0 var(--tnd-gut);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--tnd-mono);
    font-size: 12px;
    color: #94a98e;
    line-height: 1.6;
}

.tnd-added {
    margin-top: 8px;
    font-family: var(--tnd-mono);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tnd-green);
    border-left: 3px solid var(--tnd-accent);
    padding-left: 8px;
}

.tnd-added a {
    color: var(--tnd-accent-deep);
}

.tnd-basket-page {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 40px;
    align-items: start;
}

.tnd-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--tnd-rule);
}

.tnd-line img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--tnd-rule);
    padding: 6px;
}

.tnd-line h3 {
    font-family: var(--tnd-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.tnd-line-p {
    font-family: var(--tnd-mono);
    font-size: 13px;
    color: var(--tnd-mute);
}

.tnd-line-x {
    background: none;
    border: 1px solid var(--tnd-rule);
    color: var(--tnd-mute);
    font-family: var(--tnd-mono);
    font-size: 12px;
    padding: 6px 9px 5px;
    cursor: pointer;
}

.tnd-line-x:hover {
    border-color: var(--tnd-alert);
    color: var(--tnd-alert);
}

.tnd-empty {
    border: 1px dashed var(--tnd-rule);
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tnd-empty p {
    font-size: 16px;
    color: var(--tnd-ink-2);
    margin-bottom: 14px;
}

.tnd-totals {
    background: var(--tnd-kraft);
    border: 2px solid var(--tnd-ink);
    padding: 20px;
}

.tnd-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--tnd-mono);
    font-size: 14px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--tnd-rule);
}

.tnd-totals-row-big {
    font-size: 19px;
    font-weight: 700;
    border-bottom: 0;
    border-top: 2px solid var(--tnd-ink);
    margin-top: 8px;
    padding-top: 10px;
}

.tnd-totals .tnd-btn {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

.tnd-totals-note {
    font-family: var(--tnd-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--tnd-ink-2);
    margin-top: 10px;
}

.tnd-page-head {
    padding: 46px 0 34px;
    border-bottom: 1px solid var(--tnd-rule);
    background: var(--tnd-paper-2);
}

.tnd-page-head h1 {
    font-size: clamp(38px, 5.2vw, 66px);
    margin-bottom: 12px;
    text-wrap: balance;
}

.tnd-prose {
    max-width: 72ch;
}

.tnd-prose h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    margin: 34px 0 12px;
}

.tnd-prose h3 {
    font-family: var(--tnd-body);
    font-size: 19px;
    font-weight: 700;
    margin: 22px 0 8px;
}

.tnd-prose p {
    margin-bottom: 14px;
    color: var(--tnd-ink-2);
}

.tnd-prose ul {
    margin: 0 0 16px;
    padding-left: 0;
}

.tnd-prose ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--tnd-ink-2);
}

.tnd-prose ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--tnd-accent-deep);
}

.tnd-note-box {
    border-left: 6px solid var(--tnd-accent);
    background: var(--tnd-kraft);
    padding: 16px 18px;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 20px 0;
}

.tnd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tnd-table th,
.tnd-table td {
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid var(--tnd-rule);
    vertical-align: top;
}

.tnd-table th {
    font-family: var(--tnd-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tnd-green);
    border-bottom: 2px solid var(--tnd-ink);
}

.tnd-table td.num {
    font-family: var(--tnd-mono);
    white-space: nowrap;
}

.tnd-table tr:hover td {
    background: var(--tnd-paper-2);
}

.tnd-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tnd-tiny {
    font-family: var(--tnd-mono);
    font-size: 12px;
    color: var(--tnd-mute);
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .tnd-hero-in {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .tnd-shelf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tnd-board-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tnd-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tnd-sukat-in,
    .tnd-handoff,
    .tnd-basket-page {
        grid-template-columns: 1fr;
    }

    .tnd-foot-in {
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr));
    }
}

@media (max-width: 820px) {
    .tnd-top-in {
        flex-wrap: wrap;
        gap: 12px 16px;
        padding-bottom: 10px;
    }

    .tnd-brand-w {
        font-size: 36px;
    }

    .tnd-nav {
        order: 3;
        width: 100%;
        gap: 6px 16px;
        border-top: 1px solid var(--tnd-rule-2);
        padding-top: 8px;
    }

    .tnd-nav a {
        font-size: 12.5px;
        letter-spacing: 0.08em;
    }

    .tnd-basket {
        margin-left: auto;
    }

    .tnd-hero {
        padding-top: 30px;
    }

    .tnd-hero h1 {
        font-size: clamp(38px, 9vw, 58px);
    }

    .tnd-sec {
        padding: 44px 0;
    }

    .tnd-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }

    .tnd-card-img img {
        height: 168px;
    }

    .tnd-legal-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tnd-foot-in {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .tnd-foot-brand {
        grid-column: 1 / -1;
    }

    .tnd-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tnd-hang img {
        height: 108px;
    }

    .tnd-hang-tag {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
.tnd-scroll {
    overflow-x: visible;
}

.tnd-table,
.tnd-table tbody,
.tnd-table tr,
.tnd-table td {
    display: block;
    width: 100%;
}

.tnd-table thead {
    display: none;
}

.tnd-table tr {
    border: 1px solid var(--tnd-rule);
    background: var(--tnd-paper-2);
    margin-bottom: 10px;
    padding: 4px 12px;
}

.tnd-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--tnd-rule);
}

.tnd-table td:last-child {
    border-bottom: 0;
}

.tnd-table td::before {
    content: attr(data-l);
    font-family: var(--tnd-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tnd-mute);
    flex: 0 0 auto;
}

.tnd-table td.num {
    white-space: normal;
}
}

@media (max-width: 560px) {
    body {
        font-size: 16px;
    }

    .tnd-hero h1 {
        font-size: 40px;
    }

    .tnd-lede {
        font-size: 16.5px;
    }

    .tnd-stall {
        padding: 0 12px 16px;
    }

    .tnd-stall-sign {
        right: 6px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .tnd-rail::before {
        top: 74px;
    }

    .tnd-hang img {
        height: 84px;
    }

    .tnd-hang-tag b {
        font-size: 12px;
    }

    .tnd-hang-tag {
        padding: 3px 5px 2px;
    }

    .tnd-shelf {
        grid-template-columns: minmax(0, 1fr);
    }

    .tnd-card-img img {
        height: 200px;
    }

    .tnd-board-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tnd-pin {
        transform: none;
    }

    .tnd-pin:nth-child(3n),
    .tnd-pin:nth-child(3n + 2) {
        transform: none;
    }

    .tnd-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .tnd-cm {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .tnd-foot-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .tnd-foot-base {
        flex-direction: column;
    }

    .tnd-line {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .tnd-line img {
        width: 68px;
        height: 68px;
    }

    .tnd-line-x {
        grid-column: 2;
        width: fit-content;
    }

    .tnd-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }



    .tnd-hero-cta .tnd-btn {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}