:root{
  --maroon:#6f1d2d;
  --maroon-2:#8f2639;
  --gold:#caa45a;
  --gold-soft:#ecd8aa;
  --ivory:#fff8ec;
  --cream:#f7ecdc;
  --ink:#2d2118;
  --muted:#6f6258;
  --line:#eadcc9;
  --green:#356859;
  --shadow:0 18px 45px rgba(45,33,24,.12);
  --radius:22px;
}
[data-theme="dark"]{
  --maroon:#e7b3bd;
  --maroon-2:#f0c5ce;
  --gold:#d7b46b;
  --gold-soft:#5b4826;
  --ivory:#171310;
  --cream:#241c17;
  --ink:#f5eadf;
  --muted:#cbbbae;
  --line:#46372e;
  --green:#8ec7b2;
  --shadow:0 18px 45px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, sans-serif;background:linear-gradient(135deg,var(--ivory),#fff 55%,#f3e6d3);color:var(--ink);line-height:1.65}
a{color:var(--maroon);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1180px;margin:0 auto;padding:0 22px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,236,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px}.header-actions{display:flex;align-items:center;gap:10px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:800;text-decoration:none}.brand img{width:48px;height:48px}.brand span{display:block;line-height:1.1}.brand small{display:block;color:var(--muted);font-weight:500;font-size:12px}.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.nav a{font-weight:650;font-size:14px;color:var(--ink);padding:8px 5px;text-decoration:none}.nav a:hover,.nav a.active{color:var(--maroon)}.theme-toggle,.menu-btn{border:1px solid var(--line);background:white;border-radius:12px;padding:10px 12px;color:var(--ink);font-weight:700;cursor:pointer}.theme-toggle{min-width:62px}.menu-btn{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:750;background:var(--maroon);color:white;box-shadow:0 10px 25px rgba(111,29,45,.18);cursor:pointer;text-decoration:none;transition:.2s ease}.btn:hover{transform:translateY(-1px);background:var(--maroon-2);text-decoration:none}.btn.secondary{background:white;color:var(--maroon);border:1px solid var(--line);box-shadow:none}.btn.gold{background:var(--gold);color:#2c1b10}.btn.small{font-size:13px;padding:8px 14px}.btn.ghost{background:transparent;color:var(--maroon);border:1px solid rgba(111,29,45,.25);box-shadow:none}.hero{padding:78px 0 54px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:auto -120px -220px auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--gold-soft),transparent 67%);opacity:.65}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);font-size:12px;font-weight:800}.hero h1,.page-title h1{font-family:Georgia,serif;font-size:clamp(40px,6vw,74px);line-height:1.02;margin:12px 0 18px;color:var(--ink)}.hero p,.page-title p{font-size:18px;color:var(--muted);max-width:720px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.hero-card{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:36px;padding:22px;box-shadow:var(--shadow);position:relative}.hero-card img{width:100%;max-height:590px;object-fit:contain;display:block}.badge-row{display:flex;gap:10px;flex-wrap:wrap}.badge{display:inline-flex;border:1px solid var(--line);background:white;border-radius:999px;padding:7px 12px;font-size:13px;color:var(--muted)}.section{padding:56px 0}.section.compact{padding:30px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}.section-head h2{font-family:Georgia,serif;font-size:34px;margin:0}.section-head p{margin:6px 0 0;color:var(--muted);max-width:750px}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 12px 30px rgba(45,33,24,.07)}.card h3{margin:0 0 8px;font-family:Georgia,serif;font-size:24px}.card p{color:var(--muted);margin-top:8px}.card img.illustration{width:100%;height:230px;object-fit:contain;background:linear-gradient(135deg,#fff,var(--cream));border-radius:18px;border:1px solid var(--line);padding:10px}.feature-card{display:flex;gap:15px}.feature-icon{width:44px;height:44px;border-radius:14px;background:var(--cream);display:grid;place-items:center;color:var(--maroon);font-weight:900}.page-title{padding:46px 0 18px}.crumbs{font-size:13px;color:var(--muted);margin-bottom:12px}.panel{background:white;border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:var(--shadow)}.split{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px}.side-menu{position:sticky;top:96px;align-self:start;background:white;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 12px 25px rgba(45,33,24,.05)}.side-menu a{display:block;padding:10px 12px;border-radius:14px;color:var(--ink);font-weight:650;text-decoration:none}.side-menu a:hover,.side-menu a.active{background:var(--cream);color:var(--maroon)}.timeline{position:relative;padding-left:24px}.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}.step{position:relative;padding:0 0 24px 20px}.step:before{content:"";position:absolute;left:-24px;top:4px;width:16px;height:16px;background:var(--gold);border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px var(--gold)}.step h3{margin:0 0 4px}.form{display:grid;gap:16px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{font-weight:700;color:var(--ink);display:block;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:15px;padding:13px 14px;font:inherit;background:#fff;color:var(--ink)}textarea{min-height:120px;resize:vertical}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.choice{border:1px solid var(--line);background:white;border-radius:18px;padding:16px;cursor:pointer;transition:.2s ease;position:relative}.choice:hover{border-color:var(--gold);transform:translateY(-1px)}.choice input{width:auto;margin-right:8px}.choice strong{display:block}.choice small{display:block;color:var(--muted);margin-top:6px}.progress-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px}.process-tracker{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;align-self:start;box-shadow:0 12px 25px rgba(45,33,24,.05)}.process-tracker h3{margin:0 0 12px;font-size:17px}.tracker-step{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:var(--muted);font-size:13px}.tracker-dot{width:22px;height:22px;border-radius:50%;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;flex:0 0 auto}.tracker-step.active{color:var(--maroon);font-weight:800}.tracker-step.active .tracker-dot{background:var(--maroon);color:white;border-color:var(--maroon)}.tracker-step.done .tracker-dot{background:var(--gold);color:#2c1b10;border-color:var(--gold)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px;background:white}table{border-collapse:collapse;width:100%;min-width:650px}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--cream);font-size:13px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}.notice{border:1px solid #d8c48e;background:#fff7d9;color:#5b4515;border-radius:16px;padding:14px;margin:14px 0}.success{border:1px solid #b7d7c5;background:#eaf8ef;color:#23513d;border-radius:16px;padding:14px;margin:14px 0}.error{border:1px solid #e5b6b6;background:#fff0f0;color:#7d1c1c;border-radius:16px;padding:14px;margin:14px 0}.pill-list{display:flex;gap:9px;flex-wrap:wrap}.pill{padding:7px 11px;border-radius:999px;background:var(--cream);border:1px solid var(--line);font-size:13px}.library-card{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center}.swatch{width:70px;height:70px;border-radius:18px;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 0 0 6px rgba(255,255,255,.25)}.footer{margin-top:60px;background:#211610;color:#f8ead7;padding:44px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}.footer a{color:#f8ead7}.footer p{color:#d6c2ad}.print-label{border:2px solid var(--ink);padding:20px;border-radius:16px;background:white;max-width:420px}.print-label h3{margin-top:0}.canvas-maker{border:1px solid var(--line);border-radius:22px;background:white;padding:16px}#pictureCanvas{width:100%;max-width:760px;border-radius:18px;border:1px solid var(--line);background:white}.summary-list{display:grid;gap:12px}.summary-item{padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal.open{display:flex}.modal-content{background:white;max-width:760px;max-height:80vh;overflow:auto;border-radius:24px;padding:24px;box-shadow:var(--shadow)}.close-modal{float:right}.searchbar{display:flex;gap:10px;align-items:center;margin-bottom:16px}.two-column-text{columns:2 320px;column-gap:34px}.two-column-text p{break-inside:avoid}.color-dot{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:inline-block;vertical-align:middle;margin-right:8px}.checklist{display:grid;gap:10px}.checklist label{background:white;border:1px solid var(--line);border-radius:15px;padding:12px}.checklist input{width:auto;margin-right:8px}.mini-stat{background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:16px}.mini-stat strong{font-size:28px;display:block;color:var(--maroon)}.empty{background:rgba(255,255,255,.75);border:1px dashed var(--gold);border-radius:20px;padding:24px;text-align:center;color:var(--muted)}

.design-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(122, 29, 42, 0.12);
}

.design-form-actions .btn {
  min-width: 180px;
  text-align: center;
}

.design-form-actions .btn.next-action {
  margin-left: auto;
}

@media (max-width: 640px) {
  .design-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .design-form-actions .btn {
    width: 100%;
  }
}

[data-theme="dark"] body{background:linear-gradient(135deg,#171310,#211915 55%,#120f0d)}
[data-theme="dark"] .site-header{background:rgba(23,19,16,.92)}
[data-theme="dark"] .hero-card,
[data-theme="dark"] .card,
[data-theme="dark"] .empty{background:rgba(36,28,23,.88)}
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .menu-btn,
[data-theme="dark"] .btn.secondary,
[data-theme="dark"] .badge,
[data-theme="dark"] .panel,
[data-theme="dark"] .side-menu,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .choice,
[data-theme="dark"] .process-tracker,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .print-label,
[data-theme="dark"] .canvas-maker,
[data-theme="dark"] #pictureCanvas,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .checklist label{background:#241c17;color:var(--ink)}
[data-theme="dark"] .card img.illustration{background:linear-gradient(135deg,#241c17,#171310)}
[data-theme="dark"] .step:before{border-color:#171310}
@media (max-width:980px){.hero-grid,.split,.progress-layout{grid-template-columns:1fr}.process-tracker,.side-menu{position:static}.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr}.nav{display:none;position:absolute;left:16px;right:16px;top:78px;background:white;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}.nav.open{display:grid}.menu-btn{display:block}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4,.choice-grid,.form-row{grid-template-columns:1fr}.hero{padding-top:42px}.section-head{display:block}.brand span{font-size:14px}.hero h1,.page-title h1{font-size:38px}.table-wrap{border-radius:14px}}
@media print{.site-header,.footer,.btn,.process-tracker,.side-menu{display:none!important}body{background:white}.panel,.card{box-shadow:none}}



.tuppottiya-colour-targets {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(122, 29, 42, 0.18);
  border-radius: 14px;
  background: rgba(255, 248, 232, 0.45);
}

.tuppottiya-target-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tuppottiya-target-row .btn {
  flex: 1;
}

.tuppottiya-target-row .btn.active {
  background: #7a1d2a;
  color: #fff;
  border-color: #7a1d2a;
}


/* =========================================================
   TCD v3.3 - Clean SVG-coordinate 2D model preview
   ========================================================= */
.section .container.progress-layout{max-width:1460px;}
.progress-layout{grid-template-columns:minmax(0,1fr) 230px;align-items:start;}
.toolkit-workspace{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(560px,1.08fr);gap:24px;align-items:start;min-width:0;}
.selection-panel{min-width:0;}
.live-model-panel{position:sticky;top:92px;height:calc(100vh - 108px);overflow:hidden;padding:18px;display:flex;flex-direction:column;}
.model-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px;flex:0 0 auto;}
.model-panel-head h2{margin:2px 0 0;font-family:Georgia,serif;font-size:1.65rem;line-height:1.1;}
.small-muted{margin:5px 0 0;color:var(--muted);font-size:.82rem;line-height:1.38;max-width:470px;}
.model-view-switch{display:flex;gap:8px;margin:0 0 10px;flex:0 0 auto;}
.model-view-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:800;cursor:pointer;}
.model-view-btn.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.live-model-grid{display:grid;grid-template-columns:minmax(360px,1fr) 172px;gap:12px;align-items:stretch;min-height:0;flex:1 1 auto;}
.model-canvas-frame{height:100%;min-height:0;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fffdf8,#f7ecdc);box-shadow:inset 0 0 0 10px rgba(255,255,255,.42);padding:10px;display:grid;place-items:center;overflow:hidden;}
.tcd-model-svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible;}
.model-view-group{display:none;}
.model-view-group.active{display:block;}
.model-garment-layer{display:none;pointer-events:none;}
.model-garment-layer.visible{display:block;}
.model-dummy-layer,.model-part-image{pointer-events:none;user-select:none;}
.model-side-tools{position:relative;display:grid;grid-template-rows:auto 1fr;gap:10px;min-height:0;}
.common-colour-library{padding:12px;border-radius:18px;border:1px solid var(--line);background:#fffaf2;box-shadow:0 12px 26px rgba(45,33,24,.08);}
.colour-panel-title{margin-bottom:9px;}
.colour-panel-title strong{display:block;font-family:Georgia,serif;font-size:1.05rem;line-height:1.15;}
.colour-panel-title small{display:block;color:var(--muted);font-size:.75rem;line-height:1.28;margin-top:4px;}
.native-colour-wheel-wrap{display:grid;gap:8px;margin-top:10px;}
.native-colour-label{font-weight:800;font-size:12px;color:var(--muted);}
.native-colour-wheel{width:100%;height:82px;padding:0;border:0;background:transparent;cursor:pointer;}
.native-colour-wheel::-webkit-color-swatch-wrapper{padding:0;}
.native-colour-wheel::-webkit-color-swatch{border:3px solid #fff;border-radius:20px;box-shadow:0 0 0 1px rgba(111,29,45,.25),0 12px 25px rgba(45,33,24,.18);}
.native-colour-wheel::-moz-color-swatch{border:3px solid #fff;border-radius:20px;box-shadow:0 0 0 1px rgba(111,29,45,.25),0 12px 25px rgba(45,33,24,.18);}
.full-width-btn{width:100%;}
.quick-colour-strip{display:grid;grid-template-columns:repeat(4,30px);gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.quick-colour-dot{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(111,29,45,.20),0 8px 18px rgba(45,33,24,.12);cursor:pointer;}
.quick-colour-dot.active{box-shadow:0 0 0 3px var(--maroon),0 8px 18px rgba(45,33,24,.16);}
.preview-info{margin:0;padding:12px 13px;border:1px solid var(--line);border-radius:18px;background:var(--cream);font-size:.82rem;line-height:1.42;overflow:auto;}
.component-block{border:1px solid var(--line);border-radius:22px;padding:18px;margin:0 0 18px;background:rgba(255,255,255,.74);transition:.22s ease;}
.component-block.active-component{border-color:var(--gold);box-shadow:0 14px 34px rgba(111,29,45,.08);}
.component-block-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px;}
.component-block-head h2{margin:2px 0 0;font-family:Georgia,serif;font-size:1.35rem;}
.component-status{font-size:.76rem;font-weight:800;color:var(--maroon);border:1px solid var(--line);background:var(--ivory);border-radius:999px;padding:7px 10px;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;}
.component-choice-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.component-choice{cursor:pointer;}
.component-choice.selected{border-color:var(--maroon);box-shadow:0 8px 22px rgba(111,29,45,.10);background:linear-gradient(135deg,#fff,var(--ivory));}
.part-colour-panel{display:none!important;}
.process-tracker h3{font-family:Georgia,serif;line-height:1.25;}
.tracker-step{position:relative;gap:12px;margin:0;padding:0 0 24px;display:flex;align-items:flex-start;}
.tracker-step:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:rgba(111,29,45,.22);}
.tracker-dot{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--maroon);position:relative;z-index:2;flex:0 0 auto;color:transparent;font-size:0;}
.tracker-label{line-height:1.25;}
.tracker-step.active .tracker-dot{background:var(--maroon);box-shadow:0 0 0 5px rgba(111,29,45,.12);}
.tracker-step.done .tracker-dot{background:var(--gold);border-color:var(--gold);}
@media(max-width:1180px){
  .toolkit-workspace{grid-template-columns:1fr;}
  .live-model-panel{position:static;height:auto;overflow:visible;}
  .live-model-grid{grid-template-columns:minmax(360px,1fr) 172px;min-height:600px;}
  .progress-layout{grid-template-columns:1fr;}
  .process-tracker{position:static;}
}
@media(max-width:760px){
  .live-model-grid{grid-template-columns:1fr;min-height:auto;}
  .model-canvas-frame{height:560px;}
  .quick-colour-strip{grid-template-columns:repeat(6,30px);}
}




/* =========================================================
   FINAL OVERRIDE 04 - Resize current SVG 2D model preview
   Correct structure: .model-canvas-frame + .tcd-model-svg
   ========================================================= */

/* Main live preview card */
.live-model-panel {
  position: sticky !important;
  top: 92px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 14px !important;
  display: block !important;
}

/* Reduce heading area */
.model-panel-head {
  margin-bottom: 6px !important;
}

.model-panel-head h2 {
  font-size: 24px !important;
  line-height: 1.05 !important;
}

.small-muted {
  font-size: 12px !important;
  line-height: 1.25 !important;
  max-width: 430px !important;
  margin-top: 4px !important;
}

.model-view-switch {
  margin-bottom: 6px !important;
}

/* Model and colour wheel layout */
.live-model-grid {
  display: grid !important;
  grid-template-columns: 270px 210px !important;
  gap: 14px !important;
  align-items: start !important;
  min-height: 0 !important;
  flex: none !important;
}

/* This is the actual visible model box in your current version */
.model-canvas-frame {
  width: 245px !important;
  height: 445px !important;
  min-height: 445px !important;
  max-height: 445px !important;
  padding: 6px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

/* This is the actual SVG model */
.tcd-model-svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
}

/* Right colour panel */
.model-side-tools {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

.common-colour-library {
  position: relative !important;
  top: auto !important;
  width: 210px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 10px !important;
}

/* Compact colour wheel */
.colour-panel-title {
  margin-bottom: 6px !important;
}

.colour-panel-title strong {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.colour-panel-title small {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.native-colour-wheel-wrap {
  gap: 6px !important;
  margin-top: 6px !important;
}

.native-colour-wheel {
  height: 52px !important;
  min-height: 52px !important;
}

.full-width-btn {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* Colour dots in 4 columns */
.quick-colour-strip {
  grid-template-columns: repeat(4, 28px) !important;
  gap: 7px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.quick-colour-dot {
  width: 28px !important;
  height: 28px !important;
}

/* Active part information box */
.preview-info {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  max-height: 88px !important;
  overflow: hidden !important;
}

/* Keep process tracker as it is */
.process-tracker {
  position: sticky !important;
  top: 92px !important;
}

@media (max-width: 1180px) {
  .live-model-grid {
    grid-template-columns: 245px 210px !important;
  }
}



/* =========================================================
   Calibration panel and colour-info visibility fix
   ========================================================= */

.model-side-tools {
  max-height: 455px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.common-colour-library {
  overflow: visible !important;
}

.preview-info {
  max-height: none !important;
  overflow: visible !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.native-colour-wheel {
  height: 50px !important;
  min-height: 50px !important;
}

.calibration-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--gold);
  border-radius: 14px;
  background: #fffaf2;
  font-size: 12px;
}

.calibration-panel summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--maroon);
  margin-bottom: 8px;
}

.calibration-panel h4 {
  margin: 10px 0 4px;
  color: var(--maroon);
  font-size: 13px;
}

.calibration-panel label {
  display: grid;
  gap: 3px;
  margin: 6px 0;
  font-size: 11px;
}

.calibration-panel input[type="range"] {
  padding: 0;
  accent-color: var(--maroon);
}

.calibration-note {
  margin: 6px 0 8px;
  color: var(--muted);
  line-height: 1.3;
}

#calibrationOutput {
  margin-top: 8px;
  width: 100%;
  min-height: 120px;
  font-family: Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
}

/* =========================================================
   Theme overrides for toolkit-specific surfaces
   ========================================================= */
[data-theme="dark"] .nav,
[data-theme="dark"] .model-view-btn,
[data-theme="dark"] .tracker-dot{
  background:#241c17;
  color:var(--ink);
}

[data-theme="dark"] .model-canvas-frame{
  background:linear-gradient(180deg,#241c17,#171310);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.04);
}

[data-theme="dark"] .common-colour-library,
[data-theme="dark"] .component-block,
[data-theme="dark"] .calibration-panel{
  background:#241c17;
}

[data-theme="dark"] .component-choice.selected{
  background:linear-gradient(135deg,#241c17,#171310);
}


/* =========================================================
   Client Landing Page Layout
   Based on Client Sketch - Page 01
   ========================================================= */

.client-landing-page {
  min-height: calc(100vh - 78px);
  padding: 28px 22px;
}

.client-landing-frame {
  width: min(1420px, 100%);
  min-height: calc(100vh - 134px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
}

.client-landing-left {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  align-items: center;
  padding: 56px 56px 54px;
  text-align: center;
  background:
    radial-gradient(circle at 52% 44%, rgba(202, 164, 90, .16), transparent 32%),
    linear-gradient(135deg, rgba(255, 248, 236, .96), rgba(255, 255, 255, .86));
}

.client-landing-left h1 {
  justify-self: start;
  width: 100%;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.1;
  color: var(--ink);
  text-align: left;
}

.client-landing-logo {
  display: grid;
  place-items: center;
  width: min(260px, 38vw);
  margin: 10px auto 4px;
}

.client-landing-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(45, 33, 24, .16));
}

.client-landing-tagline {
  margin: 8px 0 34px;
  font-family: Georgia, serif;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--maroon);
}

.client-landing-btn {
  min-width: 220px;
  padding: 14px 32px;
  font-size: 18px;
}

.client-landing-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  padding: 42px 28px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 248, 236, .98), rgba(247, 236, 220, .88));
}

.client-auth-block {
  display: grid;
  gap: 16px;
}

.client-auth-block h2 {
  margin: 0 0 4px;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
}

.client-form-line {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.client-form-line label {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.client-form-line input,
.client-form-line select {
  height: 46px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, .92);
  padding: 8px 12px;
}

.client-customer-type {
  margin-top: 4px;
  padding-left: 108px;
}

.client-customer-type p {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.client-customer-type label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 500;
}

.client-customer-type input {
  width: auto;
}

.client-terms-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}

.client-terms-line input {
  width: auto;
}

.client-small-btn {
  justify-self: start;
  min-width: 120px;
  padding: 10px 20px;
}

.client-user-name {
  margin: 0;
  font-size: 18px;
  color: var(--muted);
}

/* Use the new gold logo properly in the existing header */
.brand img {
  width: 42px !important;
  height: 62px !important;
  object-fit: contain !important;
}

.brand {
  align-items: center;
}

/* Dark theme support */
[data-theme="dark"] .client-landing-frame {
  background: rgba(36, 28, 23, .86);
}

[data-theme="dark"] .client-landing-left {
  background:
    radial-gradient(circle at 52% 44%, rgba(215, 180, 107, .16), transparent 32%),
    linear-gradient(135deg, rgba(36, 28, 23, .96), rgba(23, 19, 16, .88));
}

[data-theme="dark"] .client-landing-right {
  background:
    linear-gradient(180deg, rgba(36, 28, 23, .98), rgba(23, 19, 16, .92));
}

[data-theme="dark"] .client-form-line input,
[data-theme="dark"] .client-form-line select {
  border-color: var(--line);
  background: rgba(23, 19, 16, .92);
}

/* Responsive version */
@media (max-width: 980px) {
  .client-landing-frame {
    grid-template-columns: 1fr;
  }

  .client-landing-right {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .client-landing-left h1 {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .client-landing-page {
    padding: 18px 14px;
  }

  .client-landing-frame {
    border-radius: 22px;
  }

  .client-landing-left {
    padding: 34px 22px 36px;
  }

  .client-landing-logo {
    width: min(210px, 70vw);
  }

  .client-form-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .client-form-line label {
    font-size: 18px;
  }

  .client-customer-type {
    padding-left: 0;
  }

  .client-landing-right {
    padding: 32px 22px;
  }
}




/* =========================================================
   User Dashboard - Dual Path Layout
   Based on Client Sketch - Page 02
   ========================================================= */

.dual-dashboard-page {
  padding: 28px 22px 34px;
  min-height: calc(100vh - 78px);
}

.dual-dashboard-shell {
  width: min(1420px, 100%);
  min-height: calc(100vh - 138px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
}

.dual-dashboard-main {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 36px 34px 22px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(123, 31, 58, .22) calc(50% - .5px), rgba(123, 31, 58, .22) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(135deg, rgba(255, 248, 236, .95), rgba(255, 255, 255, .86));
}

.dual-dashboard-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  width: min(720px, 72%);
  margin: 0 auto 26px;
}

.dual-dashboard-title span {
  height: 1px;
  background: var(--line);
}

.dual-dashboard-title h1 {
  margin: 0;
  padding: 15px 60px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, .88);
  font-family: Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 14px 26px rgba(45, 33, 24, .08);
}

.dual-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 520px;
}

.dual-path-card {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  padding: 26px 36px 34px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, background .18s ease;
}

.dual-path-card:hover {
  transform: translateY(-3px);
  background: rgba(202, 164, 90, .08);
}

.dual-path-image {
  width: 100%;
  height: 430px;
  display: grid;
  place-items: center;
}

.dual-path-image img {
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(45, 33, 24, .14));
}

.dual-path-button {
  width: min(420px, 92%);
  margin-top: 20px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 14px 26px rgba(45, 33, 24, .08);
}

.dual-path-card:hover .dual-path-button {
  border-color: var(--maroon);
  color: var(--maroon);
}

.dual-welcome-note {
  margin: 18px auto 18px;
  width: min(980px, 100%);
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  text-align: center;
}

.dual-welcome-note h2 {
  margin: 0 0 8px;
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--ink);
}

.dual-welcome-note p {
  margin: 0 auto 18px;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.7;
}

.dual-user-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.dual-user-stats div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 248, 236, .9);
}

.dual-user-stats strong {
  display: block;
  margin-bottom: 4px;
  font-family: Georgia, serif;
  font-size: 23px;
  color: var(--maroon);
}

.dual-user-stats span {
  font-size: 14px;
  color: var(--muted);
}

.dual-dashboard-footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.dual-dashboard-footer-links a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(45, 33, 24, .07);
}

.dual-dashboard-footer-links a:hover {
  color: var(--maroon);
  border-color: var(--maroon);
}

.dual-dashboard-side {
  padding: 28px 16px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 248, 236, .98), rgba(247, 236, 220, .88));
}

