/* PrintQly External Promotion — v20261007-01
 *
 * DESKTOP:
 *   [ complete promotion image ] [ complete promotion image ]
 *
 * MOBILE:
 *   [ complete promotion image ]
 *
 * The JavaScript sets exact pixel widths for every slide. CSS deliberately
 * prevents flex/grid rules from shrinking a slide into a thumbnail.
 */

.pq-external-promotion{
    width:100%;
    max-width:100%;
    margin:28px 0 34px;
    padding:14px 16px 12px;
    background:#0e0e0e;
    border:1px solid #292929;
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
    isolation:isolate;
}

.pq-external-promotion-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:2px 4px 10px;
    color:#ffd000;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    box-sizing:border-box;
}

.pq-external-promotion-head small{
    color:#777;
    font-size:9px;
    letter-spacing:.6px;
}

/* Two large promotion cards on desktop. */
.pq-external-promotion-desktop-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

.pq-external-promotion-unit{
    display:block;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:hidden;
}

.pq-external-promotion-unit--second{
    display:block;
}

.pq-external-promotion-viewport{
    display:block;
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:13px;
    box-sizing:border-box;
    position:relative;
    contain:layout paint;
}

.pq-external-promotion-track{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0!important;
    width:100%;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box;
    transform:translate3d(0,0,0);
    will-change:transform;
}

.pq-external-promotion-slide{
    position:relative;
    display:block;
    box-sizing:border-box;
    width:100%;
    min-width:100%;
    max-width:100%;
    flex:0 0 100%;
    margin:0!important;
    padding:0;
    background:#151515;
    border:1px solid #2c2c2c;
    border-radius:13px;
    overflow:hidden;
}

.pq-external-promotion-link{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    line-height:0;
    overflow:hidden;
}

.pq-external-promotion-media{
    display:block;
    width:100%;
    line-height:0;
    overflow:hidden;
    background:#111;
}

/* Keep the complete promotion artwork visible in every carousel card. */
.pq-external-promotion-link img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    aspect-ratio:1200/628;
    object-fit:cover;
    object-position:center;
}

.pq-external-promotion-arrow{
    position:absolute;
    right:9px;
    bottom:9px;
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(8,8,8,.82);
    border:1px solid rgba(255,208,0,.8);
    color:#ffd000;
    font-size:17px;
    font-weight:900;
    line-height:1;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    pointer-events:none;
}

.pq-external-promotion-caption{
    display:block;
    box-sizing:border-box;
    padding:8px 11px;
    color:#ddd;
    font-size:10px;
    line-height:1.25;
    background:#151515;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.pq-external-promotion-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    padding:9px 0 1px;
    box-sizing:border-box;
}

.pq-external-promotion-dots i{
    display:block;
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:#444;
    cursor:pointer;
}

.pq-external-promotion-dots i.is-active{
    background:#ffd000;
}

/* Page grids must treat the whole promotion component as one block. */
.pq-shop-results>.pq-external-promotion--find-shop,
.pq-help-result-list>.pq-external-promotion--help{
    grid-column:1/-1;
    min-width:0;
    width:100%;
    box-sizing:border-box;
}

/* Never let inherited page grid/flex rules change slide geometry. */
.pq-external-promotion .pq-external-promotion-unit,
.pq-external-promotion .pq-external-promotion-viewport,
.pq-external-promotion .pq-external-promotion-track,
.pq-external-promotion .pq-external-promotion-slide{
    min-width:0;
}

.pq-external-promotion .pq-external-promotion-track{
    gap:0!important;
}

@media(max-width:899px){
    .pq-external-promotion{
        padding:11px 12px 10px;
    }

    .pq-external-promotion-desktop-grid{
        gap:10px;
    }
}

@media(max-width:767px){
    .pq-external-promotion{
        margin:22px 0 28px;
        border-radius:14px;
        padding:9px;
    }

    .pq-external-promotion-head{
        font-size:9px;
        padding-bottom:8px;
    }

    /* Mobile intentionally shows ONE promotion image at a time. */
    .pq-external-promotion-desktop-grid{
        display:block;
        width:100%;
    }

    .pq-external-promotion-unit{
        display:block;
        width:100%;
    }

    .pq-external-promotion-unit--second{
        display:none!important;
    }

    .pq-external-promotion-arrow{
        width:26px;
        height:26px;
        font-size:15px;
        right:8px;
        bottom:8px;
    }

    .pq-external-promotion-caption{
        padding:8px 10px;
        font-size:9px;
    }
}

