@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

.sitewrap {background-color: #f9f9f9 !important}

.pd_addsuccess_wrapper, .rvw_errnotice, .qna_item .question_box .qb_data .post_wrap, .answers_group, .answers_wrapper .answer_bubble .answer_vote .answer_errnote, #afterpay-clearpay-message2, #nostock_err, #addto_error, #mobupsell {
	display:none;
}

#sitecontainer .left2 {
    padding-top: 30px;
}
#sitecontainer .left {
    padding-top: 30px;
}

#mobupsell_left {display: block;}

.pd_imgholder  {
	float:left;
	width:50%;
	padding:5px;
    box-sizing: border-box;
	background-color:#fff;
	border:1px solid #f0f0f0;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.pd_imgholder #mainphoto{
width:100%;
	max-width:100%;
	display: block;
  margin-left: auto;
  margin-right: auto;
}

.bundle-upsell-header .upsell-icon {
    display: inline-block;
    width: 22px; 
    height: 22px;
    background-image: url('https://aromaworld.co.uk/images/upsell2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    color: transparent;
    margin-right: 8px;
    vertical-align: middle;
    opacity:0.75
}

.bundle-upsell-box {
    background-color: #fdfcf9;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    font-family: 'Roboto Slab', serif;
    padding: 16px;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.bundle-upsell-header {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: #222;
    margin-bottom: 6px;
}

.bundle-upsell-header strong {
    font-weight: 350;
    font-size:0.9em;
}

.bundle-upsell-text {
    font-size: 0.8em;
    color: #555;
    margin: 0 0 14px 0;
    line-height: 1.4;
    font-weight:300
}

.bundle-upsell-text  strong{
    font-weight:350;
     color:#9a7463
}

/* The secondary button */
.bundle-upsell-btn {
    display: inline-block;
    background-color:#eff2f4;
    color: #505050;
    padding: 8px 14px;
    font-size: 0.75em;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.upsbtn_wrap {
    display: flex;
    justify-content: left;
}

/* Button hover effect */
.bundle-upsell-btn:hover {
    background-color: #917373;
    color: #ffffff;
}

#mobupsell .bundle-upsell-header strong {
    font-size:0.8em !important
}

#mobupsell .bundle-upsell-box {
    margin-top: 30px !important;
    padding:12px !important
}

#mobupsell .bundle-upsell-text {
    font-size: 0.7em !important
}
#mobupsell .bundle-upsell-btn {
    font-size: 0.65em !important;
    text-transform: none !important;
    font-weight: 300 !important;
}

/*end bundle*/

.clearpaybox{
margin-top: -15px;
}
.AfterpayMessage {
  font-family: 'Roboto Slab', serif;
	font-weight:200;
  font-size: 12px;
  color:#434343;
}
.AfterpayMessage-logoSvg {
  width: 60px;
  height: auto;
}

.mpqvbx .AfterpayMessage {margin-top:-4px !important;}

#zoomphoto {
width:30px;
height:30px;
border-radius:50%;
background-color:#ffffffab;
border:1px solid #ccc;
padding:4px;
position:absolute;
left:10px;
top:10px;
box-sizing: border-box;
cursor:pointer;
}
#zoomphoto:hover img{
opacity:1.0
}

#zoomphoto img {width:100%; opacity:0.7}

#tabs_content #tab1 {
justify-content: space-between
}

.pd_head {
	margin-bottom:30px;
	font-size:18px;
}

.pd_container {
	clear:both;
	padding-top:10px;
}

.pd_imgholder .gallery_thumbs {
	background-color:#fafafa;
	border-top:1px dashed #ccc;
	padding:20px 0;
	text-align: center;
}
.pd_imgholder .gallery_thumbs img, .product_video{
    width: 70px;
    height: 70px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    margin-right: 15px;
    margin-top: 15px;
    cursor: pointer;
}

.pd_imgholder .gallery_thumbs img:last-of-type{
	margin-right:0px;
}

.product_video {
    border: none !important;
}

/* video */
.videomodal {
    display: none;
    position: fixed;
    z-index: 9999999;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow-y: auto;

    background-color: rgba(0,0,0,0.85);

    box-sizing: border-box;
    padding: 30px 15px;
}

.videomodal-content {
    background-color: #fefefe24;
    text-align: left;
    color: #000;

    width: 90%;
    max-width: 1000px;

    padding: 10px;
    border-radius: 8px;

    box-sizing: border-box;

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    font-family: 'Roboto Slab', sans-serif;
}

@media (max-width: 700px) {

    .videomodal-content {
        top: 42%;
        width: calc(100% - 30px);
    }

}

.closevideo-button {
    position: absolute;
    top: -10px;
    right: -10px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
    background-color: #333;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 35px;
    text-align: center;
}

.closevideo-button:hover,
.closevideo-button:focus {
    color: #ddd;
    background-color: #555;
    text-decoration: none;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* end video */

.photogrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*
   Gallery media order — CSS ONLY.
   Keep the main product photo first, show Video second,
   then leave the remaining product images after it.
   This changes only the visual order; the DOM and video click handler stay untouched.
*/
.photogrp > .gallery-thumb-shell {
    order: 2;
}

.photogrp > .gallery-thumb-shell:first-child {
    order: 0;
}

.photogrp > .gallery-video-shell {
    order: 1;
}

.pd_contentholder {
	float:right;
	width:45%;
	position:relative;
}

.pd_contentholder .packaging_option {
background-color:#f3ebef;
color:#000;
padding:8px 10px;
font-size:14px;
margin:5px 0 0 0;
display:inline-block;
border-radius:4px
}

.pd_imgholder .pd_wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.pd_imgholder .pd_wishlist #addwish,
.pd_imgholder .pd_wishlist .pd_wishsaved {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #898989;
    border-radius: 50%;
    background: rgba(255, 255, 255, .93);
    color: #6c4d5f;
    box-shadow: 0 2px 8px rgba(49, 35, 46, .12);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.pd_imgholder .pd_wishlist #addwish:hover {
    background: #ded0bc63;
    border-color: #c9c4bc;
    color: #332b2e;
    transform: translateY(-1px);
}

.pd_imgholder .pd_wishlist #addwish:focus-visible {
    outline: 2px solid #6c4d5f;
    outline-offset: 3px;
}

.pd_imgholder .pd_wishlist svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pd_imgholder .pd_wishlist .pd_wishsaved {
    background: #ffffff;
    color: #d9c3d2;
    border: 1px solid #e2dbd1;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}

.pd_contentholder > .pd_wishlist .pd_wishsaved svg {
    color: rgb(254 237 245);
    stroke: rgb(255 255 255);
    background-color: #caafc1;
}

.pd_imgholder .pd_wishlist .pd_wishsaved svg {
    fill: currentColor;
}

.pd_imgholder .pd_wishtext {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pd_wishlist #wishmsg_wrap {
display:none;
position:absolute;
top:45px;
left:-10px;
width:160px;
}

.pd_wishlist .wishlist_msg{
position:relative;
background-color:#453b3b;
color:#fff;
width:100%;
padding:6px;
border-radius:6px;
font-size:11px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.pd_wishlist .wishlist_msg:after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #453b3b transparent;
    border-width: 0 9px 11px;
    top: -11px;
    left: 12%;
    margin-left: -9px;
}

.pd_wishlist .wishlist_msg a{
color:#fff;
text-decoration-color: #E4CFCF
}


/* =========================================================
   Wishlist pill above the product title
   Kept in normal document flow so spacing can be changed with
   margin/padding without ever overlapping the product title.
   ========================================================= */

.pd_contentholder {
    box-sizing: border-box;
}

.pd_contentholder > .pd_wishlist {
    position: relative;
    z-index: 3;
    display: block;
    margin: 8px 0 10px;
}

.pd_contentholder > .pd_wishlist #addwish,
.pd_contentholder > .pd_wishlist .pd_wishsaved {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 29px;
    padding: 4px 11px 4px 0px;
    box-sizing: border-box;
    border-radius: 50px 20px 20px 50px;
    background: #e2cc8a21;
    color: #000000;
    font-family: 'Roboto Slab', serif;
    font-size: 11px;
    font-weight: 200;
    line-height: 1;
    text-decoration: none;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pd_contentholder > .pd_wishlist #addwish:hover {
        background: #57354cb8;
    border-color: #d8d1c699;
    color: #fffafd;
    box-shadow: 0 2px 6px rgba(49, 35, 46, .08);
    transform: translateY(-1px);
}

.pd_contentholder > .pd_wishlist #addwish:focus-visible {
    outline: 2px solid #765b70;
    outline-offset: 2px;
}

.pd_contentholder > .pd_wishlist svg {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 8px;
    fill: none;
    stroke: rgb(156 144 152);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.pd_contentholder > .pd_wishlist #addwish:hover svg {
        color: #fcecf2;
        stroke:#fff;
    background-color: #f2e9ef61;
}

.pd_contentholder > .pd_wishlist .pd_wishsaved {
       background: #57354cb8;
    border-color: #827b80;
    color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.pd_contentholder > .pd_wishlist .pd_wishsaved svg {
    fill: currentColor;
}

/* Reveal the existing Save to wishlist / Saved to wishlist text. */
.pd_contentholder > .pd_wishlist .pd_wishtext {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
}

/* Wishlist feedback message, if shown by the existing JS. */
.pd_contentholder > .pd_wishlist #wishmsg_wrap {
    position: absolute;
    top: 36px;
    left: 0;
    right: auto;
    width: 160px;
}

.pd_contentholder > .pd_wishlist .wishlist_msg:after {
    left: 20px;
    right: auto;
    margin-left: -9px;
}

/* The pill is now a real element above the title. Its margins push
   every following element down naturally. */
.pd_contentholder > .pd_wishlist + h1.pd_title {
    margin-top: 0;
}

.pd_ratingrow {
    display: block;
    width: 100%;
    margin-top: 15px;
}

.pd_ratingrow .pd_rating {
    margin-top: 0;
}

@media (max-width: 780px) {
    .pd_contentholder > .pd_wishlist {
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .pd_contentholder > .pd_wishlist #addwish,
    .pd_contentholder > .pd_wishlist .pd_wishsaved {
        height: 28px;
        padding: 4px 10px 4px 0px;
        font-size: 10.5px;
    }

    .pd_contentholder > .pd_wishlist svg {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}

h1.pd_title {
    margin-top: 15px;
    font-family: "Source Serif 4", serif;
    font-weight: 490;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #232020;
}

.pd_cat {
    color: #111;
    font-size: 11px;
    font-family: 'Roboto Slab';
    margin-top: 10px;
    font-weight: 150;
}

.pd_rating {
    margin-top: 15px;
    color: #878787;
    font-size: 13px;
    font-family: 'Roboto Slab', serif;
	font-weight: 100;
}

.pd_price {
	font-size:24px;
	font-weight: 350;
    font-family: 'Roboto Slab';
	color:#424242;
	margin-top:20px;
    display:flex;
    flex-direction: row;
}

#freeship_eligible {
    background-color: #e4efef;
    color: #131413;
    padding: 0 8px;
    font-size: 11px;
    font-family: 'Roboto Slab';
    margin-left: 8px;
    font-weight: 300;
    display: flex;
    align-items: center;
    border-radius: 6px;
}
#freeship_eligible::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url('https://aromaworld.co.uk/shop/images/tick.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.pd_price .saleicn {
    display: inline-block;
    font-size: 9px;
    padding: 4px 8px;
    margin-right: 5px;
    background-color: #df7f80;
    color: #fff;
    border-radius: 5px;
    position: relative;
    top: -2px;
    box-shadow: rgb(60 41 41 / 8%) 0px 30px 60px -12px inset, rgb(117 55 55 / 33%) 0px 18px 36px -18px inset;
}
.pd_price .old_price{
text-decoration: line-through; text-decoration-color:#b36869; font-size:14px
}

.pd_info {
	background-color:#fdfdfd;
	border:1px solid #ededed;
	font-size:13px;
	padding:15px;
	width:85%;
	color:#888;
	margin-top:15px;
	margin-bottom:15px;
	font-family: 'Roboto Slab',sans-serif;
	font-weight:200;
    box-shadow:rgb(47 47 47 / 0%) 0px 1px 3px 0px, rgb(187 187 187 / 6%) 0px 1px 2px 0px
}

.pd_info #short {color:#000}

