/* ReadyKit PH - visual theme layer (loaded last on the public site).
   Re-colours the design tokens and upgrades the look of shared components.
   No inline styles are used anywhere, so the strict Content-Security-Policy still holds. */

:root {
    --color-bg: #ffffff;
    --color-surface: #f3f9f4;
    --color-surface-2: #dcefe0;
    --color-text: #19212b;
    --color-text-muted: #4b5762;
    --color-border: #d9eadd;
    --color-primary: #1a8540;
    --color-primary-hover: #136b33;
    --color-primary-soft: #e6f4e8;
    --color-accent: #fcbb0c;
    --color-cta: #fcbb0c;
    --color-cta-hover: #e3a600;
    --color-success: #0f7a3d;
    --color-success-soft: #e6f8ee;
    --color-warning: #8a4b00;
    --color-warning-soft: #fff3da;
    --color-danger: #c0262d;
    --color-danger-soft: #ffeceb;
    --color-info: #136b33;
    --color-info-soft: #e6f4e8;

    --grad-brand: linear-gradient(135deg, #0b6a36 0%, #1a8540 55%, #2e994b 100%);
    --grad-soft: linear-gradient(180deg, #eef7f0 0%, #ffffff 100%);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(10, 40, 25, 0.06), 0 1px 3px rgba(10, 40, 25, 0.05);
    --shadow-md: 0 14px 34px rgba(11, 80, 40, 0.14);
    --shadow-lg: 0 24px 60px rgba(11, 80, 40, 0.22);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body { background: #fafdfa; }
::selection { background: #bfe6c8; }

a { text-underline-offset: 3px; }

/* ------------------------------------------------------------ buttons */
.btn {
    border-radius: 999px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--primary {
    background: var(--grad-brand);
    box-shadow: 0 6px 18px rgba(26, 133, 64, 0.35);
}
.btn--primary:hover { background: var(--grad-brand); filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26, 133, 64, 0.45); }
.btn--cta {
    background: var(--color-cta);
    color: var(--color-text);
    box-shadow: 0 6px 18px rgba(252, 187, 12, 0.38);
}
.btn--cta:hover { background: var(--color-cta-hover); color: var(--color-text); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(252, 187, 12, 0.48); }
.btn--secondary { border-color: var(--color-border); background: #fff; }
.btn--secondary:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); transform: translateY(-2px); }
.btn--ghost:hover { background: var(--color-primary-soft); }
.btn.is-loading { position: relative; pointer-events: none; }

/* ------------------------------------------------------------ forms */
.form-input, .form-select, .form-textarea { border-radius: var(--radius-md); border-color: var(--color-border); background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.form-input:focus, .form-select:focus, .form-textarea:focus { box-shadow: 0 0 0 4px rgba(26, 133, 64, 0.16); }

/* ------------------------------------------------------------ badges */
.badge { padding: 0.2rem 0.7rem; box-shadow: 0 1px 2px rgba(10, 40, 25, 0.08); }
.badge--primary { background: var(--grad-brand); color: #fff; }

/* ------------------------------------------------------------ alerts */
.alert { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); animation: slide-in 0.4s var(--ease) both; }
.alert__text { flex: 1; min-width: 0; }
.alert__close {
    flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0;
    font-size: 1.25rem; line-height: 1; color: inherit; background: transparent;
    border: 0; border-radius: 50%; cursor: pointer; opacity: 0.6;
}
.alert__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.alert.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ header */
.site-header {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: transparent;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: 0 8px 24px rgba(11, 80, 40, 0.08); }

.navbar__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; }
.navbar__logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; color: #fff; background: var(--grad-brand);
    border-radius: 11px; box-shadow: 0 6px 14px rgba(26, 133, 64, 0.4);
    transition: transform 0.3s var(--ease);
}
.navbar__brand:hover .navbar__logo { transform: rotate(-8deg) scale(1.08); }

.navbar__links a, .navbar__link { border-radius: 999px; padding-inline: var(--space-3); transition: background-color 0.15s ease, color 0.15s ease; }
.navbar__links a:hover, .navbar__link:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.navbar__search .form-input { border-radius: 999px; padding-inline: 1.1rem; background: var(--color-surface); border-color: transparent; }
.navbar__search .form-input:focus { background: #fff; border-color: var(--color-primary); }

.navbar__cart { gap: 0.4rem; }
.navbar__cart-icon { flex: none; }
.navbar__count { color: var(--color-text); background: var(--color-cta); box-shadow: 0 3px 8px rgba(252, 187, 12, 0.45); margin-left: 0; }
.navbar__count.is-bumped { animation: bump 0.5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------ hero */
.hero {
    position: relative;
    isolation: isolate;
    background: radial-gradient(1200px 500px at 85% -10%, #d6efdc 0%, rgba(214, 239, 220, 0) 60%), linear-gradient(180deg, #eef7f0 0%, #fafdfa 100%);
    border-bottom: 0;
}
.hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; }
.hero__glow--a { width: 340px; height: 340px; left: -90px; top: -60px; background: #8fd49d; animation: drift 14s ease-in-out infinite alternate; }
.hero__glow--b { width: 300px; height: 300px; right: 6%; bottom: -80px; background: #fcd77a; opacity: 0.4; animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(40px, 30px); } }

.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.9rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);
    background: #fff; border: 1px solid var(--color-border); border-radius: 999px; box-shadow: var(--shadow-sm);
}
.hero__dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.hero__title { max-width: 20ch; font-weight: 800; }
.gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__trust svg { color: #16a34a; }

.hero__art { overflow: visible; }
.sheet { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: float 7s ease-in-out infinite; }
.sheet--back { background: linear-gradient(145deg, #cdebd4, #eef7f0); }
.sheet--mid { background: linear-gradient(145deg, #fff3cf, #fff8e1); animation-delay: -2s; }
.sheet--front { animation-delay: -4s; }
.sheet__bar--title { background: var(--grad-brand); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.float-chip {
    position: absolute; padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 800; color: var(--color-primary);
    background: #fff; border-radius: 999px; box-shadow: var(--shadow-md); animation: float 6s ease-in-out infinite;
}
.float-chip--one { left: -4%; top: 12%; }
.float-chip--two { right: -2%; top: 2%; color: #8a5d00; animation-delay: -1.5s; }
.float-chip--three { right: 4%; bottom: 4%; color: #0f7a3d; animation-delay: -3s; }

/* ------------------------------------------------------------ sections */
.section-title { position: relative; }
.section-head__link { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.section-head__link::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.section-head__link:hover::after { transform: translateX(4px); }
.section--alt { background: linear-gradient(180deg, #eef7f0 0%, #fafdfa 100%); }

.category-tile { border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.15s ease, background-color 0.15s ease; }
.category-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: #fff; border-color: #9fd3ab; }
.category-tile__icon { padding: 6px; width: 40px; height: 40px; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 12px; box-sizing: border-box; }
.category-tile:hover .category-tile__icon { color: #fff; background: var(--grad-brand); }

.value { padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-3); color: #fff; background: var(--grad-brand); border-radius: 14px; box-shadow: 0 8px 18px rgba(26, 133, 64, 0.3); }

.step::before { background: var(--grad-brand); box-shadow: 0 6px 14px rgba(26, 133, 64, 0.35); }

.review.card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.review.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review__rating { color: #f59e0b; }

.cta {
    position: relative; overflow: hidden; color: #fff; border-top: 0;
    background: var(--grad-brand);
}
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.cta::before { width: 320px; height: 320px; right: -80px; top: -120px; }
.cta::after { width: 200px; height: 200px; left: 8%; bottom: -100px; }
.cta__inner { position: relative; z-index: 1; }
.cta__title { color: #fff; }
.cta__text { color: rgba(255, 255, 255, 0.88); }
.cta .btn--secondary { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cta .btn--secondary:hover { background: #fff; color: var(--color-primary); }

/* ------------------------------------------------------------ cards */
.card { border-radius: var(--radius-lg); border-color: var(--color-border); }

.product-card { border-radius: var(--radius-lg); border-color: var(--color-border); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.2s ease; }
.product-card:hover, .product-card:focus-within { transform: translateY(-6px); border-color: #9fd3ab; box-shadow: var(--shadow-lg); }
.product-card__media { background: linear-gradient(145deg, #e6f4e8, #fff8e1); overflow: hidden; }
.product-card__media img { transition: transform 0.6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.07); }
.product-card__placeholder { width: 56px; height: 56px; opacity: 0.85; transition: transform 0.4s var(--ease); }
.product-card:hover .product-card__placeholder { transform: scale(1.12) rotate(-4deg); }
.product-card__category { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.product-card__title { font-weight: 800; }
.price { color: var(--color-text); }
.price--free { color: var(--color-success); }
.product-card__quick { position: relative; z-index: 2; margin-top: var(--space-3); }
@media (hover: hover) and (min-width: 900px) {
    .product-card__quick { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s var(--ease); }
    .product-card:hover .product-card__quick, .product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ shop, product, cart, auth */

.product-media__img, .product-media__placeholder { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.product-media__placeholder { background: linear-gradient(145deg, #e6f4e8, #fff8e1); }
.buy-box { padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.price--lg { font-size: 2.25rem; letter-spacing: -0.02em; }

.cart-item { transition: box-shadow 0.2s ease, transform 0.2s var(--ease); }
.cart-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.summary { box-shadow: var(--shadow-md); }


/* ------------------------------------------------------------ footer */
.site-footer { margin-top: 0; background: #19212b; color: #cfe0d4; border-top: 0; }
.footer__name { color: #fff; }
.footer__tagline, .footer__heading, .footer__bottom { color: #9aa7a0; }
.footer__col a { color: #e3efe6; }
.footer__col a:hover { color: #fff; text-decoration: none; }
.footer__col a { position: relative; transition: padding-left 0.2s var(--ease), color 0.15s ease; }
.footer__col a:hover { padding-left: 6px; }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------------ back to top */
.to-top {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; color: #fff; background: var(--grad-brand);
    border: 0; border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s var(--ease);
}
.to-top:not([hidden]) { display: inline-flex; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ scroll reveal (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 599px) {
    .hero__trust { gap: var(--space-2) var(--space-4); }
    .float-chip { display: none; }
    .product-card__quick { margin-top: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
    .sheet, .float-chip, .hero__glow, .hero__dot { animation: none !important; }
}

/* Brand logo image */
.navbar__logo-img { display: block; width: 48px; height: 48px; object-fit: contain; transition: transform 0.3s var(--ease); }
.navbar__brand:hover .navbar__logo-img { transform: scale(1.06); }
.footer__logo { display: block; width: 96px; height: 96px; object-fit: contain; margin-bottom: var(--space-2); }
.admin-sidebar__logo { display: block; width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }