/* ============================================================
   COCOQI DESIGN SYSTEM — global entry point.
   Consumers link THIS file. Keep it a list of @imports only.
   ============================================================ */
/* Cocoqi webfonts — Google Fonts CDN.
   Display: Fredoka (rounded, friendly, bold) — substitutes the custom Cocoqi
   wordmark / headline face. Body: Nunito (humanist rounded sans) — substitutes
   the brand's geometric body face. SUBSTITUTION: flagged to the user; supply the
   real brand binaries to replace these @import-ed webfonts. */






















































/* ============================================================
   COCOQI — COLOR TOKENS
   Sticker-pop palette: flat vibrant fills, thick black outlines.
   Sampled from brand brochures, posters, pouches & mascots.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --cq-pandan:        #86CCA4;  /* primary mint green (the "Cocoqi green") */
  --cq-pandan-deep:   #3FA873;  /* darker pandan for text on light / hover */
  --cq-pandan-soft:   #C8EAD6;  /* tint surface */

  --cq-pink:          #ED5B9E;  /* "Pink Is Fine" hot pink — energy accent */
  --cq-pink-deep:     #D23F86;  /* pressed / hover pink */
  --cq-pink-soft:     #FBD3E6;  /* tint surface */

  --cq-orchid:        #C44E96;  /* deep magenta (mascot square / bursts) */

  --cq-sky:           #B3E1E4;  /* light cyan — coconut blue, calm surface */
  --cq-sky-deep:      #6FC2CC;  /* hover / stroke on sky */
  --cq-sky-soft:      #DCF2F3;  /* faint cyan tint */

  --cq-yellow:        #FFD236;  /* sunny sparkle yellow */
  --cq-yellow-deep:   #F2B600;

  --cq-lilac:         #C9A6D6;  /* lavender capsule accent */
  --cq-lilac-soft:    #EBDCF1;

  /* ---- Neutrals (sticker ink) ---- */
  --cq-ink:           #1E1E1E;  /* coconut black — primary text & outlines */
  --cq-charcoal:      #2B2B2B;  /* dark panel background */
  --cq-charcoal-2:    #3A3A3A;  /* raised dark surface */
  --cq-graphite:      #5C5C5C;  /* muted text on light */
  --cq-mist:          #9AA0A0;  /* disabled / hint text */
  --cq-line:          #E2E0DB;  /* hairline on cream */
  --cq-cream:         #FBF6EE;  /* warm off-white page */
  --cq-white:         #FFFFFF;
  --cq-black:         #000000;  /* pure black for sticker outlines */

  /* ---- Semantic aliases ---- */
  --color-brand:        var(--cq-pandan);
  --color-accent:       var(--cq-pink);
  --color-highlight:    var(--cq-yellow);

  --text-strong:        var(--cq-ink);
  --text-body:          #333130;
  --text-muted:         var(--cq-graphite);
  --text-on-brand:      var(--cq-ink);     /* ink reads best on pandan/sky/yellow */
  --text-on-dark:       var(--cq-white);
  --text-on-pink:       var(--cq-white);

  --surface-page:       var(--cq-cream);
  --surface-card:       var(--cq-white);
  --surface-dark:       var(--cq-charcoal);
  --surface-brand:      var(--cq-pandan);
  --surface-sky:        var(--cq-sky);
  --surface-pink:       var(--cq-pink);

  --outline-sticker:    var(--cq-black);   /* the signature thick black keyline */
  --border-card:        var(--cq-ink);
  --border-soft:        var(--cq-line);

  --focus-ring:         var(--cq-pink);

  /* ---- Status (kept on-brand, used sparingly) ---- */
  --status-success:     #3FA873;
  --status-warning:     #F2B600;
  --status-danger:      #E2452F;
  --status-info:        #6FC2CC;
}

