/* ============================================================================
iheartparty Rentals — STOREFRONT THEME
Name: "Vintage Cream" (default)
File: static/shop/theme.css
HOW TO SWITCH THEMES (developer)
--------------------------------
Open inventory/templates/shop/base.html and change ONE line:
to point at another stylesheet in this folder, e.g.:
Every visual decision lives in the CSS custom properties (variables) in
:root below — palette, fonts, and a few component-level knobs. The rest of
the stylesheet only consumes those variables, so a new theme usually means
copying this file and editing the :root block (and, if needed, any of the
component rules underneath).
NOTE: the Tailwind config in base.html maps its colour names (cream, sand,
ink, muted, terra, terradark, gold) to these same variables, so utility
classes like `bg-terra` or `text-muted` automatically follow the theme.
The shared availability calendar (static/shop/calendar.js) also reads
--ihp-terra / --ihp-ink / --ihp-sand / --ihp-cream / --ihp-gold.
========================================================================== */
:root {
/* ---- Palette -------------------------------------------------------- */
--ihp-cream: #FAF6F0; /* page background */
--ihp-sand: #F1E9DE; /* subtle borders, dividers, input fills */
--ihp-sand-deep: #D9CDBE; /* stronger borders (chips, outlines) */
--ihp-ink: #26221E; /* main text */
--ihp-muted: #7A7168; /* secondary text */
--ihp-terra: #A15C48; /* PRIMARY ACCENT — buttons, links, badges */
--ihp-terradark: #854A39; /* accent hover state */
--ihp-gold: #C8A24B; /* secondary accent (hover underlines etc.) */
--ihp-panel: #FFFFFF; /* cards, dropdown panels */
/* ---- Typography ------------------------------------------------------ */
--ihp-font-display: 'Cormorant Garamond', serif; /* headings, logo */
--ihp-font-body: 'Jost', sans-serif; /* body text */
/* ---- Component knobs ------------------------------------------------- */
--ihp-btn-radius: 9999px; /* pill buttons; use .4rem for a squarer look */
--ihp-drop-shadow: 0 14px 40px rgba(38, 34, 30, .12);
--ihp-img-aspect: 1 / 1; /* aspect ratio for EVERY photo on the site
(1/1 = square, 4/5 = portrait, 16/9 = wide) */
}
/* ---- Base ---------------------------------------------------------------- */
body { background: var(--ihp-cream); color: var(--ihp-ink); font-family: var(--ihp-font-body); }
/* Small uppercase section labels ("Step 1 · Review", card headings…) */
.eyebrow { letter-spacing: .22em; text-transform: uppercase; font-size: .68rem;
color: var(--ihp-terra); font-weight: 500; }
/* Catalog card images use the global photo aspect ratio with a soft tint */
.card-img { aspect-ratio: var(--ihp-img-aspect); object-fit: cover; width: 100%; background: var(--ihp-sand); }
/* EVERY photo on the site (cards, gallery mains + thumbs, wishlist rows,
autocomplete results) uses --ihp-img-aspect. `height: auto !important`
neutralises fixed-height utility classes (h-11, h-16, h-24 …) so the
ratio always wins; widths still come from the utility classes. */
img { aspect-ratio: var(--ihp-img-aspect); height: auto !important; object-fit: cover; }
/* Tiny uppercase status pills (discount −20%, "Package", availability) */
.badge { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
padding: .2rem .5rem; border-radius: 9999px; }
/* ---- Buttons ------------------------------------------------------------- */
.btn-primary { background: var(--ihp-terra); color: #fff; padding: .7rem 1.6rem;
border-radius: var(--ihp-btn-radius); font-size: .85rem;
letter-spacing: .12em; text-transform: uppercase; transition: background .2s; }
.btn-primary:hover { background: var(--ihp-terradark); }
.btn-outline { border: 1px solid var(--ihp-ink); color: var(--ihp-ink); padding: .7rem 1.6rem;
border-radius: var(--ihp-btn-radius); font-size: .85rem;
letter-spacing: .12em; text-transform: uppercase; }
/* accordions on product/info pages */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
/* ---- Tags: small rounded filter chips ------------------------------------ */
.chip { font-size: .75rem; padding: .3rem .8rem; border-radius: 9999px;
border: 1px solid var(--ihp-sand-deep); color: var(--ihp-muted); }
.chip.active { background: var(--ihp-ink); color: var(--ihp-cream); border-color: var(--ihp-ink); }
/* ---- Categories: serif underlined links (deliberately distinct from tags) - */
.cat-link { font-family: var(--ihp-font-display); font-size: 1.15rem; font-weight: 600;
letter-spacing: .04em; padding: .2rem .1rem; white-space: nowrap;
color: var(--ihp-ink); border-bottom: 2px solid transparent; }
.cat-link:hover { border-color: var(--ihp-gold); }
.cat-link.active { border-color: var(--ihp-terra); color: var(--ihp-terra); }
/* ---- Nested hover dropdown navigation ------------------------------------ */
.cat-has-drop { position: relative; }
.drop, .flyout { position: absolute; background: var(--ihp-panel);
border: 1px solid var(--ihp-sand); border-radius: .9rem;
box-shadow: var(--ihp-drop-shadow); padding: .5rem; min-width: 13rem; z-index: 45;
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity .18s ease, transform .18s ease; }
.drop { top: 100%; left: 0; }
.flyout { top: -.55rem; left: calc(100% - .4rem); }
.cat-has-drop.open > .drop, .drop-item.open > .flyout {
opacity: 1; transform: translateY(0); pointer-events: auto; }
.drop-item { position: relative; }
.drop-item > a, .flyout > a { display: block; padding: .5rem .8rem; border-radius: .6rem;
font-size: .9rem; white-space: nowrap; }
.drop-item > a:hover, .flyout > a:hover { background: var(--ihp-cream); color: var(--ihp-terra); }
.drop-item.has-flyout > a::after { content: '›'; float: right; color: var(--ihp-gold); margin-left: 1.5rem; }
@media (min-width: 768px) {
.sticky-if-desktop {
position: sticky;
}
}