/* ==========================================================
   oneListing.css — BASE (use as foundation for later breakpoints)
   Condensed version — no layout/functionality changes
   Updated: uses shared theme CSS vars + adds texture to green panels
   ========================================================== */

/* ---- RESET (Meyer) ---- */
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; }

/* ==========================================================
   OL-LOCAL VARS ONLY
   (Theme vars now live in your shared album-theme.css)
   ========================================================== */
:root{
  --shadow: 0.6vh 0.6vh 0.45vh rgba(0,0,0,0.18);
  --shadow-strong: 0.85vh 0.85vh 0.6vh rgba(0,0,0,0.24);

  --radius-card: 0.45vw;
  --radius-pill: 1.4vw;

  /* map OL brass to shared brass */
  --ol-brass: var(--brass);

  --ol-zoom-shift-y:-1.4vh; /* negative = move zoomed image UP */
}

/* ---- GLOBALS ---- */
html, body{ height:100%; }

body{
  background: var(--paper-2); /* from shared theme */
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}

a{ text-decoration:none; color:inherit; }
a:visited{ color:inherit; }

/* keep your current behaviour */
img{ width:100%; height:100%; object-fit:contain; }

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

/* ==========================================================
   LEFT PANEL (LHS) — ALBUM GREEN + TEXTURE (from shared theme)
   ========================================================== */
.OL_LHS{
  grid-column: 1/15;
  background-color: var(--album-green);
  background-image: var(--album-green-texture);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;

  color:#F6F3E8;
  font-size:0.8vw;
  height:100vh;
  position:sticky;
  left:0; top:0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
  overflow: visible;
}
.OL_LHS>div{ position:relative; padding:1vw; top:1vh; overflow:visible; }

.OL_LHS_wrapper{
  font-size:1.75vh;
  font-weight:700;
  padding-right:2.2vw;
  line-height:1vh;
  display:block;
  overflow:visible;
}

/* LHS row helpers (used by your PHP markup now) */
.OL_LHS_row{ margin:0 0 0.85vh 0; line-height:1.6em; }
.OL_LHS_sectionGap{ height:2.2vh; }

/* Brass titles (final) */
/* ==========================================================
   LHS MAIN SECTION HEADERS
   (Item Details / Cancellation / Item Variations)
   Match the finer label typography like “Condition:”
   ========================================================== */
.OL_LHS_sectionTitle{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.015em;

  font-size: 1.95vh;
  color: var(--ol-brass);

  display: inline-block;
  padding-bottom: 0.22vh;

  border-bottom: 0.14vh solid var(--ol-brass);
  box-shadow: inset 0 -0.14vh 0 0 var(--ol-brass);

  margin: 0 0 0.9vh 0;
  line-height: 1.35em;
  background: transparent;
}

.OL_LHS_subSectionTitle{
  color: var(--ol-brass);
  padding-right:0.35vw;
}
.OL_LHS_cancellationDetailsSectionTitle,
.OL_LHS_cancellationDetailsSubSectionTitle{ color: var(--ol-brass); }

/* ==========================================================
   MIDDLE PANEL (MID)
   ========================================================== */
.OL_MID{
  grid-column: 15/87;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
  overflow: visible;
}
.OL_MID_wrapper{
  display:grid;
  grid-template-columns:repeat(100, 1fr);
  gap:1vh;
  margin-top:1vh;
  overflow: visible;
}

/* Buying options column (keep placement) */
.OL_MID_priceAndBuyingOptions{
  grid-column:8/25;
  grid-row:2/14;
  display:grid;
  align-content:space-evenly;
  gap:0.9vh;
}

/* Shared pill/card border */
.OL_MID_box1_price,
.OL_MID_box2_buyItNow,
.OL_MID_box3_addToBasket,
.OL_MID_box3_addToBasket_2,
.OL_MID_box4_addToWatch,
.OL_MID_box4_addToWatch_2{
  border:0.15vw solid rgba(47,79,79,0.35);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: all 120ms linear;
}

/* price */
.OL_MID_box1_price{
  padding:0.5vw;
  display:flex;
  justify-content:center;
  align-items:center;
  height:5vh;
  font-size:3vh;
  color: rgba(31,36,36,0.85);
  font-weight:700;
}

/* action buttons */
.OL_MID_box2_buyItNow,
.OL_MID_box3_addToBasket,
.OL_MID_box3_addToBasket_2,
.OL_MID_box4_addToWatch,
.OL_MID_box4_addToWatch_2{
  padding:0.45vw 0.6vw;
  height:5vh;
  display:flex;
  align-items:center;
  justify-content:space-around;
  text-align:center;
  font-size:0.9vw;
  color: rgba(31,36,36,0.88);
  font-weight:600;
}

