.elementor-6358 .elementor-element.elementor-element-7c9e80a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6358 .elementor-element.elementor-element-f860b4c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6358 .elementor-element.elementor-element-2dfb7b8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6358 .elementor-element.elementor-element-3369b41{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6358 .elementor-element.elementor-element-04f25a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6358 .elementor-element.elementor-element-58247fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ===================================================================
   CTC HAIR & BEAUTY — HOMEPAGE-ONLY CSS
   PASTE INTO: edit the homepage in Elementor > Page Settings (gear icon)
   > Advanced > Custom CSS
   Elementor writes this to /uploads/elementor/css/post-{ID}.css and loads
   it ONLY on the homepage. Requires ctc-global.css to be in Site Settings.
   Contains: shade chart + hero stats, bento, product grid, brand index,
   reviews rail, FAQ.
   =================================================================== */

/* == 5. SHADE CHART ================================================ */
.ctc-chart{border:1px solid var(--ctc-rule);padding:clamp(1.25rem,2.5vw,2rem)}
.ctc-chart__hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--ctc-rule)}
.ctc-scope .ctc-chart__hd h2{font-size:1.5rem}
.ctc-chart__hd span{font-family:var(--ctc-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ctc-ink-soft)}
.ctc-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:520px){.ctc-swatches{grid-template-columns:repeat(4,1fr)}}
.ctc-sw{position:relative;aspect-ratio:3/4;border-radius:2px;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;padding:.7rem;overflow:hidden;
  transition:transform .45s var(--ctc-ease),box-shadow .45s var(--ctc-ease)}
.ctc-sw:hover{transform:translateY(-7px) scale(1.03);z-index:2;
  box-shadow:0 22px 40px -20px rgba(20,16,25,.55)}
.ctc-sw__no{font-family:var(--ctc-mono);font-size:.65rem;letter-spacing:.1em;opacity:.75;margin-bottom:.2rem}
.ctc-sw__nm{font-family:var(--ctc-body);font-weight:700;font-size:.8125rem;line-height:1.25}
.ctc-sw--1{background:var(--ctc-p-deep);color:#fff}
.ctc-sw--2{background:var(--ctc-purple);color:#fff}
.ctc-sw--3{background:var(--ctc-p-90);color:#fff}
.ctc-sw--4{background:var(--ctc-p-75);color:#fff}
.ctc-sw--5{background:var(--ctc-p-60);color:#fff}
.ctc-sw--6{background:var(--ctc-p-45);color:var(--ctc-p-deep)}
.ctc-sw--7{background:var(--ctc-p-30);color:var(--ctc-p-deep)}
.ctc-sw--8{background:var(--ctc-p-15);color:var(--ctc-p-deep)}
/* staggered entrance, CSS-only, in-viewport at load so it plays on paint */
@media (prefers-reduced-motion: no-preference){
  .ctc-sw{animation:ctcSw .6s var(--ctc-ease) backwards}
  .ctc-sw:nth-child(1){animation-delay:.05s} .ctc-sw:nth-child(2){animation-delay:.11s}
  .ctc-sw:nth-child(3){animation-delay:.17s} .ctc-sw:nth-child(4){animation-delay:.23s}
  .ctc-sw:nth-child(5){animation-delay:.29s} .ctc-sw:nth-child(6){animation-delay:.35s}
  .ctc-sw:nth-child(7){animation-delay:.41s} .ctc-sw:nth-child(8){animation-delay:.47s}
}
@keyframes ctcSw{from{opacity:0;transform:translateY(14px) scale(.94)}}

/* hero stats list */
.ctc-hero__meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:2.75rem 0 0;
  padding-top:2rem;border-top:1px solid var(--ctc-rule)}
.ctc-hero__meta div{min-width:130px}
.ctc-hero__meta dt{font-family:var(--ctc-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ctc-ink-soft);margin-bottom:.35rem}
.ctc-hero__meta dd{margin:0;font-family:var(--ctc-display);font-size:1.6rem;
  color:var(--ctc-purple);line-height:1.1}

/* == 6. BENTO DEPARTMENTS ========================================== */
.ctc-bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.ctc-bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){
  .ctc-bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto)}
  .ctc-dept--a{grid-column:span 3;grid-row:span 2}
  .ctc-dept--b{grid-column:span 3}
  .ctc-dept--c{grid-column:span 2}
  .ctc-dept--d{grid-column:span 1}
  .ctc-dept--e{grid-column:span 2}
  .ctc-dept--f{grid-column:span 2}
  .ctc-dept--g{grid-column:span 2}
}
.ctc-dept{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.35rem,2.4vw,2rem);text-decoration:none;overflow:hidden;border-radius:3px;
  border:1px solid var(--ctc-rule);min-height:190px;background:var(--ctc-p-15);
  transition:border-color .4s var(--ctc-ease),box-shadow .4s var(--ctc-ease)}
