/* Discount Ceramics — Tile Category Pages
   Scoped to .dctp. All tunable values are CSS variables so Elementor
   style controls can override them per widget instance. */

.dctp{
  /* Brand palette (sampled from discountceramicsleicester.co.uk) */
  --dctp-blue:#3870B8;
  --dctp-blue-dark:#2C5A93;
  --dctp-navy:#204878;
  --dctp-teal:#488898;
  --dctp-teal-dark:#3A7080;
  --dctp-ink:#302828;
  --dctp-ink-soft:#5F5B5B;
  --dctp-paper:#F5F6F7;
  --dctp-sand:#ECEEF1;
  --dctp-clay:#E4E8ED;
  --dctp-line:#D8DBDF;
  --dctp-line-warm:#C7CDD4;

  /* Type + rhythm */
  --dctp-font:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dctp-h1:clamp(38px,6.4vw,88px);
  --dctp-h2:clamp(28px,3.4vw,44px);
  --dctp-h3:26px;
  --dctp-body:16px;
  --dctp-section-pad:110px;
  --dctp-maxw:1320px;
  --dctp-gutter:40px;

  font-family:var(--dctp-font);
  color:var(--dctp-ink);
  background:var(--dctp-paper);
  font-size:var(--dctp-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.dctp *{box-sizing:border-box;}
.dctp img{max-width:100%;display:block;}
.dctp h1,.dctp h2,.dctp h3,.dctp h4{font-family:var(--dctp-font);margin:0;line-height:1.1;color:var(--dctp-ink);font-weight:600;letter-spacing:-0.01em;}
.dctp a{color:var(--dctp-ink);text-decoration:none;}
.dctp .dctp-wrap{max-width:var(--dctp-maxw);margin:0 auto;padding:0 var(--dctp-gutter);}
.dctp .dctp-mono{font-family:var(--dctp-font);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dctp-blue);}

/* Buttons */
.dctp .dctp-btn{display:inline-block;font-weight:600;font-size:14px;padding:14px 26px;border-radius:3px;transition:background .15s,border-color .15s,color .15s;line-height:1.2;cursor:pointer;}
.dctp .dctp-btn-primary{background:var(--dctp-blue);color:#fff;}
.dctp .dctp-btn-primary:hover{background:var(--dctp-blue-dark);color:#fff;}
.dctp .dctp-btn-teal{background:var(--dctp-teal);color:#fff;}
.dctp .dctp-btn-teal:hover{background:var(--dctp-teal-dark);color:#fff;}
.dctp .dctp-btn-hollow{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);}
.dctp .dctp-btn-hollow:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}
.dctp .dctp-textlink{border-bottom:1px solid var(--dctp-ink);padding-bottom:3px;font-size:13.5px;font-weight:500;display:inline-block;}
.dctp .dctp-textlink:hover{color:var(--dctp-blue);border-color:var(--dctp-blue);}

/* Hero */
.dctp .dctp-hero{position:relative;min-height:88vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.dctp .dctp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dctp .dctp-hero-overlay{position:absolute;inset:0;background:rgba(12,18,28,.66);}
.dctp .dctp-hero-inner{position:relative;z-index:2;text-align:center;padding:120px var(--dctp-gutter);max-width:1000px;color:#fff;}
.dctp .dctp-hero-eyebrow{color:#fff;opacity:.92;display:block;margin-bottom:20px;}
.dctp .dctp-hero h1{color:#fff;font-size:var(--dctp-h1);font-weight:700;letter-spacing:-0.01em;text-shadow:0 2px 24px rgba(0,0,0,.55);}
.dctp .dctp-hero-sub{color:#fff;font-size:16.5px;max-width:620px;margin:22px auto 0;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.dctp .dctp-hero-ctas{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

/* Section shell + tonal steps */
.dctp .dctp-section{padding:var(--dctp-section-pad) 0;position:relative;}
.dctp .dctp-section.is-tight{padding:calc(var(--dctp-section-pad) * .68) 0;}
.dctp .dctp-section.bg-sand{background:var(--dctp-sand);}
.dctp .dctp-section.bg-clay{background:var(--dctp-clay);}
.dctp .dctp-section.bg-dark{background:var(--dctp-navy);color:#fff;}
.dctp .dctp-section.bg-dark h2,.dctp .dctp-section.bg-dark h3,.dctp .dctp-section.bg-dark h4,
.dctp .dctp-section.bg-dark p,.dctp .dctp-section.bg-dark li,.dctp .dctp-section.bg-dark td,
.dctp .dctp-section.bg-dark th,.dctp .dctp-section.bg-dark .dctp-mono,.dctp .dctp-section.bg-dark span{color:#fff !important;}

/* Numbered section marker */
.dctp .dctp-section.is-marked{padding-top:calc(var(--dctp-section-pad) + 22px);}
.dctp .dctp-section.is-marked::before{
  content:attr(data-mark);position:absolute;top:0;left:0;width:100%;
  border-top:1px solid var(--dctp-line-warm);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dctp-ink-soft);
  padding:14px var(--dctp-gutter) 0;font-weight:600;
}
.dctp .dctp-section.bg-dark.is-marked::before{border-color:rgba(255,255,255,.28);color:#fff;}

/* Section label */
.dctp .dctp-section-label{display:flex;align-items:baseline;gap:20px;margin-bottom:44px;padding-top:22px;border-top:2px solid var(--dctp-blue);flex-wrap:wrap;}
.dctp .dctp-section.bg-dark .dctp-section-label{border-color:#fff;}
.dctp .dctp-section-label h2{font-size:var(--dctp-h2);font-weight:400;}

/* Overview / lede grid */
.dctp .dctp-lede{display:grid;grid-template-columns:.4fr .6fr;gap:60px;align-items:stretch;}
.dctp .dctp-lede-left{display:flex;flex-direction:column;}
.dctp .dctp-lede-left .dctp-mono{margin-bottom:14px;display:block;}
.dctp .dctp-lede-left h2{font-size:32px;font-weight:600;}
.dctp .dctp-lede-img{flex:1;margin-top:32px;min-height:280px;overflow:hidden;border-radius:2px;background:var(--dctp-line);}
.dctp .dctp-lede-img img{width:100%;height:100%;object-fit:cover;}
.dctp .dctp-lede p{font-size:17px;line-height:1.7;margin:0 0 18px;font-weight:300;color:var(--dctp-ink);}
.dctp .dctp-lede p.is-soft{color:var(--dctp-ink-soft);font-size:15px;}
.dctp .dctp-facts{margin-top:8px;border-top:1px solid var(--dctp-line);}
.dctp .dctp-fact{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--dctp-line);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--dctp-ink-soft);font-weight:600;}
.dctp .dctp-fact b{color:var(--dctp-ink);text-transform:none;letter-spacing:0;font-weight:500;text-align:right;}

/* Range index list */
.dctp .dctp-index{border-top:1px solid var(--dctp-line);}
.dctp .dctp-index-row{display:grid;grid-template-columns:60px 1fr 190px;align-items:baseline;gap:24px;padding:32px 0;border-bottom:1px solid var(--dctp-line);position:relative;}
.dctp .dctp-index-row .dctp-num{font-size:12px;color:var(--dctp-ink-soft);font-weight:600;}
.dctp .dctp-index-row h3{font-size:var(--dctp-h3);font-weight:400;transition:color .2s;}
.dctp .dctp-index-row .dctp-meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dctp-ink-soft);text-align:right;font-weight:600;}
.dctp .dctp-index-row .dctp-desc{grid-column:2 / span 1;font-size:14.5px;color:var(--dctp-ink-soft);max-width:580px;margin-top:10px;font-weight:300;line-height:1.62;}
.dctp .dctp-index-row .dctp-reveal{position:absolute;right:0;top:50%;transform:translateY(-50%) scale(.94);width:210px;height:270px;overflow:hidden;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:5;box-shadow:0 20px 50px rgba(0,0,0,.18);border-radius:2px;}
.dctp .dctp-index-row .dctp-reveal img{width:100%;height:100%;object-fit:cover;}
.dctp .dctp-index-row:hover{background:rgba(0,0,0,.015);}
.dctp .dctp-index-row:hover .dctp-reveal{opacity:1;transform:translateY(-50%) scale(1);}
.dctp .dctp-index-row:hover h3{color:var(--dctp-blue);}

/* Range CTA */
.dctp .dctp-range-cta{margin-top:44px;padding-top:36px;border-top:1px solid var(--dctp-line-warm);display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;}
.dctp .dctp-range-cta-text{max-width:440px;}
.dctp .dctp-range-cta-text strong{font-weight:600;display:block;font-size:17px;margin-bottom:4px;}
.dctp .dctp-range-cta-text span{font-size:14px;color:var(--dctp-ink-soft);font-weight:300;}
.dctp .dctp-range-cta-btns{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto;}

/* Image slider */
.dctp .dctp-slider{--dctp-slider-ratio:2.133333;--dctp-slider-gap:18px;position:relative;overflow:hidden;border-radius:2px;background:var(--dctp-line);touch-action:pan-y;height:auto;aspect-ratio:4.306666/1;}
.dctp .dctp-slider-track{position:relative !important;display:block !important;height:100%;width:100%;overflow:hidden;transform:none !important;}
.dctp .dctp-slide{display:none !important;position:absolute;inset:0;width:100% !important;max-width:100% !important;min-width:100% !important;height:100%;margin:0 !important;padding:0 !important;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:none;}
.dctp .dctp-slide.is-active{display:block !important;opacity:1;visibility:visible;pointer-events:auto;z-index:1;}
.dctp .dctp-slide img{width:100% !important;height:100% !important;object-fit:cover;display:block;max-width:none;margin:0;}
.dctp .dctp-slide-cap{position:absolute;left:0;bottom:0;right:0;padding:32px 28px 20px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));}
.dctp .dctp-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--dctp-ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:3;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none;}
.dctp .dctp-slider-arrow:hover{background:#fff;}
.dctp .dctp-slider-arrow.dctp-prev{left:18px;}
.dctp .dctp-slider-arrow.dctp-next{right:18px;}
.dctp .dctp-slider-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:9px;z-index:3;}
.dctp .dctp-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .15s,transform .15s;box-shadow:none;-webkit-appearance:none;appearance:none;}
.dctp .dctp-dot.is-active{background:#fff;transform:scale(1.25);}
@media (max-width:767px){
  .dctp .dctp-slider{--dctp-slider-gap:0px;aspect-ratio:1920/900;}
  .dctp .dctp-slider-arrow{width:40px;height:40px;font-size:20px;}
  .dctp .dctp-slider-arrow.dctp-prev{left:10px;}
  .dctp .dctp-slider-arrow.dctp-next{right:10px;}
}

/* Full-bleed plate */
.dctp .dctp-plate{position:relative;width:100%;height:64vh;min-height:420px;overflow:hidden;}
.dctp .dctp-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dctp .dctp-plate .dctp-cap{position:absolute;left:var(--dctp-gutter);bottom:24px;color:#fff;font-size:11px;letter-spacing:.08em;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* Guide list */
.dctp .dctp-guide{border-top:1px solid var(--dctp-line);}
.dctp .dctp-guide-row{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--dctp-line);}
.dctp .dctp-guide-row h4{font-size:21px;font-weight:400;margin-bottom:10px;}
.dctp .dctp-guide-row p{color:var(--dctp-ink-soft);font-size:15px;margin:0;max-width:620px;font-weight:300;}
.dctp .dctp-section.bg-dark .dctp-guide,.dctp .dctp-section.bg-dark .dctp-guide-row{border-color:rgba(255,255,255,.18);}

/* Comparison table */
.dctp .dctp-table{width:100%;border-collapse:collapse;font-size:14.5px;font-weight:300;background:transparent;}
.dctp .dctp-table tr,.dctp .dctp-table thead,.dctp .dctp-table tbody{background:transparent !important;}
.dctp .dctp-table th,.dctp .dctp-table td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--dctp-line);vertical-align:top;background:transparent !important;}
.dctp .dctp-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--dctp-ink-soft);font-weight:600;}
.dctp .dctp-table td.is-factor{font-weight:500;}
.dctp .dctp-section.bg-dark .dctp-table th,.dctp .dctp-section.bg-dark .dctp-table td{border-color:rgba(255,255,255,.18);}

