/*
 * WBPhotography - Shared framed layouts
 */

body.woocommerce-cart,
body.woocommerce-checkout:not(.woocommerce-order-received),
body.woocommerce-order-received {
  --wbp-frame-line: #ed2024;
  --wbp-frame-divider: rgba(237, 32, 36, 0.16);
  --wbp-frame-stroke: 3px;
  --wbp-frame-mobile-parallax-y: 0px;
  --wbp-frame-bg-image: url("https://wbphotography.nl/wp-content/uploads/2026/03/Gemini_Generated_Image_2xs6fp2xs6fp2xs61.png");
  --wbp-frame-surface: linear-gradient(180deg, rgba(235, 249, 251, 0.88), rgba(209, 239, 244, 0.74));
  --wbp-frame-shadow: 0 24px 68px rgba(92, 141, 156, 0.18);
  --wbp-frame-toolbar-bg: rgba(212, 239, 245, 0.84);
  --wbp-frame-toolbar-bg-hover: rgba(221, 244, 248, 0.9);
  --wbp-frame-toolbar-border: #7db7c8;
  --wbp-frame-toolbar-shadow: 0 10px 26px rgba(69, 50, 36, 0.1);
  --wbp-frame-panel-bg: rgba(221, 244, 248, 0.74);
  --wbp-frame-panel-bg-strong: rgba(212, 239, 245, 0.84);
  --wbp-frame-panel-bg-soft: rgba(236, 249, 251, 0.68);
  --wbp-frame-logo-top: -36px;
  --wbp-frame-logo-shift: 0px;
  --wbp-frame-gap-width: 352;
  --wbp-frame-gap-width-mobile: 258;
  --wbp-frame-gap-shift: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.6)),
    var(--wbp-frame-bg-image) center top / cover no-repeat;
  position: relative;
}

body.woocommerce-cart::before,
body.woocommerce-cart::after,
body.woocommerce-checkout:not(.woocommerce-order-received)::before,
body.woocommerce-checkout:not(.woocommerce-order-received)::after,
body.woocommerce-order-received::before,
body.woocommerce-order-received::after {
  display: none;
}

body.woocommerce-cart::before,
body.woocommerce-checkout:not(.woocommerce-order-received)::before,
body.woocommerce-order-received::before {
  width: 34rem;
  height: 34rem;
  top: 8%;
  left: -9rem;
  background: radial-gradient(circle, rgba(126, 210, 220, 0.32) 0%, rgba(126, 210, 220, 0.14) 46%, transparent 72%);
  transform: rotate(-13deg);
}

body.woocommerce-cart::after,
body.woocommerce-checkout:not(.woocommerce-order-received)::after,
body.woocommerce-order-received::after {
  width: 30rem;
  height: 30rem;
  right: -7rem;
  bottom: 6%;
  background: radial-gradient(circle, rgba(160, 224, 232, 0.24) 0%, rgba(160, 224, 232, 0.12) 42%, transparent 72%);
  transform: rotate(12deg);
}

body.woocommerce-cart .x-main,
body.woocommerce-checkout:not(.woocommerce-order-received) .x-main,
body.woocommerce-order-received .x-main {
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100% - 40px));
  max-width: 1440px;
  margin: 18px auto 42px !important;
  padding: clamp(26px, 3.2vw, 42px);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.58)),
    var(--wbp-frame-bg-image) center top / cover no-repeat !important;
  box-shadow: 0 24px 60px rgba(92, 141, 156, 0.16);
}

body.woocommerce-cart .x-main > article,
body.woocommerce-checkout:not(.woocommerce-order-received) .x-main > article,
body.woocommerce-order-received .x-main > article {
  margin: 0;
}

body.woocommerce-cart .x-root,
body.woocommerce-checkout:not(.woocommerce-order-received) .x-root,
body.woocommerce-order-received .x-root,
body.woocommerce-cart #x-site,
body.woocommerce-cart #cs-content,
body.woocommerce-cart #cs-content > .x-section,
body.woocommerce-cart .entry-wrap,
body.woocommerce-cart .entry-content.content,
body.woocommerce-checkout:not(.woocommerce-order-received) #x-site,
body.woocommerce-checkout:not(.woocommerce-order-received) #cs-content,
body.woocommerce-checkout:not(.woocommerce-order-received) #cs-content > .x-section,
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-wrap,
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content.content,
body.woocommerce-order-received #x-site,
body.woocommerce-order-received #cs-content,
body.woocommerce-order-received #cs-content > .x-section,
body.woocommerce-order-received .entry-wrap,
body.woocommerce-order-received .entry-content.content {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.woocommerce-cart .wbp-cart-toolbar a.wbp-cart-continue,
body.woocommerce-cart a.wbp-cart-continue,
body.woocommerce-checkout:not(.woocommerce-order-received) .wbp-checkout-back,
body.woocommerce-order-received .wbp-order-received-continue {
  background: var(--wbp-frame-toolbar-bg) !important;
  border: 2px solid var(--wbp-frame-toolbar-border) !important;
  box-shadow: var(--wbp-frame-toolbar-shadow) !important;
}

body.woocommerce-cart .wbp-cart-toolbar a.wbp-cart-continue:hover,
body.woocommerce-checkout:not(.woocommerce-order-received) .wbp-checkout-back:hover,
body.woocommerce-order-received .wbp-order-received-continue:hover {
  background: var(--wbp-frame-toolbar-bg-hover) !important;
}

body.woocommerce-order-received .wbp-order-received-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 26px;
}