.ctc-dept:hover{border-color:var(--ctc-purple);box-shadow:0 26px 50px -30px rgba(20,16,25,.5)}
.ctc-dept__img,.ctc-dept img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ctc-ease);z-index:0}
.ctc-dept:hover img{transform:scale(1.06)}
.ctc-dept__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(72,25,95,0) 28%,rgba(72,25,95,.86) 100%);
  transition:opacity .5s var(--ctc-ease)}
.ctc-dept:hover .ctc-dept__veil{opacity:.94}
.ctc-dept__in{position:relative;z-index:2}
.ctc-dept--img h3,.ctc-dept--img p{color:#fff}
.ctc-dept--img .ctc-dept__cnt{color:rgba(255,255,255,.8)}
.ctc-scope .ctc-dept h3{margin-bottom:.4rem}
.ctc-dept p{font-size:.9375rem;margin:0;color:var(--ctc-ink-soft);max-width:44ch}
.ctc-dept__cnt{font-family:var(--ctc-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ctc-purple);display:block;margin-bottom:.7rem}
.ctc-dept__arrow{position:absolute;top:clamp(1.35rem,2.4vw,2rem);right:clamp(1.35rem,2.4vw,2rem);
  z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;font-size:1rem;
  transition:background .4s var(--ctc-ease),color .4s var(--ctc-ease),transform .4s var(--ctc-ease)}
.ctc-dept--img .ctc-dept__arrow{color:#fff}
.ctc-dept:not(.ctc-dept--img) .ctc-dept__arrow{color:var(--ctc-purple)}
.ctc-dept:hover .ctc-dept__arrow{background:#fff;color:var(--ctc-purple);transform:rotate(-45deg)}

/* == 7. PRODUCT GRID =============================================== */
.ctc-prods{display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr))}
.ctc-prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ctc-rule);
  border-radius:3px;overflow:hidden;text-decoration:none;
  transition:border-color .4s var(--ctc-ease),box-shadow .4s var(--ctc-ease),transform .4s var(--ctc-ease)}
.ctc-prod:hover{border-color:var(--ctc-purple);transform:translateY(-6px);
  box-shadow:0 26px 50px -30px rgba(20,16,25,.5)}
.ctc-prod__media{position:relative;margin:0;aspect-ratio:1;background:var(--ctc-p-15);overflow:hidden}
/* brand name sits behind the image; a real product photo covers it */
.ctc-prod__media::after{content:attr(data-brand);position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;font-family:var(--ctc-mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ctc-p-60)}
.ctc-prod__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ctc-ease)}
.ctc-prod:hover .ctc-prod__media img{transform:scale(1.05)}
.ctc-prod__badge{position:absolute;z-index:2;top:.75rem;left:.75rem;background:var(--ctc-purple);
  color:#fff;font-family:var(--ctc-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem .55rem;border-radius:2px}
.ctc-prod__badge--out{background:var(--ctc-ink-soft)}
.ctc-prod__body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.ctc-prod__cat{font-family:var(--ctc-mono);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ctc-purple);display:block;margin-bottom:.55rem}
.ctc-scope .ctc-prod h3{font-size:1.0625rem;line-height:1.24;margin-bottom:1.1rem}
.ctc-prod__price{margin:auto 0 0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--ctc-display);font-size:1.4rem;color:var(--ctc-purple);line-height:1}
/* WooCommerce get_price_html() emits <del>/<ins> on sale — style them to
   match the was/now treatment from the static design */