.dual-profile-box {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.dual-profile-icon {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 32%, transparent 0 13px, var(--ink) 14px 16px, transparent 17px),
    radial-gradient(circle at 50% 76%, transparent 0 24px, var(--ink) 25px 27px, transparent 28px);
  background-color: rgba(255, 255, 255, .72);
}

.dual-profile-box h3 {
  margin: 4px 0 0;
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--ink);
}

.dual-profile-box p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.dual-profile-box .btn {
  width: 100%;
  justify-content: center;
}

/* Dark theme support */
[data-theme="dark"] .dual-dashboard-shell {
  background: rgba(36, 28, 23, .86);
}

[data-theme="dark"] .dual-dashboard-main {
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(215, 180, 107, .24) calc(50% - .5px), rgba(215, 180, 107, .24) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(135deg, rgba(36, 28, 23, .96), rgba(23, 19, 16, .88));
}

[data-theme="dark"] .dual-dashboard-title h1,
[data-theme="dark"] .dual-path-button,
[data-theme="dark"] .dual-welcome-note,
[data-theme="dark"] .dual-dashboard-footer-links a,
[data-theme="dark"] .dual-profile-icon {
  background: rgba(36, 28, 23, .9);
}

[data-theme="dark"] .dual-dashboard-side {
  background:
    linear-gradient(180deg, rgba(36, 28, 23, .98), rgba(23, 19, 16, .92));
}