.pd_info .rule {
        height: 1px;
        background-color: #F1F1F1;
        width: 100%;
        margin: 10px auto;
        background-image: linear-gradient(left , #F1F1F1 2%, #F1F1F1 50%, #F1F1F1 98%);
        background-image: -o-linear-gradient(left , #F1F1F1 2%, #F1F1F1 50%, #F1F1F1 98%);
        background-image: -moz-linear-gradient(left , #F1F1F1 2%, #F1F1F1 50%, #F1F1F1 98%);
        background-image: -webkit-linear-gradient(left , #F1F1F1 2%, #F1F1F1 50%, #F1F1F1 98%);
        background-image: -ms-linear-gradient(left , #F1F1F1 2%, #F1F1F1 50%, #F1F1F1 98%);
        background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, #fafafa), color-stop(0.5, #DBDBDB), color-stop(0.98, #fafafa) );
}

.pd_info span {
	color:#717171;
	margin-right: 4px;
}
.pd_info span.capacity_inf {
	color:#888;
}


.pd_info a {
	color:#A7A7A7;
	margin-left: 4px;
	font-size: 12px
}.pd_info a:hover {
	color:#333;
}

.swatch_ctr {
	margin-top:30px;
	margin-bottom:15px;
}

.pd_form {
	margin-top:20px;
	color:#111;
	font-size:20px;
}

input.pd_qty {
	font-size:16px;
	color:#333;
	padding:3px;
	width:30px;
	border:1px solid #ccc;
	text-align:center;
	margin-right:20px;
}

/* -- quantity box -- */
.quantity {
 display: inline-block; margin-right: 20px; margin-top: 20px}

.quantity .input-text.qty {
 width: 35px;
 height: 39px;
 padding: 0 5px;
 text-align: center;
 background-color: #f7f4f2;
 border: 1px solid #ddd;
}

.quantity.buttons_added {
 text-align: left;
 position: relative;
 white-space: nowrap;
 vertical-align: top; }

.quantity.buttons_added input {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 box-shadow: none;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
 padding: 7px 10px 8px;
 height: 41px;
 background-color: #ffffff;
 border: 1px solid #ddd;
 cursor:pointer;}

.quantity.buttons_added .minus {
 border-right: 0; }

.quantity.buttons_added .plus {
 border-left: 0; }

.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
 background: #fafafa; }

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0; }
 
 .quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
 outline: none; }
/* -- end quantity box -- */

.product-collection a {
    color: #3f3f3f;
    margin-left: 4px;
    font-size: 12px;
    /* background-color: #f3f3f01f; */
    border: 1px solid #f0ebe7;
    border-left: 0;
    border-right: 0;
    text-decoration: none;
    font-weight: 200;
    display: inline-block;
    border-radius: 5px;
    padding: 4px 10px;
    box-shadow: rgb(93 93 93 / 6%) 0px 2px 4px 0px inset;
}
.product-collection a:hover {
    background-color: #fdfdfd;
}

.pd_add {
    /*background-color: #beac95;*/
    background-color: #c19a6b;
	font-family: 'Roboto Slab',sans-serif;
    font-weight:300;
	color:#fff;
	font-size:17px;
	margin-top:20px;
	margin-bottom:30px;
	padding:12px 20px;
	border:none;
	outline:none;
	cursor:pointer;
    border-radius:6px;

}
.pd_add:hover {
background-color: #c19a6b;
box-shadow: rgba(50, 50, 93, 0.1) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.2) 0px 18px 36px -18px inset;
}

.pd_add:active {
	position:relative;
	top:1px;
}

.m_content {
	padding-top:45px;
	clear:both
}

.qv_cwrap {
padding:30px
}

#delivery-message {
font-size:14px;
font-family: 'Roboto Slab',sans-serif;
font-weight:300;
display:flex;
align-items: center;
margin-bottom: 20px
}

#delivery-message img.freedeliv_icn {
width:18px;
height:auto;
margin-right:5px
}
#delivery-message img.freedeliv_info {
width:16px;
height:auto;
margin-left: 2px;
cursor:pointer
}

#ask_question {
 font-size:14px;
 display:flex;
 align-items: center;
font-family: 'Roboto Slab',sans-serif;
font-weight:300;
 margin-top: 10px;
 position:relative
}
#ask_question img {
margin-right: 5px
}
#ask_question span {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 3px;
cursor:pointer;
}

#askmsg_wrap {
display:none;
position:absolute;
top:30px;
left:-13px;
width:160px;
}

#askmsg_wrap .ask_msg {
position:relative;
background-color:#cfcbce;
color:#000;
width:100%;
padding:6px;
border-radius:6px;
font-size:11px;
font-family: 'Roboto Slab', serif;
font-weight: 200;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
#askmsg_wrap .ask_msg:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color:#cfcbce transparent;
border-width: 0 9px 9px;
top: -9px;
left: 12%;
margin-left: -9px;
}

#askmsg_wrap .ask_msg a{
color: #000;
border-bottom:1px dashed #00000042;
text-decoration: none;
}

/*add success*/
.pd_addsuccess_wrapper {
container-type: inline-size;
    container-name: addsuccess;
}

.pd_addsuccess {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Roboto Slab',sans-serif;
    gap: 12px;
    padding: 10px 12px;
    background: #f1f8f4;
    border: 1px solid #dfeae4;
    border-radius: 8px;
    margin-top:15px;
    /* box-sizing: border-box; */
    font-size: 14px;
    line-height: 1.4;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.pd_addsuccess_message {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 300;
}

.pd_addsuccess_message:before {
    content: "✓";

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

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    background: #2f7d4a;
    color: #fff;
    border-radius: 50%;

    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.pd_addsuccess_actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* View basket - secondary action */

.pd_addsuccess_view {
    appearance: none;
    border: 0;
    background: transparent;

    padding: 7px 8px;

    color: #222;
    font: inherit;
    font-size: 13px;
    font-weight: 300;

    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: from-font;
    cursor: pointer;
}

.pd_addsuccess_view:hover {
    text-decoration-thickness: 2px;
}

.pd_addsuccess_checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    background: #fff;
    border: 1px solid #aaa;
    border-radius: 6px;

    color: #111;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.pd_addsuccess_checkout:hover {
    background: #f8f8f8;
    border-color: #777;
}

.pd_addsuccess_checkout:active {
    transform: translateY(1px);
}


/* Keyboard accessibility */
.pd_addsuccess_view:focus-visible,
.pd_addsuccess_checkout:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}

@media (max-width: 600px) {

    .pd_addsuccess {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .pd_addsuccess_message {
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: 14px;
    }

    .pd_addsuccess_actions {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    .pd_addsuccess_view,
    .pd_addsuccess_checkout {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 300;
    }

    .pd_addsuccess_view {
        border: 1px solid #aaa;
        background: #fff;
        color: #111;
        text-decoration: none;
    }

}

@container addsuccess (max-width: 400px) {

    .pd_addsuccess {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .pd_addsuccess_message {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .pd_addsuccess_actions {
        width: 100%;
        justify-content: center;
    }

    .pd_addsuccess_view,
    .pd_addsuccess_checkout {
        flex: 1;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }
}
/*end addsuccess*/

#delivery_modal {
display: none;
width: 95%;
max-width: 500px;
color: #fff;
position: relative;
text-align: center;
border-radius: 20px;
overflow:hidden;
box-sizing: border-box;
}

#delivery_modal #fd_ovl{
width:100%;
height:20%;
position:absolute;
bottom:0;
padding:0 20px;
box-sizing: border-box
}

#delivery_modal h3{
font-size:28px;
margin: 10px 0;
font-weight: 400;
font-family: 'Roboto Slab',sans-serif
}
#delivery_modal h4{
    font-size: 18px;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: #000000e6;
}
#delivery_modal p{
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 200;
}

#delivery_modal #coupon_box{
display:flex;
flex-direction: row;
align-items: center;
	margin:0 auto;
justify-content: center
}

#delivery_modal #coupon_box img{
cursor:pointer;
width:50px;
margin-left: 10px
}

#delivery_modal input{
width:200px;
padding:8px;
box-sizing: border-box;
background-color: rgba(255,255,255,1.00);
border:1px dashed rgb(190 190 202);
text-align: center;
color:#000;
border-radius:10px;
font-size:26px
}

#delivery_modal a {
color:#fff;
}

#delivery_modal #copied_note {
display:none;
color:#fff;
background-color:rgba(255,255,255,0.05);
margin-top: 20px;
padding: 8px 0;
border-radius:10px;font-size: 14px
}


#family_modal {
	display:none;
	padding:5px;
	background-color: transparent;
	border:1px solid rgba(255,255,255,0.4);
	width:100%;
	max-width:350px;
}
#family_modal .wrap {
	width:100%;
	background-color:#fff;
	border:1px solid #000;
    padding:20px;
	box-sizing: border-box;
	text-align: center
}

#family_modal .wrap hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    margin: 10px 0
}

#family_modal .wrap h5{
	font-size:30px;
	padding-bottom: 5px;
	margin:0
}
#family_modal .wrap h6{
	font-size:20px;
    font-weight: normal;
    text-align: center;
	margin:0
}
#family_modal img{
width:70px;
height:70px;
margin:20px auto 0px auto;
}
#family_modal .dc {
text-align: left;
font-size:15px;
color:#666
}
#family_modal a {
text-decoration: underline;
cursor:pointer;margin-top: 10px;
color:#000
}

#delete_modal {
display:none;
background-color:#fff;
width:100%;
max-width:320px;
font-family: 'Roboto Slab',sans-serif;
border-radius:6px
}
#delete_modal .mhdr{
background-color: #4a4259;
padding:10px;
color:#fff
}

#delete_modal .mhdr2{
padding:15px;
font-weight:300
}

#delete_modal .mhdr3{
text-align: center;
padding-top: 20px
}

#delete_modal .mhdr3 button.delq_confirm{
margin-right: 20px;
}

#delete_modal h6{
margin:0;
text-align: center;
font-size:24px;
font-weight: normal
}

#askq_modal {
display:none;
padding:5px;
background-color: transparent;
color:#fff;
width:100%;
max-width:500px;
font-family: 'Roboto Slab',sans-serif;
}

#askq_modal h4{
font-size:32px;
text-align: center;
font-weight: normal;
padding-bottom: 5px;
margin:0
}
#askq_modal p{
padding:0 5px;
font-size: 14px;
font-weight:200
}
#askq_modal p.post_success{
text-align: center
}
#askq_modal a{
color:#fff;
}
#askq_modal textarea{
width:100%;
min-height:70px;
padding:6px;
box-sizing: border-box;
font-size: 15px;
}
#askq_modal button {
background-color: #624d5c;
color:#fff;
padding:10px 20px;
font-size:18px;
border:none;
display:block;
margin: 20px auto 35px auto;
border-radius:7px;
cursor:pointer
}
#askq_modal a#cancel_askq{
text-align: center;
display:block;
font-size:16px;
}

#askq_modal img.psuccess{
width:60px;
height:60px;
padding-bottom: 20px;
margin:0 auto;
display:block;
}

#askq_modal #postquestion_err {
display:none;
background-color:#a3393b;
color:#fff;
font-size:13px;
padding:8px;
margin-top:3px;
text-align-last: center
}
#addto_error{
font-size: 16px;
font-weight: 200;
color: #dd7496;
}

#reviews_modal {
display:none;
padding:5px;
background-color: transparent;
border:1px solid rgba(255,255,255,0.4);
max-width:500px;
border-radius:20px;
box-sizing: border-box;
width:95%;
}

#reviews_modal .wrap{
font-family: 'Roboto Slab',sans-serif;
    background-color: #342730;
    padding: 15px;
    border-radius: 20px;
    box-sizing: border-box;
}
#reviews_modal h4{
font-size:23px;
color:#fff;
text-align:left;
font-weight: 300;
padding-bottom:15px;
margin:0
}

#reviews_modal #reviews_graphs{
background-color: #fff;
padding:20px;
margin-bottom: 15px
}

#reviews_modal #reviews_graphs .graph_item{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom:15px
}
#reviews_modal #reviews_graphs .graph_item:last-of-type{
margin-bottom:0px
}

#reviews_modal #reviews_graphs .graph_item .starlbl{
width:40px;
display: flex;
align-items:center;
font-weight:400;
font-size: 18px;
}

#reviews_modal #reviews_graphs .graph_item .starlbl img{
height:20px;
width:20px;
margin-left: 5px
}

#reviews_modal #reviews_graphs .graph_item .rvwbar{
background-color: #eee;
border-radius:5px;
overflow:hidden;
height:20px;
flex-grow:1
}

#reviews_modal #reviews_graphs .graph_item .rvwbar .fillbar{
background-color:#e3d6ad;
height:20px
}

#reviews_modal #reviews_graphs .graph_item .rvwdata{
font-size: 18px;
width:20px;
font-weight:200;
margin: 0 10px;
}

#reviews_modal a {
    color: #d3d3d3;
    display: block;
    font-weight: 100;
    text-decoration-thickness: 0;
    text-align: center;
}

#lowstock_note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: #f8f1e8;
    /* border: 1px solid #f4ece8; */
    border-radius: 6px;
    margin-top: 15px;
    color: #593631;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

#lowstock_note::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    background: #c66f62;
    border-radius: 50%;
}
#nostock {
    background-color: #f7e9e9;
    border: 1px solid #f4d9d5;
    font-size: 15px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 15px;
    color: #3c3030;
    box-sizing: border-box;
    display: inline-block;
    width: 93%;
    border-radius: 10px;
    font-family: 'Roboto Slab',sans-serif;
    font-weight: 200;
}

#nostock h6{
margin: 0;
font-weight: 300;
font-size: 15px;
color: #000;
}

.nostock_qv {
padding:12px !important;
font-size: 14px !important;
width:100% !important;
margin-top: 10px !important
}

#nostock label {
display:block;
font-size: 14px;
padding-top: 15px
}
#nostock input {
padding:8px;
font-size:14px;
margin-right: 4px;
margin-top: 5px;
border:1px solid #a0a0a0;
border-radius:6px;
font-weight:300;
font-family: 'Roboto Slab',sans-serif;
}

#nostock button{
    background-color: #bd5959;
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 9px 10px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 200;
    margin-top: 15px;
    font-family: 'Roboto Slab',sans-serif;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

@media (max-width: 420px) {	
#nostock button{
width:100%;
}

#nostock input {
width:100%;
margin-right: 0px;
margin-top: 10px;
box-sizing: border-box
}
	
#delivery_modal #fd_ovl{
height:24%;
}
	
}

#nostock_err {
color:#c12b2b;
margin-top: 10px
}

