/* PERFECT MAN — storefront base styles (complements Tailwind CDN) */

:root {
  --gold: #C2A458;
  --gold-dark: #A88C45;
  --gold-light: #E7D9AE;
  --ink: #0C0A09;
}

/* clip (not hidden) so the sticky header keeps working; this is what stops the
   off-canvas drawers, which are position:fixed, from making pages scroll sideways */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }

/* Tap targets + scrollbars on mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Gold accent utilities */
.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.border-gold { border-color: var(--gold); }
.ring-gold:focus { --tw-ring-color: rgba(194,164,88,.45); }

/* Underline animation for nav links */
.navlink { position: relative; }
.navlink::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold); transition: width .25s ease;
}
.navlink:hover::after, .navlink.is-active::after { width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; font-weight: 600; transition: all .2s ease; cursor: pointer; }
.btn-gold { background: var(--gold); color: #0C0A09; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #292524; }
.btn-outline { border: 1px solid #d6d3d1; color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Product card hover */
.card-media { position: relative; overflow: hidden; background: #f5f5f4; }
.card-media img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.group:hover .card-media img { transform: scale(1.05); }
.card-quick { opacity: 0; transform: translateY(8px); transition: all .25s ease; }
.group:hover .card-quick { opacity: 1; transform: none; }
@media (hover: none) { .card-quick { display: none; } }

/* Swatches */
.swatch { width: 28px; height: 28px; border-radius: 9999px; border: 2px solid #e7e5e4;
  cursor: pointer; position: relative; transition: border-color .15s ease; flex: none; }
.swatch.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }

/* Size pills */
.pill { border: 1px solid #d6d3d1; border-radius: .5rem; padding: .55rem 1rem;
  font-size: .875rem; font-weight: 600; cursor: pointer; background: #fff; transition: all .15s ease; }
.pill:hover { border-color: var(--ink); }
.pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill.is-out { opacity: .35; pointer-events: none; position: relative; }
.pill.is-out::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 47%, #a8a29e 47%, #a8a29e 53%, transparent 53%); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem;
  border-radius: 9999px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.badge-sale { background: #7F1D1D; color: #fff; }
.badge-new { background: var(--ink); color: #fff; }
.badge-gold { background: var(--gold-light); color: #4A3A12; }
.badge-out { background: #e7e5e4; color: #57534e; }

/* Forms */
.input { width: 100%; border: 1px solid #d6d3d1; border-radius: .5rem; padding: .65rem .85rem;
  font-size: .95rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(194,164,88,.18); }
.label { display: block; font-size: .8rem; font-weight: 600; color: #44403c; margin-bottom: .35rem; }
.select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; }
/* Anything under 16px makes iOS Safari zoom the whole page when the field is focused. */
@media (max-width: 640px) { .input, .select { font-size: 1rem; } }

/* Drawers + overlays */
.drawer { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.drawer-left { transform: translateX(-100%); }
/* The search sheet is pinned to the top edge, so it slides down rather than in from the side. */
.drawer-top { transform: translateY(-100%); }
.drawer.is-open, .drawer-left.is-open, .drawer-top.is-open { transform: none; }
.overlay { position: fixed; inset: 0; background: rgba(12,10,9,.5); opacity: 0;
  pointer-events: none; transition: opacity .25s ease; z-index: 60; }
.overlay.is-open { opacity: 1; pointer-events: auto; }

/* Toast */
#pm-toasts { position: fixed; z-index: 90; left: 0; right: 0; bottom: 84px;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
@media (min-width: 768px) { #pm-toasts { bottom: 24px; right: 24px; left: auto; align-items: flex-end; } }
.toast { pointer-events: auto; background: var(--ink); color: #fff; border-radius: .6rem;
  padding: .7rem 1rem; font-size: .875rem; display: flex; gap: .6rem; align-items: center;
  box-shadow: 0 12px 32px rgba(12,10,9,.24); transform: translateY(12px); opacity: 0;
  transition: all .25s ease; max-width: 92vw; }
.toast.in { transform: none; opacity: 1; }
.toast-success { border-left: 3px solid var(--gold); }
.toast-error { border-left: 3px solid #ef4444; }

/* Skeleton shimmer */
.shimmer { background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 50%, #f5f5f4 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Hero slider */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slide.is-active { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-dots button { width: 22px; height: 3px; background: rgba(255,255,255,.4); transition: all .2s ease; }
.slide-dots button.is-active { background: #fff; width: 34px; }

/* Horizontal snap scrollers (mobile carousels) */
.snap-x-mobile { display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 1rem; }
.snap-x-mobile > * { scroll-snap-align: start; }
@media (min-width: 640px) {
  .snap-x-mobile { grid-auto-columns: 42%; }
}
@media (min-width: 1024px) {
  .snap-x-mobile { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 0; gap: 1.5rem; }
}

/* Star rating */
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars svg { width: 14px; height: 14px; }
.stars .off { color: #d6d3d1; }

/* Tabs (JS toggles .tab-active) */
.tab-active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }

/* Accordion — direct child only, so a nested panel stays closed with its parent open.
   app.js measures each panel and releases the cap once open; these heights are the no-JS floor. */
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-item.is-open > .acc-panel { max-height: 900px; }
.drawer .acc-item.is-open > .acc-panel { max-height: 2500px; }
.acc-item.is-open > .acc-head .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform .25s ease; }

/* Image zoom on product page */
.zoom-wrap { position: relative; overflow: hidden; }
.zoom-wrap img { transition: transform .3s ease; }
.zoom-wrap:hover img { transform: scale(1.35); }

/* Tables (admin) */
.tbl { width: 100%; font-size: .875rem; }
.tbl thead th { text-align: left; padding: .7rem .9rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: #78716c; background: #f5f5f4; white-space: nowrap; }
.tbl tbody td { padding: .8rem .9rem; border-bottom: 1px solid #e7e5e4; vertical-align: middle; }
.tbl tbody tr:hover { background: #fafaf9; }

/* Sticky mobile CTA bar offset for bottom nav */
@media (max-width: 767px) { .bottom-padded { padding-bottom: 76px; } }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Print (invoice) */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}

/* Marquee (announcement) */
.marquee { display: flex; gap: 3rem; animation: marquee 24s linear infinite; white-space: nowrap; width: max-content; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Countdown */
.count-box { min-width: 54px; text-align: center; background: var(--ink); color: #fff;
  border-radius: .4rem; padding: .4rem .5rem; }
.count-box span { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.count-box small { font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

/* Order tracking timeline */
.tl-dot { width: 34px; height: 34px; border-radius: 9999px; display: grid; place-items: center; flex: none; font-size: 14px; }
.tl-done { background: var(--ink); color: #fff; }
.tl-now  { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 5px rgba(194,164,88,.25); }
.tl-todo { background: #e7e5e4; color: #a8a29e; }
.tl-bar-done { background: var(--ink); }
.tl-bar-todo { background: #e7e5e4; }