/* Keep the requested movement available even when reduced-motion is enabled.
   The visual requirement is a functional carousel, so the transition remains
   short and controlled rather than disabling the carousel entirely. */
@media(prefers-reduced-motion:reduce){
    .pq-external-promotion-track{
        transition-duration:850ms!important;
    }
}

/* v20261009-01: desktop shows two independent six-ad carousels; mobile shows one twelve-ad carousel. */
.pq-external-promotion-mobile{display:none;width:100%;min-width:0;}
.pq-external-promotion-unit--desktop{display:block;}
.pq-external-promotion-unit--mobile{display:none;}
.pq-external-promotion .pq-external-promotion-track{gap:0!important;}
.pq-external-promotion .pq-external-promotion-slide{flex:0 0 100%;width:100%;min-width:100%;max-width:100%;}
.pq-external-promotion .pq-external-promotion-link img{width:100%;height:auto;aspect-ratio:1200/628;object-fit:contain;background:#111;}
@media(max-width:767px){
  .pq-external-promotion-desktop-grid{display:none!important;}
  .pq-external-promotion-mobile{display:block;}
  .pq-external-promotion-unit--mobile{display:block;}
}

/* PrintQly promotion presentation aligned with the Agent Shop promotion cards.
   Shared renderer and carousel data flow remain unchanged. */
.pq-external-promotion {
  background: #0f0f0f;
  border: 1px solid #2b2b2b;
  border-radius: 20px;
  padding: 16px;
  overflow: hidden;
}
.pq-external-promotion-head {
  padding: 2px 2px 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.pq-external-promotion-desktop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.pq-external-promotion-unit,
.pq-external-promotion-viewport,
.pq-external-promotion-track,
.pq-external-promotion-slide {
  min-width: 0;
  max-width: 100%;
}
.pq-external-promotion-viewport {
  border: 1px solid #303030;
  border-radius: 14px;
  background: #151515;
}
.pq-external-promotion-track {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  gap: 0 !important;
}
.pq-external-promotion-slide {
  flex-shrink: 0 !important;
  border: 0;
  border-radius: 0;
  background: #151515;
}
.pq-external-promotion-link,
.pq-external-promotion-media {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #111;
}
.pq-external-promotion-link img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  object-position: center;
}
.pq-external-promotion-caption {
  min-height: 30px;
  padding: 8px 10px;
  background: #151515;
  border-top: 1px solid #292929;
  font-size: 10px;
}
.pq-external-promotion-dots {
  padding: 10px 0 2px;
}
.pq-external-promotion-dots i {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
}
@media (max-width: 767px) {
  .pq-external-promotion {
    margin: 22px 0 28px;
    padding: 10px;
    border-radius: 16px;
  }
  .pq-external-promotion-desktop-grid { display: none !important; }
  .pq-external-promotion-mobile { display: block !important; width: 100%; }
  .pq-external-promotion-unit--mobile { display: block !important; width: 100%; }
  .pq-external-promotion-unit--desktop { display: none !important; }
  .pq-external-promotion-viewport { border-radius: 12px; }
  .pq-external-promotion-link img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 628;
    object-fit: cover;
  }
}