/* Tabs */
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 40px;
  height: 0; 
  line-height: 30px;
  text-decoration: none;
  font-size:18px;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777;
  opacity: 0.3;
  filter: alpha(opacity=30);    
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #998E88;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #3d3d3d;
  opacity: 1;
  filter: alpha(opacity=100);   
}

#tabs_content {
      background: #fff;
      border-top: 2px solid #3d3d3d;
      padding: 2em;
	  font-size:14px;
  }

  #tabs_content strong {
      font-weight:350
  }

  hr.ulsep {
    margin-bottom: 25px;
    margin-top:25px;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(197 197 197 / 75%), rgba(0, 0, 0, 0));
  }
  
.tab_chead h3 {
  font-size:23px;
  color:#000;
  font-weight:350;
  margin:0;
  padding-bottom:20px;
}
.tab_dualleft {
	width:100%;
	font-family: 'Roboto Slab', sans-serif;
	font-weight:300
}

.tab_dualleft h4, .tab_dualright h4{
	font-size:18px;
    margin:20px 0;
    font-weight:normal;
}

.tab_dualleft p{
	color:#252525
}

.tab_dualleft .product_brand{
display:flex;
flex-direction: column;
border-top:1px solid #e5e5e5;
margin-top: 50px
}

.tab_dualleft .product_brand .pbrand_logo{
width:100%;
margin-top: 23px;
text-align: center
}

.tab_dualleft .product_brand .pbrand_logo img.fmparfum{
width:210px
}
.tab_dualleft .product_brand .pbrand_logo img.utique{
width:70px
}
.tab_dualleft .product_brand .pbrand_logo img.hairlab{
width:180px
}
.tab_dualleft .product_brand .pbrand_logo img.fontain, .tab_dualright .product_brand .pbrand_logo img.fontain{
width:180px
}


.tab_dualright .product_brand .pbrand_logo{
width:100%;
text-align: center
}

.tab_dualright .product_brand .pbrand_logo img.fmparfum{
width:210px
}
.tab_dualright .product_brand .pbrand_logo img.utique{
width:70px
}
.tab_dualright .product_brand .pbrand_logo img.hairlab{
width:180px
}

.tab_dualright .product_brand .pbrand_logo img.smtclean{
width:70px;
}

.tab_dualright .product_brand .pbrand_logo img.fmmakeup{
width:180px;
}

.tab_dualright .product_brand .pbrand_logo img.alaya{
width:80px;
}
.tab_dualright .product_brand .pbrand_logo img.aurile{
width:80px;
}
.tab_dualright .product_brand .pbrand_logo img.nutricode{
width:210px;
}

ul li strong, ol li strong {
    font-weight: 350;
}

ol li {margin-bottom: 5px;}

.tab_dualleft .product_brand .pbrand_info{
flex-grow: 1;
}

.tab_dualleft ul, .tab_dualright ul{
color:#252525;
list-style-type:disc;
margin-left: -10px;
list-style-image:url("../../images/right-arrow3.png")
}
.tab_dualleft ul li, .tab_dualright ul li{
margin-bottom:15px;
}
.tab_dualleft ul li:last-child, .tab_dualright ul li:last-child{
margin-bottom:25px;
}

p.ingredients {
color:#999;
font-size:12px
}

p.ingredients {
color:#999;
font-size:12px
}

p.makeup_disclaimer {
color:#444;
font-size:11px
}

p.advisory {
color:#444;
font-size:11px
}

.tab_dualright {
	float:right;
	width:45%;
}

.tab_subinfo {
	color:#666;
	padding-bottom:10px;
}

.tab_subinfo_bottom {
	margin-top:20px;
    color:#787171;
    font-size:11px;
	font-family: 'Roboto Slab',sans-serif;
	font-weight:200
}

.tab_fnotes {
	background-color:#fbfbfb;
	border:1px solid #eee;
	padding:15px;
    box-sizing: border-box;
	color:#666;
}

.fnotes_head {
  font-size:17px;
  color: #000;
  padding-bottom:5px;
}

.fnotes_info {
	padding-bottom:20px;
}
.fnotes_info:last-child {
	padding-bottom:0
}


.setgroup_container {
background-color: #f8f8fa;
padding:20px;
margin-bottom:10px;
border-radius:0 5px 5px 5px
}

.setgroup_container .grpitem{
display:flex;
flex-direction:row;
align-items: center;
background-color:#FDFDFE;
margin-bottom: 10px;
}
.setgroup_container .grpitem:last-of-type{
margin-bottom:0px;
}

.setgroup_container .grpitem img{
width:100%;
}

.setgroup_container .grpitem .grpimg{
padding:5px;
width:50%;
max-width:70px;
}

.setgroup_container .grpitem .grpinf{
margin-left:5px
}

.setgroup_container .grpitem .grpinf a{
color:#000;
text-decoration: none
}

.setgroup_container .grpitem .grpinf a:hover{
text-decoration:underline
}

.setgroup_container .grpitem .grpinf .grdetails{
color:#999;
margin-top:10px;
display:flex;
align-items: center
}
.setgroup_container .grpitem .grpinf .grdetails img{
max-width:80px;
width:100%;
margin-right: 5px
}

.additional_info h3.aih {
font-weight:bold;
font-size:23px
}
.additional_info h4 {
font-weight:normal;
font-size:18px;
margin:0
}

.additional_info h4.vsh {
font-weight:normal;
font-size:18px;
margin:25px 0 10px 0;
}

.additional_info .aii{
margin-bottom:25px;
color:#666;
}

.additional_info table.ingredients_table {
margin-top: 20px;
color:#666;
font-size:12px
}

.additional_info table.ingredients_table h6 {
margin:0 0 5px 0;
font-size:12px
}

.additional_info table.ingredients_table td {
padding-bottom:10px
}

.eco_wrap {
display: flex;
flex-direction: row;
align-items: center
}

.eco_wrap h4 {
font-size: 17px;
}

.additional_info .eco_logo {
text-align: center
}

hr.about {
display: block;
height: 1px;
border: 0;
border-top: 1px dashed #e2e2e2;
margin: 1em 0 2em 0;
padding: 0
}


#fragrance_notes {margin: 30px 0 30px 0; border-top:1px dashed #d4d4d4; border-bottom:1px dashed #d4d4d4; font-family: 'Roboto Slab',sans-serif; font-size: 14px}
#fragrance_notes h4{margin:20px 0 20px 0 !important}
#fragrance_notes h4, h4.about {font-size:15px; font-weight:350}

h4.about {margin:10px 0 0 0; }

#fragrance_notes ul{
list-style-image:url("../../images/aroma2.png");
	margin-bottom: -5px
}

#fragrance_notes ul span{font-weight:350; margin-right: 5px; margin-left: 5px}
#fragrance_notes ul li{font-weight:300}

.additional_info .eco_logo img {
margin:0 auto;
width:35px;
margin-right:10px;
filter: grayscale(100%);
}

#no_reviews, #no_questions {
text-align: center;
font-size: 24px;
margin-top: 30px;
font-family: 'Roboto Slab',sans-serif;
font-weight: 300
}
#no_reviews p, #no_questions p{
font-size: 16px;
color:#999;
font-weight: 200
}

#no_questions a{
color: #999;
text-decoration: none;
border-bottom: 1px dashed #e3e3e3;
padding-bottom: 1px;
}
#no_questions a:hover{
color:#666;
}

#review_header, #questions_header {
font-size:23px;
margin-bottom: 25px;
display:flex;
}

#review_header span, #review_header a#review_infgraph{
font-size:15px;
font-family: 'Roboto Slab', serif;
font-weight: 200;
color:#646464
}
a#review_infgraph{
    margin-left: 10px;
    text-decoration-color: #919191;
    text-decoration: none;
    border-bottom: 1px dashed #969696;
}

#review_sort, #questions_sort {
margin-left: auto;
order: 2;
font-size: 16px
}

#review_sort select, #questions_sort select{
margin-left:5px;
}

.treview_wrapper {
	margin-top: 20px;
    font-family:'Roboto Slab', serif
}

.treview_author {
  font-size:16px;
  font-weight: 300;
  color: #000;
}

.treview_rating {
	margin-right:10px;
}

.treview_rating img{
	width:100px
}

.treview_time {
	color:#bbb;
	font-size:14px; 
}
.treview_avatar {
	border-radius:50%;  float: left; background-color:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.06); border:5px solid #fff; margin-top:12px; height:60px; width:60px; background-size: contain
}

.treview_content {
    margin-left: 76px;
    margin-top: 15px;
    background-color: #F9F9F9;
    color: #111;
    border: 1px solid #EAEAEA;
    border-radius: 0 18px 18px 18px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.06);
    font-weight: 200;
    padding: 15px;
    font-size: 14px;
}

.treview_content h6{
	font-size:17px;
    font-weight:350;
    margin: 0 0 10px 0;
}

.treview_feedback {
margin-top:15px;
padding-top:15px;
font-size:12px;
color:#ccc;
border-top:1px solid #e9e9e9
}

.treview_feedback label{
color:#000
}
.treview_feedback a{
border:1px solid #d1d1d1;
padding:6px 4px;
color:#000;
display:inline-block;
background-color:#fff;
font-size:13px;
cursor:pointer;
margin:0 5px;
border-radius:4px;
}
.treview_feedback a:hover{
border:1px solid #999;
}

.treview_feedback a:hover i{
opacity:1.0;
}

.treview_feedback a i{
height: 16px;
width: 16px;
display: inline-block;
background-size:contain;
background-repeat: no-repeat;
opacity:0.4;
position: relative;
  top: 2px;
  margin-right: 0px
}
.treview_feedback a i.up{
background-image: url("../images/like.png")
}
.treview_feedback a i.down{
background-image: url("../images/dislike.png")
}

.treview_feedback a.report_review{
    border: none;
    text-decoration: none;
    border-bottom: 1px dashed #ccc;
    background-color: transparent;
}
.report_success {
color:#e73b3b
}

.treview_feedback a.rvw_userselected {
    border:1px solid #d4c3af;
    cursor: default;
    color: #000000;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.treview_feedback a.rvw_userselected i{
opacity:1.0
}

.treview_feedback .rvw_errnotice {
margin-top: 10px;
color:#7f3a3b
}
.treview_feedback .rvw_errnotice a{
color:#7f3a3b;
border:none;
padding:0;
background-color:transparent;
}


hr.reviewhr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    margin: 30px 0
}
/* End Tabs */

/* questions */
.qna_item {
margin-bottom: 6px;
margin-top: 20px
}