/* ============================================================
   COCOQI — TYPOGRAPHY TOKENS
   Display: Fredoka (rounded, bold, friendly) — headlines + wordmark.
   Body:    Nunito (humanist rounded sans) — copy, labels, Malay italics.
   Voice is loud & playful: tight, heavy display; relaxed, readable body.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-slogan:  'Fredoka', 'Trebuchet MS', sans-serif; /* uppercase + skew for "SEDAP GILA" energy */

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* ---- Display scale (Fredoka) ---- */
  --fs-display:   clamp(2.75rem, 6vw, 4.5rem); /* @kind font */
  --fs-h1:        clamp(2.25rem, 4.5vw, 3.25rem); /* @kind font */
  --fs-h2:        clamp(1.75rem, 3.2vw, 2.4rem); /* @kind font */
  --fs-h3:        1.5rem;   /* @kind font */
  --fs-h4:        1.25rem;  /* @kind font */

  /* ---- Body scale (Nunito) ---- */
  --fs-lead:      1.25rem;  /* @kind font */
  --fs-body:      1rem;     /* @kind font */
  --fs-sm:        0.875rem; /* @kind font */
  --fs-xs:        0.75rem;  /* @kind font */
  --fs-ty:        0.6875rem;/* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.02;  /* @kind other */
  --lh-snug:    1.18;  /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-label:   0.04em;  /* @kind other */
  --ls-slogan:  0.01em;  /* @kind other */

  /* ---- Semantic roles ---- */
  --type-hero-family:    var(--font-display);
  --type-hero-weight:    var(--fw-bold);
  --type-heading-family: var(--font-display);
  --type-heading-weight: var(--fw-semibold);
  --type-body-family:    var(--font-body);
  --type-body-weight:    var(--fw-regular);
  --type-label-family:   var(--font-body);
  --type-label-weight:   var(--fw-bold);
}

/* ============================================================
   COCOQI — SPACING & SIZING TOKENS
   Base 4px rhythm. Generous, airy layouts; chunky touch targets.
   ============================================================ */
:root {
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --gutter:        clamp(20px, 5vw, 64px); /* @kind spacing */
  --section-y:     clamp(56px, 9vw, 120px); /* @kind spacing */

  /* Control sizing (chunky, sticker-friendly) */
  --control-h-sm: 36px;
  --control-h-md: 46px;
  --control-h-lg: 56px;
  --tap-min:      44px;  /* never smaller */
}

/* ============================================================
   COCOQI — EFFECTS: RADII, BORDERS, SHADOWS, MOTION
   The brand is "sticker pop": thick black keylines, rounded
   everything, flat fills, hard offset shadows (not soft blur).
   ============================================================ */
:root {
  /* ---- Corner radii (rounded & bubbly) ---- */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   26px;
  --radius-xl:   36px;
  --radius-pill: 999px;   /* capsules — heavily used for tags & buttons */
  --radius-blob: 42% 58% 56% 44% / 52% 44% 56% 48%; /* organic splash shape */

  /* ---- Sticker outlines (signature thick black keyline) ---- */
  --stroke-hair:  1px;
  --stroke-thin:  2px;
  --stroke-bold:  3px;     /* default sticker keyline */
  --stroke-chunk: 4px;     /* hero stickers / mascots */
  --outline-color: var(--cq-black);
  --border-sticker: var(--stroke-bold) solid var(--cq-black);

  /* ---- Shadows ----
     Primary system = HARD OFFSET (no blur) for the cut-out sticker look.
     A soft elevation set exists for app UIs (chillers, dashboards). */
  --shadow-pop-sm:  2px 2px 0 0 var(--cq-black);
  --shadow-pop:     4px 4px 0 0 var(--cq-black);
  --shadow-pop-lg:  6px 6px 0 0 var(--cq-black);
  --shadow-pop-pink:4px 4px 0 0 var(--cq-pink-deep);

  --shadow-soft-sm: 0 1px 2px rgba(30,30,30,.10);
  --shadow-soft:    0 6px 18px rgba(30,30,30,.12);
  --shadow-soft-lg: 0 18px 40px rgba(30,30,30,.16);

  /* ---- Motion ----
     Bouncy, springy easing; quick & cheerful. Hover lifts the
     sticker toward the viewer; press nudges it into its shadow. */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1); /* @kind other */
  --ease-out:    cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Interaction deltas */
  --press-shift: 2px;   /* translate on :active toward shadow */
  --hover-lift:  -2px;  /* translate up on hover */
}

/* ============================================================
   COCOQI — BASE / RESET + a few brand helper classes.
   Lightweight: tokens do the heavy lifting. Helpers here are the
   recurring "sticker" primitives used across cards & UI kits.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  margin: 0 0 .4em;
  font-weight: var(--fw-semibold);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 1em; }
a  { color: var(--cq-pink-deep); text-underline-offset: 3px; }

/* ---- Brand helper: hero display ---- */
.cq-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}

/* ---- Bilingual sub-label (Malay translation under EN headline) ---- */
.cq-sub-ms {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- Slogan: heavy uppercase, slight skew (the "SEDAP GILA" energy) ---- */
.cq-slogan {
  font-family: var(--font-slogan);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-slogan);
  transform: skewX(-6deg);
  display: inline-block;
  line-height: .95;
}