.ctc-prod__price del{order:2;font-family:var(--ctc-mono);font-size:.75rem;
  color:var(--ctc-ink-soft);opacity:1}
.ctc-prod__price ins{order:1;text-decoration:none;background:transparent;color:var(--ctc-purple)}
.ctc-prod__price .woocommerce-Price-currencySymbol{font-size:.85em}
.ctc-prod__go{margin-top:.9rem;font-family:var(--ctc-body);font-size:.8125rem;font-weight:700;
  color:var(--ctc-ink-soft);display:inline-flex;gap:.4rem;align-items:center;
  transition:color .3s var(--ctc-ease),gap .3s var(--ctc-ease)}
.ctc-prod:hover .ctc-prod__go{color:var(--ctc-purple);gap:.7rem}
.ctc-prods__foot{margin-top:clamp(2.25rem,4vw,3rem)}

/* == 8. BRAND INDEX ================================================ */
.ctc-index{columns:2;column-gap:2.5rem;list-style:none;margin:0;padding:0}
@media(min-width:700px){.ctc-index{columns:3}}
@media(min-width:1040px){.ctc-index{columns:4}}
.ctc-index li{break-inside:avoid;margin-bottom:.2rem}
.ctc-index a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--ctc-rule);
  font-weight:500;color:var(--ctc-ink);
  transition:color .3s var(--ctc-ease),border-color .3s var(--ctc-ease),padding-left .3s var(--ctc-ease)}
.ctc-index a:hover{color:var(--ctc-purple);border-color:var(--ctc-purple);padding-left:.5rem}
.ctc-index span{font-family:var(--ctc-mono);font-size:.7rem;color:var(--ctc-ink-soft);letter-spacing:.08em}

/* == 10. REVIEWS RAIL ============================================== */
.ctc-rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.25rem;scrollbar-width:thin;scrollbar-color:var(--ctc-p-45) transparent}
.ctc-rail figure{scroll-snap-align:start;flex:0 0 min(390px,82vw);margin:0;
  background:#fff;border:1px solid var(--ctc-rule);padding:2rem 1.85rem;border-radius:3px;
  display:flex;flex-direction:column;transition:border-color .4s var(--ctc-ease)}
.ctc-rail figure:hover{border-color:var(--ctc-purple)}
.ctc-rail blockquote{margin:0 0 1.5rem;font-family:var(--ctc-display);font-size:1.35rem;line-height:1.3}
.ctc-rail figcaption{margin-top:auto;font-weight:700;font-size:.9375rem;font-family:var(--ctc-body)}
.ctc-rail figcaption span{display:block;font-weight:400;font-size:.75rem;font-family:var(--ctc-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ctc-ink-soft);margin-top:.3rem}
.ctc-stars{color:var(--ctc-purple);letter-spacing:.2em;margin:0 0 1rem;font-size:.9rem}

/* == 11. FAQ ======================================================= */
.ctc-faq{max-width:78ch;margin-inline:auto}
.ctc-faq details{border-bottom:1px solid var(--ctc-rule);padding:1.35rem 0}
.ctc-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:1.5rem;align-items:baseline;font-family:var(--ctc-display);color:var(--ctc-ink);
  font-size:clamp(1.15rem,1.05rem + .4vw,1.45rem);transition:color .3s var(--ctc-ease)}
.ctc-faq summary::-webkit-details-marker{display:none}
.ctc-faq summary:hover{color:var(--ctc-purple)}
.ctc-faq summary::after{content:"+";font-family:var(--ctc-mono);color:var(--ctc-purple);
  font-size:1.35rem;flex:none;transition:transform .35s var(--ctc-ease)}
.ctc-faq details[open] summary::after{transform:rotate(45deg)}
.ctc-faq details p{margin:1rem 0 0;color:var(--ctc-ink-soft);max-width:66ch}/* End custom CSS */