.qna_item .answers_loader {
display:none;
margin: 20px auto;
border: 10px solid #f3f3f3;
border-top: 10px solid #dbdbdb;
border-radius: 50%;
width: 30px;
height:30px;
animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.qna_item .question_box {
background-color:#cac3ca2b;
border-radius:10px;
width:100%;
padding: 12px;
box-sizing: border-box;
display: flex;
align-items:flex-start;
position:relative;
font-family: 'Roboto Slab', serif;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.qna_item .question_box .qb_avatar{
border-radius:50%; background-color:#fff; box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; border:3px solid #fff; height:80px; width:80px; background-size: contain; min-width:80px; min-height:80px;
}

.qna_item .question_box .qb_data{
margin-left: 15px;
margin-top: 4px;
flex-grow: 1;
position:relative
}

.qna_item .question_box .qb_data span.qbdel{
display: inline-block;
background-color: #af5454;
border: 1px solid #7b4343;
color: #fff;
padding: 3px 5px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
}

.qna_item .question_box .qb_data h4{
font-size:15px;
color:#000;
font-weight:350;
margin:5px 0 5px 0
}

.qna_item .question_box .qb_data .authdetails{
font-size:12px;
font-weight:200;
color:#6a6a6a;
}

.qna_item .question_box .qb_data button.answer_question {
    margin-top: 15px;
    background-color: #fff;
    color: #000;
    border: 1px solid #8f868e;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 25px;
}

.qna_item .question_box .qb_data button.answer_question:hover {
color:#fff;
border:1px solid #767676;
background-color:#ab99a2
}

.togglequest {
color:#fff !important;
border:1px solid #767676 !important;
background-color:#ab99a2 !important
}

.qna_item .question_box .qb_data button.disabled{
opacity:0.2;
cursor:default
}
.qna_item .question_box .qb_data button.disabled:hover {
text-decoration:none
}

.qna_item .question_box .qb_data a.view_answers {
margin-left: 10px;
font-weight: 200;
color:#000
}

.qna_item .question_box .qb_data span.no_answers {
    margin-left: 10px;
    font-weight: 200;
    color: #6e6e6e;
}

.qna_item .question_box .qb_data textarea.type_answer {
width:100%;
padding:10px;
min-width:100%;
min-height: 80px;
margin-top: 10px;
resize: vertical;
box-sizing: border-box;
border:1px solid #575757;
font-weight:200;
font-family: 'Roboto Slab', serif;
}

.qna_item .question_box .qb_data .answer_notloggedin {
    display: none;
    color: #fff;
    padding: 5px;
    margin-top: 10px;
    position: absolute;
    left: -10px;
    bottom: -30px;
    font-size: 13px;
    background-color:#844b4b;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.qna_item .question_box .qb_data .answer_notloggedin a{
color:#fff
}

.qna_item .question_box .post_qanswer {
margin: 5px 0 10px 0;
}

.qna_item .question_box .post_qanswer button{
background-color: #555;
color:#fff;padding: 6px 15px;
border-radius:5px;
border:none;
cursor:pointer
}

.qna_item .question_box .post_qanswer a{
font-size: 11px;
margin-left: 10px;
color: #000;
text-decoration: none;
font-weight: 100;
border-bottom: 1px dashed #ccc;
}
.qna_item .question_box .post_qanswer a:hover{
border-bottom: 1px dashed #000;
}

.qna_item .question_box .ansquestion_err{
display:none;
background-color:#ffd8d8;
color:#000;
font-size:12px;
margin-top: -3px;
padding:8px;
}

/*.qna_item .question_box .qb_data button.answer_question i {
height: 16px;
width: 16px;
background: url("../images/answer.png");
display: inline-block;
background-size:contain;
position: relative;
top: 2px;
margin-right: 0px
}*/
.qna_item .answers_wrapper {
display:flex;
}

.answers_group {
margin-bottom:50px
}

.answers_group .hide_answers{
    text-align: center;
    margin: 10px 0;
    text-decoration: underline;
    color: #adadad;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answers_group .hide_answers img{
width:21px;
height:21px;
opacity:0.4;
margin-right:6px
}

.answers_group .hide_answers span{
cursor:pointer
}
.answers_group .hide_answers span:hover{
color:#333
}

.answers_wrapper .answer_useravatar {
background: linear-gradient(to right, 
transparent 0%, 
transparent calc(50% - 0.61px), 
#c1c1c1 calc(50% - 0.6px), 
#c1c1c1 calc(50% + 0.6px), 
transparent calc(50% + 0.61px), 
transparent 100%);
width:70px;
margin-left: 20px;
}

/* awh is for the top where the title Answers is displayed */
.qna_item .awh {
height:40px !important;
align-content: flex-end;
font-size:18px
}
/* ---------------------------------------------------------- */

.answers_wrapper .answer_useravatar .avatarbox{
width:70px;
min-height: 100px;
margin:20px auto 0 auto;
text-align: center;
position: relative
}

.answers_wrapper .answer_useravatar .avatarbox .avatar {
	border-radius:50%; background-color:#fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; border:3px solid #fff; height:65px; width:65px; background-size: contain
}

.answers_wrapper .answer_useravatar .avatarbox .user_tag{
background-color:#474747;
color:#fff;
text-align: center;
display:inline-block;
margin: 0 auto;
padding:5px;
width:90px;
font-size:10px;
overflow: hidden;
white-space: nowrap;
position: absolute;
left: 0;
right: 0;
border-radius:16px;
margin-left:-17px
}

.answers_wrapper .answer_useravatar .avatarbox .id_tfs {
/*background-color: #8e5962 !important*/
background-color: #398d84 !important
}
.answers_wrapper .answer_useravatar .avatarbox .id_vp {
background-color:#8C8C00 !important
}

/*use this only when its the final answer in the list, so we can hide the trailing line */
.answers_wrapper .answer_useravatar .lastansw{
height:calc(100% - 20px);
background-color: #fff;
}

.answers_wrapper .answer_box{
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 100;
    font-family: 'Roboto Slab', serif;
    margin: 30px 0 15px 25px;
}

.answers_wrapper .answer_bubble{
    background-color: #d3d3ba0f;
    border: 1px solid #bfbfbf;
    padding: 15px;
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    height: 0%;
    display: flex;
    flex-direction: row;
    font-family: 'Roboto Slab', serif;
}
.answers_wrapper .answer_bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: transparent #fafafa;
display: block;
width: 0;
z-index: 1;
left: -12px;
top: 10px;
}
.answers_wrapper .answer_bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: transparent #bfbfbf;
display: block;
width: 0;
z-index: 0;
left: -13px;
top: 10px;
}

.answers_wrapper .answer_bubble .bubble_data {
margin-right: 30px;
font-weight:300
}

.answers_wrapper .answer_bubble .answer_vote {
width: 90px;
min-width: 90px;
text-align: center;
margin-left: auto;
display:flex;
flex-direction: row;
justify-content: space-between;
position:relative
}

.answers_wrapper .answer_bubble .answer_vote .answer_errnote {
position:absolute;
background-color:#844b4b;
color:#fff;
width:100%;
padding:6px;
top:50px;
left:-5px;
border-radius:6px;
font-size:11px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
z-index: 2
}
.answers_wrapper .answer_bubble .answer_vote .answer_errnote:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: #844b4b transparent;
border-width: 0 9px 11px;
top: -11px;
left: 50%;
margin-left: -9px;
}
.answers_wrapper .answer_bubble .answer_vote .answer_errnote a{
color:#fff;
}

.answers_wrapper .answer_bubble .answer_vote .q-rater{
width: 40px;
height: 40px;
background-color:#FFFFFF;
border:1px solid #c8c8c8;
border-radius:15px;
padding:10px;
box-sizing: border-box;
cursor:pointer;
}

.answers_wrapper .answer_bubble .answer_vote .q-rater img{
opacity:0.5
}

.answers_wrapper .answer_bubble .answer_vote .q-rater:hover img{
opacity:1.0
}

.q-rated {
background-color:#FBFBFB;
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}
.q-rated img{
opacity:0.7 !important
}

.answers_wrapper .answer_bubble .a_authdetails {
    font-size: 12px;
    margin-bottom: 5px;
    color: #545353;
    font-weight: 300;
}

.answers_wrapper .answer_bubble .a_votedetails {
font-size: 11px;
margin-top: 15px;
color: #6e6e6e;
font-weight: 200;
}

.answers_wrapper .answer_bubble .delete_answer {
width: 110px;
min-width: 110px;
text-align: center;
margin-left: auto;
display:flex;
flex-direction: row;
position:relative
}

.answers_wrapper .answer_bubble .delete_answer .a-del{
width: 26px;
height: 26px;
background-color:#FFFFFF;
border:1px solid #cdc9c9;
border-radius:5px;
padding:2px;
box-sizing: border-box;
cursor:pointer;
margin-left:auto;
}

.answers_wrapper .answer_bubble .delete_answer .a-del img{
opacity:0.5
}

.answers_wrapper .answer_bubble .delete_answer .a-del:hover img{
opacity:1.0
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm{
display:none;
font-size:13px;
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm button{
font-size:14px;
margin-top: 10px;
padding:5px 12px;
border-radius:5px;
border:1px solid rgb(223 195 195);
background-color: rgb(245 223 223);
cursor:pointer
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm button:first-child{
margin-right: 10px
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm button:hover{
background-color: rgba(139,53,54,1.00);
border:1px solid rgba(139,53,54,1.00);
color:#fff;
}
/* end questions */

/* palette shades */
table.palette_shades .shade_box{
width:20px;
height:20px;
}

#champagne_shade{
background-color:#D1CEC0
}
#cashmere_shade{
background-color:#D0BEBE
}
#timeoffame_shade{
background-color:#998F79
}
#moondust_shade{
background-color:#DFCDC7
}
#pinkdiamond_shade{
background-color:#EEE1EA
}

#dolcevita_shade{
background-color:#EEC8E2
}
#amethyst_shade{
background-color:#CC6290
}
#pearlgirl_shade{
background-color:#FDEEE6
}
#carpediem_shade{
background-color:#F2D0AC
}
#sandalwood_shade{
background-color:#A57B73
}
#marble_shade{
background-color:#989185
}
#coralfantasy_shade{
background-color:#F46D64
}

#lastnight_shade{
background-color:#966E60
}
#flirt_shade{
background-color:#D5BBBB
}
#seduction_shade{
background-color:#A57A86
}
#venus_shade{
background-color:#C79372
}
#truffle_shade{
background-color:#A08480
}
#royal_shade{
background-color:#73505F
}
#whitegold_shade{
background-color:#F3D8BE
}
/* end palette shades */

.dd-option-text {
font-weight:200 !important;
font-family: 'Roboto Slab', serif;
color:#000 !important;
}

.dd-desc {
font-weight:200 !important;
font-family: 'Roboto Slab', serif;
color:#848484 !important;
margin-top: 3px;
}

/* Dropdown */
.slctText {
	font-size: 14px;
    color: #454545;
    font-family: 'Roboto Slab';
    font-weight: 200;
}

.swtch_lbl {
	font-size:12px;
	color:#999;
	margin-bottom:5px
}

.dd-select, .dd-options {
	width:75% !important;
    font-family: 'Roboto Slab';
    font-weight: 300;
}

.dd-select{
    background:#fdfcfb !important;
    border:solid 1px #e1e1e1 !important
}

.dd-selected {
    font-weight: 300 !important;
    font-family: 'Roboto Slab', serif !important
}

.dd-option-selected {
    background-color: #f3ece1 !important;
    font-family: 'Roboto Slab', serif;
}

.dd-option:hover{ background:#f3ece1 !important}
/* End Dropdown */

/* Tooltip */
#tooltip
{
    text-align: center;
    color: #fff;
    background: #555;
    position: absolute;
    z-index: 999999;
    padding: 5px;
  font-size:14px;
	border-radius: 8px;
}
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #555;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -7px;
        margin-left: -7px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #555;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }
/* End Tooltip */

/*bundled*/
.whats-included-section {
  background-color: #fafafa;
  padding: 30px 20px;
  border-radius: 8px;
  margin: 30px 0;
  text-align: center;
}

.whats-included-section h3 {
  font-size: 1.25rem;
  margin-bottom: 25px;
  font-weight:350;
  color: #333;
}

.bundle-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.bundle-item {
  flex: 1 1 200px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bundle-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  margin-bottom: 15px;
  border:10px solid #fff;
  transition: transform 0.3s ease;
}

.bundle-img:hover {
  transform: scale(1.05);
}

.bundle-title {
  font-weight: 350;
  font-size: 0.9rem;
  color: #222;
  text-decoration: none;
  margin-bottom: 5px;
  transition: color 0.2s;
}

.bundle-title:hover {
  color: #d63384;
  text-decoration: underline;
}

.bundle-value {
  font-size: 0.85rem;
  color: #666 !important;
  font-weight: 200;
  margin: 0;
}

#bundle-savings-container {margin-top: 8px;}

.bundle-worth {
    margin: 0;
    color: #666;
    font-weight: 100;
    font-size: 0.7em;
    font-family: 'Roboto Slab';
    margin-top:3px
}

.bundle-saving {
    margin: 2px 0 0 0;
    color: #000000;
    font-weight: 200;
    font-size: 0.75em;
    font-family: 'Roboto Slab';
    background-color: #e2e9ef;
    padding: 5px 8px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    box-shadow: rgb(204 204 204 / 10%) 0px 2px 5px -1px, rgb(0 0 0 / 13%) 0px 1px 3px -1px
}

.bundle-saving strong {
    font-weight: 350;
    font-size: 1.2em;
    color:#a64242
}
/*end bunled*/

/* recommended */
.recommended_items {
    background-color: #fcfcfc;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    box-shadow: rgb(68 68 68 / 10%) 0px 1px 4px;
}

.recommended_items h4.h41 {font-weight:350; font-size: 21px; margin:0 0 20px 0; color:#363636; font-family: 'Roboto Slab', serif;}
.recommended_items h5 {
    font-size: 0.8rem;
    font-weight: 250;
    color: #000000;
    margin: 0;
    margin-right: 10px;
    font-family: 'Roboto Slab', serif;
}

.recommended_items .sidp_item {
display:flex;
flex-direction: row;
margin-bottom: 1px;
box-shadow: rgb(99 99 99 / 6%) 0px 2px 8px 0px;
}

.sidp_item a{
color:#000;
text-decoration: none
}
.sidp_item a:hover{
text-decoration:underline
}

.sidp_item .old_price {
text-decoration: line-through; text-decoration-color:#b36869; font-size:12px
}

.recommended_items .sidp_item .imgbox {
max-width:150px;
background-color: #fff;
padding:4px;
height:150px;
box-sizing: border-box;
cursor:pointer
}

.recommended_items .sidp_item .imgbox img{
width: 100%; height: auto; border-radius:4px
}

.recommended_items .sidp_item .sidpdata {
flex-grow: 1;
background-color:#fdfdfd;
padding:15px;
box-sizing: border-box;
position:relative;
height:150px
}

.recommended_items .sidp_item .sidpdata .sidp_wrap {
  margin: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.recommended_items .sidp_item .sidpdata .sdp_price{
font-size:14px;
font-family: 'Roboto Slab', serif;
font-weight: 200;
margin:10px 0 20px 0;
}

.recommended_items .sidp_item .sidpdata .sdp_rating{
max-width:100px;
}
.recommended_items .sidp_item .sidpdata .sdp_rating img{
width:100%
}

.product-scent-tags {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #efefef;
    font-family: 'Roboto Slab', serif;
}

.product-scent-tags span {
        font-size: 0.9em;
    color: #666666;
    margin-right: 10px;
    font-weight: 300;
}

.product-scent-tags .scent-badges {display: inline-flex; gap: 8px; flex-wrap: wrap;}

a.scent-badge {
    background: #af9aa8;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 300;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}


@media (max-width: 1610px) {
.recommended_items .sidp_item .imgbox {
max-width:150px;
}

.recommended_items .sidp_item .sidpdata .sdp_price{
font-size:14px;
margin:7px 0 7px 0;
}

.recommended_items .sidp_item .sidpdata .sdp_rating{
max-width:90px;
}

.recommended_items .sidp_item .sidpdata{
height:150px
}

}

@media (max-width: 1530px) {
.recommended_items .sidp_item .imgbox {
max-width:110px;
padding:10px;
}

.recommended_items .sidp_item .sidpdata .sdp_price{
font-size:14px;
margin:7px 0 7px 0;
}

.recommended_items .sidp_item .sidpdata{
height:150px
}
.recommended_items .sidp_item .imgbox img{
margin-top:25%
}
}

@media (max-width: 1360px) {
.recommended_items .sidp_item .imgbox {
 height:auto;
}
.recommended_items h4.h41{
margin:5px 0 5px 0
}

.recommended_itemwrap {
display:flex;
flex-direction: row;
justify-content:space-between;
flex-wrap: wrap;
}

.recommended_items h5 {
    font-size: 0.9rem;
}

.recommended_items .sidp_item .imgbox {
max-width:100%;
padding:0;
}
.recommended_items .sidp_item .imgbox img{
margin-top:0
}

.recommended_items .sidp_item {
display:block;
width:26%;
flex: 0 0 30%;
margin: 2% 1%;
margin-bottom: 5px;
}

#sitecontainer .right2 {
display:block;
position:static;
width:100%;
border-top:1px dashed #ededed
}
}
/* recommended */

@media (max-width: 850px) {
}

@media (max-width: 820px) {
#sitecontainer .left2 {
padding:30px 10px;
}
	
	#fragrance_notes {font-size:13px}

#tabs_content {
padding: 20px 1em 20px 1em;
font-size:13px;
}
}

@media (max-width: 700px) {
h1.pd_title {
font-size:28px;
}

.pd_info {
	font-size:12px;
	padding:10px;
    width:100%;
	margin-top:12px;
	margin-bottom:12px;
}
}


@media (max-width: 780px) {
#mobupsell {display:block}
#mobupsell_left {display:none}

#fragrance_notes h4, h4.about {font-size:13px}
	
#sitecontainer .right2 {
padding:30px 10px 0 10px;
box-sizing: border-box;
}

.qv_cwrap {
padding:10px
}

.pd_imgholder {
float:none;
width:100%;
box-shadow: rgb(101 101 101 / 10%) 0px 10px 15px -3px, rgb(255 255 255 / 5%) 0px 4px 6px -2px;
}

.pd_contentholder {
float:none;
width:100%;
padding:20px;
box-sizing: border-box
}


.tab_dualleft .product_brand{
margin-top: 30px
}

#tabs a {
  padding: 0 20px;
  font-size:16px;   
}
	
