@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Outfit:wght@300;400;500;600&display=swap');

:root {
    --cms-blue:         #003580;
    --cms-sky:          #009fe3;
    --cms-yellow:       #feba02;
    --cms-link:         var(--cms-sky);
    --cms-gray:         #666666;
    --cms-bg:           #f2f6fa;
    --theme-base-size:  14px;
    --theme-btn-radius: 6px;
    --elatra-ink:       #2a2420;
    --elatra-paper:     #f6f1ea;
    --elatra-sand:      #efe6da;
    --elatra-brass:     #8d6a45;
}

body {
    font-family: var(--theme-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--theme-base-size);
    background: var(--elatra-paper);
    color: var(--elatra-ink);
}
h1,h2,h3,h4,h5,h6 { font-family: var(--theme-font-heading, inherit); }

a { color: var(--cms-link); }
a:hover { color: var(--cms-blue); }

.btn { border-radius: var(--theme-btn-radius) !important; }
.btn-primary  { background: var(--cms-blue); border-color: var(--cms-blue); }
.btn-primary:hover { background: var(--cms-sky); border-color: var(--cms-sky); }

/* Navbar */
.navbar-brand { color: var(--cms-blue) !important; font-size: 1.35rem; letter-spacing: .01em; }
.nav-link { color: #333 !important; font-weight: 500; }
.nav-link:hover { color: var(--cms-sky) !important; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--cms-blue), var(--cms-sky)); color: #fff; }

/* Cards */
.card { border-radius: 10px; }

/* Post content */
.post-content { line-height: 1.8; }
.post-content h2 { font-size: 1.5rem; }
.post-content h3 { font-size: 1.25rem; }
.post-content a { color: var(--cms-sky); }

/* Utilities */
.btn-xs { padding: 2px 8px; font-size: 12px; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Every Day Elatra */
.elatra-kicker {
    font-family: Outfit, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 500;
    color: var(--elatra-brass);
    margin-bottom: .35rem;
}
.elatra-display {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--elatra-ink);
}
.elatra-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 38rem;
    color: #5c534c;
}
.elatra-hero { padding: 4.5rem 0 3rem; }
.elatra-hero-img,
.elatra-stage {
    background: var(--elatra-sand);
    aspect-ratio: 3 / 4;
    width: 100%;
    overflow: hidden;
}
.elatra-hero-img { object-fit: contain; display: block; }
.elatra-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.btn.elatra-btn {
    background: var(--elatra-ink);
    color: var(--elatra-paper);
    border: 0;
    border-radius: 999px !important;
    padding: .85rem 1.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
}
.btn.elatra-btn:hover { background: var(--elatra-brass); color: #fff; }
.elatra-textlink {
    color: var(--elatra-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--elatra-brass);
    font-size: .92rem;
}
.elatra-styles { display: flex; flex-wrap: wrap; gap: .6rem; }
.elatra-styles a {
    color: var(--elatra-ink);
    text-decoration: none;
    border: 1px solid #ddd4c8;
    background: #fff;
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .85rem;
}
.elatra-styles a:hover { border-color: var(--elatra-ink); }
.elatra-note {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .elatra-note { grid-template-columns: repeat(3, 1fr); }
}
.elatra-note article {
    background: #fff;
    padding: 1.4rem 1.3rem 1.5rem;
    border-top: 2px solid var(--elatra-ink);
}
.elatra-note h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.7rem;
    margin-bottom: .4rem;
}
.elatra-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.elatra-filters button {
    border: 1px solid #ddd4c8;
    background: transparent;
    color: var(--elatra-ink);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .82rem;
}
.elatra-filters button.is-active,
.elatra-filters button:hover { background: var(--elatra-ink); color: #fff; border-color: var(--elatra-ink); }
.elatra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1rem;
}
@media (min-width: 992px) {
    .elatra-grid { grid-template-columns: repeat(var(--elatra-cols, 4), minmax(0, 1fr)); gap: 2rem 1.15rem; }
}
.elatra-shot {
    display: block;
    background: var(--elatra-sand);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.elatra-shot img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .45s ease; }
.elatra-card:hover .elatra-shot img { transform: scale(1.03); }
.elatra-card-body { padding-top: .75rem; }
.elatra-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 .6rem;
}
.elatra-card h3 a { color: var(--elatra-ink); text-decoration: none; }
.elatra-card-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.elatra-price { font-weight: 500; }
.elatra-add {
    border: 1px solid var(--elatra-ink);
    background: transparent;
    color: var(--elatra-ink);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.elatra-add:hover, .elatra-add:disabled { background: var(--elatra-ink); color: #fff; }
.elatra-thumb {
    width: 72px;
    height: 96px;
    padding: 0;
    border: 1px solid transparent;
    background: var(--elatra-sand);
    overflow: hidden;
}
.elatra-thumb img { width: 100%; height: 100%; object-fit: contain; }
.elatra-thumb.is-active { border-color: var(--elatra-ink); }
.elatra-swatches { display: flex; flex-wrap: wrap; gap: .75rem; }
.elatra-swatches a { color: var(--elatra-ink); text-decoration: none; width: 92px; font-size: .75rem; line-height: 1.3; }
.elatra-swatches img { width: 92px; height: 122px; object-fit: contain; background: var(--elatra-sand); display: block; margin-bottom: .35rem; }
.elatra-pagehead { padding: 3.5rem 0 1rem; }
.elatra-prose { color: #3c342e; font-size: 1.02rem; line-height: 1.75; }
.elatra-prose h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 2rem 0 .6rem;
    color: var(--elatra-ink);
}
.elatra-prose a { color: var(--elatra-brass); }
.elatra-prose p:last-child { margin-bottom: 0; }
.elatra-footer h5, .elatra-footer h6 { font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; }
.elatra-footer h6 { font-size: 1.15rem; font-weight: 600; }