/* =========================================
   Village Flower — Cannabis Microbusiness
   Scotia, New York State
   License OCM-MICR-24-000001
   Official Palette: Navy + Green + Lavender
   ========================================= */

:root {
  --vf-navy:        #223256;
  --vf-green:       #41A369;
  --vf-lavender:    #BBB6FF;
  --vf-base:        #F6F6F6;
  --vf-white:       #FFFFFF;
  --vf-gray:        #6b7570;
  --vf-border:      #E0E0E0;
  --vf-dark-gray:   #333333;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--vf-base);
  color: var(--vf-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Age Gate ── */
.age-gate-overlay { position: fixed; inset: 0; background: rgba(34,50,86,0.95); z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem }
.age-gate-card { background:var(--vf-white); border-radius:8px; padding:3rem 2.5rem; max-width:460px; width:100%; text-align:center; border:2px solid var(--vf-green) }
.age-gate-logo{ width:160px; margin-bottom:1.5rem }
.age-gate-title{ font-family:'Playfair Display', serif; font-size:1.8rem; font-weight:700; color:var(--vf-navy); margin-bottom:0.5rem }
.age-gate-sub{ color:var(--vf-gray); font-size:0.92rem; line-height:1.6 }
.age-gate-legal{ font-size:0.72rem; color:var(--vf-gray); margin:0 }

/* ── Compliance banner ── */
.compliance-banner{ background:var(--vf-navy); color:rgba(255,255,255,0.9); font-size:0.72rem; letter-spacing:0.07em; padding:6px 0; text-align:center }

/* ── Navbar */
.vf-navbar{ background:var(--vf-white); border-bottom:2px solid var(--vf-border); padding:0.75rem 0 }
.nav-logo{ height:54px }
.nav-user{ font-size:0.82rem; color:var(--vf-gray) }

/* ── Buttons */
.btn-vf-primary{ background:var(--vf-green); color:#fff; border:2px solid var(--vf-green); border-radius:3px; font-size:0.84rem; font-weight:500; letter-spacing:0.04em; padding:8px 20px; transition:all 0.2s }
.btn-vf-primary:hover{ background:#2d8c57; border-color:#2d8c57 }
.btn-vf-outline{ background:transparent; color:var(--vf-green); border:2px solid var(--vf-green); border-radius:3px; padding:6px 16px }
.btn-vf-outline:hover{ background:var(--vf-green); color:#fff }

.cart-nav-btn{ display:flex; align-items:center; gap:6px; background:var(--vf-green); color:#fff !important; padding:6px 14px 6px 10px; border-radius:3px; font-size:0.82rem; font-weight:500 }
.cart-nav-btn:hover{ background:#2d8c57 }
.cart-nav-icon{ font-size:1rem }
.cart-nav-btn .cart-badge{ background:var(--vf-lavender); color:var(--vf-navy); font-size:0.68rem; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px }

/* ── Hero */
.vf-hero{ background:linear-gradient(135deg,#f9f8ff 0%,var(--vf-base) 100%); padding:5rem 0 4.5rem; text-align:center; border-bottom:2px solid var(--vf-border) }
.hero-eyebrow{ text-transform:uppercase; letter-spacing:0.2em; font-size:0.72rem; color:var(--vf-green); font-weight:500; margin-bottom:1rem }
.vf-hero-title{ font-family:'Playfair Display', serif; font-size:clamp(2.4rem,5vw,4rem); font-weight:700; color:var(--vf-navy); line-height:1.1; margin-bottom:1rem }
.vf-hero-sub{ font-size:0.98rem; color:var(--vf-gray); line-height:1.7; max-width:480px; margin:0 auto }

/* ── Section headers */
.products-section{ padding:3.5rem 0 2rem }
.coming-soon-section{ padding:2rem 0 3rem; background:rgba(187,182,255,0.08); border-top:2px solid var(--vf-border); border-bottom:2px solid var(--vf-border) }
.section-header{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.75rem; padding-bottom:0.75rem; border-bottom:2px solid var(--vf-border) }
.section-title{ font-family:'Playfair Display', serif; font-size:1.7rem; font-weight:700; color:var(--vf-navy); margin:0 }
.section-count{ font-size:0.78rem; color:var(--vf-gray); letter-spacing:0.05em }
.cs-tag{ background:var(--vf-lavender); color:var(--vf-navy); padding:2px 10px; border-radius:20px; font-size:0.72rem; font-weight:500 }
.cs-intro{ color:var(--vf-gray); font-size:0.9rem; margin-bottom:1.5rem }

/* ── Product cards */
.product-card{ background:var(--vf-white); border:2px solid var(--vf-border); border-radius:6px; transition:box-shadow 0.25s, transform 0.25s; overflow:hidden }
.product-card:hover{ box-shadow:0 8px 28px rgba(65,163,105,0.15); transform:translateY(-3px) }
.product-emoji-wrap{ background:rgba(65,163,105,0.08); height:160px; display:flex; align-items:center; justify-content:center; position:relative }
.product-image-wrap{ background:rgba(65,163,105,0.08); height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.product-image{ width:100%; height:100%; object-fit:cover; object-position:center }
.product-image-placeholder{ font-size:4.5rem; line-height:1 }
.product-tac{ position:absolute; top:10px; left:10px; background:var(--vf-lavender); color:var(--vf-navy); font-size:0.62rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px }
.cs-image-wrap{ background:rgba(187,182,255,0.12) }
.cs-card{ border-color:var(--vf-lavender); opacity:0.92 }
.product-emoji{ font-size:3.5rem; line-height:1 }
.product-badge{ position:absolute; top:10px; right:10px; font-size:0.62rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; border-radius:2px; color:#fff }
.badge-new{ background:var(--vf-green) }
.badge-sale{ background:var(--vf-lavender); color:var(--vf-navy) }
.badge-bestseller{ background:var(--vf-navy) }
.cs-pill{ position:absolute; top:10px; right:10px; background:var(--vf-lavender); color:var(--vf-navy); font-size:0.62rem; font-weight:600; letter-spacing:0.1em; padding:3px 9px; border-radius:20px }
.product-category{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--vf-green); font-weight:500; margin:0 0 3px }
.product-name{ font-family:'Playfair Display', serif; font-size:1.1rem; font-weight:700; color:var(--vf-navy); margin:0; line-height:1.3 }
.product-desc{ font-size:0.8rem; color:var(--vf-gray); line-height:1.4; margin:0.5rem 0 0 }
.product-price{ font-size:1rem; font-weight:500; color:var(--vf-green) }
.cs-desc{ font-size:0.82rem; color:var(--vf-gray); line-height:1.5; margin:0.5rem 0 0 }
.btn-add{ background:var(--vf-green); color:#fff; border:none; border-radius:3px; font-size:0.78rem; letter-spacing:0.05em; padding:6px 14px; transition:background 0.2s }
.btn-add:hover{ background:#2d8c57 }
.btn-add-ghost{ background:transparent; color:var(--vf-gray); border:1px solid var(--vf-border); border-radius:3px; font-size:0.78rem; padding:6px 14px; transition:all 0.2s }

/* ── Cart */
.cart-header{ display:flex; justify-content:space-between; border-bottom:2px solid var(--vf-border); padding-bottom:1rem; margin-bottom:2.5rem }
.cart-title{ font-family:'Playfair Display', serif; font-size:2.2rem; font-weight:700; color:var(--vf-navy); margin:0 }
.cart-back{ font-size:0.82rem; color:var(--vf-gray); text-decoration:none }
.cart-back:hover{ color:var(--vf-green) }
.cart-row{ display:flex; align-items:center; gap:1.25rem; padding:1.25rem 0; border-bottom:1px solid var(--vf-border) }
.cart-item-emoji{ font-size:2.2rem }
.cart-item-media{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; background:rgba(65,163,105,0.04); border-radius:6px; overflow:hidden }
.cart-item-media img{ width:72px; height:72px; object-fit:cover }
.cart-item-info{ flex:1; min-width:0 }
.cart-item-category{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--vf-green); margin:0 0 2px; font-weight:500 }
.cart-item-name{ font-family:'Playfair Display', serif; font-size:1.05rem; font-weight:700; margin:0 0 2px; color:var(--vf-navy) }
.cart-item-unit{ font-size:0.8rem; color:var(--vf-gray); margin:0 }
.cart-item-controls{ display:flex; align-items:center; gap:1.25rem; flex-shrink:0 }
.qty-control{ display:flex; align-items:center; border:2px solid var(--vf-border); border-radius:3px; overflow:hidden }
.qty-btn{ background:none; border:none; width:32px; height:32px; font-size:1.1rem; color:var(--vf-green); cursor:pointer; transition:background 0.15s; display:flex; align-items:center; justify-content:center }
.qty-btn:hover{ background:rgba(65,163,105,0.1) }
.qty-input{ width:44px; height:32px; border:none; border-left:2px solid var(--vf-border); border-right:2px solid var(--vf-border); text-align:center; font-size:0.88rem; background:#fff; color:var(--vf-navy); appearance:textfield; -moz-appearance:textfield }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none }
.qty-input:focus{ outline:none }
.cart-item-line{ font-weight:500; font-size:0.95rem; color:var(--vf-green); width:70px; text-align:right; margin:0 }
.cart-remove{ background:none; border:none; color:var(--vf-gray); font-size:0.8rem; cursor:pointer; padding:4px; border-radius:2px; transition:color 0.2s, background 0.2s }
.cart-remove:hover{ color:var(--vf-lavender); background:rgba(187,182,255,0.15) }

/* Order summary */
.order-summary{ background:var(--vf-white); border:2px solid var(--vf-border); border-radius:6px; padding:1.75rem; position:sticky; top:1.5rem }
.summary-title{ font-family:'Playfair Display', serif; font-size:1.4rem; font-weight:700; color:var(--vf-navy); margin-bottom:1.25rem }
.summary-row{ display:flex; justify-content:space-between; font-size:0.88rem; margin-bottom:0.75rem }
.summary-divider{ border-top:2px solid var(--vf-border); margin:1rem 0 }
.summary-total{ font-weight:500; font-size:1rem; color:var(--vf-green) }
.btn-checkout{ background:var(--vf-green); border:none; border-radius:3px; padding:0.7rem; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:500; color:#fff; transition:background 0.2s }
.btn-checkout:hover{ background:#2d8c57 }
.summary-note{ text-align:center; font-size:0.75rem; color:var(--vf-gray); margin-top:0.75rem }

/* Empty cart */
.cart-empty{ padding:5rem 0 }
.empty-icon{ font-size:4rem; margin-bottom:1rem }
.empty-title{ font-family:'Playfair Display', serif; font-size:2rem; font-weight:700; color:var(--vf-navy) }
.empty-sub{ color:var(--vf-gray); font-size:0.95rem }

/* Checkout overlay */
#checkout-overlay{ position:fixed; inset:0; background:rgba(34,50,86,0.55); z-index:9999; display:flex; align-items:center; justify-content:center }
.checkout-spinner-wrap{ background:var(--vf-white); border-radius:6px; padding:2.5rem 3rem; text-align:center; border:2px solid var(--vf-border) }
.checkout-spinner{ width:36px; height:36px; border:3px solid var(--vf-border); border-top-color:var(--vf-green); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 1rem }
@keyframes spin{ to{ transform:rotate(360deg) } }
.checkout-spinner-label{ font-size:0.88rem; color:var(--vf-gray); margin:0 }

/* Confirmed page */
.confirmed-section{ padding:4.5rem 0 }
.confirmed-icon{ font-size:3rem; color:var(--vf-green); margin-bottom:1.5rem; animation:pulse 2s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:0.6; transform:scale(1.15) } }
.confirmed-title{ font-family:'Playfair Display', serif; font-size:3rem; font-weight:700; color:var(--vf-navy) }
.confirmed-sub{ color:var(--vf-gray); font-size:1rem; line-height:1.7 }

/* Strain Card Backgrounds */
.strain-card-sativa{ background:linear-gradient(135deg,#FFF9E6 0%,#FFFBF0 100%); border-color:#FFE680 }
.strain-card-sativa::before{ content:''; position:absolute; top:0; right:0; width:100px; height:100px; background:linear-gradient(135deg, rgba(255,230,0,0.1) 0%, transparent 100%); border-radius:0 8px 0 0; pointer-events:none }
.strain-card-indica{ background:linear-gradient(135deg,#F3E6FF 0%,#F9F0FF 100%); border-color:#D4A5E8 }
.strain-card-indica::before{ content:''; position:absolute; top:0; right:0; width:100px; height:100px; background:linear-gradient(135deg, rgba(187,182,255,0.12) 0%, transparent 100%); border-radius:0 8px 0 0; pointer-events:none }

/* Strain / Terpene layout helpers */
.strains-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem }
.strain-card{ background:var(--vf-white); border:2px solid var(--vf-border); border-radius:6px; padding:1rem; position:relative }
.strain-name{ font-family:'Playfair Display', serif; font-weight:700; margin:0 }
.strain-meta{ font-size:0.82rem; color:var(--vf-gray) }
.wheel-canvas{ width:100%; height:auto; max-width:380px }
.wheel-legend{ margin-top:0.75rem; display:flex; gap:8px; flex-wrap:wrap }
.wheel-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--vf-white); border:1px solid var(--vf-border); padding:6px 8px; border-radius:6px }

/* Footer */
.site-footer{ margin-top:auto; background:linear-gradient(180deg,#f8f7ff 0%, var(--vf-base) 100%); border-top:2px solid var(--vf-border); padding:2.5rem 0 }
.footer-inner{ display:flex; gap:2rem; align-items:flex-start; justify-content:space-between; max-width:1100px; margin:0 auto; padding:0 1rem }
.footer-col{ flex:1 }
.footer-brand{ display:flex; gap:10px; align-items:center }
.footer-brand img{ height:44px }
.footer-links{ display:flex; gap:12px; flex-wrap:wrap }
.footer-legal{ font-size:0.78rem; color:var(--vf-gray); margin-top:1rem }

/* Forms */
label{ font-weight:600 }
.muted{ color:var(--vf-gray) }

/* Responsive */
@media (max-width:768px){ .vf-hero{ padding:3rem 0 } .product-detail{ flex-direction:column } .footer-inner{ flex-direction:column; align-items:center } }

/* Accessibility */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

.strain-card-hybrid {
  background: linear-gradient(135deg, #FFF9E6 0%, #F3E6FF 50%, #FFFBF0 100%);
  border-color: #E6D4A5;
}

.strain-card-hybrid::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(255, 230, 0, 0.08) 0%, rgba(187, 182, 255, 0.1) 100%);
  border-radius: 0 8px 0 0;
  pointer-events: none;
}

/* Card Logo Background */
.card-logo-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0.08;
}

.card-logo {
  width: 120px;
  height: 120px;
  margin-right: -20px;
  margin-top: -20px;
}

/* Wheel and Cannabinoids Layout */
.wheel-and-cannabinoids {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.terpene-wheel-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  position: relative;
}

.terpene-wheel {
  width: 100%;
  height: auto;
  max-width: 280px;
  filter: drop-shadow(0 4px 12px rgba(34, 50, 86, 0.08));
}

/* Cannabinoid Info */
.cannabinoid-info {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--vf-border);
  border-radius: 6px;
}

.cannabinoid-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.cannabinoid-item.minor {
  font-size: 0.75rem;
  color: var(--vf-gray);
  border-top: 1px solid var(--vf-border);
  padding-top: 0.75rem;
}

.cannabinoid-item:first-child {
  border-bottom: 2px solid var(--vf-border);
  padding-bottom: 0.75rem;
}

.cannabinoid-label {
  font-weight: 600;
  color: var(--vf-navy);
  font-size: 0.8rem;
}

.cannabinoid-value {
  font-weight: 700;
  color: var(--vf-green);
  font-family: 'Monaco', monospace;
  font-size: 0.85rem;
}

.strains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.strain-card {
  background: var(--vf-white);
  border: 2px solid var(--vf-border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(34, 50, 86, 0.06);
  position: relative;
  overflow: hidden;
}

.strain-card:hover {
  box-shadow: 0 16px 48px rgba(34, 50, 86, 0.15);
  transform: translateY(-6px);
  border-color: var(--vf-lavender);
}

.strain-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--vf-border);
  padding-bottom: 1rem;
}

.strain-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--vf-navy);
  margin: 0 0 6px;
}

.strain-type {
  font-size: 0.78rem;
  color: var(--vf-green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  font-weight: 600;
}

.strain-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
  position: relative;
}

/* Terpene Wheel */
.terpene-wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  position: relative;
}

.terpene-wheel {
  width: 100%;
  height: auto;
  max-width: 340px;
  filter: drop-shadow(0 4px 12px rgba(34, 50, 86, 0.08));
}

.arc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px !important;
  font-weight: 600 !important;
  user-select: none;
}

.center-label-title,
.center-label-sub {
  font-family: 'Playfair Display', serif;
  user-select: none;
}

/* Hover Tooltip */
.wheel-tooltip {
  position: fixed;
  background: var(--vf-navy);
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(34, 50, 86, 0.35);
  min-width: 240px;
  max-width: 320px;
  transform: translate(-50%, -100%);
  line-height: 1.5;
}

.wheel-tooltip::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--vf-navy);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tooltip-terpene {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--vf-lavender);
}

.tooltip-percent {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #fff;
}

.tooltip-effects {
  font-size: 0.78rem;
  color: #E8E8E8;
  line-height: 1.6;
}

.tooltip-effects strong {
  color: var(--vf-lavender);
  display: block;
  margin-top: 4px;
  margin-bottom: 2px;
}

/* Terpene Table */
.terpene-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--vf-border);
  border-radius: 6px;
  padding: 0;
}

.terpene-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.terpene-table thead {
  background: linear-gradient(135deg, #f0f2f8 0%, #f5f3f9 100%);
  border-bottom: 2px solid var(--vf-border);
}

.terpene-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--vf-navy);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.terpene-table tbody tr {
  border-bottom: 1px solid var(--vf-border);
  transition: background-color 0.2s;
}

.terpene-table tbody tr:hover {
  background-color: #f9f8ff;
}

.terpene-table tbody tr:last-child {
  border-bottom: none;
}

.terpene-table td {
  padding: 10px 12px;
  color: var(--vf-navy);
}

.terpene-col {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(34, 50, 86, 0.1);
}

.percent-col {
  font-weight: 600;
  color: var(--vf-green);
  text-align: right;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.82rem;
}

.effects-col {
  color: var(--vf-gray);
  font-size: 0.8rem;
  text-transform: capitalize;
}

/* Summary */
.strain-summary {
  background: linear-gradient(135deg, rgba(65, 163, 105, 0.05) 0%, rgba(187, 182, 255, 0.05) 100%);
  border: 2px solid var(--vf-border);
  border-radius: 6px;
  padding: 1.25rem;
}

.summary-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vf-navy);
  margin: 0 0 0.75rem;
}

.summary-text {
  font-size: 0.82rem;
  color: var(--vf-gray);
  line-height: 1.6;
  margin: 0;
}

.summary-text strong {
  color: var(--vf-green);
  font-weight: 600;
}

/* COA Note */
.coa-note {
  background: rgba(65, 163, 105, 0.06);
  border: 2px solid var(--vf-border);
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--vf-gray);
  line-height: 1.7;
}

.coa-note p { 
  margin: 0;
  font-weight: 500;
}

/* Login */
.login-section {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 4rem 0;
}
.login-card {
  background: var(--vf-white);
  border: 2px solid var(--vf-border);
  border-radius: 6px;
  padding: 2.5rem;
  max-width: 420px;
  width: 100%;
}
.login-logo { width: 140px; margin-bottom: 1.25rem; }
.login-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--vf-navy); margin-bottom: 0.25rem; }
.login-sub { color: var(--vf-gray); font-size: 0.88rem; margin-bottom: 0; }
.login-input {
  border: 2px solid var(--vf-border);
  border-radius: 3px;
  background: var(--vf-base);
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
  color: var(--vf-navy);
  transition: border-color 0.2s;
}
.login-input:focus { border-color: var(--vf-green); background: var(--vf-white); box-shadow: none; outline: none; }
.btn-login {
  background: var(--vf-green);
  border: none; border-radius: 3px;
  padding: 0.7rem;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background 0.2s;
}
.btn-login:hover { background: #2d8c57; }
.login-hint { font-size: 0.8rem; color: var(--vf-gray); }
.login-hint code { background: rgba(187, 182, 255, 0.3); padding: 1px 5px; border-radius: 2px; color: var(--vf-navy); font-size: 0.78rem; }
.login-age-notice { font-size: 0.75rem; color: var(--vf-green); margin-top: 1rem; font-weight: 500; }
.form-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-gray); margin-bottom: 0.35rem; }

