/* FEESTival ticket PDP — pixel-matched to "Checkout flow.dc.html" screen A.
   Loads on product pages (mu-plugin feestival-pdp.php). Scoped to the tickets
   category. Kaartje = the designed PNG hero; buy panel = flex column whose order
   is forced (Astra reshuffles the summary DOM, so we drive order via flexbox). */

.woocommerce div.product.product_cat-tickets{
  --teal:#2F6386; --ink:#1C1C1C; --orange:#F2A73B; --orange-h:#E0931F;
  --amber-bg:#FEF3DC; --amber-ink:#8A5A00; --cream:#F2ECDD; --hair:#EADFCE;
  --field-line:#DCD5C4; --grey:#6b6255; --grey-2:#9E9284; --label:#3A3833;
  --green:#1B7A3D; --red:#B4231F; --slab:"Roboto Slab",Georgia,serif;
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:380px minmax(0,1fr); gap:44px; align-items:start;
  font-family:"Roboto",system-ui,sans-serif;
}
/* white page background (Astra separate-container ships grey) */
body.single-product, body.single-product .site-content,
body.single-product .ast-separate-container{background-color:#fff!important}

/* strip the default gallery / reviews / related — kaartje is the hero */
.woocommerce div.product.product_cat-tickets .woocommerce-product-gallery,
.woocommerce div.product.product_cat-tickets .woocommerce-tabs,
.woocommerce div.product.product_cat-tickets .related.products,
.woocommerce div.product.product_cat-tickets .up-sells{display:none}

/* ---- LEFT: kaartje PNG in a plain rounded frame ------------------------- */
.woocommerce div.product.product_cat-tickets .jvwk-product-kaartje{
  grid-column:1; grid-row:1; margin:0; display:flex; justify-content:center; align-items:flex-start}
.woocommerce div.product.product_cat-tickets .jvwk-product-kaartje > h3{display:none}
.woocommerce div.product.product_cat-tickets .jvwk-kaartje-frame{
  width:260px; max-width:100%; border-radius:16px; overflow:hidden; box-shadow:0 16px 34px rgba(0,0,0,.18)}
.woocommerce div.product.product_cat-tickets .jvwk-kaartje-img{display:block; width:100%; height:auto; margin:0}

/* ---- RIGHT: buy panel (flex column, explicit order) --------------------- */
.woocommerce div.product.product_cat-tickets .summary{
  grid-column:2; grid-row:1; width:auto!important; float:none!important; margin:0;
  display:flex; flex-direction:column; align-items:stretch}
/* order of the panel elements per the comp */
.woocommerce div.product.product_cat-tickets .feest-pdp-badge{order:1}
.woocommerce div.product.product_cat-tickets .product_title{order:2}
.woocommerce div.product.product_cat-tickets .price,
.woocommerce div.product.product_cat-tickets p.price{order:3}
.woocommerce div.product.product_cat-tickets .feest-pdp-chips{order:4}
.woocommerce div.product.product_cat-tickets .woocommerce-product-details__short-description{order:5}
.woocommerce div.product.product_cat-tickets .ast-stock-detail,
.woocommerce div.product.product_cat-tickets .summary > .stock{order:6}
.woocommerce div.product.product_cat-tickets .summary > .jvwk-sso-nudge,
.woocommerce div.product.product_cat-tickets .summary > .jvwk-loggedin{order:7}
.woocommerce div.product.product_cat-tickets form.cart{order:8}
.woocommerce div.product.product_cat-tickets .feest-pdp-trust{order:9}
/* remove the noise the comp doesn't show */
.woocommerce div.product.product_cat-tickets .product_meta,
.woocommerce div.product.product_cat-tickets .summary .single-product-category,
.woocommerce div.product.product_cat-tickets .ast-stock-detail .ast-stock-avail{display:none!important}

/* badge */
.feest-pdp-badge{align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--amber-ink); background:var(--amber-bg);
  padding:5px 12px; border-radius:999px; margin:0 0 12px; text-transform:none; letter-spacing:0; line-height:1}

/* title */
.woocommerce div.product.product_cat-tickets .product_title{
  font-family:var(--slab)!important; font-size:26px!important; font-weight:800!important;
  letter-spacing:-.01em!important; color:var(--teal)!important; text-transform:none!important;
  line-height:1.15!important; margin:0 0 8px!important; padding:0!important}

/* price */
.woocommerce div.product.product_cat-tickets .price,
.woocommerce div.product.product_cat-tickets p.price{
  color:var(--ink)!important; font-size:22px!important; font-weight:800!important; margin:0 0 14px!important; line-height:1.1!important}
