@import url("https://fonts.cdnfonts.com/css/caslon-graphique");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&display=swap");

/* =========================================================
   CORIODERMINA® CLEAN COMPLETE CSS — HEADER RESET VERSION
   Purpose:
   - Replace the stacked header emergency patches with one stable system.
   - Keep Freewebstore's real #main_nav and #cat_nav working.
   - Remove browser color-mode logo overrides and repeated header hacks.
   - Keep product cards, buttons, blog, footer, and category sections premium.
   ========================================================= */

/* ========================= GLOBAL BASE ========================= */
*{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111111;
  overflow-x: hidden;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}

:root{
  --corio-brown: #8A5A24;
  --corio-brown-2: #9B5B25;
  --corio-brown-dark: #5A2F12;
  --corio-gold: #D4AF37;
  --corio-gold-2: #D7AE67;
  --corio-gold-soft: #F0CF93;
  --corio-cream: #FFF8EF;
  --corio-cream-2: #F2E1CF;
  --corio-ivory: #FFF6EC;
  --corio-ink: #5C3822;
  --corio-white: #FFFFFF;

  /* Header geometry */
  --corio-head-height: 180px;
  --corio-side-cap: clamp(88px, 9vw, 160px);

  /* Logo */
  --corio-logo-left: clamp(135px, 8.5vw, 180px);
  --corio-logo-top: 27px;
  --corio-logo-width: clamp(235px, 15vw, 300px);
  --corio-logo-height: 120px;

  /* Utility row */
  --corio-util-top: 15px;
  --corio-util-right: clamp(100px, 8vw, 180px);

  /* Nav row and button sizes */
  --corio-nav-top: 108px;
  --corio-nav-left: clamp(255px, 17vw, 330px);
  --corio-nav-right: 42px;
  --corio-nav-gap: 12px;
  --corio-btn-height: 45px;

  --corio-home-w: 88px;
  --corio-about-w: 94px;
  --corio-best-w: 152px;
  --corio-contact-w: 120px;
  --corio-treatment-w: 258px;
  --corio-shipping-w: 208px;
  --corio-store-w: 162px;

  /* The #cat_nav dropdown is placed in the reserved slot after Contact. */
  --corio-treatment-left: calc(
    var(--corio-nav-left)
    + var(--corio-home-w)
    + var(--corio-about-w)
    + var(--corio-best-w)
    + var(--corio-contact-w)
    + (var(--corio-nav-gap) * 4)
  );
}

/* ========================= TOP ANNOUNCEMENT BAR ========================= */
.top-bar{
  position: relative;
  z-index: 9999;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: linear-gradient(90deg, #050403 0%, #1C120A 30%, #8A5A24 55%, #D6A84F 75%, #0B0705 100%) !important;
  color: #F7E6B2 !important;
  border-bottom: 1px solid rgba(247, 230, 178, 0.35) !important;
}

.top-bar a, .top-bar div{
  color: #F7E6B2 !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* =========================================================
   FREEWEBSTORE PREMIUM HEADER
   Uses actual structure:
   #header > .container > #logo_area + #header_right
   #header .grey_bar #cat_nav for the working product/category dropdown.
   ========================================================= */









/* Remove old pseudo-logo attempts from earlier patches. */


/* Logo */








/* Utility row */










/* Main navigation row */






/* Cart belongs in the utility row; the plain Choose page link is replaced by the working #cat_nav dropdown. */


/* Reserve the exact visual slot where the #cat_nav dropdown will sit. */













/* Store Links arrow and dropdown */













/* Transparent grey bar: keep category dropdown alive, remove visual bar and search. */


























/* ========================= CONTENT / PRODUCTS ========================= */
.section-title{
  text-align: center;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  color: #000000 !important;
  margin: 40px 0;
  animation: fadeUp .8s ease forwards;
}

.products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.product, .product_item, .product-box, .productBox, .prod_box, .product-card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F3EA 45%, #EFE4D4 100%) !important;
  border: 1px solid rgba(214,168,79,.35) !important;
  border-radius: 18px !important;
  padding: 28px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
  transition: all .3s ease;
}

.product-card::before{
  display: none !important;
}

.product-card::after, .product::after, .product_item::after, .product-box::after, .productBox::after, .prod_box::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,248,236,.28), transparent 48%);
  pointer-events: none;
}

.product:hover, .product_item:hover, .product-box:hover, .productBox:hover, .prod_box:hover, .product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
}

.product img, .product_item img, .product-box img, .productBox img, .prod_box img, .product-card img{
  background: #ffffff !important;
  border-radius: 14px !important;
}

.product-card h3, .product_name h5{
  position: relative;
  z-index: 1;
  color: #111111 !important;
}

.product-card h3{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

.product-card p{
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: #555555;
  margin: 0 0 18px;
  line-height: 1.5;
}

.corio-product-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.corio-product-card h3{ min-height: 74px; }
.corio-product-card p{ min-height: 68px; }

/* ========================= BUTTONS / CTA ========================= */
.btn, .btn-premium, input[type="button"], input[type="submit"], button.btn, .product .btn, .product_item .btn, .product-box .btn, .productBox .btn, .prod_box .btn, .product-card .btn, a[title*="Buy"], a[title*="Add"], a[href*="/cart"]{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 8px 5px 0 !important;
  padding: 0 20px !important;
  border: 2px solid #d9b46e !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at top left, rgba(255,235,190,.18), transparent 34%), linear-gradient(180deg, #9b5b25 0%, #7a451c 56%, #5a2f12 100%) !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(122,69,28,.23), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 16px rgba(217,180,110,.22) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease !important;
}

.btn:hover, .btn-premium:hover, input[type="button"]:hover, input[type="submit"]:hover, button.btn:hover, .product .btn:hover, .product_item .btn:hover, .product-card .btn:hover, a[title*="Buy"]:hover, a[title*="Add"]:hover, a[href*="/cart"]:hover{
  border-color: var(--corio-gold-soft) !important;
  background: radial-gradient(circle at top left, rgba(255,241,210,.22), transparent 36%), linear-gradient(180deg, #a86229 0%, #7a451c 55%, #4d260d 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(122,69,28,.28), 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 22px rgba(217,180,110,.32) !important;
}

/* ========================= PRICE DISPLAY ========================= */
.product_now_price, body .product_now_price, html body .product_now_price{
  color: #5A3115 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  background: transparent !important;
  filter: none !important;
}

.price_breakdown, .price_inc_tax, .price_ex_tax{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #674731 !important;
  overflow: visible !important;
  white-space: normal !important;
}

.price_inc_tax, .price_ex_tax{
  font-size: 18px;
  line-height: 1.4;
}

/* ========================= BLOG CARDS ========================= */
.home_blog_container, .home_blog_container .blog_item_home, .home_blog_container .blog_item_header, .home_blog_container .blog_item_content, .home_blog_container .blog_item_footer{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.home_blog_container .blog_item_home.panel{
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  margin: 22px auto !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}

.home_blog_container .blog_item_timestamp{
  margin: 14px 0 8px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

.home_blog_container .blog_item_title a, .home_blog_container .blog_item_title a[href*="/blog/"]{
  display: block !important;
  color: #111827 !important;
  background: transparent !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 25px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.home_blog_container .blog_item_content{
  margin: 0 0 16px !important;
  color: #374151 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.home_blog_container .blog_item_featured_image{
  display: block !important;
  min-height: 240px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

.home_blog_container .read_more.btn, .home_blog_container .blog_article_tag{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================= FAQ / TRUST / SEO BLOCKS ========================= */
.corio-faq, .corio-fr-seo, .corio-product-trust-fr{
  max-width: 900px;
  margin: 40px auto;
  padding: 28px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.045);
  font-family: Arial, Helvetica, sans-serif;
  color: #111111;
  text-align: center;
}

.corio-faq h2, .corio-fr-seo h2{
  margin: 0 0 18px;
  font-family: "Caslon Graphique", Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  color: #111111;
}

.corio-faq-item{
  padding: 18px 0;
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.corio-faq-item:last-child{ border-bottom: none; }
.corio-faq-item h3{ margin: 0 0 8px; font-size: 17px; line-height: 1.35; color: #111827; }
.corio-faq-item p, .corio-fr-seo p, .corio-product-trust-fr p{ margin: 0 auto 12px; font-size: 15px; line-height: 1.65; color: #4b5563; }
.corio-disclaimer{ margin-top: 20px; font-size: 13px; line-height: 1.55; color: #6b7280; }

/* ========================= SHOP BY CATEGORY DROPDOWNS ========================= */
.corio-products-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin: 0 -10px !important;
  overflow: visible !important;
}

.corio-product-card{
  float: none !important;
  width: 25% !important;
  padding: 10px !important;
  display: flex !important;
  overflow: visible !important;
}

.corio-card-shell{
  position: relative !important;
  width: 100% !important;
  min-height: 340px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.corio-card-copy{ flex: 1 1 auto !important; }

.corio-shop-dropdown{
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  margin-top: auto !important;
}

.corio-shop-dropdown summary{ list-style: none !important; }
.corio-shop-dropdown summary::-webkit-details-marker{ display: none !important; }

.corio-shop-dropdown > summary.corio-btn, .corio-btn, .corio-btn--dark, .corio-btn--caramel, .corio-btn--bronze, .corio-btn--ivory{
  width: 100% !important;
  min-height: 58px !important;
  margin-top: auto;
  border: 2px solid #d9b46e !important;
  background: radial-gradient(circle at top left, rgba(255,235,190,.18), transparent 34%), linear-gradient(180deg, #9b5b25 0%, #7a451c 56%, #5a2f12 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(122,69,28,.23), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 16px rgba(217,180,110,.22) !important;
}

.corio-dropdown-menu{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  z-index: 9999 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(217,180,110,.75) !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f7ead7 100%) !important;
  box-shadow: 0 18px 38px rgba(74,47,27,.22), 0 0 0 1px rgba(255,255,255,.75) inset !important;
}

.corio-dropdown-menu a{
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(122,69,28,.12) !important;
  color: #3a2415 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.corio-dropdown-menu a:hover, .corio-dropdown-menu a:focus{
  background: linear-gradient(180deg, #9b5b25 0%, #7a451c 58%, #5a2f12 100%) !important;
  border-color: #d9b46e !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
  outline: none !important;
}

/* ========================= FOOTER ========================= */
footer, #footer, .footer, .footer_wrap, #footer_area, .bottom, .bottom-bar, #bottom, #copyright{
  background: linear-gradient(135deg, #050403 0%, #1C120A 45%, #8A5A24 100%) !important;
  color: #F7E6B2 !important;
  border-top: 1px solid rgba(247,230,178,.35) !important;
}

footer a, #footer a, .footer a, .footer_wrap a, #footer_area a, .bottom a, .bottom-bar a, #bottom a, #copyright a{
  color: #F7E6B2 !important;
}

footer a:hover, #footer a:hover, .footer a:hover, .footer_wrap a:hover, #footer_area a:hover, .bottom a:hover, .bottom-bar a:hover, #bottom a:hover, #copyright a:hover{
  color: #ffffff !important;
}

#copyright{
  font-family: "Caslon Graphique", Georgia, serif;
  font-size: 14px;
  letter-spacing: .8px;
  opacity: .85;
  text-align: center;
  padding: 20px 0;
}

/* Footer policy tabs */
a[data-lang="Privacy"][title="Privacy"], a[data-lang="Terms"][title="Terms"], a[href*="storepageWwC8r.aspx"][title="Privacy"], a[href*="storepageuReR7.aspx"][title="Terms"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 116px !important;
  min-height: 42px !important;
  margin: 5px 6px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid #d9b46e !important;
  background: linear-gradient(180deg, #9b5b25 0%, #7a451c 56%, #5a2f12 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ========================= SPECIAL HIDES ========================= */
a[href*="freewebstore.com"], a[href*="utm_source"], iframe[src*="freewebstore"], img[src*="coriodermina4563_1737238122322.png"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================= ANIMATIONS ========================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1500px) {
  :root{
    --corio-head-height: 176px;
    --corio-logo-left: 145px;
    --corio-logo-top: 28px;
    --corio-logo-width: 260px;
    --corio-logo-height: 112px;
    --corio-nav-left: 250px;
    --corio-nav-right: 32px;
    --corio-nav-gap: 10px;
    --corio-home-w: 82px;
    --corio-about-w: 88px;
    --corio-best-w: 145px;
    --corio-contact-w: 112px;
    --corio-treatment-w: 248px;
    --corio-shipping-w: 198px;
    --corio-store-w: 154px;
    --corio-util-right: 110px;
  }

  

  
}

@media (max-width: 1280px) {
  :root{
    --corio-logo-left: 128px;
    --corio-logo-width: 225px;
    --corio-logo-height: 98px;
    --corio-nav-left: 215px;
    --corio-nav-gap: 8px;
    --corio-btn-height: 42px;
    --corio-home-w: 76px;
    --corio-about-w: 82px;
    --corio-best-w: 132px;
    --corio-contact-w: 104px;
    --corio-treatment-w: 230px;
    --corio-shipping-w: 185px;
    --corio-store-w: 142px;
  }

  

  
}



@media (max-width: 640px) {
  .section-title{ font-size: 32px; }
  .corio-product-card{ width: 100% !important; }
  .corio-card-shell{ min-height: 0 !important; }
  .home_blog_container .blog_item_title a{ font-size: 21px !important; }
}

/* =========================================================
   CORIODERMINA® V2 FIX — TREATMENT DROPDOWN OVERLAY + TRANSLATE RESTORE
   Purpose:
   1) Make Choose Your Treatment behave like a true dropdown,
      not an accordion that pushes the page/header.
   2) Restore the custom floating Google Translate control.
   3) Keep Dark Reader / dark-mode code removed.
   Paste this only if you are patching the previous clean CSS.
   For best results, replace the full CSS with the V2 complete file.
   ========================================================= */

/* -------------------------
   A) CHOOSE YOUR TREATMENT: TRUE OVERLAY DROPDOWN
   ------------------------- */

/* Desktop/tablet: grey_bar is only an invisible positioning layer */


/* Mobile only: stacked layout is okay below 768px */


/* -------------------------
   B) RESTORE CUSTOM GOOGLE TRANSLATE BUTTON
   Requires this HTML to exist:
   <div id="corio-google-translate">
     <span class="corio-translate-label">Translate</span>
     <div id="google_translate_element"></div>
   </div>
   ------------------------- */

#corio-google-translate{
  position: fixed !important;
  right: 16px !important;
  bottom: 18px !important;
  z-index: 100000 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 205px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 12px 14px !important;

  border-radius: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(247,230,178,.18), transparent 34%),
    linear-gradient(135deg, #050403 0%, #1c120a 45%, #8a5a24 100%) !important;
  border: 1px solid rgba(247,230,178,.48) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06) inset !important;

  font-family: Arial, Helvetica, sans-serif !important;
  text-align: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;

  transform: translateZ(0) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease !important;
}

#corio-google-translate:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(240,207,147,.85) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 22px rgba(217,180,110,.28) !important;
}

#corio-google-translate:active{
  transform: translateY(0) scale(.98) !important;
}

.corio-translate-label{
  display: block !important;
  margin: 0 0 8px !important;
  color: #f7e6b2 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

#google_translate_element{
  display: block !important;
  width: 100% !important;
  pointer-events: auto !important;
}

#google_translate_element .skiptranslate, #google_translate_element .goog-te-gadget{
  display: block !important;
  width: 100% !important;
  color: transparent !important;
  font-size: 0 !important;
  pointer-events: auto !important;
}

#google_translate_element .goog-te-gadget-simple{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 12px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f7ead7 100%) !important;
  border: 1px solid rgba(217,180,110,.75) !important;
  color: #3a2415 !important;
  box-sizing: border-box !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

#google_translate_element .goog-te-gadget-simple:hover{
  background:
    radial-gradient(circle at top left, rgba(255,241,210,.24), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f3dfbd 100%) !important;
  border-color: #f0cf93 !important;
  transform: translateY(-1px) !important;
}

#google_translate_element .goog-te-gadget-simple a, #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  width: 100% !important;

  color: #3a2415 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

#google_translate_element .goog-te-gadget-simple span, #google_translate_element .goog-te-gadget-simple font, #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed span, #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed font{
  color: #3a2415 !important;
  background: transparent !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

#google_translate_element .goog-te-gadget-icon, #google_translate_element img.goog-te-gadget-icon, #google_translate_element img[src*="google.com/images/cleardot.gif"].goog-te-gadget-icon, #google_translate_element img[style*="te_ctrl3.gif"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  pointer-events: none !important;
}

#google_translate_element .goog-te-gadget-simple img:not(.goog-te-gadget-icon){
  display: none !important;
  pointer-events: none !important;
}

/* Hide Google top bar/tooltip only. Do NOT hide all .skiptranslate iframes. */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, iframe.skiptranslate.goog-te-banner-frame, iframe[class*="goog-te-banner"], iframe[class*="VIpgJd-ZVi9od-ORHb"], #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Prevent Google Translate from pushing the page down */
html, body{
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  #corio-google-translate{
    right: 12px !important;
    bottom: 12px !important;
    width: 190px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  .corio-translate-label{
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }

  #google_translate_element .goog-te-gadget-simple, #google_translate_element .goog-te-gadget-simple a, #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed, #google_translate_element .goog-te-gadget-simple span, #google_translate_element .goog-te-gadget-simple font{
    font-size: 11px !important;
  }
}

/* =========================================================
   CORIODERMINA® V3 — DROPDOWN HOVER BRIDGE + PREMIUM BUTTON CLEANUP
   Purpose:
   1) Stop Choose Your Treatment / Store Links dropdowns from disappearing
      when the cursor moves from the tab to the dropdown panel.
   2) Replace the heavy dark brown "fecal" pill buttons across product cards
      with cleaner ivory/gold premium buttons.
   3) Keep the header navigation luxury style intact.

   Paste at the VERY BOTTOM of Custom CSS, or use the complete V3 file.
   ========================================================= */

:root{
  --corio-btn-ivory: #fff8ef;
  --corio-btn-ivory-2: #f2e1cf;
  --corio-btn-ivory-3: #fffdf8;
  --corio-btn-gold: #d7ae67;
  --corio-btn-gold-2: #f0cf93;
  --corio-btn-brown: #8a5a24;
  --corio-btn-brown-dark: #5c3822;
  --corio-btn-shadow: rgba(102, 58, 22, 0.14);
}

/* =========================================================
   A) DROPDOWN HOVER FIX — no more disappearing panel
   ========================================================= */

/* Keep nav/dropdown parents unclipped */


/* Parent list items must hold hover while cursor crosses the tiny gap */


/* Invisible hover bridge under Store Links */


/* Invisible hover bridge under Choose Your Treatment */


/* Move dropdown panels close enough to the tab that hover cannot break */


/* Store Links dropdown close to the tab too */


/* Keep Choose dropdown visible while hovering the dropdown itself */


/* Keep Store Links dropdown visible while hovering its dropdown */


/* Dropdown panels: premium, readable, and not accordion-like */


/* Dropdown links */




/* =========================================================
   B) CLEAN PREMIUM BUTTONS — product Details / Buy / CTAs
   ========================================================= */

/* Remove dark heavy capsule treatment from product card buttons */
.product .btn, .product_item .btn, .product-box .btn, .productBox .btn, .prod_box .btn, .product-card .btn, .products-grid .btn, .featured_products .btn, #featured_products .btn, .product a.btn, .product_item a.btn, .product-box a.btn, .productBox a.btn, .prod_box a.btn, .product-card a.btn, .products-grid a.btn, .featured_products a.btn, #featured_products a.btn, .product input[type="button"], .product input[type="submit"], .product_item input[type="button"], .product_item input[type="submit"], .product-box input[type="button"], .product-box input[type="submit"], .productBox input[type="button"], .productBox input[type="submit"], .prod_box input[type="button"], .prod_box input[type="submit"], .product-card input[type="button"], .product-card input[type="submit"], .product a[href*="/cart"], .product_item a[href*="/cart"], .product-box a[href*="/cart"], .productBox a[href*="/cart"], .prod_box a[href*="/cart"], .product-card a[href*="/cart"], a[title*="Buy"], a[title*="Add"], button[name*="cart"], input[value*="Buy"], input[value*="Add"]{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 112px !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;

  margin: 6px 5px 0 !important;
  padding: 0 18px !important;

  border-radius: 12px !important;
  border: 1.5px solid var(--corio-btn-gold) !important;

  background:
    linear-gradient(180deg, var(--corio-btn-ivory-3) 0%, var(--corio-btn-ivory) 46%, var(--corio-btn-ivory-2) 100%) !important;
  color: var(--corio-btn-brown-dark) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 4px 10px var(--corio-btn-shadow) !important;

  transform: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

/* Kill the old circular glow/ring pseudo-elements on product buttons */
.product .btn::before, .product .btn::after, .product_item .btn::before, .product_item .btn::after, .product-box .btn::before, .product-box .btn::after, .productBox .btn::before, .productBox .btn::after, .prod_box .btn::before, .prod_box .btn::after, .product-card .btn::before, .product-card .btn::after, .products-grid .btn::before, .products-grid .btn::after, .featured_products .btn::before, .featured_products .btn::after, #featured_products .btn::before, #featured_products .btn::after, .product a[href*="/cart"]::before, .product a[href*="/cart"]::after, .product_item a[href*="/cart"]::before, .product_item a[href*="/cart"]::after, .product-box a[href*="/cart"]::before, .product-box a[href*="/cart"]::after, .productBox a[href*="/cart"]::before, .productBox a[href*="/cart"]::after, .prod_box a[href*="/cart"]::before, .prod_box a[href*="/cart"]::after, .product-card a[href*="/cart"]::before, .product-card a[href*="/cart"]::after, a[title*="Buy"]::before, a[title*="Buy"]::after, a[title*="Add"]::before, a[title*="Add"]::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
}

/* Hover state: classy gold edge, no chocolate blob */
.product .btn:hover, .product_item .btn:hover, .product-box .btn:hover, .productBox .btn:hover, .prod_box .btn:hover, .product-card .btn:hover, .products-grid .btn:hover, .featured_products .btn:hover, #featured_products .btn:hover, .product a.btn:hover, .product_item a.btn:hover, .product-box a.btn:hover, .productBox a.btn:hover, .prod_box a.btn:hover, .product-card a.btn:hover, .products-grid a.btn:hover, .featured_products a.btn:hover, #featured_products a.btn:hover, .product input[type="button"]:hover, .product input[type="submit"]:hover, .product_item input[type="button"]:hover, .product_item input[type="submit"]:hover, .product-box input[type="button"]:hover, .product-box input[type="submit"]:hover, .productBox input[type="button"]:hover, .productBox input[type="submit"]:hover, .prod_box input[type="button"]:hover, .prod_box input[type="submit"]:hover, .product-card input[type="button"]:hover, .product-card input[type="submit"]:hover, .product a[href*="/cart"]:hover, .product_item a[href*="/cart"]:hover, .product-box a[href*="/cart"]:hover, .productBox a[href*="/cart"]:hover, .prod_box a[href*="/cart"]:hover, .product-card a[href*="/cart"]:hover, a[title*="Buy"]:hover, a[title*="Add"]:hover, button[name*="cart"]:hover, input[value*="Buy"]:hover, input[value*="Add"]:hover{
  border-color: var(--corio-btn-gold-2) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff4e5 52%, #ead0ad 100%) !important;
  color: #3a2415 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 18px rgba(102,58,22,.18),
    0 0 0 1px rgba(240,207,147,.35) !important;
}