.OL_MID_box2_buyItNow:hover,
.OL_MID_box3_addToBasket:hover,
.OL_MID_box4_addToWatch:hover{
  border-color: rgba(142,201,174,0.95);
  background: rgba(191,230,211,0.18);
  box-shadow: var(--shadow-strong);
  transform: translateY(-0.1vh);
}

/* selected */
.OL_MID_box3_addToBasket_2,
.OL_MID_box4_addToWatch_2{
  border-color: rgba(142,201,174,0.95);
  box-shadow: 0.75vh 0.75vh 0.55vh rgba(0,0,0,0.22);
}
.OL_MID_box3_addToBasket_2:hover,
.OL_MID_box4_addToWatch_2:hover{
  border-color: rgba(215,7,21,0.65);
  box-shadow: var(--shadow-strong);
}

/* press */
.item{ transition: all 80ms linear; }
.item:active{ -webkit-transform: translateY(0.1vh); transform: translate(0.1vh, 0.1vh); }

/* icon sizing (do NOT remove — stops “giant icons”) */
.image_buyItNow{ max-height:5vh; width:auto; }
.image_addToBasket{ max-height:4vh; width:auto; }
.image_addToWatch{ max-height:4vh; width:auto; }

/* text sizing */
.OL_MID_box3_addToBasket,
.OL_MID_box3_addToBasket_2,
.OL_MID_box4_addToWatch,
.OL_MID_box4_addToWatch_2,
.OL_MID_box2_buyItNow,
.priceTitle{ font-size:1.1vw; }
.priceTitle{ font-size:1.4vw; font-weight:700; color: rgba(31,36,36,0.85); }

/* ==========================================================
   MAIN IMAGE (front) — mount + pop-out zoom
   ========================================================== */
.OL_MID_box5_frontImage{
  grid-column:31/71;
  grid-row:2/14;

  border:0.15vw solid rgba(47,79,79,0.35);
  border-radius: var(--radius-card);

  background:#1A1919;
  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),
    var(--shadow);

  min-height:58vh;
  display:flex;
  justify-content:center;
  align-items:center;

  position:relative;
  overflow: visible;
}
.OL_MID_box5_frontImage:hover{ z-index:50; }