#fragrance_notes ul span {
    margin-right: 0px;
    margin-left: 0px;
    display: block;
}

/* we only want to do this reverse for fragrance section for the frag gnotes on top.. so we should use a unique class only appearing on tab1 for fragrances */ 
#tabs_content #tab1 {
display: flex;
flex-direction: column-reverse;
}

.tab_chead h3 {
  font-size:18px;
  padding-bottom:15px;
}

.additional_info h3.aih {
font-weight:bold;
font-size:18px
}
.additional_info h4 {
font-size:17px;
}

.additional_info h4.vsh {
font-size:18px;
}

.tab_dualleft h4, .tab_dualright h4{
	font-size:17px;
    margin:10px 0;
}

.tab_dualleft, .tab_dualright{
float:none;
width:100%
}

.tab_dualright, .tab_dualleft{
padding-bottom: 20px
}

.tab_fnotes {
padding:12px;
}

.fnotes_head {
font-size:15px;
}

.recommended_items h4.h41 {font-size: 20px; text-align: center; margin:10px 0 20px 0}

.recommended_items {padding:15px}

#review_header, #questions_header {
font-size:18px;
margin-bottom:15px;
}

#review_header span, #review_header a#review_infgraph{
font-size:14px
}

.qna_item .question_box .qb_avatar{
border:3px solid #fff; height:60px; width:60px; min-width:60px; min-height:60px;
}

.qna_item .question_box .qb_data h4{
font-size:14px;
margin:0 0 5px 0
}

.qna_item .question_box .qb_data .authdetails{
font-size:11px;
}

.qna_item .question_box .qb_data button.answer_question {
margin-top: 10px;
padding: 4px 6px;
font-size:12px;
}


.answers_wrapper .answer_box{
flex-grow: 1;
margin: 25px 0 15px 15px;
font-size:16px
}

.answers_wrapper .answer_bubble{
flex-direction:column;
padding:12px 6px
}

.answers_wrapper .answer_bubble .bubble_data {
margin-right:0px;
padding:5px;
font-size: 13px
}

.answers_wrapper .answer_bubble .answer_vote {
text-align: center;
margin-left:0;
margin-top: 5px
}

.answers_wrapper .answer_bubble .delete_answer{
margin-top: 5px;
margin-left:0;
}
.answers_wrapper .answer_bubble .delete_answer .a-del{
margin-left:0;
}

.answers_wrapper .answer_bubble .delete_answer .a-del{
margin-left:0;
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm{
font-size:12px;
width: 100%;
border-top: 1px solid #efefef;
padding-top: 10px
}

.answers_wrapper .answer_bubble .delete_answer .del_confirm button{
font-size:11px;
}

.answers_wrapper .answer_useravatar {
width:50px;
margin-left: 10px;
}

.answers_wrapper .answer_useravatar .avatarbox .avatar {
 height:45px; width:45px; 
}

.answers_wrapper .answer_useravatar .avatarbox .user_tag{
border-radius:5px;
padding:3px;
width:60px;
font-size:9px;
white-space:normal;
margin-left:-10px
}

.qna_item .question_box .qb_data span.no_answers {
font-size:11px
}

.qna_item .question_box .qb_data .answer_notloggedin {
font-size:11px;
margin-top:5px
}

#no_reviews, #no_questions {
font-size: 21px;
margin-top: 20px
}
#no_reviews p, #no_questions p{
font-size: 16px;
}

#askq_modal, #family_modal {
width:90%
}

#nostock {width:100%}

}

@media (max-width: 480px) {

.recommended_itemwrap {
flex-direction:column;
justify-content:center;
flex-wrap:nowrap;
}

.recommended_items .sidp_item .imgbox {
max-width:100%;
padding:0;
}
.recommended_items .sidp_item .imgbox img{
margin-top:0;
}

.recommended_items .sidp_item {
display:block;
width:100%;
flex: 0;
margin:0;
margin-bottom:10px;
}

.treview_rating img{
width:90px
}

.treview_avatar {
	border:4px solid #fff; margin-top:12px; height:45px; width:45px
}

.treview_author, .treview_time {
font-size:12px
}

.treview_content {
	margin-left: 60px;
	margin-top:15px;
	padding:10px;
	font-size:13px;
}

.treview_content h6{
	font-size:15px;
    margin: 0 0 10px 0;
}

#reviews_modal .wrap{
padding:10px;
}
#reviews_modal h4{
font-size:18px;
padding-bottom:10px;
}

#reviews_modal #reviews_graphs{
padding:10px;
}

#askq_modal h4{
font-size:26px;
}
#askq_modal button {
font-size:14px;
}
#askq_modal a#cancel_askq{
font-size:14px;
}

#askq_modal #postquestion_err {
font-size:11px;
padding:5px;
}

#family_modal .wrap {
padding:10px
}

#family_modal .wrap h5{
font-size:26px
}
#family_modal .wrap h6{
font-size:18px
}

#family_modal .dc {
font-size:14px;
}

}

@media (max-width: 440px) {
#sitecontainer .left2 {
padding:15px 5px;
}

h1.pd_title {
font-size:24px;
}

.pd_contentholder {
padding:10px;
}

#tabs_content {
padding: 15px 8px 20px 8px;
}

#tabs a {
  padding: 0 8px;
  font-size:14px;   
}

.tab_subinfo_bottom {
margin-top:10px;
margin-bottom:0px;
text-align: center;
}

.tab_dualleft h4, .tab_dualright h4{
	font-size:14px;
    margin:9px 0;
}

.aii {margin-bottom:10px}

.additional_info h3.aih {
font-size:18px
}
.additional_info h4 {
font-size:15px;
}

.additional_info h4.vsh {
font-weight:normal;
font-size:15px;
margin:25px 0 10px 0;
}

p.ingredients {
font-size:11px
}

.pd_info {
	font-size:12px;
	padding:15px;
	width:100%;
    box-sizing: border-box
}

.pd_add {
font-size:15px;
padding:12px 20px;
}

#no_reviews, #no_questions {
font-size: 18px;
margin-top: 10px
}
#no_reviews p, #no_questions p{
font-size: 14px;
}

.product-scent-tags span {
    display: block;
    margin-bottom: 10px;
}

}


@media (max-width: 385px) {
.qna_item .question_box {
padding: 8px;
align-items: flex-start;
border-radius: 5px
}

.qna_item .question_box .qb_avatar{
border:2px solid #fff; height:30px; width:30px; min-width:30px; min-height:30px;
}

.qna_item .question_box .qb_data{
margin-left: 10px;
margin-top:0;
flex-grow: 0;
width:100%
}

.qna_item .question_box .qb_data button.answer_question {
font-size:12px;
}


.answers_wrapper .answer_useravatar {
width:50px;
margin-left: 10px;
}

.answers_wrapper .answer_useravatar .avatarbox .avatar {
 height:45px; width:45px; 
}

.answers_wrapper .answer_useravatar .avatarbox .user_tag{
border-radius:5px;
padding:3px;
width:60px;
font-size:9px;
white-space:normal;
margin-left:-10px
}


.answers_wrapper .answer_useravatar {
width:40px;
margin-left: 0px;
}

.answers_wrapper .answer_useravatar .avatarbox .avatar {
 height:30px; width:30px; 
}

.answers_wrapper .answer_useravatar .avatarbox .user_tag{
border-radius:3px;
width:50px;
margin-left:-10px
}

.answers_wrapper .answer_bubble .a_authdetails {
font-size:10px
}

.answers_wrapper .answer_box{
margin: 20px 0 10px 15px;
}

.treview_author, .treview_time {
font-size:11px
}

.treview_rating img{
width:75px;
}

.treview_avatar {
	border:3px solid #fff; height:40px; width:40px
}

hr.reviewhr {
margin: 20px 0
}

.treview_content {
	margin-left: 50px;
	margin-top:15px;
	padding:8px;
	font-size:13px;
}

.treview_feedback {
margin-top:10px;
padding-top:10px;
}

.treview_feedback a{
padding:5px 3px;
font-size:12px;
margin:0 3px;
}

#reviews_modal h4{
font-size:16px
}

.qna_item .question_box .qb_data textarea.type_answer {
padding:5px;
font-size:13px
}

.qna_item .question_box .post_qanswer button{
font-size: 13px;
color:#fff;padding: 5px 10px;
}

#delete_modal {
width:95%;
}

#delete_modal .mhdr2{
padding:10px;
font-size: 14px
}

#delete_modal h6{
font-size:18px;
}

}

@media (max-width: 350px) {
.treview_rating{
display:block;
}

.treview_rating img{
margin-bottom: 10px
}

#review_header span{
font-size:13px
}

a#review_infgraph{
font-size:13px !important
}

}
@media (max-width: 340px) {
.treview_feedback a.report_review{
padding: 4px 0px;
margin:0
}

.treview_feedback {
margin-top:10px;
padding-top:10px;
}

.treview_feedback label{
font-size: 11px
}

.treview_feedback a{
padding:3px 3px;
font-size:11px;
}
.treview_content h6 {font-size: 14px}
.treview_content {
	font-size:12px;
}

}

/* ============================================================
   Product gallery improvements
   Premium selected-thumbnail badge + subtle elevation
   ============================================================ */

#mainphoto {
    cursor: zoom-in;
}

/*
   The JS wraps each gallery image in .gallery-thumb-shell.
   This wrapper lets us draw a proper circular corner badge; pseudo-elements
   are not reliable directly on <img> elements.
*/
.pd_imgholder .gallery_thumbs .gallery-thumb-shell {
    position: relative;
    display: block;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    margin-right: 15px;
    margin-top: 15px;
    border-radius: 6px;
    box-sizing: border-box;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.pd_imgholder .gallery_thumbs .gallery-thumb-shell:last-child {
    margin-right: 0;
}

/* FIX: video is visually second but still last in the DOM.
   Override the generic last-child margin reset so it keeps spacing
   between the Video tile and the image displayed to its right. */
.pd_imgholder .gallery_thumbs .gallery-thumb-shell.gallery-video-shell:last-child {
    margin-right: 15px;
}

/* Neutral thumbnail appearance stays the same whether selected or not. */
.pd_imgholder .gallery_thumbs .gallery-thumb-shell > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    box-sizing: border-box;
    object-fit: cover;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Product video thumbnail — use the actual PNG icon
   The #video-thumbnail image fills the tile for click handling,
   while padding keeps the visible PNG neatly centred.
   ------------------------------------------------------------ */

.pd_imgholder .gallery_thumbs .gallery-video-shell {
    position: relative;
    overflow: hidden;

    /*
       The video tile is the last item in the DOM but is visually moved to
       position 2 with flex order. Keep desktop spacing to its right.
    */
    margin-right: 15px;

    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.045),
        0 1px 2px rgba(0, 0, 0, 0.025);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

/*
   Show the real PNG.
   It remains 100% of the tile so your existing JS can still bind clicks to
   #video-thumbnail, but padding makes the visible icon about 42–44px.
*/
.pd_imgholder .gallery_thumbs .gallery-video-shell > #video-thumbnail {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    /* extra bottom padding leaves room for the text */
    padding: 9px 15px 23px 15px !important;

    box-sizing: border-box !important;
    object-fit: contain !important;

    border: 0 !important;
    background: transparent !important;
    opacity: 1 !important;

    cursor: pointer;
}