/* Optional: make Buy slightly warmer but still classy */
.product a[href*="/cart"], .product_item a[href*="/cart"], .product-box a[href*="/cart"], .productBox a[href*="/cart"], .prod_box a[href*="/cart"], .product-card a[href*="/cart"], a[title*="Buy"], input[value*="Buy"]{
  background:
    linear-gradient(180deg, #fff9ef 0%, #f5e3c7 56%, #dfbd85 100%) !important;
}

/* Keep product prices clean and readable */
.product_now_price, .price{
  color: #5A3115 !important;
  text-shadow: none !important;
}

.price_inc_tax, .price_ex_tax{
  color: #674731 !important;
  text-shadow: none !important;
}

/* =========================================================
   C) CLEAN GENERAL TABS WITHOUT TOUCHING HEADER NAV
   ========================================================= */

/* Only non-header, non-product generic tabs */




/* =========================================================
   CORIODERMINA® V4 — REFERENCE HEADER PALETTE + NO-HOTDOG BUTTONS
   Goal:
   - Match the attached luxury header reference: ivory/cream tabs,
     thin gold borders, caramel side caps, brown text.
   - Remove the dark "hotdog / black bean" product buttons.
   - Keep dropdown behavior from V3.
   Paste at the VERY BOTTOM, or use the complete V4 file.
   ========================================================= */

:root{
  --corio-ref-cream: #fff8ef;
  --corio-ref-cream-2: #f3e4d4;
  --corio-ref-cream-3: #fffdf8;
  --corio-ref-gold: #d7ae67;
  --corio-ref-gold-soft: #f0cf93;
  --corio-ref-brown: #8a5a24;
  --corio-ref-brown-2: #9b5b25;
  --corio-ref-brown-dark: #5a2f12;
  --corio-ref-ink: #4b2d1b;
  --corio-ref-shadow: rgba(92, 56, 34, 0.13);
}

/* =========================================================
   A) HEADER COLOR / FINISH TO MATCH THE REFERENCE
   ========================================================= */



/* Center ivory panel shine */


/* Keep header text brown/gold, not black/dark blob */


/* =========================================================
   B) HEADER TABS — REFERENCE LOOK, NOT HOTDOGS
   ========================================================= */





/* Store Links and Choose arrows stay neat */


/* =========================================================
   C) PRODUCT BUTTONS — REMOVE HOTDOG / BLACK BEAN STYLE
   ========================================================= */

/* Strong selector group for product buttons only */
html body .product .btn, html body .product_item .btn, html body .product-box .btn, html body .productBox .btn, html body .prod_box .btn, html body .product-card .btn, html body .products-grid .product .btn, html body .products-grid .product_item .btn, html body .products-grid .product-box .btn, html body .products-grid .productBox .btn, html body .products-grid .prod_box .btn, html body .products-grid .product-card .btn, html body .featured_products .product .btn, html body .featured_products .product_item .btn, html body .featured_products .product-box .btn, html body .featured_products .productBox .btn, html body .featured_products .prod_box .btn, html body .featured_products .product-card .btn, html body #featured_products .product .btn, html body #featured_products .product_item .btn, html body #featured_products .product-box .btn, html body #featured_products .productBox .btn, html body #featured_products .prod_box .btn, html body #featured_products .product-card .btn, html body .product a[href*="/cart"], html body .product_item a[href*="/cart"], html body .product-box a[href*="/cart"], html body .productBox a[href*="/cart"], html body .prod_box a[href*="/cart"], html body .product-card a[href*="/cart"], html body .products-grid .product a[href*="/cart"], html body .products-grid .product_item a[href*="/cart"], html body .products-grid .product-box a[href*="/cart"], html body .products-grid .productBox a[href*="/cart"], html body .products-grid .prod_box a[href*="/cart"], html body .products-grid .product-card a[href*="/cart"], html body .product input[type="button"], html body .product input[type="submit"], html body .product_item input[type="button"], html body .product_item input[type="submit"], html body .product-box input[type="button"], html body .product-box input[type="submit"], html body .productBox input[type="button"], html body .productBox input[type="submit"], html body .prod_box input[type="button"], html body .prod_box input[type="submit"], html body .product-card input[type="button"], html body .product-card input[type="submit"]{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 106px !important;
  max-width: 150px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 6px 5px 0 !important;
  padding: 0 16px !important;

  border-radius: 9px !important;
  border: 1.5px solid var(--corio-ref-gold) !important;

  background:
    linear-gradient(180deg, #fffdf8 0%, #f8ebd9 56%, #efdbc1 100%) !important;
  color: var(--corio-ref-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .35px !important;

  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 3px 9px rgba(102,58,22,.12) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: hidden !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Remove every old circle/ring/highlight blob from product buttons */
html body .product .btn::before, html body .product .btn::after, html body .product_item .btn::before, html body .product_item .btn::after, html body .product-box .btn::before, html body .product-box .btn::after, html body .productBox .btn::before, html body .productBox .btn::after, html body .prod_box .btn::before, html body .prod_box .btn::after, html body .product-card .btn::before, html body .product-card .btn::after, html body .products-grid .btn::before, html body .products-grid .btn::after, html body .featured_products .btn::before, html body .featured_products .btn::after, html body #featured_products .btn::before, html body #featured_products .btn::after, html body .product a[href*="/cart"]::before, html body .product a[href*="/cart"]::after, html body .product_item a[href*="/cart"]::before, html body .product_item a[href*="/cart"]::after, html body .product-box a[href*="/cart"]::before, html body .product-box a[href*="/cart"]::after, html body .productBox a[href*="/cart"]::before, html body .productBox a[href*="/cart"]::after, html body .prod_box a[href*="/cart"]::before, html body .prod_box a[href*="/cart"]::after, html body .product-card a[href*="/cart"]::before, html body .product-card a[href*="/cart"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Product button hover: premium ivory, not brown fill */
html body .product .btn:hover, html body .product_item .btn:hover, html body .product-box .btn:hover, html body .productBox .btn:hover, html body .prod_box .btn:hover, html body .product-card .btn:hover, html body .products-grid .product .btn:hover, html body .products-grid .product_item .btn:hover, html body .products-grid .product-box .btn:hover, html body .products-grid .productBox .btn:hover, html body .products-grid .prod_box .btn:hover, html body .products-grid .product-card .btn:hover, html body .featured_products .product .btn:hover, html body .featured_products .product_item .btn:hover, html body .featured_products .product-box .btn:hover, html body .featured_products .productBox .btn:hover, html body .featured_products .prod_box .btn:hover, html body .featured_products .product-card .btn:hover, html body #featured_products .product .btn:hover, html body #featured_products .product_item .btn:hover, html body #featured_products .product-box .btn:hover, html body #featured_products .productBox .btn:hover, html body #featured_products .prod_box .btn:hover, html body #featured_products .product-card .btn:hover, html body .product a[href*="/cart"]:hover, html body .product_item a[href*="/cart"]:hover, html body .product-box a[href*="/cart"]:hover, html body .productBox a[href*="/cart"]:hover, html body .prod_box a[href*="/cart"]:hover, html body .product-card a[href*="/cart"]:hover, html body .products-grid .product a[href*="/cart"]:hover, html body .products-grid .product_item a[href*="/cart"]:hover, html body .products-grid .product-box a[href*="/cart"]:hover, html body .products-grid .productBox a[href*="/cart"]:hover, html body .products-grid .prod_box a[href*="/cart"]:hover, html body .products-grid .product-card a[href*="/cart"]:hover, html body .product input[type="button"]:hover, html body .product input[type="submit"]:hover, html body .product_item input[type="button"]:hover, html body .product_item input[type="submit"]:hover, html body .product-box input[type="button"]:hover, html body .product-box input[type="submit"]:hover, html body .productBox input[type="button"]:hover, html body .productBox input[type="submit"]:hover, html body .prod_box input[type="button"]:hover, html body .prod_box input[type="submit"]:hover, html body .product-card input[type="button"]:hover, html body .product-card input[type="submit"]:hover{
  border-color: var(--corio-ref-gold-soft) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff3e2 52%, #e9cfae 100%) !important;
  color: #3a2415 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 6px 14px rgba(102,58,22,.16),
    0 0 0 1px rgba(240,207,147,.32) !important;
  transform: translateY(-1px) !important;
}

/* Details + Buy stack spacing */
html body .product .btn + .btn, html body .product_item .btn + .btn, html body .product-box .btn + .btn, html body .productBox .btn + .btn, html body .prod_box .btn + .btn, html body .product-card .btn + .btn, html body .products-grid .btn + .btn{
  margin-top: 7px !important;
}

/* Buy can be slightly warmer but still NOT a brown blob */
html body .product a[href*="/cart"], html body .product_item a[href*="/cart"], html body .product-box a[href*="/cart"], html body .productBox a[href*="/cart"], html body .prod_box a[href*="/cart"], html body .product-card a[href*="/cart"], html body .product input[value*="Buy"], html body .product_item input[value*="Buy"], html body .product-box input[value*="Buy"], html body .productBox input[value*="Buy"], html body .prod_box input[value*="Buy"], html body .product-card input[value*="Buy"]{
  background:
    linear-gradient(180deg, #fff9ef 0%, #f4e2c8 56%, #e6c99e 100%) !important;
}

/* =========================================================
   D) GENERIC STORE TABS / BUTTONS — CREAM GOLD, NO PILL BLOB
   Do not override the header nav or special dark footer policy pills.
   ========================================================= */

html body input.btn[type="button"], html body input.btn[type="submit"]{
  border-radius: 9px !important;
  border: 1.5px solid var(--corio-ref-gold) !important;
  background:
    linear-gradient(180deg, #fffdf8 0%, #f8ebd9 56%, #efdbc1 100%) !important;
  color: var(--corio-ref-ink) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 3px 9px rgba(102,58,22,.12) !important;
  text-shadow: none !important;
}

/* Keep footer policy buttons if you still like them dark; otherwise comment this out. */
footer a.btn, #footer a.btn, footer a[title="Privacy"], footer a[title="Terms"], #footer a[title="Privacy"], #footer a[title="Terms"]{
  border-radius: 999px !important;
}

/* =========================================================
   CORIODERMINA® V5 — LOGO POSITION + VISIBLE GOLD OUTLINES + CLEAN .BTN
   Fixes from latest screenshot:
   - Logo was too far left / not seated in the cream panel.
   - Gold outlines were too faint.
   - .btn / <div class="btn">Buy</div> still looked like hotdogs/black beans.
   - Removes old .btn pseudo side-lobes/rings globally, while protecting header nav.

   Paste at the VERY BOTTOM, or replace full CSS with the V5 file.
   ========================================================= */

:root{
  --corio-v5-gold: #b9852f;
  --corio-v5-gold-2: #d7ae67;
  --corio-v5-gold-3: #f0cf93;
  --corio-v5-cream: #fffaf3;
  --corio-v5-cream-2: #f5e6d2;
  --corio-v5-cream-3: #ead1b0;
  --corio-v5-ink: #4b2d1b;
  --corio-v5-shadow: rgba(92, 56, 34, 0.18);

  /* Logo position: larger number moves logo right/down */
  --corio-v5-logo-left: clamp(240px, 17vw, 330px);
  --corio-v5-logo-top: 24px;
  --corio-v5-logo-width: clamp(255px, 16vw, 330px);
  --corio-v5-logo-height: 125px;
}

/* =========================================================
   A) LOGO — SEAT IT INSIDE THE CREAM PANEL, NOT THE BROWN CAP
   ========================================================= */







/* Move first nav tab slightly right so logo has breathing room */
@media (min-width: 1201px) {
  :root{
    --corio-logo-w: clamp(255px, 16vw, 330px) !important;
    --corio-nav-left: clamp(420px, 28vw, 560px) !important;
  }
}

/* =========================================================
   B) HEADER TAB OUTLINES — MAKE GOLD EASIER TO SEE
   ========================================================= */





/* =========================================================
   C) CLEAN ALL .BTN BUTTONS — FIX <div class="btn">Buy</div>
   ========================================================= */

/* This is the important global cleanup.
   It excludes header nav and the floating translate control. */
html body div.btn, html body span.btn, html body button.btn, html body input.btn[type="button"], html body input.btn[type="submit"]{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 108px !important;
  max-width: 170px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 6px 5px 0 !important;
  padding: 0 17px !important;

  border-radius: 8px !important;
  border: 2px solid var(--corio-v5-gold) !important;

  background:
    linear-gradient(180deg, var(--corio-v5-cream) 0%, var(--corio-v5-cream-2) 56%, #efd9bb 100%) !important;
  background-color: var(--corio-v5-cream-2) !important;
  background-image:
    linear-gradient(180deg, var(--corio-v5-cream) 0%, var(--corio-v5-cream-2) 56%, #efd9bb 100%) !important;

  color: var(--corio-v5-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.35px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 0 0 1px rgba(255,255,255,0.52) inset,
    0 4px 10px rgba(102,58,22,0.14) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;

  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

/* HARD KILL the old side-caps / rings / hotdog lobes */
html body .btn::before, html body .btn::after, html body a.btn::before, html body a.btn::after, html body div.btn::before, html body div.btn::after, html body span.btn::before, html body span.btn::after, html body button.btn::before, html body button.btn::after, html body input.btn::before, html body input.btn::after, html body input[type="button"]::before, html body input[type="button"]::after, html body input[type="submit"]::before, html body input[type="submit"]::after, html body a[title*="Buy"]::before, html body a[title*="Buy"]::after, html body a[title*="Add"]::before, html body a[title*="Add"]::after, html body a[href*="/cart"]::before, html body a[href*="/cart"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Button hover: clean premium lift */
html body div.btn:hover, html body span.btn:hover, html body button.btn:hover, html body input.btn[type="button"]:hover, html body input.btn[type="submit"]:hover{
  border-color: var(--corio-v5-gold-3) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f9e5ca 52%, #e8c79b 100%) !important;
  color: #342010 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 0 0 1px rgba(185,133,47,0.18) inset,
    0 7px 14px rgba(102,58,22,0.18) !important;
  transform: translateY(-1px) !important;
}

/* Product card button spacing */
html body .product .btn, html body .product_item .btn, html body .product-box .btn, html body .productBox .btn, html body .prod_box .btn, html body .product-card .btn, html body .products-grid .btn{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If Details and Buy are stacked, keep them neat */
html body .product .btn + .btn, html body .product_item .btn + .btn, html body .product-box .btn + .btn, html body .productBox .btn + .btn, html body .prod_box .btn + .btn, html body .product-card .btn + .btn, html body .products-grid .btn + .btn{
  margin-top: 8px !important;
}

/* Make Buy and Details visually consistent */
html body div.btn, html body .btn{
  color: var(--corio-v5-ink) !important;
}

/* =========================================================
   D) MOBILE TUNE
   ========================================================= */

@media (max-width: 768px) {
  :root{
    --corio-v5-logo-left: 50%;
    --corio-v5-logo-top: 12px;
    --corio-v5-logo-width: 235px;
    --corio-v5-logo-height: 90px;
  }

  

  html body .btn, html body div.btn, html body a.btn, html body input[type="button"], html body input[type="submit"]{
    min-width: 102px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
}

/* =========================================================
   CORIODERMINA® V6 — CHOOSE TAB ALIGN + TRUE BUY BUTTON CLEANUP
   Fixes:
   1) "Choose Your Treatment" sitting slightly out of line.
   2) <div class="btn">Buy</div> inheriting old pill/side-cap effects.

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  /* Move ONLY the working Choose Your Treatment tab */
  --corio-v6-choose-nudge-y: 1px;  /* + lower, - higher */
  --corio-v6-choose-height: 44px;

  /* Clean button palette */
  --corio-v6-gold: #b9852f;
  --corio-v6-gold-soft: #d7ae67;
  --corio-v6-cream: #fffaf3;
  --corio-v6-cream-2: #f3e4d4;
  --corio-v6-ink: #4b2d1b;
}

/* =========================================================
   A) ALIGN "CHOOSE YOUR TREATMENT" WITH CONTACT / SHIPPING
   ========================================================= */

/* Seat the working Freewebstore #cat_nav tab at the same visual height */






/* Keep arrow vertically centered */




/* =========================================================
   B) TRUE BUY BUTTON CLEANUP
   Why the Buy button looked wrong:
   The store uses <div class="btn">Buy</div>, and older CSS gave
   .btn / .btn::before / .btn::after decorative rings and side lobes.
   This hard-resets the actual div.btn shape.
   ========================================================= */

/* Product area buttons only — protect header tabs */
html body .product div.btn, html body .product_item div.btn, html body .product-box div.btn, html body .productBox div.btn, html body .prod_box div.btn, html body .product-card div.btn, html body .products-grid div.btn, html body .featured_products div.btn, html body #featured_products div.btn, html body div.btn[data-lang="Buy"], html body div.btn[data-lang="Details"], html body div.btn{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 7px auto 0 !important;
  padding: 0 16px !important;

  border-radius: 8px !important;
  border: 2px solid var(--corio-v6-gold) !important;

  background: linear-gradient(180deg, var(--corio-v6-cream) 0%, var(--corio-v6-cream-2) 100%) !important;
  background-color: var(--corio-v6-cream-2) !important;
  background-image: linear-gradient(180deg, var(--corio-v6-cream) 0%, var(--corio-v6-cream-2) 100%) !important;

  color: var(--corio-v6-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 40px !important;
  letter-spacing: 0.35px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 10px rgba(102,58,22,.14) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Absolute kill for old "hotdog" side caps / rings on div.btn */
html body div.btn::before, html body div.btn::after, html body .product div.btn::before, html body .product div.btn::after, html body .product_item div.btn::before, html body .product_item div.btn::after, html body .product-box div.btn::before, html body .product-box div.btn::after, html body .productBox div.btn::before, html body .productBox div.btn::after, html body .prod_box div.btn::before, html body .prod_box div.btn::after, html body .product-card div.btn::before, html body .product-card div.btn::after, html body .products-grid div.btn::before, html body .products-grid div.btn::after, html body .featured_products div.btn::before, html body .featured_products div.btn::after, html body #featured_products div.btn::before, html body #featured_products div.btn::after{
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: static !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Hover: still premium, but no dark fill */
html body div.btn:hover, html body .product div.btn:hover, html body .product_item div.btn:hover, html body .product-box div.btn:hover, html body .productBox div.btn:hover, html body .prod_box div.btn:hover, html body .product-card div.btn:hover, html body .products-grid div.btn:hover{
  border-color: var(--corio-v6-gold-soft) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7e7cf 100%) !important;
  color: #342010 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 7px 14px rgba(102,58,22,.16) !important;
}

/* If Buy sits inside an anchor/button wrapper, neutralize the wrapper so only div.btn shows */
html body a:has(> div.btn), html body button:has(> div.btn), html body form:has(div.btn) button, html body form:has(div.btn) a{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body div.btn{
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 38px !important;
  }
}

/* =========================================================
   CORIODERMINA® V7 — NUCLEAR BUY BUTTON + CHOOSE TAB MICRO-FIX
   Purpose:
   - Fix persistent malformed Buy/Details buttons caused by old .btn wrappers,
     side-caps, rings, and ::before/::after effects.
   - Align Choose Your Treatment with Contact / Shipping & Returns.
   - Keep header dropdowns working.

   Paste this at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-v7-gold: #b9852f;
  --corio-v7-gold-soft: #d7ae67;
  --corio-v7-gold-bright: #f0cf93;
  --corio-v7-cream: #fffaf3;
  --corio-v7-cream-2: #f4e4ce;
  --corio-v7-cream-3: #ead2b2;
  --corio-v7-ink: #4b2d1b;

  /* Choose Your Treatment alignment */
  --corio-v7-choose-top-fix: -1px; /* use 0px, -1px, or -2px */
}

/* =========================================================
   A) CHOOSE YOUR TREATMENT — MICRO ALIGNMENT
   ========================================================= */







/* =========================================================
   B) NEUTRALIZE BUTTON WRAPPERS THAT CREATE SIDE-LOBES
   ========================================================= */

/* If Freewebstore wraps <div class="btn">Buy</div> inside an anchor/button/form,
   make the wrapper invisible so only the clean .btn block is visible. */
html body .products-grid a:has(> .btn), html body .featured_products a:has(> .btn), html body #featured_products a:has(> .btn), html body .product a:has(> .btn), html body .product_item a:has(> .btn), html body .product-box a:has(> .btn), html body .productBox a:has(> .btn), html body .prod_box a:has(> .btn), html body .product-card a:has(> .btn), html body .products-grid button:has(> .btn), html body .featured_products button:has(> .btn), html body #featured_products button:has(> .btn), html body .product button:has(> .btn), html body .product_item button:has(> .btn), html body .product-box button:has(> .btn), html body .productBox button:has(> .btn), html body .prod_box button:has(> .btn), html body .product-card button:has(> .btn){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;

  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Kill wrapper pseudo-elements too */
html body .products-grid a:has(> .btn)::before, html body .products-grid a:has(> .btn)::after, html body .featured_products a:has(> .btn)::before, html body .featured_products a:has(> .btn)::after, html body #featured_products a:has(> .btn)::before, html body #featured_products a:has(> .btn)::after, html body .product a:has(> .btn)::before, html body .product a:has(> .btn)::after, html body .product_item a:has(> .btn)::before, html body .product_item a:has(> .btn)::after, html body .product-box a:has(> .btn)::before, html body .product-box a:has(> .btn)::after, html body .productBox a:has(> .btn)::before, html body .productBox a:has(> .btn)::after, html body .prod_box a:has(> .btn)::before, html body .prod_box a:has(> .btn)::after, html body .product-card a:has(> .btn)::before, html body .product-card a:has(> .btn)::after, html body .products-grid button:has(> .btn)::before, html body .products-grid button:has(> .btn)::after, html body .product button:has(> .btn)::before, html body .product button:has(> .btn)::after, html body .product_item button:has(> .btn)::before, html body .product_item button:has(> .btn)::after, html body .product-card button:has(> .btn)::before, html body .product-card button:has(> .btn)::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* =========================================================
   C) TRUE CLEAN STYLE FOR THE ACTUAL BUTTON
   ========================================================= */

/* Covers <div class="btn">Buy</div>, Details buttons, cart buttons, and common store action buttons.
   Header nav and Translate are excluded. */
html body .products-grid .btn, html body .featured_products .btn, html body #featured_products .btn, html body .product .btn, html body .product_item .btn, html body .product-box .btn, html body .productBox .btn, html body .prod_box .btn, html body .product-card .btn, html body input.btn[type="button"], html body input.btn[type="submit"], html body .product input[type="button"], html body .product input[type="submit"], html body .product_item input[type="button"], html body .product_item input[type="submit"], html body .product-card input[type="button"], html body .product-card input[type="submit"]{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  float: none !important;
  clear: none !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 7px auto 0 !important;
  padding: 0 14px !important;

  border: 2px solid var(--corio-v7-gold) !important;
  border-radius: 8px !important;

  background:
    linear-gradient(180deg, var(--corio-v7-cream) 0%, var(--corio-v7-cream-2) 58%, var(--corio-v7-cream-3) 100%) !important;
  background-color: var(--corio-v7-cream-2) !important;
  background-image:
    linear-gradient(180deg, var(--corio-v7-cream) 0%, var(--corio-v7-cream-2) 58%, var(--corio-v7-cream-3) 100%) !important;

  color: var(--corio-v7-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.35px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 10px rgba(102,58,22,0.14) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;

  overflow: hidden !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

/* Extra force for the exact user-provided markup:
   <div class="btn">Buy</div> */
html body div.btn{
  display: inline-flex !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
  border: 2px solid var(--corio-v7-gold) !important;
  background: linear-gradient(180deg, var(--corio-v7-cream) 0%, var(--corio-v7-cream-2) 58%, var(--corio-v7-cream-3) 100%) !important;
  color: var(--corio-v7-ink) !important;
}

/* HARD KILL old hotdog rings/side caps/highlights on the real button */
html body .btn::before, html body .btn::after, html body div.btn::before, html body div.btn::after, html body a.btn::before, html body a.btn::after, html body button.btn::before, html body button.btn::after, html body .products-grid .btn::before, html body .products-grid .btn::after, html body .featured_products .btn::before, html body .featured_products .btn::after, html body #featured_products .btn::before, html body #featured_products .btn::after, html body .product .btn::before, html body .product .btn::after, html body .product_item .btn::before, html body .product_item .btn::after, html body .product-card .btn::before, html body .product-card .btn::after, html body .product a[href*="/cart"]::before, html body .product a[href*="/cart"]::after, html body .product_item a[href*="/cart"]::before, html body .product_item a[href*="/cart"]::after, html body .product-card a[href*="/cart"]::before, html body .product-card a[href*="/cart"]::after, html body .products-grid a[href*="/cart"]::before, html body .products-grid a[href*="/cart"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: static !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;

  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  pointer-events: none !important;
}

/* Clean button hover */
html body .products-grid .btn:hover, html body .featured_products .btn:hover, html body #featured_products .btn:hover, html body .product .btn:hover, html body .product_item .btn:hover, html body .product-card .btn:hover, html body div.btn:hover, html body a.btn:hover, html body button.btn:hover, html body input.btn[type="button"]:hover, html body input.btn[type="submit"]:hover, html body .product input[type="button"]:hover, html body .product input[type="submit"]:hover, html body .product_item input[type="button"]:hover, html body .product_item input[type="submit"]:hover, html body .product-card input[type="button"]:hover, html body .product-card input[type="submit"]:hover, html body .product a[href*="/cart"]:hover, html body .product_item a[href*="/cart"]:hover, html body .product-card a[href*="/cart"]:hover, html body .products-grid a[href*="/cart"]:hover{
  border-color: var(--corio-v7-gold-bright) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8e5ca 58%, #e8c79b 100%) !important;
  color: #342010 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 7px 14px rgba(102,58,22,0.16) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   D) IF OLD THEME PUTS PRODUCT BUTTONS IN A STACK, KEEP THEM CLEAN
   ========================================================= */

html body .products-grid .btn + .btn, html body .featured_products .btn + .btn, html body #featured_products .btn + .btn, html body .product .btn + .btn, html body .product_item .btn + .btn, html body .product-card .btn + .btn{
  margin-top: 8px !important;
}

html body .products-grid .btn span, html body .products-grid .btn font, html body .product .btn span, html body .product .btn font, html body .product_item .btn span, html body .product_item .btn font, html body .product-card .btn span, html body .product-card .btn font, html body div.btn span, html body div.btn font{
  color: var(--corio-v7-ink) !important;
  background: transparent !important;
  font: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body div.btn, html body .products-grid .btn, html body .product .btn, html body .product_item .btn, html body .product-card .btn{
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   CORIODERMINA® V8 — TRANSPARENT PRODUCT ACTIONS + PULSATING TEXT
   Purpose:
   - Remove the visible product buttons completely.
   - Keep Details / Buy clickable.
   - Replace button boxes with elegant pulsating text.
   - Hard-kill all old button backgrounds, borders, rings, side-caps,
     shadows, and pseudo-elements.
   - Does NOT affect the top header navigation.
   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-action-text: #5c3822;
  --corio-action-text-hover: #8a5a24;
  --corio-action-gold: #b9852f;
  --corio-action-gold-soft: #d7ae67;
}

/* ---------------------------------------------------------
   1) Neutralize wrappers around Details / Buy buttons
   --------------------------------------------------------- */

html body .product a:has(> .btn), html body .product_item a:has(> .btn), html body .product-box a:has(> .btn), html body .productBox a:has(> .btn), html body .prod_box a:has(> .btn), html body .product-card a:has(> .btn), html body .products-grid a:has(> .btn), html body .featured_products a:has(> .btn), html body #featured_products a:has(> .btn), html body .product button:has(> .btn), html body .product_item button:has(> .btn), html body .product-box button:has(> .btn), html body .productBox button:has(> .btn), html body .prod_box button:has(> .btn), html body .product-card button:has(> .btn), html body .products-grid button:has(> .btn), html body .featured_products button:has(> .btn), html body #featured_products button:has(> .btn){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 4px auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  cursor: pointer !important;
  text-decoration: none !important;
}

/* Kill wrapper pseudo-elements */
html body .product a:has(> .btn)::before, html body .product a:has(> .btn)::after, html body .product_item a:has(> .btn)::before, html body .product_item a:has(> .btn)::after, html body .product-box a:has(> .btn)::before, html body .product-box a:has(> .btn)::after, html body .productBox a:has(> .btn)::before, html body .productBox a:has(> .btn)::after, html body .prod_box a:has(> .btn)::before, html body .prod_box a:has(> .btn)::after, html body .product-card a:has(> .btn)::before, html body .product-card a:has(> .btn)::after, html body .products-grid a:has(> .btn)::before, html body .products-grid a:has(> .btn)::after, html body .featured_products a:has(> .btn)::before, html body .featured_products a:has(> .btn)::after, html body #featured_products a:has(> .btn)::before, html body #featured_products a:has(> .btn)::after, html body .product button:has(> .btn)::before, html body .product button:has(> .btn)::after, html body .product_item button:has(> .btn)::before, html body .product_item button:has(> .btn)::after, html body .product-card button:has(> .btn)::before, html body .product-card button:has(> .btn)::after, html body .products-grid button:has(> .btn)::before, html body .products-grid button:has(> .btn)::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;

  pointer-events: none !important;
}

/* ---------------------------------------------------------
   2) Turn Details / Buy into transparent pulsating text
   --------------------------------------------------------- */

html body .product .btn, html body .product_item .btn, html body .product-box .btn, html body .productBox .btn, html body .prod_box .btn, html body .product-card .btn, html body .products-grid .btn, html body .featured_products .btn, html body #featured_products .btn, html body div.btn, html body input.btn[type="button"], html body input.btn[type="submit"], html body .product input[type="button"], html body .product input[type="submit"], html body .product_item input[type="button"], html body .product_item input[type="submit"], html body .product-card input[type="button"], html body .product-card input[type="submit"], html body .products-grid input[type="button"], html body .products-grid input[type="submit"]{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 6px auto 0 !important;
  padding: 2px 4px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--corio-action-text) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.8px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65) !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;

  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;

  animation: corioActionPulse 1.85s ease-in-out infinite !important;
  transition:
    color .18s ease,
    transform .18s ease,
    letter-spacing .18s ease,
    text-shadow .18s ease !important;
}

/* Hard-kill every old button pseudo-element */
html body .btn::before, html body .btn::after, html body div.btn::before, html body div.btn::after, html body a.btn::before, html body a.btn::after, html body button.btn::before, html body button.btn::after, html body input.btn::before, html body input.btn::after, html body .product .btn::before, html body .product .btn::after, html body .product_item .btn::before, html body .product_item .btn::after, html body .product-box .btn::before, html body .product-box .btn::after, html body .productBox .btn::before, html body .productBox .btn::after, html body .prod_box .btn::before, html body .prod_box .btn::after, html body .product-card .btn::before, html body .product-card .btn::after, html body .products-grid .btn::before, html body .products-grid .btn::after, html body .featured_products .btn::before, html body .featured_products .btn::after, html body #featured_products .btn::before, html body #featured_products .btn::after, html body .product a[href*="/cart"]::before, html body .product a[href*="/cart"]::after, html body .product_item a[href*="/cart"]::before, html body .product_item a[href*="/cart"]::after, html body .product-card a[href*="/cart"]::before, html body .product-card a[href*="/cart"]::after, html body .products-grid a[href*="/cart"]::before, html body .products-grid a[href*="/cart"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: static !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  pointer-events: none !important;
}

/* Hover: elegant gold text, no button box */
html body .product .btn:hover, html body .product_item .btn:hover, html body .product-box .btn:hover, html body .productBox .btn:hover, html body .prod_box .btn:hover, html body .product-card .btn:hover, html body .products-grid .btn:hover, html body .featured_products .btn:hover, html body #featured_products .btn:hover, html body div.btn:hover, html body input.btn[type="button"]:hover, html body input.btn[type="submit"]:hover, html body .product input[type="button"]:hover, html body .product input[type="submit"]:hover, html body .product_item input[type="button"]:hover, html body .product_item input[type="submit"]:hover, html body .product-card input[type="button"]:hover, html body .product-card input[type="submit"]:hover, html body .products-grid input[type="button"]:hover, html body .products-grid input[type="submit"]:hover{
  color: var(--corio-action-text-hover) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 0 8px rgba(215,174,103,0.42),
    0 1px 0 rgba(255,255,255,0.85) !important;
  transform: translateY(-1px) scale(1.035) !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
}

/* Optional gold underline accent */
html body .product .btn, html body .product_item .btn, html body .product-card .btn, html body .products-grid .btn, html body div.btn{
  border-bottom: 1px solid rgba(185,133,47,0.45) !important;
}

/* Keep Details and Buy separated as text links */
html body .product .btn + .btn, html body .product_item .btn + .btn, html body .product-box .btn + .btn, html body .productBox .btn + .btn, html body .prod_box .btn + .btn, html body .product-card .btn + .btn, html body .products-grid .btn + .btn{
  margin-top: 8px !important;
}

/* Font wrappers from Google Translate should not change the action text */
html body .product .btn span, html body .product .btn font, html body .product_item .btn span, html body .product_item .btn font, html body .product-card .btn span, html body .product-card .btn font, html body .products-grid .btn span, html body .products-grid .btn font, html body div.btn span, html body div.btn font{
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

/* Pulse animation */
@keyframes corioActionPulse {
  0% {
    color: var(--corio-action-text);
    text-shadow:
      0 0 0 rgba(215,174,103,0),
      0 1px 0 rgba(255,255,255,0.65);
    transform: scale(1);
  }
  50% {
    color: var(--corio-action-gold);
    text-shadow:
      0 0 10px rgba(215,174,103,0.42),
      0 1px 0 rgba(255,255,255,0.82);
    transform: scale(1.035);
  }
  100% {
    color: var(--corio-action-text);
    text-shadow:
      0 0 0 rgba(215,174,103,0),
      0 1px 0 rgba(255,255,255,0.65);
    transform: scale(1);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html body .btn, html body div.btn, html body a.btn, html body .products-grid .btn, html body .product .btn, html body .product_item .btn, html body .product-card .btn{
    animation: none !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  html body .product .btn, html body .product_item .btn, html body .product-card .btn, html body .products-grid .btn, html body div.btn{
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    padding: 2px 3px !important;
  }
}

/* =========================================================
   CORIODERMINA® V9 — HEADER HORIZON ALIGN + TRUE TRANSPARENT ACTION TEXT
   Fixes from latest screenshot:
   1) Header tabs were sitting slightly LOWER than Choose Your Treatment.
      This moves the MAIN NAV row up to match the Choose tab horizon.
   2) Details / Buy still looked like buttons because the visible box was
      coming from BOTH the .btn and its parent wrapper. This nukes both.
   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-v9-mainnav-nudge-y: -4px; /* moves Home/About/Best/Contact/Shipping/Store Links up */
  --corio-v9-action-text: #5c3822;
  --corio-v9-action-text-hover: #8a5a24;
  --corio-v9-action-gold: #b9852f;
}

/* =========================================================
   A) HEADER TAB HORIZON ALIGNMENT
   ========================================================= */

/* Move the main nav tabs up to match the already-correct Choose tab */


/* Keep header buttons visually equal after the nudge */


/* Store Links arrow stays centered after the row nudge */


/* Preserve rotation on Choose hover */


/* =========================================================
   B) TRUE TRANSPARENT PRODUCT ACTION TEXT
   ========================================================= */

/* First: neutralize the OUTER wrapper that creates the side lobes / hotdog shape */
html body .product a:has(.btn), html body .product_item a:has(.btn), html body .product-box a:has(.btn), html body .productBox a:has(.btn), html body .prod_box a:has(.btn), html body .product-card a:has(.btn), html body .products-grid a:has(.btn), html body .featured_products a:has(.btn), html body #featured_products a:has(.btn), html body .home_products a:has(.btn), html body .product button:has(.btn), html body .product_item button:has(.btn), html body .product-card button:has(.btn), html body .products-grid button:has(.btn), html body .product a[title*="Buy"], html body .product_item a[title*="Buy"], html body .product-card a[title*="Buy"], html body .products-grid a[title*="Buy"], html body .product a[title*="Details"], html body .product_item a[title*="Details"], html body .product-card a[title*="Details"], html body .products-grid a[title*="Details"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 4px auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  text-decoration: none !important;
  cursor: pointer !important;
}

/* Kill pseudo-elements on the outer wrapper */
html body .product a:has(.btn)::before, html body .product a:has(.btn)::after, html body .product_item a:has(.btn)::before, html body .product_item a:has(.btn)::after, html body .product-card a:has(.btn)::before, html body .product-card a:has(.btn)::after, html body .products-grid a:has(.btn)::before, html body .products-grid a:has(.btn)::after, html body .featured_products a:has(.btn)::before, html body .featured_products a:has(.btn)::after, html body #featured_products a:has(.btn)::before, html body #featured_products a:has(.btn)::after, html body .product a[href*="cart"]::before, html body .product a[href*="cart"]::after, html body .product_item a[href*="cart"]::before, html body .product_item a[href*="cart"]::after, html body .product-card a[href*="cart"]::before, html body .product-card a[href*="cart"]::after, html body .products-grid a[href*="cart"]::before, html body .products-grid a[href*="cart"]::after, html body .product a[title*="Buy"]::before, html body .product a[title*="Buy"]::after, html body .product a[title*="Details"]::before, html body .product a[title*="Details"]::after, html body .products-grid a[title*="Buy"]::before, html body .products-grid a[title*="Buy"]::after, html body .products-grid a[title*="Details"]::before, html body .products-grid a[title*="Details"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  pointer-events: none !important;
}

/* Second: turn the INNER .btn into pure pulsating text */
html body .product .btn, html body .product_item .btn, html body .product-box .btn, html body .productBox .btn, html body .prod_box .btn, html body .product-card .btn, html body .products-grid .btn, html body .featured_products .btn, html body #featured_products .btn, html body .home_products .btn, html body input.btn[type="button"], html body input.btn[type="submit"], html body .product input[type="button"], html body .product input[type="submit"], html body .product_item input[type="button"], html body .product_item input[type="submit"], html body .product-card input[type="button"], html body .product-card input[type="submit"], html body .products-grid input[type="button"], html body .products-grid input[type="submit"]{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 6px auto 0 !important;
  padding: 2px 4px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: var(--corio-v9-action-text) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.8px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65) !important;
  filter: none !important;
  opacity: 1 !important;

  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;

  animation: corioV9ActionPulse 1.85s ease-in-out infinite !important;
  transition:
    color .18s ease,
    transform .18s ease,
    letter-spacing .18s ease,
    text-shadow .18s ease !important;
}

/* Important: remove even the thin underline/border from V8 */
html body .product .btn, html body .product_item .btn, html body .product-card .btn, html body .products-grid .btn, html body div.btn{
  border: 0 !important;
  border-bottom: 0 !important;
}

/* Kill pseudo-elements on the actual button/text */
html body .btn::before, html body .btn::after, html body div.btn::before, html body div.btn::after, html body a.btn::before, html body a.btn::after, html body button.btn::before, html body button.btn::after, html body input.btn::before, html body input.btn::after, html body .product .btn::before, html body .product .btn::after, html body .product_item .btn::before, html body .product_item .btn::after, html body .product-card .btn::before, html body .product-card .btn::after, html body .products-grid .btn::before, html body .products-grid .btn::after, html body .featured_products .btn::before, html body .featured_products .btn::after, html body #featured_products .btn::before, html body #featured_products .btn::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: static !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;

  pointer-events: none !important;
}