/* mount */
.OL_MID_box5_frontImage .OL_stampMount{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;

  background-color:#2B2A26;
  padding:0.9vh 0 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);
}
.OL_MID_box5_frontImage:hover .OL_stampMount{ background-color:#1A1A1A; }

/* image itself (both ids/classes supported) */
#OL-MID_box5_frontImage_image,
.OL_MID_box5_frontImage .OL_stampMount img{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;

  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;

  object-fit:contain !important;
  display:block !important;

  position:relative;
  z-index:60;
  transition: transform 160ms ease;
  transform-origin: top center;
}

/* magnifier wrapper (lens hidden) */
.magnifier-container{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  overflow: visible;
}
.magnify-image{ width:100%; height:auto; display:block; object-fit:contain; transform-origin:center top; }
.magnifier-lens{
  position:absolute;
  border-radius:50%;
  background:none;
  opacity:0;
  pointer-events:none;
  width:0; height:0;
}

/* ==========================================================
   THUMBNAILS BOX
   ========================================================== */
.OL_MID_box6_moreImages_1,
.OL_MID_box6_moreImages_2{
  border:0.15vw solid rgba(47,79,79,0.35);
  border-radius: var(--radius-card);
  background: var(--paper);
  padding:0.5vw;
  text-align:center;
  color: var(--ink);
  font-size:1.5vh;
  font-weight:800;
  box-shadow: var(--shadow);
}
.OL_MID_box6_moreImages_1{ grid-column:76/91; grid-row:6/9; }
.OL_MID_box6_moreImages_2{ grid-column:73/98; grid-row:6/9; }

.image-container_1{ display:grid; grid-template-columns:repeat(1,1fr); gap:10px; }
.image-container_2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

.image-item{
  max-height:200px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:0.3vw;
  background: rgba(43,52,52,0.06);
  border:1px solid rgba(47,79,79,0.18);
  transition: all 120ms linear;
}
.image-item:hover{
  border-color: rgba(142,201,174,0.65);
  box-shadow: 0.35vh 0.35vh 0.35vh rgba(0,0,0,0.18);
}
.image-item img{ width:100%; height:auto; max-height:200px; }

/* ==========================================================
   TITLE / DESCRIPTION “CARD” (no shadow)
   ========================================================== */
.OL_MID_box7_itemText{
  grid-column:4/98;
  grid-row:15/16;
  align-self:stretch;

  padding:1vw;
  border:0.15vw solid rgba(47,79,79,0.35);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow:none;
}
.OL_MID_box7_itemText_title{
  font-family:"Source Sans 3", Arial, sans-serif;
  font-size:2.5vh;
  font-weight:700;
  text-align:center;
  line-height:1.25em;
  margin-bottom:0.6vh;
  color: var(--ink);
}
.OL_MID_box7_itemText_description{
  font-size:2.2vh;
  line-height:2.6vh;
  color: rgba(31,36,36,0.92);
  margin-top:-1vh;
}

/* ==========================================================
   CERTS + OFFERS (darker parchment, no shadow)
   ========================================================== */
.OL_MID_box9_certificatesAndGuarantees,
.OL_MID_box10_specialOffers{
  padding:1vw;
  color: var(--ink);
  align-self:stretch;

  border:0.15vw solid rgba(47,79,79,0.45);
  border-radius: var(--radius-card);
  background: linear-gradient(to bottom, #EEE9DD, #E6E0D2);
  box-shadow:none;
  line-height:2.2vh;
}
.OL_MID_box9_certificatesAndGuarantees{ grid-column:4/65; grid-row:16/17; }
.OL_MID_box10_specialOffers{ grid-column:65/98; grid-row:16/17; }

.OL_MID_box9_certificatesAndGuarantees_title,
.OL_MID_box10_specialOffers_title{
  font-family:"Source Sans 3", Arial, sans-serif;
  font-size:2.35vh;
  font-weight:700;
  line-height:1.25em;

  text-decoration:none;
  border-bottom:1px solid rgba(47,79,79,0.25);
  padding-bottom:0.35vh;

  display:block;
  margin-bottom:-0.8vh;
}
.OL_MID_box9_certificatesAndGuarantees_description,
.OL_MID_box10_specialOffers_description{
  font-size:2.0vh;
  line-height:2.45vh;
}

/* ==========================================================
   RIGHT PANEL (RHS) — ALBUM GREEN + TEXTURE (from shared theme)
   ========================================================== */
.OL_RHS{
  grid-column:87/101;
  background-color: var(--album-green);
  background-image: var(--album-green-texture);
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;

  color:#F6F3E8;
  height:100vh;
  position:sticky;
  right:0; top:0;
  text-align:center;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
}

.OL_RHS_box{
  padding:0.55vw;
  border:0.2vw solid rgba(213,192,138,0.55);
  border-radius:1.5vw;
  margin:1vw 1.5vw;
  background: var(--enamel);

  transition: all 80ms linear;
  box-shadow: var(--shadow);
  font-weight:700;
  letter-spacing:0.01em;
}
.OL_RHS_box:hover{
  border-color: rgba(142,201,174,0.85);
  color: var(--mint);
  box-shadow: var(--shadow-strong);
}
.OL_RHS_box:active{ -webkit-transform: translateY(0.1vh); transform: translate(0.1vh, 0.1vh); }

.OL_RHS_link{ color:inherit; text-decoration:none; }
.OL_RHS_link_button{
  background:transparent;
  border:none;
  margin:0; padding:0;
  font-size:1vw;
  font-weight:700;
}
button.OL_RHS_link{
  all: unset;
  display:block;
  width:100%;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}

.OL_RHS_indexBox{
  font-size:1.35vw;
  font-weight:800;
  padding:1.2vh 0 1vh 0;
  position:relative;
  top:1vh;
}
.OL_RHS_viewBasketBox,
.OL_RHS_logInBox,
.OL_RHS_createAcountBox{
  color:#F6F3E8;
  font-size:1.15vw;
  position:relative;
  top:1vh;
  font-weight:700;
}
.OL_RHS_askQuestionBox{ color:#F6F3E8; font-size:1.0vw; }
.OL_RHS_backToSearchBox{ font-size:1.35vw; width:9.5vw; color:#F6F3E8; }

.OL_RHS_search_searchBar{
  display:flex;
  flex-wrap:wrap;
  border-radius:0.5vw;
  justify-content:center;
}
.OL_RHS_search_button{ display:none; }

/* main search input */
input[type=search]{
  width:10.7vw;
  height:3vh;
  font-size:1vw;
  border:0.15vw solid rgba(213,192,138,0.65);
  border-radius:0.5vw;
  padding:0.5vw;
  margin-left:1.7vw;
  position:relative;
  top:2vh;

  background: var(--enamel);
  color:#F6F3E8;
  outline:none;
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.2);
}
input[type=search]::placeholder{ color: rgba(246,243,232,0.65); }
input[type=search]:focus{
  border-color: rgba(142,201,174,0.9);
  box-shadow: 0 0 0.35em rgba(142,201,174,0.25), 0.4vh 0.4vh 0.4vh rgba(0,0,0,0.25);
}

.OL_RHS_SR_RHS_search_box{
  border-radius:0.5vw;
  font-size:2vh;
  min-height:5vh;
}

/* Search Shop input (light paper) */
.OL_RHS_search_shop .OL_RHS_SR_RHS_search_box{
  background:#F3F0E8;
  color: rgba(31,36,36,0.95);
  border:0.15vw solid rgba(213,192,138,0.65);
  box-shadow:0.4vh 0.4vh 0.4vh rgba(0,0,0,0.2);
  margin-left:0;
}
.OL_RHS_search_shop .OL_RHS_SR_RHS_search_box::placeholder{ color: rgba(31,36,36,0.55); }
.OL_RHS_search_shop .OL_RHS_SR_RHS_search_box:focus{
  background:#fff;
  border-color: rgba(142,201,174,0.9);
  box-shadow: 0 0 0.35em rgba(142,201,174,0.25), 0.4vh 0.4vh 0.4vh rgba(0,0,0,0.25);
}

/* footer */
.copy2{ font-size:0.6vw; padding:0 1vw; color: rgba(246,243,232,0.75); }

/* ==========================================================
   ADMIN BUTTON COLOURS
   ========================================================== */
.edit{ color:#F6F3E8; position:relative; top:-2vh; }

.new{ position:relative; top:0.5vh; }
.OL_RHS_link.new .OL_RHS_box.new{
  background:#cc3073;
  border-color: rgba(0,0,0,0.6);
  color:#fff;
}
.OL_RHS_link.new .OL_RHS_box.new:hover{
  background:#a3265c;
  border-color: rgba(0,0,0,0.75);
  color:#fff;
}
.cert{ position:relative; top:1vh; }

/* ==========================================================
   MODAL (admin edit panel)
   ========================================================== */
.modal{
  position:fixed;
  inset:0;
  background-color: rgba(0,0,0,0.25);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  z-index:9999;
}
.modal-content{
  background:#f0f0f0;
  width:35vw;
  height:100vh;
  border-radius:10px 0 0 10px;
  padding:20px;
  box-sizing:border-box;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  margin-left:65vw;
}
.modal-header{ display:flex; align-items:center; gap:10px; }
.modal-header h2{ margin:0; font-size:1.5vw; font-weight:800; }

.close{
  font-size:4vh;
  font-weight:1000;
  color:#666;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  line-height:1;
}
.close:hover{ color:red; }

.full-width{ width:100%; margin-bottom:20px; }
.full-width input[type="text"],
.full-width textarea{ width:100%; box-sizing:border-box; }

.form-columns{ display:flex; gap:20px; margin-top:0; flex:1; overflow-y:auto; }
.form-column{ flex:1; display:flex; flex-direction:column; gap:12px; }

label{ font-weight:800; margin-bottom:0.6vh; font-size:1.7vh; }

input[type="text"], textarea{
  padding:0.6vh 0.8vh;
  border:0.2vh solid #ccc;
  border-radius:0.4vh;
  font-size:0.8vw;
  width:100%;
  box-sizing:border-box;
}
textarea{ resize:vertical; min-height:4vh; font-size:1.8vh; }

button[type="submit"]{
  margin-top:2vh;
  padding:1vh 2vh;
  background-color:#007BFF;
  border:none;
  border-radius:2vh;
  color:#fff;
  cursor:pointer;
  font-size:1.5vw;
  font-weight:700;
  align-self:flex-start;
  transition: background-color 0.2s ease;
  width:30vw;
  margin-left:1.5vw;
}
button[type="submit"]:hover{ background-color:#0056b3; }

input[list]{
  width:14.4vw;
  padding:8px 12px;
  font-size:16px;
  border:2px solid #666;
  border-radius:6px;
  outline:none;
  transition: border-color 0.2s ease;
}
input[list]:focus{
  border-color:#007BFF;
  box-shadow:0 0 5px rgba(0,123,255,0.35);
  background-color:#fff;
}
.form-group label{ font-size:2.2vh; }

/* ==========================================================
   RHS BUTTON STACK — refined vertical rhythm (+45% total)
   ========================================================== */

/* Increase spacing between buttons */
.OL_RHS_box{
  margin: 1.45vw 1.5vw;
}

/* Re-centre stack visually after added spacing */
.OL_RHS_indexBox,
.OL_RHS_viewBasketBox,
.OL_RHS_logInBox,
.OL_RHS_createAcountBox{
  top: 1.45vh;
}

/* ==========================================================
   RHS BUTTON TYPOGRAPHY — unified premium catalogue style
   ========================================================== */
.OL_RHS_box{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.25em;
}

/* ==========================================================
   RHS BUTTON HEIGHT NORMALISATION
   ========================================================== */
.OL_RHS_box{
  min-height: 5.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6vw;
}

/* Only the two 2-line RHS buttons */
.OL_RHS_box.OL_RHS_askQuestionBox{
  padding-top: 1.3vh;
  padding-bottom: 1.3vh;
  line-height: 1.2;
}

.OL_moreImagesLabel{
  font-size: 2vh;
  font-weight: 700;
  margin-bottom: 0.4vh;
}

/* FINAL override: logo sizing + centering */
.OL_LHS_logo img{
  display:block !important;
  margin:0 auto !important;
  width:80% !important;
  max-width:none !important;
  height:auto !important;
  object-fit:contain !important;
}

/* ===============================
   Independent button font sizing
   =============================== */

/* Primary — Buy It Now */
.OL_MID_priceAndBuyingOptions a.OL_MID_box2_buyItNow{
  font-size: 1.35vw;
}

/* Secondary — Add / Remove Basket */
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket,
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket_2{
  font-size: 1.05vw;
}

/* Tertiary — Watch */
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch,
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch_2{
  font-size: 1.05vw;
}

/* Center the button within each row */
.OL_MID_priceAndBuyingOptions .item{
  display:flex;
  justify-content:center;
}

/* Make buttons take a controlled width */
.OL_MID_priceAndBuyingOptions a.OL_MID_box2_buyItNow,
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket,
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket_2,
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch,
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch_2{
  width:100%;
}

/* Primary slightly wider */
.OL_MID_priceAndBuyingOptions a.OL_MID_box2_buyItNow{
  max-width: 95%;
}

/* Secondary slightly narrower */
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket,
.OL_MID_priceAndBuyingOptions a.OL_MID_box3_addToBasket_2,
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch,
.OL_MID_priceAndBuyingOptions a.OL_MID_box4_addToWatch_2{
  max-width: 75%;
}

/* TEST: tighten LHS spacing */
.OL_LHS .OL_LHS_row{
  margin-bottom: 0.25vh !important;
  line-height: 1.55 !important;
}

/* Space below LHS logo */
.OL_LHS_logo{
  margin-bottom: 3vh;
}

/* OL logo: cancel LHS wrapper padding so centring is true */
.OL_LHS_logo{
  width:100%;
  margin-left:-1.1vw;
  margin-right:-1vw;
  padding-left:1vw;
  padding-right:1vw;

  margin-top: 0vh;
  margin-bottom: 4vh;
}

.OL_LHS_logo img{
  display:block;
  margin:0 auto;
  width:60%;
  height:auto;
}

/* ==========================================================
   DESKTOP (TALL)  (MateView)
   1701–2200px, aspect <= 2/1
   ========================================================== */
@media (min-width:1701px) and (max-width:2200px) and (max-aspect-ratio:2/1){

  .OL_MID_box9_certificatesAndGuarantees{ grid-column: 4 / 58; }
  .OL_MID_box10_specialOffers{ grid-column: 58 / 98; }

  .OL_LHS_wrapper{
    font-size: 1.55vh;
    line-height: 2.35vh;
  }
  .OL_LHS_sectionTitle{ font-size: 1.85vh; }
  .OL_LHS_subSectionTitle{ font-size: 1.65vh; }

  .OL_MID_box5_frontImage{ min-height:50vh; }

  .OL_moreImagesLabel{
    font-size: 1.75vh;
    font-weight: 700;
    margin-bottom: 0.4vh;
  }
}

@media (min-width: 1101px) and (max-width: 1700px),
       (orientation: landscape) and (pointer: coarse) and (min-width: 640px) {

  .OL_RHS_box.OL_RHS_createAcountBox,
  .OL_RHS_box.OL_RHS_logInBox,
  .OL_RHS_box.OL_RHS_viewBasketBox{
    margin-top: 0.8vw;
    margin-bottom: 0.8vw;
  }
}

/* ==========================================================
   iOS/iPad fallback (IMPORTANT)
   Applies even if iPad reports pointer:fine (trackpad/mouse)
   ========================================================== */
@media (max-width:1100px) and (orientation:landscape){

  :root{
    --rhs-gap-12: 4vh;
    --rhs-gap-23: 3vh;
    --rhs-gap-34: 3vh;
  }

  .OL_RHS_box.OL_RHS_indexBox,
  .OL_RHS_indexBox{
    margin-bottom: var(--rhs-gap-12) !important;
  }

  .OL_RHS_box.OL_RHS_viewBasketBox,
  .OL_RHS_viewBasketBox{
    margin-bottom: var(--rhs-gap-23) !important;
  }

  .OL_RHS_box.OL_RHS_logInBox,
  .OL_RHS_logInBox{
    margin-top: var(--rhs-gap-34) !important;
  }

  .OL_MID_priceAndBuyingOptions{ grid-column:6/23; }
  .OL_MID_box5_frontImage{ grid-column:27/75; }

  .OL_MID_box6_moreImages_1{ grid-column:80/95; grid-row:6/9; }
  .OL_MID_box6_moreImages_2{ grid-column:76/99; grid-row:6/9; }

} /* ✅ end iPad landscape */

/* ==========================================================
   ZOOM EDGE COVER — move ONLY the zoomed image up
   ========================================================== */
:root{
  --ol-zoom-nudge-up: 1.4vh;
}

.OL_MID_box5_frontImage #OL-MID_box5_frontImage_image,
.OL_MID_box5_frontImage img.magnify-image{
  position: relative;
  top: 0;
}
.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image,
.OL_MID_box5_frontImage:hover img.magnify-image{
  top: calc(-1 * var(--ol-zoom-nudge-up));
}

.OL_MID_box5_frontImage #OL-MID_box5_frontImage_image,
.OL_MID_box5_frontImage img.magnify-image{
  z-index: 80;
}

.OL_MID_box5_frontImage:hover{
  z-index: 90;
}

/* ==========================================================
   OL — TEXTURE OVERLAY (SAFE: won't affect children/buttons)
   Paste at VERY END of oneListing.css
   ========================================================== */

/* Ensure panels are the positioning context for overlay */
.OL_LHS,
.OL_RHS{
  position: sticky;            /* keep your current behaviour */
  background-color: var(--album-green) !important;
  background-image: none !important;   /* IMPORTANT: stop direct background-image attempts */
}

/* Add texture as an overlay layer */
.OL_LHS::before,
.OL_RHS::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* use your shared var; fall back to the same close-dot pattern if missing */
  background-image:
    var(--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)
    );
  background-size: 6px 6px, 6px 6px;
  background-position: 0 0, 3px 3px;

  opacity: 1; /* if you want it subtler: 0.7 */
}

/* Keep all panel content above the overlay */
.OL_LHS > *,
.OL_RHS > *{
  position: relative;
  z-index: 1;
}

/* ==========================================================
   OL — FORCE RHS BUTTONS BACK TO ENAMEL (stops “green buttons”)
   ========================================================== */
.OL_RHS_box{
  background: var(--enamel) !important;
  color: #F6F3E8 !important;
}

/* Also keep search inputs dark/enamel */
.OL_RHS input[type="search"]{
  background: var(--enamel) !important;
  color: #F6F3E8 !important;
}

/* FINAL: Search Shop must stay paper (override global RHS search rule) */
.OL_RHS .OL_RHS_search_shop input[type="search"],
.OL_RHS .OL_RHS_search_shop .OL_RHS_SR_RHS_search_box{
  background: #F3F0E8 !important;
  color: rgba(31,36,36,0.95) !important;
  border: 0.15vw solid rgba(213,192,138,0.65) !important;
}

.OL_RHS .OL_RHS_search_shop input[type="search"]::placeholder,
.OL_RHS .OL_RHS_search_shop .OL_RHS_SR_RHS_search_box::placeholder{
  color: rgba(31,36,36,0.55) !important;
}

.OL_RHS .OL_RHS_search_shop input[type="search"]:focus,
.OL_RHS .OL_RHS_search_shop .OL_RHS_SR_RHS_search_box:focus{
  background: #fff !important;
  border-color: rgba(142,201,174,0.9) !important;
}