.elementor-kit-8{--e-global-color-primary:#F2F2F2;--e-global-color-secondary:#EAB1B1;--e-global-color-text:#141414;--e-global-color-accent:#D1E5F4;--e-global-color-678b452:#F2F2F2;--e-global-color-1abaa55:#FFFFFF00;--e-global-color-66830d2:#141414D9;--e-global-color-8b20943:#B8B8B8;--e-global-typography-primary-font-family:"Darker Grotesque";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:44px;--e-global-typography-primary-letter-spacing:4px;--e-global-typography-primary-word-spacing:0px;--e-global-typography-secondary-font-family:"Darker Grotesque";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:20px;--e-global-typography-secondary-letter-spacing:1px;--e-global-typography-secondary-word-spacing:0px;--e-global-typography-text-font-family:"Titillium Web";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:300;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:23px;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0px;--e-global-typography-accent-font-family:"Darker Grotesque";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:1px;--e-global-typography-accent-word-spacing:0px;--e-global-typography-f1d03c5-font-family:"Shrikhand";--e-global-typography-f1d03c5-font-size:110px;--e-global-typography-f1d03c5-font-weight:400;--e-global-typography-f1d03c5-text-transform:none;--e-global-typography-f1d03c5-font-style:normal;--e-global-typography-f1d03c5-text-decoration:none;--e-global-typography-f1d03c5-line-height:110px;--e-global-typography-f1d03c5-letter-spacing:6px;--e-global-typography-f1d03c5-word-spacing:0px;--e-global-typography-e17a7b7-font-family:"Titillium Web";--e-global-typography-e17a7b7-font-size:20px;--e-global-typography-e17a7b7-font-weight:300;--e-global-typography-e17a7b7-text-transform:none;--e-global-typography-e17a7b7-font-style:normal;--e-global-typography-e17a7b7-text-decoration:underline;--e-global-typography-e17a7b7-line-height:23px;--e-global-typography-e17a7b7-letter-spacing:0px;--e-global-typography-e17a7b7-word-spacing:0px;background-color:var( --e-global-color-primary );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:var( --e-global-color-accent );font-family:var( --e-global-typography-e17a7b7-font-family ), Sans-serif;font-size:var( --e-global-typography-e17a7b7-font-size );font-weight:var( --e-global-typography-e17a7b7-font-weight );text-transform:var( --e-global-typography-e17a7b7-text-transform );font-style:var( --e-global-typography-e17a7b7-font-style );text-decoration:var( --e-global-typography-e17a7b7-text-decoration );line-height:var( --e-global-typography-e17a7b7-line-height );letter-spacing:var( --e-global-typography-e17a7b7-letter-spacing );word-spacing:var( --e-global-typography-e17a7b7-word-spacing );}.elementor-kit-8 a:hover{color:var( --e-global-color-8b20943 );}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{color:var( --e-global-color-secondary );padding:0px 0px 5px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1585px;}.e-con{--container-max-width:1585px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:38px;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-size:19px;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-text-font-size:19px;--e-global-typography-accent-font-size:18px;--e-global-typography-f1d03c5-font-size:94px;--e-global-typography-f1d03c5-line-height:1em;--e-global-typography-f1d03c5-letter-spacing:5px;--e-global-typography-e17a7b7-font-size:19px;}.elementor-kit-8 a{font-size:var( --e-global-typography-e17a7b7-font-size );line-height:var( --e-global-typography-e17a7b7-line-height );letter-spacing:var( --e-global-typography-e17a7b7-letter-spacing );word-spacing:var( --e-global-typography-e17a7b7-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:18px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:16px;--e-global-typography-f1d03c5-font-size:66px;--e-global-typography-f1d03c5-letter-spacing:3px;--e-global-typography-e17a7b7-font-size:18px;}.elementor-kit-8 a{font-size:var( --e-global-typography-e17a7b7-font-size );line-height:var( --e-global-typography-e17a7b7-line-height );letter-spacing:var( --e-global-typography-e17a7b7-letter-spacing );word-spacing:var( --e-global-typography-e17a7b7-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Add space between the search/📍 row and the cards */
#cc-weather .cc-toolbar { margin-bottom: 40px !important; }
/*Google Places Pin*/
#cc-weather #cc-useme { background: #EAB1B1 !important; }

/*Pintrest Pin */
#cc-pinterest button { background: #EAB1B1 !important; }

/* Hide Pick 3 Celebs Header */
#cc-icons .cc-icons-title { display: none !important; }

/* Celebrity name font + weight */
#cc-icons .cc-name {
  font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 700;
}

/* Slightly larger description text under each name */
#cc-icons .cc-tags { font-size: 13.5px !important; }

/* Keep the placeholder space */
#cc-icons .cc-tile::before{
  content:''; display:block; height:110px; border-radius:12px; margin-bottom:8px;
  background:#f7f7f7; /* fallback */
  background-size:cover; background-position:center;
}

