/** Shopify CDN: Minification failed Line 4710:1 Expected ":" **/ a:not(.a--no-hover-color):not(.btn){ --color-a: var(--color-text-link-block, var(--color-accent-section, var(--color-text-link-main))); } a{ color: var(--color-a, inherit); text-decoration: none; outline: 0; transition: color var(--duration-medium) var(--animation-bezier); } @media (min-width:1025px){ a:not(.a--no-hover-color):not(.btn):hover{ --color-a-hover: var(--color-text-link-hover-block, var(--color-accent-section, var(--color-text-link-hover-main))); } a:hover{ color: var(--color-a-hover, inherit); text-decoration: underline; } } a.clear-underline{ text-decoration: none; } a[href*="tel:"]{ text-decoration: none; } a[href*="tel:"]:hover{ color: var(--color-text, var(--color-base-section, var(--color-base))); } h1,h2,h3,.h1,.h2,.h3{ font-family: var(--font-heading-family); font-style: var(--font-heading-style); font-weight: var(--font-heading-weight); color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main))); line-height: var(--font-heading-line-height); word-break: break-word; } h4,h5,h6,.h4,.h5,.h6{ font-family: var(--font-h4h5h6-family,var(--font-heading-family)); font-style: var(--font-h4h5h6-style,var(--font-heading-style)); font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight)); color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main))); line-height: var(--font-heading-line-height); word-break: break-word; } .section-heading-text{ color: var(--color-base-section, var(--color-heading-main)); } .section-heading-desc-text{ color: var(--color-base-section, var(--color-base)); } .h1,.h2,.h3,.h4,.h5,.h6{ margin: 0; } h1>a,h2>a,h3>a,h4>a,h5>a,h6>a, .h1>a,.h2>a,.h3>a,.h4>a,.h5>a,.h6>a{ color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main))); } .subheading{ color: var(--color-accent-section ,var(--color-subheading-main)); } @media (min-width: 1025px){ h1,h2{ --h-mt: var(--main-text-top-offset); --h-mb: var(--main-text-bottom-offset); } } @media (max-width: 1024px){ h1,h2{ --h-mt: var(--main-text-top-offset); --h-mb: var(--main-text-bottom-offset); } } h1,.h1{ font-size: calc(48px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } h2,.h2{ font-size: calc(40px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } h1,h2{ margin-top: var(--h-mt, 0); margin-bottom: var(--h-mb, 0); } h3,.h3{ font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } @media (max-width: 576px){ h1,.h1{ font-size: calc(36px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } h2,.h2{ font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } h3,.h3{ font-size: calc(28px * var(--font-h1h2h3_scale, var(--font-heading-scale))); } } h4,.h4{ font-size: calc(24px * var(--font-h4h5h6_scale, var(--font-heading-scale))); } h5,.h5{ font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale))); } h6,.h6{ font-size: calc(16px * var(--font-h4h5h6_scale, var(--font-heading-scale))); } h3,h4,h5,h6{ --h-mt: var(--main-text-top-offset); --h-mb: var(--main-text-bottom-offset); margin-top: var(--h-mt); margin-bottom: var(--h-mb); } .body2{ font-size: var(--font-body2-size); line-height: var(--font-body2-line-height); font-weight: var(--font-body-weight); } .body3{ font-size: var(--font-body3-size); line-height: var(--font-body3-line-height); font-weight: var(--font-body-weight); } @media (max-width:1024px){ .body3-st{ font-size: var(--font-body3-size); line-height: var(--font-body3-line-height); font-weight: var(--font-body-weight); } } .body3-no-scale{ font-size: var(--font-body3-size-no-scale); line-height: var(--font-body3-line-height); font-weight: var(--font-body-weight); } strong,b,.strong{ --font-body-weight-bold-value: var(--font-body-weight-bold); font-weight: var(--font-body-weight-bold); } h1.strong,h2.strong,h3.strong,h4.strong,h5.strong,h6.strong,.h1.strong,.h2.strong,.h3.strong,.h4.strong,.h5.strong,.h6.strong, h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong,.h1 strong,.h2 strong,.h3 strong,.h4 strong,.h5 strong,.h6 strong, h1 b,h2 b,h3 b,h4 b,h5 b,h6 b,.h1 b,.h2 b,.h3 b,.h4 b,.h5 b,.h6 b{ font-weight: var(--font-heading-weight); } p{ margin: var(--main-text-top-offset) 0 0; } ul, ol{ margin-top:var(--main-text-top-offset); margin-bottom:0; padding-left: 28px; } .unstyle-ul{ list-style: none; margin: 0; padding: 0; } a:empty, ul:empty, dl:empty, p:empty { display: none; } img{ max-width: 100%; vertical-align: middle; } meta+img,p+img{ max-width: 100%; vertical-align: middle; margin: var(--main-text-top-offset) 0 0; } p span img{ max-width: 100%; vertical-align: middle; } button, button:active, button:focus { outline: none; } button { border: none; } .section-background--small{ --section-background-spacing: var(--sections-top-spacing--small); --section-background-spacing-mobile: var(--sections-top-spacing--small-mobile); } .section-background--medium{ --section-background-spacing: var(--sections-top-spacing--medium); --section-background-spacing-mobile: var(--sections-top-spacing--medium-mobile); } .section-background--normal{ --section-background-spacing: var(--sections-top-spacing); --section-background-spacing-mobile: var(--sections-top-spacing-mobile); } .section-background{ padding-top: var(--section-background-spacing, 0); padding-bottom: var(--section-background-spacing, 0); padding-left: 0; padding-right: 0; background: var(--color-section-background-custom, var(--color-section-background)); } .background__horizontal-line{ width:100%; height:1px; background:var(--color-lines); } .section-background--no-color{ background: unset; } @media(min-width: 577px){ [class*="page-wi"] .section-background{ padding-left: 40px; padding-right: 40px; } } @media(max-width: 576px){ .section-background{ padding-top: var(--section-background-spacing-mobile, 0); padding-bottom: var(--section-background-spacing-mobile, 0); } [class*="page-"].section-background--mobile-width{ padding-left: 0; padding-right: 0; } [class*="page-wi"] .section-background{ padding-left: var(--grid-padding); padding-right:var(--grid-padding); border-radius:0; } .background__page-padding0{ --grid-padding: 0; } } .border__radius, .image--radius img{ border-radius: var(--radius); } .section-heading-elements{ display:flex; flex-direction:column; gap:16px; } @media (min-width:1025px){ .heading-with-button{ display: grid; grid-template-columns: auto 1fr; grid-template-areas: "b c"; } .heading-with-button.text-center{ grid-template-columns: 1fr auto 1fr; grid-template-areas: "a b c"; } .heading-with-button>*:first-child{ grid-area:b; } .heading-with-button>*:last-child{ text-align:right; grid-area:c; margin-top: auto; } .section-heading-elements+.secondary-btn__container{ justify-content: flex-end!important; } } @media (max-width:1024px){ .heading-with-button>*:last-child{ display: none; } } .mt3{margin-top:3px;} .mt5{margin-top:5px;} .mt6{margin-top:6px;} .mt8{margin-top:8px;} .mt10{margin-top:10px;} .mt13{margin-top:13px;} .mt15{margin-top:15px;} .mt16{margin-top:var(--main-text-section-top-offset);} .mt20{margin-top:20px;} .mt30{margin-top:30px;} .page-content__mockup .section-heading-container+*, .section-heading-container:not(.section-heading-container--no-bt)+*, .mt40{margin-top:40px;} .mb8{margin-bottom:8px;} .mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;} .mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;} .mb25{margin-bottom:25px;} .mb30{margin-bottom:30px;} .mb40{margin-bottom:40px;} .mt-first-0>*:first-child{margin-top:0;} .text-center{text-align: center !important;} .text-left{text-align: left !important;} .text-right{text-align: right !important;} .nomargin{margin: 0;} .mt--first-child-0 > *:first-child{margin-top:0;} .mb--last-child-0 > *:last-child{margin-bottom:0;} .text-uppercase{text-transform: uppercase !important;} .justify-content-center{justify-content: center !important;} .justify-content-end{justify-content: flex-end !important;} .align-items-start{align-items: flex-start !important;} .align-items-center{align-items: center !important;} .align-items-end{align-items: flex-end !important;} .align-self-center{align-self: center !important;} .align-self-end{align-self: flex-end !important;} .display-block{display: block;} .display-flex{display: flex;} .display-flex--column{flex-direction:column;} .display-inline-flex{display: inline-flex;} .justify-content-between{justify-content: space-between;} .position-relative{position: relative;} .hidden, .hide{display: none !important;} .body-bold-weight{font-weight: var(--font-body-weight-bold);} .visibility-hidden{ visibility: hidden; display: none !important; } .visibility-hidden:first-child+*:not(.visibility-hidden){ margin-top: 0; } @media (max-width:1024px){ .hide-st{ display:none; } } .mt0{margin-top: 0px;} .mb0{margin-bottom: 0px;} @media (min-width:577px){ .mt--first-child-0-desktop > *:first-child{margin-top:0;} } blockquote{ background: rgba(var(--color-base-rgb),.05); border-radius: var(--radius); padding: 30px; margin: var(--main-text-top-offset) 0 0; } blockquote>:first-child{ margin: 0; } svg.theme-icon path, svg.theme-icon rect{ fill: var(--color-text-icons-block, var(--color-base-section, var(--color-text-icons-main))); } svg > *{ transition: fill var(--duration-medium) var(--animation-bezier); } .placeholder__svg--bg{ position: relative; overflow: hidden; width: 100%; } .placeholder__svg--bg-none{ background: rgba(0,0,0,0); } .icon-as-image img{ width:var(--icon-image-width, 40px); height:auto; } .placeholder__svg--bg svg{ display: flex; width: 100%; height: auto; } tag-image{ display:flex; width:100%; } .image-hover-box__container{ display:block; position:relative; overflow:hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); height: max-content; z-index:0; } .image-hover-box{ display:block; position:relative; border-radius: var(--custom-image-radius, var(--radius)); overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); z-index:0; } .image-hover-box>*{ pointer-events:none; } .change-to__small-radius .product-card swiper-slider, .change-to__small-radius .image-hover-box, .image-hover-box__small-radius{ border-radius: var(--radius-image); } .image-hover-box--circle{ border-radius: 50%!important; } @media (min-width:577px){ .image-aspratio-round--desktop{ border-radius: 50%!important; } } @media (max-width:576px){ .image-aspratio-round--mobile{ border-radius: 50%!important; } } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } [style*="--aspect-ratio"]{ position: relative; overflow: hidden; width: 100%; z-index:0; } [style*="--aspect-ratio"] img, [style*="--aspect-ratio"].placeholder__svg--bg svg{ backface-visibility: hidden; transform: translateZ(0); object-fit: cover; object-position: var(--media-object-position, center); position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index:0; } .image-fit-contain [style*="--aspect-ratio"] img{ object-fit: contain; } [style*="--aspect-ratio"]:before{ content: ""; display: block; width: 100%; height: 0; padding-top: calc(100%/(0 + var(--aspect-ratio, 1 / 1))); transition: background 1s var(--animation-bezier); } [style*="--aspect-ratio"].bg-preloader:before{ background:var(--color-image-preloader-bg); } [style*="--aspect-ratio"].bg-preloader:has(.image-loaded):before{ background:transparent; } @media (max-width: 576px){ [style*="--aspect-ratio-mobile"]:before{ --aspect-ratio: var(--aspect-ratio-mobile); } } @media (min-width: 1025px){ .image-hover01 .image-hover-box>*, .image-hover01-personal .image-hover-personal-element .image-hover-box>*{ -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .image-hover01:not(.image-hover01-rotate-personal):hover .image-hover-box>*, .image-hover01-personal:hover .image-hover-personal-element .image-hover-box>*{ -webkit-transform: scale(1.2); transform: scale(1.2); } .image-hover01.image-hover01-rotate:hover .image-hover-box>*, .image-hover01.image-hover01-rotate-personal:hover .image-hover-personal-element .image-hover-box>*{ -webkit-transform: scale(1.2) rotate(-10deg); transform: scale(1.2) rotate(-10deg); } .image-hover02 .image-hover-box img, .image-hover02-personal .image-hover-personal-element .image-hover-box img, .image-hover02 .image-hover-box svg{ -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .image-hover02:hover .image-hover-box img, .image-hover02-personal:hover .image-hover-personal-element .image-hover-box img, .image-hover02:hover .image-hover-box svg{ max-width:116%; width:116%; height:116%; } .image-hover03 .image-hover-box>*, .image-hover03-personal .image-hover-personal-element .image-hover-box>*{ -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .image-hover03:hover .image-hover-box>*, .image-hover03-personal:hover .image-hover-personal-element .image-hover-box>*{ -webkit-transform: scale(1); transform: scale(1); } .image-hover04 .image-hover-box img, .image-hover04-personal .image-hover-personal-element .image-hover-box img, .image-hover04 .image-hover-box svg{ max-width:116%; width:116%; height:116%; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .image-hover04:hover .image-hover-box img, .image-hover04-personal:hover .image-hover-personal-element .image-hover-box img, .image-hover04:hover .image-hover-box svg{ max-width:100%; width:100%; height:100%; } .image-hover05 .image-hover-box img, .image-hover05-personal .image-hover-personal-element .image-hover-box img, .image-hover05 .image-hover-box svg{ left: 0; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .image-hover05:hover .image-hover-box img, .image-hover05-personal:hover .image-hover-personal-element .image-hover-box img, .image-hover05:hover .image-hover-box svg{ left: -30px; } [class*="image-hover05"] img, [class*="image-hover05"] .placeholder__svg--bg svg{ width: calc(100% + 30px); max-width:unset; } .image-hover06 .image-hover-box>*:after, .image-hover06-personal .image-hover-personal-element .image-hover-box>*:after{ position: absolute; top: 0; left: -150%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .image-hover06:hover .image-hover-box>*:after, .image-hover06-personal:hover .image-hover-personal-element .image-hover-box>*:after{ -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 1% { left: -100%; } 100% { left: 125%; } } @keyframes shine { 1% { left: -100%; } 100% { left: 125%; } } } table{ overflow:hidden; border: 0; padding: 0; background: none; border-collapse: separate; border-spacing: 0; border-radius:var(--radius-table); width: 100%; text-align: left; border: var(--border); --border: 1px solid var(--color-lines); word-break: break-word; } .scroll-table-mobile:not(:only-child) table, table:not(:only-child){ margin-top:var(--main-text-top-offset); } dd,dl{ margin:0; } th{ font-weight:var(--font-body-weight-bold); } td{ font-weight:var(--font-body-weight); border:none; } table.rounded-corners th:not(:last-child), table.rounded-corners td:not(:last-child) { border-right: var(--border); } table>thead>tr:not(:last-child)>th, table>thead>tr:not(:last-child)>td, table>tbody>tr:not(:last-child)>th, table>tbody>tr:not(:last-child)>td, table>tfoot>tr:not(:last-child)>th, table>tfoot>tr:not(:last-child)>td, table>thead:not(:last-child)>tr>th, table>thead:not(:last-child)>tr>td, table>tbody:not(:last-child)>tr>th, table>tbody:not(:last-child)>tr>td, table>tfoot:not(:last-child)>tr>th, table>tfoot:not(:last-child)>tr>td, table>tr:not(:last-child)>td, table>tr:not(:last-child)>th, table>thead:not(:last-child), table>tbody:not(:last-child), table>tfoot:not(:last-child) { border-bottom: var(--border); } table th:not(:last-child), table td:not(:last-child){ border-right: var(--border); } td, th { padding:10px; } table h1, table h2, table h3, table h4, table h5, table h6{ margin-top: 0; margin-bottom: 0; } table thead{ text-align: left; } @media (max-width:576px){ .scroll-table-mobile{ overflow-y: hidden; overflow-x: auto; width: calc(100% + 15px); padding-right:20px; } .scroll-table-mobile table{ width: max-content!important; min-width: 100%; max-width: 767px; } } .page-content__mockup img{ border-radius:var(--radius); } .page-content__mockup iframe{ display:block; border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 16/9; margin-top:var(--main-text-top-offset); } .page-content__mockup p iframe{ margin-top:0; } .link{ --color-link-text:var(--color-link-button-block, var(--color-accent-section, var(--color-link-button))); --color-link-icon:var(--color-link-button-icon-block, var(--color-accent-section, var(--color-link-button-icon))); --color-link-text-hover:var(--color-link-button-block-hover, var(--color-base-section, var(--color-link-button-hover))); --color-link-icon-hover:var(--color-link-button-icon-block-hover, var(--color-base-section, var(--color-link-button-icon-hover))); cursor: pointer; display: inline-flex; gap:5px; align-items: center; border: none; box-shadow: none; text-decoration: none; background-color: transparent; position:relative; padding: 0; margin: 0; color:var(--color-link-text); font-family:var(--font-body-family); font-style:var(--font-body-style); font-size:var(--font-body3-size); line-height:var(--font-body3-line-height); transition: color var(--duration-medium) var(--animation-bezier); } .link.link--medium{ font-size: var(--font-body2-size); line-height: var(--font-body2-line-height); gap:8px; } .link.link--big{ font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale))); font-family: var(--font-h4h5h6-family,var(--font-heading-family)); font-style: var(--font-h4h5h6-style,var(--font-heading-style)); font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight)); line-height: var(--font-heading-line-height); } .link--max-content{ width:max-content; } .link svg{ flex: 0 0 auto; } .link svg path{ fill: var(--color-link-icon); } .link.link-hover-span span{ position:relative; } .link:not(.link-hover-span):before, .link.link-hover-span span:before{ content: ""; position: absolute; width: 0; height:var(--animation-underline-thin); left: 0; top: 100%; background: var(--color-link-text-hover); transition: width var(--duration-medium) var(--animation-bezier); pointer-events:none; } .link.link--no-underline:before, .link.link--no-underline span:before{ content:none; } .link.link-hover-span span span:before{ content: none; } .link.link-hover-span--underline span:before{ width: 100%; background: var(--color-link-text); } .heading-color-block-main, .heading-color-block-hover{ --color-heading-block:var(--color-heading-link-block, var(--color-base-section, var(--color-heading-main))); color:var(--color-heading-block); } .heading-color-block-main.animation-underline{ --color-hover:var(--color-heading-block); } @media (min-width: 1025px){ .heading-color-block-hover { transition: color var(--duration-medium) var(--animation-bezier); } .heading-color-block-hover.animation-underline{ --color-hover:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent))); } .hover-area:hover .link:not(.native-hover), .link:not(:empty):not(.empty):hover{ text-decoration:none; color:var(--color-link-text-hover); } .heading-color-block-hover:hover, .hover-area:hover .heading-color-block-hover:not(.native-hover){ text-decoration:none; color:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent))); } .hover-area:hover .link:not(.native-hover) svg path, .link:hover svg path{ fill:var(--color-link-icon-hover); } .hover-area:hover .link:not(.native-hover):not(.link-hover-span):hover:before, .link:not(.link-hover-span):hover:before, .hover-area:hover .link.link-hover-span:not(.native-hover):hover span:before, .link.link-hover-span:hover span:before{ text-decoration: none; width: 100%; } .link.link-hover-span--underline:hover span:before{ width: 0%; } } .link.active, .link.link-active{ color:var(--color-link-text-hover); } .link.active svg path, .link.link-active svg path{ fill:var(--color-link-icon-hover); } .link.link-hover-span.active span:before, .link.link-hover-span.link-active span:before{ text-decoration: none; width: 100%; } .link__base-to_accent-color{ --color-link-text: var(--color-link-button-block-inverse, var(--color-base-section, var(--color-base))); --color-link-icon: var(--color-link-button-icon-block-inverse, var(--color-base-section, var(--color-base))); --color-link-text-hover: var(--color-link-button-block-inverse-hover, var(--color-accent-section, var(--color-accent))); --color-link-icon-hover: var(--color-link-button-icon-block-inverse-hover, var(--color-accent-section, var(--color-accent))); } .btn{ --background: var(--color-button-block, var(--color-accent-section, var(--color-button_main, var(--color-accent)))); --color:var(--color-button-text_main, var(--color-base)); --border:var(--color-button-border_main); --background-hover: var(--color-button-hover-block, var(--color-base-section, var(--color-button-hover_main, var(--color-base)))); --background-program-hover: var(--background-hover); --color-hover:var(--color-button-text-hover_main, var(--color-accent)); --border-hover:var(--color-button-border-hover_main); --border-width:var(--border-button-width_main); --border-width-hover:var(--border-button-width-hover_main); --icon:var(--color-button-icon_main, var(--color-base)); --icon-hover:var(--color-button-icon-hover_main, var(--color-accent)); --button-opacity-hover:var(--color-button-opacity-hover_main); --shadow-button-current:var(--shadow-button_main); --shadow-button-current-hover:var(--shadow-button-hover_main); --self-border-width:var(--border-button-width-value_main); --height:var(--button-height); --height-mobile:var(--button-height-mob); position: relative; display: inline-flex; vertical-align:top; justify-content: center; align-items:center; text-align:center; font-family: var(--font-button-family, var(--font-body-family)); font-style: var(--font-button-style, var(--font-body-style)); font-weight: var(--font-button-weight); font-size: calc(14px * var(--font-button_scale, var(--font-body-scale))); line-height: var(--font-body2-line-height); height:var(--height); background: transparent; color: var(--color); border-radius: var(--radius-button); padding: 0 25px 0; width: auto; text-decoration: none; cursor: pointer; box-shadow:var(--shadow-button-current); transition: color var(--duration-medium) var(--animation-bezier), box-shadow var(--duration-medium) var(--animation-bezier); } .btn-font{ font-family: var(--font-button-family, var(--font-body-family)); font-style: var(--font-button-style, var(--font-body-style)); font-weight: var(--font-button-weight); font-size: calc(14px * var(--font-button_scale, var(--font-body-scale))); line-height: var(--font-body2-line-height); } .btn>*{ position:relative; z-index:1; } .btn-small-width{ width:max-content; } .btn__texts{ pointer-events:none; position:relative; display:flex; justify-content:center; align-items:center; gap:10px; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); height:calc(var(--height) - var(--self-border-width) * 2); z-index:1; } .btn--large{ --height:var(--button-height-big); font-size: var(--font-body-size); line-height: var(--font-body-line-height); } .btn--border{ --background: var(--color-button-block_secondary, var(--color-button_secondary, var(--color-body-background))); --color:var(--color-button-text_secondary, var(--color-accent-section, var(--color-accent))); --border:var(--color-button-border_secondary-block, var(--color-accent-section, var(--color-button-border_secondary, var(--color-accent)))); --background-hover: var(--color-button-hover-block_secondary, var(--color-accent-section, var(--color-button-hover_secondary, var(--color-accent)))); --color-hover:var(--color-button-text-hover_secondary, var(--color-base)); --border-hover:var(--color-button-border-hover_secondary); --border-width:var(--border-button-width_secondary); --border-width-hover:var(--border-button-width-hover_secondary); --icon:var(--color-button-icon_secondary, var(--color-accent-section, var(--color-accent))); --icon-hover:var(--color-button-icon-hover_secondary, var(--color-base)); --button-opacity-hover:var(--color-button-opacity-hover_secondary); --shadow-button-current:var(--shadow-button_secondary); --shadow-button-current-hover:var(--shadow-button-hover_secondary); --self-border-width:var(--border-button-width-value_secondary); } .btn--tabs{ --background: var(--color-button-block_tabs, var(--color-button_tabs, var(--color-secondary-background))); --color:var(--color-button-text-block_tabs, var(--color-base-section, var(--color-button-text_tabs, var(--color-base)))); --border:var(--color-button-border_tabs, var(--color-secondary-background)); --background-hover: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base)))); --color-hover:var(--color-button-text-hover_tabs); --border-hover:var(--color-button-border-hover_tabs); --border-width:var(--border-button-width_tabs); --border-width-hover:var(--border-button-width-hover_tabs); --icon:var(--color-button_tabs-icon, var(--color)); --icon-hover:var(--color-button-hover_tabs-icon, var(--color-hover)); --button-opacity-hover:var(--color-button-opacity-hover_tabs); --shadow-button-current:unset; --shadow-button-current-hover:unset; --self-border-width:var(--border-button-width-value_tabs); } .btn--tabs.active{ --background: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base)))); --color:var(--color-button-text-hover_tabs); --icon:var(--color-button-hover_tabs-icon, var(--color-button-text-hover_tabs)); --border:var(--color-button-border-hover_tabs); --border-width:var(--border-button-width-hover_tabs); --button-opacity:var(--color-button-opacity-hover_tabs); cursor: default; pointer-events: none; } .btn--checkout{ --radius-button:var(--radius-button-product-page); --background: var(--color-button-block, var(--color-accent-section, var(--color-button_checkout, var(--color-accent)))); --color:var(--color-button-text_checkout, var(--color-accent)); --border:var(--color-button-border_checkout, var(--color-accent)); --background-hover: var(--color-button-hover-block, var(--color-base-section, var(--color-button-hover_checkout, var(--color-base)))); --color-hover:var(--color-button-text-hover_checkout, var(--color-base)); --border-hover:var(--color-button-border-hover_checkout); --border-width:var(--border-button-width_checkout); --border-width-hover:var(--border-button-width-hover_checkout); --icon:var(--color-button-icon_checkout, var(--color-accent)); --icon-hover:var(--color-button-icon-hover_checkout, var(--color-base)); --button-opacity-hover:var(--color-button-opacity-hover_checkout); --shadow-button-current:var(--shadow-button_checkout); --shadow-button-current-hover:var(--shadow-button-hover_checkout); --self-border-width:var(--border-button-width-value_checkout); --height:var(--button-height-big); } .btn--addtocart-page{ --radius-button:var(--radius-button-product-page); --background: var(--color-button-block_addtocart, var(--color-accent-section, var(--color-button_addtocart, var(--color-accent)))); --color:var(--color-button-text_addtocart, var(--color-accent)); --border:var(--color-button-border_addtocart, var(--color-accent)); --background-hover: var(--color-button-hover-block_addtocart, var(--color-base-section, var(--color-button-hover_addtocart, var(--color-base)))); --color-hover:var(--color-button-text-hover_addtocart, var(--color-base)); --border-hover:var(--color-button-border-hover_addtocart); --border-width:var(--border-button-width_addtocart); --border-width-hover:var(--border-button-width-hover_addtocart); --icon:var(--color-button-icon_addtocart, var(--color-accent)); --icon-hover:var(--color-button-icon-hover_addtocart, var(--color-base)); --button-opacity-hover:var(--color-button-opacity-hover_addtocart); --shadow-button-current:var(--shadow-button_addtocart); --shadow-button-current-hover:var(--shadow-button-hover_addtocart); --self-border-width:var(--border-button-width-value_addtocart); } .btn span>svg{ max-width:20px; max-height:20px; } .btn svg path{ fill: var(--icon); transition: fill var(--duration-medium) var(--animation-bezier); } .btn:hover{ text-decoration: none; } .btn__top-text, .btn__bottom-text{ display:flex; justify-content:center; align-items:center; gap:8px; } .btn__top-text>svg, .btn__bottom-text>svg{ flex:0 0 auto; } .btn__no-shadow{ box-shadow:unset; } .btn:before, .btn:after{ content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: var(--radius-button); background: var(--background-hover); z-index:0; opacity:0; transition: all var(--duration-medium) var(--animation-bezier); border: var(--border-width) solid var(--border); } .btn:after{ border: var(--border-width-hover) solid var(--border-hover); } .btn:before{ background: var(--background); opacity:1; transition: none; } .secondary-btn__container{ display: flex; flex-wrap:wrap; gap:15px; } @media (min-width:1025px){ .hover-area:hover .btn:not(.native-hover), .btn:hover{ color: var(--color-hover); box-shadow:var(--shadow-button-current-hover); } .hover-area:hover .btn:not(.native-hover) svg path, .btn:hover svg path{ fill: var(--icon-hover); } .hover-area:hover .btn:not(.native-hover):before, .btn:hover:before{ opacity:0; transition: all var(--duration-medium) 100ms var(--animation-bezier); } .hover-area:hover .btn:not(.native-hover):after, .btn:hover:after{ opacity:1; } .btn__transition-text .btn__top-text.is-visible { position: relative; top: 0; padding-bottom: 1px; } .btn__transition-text .btn__bottom-text.is-hidden { position: absolute; top: 100%; right: 0; left: 0; padding-bottom: 1px; color: var(--color-hover); } svg~.btn__bottom-text.is-hidden{ left: 30px; } .btn__transition-text .btn__bottom-text, .btn__transition-text .btn__top-text { transition: top 0.4s, transform 0.4s; } .hover-area:hover .btn__transition-text:not(.native-hover) .btn__bottom-text.is-hidden, .btn__transition-text:hover .btn__bottom-text.is-hidden { top: 50%; transform: translate(0, -50%); } .hover-area:hover .btn__transition-text:not(.native-hover) .btn__top-text.is-visible, .btn__transition-text:hover .btn__top-text.is-visible { top: -20em; } } @media (min-width:577px){ .btn-wide{ width:100%; max-width:var(--button-width-wide); } .btn-wide2{ min-width:var(--button-width-wide); max-width:100%; } } @media (max-width:1024px){ .btn__bottom-text.is-hidden { display:none; } .w-t-full{ width:100%; max-width:100%; } } @media (max-width:576px){ .btn{ --height:var(--height-mobile); } .btn--large,.btn--checkout{ --height:var(--button-height-big-mob); } .btn-wide-mob, .btn-wide, .btn-wide2{ width:100%; } } .btn[aria-disabled=true]{ cursor: not-allowed; opacity:.3; } .link[aria-disabled=true]{ cursor: not-allowed; opacity: .5; pointer-events: none; } .separate-line{ height:1px; background:var(--color-lines); width:100%; } .animation-underline{ --color-hover:var(--color-animation-underline,var(--color-accent-section, var(--color-accent))); display: inline-flex; position: relative; text-decoration: none; } .animation-underline:before{ content: ""; position: absolute; width: 0; height: var(--animation-underline-thin); left: 0; top: 100%; background: var(--color-hover); transition: width var(--duration-medium) var(--animation-bezier); pointer-events:none; } .animation-underline--active:before{ width: 100%; } @media (min-width: 1025px){ .animation-underline:hover{ text-decoration:none; } .hover-area:hover .animation-underline:not(.native-hover):before, .animation-underline:hover:before{ text-decoration: none; width: 100%; } .hover-area:hover .animation-underline:not(.native-hover):not(.default-state):hover:before{ text-decoration: none; width: 0; } .button-transition-up>*, a.transition-up>*{ position:relative; transition: all 0.20s ease-out; } .button-transition-up:hover>*, a.transition-up:hover>*{ transform: translateY(-5px); } } .badges__container{ display:flex; gap:3px; flex-wrap:wrap; pointer-events:none; font-weight: var(--font-body-weight-bold); } .badges__container--gap5{ gap:5px; } .badges__container .badges-item__menu{ margin-left:0; } .badges-item__small{ border-radius:var(--radius-badge); font-size:10px; padding: 2px 5px 3px; } .badges-item__medium{ border-radius:var(--radius-badge); font-size:12px; padding: 7px 12px; width:max-content; } .badges-item__menu{ display:inline-flex; margin-left:5px; vertical-align: middle; background:var(--auto-accent-color-bg); color:var(--auto-accent-color-text); } .overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden { overflow: hidden; } @media (min-width: 1025px){ .hide-desktop{ display:none !important; } } @media (max-width: 1024px){ .hide-mobile-xl-st{ display:none !important; } } terms-and-condition-checkbox{ display:block; } terms-and-condition-checkbox:not(.checked)+*, terms-and-condition-checkbox:not(.checked)~.cart__dynamic-checkout-buttons { pointer-events: none; opacity: .3; } .accent-color{ color:var(--color-accent-section, var(--color-accent)); } .accent-to-base-color{ color:var(--color-base); } .w-full {width:100%;} .h-full {height:100%;} @media (min-width:577px){ .h-full-desktop-tablet {height:100%;} } @media (max-width:576px){ .w-full-mobile { width:100%; } } .shopify-challenge__message{ margin:0 0 30px; } .shopify-challenge__container .shopify-challenge__button{ margin:40px auto 0; } .shopify-challenge__container{ margin:200px auto; } .section__richtext__editor>:first-child{ margin-top:0; } .section__richtext__editor h1, .section__richtext__editor h2, .section__richtext__editor h3, .section__richtext__editor h4, .section__richtext__editor h5, .section__richtext__editor h6{ margin: 0; } .section__richtext__editor ul, .section__richtext__editor ol{ margin:0; padding:0 0 0 40px; max-width: max-content; } .text-center .section__richtext__editor ul, .text-center .section__richtext__editor ol, .text-center.section__richtext__editor ul, .text-center.section__richtext__editor ol{ margin-left: auto; margin-right: auto; } .section__richtext__editor>*:not(:first-child){ margin-top:16px; } .section__richtext__editor.section__richtext__editor--mt10>*:not(:first-child){ margin-top:10px; } .loading-overlay__spinner{ position:absolute; width: 20px; height: 20px; display: inline-flex; z-index: 1; } .loading > *:not(.loading-overlay__spinner){ opacity: 0; visibility: hidden; } .spinner { animation: rotator 1.4s linear infinite; } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } .path { stroke-dasharray: 280; stroke-dashoffset: 0; transform-origin: center; stroke: var(--color-loader, var(--color-base-section, var(--color-base))); animation: dash 1.4s ease-in-out infinite; } .btn .path { stroke: var(--icon-hover); } @media screen and (forced-colors: active) { .path{ stroke: CanvasText; } } @keyframes dash { 0% { stroke-dashoffset: 280; } 50% { stroke-dashoffset: 75; transform: rotate(135deg); } 100% { stroke-dashoffset: 280; transform: rotate(450deg); } } @media (hover:hover){ .modal-close-animation svg{ transition: transform var(--duration-medium) cubic-bezier(0.5, -0.33, 0.26, 1.19); } .modal-close-animation:hover svg{ transform: rotate(90deg); } } .themeloader_container { position:fixed; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:100; opacity:0; visibility:hidden; transition: opacity var(--duration-medium) var(--animation-bezier), visibility var(--duration-medium) var(--animation-bezier); } .themeloader_container--absolute { position:absolute; } @media (min-width:1025px){ .themeloader_container { left:var(--left, 0); right:var(--right, 0); } } .themeloader_container.loading_now { opacity:1; visibility:visible; } .themeloader_container__content{ transform: scale(.7); } .themeloader { -webkit-animation: rotate 1.2s linear infinite normal; animation: rotate 1.2s linear infinite normal; position: relative; transform-origin: 50% 50%; transform: scale(0.7); } .themeloader__ball { height: 1.75rem; left: -0.875rem; position: absolute; top: -0.875rem; transform-origin: 50% 50%; width: 1.75rem; } .themeloader__ball:nth-of-type(2) { transform: rotate(120deg); } .themeloader__ball:nth-of-type(3) { transform: rotate(240deg); } .themeloader__ball::after { -webkit-animation: moveAndScale 0.6s ease-in-out infinite alternate; animation: moveAndScale 0.6s ease-in-out infinite alternate; background-color: var(--color-accent); border-radius: 50%; content: ""; display: inline-block; height: 100%; width: 100%; transform-origin: 50% 50%; } @-webkit-keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @-webkit-keyframes moveAndScale { 0%, 15% { transform: translateY(0) scale(0.65); } 100% { transform: translateY(-150%) scale(1); } } @keyframes moveAndScale { 0%, 15% { transform: translateY(0) scale(0.65); } 100% { transform: translateY(-150%) scale(1); } } .big-svg-icon svg{ width:40px; height:40px; } .big-svg-icon__opacity-20{ opacity:0.2; } .color-error{ color:var(--color-error); } *:focus { outline: 0; } *:focus-visible:not(textarea):not(input):not(select){ outline: 4px solid #0909FF; outline-offset: 3px; } .breadcrumb-background{ background:var(--color-breadcrumb-background, transparent); } @media (min-width:1025px){ .breadcrumb .breadcrumb-background-boxed{ padding-left:20px; padding-right:20px; border-radius:var(--radius); background:var(--color-breadcrumb-background, transparent); } } @media (max-width:1024px){ .breadcrumb:has(.breadcrumb-background-boxed){ background:var(--color-breadcrumb-background, transparent); } } .breadcrumb__container{ display: flex; flex-wrap: wrap; align-items: center; row-gap: 5px; column-gap: 21px; padding:18px 0; color:var(--color-breadcrumb-text, var(--color-base)); } .breadcrumb li { position:relative; display: inline-flex; flex-wrap: wrap; align-items: center; } .breadcrumb li:not(:last-child):before { content:""; display:flex; position:absolute; right:-11px; width:1px; height:15px; background:var(--color-breadcrumb-line, var(--color-lines)); } .breadcrumb__container__home svg path{ fill: var(--color-breadcrumb-text, var(--color-base)); } .breadcrumb__container__home:hover svg path{ fill: var(--color-breadcrumb-text-hover, var(--color-accent)); } .breadcrumb .link{ --color-link-text: var(--color-breadcrumb-text, var(--color-base)); --color-link-text-hover: var(--color-breadcrumb-text-hover, var(--color-accent)); } body:has(header .page-wide) .breadcrumb .page-width{ width: 100%; max-width: unset; margin-left: unset; margin-right: unset; } @media (min-width:1025px){ .content-for-layout .shopify-policy__container{ max-width: calc(var(--page-width) * 2 / 3); width: calc(var(--page-width) * 2 / 3); } } .index-top-spacing-none+[class*="top-spacing"]{ margin-top:0; } .footer__content{ margin-top: auto; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-border-radius: var(--radius-button); --shopify-accelerated-checkout-button-block-size:50px; } .cart-notification__content shopify-accelerated-checkout, .cart-notification__content shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size:40px; } @media(min-width:1025px){ .text-center-desktop{text-align: center !important;} .justify-content-center-desktop{justify-content: center !important;} } @media(min-width:577px){ .product-card-name-size{ font-size:var(--product-name-size); } } @media(max-width:576px){ .product-card-name-size{ font-size:var(--product-name-size-mobile); } } .product-card__heading>*>*, .font-inherit>*{ margin-top: 0; font-family:inherit; font-weight:inherit; font-size:inherit; line-height: inherit; color: inherit; } .shopify-section-clip{ overflow-x:clip; } /* ===== Cart Drawer Header ===== */ .cart-drawer .drawer__heading{ font-size: 22px; font-weight: 700; padding: 4px 0 8px; } /* ===== Free delivery bar -> dark strip look ===== */ .cart-drawer #cart-page-free-delivery{ background: #2b3a2c; color: #fff; padding: 10px 16px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 13px; margin: 10px 0 16px; } .cart-drawer #cart-page-free-delivery *{ color: #fff; } /* ===== Product Row ===== */ .cart-drawer .drawer__cart-item{ background: #fff; border: 1px solid #ece5d6; border-radius: 16px; padding: 14px; margin-bottom: 14px; } .cart-drawer .drawer__cart-item__content{ display: flex; gap: 14px; align-items: flex-start; } .cart-drawer .drawer__cart-item__media{ flex: 0 0 88px; width: 88px; } .cart-drawer .drawer__cart-item__media .image-hover-box{ border-radius: 12px; overflow: hidden; } .cart-drawer .drawer__cart-item__details{ flex: 1; min-width: 0; } .cart-drawer .cart-item__heading{ font-size: 15px; font-weight: 600; color: #222; line-height: 1.3; } /* Original price line (small, above discounted) */ /* Original price (strikethrough) - target correctly, not the title */ .cart-drawer .cart-item__heading{ text-decoration: none !important; color: #222 !important; } .cart-drawer .cart-item__heading + .mt10{ font-size: 13px; color: #8a8a8a; text-decoration: line-through; } /* Quantity buttons base */ .cart-drawer .quantity__button{ color: #333; background: transparent; border: 0; width: 22px; height: 22px; display: flex !important; align-items: center; justify-content: center; cursor: pointer; position: relative; } /* Free shipping bar - lighter green like reference */ .cart-drawer #cart-page-free-delivery{ background: #1f3320; } /* ===== Quantity Stepper (pill) ===== */ .cart-drawer .cart-item__quantity{ display: flex; align-items: center; gap: 10px; margin-top: 10px; } .cart-drawer quantity-input.field.quantity{ display: flex; align-items: center; background: #f3efe4; border-radius: 999px; padding: 4px 10px; gap: 10px; } .cart-drawer .quantity__input{ border: 0; background: transparent; width: 24px; text-align: center; font-weight: 600; } .cart-drawer .cart-item__remove-button{ color: #b23b3b; } /* ===== Price (right side, blue like reference) ===== */ .cart-drawer .cart-item__totals{ text-align: right; margin-top: 0; } .cart-drawer .price__main, .cart-drawer .price__sale{ color: #2c4bd6; font-weight: 700; font-size: 17px; } .cart-drawer .price__regular{ text-decoration: line-through; color: #999; font-size: 13px; } /* Discount badge (e.g. "50% OFF") - approximate on discounts list */ .cart-drawer .discounts__discount{ background: #2f7d4f; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .cart-drawer .discounts__discount svg{ display:none; } /* ===== Complementary / "You may also like" ===== */ .cart-drawer .drawer__footer-content__left__heading{ color: #b25b1e; font-weight: 700; border-bottom: 2px solid #b25b1e; display: inline-block; padding-bottom: 4px; font-size: 15px; } .cart-drawer .drawer__footer-content__left{ background: #fff; border-radius: 16px; padding: 16px; margin: 16px 0; } /* ===== Cart note / discount accordions ===== */ .cart-drawer .chm-toggle summary{ font-weight: 600; } /* ===== Subtotal / totals ===== */ .cart-drawer .totals{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } .cart-drawer .totals__subtotal-value{ font-weight: 700; font-size: 18px; } /* ===== Checkout / Buy Now button ===== */ .cart-drawer .btn--checkout{ background: #2b3a2c !important; border-color: #2b3a2c !important; color: #fff !important; border-radius: 12px; font-weight: 700; padding: 14px; } .cart-drawer .btn--checkout:hover{ background: #1e2a1f !important; } /* ===== Continue shopping / view cart links ===== */ .cart-drawer .drawer__inner__links{ display: flex; justify-content: space-between; font-size: 13px; } /* ===== Overall drawer shell ===== */ .cart-drawer.popup-modal__content{ background: #f8f5ef; } .cart-drawer .drawer__footer-content{ padding: 0 4px; } .cart-drawer .cart-item__save-badge{ position: absolute; top: 4px; left: 4px; z-index: 2; background: #2f7d4f; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; } /* ===== Plus icon: use theme svg, sized consistently ===== */ .cart-drawer .quantity__button[name="plus"] svg{ width: 12px !important; height: 12px !important; display: block !important; } .cart-drawer .quantity__button[name="plus"] svg path, .cart-drawer .quantity__button[name="plus"] svg rect, .cart-drawer .quantity__button[name="plus"] svg line{ fill: #333 !important; stroke: #333 !important; } /* ===== Minus icon: hide the heavy theme svg, draw a clean thin dash instead ===== */ .cart-drawer .quantity__button[name="minus"] svg{ display: none !important; } .cart-drawer .quantity__button[name="minus"]::after{ content: ""; display: block; width: 10px; height: 2px; background: #333; border-radius: 1px; } /* ===== CART QUANTITY - / + FIX ===== */ .cart-drawer .quantity__button { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; color: #222 !important; font-size: 0 !important; cursor: pointer; } /* Hide existing theme icons */ .cart-drawer .quantity__button svg { display: none !important; } /* MINUS */ .cart-drawer .quantity__button[name="minus"]::after { content: "−" !important; display: block !important; background: none !important; width: auto !important; height: auto !important; color: #222 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; } /* PLUS */ .cart-drawer .quantity__button[name="plus"]::after { content: "+" !important; display: block !important; color: #222 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; } /* Quantity number */ .cart-drawer .quantity__input { width: 30px !important; text-align: center !important; font-size: 16px !important; font-weight: 600 !important; padding: 0 !important; } /* Quantity pill */ .cart-drawer quantity-input.field.quantity { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 4px 10px !important; } /* ===== FINAL CART QUANTITY ICON FIX ===== */ /* Hide ALL existing content/icons generated inside buttons */ .cart-drawer .quantity__button[name="minus"] > *, .cart-drawer .quantity__button[name="plus"] > * { display: none !important; } /* Remove theme pseudo icons */ .cart-drawer .quantity__button[name="minus"]::before, .cart-drawer .quantity__button[name="plus"]::before { content: none !important; display: none !important; } /* Button base */ .cart-drawer .quantity__button { width: 28px !important; height: 28px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; font-size: 0 !important; } /* Minus */ .cart-drawer .quantity__button[name="minus"]::after { content: "−" !important; display: block !important; width: auto !important; height: auto !important; background: transparent !important; color: #222 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; } /* Plus */ .cart-drawer .quantity__button[name="plus"]::after { content: "+" !important; display: block !important; width: auto !important; height: auto !important; background: transparent !important; color: #222 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; } /* ===== CLEAN CART QUANTITY FIX ===== */ .cart-drawer .quantity__button { width: 28px !important; height: 28px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; color: #222 !important; } /* Remove our previously generated symbols */ .cart-drawer .quantity__button::before, .cart-drawer .quantity__button::after { content: none !important; } /* Show Shopify/theme SVG */ .cart-drawer .quantity__button svg { display: block !important; width: 12px !important; height: 12px !important; opacity: 1 !important; visibility: visible !important; } /* Make SVG lines visible */ .cart-drawer .quantity__button svg path, .cart-drawer .quantity__button svg line, .cart-drawer .quantity__button svg rect { stroke: #222 !important; fill: #222 !important; opacity: 1 !important; } /* Quantity number */ .cart-drawer .quantity__input { width: 30px !important; text-align: center !important; padding: 0 !important; font-size: 16px !important; font-weight: 600 !important; } /* ===== FORCE SINGLE PLUS ICON ===== */ .cart-drawer .quantity__button[name="plus"] { position: relative !important; width: 28px !important; height: 28px !important; font-size: 0 !important; color: transparent !important; } /* Hide EVERYTHING inside plus button */ .cart-drawer .quantity__button[name="plus"] > * { display: none !important; } /* Remove old pseudo elements */ .cart-drawer .quantity__button[name="plus"]::before, .cart-drawer .quantity__button[name="plus"]::after { content: "" !important; display: block !important; position: absolute !important; background: #222 !important; border-radius: 2px !important; } /* horizontal line */ .cart-drawer .quantity__button[name="plus"]::before { width: 12px !important; height: 2px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } /* vertical line */ .cart-drawer .quantity__button[name="plus"]::after { width: 2px !important; height: 12px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } /* ========================================= COMPACT CART ITEM - REFERENCE STYLE ========================================= */ /* Product card */ .cart-drawer .drawer__cart-item { position: relative !important; padding: 12px !important; margin-bottom: 10px !important; border: 1px solid #e2e2e2 !important; border-radius: 12px !important; background: #fff !important; } /* Main row */ .cart-drawer .drawer__cart-item__content { display: flex !important; align-items: flex-start !important; gap: 12px !important; } /* Product image */ .cart-drawer .drawer__cart-item__media { flex: 0 0 76px !important; width: 76px !important; } .cart-drawer .drawer__cart-item__media .image-hover-box { width: 76px !important; height: 76px !important; border-radius: 9px !important; overflow: hidden !important; } /* Details immediately beside image */ .cart-drawer .drawer__cart-item__details { flex: 1 !important; min-width: 0 !important; padding-right: 85px !important; } /* Product title */ .cart-drawer .cart-item__heading { margin: 0 !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 500 !important; color: #172033 !important; } /* Original/old price */ .cart-drawer .cart-item__heading + .mt10 { margin-top: 5px !important; font-size: 12px !important; line-height: 1.2 !important; } /* Variant / description */ .cart-drawer .product-option, .cart-drawer .cart-item__details dl, .cart-drawer .cart-item__details p { font-size: 12px !important; line-height: 1.25 !important; margin-top: 4px !important; } /* ========================= QUANTITY ========================= */ .cart-drawer .cart-item__quantity { margin-top: 8px !important; gap: 8px !important; } .cart-drawer quantity-input.field.quantity { width: 90px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; gap: 0 !important; background: #fff !important; border: 1px solid #d9d9d9 !important; border-radius: 5px !important; overflow: hidden !important; } /* minus + plus */ .cart-drawer .quantity__button { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; } /* Number */ .cart-drawer .quantity__input { flex: 0 0 32px !important; width: 32px !important; height: 26px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; text-align: center !important; font-size: 14px !important; font-weight: 600 !important; color: #222 !important; } /* No blue focus box */ .cart-drawer .quantity__input:focus, .cart-drawer .quantity__input:focus-visible { outline: none !important; box-shadow: none !important; } /* ========================= PRICE ========================= */ .cart-drawer .cart-item__totals { position: absolute !important; top: 12px !important; right: 12px !important; margin: 0 !important; text-align: right !important; } .cart-drawer .price__main, .cart-drawer .price__sale { font-size: 14px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #172033 !important; } /* Remove button compact */ .cart-drawer .cart-item__remove-button { width: 28px !important; height: 28px !important; padding: 0 !important; border: 1px solid #ddd !important; border-radius: 5px !important; background: #fff !important; } /* Remove number input browser arrows */ .cart-drawer .quantity__input::-webkit-inner-spin-button, .cart-drawer .quantity__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .cart-drawer .quantity__input { -moz-appearance: textfield; } /* ========================================== DAIVIK CART DRAWER PREMIUM UI ========================================== */ /* MAIN CART ITEM CARD */ .cart-drawer .drawer__cart-item { background: #ffffff !important; border: 1px solid #e3e3e3 !important; border-radius: 14px !important; padding: 14px !important; margin-bottom: 14px !important; } /* PRODUCT ROW */ /* IMAGE */ .cart-drawer .drawer__cart-item__media { width: 82px !important; flex: 0 0 82px !important; } .cart-drawer .image-hover-box { border-radius: 10px !important; overflow: hidden !important; } /* DETAILS */ .cart-drawer .drawer__cart-item__details { flex: 1 !important; min-width: 0 !important; } /* VENDOR */ .cart-drawer .product-card-small__meta { font-size: 12px !important; color: #111 !important; margin-bottom: 3px !important; } /* PRODUCT TITLE */ .cart-drawer .cart-item__heading { font-size: 15px !important; line-height: 1.25 !important; font-weight: 500 !important; color: #111827 !important; } /* OLD PRICE */ .cart-drawer .drawer__cart-item__details .mt10 { font-size: 12px !important; color: #999 !important; } /* VARIANT */ .cart-drawer .product-option { font-size: 12px !important; color: #555 !important; } /* PRICE RIGHT TOP */ .cart-drawer .cart-item__totals { position:absolute !important; right:14px !important; top:14px !important; } .cart-drawer .price__main, .cart-drawer .price__sale { font-size:15px !important; font-weight:600 !important; color:#111827 !important; } /* ========================================== QUANTITY BOX ========================================== */ .cart-drawer .cart-item__quantity { display:flex !important; align-items:center !important; gap:8px !important; margin-top:12px !important; } .cart-drawer quantity-input.field.quantity { display:flex !important; align-items:center !important; width:112px !important; height:32px !important; border:1px solid #d9d9d9 !important; border-radius:6px !important; background:#fff !important; overflow:hidden !important; } /* BUTTONS */ .cart-drawer .quantity__button { width:32px !important; height:32px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; background:#fff !important; border:0 !important; } .cart-drawer .quantity__button svg { width:12px !important; height:12px !important; } /* NUMBER */ .cart-drawer .quantity__input { width:45px !important; height:30px !important; padding:0 !important; text-align:center !important; border:0 !important; background:#fff !important; font-size:14px !important; font-weight:600 !important; } /* REMOVE BLUE BORDER */ .cart-drawer .quantity__input:focus { outline:none !important; box-shadow:none !important; } /* ========================================== REMOVE BUTTON ========================================== */ .cart-drawer .cart-item__remove-button { width:32px !important; height:32px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1px solid #ddd !important; border-radius:6px !important; background:white !important; } .cart-drawer .cart-item__remove-button svg { width:14px !important; height:14px !important; } /* ========================================== ACCORDION ========================================== */ .cart-drawer .drawer__footer-footer { padding-top:20px !important; } .cart-drawer .cart-drawer__toggle { border-top:1px solid #ddd !important; margin-top:0 !important; } .cart-drawer .chm-toggle__button { height:55px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; } .cart-drawer .chm-toggle__button h6 { font-size:16px !important; font-weight:500 !important; } /* PLUS ICON */ .cart-drawer .plusminus { width:14px !important; height:14px !important; } /* ========================================== SUBTOTAL ========================================== */ .cart-drawer .cart__footer__information { margin-top:35px !important; } .cart-drawer .totals { display:flex !important; justify-content:space-between !important; align-items:center !important; } .cart-drawer .totals__subtotal { font-size:24px !important; font-weight:500 !important; } .cart-drawer .totals__subtotal-value { font-size:20px !important; font-weight:600 !important; } /* TAX TEXT */ .cart-drawer .tax-note { font-size:13px !important; color:#555 !important; } /* ========================================== TERMS CHECKBOX ========================================== */ .cart-drawer terms-and-condition-checkbox { margin-top:25px !important; } .cart-drawer .checkbox-input { display:flex !important; align-items:center !important; font-size:14px !important; } /* ========================================== CHECKOUT BUTTON ========================================== */ .cart-drawer #CartDrawer-Checkout { height:52px !important; border-radius:8px !important; background:#44563b !important; color:white !important; font-size:17px !important; font-weight:600 !important; border:0 !important; } /* CHECK ICON */ .cart-drawer #CartDrawer-Checkout svg { width:16px !important; height:16px !important; } /* MOBILE WIDTH FIX */ @media(max-width:576px){ .cart-drawer .drawer__cart-item__media{ width:75px !important; flex-basis:75px !important; } .cart-drawer .cart-item__heading{ font-size:14px !important; } .cart-drawer .totals__subtotal{ font-size:22px !important; } } /* ================================ CART ITEM FINAL LAYOUT ================================ */ .cart-drawer .drawer__cart-item { position: relative !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 14px !important; padding: 14px !important; margin-bottom: 14px !important; } /* Image size */ .cart-drawer .drawer__cart-item__media { width: 80px !important; flex: 0 0 80px !important; } /* Content alignment */ .cart-drawer .drawer__cart-item__content { gap: 12px !important; } /* Product details */ .cart-drawer .drawer__cart-item__details { padding-right: 90px !important; } /* Vendor */ .cart-drawer .product-card-small__meta { font-size: 12px !important; } /* Title */ .cart-drawer .cart-item__heading { font-size: 15px !important; line-height: 1.3 !important; color:#111 !important; } /* Price right top */ .cart-drawer .cart-item__totals { position:absolute !important; top:14px !important; right:14px !important; } .cart-drawer .price__main, .cart-drawer .price__sale { font-size:15px !important; font-weight:600 !important; } /* Quantity row */ .cart-drawer .cart-item__quantity { display:flex !important; align-items:center !important; margin-top:10px !important; } /* Quantity box */ .cart-drawer quantity-input.field.quantity { width:110px !important; height:34px !important; border:1px solid #ddd !important; border-radius:6px !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* Number */ .cart-drawer .quantity__input { width:40px !important; height:32px !important; text-align:center !important; font-size:14px !important; font-weight:600 !important; border:0 !important; } /* Buttons */ .cart-drawer .quantity__button { width:32px !important; height:32px !important; } /* Remove button */ .cart-drawer .cart-item__remove-button { margin-left:8px !important; width:34px !important; height:34px !important; border:1px solid #ddd !important; border-radius:6px !important; } /* // OFFER BTN */ /* ============================== PREMIUM DYNAMIC PRICE BOX ================================ */ .custom-price-offer-box { display:flex; align-items:center; gap:14px; background:#ffffff; border:1px solid #e8dcc5; border-radius:20px; padding:14px 20px; margin:0 !important; width:100%; box-sizing:border-box; } /* Current Selling Price */ .custom-current-price { font-size:42px; line-height:1; font-weight:800; color:#252525; letter-spacing:-1px; white-space:nowrap; } /* Compare At Price */ .custom-old-price { font-size:21px; font-weight:600; color:#777; text-decoration:line-through; white-space:nowrap; } /* Exclusive Offer Button */ .custom-exclusive-offer { background:#f9df91; color:#5b4200; border:1px solid #e5b94f; padding:10px 20px; border-radius:12px; font-size:16px; font-weight:700; white-space:nowrap; } /* Discount Badge */ .custom-discount { background:#ef3e3e; color:#ffffff; padding:11px 22px; border-radius:12px; font-size:18px; font-weight:800; white-space:nowrap; box-shadow:0 5px 12px rgba(239,62,62,.25); } /* Hover Effects */ .custom-exclusive-offer, .custom-discount { transition:all .3s ease; } .custom-exclusive-offer:hover { transform:translateY(-2px); box-shadow:0 5px 12px rgba(0,0,0,.12); } .custom-discount:hover { transform:scale(1.05); } /* ============================== TABLET ================================ */ @media(max-width:1024px){ .custom-price-offer-box{ gap:10px; padding:12px 15px; } .custom-current-price{ font-size:36px; } .custom-old-price{ font-size:18px; } .custom-exclusive-offer{ padding:8px 14px; font-size:14px; } .custom-discount{ padding:9px 16px; font-size:15px; } } /* ============================== MOBILE ================================ */ @media(max-width:600px){ .custom-price-offer-box{ flex-wrap:wrap; gap:8px; padding:12px; margin:0 !important; border-radius:16px; } .custom-current-price{ font-size:32px; } .custom-old-price{ font-size:16px; } .custom-exclusive-offer{ font-size:13px; padding:7px 12px; } .custom-discount{ font-size:14px; padding:8px 14px; } } /* // STATIC BANIFT */ .collection-benefits { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; align-items: center; } .benefit-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fffdf7; border: 1px solid #e6d7b8; border-radius: 30px; font-size: 14px; font-weight: 600; color: #333333; line-height: 1; transition: all 0.3s ease; cursor: default; } .benefit-pill:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-color: #cdb27a; } .dot { width: 7px; height: 7px; background: #7c9850; border-radius: 50%; flex-shrink: 0; } /* Mobile Responsive */ @media(max-width: 768px){ .collection-benefits { gap: 8px; margin: 12px 0; } .benefit-pill { padding: 7px 12px; font-size: 13px; } .dot { width: 6px; height: 6px; } } .collection-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px !important; padding: 0 !important; } .benefit-pill { padding: 6px 14px; font-size: 13px; line-height: 1; } /* // FAKE PEOPLE COUNTER */ /* ============================== PREMIUM LIVE VIEWER COUNTER ================================ */ .fake-people-counter{ display:flex; align-items:center; gap:10px; margin:5px 0 !important; padding:0 !important; } /* Counter Badge */ .counter-box{ display:flex; align-items:center; gap:8px; background:#ffffff; border:1px solid #e8dcc5; padding:7px 14px; border-radius:30px; font-size:14px; font-weight:700; color:#222; box-shadow:0 3px 10px rgba(0,0,0,0.06); transition:all .3s ease; } /* Green Live Dot */ .counter-box:before{ content:""; width:7px; height:7px; background:#39a852; border-radius:50%; animation:pulse 1.8s infinite; flex-shrink:0; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(57,168,82,.5); } 70%{ box-shadow:0 0 0 7px rgba(57,168,82,0); } 100%{ box-shadow:0 0 0 0 rgba(57,168,82,0); } } /* Eye Icon */ .eye-icon{ font-size:15px; color:#777; } /* Text */ .counter-text{ color:#555; font-size:14px; font-weight:600; line-height:1.2; } /* Hover */ .fake-people-counter:hover .counter-box{ transform:translateY(-1px); box-shadow:0 6px 15px rgba(0,0,0,.10); } /* Remove extra spacing after block */ .fake-people-counter + *{ margin-top:5px !important; } /* ============================== MOBILE ================================ */ @media(max-width:600px){ .fake-people-counter{ margin:4px 0 !important; } .counter-box{ padding:6px 12px; font-size:13px; } .counter-text{ font-size:13px; } .counter-box:before{ width:6px; height:6px; } } /* ========================== PREMIUM PRODUCT RATING BADGE ========================== */ .product-rating-badge{ display:flex; align-items:center; gap:14px; margin:0 !important; padding:0 !important; } /* Left Benefit Badge */ .benefit-badge{ background:#ffffff; border:1px solid #e5cfa5; padding:8px 16px; border-radius:12px; color:#333; font-size:15px; font-weight:700; line-height:1; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin:0 !important; } /* Rating Section */ .review-rating{ display:flex; align-items:center; gap:5px; margin:0 !important; padding:0 !important; font-size:16px; color:#333; font-weight:600; } /* Star */ .star-icon{ font-size:17px; color:#222; } /* Rating Number */ .rating-number{ font-weight:700; } /* Review Count */ .review-count{ color:#555; font-weight:500; } /* Hover Effect */ .benefit-badge:hover{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(0,0,0,.08); transition:.3s ease; } /* Remove extra Shopify block spacing */ .product-rating-badge + *{ margin-top:5px !important; } /* ========================== MOBILE ========================== */ @media(max-width:600px){ .product-rating-badge{ gap:8px; flex-wrap:wrap; } .benefit-badge{ font-size:13px; padding:7px 12px; } .review-rating{ font-size:14px; } } /* ============================== CUSTOM SHOPIFY BUY BUTTONS ============================== */ /* Main Add To Cart Button */ .product-form__submit { height:60px !important; border-radius:14px !important; background:#438d4c !important; color:#ffffff !important; font-size:17px !important; font-weight:700 !important; border:none !important; } /* Hover */ .product-form__submit:hover { background:#36783f !important; } /* Buy Now Dynamic Checkout Button */ .shopify-payment-button__button { height:60px !important; border-radius:14px !important; background:#222222 !important; color:white !important; font-size:17px !important; font-weight:700 !important; } /* Disabled Buy Now */ .shopify-payment-button__button--unbranded[disabled] { background:#b5b8bd !important; color:white !important; } /* Payment button spacing */ .shopify-payment-button { margin-top:10px !important; } /* Quantity box */ .product-form__quantity { margin-bottom:8px !important; } /* Terms condition spacing */ .product-form__terms { margin-top:8px !important; margin-bottom:8px !important; } /* ========================== PREMIUM BUY BOX ========================== */ .premium-buy-box{ border:1px solid #e5d8c4; border-radius:22px; overflow:hidden; background:#ffffff; } /* Prepaid Offer Bar */ .prepaid-offer-bar{ height:58px; display:flex; justify-content:center; align-items:center; gap:12px; background: linear-gradient( 110deg, #141518, #3b3d42, #151619 ); font-size:20px; font-weight:700; } .prepaid-offer-bar span{ color:#f4c85a; } .prepaid-offer-bar strong{ color:#ffffff; } /* Buttons Wrapper */ .premium-action-buttons{ display:flex; gap:12px; padding:14px; } /* Add To Cart */ .premium-add-cart{ width:50%; height:70px; border:none; border-radius:14px; background:#d4772c; color:#ffffff; font-size:20px; font-weight:700; cursor:pointer; } /* Buy Now */ .premium-buy-now{ position:relative; width:50%; height:70px; border:none; border-radius:14px; background:#242426; color:#ffffff; font-size:20px; font-weight:700; cursor:pointer; } /* Shiprocket Text */ .premium-buy-now small{ position:absolute; right:15px; bottom:5px; font-size:9px; color:#aaaaaa; } /* Hover Effect */ .premium-add-cart:hover{ transform:translateY(-2px); } .premium-buy-now:hover{ transform:translateY(-2px); } /* Mobile */ @media(max-width:600px){ .premium-action-buttons{ flex-direction:column; } .premium-add-cart, .premium-buy-now{ width:100%; } .prepaid-offer-bar{ font-size:16px; } } .premium-buy-box{ border:1px solid #e5d8c4; border-radius:22px; overflow:hidden; background:#fff; } .prepaid-offer-bar{ height:58px; display:flex; justify-content:center; align-items:center; gap:12px; background:linear-gradient( 110deg, #151619, #3b3d42, #151619 ); font-size:20px; font-weight:700; } .prepaid-offer-bar strong{ color:white; } .premium-action-buttons form{ width:50%; } .premium-add-cart, .premium-buy-now{ width:100%; height:70px; border:none; border-radius:14px; font-size:20px; font-weight:700; cursor:pointer; } .premium-add-cart{ background:#d4772c; color:white; } .premium-buy-now{ background:#242426; color:white; position:relative; } .premium-buy-now small{ position:absolute; bottom:5px; right:15px; font-size:9px; color:#aaa; } @media(max-width:600px){ .premium-action-buttons{ flex-direction:column; } .premium-action-buttons form{ width:100%; } } .premium-quantity{ height:74px; border:1px solid #e5d8c4; border-radius:12px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; margin-bottom:14px; background:#fff; } .qty-minus, .qty-plus{ background:none; border:none; font-size:28px; cursor:pointer; } .qty-input{ border:none; text-align:center; font-size:18px; font-weight:600; width:60px; outline:none; } .delivery-checker{ background:#faf8ed; border:1px solid #b8c29b; border-radius:22px; padding:22px; } .delivery-header{ display:flex; gap:15px; align-items:center; } .refresh-icon{ font-size:45px; color:#607542; } .delivery-header h3{ margin:0; font-size:28px; font-weight:700; } .delivery-header p{ margin:3px 0; font-size:18px; font-weight:600; color:#666; } .pincode-box{ display:flex; margin-top:20px; } .pincode-box input{ flex:1; height:70px; border:1px solid #aaa; border-radius:15px 0 0 15px; padding:0 22px; font-size:20px; } .pincode-box button{ width:210px; border:none; background:#354321; color:#fff; font-size:20px; border-radius:0 15px 15px 0; } .delivery-benefits{ display:flex; justify-content:space-between; margin-top:30px; } .delivery-benefits div{ display:flex; align-items:center; gap:15px; } .delivery-benefits span{ font-size:35px; } .delivery-benefits strong{ font-size:22px; } .delivery-benefits p{ margin:0; font-size:17px; font-weight:600; color:#666; } .available-result{ margin-top:15px; font-size:18px; } @media(max-width:600px){ .delivery-header h3{ font-size:22px; } .pincode-box button{ width:120px; } .delivery-benefits{ flex-direction:column; gap:20px; } } /* Delivery Result Design */ #deliveryResult{ margin-top:18px; } .available-result{ background:#f2f0ff; border:1px solid #7b4cff; border-radius:12px; padding:14px 16px; color:#222; font-size:16px; } .available-result p{ margin:5px 0; line-height:1.4; } .available-result p:first-child{ font-weight:600; } .available-result strong{ font-size:18px; font-weight:700; } .available-result small{ display:block; margin-top:8px; font-size:14px; color:#555; } /* Error Message */ #deliveryResult p[style*="color:red"]{ background:#fff1f1; border:1px solid #ffb5b5; padding:12px; border-radius:10px; } /* ============================== PREMIUM PRODUCT DESCRIPTION ================================ */ .product-description-custom{ font-size:18px; line-height:1.8; color:#444; } /* Top Tagline */ .product-description-custom .description-highlight{ font-size:20px; font-style:italic; font-weight:600; color:#8b5a2b; margin-bottom:20px; } /* Main Description */ .product-description-custom .description-content{ color:#444; } .product-description-custom .description-content p{ margin-bottom:22px; } /* Free Gift Highlight Box */ .free-gift-box{ margin:28px 0; padding:16px 22px; border:1px solid #ead5b8; border-radius:12px; background:#fffaf2; text-align:center; font-size:17px; font-weight:700; color:#5a351d; } /* Divider */ .product-description-custom hr{ border:0; border-top:1px solid #ead5b8; margin:25px 0; } /* Bottom Rashi Line */ .rashi-line{ text-align:center; font-size:20px; font-weight:500; color:#a36a2c; } /* Mobile */ @media(max-width:768px){ .product-description-custom{ font-size:16px; line-height:1.7; } .product-description-custom .description-highlight{ font-size:18px; } .free-gift-box{ font-size:15px; padding:14px; } .rashi-line{ font-size:17px; } } .description-content-box{ max-height:0; overflow:hidden; opacity:0; transition: max-height .5s ease, opacity .3s ease; } /* ============================== PREMIUM PRODUCT DESCRIPTION ================================ */ /* Dropdown Box */ .description-dropdown{ border:1px solid #eadcc7; border-radius:18px; background:#fffdf8; overflow:hidden; } /* Header */ .description-toggle{ width:100%; padding:18px 25px; background:none; border:none; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:22px; font-weight:700; color:#222; } /* Icon */ .toggle-icon{ font-size:28px; color:#a36a2c; transition:.3s ease; } .description-toggle.active .toggle-icon{ transform:rotate(180deg); } /* Smooth Open Close */ .description-content-box{ max-height:0; overflow:hidden; opacity:0; padding:0 25px; transition: max-height .5s ease, opacity .35s ease, padding .35s ease; } .description-content-box.active{ max-height:2000px; opacity:1; padding:0 25px 25px; } /* Highlight */ .description-highlight{ font-size:20px; font-style:italic; font-weight:600; color:#8b5a2b; margin-bottom:20px; } /* Description */ .description-content p{ margin-bottom:22px; font-size:17px; line-height:1.8; color:#444; } /* Gift Box */ /* Divider */ /* Rashi Line */ @media(max-width:768px){ .product-description-custom{ font-size:16px; } .description-toggle{ font-size:19px; padding:15px 18px; } .description-content-box.active{ padding:0 18px 20px; } .description-highlight{ font-size:18px; } .description-content p{ font-size:16px; } .free-gift-box{ d font-size:15px; } .rashi-line{ font-size:17px; } } /* ============================== PRODUCT BUY BUTTON DESIGN ============================== */ /* Main Layout */ .product-form__buttons__content{ gap:12px; align-items:center; } /* Quantity Box */ quantity-input.field.quantity{ height:56px; border-radius:12px; background:#f5f5f5; border:1px solid #e5e5e5; } .quantity__button{ width:45px; color:#333; font-size:20px; } .quantity__input{ font-size:18px; font-weight:600; color:#222; } /* Add To Cart Button */ .product-form__submit{ height:56px; border-radius:12px; background:#3f8f45; color:white; font-size:18px; font-weight:700; transition:0.3s ease; } .product-form__submit:hover{ transform:translateY(-2px); opacity:0.9; } /* Wishlist + Compare Icons */ .product-form__buttons__content button{ border-radius:50%; } /* Buy Now Button */ .shopify-payment-button__button{ height:58px!important; border-radius:12px!important; background:#222!important; color:#fff!important; font-size:18px!important; font-weight:700!important; } .shopify-payment-button__button:hover{ opacity:0.9; } /* Terms Checkbox */ .terms-and-condition-checkbox{ margin-top:20px; } .terms-and-condition-checkbox label{ font-size:14px; color:#555; } @media(max-width:600px){ .delivery-checker{ padding:15px; } /* Header Fix */ .delivery-header{ display:flex; gap:10px; align-items:center; } .refresh-icon{ font-size:32px; flex-shrink:0; } .delivery-header h3{ font-size:18px; line-height:1.2; margin:0; } .delivery-header p{ font-size:13px; line-height:1.3; } /* Pincode Fix */ .pincode-box{ width:100%; display:flex; flex-direction:column; gap:10px; } .pincode-box input{ width:100%; height:50px; box-sizing:border-box; border-radius:12px; font-size:15px; } .pincode-box button{ width:100%; height:50px; border-radius:12px; font-size:16px; } /* Benefits Fix */ .delivery-benefits{ display:flex; flex-direction:column; gap:18px; } .benefit-item{ display:flex; align-items:center; gap:12px; } .benefit-item span{ font-size:28px; width:35px; } .benefit-item strong{ font-size:17px; display:block; line-height:1.2; } .benefit-item p{ font-size:13px; margin:3px 0 0; line-height:1.2; } } @media(max-width:600px){ .delivery-benefits{ display:flex; flex-direction:row; justify-content:space-between; gap:8px; } .benefit-item{ display:flex; align-items:center; gap:6px; width:50%; } .benefit-item span{ font-size:22px; flex-shrink:0; } .benefit-item strong{ font-size:13px; line-height:1.2; display:block; } .benefit-item p{ font-size:11px; line-height:1.2; margin:0; white-space:normal; } /* Heading */ .delivery-header h3{ font-size:17px; } .delivery-header p{ font-size:12px; } /* Input */ .pincode-box input{ font-size:14px; } .pincode-box button{ font-size:14px; width:100px; } } @media(max-width:600px){ .delivery-checker{ padding:clamp(14px,4vw,18px); } /* Header */ .delivery-header{ gap:10px; } .refresh-icon{ font-size:clamp(26px,8vw,34px); } .delivery-header h3{ font-size:clamp(16px,4.5vw,19px); line-height:1.2; } .delivery-header p{ font-size:clamp(11px,3.2vw,14px); } /* Pincode */ .pincode-box{ display:flex; height:auto; } .pincode-box input{ height:clamp(48px,14vw,62px); font-size:clamp(14px,4vw,16px); min-width:0; } .pincode-box button{ width:clamp(90px,28vw,110px); height:clamp(48px,14vw,62px); font-size:clamp(14px,4vw,18px); } /* Benefits */ .delivery-benefits{ display:flex; gap:clamp(8px,3vw,18px); } .benefit-item{ flex:1; min-width:0; gap:6px; } .benefit-item span{ font-size:clamp(20px,7vw,28px); } .benefit-item strong{ font-size:clamp(12px,3.8vw,15px); line-height:1.2; } .benefit-item p{ font-size:clamp(10px,3vw,12px); line-height:1.2; white-space:normal; } } /* Buy buttons wrapper */ .buy-buttons { display:flex; flex-direction:column; } /* Quantity top */ .buy-buttons .quantity { order:1; width:100%; margin-bottom:15px; } /* Terms second */ .buy-buttons .terms, .buy-buttons .product-form__terms { order:2; } /* Buttons row */ .buy-buttons .product-form__submit, .buy-buttons .shopify-payment-button { order:3; } /* Add to cart + Buy now same row */ .buy-buttons .shopify-payment-button, .buy-buttons .product-form__submit { width:50%; } /* Button container */ .buy-buttons { gap:15px; } /* Desktop + Mobile */ .buy-buttons .product-form__buttons { display:flex; gap:12px; } /* Product Buy Button Layout Rearrangement */ /* Main product button wrapper */ .product-form__buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; } /* Quantity selector - top */ .product-form__buttons__content { display: flex; flex-direction: column; width: 100%; } /* Quantity order */ .quantity { order: 1; width: fit-content; } /* Terms checkbox order */ terms-and-condition-checkbox { order: 2; width: 100%; margin-top: 10px; } /* Bottom buttons row */ .product-form__buttons__content__media { order: 3; display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; flex-wrap: nowrap; } /* Add to cart button */ .product-form__submit { flex: 1; min-width: 0; width: auto; } /* Wishlist button */ .btn--wishlist-productpage, .product-form__buttons__content__media__item { flex: 0 0 auto; } /* Buy now / Dynamic checkout button */ .shopify-payment-button { order: 3; flex: 1; min-width: 0; } /* Keep payment button and add cart in same row */ .product-form__buttons__content__media > *, .product-form__buttons__content__media .shopify-payment-button { width: auto; } /* Prevent mobile overflow */ .product-form, .product-form__buttons, .product-form__buttons__content, .product-form__buttons__content__media { max-width: 100%; overflow: hidden; } /* Mobile same layout - no stacking */ @media screen and (max-width: 768px) { .product-form__buttons__content__media { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; } .product-form__submit, .shopify-payment-button { flex: 1 1 0; min-width: 0; } .btn--wishlist-productpage { flex: 0 0 auto; } } /* Main wrapper */ .product-form__buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; } /* Quantity top */ .product-form__buttons__content { display: flex !important; flex-direction: column !important; } /* Quantity */ .quantity { order: 1 !important; } /* Terms checkbox */ terms-and-condition-checkbox { order: 2 !important; } /* Add to cart + wishlist row */ .product-form__buttons__content__media { order: 3 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; } /* Add cart button */ .product-form__submit { flex: 1 !important; } /* Wishlist */ .btn--wishlist-productpage { flex: 0 0 48px !important; } /* Buy now button */ .shopify-payment-button { width: auto !important; flex: 1 !important; } /* Mobile same row */ @media(max-width:768px){ .product-form__buttons__content__media, .product-form__buttons { width:100% !important; } .product-form__buttons__content__media { flex-wrap: nowrap !important; } .product-form__submit, .shopify-payment-button { min-width:0 !important; } } /* Main product buttons layout */ .product-form__buttons { display: flex !important; flex-direction: column !important; gap: 15px !important; } /* Quantity top */ /* Quantity */ .quantity { order: 1 !important; align-self: flex-start; } /* Terms checkbox */ /* Add to cart + wishlist area */ .product-form__buttons__content__media { order: 4 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; } /* Add to cart width */ .product-form__submit { flex: 1 !important; width: auto !important; } /* Wishlist */ /* Buy now button wrapper */ .shopify-payment-button { order: 3 !important; display: flex !important; flex: 1 !important; } /* Payment button actual button */ .shopify-payment-button__button { width: 100% !important; } /* Keep mobile same */ @media(max-width:768px){ .product-form__buttons__content__media { flex-wrap: nowrap !important; } .product-form__submit, .shopify-payment-button { min-width: 0 !important; } } /* PRODUCT ACTION FINAL ORDER */ .product-form__buttons { display:flex !important; flex-direction:column !important; } /* quantity */ .quantity { order:1 !important; } /* checkbox */ .terms-and-condition, terms-and-condition-checkbox { order:2 !important; margin-top:20px !important; } /* buttons row */ .product-form__buttons__content__media { order:3 !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; width:100% !important; } /* Add cart */ .product-form__submit { flex:1 !important; width:auto !important; } /* wishlist */ .btn--wishlist-productpage { width:48px !important; flex:0 0 48px !important; } /* buy now */ .shopify-payment-button { order:3 !important; flex:1 !important; width:auto !important; } .shopify-payment-button__button { min-height:60px !important; width:100% !important; } .custom-buy-wrapper{ width:220px; display:inline-block; vertical-align:middle; } .product-form__buttons{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } terms-and-condition-checkbox{ width:100%; order:3; } /* Move payment button in same row */ .product-form__buttons { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; flex-wrap: nowrap; } /* Buy now button */ .shopify-payment-button { order: 1; flex: 1; width: auto !important; } /* Add to cart button */ .product-form__submit { order: 2; flex: 1; } /* Wishlist */ .product__wishlist, .wishlist-button, button.wishlist { order: 3; } /* Terms below buttons */ terms-and-condition-checkbox { order: 4; width:100%; } /* Mobile same row */ @media(max-width:576px){ .product-form__buttons { flex-wrap: nowrap !important; gap:8px; } .shopify-payment-button, .product-form__submit { min-width:0; } } /* Main wrapper back to column */ /* Quantity first */ /* Terms second */ terms-and-condition-checkbox { order: 2 !important; width:100% !important; } /* Add cart + wishlist row */ .product-form__buttons__content__media { order:3 !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; } /* Add to cart */ .product-form__submit { flex:1 !important; order:2 !important; } /* Wishlist */ .btn--wishlist-productpage { order:3 !important; flex:0 0 48px !important; } /* Buy now */ .shopify-payment-button { order:1 !important; flex:1 !important; } /* Keep mobile same */ @media(max-width:768px){ .product-form__buttons__content__media{ flex-wrap:nowrap !important; } .product-form__submit, .shopify-payment-button{ min-width:0 !important; } } /* ================================ FINAL CLEAN BUTTON LAYOUT Quantity -> Terms -> [Buy Now][Add to Cart][Wishlist] ================================ */ .product-form__buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; } /* Flatten wrapper divs so their children become direct flex items */ .product-form__buttons__content, .product-form__buttons__content__media { display: contents !important; } /* 1. Quantity — own line */ .quantity { order: 1 !important; flex: 0 0 100% !important; } /* 2. Terms checkbox — own line */ terms-and-condition-checkbox { order: 2 !important; flex: 0 0 100% !important; margin: 0 !important; } /* 3. Buttons row — Buy Now, Add to Cart, Wishlist together */ .custom-buy-wrapper { order: 3 !important; width: auto !important; flex: 1 1 0 !important; } .custom-buy-wrapper .shopify-payment-button, .custom-buy-wrapper .shopify-payment-button__button { width: 100% !important; } .product-form__submit { order: 4 !important; flex: 1 1 0 !important; width: auto !important; } .btn--wishlist-productpage { order: 5 !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; } /* Mobile: keep the same row, just tighten gap */ @media (max-width: 576px) { .product-form__buttons { gap: 8px !important; } } /* Buy Now and Add to Cart — equal width */ .custom-buy-wrapper, .product-form__submit { flex: 1 1 0 !important; width: 0 !important; /* forces equal split regardless of content length */ min-width: 0 !important; } .product-form__submit { padding-left: 10px !important; padding-right: 10px !important; } /* ================================ FIX: WISHLIST TOOLTIP WRAPPER KO FLATTEN KARO ================================ */ .product-form__buttons .global__tooltip--hover { display: contents !important; } /* Wrapper hatne ke baad order/size dobara apply karo */ .btn--wishlist-productpage { order: 5 !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; align-self: center !important; } /* Buy Now aur Add to Cart ka equal split confirm karo */ .custom-buy-wrapper, .product-form__submit { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; } .custom-buy-wrapper { order: 3 !important; } .product-form__submit { order: 4 !important; } /* ================================ FINAL FIX — GAP REMOVE + EQUAL WIDTH ================================ */ .product-form__buttons { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 10px !important; } .product-form__buttons__content, .product-form__buttons__content__media, .product-form__buttons .global__tooltip--hover { display: contents !important; } .custom-buy-wrapper { order: 3 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } .product-form__submit { order: 4 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; height: 60px !important; } .custom-buy-wrapper .shopify-payment-button, .custom-buy-wrapper .shopify-payment-button__button { width: 100% !important; height: 60px !important; } .btn--wishlist-productpage { order: 5 !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; align-self: center !important; margin: 0 !important; } /* ================================ BUY NOW BUTTON — FORCE FULL WIDTH ================================ */ .custom-buy-wrapper { width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important; } .custom-buy-wrapper .shopify-payment-button { width: 100% !important; display: block !important; } .custom-buy-wrapper shopify-payment-button, .custom-buy-wrapper > * { width: 100% !important; display: block !important; } .custom-buy-wrapper iframe { width: 100% !important; min-width: 100% !important; } /* ================================ FINAL: WIDTH + ALIGNMENT FIX TOGETHER ================================ */ .product-form__buttons { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 10px !important; } .custom-buy-wrapper { order: 3 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; display: flex !important; align-items: stretch !important; } .custom-buy-wrapper .shopify-payment-button { width: 100% !important; margin: 0 !important; display: flex !important; align-items: stretch !important; } .custom-buy-wrapper .shopify-payment-button__button, .custom-buy-wrapper iframe { width: 100% !important; min-width: 100% !important; height: 60px !important; } .product-form__submit { order: 4 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; height: 60px !important; align-self: stretch !important; } /* ================================ PRODUCT BUY BUTTONS — FINAL CLEAN ================================ */ .custom-buy-wrapper { order: 3 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; display: flex !important; align-self: stretch !important; } .custom-buy-wrapper .shopify-payment-button, .custom-buy-wrapper .shopify-payment-button__button, .custom-buy-wrapper iframe { width: 100% !important; height: 60px !important; min-width: 100% !important; margin: 0 !important; } /* ================================ BUY NOW (SHADOW DOM) — WIDTH FIX VIA CSS VARIABLE ================================ */ .custom-buy-wrapper { --shopify-accelerated-checkout-button-inline-size: 100%; --shopify-accelerated-checkout-button-block-size: 60px; width: 100% !important; display: block !important; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-inline-size: 100%; width: 100% !important; display: block !important; } /* ================================ PRICE OFFER BOX — RESPONSIVE FIX ================================ */ .custom-price-offer-box { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; padding: 12px 16px !important; } .custom-current-price { white-space: nowrap !important; font-size: 26px !important; } .custom-old-price { white-space: nowrap !important; font-size: 16px !important; } .custom-exclusive-offer, .custom-discount { white-space: nowrap !important; flex-shrink: 0 !important; } @media (max-width: 480px) { .custom-price-offer-box { gap: 6px 10px !important; padding: 10px 12px !important; } .custom-current-price { font-size: 22px !important; } .custom-old-price { font-size: 14px !important; } .custom-exclusive-offer, .custom-discount { font-size: 12px !important; padding: 6px 10px !important; } } .star-icon { color: #FFD700; } /* ================================ PREPAID OFFER STRIP (Black Banner) ================================ */ .prepaid-offer-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; background: linear-gradient(110deg, #141518, #3b3d42, #151619); border-radius: 12px 12px 0 0; padding: 14px 16px; margin-bottom: -1px; text-align: center; } .prepaid-offer-strip__highlight { color: #f4c85a; font-weight: 700; font-size: 15px; } .prepaid-offer-strip__text { color: #ffffff; font-weight: 600; font-size: 15px; } @media (max-width: 480px) { .prepaid-offer-strip { padding: 12px; } .prepaid-offer-strip__highlight, .prepaid-offer-strip__text { font-size: 13px; } } /* ================================ PREPAID OFFER STRIP (Black Banner) — FIXED ================================ */ .prepaid-offer-strip { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; background: linear-gradient(110deg, #141518, #3b3d42, #151619) !important; border-radius: 12px !important; padding: 14px 16px !important; margin: 0 0 10px 0 !important; text-align: center !important; order: -1 !important; } .prepaid-offer-strip__highlight { color: #f4c85a !important; font-weight: 700 !important; font-size: 15px !important; white-space: nowrap !important; } .prepaid-offer-strip__text { color: #ffffff !important; font-weight: 600 !important; font-size: 15px !important; white-space: nowrap !important; } @media (max-width: 480px) { .prepaid-offer-strip { padding: 12px !important; gap: 5px !important; } .prepaid-offer-strip__highlight, .prepaid-offer-strip__text { font-size: 12px !important; } } @media(max-width:600px){ .delivery-checker{ padding:12px; border-radius:14px; } .delivery-header{ gap:8px; } .refresh-icon{ font-size:24px; flex-shrink:0; } .delivery-header h3{ font-size:14px; line-height:1.25; margin:0; } .delivery-header p{ font-size:10px; line-height:1.3; margin-top:2px; } .pincode-box{ height:auto; flex-direction:row; margin-top:14px; } .pincode-box input{ font-size:12px; padding:0 10px; height:40px; } .pincode-box button{ width:70px; font-size:12px; height:40px; } .delivery-benefits{ flex-direction:row; justify-content:space-between; gap:8px; margin-top:16px; } .benefit-item{ flex-direction:column; align-items:flex-start; gap:4px; width:48%; } .benefit-item span{ font-size:18px; } .benefit-item strong{ font-size:12px; line-height:1.2; } .benefit-item p{ font-size:10px; line-height:1.2; margin:0; } #deliveryResult{ margin-top:10px; } .available-result{ font-size:11px; padding:8px 10px; } .available-result strong{ font-size:12px; } .available-result small{ font-size:10px; } } .delivery-benefits{ display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:28px; } .benefit-item{ display:flex; align-items:flex-start; gap:10px; flex:1 1 200px; min-width:0; } .benefit-item span{ font-size:28px; flex-shrink:0; line-height:1; } .benefit-item > div{ min-width:0; } .benefit-item strong{ font-size:18px; display:block; line-height:1.25; } .benefit-item p{ margin:2px 0 0; font-size:13px; font-weight:600; color:#666; line-height:1.3; white-space:normal; } .delivery-benefits{ display:flex; flex-wrap:wrap; gap:14px 24px; margin-top:24px; } .benefit-item{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; } .benefit-item span{ font-size:20px; flex-shrink:0; line-height:1; } .benefit-item > div{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; } .benefit-item strong{ font-size:14px; white-space:nowrap; } .benefit-item p{ margin:0; font-size:12px; font-weight:600; color:#666; white-space:nowrap; } @media(max-width:600px){ .delivery-benefits{ gap:12px 16px; margin-top:18px; } .benefit-item{ flex:1 1 100%; } .benefit-item span{ font-size:18px; } .benefit-item strong{ font-size:13px; } .benefit-item p{ font-size:11px; } } @media(max-width:600px){ .delivery-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } .benefit-item{ display:flex; align-items:flex-start; gap:5px; min-width:0; } .benefit-item span{ font-size:14px; flex-shrink:0; } .benefit-item strong{ font-size:10px; display:block; line-height:1.2; } .benefit-item p{ font-size:8px; line-height:1.2; margin:0; color:#777; } } @media(max-width:600px){ .delivery-benefits{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:14px !important; margin-top:10px !important; } .benefit-item{ flex:1 1 0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:5px !important; min-width:0 !important; } .benefit-item span{ font-size:16px !important; flex-shrink:0 !important; } .benefit-item > div{ display:flex !important; flex-direction:column !important; gap:0 !important; min-width:0 !important; } .benefit-item strong{ font-size:11px !important; line-height:1.2 !important; white-space:normal !important; margin:0 !important; } .benefit-item p{ font-size:9px !important; line-height:1.2 !important; margin:0 !important; white-space:normal !important; color:#777 !important; } } @media(max-width:600px){ .delivery-header{ display:flex !important; align-items:flex-start !important; gap:8px !important; } .refresh-icon{ font-size:22px !important; flex-shrink:0 !important; line-height:1 !important; margin-top:2px !important; } .delivery-header h3{ font-size:14px !important; line-height:1.3 !important; margin:0 !important; } .delivery-header p{ font-size:11px !important; line-height:1.3 !important; margin-top:2px !important; color:#666 !important; } } @media(max-width:600px){ .delivery-header{ display:flex !important; align-items:flex-start !important; gap:10px !important; } .refresh-icon{ font-size:26px !important; flex-shrink:0 !important; line-height:1 !important; margin-top:2px !important; } .delivery-header h3{ font-size:16px !important; line-height:1.3 !important; margin:0 !important; } .delivery-header p{ font-size:12px !important; line-height:1.3 !important; margin-top:3px !important; color:#666 !important; } } /* ================================ RATING BADGE — TOP / BOTTOM SPACE ================================ */ .product-rating-badge { margin-top: 12px !important; margin-bottom: 12px !important; } /* Iske turant baad wale element ka top margin */ .product-rating-badge + * { margin-top: 12px !important; } /* ================================ STICKY BUY BAR (Mobile Only) ================================ */ .sticky-buy-bar { display: none; } @media (max-width: 768px) { .sticky-buy-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -4px 14px rgba(0,0,0,.12); transform: translateY(0); transition: transform .3s ease; } .sticky-buy-bar.is-hidden { transform: translateY(110%); } .sticky-buy-bar__btn { flex: 1 1 0; height: 48px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; } .sticky-buy-bar__btn--cart { background: #438d4c; } .sticky-buy-bar__btn--buy { background: #222222; } body { padding-bottom: 70px; } } .feedback-heading { margin-top: 25px; } /* ================================ EXCLUSIVE OFFERS ================================ */ .exclusive-offers { background: #f6f8f1; border: 1px solid #e8dfc8; border-radius: 18px; padding: 16px; margin: 16px 0; box-sizing: border-box; overflow: hidden; } .offers-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .offer-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #c23b3b; color: #fff; border-radius: 50%; font-size: 20px; font-weight: 700; } .offers-heading h3 { margin: 0; font-size: 20px; font-weight: 800; color: #111; } /* Slider */ .offers-slider { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .offers-slider::-webkit-scrollbar { display: none; } /* Card */ .offer-card { flex: 0 0 280px; scroll-snap-align: start; background: #f8f9fd; border: 1px dashed #d3d7de; border-radius: 16px; padding: 16px; box-sizing: border-box; } .offer-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e6e8ee; } .offer-symbol { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f6eeb8; color: #c23b3b; border-radius: 50%; font-size: 18px; font-weight: 700; } .offer-top h4 { margin: 0; font-size: 18px; font-weight: 700; color: #111; line-height: 1.2; } .offer-top p { margin: 2px 0 0; font-size: 13px; color: #6b7280; line-height: 1.3; } .offer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; } .coupon-code { font-size: 16px; font-weight: 800; color: #c23b3b; letter-spacing: .3px; } .copy-btn { background: #c23b3b; color: #fff; border: 0; border-radius: 999px; padding: 0 22px; height: 38px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .2s ease; } .copy-btn:hover { opacity: .9; } /* ================================ MOBILE ================================ */ @media (max-width: 576px) { .exclusive-offers { padding: 12px; border-radius: 14px; margin: 12px 0; } .offers-heading { gap: 8px; margin-bottom: 10px; } .offer-icon { width: 30px; height: 30px; font-size: 15px; } .offers-heading h3 { font-size: 15px; } .offers-slider { gap: 10px; } .offer-card { flex: 0 0 78%; /* ek card + agle ka thoda hissa dikhega */ max-width: 240px; padding: 10px 12px; border-radius: 12px; } .offer-top { gap: 8px; padding-bottom: 8px; } .offer-symbol { width: 32px; height: 32px; font-size: 14px; } .offer-top h4 { font-size: 14px; } .offer-top p { font-size: 11px; } .offer-bottom { margin-top: 8px; } .coupon-code { font-size: 13px; } .copy-btn { height: 30px; padding: 0 14px; font-size: 12px; } } /* ================================ EXCLUSIVE OFFERS - MOBILE FORCE FIX ================================ */ @media (max-width: 768px) { .exclusive-offers { padding: 10px !important; margin: 10px 0 !important; border-radius: 12px !important; } .exclusive-offers .offers-heading { gap: 8px !important; margin-bottom: 8px !important; } .exclusive-offers .offer-icon { width: 26px !important; height: 26px !important; font-size: 13px !important; } .exclusive-offers .offers-heading h3 { font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important; } .exclusive-offers .offers-slider { display: flex !important; gap: 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; } .exclusive-offers .offer-card { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; padding: 8px 10px !important; border-radius: 10px !important; scroll-snap-align: start; } .exclusive-offers .offer-top { gap: 8px !important; padding-bottom: 6px !important; margin: 0 !important; } .exclusive-offers .offer-symbol { width: 28px !important; height: 28px !important; font-size: 12px !important; } .exclusive-offers .offer-top h4 { font-size: 13px !important; line-height: 1.2 !important; margin: 0 !important; } .exclusive-offers .offer-top p { font-size: 10px !important; line-height: 1.2 !important; margin: 1px 0 0 !important; } .exclusive-offers .offer-bottom { margin-top: 6px !important; gap: 6px !important; } .exclusive-offers .coupon-code { font-size: 11px !important; letter-spacing: 0 !important; } .exclusive-offers .copy-btn { height: 26px !important; padding: 0 12px !important; font-size: 11px !important; min-height: 0 !important; line-height: 1 !important; } } /* ================================ COMMON REVIEW BOX ================================ */ .common-review-box { background: #f6f8f1; border: 1px solid #e8d9a8; border-radius: 18px; padding: 20px; margin: 16px 0; box-sizing: border-box; overflow: hidden; } .common-review-box .review-slider { position: relative; } /* Sirf active card dikhega */ .common-review-box .review-card { display: none; } .common-review-box .review-card.active { display: block; } .common-review-box .review-user { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .common-review-box .review-avatar { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #65714d; color: #fff; border-radius: 50%; font-size: 18px; font-weight: 700; } .common-review-box .review-user h4 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; font-weight: 700; color: #111; line-height: 1.2; } .common-review-box .review-user h4 span { background: #1f2226; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .common-review-box .stars { margin-top: 6px; color: #c08d4a; font-size: 20px; letter-spacing: 2px; line-height: 1; } .common-review-box .review-card p { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.6; color: #555; } .common-review-box .review-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; } .common-review-box .review-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dcdcdc; display: block; cursor: pointer; transition: all .3s ease; } .common-review-box .review-dots i.active { background: #65714d; } /* ================================ TABLET ================================ */ @media (max-width: 1024px) { .common-review-box { padding: 16px; } .common-review-box .review-card p { font-size: 16px; } } /* ================================ MOBILE ================================ */ @media (max-width: 576px) { .common-review-box { padding: 12px !important; margin: 10px 0 !important; border-radius: 12px !important; } .common-review-box .review-user { gap: 10px !important; margin-bottom: 8px !important; } .common-review-box .review-avatar { width: 38px !important; height: 38px !important; font-size: 13px !important; } .common-review-box .review-user h4 { font-size: 14px !important; gap: 6px !important; } .common-review-box .review-user h4 span { font-size: 10px !important; padding: 2px 7px !important; } .common-review-box .stars { font-size: 14px !important; margin-top: 3px !important; letter-spacing: 1px !important; } .common-review-box .review-card p { font-size: 13px !important; line-height: 1.5 !important; } .common-review-box .review-dots { margin-top: 10px !important; gap: 5px !important; } .common-review-box .review-dots i { width: 6px !important; height: 6px !important; } } /* ================================ PREPAID STRIP - WHITE SHINE ================================ */ .prepaid-offer-strip { position: relative !important; overflow: hidden !important; isolation: isolate; } .prepaid-offer-strip > * { position: relative; z-index: 2; } .prepaid-offer-strip::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-150%) skewX(-25deg); animation: prepaid-shine 3s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes prepaid-shine { 0% { transform: translateX(-150%) skewX(-25deg); } 55% { transform: translateX(350%) skewX(-25deg); } 100% { transform: translateX(350%) skewX(-25deg); } } @media (prefers-reduced-motion: reduce) { .prepaid-offer-strip::after { animation: none; display: none; } } /* ================================ PRICE BADGES - SHINE ANIMATION ================================ */ .custom-exclusive-offer, .custom-discount { position: relative !important; overflow: hidden !important; isolation: isolate; } .custom-exclusive-offer::after, .custom-discount::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-150%) skewX(-25deg); animation: badge-shine 3s ease-in-out infinite; pointer-events: none; z-index: -1; /* text ke peeche, background ke upar */ } /* Dono ek saath na chamkein, thoda gap */ .custom-discount::after { animation-delay: .4s; } @keyframes badge-shine { 0% { transform: translateX(-150%) skewX(-25deg); } 55% { transform: translateX(350%) skewX(-25deg); } 100% { transform: translateX(350%) skewX(-25deg); } } @media (prefers-reduced-motion: reduce) { .custom-exclusive-offer::after, .custom-discount::after { animation: none; display: none; } } /* ================================ HIDE WISHLIST HEART - MOBILE ONLY ================================ */ @media (max-width: 768px) { .btn--wishlist-productpage, .product-form__buttons .btn--wishlist-productpage { display: none !important; } } /* ================================ MOBILE - BUY / CART BUTTON TEXT SMALLER ================================ */ @media (max-width: 576px) { .product-form__submit, .product-form__submit span, .custom-buy-wrapper .shopify-payment-button__button, .custom-buy-wrapper .shopify-payment-button__button span { font-size: 14px !important; letter-spacing: 0 !important; } /* Cart bag icon bhi thoda chhota */ .product-form__submit svg { width: 16px !important; height: 16px !important; } /* Button ki height bhi thodi kam (optional) */ .product-form__submit, .custom-buy-wrapper .shopify-payment-button__button { height: 50px !important; min-height: 50px !important; } } /* ================================ STICKY BAR - CUSTOM COLORS ================================ */ @media (max-width: 768px) { .sticky-buy-bar .sticky-buy-bar__btn--buy { background: #0cc751 !important; color: #ffffff !important; } .sticky-buy-bar .sticky-buy-bar__btn--cart { background: #F59E0B !important; color: #ffffff !important; } } /* ================================ PRODUCT FORM BUTTONS - CUSTOM COLORS (Desktop + Mobile) ================================ */ /* Add to Cart */ .product-form__submit, .product-form__submit.btn--addtocart-page { --background: #F59E0B !important; --background-hover: #d98a06 !important; --border: #F59E0B !important; background: #F59E0B !important; color: #ffffff !important; } .product-form__submit:before { background: #F59E0B !important; } .product-form__submit:hover { background: #d98a06 !important; } /* Buy it now (normal + disabled dono state me same color) */ .custom-buy-wrapper .shopify-payment-button__button, .custom-buy-wrapper .shopify-payment-button__button--unbranded, .custom-buy-wrapper .shopify-payment-button__button--unbranded[disabled] { background: #0cc751 !important; color: #ffffff !important; opacity: 1 !important; } .custom-buy-wrapper .shopify-payment-button__button:hover { background: #0aa843 !important; } /* ================================ BUY NOW - COLOR #16A34A ================================ */ /* Product form: Buy it now (normal + disabled) */ .custom-buy-wrapper .shopify-payment-button__button, .custom-buy-wrapper .shopify-payment-button__button--unbranded, .custom-buy-wrapper .shopify-payment-button__button--unbranded[disabled] { background: #16A34A !important; color: #ffffff !important; opacity: 1 !important; } .custom-buy-wrapper .shopify-payment-button__button:hover { background: #15803D !important; } /* Sticky bar: Buy Now (mobile) */ .sticky-buy-bar .sticky-buy-bar__btn--buy { background: #16A34A !important; color: #ffffff !important; } .sticky-buy-bar .sticky-buy-bar__btn--buy:hover { background: #15803D !important; } /* ================================ SWAP: Add to Cart LEFT, Buy Now RIGHT ================================ */ .product-form__submit { order: 3 !important; } .custom-buy-wrapper { order: 4 !important; } .btn--wishlist-productpage { order: 5 !important; } terms-and-condition-checkbox { display: none !important; } terms-and-condition-checkbox + *, terms-and-condition-checkbox ~ .custom-buy-wrapper { opacity: 1 !important; pointer-events: auto !important; } /* Sticky bar: upar ki line/shadow hatao */ @media (max-width: 768px) { .sticky-buy-bar { box-shadow: none !important; border: 0 !important; border-top: 0 !important; outline: 0 !important; } .sticky-buy-bar::before { content: none !important; display: none !important; } } /* ================================ PRODUCT PAGE: BLURB CARDS + TEXT LIST (cream & gold) ================================ */ /* ---------- 1. Blurb cards (Free Shipping / Returns) ---------- */ .product__blurbs__container .section-text-with-icons-type-1 { background: linear-gradient(180deg, #fffdf9 0%, #fdf8ee 100%) !important; border: 1px solid #eadfcb !important; border-radius: 18px !important; padding: 20px !important; box-shadow: 0 6px 20px rgba(139, 90, 43, .07); transition: transform .3s ease, box-shadow .3s ease; } /* Icon: gold, halka cream box ke andar */ .product__blurbs__container .section-text-with-icons-type-1__icon > div { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 !important; background: #fff3dc !important; border: 1px solid #ecd9bb; border-radius: 14px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon svg { width: 26px !important; height: 26px !important; } .product__blurbs__container svg.theme-icon path, .product__blurbs__container svg.theme-icon rect { fill: #b8863b !important; } /* Heading + text */ .product__blurbs__container .section-text-with-icons-type-1 h1, .product__blurbs__container .section-text-with-icons-type-1 h2, .product__blurbs__container .section-text-with-icons-type-1 h3, .product__blurbs__container .section-text-with-icons-type-1 h4, .product__blurbs__container .section-text-with-icons-type-1 h5, .product__blurbs__container .section-text-with-icons-type-1 h6 { color: #222 !important; font-weight: 700; line-height: 1.3; } .product__blurbs__container .section-text-with-icons-type-1 .section__richtext__editor, .product__blurbs__container .section-text-with-icons-type-1 p { color: #6b6b6b; line-height: 1.6; } /* ---------- 2. Text block (delivery list) ---------- */ .product__text__container { background: linear-gradient(180deg, #fffdf9 0%, #fdf8ee 100%); border: 1px solid #eadfcb; border-radius: 18px; padding: 4px 20px; box-shadow: 0 6px 20px rgba(139, 90, 43, .07); } .product__text__container .product__text { padding: 14px 0; border-bottom: 1px solid #efe3cd; } .product__text__container .product__text:last-child { border-bottom: 0; } .product__text__container .product__text svg { flex-shrink: 0; } .product__text__container svg.theme-icon path, .product__text__container svg.theme-icon rect { fill: #b8863b !important; } .product__text__container .product__text__content, .product__text__container .product__text__content p { color: #4a4a4a; font-weight: 500; } /* ---------- Hover (sirf desktop) ---------- */ @media (min-width: 1025px) { .product__blurbs__container .section-text-with-icons-type-1:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(139, 90, 43, .13); } } /* ---------- Mobile ---------- */ @media (max-width: 576px) { .product__blurbs__container .section-text-with-icons-type-1 { border-radius: 14px !important; padding: 12px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon > div { width: 38px; height: 38px; border-radius: 10px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon svg { width: 20px !important; height: 20px !important; } .product__blurbs__container .section-text-with-icons-type-1 h1, .product__blurbs__container .section-text-with-icons-type-1 h2, .product__blurbs__container .section-text-with-icons-type-1 h3, .product__blurbs__container .section-text-with-icons-type-1 h4, .product__blurbs__container .section-text-with-icons-type-1 h5, .product__blurbs__container .section-text-with-icons-type-1 h6 { font-size: 14px !important; } .product__blurbs__container .section-text-with-icons-type-1 .section__richtext__editor, .product__blurbs__container .section-text-with-icons-type-1 p { font-size: 12px !important; line-height: 1.5; } .product__text__container { border-radius: 14px; padding: 2px 14px; } .product__text__container .product__text { padding: 10px 0; } .product__text__container .product__text__content, .product__text__container .product__text__content p { font-size: 13px !important; } } /* ================================ ASK A QUESTION / SHARE BUTTONS (cream & gold) ================================ */ .product__buttons__container .btn, .product__info__button .btn { --background: #fffaf0; --color: #7a4f1d; --border: #e4d0aa; --background-hover: #b8863b; --color-hover: #ffffff; --border-hover: #b8863b; --icon: #b8863b; --icon-hover: #ffffff; --border-width: 1px; --border-width-hover: 1px; --radius-button: 12px; --height: 46px; font-weight: 600; box-shadow: 0 3px 10px rgba(139, 90, 43, .06); } @media (max-width: 576px) { .product__buttons__container .btn, .product__info__button .btn { --height: 40px; font-size: 13px; } } /* ================================ PRODUCT PAGE: TIGHTER SPACING ================================ */ .product__blurbs__container, .product__text__container, .product__buttons__container, .gsc { margin-top: 14px !important; margin-bottom: 0 !important; } /* Blurb ke 2 cards ke beech ka gap */ .product__blurbs__container { gap: 10px !important; } @media (max-width: 576px) { .product__blurbs__container, .product__text__container, .product__buttons__container, .gsc { margin-top: 10px !important; } } /* ================================ BLURB CARDS: TIGHTER INSIDE SPACING ================================ */ .product__blurbs__container .section-text-with-icons-type-1 { padding: 14px 16px !important; } /* Icon box thoda chhota + neeche ka gap kam */ .product__blurbs__container .section-text-with-icons-type-1__icon { margin-bottom: 8px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon > div { width: 42px !important; height: 42px !important; border-radius: 12px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon svg { width: 22px !important; height: 22px !important; } /* Heading aur description ke beech ka gap */ .product__blurbs__container .section-text-with-icons-type-1 h1, .product__blurbs__container .section-text-with-icons-type-1 h2, .product__blurbs__container .section-text-with-icons-type-1 h3, .product__blurbs__container .section-text-with-icons-type-1 h4, .product__blurbs__container .section-text-with-icons-type-1 h5, .product__blurbs__container .section-text-with-icons-type-1 h6 { font-size: 16px !important; margin: 0 !important; } .product__blurbs__container .section-text-with-icons-type-1 .section__richtext__editor { margin-top: 4px !important; font-size: 14px !important; line-height: 1.5 !important; } /* Mobile */ @media (max-width: 576px) { .product__blurbs__container .section-text-with-icons-type-1 { padding: 10px 12px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon { margin-bottom: 6px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon > div { width: 34px !important; height: 34px !important; } .product__blurbs__container .section-text-with-icons-type-1__icon svg { width: 18px !important; height: 18px !important; } .product__blurbs__container .section-text-with-icons-type-1 h1, .product__blurbs__container .section-text-with-icons-type-1 h2, .product__blurbs__container .section-text-with-icons-type-1 h3, .product__blurbs__container .section-text-with-icons-type-1 h4, .product__blurbs__container .section-text-with-icons-type-1 h5, .product__blurbs__container .section-text-with-icons-type-1 h6 { font-size: 13.5px !important; } .product__blurbs__container .section-text-with-icons-type-1 .section__richtext__editor { font-size: 12px !important; margin-top: 3px !important; } } /* Shipping & Returns aur blurb cards ke beech ka gap */ div:has(> .product__blurbs__container), .product__blurbs__container { margin-top: 12px !important; padding-top: 0 !important; } /* Text list aur buttons ke wrapper bhi */ div:has(> .product__text__container), div:has(> .product__buttons__container) { margin-top: 12px !important; } @media (max-width: 576px) { div:has(> .product__blurbs__container), .product__blurbs__container, div:has(> .product__text__container), div:has(> .product__buttons__container) { margin-top: 10px !important; } } /* ===== GAP FIX (override) ===== */ .customer-feedback-slider-section { padding: 25px 20px !important; } .customer-feedback-slider-section .feedback-heading { margin-top: 0 !important; margin-bottom: 20px !important; } .customer-feedback-slider-section .feedback-heading h2 { margin: 0 0 6px !important; font-size: 34px; } .customer-feedback-slider-section .feedback-slider { padding: 4px 4px 8px !important; } .customer-feedback-slider-section .feedback-card { min-height: 240px !important; padding: 20px !important; } .customer-feedback-slider-section .feedback-text { margin: 0 0 14px !important; } .customer-feedback-slider-section .feedback-dots { margin-top: 12px !important; } @media screen and (max-width: 600px) { .customer-feedback-slider-section { padding: 20px 15px !important; } .customer-feedback-slider-section .feedback-heading { margin-bottom: 14px !important; } .customer-feedback-slider-section .feedback-heading h2 { font-size: 26px; } .customer-feedback-slider-section .feedback-card { min-height: 220px !important; padding: 16px !important; } } @media (max-width: 768px) { .sticky-buy-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -4px 14px rgba(0,0,0,.12); border-radius: 20px 20px 0 0; transform: translateY(0); transition: transform .3s ease; } .sticky-buy-bar.is-hidden { transform: translateY(110%); } .sticky-buy-bar__btn { flex: 1 1 0; height: 42px; border: 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; } .sticky-buy-bar__btn--cart { background: #F59E0B; } .sticky-buy-bar__btn--buy { background: #16A34A; } body { padding-bottom: 48px; } } /* ================================ STICKY BUY BAR (Mobile Only) - with cashback + price ================================ */ .sticky-buy-bar { display: none; } @media (max-width: 768px) { .sticky-buy-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: #ffffff; box-shadow: 0 -4px 14px rgba(0,0,0,.12); border-radius: 20px 20px 0 0; overflow: hidden; transform: translateY(0); transition: transform .3s ease; padding-bottom: env(safe-area-inset-bottom, 0px); } .sticky-buy-bar.is-hidden { transform: translateY(110%); } /* Cashback green strip */ .sticky-buy-bar__cashback { background: #1f7a3d; color: #fff; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 10px; } /* Price row */ .sticky-buy-bar__price-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 2px; } .sticky-buy-bar__price-current { font-size: 16px; font-weight: 800; color: #15171c; } .sticky-buy-bar__price-compare { font-size: 13px; color: #9a9a9a; text-decoration: line-through; } .sticky-buy-bar__discount { font-size: 12px; font-weight: 700; color: #1f7a3d; } /* Buttons row */ .sticky-buy-bar__buttons { display: flex; gap: 8px; padding: 6px 10px; } .sticky-buy-bar__btn { flex: 1 1 0; height: 40px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; text-transform: uppercase; } .sticky-buy-bar__btn--cart { background: #F59E0B; } .sticky-buy-bar__btn--buy { background: #16A34A; } body { padding-bottom: 78px; } } /* ================================ STICKY BUY BAR (Mobile Only) - reference style ================================ */ .sticky-buy-bar { display: none; } @media (max-width: 768px) { .sticky-buy-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: #f3f2f2ff; box-shadow: 0 -6px 18px rgba(0,0,0,.14); border-radius: 18px 18px 0 0; overflow: hidden; transform: translateY(0); transition: transform .3s ease; padding-bottom: env(safe-area-inset-bottom, 0px); } .sticky-buy-bar { transform: translateY(0); transition: transform .3s ease; } /* Cashback strip */ .sticky-buy-bar__cashback { background: #1f9d5a; color: #fff; text-align: center; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 10px 10px 0 0; } /* Price row */ .sticky-buy-bar__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 6px 12px 4px; } .sticky-buy-bar__price-current { font-size: 16px; font-weight: 800; color: #15171c; } .sticky-buy-bar__price-compare { font-size: 12px; color: #9a9a9a; text-decoration: line-through; } .sticky-buy-bar__discount { font-size: 12px; font-weight: 800; color: #1f9d5a; } /* Buttons row */ .sticky-buy-bar__buttons { display: flex; gap: 8px; padding: 4px 10px 8px; } .sticky-buy-bar__btn { flex: 1 1 0; height: 40px; border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .2px; color: #fff; cursor: pointer; text-transform: uppercase; } .sticky-buy-bar__btn--cart { background: #F59E0B; } .sticky-buy-bar__btn--buy { background: #16A34A; } body { padding-bottom: 110px; } } /* ================================ STICKY BAR BUTTON - WHITE SHINE (Buy Now only) ================================ */ .sticky-buy-bar__btn--buy { position: relative !important; overflow: hidden !important; isolation: isolate; } .sticky-buy-bar__btn--buy::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-150%) skewX(-25deg); animation: sticky-btn-shine 3s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes sticky-btn-shine { 0% { transform: translateX(-150%) skewX(-25deg); } 55% { transform: translateX(350%) skewX(-25deg); } 100% { transform: translateX(350%) skewX(-25deg); } } @media (prefers-reduced-motion: reduce) { .sticky-buy-bar__btn--buy::after { animation: none; display: none; } } /* Sticky button hidden by default */ .sticky-buy-button, .sticky-atc-button, .product-sticky-button { opacity: 0; visibility: hidden; transform: translateY(100%); pointer-events: none; transition: all 0.3s ease; } /* Show after required scroll */ .sticky-buy-button.show-sticky, .sticky-atc-button.show-sticky, .product-sticky-button.show-sticky { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .sticky-buy-bar { transform: translateY(0); } /* Sticky Button Round Loader */ .sticky-buy-bar__btn { display: flex !important; align-items: center !important; justify-content: center !important; } .sticky-btn-loader { width: 19px; height: 19px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; display: inline-block; animation: stickyLoaderSpin 0.7s linear infinite; } @keyframes stickyLoaderSpin { 100% { transform: rotate(360deg); } } .sticky-buy-bar__btn:disabled { cursor: wait !important; opacity: 0.9 !important; } #stickyBuyBar { transform: translateY(0) !important; visibility: visible !important; pointer-events: auto !important; } .feedback-slide { flex: 0 0 100%; max-width: 100%; } button.sr-headless-checkout, button[name="sr-headless-button"] { background: #16A34A !important; color: #fff !important; border: none !important; border-radius: 10px !important; height: 50px !important; min-height: 50px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .shiprocket-headless { width: 100% !important; } .custom-buy-wrapper { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; } button.sr-headless-checkout, button[name="sr-headless-button"], button.sr-headless-checkout .sr-d-flex, button[name="sr-headless-button"] .sr-d-flex { font-size: 16px !important; font-weight: 700 !important; } /* Desktop: height Add to Cart ke barabar */ @media (min-width: 750px) { button.sr-headless-checkout, button[name="sr-headless-button"] { height: 60px !important; min-height: 60px !important; } button.sr-headless-checkout .sr-d-flex, button[name="sr-headless-button"] .sr-d-flex { font-size: 18px !important; } } /* please select one option */ .select-options-button { display: none !important; } body:has(product-form) .breadcrumb { display: none !important; } @media (max-width: 600px) { .custom-price-offer-box { flex-wrap: nowrap !important; gap: 3px !important; padding: 8px 3px !important; overflow: hidden !important; } .custom-current-price { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; } .custom-old-price { font-size: 11px !important; line-height: 1 !important; flex-shrink: 0 !important; } .custom-exclusive-offer, .custom-discount { font-size: 11px !important; padding: 6px 7px !important; line-height: 1 !important; border-radius: 7px !important; margin: 0 !important; flex-shrink: 0 !important; } }