/*
Theme Name: TALENTLØS
Author: TALENTLØS
Description: TALENTLØS frontend — static React build served by WordPress, with WooCommerce owning cart/checkout/account.
Version: 2026.06.15
Text Domain: talentloes-15062026
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
*/
html,body{margin:0;min-height:100%;background:#050507}.talentloes-static-build{background:#050507}

/* ---- WooCommerce pages (basket, checkout, account) ----
   The SPA carries its own styling; these pages are rendered by
   WordPress, so they need the palette restating here or they fall
   back to WooCommerce's stock light theme. Kept in sync with
   app/src/styles.css by hand. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&display=swap");

.tl-wc{
  --tl-bg:#050507; --tl-surface:#0D090C; --tl-border:#2A1B1F;
  --tl-brand:#ED1E2E; --tl-brand-hot:#FF3040; --tl-cream:#F5F3EF; --tl-muted:#9A8F92;
  background:var(--tl-bg); color:var(--tl-cream);
  font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.tl-wc *,.tl-wc *::before,.tl-wc *::after{box-sizing:border-box}
.tl-wc h1,.tl-wc h2,.tl-wc h3,.tl-wc .tl-display{
  font-family:"Anton","Bebas Neue",Impact,sans-serif;
  text-transform:uppercase; letter-spacing:.02em; line-height:.95; color:var(--tl-cream);
}
.tl-wc a{color:var(--tl-brand); text-decoration:none}
.tl-wc a:hover{color:var(--tl-brand-hot)}

/* Masthead — mirrors the SPA header, so an account page reads as the
   same site rather than a detour into WordPress. */
.tl-wc-top{
  border-bottom:1px solid var(--tl-border); background:rgba(5,5,7,.96);
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
}
.tl-wc-top-in{
  max-width:1600px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.tl-wc-logo{
  font-family:"Anton",Impact,sans-serif; font-size:26px; letter-spacing:.04em;
  color:var(--tl-brand); text-transform:uppercase; white-space:nowrap;
}
.tl-wc-logo span{font-size:14px; vertical-align:middle; margin-left:5px}
.tl-wc-nav{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.tl-wc-nav a{
  font-family:"Anton",Impact,sans-serif; font-size:17px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tl-cream);
}
.tl-wc-nav a:hover{color:var(--tl-brand)}
.tl-wc-tools{display:flex; align-items:center; gap:10px}
.tl-wc-icon{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; width:36px; border-radius:999px;
  border:1px solid var(--tl-border); color:var(--tl-cream);
}
.tl-wc-icon:hover{border-color:var(--tl-brand); color:var(--tl-brand)}
@media (max-width:900px){ .tl-wc-nav{display:none} }

/* Footer — the SPA's, trimmed to links that work without React. */
.tl-wc-foot{border-top:1px solid var(--tl-border); background:linear-gradient(180deg,#050507,#1F060C)}
.tl-wc-foot-in{
  max-width:1600px; margin:0 auto; padding:56px 20px 64px;
  display:grid; gap:40px; grid-template-columns:1.5fr 1fr 1fr;
}
@media (max-width:900px){ .tl-wc-foot-in{grid-template-columns:1fr} }
.tl-wc-foot h4{
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.25em;
  text-transform:uppercase; color:var(--tl-brand); margin:0 0 14px;
}
.tl-wc-foot-in div a{
  display:block; width:fit-content; margin-bottom:9px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--tl-cream);
}
.tl-wc-foot-in div a:hover{color:var(--tl-brand)}
.tl-wc-foot .tl-wc-logo{display:inline-block; margin-bottom:16px}
.tl-wc-foot-meta{
  margin:0 0 18px; max-width:420px;
  font-size:11px; line-height:1.9; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(245,243,239,.6);
}
.tl-wc-foot-meta a{display:inline!important; margin:0!important; letter-spacing:.16em}
.tl-wc-shell{max-width:1100px; margin:0 auto; padding:40px 20px 80px; min-height:70vh}
/* the account columns float, so contain them */
.tl-wc-shell::after{content:""; display:table; clear:both}

/* Account layout: nav rail beside the panel, stacking on small screens.
   Flex rather than WooCommerce's floats — the stock percentage widths
   plus padding overflow the row and drop the panel below the rail. */
.tl-wc.woocommerce-account .woocommerce{display:flex; align-items:flex-start; gap:44px}
.tl-wc .woocommerce-MyAccount-navigation{flex:0 0 210px}
.tl-wc .woocommerce-MyAccount-content{flex:1 1 auto; min-width:0}
.tl-wc .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0}
.tl-wc .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--tl-border)}
.tl-wc .woocommerce-MyAccount-navigation li a{
  display:block; padding:12px 0; color:var(--tl-cream);
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.tl-wc .woocommerce-MyAccount-navigation li.is-active a,
.tl-wc .woocommerce-MyAccount-navigation li a:hover{color:var(--tl-brand)}
@media (max-width:782px){
  .tl-wc.woocommerce-account .woocommerce{flex-direction:column; gap:26px}
  .tl-wc .woocommerce-MyAccount-navigation{flex:1 1 auto; width:100%}
}

/* Forms */
.tl-wc label{
  display:block; margin-bottom:6px;
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--tl-muted);
}
.tl-wc input[type=text],.tl-wc input[type=email],.tl-wc input[type=tel],
.tl-wc input[type=password],.tl-wc input[type=number],.tl-wc textarea,.tl-wc select,
.tl-wc .select2-container .select2-selection{
  width:100%; box-sizing:border-box; padding:12px 14px;
  background:#161013; color:var(--tl-cream);
  border:1px solid var(--tl-border); border-radius:3px;
  font-family:inherit; font-size:15px;
}
.tl-wc input:focus,.tl-wc textarea:focus,.tl-wc select:focus{
  outline:none; border-color:var(--tl-brand); box-shadow:0 0 0 3px rgba(237,30,46,.25);
}
.tl-wc .form-row{margin-bottom:18px}
.tl-wc .woocommerce-form__label-for-checkbox{
  display:flex; align-items:center; gap:8px; letter-spacing:.06em; color:var(--tl-cream); text-transform:none; font-size:13px;
}
.tl-wc .woocommerce-form__label-for-checkbox input{width:auto}

