/* Mobile enhancements: desktop design, type and colours intentionally unchanged. */
@media (max-width: 860px) {
  html, body { width:100%; min-width:0; height:auto; overflow-x:clip; }
  *, *::before, *::after { box-sizing:border-box; }
  img, video, iframe { max-width:100%; }
  .logo, .logocolour1 { position:relative; width:100%; max-width:850px; height:auto; min-height:0; top:auto; left:auto; }
  .logo { padding:10px 12px 0; }
  .logocolour { display:none; }
  .logocolour1 img { display:block; width:100%; height:auto; border:4px solid white; }
  .header, .mainbody, .mainbodytext, .subheader, .spacer, .spacer20, .spacer_title,
  .footerbody, .gallerybody, .gallerybody_centre, .gallerymenu, .aboutbody,
  .contactbody, .presstitle, .mainimage, .stockmainbodytextmh, .pressmainbodytextmh,
  .linkmainbodytext { width:100% !important; max-width:100% !important; }
  .mainbody { padding:0 16px; }
  .mainbodytext { padding:0 3px; }
  .spacer20 { height:18px; }
  .header { height:auto; min-height:0; top:0; padding:0 12px; }
  .mobile-menu-toggle { display:flex !important; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:8px 14px; border:1px solid #dedede; background:#fff; color:rgb(152,186,210); font:inherit; letter-spacing:2px; cursor:pointer; }
  .mobile-menu-toggle .menu-lines { font-size:22px; line-height:1; }
  .header nav { display:none; text-align:left; }
  .header nav.is-open { display:block; }
  .header .nav { display:block; width:100%; box-shadow:none; }
  .header .nav > li { float:none; width:100%; margin:0; border-bottom:1px solid #e3e3e3; }
  .header .nav > li > a { padding:12px 14px; min-height:44px; }
  .header .nav ul { position:static; display:none; min-width:0; white-space:normal; border:0; padding:0 !important; margin:0; background:#fafafa; }
  .header .nav li:hover > ul { display:none; }
  .header .nav li.submenu-open > ul { display:block; }
  .header .nav ul a { padding:10px 16px 10px 28px; min-height:42px; }
  .header .nav li.submenu-open > a { color:grey; }
  .header .nav > li > a:first-child:nth-last-child(2):before { right:15px; }
  .header .nav > li.submenu-open > a:first-child:nth-last-child(2):before { border:5px solid transparent; border-bottom-color:grey; margin-top:-5px; }
  .gallerybody, .gallerybody_centre, .aboutbody, .contactbody { height:auto !important; min-height:0; display:flow-root; padding:12px 0; }
  .gallerybody > div, .gallerybody_centre > div { max-width:100%; }
  .galleryimageleft, .galleryimageright, .galleryimage1of3, .galleryimage2of3,
  .galleryimage3of3, .galleryimage1of4, .galleryimage2of4, .galleryimage3of4,
  .galleryimage4of4, .gallerytextright, .gallerytextleft, .gallerytextbox,
  .abouttext1, .aboutpic1, .contact1, .contact2, .contactpic1,
  .pressimage2, .pressimageleft, .pressimageright, .stockisttextright,
  .stockistmap, .linktextright, #linkimage, #linkeventtextright,
  #stockimagemh, #stockeventtextrightmh, #presseventtextrightmh,
  #pressimagemh, .stockmap { position:relative !important; top:auto !important; left:auto !important; right:auto !important; float:none !important; display:block; width:auto !important; max-width:100% !important; height:auto !important; min-height:0 !important; margin:10px auto !important; text-align:left; }
  .galleryimage1of3, .galleryimage2of3, .galleryimage3of3,
  .galleryimage1of4, .galleryimage2of4, .galleryimage3of4, .galleryimage4of4 { display:inline-block; vertical-align:top; margin:10px 4px !important; }
  .gallerybody .highslide { float:none !important; display:inline-block; max-width:100%; margin:5px 10px !important; }
  .gallerybody img, .aboutbody img, .contactbody img { height:auto; max-width:100%; }
  .gallerypointerR, .gallerypointerL, .gallerypointerD, .backtotop, .toppointer,
  .BuyButtonL, .BuyButtonR, .basketright { position:relative !important; top:auto !important; left:auto !important; right:auto !important; display:inline-block; margin:6px; vertical-align:middle; }
  .linkmainbodytext, .stockmainbodytextmh, .pressmainbodytextmh { height:auto !important; min-height:0 !important; }
  .footerbody { height:auto !important; padding:18px 16px 28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .footerlogo, .footeremaillogo, .footerFBlogo, .footerTWlogo, .footerIGlogo { position:static !important; left:auto !important; top:auto !important; height:auto !important; width:auto !important; margin:0; }
  .footerlogo { flex-basis:100%; }
  #mc_embed_signup { flex-basis:100%; min-width:0; }
  #mc_embed_signup form { padding:8px 0 !important; }
  #mc_embed_signup input.email { max-width:100%; min-width:0; }
  .centerfooter { position:static; top:auto; width:100%; padding:8px 0; }
  input, textarea, select { max-width:100%; }
  .pagetitle { max-width:100%; }
  #urchin_box_div { position:relative !important; left:auto !important; width:100% !important; height:auto !important; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  #urchin_box_div > div { position:relative !important; left:auto !important; top:auto !important; flex:0 0 100px; }
  /* The original slideshow plugin expects an 840px canvas. Scale it uniformly rather than cropping or changing imagery. */
  #container { margin-left:0 !important; margin-right:0 !important; transform-origin:top left; }
  #frame { pointer-events:none; }
}
@media (min-width:861px) { .mobile-menu-toggle { display:none !important; } }
@media (max-width:380px) { .mainbody { padding:0 12px; } .footerbody { padding-left:12px; padding-right:12px; } }

/* Mobile banner: preserve the original artwork and aspect ratio, centred above the menu. */
@media (max-width: 860px) {
  body > .logo {
    box-sizing: border-box;
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 850px;
    height: auto;
    margin: 0 auto 8px;
    padding: 10px 12px 0;
    overflow: visible;
  }
  body > .logo > .logocolour1 {
    display: block;
    position: relative;
    inset: auto;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  body > .logo > .logocolour1 > img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }
}


/* Collection page improvements — mobile only; desktop layout untouched. */
@media (max-width: 860px) {
  /* Header photos are supplied with fixed HTML width/height attributes. */
  .mainimage {
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    margin: 0 auto !important;
    text-align: center;
  }
  .mainimage > img, .mainimage picture img {
    display: block;
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    margin-inline: auto;
  }
  /* Gallery entries use absolute positions on desktop. Keep the entire
     image + text + purchase link grouped and centred on small screens. */
  section.container, section.container > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  .gallerybody {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    height: auto !important;
    padding: 12px 8px 18px !important;
    margin: 0 auto !important;
    text-align: center;
  }
  .gallerybody > .galleryimageleft,
  .gallerybody > .galleryimageright,
  .gallerybody > .gallerytextright,
  .gallerybody > .gallerytextleft {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    text-align: center !important;
  }
  .gallerybody > .galleryimageleft a.highslide,
  .gallerybody > .galleryimageright a.highslide {
    display: inline-block !important;
    float: none !important;
    margin: 0 auto !important;
  }
  .gallerybody > .galleryimageleft img,
  .gallerybody > .galleryimageright img { display: block; max-width: 100%; height: auto; margin-inline:auto; }
  .gallerybody > .gallerytextright,
  .gallerybody > .gallerytextleft { margin-top: 8px !important; }
  .gallerybody > .gallerypointerL,
  .gallerybody > .gallerypointerR,
  .gallerybody > .gallerypointerD { display: none !important; }
  .gallerybody .buyitbutton { display: inline-block; margin: 10px auto 0 !important; }
  .mainbodytext { margin-inline: auto !important; }
}

/* Commissions slideshow: retain the original desktop 850px slider internally.
   Mobile JS zooms the entire component so navigation, images and captions stay aligned. */
@media (max-width:860px) {
  .commisionsbody {
    width:850px !important;
    max-width:none !important;
    height:500px;
    margin:0 auto 0 0 !important;
  }
  .commisionsbody #slides { width:850px !important; }
  .commisionsbody .slides_container { width:850px !important; }
  .commisionsbody .slides_container > div { width:850px !important; }
}

/* Keep the menu interactive above the commissions slideshow on phones. */
@media (max-width: 860px) {
  .header { position:relative !important; z-index:10000 !important; }
  .header nav.is-open { position:relative; z-index:10001; }
}


/* Collections landing page: centre existing 200px rollover links on phones.
   This does not modify the original images, copy or desktop layout. */
@media (max-width: 860px) {
  .collectionsbody {
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 12px;
    margin: 0 auto !important;
    position: relative;
  }
  .collectionsbody > .collectionsimage1,
  .collectionsbody > .collectionsimage2,
  .collectionsbody > .collectionsimage3,
  .collectionsbody > .collectionsimage4,
  .collectionsbody > .collectionsimage5 {
    box-sizing: content-box;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    flex: 0 0 200px;
    width: 200px !important;
    height: 200px !important;
    margin: 0 !important;
  }
  /* Keep the 200 x 200 original artwork intact (including hover states). */
  .collectionsbody a[class^="rollover"] {
    display: block;
    width: 200px;
    height: 200px;
    max-width: none;
  }
  .collectionsbody a[class^="rollover"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  /* Remove excessive desktop-only blank spacing around the collection cards. */
  .collectionsbody + .spacer20 { height: 10px !important; }
  .collectionsbody + .spacer20 + .spacer20 { height: 10px !important; }
}
@media (max-width: 480px) {
  .collectionsbody { gap: 18px; padding: 0 10px; }
}


/* Portfolio gallery: desktop grid and mobile vertical gallery. */
.portfoliobody {
  width: min(800px, calc(100% - 32px));
  max-width: 800px;
  height: auto;
  margin: 0 auto;
}
.portfoliobody .portfolio-gallery ul {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  width: 100%;
}
.portfoliobody .portfolio-gallery li {
  display: block !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  line-height: normal !important;
  text-align: center;
}
.portfoliobody .portfolio-gallery li a {
  display: block !important;
  position: static !important;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.portfoliobody .portfolio-gallery li img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 185px !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto !important;
}
@media (min-width: 601px) and (max-width: 860px) {
  .portfoliobody .portfolio-gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 600px) {
  .portfoliobody { width: calc(100% - 36px) !important; max-width: 400px !important; }
  .portfoliobody .portfolio-gallery ul { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .portfoliobody .portfolio-gallery li img { max-width: 300px !important; width: 100% !important; }
}

/* Portfolio gallery - desktop and mobile */

.portfoliobody .portfolio-gallery ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 20px auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.portfoliobody .portfolio-gallery ul li {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.portfoliobody .portfolio-gallery ul li img {
    display: block !important;
    width: 100% !important;
    max-width: 185px !important;
    height: auto !important;
    margin: 0 auto !important;
}

@media (max-width: 800px) {
    .portfoliobody .portfolio-gallery ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .portfoliobody .portfolio-gallery ul {
        grid-template-columns: 1fr !important;
        max-width: 320px !important;
    }
}

/* Hide Highslide slideshow controls */
.highslide-controls {
    display: none !important;
}

/* Hide the entire Highslide control bar */
.text-controls {
    display: none !important;
}

/* Urchins category navigation - mobile only */
@media (max-width: 600px) {

    #urchin_box_div {
        display: grid !important;
        grid-template-columns: repeat(2, 100px);
        grid-template-rows: repeat(2, 100px);
        justify-content: center;
        gap: 15px;

        width: 100% !important;
        max-width: 100% !important;
        height: 215px !important;
        min-height: 215px !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;

        margin: 20px auto 40px !important;
        padding: 0 !important;
        box-sizing: border-box;
        clear: both;
    }

    #urchin_box1,
    #urchin_box2,
    #urchin_box3,
    #urchin_box4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 100px !important;
        height: 100px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Keep category links inside their boxes */
    #urchin_box_div a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* Urchins: allow category grid to occupy its full height */
@media (max-width: 600px) {

    .subheader:has(#urchin_box_div) {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding-bottom: 20px !important;
    }

    #urchin_box_div {
        height: auto !important;
        min-height: 215px !important;
        margin: 15px auto 20px !important;
    }
}

/* Restore logo background on mobile */
@media (max-width: 600px) {
    .site-header,
    .logo-container {
        background-color: #e8e5e1 !important;
    }
}

/* Restore original logo background on mobile */
@media (max-width: 600px) {

    .logo {
        position: relative !important;
        background-color: rgb(155, 163, 160) !important;
    }

    .logocolour {
        display: none !important;
    }

    .logocolour1 {
        position: relative !important;
        background-color: rgb(155, 163, 160) !important;
    }
}