.woocommerce div.product.product_cat-tickets .price ins,
.woocommerce div.product.product_cat-tickets .price .amount{color:var(--ink)!important; text-decoration:none}
.woocommerce div.product.product_cat-tickets .price .feest-pp{font-size:13px; font-weight:400; color:var(--grey-2); margin-left:4px}

/* event chips */
.feest-pdp-chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}
.feest-pdp-chips span{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--label); background:var(--cream); padding:6px 12px; border-radius:999px; line-height:1}

/* short description */
.woocommerce div.product.product_cat-tickets .woocommerce-product-details__short-description{
  font-size:13.5px; line-height:1.6; color:#5b5346; margin:0 0 16px}
.woocommerce div.product.product_cat-tickets .woocommerce-product-details__short-description p{margin:0}

/* stock — hide Astra's "Beschikbaarheid:" prefix, keep "● 215 op voorraad" */
.woocommerce div.product.product_cat-tickets .ast-stock-detail{
  display:flex; align-items:center; margin:0 0 20px; padding:0}
.woocommerce div.product.product_cat-tickets .stock{
  color:var(--green)!important; font-weight:700; font-size:13px; margin:0;
  display:inline-flex; align-items:center; gap:6px}
.woocommerce div.product.product_cat-tickets .stock::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block}
.woocommerce div.product.product_cat-tickets .stock.out-of-stock{color:var(--red)!important}
.woocommerce div.product.product_cat-tickets .stock.out-of-stock::before{background:var(--red)}

/* ---- form.cart internals (nudge / attendees / qty / CTA) ---------------- */
.woocommerce div.product.product_cat-tickets form.cart{
  display:flex; flex-wrap:wrap; align-items:center; margin:0}
.woocommerce div.product.product_cat-tickets form.cart .jvwk-sso-nudge{flex:0 0 100%; order:1}
.woocommerce div.product.product_cat-tickets form.cart .jvwk-loggedin{flex:0 0 100%; order:1}
.woocommerce div.product.product_cat-tickets form.cart .jvwk-attendees__title{flex:0 0 100%; order:2}
.woocommerce div.product.product_cat-tickets form.cart .jvwk-attendees__help{flex:0 0 100%; order:3}
.woocommerce div.product.product_cat-tickets form.cart .jvwk-attendees{flex:0 0 100%; order:4}
.woocommerce div.product.product_cat-tickets form.cart .feest-qty-label{order:5}
.woocommerce div.product.product_cat-tickets form.cart .quantity{order:6}
.woocommerce div.product.product_cat-tickets form.cart .feest-qty-hint{order:7; margin-left:auto}
.woocommerce div.product.product_cat-tickets form.cart .single_add_to_cart_button{flex:0 0 100%; order:8}

/* SSO nudge (comp: plain cream box, text + Inloggen button) */
.woocommerce div.product.product_cat-tickets .jvwk-sso-nudge{
  background:var(--cream)!important; border:0!important; border-radius:12px!important;
  padding:14px 16px!important; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 20px!important; box-shadow:none!important}
.woocommerce div.product.product_cat-tickets .jvwk-sso-nudge__text{font-size:12.5px; color:var(--label); line-height:1.4}
.woocommerce div.product.product_cat-tickets .jvwk-sso-nudge__btn{
  flex-shrink:0; padding:9px 16px; border-radius:7px; background:var(--teal)!important; color:#fff!important;
  font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; border:0}
/* logged-in bar (comp E8F0FA) */
.woocommerce div.product.product_cat-tickets .jvwk-loggedin{
  background:#E8F0FA!important; border:0!important; border-radius:10px!important;
  padding:11px 13px!important; margin:0 0 20px!important; display:block; box-shadow:none!important}
