/* GRETHORIA - supplemental styles on top of Tailwind (CDN) */

:root {
    --color-primary: #0B2B21;
    --color-accent: #B88943;
    --color-canvas: #F8F6F1;
}

body { -webkit-font-smoothing: antialiased; }

/* Homepage photography and premium editorial finishing */
.hero-premium img { object-position: center 58%; }
.story-premium img { object-position: center 58%; }
.brand-lockup img { filter: sepia(1) saturate(.72) hue-rotate(357deg) brightness(.78); }
.product-quick-add { transform: translateY(102%); }
.product-card:hover .product-quick-add,
.product-card:focus-within .product-quick-add { transform: translateY(0); }

@media (hover: none) {
    .product-quick-add { display: none; }
}

@media (max-width: 767px) {
    .hero-premium { min-height: 540px; }
    .hero-premium img { object-position: 64% center; }
    .story-premium img { object-position: 65% center; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-premium *, .story-premium * { transition-duration: .01ms !important; }
}

/* Prevent horizontal overflow on mobile globally */
html, body { max-width: 100%; overflow-x: hidden; }

/* Hide horizontal scrollbar on category carousels */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Editorial prose for CMS content */
.prose-editorial h2 { font-family: "Cormorant Garamond", serif; font-size: 1.75rem; color: var(--color-primary); margin: 1.5rem 0 0.75rem; }
.prose-editorial p  { margin-bottom: 1rem; line-height: 1.75; color: #3a3a36; }
.prose-editorial ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.prose-editorial a  { color: var(--color-accent); text-decoration: underline; }

/* Smooth accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

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

/* Fixed aspect image wrapper to avoid CLS */
.ratio-45 { aspect-ratio: 4 / 5; }

/* Sticky mobile action bar safe-area */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }