/*
Theme Name: Libertas Theme
Description: Custom theme for Libertas Records.
Author: Andreas van der Griendt
Author URI: http://andreashello.com/
Version: 1.0
Tags: light
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* http://meyerweb.com/eric/tools/css/reset */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #000 !important;
    color: #E8ECED;
    overflow-x: visible !important;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom:1em;}
li {list-style:square; margin:0.5em 0 0 2em;}
dt {margin:1em 0; font-weight:bold;}
dd {margin:0 1em; padding-left:1em; border-left:1px solid #ddd;}
th, td {padding:0.5em; border:1px solid #ddd;}
blockquote {margin:0 1em; padding-left:1em; border-left:1px solid #ddd;}
pre {font-family:monospace; background:#f8f8ff; padding:0.5em; overflow:auto;}
sup, sub {height:0; line-height:1; vertical-align:baseline; position:relative; font-size:10px;}
sup {bottom:1ex;}
sub {top:0.5ex;}
.left {float:left;}
.right {float:right;}
.clear {clear:both;}

img {
/* max-width:100% !important; */
height: auto !important;
}

body {
  color: #314654;
  background-color: #000;
  font-family: 'Noto Sans JP', sans-serif;
}

a {text-decoration: none;}
p {line-height:1.3em;}
h1 {font-size:1.7em;}
h2 {font-size:1.3em;}
h3 {font-size:1.1em;}
h1 a {text-decoration:none;}
h1 a:hover {text-decoration:underline;}
h1,h2,h3,h4,h5,h6 {clear:both;}

#container {
  width:100%;
  margin:0;
}

#content {
  width: 100%;
  max-width: 1280px;
  margin: auto;
}

#header li {display:inline; margin:0 0.5em 0 0;}

#logo {
  float: left;
}

#menu-button {
  display: none;
}

#links {
  height: auto;
  float: right;
}

#links ul {
  margin: 0;
}

#hero {
  display: grid;
  padding-bottom: 0px;
  grid-column-gap: 0px;
  grid-template-columns: 1fr 1fr;
  margin-top:48px;
}

#hero-title {
  float: left;
  display: block;
  height: 400px;
  color: #CA0030;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-title h1{
  margin-top: 200px;
  font-size: 96px;
  line-height: 96px;
  max-width: 320px;
}

#hero-image {
  padding-top:100px;
  height: 560px;
  overflow: hidden;
}

#hero-image img,
.hero-img {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  object-fit: cover;
  display: block;
}

.post-content h3 {
  font-size: 32px;
  text-align: center;
  padding-top:0;
  margin: 0px;
  line-height: 48px;
  width: 80%;
  margin-left: auto;
  color: #111111;
  font-weight: 500;
}

iframe {
  width: 80% !important;
  margin-left: 10%;
}

.artists {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.section-title {
  font-size: 64px;
  margin-bottom: 48px;
  margin-top: 64px;
  opacity: 0.3;
  width: 100%;
  text-align: center;
}

#artist-header h1 {
  text-align: center;
  font-size: 60px;
  margin: 96px;
  padding-top: 48px;
  padding-bottom: 48px;
}


#artist-image {
  height: 640px;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.artist-content {
  padding: 160px;
  padding-bottom: 64px;
  padding-top: 64px;
}

.artist-content p {
  font-size: 20px;
  line-height: 34px;
}

.artist-content h3 {
  line-height: 1.5em;
}

.artist-block {
  padding: 24px;
  transition: all 1s;
}

.artist-block a {
  text-decoration: none !important;
}

.artist-block:hover {
  background: rgba(255,255,255,0.3);
}

.artist-block .image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 320px;
  margin-bottom: 16px;
}

.artist-block h2 {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 18px;
  color: #111111;
}

.artist-block span {
  font-size: 14px;
  text-transform: uppercase;
  color: #677D8B;
  letter-spacing: 1px;
  font-weight: normal;
  text-decoration:none;
}

.artist-block .description p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 16px;
  line-height: 23px;
  color: #111111;
  text-decoration:none !important;
}

.artist-large-description h3 {
  font-size: 32px;
  text-align: center;
  padding-top:24px;
  margin: 0px;
  line-height: 48px;
  width: 50%;
  margin-left: 25%;
  color: #111111;
  font-weight: 500;
}

