@charset "UTF-8";
/* CSS Document */
/* CSS Document */
img,object,embed,video{max-width:100%;border:0}.ie6 img{width:100%}
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}
body {
    font:1em Arial, Helvetica, sans-serif;
}
.gridContainer{  
    max-width: 1500px; /* Set maximum width */
    width: 100%; /* Ensures responsiveness */
    margin: 0 auto; /* Centers the div */
    background-color:#FFF;
    flex-direction: row;
} 

/* Layout spacing */
#prod-main {
  display: flex;
    flex-wrap: wrap;
  gap: 10px;
    margin-bottom: 10px;
}
#prod-logo {text-align: center;}
#prod-logo img{display: inline-block}
#prod-title {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 1rem;
  width: 100%;
  clear: both;
  text-align: center;
}
#prod-img {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
#prod-info {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1px; /* force it to occupy space even when optional-extra is hidden */
  display: flex;
  flex-direction: column;
  width: 100%; /* Ensures internal children like #buy-wrap-target fill space */
  box-sizing: border-box;
}
#prod-img,
#prod-info {
  flex: 1 1 0;
  min-width: 0;
    padding: 10px;
}

#image-area {
  display: flex;
  flex-direction: column;   /* always column */
  align-items: center;      /* center children horizontally */
  gap: 10px;                /* spacing between main image and thumbnail row */
  width: 100%;
  box-sizing: border-box;
}

/* 2) Make the main image container span 100% */
#main-image {
  width: 100%;
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#main-image > * {
  flex: 1 1 auto;
  width: 100%;
}
#main-image img,
#main-image a,
#main-image iframe {
  width: 100%;              /* force image (or video wrapper) to fill */
  height: auto;
  object-fit: contain;
}
#main-image a.video-link {
  width: 100% !important;
  display: block;
}

/* Wraps the iframe and forces correct sizing */
.video-link {
  display: block;
  width: 100%;
  text-decoration: none;
}
.video-box {
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}
.video-box iframe {
  width: 100%;
  height: 410px;
  max-width: 100%;
  display: block;
  border: none;
}
#main-image iframe {
  height: 100%;
  align-items: stretch !important;
}

/* ─── Thumbnails: Always a horizontal row under the main image ─── */
#thumbnail-scroll {
  width: 100%;
  max-height: none;
  overflow-y: visible;
  overflow-x: auto;
  padding-right: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
#thumbnail-scroll::-webkit-scrollbar {
  height: 6px;
}
#thumbnail-scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
#thumbnails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: auto;
  box-sizing: border-box;
}
/* Thumbnail individual item */
#thumbnails .prod-thumb {
  display: block;
  width: 60px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0;
  flex: 0 0 auto;
}
#thumbnails .prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Container for buy button and extras */
#buy-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  box-sizing: border-box;
}



/* make sure the buy-wrap and its wrapper always fill the right-hand column */
#buy-wrap,
#buy-wrap .button-wrapper {
  width: 100% !important;
  box-sizing: border-box;
    display: block;
       clear:both;
}
/* remove any shrinking behavior */
#buy-wrap .button-wrapper {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;        /* remove any horizontal padding */
  flex: 0 0 100% !important;    /* prevent flexbox from shrinking it */
  box-sizing: border-box !important;
 }
#product-form{width: 100%!important}
#prod-buy-now {
  width: 100% !important;
  box-sizing: border-box;
}
/* Make the wrapper match #sticky-summary's inner width by adding 15px padding */
.button-wrapper {
  width: 100%;
  padding: 0 15px;      /* same horizontal padding as #sticky-summary */
  box-sizing: border-box;
  margin-top: 10px;     /* same top gap as #buy-now */
}

/* Force "Customise and Buy" to fill the padded wrapper exactly */
#prod-buy-now {
  display: block;
 width: 100% !important;
  background-color: #28a745;
  color: #fff;
  padding: 12px;        /* identical vertical padding to #buy-now */
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
   margin: 0 !important;         /* remove any accidental margins */
  box-sizing: border-box !important;
}

#prod-buy-now:hover {
  background-color: #218838;
}

/* Optional extras box */
#optional-extra {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

/* Limit width of select box */
#optional-extra select {
  width: 100%;
  max-width: 100%;
  padding: 6px;
  font-size: 1rem;
}

