/* =========================================
   RESET (Meyer) — condensed (same behaviour)
   ========================================= */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

/* =========================================
   SR VARS
   ========================================= */
:root{
  --album-green-deep:#223B3B; --album-green:#2F4F4F; --album-green-mid:#385F5F;
  --paper:#FBFAF6; --paper-2:#F3F0E8; --ink:#1F2424;
  --brass:#D5C08A; --brass-2:#BCA66E;
  --mint:#BFE6D3; --mint-2:#8EC9AE;
  --enamel:#2B3434;

  --lhs-search-width-inactive:10.8vw;
  --lhs-search-width-active:9vw;
  --lhs-search-height:2.4vh;

  --album-green-texture:
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px);
}

/* =========================================
   GLOBALS
   ========================================= */
a{text-decoration:none}
a:visited{color:inherit}
img{width:100%;height:100%;object-fit:contain}

.SR_LHS_FILTER_button,
.SR_LHS_FILTER_button_selected{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* =========================================
   LAYOUT WRAPPER
   ========================================= */
.SR_wrapper{display:grid;grid-template-columns:repeat(100,1fr);grid-auto-rows:auto}

/* =========================================
   LEFT PANEL (LHS)
   ========================================= */
.SR_LHS{
  grid-column:1/15;
  background:
    var(--album-green-texture),
    #2F4F4F;
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 1px;

  color:#F6F3E8;
  font-family:Arial,Helvetica,sans-serif;
  font-size:0.8vw;
  font-weight:bold;

  height:100vh;
  position:sticky;
  left:0;
  top:0;

  line-height:2vh;
}
.SR_LHS>div{grid-column:1/15;position:relative;left:0.8vw;padding:0;top:0}

/* spacer line (hidden) */
.SR_LHS_smallbreak{height:1vh;line-height:0;color:transparent;font-size:0}

/* spacer line (hidden) */
.SR_LHS_largebreak{height:2vh;line-height:0;color:transparent;font-size:0}

/* =========================================
   CLEAR BUTTONS — LHS searchbox clear
   ========================================= */
.SR_LHS_searchbox_clear_button_inactive,
.SR_LHS_searchbox_clear_button_active{
  position:relative;
  top:0;
  left:0.2vw;
  bottom:0.2vh;
  border-radius:2vw;
  font-size:0.8vw;
  font-weight:800;
  transition:all linear 80ms;
}
.SR_LHS_searchbox_clear_button_inactive{
  opacity:0;
  pointer-events:none;
  background-color:transparent;
  border-color:transparent;
  color:transparent;
  box-shadow:none;
}
.SR_LHS_searchbox_clear_button_active{
  border-color:rgba(213,192,138,0.65);
  color:#F6F3E8;
  background-color:#2B3434;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35);
}
.SR_LHS_searchbox_clear_button_active:hover{
  border-color:#8EC9AE;
  color:#BFE6D3;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35);
}
.SR_LHS_searchbox_clear_button_inactive:active,
.SR_LHS_searchbox_clear_button_active:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}

/* =========================================
   CLEAR BUTTONS — LHS filter clear buttons
   ========================================= */
.SR_LHS_grade_clear_button_inactive,
.SR_LHS_condition_clear_button_inactive,
.SR_LHS_location_clear_button_inactive,
.SR_LHS_type_clear_button_inactive,
.SR_LHS_variety_clear_button_inactive,
.SR_LHS_grade_clear_button_active,
.SR_LHS_condition_clear_button_active,
.SR_LHS_location_clear_button_active,
.SR_LHS_type_clear_button_active,
.SR_LHS_variety_clear_button_active{
  position:relative;
  left:0.5vw;
  border-radius:2vw;
  font-size:0.65vw;
  font-weight:800;
  transition:all linear 80ms;
  vertical-align:middle;
}
.SR_LHS_grade_clear_button_inactive,
.SR_LHS_condition_clear_button_inactive,
.SR_LHS_location_clear_button_inactive,
.SR_LHS_type_clear_button_inactive,
.SR_LHS_variety_clear_button_inactive{
  opacity:0;
  pointer-events:none;
  background-color:transparent;
  border-color:transparent;
  color:transparent;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.2);
}
.SR_LHS_grade_clear_button_active,
.SR_LHS_condition_clear_button_active,
.SR_LHS_location_clear_button_active,
.SR_LHS_type_clear_button_active,
.SR_LHS_variety_clear_button_active{
  border-color:#A9D9C3;
  color:#A9D9C3;
  background-color:#2B3434;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35);
}
.SR_LHS_grade_clear_button_active:hover,
.SR_LHS_condition_clear_button_active:hover,
.SR_LHS_location_clear_button_active:hover,
.SR_LHS_type_clear_button_active:hover,
.SR_LHS_variety_clear_button_active:hover{
  border-color:#8EC9AE;
  color:#BFE6D3;
}
.SR_LHS_grade_clear_button_inactive:active,
.SR_LHS_condition_clear_button_inactive:active,
.SR_LHS_location_clear_button_inactive:active,
.SR_LHS_type_clear_button_inactive:active,
.SR_LHS_variety_clear_button_inactive:active,
.SR_LHS_grade_clear_button_active:active,
.SR_LHS_condition_clear_button_active:active,
.SR_LHS_location_clear_button_active:active,
.SR_LHS_type_clear_button_active:active,
.SR_LHS_variety_clear_button_active:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}