.woocommerce div.product.product_cat-tickets .jvwk-loggedin__text{font-size:11.5px; color:#1C3A63}
.woocommerce div.product.product_cat-tickets .jvwk-loggedin__logout{
  display:inline-block; margin-top:2px; font-size:11px; color:var(--teal); font-weight:700; text-decoration:underline}

/* attendee heading + helper */
.woocommerce div.product.product_cat-tickets .jvwk-attendees__title{
  font-family:"Roboto",sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin:0 0 4px}
.woocommerce div.product.product_cat-tickets .jvwk-attendees__help{
  font-size:12px; color:var(--grey); margin:0 0 14px; line-height:1.5}

/* attendee card */
.woocommerce div.product.product_cat-tickets .jvwk-attendees{
  background:#fff; border:0; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06);
  padding:16px; margin:0 0 16px}
.woocommerce div.product.product_cat-tickets .jvwk-attendee + .jvwk-attendee{margin-top:14px}
.woocommerce div.product.product_cat-tickets .jvwk-attendee__label{
  font-size:12px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px}
.woocommerce div.product.product_cat-tickets .jvwk-attendee__fields{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.woocommerce div.product.product_cat-tickets .jvwk-attendee__field{display:block}
.woocommerce div.product.product_cat-tickets .jvwk-lbl{
  display:block; font-size:11px; font-weight:600; color:var(--label); margin:0 0 5px}
.woocommerce div.product.product_cat-tickets .jvwk-attendee input[type=text]{
  width:100%; background:#fff; border:0; box-shadow:inset 0 0 0 1px var(--field-line); border-radius:8px;
  padding:11px 13px; font-size:13px; color:var(--ink); line-height:1.2}
.woocommerce div.product.product_cat-tickets .jvwk-attendee input[type=text]:focus{
  box-shadow:inset 0 0 0 2px var(--teal); outline:none}

/* qty row */
.feest-qty-label{font-size:12.5px; font-weight:600; color:var(--label); margin-right:10px}
.feest-qty-hint{font-size:11.5px; color:var(--grey-2)}
.woocommerce div.product.product_cat-tickets form.cart .quantity.feest-qty-stepper{
  display:inline-flex; align-items:center; background:#fff; border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--field-line); overflow:hidden; margin:0}
.woocommerce div.product.product_cat-tickets .feest-qty-btn{
  width:34px; height:38px; padding:0; border:0; background:none; color:var(--teal);
  font-size:17px; line-height:1; cursor:pointer; font-weight:400}
.woocommerce div.product.product_cat-tickets .feest-qty-btn:hover{background:#F7F2E8}
.woocommerce div.product.product_cat-tickets form.cart .quantity.feest-qty-stepper input.qty{
  width:34px; text-align:center; border:0!important; box-shadow:none!important; background:transparent;
  font-size:13px; font-weight:700; color:var(--ink); padding:0; -moz-appearance:textfield; height:38px}
.woocommerce div.product.product_cat-tickets form.cart .quantity.feest-qty-stepper input.qty::-webkit-outer-spin-button,
.woocommerce div.product.product_cat-tickets form.cart .quantity.feest-qty-stepper input.qty::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* CTA */
.woocommerce div.product.product_cat-tickets .single_add_to_cart_button{
  width:100%; padding:15px; border:0!important; border-radius:8px;
  background:var(--orange)!important; color:var(--ink)!important; font-weight:700; font-size:15px;
  margin:18px 0 14px!important; box-shadow:none; text-transform:none; line-height:1.2}
.woocommerce div.product.product_cat-tickets .single_add_to_cart_button:hover{background:var(--orange-h)!important}

/* trust row */
.feest-pdp-trust{display:flex; gap:18px; flex-wrap:wrap; font-size:11.5px; color:var(--grey); margin:0}
.feest-pdp-trust span{display:inline-flex; align-items:center; gap:5px}

/* ---- responsive (stack, mobile comp) ------------------------------------ */
@media (max-width:820px){
  .woocommerce div.product.product_cat-tickets{grid-template-columns:1fr; gap:22px; max-width:420px}
  .woocommerce div.product.product_cat-tickets .jvwk-product-kaartje{grid-column:1; grid-row:1}
  .woocommerce div.product.product_cat-tickets .jvwk-kaartje-frame{width:190px}
  .woocommerce div.product.product_cat-tickets .summary{grid-column:1; grid-row:2}
  .woocommerce div.product.product_cat-tickets .product_title{font-size:22px!important}
  .woocommerce div.product.product_cat-tickets .jvwk-attendee__fields{grid-template-columns:1fr}
}

/* PDP breadcrumb (rendered via astra_entry_top) — aligned with the centred product */
.feest-pdp-breadcrumb{max-width:1000px; margin:0 auto 4px; padding:0}
.feest-pdp-breadcrumb .woocommerce-breadcrumb{font-family:"Roboto",system-ui,sans-serif; font-size:13.8px; color:#777; margin:0; padding:0}
.feest-pdp-breadcrumb .woocommerce-breadcrumb a{color:#777; text-decoration:none}
.feest-pdp-breadcrumb .woocommerce-breadcrumb a:hover{color:#2F6386}
@media(max-width:820px){.feest-pdp-breadcrumb{max-width:420px}}