/* Per-tile images */
#cc-icons .cc-tile[data-id="sabrina_carpenter"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/sabrina.jpg');
}
#cc-icons .cc-tile[data-id="taylor_swift"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/taylor.jpg');
}
#cc-icons .cc-tile[data-id="olivia_rodrigo"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/olivia.jpg');
}
  #cc-icons .cc-tile[data-id="zendaya"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/zendaya.webp');
}
#cc-icons .cc-tile[data-id="billie_eilish"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/billie.webp');
}
#cc-icons .cc-tile[data-id="emma_chamberlain"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/emma.jpg');
}
#cc-icons .cc-tile[data-id="jenna_ortega"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/jenna.webp');
}
#cc-icons .cc-tile[data-id="hailey_bieber"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/hailey.jpeg');
}
#cc-icons .cc-tile[data-id="kylie_jenner"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/kylie.jpg');
}
#cc-icons .cc-tile[data-id="sofia_richie"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/sofia.webp');
}
#cc-icons .cc-tile[data-id="jennie_blackpink"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/jennie.jpg');
}
#cc-icons .cc-tile[data-id="lisa_blackpink"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/lisa.webp');
}
#cc-icons .cc-tile[data-id="newjeans"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/newjeans.jpg');
}
#cc-icons .cc-tile[data-id="ice_spice"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/ice.webp');
}
#cc-icons .cc-tile[data-id="harry_styles"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/harry.webp');
}
#cc-icons .cc-tile[data-id="timothee_chalamet"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/timothee.webp');
}
#cc-icons .cc-tile[data-id="jacob_elordi"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/jacob.jpg');
}
#cc-icons .cc-tile[data-id="tom_holland"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/tom.jpg');
}
#cc-icons .cc-tile[data-id="jungkook_bts"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/jungkook.jpg');
}
#cc-icons .cc-tile[data-id="hyunjin_straykids"]::before { 
  background-image:url('/wp-content/uploads/cc-icons/hyunjin.webp');
}


/* Celeb Image Desktop */
#cc-icons .cc-tile::before { height: 130px; }
/* Celeb Image Mobile */
@media (max-width: 768px) {
  #cc-icons .cc-tile::before { height: 100px; }
}

/* center weather tiles */
#cc-weather .cc-forecast {
  display: flex;              /* already set in plugin, safe to repeat */
  justify-content: center !important;  /* centers rows horizontally */
}

/* Force each pin thumbnail to be exactly 400×400 */
.cc-pin-preview 
  span[data-pin-log="embed_grid"] 
  span[class*="_img"] {
    width: 300px    !important;
    height: 400px   !important;
    background-size: cover !important;
    background-position: center center !important;
}
/*Is your board public error */
.cc-pin-status .error {
  font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 14pt !important;
  font-weight: 600     !important;  /* semi-bold */
  color: #EAB1B1        !important;  /* pink text */
  border: 1px solid #EAB1B1 !important;  /* pink border */
  background: rgba(234,177,177,0.1) !important; /* light pink BG */
  padding: 8px 12px     !important;
  border-radius: 10px   !important;
  display: inline-block; !important
}
/* Center the status container */
.cc-pin-status {
  text-align: center !important;
}

/* Make the error box inline-block and auto-margin */
.cc-pin-status .error {
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Preppy Neat Goth Buttons */


#cc-style-select button {

  font-family: 'Darker Grotesque', Sans-Serif;

  font-size: 30pt;
  
  font-weight: 600;

  padding: 15px 20px 20px 20px;

  border-radius: 8px;

  margin: 0 12px;

  cursor: pointer;

  transition: background-color 0.2s ease;
  

}



/* Preppy: pink background, black border/text */

#cc-style-select button[data-style="Preppy"] {

  background: #FFC0CB;

  border: 2px solid #000;

  color: #000;

}

#cc-style-select button[data-style="Preppy"]:hover {

  background: #FF99AA; /* darker pink */

}



/* Neat: cream background, black border, blue text */

#cc-style-select button[data-style="Neat"] {

  background: #FFFDD0;

  border: 2px solid #000;

  color: #000;

}

#cc-style-select button[data-style="Neat"]:hover {

  background: #F5F1B4; /* darker cream */

}



/* Goth: black background, green border/text */

#cc-style-select button[data-style="Goth"] {
    

  background: #B9B9B9;

  border: 2px solid #000;

  color: #D1E5F4;

}

#cc-style-select button[data-style="Goth"]:hover {

  background: #B0B0B0; /* slightly lighter black */

}


/* ========== CloudCloset Aesthetic Styles ========== */

/* 0) Base font for this section (Titillium Web already loaded elsewhere) */
.cc-outfit, .cc-collage, .cc-outfit-buttons {
  font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 1) Moodboard (collage) centered at top */
.cc-collage {
  display: flex;
  justify-content: center;
  margin: 18px auto 24px;
  max-width: 1100px;
  padding: 0 12px;
}
.cc-collage img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* 2) Product grid (images clickable), centered and responsive */
.cc-outfit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 12px;
}

