/* MYSTIC HEKATE — READABILITY */

main {
  background-color: #15101c !important;
  color: #f5eee3 !important;
  font-size: 18px;
  line-height: 1.75;
}

/* Solid backgrounds behind content */
main > div:not(:empty),
main .about-us,
main .arrival-area {
  background-color: #15101c !important;
  background-image: none !important;
  color: #f5eee3 !important;
}

/* Comfortable reading */
main p,
main li {
  color: #f5eee3 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* Clear, warm gold headings */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: #e8cc88 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}

/* Readable links */
main a:not(.btn):not([role="button"]) {
  color: #ead5ff !important;
}

main a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Product cards */
main .mk-product-item {
  background: #241a30 !important;
  border: 1px solid #78628a !important;
  border-radius: 12px;
  overflow: hidden;
}

main .mk-product-content {
  background: #241a30 !important;
  color: #f5eee3 !important;
  padding: 20px !important;
}

main .mk-product-content * {
  color: #f5eee3 !important;
}

main .mk-product-title {
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* Visible keyboard focus */
main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 3px solid #e8cc88 !important;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  main p,
  main li {
    font-size: 17px !important;
  }
}
/* MYSTIC HEKATE — FINISHING TOUCHES */

/* More breathing room around homepage content */
main .about-us,
main .arrival-area {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

main .about-us p {
  max-width: 65ch;
  margin-bottom: 1.2em;
}

/* Keep product names in their intended capitalization */
main .mk-product-title {
  display: block;
  text-transform: none !important;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* Subtle depth for product cards */
main .mk-product-item {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) {
  main .mk-product-item:hover {
    transform: translateY(-3px);
    border-color: #e8cc88 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  }
}

/* Style standard buttons without changing header icons */
main .btn,
main input[type="submit"] {
  background: #694080 !important;
  color: #ffffff !important;
  border: 1px solid #c5a4d8 !important;
  border-radius: 8px !important;
  padding: 12px 22px !important;
  min-height: 44px;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: normal;
}

main .btn:hover,
main input[type="submit"]:hover {
  background: #805298 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Clearly visible form labels */
main label {
  color: #f5eee3 !important;
  font-size: 16px;
}

/* Comfortable, readable form fields */
main input:not([type]),
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="search"],
main input[type="number"],
main input[type="password"],
main select,
main textarea {
  background: #fffaf2 !important;
  color: #241a30 !important;
  border: 1px solid #a48bac !important;
  border-radius: 6px !important;
  padding: 12px !important;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px !important;
}

main input::placeholder,
main textarea::placeholder {
  color: #665c6c !important;
  opacity: 1;
}

/* Highlight selected text */
main ::selection {
  background: #e8cc88;
  color: #15101c;
}

/* Tighter spacing on phones */
@media (max-width: 767px) {
  main .about-us,
  main .arrival-area {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  main .mk-product-content {
    padding: 16px !important;
  }
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  main .mk-product-item {
    transition: none !important;
    transform: none !important;
  }
}
/* Restore contrast on the two promotional panels */
main .epic-promo-duo .epd-title,
main .epic-promo-duo .epic-link {
  color: #24142f !important;
  text-shadow: none !important;
}

main .epic-promo-duo .epic-kicker {
  color: #623477 !important;
  font-weight: 700 !important;
}
/* LARGER PRODUCT CARDS AND COMPLETE FLYERS */

/* Three products per row on desktop */
main .arrival-area .row > div:has(> .mk-product-item) {
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  min-width: 0;
  margin-bottom: 28px;
}

/* Give each flyer a generous portrait display */
main .arrival-area .mk-product-image {
  height: auto !important;
  aspect-ratio: 3 / 4;
  background: #241a30 !important;
  overflow: hidden;
}

main .arrival-area .mk-product-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Two products per row on tablets */
@media (max-width: 991px) {
  main .arrival-area .row > div:has(> .mk-product-item) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* One large flyer per row on phones */
@media (max-width: 575px) {
  main .arrival-area .row > div:has(> .mk-product-item) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* AUTUMN / SAMHAIN ATMOSPHERE */

body {
  background-color: #100c16 !important;
  background-image:
    radial-gradient(
      ellipse at top left,
      rgba(176, 83, 30, 0.22),
      transparent 55%
    ),
    radial-gradient(
      ellipse at top right,
      rgba(110, 57, 140, 0.26),
      transparent 55%
    ) !important;
}

/* Soft autumn glow around homepage sections */
main .about-us,
main .arrival-area,
main .epic-promo-duo {
  background-color: #15101c !important;
  background-image:
    radial-gradient(
      ellipse at top left,
      rgba(153, 68, 26, 0.14),
      transparent 55%
    ),
    radial-gradient(
      ellipse at bottom right,
      rgba(104, 50, 132, 0.16),
      transparent 55%
    ) !important;
}

/* Antique copper edges on product cards */
main .mk-product-item {
  border-color: #9b704b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Warm candlelight headings */
main h1,
main h2,
main h3 {
  color: #f0cf91 !important;
}

@media (hover: hover) {
  main .mk-product-item:hover {
    border-color: #f0cf91 !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.32),
      0 0 18px rgba(190, 105, 43, 0.12);
  }
}
/* ==========================================
   MYSTIC HEKATE – PROFESSIONAL POLISH
   ========================================== */

/* ---------- GLOBAL SMOOTHING ---------- */

html {
    scroll-behavior: smooth;
}

body {
    letter-spacing: 0.2px;
}

/* Make images move smoothly */
img {
    transition: transform 0.35s ease,
                filter 0.35s ease,
                box-shadow 0.35s ease;
}


/* ==========================================
   LINKS
   ========================================== */

a {
    transition: color 0.25s ease,
                opacity 0.25s ease,
                transform 0.25s ease;
}


/* ==========================================
   PRODUCT CARDS
   ========================================== */

.product,
.product-item,
.product-card,
.card {
    border-radius: 14px !important;
    overflow: hidden;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* Lift products slightly when touched/hovered */
.product:hover,
.product-item:hover,
.product-card:hover,
.card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 10px 25px rgba(0,0,0,0.16),
        0 0 18px rgba(120,70,150,0.10);
}


/* Product image effect */
.product img:hover,
.product-item img:hover,
.product-card img:hover {
    transform: scale(1.025);
    filter: brightness(1.04);
}


/* ==========================================
   BUTTONS
   ========================================== */

button,
.btn,
.button,
input[type="submit"],
a.btn {
    border-radius: 30px !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0,0,0,0.22);
    filter: brightness(1.08);
}

button:active,
.btn:active,
.button:active {
    transform: translateY(0);
}


/* ==========================================
   HEADINGS
   ========================================== */

h1,
h2 {
    letter-spacing: 0.6px;
}

h1::after,
h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    margin: 10px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        currentColor,
        transparent
    );
    opacity: 0.45;
}


/* ==========================================
   INPUTS / CONTACT / NEWSLETTER
   ========================================== */

input,
textarea,
select {
    border-radius: 9px !important;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(120,70,150,0.12);
}


/* ==========================================
   HEADER / MENU
   ========================================== */

header,
nav {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================
   FALL / MYSTICAL GLOW
   ========================================== */

/* Creates an extremely subtle warm vignette */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(126, 73, 35, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(90, 45, 110, 0.055),
            transparent 30%
        );

    mix-blend-mode: multiply;
}


/* ==========================================
   SELECTION COLOR
   ========================================== */

::selection {
    background: rgba(104, 63, 122, 0.30);
}


/* ==========================================
   MOBILE POLISH
   ========================================== */

@media (max-width: 768px) {

    h1 {
        line-height: 1.15;
    }

    h2 {
        line-height: 1.2;
    }

    .product:hover,
    .product-item:hover,
    .product-card:hover,
    .card:hover {
        transform: none;
    }

    button,
    .btn,
    .button {
        min-height: 44px;
    }
}


/* Respect users who disable animations */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}
/* =========================================
   MYSTIC HEKATE — PRODUCT BADGE UPGRADE
   ========================================= */

/* Common badge styling */
.product-badge,
.badge,
.label,
.product-label,
[class*="badge"],
[class*="label"] {
    border-radius: 50% !important;
    min-width: 52px;
    min-height: 52px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 8px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase;

    border: 1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 3px 8px rgba(0,0,0,0.25),
        inset 0 0 8px rgba(255,255,255,0.08);

    backdrop-filter: blur(2px);

    transform: rotate(-7deg);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Slight movement when hovering over a badge */
.product-badge:hover,
.badge:hover,
.label:hover,
.product-label:hover,
[class*="badge"]:hover,
[class*="label"]:hover {
    transform: rotate(0deg) scale(1.08);

    box-shadow:
        0 5px 12px rgba(0,0,0,0.30),
        0 0 14px rgba(180,140,220,0.20);
}


/* =========================================
   PRODUCT CARD POLISH
   ========================================= */

.product,
.product-item,
.product-card,
.card {
    position: relative;

    border-radius: 14px !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}


.product:hover,
.product-item:hover,
.product-card:hover,
.card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.18),
        0 0 20px rgba(110,70,140,0.10);
}


/* =========================================
   SUBTLE MAGICAL IMAGE GLOW
   ========================================= */

.product img,
.product-item img,
.product-card img,
.card img {
    transition:
        transform 0.35s ease,
        filter 0.35s ease,
        box-shadow 0.35s ease;
}


.product:hover img,
.product-item:hover img,
.product-card:hover img,
.card:hover img {
    transform: scale(1.018);

    filter:
        brightness(1.04)
        contrast(1.02);

    box-shadow:
        0 7px 20px rgba(0,0,0,0.12);
}


/* =========================================
   SMALL OCCULT DETAIL
   ========================================= */

/* Adds a faint glowing line underneath product names */

.product h3::after,
.product h4::after,
.product-title::after,
.product-name::after {
    content: "";

    display: block;

    width: 32px;
    height: 1px;

    margin: 6px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            currentColor,
            transparent
        );

    opacity: 0.35;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .product-badge,
    .badge,
    .label,
    .product-label,
    [class*="badge"],
    [class*="label"] {
        min-width: 44px;
        min-height: 44px;
        font-size: 9px !important;
    }

    .product:hover,
    .product-item:hover,
    .product-card:hover,
    .card:hover {
        transform: none;
    }
}
/* ================================
   CHOOSE YOUR PATH
   ================================ */

.choose-path {
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    text-align: center;
}

.choose-path-title {
    font-size: 36px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.choose-path-intro {
    max-width: 650px;
    margin: 0 auto 35px;
    opacity: 0.8;
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.path-card {
    position: relative;
    padding: 40px 25px;
    min-height: 240px;

    border: 1px solid rgba(160,120,180,0.25);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(35,20,45,0.95),
            rgba(15,10,20,0.95)
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,0.20);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.path-card:hover {
    transform: translateY(-7px);

    border-color: rgba(190,150,210,0.55);

    box-shadow:
        0 14px 35px rgba(0,0,0,0.28),
        0 0 22px rgba(120,70,150,0.16);
}

.path-symbol {
    font-size: 38px;
    margin-bottom: 15px;
}

.path-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.path-card p {
    line-height: 1.6;
    opacity: 0.85;
    max-width: 420px;
    margin: 0 auto 22px;
}

.path-button {
    display: inline-block;
    padding: 11px 24px;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 30px;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.path-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(0,0,0,0.25);

    background: rgba(255,255,255,0.08);
}


/* Mobile */

@media (max-width: 768px) {

    .path-grid {
        grid-template-columns: 1fr;
    }

    .choose-path-title {
        font-size: 29px;
    }

    .path-card {
        min-height: auto;
        padding: 32px 20px;
    }
}
/* Category pictures instead of round bubbles */
#subcategories_container .subcategories-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#subcategories_container .single-product {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#subcategories_container .prodct-info a {
  display: block !important;
  height: 100%;
  overflow: hidden;
  background: #241a30 !important;
  border: 1px solid #b99a60 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .25);
}

#subcategories_container .prodct-info img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #15101c !important;
}

#subcategories_container .prodct-info p {
  color: #f0d59b !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 14px 8px !important;
}

#subcategories_container .prodct-info a:hover {
  border-color: #f0d59b !important;
  box-shadow: 0 6px 20px rgba(176, 126, 214, .25);
}

