/** Shopify CDN: Minification failed

Line 115:0 Unexpected "<"
Line 137:0 Unexpected "<"

**/
/* =====================================================
   QDOS — Popup Page Template Styles
   Used inside modal overlays (no site chrome)
   ===================================================== */

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #111;
  font-family: var(--font-body-family, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.6;
}

.popup-page__content {
  padding: 24px 28px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.popup-page__inner {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.popup-page__title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 16px;
  color: #111;
}

.popup-page__body {
  color: #222;
}

/* ===== Tables ===== */
.popup-page__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.popup-page__body th,
.popup-page__body td {
  padding: 10px 8px;
  border-bottom: 1px solid #e2e2e2;
  vertical-align: top;
  text-align: left;
}

.popup-page__body th {
  font-weight: 600;
  background: #fafafa;
}

/* ===== Links & highlights ===== */
.popup-page__body a {
  color: #000;
  text-decoration: underline;
}

.popup-page__body strong {
  color: #000;
}

/* ===== Mobile ===== */
@media (max-width: 749px) {
  .popup-page__content {
    padding: 18px;
  }
  .popup-page__title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .popup-page__body th,
  .popup-page__body td {
    padding: 8px 6px;
    font-size: 14px;
  }
}
/* ===== Smaller title in popup (desktop + mobile) ===== */

/* The template title */
.popup-page__title{
  font-size: 24px;      /* desktop */
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 12px;
}

/* If your page content itself contains an H1, scale it down too */
.popup-page__body h1,
.popup-page__body .h1{
  font-size: 20px !important;   /* desktop */
  line-height: 1.25;
  margin: 0 0 12px;
}

@media (max-width: 749px){
  .popup-page__title{ font-size: 18px; }          /* mobile */
  .popup-page__body h1,
  .popup-page__body .h1{ font-size: 16px !important; }
}
<style>
/* Typography overrides INSIDE the popup content */
.qdos-popup-content h1,
.qdos-popup-content .h1{
  font-size: 22px !important;   /* desktop */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}

@media (max-width: 749px){
  .qdos-popup-content h1,
  .qdos-popup-content .h1{
    font-size: 18px !important; /* mobile */
  }
}

/* Optional: also tame h2/h3 if your table page uses them */
.qdos-popup-content h2,
.qdos-popup-content .h2{ font-size: 18px !important; margin: 10px 0 8px !important; }
.qdos-popup-content h3,
.qdos-popup-content .h3{ font-size: 16px !important; margin: 8px 0 6px !important; }
</style>

/* =====================================
   QDOS — Popup Page (Mobile visibility fixes)
   ===================================== */
@media (max-width: 749px) {
  /* Give more breathing space */
  .popup-page__body table {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
  }

  /* Add subtle background boxes to rows for clarity */
  .popup-page__body tr {
    background: #fafafa;
    border-radius: 6px;
  }

  /* Padding adjustments */
  .popup-page__body td,
  .popup-page__body th {
    display: block;
    width: 100%;
    text-align: left !important;
    padding: 10px 12px !important;
    border: none !important;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Make region title bold */
  .popup-page__body td:first-child {
    font-weight: 600;
    color: #000;
  }

  /* Add light spacing between each row group */
  .popup-page__body tr + tr {
    margin-top: 10px;
  }

  /* Ensure table doesn't touch the popup edge */
  .popup-page__inner {
    padding: 0 6px;
  }

  /* Right-aligned prices look better stacked below */
  .popup-page__body td:last-child {
    text-align: right !important;
    font-weight: 600;
  }

  /* Optional: make currency line smaller */
  .popup-page__body td:last-child small {
    font-size: 13px;
    opacity: 0.8;
  }
}
/* =======================================================
   QDOS — Popup Page (Mobile Sticky First Column)
   ======================================================= */
@media (max-width: 749px) {

  /* Allow horizontal scroll on smaller screens */
  .popup-page__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .popup-page__body table {
    min-width: 500px; /* adjust if you’ll add more columns */
    border-collapse: collapse;
  }

  /* Keep the first column sticky */
  .popup-page__body td:first-child,
  .popup-page__body th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff; /* match popup background */
    box-shadow: 2px 0 3px rgba(0,0,0,0.05);
  }

  /* Add visual separation for the sticky column */
  .popup-page__body th:first-child {
    font-weight: 700;
    background: #fdfdfd;
  }

  /* Slightly reduce right-padding on last column to avoid clipping */
  .popup-page__body td:last-child {
    padding-right: 16px;
  }

  /* Keep scroll smooth */
  .popup-page__body::-webkit-scrollbar {
    height: 6px;
  }
  .popup-page__body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
  }
}
/* =============================================
   QDOS — Shipping Cost Table (Popup Version)
   ============================================= */
