/*
 * Thimbly – default theme "base" (design system: storefront base theme, .th-store).
 * Loaded after thimbly/tokens.css and thimbly/components.css; this file only adds the page layout.
 * Merchant colours, corners and font arrive as CSS variables from the shop settings (Admin › Design);
 * the components read them through the --ui-* layer, derived colours come from the theme validator.
 */

body.th-store { container-type: inline-size; min-height: 100vh; display: flex; flex-direction: column; }
html { -webkit-text-size-adjust: 100%; }

h1, h2, h3 { margin: 0; }
a { color: var(--ui-primary-text); text-underline-offset: .18em; }
img { height: auto; }

.t-skip { position: absolute; left: var(--space-4); top: -4rem; z-index: 10; padding: var(--space-3) var(--space-4); background: var(--ui-surface); color: var(--ui-text); border-radius: var(--ui-radius); }
.t-skip:focus { top: var(--space-4); }

.th-wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
.th-main { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-16); }
.th-main:focus { outline: none; }
.th-main > * + * { margin-top: var(--space-6); }
.th-h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.005em; }
.th-h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.th-narrow { max-width: 480px; }
.th-medium { max-width: 720px; }

/* Header: brand, navigation, account and cart; the navigation collapses into the menu button below 900 px. */
.th-store .t-header { position: relative; }
.th-store .t-header__brand { display: flex; flex-direction: column; justify-content: center; color: var(--ui-text); text-decoration: none; font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: .02em; margin-right: var(--space-4); }
.th-store .t-header__brand small { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--ui-text-muted); letter-spacing: 0; }
.th-spacer { flex: 1; }
.th-store .t-header[data-open] .t-nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 5; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); box-shadow: var(--shadow-md); }

/* Footer: shop, legal links (mandatory), copyright and the "powered by" note. */
.th-store .t-footer { margin-top: auto; }
.th-store .t-footer ul { list-style: none; margin: 0; padding: 0; }
.th-store .t-footer li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ui-text); }
.th-store .t-footer__base { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); border-top: 1px solid var(--ui-border); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; color: var(--ui-text-muted); }

/* Home and product grid */
.th-hero { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) 0; max-width: 46rem; }
.th-hero p { margin: 0; }
.th-lead { font-size: 18px; line-height: 28px; color: var(--ui-text-muted); }
.th-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.th-highlights li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-4); border-radius: var(--ui-radius); background: var(--ui-sunken); }
.th-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.t-pcard__img img { width: 100%; height: 100%; object-fit: cover; }

/* Product page */
.th-product { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start; }
@container (min-width: 900px) {
    .th-product--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); }
    .th-product__media { position: sticky; top: var(--space-4); }
}
.th-product__media { display: grid; gap: var(--space-2); }
.th-product__media img { width: 100%; border-radius: var(--ui-radius-lg); }
.th-product__info { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; max-width: 720px; }
.th-product__head { display: flex; flex-direction: column; gap: var(--space-2); }
.th-product__head p { margin: 0; }
.th-buy { display: flex; flex-wrap: nowrap; gap: var(--space-3); align-items: center; }
.th-buy .t-btn { flex: 1; }
.t-qty input { min-height: 42px; }
.t-qty input, .t-affix input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
:is(.t-qty, .t-affix) input::-webkit-outer-spin-button, :is(.t-qty, .t-affix) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.th-status { margin: 0; min-height: 24px; }
.th-group-label { margin: var(--space-2) 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-text-muted); }
.th-livebox-total { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The live price box sticks to the bottom on small screens only (design system Configurator). */
@container (min-width: 900px) { .t-livebox { position: static; } }

/* Rich text written by the merchant (product descriptions, legal pages) */
.t-prose h2, .t-prose h3 { margin: var(--space-6) 0 var(--space-2); }
.t-prose table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-4); font-size: 15px; }
.t-prose th, .t-prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.t-prose code { overflow-wrap: anywhere; }
.t-prose img { border-radius: var(--ui-radius); }

/* Cart */
.th-cart { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start; }
@container (min-width: 880px) { .th-cart { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-10); } }
.th-cart .t-cartline:last-child { border-bottom: 1px solid var(--ui-border); }
.t-cartline h3 a { color: inherit; }
.t-cartline__placeholder { width: 100%; height: 100%; background: var(--ui-sunken); }
.t-cartline__img img { width: 100%; height: 100%; object-fit: cover; }
.th-cartline-price { text-align: right; margin-left: auto; }

/* Checkout and order */
/* Notes spanning the summary (VAT, tax-free delivery) wrap; amounts keep their nowrap. The column gap becomes
   padding so that the line above the total runs through. */
.t-summary dl { column-gap: 0; }
.t-summary dd { padding-left: var(--space-4); }
.t-summary dd.is-vat { white-space: normal; text-align: left; padding-left: 0; }
.t-checkout__side { display: flex; flex-direction: column; gap: var(--space-4); }
.t-summary .t-cartline { grid-template-columns: 1fr; padding: var(--space-3) 0; }
.t-summary .t-cartline:first-child { border-top: 0; }
.th-address { font-style: normal; }
.th-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.th-details dt { font-weight: 600; }
.th-details dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* QR code for a bank transfer: always dark on white so that banking apps can read it (also in dark mode) */
.th-payment-qr { display: flex; align-items: center; gap: var(--space-4); margin: 0; }
.th-payment-qr__code { flex: none; width: 132px; padding: 6px; background: #fff; border-radius: var(--radius-sm); line-height: 0; }
.th-payment-qr__code svg { width: 100%; height: auto; }
.th-payment-qr figcaption { font-size: 14px; line-height: 20px; color: var(--text-muted); }
@media (max-width: 30rem) { .th-payment-qr { flex-direction: column; align-items: flex-start; } }
.th-columns { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Withdrawal function: a link with an icon in the footer and on order pages */
.th-withdraw { display: inline-flex; align-items: center; gap: 6px; }

/* Customer account */
.th-account-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; border-bottom: 1px solid var(--ui-border); padding-bottom: var(--space-2); }
.th-account-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); border-radius: var(--ui-radius); color: var(--ui-text); text-decoration: none; font-weight: 500; }
.th-account-nav a:hover { background: var(--ui-sunken); }
.th-account-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ui-primary); border-radius: 0; }
.th-account-nav form { margin: 0 0 0 auto; }
.th-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.th-list > li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.th-form { display: flex; flex-direction: column; gap: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}