#subcategories_container .prodct-info a:focus-visible {
  outline: 3px solid #f0d59b !important;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  #subcategories_container .subcategories-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
/* =====================================================
   MYSTICAL TEMPLE OF TAROT
   ZODIAC ORACLE PAGE
   ===================================================== */


/* ---------- PAGE BACKGROUND ---------- */

body {
    background:
        radial-gradient(circle at 15% 20%, rgba(91, 45, 125, 0.18), transparent 35%),
        radial-gradient(circle at 85% 60%, rgba(116, 70, 140, 0.12), transparent 35%),
        linear-gradient(180deg, #100914 0%, #180d20 45%, #0d0811 100%);
}


/* ---------- MAIN CONTENT AREA ---------- */

main,
.content,
.page-content,
.content-wrapper {
    color: #eee5f2;
}


/* ---------- MAIN PAGE TITLE ---------- */

main h1,
.page-content h1,
.content h1 {
    color: #e4c778;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    text-align: center;
    letter-spacing: 4px;
    line-height: 1.25;

    margin-top: 25px;
    margin-bottom: 20px;

    text-shadow:
        0 0 10px rgba(228, 199, 120, 0.22),
        0 2px 3px rgba(0, 0, 0, 0.7);
}


/* ---------- SECONDARY HEADINGS ---------- */

main h2,
.page-content h2,
.content h2 {
    color: #d9bd72;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;

    letter-spacing: 2px;
    line-height: 1.3;

    margin-top: 45px;
    margin-bottom: 14px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(218, 188, 111, 0.32);

    text-shadow:
        0 0 8px rgba(218, 188, 111, 0.15);
}


/* ---------- ZODIAC / SECTION HEADINGS ---------- */

main h3,
.page-content h3,
.content h3 {
    color: #efd98e;
    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;
    letter-spacing: 2px;

    margin-top: 35px;
    margin-bottom: 12px;
}


/* ---------- SMALL HEADINGS ---------- */

main h4,
.page-content h4,
.content h4 {
    color: #cda85d;

    font-family: Georgia, "Times New Roman", serif;

    text-transform: uppercase;
    letter-spacing: 1.5px;

    margin-top: 22px;
    margin-bottom: 7px;
}


/* ---------- NORMAL TEXT ---------- */

main p,
.page-content p,
.content p {
    color: #eee8ef;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;
    line-height: 1.8;

    margin-bottom: 18px;
}


/* ---------- BOLD LABELS ----------
   Love / Money & Career / Spiritual Message / etc.
   ----------------------------------------------- */

main strong,
.page-content strong,
.content strong {
    color: #e5c873;
    font-weight: 600;
    letter-spacing: 0.4px;
}


/* ---------- ITALIC / SPIRITUAL MESSAGES ---------- */

main em,
.page-content em,
.content em {
    color: #d8c7df;
}


/* ---------- LINKS ---------- */

main a,
.page-content a,
.content a {
    color: #e3c46e;
    text-decoration: none;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}

main a:hover,
.page-content a:hover,
.content a:hover {
    color: #fff0b3;
    text-shadow: 0 0 8px rgba(227, 196, 110, 0.35);
}


/* ---------- HORIZONTAL DIVIDERS ---------- */

main hr,
.page-content hr,
.content hr {
    border: 0;
    height: 1px;

    margin: 40px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(221, 190, 107, 0.65),
            transparent
        );
}