.qdos-shipping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.qdos-shipping-table th,
.qdos-shipping-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
  text-align: left;
}

.qdos-shipping-table th {
  font-weight: 600;
  background: #fafafa;
}

.qdos-shipping-table td strong {
  color: #000;
}

.qdos-shipping-table .note {
  color: #e01900;
  font-size: 14px;
  line-height: 1.4;
}

/* === Mobile optimization === */
@media (max-width: 749px) {
  .qdos-shipping-table {
    min-width: 520px;
  }

  .qdos-shipping-table th,
  .qdos-shipping-table td {
    padding: 6px 8px;
    font-size: 14px;
  }

  /* make sticky column easier to read */
  .qdos-shipping-table td:first-child,
  .qdos-shipping-table th:first-child {
    background: #fff;
    box-shadow: 2px 0 3px rgba(0,0,0,0.05);
    position: sticky;
    left: 0;
    z-index: 2;
  }
}
/* ===== QDOS Shipping table tweaks ===== */

/* 1) Country name bold + fixed column width (desktop/tablet) */
.qdos-shipping-table th:first-child,
.qdos-shipping-table td:first-child{
  width: 20%;
  min-width: 160px;          /* keeps it readable */
  font-weight: 700;          /* bold country name */
  color: #000;
}

/* 2) Make the red “Order placed …” notes smaller & tighter */
.qdos-shipping-table .note{
  font-size: 13px;           /* was 14–15 */
  line-height: 1.35;
  display: block;
  margin-top: 4px;
}

/* --- Mobile adjustments --- */
@media (max-width: 749px){
  /* Let country column size naturally on small screens, but keep sticky */
  .qdos-shipping-table th:first-child,
  .qdos-shipping-table td:first-child{
    width: auto;             /* override the 20% on mobile */
    min-width: 140px;        /* enough for “United Kingdom” */
  }

  .qdos-shipping-table .note{
    font-size: 12.5px;       /* a notch smaller on mobile */
    line-height: 1.35;
  }
}
/* ===================================================
   QDOS — Fix: smaller note text inside popup tables
   =================================================== */

.qdos-popup-overlay .popup-page__body.rte .qdos-shipping-table .note,
.qdos-popup-overlay .qdos-shipping-table .note {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  color: #e01900 !important;
  display: block;
  margin-top: 3px !important;
}
/* ===== QDOS — Popup content compact mode (mobile) ===== */
@media (max-width: 749px){
  .popup-page__content{ padding: 0; }
  .popup-page__inner{ max-width: none; padding: 0 4px; }

  /* Table densification */
  .qdos-shipping-table{
    width: 100%;
    table-layout: fixed;          /* prevents odd wrapping gaps */
    min-width: 0;                 /* allow full fit before scrolling */
  }
  .qdos-shipping-table th,
  .qdos-shipping-table td{
    padding: 6px 4px;             /* tighter left/right */
    font-size: 14px;
    line-height: 1.4;
  }

  /* Column widths: keep Country sticky + compact, give cols 2/3 more room */
  .qdos-shipping-table th:first-child,
  .qdos-shipping-table td:first-child{
    min-width: 120px;             /* was 140–160; tighter for mobile */
  }

  /* Header row slightly smaller to free space */
  .qdos-shipping-table thead th{
    font-size: 13px;
    letter-spacing: .4px;
  }

  /* “Order placed …” notes already smaller; trim margins further */
  .qdos-shipping-table td small{
    margin-top: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}
