/* This Soap Works wholesale and portal UI. */
:root { --forest:#123c2d; --leaf:#287a4b; --gold:#f5b942; --cream:#fffaf0; --ink:#16231d; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
a, button, input, select, textarea { transition:180ms ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(245,185,66,.7); outline-offset:3px; }

.brand-mark-shell { display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid rgba(18,60,45,.12); box-shadow:0 8px 22px rgba(18,60,45,.12); }
.brand-mark-shell img { width:82%; height:82%; object-fit:contain; }
.portal-nav-link { display:inline-flex; align-items:center; gap:.35rem; padding:.65rem .72rem; border-radius:.75rem; color:rgba(22,35,29,.68); white-space:nowrap; }
.portal-nav-link:hover, .portal-nav-link.is-active { color:var(--forest); background:#e4f2e8; }
.portal-btn { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.72rem 1.15rem; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--leaf),var(--forest)); font-weight:800; box-shadow:0 12px 28px -15px rgba(18,60,45,.75); }
.portal-btn:hover { transform:translateY(-2px); box-shadow:0 18px 32px -15px rgba(18,60,45,.85); }
.amazon-review-btn { display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.8rem 1.25rem;border:2px solid #ffb22c;border-radius:999px;color:#fff;background:linear-gradient(135deg,#232f3e,#131921);font-weight:800;box-shadow:0 12px 28px -14px rgba(19,25,33,.85); }
.amazon-review-btn::before { display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;content:"a";border-radius:999px;color:#131921;background:#ffb22c;font-family:Arial,sans-serif;font-size:1rem;font-weight:900; }
.amazon-review-btn:hover { transform:translateY(-2px);border-color:#ffd36f;box-shadow:0 18px 32px -14px rgba(19,25,33,.9); }
.mobile-nav-link { display:block; padding:.8rem 1rem; border-radius:.8rem; }
.mobile-nav-link:hover { background:#e4f2e8; color:var(--forest); }
.nav-badge { display:inline-grid; place-items:center; min-width:1.25rem; height:1.25rem; padding:0 .3rem; border-radius:999px; background:#e9664b; color:#fff; font-size:.65rem; }
.ticket-status { display:inline-flex;align-items:center;padding:.25rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:#eef2f0;color:#466055; }
.ticket-waiting_on_support,.ticket-open { background:#fff1c7;color:#7a4b00; }
.ticket-waiting_on_retailer { background:#dbeafe;color:#1d4ed8; }
.ticket-resolved { background:#dcfce7;color:#166534; }
.ticket-closed { background:#e5e7eb;color:#4b5563; }
.ticket-urgent { display:inline-flex;padding:.25rem .55rem;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em; }
.ticket-stat { display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.25rem;border:1px solid rgba(18,60,45,.1);border-radius:1rem;background:#fff;box-shadow:0 16px 35px -28px rgba(18,60,45,.75); }
.ticket-stat span { color:#6b7280;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; }
.ticket-stat strong { color:var(--forest);font-family:Fraunces,Georgia,serif;font-size:2rem;line-height:1; }

.wholesale-card { border:1px solid rgba(18,60,45,.1); background:rgba(255,255,255,.95); box-shadow:0 22px 55px -38px rgba(18,60,45,.7); transition:transform .25s ease,box-shadow .25s ease; }
.wholesale-card:hover { transform:translateY(-5px); box-shadow:0 28px 60px -34px rgba(18,60,45,.8); }
.feedback-card { overflow:hidden;border:1px solid rgba(18,60,45,.1);border-radius:2rem;background:#fff;box-shadow:0 24px 58px -38px rgba(18,60,45,.75); }
.feedback-card:hover { transform:translateY(-5px);box-shadow:0 30px 66px -36px rgba(18,60,45,.85); }
.wholesale-headline { background:linear-gradient(110deg,#fff 4%,#fff 42%,#f5b942 72%,#b8df74 100%);-webkit-background-clip:text;background-clip:text;color:transparent; }
.hero-grid { background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:32px 32px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }

.overflow-x-auto::-webkit-scrollbar { height:6px; }
.overflow-x-auto::-webkit-scrollbar-track { background:#f1f5f9; border-radius:3px; }
.overflow-x-auto::-webkit-scrollbar-thumb { background:#b8c9be; border-radius:3px; }

.stripe-element-container { padding:12px 16px; border:1px solid #d1d5db; border-radius:12px; background:#fff; transition:border-color .15s ease,box-shadow .15s ease; }
.stripe-element-container.StripeElement--focus { border-color:#287a4b; box-shadow:0 0 0 3px rgba(40,122,75,.15); }
.stripe-element-container.StripeElement--invalid { border-color:#ef4444; }

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.6} }
.countdown-pulse { animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; } .reveal{opacity:1;transform:none} }
@media print { header,footer,nav,button,.no-print{display:none!important} body{background:#fff;color:#000}.shadow-sm,.shadow-lg{box-shadow:none!important} }