/* 3) Individual card styling */
.cc-outfit-item {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-outfit-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* 4) Image area (square, centered) */
.cc-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;               /* square */
  background: #f8fafc;
}
.cc-thumb a,
.cc-thumb img,
.cc-thumb .cc-missing {
  position: absolute;
  inset: 10px;                     /* inner padding */
}
.cc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* keep full garment visible */
}
.cc-thumb a { display: block; }
.cc-missing {
  display: grid;
  place-items: center;
  background: #f2f4f8;
  color: #6b7280;
  font-size: 12px;
  border-radius: 10px;
}

/* 5) Diagonal store ribbon (top corner) */
.cc-ribbon {
  position: absolute;
  top: 14px;
  left: -44px;
  width: 160px;
  text-align: center;
  transform: rotate(-45deg);
  background: #D1E5F4;
  color: #111;
  font-weight: 600;
  font-size: 11px;                 /* small black lettering */
  letter-spacing: .2px;
  padding: 6px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  pointer-events: none;            /* keep clicks for image link */
}

/* 6) Text area under image */
.cc-info {
  padding: 12px 14px 10px;
}
.cc-info .cc-name {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.cc-info .cc-name a {
  color: inherit;
  text-decoration: none;
}
.cc-info .cc-name a:hover { text-decoration: underline; }
.cc-price {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

/* 7) “(Retry Image)”—style the existing button to look inline + smaller */
.cc-retry {
  display: inline-block;
  margin: 6px 0 12px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  text-decoration: underline;
}
.cc-retry::before { content: "("; margin-right: 1px; }
.cc-retry::after  { content: ")"; margin-left: 1px; }
.cc-retry:hover { color: #111; }

/* 8) Action buttons row */
.cc-outfit-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 10px auto 40px;
}
#cc-email-fit, #cc-start-over {
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid #111;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#cc-email-fit:hover, #cc-start-over:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  background: #f8fafc;
}

/* 9) Hide debug panel from users (still in DOM for you) */
#cc-outfit-debug,
div[style*="border:2px solid #eab1b1"][style*="background:#fff0f6"] {
  display: none !important;
}

/* ===== CloudCloset: Outfit Result Page ===== */

/* 0) Base */
#cc-outfit-root,
#cc-loading,
.cc-collage,
.cc-outfit,
.cc-outfit-buttons {
  font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 1) Loading banner */
#cc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding-top: 40px;
  font-size: 14pt;
}
#cc-loading .cc-hourglass {
  display: inline-block;
  font-size: 22px;
  animation: cc-spin 1s linear infinite;
  transform-origin: 50% 55%;
}
@keyframes cc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 2) Hide all debug output */
#cc-outfit-debug,
div[style*="background:#fff0f6"][style*="border:2px solid #eab1b1"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 3) Moodboard section */
.cc-collage-wrap {
  max-width: 1100px;
  margin: 8px auto 24px;
  padding: 0 12px;
  text-align: center;
}
.cc-collage-title {
  font-size: 30px;
  font-weight: 700;
  margin: 10px 0 12px;
}
.cc-collage {
  display: flex;
  justify-content: center;
}
.cc-collage img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* 4) Product grid: centered & responsive */
.cc-outfit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 12px;
}

/* 5) Card */
.cc-outfit-item {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-outfit-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* 6) Image area (square, clickable) */
.cc-thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: #f8fafc;
}
.cc-thumb a,
.cc-thumb img,
.cc-thumb .cc-missing {
  position: absolute;
  inset: 10px;
}
.cc-thumb a { display: block; }
.cc-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cc-missing {
  display: grid; place-items: center;
  background: #f2f4f8; color: #6b7280;
  font-size: 12px; border-radius: 10px;
}

/* 7) Diagonal store ribbon */
.cc-ribbon {
  position: absolute;
  top: 14px; left: -44px;
  width: 160px; text-align: center;
  transform: rotate(-45deg);
  background: #D1E5F4; color: #111;
  font-weight: 600; font-size: 11px; letter-spacing: .2px;
  padding: 6px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  pointer-events: none;
}

/* 8) Text under image: “Name: $Price (Retry Image)” */
.cc-info {
  padding: 12px 14px 10px;
  text-align: left;
}
.cc-info .cc-line {
  font-size: 15px;
  font-weight: 600;
}
.cc-info .cc-line .cc-price {
  margin-left: 6px;
}
.cc-retry {
  margin-left: 6px;
  font-size: 12px;
  color: #6b7280;
  text-decoration: underline;
  background: transparent;
  border: none;
  cursor: pointer;
}
.cc-retry:hover { color: #111; }

/* 9) Buttons row */
.cc-outfit-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 10px auto 36px;
}
#cc-email-fit, #cc-start-over {
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid #111;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#cc-email-fit:hover, #cc-start-over:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  background: #f8fafc;
}

/* Make "Replace item" look like a pink link, same font size as surrounding text */
.cc-info .cc-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-start; /* left aligned */
  flex-wrap: wrap;
}

.cc-replace.cc-replace-link {
  font: inherit;
  font-family: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #ff4da6;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Optional: Retry image keeps a neutral style */
.cc-retry {
  font: inherit;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
}/* End custom CSS */