/* MK Events — brand overrides
   Palette: navy #1B3A5C, coral #F2B0A8, blush #FBF1ED, lavender-blue #EAEEF3
   Type: Playfair Display (serif display), Sacramento (script), Jost (body)
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Sacramento&family=Jost:ital,wght@0,300..700;1,300..700&display=swap');

/* ---------- Base typography ---------- */
body {
    font-family: var(--font-primary);
    color: #1B3A5C;
    background-color: #ffffff;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.section-title {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Decorative script accent — apply with class="script" */
.script,
.script-accent {
    font-family: var(--font-script);
    color: var(--color-secondary);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ---------- Top bar ---------- */
.top-bar {
    background-color: #1B3A5C;
    padding: 12px 0;
}

.contactinfo a,
.contactinfo,
.toprightcol p,
.toprightcol a {
    color: #FBF1ED !important;
    font-family: var(--font-primary);
    font-size: var(--font-body-sm);
    letter-spacing: 0.04em;
}

.contactinfo a:hover { color: var(--color-secondary) !important; }

/* ---------- Logo area ---------- */
.container .row .d-flex.justify-content-center img {
    max-width: 200px !important;
    height: auto;
}

/* ---------- Hero ---------- */
.hero-section,
.welcomewrap {
    background: linear-gradient(180deg, #FBF1ED 0%, #ffffff 100%);
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: "✦";
    position: absolute;
    top: 30px;
    left: 8%;
    color: var(--color-secondary);
    font-size: 22px;
    opacity: 0.6;
}
.hero-section::after {
    content: "✦";
    position: absolute;
    bottom: 40px;
    right: 10%;
    color: var(--color-secondary);
    font-size: 18px;
    opacity: 0.5;
}

.headertext {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.headertext h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 18px;
    font-weight: 600;
}

.headertext h6 {
    font-family: var(--font-primary);
    font-weight: 400;
    color: #4a5d75;
    font-size: var(--font-body-xl);
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* ---------- Sections ---------- */
.prodcatwrap {
    background-color: #ffffff;
    padding: 80px 0 !important;
}

.prodcatwrap .section-title {
    color: var(--color-primary);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    margin-bottom: 50px !important;
    position: relative;
    display: inline-block;
    width: 100%;
}

.prodcatwrap .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--color-secondary);
    margin: 14px auto 0;
    border-radius: 2px;
}

.featuredproductswrap {
    background: var(--accent-color-fifth);
    padding: 80px 0 !important;
}

.featuredproductswrap .section-title {
    color: var(--color-primary);
    font-size: clamp(28px, 3.4vw, 44px);
    margin-bottom: 50px !important;
    position: relative;
}

.featuredproductswrap .section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--color-secondary);
    margin: 14px auto 0;
    border-radius: 2px;
}

/* Generic content section */
section .tw-prose {
    color: #2a3a4f;
    font-family: var(--font-primary);
    font-size: var(--font-body-lg);
    line-height: 1.75;
}

section .tw-prose h1,
section .tw-prose h2,
section .tw-prose h3 {
    font-family: var(--font-display);
    color: var(--color-primary);
}

/* ---------- Product cards ---------- */
.prodcatwrap a,
.featuredproductswrap a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all .3s ease;
}

.prodcatwrap a:hover,
.featuredproductswrap a:hover {
    color: var(--color-secondary);
}

/* ---------- Buttons ---------- */
.btnstyletwo,
.btn-primary,
button.btnstyletwo {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary) !important;
    background: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
    padding: 14px 32px !important;
    border-radius: var(--bordert-radius-xl);
    transition: all .35s ease;
    box-shadow: 0 6px 18px -8px rgba(242, 176, 168, 0.6);
}

.btnstyletwo:hover,
.btn-primary:hover,
button.btnstyletwo:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 22px -8px rgba(27, 58, 92, 0.5);
}

/* Search & login buttons should remain readable */
#search-btn.tw-text-button-text { color: var(--color-primary); }
#search-btn.tw-text-button-text:hover { color: #ffffff; }
#loginform button.tw-text-button-text { color: var(--color-primary); }
#loginform button.tw-text-button-text:hover { color: #ffffff; }

/* ---------- Cart badge ---------- */
.cart-count {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary) !important;
}

/* ---------- Footer (override globals where possible) ---------- */
footer,
.footer-wrap,
.footerwrap {
    background-color: var(--color-primary) !important;
    color: #FBF1ED;
}

footer a,
.footer-wrap a,
.footerwrap a {
    color: #FBF1ED !important;
    text-decoration: none;
    transition: color .25s ease;
}

footer a:hover,
.footer-wrap a:hover,
.footerwrap a:hover {
    color: var(--color-secondary) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #ffffff !important;
    font-family: var(--font-display);
}

/* ---------- Subtle decorative touches ---------- */
::selection {
    background: var(--color-secondary);
    color: var(--color-primary);
}

a {
    transition: color .25s ease;
}

/* Smooth horizontal rules */
hr { border-color: rgba(27, 58, 92, 0.12); }