body.woocommerce-order-received .wbp-order-received-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 2px solid var(--wbp-frame-toolbar-border);
  border-radius: 12px;
  color: #191817;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.woocommerce-order-received .wbp-order-received-continue svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.wbp-logo-frame {
  position: relative;
  overflow: visible;
  background: var(--wbp-frame-surface, linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84)));
  border-radius: 32px;
  box-shadow: var(--wbp-frame-shadow, 0 24px 68px rgba(69, 50, 36, 0.12));
  isolation: isolate;
}

.wbp-logo-frame__logo {
  position: absolute;
  top: var(--wbp-frame-logo-top, -30px);
  left: calc(50% + var(--wbp-frame-logo-shift, 0px));
  transform: translateX(-50%);
  z-index: 3;
  overflow: hidden;
}

.wbp-logo-frame__logo img {
  display: block;
  max-width: none;
  height: auto;
}

.wbp-logo-frame__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.wbp-logo-frame__inner {
  position: relative;
  z-index: 1;
  padding: 86px 30px 28px;
}

.wbp-cart-summary-mobile-slot:empty,
.wbp-checkout-summary-mobile-slot:empty {
  display: none;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .x-masthead,
  body.woocommerce-cart header[role="banner"],
  body.woocommerce-cart .site-header,
  body.woocommerce-cart .x-navbar-wrap,
  body.woocommerce-cart .x-navbar,
  body.woocommerce-cart .x-logobar,
  body.woocommerce-cart .x-topbar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-masthead,
  body.woocommerce-checkout:not(.woocommerce-order-received) header[role="banner"],
  body.woocommerce-checkout:not(.woocommerce-order-received) .site-header,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-navbar-wrap,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-navbar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-logobar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-topbar,
  body.woocommerce-order-received .x-masthead,
  body.woocommerce-order-received header[role="banner"],
  body.woocommerce-order-received .site-header,
  body.woocommerce-order-received .x-navbar-wrap,
  body.woocommerce-order-received .x-navbar,
  body.woocommerce-order-received .x-logobar,
  body.woocommerce-order-received .x-topbar {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body.woocommerce-cart .x-masthead,
  body.woocommerce-cart header[role="banner"],
  body.woocommerce-cart .site-header,
  body.woocommerce-cart .x-navbar-wrap,
  body.woocommerce-cart .x-navbar,
  body.woocommerce-cart .x-logobar,
  body.woocommerce-cart .x-topbar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-masthead,
  body.woocommerce-checkout:not(.woocommerce-order-received) header[role="banner"],
  body.woocommerce-checkout:not(.woocommerce-order-received) .site-header,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-navbar-wrap,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-navbar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-logobar,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-topbar,
  body.woocommerce-order-received .x-masthead,
  body.woocommerce-order-received header[role="banner"],
  body.woocommerce-order-received .site-header,
  body.woocommerce-order-received .x-navbar-wrap,
  body.woocommerce-order-received .x-navbar,
  body.woocommerce-order-received .x-logobar,
  body.woocommerce-order-received .x-topbar {
    display: none !important;
  }

  body.woocommerce-cart::before,
  body.woocommerce-checkout:not(.woocommerce-order-received)::before,
  body.woocommerce-order-received::before {
    width: 24rem;
    height: 24rem;
    left: -8rem;
  }

  body.woocommerce-cart::after,
  body.woocommerce-checkout:not(.woocommerce-order-received)::after,
  body.woocommerce-order-received::after {
    width: 22rem;
    height: 22rem;
    right: -8rem;
  }

  .wbp-logo-frame {
    border-radius: 24px;
  }

  body.woocommerce-cart .x-main,
  body.woocommerce-checkout:not(.woocommerce-order-received) .x-main,
  body.woocommerce-order-received .x-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 12px 28px !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
      var(--wbp-frame-bg-image) center top / cover no-repeat !important;
    box-shadow: none !important;
  }

  body.woocommerce-cart.wbp-mobile-parallax-active,
  body.woocommerce-checkout:not(.woocommerce-order-received).wbp-mobile-parallax-active,
  body.woocommerce-order-received.wbp-mobile-parallax-active {
    background-position: center calc(var(--wbp-frame-mobile-parallax-y, 0px) - 24px);
  }

  body.woocommerce-cart.wbp-mobile-parallax-active .x-main,
  body.woocommerce-checkout:not(.woocommerce-order-received).wbp-mobile-parallax-active .x-main,
  body.woocommerce-order-received.wbp-mobile-parallax-active .x-main {
    background-position: center calc(var(--wbp-frame-mobile-parallax-y, 0px) - 12px) !important;
    will-change: background-position;
  }

  .wbp-logo-frame__logo {
    top: -29px;
  }

  .wbp-logo-frame__inner {
    padding: 78px 18px 20px;
  }
}