/* Shared by the four Sunclock pages:
   sunclock-overview, sunclock-8, globe-clock and sunclock-download. */

html{
    min-height:100%;
    background-color:var(--paper);
    background-image:var(--bg-tile);
    background-repeat:repeat;
  }

body{
    margin:0;
    min-height:100vh;
    background-color:var(--paper);
    background-image:var(--bg-tile);
    background-repeat:repeat;
    color:var(--ink);
    font-family:"Gill Sans", "Gill Sans MT", Calibri, ui-sans-serif, system-ui, sans-serif;
    padding-inline:0;
    overflow-x:hidden;
  }

/* ---------- nav ---------- */
nav.tabs.tabs--short-divider{
    border-bottom:none;
  }

nav.tabs--short-divider .tabs__group{
    display:flex;
    align-items:flex-end;
    gap:0.4rem;
    border-bottom:1px solid rgb(153,153,153);
  }

/* lines the second-row buttons up under the Sunclock button above them */
nav.tabs a[data-nav="sunclock8"]{
    margin-left:249px;
  }

nav.tabs a[data-nav="download"]{
    background:rgb(192,3,3);
    color:#ffffff;
  }

/* ---------- dark blue panel ---------- */
.sunclock-panel{
    grid-column:1 / -1;
    background:rgb(1,1,55);
    text-align:center;
  }

.sunclock-panel .product__head{
    justify-content:center;
    margin-bottom:0;
  }

.sunclock-panel--left .product__head{
    justify-content:flex-start;
  }

.sunclock-panel .badge-img{
    width:1.9rem;
    height:1.9rem;
    border:1px solid #808080;
  }

.sunclock-panel h1{
    font-size:1.9rem;
    font-weight:400;
    line-height:1.1;
    letter-spacing:0.12em;
    color:#ffffff;
  }

.sunclock-panel p{
    text-align:left;
    color:#ffffff;
  }

/* ---------- overview and download pages: two panels side by side,
              each stacked caption / picture / text ---------- */
.sunclock-pair .sunclock-panel{
    grid-column:auto;
    display:flex;
    flex-direction:column;
  }

.sunclock-item{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-top:1.75rem;
    text-align:left;
  }

/* same picture height in both panels, so what follows lines up */
.sunclock-item > img{
    flex:none;
    width:100%;
    aspect-ratio:668 / 349;
    object-fit:cover;
  }

/* spinning globe video with the clock beside it, in a black strip the size of the picture */
.globe-strip{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    margin:0;
    aspect-ratio:668 / 349;
    background:#000000;
  }

/* widths chosen so both come out exactly as tall as the strip */
.globe-strip video{
    flex:none;
    width:57.5%;
    aspect-ratio:762 / 692;
    object-fit:contain;
  }

.globe-strip img{
    flex:none;
    width:22.1%;
    height:auto;
  }

.sunclock-item > div{
    flex:1;
    display:flex;
    flex-direction:column;
  }

.sunclock-item h2{
    margin-bottom:0.9rem;
    font-weight:400;
    color:#ffffff;
  }

.sunclock-item p{
    margin-bottom:0.75rem;
  }

.sunclock-item p + p{
    margin-top:0;
  }

/* yellow button, pushed to the bottom right of the text column */
.sunclock-item .product__more{
    margin:auto 0 0 auto;
    background:rgb(255,215,0);
    border-right-color:#666666;
  }

/* ---------- download page ---------- */
.sunclock-panel .download-cta{
    text-align:center;
  }

.download-cta a{
    font-size:1.2rem;
    font-weight:700;
    color:rgb(255,215,0);
    text-decoration:none;
  }

.download-cta a:hover{
    text-decoration:underline;
  }

.sunclock-panel .divider{
    margin:0.875rem 0;
    border:none;
    border-top:1px solid #ffffff;
  }

.sunclock-panel .sunclock-price{
    font-size:1.4rem;
    margin-bottom:1.5rem;
  }

.sunclock-panel .licence-note{
    font-size:0.8rem;
  }

/* PayPal "Buy Now" button on a white card, so the logos stay readable */
.buy-now{
    align-self:center;
    display:inline-grid;
    justify-items:center;
    gap:0.5rem;
    margin:0.75rem 0;
    padding:0.75rem 1rem;
    background:#ffffff;
    border-radius:0.35rem;
    font-size:0.75rem;
    color:#000000;
  }

.buy-now input{
    min-width:11.625rem;
    height:2rem;
    padding:0 2rem;
    border:none;
    border-radius:0.25rem;
    background:#FFD140;
    color:#000000;
    font-family:"Helvetica Neue", Arial, sans-serif;
    font-size:0.875rem;
    font-weight:bold;
    cursor:pointer;
  }

.buy-now span img{
    height:0.875rem;
    vertical-align:middle;
  }

/* two upright pictures side by side */
.sunclock-duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }

/* ---------- pictures and video with optional caption ---------- */
.sunclock-detail{
    margin-top:1.75rem;
  }

.sunclock-detail > :first-child{
    margin-top:0;
  }

.figure{
    margin:1.75rem 0 0;
  }

.figure img,
.figure video{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
  }

.sunclock-pair .figure img{
    width:100%;
  }

.figure figcaption{
    margin-top:0.5rem;
    font-size:0.98rem;
    line-height:1.3365;
    text-align:center;
    color:#ffffff;
  }

.sunclock-panel .figure + p,
.sunclock-duo + p{
    margin-top:1.75rem;
  }