.thumbnails a {
  max-width: 15%; /* show more thumbs on desktop */
}
/* 3) ALWAYS lay out thumbnails in a single horizontal row */
#thumbnail-scroll {
  width: 100%;
  max-height: none;          /* remove any vertical‐scroll constraints */
  overflow-y: visible;
  overflow-x: auto;          /* allow horizontal scrolling if too many thumbs */
  padding-right: 0;
  margin: 0 auto;
}
#thumbnails {
  display: flex;             /* row by default */
  flex-direction: row;
  flex-wrap: wrap;           /* wrap to next line if > container width */
  justify-content: center;   /* center the row of thumbs under the image */
  gap: 8px;                  /* space between each thumbnail */
  width: auto;               /* remove "max-width: 65px" from desktop rules */
  box-sizing: border-box;
}
/* 4) Override any "width:100%" or "max-width:15%" on each thumbnail link */
#thumbnails a,
#thumbnails .prod-thumb {
  display: block;
  width: 60px;               /* or "auto" if you want them fluid—but 60px is common */
  max-width: none;
  margin: 0;                 /* remove desktop's "margin-bottom:10px" */
  flex: 0 0 auto;
}
#thumbnails .prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#prod-detail{;margin-bottom: 10px;
  flex: 1 0 100%;
  clear: both;
padding: 10px;}

.product-tabs {
  margin-top: 2rem;
  font-family: Arial, sans-serif;
}
#optional-extra.hidden {
  display: none;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.tab-buttons button {
  background: #f5f5f5;
  border: 1px solid #ccc;
  font-weight: bold;
  padding: 0.75rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
  color: #333;
}
.tab-buttons button:hover {
  background-color: #e6eef7;
}
.tab-buttons button[aria-selected="true"] {
  background-color: #2872bd;
  color: #fff;
  border-color: #2872bd;
}
.tab-content {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  max-height: 600px;
  overflow: auto;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

/* Description toggle */
.desc-text.collapsed {
  max-height: 200px;
  overflow: hidden;
  position: relative;
}
.color-selector {
  margin: 1rem 0;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.color-swatch-img {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.color-swatch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Selected swatch (e.g. current product) */
.color-swatch-img.selected {
  border-color: #2872bd;
}
/* Custom tooltip on hover */
.color-swatch-img::after {
  content: attr(data-color);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2872bd;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.color-swatch-img:hover::after {
  opacity: 1;
}

#prod-review{width: 50%}
#color-selection{width: 100%}
#prod-finance-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.finance-box {
  display: block;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #FFFFFF;
}
.finance-box a {
  text-decoration: none;
  color: inherit; /* Optional: ensures link text matches surrounding text */
}
.finance-box img {
  width: 65px;
  height: auto;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
.finance-box.with-image {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap; /* Important! */
  box-sizing: border-box;
}
/* Shared base style for both */
input[type="radio"],
input[type="checkbox"].round-checkbox {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #999;
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 4px; /* aligns better with text */
  margin-right: 8px;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
/* Outer circle turns blue on check */
input[type="radio"]:checked,
input[type="checkbox"].round-checkbox:checked {
  border-color: #007BFF;
  background-color: #007BFF;
}
/* Inner dot (checkmark circle) */
input[type="radio"]:checked::before,
input[type="checkbox"].round-checkbox:checked::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff; /* White dot on blue background */
}
.finance-box > div {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

#prod-price {
  margin-top: 20px;
  margin-bottom: 15px;
}
#prod-price .price {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2872bd; /* Your main color */
  display: block;
  margin-bottom: 5px;
}

#prod-v12-omi {
  width: 100%;
  display: block;
  clear: both; /* Ensures it drops below any floated elements */
  margin-top: 10px;
}
#prod-v12-omi a {
  display: flex;
  align-items: center;
  gap: 50px;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
}
/* Image block */
#prod-v12-omi a > div:first-child {
  flex: 0 0 auto;
}
/* Text block */
#prod-v12-omi a > div:nth-child(2) {
  flex: 1 1 auto;
}
/* Image style */
#prod-v12-omi img {
  max-width: 130px;
  height: auto;
  display: block;
}
/* Text style */
#prod-v12-omi strong {
  font-size: 1rem;
  color: #1e1e1e;
}
#icons {
  display: flex;
  flex-wrap: wrap;           /* Wraps to next line if space is limited */
  align-items: center;
  gap: 8px;                   /* Space between icons */
  padding: 5px 0;
  justify-content: flex-start;
}
/* Tooltip blocks inside icons container */
#icons .tooltip {
  margin: 0;
  padding: 0;
  display: inline-block;
  flex: 0 0 auto;
}
/* Icons: img or input type image */
#icons img,
#icons input[type="image"] {
  display: block;
  width: 100%;
  max-width: 60px;           /* Limit max size */
  min-width: 30px;           /* Prevent icons from shrinking too small */
  height: auto;
  object-fit: contain;
}
/* Style for heading above options */
.option-heading {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1e1e1e;
}
/* Container to match finance-box spacing */
.finance-style-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Ensure labels fill full width for better UX */
.finance-box input[type="radio"] {
  margin-right: 10px;
}
/* put this at the very bottom of product.css */
#prod-main,
#prod-info {
  overflow: visible !important;
  /* if you happen to have a transform on them, remove it:
     transform: none !important; */
}
/* Sticky summary */
#sticky-summary {
  position: sticky;
  top: 20px;
  background: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  box-sizing: border-box;
      align-self: flex-start;
}
#sticky-summary .price {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2872bd;
  display: block;
  margin-bottom: 10px;
}