/* ---------- BLOCKQUOTES ----------
   Useful if spiritual messages are formatted
   as quote blocks.
   ------------------------------------------- */

main blockquote,
.page-content blockquote,
.content blockquote {
    margin: 25px 0;
    padding: 18px 22px;

    color: #eee5f0;

    background:
        linear-gradient(
            90deg,
            rgba(101, 57, 124, 0.18),
            rgba(50, 28, 62, 0.18)
        );

    border-left: 3px solid #c8a85b;
    border-radius: 0 10px 10px 0;

    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}


/* ---------- BLOG CARDS ----------
   For the Zodiac blog grid
   -------------------------------- */

.blog-card,
.blog-item,
.post-card,
.article-card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(49, 27, 61, 0.94),
            rgba(21, 13, 27, 0.96)
        );

    border: 1px solid rgba(213, 181, 100, 0.35);
    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ---------- BLOG CARD HOVER ---------- */

.blog-card:hover,
.blog-item:hover,
.post-card:hover,
.article-card:hover {
    transform: translateY(-4px);

    border-color: rgba(225, 194, 112, 0.7);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(177, 131, 211, 0.08);
}


/* ---------- BLOG IMAGES ---------- */

.blog-card img,
.blog-item img,
.post-card img,
.article-card img {
    width: 100%;
    transition: transform 0.35s ease;
}