footer {
  width: calc(100% - 96px);
  margin-top: 48px;
  border-top: 1px solid rgba(49, 70, 84, 0.1);
  padding: 48px;
}

.hentry, .meta, #respond {margin-bottom:2em; padding-bottom:1em;}
.hentry h2, .hentry h3, .hentry h4 {margin-top:2em;}

.widgets {margin-bottom:2em; border-bottom:1px solid #ddd;}
.widget {margin-bottom:2em;}
.pagination {text-align:center; margin:2em auto 1em auto;}
.pagination a {padding:3px 8px; border: 1px solid #ddd;}

.alignleft {display:inline; float:left; margin:0 1em 1em 0;}
.alignright {display:inline; float:right; margin:0 0 1em 1em;}
.aligncenter {display:block; margin:1em auto;}
.wp-caption {text-align:center; padding:0.5em; background:#ddd;}
.wp-caption-text, .gallery-caption {font-size:0.7em; margin:3px 0;}



/* -------- RADIO & SOCIAL -------- */
.rp-station-image,
.rp-station-text,
.rp-show-text,
.rp-show-image {
  display: inline-block;
  vertical-align: middle;
}

.subscribe-email {
  background-color: black;
  height: 34px;
  color: #CED4D9;
  border: none;
  border-bottom: 2px solid red;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
}

.subscribe-submit {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 6px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

div .radio-now-playing {
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: bold;
  line-height: 34px;
  color: #FFF;
}

img.radioco-image::before,
img.radioco-image::after {
    content: none !important;
    display: none !important;
}
.libertas-player-wrapper *,
.libertas-player-wrapper *::before,
.libertas-player-wrapper *::after {
    box-sizing: content-box !important;
}
.fa-soundcloud {
  cursor: hand;
}

.social-links-item a {
  text-align: center;
  font-size: 20px;
  display: block;
  margin-left: auto;
  padding: 16px;
  font-weight: 600;
  color: #FFF;
}

.social-links-item svg {
  color: #FFF;
  fill: #FFF;
  padding-right: 4px;
  transform: translateY(4px);
}


/* -------- WOOCOMMERCE GRID -------- */
/* prevent clearfix pseudos from becoming grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
}

/* also neutralize any row/column hacks from float layouts */
.woocommerce ul.products li.product.clear { display:none !important; }
.woocommerce ul.products.columns-4 li.product:nth-child(4n+1),
.woocommerce ul.products.columns-3 li.product:nth-child(3n+1),
.woocommerce ul.products.columns-2 li.product:nth-child(2n+1) {
  clear: none !important;
  margin-left: 0 !important;
}

/* ----- WooCommerce product grid: hard reset ----- */
.woocommerce ul.products {
  /* kill legacy float layout */
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* default: 4 cols */
  gap: 24px;
  margin: 0; /* avoid extra vertical gaps */
  padding: 0;
  list-style: none;
}

/* remove floats, clears, fixed widths Woo adds via classes like .columns-3 */
.woocommerce ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* some themes add nth-child clearing that breaks grid rows—neutralize it */
.woocommerce ul.products li.product:nth-child(n) { clear: none !important; }

/* ----- Card look (optional, tidy) ----- */
.woocommerce ul.products li.product {
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: flex;              /* equal-height cards */
  flex-direction: column;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.woocommerce-loop-product__title {
  color: gray !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Make thumbnails consistent height */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  /* If your images have wildly different ratios, uncomment next two lines: */
  /* aspect-ratio: 4 / 5;
  object-fit: cover; */
  border-radius: 6px;
}

/* Push button to bottom for tidy alignment */
.woocommerce ul.products li.product .button {
  margin-top: auto;
}

/* Optional: match buttons to Bootstrap */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: .375rem;
  border: 0;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #0b5ed7;
}
/* ----- Responsive columns ----- */
@media (max-width: 1199.98px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}


/* Cart icoon + teller in menu */
.cart-menu-item .cart-contents {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cart-menu-item .cart-contents i {
  font-size: 18px;
}

/* Rode badge met aantal items */
.cart-menu-item .cart-count {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e83e58; /* jouw accentkleur */
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  transform: translateY(-6px);
}


/* === SINGLE PRODUCT – DARK THEME (SAFE & ISOLATED) === */
/* Scope: ONLY single product pages */
body.single-product div.product .summary {
  text-align: left;
}

/* Price: white */
body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price {
  color: #ffffff;
}

/* Attribute / Size/Color labels: white */
body.single-product div.product .summary .label label,
body.single-product div.product .summary .variations label,
body.single-product div.product .summary .variations th.label {
  color: #ffffff;
}

.single-product .row {
    display: block;   /* or display: unset; */
}
/* Dropdowns: white text, visible border on dark bg */
body.single-product div.product .summary .variations select {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 6px 8px;
}

/* Options list (inside dropdown): readable */
body.single-product div.product .summary .variations select option {
  color: #000000;
}

/* Quantity + Add to cart aligned left in one row */
body.single-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

/* Extra space under Size Guide link ONLY (if present) */
body.single-product div.product .summary .size-guide,
body.single-product div.product .summary a.size-guide {
  display: inline-block;
  margin-bottom: 12px;
}

/* PayPal / express buttons: left aligned under Add to cart */
body.single-product div.product .summary .paypal-button-container,
body.single-product div.product .summary .wc-proceed-to-checkout,
body.single-product div.product .summary .wc-stripe-elements-field {
  text-align: left;
  margin-left: 0;
}

/* Player button */
.player-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #e83e58; /* Libertas red accent */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 40px;
  padding: 10px 20px;
  transition: all 0.25s ease;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.player-button i {
  font-size: 1.1em;
}

.player-button:hover {
  background-color: #ff4f6d; /* slightly lighter red */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.player-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


@media only screen and (max-width: 1024px) {
  #hero-title h1 {
    font-size: 72px;
    line-height: 80px;
    margin-top: 150px;
  }
  
  .artists {
    grid-template-columns: 1fr 1fr;
  }

  .artists :first-child {
    grid-column: span 1;
  }

}

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {

  #menu-button {
    font-size: 24px;
    display: block;
  }

  #menu-button a {
    font-size: 32px;
  }

  .post-content h3 {
    font-size: 20px;
    text-align: center;
    padding: 0px;
    margin: 0;
    margin-top: 48px;
    width: 100%;
    line-height: 32px;
  }

  #links {
    float: right;
  }

  #links li {
    margin: 0;
    list-style-type: none;
    padding: 16px;
    text-align: center;
    display: block;
  }

  footer {
    width: calc(100% - 48px);
    margin-top: 48px;
    border-top: 1px solid rgba(49, 70, 84, 0.1);
    padding: 24px;
  }

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

  #hero {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
  }

  #hero-title {
    float: none;
    display: block;
    color: #CA0030;
    height: auto;
  }
  #hero-title h1{
    font-size: 48px;
    line-height: 52px;
    margin: 24px;
    width: 200px;
  }

  #hero-image {
      height: 220px;
      margin-top: 0;
      margin-left: 0;
      z-index: 0;
    }
    
  #hero-image img,
    .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }


  .artist-content {
    padding: 24px;
  }

  .artist-content p {
    font-size: 20px;
    line-height: 34px;
  }

  #artist-header h1 {
    font-size: 40px;
    margin: 0px;
    padding-top: 48px;
  }

  #artist-image {
    height: 320px;
  }

  .artist-large-description h3 {
    font-size: 20px;
    line-height: 30px;
    margin: 24px;
    padding: 0;
    width: calc(100% - 48px);
  }

}