#basket-items {
  font-size: 0.95rem;
  color: #555;
}

/* BUY-NOW button */
#buy-now{
  display: none;
  width: 100%;
  background-color: #28a745; /* Green - traditional for success */
  color: #fff;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}
#buy-now:hover {
  background-color: #218838;
}

#extra-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#extra-popup-content {
  background: white;
  padding: 20px;
  max-width: 800px;
  width: 90%;
  position: relative;
}
#extra-popup img {
  max-width: 100%;
  height: auto;
}
#extra-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}
#extra-thumbnails img {
  width: 60px;
  height: auto;
  border: 2px solid transparent;
  cursor: pointer;
}
#extra-thumbnails img.active {
  border-color: #1f6ea6;
}
#extra-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
}
#extra-description {
  margin-top: 15px;
  font-size: 16px;
  text-align: center;
  color: #444;
}
/* Container for video grid */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.video-item {
  flex: 1 1 45%;
  max-width: 45%;
}

.video-item .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-item .video-container iframe,
.video-item .video-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.deposit-hover {
    position: relative;
    display: block;
    width: 100%;
}

.deposit-hover button {
    width: 100%;
    box-sizing: border-box;
}

.deposit-hover .deposit-tooltip {
    visibility: hidden;
      width: 300px;
    background: #1f6ea6 !important;
    color: #fff !important;
    text-align: left;
    padding: 10px !important;
        position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    font-size: 14px;
    line-height: 1.4;
    pointer-events: none;
     opacity: 1 !important;            /* Make sure it stays fully opaque */
   }

.deposit-hover.show-tooltip .deposit-tooltip,
.deposit-hover:hover .deposit-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.deposit-tooltip {
 background: #1f6ea6 !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px !important;         /* Force padding */
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    text-shadow: none !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: normal !important;   /* Ensure text wraps */
}

/* Full width container */
.info-actions {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal split */
  column-gap: 10px;               /* at least 10px gap */
  margin: 20px 0;
  width: 100%;
    clear:both;
}

/* Button look: transparent with black border */
.info-btn {
  display: inline-flex;           /* perfect vertical/horizontal centering */
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
   color: #000;
  background-color: #2872bd;
    color: #fff;
  box-sizing: border-box;         /* keep widths equal including border */
  width: 100%;                    /* fill its grid cell */
  transition: background-color .2s ease, color .2s ease;
}

.info-btn:hover {
  background-color: #003366;
}


/* ─── Corner Ribbon (KEEP angle & size) with triangle tips & corner folds ─── */
/* anchor & safety (unchanged) */
#prod-img #main-image { position: relative; overflow: hidden; }
#main-image > .diag-banner { flex: 0 0 auto; width: auto; }

/* Corner container (with fold offset knobs) */
#prod-img #main-image .diag-banner{
  /* KNOBS */
  --corner-size: 600px;           /* clip square size */
  --offset-x: -10px;               /* nudge container left/right */
  --offset-y: -10px;               /* nudge container up/down */
  --ribbon: #2872bd;
  --fold:   #00264d;


  /* IMPORTANT: keep these INSIDE the block */
  position: absolute;
  top: var(--offset-y);
  left: var(--offset-x);
  width: var(--corner-size);
  height: var(--corner-size);
  overflow: hidden;               /* trims inside the 400px square */
  pointer-events: none;
  z-index: 6;

  /* neutralise earlier styles */
  background: none;
  border: 0;
  clip-path: none;
  transform: none;
  filter: none;
  box-shadow: none;
}


/* The ribbon band (unchanged) */
#prod-img #main-image .diag-banner > span{
  --angle:     -45deg;
  --startY:    58%;
  --length:    500px;
  --thickness: 14px;

  position: absolute;
  left: 0;
  top: var(--startY);
  transform-origin: left center;
  transform: translateY(-50%) rotate(var(--angle));
  width: var(--length);
  padding: calc(var(--thickness) / 2) 0;
display: flex;
  align-items: center;            /* vertical centering */
  justify-content: center;        /* horizontal centering */



  line-height: 1;                 /* avoid line-height centering quirks */
  white-space: nowrap;            /* prevent wrapping; remove if you want wrap */
  box-sizing: border-box;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    var(--ribbon);
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  font-size: clamp(13px, 1.7vw, 18px);
  text-shadow: 0 1px 1px rgba(0,0,0,.20);
  box-shadow: none;
  z-index: 2;
}