.pd_imgholder .gallery_thumbs .gallery-video-shell::after {
    content: "Video";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 6;

    text-align: center;

    font-family: 'Roboto Slab', sans-serif;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.4px;

    color: #211e1f;

    pointer-events: none;
}


/* Desktop / pointer-device polish */
@media (hover: hover) and (pointer: fine) {
    .pd_imgholder .gallery_thumbs .gallery-video-shell:hover {
        transform: translateY(-2px);
        background: #fafafa;
        border-color: #d5d5d5;

        box-shadow:
            0 6px 14px rgba(52, 44, 48, 0.09),
            0 2px 4px rgba(52, 44, 48, 0.04);
    }

    .pd_imgholder .gallery_thumbs .gallery-video-shell:hover > #video-thumbnail {
        opacity: 0.78 !important;
    }
}

/*
   Selected state: no dark outline. The card lifts very slightly and receives
   a soft shadow, while the small corner badge does the actual indicating.
*/
.pd_imgholder .gallery_thumbs .gallery-thumb-shell.active-thumb-shell {
    transform: translateY(-2px);
    box-shadow:
        0 7px 16px rgba(52, 44, 48, 0.14),
        0 2px 5px rgba(52, 44, 48, 0.08);
}

/* Premium corner selection badge. */
.pd_imgholder .gallery_thumbs .gallery-thumb-shell.active-thumb-shell::after {
    content: "✓";
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #9a828a;
    color: #fff;
    border: 1px solid #ad959d;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(45, 35, 40, 0.24);
    pointer-events: none;
}

/* Do not add a second selected border to the image itself. */
.pd_imgholder .gallery_thumbs img.active-thumb {
    border-color: #9a828a;
    outline: none;
}

/* ============================================================
   Zoom viewer
   Force the popup to stay centred inside the visible viewport.
   bPopup writes top/left/position inline; !important intentionally
   overrides those calculated values so the viewer cannot open above
   or below the current screen.
   ============================================================ */
#zoom_modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: min(96vw, 1200px);
    max-width: calc(100vw - 20px);

    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);

    margin: 0 !important;
    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#enlarged_photo {
    position: relative;
    text-align: center;
}

#enlarged_photo .zoomed_product_image {
    display: block;
    max-width: min(90vw, 1100px);
    max-height: 76vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.zoom_nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.58);
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.zoom_nav:hover,
.zoom_nav:focus-visible {
    background: rgba(20, 20, 20, 0.82);
}

.zoom_prev {
    left: 14px;
}

.zoom_next {
    right: 14px;
}

#zoom_counter {
    margin: 10px auto 8px;
    color: #fff;
    text-align: center;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 12px;
    font-weight: 300;
}

#gall_thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    max-width: min(92vw, 900px);
    margin: 0 auto;
    padding: 6px 4px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#gall_thumbs::-webkit-scrollbar {
    display: none;
}

#gall_thumbs img {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.72;
    box-sizing: border-box;
}

/* In the dark fullscreen viewer a restrained light ring is clearer than the page badge. */
#gall_thumbs img.active-thumb {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

/* On phones, controls take space only while they are visible. */
@media (max-width: 700px) {
    .pd_imgholder .gallery_thumbs {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: stretch;
        padding: 12px 4px;
        overflow: hidden;
    }

    .pd_imgholder .gallery_thumbs .photogrp {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        position: relative;
        z-index: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-left: 2px;
        padding: 9px 5px 0 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pd_imgholder .gallery_thumbs #secondarygall:empty {
        display: none;
    }

    .pd_imgholder .gallery_thumbs .photogrp::-webkit-scrollbar {
        display: none;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-nav {
       grid-row: 1;
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 22px;
    height: auto;
    margin-top: 0px;
    margin-bottom: -8px;
    padding: 0;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background: rgb(255 255 255);
    color: #693e53;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); */
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-nav[hidden] {
        display: none;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-prev {
        grid-column: 1;
        margin-right: -4px;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-next {
        grid-column: 3;
        margin-left: -4px;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-nav:focus-visible {
        outline: 2px solid #693e53;
        outline-offset: 2px;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-shell {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        margin: 0;
        scroll-snap-align: start;
    }

    .pd_imgholder .gallery_thumbs .gallery-video-shell,
    .pd_imgholder .gallery_thumbs .gallery-thumb-shell.gallery-video-shell:last-child {
        margin-right: 0;
    }

    .pd_imgholder .gallery_thumbs .gallery-thumb-shell.active-thumb-shell::after {
        top: -6px;
        right: -6px;
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .zoom_nav {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        font-size: 22px;
        line-height: 36px;
    }

    .zoom_prev {
        left: 6px;
    }

    .zoom_next {
        right: 6px;
    }

    #enlarged_photo .zoomed_product_image {
        max-width: 96vw;
        max-height: 70vh;
    }
}


/* ==========================================================
   YOU MAY ALSO LIKE — six-product redesign
   Wide desktop: compact 2 x 3 grid in the sidebar.
   Below 1360px: horizontal rail with a deliberate next-card peek.
   ========================================================== */

.recommended_items {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.recommended_items h4.h41 {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 12px;
    font-family: "Source Serif 4", serif;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #514c4c;
    text-align: left;
}

.recommended_items h4.h41::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 1px;
    background: #d9ccd3;
}

/* Wide desktop/sidebar: all six recommendations have equal weight. */
.recommended_itemwrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.recommended_items .sidp_item,
.recommended_items .sidp_item:first-child {
    display: block;
    width: auto;
    flex: none;
    min-width: 0;
    margin: 0;
    grid-column: auto;
    overflow: hidden;
    background: #fdfdfd;
    border: 1px solid #f2edef;
    border-radius: 8px;
    box-shadow: rgb(157 157 157 / 10%) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.recommended_items .sidp_item:hover {
    transform: translateY(-2px);
    border-color: #ded2d8;
    box-shadow: rgba(17, 17, 26, 0.14) 0 4px 18px;
}

.recommended_items .sidp_item .imgbox {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    background: #fbfafb;
    box-sizing: border-box;
    cursor: pointer;
}

.recommended_items .sidp_item .imgbox .sidp_imglink {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-sizing: border-box;
}

.recommended_items .sidp_item .imgbox img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
    transition: transform .22s ease;
}

.recommended_items .sidp_item:hover .imgbox img {
    transform: scale(1.025);
}

.recommended_items .sidp_item .sidpdata {
    height: auto;
    min-height: 0;
    padding: 10px 10px 11px;
    background: #fff;
    box-sizing: border-box;
    position: static;
}

.recommended_items .sidp_item .sidpdata .sidp_wrap {
    position: static;
    top: auto;
    transform: none;
    margin: 0;
}

.recommended_items h5 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.7em;
    margin: 0;
    color: #3f3a3a;
    font-family: 'Roboto Slab', serif;
    font-size: 0.72rem;
    line-height: 1.35;
    font-weight: 300;
}

.recommended_items .sidp_item a {
    color: inherit;
    text-decoration: none;
}

.recommended_items .sidp_item a:hover {
    text-decoration: none;
}

.recommended_items .sidp_item .sidpdata .sdp_price {
    margin: 7px 0 0;
    color: #544d4d;
    font-family: 'Roboto Slab', serif;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 370;
}

.recommended_items .sidp_item .sidpdata .sdp_price .saleicn {
    display: inline-block;
    margin-right: 4px;
    padding: 2px 5px;
    border-radius: 4px;
    background: #b96f70;
    color: #fff;
    font-size: 0.56rem;
    line-height: 1.2;
    vertical-align: 1px;
}

.recommended_items .sidp_item .old_price {
    margin-right: 3px;
    color: #888;
    font-size: 0.69rem;
}

/* Keep recommendation cards quiet; the main product owns the review emphasis. */
.recommended_items .sidp_item .sidpdata .sdp_rating {
    display: none;
}

/* Once the existing layout moves this section under the product,
   use a horizontal rail. The non-integer card count intentionally
   leaves the next product visibly cut off as a scroll cue. */
@media (max-width: 1360px) {
    .recommended_items {
        max-width: 1120px;
        margin: 0 auto;
        padding: 26px 18px 32px;
        overflow: hidden;
    }

    .recommended_items h4.h41 {
        margin-bottom: 20px;
        font-size: 24px;
        text-align: center;
    }

    .recommended_items h4.h41::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .recommended_itemwrap {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(210px, 29%);
        gap: 16px;
        align-items: stretch;
        justify-content: initial;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 14px 52px 20px 14px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 2px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #e9e9e9 transparent;
    }

    .recommended_itemwrap::-webkit-scrollbar {
        height: 5px;
    }

    .recommended_itemwrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .recommended_itemwrap::-webkit-scrollbar-thumb {
        background: #dadada;
        border-radius: 999px;
    }

    .recommended_items .sidp_item,
    .recommended_items .sidp_item:first-child {
        display: block;
        width: auto;
        flex: none;
        min-width: 0;
        margin: 0;
        grid-column: auto;
        scroll-snap-align: start;
    }

    .recommended_items h5 {
        font-size: 0.82rem;
    }

    .recommended_items .sidp_item .sidpdata .sdp_price {
        font-size: 0.86rem;
    }
}

@media (max-width: 900px) {
    .recommended_itemwrap {
        grid-auto-columns: minmax(205px, 39%);
        gap: 14px;
        padding-right: 46px;
    }
}

@media (max-width: 780px) {
    #sitecontainer .right2 {
        padding-top: 18px;
    }

    .recommended_items {
        padding: 22px 10px 28px;
    }

    .recommended_items h4.h41 {
        margin: 0 0 18px;
        font-size: 22px;
    }

    .recommended_itemwrap {
        grid-auto-columns: minmax(200px, 44%);
        gap: 12px;
        padding-right: 40px;
    }

    .recommended_items .sidp_item .sidpdata {
        padding: 9px 10px 10px;
    }

    .recommended_items h5 {
        font-size: 0.78rem;
    }
}

@media (max-width: 600px) {
    .recommended_items {
        padding-right: 0;
    }

    .recommended_items h4.h41 {
        padding-right: 10px;
    }

    .recommended_itemwrap {
        grid-auto-columns: minmax(210px, 72vw);
        gap: 12px;
        padding: 14px 46px 20px 14px;
        scroll-snap-type: x mandatory;
    }
}

@media (max-width: 380px) {
    .recommended_itemwrap {
        grid-auto-columns: minmax(195px, 76vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recommended_items .sidp_item,
    .recommended_items .sidp_item .imgbox img {
        transition: none;
    }

    .recommended_items .sidp_item:hover {
        transform: none;
    }

    .recommended_items .sidp_item:hover .imgbox img {
        transform: none;
    }
}

/* ==========================================================
   YOU MAY ALSO LIKE — wide-desktop refinement
   Keeps the 2 x 3 layout, but reduces the visual weight of the
   recommendation cards so the main product remains dominant.
   ========================================================== */
@media (min-width: 1361px) {
    .recommended_items h4.h41 {
        margin-bottom: 16px;
        font-size: 20px;
        font-weight: 400;
    }

    .recommended_itemwrap {
        row-gap: 14px;
        column-gap: 12px;
    }

    .recommended_items .sidp_item:hover {
        transform: translateY(-1px);
        border-color: #e5dce0;
        box-shadow: rgba(17, 17, 26, 0.14) 0 4px 18px;
    }

    .recommended_items .sidp_item .imgbox {
        width: calc(100% - 18px);
        /*max-width: 140px;*/
        margin: 9px auto 0;
        border-radius: 7px;
        background: #fbfafb;
    }

    .recommended_items .sidp_item .imgbox .sidp_imglink {
        padding: 6px;
    }

    .recommended_items .sidp_item:hover .imgbox img {
        transform: scale(1.015);
    }

    .recommended_items .sidp_item .sidpdata {
        padding: 8px 9px 10px;
        background: transparent;
    }

    .recommended_items h5 {
    min-height: 2.62em;
    color: #4b4545;
    font-size: 0.75rem;
    line-height: 1.31;
    font-weight: 300;
    }

    .recommended_items .sidp_item .sidpdata .sdp_price {
     margin-top: 6px;
    color: #5b5454;
    font-size: 0.74rem;
    font-weight: 370;
    }
}

/* Product page breadcrumb */
#breadlinks {
    /*padding: 0 0 18px;*/
    font-family: 'Roboto Slab', serif;
}

#breadlinks ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 7px;
    list-style: none;
    padding: 0;
    margin: 0 0 0 10px;
}

#breadlinks li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

#breadlinks li + li::before {
    content: '/';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0 10px;
    border-radius: 50%;
    /* background: #f3eee7; */
    color: #e1d9cf;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
}

#breadlinks a {
    color: #000000;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    text-underline-offset: 3px;
}

#breadlinks a:hover,
#breadlinks a:focus-visible {
        color: #040404;
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

#breadlinks li:last-child a {
        display: inline-flex;
    align-items: center;
    min-height: 32px;
    box-sizing: border-box;
    padding: 5px 12px;
    margin-left:-8px;
    border-radius: 999px;
    /* background: #ffffff; */
    color: #575450;
    /* line-height: 1.35; */
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    /* box-shadow: rgb(222 205 218 / 4%) 0px 30px 60px -12px inset, rgb(150 128 128 / 30%) 0px 18px 36px -18px inset; */
}

#breadlinks li:first-child a {
    font-weight: 150;
}

#breadlinks li:nth-child(2):not(:last-child) a {
    font-weight: 220;
}

#breadlinks li:last-child a {
    font-weight: 350;
}