.blog-card:hover img,
.blog-item:hover img,
.post-card:hover img,
.article-card:hover img {
    transform: scale(1.025);
}


/* ---------- BLOG TITLES ---------- */

.blog-card h2,
.blog-card h3,
.blog-item h2,
.blog-item h3,
.post-card h2,
.post-card h3,
.article-card h2,
.article-card h3 {
    color: #e6cb7b;

    font-family: Georgia, "Times New Roman", serif;

    letter-spacing: 1px;
}


/* ---------- BUTTONS ---------- */

main button,
main .button,
main .btn,
.page-content button,
.page-content .button,
.page-content .btn {
    color: #171019 !important;

    background:
        linear-gradient(
            135deg,
            #c6a453,
            #efd987,
            #b99242
        ) !important;

    border: 1px solid #ead58c !important;
    border-radius: 30px !important;

    padding: 11px 24px !important;

    font-family: Georgia, "Times New Roman", serif !important;

    letter-spacing: 1px;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

main button:hover,
main .button:hover,
main .btn:hover,
.page-content button:hover,
.page-content .button:hover,
.page-content .btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.35);
}


/* ---------- MOBILE ---------- */

@media screen and (max-width: 700px) {

    main h1,
    .page-content h1,
    .content h1 {
        font-size: 30px;
        letter-spacing: 2px;
    }

    main h2,
    .page-content h2,
    .content h2 {
        font-size: 24px;
        letter-spacing: 1px;
        margin-top: 35px;
    }

    main h3,
    .page-content h3,
    .content h3 {
        font-size: 21px;
    }
/* ===== ZODIAC ORACLE SPACING FIX ===== */

main p,
.page-content p,
.content p {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    line-height: 1.9 !important;
}

/* Zodiac headings */
main h2,
main h3,
.page-content h2,
.page-content h3,
.content h2,
.content h3 {
    margin-top: 55px !important;
    margin-bottom: 20px !important;
    padding: 18px 20px !important;

    background: linear-gradient(
        90deg,
        rgba(68, 35, 84, 0.65),
        rgba(34, 18, 43, 0.35),
        transparent
    );

    border-left: 3px solid #d8b868 !important;
    border-bottom: 1px solid rgba(216,184,104,.25) !important;

    border-radius: 8px;

    color: #efd58a !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.18);
}

/* Bold labels such as Love, Money, etc. */
main strong,
.page-content strong,
.content strong {
    color: #e4c46d !important;
}

/* More breathing room around the actual content */
main,
.page-content,
.content {
    line-height: 1.8;
}

/* Mobile */
@media (max-width: 700px) {
    main h2,
    main h3,
    .page-content h2,
    .page-content h3,
    .content h2,
    .content h3 {
        margin-top: 40px !important;
        padding: 14px 15px !important;
    }

    main p,
    .page-content p,
    .content p {
        margin-bottom: 18px !important;
        line-height: 1.75 !important;
    }
}
    main p,
    .page-content p,
    .content p {
        font-size: 16px;
        line-height: 1.7;
    }
}
/* MYSTIC HEKATE — PRODUCT OPTIONS FIX */

