/* ==========================================================================
   Tooted shop landing — ported from tooted-page-top.html
   Uses global theme tokens only (--bg, --navy, --card, --gold, etc.).
   ========================================================================== */

.tp{
  max-width:1180px;
  margin:0 auto;
  padding:60px 28px 100px;
  font-family:"Space Grotesk",sans-serif;
  color:var(--text);
}

.tp .crumbs{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:34px;
}
.tp .crumbs a{ color:var(--muted); text-decoration:none; }
.tp .crumbs a:hover{ color:var(--text); }
.tp .crumbs .current{ color:var(--gold); }

.glow{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(
    var(--glow-shape, ellipse 70% 60%) at var(--glow-x, 60%) var(--glow-y, 45%),
    rgba(76,140,63, var(--glow-strength, .22)) 0%,
    rgba(76,140,63,0) 60%
  );
}

.faded-img{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--img);
  background-size:cover;
  background-position:right center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.95) 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.95) 100%);
  filter:brightness(.85) saturate(1.05);
  transition:transform .8s cubic-bezier(.4,0,.2,1), filter .5s ease;
}
.n-card:hover .faded-img{ transform:scale(1.04); filter:brightness(.95) saturate(1.15); }

.n-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy2); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex;
  color:#eef1f6; /* cards are always dark/image-backed — keep light ink in both themes */
  transition:grid-column .5s cubic-bezier(.4,0,.2,1), grid-row .5s cubic-bezier(.4,0,.2,1),
             min-height .5s cubic-bezier(.4,0,.2,1), transform .35s ease, border-color .3s ease;
}
.n-card .cat-name,
.n-card .n-card__heading,
.n-card .n-card__label{ color:#eef1f6; }
.n-card .cat-desc{ color:rgba(231,236,239,.72); }
.n-card--interactive{ cursor:pointer; }
.n-card--interactive:hover{ border-color:var(--gold); transform:translateY(-3px); }

/* Category cards — gold arrow affordance always visible; border only on hover */
.tp-cats .n-card--interactive > .arrow-circ{
  background:var(--gold);
  border-color:var(--gold);
}
.tp-cats .n-card--interactive > .arrow-circ svg path{
  stroke:var(--navy2);
}

.n-card__label{
  position:absolute; top:0; right:0; z-index:4;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 20px; min-height:52px;
  background:#0c1622;
  border-radius:0 var(--r-lg) 0 16px;
  font-size:14.5px; font-weight:600; line-height:1.2;
  color:#eef1f6;
}
.n-card__label svg{ color:var(--gold); flex-shrink:0; }

.n-card__inner{
  position:relative; z-index:2; padding:32px;
  display:flex; flex-direction:column; height:100%;
}

.tp-hero{
  display:grid; grid-template-columns:1.3fr 1fr; gap:44px;
  align-items:start; margin-bottom:64px;
}
.tp-hero-copy{ align-self:start; }
.tp-hero-copy h1{
  font-size:clamp(28px,4vw,44px); font-weight:700;
  line-height:1.12; margin-bottom:16px;
}
.tp-hero-copy p{
  font-size:15.5px; line-height:1.7; color:var(--muted); max-width:520px;
}

.n-card--cta{
  min-height:0;
  align-self:start;
  --glow-x:75%; --glow-y:55%; --glow-strength:.28; --glow-shape:ellipse 65% 70%;
}
.n-card--cta .n-card__inner{
  justify-content:flex-start;
  padding:28px 28px 26px;
  gap:0;
}
.n-card--cta .n-card__heading{
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  margin:0 0 18px;
  max-width:16ch;
}
.n-card--cta ul{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.n-card--cta li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:#d7e0ea;
}
.n-card--cta li svg{ color:var(--gold); flex-shrink:0; margin-top:2px; }
.n-card--cta .btn{
  display:inline-flex; align-items:center; gap:.65rem; align-self:flex-start;
  background:var(--gold); color:#0c1622; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  transition:transform .2s ease;
}
.n-card--cta .btn .arrow-circ{border-color:rgba(12,22,34,.22)}
.n-card--cta .btn:hover .arrow-circ{background:#0c1622;border-color:#0c1622}
.n-card--cta .btn:hover .arrow-circ svg{transform:rotate(0deg)}
.n-card--cta .btn:hover .arrow-circ svg path{stroke:var(--gold)}
.n-card--cta .btn:hover{ transform:translateY(-2px); }

.tp-section-label{
  font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.tp-cats{
  display:grid; grid-template-columns:1.6fr 1fr;
  grid-template-rows:repeat(3, minmax(0, 130px));
  gap:14px; margin-bottom:56px;
}
.n-card[data-slot="feat"]{
  grid-column:1; grid-row:1 / span 3; min-height:414px;
  --glow-x:80%; --glow-y:50%; --glow-strength:.32; --glow-shape:ellipse 55% 80%;
}
.n-card[data-slot="s1"]{ grid-column:2; grid-row:1; }
.n-card[data-slot="s2"]{ grid-column:2; grid-row:2; }
.n-card[data-slot="s3"]{ grid-column:2; grid-row:3; }

.n-card[data-slot="feat"] .n-card__inner{
  justify-content:flex-end; padding:36px 36px 34px; max-width:65%;
}
.n-card[data-slot="feat"] .cat-name{
  font-size:32px; font-weight:700; line-height:1.1; margin-bottom:12px;
}
.n-card[data-slot="feat"] .cat-desc{
  font-size:14.5px; color:rgba(231,236,239,.72); line-height:1.65;
  max-width:380px;
}

.n-card[data-slot^="s"]{
  --glow-strength:.18; --glow-shape:circle 55%; --glow-x:80%; --glow-y:50%;
}
.n-card[data-slot^="s"] .n-card__inner{
  justify-content:center; padding:0 26px; max-width:65%;
}
.n-card[data-slot^="s"] .cat-name{
  font-size:17px; font-weight:600; line-height:1.25; margin-bottom:2px;
}
.n-card[data-slot^="s"] .cat-desc{ display:none; }

.n-card--interactive > .arrow-circ{
  position:absolute; right:24px; bottom:24px; z-index:5;
  --arrow-circ-size:42px; pointer-events:none;
}
.n-card[data-slot^="s"] > .arrow-circ{
  right:20px; bottom:20px; --arrow-circ-size:36px;
}

.tp-subs{
  margin-bottom:22px;
  scroll-margin-top:108px;
  opacity:.55;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.tp-subs--revealed{
  opacity:1;
  transform:translateY(0);
}
.tp-subs-row{
  position:relative;
  display:flex; flex-wrap:wrap; gap:36px 42px; padding:18px 0 10px;
}
.tp-subs-row::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--gold) 82%, transparent 100%);
  opacity:0; transform:scaleX(.35);
  transition:opacity .45s ease, transform .45s cubic-bezier(.4,0,.2,1);
}
.tp-subs--revealed .tp-subs-row::before{
  opacity:.65;
  transform:scaleX(1);
}
.tp-sub{
  position:relative; background:none; border:none; padding:6px 0 14px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:14.5px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
  transition:color .2s ease, transform .25s ease;
  opacity:0; transform:translateY(6px);
}
.tp-subs--revealed .tp-sub{
  animation:tp-sub-in .45s cubic-bezier(.4,0,.2,1) forwards;
}
.tp-subs--revealed .tp-sub:nth-child(1){ animation-delay:.04s; }
.tp-subs--revealed .tp-sub:nth-child(2){ animation-delay:.1s; }
.tp-subs--revealed .tp-sub:nth-child(3){ animation-delay:.16s; }
.tp-subs--revealed .tp-sub:nth-child(4){ animation-delay:.22s; }
.tp-subs--revealed .tp-sub:nth-child(5){ animation-delay:.28s; }
.tp-subs--revealed .tp-sub:nth-child(6){ animation-delay:.34s; }
@keyframes tp-sub-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.tp-sub:hover{ color:var(--text); transform:translateY(-1px); }
.tp-sub.is-active{ color:var(--text); }
.tp-sub.is-active::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; bottom:0; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(
    circle at center,
    rgba(76,140,63,.55) 0%,
    rgba(76,140,63,.28) 28%,
    rgba(76,140,63,.1) 48%,
    rgba(76,140,63,.03) 65%,
    transparent 80%
  );
  filter:blur(8px);
  opacity:.85;
}
.tp-sub.is-active::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:tp-dot-in .3s ease;
}
@keyframes tp-dot-in{
  from{ transform:translateX(-50%) scale(0); opacity:0; }
  to{ transform:translateX(-50%) scale(1); opacity:1; }
}
.tp-empty-note{ font-size:13.5px; color:var(--muted); padding:8px 0 14px; }

