/* Cocos Locos UI Polish v1.0.3 */

/* Replace the old plain copyright strip with the branded signature. */
.cl-copyright{display:none!important}
.cl-becerra-signature{
  width:100%;background:linear-gradient(180deg,#24120b 0%,#170b07 100%);color:#f3e2c3;
  border-top:1px solid rgba(231,197,143,.22);position:relative;z-index:20;
  font-family:Montserrat,Arial,sans-serif;transition:background .28s ease,color .28s ease,border-color .28s ease
}
.cl-becerra-signature-inner{
  width:min(1420px,calc(100% - 36px));margin:0 auto;min-height:62px;padding:11px 0;
  display:flex;align-items:center;justify-content:center;gap:14px
}
.cl-becerra-mark{width:39px;height:39px;flex:0 0 39px;display:block;border-radius:50%;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.cl-becerra-mark img{display:block;width:100%;height:100%;object-fit:contain}
.cl-becerra-copy{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;font-size:12px;line-height:1.45;color:#e5d0aa}
.cl-becerra-copy a{color:#fff1d2;text-decoration:none}
.cl-becerra-copy strong{font-weight:800;color:#fff1d2}
.cl-becerra-sep{opacity:.55}

/* Signature follows the existing Cocos Locos sun / moon theme. */
.cl-light-mode .cl-becerra-signature{
  background:linear-gradient(180deg,#f6ead4 0%,#ead8b8 100%);
  color:#3c281c;border-top-color:#cfb78f
}
.cl-light-mode .cl-becerra-copy{color:#5a4435}
.cl-light-mode .cl-becerra-copy a,
.cl-light-mode .cl-becerra-copy strong{color:#2f1d14}
.cl-light-mode .cl-becerra-sep{color:#8a6f56;opacity:.75}

/* Desktop header: give the menu room and stop labels breaking into two lines. */
@media(min-width:981px){
  .cl-header .cl-nav-wrap{
    width:min(1480px,calc(100% - 34px))!important;
    max-width:none!important;gap:13px!important;min-height:96px!important
  }
  .cl-header .cl-logo{width:104px!important;flex:0 0 104px!important}
  .cl-header .cl-logo img{max-height:88px!important;width:auto!important}
  .cl-header .cl-nav{margin-left:auto!important;min-width:0!important}
  .cl-header .cl-nav ul{gap:18px!important;flex-wrap:nowrap!important;white-space:nowrap!important}
  .cl-header .cl-nav li{flex:0 0 auto!important}
  .cl-header .cl-nav a{font-size:13px!important;white-space:nowrap!important;line-height:1.05!important}
  .cl-header .cl-order-btn{padding:13px 18px!important;font-size:13px!important}
  .cl-header .cl-theme-toggle,
  .cl-header .cl-account-link,
  .cl-header .cl-global-cart-trigger{width:40px!important;height:40px!important;flex:0 0 40px!important}
}
@media(min-width:981px) and (max-width:1250px){
  .cl-header .cl-nav-wrap{gap:9px!important;width:calc(100% - 24px)!important}
  .cl-header .cl-nav ul{gap:12px!important}
  .cl-header .cl-nav a{font-size:12px!important;letter-spacing:.015em!important}
  .cl-header .cl-logo{width:92px!important;flex-basis:92px!important}
  .cl-header .cl-logo img{max-height:78px!important}
  .cl-header .cl-order-btn{padding:12px 14px!important;font-size:12px!important}
}

/* TranslatePress menu flags: icon only, compact and consistent. */
.cl-nav a:has(img.trp-flag-image),
.cl-nav li[class*="trp-language-switcher"]>a{
  font-size:0!important;letter-spacing:0!important;padding:4px!important;
  min-width:36px!important;min-height:32px!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.035)!important
}
.cl-nav img.trp-flag-image,
.cl-nav li[class*="trp-language-switcher"] img{
  width:27px!important;height:18px!important;max-width:27px!important;object-fit:cover!important;
  border-radius:3px!important;margin:0!important;display:block!important
}
.cl-light-mode .cl-nav a:has(img.trp-flag-image),
.cl-light-mode .cl-nav li[class*="trp-language-switcher"]>a{
  border-color:#cdbb9d!important;background:#fff9ec!important
}

/* Language icons copied into the app-style mobile drawer. */
.cl-mobile-language-flags{
  display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px 8px;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.cl-mobile-language-flags a{
  width:48px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.035)
}
.cl-mobile-language-flags img{width:30px!important;height:20px!important;object-fit:cover!important;border-radius:3px!important;margin:0!important}
.cl-light-mode .cl-mobile-language-flags{border-bottom-color:#dfcdb0}
.cl-light-mode .cl-mobile-language-flags a{background:#fff9ec;border-color:#cdbb9d}

@media(max-width:620px){
  .cl-becerra-signature-inner{width:calc(100% - 28px);min-height:0;padding:13px 0 16px;justify-content:flex-start;align-items:flex-start;gap:11px}
  .cl-becerra-mark{width:42px;height:42px;flex-basis:42px}
  .cl-becerra-copy{justify-content:flex-start;align-items:flex-start;display:block;font-size:11px;line-height:1.55;padding-top:2px}
  .cl-becerra-copy span{display:inline}
  .cl-becerra-sep{padding:0 4px}
}


/* v1.0.3: mobile TranslatePress cleanup — flags only, never duplicate language names. */
@media(max-width:980px){
  .cl-mobile-drawer .cl-hide-mobile-language-row{display:none!important}
  .cl-mobile-drawer [class*="trp-language-switcher"]:not(.cl-mobile-language-flags),
  .cl-mobile-drawer .trp-ls-language-name{display:none!important}
  .cl-mobile-language-flags{display:flex!important}
  .cl-mobile-language-flags .cl-mobile-language-flag{font-size:0!important;line-height:0!important}
}

/* =========================================================
   v1.0.4 — Elementor translated button visibility
   TranslatePress can wrap translated labels in extra spans.
   Keep every label visible and inheriting the button color.
   ========================================================= */
.elementor-page .elementor-button .elementor-button-content-wrapper,
.elementor-page .elementor-button .elementor-button-text,
.elementor-page .elementor-button .elementor-button-text *,
.elementor-page .elementor-button span:not(.elementor-button-icon),
.cl-btn span,
.cl-order-btn span,
.cl-mobile-order-btn span,
.cl-mobile-drawer-nav a > span:not(.cl-mobile-nav-icon):not(.cl-mobile-menu-cart-badge),
.cl-drawer-checkout span,
.cl-drawer-continue span,
.woocommerce a.button span,
.woocommerce button.button span,
.woocommerce #place_order span{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  clip:auto!important;
  clip-path:none!important;
}

/* Known branded buttons: explicit contrast in both languages and both themes. */
.elementor-page .cl-el-btn-lime .elementor-button,
.elementor-page .cl-el-btn-lime .elementor-button *,
.cl-order-btn,.cl-order-btn *,
.cl-btn-lime,.cl-btn-lime *,
.cl-mobile-order-btn,.cl-mobile-order-btn *{
  color:#17100c!important;
  -webkit-text-fill-color:#17100c!important;
}
.elementor-page .cl-el-btn-orange .elementor-button,
.elementor-page .cl-el-btn-orange .elementor-button *,
.cl-btn-orange,.cl-btn-orange *,
.cl-drawer-checkout,.cl-drawer-checkout *,
.cl-qv-add,.cl-qv-add *,
#place_order,#place_order *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Prevent translated button text from collapsing to zero width/size on mobile. */
@media(max-width:980px){
  .elementor-page .elementor-button-text,
  .cl-mobile-order-btn > span:last-child,
  .cl-mobile-drawer-nav a > span:nth-child(2){
    display:inline-block!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    font-size:inherit!important;
    line-height:inherit!important;
    white-space:normal!important;
  }
}

/* =========================================================
   v1.0.5 — Mobile contact/location responsive + translated CTA fix
   ========================================================= */
/* Never let translated contact/location content create horizontal overflow. */
.cl-contact-grid,
.cl-contact-grid > *,
.cl-contact-grid .cl-location-grid,
.cl-contact-grid .cl-location-card,
.cl-location-grid,
.cl-location-card{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.cl-contact-grid .cl-meta-line,
.cl-location-card .cl-meta-line{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

.cl-contact-grid .cl-meta-line a,
.cl-location-card .cl-meta-line a{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* Location CTAs: equal columns, readable labels and no clipping after translation. */
.cl-location-actions{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.cl-location-actions a{
  box-sizing:border-box!important;
  min-height:52px!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

@media(max-width:980px){
  .cl-contact-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    width:100%!important;
  }
  .cl-contact-grid > div{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .cl-contact-grid > div:first-child{
    padding-inline:2px!important;
  }
  .cl-contact-grid > div:first-child h2{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .cl-contact-grid .cl-location-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  .cl-location-card{
    width:100%!important;
    padding:20px!important;
    overflow:hidden!important;
  }
  .cl-location-card h3{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .cl-location-card .cl-meta-line{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    width:100%!important;
    margin:10px 0!important;
    line-height:1.48!important;
  }
  .cl-location-card .cl-meta-line > .cl-icon,
  .cl-contact-grid .cl-meta-line > .cl-icon{
    flex:0 0 20px!important;
    margin-top:2px!important;
  }
  .cl-location-card .cl-meta-line > a{
    flex:1 1 auto!important;
  }
  .cl-location-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:20px!important;
  }
  .cl-location-actions a{
    min-width:0!important;
    padding:12px 8px!important;
    font-size:clamp(12px,3.3vw,15px)!important;
    letter-spacing:.01em!important;
  }
}

@media(max-width:420px){
  .cl-container{
    max-width:100%!important;
  }
  .cl-inner-shell{
    overflow-x:hidden!important;
  }
  .cl-contact-grid{
    gap:18px!important;
  }
  .cl-contact-grid > div:first-child{
    padding:0 4px!important;
  }
  .cl-contact-grid .cl-meta-line{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:4px 7px!important;
    font-size:15px!important;
    line-height:1.5!important;
  }
  .cl-contact-grid .cl-meta-line strong{
    flex:0 0 auto!important;
  }
  .cl-contact-grid .cl-meta-line a{
    flex:1 1 180px!important;
  }
  .cl-location-card{
    padding:18px 16px!important;
    border-radius:14px!important;
  }
  .cl-location-card h3{
    font-size:clamp(29px,9vw,38px)!important;
    line-height:1.05!important;
    margin-bottom:16px!important;
  }
  .cl-location-card .cl-meta-line{
    font-size:clamp(16px,4.8vw,20px)!important;
  }
  .cl-location-actions{
    gap:8px!important;
  }
  .cl-location-actions a{
    min-height:56px!important;
    padding:10px 6px!important;
    font-size:clamp(12px,3.75vw,14px)!important;
    line-height:1.12!important;
  }
}


/* =========================================================
   v1.0.6 — Global lime/green CTA text contrast
   All Cocos Locos lime/green action buttons use dark text.
   This also covers translated wrapper spans added by TranslatePress.
   ========================================================= */
.cl-order-btn,
.cl-order-btn *,
.cl-btn-lime,
.cl-btn-lime *,
.cl-checkout-btn,
.cl-checkout-btn *,
.cl-location-actions a,
.cl-location-actions a *,
.cl-mobile-order-btn,
.cl-mobile-order-btn *,
.elementor-page .cl-el-btn-lime .elementor-button,
.elementor-page .cl-el-btn-lime .elementor-button *,
.cl-pwa-install,
.cl-pwa-install *,
.cl-force-dark-green-label,
.cl-force-dark-green-label *{
  color:#17100c!important;
  -webkit-text-fill-color:#17100c!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Catch custom Elementor/Woo buttons that use the project lime inline. */
a[style*="#b7d20a" i], a[style*="#b8d400" i], a[style*="#c6df00" i],
button[style*="#b7d20a" i], button[style*="#b8d400" i], button[style*="#c6df00" i],
.elementor-button[style*="#b7d20a" i], .elementor-button[style*="#b8d400" i], .elementor-button[style*="#c6df00" i]{
  color:#17100c!important;
  -webkit-text-fill-color:#17100c!important;
}
a[style*="#b7d20a" i] *, a[style*="#b8d400" i] *, a[style*="#c6df00" i] *,
button[style*="#b7d20a" i] *, button[style*="#b8d400" i] *, button[style*="#c6df00" i] *,
.elementor-button[style*="#b7d20a" i] *, .elementor-button[style*="#b8d400" i] *, .elementor-button[style*="#c6df00" i] *{
  color:#17100c!important;
  -webkit-text-fill-color:#17100c!important;
}