/* Restore normal appearance to form labels */
label,
[class*="label"]:has(input),
[class*="label"]:has(textarea),
[class*="label"]:has(select) {
    border-radius: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-transform: none !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
}

/* Make checkbox fields normal */
input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 4px !important;
    transform: none !important;
    vertical-align: middle;
    accent-color: #b99547;
}
/* MYSTIC HEKATE — TERMS FORM READABILITY */

main label,
main .form-group label,
main .form-check-label,
main [class*="question"],
main [class*="option"] label {
    color: #241a30 !important;
    text-shadow: none !important;
}

/* Readable question descriptions */
main [class*="question"] p,
main [class*="option"] p,
main [class*="question"] span,
main [class*="option"] span {
    color: #241a30 !important;
    text-shadow: none !important;
}

/* Keep input fields readable */
main input[type="text"],
main textarea {
    color: #241a30 !important;
    background-color: #fffaf2 !important;
}

/* Clean checkbox appearance */
main input[type="checkbox"] {
    accent-color: #a77b32 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* MYSTIC HEKATE — SIGNATURE FORM FINAL POLISH */

/* Improve question label readability */
main [class*="question"] label,
main [class*="option"] label,
main .form-group label,
main .form-check-label {
    color: #241a30 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
}

/* Improve mobile layout */
@media (max-width: 767px) {
    main input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        vertical-align: middle !important;
    }
}