[data-theme="dark"] .dual-user-stats div {
  background: rgba(23, 19, 16, .82);
}

/* Responsive dashboard */
@media (max-width: 1100px) {
  .dual-dashboard-shell {
    grid-template-columns: 1fr;
  }

  .dual-dashboard-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .dual-profile-box {
    position: static;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    text-align: left;
  }

  .dual-profile-box .btn {
    width: auto;
  }
}

@media (max-width: 820px) {
  .dual-dashboard-main {
    background:
      linear-gradient(135deg, rgba(255, 248, 236, .95), rgba(255, 255, 255, .86));
  }

  .dual-path-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .dual-path-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .62);
  }

  .dual-path-image {
    height: 360px;
  }

  .dual-dashboard-title {
    width: 100%;
  }

  .dual-dashboard-title h1 {
    padding: 14px 30px;
  }

  .dual-user-stats,
  .dual-dashboard-footer-links {
    grid-template-columns: 1fr;
  }

  .dual-profile-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .dual-dashboard-page {
    padding: 18px 14px 26px;
  }

  .dual-dashboard-main {
    padding: 28px 18px 20px;
  }

  .dual-path-card {
    padding: 22px 18px 26px;
  }

  .dual-path-image {
    height: 300px;
  }

  .dual-dashboard-footer-links {
    gap: 14px;
  }
}


