/*
Theme Name:   Joker's World Group
Theme URI:    https://jokersworldgroup.com
Description:  Sapphire, platinum and champagne-gold design for Joker's World Group. Child theme of Astra. On activation it creates the new pages (editable with Elementor), the main menu and the home page. Products, orders and existing pages are not changed.
Author:       Joker's World Group
Template:     astra
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  jokersworld
*/

:root {
  --jw-sapphire: #13213a;
  --jw-sapphire-2: #1c2e4f;
  --jw-porcelain: #f2f3f5;
  --jw-paper: #ffffff;
  --jw-platinum: #c8ccd2;
  --jw-gold: #b38b45;
  --jw-gold-light: #dcc38a;
  --jw-text: #1b2433;
  --jw-muted: #5b6576;
  --jw-line: #dde0e5;
  --jw-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --jw-body: 'Jost', 'Futura', 'Segoe UI', sans-serif;
  --jw-wrap: 1240px;
  --jw-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------- base */
body { background: var(--jw-porcelain); color: var(--jw-text); font-family: var(--jw-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body h1, body h2, body h3, body h4, body .elementor-heading-title,
body .woocommerce-loop-product__title, body .product_title, body .entry-title {
  font-family: var(--jw-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.12; color: inherit;
}
body a { color: var(--jw-sapphire); }
body a:hover { color: var(--jw-gold); }
:focus-visible { outline: 2px solid var(--jw-gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- header (Astra) */
body .site-header, body .main-header-bar, body .ast-primary-header-bar, body .ast-mobile-header-wrap .ast-primary-header-bar,
body .ast-above-header-bar, body .ast-below-header-bar {
  background: var(--jw-sapphire) !important; border-bottom: 0 !important;
}
body .site-header { position: sticky; top: 0; z-index: 99; box-shadow: 0 10px 30px rgba(10,20,40,.18); }
body .site-header .custom-logo { max-height: 76px; width: auto; }
body .site-title a, body .site-description { color: #fff !important; }
body .main-header-menu .menu-link, body .ast-header-custom-item a, body .ast-site-header-cart .ast-cart-menu-wrap,
body .ast-header-woo-cart .ast-site-header-cart i, body .ast-mobile-menu-trigger-minimal, body .menu-toggle, body .ast-button-wrap .menu-toggle {
  color: rgba(255,255,255,.85) !important; font-family: var(--jw-body); font-size: 15px;
}
body .main-header-menu .menu-link:hover, body .main-header-menu .current-menu-item > .menu-link { color: #fff !important; }
body .main-header-menu .current-menu-item > .menu-link { box-shadow: inset 0 -1px 0 var(--jw-gold); }
body .ast-builder-menu-mobile .main-navigation, body .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body .ast-header-break-point .main-header-menu { background: var(--jw-sapphire) !important; }
body .ast-site-header-cart .count, body .ast-site-header-cart .ast-count-text { background: var(--jw-gold) !important; color: #fff !important; }
body .menu-toggle svg, body .ast-mobile-svg { fill: #fff !important; }

/* ---------------------------------------------------------------- Elementor layout helpers */
html, body { overflow-x: clip; }
/* Bands always run edge to edge, whatever container the theme wraps the page in. */
.elementor .e-con.jw-band { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.elementor .e-con.jw-band { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; width: 100%; }
.elementor .e-con.jw-wrap { max-width: var(--jw-wrap); margin: 0 auto; --padding-left: 24px; --padding-right: 24px; --gap: 16px; }
.elementor .e-con.jw-row { --gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.elementor .e-con.jw-col { flex: 1 1 280px; --gap: 12px; }
.elementor .e-con.jw-col-wide { flex: 1.4 1 380px; }
.elementor .e-con.jw-actions { --gap: 12px; flex-direction: row; flex-wrap: wrap; }
.elementor .e-con.jw-grid2 > .e-con { flex: 1 1 320px; }
.elementor .e-con.jw-grid4 > .e-con { flex: 1 1 220px; }
.elementor .e-con.jw-certs > .elementor-widget { flex: 1 1 200px; }
.jw-body { padding: 80px 0 !important; }
.jw-body + .jw-body { padding-top: 0 !important; }
.jw-narrow .jw-wrap { max-width: 860px !important; }

/* ---------------------------------------------------------------- typography inside pages */
.jw-band h1.elementor-heading-title { font-size: clamp(2.3rem, 5vw, 4rem); }
.jw-band h2.elementor-heading-title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.jw-band h3.elementor-heading-title { font-size: 1.3rem; }
.jw-band h4.elementor-heading-title { font-family: var(--jw-body); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--jw-gold-light); }
.jw-band .elementor-heading-title a { color: inherit; text-decoration: none; }
.jw-band .elementor-heading-title a:hover { color: var(--jw-gold); }
.jw-muted, .jw-muted p { color: var(--jw-muted); }
.jw-text p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons */
.jw-btn .elementor-button {
  border-radius: 999px; min-height: 48px; padding: 0 26px; display: inline-flex; align-items: center;
  font-family: var(--jw-body); font-weight: 500; font-size: 15px; letter-spacing: .02em; border: 1px solid transparent;
  transition: background .25s var(--jw-ease), color .25s var(--jw-ease), border-color .25s var(--jw-ease), transform .15s;
}
.jw-btn .elementor-button:active { transform: scale(.98); }
.jw-btn-gold .elementor-button { background: var(--jw-gold); color: #fff; }
.jw-btn-gold .elementor-button:hover { background: #9d7838; color: #fff; }
.jw-btn-line .elementor-button { background: transparent; color: var(--jw-sapphire); border-color: var(--jw-sapphire); }
.jw-btn-line .elementor-button:hover { background: var(--jw-sapphire); color: #fff; }
.jw-btn-light .elementor-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.jw-btn-light .elementor-button:hover { border-color: var(--jw-gold-light); color: var(--jw-gold-light); }

/* ---------------------------------------------------------------- hero */
.jw-hero { background: radial-gradient(120% 90% at 80% 20%, var(--jw-sapphire-2), var(--jw-sapphire) 60%); color: #fff; overflow: hidden; }
.jw-hero .jw-wrap { padding-top: 72px !important; padding-bottom: 88px !important; }
.jw-hero .jw-row { align-items: center; --gap: 56px; }
.jw-hero-title .elementor-heading-title {
  font-size: clamp(3rem, 7.2vw, 6.4rem) !important; font-weight: 400 !important; line-height: 1.02 !important;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--jw-gold-light) 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: jw-rise .9s var(--jw-ease) both, jw-sweep 2.4s .6s var(--jw-ease) both;
}
.jw-lede p { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 34em; }
.jw-hero-copy > * { animation: jw-rise .9s var(--jw-ease) both; }
.jw-hero-copy > *:nth-child(2) { animation-delay: .3s; }
.jw-hero-copy > *:nth-child(3) { animation-delay: .45s; }
.jw-hero-copy > *:nth-child(4) { animation-delay: .6s; }
.jw-facts { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; color: rgba(255,255,255,.7); font-size: 14px; }
.jw-facts strong { display: block; font-family: var(--jw-display); font-weight: 500; font-size: 1.7rem; color: var(--jw-gold-light); }
.jw-hero-media { align-items: flex-end; animation: jw-arch-in 1.4s .2s var(--jw-ease) both; }
.jw-arch { width: 100%; max-width: 420px; margin-left: auto; }
.jw-arch .elementor-wrapper, .jw-arch .elementor-video, .jw-arch video, .jw-arch .elementor-custom-embed-image-overlay {
  border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 9 / 14 !important; height: auto !important; object-fit: cover;
}
.jw-arch .elementor-wrapper { border: 1px solid rgba(220,195,138,.5); box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.jw-caption p { text-align: right; font-size: 13px; color: rgba(255,255,255,.55); max-width: 420px; margin-left: auto; }
@keyframes jw-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes jw-sweep { to { background-position: 0 0; } }
@keyframes jw-arch-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* ---------------------------------------------------------------- collections, cards, images */
.jw-collection .jw-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; transition: transform 1.2s var(--jw-ease); }
.jw-collection .jw-cover { overflow: hidden; border-radius: 4px; }
.jw-collection:hover .jw-cover img { transform: scale(1.05); }
.jw-tall img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.jw-cert img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 1px solid var(--jw-line); background: #fff; }
.jw-card { border-top: 1px solid var(--jw-gold); padding-top: 18px !important; }
.jw-card p { color: var(--jw-muted); font-size: 15px; }
.jw-visit { background: var(--jw-paper); border: 1px solid var(--jw-line); border-radius: 4px; padding: 48px !important; align-items: center !important; }
.jw-address p { color: var(--jw-muted); border-left: 1px solid var(--jw-gold); padding-left: 24px; margin: 0 0 8px; }
.jw-signature p, p.jw-signature { font-family: var(--jw-display); font-style: italic; font-size: 1.4rem; color: var(--jw-gold); }
.jw-steps li { margin-bottom: 12px; }
.jw-steps li::marker { font-family: var(--jw-display); color: var(--jw-gold); }

@supports (animation-timeline: view()) {
  .jw-collection, .jw-card, .jw-visit, .jw-cert, .jw-dark .jw-row > .e-con {
    animation: jw-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
  }
}

/* ---------------------------------------------------------------- dark band */
.jw-dark { background: var(--jw-sapphire); color: #fff; }
.jw-dark .jw-wrap { padding-top: 96px !important; padding-bottom: 96px !important; }
.jw-dark .jw-row { --gap: 72px; }
.jw-dark p { color: rgba(255,255,255,.78); }
.jw-dark .jw-big { font-family: var(--jw-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--jw-gold-light); line-height: 1.3; }
.jw-list .elementor-icon-list-item { padding: 12px 0 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
.jw-list .elementor-icon-list-icon i, .jw-list .elementor-icon-list-icon svg { color: var(--jw-gold-light); fill: var(--jw-gold-light); }
.jw-list .elementor-icon-list-text { color: #fff; font-size: 16px; padding-left: 10px; }

/* ---------------------------------------------------------------- page heads */
.jw-pagehead { background: var(--jw-sapphire); color: #fff; }
.jw-pagehead .jw-wrap { padding-top: 72px !important; padding-bottom: 56px !important; }
.jw-pagehead p { color: rgba(255,255,255,.75); max-width: 40em; }
.jw-pagehead a { color: var(--jw-gold-light); }

/* ---------------------------------------------------------------- legal text, FAQ, map */
.jw-legal { max-width: 820px; }
.jw-legal h2 { font-size: 1.45rem; margin-top: 40px; }
.jw-legal h2 span { color: var(--jw-gold); font-size: 1rem; margin-right: 8px; }
.jw-legal p, .jw-legal li { color: #3a4454; }
.jw-legal .checkline { border: 1px solid var(--jw-line); background: #fff; padding: 14px 16px 14px 44px; position: relative; border-radius: 4px; }
.jw-legal .checkline::before { content: ''; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border: 1.5px solid var(--jw-gold); border-radius: 2px; }
.jw-faq .elementor-toggle-item { border: 0; border-bottom: 1px solid var(--jw-line); }
.jw-faq .elementor-tab-title { padding: 18px 0 !important; border: 0 !important; font-family: var(--jw-body); font-weight: 500; }
.jw-faq .elementor-tab-title a, .jw-faq .elementor-toggle-title { color: var(--jw-text) !important; }
.jw-faq .elementor-tab-content { border: 0 !important; padding: 0 0 18px !important; color: var(--jw-muted); }
.jw-faq .elementor-toggle-icon { color: var(--jw-gold); }
.jw-map iframe { border-radius: 4px; min-height: 420px; }

/* ---------------------------------------------------------------- footer (Site Footer page) */
.jw-site-footer .jw-footer { background: #0e1a2f; color: rgba(255,255,255,.72); }
.jw-site-footer .jw-footer .jw-wrap { padding-top: 64px !important; padding-bottom: 48px !important; }
.jw-site-footer .jw-footer a { color: rgba(255,255,255,.8); text-decoration: none; line-height: 2; }
.jw-site-footer .jw-footer a:hover { color: #fff; }
.jw-site-footer .jw-footer p { color: rgba(255,255,255,.72); font-size: 15px; }
.jw-footer-logo img { width: 150px; }
body .site-footer, body .site-below-footer-wrap, body .ast-small-footer { background: #0e1a2f !important; color: rgba(255,255,255,.6) !important; border-top: 1px solid rgba(255,255,255,.08); }
body .site-below-footer-wrap a { color: rgba(255,255,255,.75) !important; }

/* ---------------------------------------------------------------- WooCommerce: product grid */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background: var(--jw-paper); border: 1px solid var(--jw-line); border-radius: 4px; padding: 0 0 22px !important; overflow: hidden;
  transition: border-color .3s, box-shadow .3s; text-align: left;
}
.woocommerce ul.products li.product:hover { border-color: var(--jw-platinum); box-shadow: 0 18px 40px rgba(19,33,58,.08); }
.woocommerce ul.products li.product a img { aspect-ratio: 1; object-fit: cover; margin: 0 0 16px !important; transition: transform .8s var(--jw-ease); background: #eef0f2; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-loop-product__link h2 { font-size: 1.1rem !important; padding: 0 18px !important; color: var(--jw-text); }
.woocommerce ul.products li.product .ast-woo-product-category { padding: 0 18px; color: var(--jw-gold); font-size: 13px; opacity: 1; }
.woocommerce ul.products li.product .price { padding: 8px 18px 0 !important; display: flex !important; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.woocommerce ul.products li.product .price ins, .woocommerce div.product p.price ins, .woocommerce ul.products li.product .price > .amount {
  font-family: var(--jw-display); font-size: 1.3rem; color: var(--jw-sapphire); text-decoration: none; font-weight: 500;
}
.woocommerce ul.products li.product .price del, .woocommerce div.product p.price del { color: var(--jw-muted); font-size: 14px; opacity: 1; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
  margin: 14px 18px 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--jw-sapphire) !important;
  border: 1px solid var(--jw-sapphire) !important; font-family: var(--jw-body); font-weight: 500; padding: 12px 22px !important; display: inline-block;
}
.woocommerce ul.products li.product .button:hover { background: var(--jw-sapphire) !important; color: #fff !important; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
  background: var(--jw-sapphire) !important; color: var(--jw-gold-light) !important; border-radius: 999px !important;
  min-height: 0 !important; min-width: 0 !important; line-height: 1 !important; padding: 7px 12px !important; font-size: 12px !important; top: 14px !important; left: 14px !important; right: auto !important;
}

/* ---------------------------------------------------------------- WooCommerce: single product */
.single-product .ast-container, .woocommerce-page .ast-container { max-width: var(--jw-wrap); }
.woocommerce div.product .product_title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.woocommerce div.product p.price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 16px 0 20px; }
.woocommerce div.product p.price ins { font-size: 2rem; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 4px; background: #eef0f2; }
.woocommerce div.product form.cart .button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #place_order, .woocommerce .wc-proceed-to-checkout a.checkout-button, .wc-block-components-button:not(.is-link) {
  background: var(--jw-gold) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--jw-body); font-weight: 500;
  padding: 15px 30px !important; border: 0 !important;
}
.woocommerce div.product form.cart .button:hover, .woocommerce #place_order:hover { background: #9d7838 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--jw-sapphire); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--jw-gold); }
.woocommerce .woocommerce-tabs .panel { background: var(--jw-paper); padding: 24px; border: 1px solid var(--jw-line); border-radius: 4px; }
.woocommerce div.product form.cart .quantity { display: none; }

/* ---------------------------------------------------------------- cart / checkout */
.woocommerce table.shop_table, .woocommerce-checkout #payment, .wc-block-cart, .wc-block-checkout { background: var(--jw-paper); border-radius: 4px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single {
  border: 1px solid var(--jw-line) !important; border-radius: 4px !important; background: #fff !important; padding: 11px 14px;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--jw-gold) !important; box-shadow: 0 0 0 3px rgba(179,139,69,.18); }
.jw-confirmations { margin: 0 0 20px; padding: 18px; background: #f7f7f9; border: 1px solid var(--jw-line); border-radius: 4px; }
.jw-confirmations .form-row { margin: 0 0 12px !important; }
.jw-confirmations label { display: flex !important; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.jw-confirmations input[type="checkbox"] { margin-top: 4px; accent-color: var(--jw-gold); flex: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 921px) {
  .jw-hero .jw-wrap { padding-top: 40px !important; padding-bottom: 56px !important; }
  .jw-arch, .jw-caption p { max-width: 300px; margin: 0 auto; text-align: center; }
  .jw-visit { padding: 28px !important; }
  .jw-address p { border-left: 0; padding-left: 0; }
  .jw-body { padding: 56px 0 !important; }
}
@media (max-width: 544px) {
  body { font-size: 16px; }
  .elementor .e-con.jw-wrap { --padding-left: 16px; --padding-right: 16px; }
  body .site-header .custom-logo { max-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .jw-hero-title .elementor-heading-title { background-position: 0 0; }
}

/* ---------------------------------------------------------------- beat Elementor kit defaults */
.elementor .jw-band .elementor-widget-heading .elementor-heading-title { font-family: var(--jw-display) !important; color: var(--jw-text); }
.elementor .jw-band .elementor-widget-heading h4.elementor-heading-title { font-family: var(--jw-body) !important; }
.elementor .jw-hero .elementor-heading-title, .elementor .jw-pagehead .elementor-heading-title,
.elementor .jw-dark .elementor-heading-title { color: #fff !important; }
.elementor .jw-footer .elementor-heading-title { color: var(--jw-gold-light) !important; }
.elementor .jw-band .elementor-widget-text-editor { font-family: var(--jw-body); color: var(--jw-text); }
.elementor .jw-hero .elementor-widget-text-editor, .elementor .jw-pagehead .elementor-widget-text-editor, .elementor .jw-dark .elementor-widget-text-editor { color: rgba(255,255,255,.78); }
.elementor .jw-btn .elementor-button { font-family: var(--jw-body) !important; }
.elementor .jw-btn-gold .elementor-button { background: var(--jw-gold) !important; color: #fff !important; }
.elementor .jw-btn-gold .elementor-button:hover { background: #9d7838 !important; }
.elementor .jw-btn-line .elementor-button { background: transparent !important; color: var(--jw-sapphire) !important; border: 1px solid var(--jw-sapphire) !important; }
.elementor .jw-btn-line .elementor-button:hover { background: var(--jw-sapphire) !important; color: #fff !important; }
.elementor .jw-btn-light .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.45) !important; }
.elementor .jw-btn-light .elementor-button:hover { border-color: var(--jw-gold-light) !important; color: var(--jw-gold-light) !important; }
.elementor .jw-dark .jw-btn-light .elementor-button:hover, .elementor .jw-dark .jw-btn-line .elementor-button:hover { background: var(--jw-gold) !important; border-color: var(--jw-gold) !important; color: #fff !important; }
.elementor .jw-dark .jw-btn-line .elementor-button { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
/* Elementor's default container padding would add stray gaps inside our bands */
.elementor .e-con.jw-band > .e-con-inner, .elementor .e-con.jw-wrap > .e-con-inner { max-width: none; padding: 0; }