/* Hover remains text-only */
html body .product .btn:hover, html body .product_item .btn:hover, html body .product-card .btn:hover, html body .products-grid .btn:hover, html body .featured_products .btn:hover, html body #featured_products .btn:hover, html body .home_products .btn:hover, html body div.btn:hover, html body input.btn[type="button"]:hover, html body input.btn[type="submit"]:hover, html body .product input[type="button"]:hover, html body .product input[type="submit"]:hover, html body .product_item input[type="button"]:hover, html body .product_item input[type="submit"]:hover, html body .product-card input[type="button"]:hover, html body .product-card input[type="submit"]:hover, html body .products-grid input[type="button"]:hover, html body .products-grid input[type="submit"]:hover{
  color: var(--corio-v9-action-text-hover) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow:
    0 0 8px rgba(215,174,103,0.42),
    0 1px 0 rgba(255,255,255,0.85) !important;
  transform: translateY(-1px) scale(1.035) !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
}

/* Pulse animation */
@keyframes corioV9ActionPulse {
  0% {
    color: var(--corio-v9-action-text);
    text-shadow:
      0 0 0 rgba(215,174,103,0),
      0 1px 0 rgba(255,255,255,0.65);
    transform: scale(1);
  }
  50% {
    color: var(--corio-v9-action-gold);
    text-shadow:
      0 0 10px rgba(215,174,103,0.42),
      0 1px 0 rgba(255,255,255,0.82);
    transform: scale(1.035);
  }
  100% {
    color: var(--corio-v9-action-text);
    text-shadow:
      0 0 0 rgba(215,174,103,0),
      0 1px 0 rgba(255,255,255,0.65);
    transform: scale(1);
  }
}

/* Translation wrappers inherit the text style */
html body .btn span, html body .btn font, html body div.btn span, html body div.btn font, html body .products-grid .btn span, html body .products-grid .btn font{
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .btn, html body div.btn, html body a.btn, html body .products-grid .btn, html body .product .btn, html body .product_item .btn, html body .product-card .btn{
    animation: none !important;
  }
}

/* =========================================================
   CORIODERMINA® BOTTOM CLOSE / COLLAPSE TAB THEME FIX
   Purpose:
   - Restyles the bottom tab that contains <svg id="closeIcon">
   - Makes it match Coriodermina® ivory/gold theme
   - Adds visible gold outline
   - Keeps it above the page and prevents it from looking obscured

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-bottom-tab-cream: #fff8ef;
  --corio-bottom-tab-cream-2: #f3e4d4;
  --corio-bottom-tab-gold: #d7ae67;
  --corio-bottom-tab-gold-strong: #b9852f;
  --corio-bottom-tab-ink: #5c3822;
  --corio-bottom-tab-shadow: rgba(53, 27, 10, 0.24);
}

/* The visible tab wrapper around the closeIcon SVG */
html body div:has(> svg#closeIcon), html body div:has(svg#closeIcon){
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 2px solid var(--corio-bottom-tab-gold-strong) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      var(--corio-bottom-tab-cream) 0%,
      var(--corio-bottom-tab-cream-2) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 7px 18px var(--corio-bottom-tab-shadow),
    0 0 0 1px rgba(240,207,147,0.35) !important;

  opacity: 1 !important;
  visibility: visible !important;

  overflow: visible !important;
  cursor: pointer !important;
  pointer-events: auto !important;

  z-index: 2147483647 !important;
  transform: translateY(-6px) !important;
}

/* If the parent container is the thing sitting at the bottom, lift it slightly */
html body *:has(> div > svg#closeIcon), html body *:has(svg#closeIcon){
  overflow: visible !important;
}

/* SVG arrow color */
html body svg#closeIcon{
  display: block !important;
  width: 21px !important;
  height: 21px !important;

  stroke: var(--corio-bottom-tab-ink) !important;
  color: var(--corio-bottom-tab-ink) !important;
  fill: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.75)) !important;

  transition:
    transform 0.18s ease,
    stroke 0.18s ease,
    filter 0.18s ease !important;
}

/* SVG path color */
html body svg#closeIcon path{
  stroke: var(--corio-bottom-tab-ink) !important;
  stroke-width: 2.5 !important;
}

/* Hover state */
html body div:has(> svg#closeIcon):hover, html body div:has(svg#closeIcon):hover{
  border-color: var(--corio-bottom-tab-gold) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7e4c9 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 10px 22px rgba(53, 27, 10, 0.28),
    0 0 0 1px rgba(240,207,147,0.48) !important;

  transform: translateY(-8px) !important;
}

html body div:has(> svg#closeIcon):hover svg#closeIcon, html body div:has(svg#closeIcon):hover svg#closeIcon{
  stroke: #3a2415 !important;
  transform: translateY(1px) !important;
  filter:
    drop-shadow(0 0 7px rgba(215,174,103,0.45))
    drop-shadow(0 1px 0 rgba(255,255,255,0.82)) !important;
}

/* Mobile comfort */
@media (max-width: 768px) {
  html body div:has(> svg#closeIcon), html body div:has(svg#closeIcon){
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    transform: translateY(-8px) !important;
  }

  html body svg#closeIcon{
    width: 20px !important;
    height: 20px !important;
  }
}

/* =========================================================
   CORIODERMINA® BOTTOM TAB HARD FIX — SVG DIRECT TARGET
   Use this because the previous :has() parent selector may be ignored
   by the widget/browser/CSS sanitizer.

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-close-tab-cream: #fff8ef;
  --corio-close-tab-cream-2: #f3e4d4;
  --corio-close-tab-gold: #b9852f;
  --corio-close-tab-gold-2: #d7ae67;
  --corio-close-tab-ink: #5c3822;
}

/* Directly turn the SVG itself into the visible premium tab */
html body svg#closeIcon, html body #closeIcon, html body svg[id="closeIcon"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  padding: 7px 17px !important;
  margin: 0 !important;

  box-sizing: content-box !important;

  border: 2px solid var(--corio-close-tab-gold) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      var(--corio-close-tab-cream) 0%,
      var(--corio-close-tab-cream-2) 100%
    ) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 8px 20px rgba(53,27,10,0.28),
    0 0 0 1px rgba(240,207,147,0.32) !important;

  stroke: var(--corio-close-tab-ink) !important;
  color: var(--corio-close-tab-ink) !important;
  fill: none !important;

  overflow: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;

  transform: translateY(-10px) !important;
  z-index: 2147483647 !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease !important;
}

/* Force the arrow path from white to Coriodermina brown */
html body svg#closeIcon path, html body #closeIcon path, html body svg[id="closeIcon"] path{
  stroke: var(--corio-close-tab-ink) !important;
  stroke-width: 2.6 !important;
}

/* Hover */
html body svg#closeIcon:hover, html body #closeIcon:hover, html body svg[id="closeIcon"]:hover{
  border-color: var(--corio-close-tab-gold-2) !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7e4c9 100%
    ) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 12px 26px rgba(53,27,10,0.34),
    0 0 0 1px rgba(240,207,147,0.48),
    0 0 18px rgba(215,174,103,0.28) !important;
  transform: translateY(-12px) !important;
}

/* Make likely parent containers transparent and unclipped */
html body div[style*="2147483646"], html body div[style*="2147483647"], html body div[style*="z-index: 2147483646"], html body div[style*="z-index:2147483646"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* If the parent is a fixed bottom bar/button, lift it. 
   This targets common inline-style bottom tabs without touching normal site content. */
html body div[style*="position: fixed"][style*="bottom"], html body div[style*="position:fixed"][style*="bottom"]{
  overflow: visible !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body svg#closeIcon, html body #closeIcon, html body svg[id="closeIcon"]{
    padding: 6px 15px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    transform: translateY(-12px) !important;
  }
}

/* =========================================================
   CORIODERMINA® V12 — VIBRANT GOLD OUTLINE REFINEMENT
   Purpose:
   - Make the shield / inner cream panel outline richer gold
   - Strengthen the outer header border in matching gold
   - Give header tabs a clearer premium gold outline
   - Keep the current layout untouched

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  /* Rich but not yellow/orange — compatible with caramel + ivory */
  --corio-v12-gold: #C6923D;
  --corio-v12-gold-soft: #F2D18B;
  --corio-v12-gold-deep: #9F6B24;
  --corio-v12-gold-shadow: rgba(198, 146, 61, 0.38);
  --corio-v12-brown-shadow: rgba(67, 34, 10, 0.20);
  --corio-v12-ink: #4b2d1b;
}

/* =========================================================
   1) OUTER HEADER BORDER — visible premium gold
   ========================================================= */



/* Subtle gold bottom rail */


/* =========================================================
   2) SHIELD / INNER CREAM PANEL OUTLINE
   This is usually drawn by #header::before in the current CSS.
   ========================================================= */



/* Fallback: if Freewebstore uses an inner container border instead of ::before */


/* =========================================================
   3) HEADER TABS — stronger gold outline, still ivory
   ========================================================= */



/* Tiny gold highlight on tab top edge */


/* Header tab hover: just a touch more vibrant */


/* Arrows match the warmer outline */


/* =========================================================
   4) DROPDOWN PANELS — matching gold edge
   ========================================================= */



/* Dropdown links: gold edge remains visible */




/* =========================================================
   CORIODERMINA® V13 — FOOTER LUXURY THEME FIX
   Purpose:
   - Restyle the footer to match the current header theme
   - Remove the dark/obscure look
   - Give footer sections ivory panels, caramel sides, and vibrant gold borders
   - Make copyright, newsletter, social icons, Terms/Privacy readable
   - Repair footer .grey_bar rules that may have been affected by header CSS

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-footer-cream: #fff8ef;
  --corio-footer-cream-2: #f3e4d4;
  --corio-footer-cream-3: #fffdf8;
  --corio-footer-gold: #C6923D;
  --corio-footer-gold-soft: #F2D18B;
  --corio-footer-gold-deep: #9F6B24;
  --corio-footer-brown: #8a5a24;
  --corio-footer-brown-2: #9b5b25;
  --corio-footer-brown-dark: #5a2f12;
  --corio-footer-ink: #4b2d1b;
  --corio-footer-muted: #705039;
  --corio-footer-shadow: rgba(53, 27, 10, 0.22);
}

/* =========================================================
   1) FOOTER SHELL — match header palette, but keep it elegant
   ========================================================= */

html body #footer{
  position: relative !important;
  display: block !important;
  width: 100% !important;

  margin: 34px auto 0 !important;
  padding: 22px 0 24px !important;

  border-top: 3px solid var(--corio-footer-gold) !important;
  border-bottom: 3px solid var(--corio-footer-gold-deep) !important;
  border-left: 2px solid var(--corio-footer-gold-deep) !important;
  border-right: 2px solid var(--corio-footer-gold-deep) !important;
  border-radius: 18px 18px 0 0 !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 250, 243, 0.55) 0%, rgba(255, 250, 243, 0.16) 34%, transparent 58%),
    linear-gradient(90deg,
      #120905 0%,
      #5a2f12 9%,
      #9b5b25 19%,
      #f1dcc3 49%,
      #9b5b25 81%,
      #5a2f12 92%,
      #120905 100%) !important;

  box-shadow:
    0 -8px 24px rgba(53, 27, 10, 0.13),
    0 0 0 1px rgba(242, 209, 139, 0.42) inset,
    0 2px 0 rgba(255, 255, 255, 0.42) inset !important;

  overflow: visible !important;
  color: var(--corio-footer-ink) !important;
}

/* Soft ivory center panel illusion */
html body #footer::before{
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: clamp(18px, 7vw, 120px) !important;
  right: clamp(18px, 7vw, 120px) !important;
  bottom: 12px !important;

  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;

  border: 2px solid rgba(198, 146, 61, 0.72) !important;
  border-radius: 0 0 52px 52px / 0 0 36px 36px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.52) 44%, rgba(255,255,255,0.08) 76%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 55%, #f1dcc3 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 0 0 1px rgba(242, 209, 139, 0.40),
    0 6px 18px rgba(53, 27, 10, 0.10) !important;
}

/* Keep content above footer panel */
html body #footer > *, html body #footer .container, html body #footer .container.clearfix, html body #footer #footer_left, html body #footer #footer_right, html body #footer #newsletter, html body #footer #copyright{
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   2) FIX FOOTER .grey_bar — do NOT inherit header's invisible .grey_bar
   ========================================================= */





/* Banner footer area */
html body #footer .uc_banner{
  min-height: 0 !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--corio-footer-ink) !important;
}

/* =========================================================
   3) NEWSLETTER — premium ivory card
   ========================================================= */

html body #footer #newsletter{
  display: block !important;
  margin: 0 auto 18px !important;
  padding: 18px 18px !important;

  width: min(1080px, calc(100% - 28px)) !important;

  border: 2px solid rgba(198, 146, 61, 0.78) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.82), transparent 36%),
    linear-gradient(180deg, #fffdf8 0%, #f7ead7 100%) !important;

  box-shadow:
    0 10px 24px rgba(53, 27, 10, 0.14),
    0 0 0 1px rgba(242, 209, 139, 0.34) inset !important;

  color: var(--corio-footer-ink) !important;
}

html body #footer #newsletter_container{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;

  text-align: center !important;
}

html body #footer #newsletter_container div{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 230px !important;

  margin: 0 !important;
  padding: 0 !important;
}

html body #footer #newsletter_title, html body #footer #newsletter h2{
  margin: 0 !important;
  padding: 0 !important;

  color: var(--corio-footer-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72) !important;
}

html body #footer #newsletter_name, html body #footer #newsletter_email, html body #footer #newsletter_container input{
  display: inline-flex !important;
  align-items: center !important;

  width: clamp(190px, 18vw, 260px) !important;
  min-width: 190px !important;
  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border: 2px solid rgba(198, 146, 61, 0.64) !important;
  border-radius: 10px !important;

  background: #fffdf8 !important;
  color: var(--corio-footer-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;

  box-shadow:
    inset 0 1px 3px rgba(53, 27, 10, 0.08),
    0 1px 0 rgba(255,255,255,0.92) !important;

  outline: none !important;
  box-sizing: border-box !important;
}

html body #footer #newsletter_name::placeholder, html body #footer #newsletter_email::placeholder{
  color: rgba(75, 45, 27, 0.70) !important;
}

html body #footer #newsletter_name:focus, html body #footer #newsletter_email:focus, html body #footer #newsletter_container input:focus{
  border-color: var(--corio-footer-gold-soft) !important;
  box-shadow:
    inset 0 1px 3px rgba(53, 27, 10, 0.08),
    0 0 0 3px rgba(198, 146, 61, 0.16),
    0 0 12px rgba(242, 209, 139, 0.20) !important;
}

/* Newsletter Subscribe button — restore button look only here */
html body #footer #newsletter_button, html body #footer button#newsletter_button.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 140px !important;
  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 22px !important;

  border: 2px solid var(--corio-footer-gold) !important;
  border-radius: 10px !important;

  background:
    linear-gradient(180deg, #fffdf8 0%, #f8ead8 54%, #efd8bb 100%) !important;
  color: var(--corio-footer-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 10px rgba(102,58,22,0.16),
    0 0 0 1px rgba(242,209,139,0.35) inset !important;

  animation: none !important;
  transform: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

html body #footer #newsletter_button:hover, html body #footer button#newsletter_button.btn:hover{
  border-color: var(--corio-footer-gold-soft) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8e4c7 52%, #e8c89d 100%) !important;
  color: #342010 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 7px 16px rgba(102,58,22,0.20),
    0 0 14px rgba(242,209,139,0.22) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   4) FOOTER MAIN ROW — social + links + copyright
   ========================================================= */

html body #footer > .container.clearfix, html body #footer > .container{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px 26px !important;

  width: min(1180px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;

  border: 2px solid rgba(198, 146, 61, 0.78) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.70), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #f7ead7 100%) !important;

  box-shadow:
    0 10px 24px rgba(53, 27, 10, 0.13),
    0 0 0 1px rgba(242,209,139,0.34) inset !important;

  color: var(--corio-footer-ink) !important;
}

html body #footer_left, html body #footer_right{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;

  width: auto !important;
  min-width: 260px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  color: var(--corio-footer-ink) !important;
}

/* =========================================================
   5) SOCIAL ICONS — readable ivory/gold instead of obscure black
   ========================================================= */

html body #footer #social, html body #footer ul#social{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  background: transparent !important;
}

html body #footer #social li{
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body #footer #social li a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 2px solid var(--corio-footer-gold) !important;
  border-radius: 10px !important;

  background:
    linear-gradient(180deg, #fffdf8 0%, #f6e7d1 100%) !important;
  color: var(--corio-footer-ink) !important;

  font-size: 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 10px rgba(102,58,22,0.14) !important;

  transform: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease !important;
}

html body #footer #social li a::before{
  color: var(--corio-footer-ink) !important;
  text-shadow: none !important;
}

html body #footer #social li a:hover{
  border-color: var(--corio-footer-gold-soft) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8e4c7 100%) !important;
  color: #342010 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 8px 16px rgba(102,58,22,0.20),
    0 0 14px rgba(242,209,139,0.22) !important;
}

/* =========================================================
   6) TERMS / PRIVACY / POWERED BY
   ========================================================= */

html body #footer_links{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body #footer_links ul{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
  background: transparent !important;
}

html body #footer_links li{
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body #footer_links li a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 92px !important;
  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border: 2px solid var(--corio-footer-gold) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(180deg, #fffdf8 0%, #f8ead8 54%, #efd8bb 100%) !important;
  color: var(--corio-footer-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.45px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 10px rgba(102,58,22,0.14) !important;

  animation: none !important;
  transform: none !important;
}

html body #footer_links li a:hover{
  border-color: var(--corio-footer-gold-soft) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8e4c7 52%, #e8c89d 100%) !important;
  color: #342010 !important;
  transform: translateY(-1px) !important;
}

/* Keep Powered by visible but subdued and not ugly */
html body #footer_links li a[href*="freewebstore"]{
  min-width: auto !important;
  opacity: 0.76 !important;
  font-size: 10px !important;
  border-style: dashed !important;
}

html body #footer_links li a[href*="freewebstore"]:hover{
  opacity: 1 !important;
}

/* =========================================================
   7) COPYRIGHT — readable centered premium label
   ========================================================= */

html body #footer #copyright, html body footer#footer #copyright, html body section#copyright.clearfix{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: min(100%, 420px) !important;
  max-width: 100% !important;

  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 18px !important;

  border: 2px solid rgba(198, 146, 61, 0.72) !important;
  border-radius: 999px !important;

  background:
    linear-gradient(180deg, #fffdf8 0%, #f6e7d1 100%) !important;
  color: var(--corio-footer-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18px !important;
  line-height: 1.35 !important;
  text-align: center !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 10px rgba(102,58,22,0.12) !important;

  text-shadow: none !important;
}

/* Payment area */
html body #footer #payment_methods{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body #footer .accepts_group_div{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

/* =========================================================
   8) TRANSLATE + REWARDS WIDGETS — avoid visual collision
   ========================================================= */

/* Keep translate button premium and visible at right */
html body #corio-google-translate{
  right: 16px !important;
  bottom: 18px !important;
}

/* Lift loyalty/rewards widget slightly if it sits over footer */
html body [class*="reward"], html body [id*="reward"], html body [class*="loyalty"], html body [id*="loyalty"]{
  z-index: 99998 !important;
}

/* =========================================================
   9) RESPONSIVE FOOTER
   ========================================================= */

@media (max-width: 900px) {
  html body #footer{
    padding: 18px 0 22px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  html body #footer::before{
    left: 10px !important;
    right: 10px !important;
    border-radius: 18px !important;
  }

  html body #footer > .container.clearfix, html body #footer > .container{
    width: calc(100% - 24px) !important;
    padding: 12px !important;
  }

  html body #footer #newsletter{
    width: calc(100% - 24px) !important;
    padding: 16px 12px !important;
  }

  html body #footer #newsletter_container{
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body #footer #newsletter_container div, html body #footer #newsletter_name, html body #footer #newsletter_email, html body #footer #newsletter_container input, html body #footer #newsletter_button{
    width: min(100%, 330px) !important;
    min-width: 0 !important;
  }

  html body #footer_left, html body #footer_right{
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #footer #copyright{
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 14px !important;
  }
}

/* =========================================================
   CORIODERMINA® V16 — REMOVE CHOOSE YOUR TREATMENT FROM HEADER
   Purpose:
   - Remove the visible "Choose Your Treatment" / #cat_nav tab from the header.
   - Remove the reserved gap after Contact so Shipping & Returns moves into place.
   - Keep Store Links dropdown working.
   - Keep product/category pages untouched outside the header.

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

/* 1) Hide the normal Freewebstore page link if it exists in #main_nav */


/* 2) Hide the working category dropdown tab that was renamed to Choose Your Treatment */


/* 3) Remove the empty slot after Contact that existed only for the Choose tab */


/* 4) Keep the remaining tabs in one clean row */




/* 5) Store Links remains active */




/* 6) Mobile/tablet: remove Choose from stacked menu too */


/* =========================================================
   CORIODERMINA® V17 — WELCOME TITLE BRAND EMPHASIS + RETINA FONT SYSTEM
   Purpose:
   - The full welcome sentence stays readable but subdued.
   - Only "Coriodermina® Official Website" becomes the premium emphasized brand phrase.
   - Brand phrase pulsates on hover.
   - Adds a crisp retina-friendly font system site-wide.

   IMPORTANT:
   CSS cannot style only part of a plain text node by itself.
   For perfect results, use the small HTML/JS helper that wraps the brand phrase
   in <span class="corio-welcome-brand">...</span>.
   Paste this CSS at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-retina-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;

  --corio-retina-heading:
    "Caslon Graphique",
    Georgia,
    "Times New Roman",
    serif;

  --corio-v17-ink: #4b2d1b;
  --corio-v17-muted: #76543a;
  --corio-v17-gold: #C6923D;
  --corio-v17-gold-soft: #F2D18B;
  --corio-v17-gold-deep: #9F6B24;
  --corio-v17-cream: #fff8ef;
}

/* =========================================================
   1) SITE-WIDE RETINA-FRIENDLY TEXT RENDERING
   ========================================================= */

html, body{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}

/* Keep inputs/buttons crisp too */
button, input, select, textarea{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Main content readability */
p, li, td, th, label, span, div, .product-card p, .product p, .product_item p{
  font-family: var(--corio-retina-font) !important;
}

/* Premium headings retain the luxury serif feel */
h1, h2, h3, .section-title, #newsletter_title, .corio-faq h2, .corio-fr-seo h2{
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-kerning: normal !important;
}

/* =========================================================
   2) WELCOME H1 — SUBDUE FULL SENTENCE, EMPHASIZE BRAND ONLY
   ========================================================= */

html body h1#welcome_txt, html body #welcome_txt{
  max-width: min(1120px, calc(100% - 32px)) !important;
  margin: 24px auto 18px !important;
  padding: 16px 20px !important;

  border: 2px solid rgba(198, 146, 61, 0.62) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.78), transparent 36%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 55%, #f3e4d4 100%) !important;

  box-shadow:
    0 10px 24px rgba(53,27,10,0.12),
    0 0 0 1px rgba(242,209,139,0.30) inset !important;

  color: var(--corio-v17-muted) !important;
  font-family: var(--corio-retina-font) !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: 0.12px !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72) !important;

  overflow: visible !important;
}

/* The helper wraps only the brand phrase with this span */
html body #welcome_txt .corio-welcome-brand, html body .corio-welcome-brand{
  display: inline-block !important;
  position: relative !important;

  margin-left: 4px !important;
  padding: 2px 8px 3px !important;

  border-radius: 999px !important;

  color: var(--corio-v17-ink) !important;

  font-family: var(--corio-retina-heading) !important;
  font-size: 1.16em !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.45px !important;

  background:
    linear-gradient(
      90deg,
      var(--corio-v17-gold-deep) 0%,
      var(--corio-v17-gold) 36%,
      var(--corio-v17-gold-soft) 52%,
      var(--corio-v17-gold) 68%,
      var(--corio-v17-gold-deep) 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.72),
    0 0 8px rgba(198,146,61,0.10) !important;

  cursor: default !important;

  transition:
    transform .22s ease,
    text-shadow .22s ease,
    filter .22s ease,
    letter-spacing .22s ease !important;
}

/* Small gold underline only under the brand */
html body #welcome_txt .corio-welcome-brand::after, html body .corio-welcome-brand::after{
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: -3px !important;
  height: 2px !important;

  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(198,146,61,0.48) 18%,
      rgba(242,209,139,0.86) 50%,
      rgba(198,146,61,0.48) 82%,
      transparent 100%
    ) !important;

  opacity: 0.78 !important;
  pointer-events: none !important;
}

/* Hover the whole H1 or the brand phrase: brand phrase gently pulsates */
html body #welcome_txt:hover .corio-welcome-brand, html body #welcome_txt .corio-welcome-brand:hover, html body .corio-welcome-brand:hover{
  animation: corioWelcomeBrandPulse 1.28s ease-in-out infinite !important;
  letter-spacing: 0.7px !important;
  filter: saturate(1.14) brightness(1.04) !important;
}

@keyframes corioWelcomeBrandPulse {
  0% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.74),
      0 0 6px rgba(198,146,61,0.12);
  }
  50% {
    transform: scale(1.035);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.86),
      0 0 14px rgba(242,209,139,0.46),
      0 0 22px rgba(198,146,61,0.22);
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.74),
      0 0 6px rgba(198,146,61,0.12);
  }
}

/* Fallback if the helper has not been installed:
   This cannot emphasize only the substring, but it prevents the H1 from looking heavy. */
html body h1#welcome_txt:not(:has(.corio-welcome-brand)){
  color: var(--corio-v17-muted) !important;
  font-weight: 700 !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body h1#welcome_txt, html body #welcome_txt{
    margin: 18px auto 14px !important;
    padding: 14px 14px !important;
    font-size: clamp(17px, 5vw, 23px) !important;
    border-radius: 15px !important;
  }

  html body #welcome_txt .corio-welcome-brand, html body .corio-welcome-brand{
    display: inline-block !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    font-size: 1.12em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #welcome_txt:hover .corio-welcome-brand, html body #welcome_txt .corio-welcome-brand:hover, html body .corio-welcome-brand:hover{
    animation: none !important;
  }
}

/* =========================================================
   CORIODERMINA® V18 — WELCOME H1 TITLE ONLY + RETINA FONT
   Purpose:
   - Show ONLY: Coriodermina® Official Website
   - Hide/remove the old leading text:
     "Welcome to Made in the USA 📞 Call Now: 1- (844) 88-MYSKIN -"
   - Keep premium gold/ivory styling
   - Make the title pulsate when hovering
   - Keep crisp retina-friendly text rendering site-wide

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-retina-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;

  --corio-retina-heading:
    "Caslon Graphique",
    Georgia,
    "Times New Roman",
    serif;

  --corio-v18-ink: #4b2d1b;
  --corio-v18-muted: #76543a;
  --corio-v18-gold: #C6923D;
  --corio-v18-gold-soft: #F2D18B;
  --corio-v18-gold-deep: #9F6B24;
  --corio-v18-cream: #fff8ef;
}

/* =========================================================
   1) SITE-WIDE RETINA-FRIENDLY FONT RENDERING
   ========================================================= */

html, body{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}

button, input, select, textarea, p, li, td, th, label, span, div{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Luxury headings stay elegant */
h1, h2, h3, .section-title, #newsletter_title, .corio-faq h2, .corio-fr-seo h2{
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-kerning: normal !important;
}

/* =========================================================
   2) WELCOME H1 — REPLACE FULL TEXT VISUALLY WITH BRAND ONLY
   This works even if Freewebstore still outputs the long text.
   ========================================================= */

html body h1#welcome_txt, html body #welcome_txt{
  max-width: min(900px, calc(100% - 32px)) !important;
  margin: 24px auto 18px !important;
  padding: 16px 22px !important;

  border: 2px solid rgba(198, 146, 61, 0.72) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.82), transparent 36%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 55%, #f3e4d4 100%) !important;

  box-shadow:
    0 10px 24px rgba(53,27,10,0.12),
    0 0 0 1px rgba(242,209,139,0.34) inset !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;

  overflow: visible !important;
}

/* This is the only visible title */
html body h1#welcome_txt::before, html body #welcome_txt::before{
  content: "Coriodermina® Official Website" !important;

  display: inline-block !important;
  position: relative !important;

  padding: 3px 10px 5px !important;

  color: var(--corio-v18-ink) !important;

  font-family: var(--corio-retina-heading) !important;
  font-size: clamp(30px, 4.2vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.6px !important;
  text-align: center !important;
  text-transform: none !important;

  background:
    linear-gradient(
      90deg,
      var(--corio-v18-gold-deep) 0%,
      var(--corio-v18-gold) 34%,
      var(--corio-v18-gold-soft) 50%,
      var(--corio-v18-gold) 66%,
      var(--corio-v18-gold-deep) 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.78),
    0 0 8px rgba(198,146,61,0.12) !important;

  transition:
    transform .22s ease,
    text-shadow .22s ease,
    filter .22s ease,
    letter-spacing .22s ease !important;
}

/* Gold underline under title */
html body h1#welcome_txt::after, html body #welcome_txt::after{
  content: "" !important;
  display: block !important;

  width: min(420px, 72%) !important;
  height: 2px !important;

  margin: 8px auto 0 !important;

  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(198,146,61,0.48) 18%,
      rgba(242,209,139,0.90) 50%,
      rgba(198,146,61,0.48) 82%,
      transparent 100%
    ) !important;

  opacity: 0.86 !important;
}

/* Hover pulse */
html body h1#welcome_txt:hover::before, html body #welcome_txt:hover::before{
  animation: corioWelcomeOnlyPulse 1.28s ease-in-out infinite !important;
  letter-spacing: 0.85px !important;
  filter: saturate(1.15) brightness(1.05) !important;
}

@keyframes corioWelcomeOnlyPulse {
  0% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.78),
      0 0 7px rgba(198,146,61,0.14);
  }
  50% {
    transform: scale(1.035);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.90),
      0 0 15px rgba(242,209,139,0.50),
      0 0 24px rgba(198,146,61,0.24);
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.78),
      0 0 7px rgba(198,146,61,0.14);
  }
}

/* Mobile */
@media (max-width: 768px) {
  html body h1#welcome_txt, html body #welcome_txt{
    max-width: calc(100% - 24px) !important;
    margin: 18px auto 14px !important;
    padding: 14px 12px !important;
    border-radius: 15px !important;
  }

  html body h1#welcome_txt::before, html body #welcome_txt::before{
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.35px !important;
  }

  html body h1#welcome_txt::after, html body #welcome_txt::after{
    width: 78% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body h1#welcome_txt:hover::before, html body #welcome_txt:hover::before{
    animation: none !important;
  }
}

/* =========================================================
   CORIODERMINA® V18.1 — GOLD BAR ENHANCED TITLE ONLY
   Corrected direction:
   - Keeps the V18 method.
   - Shows ONLY: Coriodermina® Official Website
   - Does NOT restore the long "Welcome to Made in the USA..." text.
   - Enhances the existing title with a deeper gold-bar / bullion look.
   - Overrides V19 if it was pasted already.

   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

:root{
  --corio-retina-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;

  --corio-retina-heading:
    "Caslon Graphique",
    Georgia,
    "Times New Roman",
    serif;

  /* Gold-bar inspired palette */
  --corio-v181-gold-dark: #6F3F12;
  --corio-v181-gold-bronze: #9B621F;
  --corio-v181-gold-base: #C98E32;
  --corio-v181-gold-rich: #D9A441;
  --corio-v181-gold-light: #F6CF72;
  --corio-v181-gold-flash: #FFF1B7;
  --corio-v181-ink: #3F250F;
  --corio-v181-cream: #FFF8EF;
  --corio-v181-panel: #F3E4D4;
}

/* =========================================================
   1) RETINA-FRIENDLY FONT RENDERING — keep V18 system
   ========================================================= */

html, body{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}