@media (prefers-color-scheme: dark) {
  body {
    color: #CED4D9;
    background-color: #0F0F0F;
    border-color: #19191A;
  }

  a {color:white;}

  h1, h2, h3, h4, h5, h6 {
    color: white;
  }

  .social-links-item a {
    color: white;
  }

  .social-links-item svg {
    fill: white;
  }

  #hero-title h1 {
    color: #FE285B;
  }
  .artist-large-description h3 {
    color: white;
  }

  #navigation #links a {
    color: white;
  }

  .post-content h3 {
    color: white;
  }

  .artist-block:hover {
    background: rgba(255,255,255,0.05);
  }

  .artist-block h2 {
    color: white;
  }

  .artist-block span {
    color: white;
  }

  .artist-block .description p {
    color: #CED4D9;
  }
}
/* Extra small (phones in portrait) */
@media (max-width: 480px) {
  #hero-title h1 {
    font-size: 36px;
    line-height: 42px;
    margin-top: 60px;
    text-align: center; /* optional, to center on narrow screens */
  }
}


/* === LIBERTAS NAVBAR – schoon & samengevoegd === */

/* Poppins alleen voor de navbar */
.navbar-libertas,
.navbar-libertas .menu-main-menu-container .menu > li > a,
.navbar-libertas .menu .sub-menu > li > a {
    font-family: "Poppins", sans-serif;
}

