/** Shopify CDN: Minification failed

Line 179:0 All "@import" rules must come first

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/


/* ======= Quantity Selector + ATC Button on Product Grid ======= */
.lele-qty-atc {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Pill-shaped quantity row: - 1 + */
.lele-qty-atc .lele-qty-wrap {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #ddd !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: #fff !important;
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.lele-qty-atc .lele-qty-wrap .lele-qty-btn {
  width: 44px !important;
  height: 100% !important;
  min-height: 44px !important;
  border: none !important;
  background: transparent !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #333 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s !important;
}

.lele-qty-atc .lele-qty-wrap .lele-qty-btn:hover {
  background: #f0f0f0 !important;
}

.lele-qty-atc .lele-qty-wrap .lele-qty-input {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #222 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 44px !important;
}

.lele-qty-atc .lele-qty-wrap .lele-qty-input::-webkit-outer-spin-button,
.lele-qty-atc .lele-qty-wrap .lele-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ATC button - colors from Theme Editor > Styles & Colors > Product item */
.lele-qty-atc .lele-atc-btn {
  display: block !important;
  width: 100% !important;
  padding: 12px 20px !important;
  background: #ee0000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.25s !important;
  line-height: 1.4 !important;
  height: auto !important;
  box-shadow: none !important;
}

.lele-qty-atc .lele-atc-btn:hover {
  background: #cc0000 !important;
  color: #ffffff !important;
}

.lele-qty-atc .lele-atc-btn--soldout {
  background: #999 !important;
  cursor: not-allowed !important;
}

.lele-qty-atc .lele-atc-btn--soldout:hover {
  background: #888 !important;
}

/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
  .lele-qty-atc .lele-qty-wrap {
    height: 38px !important;
  }
  .lele-qty-atc .lele-qty-wrap .lele-qty-btn {
    width: 38px !important;
    min-height: 38px !important;
    font-size: 18px !important;
  }
  .lele-qty-atc .lele-qty-wrap .lele-qty-input {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    font-size: 14px !important;
    line-height: 38px !important;
  }
  .lele-qty-atc .lele-atc-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   DAWBU DESIGN SYSTEM OVERRIDE
   Source of truth: design.md
   Applied on top of Kalles theme by The4Studio.
   Tokens, type, components, voice rules — kept faithful to brand book.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   Kopiku is the display face (caps only). Upload Kopiku.otf to theme assets
   for it to load; until then the Bowlby One fallback (loaded from Google
   Fonts) carries the same chunky display character. Poppins is the body.
*/
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: "Kopiku";
  src: url("//lelebrothers.in/cdn/shop/t/81/assets/Kopiku.otf?v=861") format("opentype"),
       url("//lelebrothers.in/cdn/shop/t/81/assets/Kopiku.ttf?v=861") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Core palette */
  --dawbu-red:        #E52227;
  --dawbu-yellow:     #FAED17;
  --dawbu-black:      #0A0A0A;
  --dawbu-white:      #FFFFFF;
  --dawbu-true-black: #000000;

  /* Red ramp */
  --red-50:#FDE7E8; --red-100:#FAC9CB; --red-200:#F49699; --red-300:#EE6468;
  --red-400:#E83E43; --red-500:#E52227; --red-600:#C01C20; --red-700:#8E1518;
  --red-800:#5C0E10; --red-900:#2E0708;

  /* Yellow ramp */
  --yellow-50:#FFFCDC; --yellow-100:#FEF79A; --yellow-200:#FDF25C;
  --yellow-300:#FAED17; --yellow-400:#D6CC0F; --yellow-500:#A69F0B; --yellow-600:#787307;

  /* Neutral ramp */
  --neutral-50:#F7F7F7; --neutral-100:#ECECEC; --neutral-200:#D6D6D6;
  --neutral-300:#B3B3B3; --neutral-400:#8A8A8A; --neutral-500:#5E5E5E;
  --neutral-600:#3A3A3A; --neutral-700:#222222; --neutral-800:#141414; --neutral-900:#0A0A0A;

  /* Semantic — REVERSED: yellow = primary brand, red = accent */
  --color-brand:         #FAED17;
  --color-brand-hover:   #D6CC0F;
  --color-brand-pressed: #A69F0B;
  --color-accent:        #E52227;
  --color-accent-hover:  #C01C20;

  --bg-canvas:      #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #F7F7F7;
  --bg-muted:       #ECECEC;
  --bg-brand:       #FAED17;
  --bg-brand-soft:  #FFFCDC;
  --bg-accent:      #E52227;
  --bg-accent-soft: #FDE7E8;
  --bg-ink:         #0A0A0A;
  --bg-overlay:     rgba(10,10,10,0.55);

  --fg-1: #0A0A0A;
  --fg-2: #222222;
  --fg-3: #5E5E5E;
  --fg-4: #8A8A8A;
  --fg-on-brand:  #0A0A0A;   /* black on yellow — legible */
  --fg-on-accent: #FFFFFF;   /* white on red */
  --fg-on-ink:    #FAED17;   /* yellow on black for emphasis */

  --border-subtle:  rgba(10,10,10,0.08);
  --border-default: rgba(10,10,10,0.14);
  --border-strong:  rgba(10,10,10,0.28);

  --color-success: #2E8B3D;
  --color-warning: #E59216;
  --color-danger:  #E52227;
  --color-info:    #1F7AE0;

  /* Type */
  --font-display: "Kopiku", "Bowlby One", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Scale */
  --fs-96:96px; --fs-72:72px; --fs-60:60px; --fs-48:48px; --fs-40:40px;
  --fs-32:32px; --fs-28:28px; --fs-24:24px; --fs-20:20px; --fs-18:18px;
  --fs-16:16px; --fs-14:14px; --fs-12:12px; --fs-10:10px;

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fw-bold:700; --fw-extrabold:800; --fw-black:900;

  --lh-tight:1.02; --lh-snug:1.15; --lh-normal:1.45; --lh-loose:1.7;
  --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-wider:0.08em;

  /* Spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  /* Radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --radius-xl:32px; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(10,10,10,0.06);
  --shadow-sm:    0 2px 6px rgba(10,10,10,0.08);
  --shadow-md:    0 6px 18px rgba(10,10,10,0.10);
  --shadow-lg:    0 16px 40px rgba(10,10,10,0.14);
  --shadow-brand: 0 10px 30px rgba(229,34,39,0.28);
  --shadow-press: 0 2px 0 0 #0A0A0A;

  /* Motion */
  --duration-quick:120ms; --duration-base:200ms; --duration-slow:360ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Global body + type -------------------------------------------------- */
body,
.fnt_body,
.f_body,
.lazyloaded h4.f_body {
  font-family: var(--font-body) !important;
  color: var(--fg-2);
  background: var(--bg-canvas);
}

/* Display face on headlines + product/section titles. Caps as the brand demands. */
h1, h2, h3,
.fnt_heading, .fnt_df_blog,
.widget-title, .lazyloaded .widget-title,
.post_nt_loop h4,
.nt_pr h3.product-title,
.product_title, .product-title,
.section-title, .nt_section_title,
.heading_shop, .h_color_in_dark {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1) !important;
}

/* Subheadings stay in Poppins so caps body type doesn't fight Kopiku */
h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide);
}