/* Buttons */
.tl-wc button.button,.tl-wc a.button,.tl-wc input[type=submit],
.tl-wc .woocommerce a.button,.tl-wc .woocommerce button.button{
  display:inline-block; cursor:pointer;
  background:var(--tl-brand); color:var(--tl-cream);
  border:1px solid var(--tl-brand); border-radius:3px;
  padding:13px 26px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.tl-wc button.button:hover,.tl-wc a.button:hover,.tl-wc input[type=submit]:hover,
.tl-wc .woocommerce a.button:hover,.tl-wc .woocommerce button.button:hover{
  background:var(--tl-brand-hot); border-color:var(--tl-brand-hot); color:var(--tl-cream);
}

/* Tables (orders, totals) */
.tl-wc table{width:100%; border-collapse:collapse; margin:18px 0}
.tl-wc table th,.tl-wc table td{
  padding:12px 10px; border-bottom:1px solid var(--tl-border); text-align:left; color:var(--tl-cream);
}
.tl-wc table th{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--tl-muted);
}

/* Notices */
.tl-wc .woocommerce-message,.tl-wc .woocommerce-info,.tl-wc .woocommerce-error{
  list-style:none; margin:0 0 22px; padding:14px 18px;
  background:var(--tl-surface); border-left:3px solid var(--tl-brand); border-radius:2px;
  color:var(--tl-cream); font-size:14px;
}
.tl-wc .woocommerce-error{border-left-color:var(--tl-brand-hot)}