/* Basis UL + LI */
.menu-main-menu-container .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.menu-main-menu-container .menu > li {
    position: relative;
}

.menu-main-menu-container .menu > li > a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.55);
}

.navbar-dark .menu-main-menu-container .menu > li > a:hover,
.navbar-dark .menu-main-menu-container .menu > li > a:focus {
    color: #ffffff;
}

.menu-main-menu-container .menu > li > a .nav-label {
    margin-left: 0.35rem;
}

/* Active items */
.menu-main-menu-container .menu > li.current-menu-item > a,
.menu-main-menu-container .menu > li.current_page_item > a,
.menu-main-menu-container .menu > li.current-menu-ancestor > a {
    color: #ffffff;
}

/* Icons */
.menu-main-menu-container .menu > li > a i {
    margin-right: 0.25rem;
}

/* --- Dropdown / sub-menu --- */

.menu-main-menu-container .menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 10rem;
    background-color: #212529;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    display: none;
    z-index: 1000;
}

.menu-main-menu-container .menu .sub-menu > li > a {
    display: block;
    padding: 0.25rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(255,255,255,.75);
}

.menu-main-menu-container .menu .sub-menu > li > a:hover,
.menu-main-menu-container .menu .sub-menu > li > a:focus {
    color: #ffffff;
    background-color: rgba(255,255,255,.05);
}

/* Toon dropdown bij hover (desktop) */
.menu-main-menu-container .menu > li.menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* kleine triangle achter "Radio" */
.menu-main-menu-container .menu > li.menu-item-has-children > a::after {
    content: "\25BE";
    margin-left: 4px;
    display: inline-block;
}

/* --- Cart item in menu --- */

.menu-main-menu-container .menu > li.cart-menu-item .cart-contents {
    position: relative;
}

.menu-main-menu-container .menu > li.cart-menu-item .cart-count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(60%, -60%);
    font-size: 0.7rem;
    background-color: #dc3545;
    color: #fff;
    border-radius: 999px;
    padding: 0 0.3rem;
}

/* Geen bullets in de navbar */
.navbar .menu,
.navbar .menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar .menu li::before {
    content: none !important;
}

/* --- Libertas look & feel --- */

:root {
    --lm-bg-start: #111217;
    --lm-bg-end:   #050608;
    --lm-accent:   #ff4b9f;
    --lm-accent-soft: rgba(255, 75, 159, 0.35);
    --lm-text-muted: rgba(255, 255, 255, 0.65);
}

.navbar-libertas {
    background: radial-gradient(circle at top left, #1b1d27 0, var(--lm-bg-end) 55%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.navbar-libertas .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #fff;
    padding-right: 1.5rem;
    position: relative;
}

.navbar-libertas .navbar-brand::after {
    content: "";
    position: absolute;
    right: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.3rem;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent);
}

/* Menu items in Libertas style */
.navbar-libertas .menu-main-menu-container .menu > li > a {
    color: var(--lm-text-muted);
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    transition: color 0.2s ease, transform 0.15s ease;
}