button, input, select, textarea, p, li, td, th, label, span, div{
  font-family: var(--corio-retina-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

h1, h2, h3, .section-title, #newsletter_title, .corio-faq h2, .corio-fr-seo h2{
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-kerning: normal !important;
}

/* =========================================================
   2) WELCOME H1 — V18 TITLE-ONLY METHOD RESTORED
   ========================================================= */

html body h1#welcome_txt, html body #welcome_txt{
  max-width: min(940px, calc(100% - 32px)) !important;
  margin: 24px auto 18px !important;
  padding: 17px 24px 18px !important;

  border: 2px solid rgba(201, 142, 50, 0.84) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.34) 34%, transparent 62%),
    radial-gradient(circle at 84% 100%, rgba(246,207,114,0.16) 0%, transparent 45%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 52%, #f1dcc3 100%) !important;

  box-shadow:
    0 12px 28px rgba(53,27,10,0.14),
    0 0 0 1px rgba(255,241,183,0.46) inset,
    0 0 18px rgba(201,142,50,0.15) !important;

  /* Hide the raw H1 text visually, so the only visible text is ::before */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;

  overflow: visible !important;
}

/* If V19 was pasted, this restores the V18 pseudo-title */
html body h1#welcome_txt::before, html body #welcome_txt::before{
  content: "Coriodermina® Official Website" !important;

  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;

  padding: 3px 12px 5px !important;

  font-family: var(--corio-retina-heading) !important;
  font-size: clamp(30px, 4.2vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.62px !important;
  text-align: center !important;
  text-transform: none !important;

  color: var(--corio-v181-gold-base) !important;

  background:
    linear-gradient(
      94deg,
      var(--corio-v181-gold-dark) 0%,
      var(--corio-v181-gold-bronze) 13%,
      var(--corio-v181-gold-base) 30%,
      var(--corio-v181-gold-rich) 42%,
      var(--corio-v181-gold-flash) 50%,
      var(--corio-v181-gold-light) 57%,
      var(--corio-v181-gold-rich) 66%,
      var(--corio-v181-gold-base) 78%,
      var(--corio-v181-gold-dark) 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.86),
    0 0 9px rgba(201,142,50,0.16) !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.34))
    drop-shadow(0 5px 8px rgba(74,41,14,0.10)) !important;

  transition:
    transform .22s ease,
    text-shadow .22s ease,
    filter .22s ease,
    letter-spacing .22s ease !important;
}

/* Gold-bar underline */
html body h1#welcome_txt::after, html body #welcome_txt::after{
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 0.94 !important;

  width: min(460px, 74%) !important;
  height: 2px !important;

  margin: 9px auto 0 !important;

  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(111,63,18,0.30) 10%,
      rgba(201,142,50,0.70) 28%,
      rgba(255,241,183,0.98) 50%,
      rgba(201,142,50,0.70) 72%,
      rgba(111,63,18,0.30) 90%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 10px rgba(246,207,114,0.24),
    0 1px 0 rgba(255,255,255,0.72) !important;
}

/* Hover pulse — same V18 behavior, richer gold glow */
html body h1#welcome_txt:hover::before, html body #welcome_txt:hover::before{
  animation: corioWelcomeGoldBarPulse 1.26s ease-in-out infinite !important;
  letter-spacing: 0.9px !important;
  filter:
    saturate(1.18)
    brightness(1.06)
    drop-shadow(0 1px 0 rgba(255,255,255,0.36))
    drop-shadow(0 7px 12px rgba(74,41,14,0.14)) !important;
}

@keyframes corioWelcomeGoldBarPulse {
  0% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.86),
      0 0 8px rgba(201,142,50,0.16);
  }
  50% {
    transform: scale(1.034);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.94),
      0 0 16px rgba(255,241,183,0.52),
      0 0 28px rgba(201,142,50,0.30);
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 1px 0 rgba(255,255,255,0.86),
      0 0 8px rgba(201,142,50,0.16);
  }
}

/* Mobile */
@media (max-width: 768px) {
  html body h1#welcome_txt, html body #welcome_txt{
    max-width: calc(100% - 24px) !important;
    margin: 18px auto 14px !important;
    padding: 14px 12px 15px !important;
    border-radius: 15px !important;
  }

  html body h1#welcome_txt::before, html body #welcome_txt::before{
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.36px !important;
  }

  html body h1#welcome_txt::after, html body #welcome_txt::after{
    width: 78% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body h1#welcome_txt:hover::before, html body #welcome_txt:hover::before{
    animation: none !important;
  }
}


/* =========================================================
   CORIODERMINA® SOFT ADD MODAL BUTTON FIX V2
   Smaller text + wider tab look + cleaner premium style
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

/* Modal paragraph alignment */
html body #softadd-modal-data #softadd-feedback-success p, html body #softadd-modal-data #softadd-feedback-failure p{
  text-align: center !important;
  margin: 12px 0 !important;
}

/* ---------- PROCEED TO CHECKOUT: premium tab style ---------- */
html body #softadd-modal-data #softadd-feedback-success a[href*="power.fwspayments.com/cart"]{
  display: inline-block !important;
  text-decoration: none !important;
}

html body #softadd-modal-data #softadd-feedback-success button.success{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 255px !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;

  margin: 6px auto !important;
  padding: 0 14px !important;

  border: 2px solid #C89B43 !important;
  border-radius: 9px !important;

  background:
    linear-gradient(180deg, #FFF8EF 0%, #F3E1C7 100%) !important;

  color: #6B4320 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 3px 10px rgba(122,69,28,0.16) !important;

  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: hidden !important;
  outline: none !important;
}

/* Hide icon for cleaner text fit */
html body #softadd-modal-data #softadd-feedback-success button.success i{
  display: none !important;
}

/* Hover */
html body #softadd-modal-data #softadd-feedback-success button.success:hover{
  background: linear-gradient(180deg, #FFFDF8 0%, #EFD6B2 100%) !important;
  border-color: #D4AF37 !important;
  color: #5A2F12 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 5px 14px rgba(122,69,28,0.20) !important;
}

/* ---------- CONTINUE SHOPPING: matching tab style ---------- */
html body #softadd-modal-data #softadd-feedback-success button.simplemodal-close, html body #softadd-modal-data #softadd-feedback-failure button.simplemodal-close{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 255px !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;

  margin: 6px auto !important;
  padding: 0 14px !important;

  border: 2px solid #C89B43 !important;
  border-radius: 9px !important;

  background: linear-gradient(180deg, #FFF8EF 0%, #F3E1C7 100%) !important;
  color: #6B4320 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 3px 10px rgba(122,69,28,0.16) !important;

  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: hidden !important;
  outline: none !important;
}

/* Hide icon here too */
html body #softadd-modal-data button.simplemodal-close i{
  display: none !important;
}

/* Hover */
html body #softadd-modal-data #softadd-feedback-success button.simplemodal-close:hover, html body #softadd-modal-data #softadd-feedback-failure button.simplemodal-close:hover{
  background: linear-gradient(180deg, #FFFDF8 0%, #EFD6B2 100%) !important;
  border-color: #D4AF37 !important;
  color: #5A2F12 !important;
  transform: translateY(-1px) !important;
}

/* ---------- OR divider ---------- */
html body #softadd-modal-data #softadd-feedback-success p span{
  display: inline-block !important;
  color: #8A5A24 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

/* ---------- optional modal heading polish ---------- */
html body .simplemodal-wrap h3, html body .simplemodal-wrap .modal-title, html body #softadd-modal-data h3{
  color: #6B4320 !important;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  html body #softadd-modal-data #softadd-feedback-success button.success, html body #softadd-modal-data #softadd-feedback-success button.simplemodal-close, html body #softadd-modal-data #softadd-feedback-failure button.simplemodal-close{
    width: min(100%, 240px) !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 11px !important;
    letter-spacing: 0.55px !important;
    padding: 0 12px !important;
  }

  html body #softadd-modal-data #softadd-feedback-success p span{
    font-size: 10px !important;
  }
}

/* =========================================================
   CORIODERMINA® FINAL FIX — PROCEED TO CHECKOUT CLIPPING
   Problem: outer <a href="/cart/..."> is being styled as a button too.
   This neutralizes the outer link and styles only button.success.
   Paste at the VERY BOTTOM.
   ========================================================= */

/* 1) Neutralize the OUTER cart link inside the soft-add modal */
html body #softadd-modal-data #softadd-feedback-success p > a[href*="/cart"], html body #softadd-modal-data #softadd-feedback-success p > a[href*="fwspayments.com/cart"], html body #softadd-modal-data #softadd-feedback-success p > a[href*="power.fwspayments.com/cart"]{
  display: inline-block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;

  color: inherit !important;
  text-decoration: none !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;

  overflow: visible !important;
  transform: none !important;
}

/* 2) Style ONLY the actual Proceed to Checkout button */
html body #softadd-modal-data #softadd-feedback-success p > a[href*="/cart"] > button.success, html body #softadd-modal-data #softadd-feedback-success p > a[href*="fwspayments.com/cart"] > button.success, html body #softadd-modal-data #softadd-feedback-success p > a[href*="power.fwspayments.com/cart"] > button.success{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 265px !important;
  min-width: 265px !important;
  max-width: 265px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 auto !important;
  padding: 0 16px !important;

  border: 2px solid #C89B43 !important;
  border-radius: 9px !important;

  background: linear-gradient(180deg, #FFF8EF 0%, #F3E1C7 100%) !important;
  color: #5A2F12 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.45px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 3px 10px rgba(122,69,28,0.16) !important;

  overflow: visible !important;
  cursor: pointer !important;
  outline: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
}

/* 3) Completely remove the money icon so it cannot steal space */
html body #softadd-modal-data #softadd-feedback-success button.success i, html body #softadd-modal-data #softadd-feedback-success button.success .icon-money{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 4) Fix translated font wrappers if Google Translate touches the text */
html body #softadd-modal-data #softadd-feedback-success button.success font, html body #softadd-modal-data #softadd-feedback-success button.success font[dir="auto"], html body #softadd-modal-data #softadd-feedback-success button.success font[style*="vertical-align"]{
  display: inline !important;
  vertical-align: baseline !important;
  color: #5A2F12 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.45px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* 5) Hover only on the real button */
html body #softadd-modal-data #softadd-feedback-success p > a[href*="/cart"] > button.success:hover, html body #softadd-modal-data #softadd-feedback-success p > a[href*="fwspayments.com/cart"] > button.success:hover, html body #softadd-modal-data #softadd-feedback-success p > a[href*="power.fwspayments.com/cart"] > button.success:hover{
  background: linear-gradient(180deg, #FFFDF8 0%, #EFD6B2 100%) !important;
  border-color: #D4AF37 !important;
  color: #5A2F12 !important;
  transform: translateY(-1px) !important;
}

/* 6) Keep Continue Shopping matching but not affected */
html body #softadd-modal-data #softadd-feedback-success button.simplemodal-close, html body #softadd-modal-data #softadd-feedback-failure button.simplemodal-close{
  width: 265px !important;
  min-width: 265px !important;
  max-width: 265px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  font-size: 11px !important;
  letter-spacing: 0.45px !important;
}

/* 7) Mobile */
@media (max-width: 640px) {
  html body #softadd-modal-data #softadd-feedback-success p > a[href*="/cart"] > button.success, html body #softadd-modal-data #softadd-feedback-success p > a[href*="fwspayments.com/cart"] > button.success, html body #softadd-modal-data #softadd-feedback-success p > a[href*="power.fwspayments.com/cart"] > button.success, html body #softadd-modal-data #softadd-feedback-success button.simplemodal-close, html body #softadd-modal-data #softadd-feedback-failure button.simplemodal-close{
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.35px !important;
  }
}


/* =========================================================
   CORIODERMINA® WELCOME TITLE — SHARP HDR FIX
   Fixes blurry pale H1 text
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

html body #welcome_txt{
  position: relative !important;
  display: block !important;

  max-width: 940px !important;
  margin: 28px auto 24px !important;
  padding: 22px 34px 28px !important;

  border: 2px solid #D4AF37 !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.95) 0%, rgba(255,248,236,0.84) 42%, rgba(242,225,207,0.68) 100%),
    linear-gradient(180deg, #FFFDF8 0%, #FFF6EC 52%, #F1DDC2 100%) !important;

  color: #7A451C !important;

  font-family: "Caslon Graphique", Georgia, "Times New Roman", serif !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  text-transform: none !important;

  /* Sharp fake-HDR / embossed effect */
  -webkit-text-stroke: 0.35px rgba(90,47,18,0.42) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.98),
    0 -1px 0 rgba(92,56,34,0.28),
    1px 1px 0 rgba(255,248,236,0.86),
    -1px 0 0 rgba(122,69,28,0.22),
    0 2px 2px rgba(122,69,28,0.18),
    0 6px 14px rgba(122,69,28,0.12) !important;

  filter: none !important;
  opacity: 1 !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -1px 0 rgba(122,69,28,0.10),
    0 8px 22px rgba(122,69,28,0.14),
    0 0 22px rgba(212,175,55,0.12) !important;

  overflow: hidden !important;
}

/* Thin luxury underline */
html body #welcome_txt::after{
  content: "" !important;
  display: block !important;

  width: 50% !important;
  height: 1px !important;
  margin: 18px auto 0 !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(138,90,36,0.35) 18%,
    rgba(212,175,55,0.85) 50%,
    rgba(138,90,36,0.35) 82%,
    transparent 100%
  ) !important;

  box-shadow: 0 1px 3px rgba(212,175,55,0.22) !important;
}

/* Extra glow on the title box, not on the letters */
html body #welcome_txt::before{
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  pointer-events: none !important;
}

/* Mobile */
@media (max-width: 640px) {
  html body #welcome_txt{
    max-width: calc(100% - 24px) !important;
    padding: 18px 18px 22px !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
  }

  html body #welcome_txt::after{
    width: 65% !important;
    margin-top: 14px !important;
  }
}

/* =========================================================
   CORIODERMINA® STATIC CHATBASE LAUNCHER
   Fixed AI Help button like Google Translate
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

html body #corio-chatbase-launcher{
  position: fixed !important;
  right: 16px !important;
  bottom: 138px !important;
  z-index: 100001 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  width: 205px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 50px !important;

  padding: 11px 16px !important;

  border-radius: 24px !important;
  border: 1px solid rgba(247, 230, 178, 0.48) !important;

  background:
    radial-gradient(circle at top left, rgba(247,230,178,.20), transparent 34%),
    linear-gradient(135deg, #050403 0%, #1C120A 45%, #8A5A24 100%) !important;

  color: #F7E6B2 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(217,180,110,.20) !important;

  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  transform: translateZ(0) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease !important;
}

html body #corio-chatbase-launcher:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(240,207,147,.88) !important;
  color: #FFFFFF !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 24px rgba(217,180,110,.34) !important;
}

html body #corio-chatbase-launcher:active{
  transform: translateY(0) scale(.98) !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  height: 30px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #D4AF37 0%, #8A5A24 100%) !important;
  color: #FFFFFF !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.18) !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon svg{
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

html body #corio-chatbase-launcher .corio-chatbase-text{
  display: inline-block !important;
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body #corio-chatbase-launcher{
    right: 12px !important;
    bottom: 112px !important;
    width: 190px !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    letter-spacing: .8px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-icon{
    width: 28px !important;
    height: 28px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-icon svg{
    width: 22px !important;
    height: 22px !important;
  }
}


/* =========================================================
   CORIODERMINA® CHATBASE STATIC WIDGET FINAL FIX
   - Human label: Need Help?
   - Fixed position like Google Translate
   - Removes default Chatbase bubble
   - Prevents page-end bubble/paragraph spacing
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

/* Hide Chatbase's default floating bubble only.
   Do NOT hide #chatbase-bubble-window because that is the real chat panel. */
html body #chatbase-bubble-button, html body button#chatbase-bubble-button, html body div#chatbase-bubble-button{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Fix Freewebstore wrapping the custom launcher inside a paragraph */
html body p:has(#corio-chatbase-launcher){
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

/* The custom fixed Chatbase launcher */
html body #corio-chatbase-launcher{
  position: fixed !important;
  right: 16px !important;
  bottom: 118px !important;
  z-index: 2147483645 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  width: 205px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 11px 16px !important;

  border-radius: 24px !important;
  border: 1px solid rgba(247, 230, 178, 0.48) !important;

  background:
    radial-gradient(circle at top left, rgba(247,230,178,.20), transparent 34%),
    linear-gradient(135deg, #050403 0%, #1C120A 45%, #8A5A24 100%) !important;

  color: #F7E6B2 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-align: center !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(217,180,110,.20) !important;

  cursor: pointer !important;
  outline: none !important;
  border-style: solid !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transform: translateZ(0) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    color .22s ease !important;
}

html body #corio-chatbase-launcher:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(240,207,147,.88) !important;
  color: #FFFFFF !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 24px rgba(217,180,110,.34) !important;
}

html body #corio-chatbase-launcher:active{
  transform: translateY(0) scale(.98) !important;
}

/* Icon circle */
html body #corio-chatbase-launcher .corio-chatbase-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #D4AF37 0%, #8A5A24 100%) !important;
  color: #FFFFFF !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.18) !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon svg{
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

html body #corio-chatbase-launcher .corio-chatbase-text{
  display: inline-block !important;
  color: inherit !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Make sure the real Chatbase window can still open */
html body #chatbase-bubble-window{
  z-index: 2147483646 !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body #corio-chatbase-launcher{
    right: 12px !important;
    bottom: 104px !important;
    width: 180px !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    letter-spacing: 0.65px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-icon{
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-icon svg{
    width: 22px !important;
    height: 22px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-text{
    font-size: 11px !important;
    letter-spacing: 0.65px !important;
  }
}


/* =========================================================
   CORIODERMINA® PREMIUM EXPLORE DROPDOWN FIX
   Makes the boring Explore dropdown look luxury/premium.
   Paste at the VERY BOTTOM of Custom CSS.
   ========================================================= */

/* Target the Explore dropdown parent in the main navigation */


/* Explore tab */


/* Replace the plain arrow with a cleaner gold arrow */




/* Hover effect for Explore tab */




/* Premium dropdown panel */


/* Invisible hover bridge so the dropdown does not disappear */


/* Show dropdown */


/* Dropdown list reset */




/* Dropdown links */


/* Small gold icon before each item */


/* Item hover */




/* Mobile */



/* =========================================================
   CORIODERMINA® MOBILE HEADER / MENU FINAL FIX
   Fixes messy mobile navigation layout
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

@media (max-width: 768px) {

  /* Main mobile header container */
  

  

  /* Logo centered on mobile */
  

  

  /* Account / cart row */
  

  

  

  /* Hide the ugly floating hamburger icon */
  html body #menu_icon{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Main nav becomes a clean mobile grid */
  

  

  

  /* Remove old desktop spacing after Contact */
  

  /* Hide Cart from mobile nav because cart already shows top-right */
  

  /* Mobile nav buttons */
  

  /* Shipping button spans both columns because it is longer */
  

  /* Explore also spans both columns */
  

  

  /* Explore dropdown mobile panel */
  

  

  /* Category / View Products dropdown below main menu */
  

  

  

  

  

  

  
}



/* =========================================================
   CORIODERMINA® MOBILE HEADER MASTER FIX
   Fixes:
   - Home / About / Best Sellers / Contact / Shipping / Explore not clickable
   - Bad mobile spacing
   - Hidden/blocked cart path
   - Desktop header fighting mobile layout
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

@media (max-width: 768px) {

  /* -----------------------------
     1) HEADER CLEAN RESET
     ----------------------------- */

  

  

  

  

  /* -----------------------------
     2) LOGO CLEAN CENTER
     ----------------------------- */

  

  

  

  /* -----------------------------
     3) ACCOUNT / CART ROW
     ----------------------------- */

  

  

  

  /* Hide the ugly floating hamburger */
  html body #menu_icon{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* -----------------------------
     4) MAIN MOBILE NAV — CLICKABLE
     ----------------------------- */

  

  

  

  /* Remove invisible hover bridges that block tapping */
  

  /* Exact mobile order based on your Freewebstore menu:
     1 Home, 2 About, 3 Best Sellers, 4 Cart, 5 Contact, 6 Shipping, 7 Explore */
  
  
  
  
  
  
  

  /* Bring Cart back as a real mobile tab */
  

  /* All main menu tabs */
  

  

  /* Shipping text is long, make it slightly smaller */
  

  /* Explore tab */
  

  

  

  /* -----------------------------
     5) EXPLORE DROPDOWN — MOBILE TAP FIX
     Show it as real clickable mini-tabs.
     ----------------------------- */

  

  

  

  

  /* -----------------------------
     6) SHOP PRODUCTS SECTION BELOW
     Keep it working, but make it sit below main nav.
     ----------------------------- */

  

  

  

  

  /* Make sure Shop Products does not cover the main menu */
  
}


/* =========================================================
   CORIODERMINA® NEED HELP MOBILE/TABLET CLICK FIX
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

html body #corio-chatbase-launcher{
  position: fixed !important;
  right: 16px !important;
  bottom: 118px !important;
  z-index: 2147483647 !important;

  pointer-events: auto !important;
  cursor: pointer !important;

  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Let the button receive the tap, not the inner span/svg */
html body #corio-chatbase-launcher *, html body #corio-chatbase-launcher .corio-chatbase-text, html body #corio-chatbase-launcher .corio-chatbase-icon, html body #corio-chatbase-launcher svg, html body #corio-chatbase-launcher path{
  pointer-events: none !important;
}

/* Keep Chatbase window above page content when it opens */
html body #chatbase-bubble-window, html body iframe[id*="chatbase"], html body iframe[src*="chatbase"]{
  z-index: 2147483646 !important;
}

/* Mobile/tablet placement */
@media (max-width: 980px) {
  html body #corio-chatbase-launcher{
    right: 12px !important;
    bottom: 104px !important;
    width: 180px !important;
    min-height: 46px !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
  }
}

/* =========================================================
   CORIODERMINA® SAFE FINAL REVISION — HEADER HALO CLEANUP
   Purpose:
   - Removes the ugly white halo/blemish around the gold outline.
   - Keeps the existing desktop menu and mobile menu rules working.
   - Does NOT reset #cat_nav, #main_nav, or every child shadow.
   ========================================================= */







/* Keep dropdowns and menus visible above the header panel. */


/* Small phones: keep the final mobile layout centered and not pushed right. */


/* Mobile horizontal / small tablet: keep the same mobile-friendly layout. */




/* =========================================================
   CORIODERMINA® V8 — HEADER BLEMISH + CLEAN MOBILE MENU
   Paste at the VERY BOTTOM of Custom CSS
   Desktop menu stays untouched.
   ========================================================= */

/* =========================================================
   1) REMOVE WHITE BLEMISH / HALO AROUND GOLD HEADER OUTLINE
   ========================================================= */



/* This is the main fix: remove the filled white inner layer */


/* Keep only the bottom gold shine, not a white glow */


/* Undo the bad global shadow wipe from the older patch */
html body .header *{
  box-shadow: initial;
}

/* Restore premium shadows only on the menu buttons */



/* =========================================================
   2) CLEAN MOBILE MENU — DOES NOT AFFECT DESKTOP
   ========================================================= */

@media only screen and (max-width: 980px) {

  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  

  

  

  /* Logo centered */
  

  

  /* Sign in / cart centered */
  

  /* Main menu becomes a clean vertical stack */
  

  

  

  

  

  /* Category / Choose Your Treatment button */
  

  

  

  

  

  

  /* Dropdown panels on mobile: centered, clean, not scattered */
  

  

  

  /* Explore dropdown clean on mobile */
  

  
}

/* Very small phones */


/* ======================================================
   CORIODERMINA® CLEAN WELCOME TITLE — FINAL OVERRIDE
   Removes gold bar, border, glow, duplicate visual text, underline
   Shows only: Coriodermina® Official Website
   ====================================================== */

html body h1#welcome_txt, html body #welcome_txt{
  display: block !important;
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 18px auto 16px !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;

  text-align: center !important;
  text-transform: none !important;
  overflow: visible !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* Show clean title only one time */
html body h1#welcome_txt::before, html body #welcome_txt::before{
  content: "Coriodermina® Official Website" !important;

  display: inline-block !important;
  position: static !important;

  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  color: #5A3B1F !important;
  -webkit-text-fill-color: #5A3B1F !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;

  text-align: center !important;
  text-transform: none !important;
  text-shadow: none !important;

  animation: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Remove gold underline / fake decorative bar */
html body h1#welcome_txt::after, html body #welcome_txt::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove any span effects from older welcome title patches */
html body #welcome_txt .corio-welcome-brand, html body .corio-welcome-brand, html body #welcome_txt .corio-welcome-brand::before, html body #welcome_txt .corio-welcome-brand::after, html body .corio-welcome-brand::before, html body .corio-welcome-brand::after{
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #5A3B1F !important;
  color: #5A3B1F !important;
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  border: 0 !important;
}

/* Stop older welcome title hover animations from returning */
html body h1#welcome_txt:hover::before, html body #welcome_txt:hover::before, html body #welcome_txt:hover .corio-welcome-brand, html body #welcome_txt .corio-welcome-brand:hover, html body .corio-welcome-brand:hover{
  animation: none !important;
  filter: none !important;
  transform: none !important;
  letter-spacing: 0.2px !important;
  text-shadow: none !important;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  html body h1#welcome_txt, html body #welcome_txt{
    margin: 14px auto 12px !important;
  }

  html body h1#welcome_txt::before, html body #welcome_txt::before{
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
}


/* ======================================================
   CORIODERMINA® CONTACT PAGE REDESIGN — CSS ONLY
   Works with existing Freewebstore HTML
   ====================================================== */

html body #ctl21_panel_address.contact_address, html body .contact_address{
  max-width: 900px !important;
  margin: 36px auto !important;
  padding: 0 16px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-align: center !important;
  color: #5A3B1F !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Contact Us title */
html body #ctl21_panel_address.contact_address h1, html body .contact_address h1[data-lang="Contact Us"]{
  display: block !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  color: #5A3B1F !important;
  -webkit-text-fill-color: #5A3B1F !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
}

/* Main address card */
html body #divAddress, html body #ctl21_panel_address address#divAddress, html body .contact_address address{
  position: relative !important;
  display: block !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 34px 28px !important;

  border: 1.5px solid #D4AF37 !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at top left, rgba(212,175,55,0.18), transparent 34%),
    linear-gradient(180deg, #FFF8EF 0%, #F2E1CF 100%) !important;

  box-shadow:
    0 16px 36px rgba(90, 59, 31, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;

  color: #3B2412 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* Inner gold frame */
html body #divAddress::before{
  content: "" !important;
  position: absolute !important;
  inset: 9px !important;
  border: 1px solid rgba(212,175,55,0.45) !important;
  border-radius: 19px !important;
  pointer-events: none !important;
}

/* Soft decorative glow */
html body #divAddress::after{
  content: "" !important;
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  right: -70px !important;
  bottom: -80px !important;
  background: radial-gradient(circle, rgba(212,175,55,0.25), transparent 68%) !important;
  pointer-events: none !important;
}

/* Brand line */
html body #divAddress strong{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 auto 18px !important;
  padding-bottom: 14px !important;

  color: #3B2412 !important;
  -webkit-text-fill-color: #3B2412 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Gold divider under brand */
html body #divAddress strong::after{
  content: "" !important;
  display: block !important;
  width: 110px !important;
  height: 2px !important;
  margin: 14px auto 0 !important;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent) !important;
  border-radius: 999px !important;
}

/* Make text cleaner */
html body #divAddress, html body #divAddress *{
  box-sizing: border-box !important;
}

/* Phone line styling when inside address text */
html body #divAddress{
  white-space: normal !important;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  html body #ctl21_panel_address.contact_address, html body .contact_address{
    margin: 26px auto !important;
    padding: 0 12px !important;
  }

  html body #ctl21_panel_address.contact_address h1, html body .contact_address h1[data-lang="Contact Us"]{
    font-size: 28px !important;
    margin-bottom: 18px !important;
  }

  html body #divAddress, html body #ctl21_panel_address address#divAddress, html body .contact_address address{
    padding: 28px 18px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  html body #divAddress::before{
    inset: 7px !important;
    border-radius: 16px !important;
  }

  html body #divAddress strong{
    font-size: 21px !important;
  }
}

/* =========================================================
   CORIODERMINA® — SOLID HEADER COLORS + HOME UNDERLINE
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

:root{
  --corio-solid-brown-dark: #5A2F12;
  --corio-solid-brown: #8F4D1A;
  --corio-solid-brown-light: #A96525;

  --corio-solid-gold: #C89235;
  --corio-solid-gold-bright: #F2D48D;
  --corio-solid-gold-deep: #9D6820;

  --corio-solid-cream: #FFF8EF;
  --corio-solid-cream-2: #F7E6D4;
  --corio-solid-cream-3: #EFD4B8;

  --corio-solid-ink: #4B2D1B;
}

/* Make the main header colors more solid like the reference image */


/* Keep the shield full size, but make it stronger and less washed out */


/* Stronger bottom gold rail like the mockup */


/* Make nav tabs more solid ivory/gold */


/* HOME tab underline like the reference image */


/* Keep Home underline on hover too */


/* Dropdown arrows stay darker and cleaner */



/* =========================================================
   CORIODERMINA® — STRONG GOLD SHIELD OUTLINE WITHOUT SHRINKING
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

:root{
  --corio-shield-gold: #C89235;
  --corio-shield-gold-bright: #F2D48D;
  --corio-shield-gold-deep: #9D6820;
}

/* Keep the shield the SAME SIZE — only strengthen the gold */


/* Stronger bottom gold rail without affecting shield size */


/* Outer header gold, also without resizing the shield */


/* =========================================================
   CORIODERMINA® — REAL SHIELD S-DIVIDER GOLD STRIP
   This targets the actual shield: #header::before
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

:root{
  --corio-real-gold: #C89235;
  --corio-real-gold-light: #F4DFA8;
  --corio-real-gold-deep: #9D6820;
  --corio-real-cream-top: #FFFDF8;
  --corio-real-cream-mid: #FFF6EC;
  --corio-real-cream-bottom: #EFD4B8;
}

/* Make the cream shield itself create the golden S-divider */


/* Make sure logo/nav stay ABOVE the shield */


/* Keep brown side caps solid behind the shield */


/* ======================================================
   CORIODERMINA® PROMO SECTION — SAFE PAGE-FIT FIX
   Fixes cut-off / spaghetti / narrow Freewebstore page issue
   Paste at the VERY BOTTOM of Custom CSS
   ====================================================== */

