@media (min-width: 1500px){

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

img {
    width: 100%; /* image box size as % of container, see step 1 */
    height: 100%; /* image box size as % of container, see step 1 */
    object-fit: contain;   
}

input[type=search]{
    width: 10.7vw;
    height: 3vh;
    font-size: 1vw;
    border:white 0.15vw solid;
    border-radius: 0.5vw;
    padding: 0.5vw;
    margin-left: 1.7vw;
    position: relative;
    top:2vh;
}

.OL_wrapper{
    display:grid;
    grid-template-columns:repeat(100, 1fr);
    grid-auto-rows: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.OL_LHS{
    grid-column: 1/15;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8vw;
    height: 100vh;
    position: sticky;
    left: 0vh;
    top: 0vh;
}

.OL_LHS>div{
    position: relative;
    padding: 1vw;
    top: 1vh;
}

.OL_LHS_wrapper{
    font-size: 1.8vh;
    font-weight: bold;
    padding-right: 3vw;
}

.OL_LHS_sectionTitle{
    font-size: 2.0vh;
    font-weight: bold;
    color: rgb(180, 226, 253);
    text-decoration: underline;
}

.OL_LHS_subSectionTitle{
    color: rgb(180, 226, 253);
    padding-right: 0.3vw;
}

.OL_LHS_cancellationDetailsSectionTitle{
    color: lightgreen;
}

.OL_LHS_cancellationDetailsSubSectionTitle{
    color: lightgreen;
}

.OL_MID{
    background-color: #E2E4E2;
    grid-column: 15/87;
}

.OL_MID_wrapper{
    display: grid;
    grid-template-columns:repeat(100, 1fr);
    gap: 1vh;
    margin-top: 1vh; 
}

.OL_MID_priceAndBuyingOptions{
    grid-column: 8/25;
    grid-row: 2/14;
    display: grid;
    align-content: space-evenly;
}

.OL_MID_box1_price{
    border:#385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    padding: 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    color:black;
    height: 5vh;    
    font-size: 3vh;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 100%; 
}

.OL_MID_box2_buyItNow{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box2_buyItNow:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket_2:hover{
    border-color: #d70715;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}



.OL_MID_box4_addToWatch{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box4_addToWatch:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box4_addToWatch_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box4_addToWatch_2:hover{
    border-color: #d70715;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box5_frontImage {
    grid-column: 31/71;
    grid-row: 2/14;
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: #1A1919;
    min-height: 58vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow: visible; /* Allow image to overflow outside container */
    position: relative; /* To help with the lens positioning */
}

#OL-MID_box5_frontImage_image {
    max-height: 100%;  /* Ensure the image doesn't exceed the container height */
    max-width: 100%;   /* Ensure the image doesn't exceed the container width */
    object-fit: contain; /* Preserve the aspect ratio */
    transition: transform 0.25s ease; /* Smooth transition for zoom */
    transform-origin: top center; /* Zoom from the top-center */
}

.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(1.5); /* Zoom image by 50% */
}



/* The zoom effect (when hovering over the image) */
.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(2); /* Zoom the image */
}


.OL_MID_box6_moreImages_1{
    grid-column: 76/91; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box6_moreImages_2{
    grid-column: 73/98; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITEsmoke;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box7_itemText{
    grid-column: 4/98;
    grid-row: 15/16;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    text-decoration: none;
}

.OL_MID_box7_itemText_title{
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 3vh;
    background-color: WHITE; 
}

.OL_MID_box7_itemText_description{
    font-size: 2.3vh;
    text-align: left;
    line-height: 2.5vh;
    background-color: WHITE; 
}

.OL_MID_box8_paymentMethodDetails{
    grid-column: 4/30;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: white;
    font-size: 2vw;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: palegreen; 
}

    .OL_MID_box8_paymentMethodDetails_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box8_description{
        font-size: 2vh;
    }

.OL_MID_box9_certificatesAndGuarantees{
    grid-column: 4/50;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
}

    .OL_MID_box9_certificatesAndGuarantees_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box9_certificatesAndGuarantees_description{
        font-size: 2vh;
    }

.OL_MID_box10_specialOffers{
    grid-column: 50/98;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
}

    .OL_MID_box10_specialOffers_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box10_specialOffers_description{
        font-size: 2vh;
    }


.OL_RHS{
    grid-column: 87/101;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    position: sticky;
    right: 0vh; 
    top: 0vh;
    text-align: center;
}

.OL_RHS_box{
    padding: 0.5vw;
    border: 0.15vw solid;
    border-radius: 1.5vw;
    margin: 1vw 1.5vw;
    background-color: #373636;
    border-width: 0.2vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    font-weight: 600;
}

.OL_RHS_box:hover{
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_RHS_box:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.OL_RHS_search_searchBar{
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5vw;
  
}

.OL_RHS_search_button{
    height: 0vh;
        border: none;
        color: #385F5F;
        background-color: #385F5F;
}

.OL_RHS_SR_RHS_search_box{
    border-radius: 0.5vw;
    font-size: 2vh;
    min-height: 5vh;  /* Set min-height to force the box to expand */
}

.OL_RHS_link{
    color: paleturquoise;
    text-decoration: none;
}

.OL_RHS_link_button{
    background-color: #385F5F;
    text-decoration: none;
    border: none;
    margin: 0vh;
    padding: 0vh;
    font-size: 1vw;
    font-weight: 600;
}

button.OL_RHS_link {
    all: unset; /* removes all default button styling */
    display: block; /* or inline-block if needed */
    width: 100%; /* match the width of other buttons */
    cursor: pointer;
    /* inherit any font styles */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.OL_RHS_indexBox{
    font-size: 1.4vw;
    font-weight: 600;
    padding-bottom: 1vh;
    padding-top: 1.2vh;
    position: relative;
    top: 1vh;
}

.OL_RHS_askQuestionBox{
    color:lightgray; 
    font-size: 1vw;
}

.OL_RHS_logInBox{
    color:palegoldenrod;
    font-size: 1.2vw;
    position:relative;
    top: 1vh;
    font-weight: 600;
}

.OL_RHS_createAcountBox{
    color: skyblue;
    font-size: 1.2vw;
    font-weight: 600;
    position:relative;
    top: 1vh;
}

.OL_RHS_viewBasketBox{
    color: white;
    font-size: 1.2vw;
    position:relative;
    top: 1vh;
    font-weight: 600;
}

.OL_RHS_box:hover{
    color: lawngreen;
}

.OL_RHS_backToSearchBox{
    font-size: 1.4vw;
    width: 9.5vw;
    position: relative:
    top: 3vh;
    color: paleturquoise;
}

.item{
    transition: all linear 80ms;
}

.item:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.copy2{
    font-size: 0.6vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.OL_RHS_search_button {
    display: none;  /* This will hide the button and remove it from the layout */
}

.OL_MID_box2_buyItNow {
    display: flex;                /* Use flexbox */
    justify-content: space-around; /* Space around the content (image and text) */
    align-items: center;          /* Vertically center the content */
    width: 100%;                  /* Optional: make the container take up full width */
}

.image_buyItNow {
    max-height: 5vh;  /* Optional: Set a max height for the image to keep it proportional */
    width: auto;        /*Optional: Keep the width auto to maintain aspect ratio */
}

.OL_MID_box2_buyItNow {
    text-decoration: none; /* Remove underline from the link */
    color: black;          /* Set text color */
    font-size: 1.6vh;       /* Adjust text size as needed */
}

.OL_MID_box3_addToBasket, .OL_MID_box3_addToBasket_2 {
    display: flex;               /* Use flexbox to align content */
    justify-content: space-around;/* Space around the content (image and text) */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToBasket {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.OL_MID_box4_addToWatch, .OL_MID_box4_addToWatch_2 {
    display: flex;               /* Enable flexbox layout */
    justify-content: space-around;/* Distribute space evenly between the image and text */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToWatch {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.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; /* Adjust the font size to make the text larger */ 
}

.priceTitle {
    font-size: 1.4vw; /* Adjust the font size to make the text larger */ 
}

.image-container_1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 1 column */
        gap: 10px; /* Space between images */
    }

.image-container_2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 10px; /* Space between images */
    }

    .image-item {
        max-height: 200px; /* Adjust the maximum height of the images */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-item img {
        width: 100%; /* Make image responsive */
        height: auto;
        max-height: 200px; /* Set the maximum height for images */
    }
    
   /* Container for magnifier image */
.magnifier-container {
    position: relative;
    display: flex;               /* Use flexbox */
    justify-content: center;     /* Horizontally center the image */
    align-items: center;         /* Vertically center the image */
    height: 100%;                 /* Ensure container takes up full height */
}

/* The image itself */
.magnify-image {
    width: 100%; /* Adjust the image size as necessary */
    height: auto;
    display: block; /* Ensure image is displayed correctly */
    object-fit: contain; /* Ensure image fits inside container */
}


/* The lens (magnifying glass) */

.magnifier-lens {
    position: absolute;
    border-radius: 50%;      /* Keep the lens circular */
    background: none;        /* Remove the background */
    opacity: 0;              /* Remove opacity */
    pointer-events: none;    /* Ensure it doesn't block other content */
    width: 0;                /* Hide the lens when not hovered */
    height: 0;               /* Hide the lens when not hovered */
}



.edit{
    color: white;
    position: relative;
    top: -2vh;
}

.new{
    position: relative;
    top: 0.5vh;
    background-color: #cc3073;
    color: white;
    border-color: black;
}

.new:hover{
    color: white;
    background-color: #a3265c;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* cover whole screen */
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: flex-end;  /* push content to right */
  align-items: center;        /* vertically center */
  z-index: 9999;
}

.modal-content {
  background: #f0f0f0;
  width: 35vw;
  height: 100vh;
  border-radius: 8px 0 0 8px;  /* rounded corners on left only */
  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; /* vertically center items */
  gap: 10px;           /* small space between title and close button */
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5vw;
  font-weight: bold;
  /* Remove flex-grow or space-between since we want items side by side */
}

.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 for title and description inputs */
.full-width {
  width: 100%;
  margin-bottom: 20px;
}

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

/* Form layout (columns for remaining inputs) */
.form-columns {
  display: flex;
  gap: 20px;
  margin-top: 0;  /* reset margin because spacing handled by full-width */
  flex: 1;
  overflow-y: auto;
}

.form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  font-weight: bold;
  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: white;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 600;
  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.3s ease;
}

input[list]:focus {
  border-color: #007BFF; /* Blue border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  background-color: #fff;
}

/* Placeholder text style */
input[list]::placeholder {
  color: #aaa;
  font-style: italic;
}

.form-group label {
  font-size: 2.2vh;
}

.cert{
    position: relative;
    top: 1vh;
}


}


@media (max-width: 1400px){

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

img {
    width: 100%; /* image box size as % of container, see step 1 */
    height: 100%; /* image box size as % of container, see step 1 */
    object-fit: contain;   
}

input[type=search]{
    width: 9.8vw;
    height: 3vh;
    font-size: 1vw;
    border:white 0.15vw solid;
    border-radius: 0.5vw;
    padding: 0.5vw;
    margin-left: 2vw;
    position: relative;
    top: 7vh;
}

.OL_wrapper{
    display:grid;
    grid-template-columns:repeat(100, 1fr);
    grid-auto-rows: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.OL_LHS{
    grid-column: 1/15;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8vw;
    height: 100vh;
    position: sticky;
    left: 0vh;
    top: 0vh;
}

.OL_LHS>div{
    position: relative;
    padding: 1vw;
    top: 1vh;
}

.OL_LHS_wrapper{
    font-size: 1.8vh;
    font-weight: bold;
    padding-right: 3vw;
}

.OL_LHS_sectionTitle{
    font-size: 2.0vh;
    font-weight: bold;
    color: rgb(180, 226, 253);
    text-decoration: underline;
}

.OL_LHS_subSectionTitle{
    color: rgb(180, 226, 253);
    padding-right: 0.3vw;
}

.OL_LHS_cancellationDetailsSectionTitle{
    color: lightgreen;
}

.OL_LHS_cancellationDetailsSubSectionTitle{
    color: lightgreen;
}

.OL_MID{
    background-color: #E2E4E2;
    grid-column: 15/87;
}

.OL_MID_wrapper{
    display: grid;
    grid-template-columns:repeat(100, 1fr);
    gap: 1vh;
    margin-top: 1vh; 
}

.OL_MID_priceAndBuyingOptions{
    grid-column: 4/21;
    grid-row: 2/14;
    display: grid;
    align-content: space-evenly;
}

.OL_MID_box1_price{
    border:#385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    padding: 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    color:black;
    height: 5vh;    
    font-size: 6vh;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 100%; 
}

.OL_MID_box2_buyItNow{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box2_buyItNow:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket_2:hover{
    border-color: #d70715;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}



.OL_MID_box4_addToWatch{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box4_addToWatch:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box4_addToWatch_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box4_addToWatch_2:hover{
    border-color: #d70715;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box5_frontImage {
    grid-column: 25/77;
    grid-row: 2/14;
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: #1A1919;
    min-height: 50vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow: visible; /* Allow image to overflow outside container */
    position: relative; /* To help with the lens positioning */
}

#OL-MID_box5_frontImage_image {
    max-height: 100%;  /* Ensure the image doesn't exceed the container height */
    max-width: 100%;   /* Ensure the image doesn't exceed the container width */
    object-fit: contain; /* Preserve the aspect ratio */
    transition: transform 0.25s ease; /* Smooth transition for zoom */
    transform-origin: top center; /* Zoom from the top-center */
}

.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(1.5); /* Zoom image by 50% */
}



/* The zoom effect (when hovering over the image) */
.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(2); /* Zoom the image */
}


.OL_MID_box6_moreImages_1{
    grid-column: 80/96; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box6_moreImages_2{
    grid-column: 78/99; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITEsmoke;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box7_itemText{
    grid-column: 4/98;
    grid-row: 15/16;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    text-decoration: none;
    position: relative;
    top: 1vh;
}

.OL_MID_box7_itemText_title{
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 3vh;
    background-color: WHITE; 
}

.OL_MID_box7_itemText_description{
    font-size: 2.3vh;
    text-align: left;
    line-height: 2.5vh;
    background-color: WHITE; 
}

.OL_MID_box8_paymentMethodDetails{
    grid-column: 4/30;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: white;
    font-size: 2vw;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: palegreen; 
    
}

    .OL_MID_box8_paymentMethodDetails_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box8_description{
        font-size: 2vh;
    }

.OL_MID_box9_certificatesAndGuarantees{
    grid-column: 4/49;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
    position: relative;
    top: 3vh;
}

    .OL_MID_box9_certificatesAndGuarantees_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box9_certificatesAndGuarantees_description{
        font-size: 2vh;
    }

.OL_MID_box10_specialOffers{
    grid-column: 51/98;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
    position: relative;
    top: 3vh;
}

    .OL_MID_box10_specialOffers_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box10_specialOffers_description{
        font-size: 2vh;
    }


.OL_RHS{
    grid-column: 87/101;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    position: sticky;
    right: 0vh; 
    top: 0vh;
    text-align: center;
}

.OL_RHS_box{
    padding: 0.5vw;
    border: 0.15vw solid;
    border-radius: 1.5vw;
    margin: 1vw 2vw;
    background-color: #373636;
    border-width: 0.2vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_RHS_box:hover{
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_RHS_box:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}





.OL_RHS_search_searchBar {
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.5vw;
    height: 5vh; /* Increase parent height to accommodate the input box */
    width: 5vw;
    position: relative;
    top: 4vh;
}

.OL_RHS_SR_RHS_search_box {
    border-radius: 0.5vw;
    font-size: 1.8vh !important;
    min-height: 5vh;  /* Set min-height to force the box to expand */
    position: relative;
    top: 3vh;
    box-sizing: border-box;  /* Ensure padding and borders are included in height calculation */
}


.OL_RHS_search_button {
    display: none; /* Hide the button if it's not needed */
}

.OL_RHS_link{
    color: paleturquoise;
    text-decoration: none;
}

.OL_RHS_link_button{
    background-color: #385F5F;
    text-decoration: none;
    border: none;
    margin: 0vh;
    padding: 0vh;
    font-size: 1vw;
    font-weight: 600;
    position: relative;
    top:4vh;
}

.OL_RHS_indexBox{
    font-size: 1.5vw;
    font-weight: 600;
    padding-bottom: 1vh;
    padding-top: 1.2vh;
    position: relative;
    top:1vh;
}

.OL_RHS_askQuestionBox{
    color:lightgray; 
    font-size: 1.1vw;
    position: relative;
    top: 10vh;
}

.OL_RHS_logInBox{
    color:palegoldenrod;
    font-size: 1.5vw;
    position: relative;
    top:7vh;
}

.OL_RHS_createAcountBox{
    color: skyblue;
    font-size: 1.5vw;
    position: relative;
    top:5vh;
}

.OL_RHS_viewBasketBox{
    color: white;
    font-size: 1.5vw;
    position: relative;
    top:3vh;
}

.OL_RHS_box:hover{
    color: lawngreen;
}

.OL_RHS_backToSearchBox{
    font-size: 1.5vw;
    width: 8.5vw;
    position: relative;
    top:8vh;
    color: paleturquoise;
}

.item{
    transition: all linear 80ms;
}

.item:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.copy2{
    font-size: 0.6vw;
    padding-left: 1vw;
    padding-right: 1vw;
    position: relative;
    top:19vh;
}

.OL_MID_box2_buyItNow {
    display: flex;                /* Use flexbox */
    justify-content: space-around; /* Space around the content (image and text) */
    align-items: center;          /* Vertically center the content */
    width: 100%;                  /* Optional: make the container take up full width */
}

.image_buyItNow {
    max-height: 5vh;  /* Optional: Set a max height for the image to keep it proportional */
    width: auto;        /*Optional: Keep the width auto to maintain aspect ratio */
}

.OL_MID_box2_buyItNow {
    text-decoration: none; /* Remove underline from the link */
    color: black;          /* Set text color */
    font-size: 1.6vh;       /* Adjust text size as needed */
}

.OL_MID_box3_addToBasket, .OL_MID_box3_addToBasket_2 {
    display: flex;               /* Use flexbox to align content */
    justify-content: space-around;/* Space around the content (image and text) */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToBasket {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.OL_MID_box4_addToWatch, .OL_MID_box4_addToWatch_2 {
    display: flex;               /* Enable flexbox layout */
    justify-content: space-around;/* Distribute space evenly between the image and text */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToWatch {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.OL_MID_box3_addToBasket, .OL_MID_box4_addToWatch, .OL_MID_box2_buyItNow, .priceTitle {
    font-size: 1.5vw; /* Adjust the font size to make the text larger */ 
}

.OL_MID_box3_addToBasket_2, .OL_MID_box4_addToWatch_2 {
    font-size: 1.4vw; /* Adjust the font size to make the text larger */ 
    padding: 1.2vh 0.6vh;
}

.image-container_1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 1 column */
        gap: 10px; /* Space between images */
    }

.image-container_2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 10px; /* Space between images */
    }

    .image-item {
        max-height: 200px; /* Adjust the maximum height of the images */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-item img {
        width: 100%; /* Make image responsive */
        height: auto;
        max-height: 200px; /* Set the maximum height for images */
    }
    
   /* Container for magnifier image */
.magnifier-container {
    position: relative;
    display: flex;               /* Use flexbox */
    justify-content: center;     /* Horizontally center the image */
    align-items: center;         /* Vertically center the image */
    height: 100%;                 /* Ensure container takes up full height */
}

/* The image itself */
.magnify-image {
    width: 100%; /* Adjust the image size as necessary */
    height: auto;
    display: block; /* Ensure image is displayed correctly */
    object-fit: contain; /* Ensure image fits inside container */
}


/* The lens (magnifying glass) */

.magnifier-lens {
    position: absolute;
    border-radius: 50%;      /* Keep the lens circular */
    background: none;        /* Remove the background */
    opacity: 0;              /* Remove opacity */
    pointer-events: none;    /* Ensure it doesn't block other content */
    width: 0;                /* Hide the lens when not hovered */
    height: 0;               /* Hide the lens when not hovered */
}

.ask2{
    position: relative;
    top:6vh;
}

.RHS_gap{
    height:0vh;
}

.RHS_gap_2{
    height:0vh;
}

button.OL_RHS_link {
    all: unset; /* removes all default button styling */
    display: block; /* or inline-block if needed */
    width: 100%; /* match the width of other buttons */
    cursor: pointer;
    /* inherit any font styles */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.edit{
    color: white;
}

.new{
    position: relative;
    top: 2vh;
    background-color: #cc3073;
    color: white;
    border-color: black;
}

.new:hover{
    color: white;
    background-color: #a3265c;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* cover whole screen */
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: flex-end;  /* push content to right */
  align-items: center;        /* vertically center */
  z-index: 9999;
}

.modal-content {
  background: #f0f0f0;
  width: 31vw;
  height: 100vh;
  border-radius: 8px 0 0 8px;  /* rounded corners on left only */
  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: 69vw;
}

.modal-header {
  display: flex;
  align-items: center; /* vertically center items */
  gap: 10px;           /* small space between title and close button */
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5vw;
  font-weight: bold;
  /* Remove flex-grow or space-between since we want items side by side */
}

.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 for title and description inputs */
.full-width {
  width: 100%;
  margin-bottom: 20px;
}

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

/* Form layout (columns for remaining inputs) */
.form-columns {
  display: flex;
  gap: 6px;
  margin-top: 0;  /* reset margin because spacing handled by full-width */
  flex: 1;
  overflow-y: auto;
}

.form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-weight: bold;
  margin-bottom: 0.6vh;
  font-size: 1.2vh;
}

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

textarea {
  resize: vertical;
  min-height: 4vh;
  font-size: 1vw;
}

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

button[type="submit"]:hover {
  background-color: #0056b3;
}

input[list] {
  width: 12vw;
  padding: 4px;
  font-size: 12px;
  border: 2px solid #666;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

input[list]:focus {
  border-color: #007BFF; /* Blue border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  background-color: #fff;
}

/* Placeholder text style */
input[list]::placeholder {
  color: #aaa;
  font-style: italic;
}

.form-group label {
  font-size: 1.8vh;
}



}

@media (min-height: 1000px){

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

img {
    width: 100%; /* image box size as % of container, see step 1 */
    height: 100%; /* image box size as % of container, see step 1 */
    object-fit: contain;   
}

input[type=search]{
    width: 10.8vw;
    height: 3vh;
    font-size: 1vw;
    border:white 0.15vw solid;
    border-radius: 0.5vw;
    padding: 0.5vw;
    margin-left: 1.6vw;
}

.OL_wrapper{
    display:grid;
    grid-template-columns:repeat(100, 1fr);
    grid-auto-rows: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.OL_LHS{
    grid-column: 1/15;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8vw;
    height: 100vh;
    position: sticky;
    left: 0vh;
    top: 0vh;
}

.OL_LHS>div{
    position: relative;
    padding: 1vw;
    top: 1vh;
}

.OL_LHS_wrapper{
    font-size: 1.8vh;
    font-weight: bold;
    padding-right: 3vw;
}

.OL_LHS_sectionTitle{
    font-size: 2.0vh;
    font-weight: bold;
    color: rgb(180, 226, 253);
    text-decoration: underline;
}

.OL_LHS_subSectionTitle{
    color: rgb(180, 226, 253);
    padding-right: 0.3vw;
}

.OL_LHS_cancellationDetailsSectionTitle{
    color: lightgreen;
}

.OL_LHS_cancellationDetailsSubSectionTitle{
    color: lightgreen;
}

.OL_MID{
    background-color: #E2E4E2;
    grid-column: 15/87;
}

.OL_MID_wrapper{
    display: grid;
    grid-template-columns:repeat(100, 1fr);
    gap: 1vh;
    margin-top: 1vh; 
}

.OL_MID_priceAndBuyingOptions{
    grid-column: 5/22;
    grid-row: 2/14;
    display: grid;
    align-content: space-evenly;
}

.OL_MID_box1_price{
    border:#385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    padding: 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    color:black;
    height: 5vh;    
    font-size: 3vh;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 100%; 
}

.OL_MID_box2_buyItNow{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box2_buyItNow:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box3_addToBasket_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box3_addToBasket_2:hover{
    border-color: #d70715;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}



.OL_MID_box4_addToWatch{
    border: #385F5F 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box4_addToWatch:hover{
    border-color: #08a808;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box4_addToWatch_2{
    border: #08a808 0.2vw solid;
    border-radius: 1.5vw;
    background-color: WHITE;
    text-decoration: none;
    padding: 0.5vw;
    text-align: center;
    font-weight: bold;
    color:black;
    font-weight: bold;
    font-size: 0.9vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_MID_box4_addToWatch_2:hover{
    border-color: #d70715;
}

.OL_MID_box5_frontImage {
    grid-column: 27/75;
    grid-row: 2/14;
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: #1A1919;
    min-height: 58vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow: visible; /* Allow image to overflow outside container */
    position: relative; /* To help with the lens positioning */
}

#OL-MID_box5_frontImage_image {
    max-height: 100%;  /* Ensure the image doesn't exceed the container height */
    max-width: 100%;   /* Ensure the image doesn't exceed the container width */
    object-fit: contain; /* Preserve the aspect ratio */
    transition: transform 0.25s ease; /* Smooth transition for zoom */
    transform-origin: top center; /* Zoom from the top-center */
}

.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(1.5); /* Zoom image by 50% */
}



/* The zoom effect (when hovering over the image) */
.OL_MID_box5_frontImage:hover #OL-MID_box5_frontImage_image {
    transform: scale(2); /* Zoom the image */
}


.OL_MID_box6_moreImages_1{
    grid-column: 80/95; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box6_moreImages_2{
    grid-column: 77/98; /*MAY NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    grid-row: 6/9; /*WILL NEED TO HAVE ALTERNATIVES FOR MORE THAN 2 IMAGES*/
    border: #385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITEsmoke;
    padding: 0.5vw;
    text-align: center;
    color:black;
    font-size: 1.5vh;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0.3vh 0.3vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.OL_MID_box7_itemText{
    grid-column: 4/98;
    grid-row: 15/16;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: WHITE;
    text-decoration: none;
}

.OL_MID_box7_itemText_title{
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 3vh;
    background-color: WHITE; 
}

.OL_MID_box7_itemText_description{
    font-size: 2.3vh;
    text-align: left;
    line-height: 2.5vh;
    background-color: WHITE; 
}

.OL_MID_box8_paymentMethodDetails{
    grid-column: 4/30;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: white;
    font-size: 2vw;
    align-self: stretch;
    padding: 1vw 1vw;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: palegreen; 
}

    .OL_MID_box8_paymentMethodDetails_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box8_description{
        font-size: 2vh;
    }

.OL_MID_box9_certificatesAndGuarantees{
    grid-column: 4/50;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
}

    .OL_MID_box9_certificatesAndGuarantees_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box9_certificatesAndGuarantees_description{
        font-size: 2vh;
    }

.OL_MID_box10_specialOffers{
    grid-column: 50/98;
    grid-row: 16/17;
    padding: 1vw 1vw;
    color: black;
    align-self: stretch;
    border:#385F5F 0.15vw solid;
    border-radius: 0.4vw;
    background-color: rgb(197, 201, 198); 
    line-height: 2vh;
}

    .OL_MID_box10_specialOffers_title{
        text-decoration: underline;
        font-size: 2.5vh;
    }

    .OL_MID_box10_specialOffers_description{
        font-size: 2vh;
    }


.OL_RHS{
    grid-column: 87/101;
    background-color: #385F5F;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    position: sticky;
    right: 0vh; 
    top: 0vh;
    text-align: center;
}

.OL_RHS_box{
    padding: 0.5vw;
    border: 0.15vw solid;
    border-radius: 1.5vw;
    margin: 1vw 1.5vw;
    background-color: #373636;
    border-width: 0.2vw;
    transition: all linear 80ms;
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    font-weight: 600;
}

.OL_RHS_box:hover{
    box-shadow: 0.6vh 0.6vh 0.4vh rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.OL_RHS_box:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.OL_RHS_search_searchBar{
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5vw;
  
}

.OL_RHS_search_button{
    height: 0vh;
        border: none;
        color: #385F5F;
        background-color: #385F5F;
}

.OL_RHS_SR_RHS_search_box{
    border-radius: 0.5vw;
    font-size: 2vh;
    min-height: 5vh;  /* Set min-height to force the box to expand */
}

.OL_RHS_link{
    color: paleturquoise;
    text-decoration: none;
}

.OL_RHS_link_button{
    background-color: #385F5F;
    text-decoration: none;
    border: none;
    margin: 0vh;
    padding: 0vh;
    font-size: 1vw;
    font-weight: 600;
}

.OL_RHS_indexBox{
    font-size: 1.4vw;
    font-weight: 600;
    padding-bottom: 1vh;
    padding-top: 1.2vh;
}

.OL_RHS_askQuestionBox{
    color:lightgray; 
    font-size: 1vw;
}

.OL_RHS_logInBox{
    color:palegoldenrod;
    font-size: 1.2vw;
}

.OL_RHS_createAcountBox{
    color: skyblue;
    font-size: 1.2vw;
    position: relative;
    top: 1vh;
}

.OL_RHS_viewBasketBox{
    color: white;
    font-size: 1.2vw;
    position: relative;
    top: 2.2vh;
}

.OL_RHS_box:hover{
    color: lawngreen;
}

.OL_RHS_backToSearchBox{
    font-size: 1.4vw;
    width: 9.5vw;
}

.item{
    transition: all linear 80ms;
}

.item:active{
    -webkit-transform: translateY(0.1vh);
    transform: translate(0.1vh, 0.1vh);
}

.copy2{
    font-size: 0.6vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.OL_RHS_search_button {
    display: none;  /* This will hide the button and remove it from the layout */
}

.OL_MID_box2_buyItNow {
    display: flex;                /* Use flexbox */
    justify-content: space-around; /* Space around the content (image and text) */
    align-items: center;          /* Vertically center the content */
    width: 100%;                  /* Optional: make the container take up full width */
}

.image_buyItNow {
    max-height: 5vh;  /* Optional: Set a max height for the image to keep it proportional */
    width: auto;        /*Optional: Keep the width auto to maintain aspect ratio */
}

.OL_MID_box2_buyItNow {
    text-decoration: none; /* Remove underline from the link */
    color: black;          /* Set text color */
    font-size: 1.6vh;       /* Adjust text size as needed */
}

.OL_MID_box3_addToBasket, .OL_MID_box3_addToBasket_2 {
    display: flex;               /* Use flexbox to align content */
    justify-content: space-around;/* Space around the content (image and text) */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToBasket {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.OL_MID_box4_addToWatch, .OL_MID_box4_addToWatch_2 {
    display: flex;               /* Enable flexbox layout */
    justify-content: space-around;/* Distribute space evenly between the image and text */
    align-items: center;         /* Vertically center the content */
    text-decoration: none;       /* Remove underline from the link */
    color: black;                /* Set text color */
    width: 100%; 
}

.image_addToWatch {
    max-height: 4vh;  /* Optional: Set a max height for the image */
    width: auto;       /* Keep the width auto to maintain the aspect ratio */
}

.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; /* Adjust the font size to make the text larger */ 
}

.priceTitle {
    font-size: 1.4vw; /* Adjust the font size to make the text larger */ 
}

.image-container_1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 1 column */
        gap: 10px; /* Space between images */
    }

.image-container_2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 10px; /* Space between images */
    }

    .image-item {
        max-height: 200px; /* Adjust the maximum height of the images */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-item img {
        width: 100%; /* Make image responsive */
        height: auto;
        max-height: 200px; /* Set the maximum height for images */
    }
    
   /* Container for magnifier image */
.magnifier-container {
    position: relative;
    display: flex;               /* Use flexbox */
    justify-content: center;     /* Horizontally center the image */
    align-items: center;         /* Vertically center the image */
    height: 100%;                 /* Ensure container takes up full height */
}

/* The image itself */
.magnify-image {
    width: 100%; /* Adjust the image size as necessary */
    height: auto;
    display: block; /* Ensure image is displayed correctly */
    object-fit: contain; /* Ensure image fits inside container */
}


/* The lens (magnifying glass) */

.magnifier-lens {
    position: absolute;
    border-radius: 50%;      /* Keep the lens circular */
    background: none;        /* Remove the background */
    opacity: 0;              /* Remove opacity */
    pointer-events: none;    /* Ensure it doesn't block other content */
    width: 0;                /* Hide the lens when not hovered */
    height: 0;               /* Hide the lens when not hovered */
}

.RHS_gap{
    height:1vh;
}

.RHS_gap_2{
    height:0.25vh;
}

button.OL_RHS_link {
    all: unset; /* removes all default button styling */
    display: block; /* or inline-block if needed */
    width: 100%; /* match the width of other buttons */
    cursor: pointer;
    /* inherit any font styles */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.edit{
    color: white;
    position: relative;
    top: -2vh;
}

.new{
    position: relative;
    top: -2vh;
    background-color: #cc3073;
    color: white;
    border-color: black;
}

.new:hover{
    color: white;
    background-color: #a3265c;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* cover whole screen */
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: flex-end;  /* push content to right */
  align-items: center;        /* vertically center */
  z-index: 9999;
}

.modal-content {
  background: #f0f0f0;
  width: 32.7vw;
  height: 100vh;
  border-radius: 8px 0 0 8px;  /* rounded corners on left only */
  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: 67.3vw;
}

.modal-header {
  display: flex;
  align-items: center; /* vertically center items */
  gap: 10px;           /* small space between title and close button */
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5vw;
  font-weight: bold;
  /* Remove flex-grow or space-between since we want items side by side */
}

.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 for title and description inputs */
.full-width {
  width: 100%;
  margin-bottom: 20px;
}

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

/* Form layout (columns for remaining inputs) */
.form-columns {
  display: flex;
  gap: 20px;
  margin-top: 0;  /* reset margin because spacing handled by full-width */
  flex: 1;
  overflow-y: auto;
}

.form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  font-weight: bold;
  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: white;
  cursor: pointer;
  font-size: 1.5vw;
  font-weight: 600;
  align-self: flex-start;
  transition: background-color 0.2s ease;
  width: 27vw;
  margin-left: 1.5vw;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

input[list] {
  width: 13vw;
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid #666;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.3s ease;
}

input[list]:focus {
  border-color: #007BFF; /* Blue border on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  background-color: #fff;
}

/* Placeholder text style */
input[list]::placeholder {
  color: #aaa;
  font-style: italic;
}

.form-group label {
  font-size: 2vh;
}

}