/* Underline / glow */
.navbar-libertas .menu-main-menu-container .menu > li > a::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 999px;
    background: radial-gradient(circle, var(--lm-accent) 0, transparent 70%);
    opacity: 0;
    transform: scaleX(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-libertas .menu-main-menu-container .menu > li > a:hover,
.navbar-libertas .menu-main-menu-container .menu > li > a:focus {
    color: #ffffff;
    transform: translateY(-1px);
}

.navbar-libertas .menu-main-menu-container .menu > li > a:hover::before,
.navbar-libertas .menu-main-menu-container .menu > li > a:focus::before,
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-item > a::before,
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-ancestor > a::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Actieve items */
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-item > a,
.navbar-libertas .menu-main-menu-container .menu > li.current_page_item > a,
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-ancestor > a {
    color: #ffffff;
}

/* Icons met mini-animatie */
.navbar-libertas .menu-main-menu-container .menu > li > a i {
    margin-right: 0.4rem;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-libertas .menu-main-menu-container .menu > li > a:hover i,
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-item > a i,
.navbar-libertas .menu-main-menu-container .menu > li.current-menu-ancestor > a i {
    opacity: 1;
    transform: translateY(-1px);
}

/* Dropdown binnen Libertas */
.navbar-libertas .menu .sub-menu {
    background: #14151c;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 45px rgba(0,0,0,0.9);
}

.navbar-libertas .menu .sub-menu > li > a {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-right: 0.55rem !important;
    flex-shrink: 0;
}

.navbar-libertas .menu .sub-menu > li > a .nav-label {
    margin-left: 0 !important;
}

.navbar-libertas .menu > li.menu-item-has-children > a::after {
    content: "\25BE";
    margin-left: 6px;
    font-size: 0.6rem;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.navbar-libertas .menu .sub-menu > li > a i {
    margin-right: 0.55rem !important;
}

.navbar-libertas .menu > li.menu-item-has-children:hover > a::after {
    transform: translateY(1px) rotate(180deg);
    opacity: 1;
    color: var(--lm-accent);
}

/* Cart badge EDM-style */
.navbar-libertas .cart-menu-item .cart-count {
    background: radial-gradient(circle at top, #ffb3da 0, var(--lm-accent) 45%, #ff0042 100%);
    box-shadow: 0 0 12px var(--lm-accent-soft);
}

/* --- Mobile gedrag (hamburger open) --- */
@media (max-width: 991.98px) {

    /* Menu-items onder elkaar wanneer collapse open is */
    .menu-main-menu-container .menu {
        flex-direction: column;
        width: 100%;
    }

    .menu-main-menu-container .menu > li {
        width: 100%;
    }

    .menu-main-menu-container .menu > li > a {
        width: 100%;
        padding-left: 0;
    }

    .menu-main-menu-container .menu .sub-menu {
        position: static;
        box-shadow: none;
        background-color: transparent;
        padding-left: 1rem;
    }

    .menu-main-menu-container .menu .sub-menu > li > a {
        padding-left: 0;
    }

    .menu-main-menu-container .menu > li.menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    /* Achtergrond voor uitgeklapte mobile navbar */
    .navbar-libertas .navbar-collapse {
        background: linear-gradient(to bottom, #101118 0, #050608 100%);
        padding: 0.5rem 0.75rem 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .navbar-libertas .menu-main-menu-container .menu > li > a::before {
        left: 0;
        right: 0;
    }

    .navbar-libertas .navbar-toggler {
        border-color: rgba(255,255,255,0.25);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
    }
}

/* --- Desktop: brand links, menu rechts --- */
@media (min-width: 992px) {
    .navbar-libertas .navbar-collapse {
        justify-content: flex-end;
    }
}


/* MOBILE LAYOUT VOOR NAVBAR / HAMBURGER */
@media (max-width: 991.98px) {

  /* menu-items onder elkaar */
  .navbar-libertas .menu-main-menu-container .menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .navbar-libertas .menu-main-menu-container .menu > li {
    width: 100%;
  }

  .navbar-libertas .menu-main-menu-container .menu > li > a {
    width: 100%;
    padding: 0.75rem 0;   /* wat meer verticale ruimte */
  }

  /* submenus ook gewoon onder elkaar, zonder zwevende box */
  .navbar-libertas .menu .sub-menu {
    position: static;
    box-shadow: none;
    background: transparent;
    padding-left: 1rem;
    margin-top: 0;
  }

  .navbar-libertas .menu .sub-menu > li > a {
    padding: 0.25rem 0;
  }
}