html body .corio-promo-catalog{
  width: min(100%, 980px) !important;
  max-width: calc(100vw - 20px) !important;
  margin: 38px auto !important;
  padding: 10px !important;
  border-radius: 26px !important;

  background:
    linear-gradient(
      135deg,
      #5A2F12 0%,
      #8A5A24 18%,
      #FFF8EF 50%,
      #8A5A24 82%,
      #5A2F12 100%
    ) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Main shell becomes ONE column */
html body .corio-promo-catalog-shell{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;

  width: 100% !important;
  max-width: 100% !important;

  padding: 34px 28px !important;
  border-radius: 22px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Top info panel centered */
html body .corio-promo-catalog-info{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  align-items: center !important;
  text-align: center !important;
}

html body .corio-promo-catalog-badge{
  align-self: center !important;
  margin-bottom: 14px !important;
}

html body .corio-promo-catalog-info h2{
  margin: 0 auto 16px !important;

  color: #111111 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: clamp(34px, 5vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

html body .corio-promo-catalog-lead{
  max-width: 680px !important;
  margin: 0 auto 22px !important;

  color: #4A3A2A !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

html body .corio-promo-catalog-list{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 18px !important;

  width: 100% !important;
  max-width: 720px !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;
}

html body .corio-promo-catalog-list li{
  margin: 0 !important;
  padding: 10px 12px !important;

  border: 1px solid rgba(212,175,55,0.35) !important;
  border-radius: 12px !important;

  background: rgba(255,255,255,0.55) !important;

  color: #3B2412 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

html body .corio-promo-catalog-list li::before{
  position: static !important;
  display: inline-block !important;
  margin-right: 6px !important;
  color: #B9852F !important;
}

html body .corio-promo-catalog-review{
  max-width: 620px !important;
  margin: 0 auto 22px !important;
  text-align: center !important;
}

/* Shop Promotion button centered */
html body .corio-promo-catalog-main-btn{
  align-self: center !important;
  margin: 0 auto !important;
}

/* Product area now goes BELOW, not squeezed on right */
html body .corio-promo-catalog-products{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 22px !important;

  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Product cards become balanced vertical cards */
html body .corio-promo-catalog-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;

  padding: 22px 20px !important;
  border-radius: 22px !important;

  overflow: hidden !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Image box no longer huge or stretched */
html body .corio-promo-catalog-img{
  width: 100% !important;
  max-width: 260px !important;
  min-height: 180px !important;
  height: 180px !important;

  margin: 0 auto 16px !important;
  padding: 12px !important;

  border-radius: 18px !important;
  box-sizing: border-box !important;
}

html body .corio-promo-catalog-img img{
  max-width: 100% !important;
  max-height: 155px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Product text centered and controlled */
html body .corio-promo-catalog-copy{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  text-align: center !important;
}

html body .corio-promo-catalog-copy h3{
  max-width: 260px !important;
  margin: 0 auto 10px !important;

  color: #111111 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-align: center !important;

  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body .corio-promo-catalog-copy p{
  max-width: 260px !important;
  margin: 0 auto 18px !important;

  color: #5A514A !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Buttons fit inside card */
html body .corio-promo-catalog-product-btn{
  width: auto !important;
  min-width: 155px !important;
  margin: auto auto 0 !important;
}

/* TABLET */
@media only screen and (max-width: 760px) {
  html body .corio-promo-catalog{
    width: calc(100% - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 30px auto !important;
    padding: 8px !important;
  }

  html body .corio-promo-catalog-shell{
    padding: 24px 16px !important;
  }

  html body .corio-promo-catalog-list{
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }

  html body .corio-promo-catalog-products{
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }

  html body .corio-promo-catalog-copy h3{
    font-size: 23px !important;
  }

  html body .corio-promo-catalog-main-btn, html body .corio-promo-catalog-product-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* SMALL MOBILE */
@media only screen and (max-width: 420px) {
  html body .corio-promo-catalog-info h2{
    font-size: 32px !important;
  }

  html body .corio-promo-catalog-lead{
    font-size: 15px !important;
  }

  html body .corio-promo-catalog-img{
    height: 165px !important;
    min-height: 165px !important;
  }

  html body .corio-promo-catalog-img img{
    max-height: 145px !important;
  }

  html body .corio-promo-catalog-copy h3{
    font-size: 22px !important;
  }
}


/* =========================================================
   CORIODERMINA® AUTHORITATIVE HEADER CORRECTION
   Reviewed June 2026

   Fixes:
   - Uses the real title="Contact Us" from the Freewebstore HTML.
   - Makes Contact Us inherit the exact mobile tab typography.
   - Moves the real #logo_area slightly right on mobile.
   - Overrides the earlier competing mobile header patches.
   ========================================================= */

/* Desktop: correct the old title="Contact" selector mismatch. */


/* Mobile and tablet: one authoritative typography system. */


/* Slightly smaller type and shift on very narrow phones. */


/* =========================================================
   EMERGENCY DESKTOP MENU ALIGNMENT FIX
   Moves Shipping, Promotions, and Explore back inside shield
   ========================================================= */



/* =========================================================
   CORIODERMINA® FINAL DESKTOP HEADER FIX — ATTRIBUTE BASED
   Use this instead of nth-child patches.

   Fixes:
   - Removes the old empty Choose Your Treatment space after Contact Us
   - Keeps Shipping, Promotions, and Explore inside the shield
   - Makes the right-side tabs uniform with the left tabs
   - Does not rely on nth-child, because Freewebstore inserts script tags
     inside #main_nav > ul
   ========================================================= */



/* =========================================================
   CORIODERMINA® HEADER RECOVERY FIX — FINAL OVERRIDE
   Put this at the ABSOLUTE BOTTOM of Custom CSS.

   This repairs the broken desktop menu caused by older nth-child
   patches and restores the full row:
   Home | About | Best Sellers | Contact Us | Shipping & Returns
   | Promotions | Explore
   ========================================================= */



/* Slightly tighter desktop/tablet widths so the row stays inside the shield */



/* =========================================================
   CORIODERMINA® MOBILE HEADER FINAL FIX
   Desktop stays untouched.
   ========================================================= */




/* =========================================================
   CORIODERMINA® MOBILE CENTERING PATCH — FINAL
   Paste this at the absolute bottom of the CSS.
   Desktop is untouched.
   ========================================================= */



/* =========================================================
   CORIODERMINA® DESKTOP MENU DOUBLE-TAB SHIFT
   Desktop only. Mobile stays untouched.
   ========================================================= */



/* Medium desktop / tablet landscape: keep it from running too far right */



/* =========================================================
   CORIODERMINA® HOMEPAGE FONT + CHATBASE MOBILE/TABLET FIX
   Paste at the absolute bottom of Custom CSS.

   Goals:
   1) Use the same refined serif font style as:
      "Advanced Skin Science & Dermatological Wellness"
      across the homepage content.
   2) Make the custom Chatbase "Need Help?" launcher
      mobile/tablet friendly.
   ========================================================= */

/* -------------------------
   A) HOMEPAGE FONT UNIFICATION
   ------------------------- */

/* Main homepage content areas */
html body .corio-home-section, html body .corio-home-section *, html body .corio-hero-text, html body .corio-hero-text *, html body .corio-products-grid, html body .corio-products-grid *, html body .corio-product-card, html body .corio-product-card *, html body .corio-card-shell, html body .corio-card-shell *, html body .corio-scroll-bar, html body .corio-scroll-bar *, html body .corio-contact-strip, html body .corio-contact-strip *{
  font-family: "Times New Roman", Times, serif !important;
}

/* Homepage headings: refined, elegant, premium */
html body .corio-hero-text h1, html body .corio-subtitle, html body .corio-shop-title, html body .corio-product-card h3, html body .section-title{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
}

/* Homepage body copy: readable but still same font family */
html body .corio-home-section p, html body .corio-card-copy, html body .corio-intro, html body .corio-shop-intro, html body .corio-mission-box p, html body .corio-checkout-box p{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Category labels and buttons: same font, slightly stronger weight */
html body .corio-card-label, html body .corio-card-number, html body .corio-btn, html body .corio-btn *, html body .corio-dropdown-menu a{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 700 !important;
}

/* Override inline homepage spans/divs that currently force Arial/Montserrat */
html body section[style*="Montserrat"], html body section[style*="Montserrat"] *, html body div[style*="Arial"], html body div[style*="Arial"] *, html body span[style*="times new roman"], html body span[style*="Times New Roman"]{
  font-family: "Times New Roman", Times, serif !important;
}

/* Keep the header/menu untouched so the premium navigation remains stable */



/* =========================================================
   CORIODERMINA® NEED HELP TAB — ALIGNMENT FIX ONLY
   Keeps the same ivory tab design.
   Fixes icon/text centering and tab position.
   ========================================================= */

html body #corio-chatbase-launcher{
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon{
  position: relative !important;
  top: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon svg{
  position: relative !important;
  top: 0 !important;

  display: block !important;
  width: 18px !important;
  height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html body #corio-chatbase-launcher .corio-chatbase-text{
  position: relative !important;
  top: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 30px !important;
  vertical-align: middle !important;
}

/* Tablet/mobile alignment */
@media only screen and (max-width: 980px) {
  html body #corio-chatbase-launcher{
    right: 14px !important;
    bottom: 14px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-text{
    height: 28px !important;
    line-height: 28px !important;
  }
}

@media only screen and (max-width: 640px) {
  html body #corio-chatbase-launcher{
    right: 12px !important;
    bottom: 12px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-icon{
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  html body #corio-chatbase-launcher .corio-chatbase-text{
    height: 27px !important;
    line-height: 27px !important;
  }
}


/* =========================================================
   CORIODERMINA® SHOP BY CATEGORY INTRO FIX
   Aligns the paragraph below Shop by Category with the premium
   paragraph above: wider, left-aligned, and not centered/narrow.
   ========================================================= */

html body .corio-shop-intro, html body .corio-shop-intro-premium{
  display: block !important;
  max-width: 880px !important;
  margin: 8px 30px 32px 30px !important;
  padding: 0 !important;

  color: #4B2B16 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: clamp(17px, 2vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.1px !important;

  text-align: left !important;
  text-transform: none !important;
}

html body .corio-shop-intro-premium::after{
  content: "" !important;
  display: block !important;
  width: 90px !important;
  height: 2px !important;
  margin: 22px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent) !important;
}

/* =========================================================
   CORIODERMINA® NEED HELP TAB — FINAL SYMMETRY FIX
   Paste at the VERY BOTTOM of Custom CSS
   ========================================================= */

p:has(#corio-chatbase-launcher){
  margin: 0 !important;
  padding: 0 !important;
}

#corio-chatbase-launcher{
  position: fixed !important;
  left: 10px !important;
  bottom: 18px !important;
  z-index: 100001 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 168px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border: 1.5px solid #B9822B !important;
  border-radius: 8px !important;

  background: linear-gradient(180deg, #FFFDF8 0%, #F4E5CA 100%) !important;
  color: #2F1D12 !important;

  box-shadow:
    0 3px 8px rgba(80, 42, 12, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#corio-chatbase-launcher .corio-chatbase-icon{
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, #D8B76A 0%, #A6782B 48%, #7A4D16 100%) !important;
  color: #FFFFFF !important;

  box-sizing: border-box !important;
}

#corio-chatbase-launcher .corio-chatbase-icon svg{
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#corio-chatbase-launcher .corio-chatbase-text{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 38px !important;
  line-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;
  text-align: center !important;
}

#corio-chatbase-launcher:hover{
  transform: translateY(-1px) !important;
  border-color: #D4AF37 !important;
  box-shadow:
    0 5px 12px rgba(80, 42, 12, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* =========================================================
   CORIODERMINA® FINAL — REMOVE FREEWEBSTORE WELCOME TITLE
   Must be pasted at the ABSOLUTE VERY BOTTOM of Custom CSS.
   ========================================================= */

html body h1#welcome_txt, html body #welcome_txt, html body [id="welcome_txt"], html body h1[data-editor-type="store-name"], html body [data-editor-type="store-name"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  overflow: hidden !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body h1#welcome_txt::before, html body #welcome_txt::before, html body [id="welcome_txt"]::before, html body h1[data-editor-type="store-name"]::before, html body [data-editor-type="store-name"]::before, html body h1#welcome_txt::after, html body #welcome_txt::after, html body [id="welcome_txt"]::after, html body h1[data-editor-type="store-name"]::after, html body [data-editor-type="store-name"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  box-shadow: none !important;
}

/* =========================================================
   CORIODERMINA® FINAL PRICE COLOR OVERRIDE
   Main price: deep caramel #5A3115
   Supporting tax/breakdown text: soft brown #674731
   Sale price: brand caramel #8A5A24
   ========================================================= */
.product_now_price, body .product_now_price, html body .product_now_price, .product .price, .product_item .price, .product-box .price, .productBox .price, .prod_box .price, .product-card .price, .product_price, .current_price, .regular_price{
  color: #5A3115 !important;
  text-shadow: none !important;
}

.price_breakdown, .price_inc_tax, .price_ex_tax{
  color: #674731 !important;
  text-shadow: none !important;
}

.sale_price, .sale-price, .special_price, .special-price, .product_sale_price, .product-sale-price{
  color: #8A5A24 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.old_price, .old-price, .was_price, .was-price{
  color: #9A806B !important;
  text-decoration: line-through !important;
  text-shadow: none !important;
}

/* =========================================================
   CORIODERMINA® CLEAN AUTHORITATIVE HEADER — JULY 2026
   One header system only. Replaces all earlier header patches.
   Reference: black shield + double gold outline + ivory inner panel.
   ========================================================= */

:root{
  --corio-header-h: 220px;
  --corio-header-side: 78px;
  --corio-header-gold: #C99A4B;
  --corio-header-gold-light: #D8B66F;
  --corio-header-black: #050505;
  --corio-header-ivory: #FFFCF7;
  --corio-header-ivory-2: #FBF7F0;

  --corio-logo-left: 212px;
  --corio-logo-top: 28px;
  --corio-logo-w: 245px;
  --corio-logo-h: 128px;

  --corio-nav-top: 116px;
  --corio-nav-left: 336px;
  --corio-nav-right: 95px;
  --corio-nav-gap: 9px;
  --corio-nav-h: 48px;

  --corio-home-w: 84px;
  --corio-about-w: 88px;
  --corio-best-w: 116px;
  --corio-contact-w: 94px;
  --corio-shipping-w: 156px;
  --corio-promotions-w: 114px;
  --corio-treatment-w: 112px;
  --corio-store-w: 126px;

  --corio-util-top: 27px;
  --corio-util-right: 102px;
}

/* Outer black shield */


/* Ivory shield panel */






/* Real store logo */








/* Top-right account and basket */










/* Main navigation: all real page links except Cart / legacy treatment link */



















/* Reserve one tab-sized slot immediately before Store Links for Treatments. */








/* Store Links dropdown */










/* Freewebstore grey category bar becomes only an invisible positioning layer. */






/* Treatments tab: placed in the reserved slot immediately before Store Links. */


















/* Desktop compression only when the browser is narrower than the reference. */
@media only screen and (min-width: 981px) and (max-width: 1500px) {
  :root{
    --corio-logo-left: 212px;
    --corio-logo-w: 245px;
    --corio-nav-left: 304px;
    --corio-nav-right: 84px;
    --corio-nav-gap: 8px;
    --corio-home-w: 72px;
    --corio-about-w: 76px;
    --corio-best-w: 116px;
    --corio-contact-w: 92px;
    --corio-shipping-w: 154px;
    --corio-promotions-w: 122px;
    --corio-treatment-w: 112px;
    --corio-store-w: 126px;
    --corio-util-right: 100px;
  }

  
}

/* Larger desktop follows the proportions of the supplied reference image. */
@media only screen and (min-width: 1501px) {
  :root{
    --corio-header-h: 282px;
    --corio-header-side: 106px;
    --corio-logo-left: 298px;
    --corio-logo-top: 44px;
    --corio-logo-w: 310px;
    --corio-logo-h: 170px;
    --corio-nav-top: 154px;
    --corio-nav-left: 448px;
    --corio-nav-right: 138px;
    --corio-nav-gap: 12px;
    --corio-nav-h: 54px;
    --corio-home-w: 112px;
    --corio-about-w: 116px;
    --corio-best-w: 152px;
    --corio-contact-w: 122px;
    --corio-shipping-w: 205px;
    --corio-promotions-w: 150px;
    --corio-treatment-w: 148px;
    --corio-store-w: 166px;
    --corio-util-top: 34px;
    --corio-util-right: 166px;
  }

  

  
}

/* Mobile/tablet: clean stacked version, preserving the same brand language. */
@media only screen and (max-width: 980px) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   CORIODERMINA® — FINAL OLED PREMIUM HEADER REPLACEMENT
   Paste this at the VERY BOTTOM of your current CSS
   ========================================================= */

:root{
  --corio-oled-black: #000000;
  --corio-oled-black-2: #050505;
  --corio-gold: #d7ae67;
  --corio-gold-soft: #ead3a2;
  --corio-gold-deep: #b88a3c;
  --corio-panel: #fcfbf8;
  --corio-panel-2: #f8f5ef;
  --corio-ink: #111111;

  --corio-head-height: 276px;

  --corio-logo-left: 265px;
  --corio-logo-top: 46px;
  --corio-logo-width: 315px;
  --corio-logo-height: 162px;

  --corio-util-top: 34px;
  --corio-util-right: 170px;

  --corio-nav-top: 154px;
  --corio-nav-left: 535px;
  --corio-nav-right: 86px;
  --corio-nav-gap: 12px;
  --corio-btn-height: 54px;

  --corio-home-w: 114px;
  --corio-about-w: 114px;
  --corio-best-w: 166px;
  --corio-contact-w: 132px;
  --corio-shipping-w: 220px;
  --corio-promotions-w: 156px;
  --corio-treatments-w: 150px;
  --corio-store-w: 150px;
}

/* ========================= MASTER RESET FOR HEADER ONLY ========================= */




/* ========================= HEADER OUTER OLED SHELL ========================= */








/* ========================= LOGO ========================= */




/* ========================= UTILITY ROW ========================= */










/* ========================= HIDE DUPLICATE / OLD HEADER ITEMS ========================= */


/* remove earlier artificial spacing hacks */


/* ========================= MAIN NAV ========================= */






/* store links is pinned at the far right */


/* nav buttons */

















/* ========================= STORE LINKS DROPDOWN ========================= */








/* ========================= TREATMENTS BUTTON ========================= */






















/* ========================= RESPONSIVE SAFETY ========================= */
@media (max-width: 1600px) {
  :root{
    --corio-head-height: 256px;
    --corio-logo-left: 240px;
    --corio-logo-top: 42px;
    --corio-logo-width: 290px;
    --corio-logo-height: 150px;
    --corio-util-right: 128px;
    --corio-nav-left: 465px;
    --corio-nav-right: 58px;
    --corio-nav-top: 146px;
    --corio-nav-gap: 10px;
    --corio-home-w: 106px;
    --corio-about-w: 106px;
    --corio-best-w: 156px;
    --corio-contact-w: 124px;
    --corio-shipping-w: 206px;
    --corio-promotions-w: 146px;
    --corio-treatments-w: 142px;
    --corio-store-w: 142px;
  }

  

  
}

@media (max-width: 1280px) {
  

  

  

  

  

  

  

  

  

  

  
}

/* =========================================================
   CORIODERMINA® — OLED PREMIUM HEADER
   BUILT FOR THE ACTUAL FREEWEBSTORE MAIN_NAV HTML
   ---------------------------------------------------------
   Actual order:
   Home / About / Best Sellers / Cart / Contact /
   Shipping & Returns / Promotions / Treatments / Store Links

   Cart is hidden.
   Treatments remains the REAL main_nav page link.
   Store Links remains the REAL main_nav dropdown.
   The old #cat_nav / View Products control is removed completely.
   ========================================================= */

:root {
  /* Shield dimensions */
  --corio-header-h: 180px;
  --corio-inner-side: 88px;

  /* Logo */
  --corio-logo-x: 260px;
  --corio-logo-y: 23px;
  --corio-logo-w: 280px;
  --corio-logo-h: 128px;

  /* Utility links */
  --corio-util-top: 18px;
  --corio-util-right: 180px;

  /* Navigation */
  --corio-nav-top: 110px;
  --corio-nav-left: 465px;
  --corio-nav-right: 80px;
  --corio-nav-gap: 10px;
  --corio-nav-h: 45px;

  /* Button widths based on the real UI order */
  --corio-home-w: 112px;
  --corio-about-w: 116px;
  --corio-best-w: 152px;
  --corio-contact-w: 122px;
  --corio-shipping-w: 205px;
  --corio-promotions-w: 150px;
  --corio-treatments-w: 145px;
  --corio-store-w: 153px;

  /* Palette */
  --corio-oled: #000000;
  --corio-oled-soft: #050505;
  --corio-ivory: #fffdf9;
  --corio-beige: #f7f0e6;
  --corio-beige-deep: #ecddc8;
  --corio-gold: #d4af37;
  --corio-gold-soft: #ecd28f;
  --corio-ink: #111111;
}

/* ========================= OLED SHIELD ========================= */
html body #header {
  position: relative !important;
  display: block !important;
  width: calc(100% - 8px) !important;
  height: var(--corio-header-h) !important;
  min-height: var(--corio-header-h) !important;
  margin: 4px auto 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 9000 !important;

  border: 1px solid var(--corio-gold) !important;
  border-top-width: 2px !important;
  border-bottom-width: 2px !important;
  border-radius: 22px !important;

  background: var(--corio-oled) !important;
  background-image: none !important;

  box-shadow:
    inset 0 0 0 2px #000000,
    inset 0 0 0 3px rgba(212,175,55,.78),
    0 8px 20px rgba(0,0,0,.16) !important;
}

html body #header::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: var(--corio-inner-side) !important;
  right: var(--corio-inner-side) !important;
  z-index: 0 !important;
  pointer-events: none !important;

  border: 1.5px solid var(--corio-gold) !important;
  border-radius: 0 0 58px 58px / 0 0 48px 48px !important;

  background:
    radial-gradient(circle at 50% 20%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.56) 44%,
      rgba(255,255,255,0) 76%),
    linear-gradient(180deg,
      #ffffff 0%,
      var(--corio-ivory) 48%,
      var(--corio-beige) 80%,
      var(--corio-beige-deep) 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 4px 12px rgba(0,0,0,.06) !important;
}

html body #header::after {
  content: none !important;
  display: none !important;
}

/* ========================= HEADER CONTAINERS ========================= */
html body #header > .container.clearfix,
html body #header .container.clearfix,
html body #header #header_right {
  position: static !important;
  width: 100% !important;
  height: var(--corio-header-h) !important;
  min-height: var(--corio-header-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ========================= LOGO ========================= */
html body #header #logo_area {
  position: absolute !important;
  top: var(--corio-logo-y) !important;
  left: var(--corio-logo-x) !important;
  width: var(--corio-logo-w) !important;
  height: var(--corio-logo-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body #header #logo_area .fws_logo_container,
html body #header #logo_area picture,
html body #header #logo_area img#logo,
html body #header img#logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ========================= SIGN IN / CART SUMMARY ========================= */
html body #header #currency,
html body #header #account,
html body #header #mini_basket {
  position: absolute !important;
  top: var(--corio-util-top) !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

html body #header #currency {
  right: calc(var(--corio-util-right) + 290px) !important;
}

html body #header #account {
  right: calc(var(--corio-util-right) + 128px) !important;
}

html body #header #mini_basket {
  right: var(--corio-util-right) !important;
}

html body #header #account a,
html body #header #mini_basket a,
html body #header #account .user_txt,
html body #header #mini_basket .cart_txt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--corio-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body #header #display_currency,
html body #header #currency select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid rgba(212,175,55,.48) !important;
  border-radius: 5px !important;
  background: var(--corio-beige) !important;
  color: var(--corio-ink) !important;
  box-shadow: none !important;
}

/* ========================= REMOVE OLD SECOND TREATMENT NAV ========================= */
/* The real Treatments link is already in #main_nav.
   #cat_nav is the old "View Products" control and caused the duplicate. */
html body #header .grey_bar,
html body .grey_bar,
html body #header #cat_nav,
html body #cat_nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ========================= REAL MAIN NAV ========================= */
html body #header #main_nav {
  position: absolute !important;
  top: var(--corio-nav-top) !important;
  left: var(--corio-nav-left) !important;
  right: var(--corio-nav-right) !important;
  display: block !important;
  width: auto !important;
  height: var(--corio-nav-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 50 !important;
}

html body #header #main_nav > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: var(--corio-nav-gap) !important;
  width: 100% !important;
  height: var(--corio-nav-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  overflow: visible !important;
}

html body #header #main_nav > ul > li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: var(--corio-nav-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Hide only the Cart item from the actual UI markup. */
html body #header #main_nav > ul > li:has(> a[title="Cart"]),
html body #header #main_nav > ul > li > a[title="Cart"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* All visible header buttons */
html body #header #main_nav > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--corio-nav-h) !important;
  min-height: var(--corio-nav-h) !important;
  max-height: var(--corio-nav-h) !important;
  margin: 0 !important;
  padding: 0 12px !important;

  border: 1.5px solid var(--corio-gold) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--corio-beige) 100%) !important;
  color: var(--corio-ink) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.94) inset,
    0 2px 7px rgba(0,0,0,.09) !important;
  transform: none !important;
}

html body #header #main_nav > ul > li > a:hover {
  border-color: var(--corio-gold-soft) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eadac3 100%) !important;
  color: #000000 !important;
}

/* Real widths matched to the actual UI items */
html body #header #main_nav > ul > li > a[title="Home"] {
  width: var(--corio-home-w) !important;
}
html body #header #main_nav > ul > li > a[title="About"] {
  width: var(--corio-about-w) !important;
}
html body #header #main_nav > ul > li > a[title="Best Sellers"] {
  width: var(--corio-best-w) !important;
}
html body #header #main_nav > ul > li > a[title="Contact"] {
  width: var(--corio-contact-w) !important;
}
html body #header #main_nav > ul > li > a[title="Shipping & Returns"] {
  width: var(--corio-shipping-w) !important;
}
html body #header #main_nav > ul > li > a[title="Promotions"] {
  width: var(--corio-promotions-w) !important;
}
html body #header #main_nav > ul > li > a[title="Treatments"] {
  width: var(--corio-treatments-w) !important;
}

/* Store Links stays in the same flex row — no absolute positioning. */
html body #header #main_nav > ul > li.corio-store-links-item {
  position: relative !important;
  display: inline-flex !important;
  width: var(--corio-store-w) !important;
  height: var(--corio-nav-h) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > a {
  position: relative !important;
  width: var(--corio-store-w) !important;
  min-width: var(--corio-store-w) !important;
  max-width: var(--corio-store-w) !important;
  padding: 0 28px 0 12px !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > a .icon_down_arrow {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  color: var(--corio-ink) !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

/* ========================= STORE LINKS DROPDOWN ========================= */
html body #header #main_nav > ul > li.corio-store-links-item::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 10px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 999998 !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > ul.dropdown {
  position: absolute !important;
  top: calc(100% + 1px) !important;
  right: 0 !important;
  left: auto !important;
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  min-width: 225px !important;
  width: max-content !important;
  max-width: 340px !important;
  max-height: 380px !important;
  margin: 0 !important;
  padding: 9px !important;
  list-style: none !important;
  border: 1px solid rgba(212,175,55,.92) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #fffdf9 0%, #f6ead8 100%) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.20) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform: translateY(5px) !important;
  z-index: 1000000 !important;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease !important;
}

html body #header #main_nav > ul > li.corio-store-links-item:hover > ul.dropdown,
html body #header #main_nav > ul > li.corio-store-links-item:focus-within > ul.dropdown {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > ul.dropdown > li {
  display: block !important;
  width: 100% !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  list-style: none !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > ul.dropdown > li > a {
  display: block !important;
  min-width: 205px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(212,175,55,.18) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--corio-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body #header #main_nav > ul > li.corio-store-links-item > ul.dropdown > li > a:hover {
  background: linear-gradient(180deg, #111111 0%, #000000 100%) !important;
  color: #ffffff !important;
  border-color: var(--corio-gold) !important;
}

/* ========================= DESKTOP SCALING ========================= */
@media only screen and (max-width: 1750px) and (min-width: 1451px) {
  :root {
    --corio-logo-x: 245px;
    --corio-logo-w: 260px;
    --corio-nav-left: 420px;
    --corio-nav-right: 46px;
    --corio-nav-gap: 8px;

    --corio-home-w: 102px;
    --corio-about-w: 104px;
    --corio-best-w: 142px;
    --corio-contact-w: 112px;
    --corio-shipping-w: 190px;
    --corio-promotions-w: 138px;
    --corio-treatments-w: 134px;
    --corio-store-w: 142px;
  }

  html body #header #main_nav > ul > li > a {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 1450px) and (min-width: 1181px) {
  :root {
    --corio-logo-x: 215px;
    --corio-logo-w: 230px;
    --corio-nav-left: 350px;
    --corio-nav-right: 24px;
    --corio-nav-gap: 6px;

    --corio-home-w: 80px;
    --corio-about-w: 82px;
    --corio-best-w: 120px;
    --corio-contact-w: 94px;
    --corio-shipping-w: 154px;
    --corio-promotions-w: 106px;
    --corio-treatments-w: 108px;
    --corio-store-w: 114px;
  }

  html body #header #main_nav > ul > li > a {
    font-size: 11px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ========================= TABLET / MOBILE ========================= */
@media only screen and (max-width: 1180px) {
  html body #header {
    width: calc(100% - 10px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 5px auto 18px !important;
    padding: 16px 12px 22px !important;
    border-radius: 18px !important;
  }

  html body #header::before {
    top: 8px !important;
    bottom: 8px !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 18px !important;
  }

  html body #header > .container.clearfix,
  html body #header .container.clearfix,
  html body #header #header_right {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body #header #logo_area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 220px !important;
    height: 92px !important;
    margin: 4px auto 10px !important;
    transform: none !important;
  }

  html body #header #currency {
    display: none !important;
  }

  html body #header #account,
  html body #header #mini_basket {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    margin: 3px 6px 12px !important;
  }

  html body #header #header_right {
    text-align: center !important;
  }

  html body #header #main_nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(420px, calc(100vw - 52px)) !important;
    height: auto !important;
    margin: 6px auto 0 !important;
  }

  html body #header #main_nav > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
  }

  html body #header #main_nav > ul > li,
  html body #header #main_nav > ul > li.corio-store-links-item {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  html body #header #main_nav > ul > li > a,
  html body #header #main_nav > ul > li.corio-store-links-item > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 13px !important;
  }

  html body #header #main_nav > ul > li.corio-store-links-item > ul.dropdown {
    left: 50% !important;
    right: auto !important;
    width: min(360px, calc(100vw - 32px)) !important;
    min-width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    transform: translate(-50%, 5px) !important;
  }

  html body #header #main_nav > ul > li.corio-store-links-item:hover > ul.dropdown,
  html body #header #main_nav > ul > li.corio-store-links-item:focus-within > ul.dropdown {
    transform: translate(-50%, 0) !important;
  }
}

/* =========================================================
   CORIODERMINA® — PREMIUM ACCOUNT + CART UTILITY ROW
   Built for the exact Freewebstore HTML:
   #account + #mini_basket inside #header_right
   ========================================================= */

:root {
  --corio-util-top: 18px;
  --corio-util-cart-right: 102px;
  --corio-util-account-right: 258px;
}

/* Empty currency block should never occupy the premium utility row. */
html body #header #currency {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Account and cart sit on one clean horizontal line. */
html body #header #account,
html body #header #mini_basket {
  position: absolute !important;
  top: var(--corio-util-top) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
  white-space: nowrap !important;

  z-index: 80 !important;
}

html body #header #account {
  right: var(--corio-util-account-right) !important;
  left: auto !important;
}

html body #header #mini_basket {
  right: var(--corio-util-cart-right) !important;
  left: auto !important;
}

/* Exact clickable areas */
html body #header #account > a,
html body #header #mini_basket > a {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 8px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  letter-spacing: .18px !important;

  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  transform: none !important;
}

/* Premium icons: compact and vertically centered. */
html body #header #account .icon-user-add,
html body #header #mini_basket .icon-basket {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #111111 !important;

  font-size: 14px !important;
  line-height: 17px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  vertical-align: middle !important;
}

/* ---------------------------------------------------------
   Clean the platform-generated account text:
   source markup contains extra NBSP characters and a pipe.
   We replace only the visual text while keeping the link intact.
   --------------------------------------------------------- */
html body #header #account .user_txt {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 30px !important;

  white-space: nowrap !important;
}

html body #header #account .user_txt::before {
  content: "SIGN IN" !important;

  display: inline-block !important;

  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  letter-spacing: .18px !important;

  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Elegant divider between Sign In and cart. */
