/* ==========================================================================
   STRIVE JOUVERT — Tailwind-style Utilities + Legacy Theme (Production)
   Version: 1.1
   Compiled: 2025-10-28
   Environment: Production (Light Mode)
   Notes:
   - No build step required. This file implements only the utility classes
     used on your current /shop/index.php + your legacy admin CSS.
   - Montserrat (400/700/900) is loaded via Google Fonts below.
   ========================================================================== */

/* =========================
   Google Font (Montserrat)
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

/* =========================
   Brand Design Tokens
   ========================= */
:root{
  --brand-orange:#FF6A00;
  --brand-orange-hover:#ff7e1a;
  --brand-olive:#5A6B2F;
  --brand-ink:#0B0B0B;
  --brand-fog:#F6F7F8;

  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-600:#4b5563; --gray-700:#374151;
  --white:#ffffff; --black:#000000;

  --shadow-card:0 8px 22px rgba(0,0,0,0.08);
  --shadow-glow:0 0 30px rgba(255,106,0,0.25);
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  color:var(--brand-ink);
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--brand-orange) 12%, transparent),
      var(--white) 30%,
      color-mix(in srgb, var(--brand-olive) 10%, transparent)
    );
  font-family:'Montserrat', Arial, sans-serif;
}
body.has-global-messages {
  padding-top: 90px;
}


/* ===========================================================
   “Tailwind-like” utility classes used by /shop/index.php
   (Only what you use today—keeps file small, no build needed)
   =========================================================== */

/* Layout & Container */
.max-w-7xl{max-width:80rem} /* 1280px */
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.h-24{height:6rem}
.h-full{height:100%}
.w-auto{width:auto}
.w-full{width:100%}
.overflow-hidden{overflow:hidden}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.sticky{position:sticky}
.top-0{top:0}
.z-40{z-index:40}
.text-center{text-align:center}

/* Flexbox */
.flex{display:flex}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

/* Grid */
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Responsive (small ≥640px, large ≥1024px) */
@media (min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:h-28{height:7rem}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:gap-8{gap:2rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-\[80px\]{font-size:80px}
  .sm\:text-\[44px\]{font-size:44px}
  .sm\:h-24{height:6rem}
}
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:text-\[96px\]{font-size:96px}
  .lg\:text-\[54px\]{font-size:54px}
}

