/** Shopify CDN: Minification failed

Line 209:1 Unexpected "{"
Line 209:2 Expected identifier but found "%"
Line 209:32 Unexpected "-"
Line 209:52 Expected identifier but found "%"
Line 300:0 Unexpected "{"
Line 300:1 Expected identifier but found "%"
Line 300:31 Unexpected "-"
Line 300:62 Expected identifier but found "%"
Line 359:0 Unexpected "{"
Line 359:1 Expected identifier but found "%"
... and 9 more hidden warnings

**/
/* Login/Register */
.login .section__wrapper,
.register .section__wrapper,
.activate .section__wrapper,
.reset-password .section__wrapper {
  width: 100%;
  max-width: 50rem;
  padding: 0 1.5rem;
  margin: 0 auto;
}
.login p,
.register p,
.activate p,
.reset-password p {
  margin: 1.2rem 0 0;
}
.login .form-field + a,
.register .form-field + a,
.activate .form-field + a,
.reset-password .form-field + a {
  margin-top: 0.8rem;
}
.login form,
.register form,
.activate form,
.reset-password form {
  margin: 2.4rem 0 0;
}
.login form button,
.login form .btn--secondary,
.register form button,
.register form .btn--secondary,
.activate form button,
.activate form .btn--secondary,
.reset-password form button,
.reset-password form .btn--secondary {
  margin-top: 2.4rem;
}
.login form button + a,
.login form .btn--secondary + a,
.register form button + a,
.register form .btn--secondary + a,
.activate form button + a,
.activate form .btn--secondary + a,
.reset-password form button + a,
.reset-password form .btn--secondary + a {
  margin-top: 1.6rem;
}
.login form button + button,
.login form .btn--secondary + button,
.register form button + button,
.register form .btn--secondary + button,
.activate form button + button,
.activate form .btn--secondary + button,
.reset-password form button + button,
.reset-password form .btn--secondary + button {
  margin-top: 1.6rem;
}
@media (max-width: 767.98px) {
  .login form,
  .register form,
  .activate form,
  .reset-password form {
    margin-top: 2rem;
  }
  .login form button,
  .register form button,
  .activate form button,
  .reset-password form button {
    margin-top: 2rem;
  }
}

#customer_login_guest button {
  margin-top: 0;
}

#recover,
#recover + div {
  display: none;
}

#recover:target {
  display: block;
}

#recover:target + div {
  display: block;
}

#recover:target ~ #login,
#recover:target ~ #login + div {
  display: none;
}

#recover,
#login {
  scroll-margin-top: 20rem;
}

#recover {
  margin-bottom: 0;
}

.customer__header {
  margin-bottom: 4rem;
}
@media (max-width: 767.98px) {
  .customer__header {
    margin-bottom: 3.2rem;
  }
}
.customer__body {
  display: flex;
  gap: 3.2rem;
}
.customer__sidebar {
  flex: 0 0 32rem;
  align-self: self-start;
}
.customer__sidebar p {
  color: rgba(var(--color-subtext), var(--color-subtext-alpha, 1));
  margin: 0;
}
.customer__widget {
  padding: 2.4rem;
  background-color: rgb(var(--color-secondary-background));
}
.customer__content {
  flex: 1;
}
.customer .rich-text {
  margin-bottom: 2.4rem;
}
@media (max-width: 767.98px) {
  .customer .rich-text {
    margin-bottom: 1.2rem;
  }
}
@media (max-width: 1023.98px) {
  .customer__body {
    flex-direction: column;
  }
  .customer__sidebar {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

/* Account */
/* Order */
.order-total-amount {
  margin-top: 2.4rem;
}
.order-total-amount li + li {
  margin-top: 0.8rem;
}

/* Address */
.addresses .section__wrapper {
  width: 100%;
  max-width: 79rem;
  padding: 0 1.5rem;
  margin: 0 auto;
}
.addresses [data-address] {
  padding: 2.4rem 3.2rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 767.98px) {
  .addresses [data-address] {
    padding: 1.6rem;
    margin-bottom: 1.2rem;
  }
}
.addresses__edit-form {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(var(--color-border), var(--color-border-alpha, 1));
}

.address-info__default-badge {
  margin-bottom: 0.4rem;
}
.address-info p {
  margin: 0;
}
.address-info button {
  padding: 0;
  height: auto;
  line-height: normal;
}

 {%- comment -%} PlanBee Custom - Account Tooltip  {%- endcomment -%}

.revoked-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Icon button */
.revoked-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  margin:0;
  background:#fff;
  border:1px solid var(--color-border, #ddd);
  border-radius:50%;
  cursor:help;
  line-height:0;
}

/* Bubble */
.revoked-icon::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(100% + 10px);
  background:#E0EDD4;
  color:#000;
  padding:8px 10px;
  border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  font-size:12px;
  line-height:1.35;
  min-width:220px;
  max-width:280px;
  width:max-content;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:20;
  text-transform: none !important;       /* no capitalise/uppercase */
  font-variant: normal;
}

/* Arrow */
.revoked-icon::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:100%;
  border:6px solid transparent;
  border-top-color:#111;
  opacity:0;
  transition:opacity .15s ease;
  z-index:21;
}