html body #header #account > a::after {
  content: "" !important;

  display: block !important;
  flex: 0 0 1px !important;

  width: 1px !important;
  height: 17px !important;

  margin: 0 0 0 17px !important;
  padding: 0 !important;

  background: rgba(17,17,17,.58) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Clean the cart text:
   source markup is " 0 items".
   Keep the live #sp_basket_info_count value and render ITEMS neatly.
   --------------------------------------------------------- */
html body #header #mini_basket .cart_txt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 30px !important;

  white-space: nowrap !important;
}

html body #header #mini_basket #sp_basket_info_count {
  display: inline-block !important;

  margin: 0 5px 0 0 !important;
  padding: 0 !important;

  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  letter-spacing: .18px !important;
}

html body #header #mini_basket .cart_txt::after {
  content: "ITEMS" !important;

  display: inline-block !important;

  color: #111111 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 30px !important;
  letter-spacing: .18px !important;

  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Subtle premium hover — no pill backgrounds. */
html body #header #account > a:hover .icon-user-add,
html body #header #account > a:hover .user_txt::before,
html body #header #mini_basket > a:hover .icon-basket,
html body #header #mini_basket > a:hover #sp_basket_info_count,
html body #header #mini_basket > a:hover .cart_txt::after {
  color: #9a7128 !important;
}

/* Medium desktop: keep the pair comfortably inside the ivory panel. */
@media only screen and (max-width: 1450px) and (min-width: 1181px) {
  :root {
    --corio-util-cart-right: 82px;
    --corio-util-account-right: 225px;
  }

  html body #header #account > a,
  html body #header #mini_basket > a,
  html body #header #account .user_txt::before,
  html body #header #mini_basket #sp_basket_info_count,
  html body #header #mini_basket .cart_txt::after {
    font-size: 12px !important;
  }
}

/* Tablet/mobile follows the existing stacked header behavior. */
@media only screen and (max-width: 1180px) {
  html body #header #account,
  html body #header #mini_basket {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    display: inline-flex !important;

    width: auto !important;
    height: 30px !important;

    margin: 3px 7px 12px !important;
  }

  html body #header #account > a::after {
    margin-left: 13px !important;
  }
}

/* =========================================================
   CORIODERMINA® — TIGHTER SIGN IN / CART SPACING
   Final utility-row spacing correction
   ========================================================= */

:root {
  --corio-util-cart-right: 102px;
  --corio-util-account-right: 210px;
}

/* Reduce the visual breathing room around the divider. */
html body #header #account > a::after {
  margin-left: 11px !important;
}

/* Keep the cart group compact. */
html body #header #mini_basket > a {
  gap: 6px !important;
}

html body #header #mini_basket #sp_basket_info_count {
  margin-right: 4px !important;
}

/* Medium desktop: preserve the same tighter relationship. */
@media only screen and (max-width: 1450px) and (min-width: 1181px) {
  :root {
    --corio-util-cart-right: 82px;
    --corio-util-account-right: 185px;
  }
}

/* =========================================================
   CORIODERMINA® — FINAL ELEGANT STORE FINISH
   Clean authoritative section — July 2026

   DESIGN:
   - Preserve the current black premium header.
   - White seamless store/product area.
   - Product buttons: white, square, fine black outline.
   - Prices: elegant text only — absolutely NO boxes.
   - Footer/lower area: clean white, no caramel block.
   - Translate + Need Help: white square controls with fine black outline.
   ========================================================= */

:root{
  --corio-clean-white: #ffffff;
  --corio-clean-black: #111111;
  --corio-clean-charcoal: #303030;
  --corio-clean-soft: #555555;
  --corio-clean-line: #d9d9d9;
  --corio-clean-hover: #f7f7f7;
}

/* =========================================================
   1) PRODUCT / STORE AREA — WHITE AND SEAMLESS
   ========================================================= */

html body .products-grid,
html body .featured_products,
html body #featured_products,
html body .home_products{
  background: transparent !important;
}

/* Product cards: refined white presentation, not a beige pasted-on block */
html body .product,
html body .product_item,
html body .product-box,
html body .productBox,
html body .prod_box,
html body .product-card{
  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid #e2e2e2 !important;
  border-radius: 12px !important;

  box-shadow: 0 8px 22px rgba(0,0,0,.055) !important;
}

html body .product::before,
html body .product::after,
html body .product_item::before,
html body .product_item::after,
html body .product-box::before,
html body .product-box::after,
html body .productBox::before,
html body .productBox::after,
html body .prod_box::before,
html body .prod_box::after,
html body .product-card::before,
html body .product-card::after{
  content: none !important;
  display: none !important;
}

html body .product:hover,
html body .product_item:hover,
html body .product-box:hover,
html body .productBox:hover,
html body .prod_box:hover,
html body .product-card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 11px 26px rgba(0,0,0,.075) !important;
}

html body .product img,
html body .product_item img,
html body .product-box img,
html body .productBox img,
html body .prod_box img,
html body .product-card img{
  background: #ffffff !important;
  border-radius: 8px !important;
}

/* Product names and supporting copy */
html body .product_name,
html body .product_name *,
html body .product-card h1,
html body .product-card h2,
html body .product-card h3,
html body .product-card h4,
html body .product-card h5{
  color: #252525 !important;
  text-shadow: none !important;
}

html body .product p,
html body .product_item p,
html body .product-box p,
html body .productBox p,
html body .prod_box p,
html body .product-card p{
  color: #555555 !important;
  text-shadow: none !important;
}

/* =========================================================
   2) PRODUCT BUTTONS — WHITE, SQUARE, FINE BLACK BORDER
   ========================================================= */

/* Actual Freewebstore product buttons + common product CTAs */
html body .product .btn,
html body .product_item .btn,
html body .product-box .btn,
html body .productBox .btn,
html body .prod_box .btn,
html body .product-card .btn,
html body .products-grid .btn,
html body .featured_products .btn,
html body #featured_products .btn,
html body .home_products .btn,

html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn,

html body div.btn[data-lang="Buy"],
html body div.btn[data-lang="Details"],
html body a[title*="Buy"],
html body a[title*="Details"],
html body a[title*="Add"],
html body button[name*="cart"],
html body input[value*="Buy"],
html body input[value*="Add"]{
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 112px !important;
  max-width: 185px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 7px auto 0 !important;
  padding: 0 18px !important;

  border: 1px solid #111111 !important;
  border-radius: 5px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;
  -webkit-text-fill-color: #303030 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .28px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  overflow: hidden !important;
  cursor: pointer !important;
}

/* Remove every old caramel/gold/pill decoration */
html body .product .btn::before,
html body .product .btn::after,
html body .product_item .btn::before,
html body .product_item .btn::after,
html body .product-box .btn::before,
html body .product-box .btn::after,
html body .productBox .btn::before,
html body .productBox .btn::after,
html body .prod_box .btn::before,
html body .prod_box .btn::after,
html body .product-card .btn::before,
html body .product-card .btn::after,
html body .products-grid .btn::before,
html body .products-grid .btn::after,
html body .featured_products .btn::before,
html body .featured_products .btn::after,
html body #featured_products .btn::before,
html body #featured_products .btn::after,
html body .home_products .btn::before,
html body .home_products .btn::after,
html body div.btn[data-lang="Buy"]::before,
html body div.btn[data-lang="Buy"]::after,
html body div.btn[data-lang="Details"]::before,
html body div.btn[data-lang="Details"]::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Neutralize any clickable wrapper around Freewebstore's inner div.btn */
html body .product a:has(> div.btn),
html body .product_item a:has(> div.btn),
html body .product-box a:has(> div.btn),
html body .productBox a:has(> div.btn),
html body .prod_box a:has(> div.btn),
html body .product-card a:has(> div.btn),
html body .products-grid a:has(> div.btn),
html body .featured_products a:has(> div.btn),
html body #featured_products a:has(> div.btn){
  display: inline-block !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  overflow: visible !important;
}

/* Elegant neutral hover */
html body .product .btn:hover,
html body .product_item .btn:hover,
html body .product-box .btn:hover,
html body .productBox .btn:hover,
html body .prod_box .btn:hover,
html body .product-card .btn:hover,
html body .products-grid .btn:hover,
html body .featured_products .btn:hover,
html body #featured_products .btn:hover,
html body .home_products .btn:hover,
html body div.btn[data-lang="Buy"]:hover,
html body div.btn[data-lang="Details"]:hover{
  border-color: #000000 !important;

  background: #f7f7f7 !important;
  background-image: none !important;

  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   3) PRICES — ELEGANT TEXT ONLY, ZERO BOXES
   ========================================================= */

/* Strip ALL possible price containers of boxes, borders and backgrounds */
html body .price,
html body .price_box,
html body .price-box,
html body .pricebox,
html body .product_price,
html body .product-price,
html body .product_price_box,
html body .product-price-box,
html body .product_price_container,
html body .product-price-container,
html body .price_container,
html body .price-container,
html body .price_wrapper,
html body .price-wrapper,
html body .product_price_wrapper,
html body .product-price-wrapper,
html body .current_price,
html body .current-price,
html body .regular_price,
html body .regular-price,
html body .sale_price,
html body .sale-price,
html body .special_price,
html body .special-price,
html body .product_sale_price,
html body .product-sale-price{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;

  outline: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Kill any decorative pseudo-boxes on all common price wrappers */
html body .price::before,
html body .price::after,
html body .price_box::before,
html body .price_box::after,
html body .price-box::before,
html body .price-box::after,
html body .pricebox::before,
html body .pricebox::after,
html body .product_price::before,
html body .product_price::after,
html body .product-price::before,
html body .product-price::after,
html body .price_container::before,
html body .price_container::after,
html body .price-container::before,
html body .price-container::after,
html body .price_wrapper::before,
html body .price_wrapper::after,
html body .price-wrapper::before,
html body .price-wrapper::after{
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  box-shadow: none !important;
}

/* Main live price — typography only */
html body .product_now_price,
html body .product .product_now_price,
html body .product_item .product_now_price,
html body .product-box .product_now_price,
html body .productBox .product_now_price,
html body .prod_box .product_now_price,
html body .product-card .product_now_price,
html body .products-grid .product_now_price,
html body .featured_products .product_now_price,
html body #featured_products .product_now_price{
  display: inline-block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 9px auto 5px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #303030 !important;
  -webkit-text-fill-color: #303030 !important;

  font-family: "Times New Roman", Times, serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .1px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Nothing inside a price may draw a border or second box */
html body .product_now_price *,
html body .product_now_price span,
html body .product_now_price div,
html body .product_now_price strong,
html body .product_now_price em,
html body .product_now_price font{
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;

  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

html body .product_now_price::before,
html body .product_now_price::after,
html body .product_now_price *::before,
html body .product_now_price *::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Sale / current / regular prices stay neutral and elegant */
html body .sale_price,
html body .sale-price,
html body .special_price,
html body .special-price,
html body .product_sale_price,
html body .product-sale-price,
html body .current_price,
html body .current-price,
html body .regular_price,
html body .regular-price{
  color: #303030 !important;
  -webkit-text-fill-color: #303030 !important;

  font-family: "Times New Roman", Times, serif !important;
  font-weight: 700 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Old price: discreet gray strikethrough, still no box */
html body .old_price,
html body .old-price,
html body .was_price,
html body .was-price{
  color: #777777 !important;
  -webkit-text-fill-color: #777777 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  text-decoration: line-through !important;
}

/* Tax / breakdown: clean supporting typography only */
html body .price_breakdown,
html body .price_inc_tax,
html body .price_ex_tax{
  display: block !important;

  margin: 3px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  color: #5a5a5a !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;

  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
}

/* =========================================================
   4) HOME "SHOP BY CATEGORY" BUTTONS — SAME WHITE/BLACK LANGUAGE
   ========================================================= */

html body .corio-shop-dropdown > summary.corio-btn,
html body .corio-shop-dropdown > summary.corio-btn--caramel,
html body .corio-shop-dropdown > summary.corio-btn--dark,
html body .corio-shop-dropdown > summary.corio-btn--bronze,
html body .corio-shop-dropdown > summary.corio-btn--ivory{
  min-height: 50px !important;
  padding: 11px 15px !important;

  border: 1px solid #111111 !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

html body .corio-shop-dropdown > summary.corio-btn::before,
html body .corio-shop-dropdown > summary.corio-btn::after{
  content: none !important;
  display: none !important;
}

html body .corio-shop-dropdown > summary.corio-btn .corio-btn-text,
html body .corio-shop-dropdown > summary.corio-btn .corio-btn-arrow{
  color: #303030 !important;
}

/* =========================================================
   5) TRANSLATE + NEED HELP — WHITE SQUARE CONTROLS
   ========================================================= */

html body #corio-google-translate{
  border: 1px solid #111111 !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  box-shadow: 0 5px 14px rgba(0,0,0,.07) !important;
}

html body #corio-google-translate:hover{
  border-color: #000000 !important;
  background: #f8f8f8 !important;
  box-shadow: 0 7px 16px rgba(0,0,0,.09) !important;
}

html body .corio-translate-label{
  color: #303030 !important;
}

html body #google_translate_element .goog-te-gadget-simple{
  border: 1px solid #111111 !important;
  border-radius: 5px !important;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow: none !important;
}

html body #google_translate_element .goog-te-gadget-simple a,
html body #google_translate_element .goog-te-gadget-simple span,
html body #google_translate_element .goog-te-gadget-simple font,
html body #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed{
  color: #303030 !important;
}

/* Exact Need Help button used below the homepage scroll */
html body .corio-help-wrapper > #corio-chatbase-launcher,
html body button#corio-chatbase-launcher{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-width: 150px !important;
  height: 48px !important;
  min-height: 48px !important;

  padding: 0 18px !important;

  border: 1px solid #111111 !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

html body #corio-chatbase-launcher::before,
html body #corio-chatbase-launcher::after{
  content: none !important;
  display: none !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon,
html body #corio-chatbase-launcher .corio-chatbase-text,
html body #corio-chatbase-launcher svg{
  color: #303030 !important;
}

html body #corio-chatbase-launcher:hover{
  background: #f8f8f8 !important;
  color: #111111 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.08) !important;
}

/* =========================================================
   6) FOOTER / LOWER AREA — WHITE, CLEAN, SEAMLESS
   ========================================================= */

html body footer,
html body #footer,
html body .footer,
html body .footer_wrap,
html body #footer_area,
html body .bottom,
html body .bottom-bar,
html body #bottom,
html body #copyright{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  border-color: #e2e2e2 !important;
  box-shadow: none !important;
}

html body #footer::before,
html body #footer::after{
  content: none !important;
  display: none !important;
}

html body #footer .container,
html body #footer .container.clearfix,
html body #footer #newsletter,
html body #footer #footer_left,
html body #footer #footer_right{
  background: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  box-shadow: none !important;
}

html body footer *,
html body #footer *,
html body #copyright *{
  text-shadow: none !important;
}

html body footer a,
html body #footer a,
html body .footer a,
html body .footer_wrap a,
html body #footer_area a,
html body .bottom a,
html body .bottom-bar a,
html body #bottom a,
html body #copyright a{
  color: #303030 !important;
}

html body footer a:hover,
html body #footer a:hover,
html body #copyright a:hover{
  color: #111111 !important;
}

/* Footer policy buttons use the same clean visual language */
html body a[data-lang="Privacy"][title="Privacy"],
html body a[data-lang="Terms"][title="Terms"],
html body a[href*="storepageWwC8r.aspx"][title="Privacy"],
html body a[href*="storepageuReR7.aspx"][title="Terms"]{
  min-width: 108px !important;
  min-height: 40px !important;

  margin: 5px 6px !important;
  padding: 9px 16px !important;

  border: 1px solid #111111 !important;
  border-radius: 5px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* =========================================================
   7) RESPONSIVE CLEANUP
   ========================================================= */

@media (max-width: 768px){
  html body .product .btn,
  html body .product_item .btn,
  html body .product-box .btn,
  html body .productBox .btn,
  html body .prod_box .btn,
  html body .product-card .btn,
  html body .products-grid .btn,
  html body .featured_products .btn,
  html body #featured_products .btn,
  html body .home_products .btn,
  html body div.btn[data-lang="Buy"],
  html body div.btn[data-lang="Details"]{
    min-width: 106px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 14px !important;

    border-radius: 5px !important;

    font-size: 11px !important;
  }

  html body .product_now_price,
  html body .product .product_now_price,
  html body .product_item .product_now_price,
  html body .product-card .product_now_price{
    margin-top: 8px !important;

    font-size: 19px !important;
  }

  html body #corio-google-translate{
    border-radius: 6px !important;
  }
}

/* =========================================================
   END — FINAL ELEGANT STORE FINISH
   ========================================================= */

/* =========================================================
   CORIODERMINA® — EXACT PRICE RESET
   Targets the real HTML:
   <span class="product_now_price">$41.34</span>

   Purpose:
   - Remove the ugly outer price tab.
   - Remove the inner price square.
   - Leave only clean elegant price typography.
   ========================================================= */

/* Remove the OUTER box directly surrounding the real price span.
   Product-card classes are excluded so the card itself is never stripped. */
html body .product :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product_item :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product-box :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .productBox :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .prod_box :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product-card :where(div, p, section, article, li, td, span):has(> span.product_now_price):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card) {
  display: block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 8px auto 4px !important;
  padding: 0 !important;

  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* The REAL live price span: typography only, absolutely no box. */
html body span.product_now_price,
html body .product span.product_now_price,
html body .product_item span.product_now_price,
html body .product-box span.product_now_price,
html body .productBox span.product_now_price,
html body .prod_box span.product_now_price,
html body .product-card span.product_now_price {
  display: inline-block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #303030 !important;
  -webkit-text-fill-color: #303030 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .15px !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Kill any remaining decorative border generated around the price. */
html body span.product_now_price::before,
html body span.product_now_price::after,
html body .product :where(div, p, section, article, li, td, span):has(> span.product_now_price)::before,
html body .product :where(div, p, section, article, li, td, span):has(> span.product_now_price)::after,
html body .product_item :where(div, p, section, article, li, td, span):has(> span.product_now_price)::before,
html body .product_item :where(div, p, section, article, li, td, span):has(> span.product_now_price)::after,
html body .product-card :where(div, p, section, article, li, td, span):has(> span.product_now_price)::before,
html body .product-card :where(div, p, section, article, li, td, span):has(> span.product_now_price)::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* =========================================================
   CORIODERMINA® — PURE BLACK & WHITE TABS
   FINAL MONOCHROME OVERRIDE
   ---------------------------------------------------------
   - Pure white background
   - Pure black border
   - Pure black text
   - Hover: pure black background / white text
   - Prices remain clean text only, with no boxes
   ========================================================= */

/* PRODUCT BUTTONS / TABS */
html body .product .btn,
html body .product_item .btn,
html body .product-box .btn,
html body .productBox .btn,
html body .prod_box .btn,
html body .product-card .btn,
html body .products-grid .btn,
html body .featured_products .btn,
html body #featured_products .btn,
html body .home_products .btn,
html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn,
html body div.btn[data-lang="Buy"],
html body div.btn[data-lang="Details"],
html body a[title*="Buy"],
html body a[title*="Details"],
html body a[title*="Add"] {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* PURE BLACK HOVER */
html body .product .btn:hover,
html body .product_item .btn:hover,
html body .product-box .btn:hover,
html body .productBox .btn:hover,
html body .prod_box .btn:hover,
html body .product-card .btn:hover,
html body .products-grid .btn:hover,
html body .featured_products .btn:hover,
html body #featured_products .btn:hover,
html body .home_products .btn:hover,
html body .product div.btn:hover,
html body .product_item div.btn:hover,
html body .product-card div.btn:hover,
html body div.btn[data-lang="Buy"]:hover,
html body div.btn[data-lang="Details"]:hover {
  border-color: #000000 !important;

  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* SHOP BY CATEGORY TABS */
html body .corio-shop-dropdown > summary.corio-btn,
html body .corio-shop-dropdown > summary.corio-btn--caramel,
html body .corio-shop-dropdown > summary.corio-btn--dark,
html body .corio-shop-dropdown > summary.corio-btn--bronze,
html body .corio-shop-dropdown > summary.corio-btn--ivory {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body .corio-shop-dropdown > summary.corio-btn .corio-btn-text,
html body .corio-shop-dropdown > summary.corio-btn .corio-btn-arrow {
  color: #000000 !important;
}

html body .corio-shop-dropdown > summary.corio-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

html body .corio-shop-dropdown > summary.corio-btn:hover .corio-btn-text,
html body .corio-shop-dropdown > summary.corio-btn:hover .corio-btn-arrow {
  color: #ffffff !important;
}

/* NEED HELP */
html body .corio-help-wrapper > #corio-chatbase-launcher,
html body button#corio-chatbase-launcher {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon,
html body #corio-chatbase-launcher .corio-chatbase-text,
html body #corio-chatbase-launcher svg {
  color: #000000 !important;
}

html body #corio-chatbase-launcher:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

html body #corio-chatbase-launcher:hover .corio-chatbase-icon,
html body #corio-chatbase-launcher:hover .corio-chatbase-text,
html body #corio-chatbase-launcher:hover svg {
  color: #ffffff !important;
}

/* TRANSLATE */
html body #corio-google-translate {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body .corio-translate-label {
  color: #000000 !important;
}

html body #google_translate_element .goog-te-gadget-simple {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  background-image: none !important;

  box-shadow: none !important;
}

html body #google_translate_element .goog-te-gadget-simple a,
html body #google_translate_element .goog-te-gadget-simple span,
html body #google_translate_element .goog-te-gadget-simple font,
html body #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed {
  color: #000000 !important;
}

/* PRICES: BLACK TEXT ONLY, NO TAB / NO BOX */
html body span.product_now_price,
html body .product_now_price {
  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* DROPDOWN LINKS: MONOCHROME */
html body .corio-dropdown-menu {
  border: 1px solid #000000 !important;
  background: #ffffff !important;
  background-image: none !important;
}

html body .corio-dropdown-menu a {
  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  background: #ffffff !important;
  color: #000000 !important;

  box-shadow: none !important;
}

html body .corio-dropdown-menu a:hover,
html body .corio-dropdown-menu a:focus {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* =========================================================
   CORIODERMINA® — FINAL WHITE BUTTONS / BLACK BORDER / BLACK TEXT
   Keep buttons white at all times, including hover.
   ========================================================= */

/* PRODUCT BUTTONS */
html body .product .btn,
html body .product_item .btn,
html body .product-box .btn,
html body .productBox .btn,
html body .prod_box .btn,
html body .product-card .btn,
html body .products-grid .btn,
html body .featured_products .btn,
html body #featured_products .btn,
html body .home_products .btn,
html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn,
html body div.btn[data-lang="Buy"],
html body div.btn[data-lang="Details"],
html body a[title*="Buy"],
html body a[title*="Details"],
html body a[title*="Add"] {
  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* PRODUCT BUTTON HOVER — STAYS WHITE */
html body .product .btn:hover,
html body .product_item .btn:hover,
html body .product-box .btn:hover,
html body .productBox .btn:hover,
html body .prod_box .btn:hover,
html body .product-card .btn:hover,
html body .products-grid .btn:hover,
html body .featured_products .btn:hover,
html body #featured_products .btn:hover,
html body .home_products .btn:hover,
html body .product div.btn:hover,
html body .product_item div.btn:hover,
html body .product-card div.btn:hover,
html body div.btn[data-lang="Buy"]:hover,
html body div.btn[data-lang="Details"]:hover {
  background: #ffffff !important;
  background-image: none !important;

  border-color: #000000 !important;

  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;

  box-shadow: 0 3px 10px rgba(0,0,0,.08) !important;
  transform: translateY(-1px) !important;
}

/* SHOP BY CATEGORY BUTTONS */
html body .corio-shop-dropdown > summary.corio-btn,
html body .corio-shop-dropdown > summary.corio-btn--caramel,
html body .corio-shop-dropdown > summary.corio-btn--dark,
html body .corio-shop-dropdown > summary.corio-btn--bronze,
html body .corio-shop-dropdown > summary.corio-btn--ivory {
  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body .corio-shop-dropdown > summary.corio-btn .corio-btn-text,
html body .corio-shop-dropdown > summary.corio-btn .corio-btn-arrow {
  color: #000000 !important;
}

html body .corio-shop-dropdown > summary.corio-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.08) !important;
}

html body .corio-shop-dropdown > summary.corio-btn:hover .corio-btn-text,
html body .corio-shop-dropdown > summary.corio-btn:hover .corio-btn-arrow {
  color: #000000 !important;
}

/* NEED HELP */
html body .corio-help-wrapper > #corio-chatbase-launcher,
html body button#corio-chatbase-launcher,
html body #corio-chatbase-launcher:hover {
  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body #corio-chatbase-launcher .corio-chatbase-icon,
html body #corio-chatbase-launcher .corio-chatbase-text,
html body #corio-chatbase-launcher svg,
html body #corio-chatbase-launcher:hover .corio-chatbase-icon,
html body #corio-chatbase-launcher:hover .corio-chatbase-text,
html body #corio-chatbase-launcher:hover svg {
  color: #000000 !important;
}

/* TRANSLATE */
html body #corio-google-translate,
html body #corio-google-translate:hover,
html body #google_translate_element .goog-te-gadget-simple,
html body #google_translate_element .goog-te-gadget-simple:hover {
  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  color: #000000 !important;

  box-shadow: none !important;
}

html body .corio-translate-label,
html body #google_translate_element .goog-te-gadget-simple a,
html body #google_translate_element .goog-te-gadget-simple span,
html body #google_translate_element .goog-te-gadget-simple font,
html body #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed {
  color: #000000 !important;
}

/* DROPDOWN LINKS */
html body .corio-dropdown-menu a,
html body .corio-dropdown-menu a:hover,
html body .corio-dropdown-menu a:focus {
  background: #ffffff !important;

  border: 1px solid #000000 !important;
  border-radius: 4px !important;

  color: #000000 !important;

  box-shadow: none !important;
  transform: none !important;
}

/* =========================================================
   CORIODERMINA® — FINAL UNIFIED ACTION TABS
   READ MORE / DETAILS / BUY
   White pearl + soft gray + elegant dark border + dark text
   FINAL AUTHORITY — KEEP AT THE VERY END
   ========================================================= */

:root{
  --corio-action-bg-top: #FFFFFF;
  --corio-action-bg-bottom: #F2F2F2;
  --corio-action-border: #3A3A3A;
  --corio-action-text: #1F1F1F;
  --corio-action-hover-bg: #ECECEC;
  --corio-action-shadow: rgba(0,0,0,.10);
}

/* ---------------------------------------------------------
   1) READ MORE
   Real visible text:
   <span data-lang="Read More">Read More</span>
   --------------------------------------------------------- */

html body .home_blog_container .read_more.btn,
html body .home_blog_container a.read_more,
html body .blog_item_home .read_more.btn,
html body .blog_item_home a.read_more,
html body a:has(> span[data-lang="Read More"]),
html body button:has(> span[data-lang="Read More"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 124px !important;
  max-width: 180px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 10px auto 8px !important;
  padding: 0 18px !important;

  border: 1px solid var(--corio-action-border) !important;
  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      var(--corio-action-bg-top) 0%,
      var(--corio-action-bg-bottom) 100%
    ) !important;
  background-color: #FFFFFF !important;

  color: var(--corio-action-text) !important;
  -webkit-text-fill-color: var(--corio-action-text) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 3px 8px var(--corio-action-shadow) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: hidden !important;
}

/* The inner Read More span inherits the exact tab typography */
html body .home_blog_container .read_more.btn span[data-lang="Read More"],
html body .blog_item_home .read_more.btn span[data-lang="Read More"],
html body a > span[data-lang="Read More"],
html body button > span[data-lang="Read More"] {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  color: var(--corio-action-text) !important;
  -webkit-text-fill-color: var(--corio-action-text) !important;

  font: inherit !important;
  line-height: 1 !important;

  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   2) DETAILS + BUY
   Real visible HTML:
   <div class="btn">Details</div>
   <div class="btn">Buy</div>
   --------------------------------------------------------- */

/* Neutralize the outer clickable wrapper so only ONE tab is visible */
html body .product a:has(> div.btn),
html body .product_item a:has(> div.btn),
html body .product-box a:has(> div.btn),
html body .productBox a:has(> div.btn),
html body .prod_box a:has(> div.btn),
html body .product-card a:has(> div.btn),
html body .products-grid a:has(> div.btn),
html body .featured_products a:has(> div.btn),
html body #featured_products a:has(> div.btn),
html body .home_products a:has(> div.btn),
html body .product button:has(> div.btn),
html body .product_item button:has(> div.btn),
html body .product-card button:has(> div.btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 3px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  overflow: visible !important;
}

/* Actual DETAILS and BUY tabs */
html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn,
html body .products-grid div.btn,
html body .featured_products div.btn,
html body #featured_products div.btn,
html body .home_products div.btn,
html body div.btn[data-lang="Details"],
html body div.btn[data-lang="Buy"] {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 7px 3px 0 !important;
  padding: 0 14px !important;

  border: 1px solid var(--corio-action-border) !important;
  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      var(--corio-action-bg-top) 0%,
      var(--corio-action-bg-bottom) 100%
    ) !important;
  background-color: #FFFFFF !important;

  color: var(--corio-action-text) !important;
  -webkit-text-fill-color: var(--corio-action-text) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 42px !important;
  letter-spacing: .35px !important;

  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 3px 8px var(--corio-action-shadow) !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  overflow: hidden !important;
}

/* Remove every old brown/gold pill decoration */
html body .home_blog_container .read_more.btn::before,
html body .home_blog_container .read_more.btn::after,
html body .blog_item_home .read_more.btn::before,
html body .blog_item_home .read_more.btn::after,
html body .product div.btn::before,
html body .product div.btn::after,
html body .product_item div.btn::before,
html body .product_item div.btn::after,
html body .product-box div.btn::before,
html body .product-box div.btn::after,
html body .productBox div.btn::before,
html body .productBox div.btn::after,
html body .prod_box div.btn::before,
html body .prod_box div.btn::after,
html body .product-card div.btn::before,
html body .product-card div.btn::after,
html body .products-grid div.btn::before,
html body .products-grid div.btn::after,
html body .featured_products div.btn::before,
html body .featured_products div.btn::after,
html body #featured_products div.btn::before,
html body #featured_products div.btn::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: none !important;
  background-image: none !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   3) HOVER — SAME PEARL FAMILY, NO BROWN / GOLD / BLACK FILL
   --------------------------------------------------------- */

html body .home_blog_container .read_more.btn:hover,
html body .home_blog_container a.read_more:hover,
html body .blog_item_home .read_more.btn:hover,
html body a:has(> span[data-lang="Read More"]):hover,
html body .product div.btn:hover,
html body .product_item div.btn:hover,
html body .product-box div.btn:hover,
html body .productBox div.btn:hover,
html body .prod_box div.btn:hover,
html body .product-card div.btn:hover,
html body .products-grid div.btn:hover,
html body .featured_products div.btn:hover,
html body #featured_products div.btn:hover,
html body .home_products div.btn:hover {
  border-color: #111111 !important;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      var(--corio-action-hover-bg) 100%
    ) !important;

  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 5px 12px rgba(0,0,0,.13) !important;

  transform: translateY(-1px) !important;
}