/* =========================================================
   Traditional Practice Pages
   Client Sketch Pages 03, 04, 05, 06
   ========================================================= */

.traditional-choice-page,
.traditional-detail-page {
  min-height: calc(100vh - 78px);
  padding: 26px 22px 34px;
}

.traditional-choice-shell,
.traditional-detail-shell {
  width: min(1420px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.traditional-choice-shell {
  padding: 34px 34px 40px;
}

.traditional-choice-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 46px;
}

.traditional-choice-heading h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  color: var(--ink);
}

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

.traditional-simple-tabs span {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, .88);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.traditional-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
  width: min(960px, 100%);
  margin: 0 auto 42px;
}

.traditional-choice-card {
  display: grid;
  gap: 18px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.traditional-choice-card:hover {
  text-decoration: none;
}

.traditional-choice-image {
  height: 380px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
}

.traditional-choice-image img {
  max-width: 92%;
  max-height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(45, 33, 24, .12));
}

.traditional-choice-card h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 800;
}

.traditional-choice-card:hover h2 {
  color: var(--maroon);
}

.traditional-video-box {
  width: min(820px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  padding: 16px;
  text-align: center;
}

.traditional-video-box iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.traditional-video-box p {
  margin: 12px 0 0;
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--ink);
}

/* Detail page */