/* =========================================
   LHS FILTER BUTTONS
   ========================================= */
.SR_LHS_button_container_title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-size:1vw;
  color:#F6F3E8;
}
.SR_LHS_button_container{display:flex}
.SR_LHS_button_right,.SR_LHS_FILTER_button_right{position:relative;left:0.2vw}

.SR_LHS_FILTER_button,
.SR_LHS_FILTER_button_selected{
  display:flex;
  align-items:center;
  padding-left:0.3vw;
  padding-top:0.2vh;
  width:6vw;              /* was 6VW */
  height:2.8vh;
  border-radius:0.6vw;
  background-color:#2B3434;
  transition:all linear 80ms;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.2);
}
.SR_LHS_FILTER_button{
  font-size:0.7vw;
  font-weight:600;
  border:rgba(213,192,138,0.55) 0.15vw solid;
  color:#F6F3E8;
}
.SR_LHS_FILTER_button_selected{
  font-size:0.75vw;
  font-weight:600;
  border:#A9D9C3 0.1vw solid;
  color:#A9D9C3;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35);
}
.SR_LHS_FILTER_button:active,
.SR_LHS_FILTER_button_selected:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}
.SR_LHS_FILTER_button:hover,
.SR_LHS_FILTER_button_selected:hover{
  color:#BFE6D3;
  border-color:#8EC9AE;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.4);
}