/* ---- The signature sticker keyline wrapper ---- */
.cq-sticker {
  border: var(--border-sticker);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-pop);
}

/* ---- Uppercase micro label ---- */
.cq-label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}




  body{margin:0;background:var(--cq-cream)}
  @media (max-width: 900px){
    .cq-hero-grid,.cq-story-grid,.cq-buy-grid,.cq-shop-grid,.cq-why-grid,.cq-mv-grid{grid-template-columns:1fr !important}
    .cq-values-grid,.cq-prod-grid{grid-template-columns:1fr 1fr !important}
    .cq-portal-grid,.cq-foot-grid{grid-template-columns:1fr !important}
    .cq-nav{display:none !important}
  }
  @media (max-width: 560px){
    .cq-values-grid,.cq-prod-grid{grid-template-columns:1fr !important}
  }


/* WordPress and WooCommerce integration */
html { scroll-behavior: smooth; }
body.admin-bar #root > header { top: 32px !important; }
.cocoqi-site-header { position: sticky; top: 0; z-index: 30; background: var(--cq-cream); border-bottom: 3px solid var(--cq-ink); }
.admin-bar .cocoqi-site-header { top: 32px; }
.cocoqi-site-header__inner { max-width: var(--container-max); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cocoqi-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--cq-ink); text-decoration: none; line-height: 1; }
.cocoqi-wordmark span { color: var(--cq-pink); }
.cocoqi-header-link { font-family: var(--font-body); font-weight: 800; color: var(--cq-ink); text-decoration: none; border: 2px solid var(--cq-ink); border-radius: var(--radius-pill); background: #fff; padding: 8px 14px; box-shadow: var(--shadow-pop-sm); }
.cocoqi-content { max-width: var(--container-max); margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter); }
.cocoqi-content > article, .cocoqi-woocommerce-shell { background: var(--cq-cream); }
.cocoqi-basic-footer { border-top: 3px solid var(--cq-ink); background: var(--cq-charcoal); color: #fff; text-align: center; padding: 20px var(--gutter); font-size: 13px; }

/* WooCommerce classic checkout/cart/account styling */
.woocommerce, .woocommerce-page { font-family: var(--font-body); color: var(--text-body); }
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4 { font-family: var(--font-display); color: var(--cq-ink); }
.woocommerce form.checkout, .woocommerce form.login, .woocommerce form.register,
.woocommerce .woocommerce-checkout-review-order, .woocommerce .cart_totals,
.woocommerce .woocommerce-MyAccount-content, .woocommerce .woocommerce-MyAccount-navigation {
  background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: clamp(18px, 3vw, 28px);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container--default .select2-selection--single {
  width: 100%; min-height: 48px; border: 2px solid var(--cq-ink); border-radius: var(--radius-md); background: #fff; color: var(--cq-ink); padding: 10px 12px; font: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
  border: 3px solid var(--cq-ink) !important; border-radius: var(--radius-pill) !important; background: var(--cq-pink) !important; color: #fff !important; box-shadow: var(--shadow-pop-sm); font-family: var(--font-body) !important; font-weight: 800 !important; padding: 12px 20px !important;
}
.woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt { background: var(--cq-pink) !important; }
.woocommerce table.shop_table { border: 3px solid var(--cq-ink); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--cq-line); padding: 14px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border: 2px solid var(--cq-ink); border-top-width: 3px; border-radius: var(--radius-md); background: var(--cq-sky-soft); color: var(--cq-ink); box-shadow: var(--shadow-pop-sm);
}
.woocommerce-error { background: #ffe3e8; }
.woocommerce-message { background: var(--cq-pandan-soft); }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: var(--cq-sky-soft); border: 2px solid var(--cq-ink); border-radius: var(--radius-md); }
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { background: #fff; border: 2px solid var(--cq-ink); border-radius: var(--radius-md); }
.woocommerce .quantity .qty { min-height: 42px; border: 2px solid var(--cq-ink); border-radius: 8px; }

/* WooCommerce block checkout/cart styling */
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { font-family: var(--font-body); }
.wc-block-components-sidebar-layout { gap: 28px; }
.wc-block-components-sidebar, .wc-block-components-main { background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: clamp(16px, 3vw, 26px) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { border: 2px solid var(--cq-ink) !important; border-radius: var(--radius-md) !important; }

@media (max-width: 782px) {
  body.admin-bar #root > header, .admin-bar .cocoqi-site-header { top: 46px !important; }
}