.traditional-detail-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}

.traditional-left-panel {
  padding: 32px 22px;
  border-right: 1px solid var(--line);
  background: rgba(255, 248, 236, .78);
}

.traditional-costume-select label {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 800;
}

.traditional-costume-select select {
  margin-top: 8px;
  border-radius: 0;
}

.traditional-components-box {
  margin-top: 48px;
}

.traditional-components-box h2 {
  margin: 0 0 22px;
  font-family: Georgia, serif;
  font-size: 24px;
}

.traditional-components-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.traditional-components-box li {
  margin: 3px 0;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
}

.traditional-content-panel {
  padding: 28px 34px 40px;
}

.traditional-section-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}

.traditional-section-tabs a {
  display: block;
  padding: 14px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.traditional-section-tabs a:hover,
.traditional-section-tabs a.active {
  border-color: var(--maroon);
  color: var(--maroon);
  background: rgba(255, 248, 236, .98);
}

.traditional-info-section h1 {
  margin: 0 0 30px;
  font-family: Georgia, serif;
  font-size: 34px;
  color: var(--ink);
}

.traditional-flow-block {
  display: grid;
  gap: 26px;
  margin-bottom: 28px;
}

.traditional-flow-block.bottom {
  margin-top: 38px;
}

.flow-line {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 14px;
}

.flow-line span {
  height: 1px;
  background: var(--ink);
}

.flow-line p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 22px;
}