/* Hide ribbon when a video iframe replaces the image */
#main-image.video-active .diag-banner{ display:none; }


@media only screen and (min-width: 481px) and (max-width: 900px) {


  #prod-img #main-image .diag-banner{
    --corner-size: 400px;
    --offset-x: -10px;
    --offset-y: -15px;
  }
  #prod-img #main-image .diag-banner > span{
    --startY: 58%;
    --length: min(80vw, 350px);
    --thickness: 12px;
    font-size: clamp(11px, 3.2vw, 14px);
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  /* 1) Turn #prod-main into a normal block so its children stack naturally */
  #prod-main {
    display: block !important;
  }

  /* 2) Force each child (#prod-img and #prod-info) to fill the width */
  #prod-img,
  #prod-info {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0;
    padding: 0;
  }
 #main-image {
    width: calc(100% - 10px) !important;  /* full width minus 5px gap each side */
    margin: 0 5px !important;             /* exactly 5px from viewport edge */
    box-sizing: border-box !important;     /* include border in that width */
    border: 1px solid lightgrey !important;
    display: block !important;            /* break out of any flex quirks */
  }
  /* Make sure the actual <img> inside just fills its container */
  #main-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 3) Finally, force the tabs container below everything else */
  #prod-detail {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 1rem; /* some gap above the tabs */
      padding:5px;
  }
    
    #prod-title {
  font-size: 1.3rem;
  font-weight: bold;
margin-top: 1rem;
        margin-bottom: 1rem;
  width: 100%;
  clear: both;
  text-align: center;
}
    
  /* 4) Override any "width:100%" or "max-width:15%" on each thumbnail link */
  #thumbnails a,
  #thumbnails .prod-thumb {
    display: block;
    width: 50px;               /* or "auto" if you want them fluid—but 60px is common */
    max-width: none;
    margin: 0;                 /* remove desktop's "margin-bottom:10px" */
    flex: 0 0 auto;
  }
  .color-swatch-img {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 3px;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
  }   
  #icons {
    display: flex;
    flex-wrap: wrap;           /* Wraps to next line if space is limited */
    align-items: center;
    gap: 4px;                   /* Space between icons */
    padding: 5px 0;
    justify-content: flex-start;
  }
  /* Tooltip blocks inside icons container */
  #icons .tooltip {
    margin: 0;
    padding: 0;
    display: inline-block;
    flex: 0 0 auto;
  }
  /* Icons: img or input type image */
  #icons img,
  #icons input[type="image"] {
    display: block;
    width: 100%;
    max-width: 50px;           /* Limit max size */
    min-width: 40px;           /* Prevent icons from shrinking too small */
    height: auto;
    object-fit: contain;
  }
    #page-wrapper {
  box-sizing: border-box;
  padding: 0 5px;     /* 5px gap on left & right */
}
    /* ─── Force finance box to stay row-aligned on mobile ─── */
  #prod-v12-omi a {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;           /* tighten up the spacing */
    text-decoration: none;         /* keep existing styling */
  }
  #prod-v12-omi a > div:first-child {
    flex: 0 0 auto !important;     /* image stays at its natural size */
  }
  #prod-v12-omi a > div:nth-child(2) {
    flex: 1 1 auto !important;     /* text takes up remaining space */
    min-width: 0;                  /* prevent overflow */
  }
  #prod-v12-omi img {
    max-width: 50px !important;    /* shrink image if needed to keep text beside */
    height: auto !important;
  }
     /* 1) Stack each tab full-width */
  #prod-detail .tab-buttons {
    display: block !important;
       }
  #prod-detail .tab-buttons button {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* 2) Add the ▼ arrow and flip it when open */
  #prod-detail .tab-buttons button::after {
    content: '▼';
    transition: transform 0.3s ease;
  }
  #prod-detail .tab-buttons button[aria-selected="true"]::after {
    transform: rotate(180deg);
  }

  /* 3) Hide all panels by default and show only open ones */
  #prod-detail .tab-content[hidden] {
    display: none !important;
  }
  #prod-detail .tab-content:not([hidden]) {
    display: block !important;
    margin: 1rem 0;
  }
      #prod-detail .tab-content {
    margin-top: 0.5rem;
  }
    .tab-buttons button {
    font-size: 1.1rem; /* Increase from default */
    padding: 1rem;     /* Optional: give buttons more padding too */
  }
    .video-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  #prod-img #main-image .diag-banner{
    --corner-size: 400px;
    --offset-x: -10px;
    --offset-y: -15px;
  }
  #prod-img #main-image .diag-banner > span{
    --startY: 58%;
    --length: min(80vw, 350px);
    --thickness: 12px;
    font-size: clamp(11px, 3.2vw, 14px);
  }
    
}