#breadlinks li:last-child a:hover,
#breadlinks li:last-child a:focus-visible {
       background: #f3eee7;
    border-color: #cec8bf;
    color: #504d4f;
    text-decoration: none;
}

#breadlinks li:last-child a:focus-visible {
    outline: 2px solid #765b70;
    outline-offset: 2px;
}

@media (max-width: 440px) {
    #breadlinks a { font-size: 12px; }
    #breadlinks li + li::before { margin: 0 5px 0 5px; }
    #breadlinks li:last-child a { min-height: 30px; padding: 5px }

    /* Keep long breadcrumb trails on one line on small screens.
       Normal/short breadcrumbs look unchanged; only trails wider than
       the viewport become horizontally swipeable. */
    #breadlinks ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 3px;
    }

    #breadlinks ol::-webkit-scrollbar {
        display: none;
    }

    #breadlinks li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pd_container {
        padding-top:0;
    }

}

@media (max-width: 350px) {
    #breadlinks a { font-size: 11px; }
}

/* ==========================================================
   PRODUCT PAGE — desktop visual polish
   Full product page only: intentionally scoped to .pdcnt so
   Quick View can continue using this stylesheet unchanged.
   ========================================================== */

@media (min-width: 781px) {
    /* Give the main product area a calmer, more premium hierarchy. */
    #sitecontainer.pdcnt .pd_imgholder {
        box-shadow: 0 8px 24px rgba(35, 28, 31, 0.08), 0 2px 7px rgba(35, 28, 31, 0.04);
    }

    #sitecontainer.pdcnt h1.pd_title {
        margin-top: 12px;
        margin-bottom: 0;
        font-size: 34px;
        line-height: 1.06;
        font-weight: 470;
        letter-spacing: -0.018em;
    }

    #sitecontainer.pdcnt .pd_cat {
        margin-top: 12px;
    }

    #sitecontainer.pdcnt .pd_ratingrow {
        margin-top: 13px;
    }

    #sitecontainer.pdcnt .pd_rating {
        margin-top: 0;
        font-size: 12px;
        color: #7b7777;
    }

    #sitecontainer.pdcnt .pd_price {
        margin-top: 20px;
        align-items: center;
        font-size: 27px;
        line-height: 1.15;
        color: #302d2d;
    }

    #sitecontainer.pdcnt .clearpaybox {
        margin-top: 7px;
        margin-bottom: 14px;
    }

    /* The short description no longer needs to look like another card. */
    #sitecontainer.pdcnt .pd_info {
        width: 100%;
        margin: 0;
        padding: 0 0 17px;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #ece8e9;
        box-shadow: none;
        color: #686363;
        font-size: 13px;
        line-height: 1.62;
    }

    #sitecontainer.pdcnt .pd_info #short {
        color: #4c4748;
    }

    #sitecontainer.pdcnt .pd_info .rule {
        width: 100%;
        height: 1px;
        margin: 12px 0 10px;
        background: #eee9eb;
    }

    #sitecontainer.pdcnt .pd_info .pdimensions {
        color: #232323;
        font-size: 11.5px;
        line-height: 1.45;
    }
    #sitecontainer.pdcnt .pd_info .pdimensions strong {
font-weight:350
    }

    #sitecontainer.pdcnt .pd_form {
        margin-top: 18px;
    }

    #sitecontainer.pdcnt #addbtn_wrapper {
        display: flex;
        align-items: stretch;
        gap: 10px;
        flex-wrap: wrap;
    }

    #sitecontainer.pdcnt .quantity {
        display: inline-flex;
        align-items: stretch;
        margin: 0;
        vertical-align: top;
    }

    #sitecontainer.pdcnt .quantity .input-text.qty {
        width: 42px;
        height: 46px;
        box-sizing: border-box;
        background: #faf8f7;
        border-color: #ded9d6;
        font-family: 'Roboto Slab', serif;
        font-size: 14px;
    }

    #sitecontainer.pdcnt .quantity.buttons_added .minus,
    #sitecontainer.pdcnt .quantity.buttons_added .plus {
        width: 38px;
        height: 46px;
        padding: 0;
        box-sizing: border-box;
        background: #fff;
        border-color: #ded9d6;
        color: #4c4647;
        font-family: 'Roboto Slab', serif;
        font-size: 16px;
        transition: background-color .18s ease, border-color .18s ease;
    }

    #sitecontainer.pdcnt .quantity.buttons_added .minus:hover,
    #sitecontainer.pdcnt .quantity.buttons_added .plus:hover {
        background: #f7f3f4;
        border-color: #cec5c9;
    }

    #sitecontainer.pdcnt .pd_add {
        flex: 1 1 210px;
        max-width: 290px;
        min-width: 210px;
        min-height: 46px;
        margin: 0;
        padding: 11px 24px;
        border-radius: 6px;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 350;
        letter-spacing: .01em;
        box-shadow: 0 3px 10px rgba(101, 72, 43, 0.10);
        transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    #sitecontainer.pdcnt .pd_add:hover {
        background-color: #b88d5f;
        box-shadow: 0 5px 14px rgba(101, 72, 43, 0.16);
        transform: translateY(-1px);
    }

    #sitecontainer.pdcnt .pd_add:active {
        top: 0;
        transform: translateY(0);
    }

    #sitecontainer.pdcnt #delivery-message {
        margin: 18px 0 0;
        padding-top: 15px;
        border-top: 1px solid #efebec;
        color: #4e4a4b;
        font-size: 12.5px;
        line-height: 1.4;
    }

    #sitecontainer.pdcnt #ask_question {
        margin-top: 11px;
        color: #555051;
        font-size: 12.5px;
    }

    #sitecontainer.pdcnt #ask_question span {
        border-bottom-color: #d4cccf;
    }

    /* More breathing room before the long-form product information. */
    #sitecontainer.pdcnt .m_content {
        padding-top: 62px;
    }

    /* Modern flat tabs: clearer and much lighter than the old angled tabs. */
    #sitecontainer.pdcnt #tabs {
        display: flex;
        align-items: flex-end;
        gap: 30px;
        overflow: visible;
        border-bottom: 1px solid #ded9db;
    }

    #sitecontainer.pdcnt #tabs li {
        float: none;
        margin: 0;
    }

    #sitecontainer.pdcnt #tabs a {
        float: none;
        display: block;
        height: auto;
        padding: 11px 2px 12px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #817b7d;
        opacity: 1;
        filter: none;
        font-family: 'Roboto Slab', serif;
        font-size: 14px;
        line-height: 1.25;
        font-weight: 300;
        transition: color .18s ease, border-color .18s ease;
    }

    #sitecontainer.pdcnt #tabs a:hover,
    #sitecontainer.pdcnt #tabs a:focus {
        border-bottom-color: #cdbfc6;
        color: #3f393b;
        opacity: 1;
    }

    #sitecontainer.pdcnt #tabs #current {
        z-index: auto;
        border-bottom: 2px solid #6c4d5f;
        color: #302b2d;
        opacity: 1;
        font-weight: 400;
    }

    #sitecontainer.pdcnt #tabs_content {
        padding: 28px 4px 2em;
        background: transparent;
        border-top: 0;
    }
}

/* On roomier screens, rebalance the image/info split so the buying
   column is no longer visually squeezed beside the gallery. */
@media (min-width: 1000px) {
    #sitecontainer.pdcnt .pd_imgholder {
        width: 46%;
    }

    #sitecontainer.pdcnt .pd_contentholder {
        width: 50%;
    }
}

/* Keep the purchase controls useful on the narrower end of desktop. */
@media (min-width: 781px) and (max-width: 999px) {
    #sitecontainer.pdcnt h1.pd_title {
        font-size: 31px;
    }

    #sitecontainer.pdcnt .pd_add {
        max-width: none;
    }

    #sitecontainer.pdcnt #tabs {
        gap: 22px;
    }
}

/* ==========================================================
   PRODUCT PAGE — responsive visual polish
   Carries the desktop redesign through tablet + mobile.
   Scoped to the full product page so Quick View is untouched.
   ========================================================== */
@media (max-width: 780px) {
    #sitecontainer.pdcnt .pd_imgholder {
        border-color: #efebec;
        box-shadow: 0 7px 22px rgba(35, 28, 31, 0.07), 0 2px 6px rgba(35, 28, 31, 0.035);
    }

    #sitecontainer.pdcnt .pd_contentholder {
        padding: 24px 20px 20px;
    }

    #sitecontainer.pdcnt .pd_contentholder > .pd_wishlist {
        margin: 0 0 14px;
    }

    #sitecontainer.pdcnt h1.pd_title {
        margin: 0;
        font-size: 29px;
        line-height: 1.08;
        font-weight: 470;
        letter-spacing: -0.016em;
        color: #232020;
    }

    #sitecontainer.pdcnt .pd_cat {
        margin-top: 11px;
        font-size: 11px;
    }

    #sitecontainer.pdcnt .pd_ratingrow {
        margin-top: 13px;
    }

    #sitecontainer.pdcnt .pd_rating {
        margin-top: 0;
        font-size: 12px;
        color: #7b7777;
    }

    #sitecontainer.pdcnt .pd_price {
        margin-top: 18px;
        align-items: center;
        font-size: 25px;
        line-height: 1.15;
        color: #302d2d;
    }

    #sitecontainer.pdcnt .clearpaybox {
        margin-top: 6px;
        margin-bottom: 15px;
    }

    /* Match the cleaner desktop treatment instead of reverting to the old card. */
    #sitecontainer.pdcnt .pd_info {
        width: 100%;
        margin: 0;
        padding: 0 0 17px;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #ece8e9;
        box-shadow: none;
        color: #686363;
        font-size: 12.5px;
        line-height: 1.62;
    }

    #sitecontainer.pdcnt .pd_info #short {
        color: #4c4748;
    }

    #sitecontainer.pdcnt .pd_info .rule {
        width: 100%;
        height: 1px;
        margin: 12px 0 10px;
        background: #eee9eb;
    }

    #sitecontainer.pdcnt .pd_info .pdimensions {
        color: #777173;
        font-size: 11px;
        line-height: 1.45;
    }

    #sitecontainer.pdcnt .pd_form {
        margin-top: 18px;
    }

    #sitecontainer.pdcnt #addbtn_wrapper {
        display: flex;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        flex-wrap: nowrap;
    }

    #sitecontainer.pdcnt .quantity {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: stretch;
        margin: 0;
        vertical-align: top;
    }

    #sitecontainer.pdcnt .quantity .input-text.qty {
        width: 40px;
        height: 46px;
        padding: 0 4px;
        box-sizing: border-box;
        background: #faf8f7;
        border-color: #ded9d6;
        font-family: 'Roboto Slab', serif;
        font-size: 14px;
    }

    #sitecontainer.pdcnt .quantity.buttons_added .minus,
    #sitecontainer.pdcnt .quantity.buttons_added .plus {
        width: 36px;
        height: 46px;
        padding: 0;
        box-sizing: border-box;
        background: #fff;
        border-color: #ded9d6;
        color: #4c4647;
        font-family: 'Roboto Slab', serif;
        font-size: 15px;
    }

    #sitecontainer.pdcnt .pd_add {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        padding: 11px 16px;
        border-radius: 6px;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 350;
        letter-spacing: .01em;
        box-shadow: 0 3px 10px rgba(101, 72, 43, 0.10);
    }

    #sitecontainer.pdcnt #delivery-message {
        margin: 18px 0 0;
        padding-top: 15px;
        border-top: 1px solid #efebec;
        color: #4e4a4b;
        font-size: 12px;
        line-height: 1.45;
    }

    #sitecontainer.pdcnt #ask_question {
        margin-top: 11px;
        color: #555051;
        font-size: 12px;
    }

    #sitecontainer.pdcnt #ask_question span {
        border-bottom-color: #d4cccf;
    }

    #sitecontainer.pdcnt .m_content {
        padding-top: 44px;
    }

    /* Keep the same modern tab treatment on tablet/mobile. */
    #sitecontainer.pdcnt #tabs {
        display: flex;
        align-items: flex-end;
        gap: 22px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        border-bottom: 1px solid #ded9db;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #sitecontainer.pdcnt #tabs::-webkit-scrollbar {
        display: none;
    }

    #sitecontainer.pdcnt #tabs li {
        float: none;
        flex: 0 0 auto;
        margin: 0;
    }

    #sitecontainer.pdcnt #tabs a {
        float: none;
        display: block;
        height: auto;
        padding: 10px 1px 11px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #817b7d;
        opacity: 1;
        filter: none;
        font-family: 'Roboto Slab', serif;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 300;
    }

    #sitecontainer.pdcnt #tabs a:hover,
    #sitecontainer.pdcnt #tabs a:focus {
        border-bottom-color: #cdbfc6;
        color: #3f393b;
        opacity: 1;
    }

    #sitecontainer.pdcnt #tabs #current {
        z-index: auto;
        border-bottom: 2px solid #6c4d5f;
        color: #302b2d;
        opacity: 1;
        font-weight: 400;
    }

    #sitecontainer.pdcnt #tabs_content {
        padding: 24px 4px 20px;
        background: transparent;
        border-top: 0;
    }
}