/* Footer */
.vf-footer {
  background: linear-gradient(180deg, rgba(34,50,86,1) 0%, rgba(65,163,105,1) 100%);
  color: rgba(255,255,255,0.95);
  padding: 2rem 0 1rem;
  margin-top: auto;
}
.footer-logo { width: 110px; opacity: 0.9; filter: brightness(0) invert(1); }
.footer-license { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); margin: 0; }
.footer-license-num { font-size: 0.85rem; font-weight: 500; color: #fff; margin: 2px 0 4px; }
.footer-addr { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin: 0; }
.footer-compliance { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin: 0 0 3px; line-height: 1.5; }
.footer-divider { border-top: 1px solid rgba(255,255,255,0.15); margin: 2rem 0 1rem; }
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin: 0 0 4px; }
.footer-copy.small { font-size: 0.68rem; }

/* Alert overrides */
.alert { border-radius: 3px; font-size: 0.88rem; }

body:has(.view-bag-bar[style*="block"]) .vf-footer { padding-bottom: 4.5rem; }

.vf-card{

    width:5in;
    min-height:7in;

    background:white;

    padding:32px;

    color:#182957;
}

.vf-logo{
    width:80px;
}

.vf-card h1{

    font-family:
      "Playfair Display",
      serif;

    font-size:42px;

    margin:12px 0;
}

.subtitle{

    color:#2BA55F;

    text-transform:uppercase;

    letter-spacing:2px;
}

.badges{

    margin-top:10px;

    font-size:14px;
}

.vf-main{

    display:flex;

    gap:20px;

    margin-top:24px;
}

.vf-wheel{
    flex:2;
}

.vf-cannabinoids{
    flex:1;
}

.effect-row{

    display:flex;

    justify-content:space-between;

    margin:8px 0;
}

.dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#DDD;

    display:inline-block;
}

.dot.active{
    background:#2BA55F;
}

.qr{

    width:90px;

    float:right;

    margin-top:20px;
}