/* Show only when the ICON is interacted with */
.revoked-icon:hover::after,
.revoked-icon:focus::after,
.revoked-icon:active::after,
.revoked-icon:hover::before,
.revoked-icon:focus::before,
.revoked-icon:active::before{
  opacity:1;
}

/* Small screens: keep bubble within the viewport */
@media (max-width: 640px){
  .revoked-icon::after{
    max-width:min(92vw, 360px);
    left:50%;
    transform:translateX(-50%);
    bottom:calc(100% + 12px);
    word-wrap:break-word;
  }
}

/* Accessible focus ring */
.revoked-icon:focus{
  outline:2px solid #111;
  outline-offset:2px;
}
{%- comment -%} PlanBee Custom - Account Pagination styling  {%- endcomment -%}
/* Layout: horizontal, centred, wraps on small screens */
.pagination ul{
  display:flex;
  justify-content:center;   /* centre the items */
  align-items:center;
  flex-wrap:wrap;           /* allow wrapping on mobiles */
  gap:8px 10px;             /* row/column gaps */
  list-style:none;
  margin:16px 0;
  padding:0;
}

/* Each item stays compact */
.pagination li{
  display:inline-flex;
}

/* Buttons/pills */
.pagination a,
.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.25rem;        /* ~36px touch width */
  height:2.25rem;           /* ~36px touch height */
  padding:0 .6rem;
  border:1px solid var(--color-border, #ddd);
  border-radius:6px;
  text-decoration:none;
  color:inherit;
  line-height:1;
}

/* Current page */
.pagination [aria-current="page"]{
  background:#f6f7f8;
  font-weight:600;
}

/* Chevron size */
.pagination svg{
  width:10px;
  height:6px;
}

/* Small screens: slightly bigger touch targets, tighter margins */
@media (max-width: 640px){
  .pagination a,
  .pagination span{
    min-width:2.5rem;
    height:2.5rem;
    padding:0 .7rem;
  }
  .pagination ul{
    margin:12px 0;
    gap:8px;
  }
}
{%- comment -%} PlanBee Custom - Order history styling {%- endcomment -%}
.order-history th#ColumnOrder,
.order-history td[headers~="ColumnOrder"] { min-width: 9rem; }
.order-history th#ColumnDate,
.order-history td[data-label="Date"] { min-width: 7.5rem; }
.order-history th#ColumnPayment,
  .order-history td[headers~="ColumnPayment"],
  .order-history td[data-label="Payment Status"]{ min-width: 9rem; min-width: 9rem;        /* tweak as you like */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;}