/* Split images */
.dctp .dctp-split{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.dctp .dctp-split .dctp-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--dctp-line);}
.dctp .dctp-split .dctp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Calculator */
.dctp .dctp-calc{border:1px solid var(--dctp-line);padding:38px;}
.dctp .dctp-section.bg-dark .dctp-calc{border-color:rgba(255,255,255,.2);}
.dctp .dctp-calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px;}
.dctp .dctp-calc-grid label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--dctp-ink-soft);display:block;margin-bottom:6px;font-weight:600;}
.dctp .dctp-section.bg-dark .dctp-calc-grid label{color:#fff;}
.dctp .dctp-calc-grid input{width:100%;padding:11px 12px;border:1px solid var(--dctp-line);background:var(--dctp-paper);font-family:var(--dctp-font);font-size:14px;border-radius:2px;font-weight:300;}
.dctp .dctp-section.bg-dark .dctp-calc-grid input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff;}
.dctp .dctp-calc-out{display:flex;gap:44px;align-items:baseline;border-top:1px solid var(--dctp-line);padding-top:24px;flex-wrap:wrap;}
.dctp .dctp-section.bg-dark .dctp-calc-out{border-color:rgba(255,255,255,.2);}
.dctp .dctp-calc-out b{font-size:34px;font-weight:600;}
.dctp .dctp-calc-out span{font-size:12.5px;color:var(--dctp-ink-soft);display:block;}
.dctp .dctp-section.bg-dark .dctp-calc-out span{color:#fff;}
.dctp .dctp-calc-note{font-size:12.5px;color:var(--dctp-ink-soft);margin-top:18px;font-weight:300;}
.dctp .dctp-section.bg-dark .dctp-calc-note{color:#fff;}

/* Steps */
.dctp .dctp-steps{border-top:1px solid var(--dctp-line);}
.dctp .dctp-step{display:grid;grid-template-columns:70px 1fr;gap:30px;padding:28px 0;border-bottom:1px solid var(--dctp-line);}
.dctp .dctp-step .dctp-step-n{font-size:30px;color:var(--dctp-ink-soft);font-weight:400;}
.dctp .dctp-step h4{font-size:19px;font-weight:400;margin-bottom:6px;}
.dctp .dctp-step p{margin:0;color:var(--dctp-ink-soft);font-size:14.5px;font-weight:300;max-width:600px;}

/* Expert */
.dctp .dctp-expert{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
.dctp .dctp-expert .dctp-ph{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--dctp-line);}
.dctp .dctp-expert .dctp-ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.dctp .dctp-expert blockquote{font-size:24px;font-weight:400;line-height:1.4;margin:14px 0 18px;}
.dctp .dctp-expert .dctp-attr{font-size:11.5px;color:var(--dctp-ink-soft);letter-spacing:.02em;font-weight:600;text-transform:uppercase;}

/* Trade */
.dctp .dctp-trade{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.dctp .dctp-trade-title{font-size:24px;font-weight:600;margin-bottom:16px;}
.dctp .dctp-trade ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--dctp-line);}
.dctp .dctp-trade li{padding:13px 0;border-bottom:1px solid var(--dctp-line);font-size:14.5px;color:var(--dctp-ink-soft);font-weight:300;}
.dctp .dctp-trade .dctp-ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--dctp-line);}
.dctp .dctp-trade .dctp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Showrooms */
.dctp .dctp-showroom{padding:0 0 48px;border-bottom:1px solid var(--dctp-line);margin-bottom:48px;}
.dctp .dctp-showroom:first-of-type{border-top:1px solid var(--dctp-line);padding-top:48px;}
.dctp .dctp-showroom-detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.dctp .dctp-showroom-photo{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--dctp-line);}
.dctp .dctp-showroom-photo img{width:100%;height:100%;object-fit:cover;}
.dctp .dctp-showroom h3{font-size:27px;font-weight:600;margin:12px 0 14px;}
.dctp .dctp-showroom .dctp-blurb{color:var(--dctp-ink-soft);font-size:14.5px;font-weight:300;margin:0 0 8px;max-width:520px;}
.dctp .dctp-showroom dl{font-size:14.5px;margin:0;}
.dctp .dctp-showroom dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dctp-ink-soft);margin-top:14px;font-weight:600;}
.dctp .dctp-showroom dd{margin:2px 0 0;}
.dctp .dctp-areas{font-size:15px;color:var(--dctp-ink-soft);font-weight:300;max-width:820px;margin-top:38px;}
.dctp .dctp-areas a{border-bottom:1px solid var(--dctp-line);}