.tp-detail{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy2); border:1px solid var(--line); border-radius:var(--r-lg);
  max-height:0; transition:max-height .5s ease;
  --glow-x:88%; --glow-y:50%; --glow-strength:.22; --glow-shape:ellipse 45% 75%;
}
.tp-detail-inner{
  position:relative; z-index:2; padding:36px 40px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:34px;
}
.tp-detail-inner--no-contact{ grid-template-columns:1fr; }
.tp-detail-inner .eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.tp-detail-inner h3{ font-size:24px; font-weight:700; margin-bottom:14px; }
.tp-detail-inner p.desc{
  font-size:14.5px; line-height:1.7; color:var(--muted);
  margin-bottom:22px; max-width:420px;
}

.tp-tootjad h4,
.tp-catalogues h4{
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.tp-tootja-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.tp-tootja-tag{
  padding:8px 14px; border-radius:999px; background:rgba(12,22,34,.55);
  border:1px solid var(--line); color:var(--text); font-size:13px;
  text-decoration:none; transition:border-color .2s ease, color .2s ease;
  backdrop-filter:blur(4px);
}
.tp-tootja-tag:hover{ border-color:var(--gold); color:var(--gold); }
.tp-tootja-tag--muted{ cursor:default; color:var(--muted); }

.tp-catalogue-list{ display:flex; flex-direction:column; gap:0; margin-bottom:8px; }
.tp-catalogue-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
}
.tp-catalogue-item:first-child{ border-top:none; padding-top:0; }
.tp-catalogue-meta{ min-width:0; }
.tp-catalogue-meta strong{
  display:block; font-size:14px; font-weight:600; line-height:1.35; margin-bottom:3px;
}
.tp-catalogue-meta span{
  display:block; font-size:12.5px; color:var(--muted); line-height:1.45;
}
.tp-catalogue-item .tj-btn-ghost{
  flex-shrink:0; background:transparent; border:1px solid var(--line);
  color:var(--text); font-family:inherit; font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.tp-catalogue-item .tj-btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

.tp-contact{
  background:rgba(12,22,34,.65); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px; display:grid; grid-template-columns:1fr 200px; grid-template-rows:auto auto;
  gap:18px 22px; align-items:start; backdrop-filter:blur(6px);
}
.tp-contact__info{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.tp-contact__avatar{
  grid-column:2; grid-row:1;
  width:200px; height:200px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:48px; overflow:hidden; flex-shrink:0;
}
.tp-contact__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.tp-contact .line{
  display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted);
}
.tp-contact .line svg{ color:var(--gold); flex-shrink:0; }
.tp-contact .line a{ color:var(--text); text-decoration:none; }
.tp-contact .line a:hover{ color:var(--gold); }
.tp-contact .role{
  font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
}
.tp-contact h5{ font-size:15px; font-weight:600; }
.tp-contact__btn{
  grid-column:1 / -1; grid-row:2;
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; background:var(--gold); color:#0c1622; font-weight:600; font-size:13.5px;
  padding:11px 18px; border-radius:999px; text-decoration:none;
  transition:transform .2s ease;
}
.tp-contact__btn:hover{ transform:translateY(-2px); }

@media (max-width:960px){
  .tp-hero{ grid-template-columns:1fr; }
  .tp-cats{ grid-template-columns:1fr; grid-template-rows:auto; }
  .n-card[data-slot="feat"]{ grid-column:1; grid-row:auto; min-height:220px; }
  .n-card[data-slot^="s"]{ grid-column:1; grid-row:auto; min-height:120px; }
  .n-card[data-slot="feat"] .n-card__inner{ max-width:70%; }
  .tp-detail-inner{ grid-template-columns:1fr; }
  .tp-contact{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .tp-contact__info{ grid-column:1; grid-row:1; }
  .tp-contact__avatar{ grid-column:1; grid-row:2; width:160px; height:160px; justify-self:end; }
  .tp-contact__btn{ grid-column:1; grid-row:3; }
}
@media (max-width:560px){
  .tp{ padding:40px 16px 72px; }
  .tp-subs-row{ gap:26px 30px; }
  .n-card__inner{ max-width:80% !important; }
}
@media (prefers-reduced-motion:reduce){
  .n-card, .faded-img, .tp-detail, .tp-sub.is-active::after, .tp-subs, .tp-sub{ transition:none !important; animation:none !important; }
  .tp-subs{ opacity:1; transform:none; }
  .tp-sub{ opacity:1; transform:none; }
  .tp-subs-row::before{ opacity:.65; transform:none; }
}