html body .home_blog_container .read_more.btn:hover span[data-lang="Read More"],
html body a:has(> span[data-lang="Read More"]):hover span[data-lang="Read More"] {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

/* ---------------------------------------------------------
   4) MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px){
  html body .home_blog_container .read_more.btn,
  html body .blog_item_home .read_more.btn,
  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-card div.btn,
  html body .products-grid div.btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    border-radius: 6px !important;

    font-size: 11px !important;
  }

  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-card div.btn,
  html body .products-grid div.btn {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;

    line-height: 40px !important;
  }
}

/* =========================================================
   CORIODERMINA® — FINAL DETAILS / BUY PARALLEL ROW FIX
   Keeps both action tabs on the SAME horizontal line.
   ========================================================= */

/* 1) The immediate action-row wrapper: force a true horizontal row.
   These selectors only target inner wrappers that contain consecutive
   clickable children with <div class="btn">...</div>. */
html body .product :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product_item :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product-box :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .productBox :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .prod_box :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .product-card :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card),
html body .products-grid :where(div,section,p,footer):has(> a > div.btn):has(> a + a > div.btn):not(.product):not(.product_item):not(.product-box):not(.productBox):not(.prod_box):not(.product-card) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 42px !important;

  margin: 7px auto 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* 2) Wrappers around Details / Buy must behave as row items,
   never as centered full-width blocks. */
html body .product a:has(> div.btn),
html body .product_item a:has(> div.btn),
html body .product-box a:has(> div.btn),
html body .productBox a:has(> div.btn),
html body .prod_box a:has(> div.btn),
html body .product-card a:has(> div.btn),
html body .products-grid a:has(> div.btn),
html body .featured_products a:has(> div.btn),
html body #featured_products a:has(> div.btn),
html body .home_products a:has(> div.btn) {
  display: inline-flex !important;
  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 3px !important;
  padding: 0 !important;

  vertical-align: top !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* 3) The actual tabs themselves have identical dimensions and zero outer margin. */
html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn,
html body .products-grid div.btn,
html body .featured_products div.btn,
html body #featured_products div.btn,
html body .home_products div.btn,
html body div.btn[data-lang="Details"],
html body div.btn[data-lang="Buy"] {
  flex: 0 0 112px !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  vertical-align: top !important;
}

/* 4) Cancel older CSS that explicitly stacked a second .btn below the first. */
html body .product .btn + .btn,
html body .product_item .btn + .btn,
html body .product-box .btn + .btn,
html body .productBox .btn + .btn,
html body .prod_box .btn + .btn,
html body .product-card .btn + .btn,
html body .products-grid .btn + .btn {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* 5) Fallback for themes where the wrappers themselves are consecutive siblings.
   Keep them inline and remove automatic centering. */
html body .product a:has(> div.btn) + a:has(> div.btn),
html body .product_item a:has(> div.btn) + a:has(> div.btn),
html body .product-box a:has(> div.btn) + a:has(> div.btn),
html body .productBox a:has(> div.btn) + a:has(> div.btn),
html body .prod_box a:has(> div.btn) + a:has(> div.btn),
html body .product-card a:has(> div.btn) + a:has(> div.btn),
html body .products-grid a:has(> div.btn) + a:has(> div.btn) {
  margin-left: 0 !important;
}

/* Mobile: still parallel, just slightly narrower. */
@media (max-width: 768px) {
  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-box div.btn,
  html body .productBox div.btn,
  html body .prod_box div.btn,
  html body .product-card div.btn,
  html body .products-grid div.btn,
  html body div.btn[data-lang="Details"],
  html body div.btn[data-lang="Buy"] {
    flex-basis: 104px !important;

    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  html body .product a:has(> div.btn),
  html body .product_item a:has(> div.btn),
  html body .product-card a:has(> div.btn),
  html body .products-grid a:has(> div.btn) {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 2px !important;
  }
}

/* =========================================================
   CORIODERMINA® — TRUE DETAILS + BUY SIDE-BY-SIDE FIX
   The store structure uses a linked DETAILS .btn and a separate BUY .btn.
   This targets the ACTUAL action-row pattern instead of assuming two links.
   FINAL AUTHORITY — KEEP AT THE VERY END
   ========================================================= */

/* ---------------------------------------------------------
   A) TURN THE REAL ACTION WRAPPER INTO ONE HORIZONTAL ROW
   We intentionally exclude wrappers containing images so we do not
   accidentally convert the full product card into a flex row.
   --------------------------------------------------------- */

html body .products-grid :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .featured_products :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body #featured_products :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .home_products :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),

html body .product :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .product_item :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .product-box :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .productBox :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .prod_box :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),
html body .product-card :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> div.btn),

/* Alternate Freewebstore pattern: DETAILS link + BUY inside form/button wrapper */
html body .products-grid :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),
html body .featured_products :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),
html body #featured_products :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),
html body .product :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),
html body .product_item :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),
html body .product-card :where(div,section,p,footer,li):not(:has(img)):has(> a > div.btn):has(> form div.btn),

/* Alternate pattern: two separate wrappers, each containing one .btn */
html body .products-grid :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn),
html body .featured_products :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn),
html body #featured_products :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn),
html body .product :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn),
html body .product_item :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn),
html body .product-card :where(div,section,p,footer,li):not(:has(img)):has(> * > div.btn):has(> * + * > div.btn) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  column-gap: 6px !important;
  row-gap: 0 !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 7px auto 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* ---------------------------------------------------------
   B) FLATTEN A FORM WRAPPER IF BUY IS INSIDE ONE
   This allows the BUY tab to behave like the DETAILS sibling.
   --------------------------------------------------------- */

html body .products-grid form:has(div.btn),
html body .featured_products form:has(div.btn),
html body #featured_products form:has(div.btn),
html body .home_products form:has(div.btn),
html body .product form:has(div.btn),
html body .product_item form:has(div.btn),
html body .product-box form:has(div.btn),
html body .productBox form:has(div.btn),
html body .prod_box form:has(div.btn),
html body .product-card form:has(div.btn) {
  display: contents !important;
}

/* ---------------------------------------------------------
   C) DETAILS WRAPPER AND BUY ELEMENT: SAME ROW, NO AUTO-CENTERING
   --------------------------------------------------------- */

html body .products-grid a:has(> div.btn),
html body .featured_products a:has(> div.btn),
html body #featured_products a:has(> div.btn),
html body .home_products a:has(> div.btn),
html body .product a:has(> div.btn),
html body .product_item a:has(> div.btn),
html body .product-box a:has(> div.btn),
html body .productBox a:has(> div.btn),
html body .prod_box a:has(> div.btn),
html body .product-card a:has(> div.btn) {
  display: inline-flex !important;
  flex: 0 0 112px !important;

  align-items: center !important;
  justify-content: center !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;

  vertical-align: top !important;
}

/* Actual DETAILS / BUY tabs */
html body .products-grid div.btn,
html body .featured_products div.btn,
html body #featured_products div.btn,
html body .home_products div.btn,
html body .product div.btn,
html body .product_item div.btn,
html body .product-box div.btn,
html body .productBox div.btn,
html body .prod_box div.btn,
html body .product-card div.btn {
  flex: 0 0 112px !important;

  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  float: none !important;
  clear: none !important;

  line-height: 42px !important;
  vertical-align: top !important;
}

/* ---------------------------------------------------------
   D) REMOVE THE OLD RULE THAT FORCED THE SECOND TAB DOWN
   --------------------------------------------------------- */

html body .product .btn + .btn,
html body .product_item .btn + .btn,
html body .product-box .btn + .btn,
html body .productBox .btn + .btn,
html body .prod_box .btn + .btn,
html body .product-card .btn + .btn,
html body .products-grid .btn + .btn,
html body .featured_products .btn + .btn,
html body #featured_products .btn + .btn,
html body .home_products .btn + .btn {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* ---------------------------------------------------------
   E) DIRECT-SIBLING FALLBACK
   The live page exposes DETAILS as a linked .btn and BUY as a separate .btn.
   If they are direct siblings, this forces them into the same visual row.
   --------------------------------------------------------- */

html body a:has(> div.btn) + div.btn,
html body a:has(> div.btn) + form:has(div.btn),
html body a:has(> div.btn) + button:has(div.btn) {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------
   F) MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {
  html body .products-grid a:has(> div.btn),
  html body .featured_products a:has(> div.btn),
  html body #featured_products a:has(> div.btn),
  html body .product a:has(> div.btn),
  html body .product_item a:has(> div.btn),
  html body .product-card a:has(> div.btn),
  html body .products-grid div.btn,
  html body .featured_products div.btn,
  html body #featured_products div.btn,
  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-card div.btn {
    flex-basis: 104px !important;

    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    line-height: 40px !important;
  }
}

/* =========================================================
   CORIODERMINA® — PREMIUM WHITE FOOTER
   Exact Freewebstore footer structure:
   #footer
   #newsletter
   #footer_left / #social / #footer_links
   #footer_right / #payment_methods / #copyright

   Design direction:
   - Pure white seamless background
   - No dark caramel footer block
   - Black / soft-charcoal typography
   - White pearl controls with fine dark borders
   - Clean social icon squares
   - Elegant, compact, balanced spacing
   ========================================================= */

/* ---------- FOOTER SHELL ---------- */
html body #footer,
html body footer#footer {
  position: relative !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 28px 0 22px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #303030 !important;

  border: 0 !important;
  border-top: 0 !important;

  box-shadow: none !important;
  text-shadow: none !important;

  overflow: visible !important;
}

/* Remove any decorative dark/gradient overlays */
html body #footer::before,
html body #footer::after {
  content: none !important;
  display: none !important;
}

/* The template grey bar must visually disappear into the page */
html body #footer > .grey_bar,
html body footer#footer > .grey_bar,
html body #footer .grey_bar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* All footer containers remain white and seamless */
html body #footer > .container,
html body #footer .container,
html body #footer .container.clearfix {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  background: #ffffff !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Empty footer banner should take no space */
html body #footer .uc_banner:empty,
html body #footer .uc_banner:not(:has(img)):not(:has(a)):not(:has(span)):not(:has(div)):not(:has(button)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide editor-disabled placeholder items */
html body #footer span-editor-disabled {
  display: none !important;
}

/* ---------- NEWSLETTER ---------- */
html body #footer #newsletter {
  width: 100% !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;

  background: #ffffff !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
}

html body #footer #newsletter_container {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.25fr) minmax(180px, .85fr) minmax(240px, 1.05fr) auto !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  margin: 0 auto !important;
  padding: 18px 0 22px !important;

  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #footer #newsletter_container > div {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 12px 0 0 !important;
}

html body #footer #newsletter_title {
  margin: 0 !important;
  padding: 0 !important;

  color: #252525 !important;

  font-family: "Caslon Graphique", Georgia, "Times New Roman", serif !important;
  font-size: clamp(24px, 2.3vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: .1px !important;

  text-align: left !important;
  text-shadow: none !important;
}

/* Newsletter inputs */
html body #footer #newsletter_container input,
html body #footer #newsletter_name,
html body #footer #newsletter_email {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #222222 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 44px !important;

  outline: 0 !important;
  box-shadow: none !important;
}

html body #footer #newsletter_container input::placeholder {
  color: #737373 !important;
  opacity: 1 !important;
}

html body #footer #newsletter_container input:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06) !important;
}

/* Subscribe tab: same refined language as Details / Buy */
html body #footer #newsletter_button,
html body #footer button#newsletter_button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 126px !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;

  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%) !important;
  background-color: #ffffff !important;

  color: #1f1f1f !important;
  -webkit-text-fill-color: #1f1f1f !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .35px !important;

  text-transform: uppercase !important;
  text-shadow: none !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 3px 8px rgba(0,0,0,.10) !important;

  transform: none !important;
}

html body #footer #newsletter_button::before,
html body #footer #newsletter_button::after {
  content: none !important;
  display: none !important;
}

html body #footer #newsletter_button:hover {
  border-color: #111111 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%) !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 5px 12px rgba(0,0,0,.13) !important;

  transform: translateY(-1px) !important;
}

/* ---------- BOTTOM FOOTER ROW ---------- */
html body #footer .container:has(> #footer_left):has(> #footer_right) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;

  padding-top: 18px !important;

  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #footer #footer_left,
html body #footer #footer_right {
  float: none !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #footer #footer_left {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px 22px !important;
}

html body #footer #footer_right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ---------- SOCIAL ICONS ---------- */
html body #footer #social {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  background: transparent !important;
  border: 0 !important;
}

html body #footer #social > li {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

html body #footer #social > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;

  background: #ffffff !important;
  background-image: none !important;

  color: #202020 !important;

  font-size: 18px !important;
  line-height: 38px !important;

  text-decoration: none !important;
  text-shadow: none !important;

  box-shadow: none !important;
  transform: none !important;
}

html body #footer #social > li > a:hover {
  border-color: #000000 !important;

  background: #f1f1f1 !important;
  color: #000000 !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.10) !important;
  transform: translateY(-1px) !important;
}

/* ---------- TERMS / PRIVACY ---------- */
html body #footer #footer_links {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

html body #footer #footer_links > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

html body #footer #footer_links > ul > li {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

/* Terms and Privacy only */
html body #footer #footer_links a[title="Terms"],
html body #footer #footer_links a[data-lang="Terms"],
html body #footer #footer_links a[title="Privacy"],
html body #footer #footer_links a[data-lang="Privacy"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 92px !important;
  height: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;

  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%) !important;
  background-color: #ffffff !important;

  color: #1f1f1f !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .3px !important;

  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;

  box-shadow: none !important;
}

html body #footer #footer_links a[title="Terms"]:hover,
html body #footer #footer_links a[data-lang="Terms"]:hover,
html body #footer #footer_links a[title="Privacy"]:hover,
html body #footer #footer_links a[data-lang="Privacy"]:hover {
  border-color: #000000 !important;
  background: #ededed !important;
  color: #000000 !important;

  box-shadow: 0 4px 10px rgba(0,0,0,.09) !important;
}

/* Remove Freewebstore referral credit from the visual footer */
html body #footer #footer_links a[href*="freewebstore.com"],
html body #footer #footer_links a[href*="utm_source=referral"] {
  display: none !important;
}

/* Hide an empty list item after the Powered by link is hidden */
html body #footer #footer_links li:has(> a[href*="freewebstore.com"]) {
  display: none !important;
}

/* ---------- PAYMENT METHODS ---------- */
html body #footer #payment_methods {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #footer #payment_methods:has(.accepts_group_div:empty) {
  display: none !important;
}

/* ---------- COPYRIGHT ---------- */
html body #footer #copyright {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;

  color: #303030 !important;

  font-family: "Caslon Graphique", Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .5px !important;

  text-align: right !important;
  text-shadow: none !important;

  opacity: .88 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  html body #footer #newsletter_container {
    grid-template-columns: 1fr 1fr !important;
  }

  html body #footer #newsletter_container > div {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
  }

  html body #footer #newsletter_title {
    text-align: center !important;
  }

  html body #footer #newsletter_button {
    width: 100% !important;
  }

  html body #footer .container:has(> #footer_left):has(> #footer_right) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body #footer #footer_left,
  html body #footer #footer_right {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body #footer #footer_left {
    flex-direction: column !important;
  }

  html body #footer #copyright {
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  html body #footer {
    padding: 22px 0 18px !important;
  }

  html body #footer > .container,
  html body #footer .container {
    width: min(100% - 24px, 1180px) !important;
  }

  html body #footer #newsletter_container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    padding-top: 12px !important;
    padding-bottom: 18px !important;
  }

  html body #footer #newsletter_container > div,
  html body #footer #newsletter_container input,
  html body #footer #newsletter_button {
    width: 100% !important;
  }

  html body #footer #newsletter_title {
    margin-bottom: 4px !important;
    font-size: 25px !important;
  }

  html body #footer #social {
    justify-content: center !important;
  }

  html body #footer #footer_links > ul {
    justify-content: center !important;
  }
}

/* =========================================================
   CORIODERMINA® — FINAL COPYRIGHT SECTION FIX
   Exact HTML:
   <section id="copyright" class="clearfix" data-editor-type="copyright">
     © Coriodermina® 2026
   </section>
   ========================================================= */

html body footer#footer #footer_right > section#copyright.clearfix[data-editor-type="copyright"],
html body #footer #footer_right #copyright,
html body #footer section#copyright {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 190px !important;
  max-width: none !important;

  height: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  float: none !important;
  clear: both !important;

  border: 1px solid #3a3a3a !important;
  border-radius: 6px !important;

  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%) !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%) !important;

  color: #1f1f1f !important;
  -webkit-text-fill-color: #1f1f1f !important;

  font-family: "Caslon Graphique", Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .45px !important;

  text-align: center !important;
  text-shadow: none !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 3px 8px rgba(0,0,0,.08) !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
}

/* Keep the right side clean and aligned */
html body #footer #footer_right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Hover is subtle and remains in the same pearl/white family */
html body #footer section#copyright:hover {
  border-color: #111111 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 100%) !important;

  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 5px 12px rgba(0,0,0,.10) !important;
}

/* Mobile: center the copyright tab */
@media (max-width: 900px) {
  html body #footer #footer_right {
    align-items: center !important;
  }

  html body footer#footer #footer_right > section#copyright.clearfix[data-editor-type="copyright"],
  html body #footer #footer_right #copyright,
  html body #footer section#copyright {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   CORIODERMINA® — NEWSLETTER LAYOUT FIX V2
   Replaces the previous FINAL NEWSLETTER ALIGNMENT FIX.
   Does NOT assume that .container is a direct child of #newsletter.
   ========================================================= */

/* Keep the newsletter visible and make the outer module the master row. */
html body #footer #newsletter {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;

  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto 20px !important;
  padding: 22px 0 !important;

  float: none !important;
  clear: both !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Freewebstore may place an extra .container around the newsletter.
   Make that wrapper a row too, instead of relying on one exact nesting path. */
html body #footer #newsletter > .container,
html body #footer #newsletter > .container.clearfix,
html body #footer #newsletter .container:has(#newsletter_container),
html body #footer #newsletter_container {
  display: flex !important;

  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;

  flex: 1 1 auto !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Undo the previous display:contents rule.
   Keep ordinary Freewebstore wrappers as real flex items. */
html body #footer #newsletter_container > div:not(.btn) {
  display: block !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;
}

/* Size a wrapper according to the control it contains. */
html body #footer #newsletter_container > div:has(#newsletter_title) {
  flex: 0 1 260px !important;
  width: 260px !important;
  min-width: 230px !important;
}

html body #footer #newsletter_container > div:has(#newsletter_name) {
  flex: 1 1 280px !important;
  width: auto !important;
  min-width: 210px !important;
}

html body #footer #newsletter_container > div:has(#newsletter_email) {
  flex: 1 1 320px !important;
  width: auto !important;
  min-width: 240px !important;
}

html body #footer #newsletter_container > div:has(#newsletter_button),
html body #footer #newsletter_container > div:has(button),
html body #footer #newsletter_container > div:has(input[type="submit"]),
html body #footer #newsletter_container > div:has(input[type="button"]) {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

/* Headline */
html body #footer #newsletter_title {
  flex: 0 1 260px !important;

  width: 260px !important;
  max-width: 260px !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  clear: none !important;

  color: #553018 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(20px, 1.65vw, 25px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: .3px !important;
  text-align: left !important;
}

/* Name and email fields */
html body #footer #newsletter_name,
html body #footer #newsletter_email {
  flex: 1 1 0 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;
}

/* Subscribe control.
   Target the ID plus common Freewebstore button implementations. */
html body #footer #newsletter_button,
html body #footer button#newsletter_button,
html body #footer #newsletter button,
html body #footer #newsletter input[type="submit"],
html body #footer #newsletter input[type="button"],
html body #footer #newsletter .btn {
  flex: 0 0 150px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;

  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  float: none !important;
  clear: none !important;

  box-sizing: border-box !important;
}

/* Remove old grid placement from the previous patch. */
html body #footer #newsletter_title,
html body #footer #newsletter_name,
html body #footer #newsletter_email,
html body #footer #newsletter_button,
html body #footer #newsletter button,
html body #footer #newsletter input[type="submit"],
html body #footer #newsletter input[type="button"],
html body #footer #newsletter .btn {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: center !important;
}

/* Tablet */
@media (max-width: 1000px) {
  html body #footer #newsletter,
  html body #footer #newsletter > .container,
  html body #footer #newsletter > .container.clearfix,
  html body #footer #newsletter .container:has(#newsletter_container),
  html body #footer #newsletter_container {
    flex-wrap: wrap !important;
  }

  html body #footer #newsletter_container > div:has(#newsletter_title),
  html body #footer #newsletter_title {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  html body #footer #newsletter_container > div:has(#newsletter_name),
  html body #footer #newsletter_container > div:has(#newsletter_email) {
    flex: 1 1 calc(50% - 7px) !important;
    min-width: 220px !important;
  }

  html body #footer #newsletter_button,
  html body #footer button#newsletter_button,
  html body #footer #newsletter button,
  html body #footer #newsletter input[type="submit"],
  html body #footer #newsletter input[type="button"],
  html body #footer #newsletter .btn {
    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
}

/* Mobile */
@media (max-width: 650px) {
  html body #footer #newsletter,
  html body #footer #newsletter > .container,
  html body #footer #newsletter > .container.clearfix,
  html body #footer #newsletter .container:has(#newsletter_container),
  html body #footer #newsletter_container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  html body #footer #newsletter {
    width: calc(100% - 30px) !important;
    padding: 18px 0 !important;
  }

  html body #footer #newsletter_container > div:has(#newsletter_title),
  html body #footer #newsletter_container > div:has(#newsletter_name),
  html body #footer #newsletter_container > div:has(#newsletter_email),
  html body #footer #newsletter_container > div:has(#newsletter_button),
  html body #footer #newsletter_title,
  html body #footer #newsletter_name,
  html body #footer #newsletter_email,
  html body #footer #newsletter_button,
  html body #footer button#newsletter_button,
  html body #footer #newsletter button,
  html body #footer #newsletter input[type="submit"],
  html body #footer #newsletter input[type="button"],
  html body #footer #newsletter .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #footer #newsletter_title {
    text-align: center !important;
  }
}



/* ===== FINAL NEWSLETTER VISIBILITY REPAIR ===== */

html body #footer > .grey_bar,
html body footer#footer > .grey_bar,
html body #footer .grey_bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
  pointer-events: auto !important;
}

html body #footer span-editor-disabled:has(#newsletter),
html body #footer span-editor-disabled:has(#newsletter_container) {
  display: contents !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #footer #newsletter,
html body #footer #newsletter_container {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   CORIODERMINA® — FINAL NEWSLETTER TITLE FONT OVERRIDE
   Targets both #newsletter_title and Freewebstore's visible H2.
   ========================================================= */

html body #footer #newsletter_title,
html body #footer #newsletter_title *,
html body #footer #newsletter h2,
html body #footer #newsletter h2 * {
    color: #404040 !important;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
}
/* =========================================================
   CORIODERMINA® — HEADER CHOCOLATE / PERLA / DORADO
   PEGAR AL FINAL DE TODO EL CSS
   SOLO DESKTOP — NO ALTERA EL HEADER MÓVIL
========================================================= */

@media (min-width: 981px) {

  /* ===== HEADER PRINCIPAL ===== */
  #header {
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: 1720px !important;
    min-height: 158px !important;
    margin: 8px auto 0 !important;

    background:
      linear-gradient(
        to bottom,
        #f5f3f0 0%,
        #ddd8d2 28%,
        #9b9185 43%,
        #65533d 53%,
        #432804 72%,
        #2c1702 100%
      ) !important;

    border: 1px solid #b9973f !important;
    border-radius: 0 0 42px 42px !important;

    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.85),
      inset 0 -2px 8px rgba(0,0,0,.45),
      0 0 0 1px rgba(185,151,63,.30) !important;

    overflow: visible !important;
  }


  /* ===== ÁREA DEL LOGO ===== */
  #header #logo_area {
    position: absolute !important;
    left: 55px !important;
    top: 15px !important;
    width: 300px !important;
    height: 125px !important;
    z-index: 20 !important;

    background: transparent !important;
    border: none !important;
  }

  #header #logo_area img {
    max-width: 100% !important;
    max-height: 125px !important;
    object-fit: contain !important;
  }


  /* ===== LADO DERECHO ===== */
  #header #header_right {
    position: relative !important;
    width: calc(100% - 390px) !important;
    height: 158px !important;
    margin-left: 390px !important;
    background: transparent !important;
  }


  /* ===== SIGN IN ===== */
  #header #account {
    position: absolute !important;
    top: 14px !important;
    right: 165px !important;
    z-index: 30 !important;

    background: transparent !important;
    border: none !important;
  }

  #header #account,
  #header #account a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  }


  /* ===== CARRITO ===== */
  #header #mini_basket {
    position: absolute !important;
    top: 14px !important;
    right: 20px !important;
    z-index: 30 !important;

    background: transparent !important;
    border: none !important;
  }

  #header #mini_basket,
  #header #mini_basket a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  }


  /* Ocultar moneda para una apariencia más limpia */
  #header #currency {
    display: none !important;
  }


  /* ===== MENÚ PRINCIPAL ===== */
  #header #main_nav {
    position: absolute !important;
    left: 15px !important;
    right: 20px !important;
    bottom: 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
  }


  /* ===== BOTONES DEL MENÚ ===== */
  #header #main_nav > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;

    background: transparent !important;
  }

  #header #main_nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  #header #main_nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;
    padding: 0 18px !important;

    background:
      linear-gradient(
        to bottom,
        #f6f4f1 0%,
        #ddd9d3 38%,
        #aaa296 67%,
        #746752 100%
      ) !important;

    color: #ffffff !important;

    border: 1px solid #a77e24 !important;
    border-radius: 9px !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 5px rgba(0,0,0,.35) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;

    transition:
      transform .2s ease,
      filter .2s ease,
      box-shadow .2s ease !important;
  }


  /* ===== EFECTO AL PASAR EL MOUSE ===== */
  #header #main_nav > ul > li > a:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 4px 8px rgba(0,0,0,.40) !important;
  }


  /* ===== ELIMINAR REGLAS VIEJAS QUE PUEDAN INTERFERIR ===== */
  #header a,
  #header .nav-link,
  #header .menu a,
  #header .top-right a {
    text-decoration: none !important;
  }

}

/* =========================================================
   CORIODERMINA — DARK READER INSPIRED HEADER
   Uses the actual rendered Dark Reader colors
========================================================= */

@media (min-width: 981px) {

  /* MAIN HEADER — DEEP BLACK */
  html body #header {
    background: #030607 !important;
    background-color: #030607 !important;
    background-image: none !important;

    border: 1px solid #b8900e !important;

    box-shadow:
      inset 0 0 0 2px #030607,
      inset 0 0 0 3px rgba(184, 144, 14, 0.78),
      0 8px 20px rgba(3, 6, 7, 0.16) !important;
  }


  /* INNER PEARL / TAUPE / CHOCOLATE PANEL */
  html body #header::before {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 28%,
        #b7aea3 45%,
        #6f5f49 65%,
        #503d22 82%,
        #3a2204 100%
      ) !important;

    border: 1px solid rgba(184, 144, 14, 0.78) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.70),
      0 3px 10px rgba(3,6,7,.22) !important;
  }


  /* MENU BUTTONS */
  html body #header #main_nav > ul > li > a {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 42%,
        #b7aea3 72%,
        #8b7d6d 100%
      ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(184, 144, 14, 0.90) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 3px 7px rgba(3,6,7,.30) !important;

    text-shadow:
      0 1px 2px rgba(3,6,7,.65) !important;
  }


  /* HOVER */
  html body #header #main_nav > ul > li > a:hover {
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #ddd8d2 45%,
        #a99e91 100%
      ) !important;

    border-color: #b8900e !important;
  }

}

/* =========================================================
   CORIODERMINA — FINAL BLACK HEADER TAB TEXT ONLY
   ---------------------------------------------------------
   Changes ONLY the visible main-navigation tab lettering and
   the Store Links arrow to black.
   Does NOT alter:
   - logo or logo image
   - logo background
   - header gradients/colors
   - tab backgrounds/borders/shadows
   - navigation sizing or positioning
   - dropdown panels
   - Sign In / cart
   - mobile header
========================================================= */

@media (min-width: 981px) {

  html body #header #main_nav > ul > li > a,
  html body #header #main_nav > ul > li > a > span,
  html body #header #main_nav > ul > li > a > font {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
  }

  /* Keep nested text black even if Freewebstore inserts extra wrappers. */
  html body #header #main_nav > ul > li > a * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
  }

  /* Store Links dropdown arrow only. */
  html body #header #main_nav > ul > li > a .icon_down_arrow,
  html body #header #main_nav .icon_down_arrow {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
  }

}

/* =========================================================
   RESTORE FREEWEBSTORE LOGO CLICK / UPLOAD
========================================================= */

html body #header #logo_area,
html body #header #logo_area .fws_logo_container,
html body #header #logo_area picture,
html body #header #logo_area img#logo {
    pointer-events: auto !important;
}

html body #header #logo_area {
    z-index: 100 !important;
}


/* =========================================================
   CORIODERMINA — FINAL REFINED LOGO TEXT
   ---------------------------------------------------------
   Slightly larger and higher brand name, balanced with the
   existing monogram. Keeps SKIN CARE centered underneath.
========================================================= */

/* CORIODERMINA® */
html body #header #logo_area::after {
  content: "CORIODERMINA®" !important;

  position: absolute !important;
  left: 50% !important;
  top: 70% !important;
  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: "Times New Roman", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 1.35px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  text-align: center !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.82),
    0 0 1px rgba(255,255,255,.18) !important;

  pointer-events: none !important;
  z-index: 101 !important;
}


/* SKIN CARE */
html body #header #logo_area::before {
  content: "—  S K I N   C A R E  —" !important;

  position: absolute !important;
  left: 50% !important;
  top: 88% !important;
  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.45px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  text-align: center !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.75) !important;

  pointer-events: none !important;
  z-index: 101 !important;
}
/* =========================================================
   CORIODERMINA® — ULTIMATE CROSS-BROWSER MOBILE COMPATIBILITY
   FINAL AUTHORITATIVE LAYER — JULY 2026

   IMPORTANT:
   KEEP THIS AT THE ABSOLUTE BOTTOM OF ALL CUSTOM CSS.

   TARGETS:
   - iPhone / iOS Safari
   - iPad / iPadOS Safari
   - Chrome Android
   - Samsung Internet
   - Firefox Android
   - Chrome / Edge desktop
   - Firefox desktop
   - Safari desktop
   - Touch screens
   - Landscape mode
   - Notches / Dynamic Island / safe areas
   - Dynamic mobile browser bars
   - Responsive header
   - Store Links dropdown
   - Products
   - Footer / newsletter
   - Need Help
   - Google Translate
   - Top announcement bar color consistency
   ========================================================= */


/* =========================================================
   1) GLOBAL CROSS-BROWSER FOUNDATION
   ========================================================= */

:root{
  --corio-safe-top: env(safe-area-inset-top, 0px);
  --corio-safe-right: env(safe-area-inset-right, 0px);
  --corio-safe-bottom: env(safe-area-inset-bottom, 0px);
  --corio-safe-left: env(safe-area-inset-left, 0px);

  --corio-mobile-edge: 12px;

  /* Exact announcement bar colors */
  --corio-topbar-black: #050403;
  --corio-topbar-dark: #1C120A;
  --corio-topbar-brown: #8A5A24;
  --corio-topbar-gold: #D6A84F;
  --corio-topbar-text: #F7E6B2;
}


/* Keep browsers from automatically changing the site to dark colors */
html{
  width: 100% !important;
  max-width: 100% !important;

  color-scheme: light !important;

  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;

  font-synthesis: none;
  font-kerning: normal;

  overflow-x: hidden !important;
}


/* Modern browsers supporting "only light" */
@supports (color-scheme: light only){
  html{
    color-scheme: light only !important;
  }
}


body{
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 100vh;

  margin: 0 !important;

  overflow-x: hidden !important;

  background-color: #ffffff !important;

  -webkit-overflow-scrolling: touch;
}


/* Dynamic viewport support */
@supports (min-height: 100dvh){
  body{
    min-height: 100dvh;
  }
}


/* Prevent padding and borders from changing element widths */
html *,
html *::before,
html *::after{
  box-sizing: border-box;
}