/* FAQ */
.dctp .dctp-faq-group{margin-bottom:44px;}
.dctp .dctp-faq-group > .dctp-mono{display:block;margin-bottom:14px;}
.dctp .dctp-faq-item{border-top:1px solid var(--dctp-line);}
.dctp .dctp-faq-list:last-child .dctp-faq-item:last-child{border-bottom:1px solid var(--dctp-line);}
.dctp .dctp-faq-q{width:100%;text-align:left;background:transparent !important;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0;font-family:var(--dctp-font);font-size:18px;font-weight:600;color:var(--dctp-ink);box-shadow:none;-webkit-appearance:none;appearance:none;}
.dctp .dctp-faq-q:hover,.dctp .dctp-faq-q:focus,.dctp .dctp-faq-q:active{background:transparent !important;color:var(--dctp-blue) !important;box-shadow:none;outline:none;}
.dctp .dctp-faq-q:hover .dctp-plus,.dctp .dctp-faq-q:focus .dctp-plus{color:var(--dctp-blue) !important;}
.dctp .dctp-faq-q .dctp-plus{font-size:16px;color:var(--dctp-blue);transition:transform .18s;flex-shrink:0;}
.dctp .dctp-faq-item.is-open .dctp-plus{transform:rotate(45deg);}
.dctp .dctp-faq-a{max-height:0;overflow:hidden;transition:max-height .22s ease;}
.dctp .dctp-faq-a p{color:var(--dctp-ink-soft);font-size:14.5px;margin:0 0 22px;max-width:640px;font-weight:300;}