/* Public Advertise With Us: seven predetermined page placements. */
.pq-public-placement-directory{width:min(1180px,calc(100% - 32px));margin:42px auto;padding:22px;background:#101010;border:1px solid #292929;border-radius:18px;box-sizing:border-box;color:#f5f5f5}
.pq-public-placement-heading>span{display:block;color:#ffd000;font-size:10px;font-weight:900;letter-spacing:1.5px}
.pq-public-placement-heading h2{margin:7px 0 3px;font-size:clamp(22px,3vw,34px);line-height:1.15}
.pq-public-placement-heading p{margin:0 0 8px;color:#ffd000;font-weight:800;font-size:17px}
.pq-public-placement-heading small{display:block;color:#999;line-height:1.6}
.pq-public-placement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.pq-public-placement-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:1px solid #2b2b2b;border-radius:12px;background:#080808;color:#f5f5f5;text-decoration:none;transition:border-color .18s,transform .18s}
.pq-public-placement-card:hover,.pq-public-placement-card:focus-visible{border-color:#ffd000;transform:translateY(-1px);outline:none}
.pq-public-placement-count{align-self:flex-start;padding:5px 8px;border-radius:20px;background:#302900;color:#ffd000;font-size:10px;font-weight:900}
.pq-public-placement-card strong{font-size:17px;line-height:1.3}
.pq-public-placement-card small{color:#999;line-height:1.5}
.pq-public-placement-link{margin-top:auto;padding-top:5px;color:#ffd000;font-size:12px;font-weight:900}
@media(max-width:640px){.pq-public-placement-directory{width:calc(100% - 20px);margin:26px auto;padding:14px;border-radius:14px}.pq-public-placement-grid{grid-template-columns:1fr;gap:9px}.pq-public-placement-card{padding:13px}.pq-public-placement-card strong{font-size:16px}}

/* Advertising With Us: separate public placement and pricing route */
.pq-public-placement-directory{max-width:1180px;margin:34px auto 42px;padding:clamp(18px,3vw,30px);background:#101010;border:1px solid #292929;border-radius:18px;box-sizing:border-box;color:#f8f8f8}.pq-public-placement-heading>span{font-size:10px;font-weight:900;letter-spacing:1.6px;color:#ffd000}.pq-public-placement-heading h2{font-size:clamp(25px,4vw,40px);line-height:1.1;margin:8px 0}.pq-public-placement-heading p{font-size:20px;font-weight:800;margin:0 0 8px}.pq-public-placement-heading small{display:block;color:#999;line-height:1.6;max-width:850px}.pq-public-placement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.pq-public-placement-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;padding:17px;background:#171717;border:1px solid #303030;border-radius:13px;text-decoration:none;color:#fff;transition:border-color .2s,transform .2s}.pq-public-placement-card:hover{border-color:#ffd000;transform:translateY(-2px)}.pq-public-placement-card strong{font-size:16px}.pq-public-placement-count{color:#ffd000;font-size:12px;font-weight:900}.pq-public-placement-card small{color:#999;line-height:1.5}.pq-public-placement-link{color:#ffd000;font-size:12px;font-weight:900;margin-top:auto}.pq-public-price-cta{display:inline-flex;align-items:center;justify-content:center;max-width:100%;box-sizing:border-box;padding:14px 18px;background:#ffd000;border-radius:10px;color:#111;text-decoration:none;font-weight:900}.pq-public-placement-directory+ .pq-external-promotion-enquiry{margin-top:24px}@media(max-width:600px){.pq-public-placement-directory{margin:24px 12px;padding:15px;border-radius:14px}.pq-public-placement-grid{grid-template-columns:1fr;gap:9px}.pq-public-placement-card{padding:14px}.pq-public-price-cta{width:100%;text-align:center}}


/* Advertising With Us enquiry form styles: responsive PrintQly dark/yellow UI. */
.pq-external-promotion-enquiry{width:min(1180px,calc(100% - 32px));margin:28px auto 42px;padding:clamp(18px,3vw,30px);box-sizing:border-box;color:#f7f7f7;background:#101010;border:1px solid #292929;border-radius:18px}
.pq-external-promotion-enquiry-head>span{display:block;color:#ffd000;font-size:10px;font-weight:900;letter-spacing:1.6px}
.pq-external-promotion-enquiry-head h2{font-size:clamp(26px,4vw,42px);line-height:1.12;margin:8px 0 10px;color:#fff}
.pq-external-promotion-enquiry-head p{max-width:900px;margin:0;color:#a7a7a7;line-height:1.7}
.pq-external-promotion-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:24px}
.pq-external-promotion-form label{display:flex;min-width:0;flex-direction:column;gap:7px;color:#dedede;font-size:12px;font-weight:800;line-height:1.4}
.pq-external-promotion-form input,.pq-external-promotion-form select,.pq-external-promotion-form textarea{display:block;width:100%;min-width:0;box-sizing:border-box;background:#080808!important;color:#f8f8f8!important;border:1px solid #393939!important;border-radius:10px!important;padding:13px 14px!important;font:inherit;line-height:1.45;min-height:45px;box-shadow:none!important}
.pq-external-promotion-form select{appearance:auto}
.pq-external-promotion-form textarea{min-height:130px;resize:vertical}
.pq-external-promotion-form input:focus,.pq-external-promotion-form select:focus,.pq-external-promotion-form textarea:focus{outline:2px solid #ffd000;outline-offset:1px;border-color:#ffd000!important}
.pq-external-promotion-form .wide{grid-column:1/-1}
.pq-external-promotion-form button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:13px 19px;border:0;border-radius:10px;background:#ffd000;color:#111;font:inherit;font-weight:900;cursor:pointer}
.pq-ext-web-notice{margin-top:16px;padding:13px 15px;border-radius:10px;line-height:1.5}.pq-ext-web-notice.success{background:#12351e;color:#a4f0b2}.pq-ext-web-notice.error{background:#401919;color:#ffb8b8}
.pq-public-placement-directory+ .pq-external-promotion-enquiry{margin-top:24px}
@media(max-width:640px){.pq-public-placement-directory,.pq-external-promotion-enquiry{width:calc(100% - 20px);margin:24px auto;padding:15px;border-radius:14px}.pq-external-promotion-form{grid-template-columns:1fr;gap:13px;margin-top:18px}.pq-external-promotion-form .wide{grid-column:auto}.pq-external-promotion-form button{width:100%}.pq-external-promotion-enquiry-head h2{font-size:28px}}


/* 2026-10-12: accessible manual controls alongside automatic carousel motion. */
.pq-external-promotion .pq-external-promotion-viewport{position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.pq-external-promotion .pq-external-promotion-viewport:active{cursor:grabbing}
.pq-external-promotion .pq-external-promotion-slide img{-webkit-user-drag:none;user-select:none}
.pq-external-promotion .pq-external-promotion-nav{position:absolute;z-index:5;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:42px;padding:0;border:1px solid rgba(255,208,0,.72);border-radius:9px;background:rgba(8,8,8,.84);color:#ffd000;font:700 30px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.3);opacity:.88}
.pq-external-promotion .pq-external-promotion-nav:hover,.pq-external-promotion .pq-external-promotion-nav:focus-visible{opacity:1;background:#24200a;outline:2px solid #ffd000;outline-offset:2px}
.pq-external-promotion .pq-external-promotion-prev{left:8px}
.pq-external-promotion .pq-external-promotion-next{right:8px}
.pq-external-promotion .pq-external-promotion-dots i{cursor:pointer}
.pq-external-promotion .pq-external-promotion-dots i:focus-visible{outline:2px solid #ffd000;outline-offset:3px}
@media(min-width:768px){
 .pq-external-promotion-desktop-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
 .pq-external-promotion-unit--desktop{display:block!important;min-width:0!important;width:100%!important}
 .pq-external-promotion-mobile{display:none!important}
}
@media(max-width:767px){
 .pq-external-promotion-desktop-grid{display:none!important}
 .pq-external-promotion-mobile{display:block!important;width:100%!important;min-width:0!important}
 .pq-external-promotion-unit--mobile{display:block!important;width:100%!important;min-width:0!important}
 .pq-external-promotion .pq-external-promotion-nav{width:31px;height:38px;font-size:27px}
}


/* 2026-10-12: minimal promotion controls. Keep automatic motion and swipe/drag,
   but remove large left/right overlay buttons and the bottom dot navigation. */
.pq-external-promotion .pq-external-promotion-nav,
.pq-external-promotion .pq-external-promotion-dots {
    display: none !important;
}
.pq-external-promotion .pq-external-promotion-viewport {
    cursor: auto;
}
.pq-external-promotion .pq-external-promotion-viewport:active {
    cursor: grabbing;
}