:root { --focus-color: rgb(92, 171, 247); --modal-max-width-mobile: 450px; --modal-max-width-desktop: 450px; --modal-inner-side-padding: 20px; --modal-related-selected-border: 3px; /* Brand specific styles */ --primary-brand-color: rgb(0, 0, 0); --brand-font-family-primary: BananaSerif, "Times New Roman", "serif"; --brand-font-family-secondary: Lynstone, Helvetica, Arial, sans-serif; --brand-colorSwatch-border-radius: unset; --brand-colorSwatch-box-shadow-inner: rgb(128, 128, 128) 0 0 0 2px; --brand-colorSwatch-box-shadow-inner-focus: var(--focus-color) 0 0 0 2px; --brand-colorSwatch-box-shadow-middle: rgb(255, 255, 255) 0px 0.3rem 0px 0px; --brand-colorSwatch-box-shadow-middle-focus: var(--focus-color) 0px 0.45rem 0px 0px; --brand-colorSwatch-box-shadow-outer: var(--primary-brand-color) 0px 0.45rem 0px 0px; /* Default for other brands */ /* --primary-brand-color: rgb(0, 0, 0); --brand-colorSwatch-border-radius: -50%; --brand-colorSwatch-box-shadow-inner: rgb(128, 128, 128) 0 0 0 0px; --brand-colorSwatch-box-shadow-inner-focus: var(--focus-color) 0 0 0 0px; --brand-colorSwatch-box-shadow-middle: rgb(255, 255, 255) 0px 0px 0px 0.1875rem; --brand-colorSwatch-box-shadow-middle-focus: var(--focus-color) 0px 0px 0px 0.1875rem; --brand-colorSwatch-box-shadow-outer: var(--primary-brand-color) 0px 0px 0px 0.375rem; */ } * { box-sizing: border-box; margin: 0; padding: 0; } .w-100 { width: 100%; } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .mkt_content-wrapper { max-width: none; } /* Modal Styles */ a { cursor: pointer; } .atb_modal-container { /* display: block; */ width: 100%; max-width: var(--modal-max-width-mobile); /* height: 75%; */ /* height: fit-content; height: -moz-max-content; */ overflow: auto; /* overflow: visible; */ max-height: 100%; position: fixed; z-index: 451; transform: translate(-50%, -50%); left: 50%; top: 50%; background: #F6F4EB; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9); display: inline-block; height: unset; } .closed { display: none; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 450; background: rgba(0, 0, 0, 0.6); } .modal-inner { display: flex; flex-wrap: wrap; /* position: absolute; top: 0; left: 0; */ justify-content: center; flex-direction: column; /* align-items: center; */ width: 100%; height: 100%; overflow: visible; padding: 20px var(--modal-inner-side-padding); } .atb_modal-container .modal-close-button { position: absolute; z-index: 1; top: 5px; right: 10px; border: 0; background: transparent; color: black; padding: 5px 5px; font-size: 1.1rem; width: 7%; } /* Dynamic Modal Content Styles */ .color-swatch { display: inline-block; /* border: solid 1px grey; padding: 8px; */ text-transform: uppercase; height: 2.2rem; width: 2.2rem; /* margin-right: 1rem; */ margin-bottom: 1rem; } .color-swatch-img { width: 100%; height: 100%; margin: 0px; border-radius: var(--brand-colorSwatch-border-radius); z-index: 1; padding: 2px; border: 1px solid rgb(153, 153, 153); } /* input:checked ~ label img.color-swatch-img { box-shadow: rgb(255 255 255) 0px 0px 0px 0.1875rem, var(--primary-brand-color) var(--brand-colorSwatch-box-shadow-sizes); } */ /* input:checked ~ label img.color-swatch-img { box-shadow: rgb(92, 171, 247) 0px 0px 0px 0.1875rem, var(--primary-brand-color) var(--brand-colorSwatch-box-shadow-sizes); } */ input[name="swatchSelect"]:checked~label { border-bottom: 2px solid black; padding-bottom: 3px; } .color-swatchSelected { /* box-shadow: var(--brand-colorSwatch-box-shadow-inner), var(--brand-colorSwatch-box-shadow-middle), var(--brand-colorSwatch-box-shadow-outer); */ /* box-shadow: var(--brand-colorSwatch-box-shadow-middle), var(--brand-colorSwatch-box-shadow-outer); */ } input.focus-visible~label>img.color-swatch-img { /* box-shadow: var(--brand-colorSwatch-box-shadow-inner-focus), var(--brand-colorSwatch-box-shadow-middle-focus), var(--brand-colorSwatch-box-shadow-outer); */ background-color: var(--focus-color); } input[name="sizeSelect"].focus-visible~label, input[name="size2Select"].focus-visible~label { box-shadow: rgb(92, 171, 247) 0px 0px 0px 0.1875rem; } .tmpImg { width: 100%; } .atb-image-wrapper { margin: 20px 0 0 0; /* padding-right: 20px; */ flex-basis: 100%; } .atb-image { height: 546.4px; max-height: calc((100vw - 2*20px) * 693 / 520); } .atb-related { display: flex; flex-direction: row; flex-basis: 100%; justify-content: flex-start; max-width: 100%; margin: 0px 0px 20px 0px; } .atb-related-carousel.slick-slider { width: 100%; overflow: hidden; /* max-width: 410px; */ max-width: calc(var(--modal-max-width-mobile) - 2*var(--modal-inner-side-padding)); margin-bottom: 0px; } .atb-related-carousel.slick-slider .slick-arrow { border: none; background: transparent; } .atb-related-carousel.slick-slider .slick-arrow img { display: block; } .atb-related-carousel.slick-slider .atb-prev-arrow { position: absolute; top: 50%; left: 0%; z-index: 1; transform: translate(0px, -50%); } .atb-related-carousel.slick-slider .atb-next-arrow { position: absolute; top: 50%; right: 0%; z-index: 1; transform: translate(0px, -50%); } .atb-related-carousel.slick-slider .atb-prev-arrow-xl { position: absolute; top: 0%; left: 50%; z-index: 1; transform: translate(-50%, 0px); } .atb-related-carousel.slick-slider .atb-next-arrow-xl { position: absolute; bottom: 0%; left: 50%; z-index: 1; transform: translate(-50%, 0px); } .atb-related-carousel .atb-related-btn-wrap {} /* .atb-related-carousel .atb-related-btn-wrap { width: 33%; } */ .atb-related-btn-wrap { display: flex; /* margin: 10px 10px 20px 0px; */ padding: 10px 10px 0px 0px; flex-basis: 30%; } .atb-related-btn { border: unset; } .atb-related-btn.atb-related-active { border: var(--modal-related-selected-border) solid; } .atb-related-img { display: block; } .atb-related~.atb-contains-related { flex-basis: 100%; } .atb-details { flex-basis: 60%; flex-direction: column; cursor: auto; margin: 0; padding: 0px 0px 0px 0px; display: flex; min-height: 30px; box-sizing: border-box; font: 12px var(--brand-font-family-secondary); margin-left: 0; /* overflow: auto; */ overflow: visible; color: #000; max-height: 100%; margin-bottom: 0; justify-content: center; } .atb-details .title { margin: 20px 0px 10px 0; font-family: var(--brand-font-family-primary); font-size: 1.5rem; color: #000; text-transform: uppercase; /* text-decoration: none solid #666; */ text-align: center; } .mb-10p { margin-bottom: 10px; } .mb-section { margin-bottom: 1.5rem } .atb-details .pricing-display { cursor: auto; color: #000; margin: 0; padding: 0; margin-bottom: 10px; display: none; } .atb-details .pricing-display #price.sale span.priceNum { text-decoration: line-through; } .atb-details .pricing-for-sale { display: none; color: black } .atb-details .pricing-for-sale.sale { display: block; color: black } .atb-details .pricing-display .price { cursor: auto; visibility: visible; margin: 0; padding: 0; display: inline; font-family: var(--brand-font-family-secondary); font-style: normal; font-variant: none; font-weight: 600; letter-spacing: normal; line-height: normal; text-decoration: none solid #333; color: #333; margin-bottom: 1em; } #marketingFlag { font-family: var(--brand-font-family-primary); } .atb-marketingFlag { text-align: center; } .atb-options { display: flex; flex-direction: column; align-items: center; width: 100%; /* height: 100%; */ /* justify-content: space-between; */ justify-content: center; } #color-group { align-items: center; } #color-selected { cursor: auto; visibility: visible; color: #000; padding: 0; } #color-selected .label { cursor: auto; visibility: visible; color: #000; margin: 0; padding: 0; /* margin-bottom: 10px; */ } #color_swatches.swatches { display: flex; cursor: auto; visibility: visible; color: #000; margin: 0rem 0 0px 0px; padding: 0px 0.4rem; list-style: none; flex-wrap: wrap; justify-content: center; } .swatch_group { display: flex; flex-direction: column; justify-content: end; margin-left: 0.25rem; margin-right: 0.25rem; margin-top: 0.625rem; } .swatchPrice-header_regular { text-decoration: line-through; font-weight: 400; -webkit-font-smoothing: antialiased; /* color: rgb(246, 244, 235); */ opacity: 0.6; } .swatchPrice-header { padding: 0px 0.4rem 0.5rem 0.4rem; } .swatchPrice-header-side { position: relative; margin-left: 0.25rem; flex: 1; align-items: center; } .swatchPrice-header-side div { border-bottom: 2px solid grey; height: 0px; width: 100%; } .swatchPrice-header-bar { width: 95%; z-index: 2; position: absolute; transform: translate(-50%, -50%) rotate(45deg); height: 75%; top: 50%; left: 50%; margin: 0px; pointer-events: none; } .swatchBtns_group { flex-wrap: wrap; padding: 0px 0.4rem; } /* .atb-details .colors ul.swatches li { padding: 0; border-radius: 50px; overflow: hidden; width: 10%; margin: 1%; } .atb-details .colors ul.swatches li img { display: block; } .atb-details .colors ul.swatches li.color-selected { border: none; border-bottom: 4px solid #000; } */ #sizing { cursor: auto; visibility: visible; color: #000; /* margin-bottom: 1.5rem; */ padding: 0; position: relative; display: flex; justify-content: space-between; align-items: center; text-align: center; width: 100%; flex-wrap: wrap; flex-direction: column; } #variant-select { display: flex; width: 100%; text-transform: uppercase; flex-wrap: wrap; justify-content: center; } #variant-select div { /* flex-basis: 25%; */ /* padding: 0.625rem 0.5rem 0.125rem 0.5rem; */ margin-bottom: 10px; } #variant-select input.focus-visible~label { box-shadow: rgb(92, 171, 247) 0px 0px 0px 0.1875rem; } #variant-select a.focus-visible { box-shadow: rgb(92, 171, 247) 0px 0px 0px 0.1875rem; } #size-select, #size2-select { display: flex; flex-wrap: wrap; width: 100%; /* margin-bottom: 0.8125rem; */ justify-content: center; } #quantity-dropdown { width: 4.125rem; height: 2.75rem; align-self: flex-end; position: relative; } #quantity-btn { border: none; position: relative; height: 100%; padding: 0px 2rem 0rem 1.125rem; font-family: unset; font-size: 1.0625rem; box-shadow: rgb(204 204 204) 0px 0px 0px 1px inset; background: unset; } #quantity-btn::before { content: ""; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M.003 1.533L1.118.529l3.385 3.047L7.89.529l1.114 1.004-4.5 4.05z' style='fill:%23666;fill-rule:evenodd' /%3E%3C/svg%3E") 8px 8px no-repeat; /* background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M.003 1.533L1.118.529l3.385 3.047L7.89.529l1.114 1.004-4.5 4.05z' style='fill:%23666;fill-rule:evenodd' /%3E%3C/svg%3E")  8px 14px no-repeat; */ width: 1.5rem; height: 1.5rem; display: block; position: absolute; /* top: 0%; */ right: 4%; } #quantity-select { box-shadow: rgb(0 0 0 / 30%) 0px 1px 2px 0px; position: absolute; text-align: center; width: 100%; max-height: 200px; transform: translate(0%, 100%); bottom: 0%; transition: max-height 0.25s ease-in-out 0s; background-color: #ffffff; } #quantity-select li { cursor: pointer; padding: 0.5rem; color: rgb(0, 0, 0); background-color: #ffffff; /* border: 1px solid white; */ } #quantity-select li:hover { background-color: rgb(229, 229, 229); } .atb-details .dropdown-custom .dropdown-menu { border: 1px solid #e3e3e3; border-radius: 0; background-color: #fff; right: 0; left: initial; width: 77%; background-image: none !important; padding: 0; margin-bottom: 25px; } .atb-details .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #modal.atb_modal-container .atb-add-btn { visibility: visible; margin: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; padding: 7.5px 0; border: unset; color: #fff; /* margin-bottom: 15px; */ font-family: var(--brand-font-family-secondary); font-size: 16px; font-style: normal; font-variant: none; /* font-weight: 600; */ letter-spacing: 1.92px; line-height: normal; /* text-transform: uppercase; */ text-decoration: none !important; background: var(--primary-brand-color); } s .atb-details .atb-add-btn.disabled { opacity: 0.7; } .atb-added-icon { margin-right: 13px; } .atb-add-btn .added { opacity: 0.7; } /* .atb-add-btn:hover{ opacity: 0.7; } */ /* Size Select Styles */ .sizeBtn { position: relative; width: 2.25rem; height: 2.25rem; /* margin-bottom: 0.8125rem; */ margin: 0 0.25rem; flex-basis: 15%; } .sizeBtn.sizeBtn--auto-width { /* auto-width for long text */ width: auto; } .sizeBtn label { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .sizeBtn.sizeBtn--auto-width label span { /* top: 50%; transform: translate(0%, -50%); position: absolute; */ top: 0%; left: 0%; white-space: nowrap; position: relative; /* padding: 0 0.5rem; */ padding: 0; } .sizeBtn.sizeBtn--auto-width input[name="sizeSelect"]:checked~label span, .sizeBtn.sizeBtn--auto-width input[name="size2Select"]:checked~label span { top: unset; left: unset; transform: unset; position: relative; padding: 0; } .sizeBtn input[name="sizeSelect"]:checked~label::after, .sizeBtn input[name="size2Select"]:checked~label::after { content: ""; position: absolute; display: block; width: 100%; left: 0px; border-bottom: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); bottom: 0.1875rem; background-color: rgb(0, 0, 0); } .variant-link { font-family: inherit; text-transform: inherit; background-color: transparent; border: none; padding: 0.0rem 0.5rem 0.125rem 0.5rem; } input[name="variantSelect"], input[name="swatchSelect"], input[name="sizeSelect"], input[name="size2Select"] { /* display: none; */ opacity: 0; position: absolute; height: 0px; width: 0px; } input[name="variantSelect"]~label { display: inline; padding: 0.625rem 0.5rem 0.125rem 0.5rem; } input[name="variantSelect"]:checked~label { /* border-bottom: 3px solid var(--primary-brand-color); */ /* box-shadow: var(--brand-colorSwatch-box-shadow-middle), var(--brand-colorSwatch-box-shadow-outer); */ border-bottom: 2px solid black; padding-bottom: 3px; } input[name="sizeSelect"]~label, input[name="size2Select"]~label { margin-right: 0.75rem; text-align: center; transition: all 0.2s ease 0s; vertical-align: top; white-space: nowrap; margin-bottom: 0.8125rem; border: none; text-transform: capitalize; -webkit-font-smoothing: antialiased; letter-spacing: 1px; /* border-radius: 2rem; */ /* line-height: 2.375; */ position: relative; } input[name="sizeSelect"]:checked~label, input[name="size2Select"]:checked~label { /* background-color: var(--primary-brand-color); */ /* color: rgb(255, 255, 255); */ transition: all 0.2s ease 0s; position: relative; } /* input[name="sizeSelect"]:checked ~ label span, input[name="size2Select"]:checked ~ label span { box-shadow: var(--brand-colorSwatch-box-shadow-middle), var(--brand-colorSwatch-box-shadow-outer); border-bottom: 2px solid black; padding-bottom: 3px; } */ input[name="variantSelect"]:disabled~label, input[name="sizeSelect"]:disabled~label span, input[name="size2Select"]:disabled~label span { text-decoration: line-through; font-weight: 300; color: rgb(0, 0, 0); } .hover-hotspot { background: rgba(255, 0, 0, 0.3); position: absolute; cursor: pointer; display: block; } #product-tooltip { display: block; opacity: 0; margin: 0; transform: translate3d(-50%, -50%, 0); transition: transform 0.2s cubic-bezier(0.02, 1.23, 0.79, 1.08); pointer-events: none; } /* Stitch Tool Tip Styles - Remove this block when SDS is moved to version 5 */ .sds-cb_tooltip { position: relative; display: inline-block; text-decoration: none; cursor: pointer; border-bottom: 1px solid currentColor; } @keyframes tooltip--fade { from { color: rgba(255, 255, 255, 0); background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); } to { color: #666; background-color: white; border-color: inherit; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } } .sds-cb_tooltip:focus>.sds-cb_tooltip__content, .sds-cb_tooltip:hover>.sds-cb_tooltip__content { display: block; animation-name: tooltip--fade; animation-duration: 0.5s; } .sds-cb_tooltip__content { font-family: "Source Sans Pro", Helvetica, Arial, Roboto, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); display: none; position: absolute; z-index: 5; top: -0.25rem; margin-left: 50%; margin-bottom: 0.5rem; transform: translate(-50%, -100%); padding: 0.5rem; background-color: #fff; border-radius: 2px; color: #666; text-align: center; white-space: nowrap; font-size: 0.875rem; } .sds-cb_tooltip__content--left { top: 50%; left: -0.25rem; margin-left: 0; transform: translate(-100%, -50%); } .sds-cb_tooltip__content--right { top: 50%; left: 100%; margin-left: 0.25rem; transform: translate(0, -50%); } .sds-cb_tooltip__content--bottom { top: calc(100% + 0.25rem); transform: translate(-50%, 0); } .sds_tooltip { position: relative; display: inline-block; text-decoration: none; cursor: pointer; border-bottom: 1px solid currentColor; } @keyframes tooltip--fade { from { color: rgba(255, 255, 255, 0); background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); } to { color: #666; background-color: white; border-color: inherit; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } } .sds_tooltip:focus>.sds_tooltip__content, .sds_tooltip:hover>.sds_tooltip__content { display: block; animation-name: tooltip--fade; animation-duration: 0.5s; } .sds_tooltip__content { font-family: "Avenir Next LT Pro", Helvetica Neue, Helvetica, Arial, Roboto, sans-serif; font-weight: 400; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); display: none; position: absolute; z-index: 5; top: -0.25rem; margin-left: 50%; margin-bottom: 0.5rem; transform: translate(-50%, -100%); padding: 0.5rem; background-color: #fff; border-radius: 2px; color: #666; text-align: center; white-space: nowrap; font-size: 0.8125rem; } .sds_tooltip__content--left { top: 50%; left: -0.25rem; margin-left: 0; transform: translate(-100%, -50%); } .sds_tooltip__content--right { top: 50%; left: 100%; margin-left: 0.25rem; transform: translate(0, -50%); } .sds_tooltip__content--bottom { top: calc(100% + 0.25rem); transform: translate(-50%, 0); } .drop-shadow, .sds_drop-shadow { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } /* Overrides! */ .hover-caption-left::after, .hover-caption-right::after { white-space: nowrap; content: "Hover to Shop"; /* background:#000; color:#fff; */ color: #000; text-transform: uppercase; padding: 5px 0; display: block; font-size: 0.625rem; letter-spacing: 0.5px; font-weight: 400; position: absolute; } .hover-caption-right::after { text-align: right; right: 0; } .hover-caption-left::after { text-align: left; left: 0; } .btn-wrap { display: flex; justify-content: space-between; } .atb-details .btn-wrap .atb-add-btn.keep-shop { background-color: transparent; border: 2px solid #333; color: #333; flex: 0 1 49%; } .atb-details .btn-wrap .atb-add-btn.go-bag { background-color: #f43d00; border: 2px solid transparent; flex: 0 1 49%; } .shoppingBagIconText { color: rgb(0, 0, 0); font-size: 0.8rem; font-weight: bold; left: 0px; letter-spacing: -0.063rem; line-height: 1.375rem; margin-left: -0.063rem; position: absolute; text-align: center; top: 0.375rem; width: 100%; } /* Size Grid Styles */ .size-variant .pdp-variant__radio, .pdp-dimension__radio { opacity: 0; position: absolute; height: 0px; width: 0px; } .size-variant .pdp-variant__radio+.pdp-variant__label { position: relative; display: inline-block; } .radio-container { display: flex; } .size-group .dimension-group { display: flex; flex-wrap: wrap; -webkit-box-pack: start; justify-content: flex-start; } .shop-now-bar-placeholder { width: 100%; } #product-modal-footer { align-items: center; display: flex; flex-direction: column; } #product-modal-footer div { /* display: flex; flex-direction: row; */ position: relative; /* margin-bottom: 15px; */ } .full-product-info { margin: 0px 0 50px 0px; text-decoration: underline; } .flex-column { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; } .atb_container { position: relative; } .atb_CTA_1 { top: 10%; left: 10%; height: 10%; width: 10%; } .atb_CTA_2 { top: 10%; left: 30%; height: 10%; width: 10%; } .atb_CTA_3 { top: 10%; left: 50%; height: 10%; width: 10%; } .atb_CTA_4 { top: 10%; left: 70%; height: 10%; width: 10%; } .atb_CTA_5 { top: 25%; left: 10%; height: 10%; width: 10%; } .atb_CTA_6 { top: 25%; left: 30%; height: 10%; width: 10%; } .atb_CTA_7 { display: flex; background-color: transparent; border: none; position: absolute; /* cursor: pointer; */ transform: translate(-50%, -50%); top: 25%; left: 50%; } .atb_CTA_8 { display: flex; background-color: transparent; border: none; position: absolute; /* cursor: pointer; */ transform: translate(-50%, -50%); top: 25%; left: 60%; } .atb_CTA_9 { display: flex; background-color: transparent; border: none; position: absolute; /* cursor: pointer; */ /* transform: translate(-50%,-50%); */ bottom: 0%; right: 0%; width: 30%; } .atb_CTA_10 { top: 40%; left: 10%; height: 10%; width: 10%; } .atb_btn_soldout { display: none; } .atb_CTA_Home { display: flex; background-color: transparent; border: none; position: absolute; /* cursor: pointer; */ /* transform: translate(-50%,-50%); */ bottom: 2.5%; right: 1%; width: 9%; } /* Desktop */ @media (min-width: 768px) { .atb_CTA_9 { width: 15%; } .atb_CTA_Home { width: 4.5%; bottom: 4%; right: 1.85%; } .atb_modal-container { min-width: 565px; max-width: 750px; overflow: visible; /* height: 500px; */ } .atb_modal-container .modal-close-button { top: 10px; right: 20px; width: 30px; } .modal-inner { display: flex; flex-direction: row; /* align-items: unset; */ justify-content: unset; padding: 20px 0px; } .atb-modal-contains-related { max-width: 950px; } .atb-related { display: unset; /* flex-direction: row; */ /* flex-direction: column; */ flex-basis: 15%; max-width: 15%; justify-content: unset; /* padding: 0px 20px 0px 0px; */ margin: 0; padding: 0px 0px 0px var(--modal-inner-side-padding); } .atb-related~.atb-contains-related { flex-basis: 42.5%; } .atb-related-btn-wrap { flex-basis: unset; /* margin: 0px 20px 10px 0px; */ padding: 0px 20px 10px 0px; } .atb-related-img { height: 158px; max-height: calc((15vw - 22px) * 693 / 520); } .atb-related-active .atb-related-img { height: calc(158px - 2*var(--modal-related-selected-border)); max-height: calc((15vw - 22px) * 693 / 520 - 2*var(--modal-related-selected-border)); } .slick-slider .slick-slide { height: auto; } /* Fix carousel without the spacing issue */ .atb-related-carousel .slick-slide div { display: flex; flex-direction: column; } .atb-related-carousel .atb-related-btn-wrap { padding: 0px 0px 10px 0px; } /* .atb-related-carousel .slick-next { right: 1%; z-index: 1; } */ /* .atb-related-carousel .slick-next::before { content: ""; } */ /* .atb-related-carousel .slick-prev { left: 1%; z-index: 1; } */ /* .atb-related-carousel .slick-prev::before { content: ""; } */ .atb-image-wrapper { margin: unset; padding-right: 20px; flex-basis: 50%; padding: 0px 0px 0px var(--modal-inner-side-padding); } .atb-image { height: 473.1px; max-height: calc((50vw - 20px) * 693 / 520); } .atb-contains-related .atb-image { height: 511.41px; max-height: calc((42.5vw - 20px) * 693 / 520); } .atb-details { display: flex; flex-direction: column; flex-basis: 50%; align-items: center; padding: 25px var(--modal-inner-side-padding) 0px var(--modal-inner-side-padding); } .atb-details .title { margin: 0px 0 10px 0; font-size: 1.5rem; } .atb-options { align-items: center; } #variant-select div { /* flex-basis: 20%; */ margin-bottom: 10px; } #variant-select div:only-child { display: none; } #variant-select div:last-child { /* margin-bottom: 14px; */ } #sizing div { align-items: center; } .sizeBtn { flex-basis: 12%; } .full-product-info { margin: 0; } .atb_btn_soldout { display: none; } } /* MINIFY WHEN COMPLETE */