/*
 * TLDsKing Prism V5 presentation overlay.
 * This sheet intentionally loads AFTER the V4 sheets.  No server-side logic,
 * form names, URL patterns, models, inventory or prices are modified.
 * Navigation behavior: icon-only floating rail => expanded labels on hover/focus;
 * menu-toggle => readable mobile/tablet drawer.
 */
:root {
  --tk5-midnight: #20132f;
  --tk5-plum: #4b2e65;
  --tk5-gold: #ddb880;
  --tk5-paper: #fbf8f3;
  --tk5-ease: cubic-bezier(.22,1,.36,1);
}
html { scroll-padding-top: 104px; }
body { background: var(--tk5-paper); }

/* Preserve exact V4 logo, cart, CTA and header dimensions. */
.site-header .header-inner { min-height: 94px; }
.site-header .primary-nav.tk-v5-navigation {
  flex: 1 1 0;
  min-width: 0;
  gap: clamp(9px,1.1vw,18px);
  justify-content: flex-end;
}
.site-header .tk-v5-rail {
  display: flex;
  flex: 0 1 302px;
  width: 302px;
  min-width: 0;
  height: 49px;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  padding: 6px;
  isolation: isolate;
  background: rgba(33,22,44,.97);
  border: 1px solid rgba(216,179,125,.4);
  border-radius: 100px;
  box-shadow: 0 10px 28px rgba(29,16,41,.20), inset 0 1px 0 rgba(255,255,255,.13);
  transition: flex-basis .62s var(--tk5-ease),width .62s var(--tk5-ease),box-shadow .4s ease;
}
.site-header .tk-v5-rail:hover,
.site-header .tk-v5-rail:focus-within,
.site-header .tk-v5-rail.tk5-open {
  flex: 1 1 100%;
  width: 100%;
  box-shadow: 0 12px 35px rgba(29,16,41,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.site-header .tk-v5-rail .tk-v5-link {
  display: inline-flex;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 35px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin: 0;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 50px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  transform: none;
  color: #d9cfe0;
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
  font-family: "Manrope", sans-serif;
  font-size: clamp(10px,.88vw,13px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  transition: color .3s ease,background .3s ease,border-color .3s ease,flex .5s var(--tk5-ease);
}
.site-header .tk-v5-rail .tk-v5-link::before,
.site-header .tk-v5-rail .tk-v5-link::after { content: none !important; display:none !important; }
.site-header .tk-v5-icon { display: inline-flex; flex: 0 0 17px; align-items: center; justify-content: center; }
.site-header .tk-v5-icon svg { display:block; width: 17px; height: 17px; }
.site-header .tk-v5-label {
  display:block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  transition: max-width .57s var(--tk5-ease),opacity .32s ease,margin-left .4s var(--tk5-ease);
}
.site-header .tk-v5-rail:hover .tk-v5-label,
.site-header .tk-v5-rail:focus-within .tk-v5-label,
.site-header .tk-v5-rail.tk5-open .tk-v5-label { max-width: 125px; opacity: 1; margin-left: 6px; }
.site-header .tk-v5-rail .tk-v5-link:hover,
.site-header .tk-v5-rail .tk-v5-link:focus-visible,
.site-header .tk-v5-rail .tk-v5-link.is-current,
.site-header .tk-v5-rail .tk-v5-link[aria-current="page"] {
  color: #f7dcb0;
  -webkit-text-fill-color: currentColor;
  background: rgba(119,86,138,.42);
  border-color: rgba(224,182,124,.47);
  transform: none;
}
.site-header .tk-v5-rail .tk-v5-link:focus-visible { outline: 2px solid #efcf9e; outline-offset:2px; }
.site-header .tk-v5-rail .nav-login { margin-left:0; }
.site-header .tk-v5-logout-form {
  margin:0;
  min-width:0;
  display:flex;
  flex:1 1 0;
  align-items:center;
}
.site-header .tk-v5-logout-form .tk-v5-link { flex: 1 1 0; width:100%; cursor:pointer; }
.site-header .nav-actions { flex-shrink:0; }
.site-header .tk-v5-navigation.tk5-nav-scrolled .tk-v5-rail {
  background: rgba(33,22,44,.88);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}

/* Cinematic landscape. The hero content and real domain search are unchanged. */
.v4-hero {
  background: radial-gradient(ellipse at 82% 13%, rgba(249,213,186,.34),transparent 45%),
    radial-gradient(ellipse at 90% 48%,rgba(169,127,178,.5),transparent 45%),
    linear-gradient(115deg,#1c102e 0%,#38204f 47%,#705078 82%,#b090a2 100%);
}
.v4-horizon {
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  background:url('../img/cinematic-landscape.svg') center bottom / cover no-repeat;
  opacity:.37;
  mix-blend-mode:screen;
}
.v4-hero::before {
  z-index:1;
  background:linear-gradient(90deg,rgba(20,11,35,.42),transparent 76%),
    linear-gradient(0deg,rgba(17,10,30,.55),transparent 40%);
}
.v4-stars { opacity:.35; }
.v4-hero h1 { font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.075em; }
.v4-hero-description { color:#f3e4ee; }
.v4-prism-scene img {
  max-width:600px;
  -webkit-mask-image:radial-gradient(ellipse 69% 67% at 52% 49%,#000 38%,rgba(0,0,0,.88) 65%,transparent 100%);
  mask-image:radial-gradient(ellipse 69% 67% at 52% 49%,#000 38%,rgba(0,0,0,.88) 65%,transparent 100%);
  filter:drop-shadow(0 40px 33px rgba(17,8,32,.43));
}
.v4-search { border-radius:12px; min-height:70px; box-shadow:0 24px 55px rgba(12,5,30,.3); }
.v4-search button { border-radius:9px; background:linear-gradient(115deg,#f2d59f,#bf8c50); color:#2e203a; }
.v4-featurebar { display:flex; align-items:stretch; gap:0; border-radius:12px; background:rgba(31,18,47,.78); margin-top:12px; padding:0 10px; border-color:rgba(240,209,155,.23); }
.v4-feature { flex:1 1 0; min-width:0; min-height:126px; border-radius:8px; padding:18px clamp(9px,1.2vw,21px); transition:flex .55s var(--tk5-ease),background .4s ease,transform .4s var(--tk5-ease); }
.v4-feature:hover,.v4-feature:focus-visible { flex:1.6 1 0; transform:translateY(-4px); background:rgba(156,116,184,.23); }
.v4-feature-icon { background:rgba(244,219,165,.08); border-color:rgba(236,200,142,.42); }
.v4-feature-arrow { opacity:.65; transform:translate(0,0); }

/* Page-to-page cinematic treatment without changing any Django fields or actions. */
.page-hero,.king-service-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 85% 12%,rgba(233,195,173,.22),transparent 48%),linear-gradient(112deg,#231432,#4a2d64 61%,#7b5b87);
}
.page-hero::before,.king-service-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:url('../img/cinematic-landscape.svg') center 52% / cover no-repeat;
  opacity:.36;
  pointer-events:none;
}
.page-hero::after,.king-service-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(20,11,35,.45),transparent 88%);
  pointer-events:none;
}
.page-hero h1,.king-service-hero h1 { font-family:Manrope,sans-serif; letter-spacing:-.065em; }
.king-service-photo-wrap { isolation:isolate; }
.king-service-photo-wrap::before { border-radius:20px; border-color:rgba(246,206,153,.6); transform:rotate(-3deg); }
.king-service-photo-wrap img { border-radius:18px; clip-path:polygon(0 0,100% 0,100% 90%,90% 100%,0 100%); }
.king-service-photo-floating { border:1px solid rgba(220,173,106,.4); }

.king-services,.king-service-content,.catalog-section,.detail-section,.king-service-editorial { background:#fcf9f4; }
.king-plan-section,.king-extensions,.king-process { background:#f4edf3; }
.king-section-header h2,.king-featured-top h2,.king-service-hero h1,.page-hero h1 { text-wrap:balance; }
.king-domain-card,.domain-card,.king-plan-card,.king-service-card,.king-story-panel,.detail-card,.price-card,.king-saved-grid article,.account-panel,.auth-card {
  border-color:rgba(198,165,186,.33);
  box-shadow:0 14px 38px rgba(35,21,50,.07);
}
.king-plan-featured { border-color:#cba36c; background:linear-gradient(150deg,#fff,#fffaf1); }
.king-plan-price { background:#f9f0e1; }
.king-plan-action { background:#352143; }
.king-plan-action:hover { background:#674a79; }
.king-service-card:hover,.king-domain-card:hover,.domain-card:hover,.king-plan-card:hover {
  border-color:rgba(195,151,96,.6);
}
/* Expansion across horizontal feature layouts, with keyboard parity. */
@media (min-width:1001px) {
  .king-service-detail-grid { display:flex; align-items:stretch; gap:16px; }
  .king-service-detail-grid > .king-service-detail {
    flex:1 1 0;
    min-width:0;
    transition:flex .58s var(--tk5-ease),transform .45s var(--tk5-ease),box-shadow .35s ease;
  }
  .king-service-detail-grid > .king-service-detail:hover,
  .king-service-detail-grid > .king-service-detail:focus-within { flex:1.5 1 0; transform:translateY(-6px); }
}
/* V4 authentic data and forms remain; these are presentation-only refinements. */
.auth-page,.account-page { background:var(--tk5-paper); }
.auth-story { background:radial-gradient(circle at 77% 27%,rgba(204,159,193,.43),transparent 48%),linear-gradient(135deg,#261534,#67477b); position:relative; overflow:hidden; }
.auth-story::before { content:""; position:absolute; inset:0; background:url('../img/cinematic-landscape.svg') center center/cover no-repeat; opacity:.17; pointer-events:none; }
.auth-story > * { position:relative; }
.auth-card,.account-panel { border-radius:18px; }
.auth-field input:focus,.catalog-filters input:focus,.catalog-filters select:focus { outline-color:#bd915e; }
.king-saved-cart { background:#fffaf5; border-color:rgba(192,152,105,.35); }
.site-footer.king-footer { background:#21152f; }

/* At laptop/tablet widths, the unchanged V4 hamburger becomes the expand control.
   This avoids clipping six long labels or moving the cart/CTA into a second row. */
@media(max-width:990px) {
  .site-header .menu-toggle { display:flex; }
  .site-header .primary-nav.tk-v5-navigation {
    position:absolute;
    top:calc(100% - 1px);
    left:0;right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px clamp(17px,4vw,45px) 22px;
    background:#fffbf7;
    border:1px solid #eadfe8;
    border-radius:0 0 19px 19px;
    box-shadow:0 19px 40px rgba(24,12,40,.18);
    max-height:calc(100vh - 70px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .site-header .primary-nav.tk-v5-navigation.is-open { display:flex; }
  .site-header .tk-v5-rail,
  .site-header .tk-v5-rail:hover,
  .site-header .tk-v5-rail:focus-within {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;max-width:none;
    height:auto;
    flex:none;
    gap:4px;
    padding:7px;
    background:#2b1d39;
    box-shadow:none;
    border-radius:14px;
  }
  .site-header .tk-v5-rail .tk-v5-link,
  .site-header .tk-v5-rail:hover .tk-v5-link {
    display:flex;
    justify-content:flex-start;
    width:100%;
    min-height:42px;
    height:auto;
    flex:none;
    font-size:14px;
    border-radius:9px;
    padding:10px 13px;
    color:#e6daec;
  }
  .site-header .tk-v5-label,
  .site-header .tk-v5-rail:hover .tk-v5-label,
  .site-header .tk-v5-rail:focus-within .tk-v5-label {
    max-width:none;
    opacity:1;
    margin-left:12px;
    overflow:visible;
  }
  .site-header .tk-v5-rail .tk-v5-icon { flex:0 0 19px; }
  .site-header .tk-v5-logout-form { display:block; width:100%; margin:0; flex:none; }
  .site-header .tk-v5-rail .tk-v5-logout-form .tk-v5-link { font:inherit; color:#e6daec; cursor:pointer; }
  .site-header .tk-v5-navigation .nav-actions { display:flex; margin:12px 0 0; align-items:center;justify-content:flex-end; align-self:stretch; }
  .site-header .tk-v5-navigation .nav-actions .button-nav { margin:0; }
  .v4-featurebar { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:5px; }
  .v4-feature:nth-child(2) { border-right:0; }
  .v4-feature:hover { flex:auto; }
}
@media(max-width:760px) {
  html { scroll-padding-top:75px; }
  .site-header .header-inner { min-height:72px; }
  .v4-horizon { background-position:62% bottom;opacity:.52; }
  .v4-hero-main { padding-top:65px; }
  .v4-search { width:100%; }
  .v4-featurebar { margin-top:5px; }
  .v4-feature { min-height:95px; }
  .king-service-photo-wrap { max-width:100%; }
  .king-service-photo-floating { left:0;bottom:0; }
  .king-service-detail-grid { display:grid; }
  .king-plan-grid,.king-saved-grid,.king-story-panels { grid-template-columns:1fr; }
  .catalog-layout,.detail-layout,.cart-layout,.checkout-layout { min-width:0; }
  .domain-card,.king-plan-card,.price-card,.account-panel { min-width:0; }
}
@media(max-width:420px) {
  .site-header .container { width:calc(100% - 28px); }
  .site-header .brand-symbol { width:39px;height:39px;flex-basis:39px; }
  .site-header .brand-name { font-size:21px; }
  .site-header .tk-v5-rail .tk-v5-link { font-size:13px; }
  .v4-search { gap:3px; padding:5px; }
  .v4-search button { padding:0 10px; font-size:11px; }
  .v4-feature-icon { flex-basis:32px; width:32px; height:32px; }
  .v4-feature { gap:7px; padding:9px 6px; }
  .v4-feature strong { font-size:11px; }
  .v4-feature small { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header .tk-v5-rail,.site-header .tk-v5-link,.site-header .tk-v5-label,
  .v4-feature,.king-service-detail { transition:none!important; }
  .v4-prism-scene img { animation:none!important; }
}