/* Mobile card layout with green background */
@media (max-width: 640px) {
  /* Hide the table header */
  .order-history thead { display: none; }

  /* Turn each row into a card */
  .order-history,
  .order-history tbody,
  .order-history tr,
  .order-history td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .order-history tr {
    background: #ECF4E5;                 /* card background */
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: .8rem;
  }

  /* Two-column grid per cell: label | value */
  .order-history td {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr); /* prevent value overflow */
    gap: .6rem;
    align-items: start;
    padding: .45rem 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Generated labels */
  .order-history td::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgba(var(--color-subtext), var(--color-subtext-alpha, 1));
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* All content sits in the value column */
  .order-history td > * {
    grid-column: 2 / -1;
    min-width: 0; /* critical for grid overflow control */
  }

  /* Product column emphasis on mobile */
  .order-history td.line-items { font-weight: 700; }
  .order-history .line-items p { margin: 0 0 .25rem; }

  /* Order number cell uses card background */
  .order-history td#RowOrder,
  .order-history td[headers~="RowOrder"] { background: #ECF4E5; }

  /* Make RowOrder a single-column block with the value under the label */
  .order-history td#RowOrder,
  .order-history td[headers~="ColumnOrder"] { grid-template-columns: 1fr !important; }

  .order-history td#RowOrder::before,
  .order-history td[headers~="ColumnOrder"]::before {
    grid-column: 1;
    margin-bottom: .25rem;
    background: transparent;
    opacity: 0; /* hide the label for this cell, as per current behaviour */
  }

  .order-history td#RowOrder > *,
  .order-history td[headers~="ColumnOrder"] > * {
    grid-column: 1 / -1 !important; /* value in column 1 */
    min-width: 0;
  }

  /* Order number link: bigger and bold */
  .order-history td#RowOrder a.reversed-link,
  .order-history td[headers~="ColumnOrder"] a.reversed-link {
    font-weight: 700;
    font-size: 2;  /* slightly larger */
    line-height: 1.2;
    display: inline-block;
    color: inherit;
    
  }

  /* Actions cell: full-width buttons, label hidden on mobile */
  .order-history td.ColumnDownloadLink {
    display: block;          /* simpler than a 1-col grid */
    padding-top: .6rem;
  }
  .order-history td.ColumnDownloadLink::before { content: ""; display: none; }

  .order-history td.ColumnDownloadLink .btn,
  .order-history td.ColumnDownloadLink a.btn {
    display: inline-flex;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  .order-history td.ColumnDownloadLink p { margin: 0 0 .5rem; }
  .order-history td.ColumnDownloadLink p:last-child { margin-bottom: 0; }

  /* Keep media inside the card */
  .order-history td svg,
  .order-history td img {
    max-width: 100%;
    height: auto;
  }

  /* Slightly larger tap targets */
  .order-history .btn { min-height: 44px; }
}
/* Mobile: confine RowOrder link to text only in a single column */
@media (max-width: 640px) {
  /* Ensure the RowOrder cell is a single-column layout */
  .order-history td#RowOrder,
  .order-history td[headers~="ColumnOrder"] {
    grid-template-columns: 1fr !important;
  }

  /* Put all direct children in column 1 and top-left of the grid */
  .order-history td#RowOrder > *,
  .order-history td[headers~="ColumnOrder"] > * {
    grid-column: 1 !important;
    justify-self: start;
    align-self: start;
    min-width: 0;
  }

  /* Kill any stretched-link behaviour and block-level width on the anchor */
  .order-history td#RowOrder a.reversed-link,
  .order-history td[headers~="ColumnOrder"] a.reversed-link {
    position: static !important;
    display: inline !important;
    width: auto !important;
    max-width: 100%;
  }

  /* Remove overlay pseudo-elements that make the whole cell clickable */
  .order-history td#RowOrder a.reversed-link::after,
  .order-history td[headers~="ColumnOrder"] a.reversed-link::after,
  .order-history td#RowOrder::after,
  .order-history td[headers~="ColumnOrder"]::after {
    content: none !important;
  }
}

{%- comment -%} PlanBee Custom - Order page styling {%- endcomment -%} 

/* Order header layout */
.order-header-row{
  display:flex;
  flex-direction:column;          /* mobile: title then buttons */
  gap:1.2rem;
}

.order-actions{
  display:flex;
  flex-direction:column;          /* stack the two buttons */
  gap:.5rem;
  margin-top: 50px;
}

/* Mobile: full-width buttons under the title */
.order-actions .btn,
.order-actions a.btn{
  display:inline-flex;
  width:100%;
  text-align:center;
}

/* Desktop/tablet: row with title left, buttons right; buttons size to content */
@media (min-width: 768px){
  .order-header-row{
    flex-direction:row;           /* title | actions */
    align-items:flex-start;
    justify-content:space-between;
    gap:1.6rem;
  }
  .order-header-row .customer__title{
    flex:1 1 auto;                /* let title take remaining space */
    min-width:0;                  /* prevents odd wrapping */
  }
  .order-actions{
    align-items:flex-end;         /* right aligned column */
  }
  .order-actions .btn,
  .order-actions a.btn{
    width:auto;                   /* stop the full-width behaviour on large screens */
  }
}
{%- comment -%} PlanBee Custom -Button styling {%- endcomment -%} 

/* Equal button widths in the order header */
.order-actions .btn,
.order-actions a.btn {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  /* On desktop, size the column to the widest button, then match both */
  .order-actions {
    width: max-content;      /* shrink to fit the longest button */
  }
  .order-actions .btn,
  .order-actions a.btn {
    width: 100%;             /* both equal the longest */
  }
}

/* On mobile keep them full width */
@media (max-width: 767.98px) {
  .order-actions {
    width: 100%;
  }
  .order-actions .btn,
  .order-actions a.btn {
    width: 100%;
  }
}

/* Reuse header button behaviour inside the order-history cell */
.order-history td.ColumnDownloadLink .order-actions--cell {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Mobile: already full width due to your existing rules,
   but make sure the wrapper spans the cell */
@media (max-width: 767.98px){
  .order-history td.ColumnDownloadLink .order-actions--cell { width: 100%; }
  .order-history td.ColumnDownloadLink .order-actions--cell .btn { width: 100%; }
}

/* Desktop: right align; equal widths based on the widest button */
@media (min-width: 768px){
  .order-history td.ColumnDownloadLink { text-align: right; }
  .order-history td.ColumnDownloadLink .order-actions--cell {
    align-items: flex-end;
    width: max-content;     /* shrink to the widest child */
    margin-left: auto;      /* push to the right of the cell */
  }
  .order-history td.ColumnDownloadLink .order-actions--cell .btn {
    width: 100%;            /* both buttons match the widest */
    box-sizing: border-box;
  }
  /* Optional: normalise horizontal padding if variants differ */
  .order-history td.ColumnDownloadLink .btn--primary,
  .order-history td.ColumnDownloadLink .btn--secondary {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}