/* Eyebrow / label utility per brand book */
.eyebrow, .dawbu-eyebrow {
  font-family: var(--font-body) !important;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn,
.button,
button.btn,
input.button,
.single_add_to_cart_button,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.mini_cart_footer .button.btn-checkout,
.button.button_primary,
.btn_back, .btn_back2,
.shipping_calculator input.get_rates {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-14) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-pill) !important;
  border: 0 !important;
  padding: 11px 22px !important;
  background: var(--color-brand) !important;
  color: var(--fg-on-brand) !important;
  box-shadow: var(--shadow-press) !important;
  transition: transform 160ms var(--ease-pop), background 160ms var(--ease-out) !important;
  cursor: pointer;
}

.btn:hover,
.button:hover,
button.btn:hover,
.single_add_to_cart_button:hover,
.shopify-payment-button__button:hover,
.mini_cart_footer .button.btn-checkout:hover,
.button.button_primary:hover {
  background: var(--color-brand-hover) !important;
  color: var(--fg-on-brand) !important;
}

.btn:active,
.button:active,
.single_add_to_cart_button:active,
.shopify-payment-button__button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 0 var(--dawbu-black) !important;
}

/* Secondary (red accent) — white text on red per pairing rules */
.btn--style-3,
.btn_secondary,
.button.button_secondary {
  background: var(--color-accent) !important;
  color: var(--fg-on-accent) !important;
  box-shadow: var(--shadow-press) !important;
}
.btn--style-3:hover,
.btn_secondary:hover,
.button.button_secondary:hover {
  background: var(--color-accent-hover) !important;
  color: var(--fg-on-accent) !important;
}

/* Ghost (used as outline) */
.btn-ghost, .button.button_ghost, .btn--outline {
  background: transparent !important;
  color: var(--fg-1) !important;
  border: 1.5px solid var(--fg-1) !important;
  box-shadow: none !important;
}