.eligibility-layout {
  display: grid;
  place-items: center;
  margin: 22px 0 38px;
}

.eligibility-tree {
  display: grid;
  grid-template-columns: 220px 250px;
  gap: 32px;
  font-family: Georgia, serif;
  font-size: 22px;
}

.eligibility-tree p {
  margin: 10px 0;
  position: relative;
}

.eligibility-tree p::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  margin-right: 10px;
  vertical-align: middle;
}

.rank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  margin-top: 24px;
}

.rank-grid h3 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 23px;
}

.rank-grid p {
  margin: 8px 0;
  font-family: Georgia, serif;
  font-size: 20px;
}

.image-reference {
  margin-left: 80px;
  font-family: Georgia, serif;
  font-size: 20px;
}

/* Sartorial */

.sartorial-tree {
  display: grid;
  gap: 34px;
}

.sartorial-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.sartorial-row h3 {
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .88);
  font-family: Georgia, serif;
  font-size: 22px;
  text-align: center;
}

.sartorial-row p {
  margin: 8px 0;
  font-family: Georgia, serif;
  font-size: 20px;
}

.jewellery-list p {
  line-height: 1.55;
}

.accessory-check {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 50px;
  margin-top: 20px;
}

/* Costumery */

.costumery-layout {
  display: grid;
  grid-template-columns: 1fr 1fr .86fr 1.1fr;
  gap: 0;
  border: 1px solid var(--line);
}

.costumery-library,
.costumery-tailoring {
  min-height: 230px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.costumery-layout > *:nth-child(4n) {
  border-right: 0;
}

.costumery-library h3,
.costumery-tailoring h3,
.maintenance-box h3 {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: 22px;
  text-align: center;
}

.small-tile-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.small-tile-row span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}

.costumery-note {
  width: fit-content;
  min-width: 190px;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
}

.costumery-note p {
  margin: 5px 0;
  font-family: Georgia, serif;
  font-size: 19px;
}

.costumery-tailoring {
  grid-row: span 2;
}

.costumery-tailoring ol {
  margin: 0 0 22px;
  padding-left: 24px;
  font-family: Georgia, serif;
  font-size: 18px;
}

.costumery-tailoring li {
  margin-bottom: 20px;
}

.maintenance-box {
  margin: 22px -22px -22px;
  padding: 22px;
  border-top: 1px solid var(--line);
}

.maintenance-box p {
  margin: 14px 0;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 18px;
}

/* Enshrinement */

.enshrinement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.enshrinement-card {
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
}

.enshrinement-card h3 {
  margin: 0 0 14px;
  font-family: Georgia, serif;
  font-size: 24px;
}

.enshrinement-card p {
  font-family: Georgia, serif;
  font-size: 19px;
}

/* Image placeholders and hover popup */

.traditional-image-placeholder {
  width: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  background: rgba(255, 248, 236, .75);
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 18px;
  text-align: center;
}

.traditional-image-placeholder.small {
  min-height: 90px;
  width: 180px;
  margin: 0 auto;
}

.traditional-hover-item {
  position: relative;
  display: inline-block;
  color: var(--maroon);
  font-weight: 800;
  cursor: pointer;
  border-bottom: 1px dotted var(--maroon);
}

.traditional-hover-popup {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  display: none;
  width: 230px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ivory);
  box-shadow: var(--shadow);
  z-index: 20;
}

.traditional-hover-item:hover .traditional-hover-popup,
.traditional-hover-item:focus .traditional-hover-popup {
  display: block;
}

