/* =========================
      STRICTLY SCOPED CSS
      Only affects elements inside .tile-calc-section
    ========================== */
    .tcs-helper {
    display: none !important;
    }
    .tile-calc-section { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #222; }
    .tile-calc-section * { box-sizing: border-box; }

    .tile-calc-section .tcs-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:stretch; width:100%; max-width:1100px; }

    .tile-calc-section .tcs-card,
    .tile-calc-section .tcs-panel { background:#fff; border:1px solid #e7e7e7; border-radius:4px; overflow:hidden; }

    .tile-calc-section .tcs-head { background:#d31c2e; color:#fff; padding:10px 12px; font-weight:700; font-size:14px; line-height:1; }

    /* LEFT: Perspective View */
    .tile-calc-section .tcs-pv-body { position:relative; background:#d9d9d9; padding:38px 18px 34px; min-height:250px; }

    .tile-calc-section .tcs-pv-area { position:absolute; top:12px; left:14px; font-weight:700; font-size:14px; line-height:1; color:#111; white-space:nowrap; }
    .tile-calc-section .tcs-pv-area small { font-size:10px; font-weight:800; margin-left:2px; position:relative; top:-2px; }

    .tile-calc-section .tcs-pv-center { display:flex; justify-content:center; align-items:center; width:100%; }

    .tile-calc-section .tcs-pv-grid {
      width: var(--pv-size, 230px);
      height: var(--pv-size, 230px);
      border:2px solid #222;
      border-radius:2px;
      padding:10px;
      display:grid;
      gap:10px;
      background:#fff;
      overflow:hidden;
    }

    .tile-calc-section .tcs-pv-tile {
      border:2px dashed #777;
      border-radius:2px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:11px;
      font-weight:600;
      color:#444;
      padding:6px;
      line-height:1.15;
      user-select:none;
      background:#fff;
      overflow:hidden;
    }

    .tile-calc-section .tcs-pv-tile.is-more { font-weight:900; color:#111; border-style:solid; }

    .tile-calc-section .tcs-pv-waste { position:absolute; right:14px; bottom:10px; font-size:12px; font-weight:600; color:#111; white-space:nowrap; }

    /* RIGHT: controls */
    .tile-calc-section .tcs-panel { padding:10px 12px 12px; }
    .tile-calc-section .tcs-field { margin-bottom:10px; }

    .tile-calc-section .tcs-label { display:block; font-size:12px; font-weight:700; color:#333; margin:0 0 6px; font-size: 15px; text-align:left;}

    .tile-calc-section .tcs-control {
      width:100%; height:34px; border:1px solid #dcdcdc; border-radius:3px;
      padding:0 10px; font-size:13px; outline:none; background:#fff;
    }
    .tile-calc-section .tcs-control:focus { border-color:#c7c7c7; box-shadow:0 0 0 2px rgba(211, 28, 46, 0.10); }

    /* Native select look */
    .tile-calc-section select.tcs-control{
      height:38px;
      font-size:16px;
      background:#f5f5f5;
      border-radius:4px;
      border-color:#dcdcdc;
      padding:0 44px 0 14px;
      appearance:auto;
    }
    .tile-calc-section select.tcs-control:focus{
      border-color:#d31c2e;
      box-shadow:0 0 0 2px rgba(211, 28, 46, 0.10);
    }

    .tile-calc-section .tcs-mode-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0 10px; }
    .tile-calc-section .tcs-mode {
      border:1px solid #e4e4e4; border-radius:4px; padding:8px 10px;
      display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
      background:#dbdada; font-weight:700; font-size:18px; color:#333;
    }
    .tile-calc-section .tcs-mode input { accent-color:#d31c2e; }
    .tile-calc-section .tcs-mode.is-active {border-color: #d31c2e;
    box-shadow: 0 0 0 2px rgba(211, 28, 46, 0.08);
    background-color: #d31c2e;
    color: white; }

    .tile-calc-section .tcs-row3 { display:grid; grid-template-columns:140px 1fr 1fr; gap:10px; align-items:end; margin-top:2px; }
    .tile-calc-section .tcs-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; margin-top:2px; }

    .tile-calc-section .tcs-muted { color:#666; font-weight:600; }
    .tile-calc-section .tcs-danger { color:#d31c2e; font-weight:800; }
    .tile-calc-section .tcs-hidden { display:none !important; }

    .tile-calc-section .tcs-outputs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }

    /* Wastage row */
    .tile-calc-section .tcs-helper {
      display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
      margin:10px 0 10px; font-size:12px; font-weight:700; color:#333;
    }
    .tile-calc-section .tcs-helper-left { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; white-space:nowrap; }
    .tile-calc-section .tcs-waste-inline { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
    .tile-calc-section .tcs-waste-input {
      width:74px; height:30px; padding:0 8px; border:1px solid #dcdcdc; border-radius:3px;
      font-size:13px; outline:none; background:#fff;
    }
    .tile-calc-section .tcs-waste-input:disabled { opacity:.6; background:#f3f3f3; cursor:not-allowed; }

    @media (max-width: 860px){ .tile-calc-section .tcs-wrap{ grid-template-columns:1fr; } }
    
  
    section#cc-select-layout{
      width:100%;
      display:inline-block;
      text-align:left;
    }

    #cc-select-layout.ccsl{
      --ccsl-red:#d4142a;
      --ccsl-border:#e5e7eb;
      --ccsl-text:#111827;
      --ccsl-muted:#6b7280;
      --ccsl-card:#ffffff;
      --ccsl-shadow:0 6px 18px rgba(0,0,0,.08);
      --ccsl-radius:12px;

      max-width:1200px;
      margin:28px auto;
      padding:0 16px;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ccsl-text);
    }

    #cc-select-layout .ccsl__panel{
      border:1px solid var(--ccsl-border);
      border-radius:10px;
      overflow:hidden;
      background:#fff;
    }

    #cc-select-layout .ccsl__header{
      background:var(--ccsl-red);
      color:#fff;
      padding:16px 18px;
      font-weight:800;
      font-size:26px;
      letter-spacing:.2px;
    }

    #cc-select-layout .ccsl__body{ padding:18px; }

    /* ✅ equal width + equal height columns */
    #cc-select-layout .ccsl__row{
      display:flex;
      gap:28px;
      align-items:stretch;  /* stretch both columns */
    }

    #cc-select-layout .ccsl__left,
    #cc-select-layout .ccsl__right{
      flex:1 1 0;          /* equal width */
      min-width:0;
      display:flex;
      flex-direction:column;
    }

    #cc-select-layout .ccsl__label{
      margin:0 0 12px;
      font-weight:800;
    }

    #cc-select-layout .ccsl__layout-grid{
      display:flex;
      gap:14px;
      flex-wrap:nowrap;
    }

    #cc-select-layout .ccsl__layout-card{
      flex:1 1 0;
      background:var(--ccsl-card);
      border:2px solid var(--ccsl-border);
      border-radius:var(--ccsl-radius);
      padding:10px;
      cursor:pointer;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      min-width:0;
    }

    #cc-select-layout .ccsl__layout-card:hover{
      transform: translateY(-1px);
      box-shadow: var(--ccsl-shadow);
    }

    #cc-select-layout .ccsl__layout-card.is-selected{
      border-color:var(--ccsl-red);
      box-shadow: var(--ccsl-shadow);
    }

    #cc-select-layout .ccsl__layout-thumb{
      width:100%;
      aspect-ratio:9/9;
      border-radius:10px;
      border:1px solid var(--ccsl-border);
      overflow:hidden;
      background:#f3f4f6;
    }

    #cc-select-layout .ccsl__layout-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    #cc-select-layout .ccsl__layout-title{
      margin:10px 0 2px;
      font-weight:900;
    }

    #cc-select-layout .ccsl__layout-sub{
      margin:0;
      color:var(--ccsl-muted);
      font-size:13px;
    }

    #cc-select-layout .ccsl__selected{
      margin-top:auto; /* pins to bottom so left looks balanced */
      padding-top:14px;
      font-size:14px;
      color:var(--ccsl-muted);
    }

    #cc-select-layout .ccsl__selected strong{ color:var(--ccsl-text); }

    #cc-select-layout .ccsl__hint{
      margin:0 0 12px;
      font-weight:800;
    }

    #cc-select-layout .ccsl__gallery{ display:none; }
    #cc-select-layout .ccsl__gallery.is-active{
      display:flex;
      flex-direction:column;
      flex:1 1 auto; /* allows slider to fill remaining height */
      min-height:0;
    }

    #cc-select-layout .ccsl__slider{
      position:relative;
      border-radius:14px;
      overflow:hidden;
      border:1px solid var(--ccsl-border);
      background:#fff;
      flex:1 1 auto;  /* ✅ makes gallery fill height */
      min-height:0;
      display:flex;
      flex-direction:column;
    }

    #cc-select-layout .ccsl__viewport{
      overflow:hidden;
      width:100%;
      flex:1 1 auto; /* ✅ viewport grows */
      min-height:0;
    }

    #cc-select-layout .ccsl__track{
      display:flex;
      width:100%;
      height:100%;
      transition: transform .35s ease;
      will-change: transform;
    }

    #cc-select-layout .ccsl__slide{
      min-width:100%;
      padding:0px;
      height:100%;
    }

    #cc-select-layout .ccsl__slide-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      height:100%;
      align-items:stretch;
    }

    #cc-select-layout .ccsl__img{
      border-radius:12px;
      overflow:hidden;
      border:1px solid var(--ccsl-border);
      background:#f3f4f6;
      position:relative;
      min-height:240px;
      height:100%;
    }

    #cc-select-layout .ccsl__img img{
      width:100%;
      height:100%;
       object-fit:fill;
     /* object-fit:cover;*/
      display:block;
    }

    #cc-select-layout .ccsl__btn{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width:42px;
      height:42px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.12);
      background:rgba(255,255,255,.95);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      box-shadow:0 10px 20px rgba(0,0,0,.10);
      user-select:none;
      z-index:2;
    }

    #cc-select-layout .ccsl__btn:hover{ background:#fff; }
    #cc-select-layout .ccsl__btn:active{ transform: translateY(-50%) scale(.98); }
    #cc-select-layout .ccsl__btn--prev{ left:10px; }
    #cc-select-layout .ccsl__btn--next{ right:10px; }

    #cc-select-layout .ccsl__dots{
      display:flex;
      gap:8px;
      justify-content:center;
      padding:12px 10px 14px;
      background:#fff;
      border-top:1px solid var(--ccsl-border);
    }

    #cc-select-layout .ccsl__dots .dot{
      width:9px;
      height:9px;
      border-radius:999px;
      background:#d1d5db;
      border:0;
      cursor:pointer;
      padding:0;
    }

    #cc-select-layout .ccsl__dots .dot.is-active{ background:var(--ccsl-red); }

    @media (max-width: 980px){
      #cc-select-layout.ccsl{ padding:0 12px; }
      #cc-select-layout .ccsl__row{ flex-direction:column; }
      #cc-select-layout .ccsl__left,
      #cc-select-layout .ccsl__right{
        height:auto !important;     /* ✅ reset sync height on mobile stack */
        min-height:0 !important;
      }
      #cc-select-layout .ccsl__slide-grid{ grid-template-columns:1fr; }
      #cc-select-layout .ccsl__img{ min-height:220px; }
    }