/* Lele ATC button on grid — adopt brand button */
.lele-qty-atc .lele-atc-btn {
  background: var(--color-brand) !important;
  color: var(--fg-on-brand) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  box-shadow: var(--shadow-press) !important;
}

/* ---- Announcement / Promo bar -------------------------------------------
   Yellow body bar with bold black/red copy — the dominant surface. */
.promo-top, .nt_promotion_text, .header-top-bar, .top_bar_promo {
  background: var(--color-brand) !important;        /* yellow */
  color: var(--fg-on-brand) !important;             /* black on yellow */
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.promo-top a, .nt_promotion_text a, .top_bar_promo a {
  color: var(--color-accent) !important;            /* red accent links */
}

/* ---- Product cards ------------------------------------------------------ */
.product-inner,
.nt_pr .product-inner,
.product_list_widget .product-inner,
.pr_grid_item .product-inner {
  background: var(--bg-surface) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-pop), box-shadow 200ms var(--ease-out);
}
.product-inner:hover,
.nt_pr .product-inner:hover,
.pr_grid_item .product-inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.product-image, .product-images {
  background: var(--bg-brand-soft);   /* soft yellow — yellow on white is forbidden, soft yellow is fine */
}

.product_title, .product-title, .nt_pr h3.product-title {
  color: var(--fg-1) !important;
}

/* Price in red accent (red on white is always safe; yellow on white is forbidden) */
.price, .product-price, .price__regular .price-item,
.nt_price, .money {
  font-family: var(--font-display) !important;
  color: var(--color-accent) !important;
}

/* ---- Badges / tags ------------------------------------------------------
   New = yellow with black ink (fresh, friendly).
   Sale = red with white text (urgent). */
.pr_lb_new, .badge--new, .product-label--new {
  background: var(--color-brand) !important;        /* yellow */
  color: var(--fg-on-brand) !important;             /* black */
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}
.pr_lb_sale, .badge--sale, .product-label--sale, .sale-tag {
  background: var(--color-accent) !important;       /* red */
  color: var(--fg-on-accent) !important;            /* white */
  border-radius: var(--radius-pill) !important;
}

/* ---- Inputs -------------------------------------------------------------
   Quantity inputs (PDP, cart drawer, cart page) are EXCLUDED — Kalles
   styles them natively and overriding breaks the layout. */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], select, textarea {
  font-family: var(--font-body) !important;
  border: 1.5px solid var(--bg-muted) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  color: var(--fg-1);
  transition: border-color 160ms var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px rgba(229,34,39,0.15) !important;
  outline: 0 !important;
}

/* ---- Links -------------------------------------------------------------- */
a { color: var(--color-brand); transition: color 160ms var(--ease-out); }
a:hover { color: var(--color-brand-hover); }

/* Nav links in Poppins SemiBold 13px per brand */
#nt_header a, .header_nav a, .nt_navigation a {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-wide);
}

/* ---- Hero panel utility -------------------------------------------------
   Yellow panel with bold black headline + red accent word. */
.dawbu-hero {
  background: var(--color-brand);                   /* yellow */
  color: var(--fg-on-brand);                        /* black */
  padding: var(--space-20) var(--space-8);
}
.dawbu-hero h1, .dawbu-hero .hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  color: var(--fg-on-brand);                        /* black headline */
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.dawbu-hero .hero-accent { color: var(--color-accent); }   /* red accent word */

/* ---- Cart drawer / mini cart ------------------------------------------- */
.mini_cart_footer, .cart_widget {
  border-radius: var(--radius-lg) !important;
}

/* ---- Footer ------------------------------------------------------------- */
#nt_footer.bgbl, .footer-1.bgbl {
  background: var(--bg-ink) !important;
  color: var(--fg-on-ink);                          /* yellow on ink */
}
#nt_footer h3, #nt_footer h4, #nt_footer .widget-title {
  color: var(--color-brand) !important;             /* yellow headings on black */
}

/* ---- Disable noise/gradient surfaces (brand rule: solid flat color) ----- */
.has_gradient_bg, .bg_gradient, .bg-noise {
  background-image: none !important;
}

/* ---- Mobile tightening (mirrors design.md mobile rules) ----------------- */
@media (max-width: 767px) {
  .dawbu-hero { padding: var(--space-12) var(--space-5); }
  .dawbu-hero h1, .dawbu-hero .hero-title { font-size: var(--fs-40); }
  .product-inner, .nt_pr .product-inner { border-radius: var(--radius-lg) !important; }
}