/* Spacing helpers */
.p-5{padding:1.25rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pb-20{padding-bottom:5rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-5{margin-top:1.25rem}
.mt-8{margin-top:2rem}
.mb-1{margin-bottom:.25rem}
.mb-8{margin-bottom:2rem}

/* Typography */
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-semibold{font-weight:600}
.font-extrabold{font-weight:800}
.italic{font-style:italic}

/* Custom sizes used in hero */
.text-\[64px\]{font-size:64px}
.text-\[36px\]{font-size:36px}

/* Color utilities */
.text-white{color:var(--white)}
.text-gray-700{color:var(--gray-700)}
.text-brand-ink{color:var(--brand-ink)}
.bg-white{background-color:var(--white)}
.bg-white\/80{background-color:rgba(255,255,255,0.8)}
.bg-brand-orange{background-color:var(--brand-orange)}
.bg-gray-200\/90{background-color:rgba(229,231,235,0.9)}
.border-b{border-bottom-width:1px}
.border-white\/20{border-color:rgba(255,255,255,0.2)}

/* Rounding & Shadows */
.rounded-md{border-radius:.375rem}
.rounded-xl{border-radius:.75rem}
.rounded-full{border-radius:9999px}
.rounded-3xl{border-radius:1.5rem}

/* Effects */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.06)}
.shadow-card{box-shadow:var(--shadow-card)}
.shadow-glow{box-shadow:var(--shadow-glow)}
.transition{transition:all .2s ease}
.duration-500{transition-duration:.5s}
.hover\:shadow-md:hover{box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.hover\:-translate-y-1:hover{transform:translateY(-0.25rem)}
.hover\:scale-\[1\.05\]:hover{transform:scale(1.05)}
.hover\:bg-\[\#ff7e1a\]:hover{background-color:var(--brand-orange-hover)}
.backdrop-blur{backdrop-filter:blur(8px)}
.object-cover{object-fit:cover}

/* Aspect Ratio (4/5) */
.aspect-\[4\/5\]{position:relative}
.aspect-\[4\/5\]::before{content:"";display:block;padding-bottom:125%}
.aspect-\[4\/5\]>*{position:absolute;inset:0}

/* Heights */
.h-20{height:5rem}

/* Misc */
.inline-block{display:inline-block}
.group{position:relative}
.group:hover .group-hover\:scale-\[1\.05\]{transform:scale(1.05)}

/* =========================
   Header / Hero wrappers
   ========================= */
header.sticky{
  /* already covered via .sticky + .top-0 + .z-40 + bg + border + shadow */
}

/* =========================
   Badges
   ========================= */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:700
}

/* =========================
   Buttons (utility + brand)
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:.75rem;padding:.625rem 1rem;font-weight:700;
  text-decoration:none;cursor:pointer;transition:all .2s ease
}
.btn--primary{background:var(--brand-orange);color:#fff}
.btn--primary:hover{background:var(--brand-orange-hover)}

/* =========================
   Card
   ========================= */
.card{
  background:#fff;border-radius:1.5rem;box-shadow:var(--shadow-card);
  overflow:hidden;transition:transform .2s ease, box-shadow .2s ease
}
.card:hover{transform:translateY(-.25rem);box-shadow:var(--shadow-glow)}

/* =========================
   Legacy Admin / Forms / Tables
   (from your existing CSS)
   ========================= */
.container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
  color: var(--brand-orange);
  text-align: center;
}
.button-primary {
  background-color: var(--brand-orange);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin: 5px 2px;
}
.button-primary:hover { background-color: #E85D00; }
.button-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin: 5px 2px;
}
.button-secondary:hover { background-color: #5a6268; }

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.styled-table th,
.styled-table td {
  padding: 12px 15px;
  border: 1px solid #ccc;
  text-align: left;
}
.styled-table th {
  background-color: #f58220;
  color: white;
}
.low-stock { color: red; font-weight: bold; }

label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
input[type="submit"], button {
  background-color: var(--brand-orange);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover {
  background-color: #E85D00;
}

.message { margin-top: 10px; font-weight: bold; }
.success { color: green; }
.error { color: red; }

.flash-message {
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.flash-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.flash-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.global-flash-bar {
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.global-flash-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.global-flash-bar__title {
    font-weight: 700;
}

/* Cards container */
.global-flash-cards {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.global-flash-cards__grid {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .global-flash-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.flash-card {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
    font-size: 0.95rem;
}

/* Type-based coloring – adjust to your brand tokens */
.flash-type-info {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

.flash-type-notice {
    background-color: #ecfdf3;
    border-color: #4ade80;
    color: #065f46;
}

.flash-type-promo {
    background-color: #fff7ed; /* soft orange */
    border-color: #fb923c;
    color: #9a3412;
}

.flash-type-event {
    background-color: #f5f3ff; /* purple-ish */
    border-color: #a855f7;
    color: #581c87;
}

.flash-type-alert {
    background-color: #fefce8;
    border-color: #facc15;
    color: #854d0e;
}

.flash-type-warning {
    background-color: #fef2c7;
    border-color: #f97316;
    color: #7c2d12;
}

.flash-type-urgent {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.flash-type-maintenance {
    background-color: #e5e7eb;
    border-color: #9ca3af;
    color: #111827;
}

.flash-type-soldout {
    background-color: #111827;
    border-color: #4b5563;
    color: #f9fafb;
}

/* =========================================
   MOBILE READING COMFORT — BODY COPY ONLY
   ========================================= */
@media (max-width: 768px) {

  /* Long-form reading text only */
  .se-origins-text p,
  .se-tribute-text p,
  .se-event-copy {
    font-size: 1.15rem;
    line-height: 1.75;
    text-align: left;
  }

}

/* =========================================
   ANDROID CHROME TEXT SIZE NORMALIZATION
   ========================================= */
@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}