/* Prevent flex/grid children from overflowing mobile screens */
html body div,
html body section,
html body article,
html body main,
html body aside,
html body header,
html body footer,
html body nav{
  min-width: 0;
}


/* Responsive media */
html body img,
html body picture,
html body video,
html body canvas,
html body svg{
  max-width: 100%;
}


/* Do not globally alter decorative SVG dimensions */
html body img,
html body picture,
html body video{
  height: auto;
}


/* Embedded media */
html body iframe{
  max-width: 100%;
}


/* Prevent long text/URLs from destroying mobile layouts */
html body p,
html body li,
html body td,
html body th,
html body address{
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* =========================================================
   2) MOBILE TOUCH OPTIMIZATION
   ========================================================= */

html body a,
html body button,
html body summary,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body [role="button"]{
  touch-action: manipulation;

  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
}


/* Avoid accidental text selection on true controls */
html body button,
html body summary,
html body [role="button"]{
  -webkit-user-select: none;
  user-select: none;
}


/* Keyboard accessibility */
html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible{
  outline: 2px solid #111111 !important;
  outline-offset: 3px !important;
}


/* =========================================================
   3) FORM COMPATIBILITY — IOS / ANDROID
   Prevents iPhone auto-zoom on form fields
   ========================================================= */

html body input,
html body select,
html body textarea,
html body button{
  max-width: 100%;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;

  box-sizing: border-box;
}


@media only screen and (max-width: 980px){

  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="search"],
  html body input[type="password"],
  html body input[type="number"],
  html body select,
  html body textarea{
    font-size: 16px !important;
  }

}


/* =========================================================
   4) TOP ANNOUNCEMENT BAR
   HARD COLOR CONSISTENCY BETWEEN DESKTOP + MOBILE
   ========================================================= */

html body .top-bar{
  position: relative !important;
  isolation: isolate !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding-top:
    calc(11px + env(safe-area-inset-top, 0px)) !important;

  padding-right:
    calc(12px + env(safe-area-inset-right, 0px)) !important;

  padding-bottom: 11px !important;

  padding-left:
    calc(12px + env(safe-area-inset-left, 0px)) !important;

  background-color: var(--corio-topbar-black) !important;

  background-image:
    linear-gradient(
      90deg,
      var(--corio-topbar-black) 0%,
      var(--corio-topbar-dark) 30%,
      var(--corio-topbar-brown) 55%,
      var(--corio-topbar-gold) 75%,
      #0B0705 100%
    ) !important;

  color: var(--corio-topbar-text) !important;

  border: 0 !important;
  border-bottom:
    1px solid rgba(247,230,178,.35) !important;

  box-shadow: none !important;

  text-align: center !important;

  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;

  z-index: 9999 !important;
}


html body .top-bar,
html body .top-bar *,
html body .top-bar a,
html body .top-bar span,
html body .top-bar div{
  color: var(--corio-topbar-text) !important;
  -webkit-text-fill-color: var(--corio-topbar-text) !important;

  text-shadow: none !important;
}


/* Prevent mobile dark-mode recoloring of top bar */
@media (prefers-color-scheme: dark){

  html body .top-bar{
    background-color: var(--corio-topbar-black) !important;

    background-image:
      linear-gradient(
        90deg,
        var(--corio-topbar-black) 0%,
        var(--corio-topbar-dark) 30%,
        var(--corio-topbar-brown) 55%,
        var(--corio-topbar-gold) 75%,
        #0B0705 100%
      ) !important;

    color: var(--corio-topbar-text) !important;
  }

}


@media only screen and (max-width: 640px){

  html body .top-bar{
    min-height: 38px !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    padding-bottom: 10px !important;
  }

  html body .top-bar a,
  html body .top-bar div,
  html body .top-bar span{
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.35 !important;
  }

}


/* =========================================================
   5) RESPONSIVE HEADER — AUTHORITATIVE MOBILE LAYER
   Desktop above 1180px remains untouched
   ========================================================= */

@media only screen and (max-width: 1180px){

  html body #header{
    position: relative !important;

    display: block !important;

    width:
      calc(
        100% -
        env(safe-area-inset-left, 0px) -
        env(safe-area-inset-right, 0px) -
        10px
      ) !important;

    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 5px auto 16px !important;

    padding:
      14px
      max(12px, env(safe-area-inset-right, 0px))
      20px
      max(12px, env(safe-area-inset-left, 0px))
      !important;

    overflow: visible !important;

    border-radius: 18px !important;

    transform: none !important;
  }


  /* Keep the inner shield inside every mobile viewport */
  html body #header::before{
    top: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;

    width: auto !important;
    height: auto !important;

    border-radius: 16px !important;

    transform: none !important;

    pointer-events: none !important;
  }


  html body #header > .container,
  html body #header > .container.clearfix,
  html body #header .container.clearfix,
  html body #header #header_right{
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;
  }


  /* Logo */
  html body #header #logo_area{
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: min(220px, 72vw) !important;
    max-width: 220px !important;

    height: 92px !important;

    margin: 3px auto 10px !important;
    padding: 0 !important;

    transform: none !important;

    z-index: 20 !important;

    overflow: visible !important;
  }


  html body #header #logo_area img,
  html body #header #logo_area picture,
  html body #header img#logo{
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  /* Utility row */
  html body #header #currency{
    display: none !important;
  }


  html body #header #account,
  html body #header #mini_basket{
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: inline-flex !important;

    width: auto !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 2px 6px 12px !important;

    vertical-align: middle !important;

    transform: none !important;
  }


  html body #header #header_right{
    text-align: center !important;
  }


  /* Main navigation */
  html body #header #main_nav{
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: min(430px, calc(100vw - 44px)) !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 5px auto 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;

    z-index: 50 !important;
  }


  html body #header #main_nav > ul{
    display: flex !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 7px !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  html body #header #main_nav > ul > li,
  html body #header #main_nav > ul > li.corio-store-links-item{
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;
  }


  /* Mobile navigation tabs */
  html body #header #main_nav > ul > li > a,
  html body #header #main_nav > ul > li.corio-store-links-item > a{
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 14px !important;

    font-size: 13px !important;
    line-height: 1.15 !important;

    white-space: normal !important;

    touch-action: manipulation !important;

    transform: none !important;
  }


  /* Ensure hidden desktop cart does not suddenly take space */
  html body #header #main_nav > ul > li:has(> a[title="Cart"]),
  html body #header #main_nav > ul > li > a[title="Cart"]{
    display: none !important;
  }


  /* Store Links dropdown */
  html body #header #main_nav >
  ul >
  li.corio-store-links-item >
  ul.dropdown{

    top: calc(100% + 5px) !important;

    right: auto !important;
    left: 50% !important;

    width: min(360px, calc(100vw - 30px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 30px) !important;

    max-height: min(380px, 60dvh) !important;

    padding: 8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    transform: translate(-50%, 4px) !important;
  }


  html body #header #main_nav >
  ul >
  li.corio-store-links-item:hover >
  ul.dropdown,

  html body #header #main_nav >
  ul >
  li.corio-store-links-item:focus-within >
  ul.dropdown{

    transform: translate(-50%, 0) !important;
  }


  html body #header #main_nav >
  ul >
  li.corio-store-links-item >
  ul.dropdown >
  li >
  a{

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: normal !important;

    touch-action: manipulation !important;
  }

}


/* =========================================================
   6) TRUE TOUCH DEVICES
   Prevent desktop hover behavior from becoming sticky
   ========================================================= */

@media (hover: none) and (pointer: coarse){

  html body a:hover,
  html body button:hover,
  html body .btn:hover{
    transform: none;
  }


  /* Store Links remains accessible through keyboard/tap focus */
  html body #header #main_nav >
  ul >
  li.corio-store-links-item:focus-within >
  ul.dropdown{

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
  }


  html body #header #main_nav >
  ul >
  li.corio-store-links-item >
  a{

    min-height: 46px !important;
  }

}


/* =========================================================
   7) PRODUCT CARD MOBILE PROTECTION
   ========================================================= */

@media only screen and (max-width: 768px){

  html body .products-grid{
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 18px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  html body .product,
  html body .product_item,
  html body .product-box,
  html body .productBox,
  html body .prod_box,
  html body .product-card{

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: clamp(14px, 4vw, 24px) !important;
    padding-right: clamp(14px, 4vw, 24px) !important;
  }


  /* Images never escape the card */
  html body .product img,
  html body .product_item img,
  html body .product-card img{

    width: auto !important;
    max-width: 100% !important;

    height: auto !important;

    object-fit: contain !important;
  }


  /* Details + Buy remain parallel when possible */
  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-card div.btn,
  html body .products-grid div.btn{

    flex-basis: clamp(94px, 29vw, 104px) !important;

    width: clamp(94px, 29vw, 104px) !important;
    min-width: 94px !important;
    max-width: 104px !important;
  }

}


/* Very narrow phones */
@media only screen and (max-width: 360px){

  html body .product div.btn,
  html body .product_item div.btn,
  html body .product-card div.btn,
  html body .products-grid div.btn{

    flex-basis: 94px !important;

    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    font-size: 10px !important;
  }

}


/* =========================================================
   8) SHOP BY CATEGORY — MOBILE SAFE
   ========================================================= */

@media only screen and (max-width: 768px){

  html body .corio-products-grid{
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
  }


  html body .corio-product-card{
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 16px !important;
    padding: 8px 0 !important;
  }


  html body .corio-card-shell{
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
  }


  html body .corio-shop-dropdown{
    width: 100% !important;
    max-width: 100% !important;
  }


  html body .corio-dropdown-menu{
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    max-height: min(320px, 60dvh) !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

}


/* =========================================================
   9) FOOTER + NEWSLETTER MOBILE COMPATIBILITY
   ========================================================= */

@media only screen and (max-width: 650px){

  html body #footer{
    width: 100% !important;
    max-width: 100% !important;

    padding-left:
      max(12px, env(safe-area-inset-left, 0px)) !important;

    padding-right:
      max(12px, env(safe-area-inset-right, 0px)) !important;

    overflow-x: hidden !important;
  }


  html body #footer > .container,
  html body #footer .container{
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  html body #footer #newsletter,
  html body #footer #newsletter_container{

    display: flex !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 10px !important;
  }


  html body #footer #newsletter_container > div{

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body #footer #newsletter_name,
  html body #footer #newsletter_email,
  html body #footer #newsletter_button,
  html body #footer #newsletter button,
  html body #footer #newsletter input[type="submit"]{

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  html body #footer #newsletter_name,
  html body #footer #newsletter_email{

    font-size: 16px !important;
  }


  html body #footer #newsletter_title{
    width: 100% !important;
    max-width: 100% !important;

    text-align: center !important;

    overflow-wrap: break-word !important;
  }


  html body #footer #footer_left,
  html body #footer #footer_right{

    width: 100% !important;
    max-width: 100% !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

}


/* =========================================================
   10) FIXED NEED HELP BUTTON
   SAFE AREA + MOBILE BROWSER COMPATIBILITY
   ========================================================= */

html body #corio-chatbase-launcher{

  /* Fallback first */
  left: 10px !important;
  bottom: 18px !important;

  /* Safe-area capable browsers */
  left:
    max(
      10px,
      env(safe-area-inset-left, 0px)
    ) !important;

  bottom:
    max(
      12px,
      env(safe-area-inset-bottom, 0px)
    ) !important;

  right: auto !important;

  max-width:
    calc(
      100vw -
      env(safe-area-inset-left, 0px) -
      env(safe-area-inset-right, 0px) -
      20px
    ) !important;

  pointer-events: auto !important;

  touch-action: manipulation !important;

  -webkit-tap-highlight-color: transparent !important;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* Inner elements cannot steal the click/tap */
html body #corio-chatbase-launcher *,
html body #corio-chatbase-launcher svg,
html body #corio-chatbase-launcher path{

  pointer-events: none !important;
}


/* =========================================================
   11) GOOGLE TRANSLATE SAFE POSITIONING
   ========================================================= */

html body #corio-google-translate{

  right:
    max(
      12px,
      env(safe-area-inset-right, 0px)
    ) !important;

  bottom:
    max(
      12px,
      env(safe-area-inset-bottom, 0px)
    ) !important;

  left: auto !important;

  max-width:
    calc(
      100vw -
      env(safe-area-inset-left, 0px) -
      env(safe-area-inset-right, 0px) -
      24px
    ) !important;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* Prevent both fixed controls from overlapping on smaller phones */
@media only screen and (max-width: 480px){

  html body #corio-chatbase-launcher{

    width: 145px !important;
    max-width: calc(50vw - 16px) !important;

    min-width: 0 !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    font-size: 10px !important;

    gap: 6px !important;
  }


  html body #corio-chatbase-launcher
  .corio-chatbase-text{

    font-size: 10px !important;
    letter-spacing: .4px !important;
  }


  html body #corio-google-translate{

    width: 145px !important;
    max-width: calc(50vw - 16px) !important;

    min-width: 0 !important;

    padding-left: 7px !important;
    padding-right: 7px !important;
  }

}


/* Ultra-narrow screens */
@media only screen and (max-width: 340px){

  html body #corio-chatbase-launcher{

    max-width: calc(50vw - 12px) !important;

    left: 6px !important;
  }


  html body #corio-google-translate{

    max-width: calc(50vw - 12px) !important;

    right: 6px !important;
  }

}


/* =========================================================
   12) LANDSCAPE MOBILE
   ========================================================= */

@media only screen
and (max-width: 980px)
and (orientation: landscape)
and (max-height: 520px){

  html body #header{

    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }


  html body #header #logo_area{

    width: 180px !important;
    height: 72px !important;

    margin-bottom: 6px !important;
  }


  html body #header #main_nav{

    width: min(620px, calc(100vw - 50px)) !important;
  }


  html body #header #main_nav > ul{

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;
  }


  html body #corio-chatbase-launcher,
  html body #corio-google-translate{

    bottom:
      max(
        7px,
        env(safe-area-inset-bottom, 0px)
      ) !important;
  }

}


/* =========================================================
   13) SAFARI / WEBKIT SPECIFIC REFINEMENTS
   ========================================================= */

@supports (-webkit-touch-callout: none){

  /* Prevent horizontal bounce caused by oversized transformed elements */
  html,
  body{

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
  }


  /* Smooth dropdown scrolling */
  html body .corio-dropdown-menu,
  html body #header ul.dropdown{

    -webkit-overflow-scrolling: touch;
  }


  /* Keep fixed controls sharp */
  html body #corio-chatbase-launcher,
  html body #corio-google-translate{

    -webkit-transform: translateZ(0);
  }

}


/* =========================================================
   14) FALLBACK FOR BROWSERS WITHOUT :has()
   Your modern CSS uses :has() heavily.
   These rules preserve the most important visual behavior.
   ========================================================= */

@supports not selector(:has(*)){

  /* Product buttons */
  html body .product a > div.btn,
  html body .product_item a > div.btn,
  html body .product-card a > div.btn{

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;
  }


  /* Newsletter remains usable */
  html body #footer #newsletter_container{

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 10px !important;
  }


  /* Do not depend on parent :has() to reveal normal footer content */
  html body #footer .grey_bar{

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
  }

}


/* =========================================================
   15) ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce){

  html *,
  html *::before,
  html *::after{

    scroll-behavior: auto !important;

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}


/* =========================================================
   16) HIGH-CONTRAST SYSTEM MODE
   Let the operating system keep controls usable
   ========================================================= */

@media (forced-colors: active){

  html body button,
  html body .btn,
  html body summary,
  html body #corio-chatbase-launcher,
  html body #corio-google-translate{

    border: 1px solid CanvasText !important;
  }

}


/* =========================================================
   17) FINAL MOBILE OVERFLOW INSURANCE
   ========================================================= */

@media only screen and (max-width: 1180px){

  html body{

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
  }


  html body #header,
  html body #footer,
  html body main,
  html body .container,
  html body .products-grid,
  html body .corio-products-grid{

    max-width: 100% !important;
  }


  /* Never allow fixed-width children to push the page sideways */
  html body main img,
  html body main table,
  html body main iframe,
  html body main video{

    max-width: 100% !important;
  }

}


/* =========================================================
   18) FINAL MOBILE COLOR AUTHORITY
   Prevent earlier mobile CSS from restoring the old top-bar color
   ========================================================= */

@media only screen and (max-width: 1180px){

  html body .top-bar{

    background-color: #050403 !important;

    background-image:
      linear-gradient(
        90deg,
        #050403 0%,
        #1C120A 30%,
        #8A5A24 55%,
        #D6A84F 75%,
        #0B0705 100%
      ) !important;

    color: #F7E6B2 !important;
  }


  html body .top-bar *,
  html body .top-bar a{

    color: #F7E6B2 !important;
    -webkit-text-fill-color: #F7E6B2 !important;
  }

}

/* =========================================================
   END — ULTIMATE CROSS-BROWSER MOBILE COMPATIBILITY
   ========================================================= */
/* =========================================================
   CORIODERMINA® — FINAL MOBILE LOGO HARD OVERRIDE
   CSS-ONLY FIX — JULY 2026
   KEEP THIS AT THE ABSOLUTE BOTTOM OF CUSTOM CSS

   PURPOSE:
   - Bypasses the original <img id="logo"> source on mobile/tablet.
   - Prevents <picture>, srcset, or mobile browser image selection
     from continuing to display an older logo.
   - Renders the current logo directly on #logo_area.
   ========================================================= */

@media only screen and (max-width: 1180px) {

  /* Make the logo area itself render the logo */
  html body #header #logo_area {
    position: relative !important;

    display: block !important;

    width: min(220px, 72vw) !important;
    max-width: 220px !important;

    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    margin: 4px auto 10px !important;
    padding: 0 !important;

    background-color: transparent !important;

    background-image:
      url("https://cdn.freewebstore.com/origin/996032/c2105873bd054e00a73ea2331066f9eb.png?v=20260721-mobile-final-01") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    z-index: 100 !important;
  }


  /* Hide every original image source inside the logo area on mobile.
     This prevents the old src/srcset/picture source from being visible. */
  html body #header #logo_area > img,
  html body #header #logo_area img,
  html body #header #logo_area img#logo,
  html body #header #logo_area picture,
  html body #header #logo_area picture img,
  html body #header #logo_area .fws_logo_container img,
  html body #header img#logo {

    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
  }


  /* Keep the Freewebstore logo wrapper available as a clickable area */
  html body #header #logo_area .fws_logo_container {

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 105 !important;
  }


  /* Preserve any actual homepage link wrapping the logo */
  html body #header #logo_area > a,
  html body #header #logo_area .fws_logo_container > a {

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    text-indent: -9999px !important;

    overflow: hidden !important;

    pointer-events: auto !important;

    z-index: 110 !important;
  }

}


/* Small phones */
@media only screen and (max-width: 480px) {

  html body #header #logo_area {

    width: min(205px, 74vw) !important;
    max-width: 205px !important;

    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

}


/* Extra-small phones */
@media only screen and (max-width: 360px) {

  html body #header #logo_area {

    width: min(188px, 76vw) !important;
    max-width: 188px !important;

    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

}


/* =========================================================
   END — FINAL MOBILE LOGO HARD OVERRIDE
   ========================================================= */
   
   /* =========================================================
   CORIODERMINA® — GOOGLE TRANSLATE TRUE TRANSPARENT FINAL FIX
   MUST BE THE ABSOLUTE LAST CSS
   ========================================================= */

/* OUTER TRANSLATE BOX */
html body #corio-google-translate,
html body #corio-google-translate:hover,
html body #corio-google-translate:focus,
html body #corio-google-translate:active {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* INNER "SELECT LANGUAGE" TAB */
html body #corio-google-translate #google_translate_element .goog-te-gadget-simple,
html body #corio-google-translate #google_translate_element .goog-te-gadget-simple:hover,
html body #corio-google-translate #google_translate_element .goog-te-gadget-simple:focus,
html body #corio-google-translate #google_translate_element .goog-te-gadget-simple:active {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}


/* GOOGLE'S INTERNAL WRAPPERS */
html body #corio-google-translate #google_translate_element,
html body #corio-google-translate #google_translate_element .goog-te-gadget,
html body #corio-google-translate #google_translate_element .skiptranslate,
html body #corio-google-translate #google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* TRANSLATE LABEL */
html body #corio-google-translate .corio-translate-label {

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    background: transparent !important;

    text-shadow:
        0 1px 2px rgba(255,255,255,.85) !important;
}


/* SELECT LANGUAGE TEXT */
html body #corio-google-translate .goog-te-gadget-simple a,
html body #corio-google-translate .goog-te-gadget-simple a span,
html body #corio-google-translate .VIpgJd-ZVi9od-xl07Ob-lTBxed,
html body #corio-google-translate .VIpgJd-ZVi9od-xl07Ob-lTBxed span {

    background: transparent !important;

    color: #3a2415 !important;
    -webkit-text-fill-color: #3a2415 !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* REMOVE GOOGLE'S LITTLE VERTICAL DIVIDER */
html body #corio-google-translate
.goog-te-gadget-simple
span[style*="border-left"] {

    border-left: 0 !important;
}


/* GOLD DROPDOWN ARROW */
html body #corio-google-translate
.VIpgJd-ZVi9od-xl07Ob-lTBxed
span[aria-hidden="true"] {

    color: #8A5A24 !important;
    -webkit-text-fill-color: #8A5A24 !important;
}

/* =========================================================
   CORIODERMINA® — FINAL MOBILE LOGO PICTURE/WEBP BYPASS
   MUST BE THE ABSOLUTE LAST CSS
   ========================================================= */

@media only screen and (max-width: 1180px) {

  /* Reset previous logo background overrides */
  html body #header #logo_area {
    position: relative !important;

    width: min(220px, 72vw) !important;
    max-width: 220px !important;

    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    margin: 4px auto 10px !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 100 !important;
  }


  /* The actual clickable Freewebstore logo link */
  html body #header #logo_area > a.fws_logo_container {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    /*
       FORCE THE PNG DIRECTLY.
       The unique query bypasses the old mobile/WebP version.
    */
    background-image:
      url("https://cdn.freewebstore.com/origin/996032/c2105873bd054e00a73ea2331066f9eb.png?force-mobile-png=20260721-10") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    -webkit-background-size: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 105 !important;
  }


  /*
     CRITICAL FIX:
     Completely remove the <picture> element on mobile.
     This prevents the ?webp=1 source from being selected.
  */
  html body #header #logo_area > a.fws_logo_container > picture,
  html body #header #logo_area picture {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
  }


  /* Extra protection against the original IMG appearing */
  html body #header #logo_area img#logo {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
  }

}


/* SMALL PHONES */
@media only screen and (max-width: 480px) {

  html body #header #logo_area {
    width: min(205px, 74vw) !important;
    max-width: 205px !important;

    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

}


/* VERY SMALL PHONES */
@media only screen and (max-width: 360px) {

  html body #header #logo_area {
    width: min(188px, 76vw) !important;
    max-width: 188px !important;

    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

}


/* =========================================================
   CORIODERMINA® — TRUE FINAL MOBILE LOGO RESTORE
   Restores the real picture and places the refined logo
   text above it exactly as intended.
   ========================================================= */

@media only screen and (max-width: 1180px) {

  /* LOGO AREA */
  html body #header #logo_area {
    position: relative !important;

    display: block !important;

    width: min(220px, 72vw) !important;
    max-width: 220px !important;

    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;

    margin: 4px auto 12px !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 100 !important;
  }


  /* CLICKABLE LOGO LINK */
  html body #header #logo_area > a.fws_logo_container {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 1 !important;
  }


  /* RESTORE THE REAL PICTURE */
  html body #header #logo_area picture,
  html body #header #logo_area > a.fws_logo_container > picture {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    pointer-events: none !important;

    z-index: 1 !important;
  }


  /* RESTORE THE ACTUAL LOGO IMAGE */
  html body #header #logo_area img,
  html body #header #logo_area img#logo,
  html body #header #logo_area picture img,
  html body #header img#logo {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;
    visibility: visible !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    filter: none !important;

    pointer-events: none !important;

    z-index: 1 !important;
  }


  /* CORIODERMINA® — ABOVE THE IMAGE */
  html body #header #logo_area::after {
    content: "CORIODERMINA®" !important;

    position: absolute !important;

    left: 50% !important;
    top: 69% !important;

    transform: translateX(-50%) !important;

    width: max-content !important;
    max-width: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-family:
      "Times New Roman",
      Georgia,
      serif !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    letter-spacing: 1.15px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    text-align: center !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.82),
      0 0 1px rgba(255,255,255,.20) !important;

    pointer-events: none !important;

    z-index: 120 !important;
  }


  /* SKIN CARE — ABOVE THE IMAGE */
  html body #header #logo_area::before {
    content: "—  S K I N   C A R E  —" !important;

    position: absolute !important;

    left: 50% !important;
    top: 87% !important;

    transform: translateX(-50%) !important;

    width: max-content !important;
    max-width: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-family:
      Arial,
      Helvetica,
      sans-serif !important;

    font-size: 8px !important;
    font-weight: 800 !important;

    letter-spacing: 1.25px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    text-align: center !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.75) !important;

    pointer-events: none !important;

    z-index: 120 !important;
  }

}


/* SMALL MOBILE */
@media only screen and (max-width: 480px) {

  html body #header #logo_area {
    width: min(205px, 74vw) !important;
    max-width: 205px !important;

    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

  html body #header #logo_area::after {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }

  html body #header #logo_area::before {
    font-size: 7.5px !important;
    letter-spacing: 1.1px !important;
  }

}

/* =========================================================
   CORIODERMINA® — REMOVE WHITE STRIP BELOW HEADER
   FINAL AUTHORITATIVE OVERRIDE
   ========================================================= */

html body #header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* Remove any hidden spacing from the old category bar */
html body #header > .grey_bar{
  margin-bottom: 0 !important;
}


/* Pull the hero banner upward to eliminate the white strip */
html body #slideshow_container{
  position: relative !important;

  margin-top: -18px !important;
  padding-top: 0 !important;

  border-top: 0 !important;

  z-index: 1 !important;
}


/* Remove spacing from slideshow wrappers */
html body #slideshow_container .slider-wrapper,
html body #slideshow_container .flexslider,
html body #slideshow_container .flex-viewport{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Keep the premium header above the banner */
html body #header{
  position: relative !important;
  z-index: 50 !important;
}


/* Mobile/tablet: no negative overlap */
@media only screen and (max-width: 1180px){

  html body #slideshow_container{
    margin-top: 0 !important;
  }

}

/* =========================================================
   CORIODERMINA® — MOBILE HEADER EXACT DESKTOP COLOR MATCH
   FINAL AUTHORITATIVE COLOR LAYER
   JULY 2026

   IMPORTANT:
   This changes COLORS ONLY.
   It does not change the mobile header layout or positioning.
   ========================================================= */

@media only screen and (max-width: 1180px) {

  /* =======================================================
     1. OUTER HEADER — EXACT DESKTOP BLACK + GOLD
     ======================================================= */

  html body #header {
    background: #030607 !important;
    background-color: #030607 !important;
    background-image: none !important;

    border-color: #b8900e !important;

    box-shadow:
      inset 0 0 0 2px #030607,
      inset 0 0 0 3px rgba(184, 144, 14, 0.78),
      0 8px 20px rgba(3, 6, 7, 0.16) !important;
  }


  /* =======================================================
     2. INNER PANEL — EXACT DESKTOP PEARL / TAUPE / CHOCOLATE
     ======================================================= */

  html body #header::before {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 28%,
        #b7aea3 45%,
        #6f5f49 65%,
        #503d22 82%,
        #3a2204 100%
      ) !important;

    background-color: #d6d0cb !important;

    border-color: rgba(184, 144, 14, 0.78) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.70),
      0 3px 10px rgba(3,6,7,.22) !important;
  }


  /* =======================================================
     3. MOBILE NAVIGATION TABS — EXACT DESKTOP COLORS
     ======================================================= */

  html body #header #main_nav > ul > li > a,
  html body #header #main_nav > ul > li.corio-store-links-item > a {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 42%,
        #b7aea3 72%,
        #8b7d6d 100%
      ) !important;

    background-color: #d6d0cb !important;

    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;

    border-color: rgba(184, 144, 14, 0.90) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 3px 7px rgba(3,6,7,.30) !important;

    text-shadow: none !important;
  }


  /* Force every piece of text inside each mobile tab to black */
  html body #header #main_nav > ul > li > a *,
  html body #header #main_nav > ul > li > a span,
  html body #header #main_nav > ul > li > a font,
  html body #header #main_nav .icon_down_arrow {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
  }


  /* =======================================================
     4. MOBILE TAB HOVER / TAP
     SAME AS DESKTOP
     ======================================================= */

  html body #header #main_nav > ul > li > a:hover,
  html body #header #main_nav > ul > li > a:focus,
  html body #header #main_nav > ul > li > a:active {
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #ddd8d2 45%,
        #a99e91 100%
      ) !important;

    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;

    border-color: #b8900e !important;

    text-shadow: none !important;
  }


  /* =======================================================
     5. SIGN IN + CART
     MATCH THE DESKTOP HEADER
     ======================================================= */

  html body #header #account > a,
  html body #header #mini_basket > a,
  html body #header #account .user_txt,
  html body #header #mini_basket .cart_txt,
  html body #header #mini_basket #sp_basket_info_count,
  html body #header #account span,
  html body #header #mini_basket span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;

    text-shadow: none !important;
  }


  /* =======================================================
     6. KEEP OLD CATEGORY/GREY BAR FROM CHANGING HEADER COLOR
     ======================================================= */

  html body #header > .grey_bar,
  html body #header .grey_bar {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
  }

}


/* =========================================================
   VERY SMALL PHONES — SAME COLORS, NO ALTERNATE MOBILE THEME
   ========================================================= */

@media only screen and (max-width: 480px) {

  html body #header {
    background: #030607 !important;
  }

  html body #header::before {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 28%,
        #b7aea3 45%,
        #6f5f49 65%,
        #503d22 82%,
        #3a2204 100%
      ) !important;
  }

  html body #header #main_nav > ul > li > a {
    background:
      linear-gradient(
        180deg,
        #f1efee 0%,
        #d6d0cb 42%,
        #b7aea3 72%,
        #8b7d6d 100%
      ) !important;

    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

}

/* =========================================================
   END — MOBILE = DESKTOP HEADER COLORS
   ========================================================= */
   
   /* =========================================================
   FINAL PAYMENT LOGOS FIX — CSS ONLY
   Paste at the absolute bottom
   ========================================================= */

/* Override the rule that hides the empty payment section */
html body #footer #footer_right section#payment_methods,
html body #footer #footer_right section#payment_methods:has(.accepts_group_div:empty){
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: min(760px, 90vw) !important;
  max-width: 760px !important;
  height: 105px !important;

  margin: 14px auto 8px !important;
  padding: 0 !important;

  background-color: transparent !important;
  background-image: url("https://cdn.freewebstore.com/origin/996032/transparentlogo_1785541872592.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;

  /* Crops the large transparent space above and below the logos */
  background-size: cover !important;

  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Center the payment section inside the footer-right area */
html body #footer #footer_right{
  align-items: center !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Hide only Freewebstore's original automatic icons */
html body #footer #footer_right section#payment_methods .accepts_group_div{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Tablet */
@media (max-width: 768px){
  html body #footer #footer_right section#payment_methods,
  html body #footer #footer_right section#payment_methods:has(.accepts_group_div:empty){
    width: min(650px, 94vw) !important;
    height: 90px !important;
  }
}

/* Phone */
@media (max-width: 480px){
  html body #footer #footer_right section#payment_methods,
  html body #footer #footer_right section#payment_methods:has(.accepts_group_div:empty){
    width: 94vw !important;
    height: 70px !important;
  }
}