.traditional-popup-placeholder {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Dark theme support */

[data-theme="dark"] .traditional-choice-shell,
[data-theme="dark"] .traditional-detail-shell,
[data-theme="dark"] .traditional-simple-tabs span,
[data-theme="dark"] .traditional-section-tabs a,
[data-theme="dark"] .sartorial-row h3,
[data-theme="dark"] .costumery-note,
[data-theme="dark"] .enshrinement-card {
  background: rgba(36, 28, 23, .92);
}

[data-theme="dark"] .traditional-left-panel {
  background: rgba(23, 19, 16, .88);
}

[data-theme="dark"] .traditional-choice-image,
[data-theme="dark"] .traditional-video-box,
[data-theme="dark"] .small-tile-row span {
  background: rgba(36, 28, 23, .84);
}

/* Responsive */

@media (max-width: 1100px) {
  .traditional-detail-shell {
    grid-template-columns: 1fr;
  }

  .traditional-left-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .traditional-components-box ul {
    columns: 2;
  }

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

  .costumery-layout > * {
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 820px) {
  .traditional-choice-heading {
    grid-template-columns: 1fr;
  }

  .traditional-simple-tabs,
  .traditional-section-tabs,
  .traditional-choice-grid,
  .rank-grid,
  .enshrinement-grid {
    grid-template-columns: 1fr;
  }

  .traditional-choice-image {
    height: 320px;
  }

  .sartorial-row,
  .accessory-check {
    grid-template-columns: 1fr;
  }

  .eligibility-tree {
    grid-template-columns: 1fr;
  }

  .costumery-layout {
    grid-template-columns: 1fr;
  }

  .traditional-components-box ul {
    columns: 1;
  }
}

/* =========================================================
   Traditional Practice Navigation Toolbar
   Back / Main / Forward Buttons
   ========================================================= */

.traditional-page-toolbar {
  width: min(1420px, 100%);
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.traditional-page-toolbar button,
.traditional-page-toolbar a {
  min-width: 54px;
  height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(45, 33, 24, .07);
}

.traditional-page-toolbar button {
  font-size: 25px;
  line-height: 1;
}

.traditional-page-toolbar button:hover,
.traditional-page-toolbar a:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  background: rgba(255, 248, 236, .98);
}

/* Selection page title should not reserve space for removed section buttons */
.traditional-choice-heading {
  grid-template-columns: 1fr !important;
  margin-bottom: 42px;
}

.traditional-choice-heading h1 {
  text-align: left;
}

/* Dark theme */
[data-theme="dark"] .traditional-page-toolbar button,
[data-theme="dark"] .traditional-page-toolbar a {
  background: rgba(36, 28, 23, .92);
}

@media (max-width: 640px) {
  .traditional-page-toolbar {
    gap: 8px;
    flex-wrap: wrap;
  }

  .traditional-page-toolbar button,
  .traditional-page-toolbar a {
    height: 42px;
    padding: 0 16px;
    font-size: 15px;
  }

  .traditional-page-toolbar button {
    font-size: 22px;
  }
}



.selected-motif-card {
  border: 1px solid rgba(122, 29, 42, 0.18);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 248, 232, 0.48);
  margin-bottom: 22px;
}

.selected-motif-card h3 {
  margin: 6px 0 8px;
}

.selected-motif-card p {
  margin: 0;
  color: #5f5650;
  line-height: 1.55;
}

.motif-colour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.motif-colour-card {
  display: block;
  border: 1px solid rgba(122, 29, 42, 0.18);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  background: #fffaf2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.motif-colour-card input {
  margin-right: 8px;
}

.motif-colour-card.selected {
  border-color: #7a1d2a;
  box-shadow: 0 10px 28px rgba(122, 29, 42, 0.14);
  transform: translateY(-1px);
}

.model-motif-image {
  pointer-events: none;
}



@media (max-width: 640px) {
  .motif-colour-grid {
    grid-template-columns: 1fr;
  }
}


.live-model-panel.motif-preview-mode .live-model-grid {
  grid-template-columns: 1fr;
}

.live-model-panel.motif-preview-mode .model-canvas-frame {
  max-width: 460px;
  margin: 0 auto;
}



/* =========================================================
   Design Toolkit - Costume Type Image Selection Cards
   ========================================================= */

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

.costume-type-card {
  position: relative;
  display: grid;
  grid-template-rows: 300px auto;
  gap: 14px;
  padding: 18px;
  min-height: 420px;
  align-items: stretch;
}

.costume-type-card input[type="radio"] {
  position: absolute;
  top: 18px;
  left: 18px;
  width: auto;
  z-index: 2;
}

.costume-type-card:has(input[type="radio"]:checked) {
  border-color: var(--maroon);
  box-shadow: 0 14px 32px rgba(111, 29, 45, 0.14);
  background: linear-gradient(135deg, #fff, var(--ivory));
}

.costume-type-image {
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.costume-type-image img {
  width: 100%;
  height: 100%;
  max-height: 270px;
  object-fit: contain;
  display: block;
}

.costume-type-text {
  padding: 0 4px 4px;
}

.costume-type-text strong {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.costume-type-text small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

[data-theme="dark"] .costume-type-card:has(input[type="radio"]:checked) {
  background: linear-gradient(135deg, #241c17, #171310);
}

[data-theme="dark"] .costume-type-image {
  background: rgba(36, 28, 23, 0.86);
}

@media (max-width: 760px) {
  .costume-type-grid {
    grid-template-columns: 1fr;
  }

  .costume-type-card {
    grid-template-rows: 280px auto;
    min-height: 390px;
  }
}


/* =========================================================
   Dark mode fix - Motif colour variation cards only
   ========================================================= */

[data-theme="dark"] .motif-colour-card {
  background: #241c17 !important;
  color: var(--ink) !important;
  border-color: rgba(240, 197, 206, 0.35) !important;
}

[data-theme="dark"] .motif-colour-card strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .motif-colour-card input[type="radio"] {
  accent-color: var(--maroon);
}

[data-theme="dark"] .motif-colour-card.selected {
  background: linear-gradient(135deg, #2f221c, #1b1512) !important;
  border-color: var(--maroon) !important;
  box-shadow: 0 10px 28px rgba(240, 197, 206, 0.16) !important;
}

[data-theme="dark"] .selected-motif-card {
  background: rgba(36, 28, 23, 0.92) !important;
  color: var(--ink) !important;
  border-color: rgba(240, 197, 206, 0.25) !important;
}

[data-theme="dark"] .selected-motif-card p {
  color: var(--muted) !important;
}

/* =========================================================
   Motif page loading improvement
   Hide model until saved silhouette colours are synchronised
   ========================================================= */

.live-model-panel.preview-needs-colour-sync:not(.preview-colours-ready) .tcd-model-svg {
  opacity: 0;
}

.live-model-panel.preview-colours-ready .tcd-model-svg {
  opacity: 1;
  transition: opacity 0.18s ease;
}


/* =========================================================
   Motif colour switching performance fix
   Load all motif colours once and toggle visibility
   ========================================================= */

.model-motif-image[data-motif-colour-layer] {
  display: none;
}

.model-motif-image[data-motif-colour-layer].active-motif-colour {
  display: block;
}


/* =========================================================
   FINAL COMPACT HEADER + FOOTER OVERRIDE
   Keep same colour theme, reduce height, modern glass look
   ========================================================= */

/* ---------- Compact modern header ---------- */

.site-header {
  padding: 8px 0 !important;
  border-bottom: 0 !important;
  background: rgba(255, 248, 236, 0.58) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.site-header .container.header-inner {
  width: min(1360px, calc(100% - 42px)) !important;
  max-width: 1360px !important;
  min-height: 58px !important;
  padding: 7px 16px !important;
  border: 1px solid rgba(234, 220, 201, 0.65);
  border-radius: 22px !important;
  background: rgba(255, 248, 236, 0.72) !important;
  box-shadow:
    0 12px 28px rgba(45, 33, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Brand area */
.site-header .brand {
  gap: 10px !important;
  padding: 2px 6px !important;
  border-radius: 16px;
  flex: 0 0 auto;
}

.site-header .brand img {
  width: 34px !important;
  height: 50px !important;
}

.site-header .brand span {
  font-size: 15px !important;
  line-height: 1.02 !important;
}

.site-header .brand small {
  font-size: 11px !important;
}

/* Navigation: prevent wrapping into two rows */
.site-header .nav {
  gap: 6px !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  min-width: 0;
}

.site-header .nav a {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.site-header .nav a:hover,
.site-header .nav a.active {
  background: rgba(111, 29, 45, 0.09) !important;
  color: var(--maroon) !important;
  text-decoration: none !important;
}

/* Modern compact theme toggle */
.theme-toggle-modern {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(234, 220, 201, 0.7) !important;
  box-shadow:
    0 8px 20px rgba(45, 33, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

.theme-toggle-modern:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 29, 45, 0.45) !important;
}

.theme-toggle-icon {
  font-size: 18px !important;
}

.theme-toggle-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Dark-mode glass header */
[data-theme="dark"] .site-header {
  background: rgba(23, 19, 16, 0.54) !important;
}

[data-theme="dark"] .site-header .container.header-inner {
  background: rgba(36, 28, 23, 0.62) !important;
  border-color: rgba(248, 234, 215, 0.13) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .site-header .nav a:hover,
[data-theme="dark"] .site-header .nav a.active {
  background: rgba(240, 197, 206, 0.10) !important;
}

[data-theme="dark"] .theme-toggle-modern {
  background: rgba(36, 28, 23, 0.72) !important;
  border-color: rgba(248, 234, 215, 0.16) !important;
}

/* Mobile menu remains usable */
@media (max-width: 980px) {
  .site-header .nav {
    flex-wrap: wrap !important;
    top: 82px !important;
  }

  .site-header .container.header-inner {
    width: min(100% - 28px, 1360px) !important;
  }
}


/* ---------- Compact modern footer ---------- */

.site-footer-enhanced {
  margin-top: 34px !important;
  padding: 22px 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(202, 164, 90, 0.11), transparent 24%),
    linear-gradient(135deg, #211610, #17110d) !important;
}

.site-footer-enhanced .footer-inner {
  display: grid !important;
  grid-template-columns: 1.15fr 0.6fr 1.65fr !important;
  gap: 14px !important;
  align-items: start !important;
}

.site-footer-enhanced .footer-brand-card,
.site-footer-enhanced .footer-card {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  min-height: auto !important;
  height: auto !important;
  background: rgba(255, 248, 236, 0.035) !important;
  border: 1px solid rgba(248, 234, 215, 0.12) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13) !important;
}

.site-footer-enhanced .footer-brand-card h3,
.site-footer-enhanced .footer-card h4 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.site-footer-enhanced .footer-brand-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.site-footer-enhanced .footer-link-list li {
  margin: 5px 0 !important;
}

.site-footer-enhanced .footer-link-list a {
  font-size: 14px !important;
}

/* Contact list in two compact columns */
.site-footer-enhanced .footer-contact-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
}

.site-footer-enhanced .footer-contact-list li {
  padding-bottom: 7px !important;
  border-bottom: 1px solid rgba(248, 234, 215, 0.09) !important;
}

.site-footer-enhanced .footer-contact-list strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.site-footer-enhanced .footer-contact-list a {
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin-top: 1px !important;
}

/* Responsive footer */
@media (max-width: 980px) {
  .site-footer-enhanced .footer-inner {
    grid-template-columns: 1fr !important;
  }

  .site-footer-enhanced .footer-contact-list {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FINAL FIX - Remove dark-mode rectangle behind desktop nav
   ========================================================= */

@media (min-width: 981px) {
  [data-theme="dark"] .site-header .nav {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  [data-theme="dark"] .site-header .nav a {
    background: transparent;
  }

  [data-theme="dark"] .site-header .nav a:hover,
  [data-theme="dark"] .site-header .nav a.active {
    background: rgba(240, 197, 206, 0.10) !important;
  }
}


/* =========================================================
   Footer copyright strip
   ========================================================= */

.footer-copyright {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(248, 234, 215, 0.10);
  text-align: center;
}

.footer-copyright p {
  margin: 0;
  color: #d6c2ad;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Remove unwanted bullets from compact footer lists */
.site-footer-enhanced .footer-link-list,
.site-footer-enhanced .footer-contact-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.site-footer-enhanced .footer-link-list li,
.site-footer-enhanced .footer-contact-list li {
  list-style: none !important;
}


/* =========================================================
   Footer LinkedIn link
   ========================================================= */

.footer-linkedin-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 4px !important;
  font-size: 12.5px !important;
  color: var(--gold) !important;
  text-decoration: none !important;
}

.footer-linkedin-link::before {
  content: "in";
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(202, 164, 90, 0.18);
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  font-family: Arial, sans-serif;
}

.footer-linkedin-link:hover {
  color: #fff8ec !important;
}