/* Final CTA */
.dctp .dctp-final{text-align:center;}
.dctp .dctp-final h2{color:#fff;font-size:clamp(30px,4.4vw,52px);max-width:760px;margin:0 auto 30px;}
.dctp .dctp-final .dctp-mono{color:#fff;display:block;margin-bottom:18px;}
.dctp .dctp-final-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .dctp{--dctp-section-pad:84px;--dctp-gutter:32px;}
  .dctp .dctp-expert{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:900px){
  .dctp .dctp-lede{grid-template-columns:1fr;gap:28px;}
  .dctp .dctp-lede-img{min-height:240px;margin-top:24px;}
  .dctp .dctp-index-row{grid-template-columns:40px 1fr;}
  .dctp .dctp-index-row .dctp-meta{grid-column:2;text-align:left;margin-top:4px;}
  .dctp .dctp-index-row .dctp-desc{grid-column:2;}
  .dctp .dctp-index-row .dctp-reveal{display:none;}
  .dctp .dctp-trade{grid-template-columns:1fr;gap:32px;}
  .dctp .dctp-calc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .dctp{--dctp-section-pad:60px;--dctp-gutter:22px;}
  .dctp .dctp-hero{min-height:78vh;}
  .dctp .dctp-guide-row{grid-template-columns:1fr;gap:12px;}
  .dctp .dctp-step{grid-template-columns:1fr;gap:8px;}
  .dctp .dctp-split{grid-template-columns:1fr;}
  .dctp .dctp-showroom-detail{grid-template-columns:1fr;gap:24px;}
  .dctp .dctp-showroom-photo{aspect-ratio:600/250;}
  .dctp .dctp-range-cta-btns{margin-left:0;}
  .dctp .dctp-table,.dctp .dctp-table thead,.dctp .dctp-table tbody,.dctp .dctp-table th,.dctp .dctp-table td,.dctp .dctp-table tr{display:block;}
  .dctp .dctp-table thead{display:none;}
  .dctp .dctp-table tr{border-bottom:1px solid var(--dctp-line);padding:12px 0;}
  .dctp .dctp-table td{border:none;padding:4px 0;}
  .dctp .dctp-table td::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--dctp-ink-soft);font-weight:600;}
  .dctp .dctp-section.bg-dark .dctp-table td::before{color:#fff !important;}
}