.SR_LHS_button_container_title>input{
  position:relative;
  left:0.5vw;
  border-radius:2vw;
  border-color:rgba(213,192,138,0.55);
  color:#F6F3E8;
  background-color:#2B3434;
  font-size:0.6vw;
  font-weight:800;
}
.SR_LHS_top_title{font-size:1.2vw;color:#F6F3E8}

/* =========================================
   LHS search inputs
   ========================================= */
.SR_LHS_searchboxes_inactive,
.SR_LHS_searchboxes_active,
.SR_LHS_searchtitle_box_inactive,
.SR_LHS_searchtitle_box_active{
  position:relative;
  top:0;
  border-color:#fff;
  border-width:0.1vw;
  border-radius:0.5vw;
  font-size:0.8vw;
  font-weight:600;
  padding-left:0.8vw;
  float:left;
}
.SR_LHS_searchboxes_inactive{width:11.1vw;height:2.4vh}
.SR_LHS_searchboxes_active{width:9.5vw;height:2.4vh}
.SR_LHS_searchtitle_box_inactive{width:12.2vw;height:2.85vh}
.SR_LHS_searchtitle_box_active{width:10.5vw;height:2.85vh}

/* =========================================
   MIDDLE COLUMN (CARDS GRID)
   ========================================= */
.SR_MID{background-color:var(--paper-2)!important;grid-column:15/87;position:relative}

.SR_MID_itemsForSaleContainer,
.SR_MID_itemsForSaleContainer4,
.SR_MID_itemsForSaleContainer5,
.SR_MID_itemsForSaleContainer6{
  display:grid;
  box-sizing:border-box;
  padding:1vw;
  gap:1vw;
}
.SR_MID_itemsForSaleContainer{grid-template-columns:repeat(5,1fr)}
.SR_MID_itemsForSaleContainer4{grid-template-columns:repeat(4,1fr)}
.SR_MID_itemsForSaleContainer5{grid-template-columns:repeat(5,1fr)}
.SR_MID_itemsForSaleContainer6{grid-template-columns:repeat(6,1fr)}

.SR_MID_itemForSale{
  font-family:Arial,Helvetica,sans-serif;
  padding:0.5vw;
  font-weight:750;
  font-size:0.7vw;
  display:grid;
  grid-template-columns:repeat (12,1fr);
  align-content:space-between;
  line-height:0.9vw;
  position:relative;

  background-color:var(--paper)!important;
  color:var(--ink)!important;
  border:0.15vw solid rgba(47,79,79,0.35)!important;
  border-radius:0.3vw;
  box-shadow:0.6vh 0.6vh 0.4vh rgba(0,0,0,0.18);
}
.SR_MID_itemForSale:hover{
  border-color:var(--album-green-mid)!important;
  box-shadow:0.8vh 0.8vh 0.6vh rgba(0,0,0,0.24);
}

.SR_MID_pictureOfStamp{grid-column:1/13;align-self:start}
.SR_MID_pictureOfStamp img{
  display:block;
  background-color:#2B2A26;
  padding:0.9vh 0;
  box-sizing:border-box;
  background-image:linear-gradient(to bottom,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.SR_MID_itemForSale:hover .SR_MID_pictureOfStamp img{background-color:#1A1A1A}

.SR_MID_itemDescription{
  grid-column:1/13;
  padding:0.2vw 0;
  display:flex;
  align-self:flex-start;
  margin:0.1vw 0.3vw 0 0.3vw;
}
.SR_MID_itemDescription a{
  color:var(--ink)!important;
  text-decoration:none;
  border-color:transparent!important;
  border-radius:0.3vw;
}
.SR_MID_itemDescription a:hover{
  border:0.1vw solid rgba(47,79,79,0.35)!important;
  background-color:rgba(243,240,232,0.75)!important;
}

/* Watchlist icon */
.SR_MID_addToWatchList,
.SR_MID_noWatchList{
  grid-column:1/3;
  background-image:url("../../images/DISPLAY3/binoculars1.jpg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left;
  padding-left:1vw;
  margin-top:0.5vw;
  position:relative;
}
.SR_MID_noWatchList{opacity:0}
.SR_MID_addToWatchList:hover{background-image:url("../../images/DISPLAY3/binoculars2.jpg")}

.SR_MID_addToWatchList::before,
.SR_MID_addToWatchList::after{
  --scale:0;
  position:absolute;
  top:-0.5vh;
  left:50%;
  transform:translateX(-50%) translateY(-100%) scale(var(--scale));
  transition:150ms transform;
  transform-origin:bottom center;
}
.SR_MID_addToWatchList::before{
  content:attr(data-tooltip);
  color:lawngreen;
  padding:0.5vh;
  border-radius:0.5vh;
  text-align:center;
  width:3.3vw;
  background:#2F4F4F;
}
.SR_MID_addToWatchList:hover::before{--scale:1}
.SR_MID_addToWatchList2{background-image:url("../../images/DISPLAY3/binoculars3.jpg")}
.SR_MID_addToWatchList2:hover{background-image:url("../../images/DISPLAY3/binoculars4.jpg")}
.SR_MID_addToWatchList3{background-image:url("../../images/DISPLAY3/binoculars3.jpg")}
.SR_MID_addToWatchList3:hover{background-image:url("../../images/DISPLAY3/binoculars2.jpg")}

/* Price pill */
.SR_MID_itemPrice{
  grid-column:3/11;
  justify-self:center;
  display:flex;
  justify-content:space-evenly;
  margin-top:0.5vw;
  padding:0.2vw;
  font-size:1vw;
  background-color:var(--enamel)!important;
  color:#F6F3E8!important;
  border:solid 0.1vw rgba(213,192,138,0.65)!important;
  border-radius:0.3vw;
}

/* Basket icon */
.SR_MID_addToBasket{
  grid-column:11/13;
  background-image:url("../../images/DISPLAY3/cart1.jpg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right;
  padding-right:1vw;
  margin-top:0.5vw;
  position:relative;
  border:none;
}
.SR_MID_addToBasket:hover{background-image:url("../../images/DISPLAY3/cart2.jpg");border:none}

.SR_MID_addToBasket::before,
.SR_MID_addToBasket::after{
  --scale:0;
  position:absolute;
  top:-0.5vh;
  left:50%;
  transform:translateX(-50%) translateY(-100%) scale(var(--scale));
  transition:150ms transform;
  transform-origin:bottom center;
  border:none;
}
.SR_MID_addToBasket::before{
  content:attr(data-tooltip);
  color:lawngreen;
  padding:0.5vh;
  border-radius:0.5vh;
  text-align:center;
  width:3.3vw;
  background:#2F4F4F;
  border:none;
}
.SR_MID_removeFromBasket::before{color:pink;background:maroon}
.SR_MID_addToBasket:hover::before{--scale:1;border:none}
.SR_MID_addToBasket2{background-image:url("../../images/DISPLAY3/cart3.jpg")}
.SR_MID_addToBasket2:hover{background-image:url("../../images/DISPLAY3/cart4.jpg")}

/* Pagination */
.div_SR_MID_pagination ul{list-style:none;text-align:center}
.div_SR_MID_pagination li{
  display:inline-block;
  align-content:space-between;
  margin-right:1vh;
  background-color:#1A1919;
  color:#fff;
  font-size:1.5vw;
  border-radius:0.3vw;
  border:0.1vw solid #1A1919;
  padding:0.3vw;
}
.div_SR_MID_pagination a{color:#fff}
.div_SR_MID_pagination a:hover{color:lawngreen}

/* No results message */
.SR_MID_noResultsMessage{
  grid-column:1/-1;
  justify-self:center;
  align-self:center;
  background-color:whitesmoke;
  border:3px solid #000;
  border-radius:2vh;
  padding:2vh 4vh;
  font-size:3vh;
  font-weight:bold;
  color:#000;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  height:5vh;
  width:max-content;
  max-width:90%;
  margin:3vh auto;
  font-family:Arial;
}

/* =========================================
   RIGHT PANEL (RHS)
   ========================================= */
.SR_RHS{
  grid-column:87/101;
  background:
    var(--album-green-texture),
    #2F4F4F;
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 1px;

  color:#F6F3E8;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.1vw;
  height:100vh;
  position:sticky;
  right:0;
  top:0;
  padding-left:.8vw;
  padding-right:1vw;
}

.SR_RHS_searchboxes,
.SR_RHS_minmax_searchboxes{
  position:relative;
  height:3.2vh;
  top:0;
  border-color:#fff;
  border-width:0.1vw;
  border-radius:0.5vw;
  font-size:0.8vw;
  font-weight:600;
  padding-left:0.8vw;
}
.SR_RHS_searchboxes{width:10.5vw}
.SR_RHS_minmax_searchboxes{left:1vw;float:left}
.SR_RHS_minmax_searchboxes_active{width:8.7vw}
.SR_RHS_minmax_searchboxes_inactive{width:10.2vw}
.SR_RHS_title{font-size:1vw;font-weight:600;color:#F6F3E8}

/* RHS min/max clear button */
.SR_RHS_minmax_price_clear_button_inactive,
.SR_RHS_minmax_price_clear_button_active{
  position:relative;
  top:1px;
  left:1.2vw;
  border-radius:2vw;
  font-weight:800;
  transition:all linear 80ms;
  background-color:#2B3434;
  font-size:0.8vw;
  border-color:rgba(213,192,138,0.55);
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.2);
}
.SR_RHS_minmax_price_clear_button_inactive{
  opacity:0;
  pointer-events:none;
  border-color:transparent;
  color:transparent;
}
.SR_RHS_minmax_price_clear_button_active{
  border-color:#A9D9C3;
  color:#A9D9C3;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35);
}
.SR_RHS_minmax_price_clear_button_active:hover{border-color:#8EC9AE;color:#BFE6D3}
.SR_RHS_minmax_price_clear_button_inactive:active,
.SR_RHS_minmax_price_clear_button_active:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}

/* RHS link/buttons */
.SR_RHS_links{
  font-size:1.2vw;
  font-weight:600;
  text-align:center;
  padding:0.5vw;
  width:9.4vw;
  left:0.7vw;
  border:0.15vw solid rgba(213,192,138,0.55);
  border-radius:1.5vw;
  position:relative;
  top:0;
  text-decoration:none;
  background-color:#2B3434;
  color:#F6F3E8;
  transition:all linear 80ms;
  box-shadow:0.6vh 0.6vh 0.4vh rgba(0,0,0,0.2);
}
.SR_RHS_links:hover{
  color:#BFE6D3;
  border-color:#8EC9AE;
  box-shadow:0.6vh 0.6vh 0.4vh rgba(0,0,0,0.4);
}
.SR_RHS_links:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}

/* Homepage title pill */
.SR_RHS_homepageTitle{
  font-size:1.4vw;
  font-weight:600;
  border:0.15vw solid rgba(213,192,138,0.65);
  color:#F6F3E8;
  border-radius:1.5vw;
  background-color:#2B3434;
  border-width:0.2vw;
  transition:all linear 80ms;
  padding:1.2vh 0 1vh 0;
}
.SR_RHS_homepageTitle:active{
  -webkit-transform:translateY(0.1vw);
  transform:translate(0.1vw,0.1vw);
}

/* Match width of RHS buttons */
.SR_RHS_homepageTitle{
  width:10.4vw;
  display:block;
  text-align:center;
}

/* View selectors */
#SR_RHS_view input,
#SR_RHS_view_selected input{
  width:9.8vw;
  height:4.4vh;
  font-size:1vw;
  left:1.2vw;
  text-align:center;
  line-height:0;
  background-color:#2B3434;
}
#SR_RHS_view input{
  border:0.15vw solid rgba(213,192,138,0.55);
  color:#F6F3E8;
}
#SR_RHS_view input:hover{
  border:0.15vw solid #8EC9AE;
  color:#BFE6D3;
}
#SR_RHS_view_selected input{
  border:#A9D9C3 0.15vw solid;
  color:#A9D9C3;
  box-shadow:0.6vh 0.6vh 0.4vh rgba(0,0,0,0.4);
}
#SR_RHS_view_selected input:hover{
  border:0.15vw solid #8EC9AE;
  color:#BFE6D3;
}

.space_between_buttons{height:0.7vh}

.SR_RHS_basket,
.SR_RHS_create{
  color:#F6F3E8;
  text-decoration:none;
  background-color:#2B3434;
  border-color:rgba(213,192,138,0.55);
  border-width:0.2vw;
}

.SR_RHS_log,
.SR_RHS_log:link,
.SR_RHS_log:visited{
  background-color:#2B3434 !important;
  color:#F6F3E8 !important;
  border-color:rgba(213,192,138,0.55) !important;
  border-width:0.2vw;
}
.SR_RHS_log:hover{color:#BFE6D3 !important;border-color:#8EC9AE !important}
.SR_RHS_log:active{transform:translate(0.1vw,0.1vw)}

/* misc */
.copy2{font-size:0.6vw;margin-left:0.4vw}
.price_box{border:0.2vh white;border-radius:1vh;padding:1vh;color:red}
.details{color:paleturquoise;font-size:1.1vw}
.details:hover{color:lawngreen;text-decoration:underline;cursor:pointer}
.add_for_free_postage{font-size:1.35vh;text-align:center}
.basket_user_logged_in{color:palegoldenrod}
.basket_user_guest{color:#ff7e7a}
.rhbreak{height:3vh}
.toggle{width:10.7vw;margin-left:-1.4vw}
.filter_button_red{background-color:red !important}

/* =========================================
   DOWNLOAD BUTTONS
   ========================================= */
.download-btn,.download-btn2{
  background-color:#2B3434;
  color:#F6F3E8;
  padding:6px 24px;
  font-size:1.4vh;
  border:none;
  border-radius:16px;
  cursor:pointer;
  width:10.5vw;
  border:2px solid rgba(213,192,138,0.55);
  position:relative;
}
.download-btn{top:1vh}
.download-btn2{top:0}
.download-btn:hover,.download-btn2:hover{
  background-color:#2B3434;
  color:#BFE6D3;
  border-color:#8EC9AE;
}
.button-wrapper{text-align:center}

/* =========================================
   CARD TITLE TYPO POLISH (preserved)
   NOTE: your vars here (sr-ink/sr-paper/sr-mount-bd) are not defined;
   leaving as-is because you said "preserved"
   ========================================= */
.SR_MID_itemDescription a{
  color:var(--sr-ink);
  text-decoration:none;
  border:0.1vw solid transparent;
  border-radius:0.3vw;
  box-sizing:border-box;
  font-family:"Source Sans 3",Arial,sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
}
.SR_MID_itemDescription a:hover{
  border-color:var(--sr-mount-bd);
  background-color:var(--sr-paper);
}
.SR_MID_itemDescription{display:flex;align-items:flex-start;min-height:2.6em}

/* =========================================
   SR LHS LOGO
   ========================================= */
.SR_LHS_logo{
  width:100%;
  margin-top:2vh;
  margin-bottom:0.5vh;
  margin-left:-1vw;
  margin-right:-1vw;
  padding-left:1vw;
  padding-right:1vw;
  text-align:center;
}
.SR_LHS_logoLink{display:block}
.SR_LHS_logo img{display:block;margin:0 auto;width:70%;height:auto}

/* =========================================
   LAPTOP ONLY (1101–1700px)
   ========================================= */
@media (min-width:1101px) and (max-width:1700px){
  .SR_RHS_basket,.SR_RHS_create,.SR_RHS_log{
    display:block !important;
    margin-bottom:-0.5vh !important;
  }
}
/* was outside in your file; kept outside */
.SR_RHS_log{display:block !important;margin-bottom:0 !important}

/* ==========================================================
   LAPTOP ONLY – tighten top RHS button spacing
   Fix copyright pushed off bottom
   ========================================================== */
@media (min-width:1101px) and (max-width:1700px){
  :root{ --rhs-top-gap: -1.1vh; }
  .SR_RHS_homepageTitle,
  .SR_RHS_links:nth-of-type(1),
  .SR_RHS_links:nth-of-type(2),
  .SR_RHS_links:nth-of-type(3){
    margin-bottom: var(--rhs-top-gap) !important;
  }
}

/* ==========================================================
   iPad LANDSCAPE (768–1100)
   FIXED LHS/RHS, scrollable MID
   - no horizontal scroll in sidebars
   - RHS cannot overlap MID
   - uses one shared --side-w
   ========================================================== */
@media (min-width:768px) and (max-width:1100px) and (orientation:landscape){

  /* =========================
     Variables (single source of truth)
     ========================= */
  :root{
    /* Sidebar width */
    --side-w: clamp(140px, 14vw, 190px);

    /* LHS controls */
    --lhs-search-h: 3.2vh;      /* unified height */
    --lhs-x-space: 1.9vw;       /* reserve space for clear X */
    --lhs-input-w: 12.2vw;      /* base width used for fixed-width calc */

    /* RHS “old feel” controls */
    --rhs-control-w: 86%;
    --rhs-control-left: 7%;
    --rhs-gap: .7vh;
    --rhs-gap-big: 2vh;
  }

  /* =========================
     Hard stability rules
     ========================= */
  *, *::before, *::after{ box-sizing: border-box !important; }

  html, body{
    height: calc(var(--vvh, 1vh) * 100) !important;
    overflow: hidden !important; /* whole page never scrolls */
  }

  .SR_wrapper{
    display: block !important;
    height: calc(var(--vvh, 1vh) * 100) !important;
  }

  input, select, button, textarea{ max-width: 100% !important; }

  .SR_LHS, .SR_RHS{
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* If <br> is used as spacing, iPad can exaggerate it */
  .SR_LHS br{ display:none !important; }

  /* =========================
     LEFT (fixed)
     ========================= */
  .SR_LHS{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: var(--side-w) !important;
    height: auto !important;

    padding-left: .8vw !important;
    padding-right: .8vw !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1000 !important;
  }

  /* This is the big one: your desktop offset makes iPad overflow */
  .SR_LHS > div{
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* =========================
     RIGHT (fixed)
     ========================= */
  .SR_RHS{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;

    width: var(--side-w) !important;
    height: auto !important;

    /* symmetric padding helps centering feel */
    padding-left: .8vw !important;
    padding-right: .8vw !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1000 !important;
  }

  /* =========================
     MIDDLE (scrollable)
     ========================= */
  .SR_MID{
    position: relative !important;
    margin-left: var(--side-w) !important;
    margin-right: var(--side-w) !important;

    height: calc(var(--vvh, 1vh) * 100) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    background-color: var(--paper-2) !important;
  }

  /* ==========================================================
     LHS tuning (your current “perfect” setup)
     ========================================================== */

  /* unified height */
  .SR_LHS_searchboxes_inactive,
  .SR_LHS_searchboxes_active,
  .SR_LHS_searchtitle_box_inactive,
  .SR_LHS_searchtitle_box_active{
    height: var(--lhs-search-h) !important;
    line-height: var(--lhs-search-h) !important;
  }

  /* FIXED width (prevents X overflow) */
  .SR_LHS_searchboxes_inactive,
  .SR_LHS_searchboxes_active,
  .SR_LHS_searchtitle_box_inactive,
  .SR_LHS_searchtitle_box_active{
    width: calc(var(--lhs-input-w) - var(--lhs-x-space)) !important;
  }

  /* gap below logo / above first search box */
  .SR_LHS_logo{ margin-bottom: 2.5vh; }
  .SR_LHS_search_category{ margin-top: 1.5vh; }

  /* circular X */
  .SR_LHS_searchbox_clear_button_inactive,
  .SR_LHS_searchbox_clear_button_active{
    width: 3vh !important;
    height: 3vh !important;
    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    line-height: 1 !important;
    top: 0.1vh !important;
  }

  /* smaller grey placeholder text */
  .SR_LHS_searchtitle_box_inactive::placeholder,
  .SR_LHS_searchtitle_box_active::placeholder,
  .SR_LHS_searchboxes_inactive::placeholder,
  .SR_LHS_searchboxes_active::placeholder{
    font-size: 0.75vw;
    color: #9aa3a3;
  }

  /* logo image (leave as you have it) */
  .SR_LHS_logo img{
    display: block;
    margin: 0 auto;
    width: 85%;
    height: auto;
    margin-left: 1.83vw;
  }

  /* ==========================================================
     RHS “old searchResults.css feel” (but fixed-sidebar safe)
     ========================================================== */

  /* Core RHS blocks sized/centred consistently */
  .SR_RHS_links,
  #SR_RHS_view input,
  #SR_RHS_view_selected input,
  .download-btn,
  .download-btn2,
  .toggle{
    width: var(--rhs-control-w) !important;
    max-width: 100% !important;

    position: relative !important;
    left: var(--rhs-control-left) !important;

    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center;
  }

/* make QVS home match the View Basket width */
.SR_RHS_homepageTitle{
  width: 10.7vw !important;
  left: var(--rhs-control-left) !important;
  display: block !important;
  box-sizing: border-box !important;
}


  /* RHS search boxes */
  .SR_RHS_searchboxes{
    width: var(--rhs-control-w) !important;
    left: var(--rhs-control-left) !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Min/max pair stays on one row */
  .SR_RHS_minmax_searchboxes{
    width: calc((var(--rhs-control-w) - 6%) / 2) !important;
    position: relative !important;
    left: var(--rhs-control-left) !important;
    float: left !important;
    box-sizing: border-box !important;
  }

  /* prevent width “jump” between active/inactive */
  .SR_RHS_minmax_searchboxes_active,
  .SR_RHS_minmax_searchboxes_inactive{
    width: calc((var(--rhs-control-w) - 6%) / 2) !important;
  }

  /* Clear button positions reliably within fixed sidebar */
  .SR_RHS_minmax_price_clear_button_inactive,
  .SR_RHS_minmax_price_clear_button_active{
    position: relative !important;
    left: calc(var(--rhs-control-left) + var(--rhs-control-w) - 3.2vh) !important;
    top: 0.1vh !important;
  }

  /* spacing divs */
  .space_between_buttons{ height: var(--rhs-gap) !important; }
  .space_between_buttons_RHS{ height: var(--rhs-gap-big) !important; }

  /* last safety net */
  .SR_RHS *{ max-width: 100% !important; }
  
  .SR_RHS_searchboxes{
  width: 96% !important;     /* wider than buttons */
  left: -0% !important;       /* keep centred */
}

.SR_RHS_minmax_searchboxes_active{
    width: 12vw;
}
  
  
}


@media (min-width:768px) and (max-width:1100px) and (orientation:landscape){

  /* =========================
     RHS MIN/MAX WIDTH (direct)
     ========================= */

  /* 1) One knob: how wide each min/max box should be */
  :root{
    --rhs-minmax-w: 74%;   /* try 46% or 47% if you have room */
    --rhs-minmax-gap: 2%;  /* space between min & max */
    --rhs-minmax-left: 6%; /* horizontal centering offset */
  }

  /* 2) Force the min/max inputs to the widths you want */
  .SR_RHS_minmax_searchboxes{
    width: var(--rhs-minmax-w) !important;
    max-width: var(--rhs-minmax-w) !important;
    box-sizing: border-box !important;
    float: left !important;
    position: relative !important;
    left: var(--rhs-minmax-left) !important;
  }

  /* Add a gap between Min and Max (only on the first one) */
  .SR_RHS_minmax_searchboxes[name="min_price"]{
    margin-right: var(--rhs-minmax-gap) !important;
  }

  /* Kill your active/inactive “jump” widths */
  .SR_RHS_minmax_searchboxes_active,
  .SR_RHS_minmax_searchboxes_inactive{
    width: var(--rhs-minmax-w) !important;
    max-width: var(--rhs-minmax-w) !important;
  }

  /* 3) Make sure the X button is visible and not pushed off-screen */
  .SR_RHS_minmax_price_clear_button_inactive,
  .SR_RHS_minmax_price_clear_button_active{
    position: relative !important;
    left: var(--rhs-minmax-left) !important;
    margin-left: 0 !important;

    /* keep it on the same line as the inputs */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 3.2vh !important;
    height: 3.2vh !important;
    border-radius: 50% !important;
  }

  /* Optional: if the clear button is currently being hidden */
  .SR_RHS_minmax_price_clear_button_inactive{
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .SR_RHS_minmax_price_clear_button_active{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* =========================
   RHS Min/Max clear (X) — match standard LHS styling
   ========================= */
.SR_RHS_minmax_price_clear_button_inactive,
.SR_RHS_minmax_price_clear_button_active{

  /* perfect circle */
  width: 3vh !important;
  height: 3vh !important;
  border-radius: 50% !important;

  /* centre the X */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  line-height: 1 !important;
  font-size: 1.4vh !important;
  font-weight: 800 !important;

  /* base colours (same as LHS active button theme) */
  background-color: #2B3434 !important;
  border: 0.15vw solid rgba(213,192,138,0.65) !important;
  color: #F6F3E8 !important;

  box-shadow: 0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35) !important;

  transition: all linear 80ms !important;
}

/* inactive = hidden but keeps layout */
.SR_RHS_minmax_price_clear_button_inactive{
  opacity: 0 !important;
  pointer-events: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
}

/* hover = mint highlight (same as rest of site) */
.SR_RHS_minmax_price_clear_button_active:hover{
  border-color: #8EC9AE !important;
  color: #BFE6D3 !important;
}

/* pressed effect */
.SR_RHS_minmax_price_clear_button_active:active{
  transform: translate(0.1vw, 0.1vw) !important;
}

/* =========================
   Equalise spacing:
   Min → Max  ==  Max → X
   ========================= */

/* remove any margin currently on the X */
.SR_RHS_minmax_price_clear_button_active,
.SR_RHS_minmax_price_clear_button_inactive{
  margin-left: 0 !important;
}

/* apply the SAME gap to the Max input instead */
.SR_RHS_minmax_searchboxes[name="max_price"]{
  margin-right: var(--rhs-minmax-gap) !important;
}

.SR_LHS{
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;            /* if sticky is creating the gap */
  }

}

/* =========================================================
   RHS MIN/MAX CLEAR (X) — COLOUR ONLY OVERRIDE
   (No layout changes: no width/left/position/float/etc.)
   ========================================================= */

/* ACTIVE X: match your album buttons */
.SR_RHS_minmax_price_clear_button_active{
  background-color:#2B3434 !important;
  border-color:rgba(213,192,138,0.65) !important; /* brass */
  color:#F6F3E8 !important;                        /* paper text */
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.35) !important;
}

/* HOVER: mint highlight */
.SR_RHS_minmax_price_clear_button_active:hover{
  border-color:#8EC9AE !important;
  color:#BFE6D3 !important;
}

/* INACTIVE X: keep it hidden exactly like your existing behaviour */
.SR_RHS_minmax_price_clear_button_inactive{
  background-color:transparent !important;
  border-color:transparent !important;
  color:transparent !important;
  box-shadow:none !important;
}