.cff-store {
--cff-ink: #101826;
--cff-navy: #17283b;
--cff-gold: #d3ad6b;
--cff-cream: #f6f1e8;
--cff-white: #fff;
width: 100%;
color: var(--cff-ink);
background: var(--cff-cream);
font-family: Arial, Helvetica, sans-serif;
}
.cff-store *, .cff-store *::before, .cff-store *::after { box-sizing: border-box; }
.cff-store-hero {
padding: clamp(42px, 5vw, 68px) clamp(20px, 6vw, 84px);
color: var(--cff-white);
background:
radial-gradient(circle at 82% 18%, rgba(211, 173, 107, .24), transparent 32%),
linear-gradient(135deg, #0b1420, var(--cff-navy));
border-bottom: 4px solid var(--cff-gold);
}
.cff-store-hero__eyebrow,
.cff-store-section-heading p {
margin: 0 0 10px;
color: var(--cff-gold);
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.cff-store-hero h1 {
max-width: 900px;
margin: 0;
color: var(--cff-white) !important;
font-family: "Trajan Pro", "Trajan Pro 3", Georgia, serif;
font-size: clamp(38px, 5vw, 64px);
font-weight: 500;
line-height: 1.02;
}
.cff-store-hero > p {
max-width: 700px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .82);
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.6;
}
.cff-store-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 30px;
}
.cff-store-button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 12px 22px;
border: 1px solid var(--cff-gold);
border-radius: 3px;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-decoration: none !important;
text-transform: uppercase;
transition: background .2s ease, color .2s ease;
}
.cff-store-button--secondary { color: var(--cff-white) !important; background: transparent; }
.cff-store-button--secondary:hover { color: var(--cff-ink) !important; background: var(--cff-gold); }
.cff-store-cart { min-width: 175px; }
.cff-store-content {
width: min(1240px, calc(100% - 36px));
margin: 0 auto;
padding: clamp(44px, 7vw, 84px) 0;
}
.cff-store-admin-notice {
margin: 0 0 36px;
padding: 16px 18px;
border-left: 4px solid #b07b15;
background: #fff8df;
line-height: 1.5;
}
.cff-store-section-heading { max-width: 760px; margin-bottom: 26px; }
.cff-store-section-heading--passes { margin-top: clamp(56px, 8vw, 96px); }
.cff-store-section-heading h2 {
margin: 0;
color: var(--cff-navy) !important;
font-family: "Trajan Pro", "Trajan Pro 3", Georgia, serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 500;
}
.cff-store-section-heading > span {
display: block;
margin-top: 10px;
color: #58616d;
font-size: 15px;
line-height: 1.55;
}
.cff-store-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.cff-store-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(23, 40, 59, .16);
border-radius: 6px;
background: var(--cff-white);
box-shadow: 0 14px 38px rgba(16, 24, 38, .08);
}
.cff-store-card__visual {
position: relative;
display: grid;
min-height: 170px;
place-items: center;
color: var(--cff-gold);
background:
linear-gradient(145deg, rgba(255, 255, 255, .07), transparent 45%),
var(--cff-navy);
}
.cff-store-card__visual::after {
position: absolute;
inset: 15px;
border: 1px solid rgba(211, 173, 107, .35);
content: "";
}
.cff-store-card__visual span {
position: relative;
z-index: 1;
font-family: Georgia, serif;
font-size: 56px;
letter-spacing: .04em;
}
.cff-store-card__visual--coin span,
.cff-store-card__visual--coin-case span { font-size: 78px; }
.cff-store-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.cff-store-card__price {
margin: 0 0 8px !important;
color: #9b6e25;
font-size: 19px;
font-weight: 800;
}
.cff-store-card h3 {
margin: 0 0 12px;
color: var(--cff-navy) !important;
font-size: 20px;
line-height: 1.3;
}
.cff-store-card__body > p:not(.cff-store-card__price) {
margin: 0 0 12px;
color: #3d4653;
font-size: 14px;
line-height: 1.55;
}
.cff-store-card__note { font-weight: 700; }
.cff-store-paypal { width: 100%; margin-top: auto; }
.cff-store-paypal paypal-add-to-cart-button { display: block; width: 100%; }
.cff-store-card__setup,
.cff-store-card__pending {
margin-top: auto !important;
padding: 12px 14px;
border-radius: 3px;
background: #f1ede5;
color: #68583e !important;
font-size: 12px !important;
font-weight: 700;
}
.cff-store-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: clamp(56px, 8vw, 96px);
background: rgba(211, 173, 107, .55);
border: 1px solid rgba(211, 173, 107, .55);
}
.cff-store-info div { padding: 24px; background: var(--cff-navy); }
.cff-store-info strong,
.cff-store-info span { display: block; }
.cff-store-info strong { color: var(--cff-gold); font-size: 14px; text-transform: uppercase; }
.cff-store-info span { margin-top: 7px; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
.cff-store-content { width: min(100% - 24px, 1240px); }
.cff-store-grid, .cff-store-info { grid-template-columns: 1fr; }
.cff-store-hero__actions { align-items: stretch; flex-direction: column; }
.cff-store-button, .cff-store-cart { width: 100%; }
.cff-store-card__body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.cff-store-button { transition: none; }
}