/* Minimal fallback variables (remove if Bootstrap already loaded) */
:root{
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
  --bs-border-width: 1px;
  --bs-border-color-translucent: rgba(0,0,0,0.175);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

/* Offcanvas variables and base selectors */
.offcanvas,
.offcanvas-sm,
.offcanvas-md,
.offcanvas-lg,
.offcanvas-xl,
.offcanvas-xxl{
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

/* Core offcanvas */
.offcanvas{
  position: fixed;
  bottom: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}

/* Positions */
.offcanvas.offcanvas-start{
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end{
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top{
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom{
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}

/* Show / visibility helpers */
.offcanvas.show:not(.hiding),
.offcanvas.showing{
  transform: none;
}
.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing{
  visibility: visible;
}

/* Backdrop */
.offcanvas-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.offcanvas-backdrop.fade{ opacity: 0; }
.offcanvas-backdrop.show{ opacity: .5; }

/* Header / Title / Body */
.offcanvas-header,
.offcanvas2-header{
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  background-color: #efefef;
  padding: 10px 20px;
}
.offcanvas-header .btn-close,
.offcanvas2-header .btn-close{
  padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
  margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));
  margin-left: auto;
  border: none;
  background: #14123d;
  color: #fff;
  font-weight: bold;
  padding: 0 9px;
  font-size: 20px;
  width: 30px;
}
.offcanvas-title{
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}
h5#offcanvasCartLabel,
h5#offcanvasCart2Label {
    font-size: 1.4em;
    font-weight: bold;
    color: #14133c;
}
.offcanvas-body{
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: hidden;
  overflow-x: hidden;
  
}
div#offcanvasCart2 {
    right: 400px;
}

div#offcanvasCart {
    border-left: 3px solid #666;
}
.offcanvas2-header .btn-close{
  background-color: #55ba47;
}
.copied-accessory .wrapper-thumbnail {
    padding:0 5px;
    text-align:center;
}
.copied-accessory .thumbnail {
    padding: 10px;
}
.copied-accessory .thumbnail h3{
    font-size:14px;
    min-height:60px
}
.copied-accessory .thumbnail .acc-image{
    margin-bottom:10px
}
.copied-accessory .thumbnail button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

.offcanvas-body .thumb_cart ul .left {
    width:80px;
    margin-right:10px
}
.offcanvas-body .thumb_cart ul .left img{
    width:80px;
    height:80px;
}
.offcanvas-body .thumb_cart ul .right {
    width: calc(100% - 90px);
    font-size:14px
}
.offcanvas-body .thumb_cart ul .right .title {
    margin-bottom:10px
}
.acc-price span {
    font-size: 20px;
    font-weight: 700;
    color: #54ba47;
}

.offcanvasatc2 {
    position: fixed;
    right: 400px;
    top: 0;
    height: 100vh;
    width: 60px;
    transform: rotate(-180deg);
    writing-mode: sideways-lr;
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
    transition: opacity 0.5s ease-out, max-height 0.5s ease-out; /* Smooth transition */
    opacity: 1;
}
.offcanvasatc2:before {
    display: inline-block;
    content: "<";
    font-size: 30px;
    font-weight: bold;
    height: 54px;
    text-align: center;
    vertical-align: middle;
    margin-top: 10px;
    writing-mode: horizontal-tb;
    transform: rotate(-180deg);
}
.offcanvasatc2.hide {
    opacity: 0;
    max-width: 0;
}
.btn.btn-default.viewcart {
    color: #55ba47;
    background-color: #fff;
}
/* Responsive variants: on larger breakpoints offcanvas becomes static/integrated in navbar */
@media (min-width:576px){
  .offcanvas-sm{
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
    position: fixed; /* in Bootstrap this flips to static for expanded navbars - keep fixed for isolated use */
  }
}
@media (min-width:768px){
  .offcanvas-md{ --bs-offcanvas-height: auto; --bs-offcanvas-border-width: 0; background-color: transparent !important; }
}
@media (min-width:992px){
  .offcanvas-lg{ --bs-offcanvas-height: auto; --bs-offcanvas-border-width: 0; background-color: transparent !important; }
}
@media (min-width:1200px){
  .offcanvas-xl{ --bs-offcanvas-height: auto; --bs-offcanvas-border-width: 0; background-color: transparent !important; }
}
@media (min-width:1400px){
  .offcanvas-xxl{ --bs-offcanvas-height: auto; --bs-offcanvas-border-width: 0; background-color: transparent !important; }
}
@media (max-width:768px){
  .offcanvas.offcanvas-end {
      width: 300px;
  }
  div#offcanvasCart2 {
      right: 300px;
      width: 300px;
  }  
  .offcanvasatc2 {
      right: 300px;
  }
}
@media (max-width:480px){
  div#offcanvasCart2 {
      left: 0;
      width: 100% !important;
  }
}