@media (max-width: 520px) {
    #sitecontainer.pdcnt .pd_contentholder {
        padding: 21px 14px 18px;
    }

    #sitecontainer.pdcnt h1.pd_title {
        font-size: 26px;
        line-height: 1.1;
    }

    #sitecontainer.pdcnt .pd_price {
        font-size: 24px;
    }

    #sitecontainer.pdcnt .pd_info {
        font-size: 12px;
    }

    #sitecontainer.pdcnt .quantity .input-text.qty {
        width: 38px;
    }

    #sitecontainer.pdcnt .quantity.buttons_added .minus,
    #sitecontainer.pdcnt .quantity.buttons_added .plus {
        width: 34px;
    }

    #sitecontainer.pdcnt .pd_add {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }

    #sitecontainer.pdcnt .m_content {
        padding-top: 38px;
    }

    #sitecontainer.pdcnt #tabs {
        gap: 18px;
    }

    #sitecontainer.pdcnt #tabs a {
        padding: 9px 0 10px;
        font-size: 12.5px;
    }

    #sitecontainer.pdcnt #tabs_content {
        padding: 21px 2px 18px;
    }
}

@media (max-width: 360px) {
    #sitecontainer.pdcnt .pd_contentholder {
        padding-left: 11px;
        padding-right: 11px;
    }

    #sitecontainer.pdcnt h1.pd_title {
        font-size: 24px;
    }

    #sitecontainer.pdcnt #addbtn_wrapper {
        gap: 7px;
    }

    #sitecontainer.pdcnt .quantity .input-text.qty {
        width: 36px;
    }

    #sitecontainer.pdcnt .quantity.buttons_added .minus,
    #sitecontainer.pdcnt .quantity.buttons_added .plus {
        width: 31px;
    }

    #sitecontainer.pdcnt .pd_add {
        font-size: 13px;
        padding-left: 9px;
        padding-right: 9px;
    }

    #sitecontainer.pdcnt #tabs {
        gap: 14px;
    }
}

/* ==========================================================
   PRODUCT PAGE — CTA sizing + remove duplicated summary
   Full product page only. Quick View is intentionally left
   unchanged because it does not use the .pdcnt page wrapper.
   ========================================================== */

/* The short description on the full product page duplicates the
   opening paragraph in the About tab. Keep it in the markup for
   Quick View, but don't repeat it on the full page. */
#sitecontainer.pdcnt .pd_info #short,
#sitecontainer.pdcnt .pd_info .rule {
    display: none;
}

/* With the duplicate paragraph gone, use this area only for the
   compact dimensions line. */
#sitecontainer.pdcnt .pd_info {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#sitecontainer.pdcnt .pd_info:empty {
    display: none;
}

#sitecontainer.pdcnt .pd_info .pdimensions {
    display: block;
    margin: 13px 0 0;
    padding-top: 11px;
    border-top: 1px solid #eee9eb;
    color: #777173;
    font-size: 11px;
    line-height: 1.45;
}

/* Tablet: keep Add to Basket prominent without letting it become
   an almost full-width banner beside the much smaller qty control. */
@media (min-width: 521px) and (max-width: 780px) {
    #sitecontainer.pdcnt .pd_add {
        flex: 0 1 320px;
        width: 320px;
        max-width: 320px;
        min-width: 220px;
    }
}

/* Phone: available width is genuinely limited, so letting the CTA
   use the remaining row width is the more useful touch layout. */
@media (max-width: 520px) {
    #sitecontainer.pdcnt .pd_add {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

/* ==========================================================
   QUICK VIEW — cleaner product information + purchase area
   Scoped to .qv_cwrap so these rules do not change the full
   product page.
   ========================================================== */

/* Keep the short description in Quick View because Quick View
   has no separate About section. Remove the old boxed-card look. */
.qv_cwrap .pd_info.pdi_qv {
    width: 100% !important;
    box-sizing: border-box;
    margin: 17px 0 0;
    padding: 0 0 15px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eee9eb;
    box-shadow: none;
    color: #777173;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 11.5px;
    font-weight: 200;
    line-height: 1.5;
}

.qv_cwrap .pd_info.pdi_qv #short {
    color: #000000;
    font-size: 13px;
    line-height: 1.62;
    font-weight: 280;
}

.qv_cwrap .pd_info.pdi_qv .rule {
    width: 100%;
    height: 1px;
    margin: 13px 0 10px;
    background: #eee9eb;
    background-image: none;
}

.qv_cwrap .pd_info.pdi_qv .pdimensions {
    display: block;
    margin: 0;
    color: #777173;
    font-size: 11.5px;
    line-height: 1.45;
}

/* Tighten the space between information and the purchase controls. */
.qv_cwrap .pd_form {
    margin-top: 17px;
}

/* Quantity + Add to Basket should read as one purchase row. */
.qv_cwrap .quantity {
    display: inline-flex;
    align-items: stretch;
    margin: 0 10px 0 0;
    vertical-align: top;
}

.qv_cwrap .quantity .input-text.qty {
    width: 40px;
    height: 46px;
    padding: 0 4px;
    box-sizing: border-box;
    background: #faf8f7;
    border-color: #ded9d6;
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
}

.qv_cwrap .quantity.buttons_added .minus,
.qv_cwrap .quantity.buttons_added .plus {
    width: 36px;
    height: 46px;
    padding: 0;
    box-sizing: border-box;
    background: #fff;
    border-color: #ded9d6;
    color: #4c4647;
    font-family: 'Roboto Slab', serif;
    font-size: 15px;
    transition: background-color .18s ease, border-color .18s ease;
}

.qv_cwrap .quantity.buttons_added .minus:hover,
.qv_cwrap .quantity.buttons_added .plus:hover {
    background: #f7f3f4;
    border-color: #cec5c9;
}

.qv_cwrap .pd_add {
    width: calc(100% - 132px);
    max-width: 280px;
    min-width: 180px;
    min-height: 46px;
    margin: 0;
    padding: 11px 18px;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 350;
    letter-spacing: .01em;
    box-shadow: 0 3px 10px rgba(101, 72, 43, 0.10);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.qv_cwrap .pd_add:hover {
    background-color: #b88d5f;
    box-shadow: 0 5px 14px rgba(101, 72, 43, 0.16);
    transform: translateY(-1px);
}

.qv_cwrap .pd_add:active {
    top: 0;
    transform: translateY(0);
}

/* Make View Full Details clearly secondary to Add to Basket. */
.qv_cwrap .pd_form .pd_full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 10px 14px;
    background: #f8f6f5;
    border: 1px solid #e7e1df;
    border-radius: 6px;
    color: #4f494b;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 13px;
    font-weight: 250;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.qv_cwrap .pd_form .pd_full:hover {
    background: #f1edeb;
    border-color: #d8d0cc;
    color: #302c2d;
}

/* Quick View stacks image + content at the existing 780px breakpoint.
   Keep the same cleaner treatment without making the CTA oversized. */
@media (max-width: 780px) {
    .qv_cwrap .pd_info.pdi_qv {
        margin-top: 15px;
        padding-bottom: 14px;
    }

    .qv_cwrap .pd_info.pdi_qv #short {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .qv_cwrap .pd_add {
        width: calc(100% - 128px);
        max-width: none;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .qv_cwrap .quantity {
        margin-right: 8px;
    }

    .qv_cwrap .quantity .input-text.qty {
        width: 36px;
    }

    .qv_cwrap .quantity.buttons_added .minus,
    .qv_cwrap .quantity.buttons_added .plus {
        width: 32px;
    }

    .qv_cwrap .pd_add {
        width: calc(100% - 122px);
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    .qv_cwrap .pd_form .pd_full {
        margin-top: 12px;
        min-height: 40px;
        font-size: 12.5px;
    }
}

/* ==========================================================
   PRODUCT PAGE — single-row thumbnail gallery on tablet/desktop
   Prevent extra thumbnail rows from making the whole product
   header unnecessarily tall. Mobile keeps its existing <=700px
   horizontal gallery treatment.
   ========================================================== */
@media (min-width: 701px) {

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: stretch;
        padding: 18px 7px 16px;
        overflow: hidden;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .photogrp {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        position: relative;
        z-index: 0;

        display: flex;
        flex-wrap: nowrap;
        justify-content: safe center;
        align-items: center;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 4px;

        padding: 9px 4px 7px;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .photogrp::-webkit-scrollbar {
        display: none;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs #secondarygall:empty {
        display: none;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-shell {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
        margin: 0;
        scroll-snap-align: start;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-video-shell,
    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-shell.gallery-video-shell:last-child {
        margin-right: 0;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-nav {
        grid-row: 1;
        position: relative;
        z-index: 2;
        align-self: stretch;

        display: grid;
        place-items: center;

        width: 25px;
        height: auto;
        margin: 9px 0 7px;
        padding: 0;

        border: 1px solid #ebebeb;
        border-radius: 4px;
        background: #fff;
        color: #693e53;

        font-size: 17px;
        line-height: 1;
        cursor: pointer;

        transition:
            background-color .18s ease,
            border-color .18s ease,
            color .18s ease;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-nav:hover {
        background: #f7f3f5;
        border-color: #ddd3d8;
        color: #4f2f40;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-nav[hidden] {
        display: none;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-prev {
        grid-column: 1;
        margin-right: 3px;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-next {
        grid-column: 3;
        margin-left: 3px;
    }

    #sitecontainer.pdcnt .pd_imgholder .gallery_thumbs .gallery-thumb-nav:focus-visible {
        outline: 2px solid #693e53;
        outline-offset: 2px;
    }
}

/* Desktop thumbnail drag scrolling */
.gallery_thumbs .photogrp img {
    -webkit-user-drag: none;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {

    .gallery_thumbs .photogrp.is-scrollable {
        cursor: grab;
    }

    .gallery_thumbs .photogrp.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

    .gallery_thumbs .photogrp.is-dragging img {
        pointer-events: none;
    }
}

/* ==========================================================
   PRODUCT PAGE — bundle / promotion upsell in purchase column
   The upsell now lives beneath "Ask a question" instead of
   underneath the image gallery.
   ========================================================== */
#sitecontainer.pdcnt #purchase_upsell {
    display: block;
    width: 100%;
    margin-top: 18px;
}

#sitecontainer.pdcnt #purchase_upsell:empty {
    display: none;
}

#sitecontainer.pdcnt #purchase_upsell .bundle-upsell-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 25px;
    padding: 14px 15px;
}

#sitecontainer.pdcnt #purchase_upsell .bundle-upsell-header {
    margin-bottom: 5px;
}

#sitecontainer.pdcnt #purchase_upsell .bundle-upsell-header strong {
    font-size: 0.66em;
}

#sitecontainer.pdcnt #purchase_upsell .bundle-upsell-text {
    margin-bottom: 12px;
    font-size: 0.6em;
    line-height: 1.45;
}

#sitecontainer.pdcnt #purchase_upsell .upsbtn_wrap {
    flex-wrap: wrap;
    gap: 8px;
}

#sitecontainer.pdcnt #purchase_upsell .bundle-upsell-btn {
    padding: 7px 12px;
    font-size: 0.62em;
    text-transform: none;
}

@media (max-width: 520px) {
    #sitecontainer.pdcnt #purchase_upsell {
        margin-top: 16px;
    }

    #sitecontainer.pdcnt #purchase_upsell .bundle-upsell-box {
        padding: 12px;
    }

    #sitecontainer.pdcnt #purchase_upsell .bundle-upsell-header strong {
        font-size: 0.82em;
    }

    #sitecontainer.pdcnt #purchase_upsell .bundle-upsell-text {
        font-size: 0.72em;
    }

    #sitecontainer.pdcnt #purchase_upsell .bundle-upsell-btn {
        font-size: 0.68em;
    }
}

/* ==========================================================
   PRODUCT PAGE — Stripe BNPL messaging
   Stripe chooses eligible Clearpay / Klarna plans for the
   current product or selected variant amount.
   ========================================================== */
#sitecontainer.pdcnt .payment-messaging-box {
    width: 100%;
    box-sizing: border-box;
    margin: 7px 0 2px;
    overflow: hidden;
}

#sitecontainer.pdcnt .payment-messaging-box:empty {
    display: none;
}

#sitecontainer.pdcnt .payment-messaging-box iframe {
    max-width: 100% !important;
}

@media (max-width: 780px) {
    #sitecontainer.pdcnt .payment-messaging-box {
        margin-top: 6px;
    }
}

/* ==========================================================
   PRODUCT PAGE — monochrome Clearpay + Klarna branding
   Stripe still renders the live instalment / See plans /
   eligibility text beneath this row. This cover only masks
   Stripe's coloured logo strip.
   ========================================================== */
#sitecontainer.pdcnt .payment-messaging-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 7px 0 2px;
    margin-top:11px
}

#sitecontainer.pdcnt .payment-messaging-wrap .payment-messaging-box {
    margin: 0;
}

#sitecontainer.pdcnt .payment-messaging-brandcover {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    z-index: 5;
    height: 27px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    background: #f9f9f9;
    pointer-events: none;
}

#sitecontainer.pdcnt .payment-brand-logo {
    display: block;
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

#sitecontainer.pdcnt .payment-brand-clearpay {
    height: 26px;
}

#sitecontainer.pdcnt .payment-brand-klarna {
    height: 27px;
}

#sitecontainer.pdcnt .payment-brand-divider {
    width: 1px;
    height: 12px;
    background: #ddd7da;
    flex: 0 0 1px;
}

@media (max-width: 780px) {
    #sitecontainer.pdcnt .payment-messaging-wrap {
        margin-top: 6px;
    }
}

@media (max-width: 520px) {
    #sitecontainer.pdcnt .payment-messaging-brandcover {
        top: -3px;
        height: 24px;
        gap: 4px;
    }

    #sitecontainer.pdcnt .payment-brand-clearpay {
        height: 22px;
    }

    #sitecontainer.pdcnt .payment-brand-klarna {
        height: 23px;
    }
}