1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2508],{28158:(t,e,i)=>{"use strict";i.d(e,{Xf:()=>o.Xf,Zp:()=>o.Zp,lH:()=>o.lH,ls:()=>o.ls,n4:()=>o.n4,vu:()=>o.vu});var o=i(99649)},37740:(t,e,i)=>{"use strict";i.d(e,{l:()=>o});let o=t=>({Product:{MemberPricing:` 2 display: flex; 3 flex-wrap: wrap; 4 gap: 5px; 5 align-items: center; 6 margin: 10px 0px; 7 .unlimited-icon { 8 i { 9 color: #009F8E; 10 } 11 } 12 .member-price-content { 13 font-size: 16px; 14 color: #20513B; 15 .pricing-amount { 16 font-weight: ${t.fonts.weightBold}; 17 } 18 } 19 + .price-per-litre, .price-per-litre { 20 color: #20513B; 21 } 22 &.list-view { 23 + .price-per-litre { 24 width: 100%; 25 } 26 } 27 button { 28 &.popup-button { 29 background: none; 30 border: 0; 31 color: #20513B; 32 text-decoration: underline; 33 width: auto; 34 } 35 &:hover { 36 cursor: pointer; 37 } 38 } 39 `,MemberPricingPopup:` 40 .mantine-Modal-header { 41 justify-content: flex-end; 42 background: ${t.colors.primary3}; 43 } 44 .mantine-Modal-body { 45 background: ${t.colors.primary3}; 46 47 ul { 48 padding-left: 0px; 49 list-style: none; 50 li { 51 background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1739_27)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M29.7816%200.976141C29.5948%201.0275%2029.4039%201.15512%2029.283%201.30949C29.2337%201.37246%2024.9561%207.47918%2019.7771%2014.88C13.4934%2023.8594%2010.296%2028.4023%2010.1658%2028.5355C9.8102%2028.8993%209.34425%2029.0777%208.83199%2029.046C8.44364%2029.0219%208.14159%2028.9005%207.79606%2028.6295C7.72495%2028.5738%206.61171%2027.1189%205.18454%2025.2165C3.80966%2023.3838%202.63452%2021.8472%202.55734%2021.7811C2.29103%2021.5532%201.81731%2021.5009%201.49385%2021.6638C1.30585%2021.7585%201.10582%2021.9695%201.01359%2022.1703C0.920441%2022.3734%200.920185%2022.7392%201.01311%2022.9455C1.07577%2023.0846%205.72332%2029.3134%206.06188%2029.712C6.64281%2030.396%207.41705%2030.8481%208.28799%2031.012C8.60067%2031.0708%209.33977%2031.0616%209.65746%2030.9949C10.5473%2030.8081%2011.3257%2030.3351%2011.8695%2029.6509C12.239%2029.1859%2030.9412%202.42542%2030.9962%202.28312C31.1464%201.89374%2031.0074%201.40136%2030.6776%201.15448C30.3904%200.939405%2030.1148%200.884557%2029.7816%200.976141Z%22%20fill%3D%22%23222222%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1739_27%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); 52 background-repeat: no-repeat; 53 background-size: 20px 20px; 54 background-position: left center; 55 padding-left: 30px; 56 margin-bottom: 10px; 57 } 58 } 59 60 .close-button { 61 position: absolute; 62 top: 15px; 63 right: 15px; 64 &:hover { 65 cursor: pointer; 66 } 67 } 68 69 .termsAndCond { 70 text-decoration: underline; 71 color: ${t.colors.black} 72 } 73 74 .inline-container { 75 text-align: center; 76 border-bottom: 2px solid black; 77 margin: 15px 0px; 78 } 79 80 .learn-more-content { 81 margin: 0px 10px; 82 } 83 84 .header-container { 85 display: flex; 86 justify-content: center; 87 margin-bottom: 20px; 88 .unlimited-icon { 89 display: none; 90 ${t.breakpoints.sm} { 91 display: block 92 } 93 i { 94 color: #009F8E; 95 } 96 } 97 98 } 99 100 .pricing-container { 101 display: flex; 102 gap: 20px; 103 .rrp { 104 text-decoration: line-through; 105 } 106 .ssp { 107 color: #009F8E; 108 } 109 } 110 111 .button-container { 112 display: grid; 113 grid-template-columns: 1fr 1fr; 114 &.logged-in { 115 grid-template-columns: 1fr; 116 } 117 align-items: center; 118 gap: 25px; 119 margin-top: 20px; 120 .login-btn { 121 display: inline-block; 122 font-size: 14px; 123 border-radius: 5px;
124 line-height: 26px; 125 padding: 12px 24px; 126 border: 1px solid ${t.colors.black}; 127 color: ${t.colors.black}; 128 width: 100%; 129 text-align: center; 130 &:hover { 131 text-decoration: none; 132 } 133 } 134 .cart-button { 135 button { 136 width: 100%; 137 } 138 } 139 } 140 } 141 142 `,ItemCard:` 143 position: relative; 144 .zoom { 145 position: absolute; 146 top: 16px; 147 left: 16px; 148 z-index: 2; 149 border-radius: 4px; 150 background-color: ${t.colors.white}; 151 width: 44px; 152 height: 44px; 153 padding: 12px; 154 cursor: pointer; 155 transition: all 0.3s ease-in-out; 156 opacity: 0; 157 visibility: hidden; 158 i { 159 transition: color 0.3s ease-in-out; 160 font-size: 20px; 161 } 162 &:hover { 163 background-color: ${t.colors.btnsPrimaryBg}; 164 i { 165 color: ${t.colors.white}; 166 } 167 } 168 } 169 &:hover .zoom { 170 opacity: 1; 171 visibility: visible; 172 } 173 .info-container { 174 gap: 12px; 175 display: grid; 176 margin-bottom: 20px; 177 .product-name { 178 display: -webkit-box; 179 -webkit-line-clamp: 2; 180 -webkit-box-orient: vertical; 181 overflow: hidden; 182 text-overflow: ellipsis; 183 height: 44px; 184 > a { 185 font-size: 16px; 186 line-height: 22.5px; 187 } 188 } 189 } 190 .rating-container { 191 height: 17px; 192 overflow: hidden; 193 } 194 .buyers-price { 195 text-decoration: line-through; 196 } 197 .sale-price { 198 font-weight: ${t.fonts.weightBold}; 199 } 200 .cart-button { 201 button { 202 border-radius: 2px; 203 line-height: 16px; 204 width: 167px; 205 padding: 12px 24px; 206 font-weight: ${t.fonts.weightMediumPlus}; 207 letter-spacing: 0.28px; 208 } 209 } 210 211 font-size: 1rem; 212 width: 100%; 213 214 .product-image-container { 215 position: relative; 216 padding: 25px; 217 margin-bottom: 12px; 218 justify-content: center; 219 text-align: center; 220 221 &.no-background { 222 background: none; 223 } 224 225 background-color: ${t.colors.primary3}; 226 227 .product-image { 228 padding: 20px; 229 position: relative; 230 aspect-ratio: 1 / 1 231 } 232 } 233 .mantine-Modal-body { 234 .zoom-container { 235 position: relative; 236 height: 70vh; 237 } 238 } 239 `,enPrimeur:` 240 display: flex; 241 justify-content: space-between; 242 a { 243 text-decoration: underline; 244 &:hover { 245 text-decoration: none; 246 } 247 } 248 .reserve-text { 249 font-weight: ${t.fonts.weightBold} 250 } 251 border: 1px solid ${t.colors.grey20}; 252 padding: 15px; 253 background: #F9F5EF; 254 margin-bottom: 15px; 255 `,compactOrderForm:` 256 .add-to-cart-section { 257 display: flex; 258 gap: 10px; 259 .quantityFields { 260 border: 1px solid ${t.colors.grey30}; 261 display: flex; 262 align-items: center; 263 padding: 0 10px; 264 .quantity { 265 width: 40px; 266 text-align: center; 267 border: 0; 268 } 269 .input-group-prepend, .input-group-append { 270 button { 271 border: 0; 272 background: transparent; 273 } 274 } 275 } 276 277 } 278 `,presell:` 279 display: flex; 280 justify-content: space-between; 281 .reserve-text { 282 font-weight: ${t.fonts.weightBold} 283 } 284 border: 1px solid ${t.colors.grey20}; 285 padding: 15px; 286 background: #F9F5EF; 287 margin-bottom: 15px; 288 `,orderform:` 289 flex:1; 290 .border-bottom-ccc { 291 border-bottom: 1px solid ${t.colors.grey20}; 292 padding-bottom:6px; 293 &.with-padding{ 294 padding-bottom:18px; 295 margin-bottom: 8px; 296 } 297 &.with-margin-bottom{ 298 padding-bottom:24px; 299 margin-bottom:8px; 300 } 301 } 302 &.bulk-deal-button-container { 303 margin: 15px 0px; 304 .deal { 305 margin: 15px 0px; 306 border-bottom: 1px solid ${t.colors.grey20}; 307 padding-bottom: 10px; 308 } 309 310 .price-title { 311 font-weight: ${t.fonts.weightBold}; 312 margin-bottom: 10px; 313 a { 314 text-decoration: underline; 315 } 316 } 317 .top-price-section { 318 padding-top: 5px; 319 .add-to-cart-section { 320 padding-top: 0; 321 } 322 } 323 } 324 .happy-to-wait-container { 325 background-color: #D7E0EE; 326 padding: 15px; 327 text-align: center; 328 margin-bottom: 15px; 329 width: 100%; 330 @media (min-width: 1025px) { 331 padding: 5px; 332 margin-bottom: 5px; 333 } 334 ${t.breakpoints.lg} { 335 padding: 4px 8px; 336 margin-bottom: 10px; 337 } 338 ${t.breakpoints.xl} { 339 padding: 8px; 340 margin-top: 20px; 341 margin-bottom: 15px; 342 } 343 @media (min-width: 1400px) { 344 margin-top: 0px; 345 padding: 15px; 346 } 347 .date-expected { 348 font-weight: ${t.fonts.weightBold}; 349 margin-bottom: 5px; 350 } 351 } 352 .add-on-container { 353 padding-top: 10px; 354 color: ${t.colors.primary1}; 355 margin: 10px 0px; 356 font-weight: ${t.fonts.weightBold}; 357 } 358 &.out-of-stock { 359 .sold-out-text{ 360 padding: 15px; 361 border: 1px solid ${t.colors.error}; 362 border-radius: 5px; 363 margin-bottom: 20px; 364 display: flex; 365 align-items: flex-start; 366 } 367 .sold-out-text i{ 368 color: ${t.colors.error}; 369 background: ${t.colors.primary7}; 370 padding: 10px; 371 border-radius: 50%; 372 margin-right: 15px; 373 } 374 .sold-out-text span{ 375 font-weight: ${t.fonts.weightBold}; 376 } 377 .sold-out-text p{ 378 margin-bottom: 0; 379 } 380 .clickToViewSimilarWines { 381 cursor: pointer; 382 padding: 15px; 383 border: 1px solid ${t.colors.grey50}; 384 border-radius: 5px; 385 background-color: transparent; 386 width: 100%; 387 text-align: left; 388 } 389 .out-of-stock-message { 390 padding: 12px; 391 border-radius: 4px; 392 margin-bottom: 20px; 393 display: flex; 394 background: ${t.colors.primary7}; 395 gap: 8px; 396 p { 397 margin: 0; 398 } 399 } 400 .view-similar-wines-btn { 401 line-height: 16px; 402 margin-bottom: 20px; 403 ${t.breakpoints.md} { 404 margin-bottom: 0; 405 } 406 } 407 }
408 &.cart-state-compliance { 409 .sold-out-text{ 410 padding: 15px; 411 margin-bottom: 20px; 412 display: flex; 413 align-items: flex-start; 414 background: ${t.colors.primary7}; 415 } 416 .sold-out-text span { 417 font-weight: ${t.fonts.weightBold}; 418 } 419 .sold-out-text p { 420 margin-bottom: 0; 421 } 422 .clickToViewSimilarWines { 423 cursor: pointer; 424 padding: 15px; 425 border: 1px solid ${t.colors.grey50}; 426 text-transform: uppercase; 427 text-align: center; 428 background-color: transparent; 429 width: 100%; 430 text-align: left; 431 } 432 } 433 .vpp-btn { 434 margin-bottom: 15px; 435 } 436 .cart-button { 437 button { 438 display: flex; 439 gap: 10px; 440 align-items: center; 441 justify-content: center; 442 width: 100%; 443 &:hover { 444 cursor: pointer; 445 } 446 &:disabled { 447 cursor: default; 448 } 449 } 450 } 451 .vpp-price { 452 color: ${t.colors.primary1}; 453 padding-bottom: 16px; 454 // border-bottom: 1px solid ${t.colors.grey20}; 455 &.first-price-head{ 456 padding-bottom:0; 457 .price{ 458 font-size: 28px; 459 } 460 } 461 .price { 462 font-size: ${t.fonts.sizeH3}; 463 font-family: ${t.fonts.familyTertiary}; 464 font-weight: ${t.fonts.weightBold}; 465 } 466 .price-per-litre { 467 margin-left: 10px; 468 } 469 } 470 .tiered-price-container { 471 color: ${t.colors.primary1}; 472 font-size: ${t.fonts.sizeLarge}; 473 .price { 474 font-size: ${t.fonts.sizeH3}; 475 font-family: ${t.fonts.familyTertiary}; 476 font-weight: ${t.fonts.weightBold}; 477 } 478 div { 479 margin-bottom: 15px; 480 &:first-of-type { 481 .price { 482 font-size: 28px; 483 } 484 } 485 &:last-child { 486 // padding-bottom: 10px; 487 // border-bottom: 1px solid ${t.colors.grey20}; 488 } 489 } 490 .price-per-litre { 491 margin-left: 10px; 492 } 493 } 494 .show-qty-error{ 495 margin-top:16px; 496 padding:8px; 497 background-color:${t.colors.errorLight}; 498 color:${t.colors.error}; 499 } 500 .add-to-cart-section { 501 display: flex; 502 justify-content: space-between; 503 gap: 16px; 504 padding-top:24px; 505 &:not(:last-child) { 506 padding-bottom:24px; 507 } 508 &.last-addto-cart-section{ 509 padding-bottom: 0; 510 } 511 .customProdQantityField { 512 display: flex; 513 align-items: center; 514 justify-content: space-between; 515 .quantity { 516 width: 40px; 517 min-height: 34px; 518 text-align: center; 519 padding: 6px; 520 font-size: ${t.fonts.sizeDefault}; 521 color: ${t.colors.black}; 522 border-radius: 5px; 523 border: 1px solid ${t.colors.grey20}; 524 margin: 0 auto; 525 font-size: 16px; 526 &:focus { 527 outline: none; 528 } 529 &.form-control{ 530 border: none; 531 } 532 } 533 input::-webkit-outer-spin-button, 534 input::-webkit-inner-spin-button { 535 -webkit-appearance: none; 536 margin: 0; 537 } 538 input[type=number] { 539 -moz-appearance: textfield; 540 } 541 .btn { 542 width: 34px; 543 height: 34px; 544 background: ${t.colors.white}; 545 border-radius: 5px; 546 border: 1px solid ${t.colors.black}; 547 color: ${t.colors.black}; 548 padding: 0; 549 cursor: pointer; 550 &:disabled{ 551 color: ${t.colors.grey20}; 552 border: 1px solid ${t.colors.grey20}; 553 cursor: auto; 554 } 555 } 556 & div:first-of-type{ 557 max-width:43px; 558 margin-right: 18px; 559 font-size: ${t.fonts.sizeSmall}; 560 } 561 } 562 .add-to-cart-btn-container { 563 .add-to-cart-btn { 564 font-size: ${t.fonts.sizeLarge}; 565 font-weight: 400; 566 line-height: ${t.fonts.lineHeightDefault}; 567 } 568 } 569 } 570 .top-price-section { 571 display: flex; 572 justify-content: space-between; 573 font-size: ${t.fonts.sizeDefault}; 574 line-height: ${t.fonts.lineHeightDefault}; 575 &.mixed-case { 576 padding-top: 24px; 577 } 578 .price-per-litre { 579 margin-left: 10px; 580 } 581 .price-section { 582 &.saving { 583 color: ${t.colors.primary1}; 584 .price-with-strike{ 585 font-size:28px; 586 } 587 & .case-details { 588 font-size:16px; 589 } 590 } 591 &.presell { 592 .total-price { 593 font-weight: ${t.fonts.weightBold}; 594 } 595 } 596 .price { 597 font-size: 28px; 598 line-height: ${t.fonts.lineHeightDefault}; 599 } 600 .strike { 601 text-decoration: line-through; 602 padding-left: 5px; 603 line-height: 22.4px; 604 } 605 } 606 .sale-price { 607 .price { 608 font-size: 18px; 609 font-family: ${t.fonts.familyTertiary}; 610 line-height: 25.2px; 611 font-weight: ${t.fonts.weightBold}; 612 } 613 } 614 615 .case-count { 616 color: ${t.colors.primary1}; 617 } 618 .bottle-price { 619 font-weight: ${t.fonts.weightBold}; 620 font-size: 16px; 621 } 622 623 .saving-section { 624 text-align: right; 625 .saving-section-content { 626 text-align:center; 627 border-radius: 30px; 628 background: ${t.colors.primary5}; 629 font-size: 12px; 630 font-weight: ${t.fonts.weightBold}; 631 line-height: 18px; 632 padding: 5px 8px; 633 .strikePrice { 634 text-decoration: line-through; 635 } 636 .saving { 637 color: ${t.colors.primary1}; 638 .sale-price, .case-details{ 639 color: ${t.colors.primary1}!important; 640 } 641 642 } 643 } 644 } 645 .strong { 646 font-weight: bold; 647 } 648 } 649 650 .view-wine-link { 651 z-index: 9; 652 text-decoration: underline; 653 margin: 6px 0 10px; 654 font-size: 16px; 655 line-height: 24px; 656 color: ${t.colors.grey50}; 657 } 658 659 .bulk-add-to-cart { 660 display: grid; 661 gap: 10px; 662 .bulk-deal-link { 663 line-height: ${t.fonts.lineHeightDefault}; 664 color: ${t.colors.primary1}; 665 padding: 5px 0px 8px 0px; 666 //border-bottom: 1px solid ${t.colors.grey20}; 667 } 668 } 669 670 .separation-line { 671 width: 100%; 672 text-align: center; 673 border-bottom: 1px solid ${t.colors.grey20}; 674 line-height: 1px; 675 margin-bottom: 22px; 676 font-size: ${t.fonts.sizeLarge}; 677 text-transform: uppercase; 678 color: ${t.colors.grey30}; 679 span { 680 background:${t.colors.white}; 681 padding: 0 33px; 682 } 683 &.tired-promo-button{ 684 margin-top: 24px; 685 margin-bottom: 22px; 686 } 687 } 688 689 .sale-price{ 690 color: ${t.colors.grey50}; 691 .price-per-litre { 692 color: ${t.colors.grey50}; 693 } 694 } 695 .saving .sale-price{ 696 color: ${t.colors.primary1} 697 } 698 .vpp-price,.sale-price{ 699 font-size: ${t.fonts.sizeLarge}; 700 } 701 `,pagination:` 702 display: flex; 703 align-items: center; 704 justify-content: end; 705 border-width: 1px 0 1px 0; 706 padding: 0px; 707 margin: 0px; 708 .pagination-bottom{ 709 margin: 20px 0; 710 } 711 .pagination-top{ 712 margin-bottom: 16px; 713 ${t.breakpoints.sm}{ 714 margin-bottom: 0; 715 } 716 } 717 @media (max-width: 767px) { 718 display: block; 719 } 720 li { 721 list-style: none; 722 &.page-count { 723 margin-right: 25px; 724 @media (min-width: 768px) and (max-width: 991px) { 725 font-size: 12px; 726 margin-right: 15px; 727 } 728 @media (max-width: 767px) { 729 display:none; 730 margin-right: 0; 731 margin-bottom: 20px; 732 text-align: center; 733 } 734 } 735 .ais-Pagination-list { 736 @media (max-width: 767px) { 737 display: flex; 738 justify-content: space-between; 739 align-items: center; 740 } 741 li { 742 width: 40px; 743 height: 40px; 744 display: inline-flex; 745 align-items: center; 746 margin: 0; 747 border-radius: 5px; 748 @media (max-width: 767px) { 749 margin: 0; 750 } 751 a, button { 752 cursor: pointer; 753 margin-left: 0 !important; 754 display: inline-flex; 755 align-items: center; 756 justify-content: center; 757 width: 40px; 758 height: 40px; 759 box-shadow: none; 760 border-radius: 5px !important; 761 border: none; 762 margin: 0; 763 &:active, 764 &:hover, 765 &:focus { 766 background-image: none !important; 767 border: none; 768 border-color: transparent !important; 769 box-shadow: none !important; 770 text-decoration: none; 771 } 772 } 773 &.ais-Pagination-item--previousPage { 774 border: 1px solid ${t.colors.black}; 775 margin-right: 10px; 776 @media(max-width:767px){ 777 justify-content:left; 778 } 779 a, button { 780 border-radius: 3px 0 0 3px; 781 background: transparent; 782 border: none; 783 outline: none; 784 color: #333; 785 box-shadow: none; 786 } 787 a, button, 788 span { 789 font-size: 26px; 790 line-height: 0; 791 } 792 } 793 &.ais-Pagination-item--disabled { 794 border: 1px solid #969696 !important; 795 a, button { 796 pointer-events: none; 797 color: #969696; 798 border-radius: 0 !important; 799 padding: 0; 800 width: 40px; 801 height: 40px; 802 box-shadow: none; 803 background: transparent; 804 border: none; 805 } 806 } 807 &.ais-Pagination-item--selected { 808 a { 809 pointer-events: none; 810 background: ${t.colors.primary1}; 811 color: ${t.colors.white}; 812 p { 813 margin: 0px; 814 font-family: ${t.fonts.familySecondary}; 815 } 816 } 817 @media(max-width:767px){ 818 display:none; 819 } 820 } 821 &.ais-Pagination-item-notSelected { 822 a { 823 p { 824 margin: 0px; 825 font-family: ${t.fonts.familySecondary}; 826 } 827 } 828 @media(max-width:767px){ 829 display:none; 830 } 831 } 832 &.ais-Pagination-item--nextPage { 833 border: 1px solid ${t.colors.black}; 834 margin-left: 10px; 835 a, button 836 span { 837 font-size: 26px; 838 line-height: 0; 839 margin-left: 0 !important; 840 } 841 a, button { 842 margin-left: 0; 843 background: transparent; 844 border: none; 845 outline: none; 846 box-shadow: none; 847 } 848 } 849 @media (min-width: 768px) and (max-width: 991px) { 850 width: 35px; 851 height: 35px; 852 a, button { 853 width: 35px; 854 height: 35px; 855 } 856 } 857 } 858 .mobileView-Pagination{ 859 @media(min-width : 768px){ 860 display:none; 861 } 862 } 863 } 864 } 865 `,case:` 866 .slick-slider { 867 background: ${t.colors.primary3}; 868 border-bottom: 1px solid ${t.colors.grey20}; 869 ${t.breakpoints.sm} { 870 background: none; 871 } 872 } 873 .sub-title { 874 background: ${t.colors.primary3}; 875 margin: 0; 876 text-transform: capitalize; 877 ${t.breakpoints.sm} { 878 background: none; 879 margin: 18px 0px; 880 } 881 } 882 @media (min-width: 400px) and (max-width: 900px) { 883 background: #F8F5EF; 884 } 885 .header-container { 886 display: flex; 887 gap: 15px; 888 justify-content: space-between; 889 align-items: center; 890 .main-title { 891 a { 892 color: ${t.colors.primary1}; 893 } 894 margin-bottom: 15px; 895 font-size: 30px; 896 } 897 .price { 898 text-transform: uppercase; 899 font-weight: ${t.fonts.weightBold}; 900 } 901 } 902 903 .rating-container { 904 display: flex; 905 gap: 15px; 906 align-items: center; 907 margin-bottom: 15px; 908 } 909 910 .case-content { 911 &.title { 912 text-align: center; 913 margin-top: 40px; 914 margin-bottom: 80px; 915 } 916 } 917 918 .case-content-container { 919 .sub-title-with-border { 920 ${t.mixins.h5} 921 padding-bottom: 10px; 922 border-bottom: 1px solid #ccc; 923 margin-bottom: 15px; 924 } 925 926 .mantine-Tabs-tabsList { 927 border: none; 928 margin-bottom: 20px; 929 margin-top: 20px; 930 gap: 40px 0; 931 .mantine-Tabs-tab { 932 text-align: center; 933 background: none; 934 border: none; 935 width: 108px; 936 height: 190px; 937 display: flex; 938 flex-direction: column; 939 justify-content: flex-end; 940 aspect-ratio: 1 / 1; 941 position: relative; 942 &[data-active]:after { 943 content: ""; 944 position: absolute; 945 bottom: -20px; 946 left: -5px; 947 right: 0; 948 margin: 0 auto; 949 border-width: 0 22px ${t.fonts.lineHeightDefault}; 950 border-style: solid; 951 border-color: ${t.colors.primary3} transparent; 952 display: block; 953 width: 0; 954 } 955 &Icon { 956 margin: 0; 957 img { 958 height: 150px !important; 959 } 960 svg { 961 width: 53px; 962 height: 190px; 963 } 964 } 965 &Label { 966 font-size: 18px; 967 line-height: ${t.fonts.lineHeightDefault}; 968 font-weight: ${t.fonts.weightBold}; 969 color: ${t.colors.black}; 970 display: inline-block; 971 margin-top: 7.5px; 972 } 973 } 974 } 975 .mantine-Tabs-panel { 976 background: ${t.colors.primary3}; 977 padding: 25px; 978 margin-bottom: 40px; 979 .web-description{ 980 text-align:left; 981 } 982 .case-content-details-section { 983 margin-top: 20px; 984 text-align: left; 985 ${t.breakpoints.sm} { 986 display: grid; 987 grid-template-columns: 2fr 1fr 2fr; 988 } 989 .case-image { 990 text-align: center; 991 &.case-content-img { 992 img { 993 width: auto; 994 } 995 } 996 } 997 .case-details { 998 width: 100%; 999 .title-print-container { 1000 display: flex; 1001 align-items: center; 1002 justify-content: space-betwee
1002n; 1003 border-bottom: 1px solid ${t.colors.grey20}; 1004 .title { 1005 margin-top: 0; 1006 } 1007 } 1008 .price-section { 1009 padding-bottom: 20px; 1010 border-bottom: 1px solid ${t.colors.grey20}; 1011 .price { 1012 font-size: ${t.fonts.sizeLarge}; 1013 line-height: ${t.fonts.lineHeightDefault}; 1014 font-weight: ${t.fonts.weightBold}; 1015 } 1016 .shortDesc { 1017 margin-top: 20px; 1018 a { 1019 text-decoration: underline; 1020 } 1021 } 1022 } 1023 } 1024 } 1025 } 1026 } 1027 `,productItem:` 1028 margin: 0 10px; 1029 1030 .product { 1031 &-image { 1032 position: relative; 1033 height: 180px; 1034 } 1035 &-title { 1036 font-size: 24px; 1037 font-weight: ${t.fonts.weightBold}; 1038 display: block; 1039 word-wrap: break-word; 1040 max-width: 200px; 1041 margin: 20px auto; 1042 } 1043 &-rating { 1044 margin-bottom: 15px; 1045 height: 16.5px 1046 } 1047 &-price { 1048 font-size: 16px; 1049 line-height: 32px; 1050 font-weight: ${t.fonts.weightMediumPlus}; 1051 color: ${t.colors.primary1}; 1052 .price { 1053 font-size: 18px; 1054 line-height: 26px; 1055 font-weight: ${t.fonts.weightBold}; 1056 } 1057 } 1058 &-detail { 1059 margin-top: 20px; 1060 display: block; 1061 text-decoration: none; 1062 padding-bottom: 5px 1063 } 1064 &-detail:hover { 1065 text-decoration: underline; 1066 } 1067 } 1068 `,productCardFullBleed:` 1069 .product-card { 1070 height: 100%; 1071 width: 100%; 1072 .product-image-and-info{ 1073 position: relative; 1074 .product-image-wrapper { 1075 .product-background-image { 1076 z-index: 1; 1077 height: 540px; 1078 img { 1079 width: 100%; 1080 object-fit: cover; 1081 width: 100%; 1082 height: 540px; 1083 } 1084 } 1085 .product-image { 1086 position: absolute; 1087 display: flex; 1088 justify-content:center; 1089 top: 0; 1090 left: 0; 1091 z-index: 2; 1092 width: 100%; 1093 height: 540px; 1094 object-fit:cover; 1095 align-items: flex-end; 1096 .product-bottle-image{ 1097 max-width: 105px; 1098 margin-bottom: 50px; 1099 width: 100%; 1100 height: max-content; 1101 } 1102 .product-case-default-image{ 1103 position:absolute; 1104 width: 100%; 1105 top: 110px; 1106 height: 60% !important; 1107 max-width: max-content; 1108 } 1109 } 1110 } 1111 } 1112 } 1113 1114 .product-card-info { 1115 z-index: 3; 1116 position: absolute; 1117 top: 2%; 1118 left: 8%; 1119 display: flex; 1120 height: 94%; 1121 justify-content: space-between; 1122 flex-direction: column; 1123 .product-sale-status { 1124 display: flex; 1125 align-items: center; 1126 gap: ${t.space.sm}; 1127 background-color: ${t.colors.primary1}; 1128 padding: ${t.space.sm}; 1129 color: ${t.colors.white}; 1130 width: fit-content; 1131 .product-on-sale-text{ 1132 margin: 0px; 1133 } 1134 } 1135 .product-info-and-button{ 1136 display: flex; 1137 flex-direction: column; 1138 justify-content: space-between; 1139 height: 90%; 1140 } 1141 .product-name-box{ 1142 a:hover{ 1143 text-decoration: none; 1144 } 1145 overflow: hidden; 1146 } 1147 .product-name { 1148 font-size: ${t.fonts.sizeH8}; 1149 color: ${t.colors.white}; 1150 overflow: hidden; 1151 text-overflow: ellipsis; 1152 display: -webkit-box; 1153 -webkit-line-clamp: 2; 1154 line-clamp: 2; 1155 webkit-box-orient: vertical; 1156 line-height: 32.4px; 1157 width: fit-content; 1158 font-weight: ${t.fonts.weightMediumPlus}; 1159 font-family: ${t.fonts.familyTertiary}; 1160 margin: 12px 0px; 1161 } 1162 1163 .product-rating { 1164 display: flex; 1165 align-items: center; 1166 height:17.33px; 1167 gap: ${t.space.sm}; 1168 span { 1169 color: ${t.colors.white}; 1170 } 1171 } 1172 1173 .product-price { 1174 margin: 12px 0px; 1175 color:${t.colors.white}; 1176 font-size: ${t.fonts.sizeH4}; 1177 font-size: ${t.fonts.sizeLarge}; 1178 } 1179 1180 .product-card-button{ 1181 .cart-button button{ 1182 padding: ${t.space.md}; 1183 background: ${t.colors.white}; 1184 border: none; 1185 font-family: ${t.fonts.familySecondary}; 1186 font-weight: ${t.fonts.weightMediumPlus};
1187 background: ${t.colors.btnsPrimaryColor}; 1188 color: ${t.colors.black}; 1189 display: flex; 1190 gap: 10px; 1191 } 1192 .cart-button button:hover { 1193 background-color: ${t.colors.btnsPrimaryHoverBg}; 1194 color: ${t.colors.btnsPrimaryHoverColor}; 1195 text-decoration: none; 1196 } 1197 1198 .view-product-button{ 1199 padding: ${t.space.md}; 1200 border: 1px solid ${t.colors.black}; 1201 padding: 12px 24px 12px 24px; 1202 font-family: ${t.fonts.familyTertiary}; 1203 font-weight: ${t.fonts.weightMediumPlus}; 1204 color: ${t.colors.black}; 1205 display: inline-block; 1206 font-size: ${t.fonts.sizeH5}; 1207 background: ${t.colors.btnsPrimaryColor}; 1208 border-radius: 5px; 1209 line-height: 26px; 1210 } 1211 .view-product-button:hover { 1212 background-color: ${t.colors.btnsPrimaryHoverBg}; 1213 color: ${t.colors.btnsPrimaryHoverColor}; 1214 text-decoration: none; 1215 } 1216 } 1217 } 1218 } 1219 `,productCardStandard:` 1220 .product-card { 1221 height: 100%; 1222 width: 100%; 1223 .zoom { 1224 position: absolute; 1225 top: 16px; 1226 left: 16px; 1227 z-index: 3; 1228 border-radius: 4px; 1229 background-color: ${t.colors.white}; 1230 width: 44px; 1231 height: 44px; 1232 padding: 12px; 1233 cursor: pointer; 1234 transition: all 0.3s ease-in-out; 1235 opacity: 0; 1236 visibility: hidden; 1237 i { 1238 transition: color 0.3s ease-in-out; 1239 font-size: 20px; 1240 } 1241 &:hover { 1242 background-color: ${t.colors.btnsPrimaryBg}; 1243 i { 1244 color: ${t.colors.white}; 1245 } 1246 } 1247 } 1248 &:hover .zoom { 1249 opacity: 1; 1250 visibility: visible; 1251 } 1252 .mantine-Modal-body { 1253 .zoom-container { 1254 position: relative; 1255 height: 70vh; 1256 } 1257 } 1258 .product-image-and-info { 1259 position: relative; 1260 .product-image-wrapper { 1261 display: flex; 1262 position: relative; 1263 justify-content: center; 1264 height: 320px; 1265 align-items: center; 1266 margin-bottom: 12px; 1267 .product-background-image { 1268 position: absolute; 1269 display: none; 1270 top: 0; 1271 left: 0; 1272 1273 img { 1274 object-fit: cover; 1275 height: 540px; 1276 } 1277 1278 } 1279 1280 .product-image { 1281 position: absolute; 1282 display: flex; 1283 justify-content:center; 1284 top: 0; 1285 left: 0; 1286 z-index: 2; 1287 width: 100%; 1288 height:100%; 1289 object-fit:cover; 1290 align-items: center; 1291 > img { 1292 padding: 25px; 1293 } 1294 .product-bottle-image{ 1295 width: 100%; 1296 height: 90%; 1297 object-fit: contain; 1298 } 1299 .product-case-default-image{ 1300 min-height: -webkit-fill-available; 1301 width: 100%; 1302 height: auto; 1303 max-height: 100%; 1304 object-fit: contain; 1305 } 1306 } 1307 } 1308 } 1309 1310 } 1311 .product-card-info { 1312 z-index: 3; 1313 display: flex; 1314 justify-content: space-between; 1315 flex-direction: column; 1316 .product-sale-status { 1317 background-color: ${t.colors.primary1}; 1318 display: flex; 1319 align-items: center; 1320 gap: ${t.space.sm}; 1321 padding: ${t.space.sm}; 1322 color: ${t.colors.white}; 1323 position: absolute; 1324 top:0; 1325 left:0; 1326 margin: 0px; 1327 .product-on-sale-text{ 1328 margin: 0px; 1329 } 1330 } 1331 1332 .product-info-and-button{ 1333 display: flex; 1334 flex-direction: column; 1335 justify-content: space-evenly; 1336 } 1337 .product-name-box{ 1338 display: -webkit-box; 1339 -webkit-line-clamp: 2; 1340 -webkit-box-orient: vertical; 1341 overflow: hidden; 1342 text-overflow: ellipsis; 1343 overflow: hidden; 1344 height: 44px; 1345 margin-bottom: 12px; 1346 > a { 1347 font-size: 16px; 1348 line-height: 22.5px; 1349 } 1350 } 1351 .product-name{ 1352 font-size: ${t.fonts.sizeH8}; 1353 color: ${t.colors.black}; 1354 overflow: hidden; 1355 text-overflow: ellipsis; 1356 display: -webkit-box; 1357 -webkit-line-clamp: 2; 1358 -webkit-box-orient: vertical; 1359 line-height: 28.4px; 1360 font-weight: ${t.fonts.weightMediumPlus}; 1361 font-family: ${t.fonts.familyTertiary}; 1362 margin-bottom: 12px; 1363 word-break: break-word; 1364 } 1365 1366 .product-rating { 1367 display: flex; 1368 align-items: center; 1369 gap: ${t.space.sm}; 1370 span { 1371 color: ${t.colors.black}; 1372 } 1373 } 1374 .product-rating, .average-case-rating { 1375 height: 18px; 1376 overflow: hidden; 1377 } 1378 1379 .product-price { 1380 height: 16px; 1381 margin: 12px 0px; 1382 font-family: ${t.fonts.familySecondary}; 1383 span:not(.original-price) { 1384 font-weight: ${t.fonts.weightBold}; 1385 } 1386 .original-price { 1387 text-decoration: line-through; 1388 margin-right: 5px; 1389 } 1390 } 1391 1392 .product-card-button{ 1393 .cart-button button, 1394 .view-product-button{ 1395 padding: 12px 24px; 1396 font-weight: ${t.fonts.weightMediumPlus}; 1397 border-radius: 2px; 1398 line-height: 18px; 1399 letter-spacing: 0.28px; 1400 width: 167px; 1401 height: 44px; 1402 } 1403 .cart-button button{ 1404 border: 1px solid ${t.colors.black}; 1405 font-family: ${t.fonts.familySecondary};
1406 background: ${t.colors.btnsPrimaryColor}; 1407 color: ${t.colors.black}; 1408 display: flex; 1409 align-items: center; 1410 justify-content: center; 1411 gap: 10px; 1412 } 1413 .cart-button button:hover { 1414 background-color: ${t.colors.btnsPrimaryHoverBg}; 1415 color: ${t.colors.btnsPrimaryHoverColor}; 1416 text-decoration: none; 1417 } 1418 .view-product-button{ 1419 border: 1px solid ${t.colors.black}; 1420 font-family: ${t.fonts.familySecondary}; 1421 background: ${t.colors.btnsPrimaryColor}; 1422 color: ${t.colors.black}; 1423 display: inline-block; 1424 text-align: center; 1425 font-size: 14px; 1426 } 1427 .view-product-button:hover { 1428 background-color: ${t.colors.btnsPrimaryHoverBg}; 1429 color: ${t.colors.btnsPrimaryHoverColor}; 1430 text-decoration: none 1431 } 1432 } 1433 } 1434 } 1435 `,productCardDetailed:` 1436 height: 100%; 1437 1438 .product-card { 1439 border-radius: 8px; 1440 border: 1px solid ${t.colors.secondary9}; 1441 background: #ffffff; 1442 height: 100%; 1443 overflow: hidden; 1444 } 1445 1446 .product-image-and-info { 1447 display: flex; 1448 flex-flow: column; 1449 height: 100%; 1450 } 1451 1452 // Image Wrap 1453 .product-image-wrapper { 1454 position: relative; 1455 padding-top: 67%; 1456 height: 0; 1457 width: 100%; 1458 display: block; 1459 1460 img { 1461 position: absolute; 1462 left: 0; 1463 top: 0; 1464 width: 100% !important; 1465 height: 100% !important; 1466 object-fit: contain; 1467 padding: 20px 10px; 1468 } 1469 } 1470 1471 // Product Info 1472 .product-card__info { 1473 display: flex; 1474 flex-flow: column; 1475 height: 100%; 1476 1477 div:empty { 1478 display: none; 1479 } 1480 } 1481 1482 .product-card__info--multiview { 1483 .product-name { 1484 color: ${t.colors.primary9}; 1485 } 1486 } 1487 1488 // Product Info Top 1489 .product-card__info-top { 1490 display: flex; 1491 flex-flow: column; 1492 grid-gap: 16px; 1493 flex: 1; 1494 padding: 16px; 1495 border-top: 1px solid ${t.colors.secondary9}; 1496 1497 .product-card__badge + .product-name-box { 1498 margin: 8px 0 4px; 1499 text-transform: none; 1500 } 1501 1502 .product-name { 1503 margin: 0; 1504 } 1505 } 1506 1507 .product-card__subtitle { 1508 margin: 0 !important; 1509 } 1510 1511 .product-card__desc { 1512 font-size: ${t.fonts.sizeDefault}; 1513 font-weight: 400; 1514 line-height: ${t.fonts.lineHeightDefault}; 1515 max-width: 764px; 1516 1517 p { 1518 font-size: ${t.fonts.sizeDefault}; 1519 font-weight: 400; 1520 line-height: ${t.fonts.lineHeightDefault}; 1521 } 1522 } 1523 1524 // Product Info Bottom 1525 .product-card__info-bottom { 1526 display: grid; 1527 gap: 8px; 1528 padding: 16px 16px 24px; 1529 border-top: 1px solid ${t.colors.secondary9}; 1530 1531 .product-card-button >div:not(.cart-button) { 1532 display: grid; 1533 gap: 8px; 1534 } 1535 } 1536 1537 // Badge 1538 .product-card__badge { 1539 display: inline-block; 1540 padding: 5px 11px; 1541 border-radius: 32px; 1542 border: 1px solid #000; 1543 font-size: ${t.fonts.sizeSmall}; 1544 } 1545 1546 p, .body1 { 1547 margin: 0 !important; 1548 } 1549 1550 .product-card__img-secondary img { 1551 width: 100%; 1552 height: auto; 1553 object-fit: cover; 1554 } 1555 1556 .product-card__member-price { 1557 margin-top: 4px; 1558 color: #0055A0; 1559 } 1560 1561 .product-card-button { 1562 display: grid; 1563 gap: 12px; 1564 1565 > div:not(.cart-button) { 1566 margin-top: 4px; 1567 1568 ${t.breakpoints.md} { 1569 margin-top: 0; 1570 } 1571 } 1572 1573 button { 1574 cursor: pointer; 1575 padding: 12px 32px; 1576 font-weight: ${t.fonts.weightMediumPlus}; 1577 letter-spacing: 0.42px; 1578 text-transform: uppercase; 1579 min-width: 220px; 1580 width: 100%; 1581 1582 &:focus { 1583 padding: 12px 32px; 1584 } 1585 } 1586 1587 ${t.breakpoints.md} { 1588 display: flex; 1589 flex-wrap: wrap; 1590 align-items: center; 1591 gap: 12px 24px; 1592 } 1593 1594 .product-price + .cart-button { 1595 margin-top: 8px; 1596 } 1597 } 1598 1599 .view-product-button { 1600 padding: ${t.space.md}; 1601 border: 1px solid ${t.colors.black}; 1602 font-weight: ${t.fonts.weightMediumPlus}; 1603 letter-spacing: 0.42px; 1604 text-transform: uppercase; 1605 color: ${t.colors.black}; 1606 display: inline-block; 1607 font-size: ${t.fonts.sizeH5};
1608 background: ${t.colors.btnsPrimaryColor}; 1609 border-radius: 5px; 1610 line-height: 26px; 1611 } 1612 .view-product-button:hover { 1613 background-color: ${t.colors.btnsPrimaryHoverBg}; 1614 color: ${t.colors.btnsPrimaryHoverColor}; 1615 text-decoration: none; 1616 } 1617 1618 .product-price { 1619 display: flex; 1620 gap: 4px; 1621 } 1622 1623 .product-price__original { 1624 color: ${t.colors.secondary15}; 1625 &.strikeThrough { 1626 text-decoration: line-through; 1627 } 1628 } 1629 1630 .product-rating { 1631 svg { 1632 width: 14px; 1633 height: 14px; 1634 } 1635 } 1636 } 1637 `,productCardSkeleton:` 1638 .product-rating { 1639 padding-top: 20px; 1640 } 1641 .product-price { 1642 padding-top: 10px; 1643 } 1644 `,productCardImageMultiView:` 1645 .product-image-wrapper { 1646 position: static; 1647 height: auto; 1648 padding: 0; 1649 font-size: 0; 1650 1651 img { 1652 position: static; 1653 transform: none; 1654 padding: 0; 1655 object-fit: cover; 1656 } 1657 } 1658 `}})},85194:(t,e,i)=>{"use strict";i.d(e,{X:()=>n});var o=i(72076);let n=t=>({Loading:{},CollapseBox:{wrapper:` 1659 margin-bottom: 20px; 1660 `,header:` 1661 background-color: ${t.colors.primary1}; 1662 color: white; 1663 padding: 20px; 1664 `,body:` 1665 padding: 20px; 1666 background-color: ${t.colors.white}; 1667 `},WinePreferences:{wrapper:` 1668 h3 { 1669 text-transform: uppercase; 1670 font-size: 28px; 1671 } 1672 em{ 1673 display: block; 1674 font-weight: bold; 1675 margin-bottom: 20px; 1676 } 1677 `,loadingMsg:` 1678 `,errorMsg:` 1679 `,singleChoiceList:` 1680 margin-bottom: 30px; 1681 1682 label{ 1683 margin: 10px 0; 1684 input { 1685 margin-right: 10px; 1686 } 1687 } 1688 `,singleChoiceTable:` 1689 th, 1690 td { 1691 width: 25%; 1692 } 1693 1694 td { 1695 text-align: center; 1696 } 1697 1698 thead { 1699 th, 1700 td { 1701 padding: 10px 5px; 1702 } 1703 } 1704 1705 tbody { 1706 th, 1707 td { 1708 font-weight: normal; 1709 padding: 15px 5px; 1710 } 1711 1712 tr:last-child { 1713 th, 1714 td { 1715 border-bottom-width: 0; 1716 } 1717 } 1718 } 1719 `,multiSelectList:` 1720 label{ 1721 margin: 10px 0; 1722 1723 input { 1724 margin-right: 10px; 1725 } 1726 } 1727 `},GlobalLayout:{previewMode:` 1728 position: fixed; 1729 bottom: 30px; 1730 width: 85%; 1731 text-align: center; 1732 left: 7.5%; 1733 border-radius: 8px; 1734 font-weight: ${t.fonts.weightNormal}; 1735 padding: 15px; 1736 background-color: ${t.colors.white}; 1737 box-shadow: 2px 2px 2px 2px ${t.colors.primary1}; 1738 z-index: 9999; 1739 p { 1740 margin: 0; 1741 color: ${t.colors.black}; 1742 a { 1743 margin-left: 5px; 1744 color: ${t.colors.primary1}; 1745 } 1746 } 1747 `,wrapper:` 1748 .no-results { 1749 .container { 1750 margin: 25px 0px; 1751 } 1752 } 1753 `},GlobalHeader:{wrapper:` 1754 font-size: ${t.fonts.sizeH5}; 1755 &.mainHeader { 1756 z-index: 10 !important ; 1757 .sticky-header{ 1758 position: fixed; 1759 top: 0; 1760 width: 100%; 1761 left: 0; 1762 z-index: 3; 1763 background-color: ${t.colors.white}; 1764 box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, 1765 rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem; 1766 .search-navbar-container{ 1767 padding: 0; 1768 transition:all 0.9s ease; 1769 -webkit-transition:all 0.9s ease; 1770 -moz-transition:all 0.9s ease; 1771 } 1772 .mantine-HoverCard-dropdown { 1773 padding: 12px 0; 1774 } 1775 } 1776 ${t.breakpoints.xs} { 1777 position: sticky; 1778 top: 0; 1779 z-index: 500; 1780 } 1781 ${t.breakpoints.lg} { 1782 position: relative; 1783 top: unset; 1784 z-index: 10; 1785 } 1786 .nav-overlay { 1787 display: none; 1788 position: fixed; 1789 left: 0; 1790 right: 0; 1791 height: 100%; 1792 background: ${t.colors.black}; 1793 opacity: 0.6; 1794 z-index: 1; 1795 } 1796 .minicart-overlay { 1797 position: fixed; 1798 left: 0; 1799 right: 0; 1800 height: 100%; 1801 background: ${t.colors.black}; 1802 opacity: 0.6; 1803 z-index: 1; 1804 top: 0; 1805 } 1806 .active-nav-overlay { 1807 display: block 1808 } 1809 } 1810 .state-selector-mobile { 1811 display: flex; 1812 justify-content: center; 1813 padding: 10px; 1814 background: ${t.colors.primary3}; 1815 ${t.breakpoints.lg} { 1816 display: none; 1817 } 1818 } 1819 `,stripBanner:` 1820 min-height: 55px; 1821 display: flex; 1822 align-items: center; 1823 justify-content: center; 1824 text-align: center; 1825 padding: 10px 8px; 1826 1827 /* Override DynamicContentSlot fixed height when inside stripBanner */ 1828 .cms-dynamic-content-slot { 1829 height: auto !important; 1830 overflow: hidden !important; 1831 } 1832 1833 .richtext-wrapper, 1834 .strip-banner-slider-wrapper { 1835 width: 100%; 1836 } 1837 1838 1839 .richtext-wrapper { 1840 padding: 0; 1841 } 1842 1843 .richtext-wrapper > * { 1844 margin: 0; 1845 padding: 0; 1846 width: 100%; 1847 line-height: 1.5; 1848 } 1849 1850 .richtext-wrapper p, 1851 .richtext-wrapper span, 1852 .richtext-wrapper a { 1853 margin: 0; 1854 padding: 0; 1855 } 1856 1857 .strip-banner-slider-wrapper { 1858 padding: 0; 1859 } 1860 1861 .strip-banner-slider-wrapper .slick-slider { 1862 cursor: auto; 1863 } 1864 1865 .strip-banner-slider-wrapper .slick-slider .slick-list { 1866 margin: 0 !important; 1867 } 1868 1869 .strip-banner-slider-wrapper .slick-slide { 1870 margin: 0 !important; 1871 padding: 0 !important; 1872 } 1873 1874 .strip-banner-slider-wrapper .slick-slide > div { 1875 margin: 0; 1876 padding: 0; 1877 } 1878 1879 .strip-banner-slider-wrapper .slick-slide .richtext-wrapper { 1880 margin: 0; 1881 padding: 0; 1882 } 1883 1884 .strip-banner-slider-wrapper .slick-slide .richtext-wrapper > * { 1885 width: 100%; 1886 padding: 0; 1887 margin: 0; 1888 line-height: 1.5; 1889 } 1890 1891 .strip-banner-slider-wrapper > .slick-slider > .slick-dots { 1892 display: none !important; 1893 } 1894 1895 ${t.breakpoints.lg} { 1896 padding: 10px 16px; 1897 } 1898 `,tertiaryNav:` 1899 display: none; 1900 ${t.breakpoints.lg} { 1901 display: block; 1902 padding: 1em 0; 1903 } 1904 .sticky-header &{ 1905 display: none; 1906 } 1907 ul { 1908 display: flex; 1909 padding: 0; 1910 margin: 0; 1911 justify-content: end; 1912 li { 1913 list-style: none; 1914 margin-left: 48.3px; 1915 a { 1916 font-family: ${t.fonts.familySecondary}; 1917 color: ${t.colors.black}; 1918 font-weight: ${t.fonts.weightNormal}; 1919 text-transform: capitalize; 1920 } 1921 } 1922 } 1923 `,mainNavBarWrapper:` 1924 display: none; 1925 .logo-wrapper{ 1926 display: flex; 1927 width: 49px; 1928 height: 64px; 1929 padding: 8px 0px; 1930 justify-content: center; 1931 align-items: center; 1932 gap: 10px; 1933 } 1934 1935 ${t.breakpoints.lg} { 1936 display: flex; 1937 align-items: center; 1938 justify-content: space-around; 1939 1940 .input-on-focus & { 1941 display: none; 1942 } 1943 } 1944 1945 .tabPanes-wrapper{ 1946 width: 100%; 1947 } 1948 1949 .is-sticky{ 1950 display: flex; 1951 gap: 33px; 1952 &.is-sticky-searchbar { 1953 gap: 0px; 1954 } 1955 } 1956 .searchbar-input-container { 1957 position: relative; 1958 } 1959 .isSearchBar { 1960 position: absolute; 1961 top: 11px; 1962 left: 15px; 1963 } 1964
1965 .isStickyCancelContainer { 1966 .isStickyCancelButton { 1967 display: block; 1968 text-decoration: none; 1969 padding: 0px 20px 0 0px; 1970 background: transparent; 1971 color: ${t.colors.black}; 1972 border: 0; 1973 cursor: pointer; 1974 &:hover, &:focus { 1975 outline:0; 1976 } 1977 } 1978 } 1979 1980 ${t.breakpoints.lg} { 1981 border-left: 0; 1982 margin: auto; 1983 .isStickyCancelButton { 1984 display: none; 1985 padding: 0; 1986 } 1987 } 1988 1989 1990 1991 .search-user-cart{ 1992 display: flex; 1993 gap: 32px; 1994 width: 10%; 1995 } 1996 1997 .topLevelLinks{ 1998 display: flex; 1999 justify-content: center; 2000 width: 100%; 2001 .cms-conditional-container { 2002 display: flex; 2003 } 2004 & > div { 2005 display: flex; 2006 justify-content: center; 2007 width: 100%; 2008 & + div { 2009 display: none; 2010 } 2011 } 2012 .navigation-link .cms-conditional-container { 2013 flex-direction: column; 2014 a { 2015 text-wrap: initial; 2016 line-height: 18px; 2017 margin-bottom: 14px; 2018 width: fit-content; 2019 } 2020 } 2021 } 2022 2023 .topLevelLink{ 2024 padding-top: 0; 2025 padding-bottom: 0; 2026 &:hover .megaNavTab{ 2027 color: ${t.colors.grey50}; 2028 text-decoration: underline; 2029 text-decoration-color: ${t.colors.primary1}; 2030 text-decoration-thickness: 4px; 2031 } 2032 .menu-banner-image img { 2033 height: auto; 2034 } 2035 } 2036 .megaNavTab:focus{ 2037 text-decoration: none; 2038 } 2039 2040 .isStickySearchBar{ 2041 width: 100%; 2042 } 2043 2044 .isSticky { 2045 color: ${t.colors.black}; 2046 font-family: ${t.fonts.familySecondary}; 2047 font-size: ${t.fonts.sizeH5}; 2048 font-style: normal; 2049 font-weight: ${t.fonts.weightNormal}; 2050 line-height: ${t.fonts.lineHeightDefault}; 2051 text-transform: uppercase; 2052 display: inline-block; 2053 text-underline-offset: ${t.space.lg}; 2054 padding: ${t.space.lg} 0; 2055 2056 &:hover{ 2057 text-decoation: underline; 2058 text-decoration-color: ${t.colors.primary1}; 2059 text-decoration-thickness: 3px; 2060 } 2061 2062 &.emphasize{ 2063 color: ${t.colors.primary1}; 2064 font-family: ${t.fonts.familySecondary}; 2065 font-size: ${t.fonts.sizeH5}; 2066 font-style: normal; 2067 font-weight: ${t.fonts.weightBold}; 2068 line-height: ${t.fonts.lineHeightDefault}; /* 171.429% */ 2069 text-transform: uppercase; 2070 } 2071 } 2072 2073 .megaNavTab { 2074 font-size: 18px; 2075 text-underline-offset: ${t.space.lg}; 2076 padding: ${t.space.lg} 14px; 2077 display: inline-block; 2078 font-family: ${t.fonts.headerMainNavTitle}; 2079 color: ${t.colors.grey50}; 2080 letter-spacing: ${t.fonts.fontLetterSpacing5}; 2081 font-weight: ${t.fonts.weightMediumPlus}; 2082 ${t.breakpoints.xl} { 2083 padding: ${t.space.lg} 20px; 2084 } 2085 2086 span { 2087 display: inline-block; 2088 } 2089 &:hover { 2090 text-decoration: none; 2091 span { 2092 position: relative; 2093 ::after { 2094 content: ''; 2095 position: absolute; 2096 left: 0; 2097 right: 0; 2098 bottom: -13px; 2099 height: 5px; 2100 background: ${t.colors.primary1}; 2101 z-index: 0; 2102 } 2103 } 2104 } 2105 2106 &.emphasize, &.emphasize span { 2107 color: ${t.colors.primary1}; 2108 font-weight: ${t.fonts.weightBold}; 2109 white-space: nowrap; 2110 } 2111 &:focus{ 2112 text-decoration: none; 2113 } 2114 } 2115 `,mainNavBarMenuTabPane:` 2116 text-align: left; 2117 margin-top: -8px; 2118 left: 0 !important; 2119 ${t.breakpoints.xxl} { 2120 right: 0; 2121 } 2122 padding: 0; 2123 border: none; 2124 background: transparent; 2125 box-shadow: 0px 0px 0px; 2126 .header-main-nav-layout { 2127 background: ${t.colors.white}; 2128 border-radius: 0px 0px 12px 12px; 2129 box-shadow: 0px 0px 3px 0px #DEDEDE inset; 2130 .dynamicComponents { 2131 padding: 22px 40px; 2132 .richtext-wrapper {
2133 &.richtext-has-bg { 2134 padding: 1rem; 2135 } 2136 p { 2137 margin-top: 1em; 2138 margin-bottom: 1em; 2139 &:first-of-type { 2140 margin-top: 0; 2141 } 2142 &:last-child { 2143 margin-bottom: 0; 2144 } 2145 } 2146 } 2147 } 2148 .navigation-link { 2149 a { 2150 letter-spacing: ${t.fonts.fontLetterSpacing5}; 2151 } 2152 > a { 2153 width: 100%; 2154 overflow-x: hidden; 2155 text-overflow: ellipsis; 2156 } 2157 } 2158 h4 { 2159 font-family: ${t.fonts.headerMainNavSubTitle}; 2160 font-size: 18px; 2161 font-weight: ${t.fonts.weightBold}; 2162 margin: 0 0 ${t.space.lg} 0; 2163 color: ${t.colors.primary1}; 2164 letter-spacing: 0.01em; 2165 text-transform: unset; 2166 } 2167 a { 2168 line-height: 22px !important; 2169 font-size: ${t.fonts.sizeH4}; 2170 &:hover { 2171 color: ${t.colors.primary1}; 2172 } 2173 } 2174 } 2175 .mantine-ScrollArea-root { 2176 .widget-cms-column > div { 2177 margin: 0; 2178 width: 100%; 2179 max-width: 100%; 2180 } 2181 } 2182 `,searchNavBar:` 2183 .state-selector { 2184 display: none; 2185 ${t.breakpoints.lg} { 2186 display: block; 2187 } 2188 } 2189 .search-navbar-container { 2190 padding: 0; 2191 .grid-search-navbar-container{ 2192 flex-wrap: nowrap; 2193 } 2194 .navbar-left-container { 2195 order: 2; 2196 display: flex; 2197 justify-content: center; 2198 } 2199 .navbar-center-container { 2200 position: relative; 2201 .sticky-header & { 2202 ${t.breakpoints.lg} { 2203 position: initial; 2204 padding-right: 24px; 2205 } 2206 &.input-on-focus { 2207 position: relative; 2208 } 2209 max-width: none; 2210 } 2211 min-width: 83px; 2212 text-align: left; 2213 min-height: unset; 2214 display:flex; 2215 align-items: center; 2216 gap:10px; 2217 order: 1; 2218 ${t.breakpoints.lg} { 2219 max-width: 480px; 2220 } 2221 ${t.breakpoints.xl} { 2222 max-width: 540px; 2223 } 2224 ${t.breakpoints.xxl} { 2225 max-width: 689px; 2226 } 2227 .sticky-nav-bar{ 2228 display:none; 2229 } 2230 .sticky-header &{ 2231 align-items: center; 2232 ${t.breakpoints.lg} { 2233 .sticky-nav-bar{ 2234 display:flex; 2235 width: 100%; 2236 } 2237 } 2238 .search-icon { 2239 display: initial; 2240 } 2241 .searchbar-grid-block-container { 2242 display: none; 2243 margin: 0 auto; 2244 right: 0; 2245 transition: all 1s; 2246 ${t.breakpoints.lg} { 2247 max-width: 410px; 2248 position: fixed; 2249 } 2250 ${t.breakpoints.xl} { 2251 max-width: 480px; 2252 position: fixed; 2253 } 2254 ${t.breakpoints.xxl} { 2255 max-width: 612px; 2256 position: fixed; 2257 } 2258 } 2259 .header-search-bar{ 2260 margin-left: auto; 2261 } 2262 } 2263 .search-overlay { 2264 display: none 2265 } 2266 .isSearchBar { 2267 position: absolute; 2268 top: 5px; 2269 right: 5px; 2270 background: ${t.colors.primary1}; 2271 padding: 8px; 2272 border-radius: 50px; 2273 color: ${t.colors.white}; 2274 width: 36px; 2275 height: 36px; 2276 } 2277 .header-mainnav-mobile{ 2278 ${t.breakpoints.lg} { 2279 display:none; 2280 } 2281 } 2282 &.input-on-focus { 2283 + .navbar-right-container { 2284 .sticky-header & { 2285 display: block; 2286 } 2287 } 2288 .header-mainnav-mobile, .search-icon { 2289 display: none; 2290 } 2291 .searchbar-grid-block-container { 2292 display: block; 2293 .searchbar-grid { 2294 background: ${t.colors.white}; 2295 position: relative; 2296 } 2297 } 2298 .suffix-icon, .searchbar-cancel-link { 2299 display: block; 2300 } 2301 .search-overlay { 2302 display: block 2303 } 2304 .aa-Form { 2305 border: 0; 2306 ${t.breakpoints.lg} { 2307 border: 1px solid ${t.colors.black}; 2308 } 2309 } 2310 } 2311 } 2312 .navbar-right-container { 2313 order: 3; 2314 padding-right: 21px; 2315 i { 2316 width: 28px; 2317 height: 28px; 2318 } 2319 & > div { 2320 gap: 0em; 2321 .favourites-col-container { 2322 display: none; 2323 ${t.breakpoints.md} { 2324 display: block; 2325 } 2326 } 2327 } 2328 .sign-in-link { 2329 background: transparent; 2330 border: none; 2331 cursor: pointer; 2332 padding-left: 0px; 2333 padding-right: 0px; 2334 color: #000; 2335 } 2336 .sticky-header &{ 2337 .sign-in-link { 2338 span { 2339 display: none; 2340 vertical-align: middle; 2341 margin-left: 0.5em; 2342 color: ${t.colors.black}; 2343 } 2344 } 2345 .header-cart-price-container { 2346 display: none; 2347 } 2348 .header-cart-count-container { 2349 background: transparent; 2350 padding: 0em; 2351 .header-cart-grid-container { 2352 min-width: 90%; 2353 .header-cart-price-container { 2354 display: none; 2355 } 2356 .cart-quantity{ 2357 display: initial; 2358 } 2359 } 2360 } 2361 } 2362 } 2363 } 2364 ${t.breakpoints.lg} { 2365 border-bottom: 0.5px solid ${t.colors.grey20}; 2366 .search-navbar-container { 2367 padding: 0.8em 0; 2368 .navbar-left-container { 2369 order: 1; 2370 justify-content: flex-start; 2371 .sticky-header & { 2372 display:none; 2373 } 2374 } 2375 .navbar-center-container { 2376 min-width: unset; 2377 text-align: unset; 2378 min-height: 69px; 2379 flex: auto; 2380 order: 2 2381 } 2382 .navbar-right-container { 2383 & > div { 2384 .favourites-col-container { 2385 display: flex; 2386 } 2387 .sticky-header & .favourites-col-container { 2388 2389 } 2390 } 2391 } 2392 } 2393 } 2394 ${t.breakpoints.md} { 2395 .navbar-center-container { 2396 min-width: 106px; 2397 } 2398 .search-navbar-container { 2399 .navbar-right-container { 2400 & > div { 2401 gap: 1em; 2402 } 2403 } 2404 } 2405 } 2406 2407 //TODO: unhide when DSP-259 implemented
2408 .hamburger-menu-icon { 2409 display: none; 2410 } 2411 `,headerLogo:` 2412 img { 2413 display: block; 2414 max-width: 10em; 2415 width: 100%; 2416 2417 ${t.breakpoints.lg} { 2418 max-width: 13.5em; 2419 } 2420 } 2421 `,stickymainNavWrapper:` 2422 #header-logo img { 2423 width: auto; 2424 min-width: auto; 2425 } 2426 .topLevelLink { 2427 .megaNavTab, .navigation-link h4 { 2428 font-size: ${t.fonts.sizeDefault}; 2429 } 2430 .navigation-link a { 2431 font-size: ${t.fonts.sizeDefault}; 2432 line-height: 18px !important; 2433 letter-spacing: ${t.fonts.fontLetterSpacing5}; 2434 } 2435 } 2436 `,headerFavourites:` 2437 a { 2438 &.icon-hover { 2439 color: ${t.colors.primary1}; 2440 } 2441 &.favourites-link { 2442 text-decoration: none; 2443 display: flex; 2444 flex-direction: column; 2445 align-items: center; 2446 gap: 5px; 2447 span { 2448 display: none; 2449 2450 .sticky-header & { 2451 display: none; 2452 } 2453 ${t.breakpoints.lg} { 2454 display: block; 2455 } 2456 } 2457 } 2458 } 2459 `,headerSignIn:` 2460 color: ${t.colors.black}; 2461 .user-logged-in-label { 2462 cursor: pointer; 2463 display: flex; 2464 align-items: center; 2465 flex-direction: column; 2466 gap: 5px; 2467 } 2468 .sign-in-label { 2469 width: 2em; 2470 height: 2em; 2471 background: ${t.colors.headerSignInBtnSmall}; 2472 color: ${t.colors.white}; 2473 display: inline-flex; 2474 border-radius: 50%; 2475 align-items: center; 2476 justify-content: center; 2477 text-transform: uppercase; 2478 vertical-align: middle; 2479 } 2480 .sign-in-name { 2481 margin-left: 0.3em; 2482 display: none; 2483 text-transform: capitalize; 2484 max-width: 90px; 2485 text-overflow: ellipsis; 2486 white-space: nowrap; 2487 overflow: hidden; 2488 ${t.breakpoints.lg} { 2489 display: inline-block; 2490 .sticky-header & { 2491 display: none; 2492 } 2493 } 2494 } 2495 .sign-in-link { 2496 display: flex; 2497 flex-direction: column; 2498 align-items: center; 2499 gap: 5px; 2500 &:hover { 2501 text-decoration: none; 2502 } 2503 span { 2504 display: none; 2505 vertical-align: middle; 2506 color: ${t.colors.black}; 2507 ${t.breakpoints.lg} { 2508 display: inline-block; 2509 } 2510 } 2511 } 2512 `,headerCart:` 2513 display: inline-flex; 2514 border-radius: 0.35em; 2515 color: ${t.colors.black}; 2516 background: transparent; 2517 position: relative; 2518 padding: 0em; 2519 .header-cart-link:hover { 2520 text-decoration: none; 2521 } 2522 .header-cart-grid-container { 2523 margin-left: 0; 2524 margin-right: 0; 2525 .header-cart-price-container { 2526 display: none; 2527 padding-left: 0.75em !important; 2528 font-family: ${t.fonts.familySecondary}; 2529 font-weight: ${t.fonts.weightNormal}; 2530 } 2531 .header-cart-icon-container { 2532 position: relative; 2533 padding-right: 0.75em; 2534 .cart-quantity { 2535 position: absolute; 2536 border-radius: 0.8em; 2537 min-width: 2em; 2538 min-height: 1.65em; 2539 background: ${t.colors.headerCartBtnSmall}; 2540 top: 2px; 2541 left: 1.45em; 2542 font-family: ${t.fonts.familySecondary}; 2543 font-weight: ${t.fonts.weightBold}; 2544 font-size: 0.78em; 2545 padding: 1.5px 3px 0px; 2546 line-height: ${t.fonts.sizeLarge}; 2547 text-align: center; 2548 display: inline-block; 2549 color: ${t.colors.white}; 2550 } 2551 } 2552 } 2553 &.has-quantity { 2554 :not(.sticky-header) &{ 2555 background: transparent; 2556 color: ${t.colors.black}; 2557 .header-cart-link { 2558 color: ${t.colors.black}; 2559 } 2560 .header-cart-grid-container { 2561 .header-cart-icon-container { 2562 padding-right: 0.75em; 2563 .cart-quantity { 2564 background: ${t.colors.headerCartBtnSmall}; 2565 color: ${t.colors.white}; 2566 } 2567 } 2568 } 2569 } 2570 } 2571 .cart-confirmation-popup { 2572 background: ${t.colors.white}; 2573 border: 1px solid ${t.colors.grey20}; 2574 border-radius: 3px; 2575 padding: 10px; 2576 position: absolute; 2577 right: 0px; 2578 top: 68px; 2579 min-width: 180px; 2580 white-space: nowrap; 2581 color: ${t.colors.black}; 2582 display: none; 2583 i { 2584 padding-right: 0.15em; 2585 color: ${t.colors.secondary6}; 2586 } 2587 &.fadedown { 2588 ${t.mixins.animateFadeInDown}; 2589 display: block; 2590 z-index: 201; 2591 } 2592 &.fadeout { 2593 ${t.mixins.animateFadeOutUp}; 2594 } 2595 &::before { 2596 background: ${t.colors.white}; 2597 border: solid ${t.colors.grey20}; 2598 border-width: 0 1px 1px 0; 2599 content: ''; 2600 display: block; 2601 left: 150px; 2602 padding: 7px; 2603 position: absolute; 2604 top: -8px; 2605 transform: rotate(225deg); 2606 width: 1px; 2607 z-index: 1; 2608 } 2609 } 2610 .header-cart-price-container { 2611 display:none; 2612 } 2613 .header-cart-link { 2614 display: flex; 2615 flex-direction: column; 2616 align-items: center; 2617 gap: 5px; 2618 } 2619 .header-cart-icon-container { 2620 position: relative; 2621 } 2622 .cart-quantity { 2623 position: absolute; 2624 background: ${t.colors.primary1}; 2625 border-radius: 50px; 2626 border: 1px solid ${t.colors.white}; 2627 display: flex; 2628 align-items: center; 2629 justify-content: center; 2630 top: -7px; 2631 right: -8px; 2632 padding: 9px 5px; 2633 color: ${t.colors.white}; 2634 font-size: 14px; 2635 font-weight: 500;
2636 min-width: 20px; 2637 height: 20px; 2638 } 2639 2640 ${t.breakpoints.lg} { 2641 .header-cart-price-container { 2642 display: block; 2643 } 2644 2645 .header-cart-grid-container { 2646 .header-cart-price-container { 2647 display: block; 2648 } 2649 .header-cart-icon-container { 2650 padding-right: 0; 2651 .cart-quantity { 2652 display: none; 2653 } 2654 } 2655 } 2656 &.has-quantity { 2657 ${t.breakpoints.lg} { 2658 .header-cart-link, div.header-cart-link { 2659 .header-cart-price-container span,.header-cart-icon-container i { 2660 2661 } 2662 .sticky-header & { 2663 .header-cart-price-container span,.header-cart-icon-container i { 2664 color: ${t.colors.black}; 2665 } 2666 } 2667 } 2668 .header-cart-grid-container { 2669 .header-cart-icon-container { 2670 padding-right: 0.75em; 2671 .cart-quantity { 2672 display: inline-block; 2673 background: ${t.colors.white}; 2674 color: ${t.colors.headerCartBtn}; 2675 .sticky-header & { 2676 background: ${t.colors.headerCartBtn}; 2677 color: ${t.colors.white}; 2678 } 2679 } 2680 } 2681 } 2682 } 2683 :not(.sticky-header) &{ 2684 background: ${t.colors.headerCartBtn}; 2685 color: ${t.colors.white}; 2686 .header-cart-link { 2687 color: ${t.colors.white}; 2688 } 2689 .header-cart-grid-container { 2690 .header-cart-icon-container { 2691 .cart-quantity { 2692 display: inline-block; 2693 background: ${t.colors.white}; 2694 color: ${t.colors.headerCartBtn}; 2695 } 2696 } 2697 } 2698 } 2699 } 2700 } 2701 `,stickyHeader:` 2702 position: sticky; 2703 top: 0; 2704 background: ${t.colors.white}; 2705 z-index: 1; 2706 border-radius: 0; 2707 .stickyMainNavBar-container{ 2708 background-color: white; 2709 } 2710 `,headerSearchInput:` 2711 .search-icon { 2712 display: block; 2713 ${t.breakpoints.lg} { 2714 display: none; 2715 } 2716 } 2717 .searchbar-grid-block-container { 2718 position: fixed; 2719 top: 0px; 2720 left:0; 2721 width: 100%; 2722 display: none; 2723 box-shadow: 0px 4px 25px rgb(0 0 0 / 6%); 2724 border-radius: 0; 2725 background: ${t.colors.white}; 2726 z-index: 1; 2727 min-width: 30%; 2728 transition: min-width 1s ease-out; 2729 ${t.breakpoints.lg} { 2730 position: absolute; 2731 left: 0px; 2732 width: 100%; 2733 display: block; 2734 box-shadow: 0 0 0; 2735 } 2736 .searchbar-input-container { 2737 min-width: unset; 2738 position: relative; 2739 input { 2740 background-color: ${t.colors.white}; 2741 font-size: ${t.fonts.sizeDefault}; 2742 font-family: ${t.fonts.familySecondary}; 2743 width: 100%; 2744 padding: 10px 16px; 2745 line-height: normal; 2746 overflow: hidden; 2747 text-overflow: ellipsis; 2748 border: 0; 2749 border-radius: 0; 2750 &:focus { 2751 outline: none; 2752 border: 0; 2753 &::placeholder { 2754 opacity: 0; 2755 } 2756 } 2757 &:disabled { 2758 cursor: default; 2759 } 2760 &::placeholder { 2761 color: ${t.colors.grey40}; 2762 } 2763 &:not(:placeholder-shown) ~ .suffix-icon { 2764 display: block; 2765 } 2766 // This is a temporary fix will be remove in sprint 10 2767 &.temp { 2768 border: 1px solid ${t.colors.grey20}; 2769 border-radius: 50px !important; 2770 box-sizing: border-box; 2771 padding: 10px 16px; 2772 height: 46px 2773 } 2774 } 2775 .prefix-icon { 2776 position: absolute; 2777 top: 5px; 2778 right: 5px; 2779 background: ${t.colors.primary1}; 2780 padding: 8px; 2781 border-radius: 50px; 2782 color: ${t.colors.white}; 2783 width: 36px; 2784 height: 36px; 2785 display: none; 2786 ${t.breakpoints.lg} { 2787 display: block; 2788 font-size: 14px; 2789 } 2790 i {
2791 width: 20px; 2792 height: 20px; 2793 } 2794 } 2795 2796 .suffix-icon { 2797 display: none; 2798 position: absolute; 2799 top: 10px; 2800 right: 6px; 2801 cursor: pointer; 2802 ${t.breakpoints.lg} { 2803 right: 15px; 2804 } 2805 } 2806 } 2807 .searchbar-cancel-container { 2808 border-left: 1px solid ${t.colors.grey20}; 2809 outline: none; 2810 ${t.breakpoints.lg} { 2811 position: absolute; 2812 right: -15%; 2813 } 2814 ${t.breakpoints.xxl} { 2815 position: absolute; 2816 right: -12%; 2817 } 2818 .searchbar-cancel-link { 2819 display: block; 2820 text-decoration: none; 2821 padding: 0px 20px 0 16px; 2822 background: transparent; 2823 color: ${t.colors.black}; 2824 border: 0; 2825 cursor: pointer; 2826 &:hover, &:focus { 2827 outline:0; 2828 } 2829 } 2830 2831 ${t.breakpoints.lg} { 2832 border-left: 0; 2833 .searchbar-cancel-link { 2834 display: none; 2835 padding: 0; 2836 } 2837 } 2838 } 2839 } 2840 `,navStickyButton:` 2841 text-align: center; 2842 padding: 24px 0; 2843 border-top: 1px solid #DEDEDE; 2844 a + a { 2845 margin-left: 10px; 2846 } 2847 `},Search:{noResults:` 2848 .no-results { 2849 .container { 2850 text-align: center; 2851 margin: 30px 0px; 2852 .title { 2853 font-size: ${t.fonts.sizeH2}; 2854 font-weight: ${t.fonts.weightBold}; 2855 margin-bottom: 5px; 2856 } 2857 } 2858 2859 .query { 2860 font-size: ${t.fonts.sizeH2}; 2861 } 2862 } 2863 `,wrapper:` 2864 max-width: ${t.breakpointWidths?.xxl}px; 2865 margin-left: auto; 2866 margin-right: auto; 2867 // padding: 0px 15px; 2868 ${t.breakpoints.xxl} { 2869 padding: 0px; 2870 } 2871 h1 { 2872 margin-top: 0px; 2873 } 2874 .facets-navigation { 2875 padding:0 16px 16px 0; 2876 @media (max-width: 767px) { 2877 display: none; 2878 } 2879 } 2880 .show { 2881 display: block; 2882 } 2883 .hide { 2884 display: none; 2885 } 2886 .search-results-listing.loading { 2887 display: none; 2888 } 2889 .search-results-listing { 2890 .trending-items-container { 2891 max-width: calc(100vw - 32px); 2892 ${t.breakpoints.sm} { 2893 max-width: calc(100vw - 354px); 2894 } 2895 ${t.breakpoints.lg} { 2896 max-width: calc(100vw - 434px); 2897 } 2898 ${t.breakpoints.xxl} { 2899 max-width: calc(1680px - 434px) 2900 } 2901 } 2902 &.uk .plp-qty-selector-enhanced { 2903 .grid-addto-cart-btn, .loading-add-to-cart-btn { 2904 height: 44px; 2905 .btn-text-short { display: none; } 2906 @media (min-width: 860px) and (max-width: 1479px), (min-width: 488px) and (max-width: 767px) { 2907 .btn-text-full { display: none; } 2908 .btn-text-short { display: inline !important; } 2909 } 2910 } 2911 } 2912 .price-per-litre { 2913 font-size: 10px; 2914 font-weight: 300; 2915 width: auto; 2916 } 2917 } 2918 .search-toolbar-container + .loaderContainer { 2919 ${t.breakpoints.sm} { 2920 margin-top: 250px; 2921 } 2922 @media (max-width: 767px) { 2923 margin: 100px 0; 2924 } 2925 } 2926 .filter-header{ 2927 display:flex; 2928 align-items: baseline; 2929 justify-content: space-between; 2930 p { 2931 font-family: ${t.fonts.familyTertiary}; 2932 font-size: 26px; 2933 font-weight: ${t.fonts.weightMediumPlus}; 2934 } 2935 2936 .clear-refinements { 2937 background: none; 2938 color: ${t.colors.black}; 2939 font-size: ${t.fonts.sizeLarge}; 2940 line-height: ${t.fonts.lineHeightDefault}; 2941 text-decoration-line: underline; 2942 padding: 0; 2943 margin: 0 2px 0 0; 2944 cursor: pointer; 2945 border: none; 2946 box-shadow: none; 2947 &:hover { 2948 background: none; 2949 color: ${t.colors.black}; 2950 text-decoration-line: underline; 2951 } 2952 } 2953 } 2954 2955 margin-top: 15px; 2956 .search-toolbar-container { 2957 .hits-per-page { 2958 display: none; 2959 ${t.breakpoints.sm} { 2960 display: block; 2961 } 2962 } 2963 ${t.breakpoints.sm} { 2964 display: flex; 2965 gap: 15px; 2966 align-items: baseline; 2967 justify-content: space-between; 2968 margin-bottom: 16px; 2969 } 2970 .toolbar-start{ 2971 .refinements { 2972 display: none; 2973 ${t.breakpoints.sm} { 2974 display: block; 2975 } 2976 } 2977 flex:1 0 0; 2978 ${t.breakpoints.md} { 2979 padding-bottom: 16px; 2980 } 2981 } 2982 .toolbar-end { 2983 ${t.breakpoints.sm} { 2984 display: flex; 2985 flex-wrap: wrap; 2986 flex:0.9 0 0; 2987 justify-content:end; 2988 align-items: end; 2989 gap: 15px; 2990 ${t.breakpoints.lg} { 2991 gap: 25px; 2992 } 2993 } 2994 } 2995 2996 .quick-toggle-container { 2997 display: none; 2998 ${t.breakpoints.md} { 2999 display: flex; // hiding the Grid view. The list view is default, So hiding the toggle icons; 3000 align-items: center; 3001 3002 button { 3003 border: 1px solid ${t.colors.grey80}; 3004 width: 40px; 3005 height: 40px; 3006 display: flex; 3007 align-items: center; 3008 justify-content: center; 3009 padding: 0; 3010 &.list-icon { 3011 background-color: ${t.colors.white}; 3012 border-radius: 5px 0px 0px 5px; 3013 svg { 3014 path { 3015 fill: ${t.colors.grey80}; 3016 } 3017 } 3018 &.active { 3019 svg { 3020 path { 3021 fill: ${t.colors.black}; 3022 } 3023 } 3024 border: 1px solid ${t.colors.black}; 3025 background-color: ${t.colors.grey10}; 3026 } 3027 } 3028 &.grid-icon { 3029 background-color: ${t.colors.white}; 3030 border-radius: 0px 5px 5px 0px; 3031 svg { 3032 path { 3033 fill: ${t.colors.grey80}; 3034 } 3035 } 3036 &.active { 3037 border: 1px solid ${t.colors.black}; 3038 background-color: ${t.colors.grey10}; 3039 svg { 3040 path { 3041 fill: ${t.colors.black}; 3042 } 3043 } 3044 } 3045 } 3046 } 3047 } 3048 } 3049 } 3050 3051 .category-intro-copy { 3052 text-align: center; 3053 border: 1px solid ${t.colors.grey20}; 3054 border-radius: 10px; 3055 margin-bottom: 15px; 3056 padding: 24px 16px 32px; 3057 margin-top: 25px; 3058 h1 { 3059 &.Red, &.Rose, &.dessert { 3060 color: ${t.colors.primary1}; 3061 } 3062 &.White, &.Beer { 3063 color: #D89B00; 3064 } 3065 &.Fortified, &.Sparkling, &.Cider { 3066 color: ${t.colors.primary2}; 3067 } 3068 &.Mixed { 3069 color: ${t.colors.secondary1}; 3070 } 3071 margin-bottom: 20px; 3072 } 3073 @media (max-width: 767px) { 3074 p, span { 3075 font-size: 16px !important; 3076 } 3077 } 3078 } 3079 3080 .category-faq { 3081 margin: 30px 0px; 3082 .heading { 3083 font-family: ${t.fonts.familyTertiary}; 3084 font-weight: ${t.fonts.weightNormal}; 3085 font-size: ${t.fonts.sizeH2}; 3086 margin-bottom: 15px; 3087 text-transform: capitalize; 3088 } 3089 3090 u { 3091 text-decoration-line: blink; 3092 text-decoration: none; 3093 3094 a { 3095 text-decoration: underline; 3096 } 3097 } 3098 } 3099 3100 .category-banner { 3101 margin-bottom: 15px; 3102 margin-top: 25px; 3103 3104 p u { 3105 text-decoration-line: blink; 3106 text-decoration: none; 3107 3108 a { 3109 text-decoration: underline; 3110 } 3111 } 3112 } 3113 display: grid; 3114 grid-gap: 24px; 3115 ${t.breakpoints.xs} { 3116 grid-template-columns: auto; 3117 } 3118 ${t.breakpoints.sm} { 3119 grid-template-columns: 270px 1fr; 3120 } 3121 3122 ${t.breakpoints.md} { 3123 grid-template-columns: 228px 1fr; 3124 } 3125 ${t.breakpoints.lg} { 3126 grid-template-columns: 272px 1fr; 3127 } 3128 ${t.breakpoints.xl} { 3129 grid-template-columns: 292px 1fr; 3130 } 3131 ${t.breakpoints.xxl} { 3132 grid-template-columns: 402px 1fr; 3133 } 3134 .facets-navigation.hide-refinementlist{ 3135 display : none; 3136 } 3137 3138 .sort-filter-block{ 3139 display:flex; 3140 gap: 10px; 3141 @media (min-width: 768px) { 3142 .mobile-filter-box { 3143 display: none; 3144 } 3145 } 3146 } 3147 3148 @media (max-width: 767px) { 3149 .sort-filter-block{ 3150 gap: 0px; 3151 padding-bottom:16px; 3152 .filter-box { 3153 display: flex; 3154 height: 40px; 3155 justify-content: center; 3156 align-items: center; 3157 gap: 10px; 3158 flex: 1 0 0; 3159 border-radius: 5px 0px 0px 5px; 3160 border: 1px solid #303030; 3161 .applied-filter-red-dot-icon { 3162 display: inline-block; 3163 width: 9px; 3164 height: 9px; 3165 background-color: #D7363B; 3166 border-radius: 50%; 3167 position: relative; 3168 left: 42px; 3169 bottom: 8.5px; 3170 border: 1.5px solid #FFFFFF; 3171 } 3172 } 3173 .sort-box { 3174 border-radius: 0px 5px 5px 0px; 3175 border-width: 1px 1px 1px 0; 3176 border-color: #303030; 3177 border-style: solid; 3178 display: flex; 3179 justify-content: center; 3180 align-items: center; 3181 flex: 1 0 0; 3182 & .label { 3183 display:none; 3184 } 3185 & .options { 3186 border:none; 3187 max-height:38px; 3188 } 3189 } 3190 } 3191 } 3192 .refinement-drawer{ 3193 position: fixed; 3194 background-color: ${t.colors.lwDrGray}; 3195 z-index:500; 3196 .drawer-container{ 3197 position: fixed; 3198 width: 100%; 3199 top: 0px; 3200 left: 0px; 3201 bottom: 0px; 3202 max-height: 100%; 3203 background-color: ${t.colors.grey80}; 3204 display: flex; 3205 justify-content: flex-start; 3206 align-items: flex-start; 3207 .drawer-section{ 3208 outline: 0px; 3209 -webkit-tap-highlight-color: transparent; 3210 display: block; 3211 text-decoration: none; 3212 background-color: ${t.colors.white}; 3213 box-sizing: border-box; 3214 flex: 0 0 27.5rem; 3215 max-width: 100%; 3216 max-height: 100%; 3217 height: 100%; 3218 border-radius: 0px; 3219 overflow-y: auto; 3220 3221 .drawer-body{ 3222 position:relative; 3223 min-height: 100vh; 3224 padding: 1rem; 3225 & >:nth-of-type(2) .heading{ 3226 border-top:none; 3227 } 3228 .filter-header{ 3229 position:sticky; 3230 top:0; 3231 background:${t.colors.white}; 3232 z-index:1; 3233 display: flex; 3234 flex-direction: column; 3235 3236 & :first-of-type{ 3237 align-self: end; 3238 } 3239 .header-row{ 3240 display:flex; 3241 justify-content:space-between; 3242 align-items:center; 3243 width:100%; 3244 } 3245 } 3246 .bottom-button{ 3247 width:100%; 3248 position: sticky; 3249 margin: auto; 3250 background:${t.colors.white}; 3251 padding:10px; 3252 display:flex; 3253 justify-content:space-between; 3254 gap:10px; 3255 margin-bottom: 0; 3256 bottom:0; 3257 3258 3259 & button{ 3260 flex: 1; 3261 width:100%; 3262 display: flex; 3263 padding: 10px 16px; 3264 justify-content: center; 3265 align-items: center; 3266 gap: 4px; 3267 flex: 1 0 0; 3268 border-radius: 8px; 3269 border: 1px solid ${t.colors.secondary6}; 3270 } 3271 3272 & :first-of-type{ 3273 background:${t.colors.white}; 3274 color:black; 3275 padding: 10px 16px; 3276 border-radius: 8px; 3277 border: 1px solid ${t.colors.secondary6}; 3278 } 3279 } 3280 3281 } 3282 } 3283 } 3284 } 3285 body:has(.drawer-body:not(.refinement-drawer-show)) 3286 { 3287 overflow: visible; 3288 } 3289 3290 body:has(.drawer-body.refinement-drawer-show){ 3291 overflow: hidden; 3292 } 3293 .refinement-drawer.refinement-drawer-hide{ 3294 display:none; 3295 } 3296 .facets-navigation >:nth-of-type(2) .heading { 3297 border-top:none; 3298 } 3299 `,refinements:` 3300 .show { 3301 display: block; 3302 } 3303 .hide { 3304 display: none; 3305 } 3306 .text-capitalize { 3307 text-transform: capitalize; 3308 } 3309 .line-seperator { 3310 border-top: 1px solid #dadada; 3311 } 3312 .heading { 3313 display: flex; 3314 align-items: center; 3315 background-color: ${t.colors.white}; 3316 justify-content: space-between; 3317 border-top: 1px solid #dadada; 3318 .text-wrap { 3319 text-wrap: wrap; 3320 font-family: ${t.fonts.familySecondary}; 3321 } 3322 .title { 3323 font-weight: ${t.fonts.weightMediumPlus}; 3324 } 3325 button { 3326 text-transform: uppercase; 3327 background: transparent; 3328 padding: 16px 40px 16px 0px; 3329 line-height: ${t.fonts.lineHeightDefault}; 3330 color: black; 3331 width: 100%; 3332 text-align: left; 3333 border-radius: 0px; 3334 font-size: ${t.fonts.sizeLarge}; 3335 font-weight: ${t.fonts.weightBold}; 3336 border-width: 0px; 3337 position: relative; 3338 font-family: ${t.fonts.familySecondary}; 3339 &:hover { 3340 cursor: pointer; 3341 } 3342 i { 3343 right: 0; 3344 top: 50%; 3345 transform: translateY(-50%); 3346 position: absolute; 3347 } 3348 } 3349 } 3350 3351 .ais-RefinementList-searchBox { 3352 margin-bottom: 12px; 3353 .ais-SearchBox-form { 3354 height: 44px; 3355 .ais-SearchBox-input { 3356 padding: 0px ${t.fonts.sizeLarge}; 3357 border-radius: 5px; 3358 border: 1px solid var(--neutral-colours-cccccc, ${t.colors.grey20}); 3359 box-shadow: none; 3360 &::placeholder { 3361 color: ${t.colors.grey80}; 3362 } 3363 } 3364 button { 3365 border: none; 3366 background: white; 3367 padding: 0; 3368 position: absolute; 3369 right: ${t.fonts.sizeLarge};
3370 width: 20px; 3371 height: 20px; 3372 top: 50%; 3373 transform: translateY(-50%); 3374 svg { 3375 width: 20px; 3376 height: 20px; 3377 fill: ${t.colors.black}; 3378 } 3379 } 3380 &:before { 3381 content: none; 3382 } 3383 } 3384 } 3385 .ais-RefinementList-noResults{ 3386 color:red; 3387 padding-bottom: 16px; 3388 } 3389 ul.ais-RefinementList-list { 3390 margin: 0; 3391 li { 3392 &.ais-RefinementList-item { 3393 padding-bottom: 18px; 3394 .ais-RefinementList-label { 3395 .ais-RefinementList-checkbox { 3396 width: 20px; 3397 height: 20px; 3398 box-shadow: none; 3399 border-radius: 2px; 3400 color: ${t.colors.facetCheckboxColor}; 3401 } 3402 .ais-RefinementList-labelText { 3403 font-size: ${t.fonts.sizeLarge}; 3404 font-weight: 400; 3405 line-height: ${t.fonts.lineHeightDefault}; 3406 padding-left: 8px; 3407 color: ${t.colors.facetLabelColor}; 3408 .ais-Highlight-highlighted { 3409 background-color: transparent; 3410 color: ${t.colors.black}; 3411 } 3412 } 3413 .ais-RefinementList-count { 3414 font-size: ${t.fonts.sizeDefault}; 3415 line-height: ${t.fonts.lineHeightDefault}; 3416 background: none; 3417 border: none; 3418 padding: 0; 3419 margin-left: 5px; 3420 &:before { 3421 content: '('; 3422 } 3423 &:after { 3424 content: ')'; 3425 } 3426 } 3427 .rating-star { 3428 margin-left: 5px; 3429 } 3430 } 3431 } 3432 &.ais-RefinementList-item--selected .ais-RefinementList-checkbox:checked, 3433 .ais-GeoSearch-input:checked { 3434 background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Checkbox'%3E%3Crect width='18' height='18' fill='var(--checkbox-bg-color, ${t.colors.svgCheckboxBg})'/%3E%3Cpath id='Vector' d='M14 5L7.125 12L4 8.81818' stroke='var(--checkbox-stroke-color, ${t.colors.svgCheckboxStroke})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A"); 3435 background-size: 18px; 3436 color: transparent; 3437 } 3438 } 3439 } 3440 .ais-RefinementList-showMore:not([disabled]), 3441 .clear-refinements { 3442 background: none; 3443 color: ${t.colors.grey50}; 3444 font-size: ${t.fonts.sizeLarge}; 3445 line-height: ${t.fonts.lineHeightDefault}; 3446 text-decoration-line: underline; 3447 padding: 0; 3448 margin: 0 0 16px 0; 3449 cursor: pointer; 3450 border: none; 3451 box-shadow: none; 3452 &:hover { 3453 background: none; 3454 color: ${t.colors.black}; 3455 text-decoration-line: underline; 3456 } 3457 } 3458 .ais-RefinementList-showMore:not([disabled]) { 3459 position: absolute; 3460 } 3461 .clear-refinements-container { 3462 display: flex; 3463 justify-content: end; 3464 padding-right: 6px; 3465 } 3466 // .ais-RefinementList:has(.ais-RefinementList-showMore:not([disabled])) 3467 // ~ .clear-refinements-container:empty { 3468 // height: 40px; 3469 // } 3470 3471 .clear-refinements-container.have-showmore:empty{ 3472 height:40px 3473 } 3474 .ais-RefinementList:has(.ais-RefinementList-showMore[disabled]) 3475 ~ .clear-refinements-container:empty { 3476 height: 0; 3477 } 3478 3479 `,currentRefinement:` 3480 .row { 3481 display: flex; 3482 align-items: center; 3483 flex-wrap: wrap; 3484 gap: 10px; 3485 margin-bottom: 10px; 3486 } 3487 3488 .refinements { 3489 display: flex; 3490 gap: 4px; 3491 flex-wrap: wrap; 3492 } 3493 button { 3494 &.refinement-item { 3495 // width: 100%; 3496 color: ${t.colors.white}; 3497 display: flex; 3498 border-width: 1px; 3499 align-items: center; 3500 justify-content: space-between; 3501 border-radius: 0px; 3502 border-color: transparent; 3503 background-color: #01193c; 3504 border-radius: 15px; 3505 padding: 4px 15px; 3506 gap: 10px; 3507 margin-bottom: 4px; 3508 line-height: 14px; 3509 svg { 3510 path { 3511 stroke: ${t.colors.white}; 3512 } 3513 } 3514 :hover { 3515 cursor: pointer; 3516 border-color: #eee; 3517 filter: brightness(55%); 3518 } 3519 &.collapse-refinement{ 3520 background-color: ${t.colors.lWHUELWBlue}; 3521 color:black; 3522 filter: unset !important; 3523 } 3524 } 3525 &.clear-refinements { 3526 width: 100%; 3527 color: #333; 3528 background: transparent; 3529 text-decoration-line: underline; 3530 line-height: 24px; 3531 font-size: ${t.fonts.sizeLarge}; 3532 padding: 0px; 3533 margin-left:8px; 3534 :hover { 3535 text-transform: underline; 3536 cursor: pointer; 3537 } 3538 } 3539 } 3540 @media (max-width: 767px) { 3541 margin-bottom:14px; 3542 gap: 0; 3543 .refinements{ 3544 gap:4px; 3545 flex-wrap:wrap; 3546 margin-bottom:5px; 3547 .refinement-item{ 3548 margin-bottom: 0px; 3549 } 3550 } 3551 .refinement-item{ 3552 3553 &.collapse-refinement{ 3554 background-color: ${t.colors.lWHUELWBlue}; 3555 color:black; 3556 filter: unset !important; 3557 } 3558 } 3559 .clear-refinements-container{ 3560 3561 display: none; 3562 3563 } 3564 3565 } 3566 .text-capitalize { 3567 text-transform: capitalize; 3568 } 3569 `,sorting:` 3570 .results { 3571 .options { 3572 display: flex; 3573 align-items: center; 3574 justify-content: flex-start; 3575 border: 1px solid #222222; 3576 height: 40px; 3577 padding: 5px 5px 5px 10px; 3578 border-radius: 5px; 3579 font-family: ${t.fonts.familySecondary}; 3580 ${t.breakpoints.lg} { 3581 min-width: 200px; 3582 } 3583 .label { 3584 font-weight: 700; 3585 line-height: 24px; 3586 margin-right: 7px; 3587 } 3588 } 3589 } 3590 .ais-SortBy-select { 3591 border: none; 3592 box-shadow: none; 3593 -webkit-appearance: none; 3594 -moz-appearance: none; 3595 appearance: none; 3596 background: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 3597 96% / 10% no-repeat; 3598 width: 120px; 3599 padding: 0; 3600 }`,pagination:` 3601 .results { 3602 .options { 3603 display: flex; 3604 align-items: center; 3605 justify-content: flex-start; 3606 border: 1px solid #222222; 3607 height: 40px; 3608 padding: 5px 5px 5px 10px; 3609 border-radius: 5px; 3610 min-width: 190px; 3611 font-family: ${t.fonts.familySecondary}; 3612 .label { 3613 font-weight: 700; 3614 line-height: 24px; 3615 margin-right: 7px; 3616 } 3617 } 3618 @media (max-width: 767px) { 3619 display: none; 3620 } 3621 } 3622 .ais-HitsPerPage-select { 3623 border: none; 3624 box-shadow: none; 3625 -webkit-appearance: none; 3626 -moz-appearance: none; 3627 appearance: none; 3628 background: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 3629 85% / 25% no-repeat; 3630 width: 50px; 3631 padding: 0; 3632 } 3633 `,accordionWrapper:` 3634 .accordion-item { 3635 border-bottom: 1px solid ${t.colors.grey20}; 3636 padding: 10px 0px; 3637 // display: flex; 3638 align-items: center; /* Center the text and icon vertically */ 3639 cursor: pointer; 3640 } 3641 3642 .accordion-title { 3643 display: flex; 3644 justify-content: space-between; 3645 padding-right: 10px; 3646 align-items: center; 3647 .title { 3648 font-family: ${t.fonts.familySecondary}; 3649 font-size: 1.2em; 3650 font-weight: ${t.fonts.weightBold}; 3651 text-transform: capitalize; 3652 margin:0; 3653 padding:0; 3654 } 3655 } 3656 3657 .accordion-icon { 3658 margin-left: 8px; /* Add some space between the text and icon */ 3659 svg { 3660 max-height: 10px; 3661 } 3662 } 3663 .accordion-content { 3664 display: none; 3665 &.show-accordion { 3666 display: block; 3667 } 3668 } 3669 `,quickViewWrapper:` 3670 .description-title .mantine-gm39d{ 3671 font-weight: ${t.fonts.weightMediumPlus}; 3672 font-size: 16px; 3673 } 3674 &.quick-view-modal-container { 3675 .mantine-Modal-content .mantine-Modal-header { 3676 justify-content: flex-end; 3677 } 3678 &.rate-review { 3679 .mantine-Modal-body, .mantine-Modal-header { 3680 background-color: ${t.colors.primary3}; 3681 } 3682 } 3683 }s 3684 .mantine-Modal-overlay { 3685 z-index: 500; 3686 } 3687 .mantine-Modal-inner { 3688 z-index: 500; 3689 @media (max-width: 767px) { 3690 padding: 0; 3691 align-items: unset; 3692 } 3693 } 3694 .mantine-Modal-content { 3695 padding: 20px; 3696 border-radius: 10px; 3697 background: #F8F5EF; 3698 .mantine-Modal-header { 3699 background: #F8F5EF; 3700 .mantine-Modal-title { 3701 color: #000; 3702 font-size: 30px; 3703 font-weight: 500; 3704 } 3705 .mantine-CloseButton-root { 3706 padding: 0; 3707 line-height: 0; 3708 background: transparent; 3709 color: ${t.colors.black}; 3710 width: auto; 3711 height: auto; 3712 border: none; 3713 svg { 3714 width: 32px !important; 3715 height: 32px !important; 3716 } 3717 } 3718 } 3719 .mantine-Modal-body { 3720 padding: 0px; 3721 padding-top: 0; 3722 .PDP-title { 3723 margin-top: 0; 3724 font-size: 38px; 3725 line-height: 52px; 3726 @media (max-width: 767px) { 3727 font-size: 25px; 3728 line-height: 28px; 3729 } 3730 } 3731 .submission-success { 3732 text-align: center; 3733 } 3734 .table-container { 3735 header, .row { 3736 display: flex; 3737 } 3738 header { 3739 .column { 3740 font-weight: ${t.fonts.weightBold}; 3741 } 3742 } 3743 .row { 3744 border-bottom: 1px solid ${t.colors.grey20}; 3745 3746 } 3747 .column { 3748 flex: 1; 3749 padding: 10px 0px; 3750 } 3751 } 3752 .product-main-container { 3753 display: flex; 3754 .w-100 { 3755 width: 100%; 3756 } 3757 .product-image-container { 3758 max-width: 217px; 3759 position: relative; 3760 .image-container { 3761 text-align: center; 3762 position: relative; 3763 img { 3764 min-height: 400px; 3765 min-width: 112px; 3766 &.case { 3767 min-height: 275px; 3768 min-width: 306px; 3769 } 3770 } 3771 } 3772 .wine-details { 3773 ul { 3774 list-style: none; 3775 margin-top: 30px; 3776 padding-left: 30px; 3777 li { 3778 padding-bottom: 10px; 3779 display: flex; 3780 align-items: center; 3781 a { 3782 display: flex; 3783 align-items: center; 3784 } 3785 i, img { 3786 width: 32px; 3787 margin-right: 10px; 3788 } 3789 &:last-child { 3790 padding-bottom: 0px; 3791 } 3792 } 3793 } 3794 } 3795 &.case { 3796 max-width: 320px; 3797 } 3798 } 3799 .product-content-container { 3800 margin-left: 24px; 3801 @media (max-width: 767px) { 3802 margin-left: 0px; 3803 margin-top: 20px; 3804 } 3805 // .rating-country-container { 3806 // display: flex; 3807 // align-items: center; 3808 // justify-content: space-between; 3809 // @media (max-width: 767px) { 3810 // justify-content: unset; 3811 // } 3812 // .rating { 3813 // ${t.breakpoints.xl} { 3814 // display: flex; 3815 // gap: 5px; 3816 // } 3817 // .star-icons { 3818 margin-right:4px; 3819 // ${t.breakpoints.xl} { 3820 // gap: 5px; 3821 // display: inline-flex; 3822 // } 3823 // } 3824 // .rating-cout { 3825 // margin: 0 15px 0; 3826 // font-size: ${t.fonts.sizeDefault}; 3827 // font-weight: ${t.fonts.weightBold}; 3828 // } 3829 // .review-count { 3830 // text-decoration: underline; 3831 // } 3832 // } 3833 // .country { 3834 // display: flex; 3835 // align-items: center; 3836 // font-size: ${t.fonts.sizeLarge}; 3837 // line-height: ${t.fonts.lineHeightDefault}; 3838 // img, svg { 3839 // margin-right: 10px; 3840 // @media (max-width: 767px) { 3841 // width: 24px; 3842 // } 3843 // } 3844 // @media (max-width: 767px) { 3845 // font-size: 12px; 3846 // margin-left: 25px; 3847 // } 3848 // } 3849 // } 3850 .image-price-container { 3851 border-bottom: 1px solid ${t.colors.grey20}; 3852 } 3853 .image-container { 3854 text-align: center; 3855 margin: 30px 0; 3856 } 3857 .wine-details { 3858 margin-top: 30px; 3859 ul { 3860 list-style-type: none; 3861 padding: 0; 3862 height: 100px; 3863 li { 3864 display: flex; 3865 align-items: center; 3866 margin-bottom: 25px; 3867 float: left; 3868 width: 160px; 3869 a { 3870 display: flex; 3871 align-items: center; 3872 cursor: pointer; 3873 &:hover { 3874 text-decoration: none; 3875 } 3876 } 3877 i { 3878 margin-right: 10px; 3879 width: 24px; 3880 font-size: 24px; 3881 } 3882 svg { 3883 margin-right: 10px; 3884 width: 24px; 3885 height: 24px; 3886 } 3887 } 3888 } 3889 } 3890 .money-back-guarantee {
3891 background-color: ${t.colors.lWHUELWBlue}; 3892 padding: 15px; 3893 margin: 30px 0; 3894 display: flex; 3895 align-items: center; 3896 justify-content: space-between; 3897 .content { 3898 max-width: 429px; 3899 .descp { 3900 font-weight: ${t.fonts.weightBold}; 3901 padding-bottom: 10px; 3902 } 3903 } 3904 .icon i:before { 3905 font-size: 44px; 3906 } 3907 } 3908 &.case { 3909 .title-rating-container, .description-container { 3910 display: none; 3911 } 3912 } 3913 } 3914 @media (min-width: 768px) { 3915 .desktopOnly { 3916 display: block; 3917 } 3918 .mobileOnly { 3919 display: none; 3920 } 3921 } 3922 @media (max-width: 767px) { 3923 .desktopOnly { 3924 display: none; 3925 } 3926 .mobileOnly { 3927 display: block; 3928 } 3929 } 3930 } 3931 } 3932 } 3933 `,sliderWrapper:` 3934 .price-heading { 3935 line-height: ${t.fonts.lineHeightDefault}; 3936 text-transform: uppercase; 3937 // margin: 25px 0 15px; 3938 padding: 16px 0px; 3939 font-size: ${t.fonts.sizeLarge}; 3940 font-weight: ${t.fonts.weightBold}; 3941 border-top: 1px solid #dadada; 3942 3943 } 3944 .slider-root { 3945 position: relative; 3946 display: flex; 3947 align-items: center; 3948 margin: 25px 10px 40px 10px; 3949 .slider-track { 3950 position: relative; 3951 flex-grow: 1; 3952 background-color: #969696; 3953 height: 4px; 3954 border-radius: 9999px; 3955 .slider-range { 3956 position: absolute; 3957 background-color: ${t.colors.primary1}; 3958 height: 100%; 3959 } 3960 } 3961 .slider-thumb { 3962 position: relative; 3963 display: block; 3964 width: 12px; 3965 height: 12px; 3966 background-color: ${t.colors.primary1}; 3967 border-radius: 9999px; 3968 cursor: pointer; 3969 &[aria-label='Minimum']:after { 3970 left: 0; 3971 } 3972 &[aria-label='Maximum']:after { 3973 right: 0; 3974 } 3975 &:after { 3976 position: absolute; 3977 bottom: 15px; 3978 content: '\xa3'attr(aria-valuenow); 3979 font-size: 12px; 3980 line-height: 18px; 3981 } 3982 &:focus-visible { 3983 outline: none; 3984 } 3985 } 3986 } 3987 .range-input { 3988 display: flex; 3989 justify-content: center; 3990 margin: 20px 10px; 3991 .ais-RangeInput { 3992 width: 100%; 3993 label { 3994 width: 25%; 3995 &:first-of-type:before { 3996 content: 'From'; 3997 } 3998 &:before { 3999 content: 'To'; 4000 } 4001 } 4002 input { 4003 border: 1px solid ${t.colors.grey20}; 4004 border-radius: 5px; 4005 box-shadow: none; 4006 text-align: center; 4007 margin-top: 5px; 4008 width: 100%; 4009 padding: 0; 4010 } 4011 button { 4012 background: ${t.colors.btnsPrimaryBg}; 4013 text-align: center; 4014 margin: 21px 0 0 10px; 4015 line-height: 10px; 4016 border-radius: 3px; 4017 &:hover { 4018 background: ${t.colors.btnsPrimaryHoverBg}; 4019 border: none; 4020 } 4021 &:focus { 4022 color: ${t.colors.white}; 4023 } 4024 } 4025 } 4026 } 4027 `,hitWrapper:` 4028 button { 4029 width: 100%; 4030 } 4031 &.grid-view { 4032 .class-grid { 4033 display: block !important; 4034 } 4035 .ais-Hits-list { 4036 4037 grid-template-columns: 1fr; 4038 grid-gap: 18px; 4039 4040 @media (min-width: 860px) and (max-width: 1023px) { 4041 grid-template-columns: repeat(2, minmax(0, 1fr)); 4042 } 4043 4044 @media (min-width: 488px) and (max-width: 767px) { 4045 grid-template-columns: repeat(2, minmax(0, 1fr)); 4046 } 4047 4048 ${t.breakpoints.md} { 4049 grid-template-columns: 1fr 1fr 1fr 4050 } 4051 4052 ${t.breakpoints.xxl} { 4053 grid-gap: 26px; 4054 } 4055 .border-bottom-ccc{ 4056 border-bottom:none; 4057 } 4058 .web-description { 4059 .web-description-content { 4060 display: -webkit-box; 4061 -webkit-line-clamp: 2; 4062 -webkit-box-orient: vertical; 4063 overflow: hidden; 4064 text-overflow: ellipsis; 4065 } 4066 @media (max-width: 1365px) { 4067 display: none !important; 4068 } 4069 @media (max-width: 1600px){ 4070 &.case { 4071 position: absolute; 4072 top: 66% !important; 4073 } 4074 } 4075 @media (min-width: 1900){ 4076 &.case { 4077 position: absolute; 4078 top: 59% !important; 4079 } 4080 } 4081 @media (min-width: 1300px) and (max-width: 1400px) { 4082 &.case { 4083 position: absolute; 4084 top: 57%; 4085 } 4086 } 4087 margin: 20px 0; 4088 &.case { 4089 position: absolute; 4090 top: 70%; 4091 transform: translateY(-50%); 4092 margin: 0 auto !important; 4093 width: 90%; 4094 } 4095 } 4096 4097 @media (min-width: 768px) and (max-width: 1229px) { 4098 margin-top: 16px; 4099 } 4100 4101 .ais-Hits-item { 4102 display: flex; 4103 flex-direction: column; 4104 padding: 0px; 4105 border: 1px solid #BCBCBC; 4106 border-radius: 12px; 4107 transition: box-shadow 0.3s ease-in-out; 4108 &:not(.hit-item-v2) { 4109 ${t.breakpoints.sm} { 4110 min-height: 570px; 4111 } 4112 ${t.breakpoints.md} { 4113 min-height: 634px; 4114 border-radius: 4px; 4115 } 4116 ${t.breakpoints.xl} { 4117 min-height: 634px; 4118 } 4119 } 4120 &:hover { 4121 box-shadow: 0px 30px 60px 0px rgba(52, 31, 0, 0.10), 0px 10px 30px 0px rgba(30, 20, 0, 0.10); 4122 } 4123 .image-bg { 4124 width: 100%; 4125 border-radius: 4px; 4126 .image-container { 4127 height: 209px; 4128 .offer { 4129 .stock { 4130 position: absolute; 4131 left: 10px; 4132 bottom: 4px; 4133 margin-bottom: 0; 4134 z-index: 0; 4135 } 4136 svg { 4137 position: absolute; 4138 left: 10px; 4139 top: 10px; 4140 } 4141 } 4142 .image { 4143 .bottle { 4144 max-width: 52px; 4145 height: 177px; 4146 } 4147 } 4148 .quick-links-container { 4149 flex-direction: column-reverse; 4150 gap: 15px; 4151 bottom: 10px; 4152 } 4153 .quick-view-container { 4154 display: none; 4155 } 4156 } 4157 } 4158 &.sponsored-item { 4159 .image-bg .image-container .offer svg { 4160 top: 40px; 4161 } 4162 } 4163 .sponsored-badge { 4164 position: absolute; 4165 left: 0; 4166 top: 15px; 4167 padding: 3px 10px; 4168 font-size: ${t.fonts.sizeSmall}; 4169 background-color: ${t.colors.primary1}; 4170 color: ${t.colors.white}; 4171 border-top-right-radius: 4px; 4172 border-bottom-right-radius: 4px; 4173 } 4174 .hit-content { 4175 text-align: center; 4176 padding: 16px; 4177 width: 100%; 4178 margin: 0; 4179 ${t.breakpoints.xl} { 4180 min-height: 160px; 4181 } 4182 ${t.breakpoints.xxl} { 4183 min-height: 164px; 4184 } 4185 min-height: 185px; 4186 display:flex; 4187 flex-direction:column; 4188 justify-content: space-between; 4189 position: relative; 4190 .title { 4191 ${t.breakpoints.sm} { 4192 font-size: 18px; 4193 font-weight: 700; 4194 line-height: 140%; 4195 } 4196 ${t.breakpoints.xl} { 4197 font-size: 22px; 4198 font-weight: ${t.fonts.weightMediumPlus}; 4199 line-height: 120%; 4200 } 4201 ${t.breakpoints.xxl} { 4202 font-size: ${t.fonts.sizeH8} 4203 } 4204 } 4205 .happy-to-wait-container { 4206 min-height: 46px; 4207 background-color: #B3CFE5; 4208 padding: 8px; 4209 text-align: center; 4210 width: 100%; 4211 border-radius: 4px; 4212 ${t.breakpoints.sm} { 4213 margin: 10px 0 15px 0; 4214 } 4215 ${t.breakpoints.md} { 4216 margin: 4px 0; 4217 } 4218 ${t.breakpoints.xl} { 4219 margin: 10px 0 15px 0; 4220 } 4221 .date-expected { 4222 font-weight: ${t.fonts.weightBold}; 4223 } 4224 } 4225 .inline-container { 4226 .country-rating{ 4227 display: flex; 4228 justify-content: center; 4229 flex-direction: column; 4230 } 4231 .happy-to-wait-container{ 4232 min-height: 46px; 4233 margin-top: 10px; 4234 margin-bottom: 20px; 4235 } 4236 4237 justify-content: center; 4238 flex-direction: column; 4239 gap: 0; 4240 4241 .rating { 4242 a{ 4243 span{ 4244 svg{ 4245 margin-right:4px; 4246 } 4247 } 4248 } 4249 margin-top: 5px; 4250 order: 1; 4251 justify-content: center; 4252 } 4253 .country { 4254 color: ${t.colors.primary8}; 4255 align-items: center; 4256 justify-content: center; 4257 margin-bottom: 5px; 4258 order: 0; 4259 ${t.breakpoints.sm} { 4260 flex-direction: row; 4261 } 4262 ${t.breakpoints.md} { 4263 flex-direction: row; 4264 } 4265 ${t.breakpoints.xl} { 4266 flex-direction: row; 4267 } 4268 .country-grapeVariety.grapeVariety-container { 4269 margin-left: 0; 4270 ${t.breakpoints.xl} { 4271 margin-left: 8px; 4272 } 4273 ${t.breakpoints.xxl} { 4274 margin-left: 10px; 4275 } 4276 } 4277 } 4278 } 4279 .hide-inline-container { 4280 ${t.breakpoints.sm} { 4281 display: block !important; 4282 } 4283 ${t.breakpoints.md} { 4284 display: none !important; 4285 } 4286 ${t.breakpoints.xl} { 4287 display: block !important; 4288 } 4289 } 4290 .title { 4291 margin-bottom: 0px; 4292 ${t.breakpoints.md} { 4293 min-height: 56px; 4294 } 4295 @media (min-width: 1025px) { 4296 min-height: 56px; 4297 text-overflow: ellipsis; 4298 overflow: hidden; 4299 height: 0; 4300 } 4301 @media (min-width: 1366px) { 4302 min-height: 56px; 4303 } 4304 @media (min-width: 1920px) { 4305 min-height: 67px; 4306 } 4307 .titleDescSale { 4308 height: 100%; 4309 line-height: 28px; 4310 ${t.breakpoints.xxl} { 4311 height: 90%; 4312 } 4313 a{ 4314 display: -webkit-box; 4315 -webkit-line-clamp: 2; 4316 -webkit-box-orient: vertical; 4317 overflow: hidden; 4318 text-overflow: ellipsis; 4319 height: auto; 4320 ${t.breakpoints.xxl} { 4321 height: 100%; 4322 } 4323 } 4324 4325 } 4326 } 4327 .reserveTodayContainer { 4328 margin: 0 auto!important; 4329 width: 90%; 4330 > div { 4331 @media (min-width: 1025px) { 4332 padding: 10px; 4333 margin-bottom: 10px; 4334 margin-right:0; 4335 margin-left:0; 4336 } 4337 ${t.breakpoints.xl} { 4338 padding: 15px; 4339 margin: 0 20px 25px 20px; 4340 } 4341 } 4342 div { 4343 border: none; 4344 } 4345 } 4346 } 4347 .addToCart-container { 4348 width: 100%; 4349 padding: 0px 16px; 4350 ${t.breakpoints.sm} { 4351 position: absolute; 4352 bottom: 16px; 4353 left: 0; 4354 right: 0; 4355 margin: 0 auto; 4356 } 4357 .member-pricing-container { 4358 justify-content: center; 4359 } 4360 .lowestPricepossible, .lowestPricePossibleOnOffer { 4361 font-family: ${t.fonts.familySecondary}; 4362 letter-spacing: 0.18px; 4363 font-weight: 700; 4364 color: ${t.colors.primary1}; 4365 text-align: center; 4366 margin-bottom: 3px; 4367 &.no-pill-lowestPricepossible { 4368 color: ${t.colors.grey50}; 4369 } 4370 &.no-pill-lowestPricePossibleOnOffer { 4371 color: ${t.colors.grey50}; 4372 } 4373 4374 & + .price-per-litre { 4375 color: ${t.colors.primary1}; 4376 } 4377 &.no-pill-lowestPricepossible + .price-per-litre { 4378 color: ${t.colors.grey50}; 4379 } 4380 @media(min-width: 330px) and (max-width: 460px){ 4381 margin-bottom:10px; 4382 } 4383 @media (min-width: 1025px) { 4384 font-size: 14px; 4385 line-height: 130%; 4386 } 4387 ${t.breakpoints.lg} { 4388 font-size: 16px; 4389 line-height: 140%; 4390 } 4391 ${t.breakpoints.xl} { 4392 font-size: 16px; 4393 line-height: 140%; 4394 } 4395 ${t.breakpoints.xxl} { 4396 font-size: 18px; 4397 line-height: 140%; 4398 } 4399 .strike { 4400 font-family: ${t.fonts.familyTertiary}; 4401 font-weight: 400; 4402 text-decoration: line-through; 4403 } 4404 &.presell-primeur { 4405 color: #303030; 4406 font-weight: 400; 4407 font-family: ${t.fonts.familySecondary}; 4408 font-size: 16px; 4409 .currency { 4410 color: ${t.colors.black}; 4411 font-weight: 700; 4412 } 4413 } 4414 &.lowestPricePossibleOnOffer{ 4415 font-weight:400 !important; 4416 } 4417 } 4418 .maxSavingsContainer { 4419 text-align: center; 4420 .saving-section-content { 4421
4421 border-radius: 30px; 4422 background: ${t.colors.primary5}; 4423 font-size: 12px; 4424 font-weight: 700; 4425 line-height: 18px; 4426 padding: 5px 8px; 4427 display: inline-block; 4428 .saving { 4429 color: ${t.colors.primary1}; 4430 } 4431 } 4432 @media(min-width: 360px) and (max-width: 460px){ 4433 margin-bottom:10px; 4434 } 4435 @media(min-width: 300px) and (max-width: 360px){ 4436 margin-bottom:30px; 4437 } 4438 + .price-per-litre { 4439 color: ${t.colors.primary1}; 4440 margin-top: 4px; 4441 } 4442 } 4443 .price-per-litre { 4444 display: block; 4445 text-align: center; 4446 font-size: 10px; 4447 font-weight: 300; 4448 letter-spacing: 0; 4449 margin-left: 0; 4450 margin-top: 2px; 4451 width: 100%; 4452 line-height: 17.5px; 4453 } 4454 .top-price-section { 4455 padding-top: 0px; 4456 padding-bottom: 6px; 4457 display: block; 4458 .top-price-section { 4459 display: flex !important; 4460 } 4461 } 4462 .single-sku-container { 4463 text-align: center; 4464 .top-price-section { 4465 justify-content: center; 4466 gap: 15px; 4467 align-items: center; 4468 } 4469 } 4470 .country { 4471 justify-content: center; 4472 gap: 10px; 4473 height: 50px; 4474 } 4475 .plp-offer-info { 4476 display: flex; 4477 justify-content: center; 4478 align-items: center; 4479 text-align: left; 4480 margin-bottom: 3px; 4481 @media (min-width: 1230px) and (max-width: 1365px) { 4482 font-size: 13px; 4483 } 4484 @media (min-width: 1024px) and (max-width: 1135px) { 4485 font-size: 13px; 4486 } 4487 .lowestPricePossibleOnOffer { 4488 margin-bottom: 0px; 4489 } 4490 .plp-info-icon-btn { 4491 width: auto; 4492 padding: 0; 4493 border: none; 4494 background: transparent; 4495 margin-left: 8px; 4496 } 4497 .member-pricing-container { 4498 justify-content: flex-start; 4499 } 4500 .price-section .case-details { 4501 font-weight: normal; 4502 } 4503 ${t.breakpoints.sm} { 4504 .mantine-Popover-dropdown { 4505 max-width: 450px; 4506 } 4507 } 4508 .price-per-litre { 4509 display: inline-block; 4510 margin-left: 10px; 4511 color: inherit; 4512 width: auto; 4513 } 4514 .member-pricing-container { 4515 + .price-per-litre, .price-per-litre { 4516 margin-left: 5px; 4517 color: #20513B; 4518 } 4519 } 4520 } 4521 @media (max-width: 767px) { 4522 .mantine-Popover-dropdown { 4523 width: calc(100vw - 32px) !important; 4524 left: -1px !important; 4525 } 4526 } 4527 @media (min-width: 768px) and (max-width: 1023px) { 4528 .mantine-Popover-dropdown { 4529 width: calc(60vw - 50px)!important; 4530 } 4531 } 4532 .grid-addto-cart-container { 4533 margin-top: 12px; 4534 .member-pricing-container { 4535 justify-content: center; 4536 } 4537 .mantine-Popover-dropdown { 4538 .member-pricing-container { 4539 justify-content: flex-start; 4540 } 4541 @media (min-width: 1025px) { 4542 width: 350px !important; 4543 } 4544 @media (min-width: 1480px) and (max-width: 1680px) { 4545 width: 380px !important; 4546 } 4547 @media (min-width: 1551px) { 4548 width: 420px !important; 4549 } 4550 @media (min-width: 1680px) { 4551 width: 480px !important; 4552 } 4553 } 4554 .grid-addto-cart-btn {
4555 background-color: ${t.colors.btnsPrimaryBg}; 4556 &:hover { 4557 background-color: ${t.colors.btnsPrimaryHoverBg}; 4558 color: ${t.colors.white}; 4559 } 4560 } 4561 .plp-qty-selector-enhanced { 4562 .quantityFields { 4563 border: none; 4564 .quantity { 4565 width: 40px; 4566 min-height: 34px; 4567 text-align: center; 4568 padding: 6px; 4569 font-size: 16px; 4570 color: ${t.colors.black}; 4571 border-radius: 5px; 4572 border: 1px solid ${t.colors.grey20}; 4573 margin: 0 auto; 4574 &:focus { 4575 outline: none; 4576 } 4577 &.form-control{ 4578 border: none; 4579 } 4580 } 4581 .btn { 4582 width: 34px; 4583 height: 34px; 4584 background: ${t.colors.white}; 4585 border-radius: 5px; 4586 border: 1px solid ${t.colors.black}; 4587 color: ${t.colors.black}; 4588 padding: 0; 4589 cursor: pointer; 4590 &:disabled{ 4591 color: ${t.colors.grey20}; 4592 border: 1px solid ${t.colors.grey20}; 4593 cursor: auto; 4594 } 4595 } 4596 } 4597 .add-to-cart-btn-container { 4598 width: 100%; 4599 } 4600 @media (min-width: 1024px) and (max-width: 1117px), (min-width: 488px) and (max-width: 767px) { 4601 .add-to-cart-section { 4602 gap: 5px; 4603 .quantityFields { 4604 padding: 0px 7px 0 0; 4605 .btn { 4606 width: 28px; 4607 height: 28px; 4608 } 4609 .quantity { 4610 width: 30px; 4611 min-height: 30px; 4612 } 4613 } 4614 .add-to-cart-btn-container { 4615 .grid-addto-cart-btn, .loading-add-to-cart-btn { 4616 padding: 8px 20px; 4617 height: 34px; 4618 } 4619 } 4620 } 4621 } 4622 } 4623 } 4624 } 4625 &.hit-item-v2 { 4626 .image-bg { 4627 border-top-left-radius: 12px; 4628 border-top-right-radius: 12px; 4629 } 4630 ${t.breakpoints.md} { 4631 border-radius: 4px; 4632 .image-bg { 4633 border-top-left-radius: 4px; 4634 border-top-right-radius: 4px; 4635 } 4636 } 4637 .addToCart-container { 4638 position: unset; 4639 margin-bottom: 16px; 4640 margin-top: auto; 4641 } 4642 .hit-content { 4643 min-height: auto; 4644 .inline-container { 4645 margin-top: 2px; 4646 } 4647 .happy-to-wait-container { 4648 margin-bottom: 0px; 4649 } 4650 } 4651 } 4652 } 4653 } 4654 } 4655 &.list-view { 4656 .class-grid { 4657 display: none !important; 4658 } 4659 .ais-Hits-list { 4660 grid-template-columns: 1fr; 4661 4662 .ais-Hits-item { 4663 border-top: 1px solid #eee; 4664 display: block; 4665 box-shadow: none; 4666 padding: 32px 0px; 4667 align-items: flex-start; 4668 4669 &:first-of-type { 4670 border-top: none; 4671 } 4672 &:last-child { 4673 padding-bottom: 48px; 4674 } 4675 4676 display: grid; 4677 grid-template-columns: 1fr; 4678 gap: 24px; 4679 4680 ${t.breakpoints.lg} { 4681 grid-template-columns: 240px auto 320px; 4682 } 4683 4684 ${t.breakpoints.xl} { 4685 grid-template-columns: 340px auto 400px; 4686 } 4687 4688 .image-bg { 4689 border-radius: 8px; 4690 } 4691 4692 .hit-content{ 4693 .web-description{ 4694 height: fit-content; 4695 min-height: 0px; 4696 } 4697 } 4698 4699 .offer { 4700 .stock { 4701 position: absolute; 4702 left: 10px; 4703 bottom: 4px; 4704 margin-bottom: 0; 4705 } 4706 svg { 4707 position: absolute; 4708 left: 10px; 4709 top: 10px; 4710 } 4711 } 4712 4713 .addToCart-container { 4714 .country { 4715 display: none; 4716 } 4717 } 4718 4719 4720 .quick-links-container { 4721 flex-direction: column-reverse; 4722 gap: 15px; 4723 bottom: 10px; 4724 } 4725 4726 .quick-view-container { 4727 display: none; 4728 } 4729 4730 } 4731 4732 4733 } 4734 } 4735 .ais-Hits div + ol { 4736 @media (min-width: 768px) { 4737 margin-top: 16px; 4738 } 4739 } 4740 .ais-Hits-list { 4741 display: grid; 4742 grid-template-columns: 1fr; 4743 .ais-Hits-item { 4744 box-shadow: none; 4745 position : relative; 4746 font-size: 1rem; 4747 .ais-Highlight { 4748 mark { 4749 color: ${t.colors.primary1}; 4750 } 4751 } 4752 4753 .title { 4754 font-size: ${t.fonts.lineHeightDefault}; 4755 font-family: ${t.fonts.familyTertiary}; 4756 font-weight: ${t.fonts.weightBold}; 4757 line-height: 32px; 4758 margin-bottom: 10px; 4759 } 4760 4761 .prod-link { 4762 a { 4763 text-decoration: underline; 4764 &:hover { 4765 text-decoration: none; 4766 } 4767 } 4768 } 4769 4770 .pill { 4771 display: inline-flex; 4772 padding: 2px 5px; 4773 justify-content: center; 4774 align-items: center; 4775 gap: 10px; 4776 border-radius: 30px; 4777 margin: 10px 0px; 4778 background: rgba(255, 168, 161, 0.4); 4779 .saving { 4780 color: ${t.colors.primary1}; 4781 font-size: 10px; 4782 font-family: ${t.fonts.familySecondary}; 4783 font-weight: ${t.fonts.weightBold}; 4784 } 4785 } 4786 4787 .stock { 4788 background: ${t.colors.primary6}; 4789 color: ${t.colors.white}; 4790 font-size: 12px; 4791 line-height: 18.75px; 4792 gap: 5px; 4793 padding: 3px 8px; 4794 margin-top: 0; 4795 .case-count { 4796 font-size: 16px; 4797 font-weight: 700; 4798 } 4799 } 4800 4801 .hit-content { 4802 margin-bottom: 5px; 4803 .inline-container { 4804 display: flex; 4805 flex-wrap: wrap; 4806 align-items: center; 4807 gap: 15px; 4808 .country-rating{ 4809 margin:10px 0px; 4810 } 4811 .rating { 4812 display: flex; 4813 align-items: center; 4814 margin-top: 20px; 4815 justify-content: center; 4816 ${t.breakpoints.sm} { 4817 justify-content: start; 4818 } 4819 .star-icons { 4820 display: flex; 4821 } 4822 .review-count { 4823 color: ${t.colors.primary8}; 4824 font-size: 14px; 4825 line-height: 24px; 4826 margin-left: 5px; 4827 text-decoration: underline; 4828 } 4829 } 4830 } 4831 .web-description { 4832 margin-top: 10px; 4833 margin-bottom: 20px; 4834 color: ${t.colors.primary8}; 4835 font-size: ${t.fonts.sizeLarge}; 4836 line-height: 20px; 4837 ${t.breakpoints.xl} { 4838 font-size: 16px; 4839 font-weight: 400; 4840 line-height: 1.4rem; 4841 4842 text-overflow: ellipsis; 4843 overflow: hidden; 4844 height: 0; 4845 min-height: 46px; 4846 } 4847 ${t.breakpoints.xxl} { 4848 font-size: ${t.fonts.sizeLarge}; 4849 line-height: 140%; 4850 min-height: 44px; 4851 } 4852 } 4853 } 4854 4855 .image-bg { 4856 background-color: ${t.colors.primary3}; 4857 padding: 10px 0px; 4858 &.gift-image { 4859 background: none; 4860 padding: 0px; 4861 .image-container{ 4862 height: 229px; 4863 padding: 0px; 4864 } 4865 .web-description { 4866 min-height: 95px!important; 4867 } 4868 .image { 4869 margin: 0px; 4870 height: 100%; 4871 } 4872 .image img { 4873 border-radius: 10px; 4874 object-fit: cover; 4875 } 4876 } 4877 } 4878 4879 .image-container { 4880 position: relative; 4881 padding: 20px; 4882 height: 245px; 4883 max-height: 245px; 4884 .image { 4885 margin: 10px 0px; 4886 position: relative; 4887 height: 100%; 4888 img { 4889 object-fit: contain; 4890 object-position: 50% 50%; 4891 border-radius: 10px; 4892 position: absolute; 4893 height: 100%; 4894 width: 100%; 4895 left: 0; 4896 top: 0; 4897 right: 0; 4898 bottom: 0; 4899 color: transparent; 4900 } 4901 } 4902 .image-center { 4903 position: relative; 4904 height: 100%; 4905 width: 100%; 4906 display: flex; 4907 align-items: center; 4908 justify-content: center; 4909 margin: 0; 4910 } 4911 .offer { 4912 text-align: center; 4913 } 4914 4915 .quick-links-container { 4916 display: flex; 4917 gap: 10px; 4918 position: absolute; 4919 top: 15px; 4920 right: 15px; 4921 .zoom, .favourite { 4922 background: white; 4923 padding: 5px 5px 0px 5px; 4924 border-radius: 20px; 4925 &:hover { 4926 cursor: pointer; 4927 } 4928 } 4929 } 4930 .quick-view-btn { 4931 position: absolute; 4932 bottom: 15px; 4933 right: 15px; 4934 max-width: 95px; 4935 padding: 0; 4936 max-height: 24px; 4937 border-radius: 4px; 4938 background-color: ${t.colors.secondary4}; 4939 .mantine-Button-label { 4940 font-size: 12px; 4941 line-height: 14.06px; 4942 font-weight: 400; 4943 } 4944 &:focus { 4945 color: ${t.colors.white}; 4946 border-color: transparent; 4947 } 4948 } 4949 } 4950 } 4951 } 4952 li.ais-Hits-item:empty { 4953 display: none !important; 4954 } 4955 @media (max-width: 767px) { 4956 .ais-Hits-list { 4957 grid-gap: 30px; 4958 } 4959 .ais-Hits-item{ 4960 border-radius: 12px; 4961 border-top: none; 4962 border: 1px solid #CCC; 4963 background: ${t.colors.white}; 4964 padding: 0px!important; 4965 .hit-content{ 4966 padding:16px; 4967 padding-bottom: 0; 4968 text-align: center; 4969 .inline-container { 4970 justify-content: center; 4971 .rating { 4972 order: 1; 4973 } 4974 } 4975 } 4976 .addToCart-container { 4977 margin:0px 16px 16px 16px; 4978 .form-control.quantity { 4979 border:none; 4980 } 4981 .customProdQantityField { 4982 & div:first-of-type { 4983 min-width:38px; 4984 margin-right: 8px; 4985 } 4986 } 4987 .add-to-cart-btn-container { 4988 .cart-button { 4989 button { 4990 padding: 8px 24px; 4991 @media (max-width: 374px) { 4992 padding: 8px 16px; 4993 } 4994 } 4995 } 4996 } 4997 } 4998 } 4999 } 5000 `,searchBoxWrapper:` 5001 .aa-Autocomplete { 5002 display: flex; 5003 flex-direction: column; 5004 5005 .aa-Form { 5006 box-shadow: none; 5007 border: 0; 5008 border-radius: 50px; 5009 display: flex; 5010 width: 100%; 5011 align-items: center; 5012 ${t.breakpoints.lg} { 5013 border: 1px solid ${t.colors.grey20}; 5014 } 5015 } 5016 .aa-InputWrapperPrefix { 5017 display: none; 5018 } 5019 .aa-InputWrapper { 5020 padding-left: 0; 5021 width: 100%; 5022 .aa-Input { 5023 border-radius: 50px !important; 5024 box-sizing: border-box; 5025 box-shadow: none; 5026 margin-bottom:0; 5027 } 5028 } 5029 .aa-InputWrapperSuffix { 5030 padding-right: 10px; 5031 z-index: 1; 5032 ${t.breakpoints.lg} { 5033 padding-right: 4px; 5034 } 5035 button { 5036 &.aa-ClearButton { 5037 vertical-align: middle; 5038 background: ${t.colors.primary1}; 5039 padding: 5px; 5040 border-radius: 50px !important; 5041 color: ${t.colors.white}; 5042 width: 26px;
5043 height: 26px; 5044 5045 ${t.breakpoints.lg} { 5046 padding: 8px; 5047 width: 36px; 5048 height: 36px; 5049 } 5050 5051 svg { 5052 width: 26px; 5053 height: 26px; 5054 5055 &:focus { 5056 outline: none; 5057 } 5058 } 5059 } 5060 &:hover { 5061 } 5062 } 5063 } 5064 } 5065 `,autocompletePanel:` 5066 display: flex; 5067 align-content: stretch; 5068 column-gap: 30px; 5069 5070 .ui-container { 5071 display: flex; 5072 gap: 25px; 5073 flex-direction: column; 5074 ${t.breakpoints.md} { 5075 flex-direction: unset; 5076 } 5077 .aa-Item { 5078 &[aria-selected="true"] { 5079 background-color: transparent; 5080 } 5081 } 5082 5083 ${o.z?.algoliaNewView&&` 5084 gap: 0px; 5085 margin-bottom: 50px; 5086 ${t.breakpoints.md} { 5087 gap: 25px; 5088 margin-bottom: 0px; 5089 } 5090 `} 5091 5092 #query-suggestions { 5093 .aa-ItemIcon { 5094 display: none; 5095 } 5096 .aa-ItemActions { 5097 display: none; 5098 5099 } 5100 } 5101 5102 #recent-searches { 5103 .aa-ItemActions button:nth-of-type(1) { 5104 background-color: transparent; 5105 padding: 0px; 5106 display: inline-grid; 5107 5108 &:hover { 5109 background-color: transparent; 5110 } 5111 svg { 5112 background-repeat: no-repeat; 5113 background-position: center; 5114 background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4L12 12' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 5115 path { 5116 display: none; 5117 } 5118 } 5119 } 5120 .aa-ItemActions button:nth-of-type(2), 5121 .aa-ItemIcon { 5122 display: none; 5123 } 5124 .aa-ItemWrapper:hover { 5125 text-decoration: underline; 5126 } 5127 .aa-ItemContentTitle { 5128 mark { 5129 font-weight: ${t.fonts.weightNormal}; 5130 } 5131 } 5132 } 5133 5134 .results-image { 5135 box-shadow: none; 5136 height: 60px; 5137 min-width: 70px; 5138 width: 60px; 5139 img { 5140 height: 60px; 5141 max-height: none; 5142 max-width: none; 5143 } 5144 ${o.z?.algoliaNewView&&`height: 83px; 5145 min-width: 80px; 5146 width: 70px; 5147 img { 5148 height: 83px; 5149 width:100%; 5150 object-fit:contain; 5151 }`} 5152 } 5153 5154 .aa-SourceHeader { 5155 border-bottom: 1px solid #eee; 5156 font-size: ${t.fonts.sizeDefault}; 5157 padding-bottom: 10px; 5158 text-transform: uppercase; 5159 white-space: nowrap; 5160 .aa-SourceHeaderTitle { 5161 font-size: 1em; 5162 font-weight: ${t.fonts.weightNormal}; 5163 color: ${t.colors.black}; 5164 } 5165 ${o.z?.algoliaNewView&&`border-bottom: none; 5166 text-transform: capitalize; 5167 font-size: 16px; 5168 padding: 10px 0; 5169 margin: 0; 5170 .aa-SourceHeaderTitle { font-weight: bold; text-transform: none; }`} 5171 } 5172 5173 .ui-plugins { 5174 ${o.z?.algoliaNewView&&` 5175 order: 3; 5176 .collection-search { 5177 .aa-Source { 5178 .aa-List { 5179 .aa-Item { 5180 padding-left: 0; 5181 } 5182 } 5183 } 5184 } 5185 .aa-Source { 5186 .aa-List { 5187 .aa-Item { 5188 padding-left: 0; 5189 } 5190 } 5191 } 5192 ${t.breakpoints.md} { 5193 order: 1; 5194 } 5195 `} 5196 .aa-Source { 5197 margin-bottom: 25px; 5198 } 5199 } 5200 .ui-products { 5201 ${o.z?.algoliaNewView&&` 5202 order: 2; 5203 &:empty, &:has(> div:empty) { 5204 height: auto; 5205 } 5206 .no-results-message { 5207 text-transform: none; 5208 font-size: 16px; 5209 white-space: break-spaces; 5210 ${t.breakpoints.sm} { 5211 font-size: 20px; 5212 } 5213 } 5214 .view-all-items-container a { 5215 text-decoration: underline; 5216 } 5217 .aa-Item:has(.no-results-message) { 5218 display: none; 5219 } 5220 ${t.breakpoints.md} { 5221 order: 2; 5222 padding-bottom: 50px; 5223 height: calc(98vh - 150px); 5224 overflow: scroll; 5225 scrollbar-width: none; 5226 .aa-SourceHeader { 5227 position: sticky; 5228 top: 0; 5229 z-index: 1; 5230 background: white; 5231 padding: 10px 0; 5232 margin: 0px; 5233 } 5234 } 5235 ${t.breakpoints.lg} { 5236 height: calc(94vh - 150px); 5237 } 5238 &:has(.no-results-message) { 5239 max-width: 100% 5240 } 5241 `} 5242 } 5243 .ui-recommended { 5244 ${o.z?.algoliaNewView&&` 5245 order: 1; 5246 .aa-Source { 5247 margin-bottom: 20px; 5248 .aa-SourceHeader { 5249 letter-spacing: 0.4px; 5250 margin-bottom: 5px; 5251 font-size: 18px; 5252 } 5253 .aa-Item { 5254 padding: 0; 5255 .recommended-section { 5256 .aa-ItemContent { 5257 grid-auto-flow: column; 5258 align-items: start; 5259 .results-image { 5260 width: 162px; 5261 height: 162px; 5262 background-color: ${t.colors.primary3}; 5263 img { 5264 height: 145px; 5265 } 5266 } 5267 .aa-ItemContentBody { 5268 gap: 10px; 5269 padding-top: 10px; 5270 padding-left: 5px; 5271 } 5272 } 5273 } 5274 } 5275 } 5276 ${t.breakpoints.md} { 5277 order: 3; 5278 padding-bottom: 50px; 5279 .aa-Source { 5280 margin-bottom: 0px; 5281 .aa-SourceHeader { 5282 letter-spacing: normal; 5283 margin-bottom: 10px; 5284 font-size: 20px; 5285 } 5286 .aa-Item { 5287 .recommended-section { 5288 .aa-ItemContent { 5289 grid-auto-flow: row; 5290 .results-image { 5291 width: 220px; 5292 height: 220px; 5293 background-color: ${t.colors.primary3}; 5294 img { 5295 height: 180px; 5296 } 5297 } 5298 .aa-ItemContentBody { 5299 padding-top: 0px; 5300 padding-left: 0px; 5301 } 5302 } 5303 } 5304 } 5305 } 5306 } 5307 `} 5308 } 5309 } 5310 `,searchOverlay:` 5311 position: fixed; 5312 left: 0; 5313 right: 0; 5314 height: 100%; 5315 background: ${t.colors.black}; 5316 opacity: 0.6; 5317 `},Footer:{default:` 5318 font-size: ${t.fonts.sizeDefault}; 5319 ${t.mixins.footerBase} 5320 .footer-nav-links { 5321 background: ${t.colors.primary3}; 5322 box-shadow: 0 0 0 100vmax ${t.colors.primary3}; 5323 .wrapper { 5324 .navItem-navigation { 5325 p{ 5326 font-weight: ${t.fonts.weightBold}; 5327 } 5328 .tab-panel { 5329 ul{ 5330 margin: 12px 0px 0px 20px; 5331 ${t.breakpoints.lg} { 5332 margin-left: 0; 5333 } 5334 li { 5335 line-height : 35px; 5336 padding: 0; 5337 a:hover { 5338 color: unset; 5339 } 5340 } 5341 } 5342 } 5343 } 5344 } 5345 } 5346 .social-connections, 5347 .footer-bottom-section { 5348 color: ${t.colors.black}; 5349 } 5350 `,navItems:` 5351 ${t.mixins.footerNavItems} 5352 `},DrawerMenu:{drawerContainer:` 5353 .mantine-Drawer-overlay { 5354 z-index: 501; 5355 } 5356 .mantine-Drawer-inner { 5357 z-index: 501; 5358 left: 0; 5359 } 5360 .mantine-Drawer-content { 5361 flex: 0 0 328px; 5362 ${t.breakpoints.sm} { 5363 flex: 0 0 380px; 5364 } 5365 } 5366 .mantine-Drawer-body { 5367 padding: 0; 5368 height: 100%; 5369 border-top: ${t.colors.grey20}; 5370 display: flex; 5371 flex-direction: column; 5372 .drawer-header-logo-section { 5373 width: 100%; 5374 padding: 16px 24px; 5375 top: 0; 5376 z-index: 10; 5377 background-color: ${t.colors.white}; 5378 display: flex; 5379 align-items: center; 5380 justify-content: space-between; 5381 box-shadow: 0px -1px 0px 0px rgba(204, 204, 204, 1) inset; 5382 #header-logo a { 5383 border: 0; 5384 padding: 0; 5385 &:focus-visible { 5386 outline: none; 5387 } 5388 } 5389 } 5390 .drawer-menu-heading { 5391 font-weight: ${t.fonts.weightBold}; 5392 font-size: ${t.fonts.sizeH4}; 5393 letter-spacing: 0.03em; 5394 margin: 0; 5395 background: #EEEAE2; 5396 padding: 8px 16px; 5397 text-align: center; 5398 min-height: 60px; 5399 display: flex; 5400 align-items: center; 5401 justify-content: center; 5402 text-transform: uppercase; 5403 color: ${t.colors.grey50}; 5404 font-family: ${t.fonts.familySecondary}; 5405 margin-left: -24px; 5406 margin-right: -24px; 5407 } 5408 .drawer-main { 5409 background: ${t.colors.primary3}; 5410 height: 100%; 5411 display: flex; 5412 flex-direction: column; 5413 flex: 1 1 auto;
5414 overflow-y: scroll; 5415 overflow-x: hidden; 5416 padding-left: 24px; 5417 padding-right: 24px; 5418 .highlighted-link { 5419 box-shadow: 0px 1px 0px 0px #DBDBDB inset; 5420 * { 5421 color: ${t.colors.primary1}; 5422 text-decoration: underline; 5423 } 5424 } 5425 a,span { 5426 font-family: ${t.fonts.familySecondary}; 5427 font-weight: ${t.fonts.weightNormal}; 5428 font-size: ${t.fonts.sizeRoot}; 5429 color: #303030; 5430 line-height: 18px; 5431 padding: 12px 0; 5432 display: block; 5433 &:hover,&:focus,&:focus-visible { 5434 text-decoration: none; 5435 outline: 0; 5436 background-color: transparent; 5437 } 5438 span { 5439 border: 0; 5440 padding: 0; 5441 } 5442 } 5443 } 5444 .drawer-footer-sticky-button-section { 5445 width: 100%; 5446 padding: 16px; 5447 background-color: ${t.colors.white}; 5448 display: flex; 5449 boxShadow: 0px -5px 40px 0px rgba(0, 20, 30, 0.1); 5450 gap: 16px; 5451 left: 0; 5452 justify-content: center; 5453 align-items: center; 5454 a { 5455 letter-spacing: 0.03em; 5456 text-transform: uppercase; 5457 font-size: ${t.fonts.sizeSmall}; 5458 padding: 15px 12px; 5459 line-height: 14px; 5460 ${t.breakpoints.sm} { 5461 padding: 15px 24px; 5462 }, 5463 }, 5464 }, 5465 }, 5466 5467 `,mobileNavMenuContainer:` 5468 position: relative; 5469 margin: 0 -24px; 5470 5471 a{ 5472 padding: 18px 0px; //reapply mantine pad 5473 border-bottom-width: 1px; 5474 &:hover{ 5475 text-decoration: none; 5476 } 5477 } 5478 5479 .mantine-Drawer-body & .mantine-NavLink-body, 5480 .mantine-Drawer-body & .mantine-NavLink-rightSection { 5481 border: none; 5482 margin: 0; 5483 padding: 0; 5484 } 5485 5486 .mantine-NavLink-root { 5487 border-top: 1px solid ${t.colors.grey20}; 5488 border-radius: 0; 5489 padding: 15px 24px; 5490 position: relative; 5491 display: flex; 5492 background: transparent; 5493 color: black; 5494 margin: 0px; 5495 5496 &:focus, &:hover{ 5497 background: transparent; 5498 border-color: transparent; 5499 border-top: 1px solid ${t.colors.grey20}; 5500 color: black; 5501 } 5502 } 5503 5504 .mantine-NavLink-children { 5505 padding-bottom: 20px; 5506 5507 .mantine-NavLink-root { 5508 border-top-width: 0; 5509 padding: 7px 0; 5510 } 5511 } 5512 5513 .mantine-NavLink-root:first-of-type { 5514 border-top-width: 0; 5515 } 5516 5517 .navMenuItemIcon{ 5518 ${t.icons["chevron-right"]} 5519 :before { 5520 ${t.mixins.iconBase} 5521 font-size: ${t.fonts.lineHeightDefault}; 5522 } 5523 } 5524 .mainnav-mobile-drawer-social-panel { 5525 display: flex; 5526 justify-content: center; 5527 padding: 16px 24px; 5528 background-color: ${t.colors.white}; 5529 gap: 55px; 5530 border-top: 1px solid ${t.colors.grey20}; 5531 > div { 5532 a { 5533 padding: 0; 5534 } 5535 } 5536 } 5537 .mainnav-mobile-drawer-badges-panel { 5538 display: flex; 5539 flex-wrap: wrap; 5540 padding: 16px 24px; 5541 align-items: center; 5542 justify-content: center; 5543 gap: 10px; 5544 > div { 5545 &:nth-of-type(1) { 5546 flex-basis: 100%; 5547 text-align: center; 5548 order: 3; 5549 } 5550 a { 5551 padding: 0; 5552 border: 0; 5553 } 5554 } 5555 } 5556 .mainnav-mobile-drawer-footer-links-panel { 5557 padding: 0 24px; 5558 > div { 5559 box-shadow: 0px -1px 0px 0px #DBDBDB inset; 5560 } 5561 .navItem-navigation { 5562 margin: 0; 5563 p { 5564 color: ${t.colors.grey60}; 5565 text-transform: unset; 5566 font-size: 16px; 5567 font-weight: ${t.fonts.weightNormal}; 5568 padding: 16px 0; 5569 } 5570 &.navItem-navigation-active div p{ 5571 color: ${t.colors.primary1}; 5572 } 5573 .tab-indicator { 5574 i { 5575 font-size: ${t.fonts.lineHeightDefault}; 5576 } 5577 } 5578 .tab-indicator.tab-collapse { 5579 i { 5580 color: ${t.colors.grey60}; 5581 } 5582 } 5583 .tab-indicator.tab-expand { 5584 i { 5585 color: ${t.colors.primary1}; 5586 } 5587 } 5588 .tab-panel { 5589 border-bottom: 1px solid #DBDBDB; 5590 ul { 5591 margin: 0; 5592 li { 5593 padding: 0; 5594 a { 5595 padding: 12px 0; 5596 display: block; 5597 color: ${t.colors.grey50}; 5598 font-weight: ${t.fonts.weightNormal}; 5599 line-height: 18px; 5600 text-align: left; 5601 } 5602 } 5603 } 5604 } 5605 &:last-child { 5606 .tab-panel { 5607 border-bottom: 0; 5608 } 5609 } 5610 } 5611 } 5612 5613 .level1MenuPane{ 5614 transition: left 0.3s ease; 5615 position: absolute; 5616 width: 100%; 5617 height: auto; 5618 top: 0; 5619 & > div.menu-container > div + div { 5620 display: none; 5621 } 5622 .cms-conditional-container:not(:first-of-type) { 5623 .level1Link:first-of-type { 5624 border-top: 1px solid ${t.colors.grey20}; 5625 } 5626 } 5627 5628 .level1Link{ 5629 span { 5630 font-family: ${t.fonts.headerMainNavTitle}; 5631 font-size: ${t.fonts.sizeH4}; 5632 font-weight: ${t.fonts.weightBold}; 5633 letter-spacing: 0.01em; 5634 text-transform: unset; 5635 padding: 0; 5636 } 5637 &[data-expanded=true] span, &:active span{ 5638 color: ${t.colors.primary1}; 5639 } 5640 5641 &.emphasize, &.emphasize span { 5642 color: ${t.colors.primary1}; 5643 } 5644 } 5645 a.level1Link { 5646 padding: 15px 24px; 5647 display: flex; 5648 font-family: ${t.fonts.headerMainNavTitle}; 5649 font-size: ${t.fonts.sizeH4}; 5650 font-weight: ${t.fonts.weightBold}; 5651 letter-spacing: 0.01em; 5652 text-transform: unset; 5653 text-decoration: none; 5654 border-bottom: 1px solid ${t.colors.grey20}; 5655 5656 &.emphasize, &.emphasize span { 5657 color: ${t.colors.primary1}; 5658 } 5659 5660 &:not(:first-of-type) { 5661 border-top: 1px solid ${t.colors.grey20}; 5662 } 5663 } 5664 a.level1Link:hover { 5665 color: ${t.colors.primary1}; 5666 } 5667 a.level1Link > div { 5668 margin-right: auto; 5669 } 5670 } 5671 .level2And3MenuPane { 5672 transition: left 0.3s ease; 5673 padding: 0 24px; 5674 position: absolute; 5675 width: 100%; 5676 height: 100%; 5677 .mantine-NavLink-root { 5678 padding-right: 0; 5679 padding-left: 0; 5680 span { 5681 font-family: ${t.fonts.familySecondary}; 5682 font-weight: ${t.fonts.weightMedium}; 5683 font-size: ${t.fonts.sizeH4}; 5684 color: #303030; 5685 padding: 0; 5686 } 5687 &[data-expanded=true] span{ 5688 color: ${t.colors.primary1}; 5689 font-weight: ${t.fonts.weightBold}; 5690 } 5691 .mantine-NavLink-rightSection[data-rotate] { 5692 transform: rotate(-90deg); 5693 } 5694 &.level2Link .mantine-NavLink-rightSection[data-rotate] { 5695 transform: rotate(180deg); 5696 } 5697 &:last-of-type { 5698 border-bottom: 1px solid ${t.colors.grey20}; 5699 &[data-expanded=true] { 5700 border-bottom: 0; 5701 } 5702 + div { 5703 border-bottom: 1px solid ${t.colors.grey20}; 5704 } 5705 } 5706 } 5707 .mantine-NavLink-children { 5708 padding: 0; 5709 a { 5710 display: block; 5711 padding: 12px 0; 5712 font-weight: ${t.fonts.weightNormal}; 5713 color: ${t.colors.grey50}; 5714 text-align: left; 5715 letter-spacing: 0em; 5716 &.navMenuSectionLink { 5717 text-decoration: underline; 5718 color: ${t.colors.primary1}; 5719 } 5720 } 5721 } 5722 div.navMenuBackLink{ 5723 border-bottom: 0; 5724 text-transform: none; 5725 background: #EEEAE2; 5726 padding: 8px 16px; 5727 text-align: center; 5728 min-height: 60px; 5729 display: flex; 5730 align-items: center; 5731 justify-content: center; 5732 position: relative; 5733 margin-left: -24px; 5734 margin-right: -24px; 5735 button.navMenuBackButton { 5736 position: absolute; 5737 left: 16px; 5738 background: transparent; 5739 border: none; 5740 cursor: pointer; 5741 padding: 0; 5742 display: flex; 5743 align-items: center; 5744 justify-content: center; 5745 color: ${t.colors.grey50}; 5746 &:hover { 5747 opacity: 0.7; 5748 } 5749 i{ 5750 color: ${t.colors.grey50}; 5751 } 5752 } 5753 span, a.navMenuBackLinkTitle { 5754 font-family: ${t.fonts.familySecondary}; 5755 font-weight: ${t.fonts.weightMediumPlus}; 5756 font-size: ${t.fonts.sizeH4}; 5757 letter-spacing: 0.03em; 5758 text-transform: uppercase; 5759 color: ${t.colors.grey50}; 5760 border: none; 5761 padding: 0; 5762 } 5763 a.navMenuBackLinkTitle { 5764 text-decoration: underline; 5765 &:hover { 5766 text-decoration: underline; 5767 } 5768 } 5769 } 5770 .navMenuContent{ 5771 margin-top: 20px; 5772 //TODO: this tweaks the styling of the link in the MenuBanner but we should 5773 //find a more elegant/targetted way to fix this 5774 a{ 5775 border: 0; 5776 padding: 0; 5777 } 5778 .richtext-wrapper { 5779 p { 5780 margin-top: ${t.space.sm}; 5781 margin-bottom: ${t.space.sm}; 5782 line-height: initial; 5783 &:first-of-type { 5784 margin-top: 0; 5785 } 5786 &:last-child { 5787 margin-bottom: 0; 5788 } 5789 a { 5790 line-height: initial; 5791 } 5792 }
5793 &.richtext-has-bg { 5794 padding: 1rem; 5795 } 5796 } 5797 } 5798 .navMenuContent:has(.richtext-wrapper){ 5799 margin-bottom: 10px; 5800 margin-top: 0px; 5801 } 5802 } 5803 `},MenuDropdown:{dropdown:{boxShadow:"0px 2px 20px 0px #00141E33",borderRadius:"12px",margin:0,width:"190px !important","&.mantine-Menu-dropdown":{padding:"8px 0px 15px",maxHeight:"calc(100vh - 260px)",overflowY:"auto",".sticky-header &":{maxHeight:"calc(100vh - 240px)"}},"&.account-navbar .dynamicComponents":{textAlign:"left",a:{padding:"8px 21px",display:"block"}}},item:{textAlign:"left",padding:"8px 21px !important","&:hover":{backgroundColor:"transparent",textDecoration:"underline"}},itemLabel:{fontFamily:t.fonts.familySecondary,fontWeight:t.fonts.weightNormal,fontSize:t.fonts.sizeRoot,color:t.colors.black,lineHeight:"normal",".signout-button &":{color:`${t.colors.primary1}`}},arrow:{border:"1px solid transparent",borderBottomColor:"transparent",borderRightColor:"transparent"},divider:{borderColor:t.colors.grey20,marginTop:"12px",marginBottom:"11px"}},TrustPilotWidget:{skeletonWrapperStyle:` 5804 display: flex; 5805 flex-direction: row; 5806 align-items: flex-start; 5807 gap: 24px; 5808 padding: 60px 0px; 5809 justify-content: center; 5810 ${t.breakpoints.md} { 5811 justify-content: space-between; 5812 } 5813 `,headingSkeletonStyle:` 5814 display: flex; 5815 flex-direction: column; 5816 gap: 8px; 5817 max-width: 200px; 5818 align-items: center; 5819 `,reviewCardStyle:` 5820 display: flex; 5821 flex-direction: column; 5822 gap: 10px; 5823 padding: 12px; 5824 &:nth-last-child(-n + 4) { 5825 display: none; 5826 } 5827 ${t.breakpoints.lg} { 5828 &:nth-child(-n + 4) { 5829 display: flex; 5830 } 5831 } 5832 ${t.breakpoints.md} { 5833 &:nth-child(-n + 2) { 5834 display: flex; 5835 } 5836 } 5837 `,starsAndTitleStyle:` 5838 display: flex; 5839 flex-direction: column; 5840 gap: 6px; 5841 `},CmsConditionalContainer:{wrapper:"",mobileOnly:` 5842 ${t.breakpoints.md} { 5843 display: none; 5844 } 5845 `,desktopOnly:` 5846 display: none; 5847 ${t.breakpoints.md} { 5848 display: block; 5849 } 5850 `},CmsContentSlot:{skeleton:` 5851 /* shimmer animation */ 5852 @keyframes skeleton-shimmer { 5853 0% { 5854 transform: translateX(-100%); 5855 } 5856 100% { 5857 transform: translateX(100%); 5858 } 5859 } 5860 5861 /* base skeleton style */ 5862 &.skeleton { 5863 background-color: #e6e6e6; 5864 position: relative; 5865 overflow: hidden; 5866 } 5867 5868 /* animated overlay */ 5869 &.skeleton::after { 5870 content: ''; 5871 position: absolute; 5872 top: 0; 5873 left: 0; 5874 width: 100%; 5875 height: 100%; 5876 transform: translateX(-100%); 5877 background: linear-gradient( 5878 90deg, 5879 rgba(255, 255, 255, 0) 0%, 5880 rgba(255, 255, 255, 0.5) 50%, 5881 rgba(255, 255, 255, 0) 100% 5882 ); 5883 animation: skeleton-shimmer 1.2s linear infinite; 5884 } 5885 5886 /* respects prefers-reduced-motion */ 5887 @media (prefers-reduced-motion: reduce) { 5888 &.skeleton::after { 5889 animation: none; 5890 background: none; 5891 } 5892 }`},CmsBanner:{default:` 5893 overflow: hidden; 5894 .banner{ 5895 ${t.breakpoints.md}{ 5896 padding: 5% 5% 5% 5%; 5897 position:relative; 5898 } 5899 ${t.breakpoints.lg}{ 5900 padding: 5% 15% 5% 10%; 5901 } 5902 } 5903 .banner-firstgrid{ 5904 position: relative; 5905 padding:0px; 5906 margin:0px; 5907 order:1 5908 } 5909 .banner-secondgrid{ 5910 position: relative; 5911 padding:0px; 5912 margin:0px; 5913 order: 2 5914 } 5915 .banner-img{ 5916 display: block; 5917 object-fit:contain; 5918 } 5919 .banner-imgcomp{ 5920 ${t.breakpoints.md}{ 5921 position: absolute; 5922 top:50%; 5923 left: 50%; 5924 transform: translate(-50%, -50%); 5925 } 5926 } 5927 .banner-sources{ 5928 padding:0px; 5929 } 5930 .banner-title { 5931 color: ${t.colors.white}; 5932 font-weight:${t.fonts.weightMedium}; 5933 padding-bottom: 12px; 5934 text-align:center; 5935 margin:0%; 5936 font-size:22px; 5937 font-family:${t.fonts.familyTertiary}; 5938 padding-top:36px; 5939 5940 ${t.breakpoints.md}{ 5941 text-align:left; 5942 font-size:60px; 5943 font-family:${t.fonts.familyPrimary}; 5944 } 5945 } 5946 .banner-content { 5947 a { 5948 color: ${t.colors.white}; 5949 } 5950 padding-left:${t.fonts.sizeLarge}; 5951 padding-right:${t.fonts.sizeLarge}; 5952 5953 ${t.breakpoints.md} { 5954 padding:0px 0px 6px 0px; 5955 } 5956 } 5957 5958 .banner-button{ 5959 display: flex; 5960 gap: ${t.space.lg}; 5961 flex-wrap: wrap; 5962 align-items: center; 5963 padding:0 ${t.space.lg}; 5964 ${t.breakpoints.md}{ 5965 padding:0; 5966 } 5967 > .cart-button-wrap { 5968 width: 100%; 5969 ${t.breakpoints.sm} { 5970 width: auto; 5971 } 5972 .grid-addto-cart-btn { 5973 width: 100%; 5974 } 5975 } 5976 >a{ 5977 width: 100%; 5978 text-align: center; 5979 ${t.breakpoints.sm}{ 5980 width: auto; 5981 min-width: 180px; 5982 } 5983 button { 5984 font-size: 12px; 5985 font-weight: ${t.fonts.weightMediumPlus}; 5986 text-transform: uppercase; 5987 letter-spacing: 0.24px; 5988 min-width: 140px; 5989 padding: 2px 16px; 5990 background: transparent; 5991 5992 cursor: pointer;
5993 &.darkColor { 5994 color: ${t.colors.primary8}; 5995 border: 1px solid ${t.colors.primary8}; 5996 &:hover { 5997 background-color: ${t.colors.btnsPrimaryHoverBg}; 5998 color: ${t.colors.white}; 5999 border-color: ${t.colors.btnsPrimaryHoverBg}; 6000 } 6001 } 6002 &.lightColor { 6003 color: ${t.colors.white}; 6004 border: 1px solid #f8f8f8; 6005 &:hover { 6006 background-color: ${t.colors.white}; 6007 color: ${t.colors.primary8}; 6008 } 6009 } 6010 } 6011 } 6012 } 6013 .banner-info{ 6014 padding: 16px; 6015 margin-bottom: 24px; 6016 ${t.breakpoints.xs}{ 6017 padding: 16px 6018 } 6019 ${t.breakpoints.sm}{ 6020 padding: 30px; 6021 margin-bottom: 0; 6022 } 6023 ${t.breakpoints.md}{ 6024 padding: 32px 6025 } 6026 ${t.breakpoints.lg}{ 6027 padding: 40px 85px; 6028 } 6029 ${t.breakpoints.xxl}{ 6030 padding: 40px 120px; 6031 } 6032 } 6033 `,wrapper:` 6034 margin-bottom: 12px; 6035 border-radius: 8px; 6036 padding: 24px 16px 0; 6037 ${t.breakpoints.xs} { 6038 padding: 16px; 6039 } 6040 ${t.breakpoints.sm} { 6041 margin-bottom: 24px; 6042 padding: 24px; 6043 } 6044 .banner-info { 6045 6046 max-width: 764px; 6047 margin: 0 auto; 6048 padding: 0; 6049 .banner-content { 6050 padding: 0; 6051 a:hover { 6052 text-decoration: none; 6053 } 6054 } 6055 .banner-button { 6056 margin-top: 16px; 6057 display: flex; 6058 align-items: center; 6059 gap: 16px; 6060 6061 flex-wrap: wrap; 6062 padding: 0; 6063 ${t.breakpoints.xs}{ 6064 gap: 12px; 6065 } 6066 a { 6067 button { 6068 font-size: 12px; 6069 font-weight: ${t.fonts.weightMediumPlus}; 6070 text-transform: uppercase; 6071 letter-spacing: 0.24px; 6072 min-width: 140px; 6073 padding: 2px 16px; 6074 background: transparent; 6075 6076 cursor: pointer; 6077 &.darkColor { 6078 color: ${t.colors.primary8}; 6079 border: 1px solid ${t.colors.primary8}; 6080 &:hover { 6081 background-color: ${t.colors.btnsPrimaryHoverBg}; 6082 color: ${t.colors.white}; 6083 border-color: ${t.colors.btnsPrimaryHoverBg}; 6084 } 6085 } 6086 &.lightColor { 6087 color: ${t.colors.white}; 6088 border: 1px solid #f8f8f8; 6089 &:hover { 6090 background-color: ${t.colors.white}; 6091 color: ${t.colors.primary8}; 6092 } 6093 } 6094 } 6095 } 6096 } 6097 h2, 6098 p { 6099 margin: 0; 6100 } 6101 } 6102 `,bannerSkeleton:` 6103 display: flex; 6104 justify-content: space-between; 6105 align-items: center; 6106 padding: 20px; 6107 min-height: 300px; 6108 .text-section{ 6109 flex: 1; 6110 max-width: 60%; 6111 margin-left: 40px; 6112 } 6113 .image-section{ 6114 margin-left: 40px; 6115 min-height: 500px; 6116 } 6117 .cta-section{ 6118 display: flex; 6119 gap:10px; 6120 } 6121 `,BannerWithButton:` 6122 position:relative; 6123 .banner-content { 6124 display: flex; 6125 flex-direction: column; 6126 padding:15px !important; 6127 ${t.breakpoints.xl} { 6128 padding:18px !important; 6129 } 6130 color: ${t.colors.btnsPrimaryColor}; 6131 justify-content: space-between; 6132 width: 100%; 6133 height: 100%; 6134 position:absolute; 6135 background: linear-gradient(90deg, #000 0.05%, rgba(0, 0, 0, 0.00) 107.69%); 6136 z-index:2; 6137 .banner-button { 6138 margin-top: 10px; 6139 a { 6140 margin: 5px; 6141 button { 6142 font-size: 12px; 6143 font-weight: ${t.fonts.weightMediumPlus}; 6144 text-transform: uppercase; 6145 letter-spacing: 0.24px; 6146 min-width: 140px; 6147 padding: 2px 16px; 6148 background: transparent; 6149 cursor: pointer;
6150 &.darkColor { 6151 color: ${t.colors.primary8}; 6152 border: 1px solid ${t.colors.primary8}; 6153 &:hover { 6154 background-color: ${t.colors.btnsPrimaryHoverBg}; 6155 color: ${t.colors.white}; 6156 border-color: ${t.colors.btnsPrimaryHoverBg}; 6157 } 6158 } 6159 &.lightColor { 6160 color: ${t.colors.white}; 6161 border: 1px solid #f8f8f8; 6162 &:hover { 6163 background-color: ${t.colors.white}; 6164 color: ${t.colors.primary8}; 6165 } 6166 } 6167 } 6168 } 6169 } 6170 } 6171 & img{ 6172 min-height:230px; 6173 } 6174 `,ExternalVideoBackgroundContenVariant:` 6175 position: relative; 6176 overflow: hidden; 6177 > div { 6178 position: absolute; 6179 left: 0; 6180 top: 0; 6181 ${t.breakpoints.md} { 6182 transform: scale(1.55); 6183 } 6184 ${t.breakpoints.lg} { 6185 transform: scale(1.32); 6186 } 6187 ${t.breakpoints.xl} { 6188 transform: scale(1.1); 6189 } 6190 ${t.breakpoints.xxl} { 6191 transform: none; 6192 } 6193 } 6194 `,ExternalVideoBackgroundTintedVariant:` 6195 > .banner { 6196 position: absolute; 6197 left: 0; 6198 top: 0; 6199 width: 100%; 6200 height: 100%; 6201 z-index: 1; 6202 margin: 0; 6203 } 6204 .external-video-player { 6205 position: absolute; 6206 left: 0; 6207 top: 0; 6208 } 6209 `},bannerSkeleton:{wrapper:`display: flex; 6210 justify-content: space-between; 6211 align-items: center; 6212 padding: 20px; 6213 min-height: 300px; 6214 .text-section{ 6215 flex: 1; 6216 max-width: 60%; 6217 margin-left: 40px; 6218 } 6219 .image-section{ 6220 margin-left: 40px; 6221 min-height: 500px; 6222 }`},CmsMenuBanner:{wrapper:` 6223 display: flex; 6224 flex-direction: column; 6225 align-items: end; 6226 6227 .nav-banner-img { 6228 width: 100%; 6229 display: block; 6230 height: auto; 6231 } 6232 .main-content-container & { 6233 display: unset; 6234 a { 6235 display: inline-block; 6236 img { 6237 width: auto; 6238 } 6239 } 6240 } 6241 `},CmsNavigation:{wrapper:` 6242 `,body:` 6243 &.navigation-link { 6244 display: flex; 6245 flex-direction: column; 6246 flex-wrap: wrap; 6247 6248 a{ 6249 text-wrap:nowrap; 6250 } 6251 > a { 6252 text-wrap:initial; 6253 line-height: 18px; 6254 margin-bottom: ${t.fonts.sizeDefault}; 6255 width: fit-content; 6256 } 6257 } 6258 `,sectionLinkFooter:` 6259 margin-top:20px; 6260 text-wrap:nowrap; 6261 a{ 6262 display: inline-block; 6263 text-decoration: underline; 6264 } 6265 i{ 6266 ${t.mixins.iconBase} 6267 ${t.icons["chevron-right"]} 6268 display: inline-block; 6269 font-size: ${t.fonts.lineHeightDefault}; 6270 margin-left: 0px; 6271 ${t.breakpoints.xl}{ 6272 margin-left: 8px; 6273 } 6274 } 6275 `},CmsArticle:{wrapper:` 6276 display: flex; 6277 flex-direction: column; 6278 margin-bottom: 20px; 6279 > * { 6280 flex-basis: 50%; 6281 } 6282 ${t.breakpoints.lg} { 6283 margin-bottom: 0; 6284 } 6285 img { 6286 max-width: 100%; 6287 height: 100%; 6288 } 6289 .article-container { 6290 .fluid-container & { 6291 padding: 0 16px; 6292 } 6293 margin-top: 24px; 6294 > p { 6295 font-weight: ${t.fonts.weightNormal}; 6296 font-size: ${t.fonts.fontSize16}; 6297 line-height: 22.4px; 6298 color: ${t.colors.grey60}; 6299 } 6300 h2 { 6301 margin-top: 8px; 6302 margin-bottom: 16px; 6303 color: ${t.colors.black}; 6304 } 6305 .secondary { 6306 color: ${t.colors.black}; 6307 } 6308 .date { 6309 color: ${t.colors.grey60}; 6310 } 6311 .article-content { 6312 color: ${t.colors.grey60}; 6313 p { 6314 ${t.mixins.body1} 6315 } 6316 } 6317 } 6318 `}
6318,CmsCarousel:{viewport:` 6319 padding-bottom: 24px; 6320 `,indicators:` 6321 bottom: 17px; 6322 `,indicator:` 6323 background: ${t.colors.secondary9}; 6324 width: 8px; 6325 height: 8px; 6326 border-radius: 100%; 6327 opacity: 1; 6328 6329 &[data-active] { 6330 background: ${t.colors.grey50}; 6331 } 6332 `,controls:` 6333 position: static; 6334 margin: 0 auto; 6335 padding: 0; 6336 ${t.breakpoints.sm}{ 6337 max-width: 275px; 6338 } 6339 `,control:` 6340 width: 44px; 6341 height: 44px; 6342 border-color: ${t.colors.secondary9}; 6343 svg { 6344 width: 1.5rem !important; 6345 height: 1.5rem !important; 6346 } 6347 6348 &[data-inactive] { 6349 background: transparent !important; 6350 } 6351 `},CmsVideo:{videoCompCss:` 6352 display: flex; 6353 margin: 0 auto; 6354 position: relative; 6355 justify-content: center; 6356 align-items: center; 6357 max-width: 1100px; 6358 margin: 0 auto; 6359 6360 .main-content-container & .video-container { 6361 position: relative; 6362 height: 0; 6363 width: 100%; 6364 & > div, 6365 .cms-image-container img { 6366 position: absolute; 6367 left: 0; 6368 top: 0; 6369 width: 100% !important; 6370 height:100% !important; 6371 object-fit: cover; 6372 } 6373 .react-player__shadow { 6374 display: none !important; 6375 } 6376 } 6377 &.full-width { 6378 display: grid; 6379 grid-template-columns: 1fr; 6380 min-height: 600px; 6381 height: 100%; 6382 max-width: none; 6383 .full-width-overlay { 6384 grid-row-start: 1; 6385 grid-column-start: 1; 6386 width: 100%; 6387 height: 100%; 6388 z-index: 1; 6389 6390 .video-grid { 6391 height: 100%; 6392 margin: 0; 6393 .overlay-content { 6394 display: flex; 6395 flex-direction: column; 6396 justify-content: center; 6397 height: 100%; 6398 color: ${t.colors.white}; 6399 padding: 16px; 6400 ${t.breakpoints.sm}{ 6401 padding: 40px 32px; 6402 } 6403 ${t.breakpoints.xl}{ 6404 padding: 40px 72px; 6405 } 6406 ${t.breakpoints.xxl}{ 6407 padding: 40px 120px; 6408 } 6409 .play-button { 6410 border: 1px solid ${t.colors.white}; 6411 padding: 12px 24px; 6412 border-radius: 1px; 6413 cursor: pointer; 6414 6415 display: flex; 6416 gap: 8px; 6417 align-items: center; 6418 justify-content: space-between; 6419 } 6420 } 6421 } 6422 } 6423 .video-container { 6424 grid-row-start: 1; 6425 grid-column-start: 1; 6426 width: 100%; 6427 height: 100%; 6428 padding: 0 !important; 6429 .react-player__shadow { 6430 display: none !important; 6431 } 6432 .cms-image-container { 6433 width: 100%; 6434 height:100%; 6435 img { 6436 width: 100%; 6437 height: 100%; 6438 ${t.breakpoints.xs} { 6439 min-height: 600px; 6440 object-fit: cover; 6441 } 6442 } 6443 } 6444 div { 6445 width: 100% !important; 6446 height:100% !important; 6447 } 6448 ${t.breakpoints.sm} { 6449 height: 600px; 6450 } 6451 ${t.breakpoints.md} { 6452 height: 625px; 6453 } 6454 } 6455 } 6456 &.playing { 6457 background-color: ${t.colors.black}; 6458 .video-container { 6459 width:100%; 6460 margin: 0 auto; 6461 ${t.breakpoints.xs} { 6462 width: 100%; 6463 height: 211px; 6464 } 6465 ${t.breakpoints.sm} { 6466 width: 100%; 6467 height: 432px; 6468 } 6469 ${t.breakpoints.md} { 6470 width: 100%; 6471 height: 576px; 6472 } 6473 ${t.breakpoints.lg} { 6474 width: 1068px; 6475 height: 600px; 6476 } 6477 } 6478 } 6479 `,overlayCss:` 6480 position: absolute; 6481 z-index: 2; 6482 margin: 0 auto; 6483 display: inline-block; 6484 cursor: pointer; 6485 6486 svg { 6487 width: 47px; 6488 height: 47px; 6489 ${t.breakpoints.sm} { 6490 width: 90px; 6491 height: 90px; 6492 } 6493 } 6494 `},SlickSlider:{wrapper:` 6495 .slick-slider { 6496 position: relative; 6497 display: block; 6498 box-sizing: border-box; 6499 -webkit-user-select: none; 6500 -moz-user-select: none;
6501 -ms-user-select: none; 6502 user-select: none; 6503 -webkit-touch-callout: none; 6504 -khtml-user-select: none; 6505 -ms-touch-action: pan-y; 6506 touch-action: pan-y; 6507 -webkit-tap-highlight-color: transparent; 6508 overflow: hidden; 6509 cursor: pointer; 6510 .slick-list { 6511 position: relative; 6512 display: block; 6513 overflow: hidden; 6514 padding: 0; 6515 // width: 1400px; 6516 margin: 0px 60px; 6517 .slick-track { 6518 position: relative; 6519 top: 0; 6520 left: 0; 6521 display: block; 6522 margin-left: auto; 6523 margin-right: auto; 6524 .slick-slide { 6525 display: block; 6526 float: left; 6527 height: 100%; 6528 min-height: 1px; 6529 .product-item-container { 6530 .product-title { 6531 display: -webkit-box; 6532 -webkit-line-clamp: 2; 6533 -webkit-box-orient: vertical; 6534 overflow: hidden; 6535 text-overflow: ellipsis; 6536 font-family: ${t.fonts.familyTertiary}; 6537 ${t.breakpoints.xs}{ 6538 font-size: ${t.fonts.sizeLarge}; 6539 min-height: auto; 6540 } 6541 ${t.breakpoints.sm}{ 6542 min-height: 43px; 6543 } 6544 ${t.breakpoints.lg}{ 6545 font-size: ${t.fonts.sizeLarger}; 6546 min-height: 49px; 6547 } 6548 } 6549 } 6550 } 6551 } 6552 } 6553 .slick-list , .slick-track { 6554 -webkit-transform: translate3d(0, 0, 0); 6555 -moz-transform: translate3d(0, 0, 0); 6556 -ms-transform: translate3d(0, 0, 0); 6557 -o-transform: translate3d(0, 0, 0); 6558 transform: translate3d(0, 0, 0); 6559 } 6560 .slick-arrow { 6561 cursor: pointer; 6562 top: 25%; 6563 transform: translateY(-50%); 6564 position: absolute; 6565 background: transparent; 6566 color: ${t.colors.black}; 6567 padding: 0; 6568 i { 6569 font-size: 60px; 6570 } 6571 &.slick-prev { 6572 left: 0 6573 } 6574 &.slick-next { 6575 right: 0; 6576 } 6577 &:focus { 6578 border-color: transparent; 6579 } 6580 } 6581 .slick-disabled { 6582 display: none !important; 6583 } 6584 .slick-dots { 6585 display: flex !important; 6586 justify-content: center; 6587 margin: 0; 6588 padding: 1rem 0; 6589 list-style-type: none; 6590 li { 6591 margin: 0 0.25rem; 6592 button { 6593 display: block; 6594 width: 12px; 6595 height: 12px; 6596 padding: 0; 6597 border: none; 6598 border-radius: 100%; 6599 background-color: ${t.colors.grey20}; 6600 text-indent: -9999px; 6601 } 6602 &.slick-active { 6603 button { 6604 background-color: ${t.colors.primary1}; 6605 } 6606 } 6607 } 6608 } 6609 .case-slick-dots { 6610 position: absolute; 6611 top: 0px; 6612 left: 0px; 6613 width: 100%; 6614 display: flex !important; 6615 justify-content: center; 6616 margin: 0; 6617 padding: 1rem 0; 6618 list-style-type: none; 6619 li { 6620 margin: 0 0.25rem; 6621 button { 6622 display: block; 6623 width: 12px; 6624 height: 12px; 6625 padding: 0; 6626 border: none; 6627 border-radius: 100%; 6628 background-color: ${t.colors.grey20}; 6629 text-indent: -9999px; 6630 } 6631 &.slick-active { 6632 button { 6633 background-color: ${t.colors.primary1}; 6634 } 6635 } 6636 } 6637 } 6638 } 6639 `},StateSelector:{default:` 6640 .mantine-Modal-body { 6641 background: ${t.colors.primary3}; 6642 border-top-left-radius: 12px; 6643 border-top-right-radius: 12px; 6644 width: 100vw !important; 6645 overflow-y: auto; 6646 max-height: 90vh; 6647 ${t.breakpoints.lg}{ 6648 border-radius: 12px; 6649 width: 785px !important; 6650 } 6651 } 6652 .mantine-Modal-inner{ 6653 background: transparent; 6654 z-index: 999 !important; 6655 top: auto; 6656 bottom: 0px; 6657 padding: 0; 6658 ${t.breakpoints.lg}{ 6659 top: 0px; 6660 bottom: 0px; 6661 } 6662 } 6663 .mantine-Select-input{ 6664 width: 80vw; 6665 ${t.breakpoints.lg}{ 6666 width: auto; 6667 } 6668 }
6669 .modal-body-inner { 6670 padding: 24px; 6671 } 6672 .selector-title { 6673 font-family: ${t.fonts.familyTertiary}; 6674 font-size: 26px; 6675 font-weight: ${t.fonts.weightMediumPlus}; 6676 line-height: 31px; 6677 letter-spacing: -0.01em; 6678 text-align: center; 6679 margin: 0 0 25px; 6680 } 6681 .state-selection { 6682 display: flex; 6683 align-items: center; 6684 justify-content: center; 6685 gap: 24px; 6686 margin: 24px 0; 6687 flex-direction: column; 6688 ${t.breakpoints.sm} { 6689 flex-direction: row; 6690 } 6691 } 6692 .state-selector-terms { 6693 font-family: ${t.fonts.familySecondary}; 6694 font-size: 12px; 6695 line-height: 16px; 6696 letter-spacing: 0em; 6697 text-align: center; 6698 max-width: 219px; 6699 color: ${t.colors.grey50}; 6700 margin: auto; 6701 } 6702 .state-selector-compliance { 6703 margin-top: 25px; 6704 color: ${t.colors.grey70}; 6705 6706 a { 6707 display: inline-block; 6708 color: ${t.colors.grey50}; 6709 } 6710 } 6711 button.verify-state-btn { 6712 width: 142px; 6713 text-transform: uppercase !important; 6714 font-weight: ${t.fonts.weightMediumPlus}; 6715 border-radius: 4px !important; 6716 padding: 7px 24px; 6717 font-family: ${t.fonts.familySecondary} !important; 6718 background-color: ${t.colors.primary1}; 6719 &:disabled { 6720 cursor: not-allowed; 6721 } 6722 &:disabled:hover { 6723 background-color: ${t.colors.btnDisabled}; 6724 } 6725 &:hover { 6726 background-color: ${t.colors.primary1BtnHover}; 6727 } 6728 } 6729 .mantine-Input-input { 6730 box-sizing: border-box; 6731 height: 44px; 6732 border: 1px solid ${t.colors.grey40}; 6733 border-radius: 4px; 6734 ${t.breakpoints.xs} { 6735 min-width: 343px; 6736 } 6737 } 6738 .mantine-Modal-content { 6739 border-radius: 12px; 6740 overflow: unset; 6741 transition: flex .3s ease-in-out; 6742 } 6743 .selector-subtitle { 6744 font-family: ${t.fonts.familySecondary}; 6745 font-size: 16px; 6746 line-height: 22px; 6747 letter-spacing: 0em; 6748 text-align: center; 6749 .error-text { 6750 color: #c84646; 6751 } 6752 } 6753 .dropdown-item { 6754 font-family: ${t.fonts.familySecondary} !important; 6755 font-size: 14px !important; 6756 line-height: 18px !important; 6757 letter-spacing: 0em !important; 6758 text-align: left !important; 6759 padding: 12px 10px !important; 6760 &[data-selected] { 6761 background-color: ${t.colors.primary1} !important; 6762 color: ${t.colors.white} !important; 6763 &:hover, &:active{ 6764 background-color: ${t.colors.primary1} !important; 6765 } 6766 } 6767 } 6768 `,locationWrapper:` 6769 display: flex; 6770 align-items: center; 6771 gap: 6px; 6772 cursor: pointer; 6773 `},CmsTabs:{root:` 6774 .mantine-Tabs-tabsList { 6775 flex-wrap: nowrap; 6776 overflow-x: auto; 6777 border-bottom: 1px solid ${t.colors.black}; 6778 } 6779 `,tab:` 6780 border-bottom: 4px solid transparent; 6781 padding: 0 0 12px 0; 6782 margin-right: 16px !important; 6783 6784 &[data-active] { 6785 border-color: ${t.colors.black}; 6786 } 6787 6788 &[data-active]:active, 6789 &[data-active]:hover, 6790 &:hover { 6791 background: none; 6792 border-color: ${t.colors.black}; 6793 } 6794 6795 &:last-child { 6796 margin-right: 0 !important; 6797 } 6798 6799 &.highlighted span { 6800 color: ${t.colors.primary9}; 6801 font-style: italic; 6802 } 6803 `,tabLabel:` 6804 color: ${t.colors.grey50}; 6805 ${t.mixins.h8} 6806 `,panel:` 6807 color: ${t.colors.grey50}; 6808 padding-top: 24px; 6809 div p { 6810 ${t.mixins.body1} 6811 } 6812 `},CmsTimer:{wrapper:` 6813 position: relative; 6814 text-align: center; 6815 text-transform: uppercase; 6816 padding: ${t.space.xl} 0; 6817 z-index: 1; 6818 ${t.breakpoints.lg} { 6819 padding: 40px 0; 6820 } 6821 .timer-headline { 6822 ${t.mixins.eyebrowRegular}; 6823 display: inline-block; 6824 margin-bottom: ${t.space.sm}; 6825 } 6826 h2.timer-content { 6827 margin-bottom: 0; 6828 } 6829 `},CmsExpander:{wrapper:` 6830 position: relative; 6831 .expander-content { 6832 max-height: 0; 6833 overflow: hidden; 6834 transition: all 0.2s; 6835 position: relative; 6836 z-index: 1; 6837 padding: 0 ${t.space.lg}; 6838 * { 6839 &:last-child { 6840 margin-bottom: 0; 6841 } 6842 } 6843 } 6844 .expander-action { 6845 text-align: center; 6846 position: relative; 6847 z-index: 1; 6848 button { 6849 background: none; 6850 border-top: none; 6851 border-left: none;
6852 border-right: none; 6853 border-radius: 0; 6854 font-size: 16px; 6855 font-weight: 400; 6856 padding: 0; 6857 margin-top: 8px; 6858 } 6859 } 6860 `},CmsTBSPage:{wrapper:` 6861 display: grid; 6862 max-width: 1920px; 6863 margin-top: 15px; 6864 margin-left: auto; 6865 margin-right: auto; 6866 ${t.breakpoints.md} { 6867 grid-template-columns:380px 1fr; 6868 grid-gap: 24px; 6869 } 6870 `,wrapperWithoutSidebar:` 6871 display: grid; 6872 max-width: 1920px; 6873 margin-left: auto; 6874 margin-right: auto; 6875 grid-gap: 24px; 6876 ${t.breakpoints.md} { 6877 grid-template-columns: 1fr; 6878 } 6879 `,sideBar:` 6880 display:none; 6881 ${t.breakpoints.md} { 6882 display:grid; 6883 grid-column: 1; 6884 padding: 50px 10px 30px 45px; 6885 } 6886 & div{ 6887 margin:0; 6888 padding:0; 6889 } 6890 & div.navigation-link{ 6891 ${t.breakpoints.xs} { 6892 width:260px; 6893 } 6894 a{ 6895 font-size: ${t.fonts.sizeLarge}; 6896 font-family: ${t.fonts.familySecondary}; 6897 line-height: 22.4px; 6898 color: ${t.colors.grey50}; 6899 padding: 12px 16px; 6900 margin: 0; 6901 } 6902 h4{ 6903 font-size:30px; 6904 color:${t.colors.primary1}; 6905 font-family: ${t.fonts.familyTertiary}; 6906 padding: 0 16px; 6907 margin: 24px 0; 6908 } 6909 } 6910 `,sideBarLegacy:` 6911 background:white; 6912 padding-left: 5%; 6913 display:none; 6914 ${t.breakpoints.md} { 6915 display:flex; 6916 } 6917 6918 & .sidebar { 6919 width: 100%; 6920 background: ${t.colors.grey10}; 6921 height: fit-content; 6922 padding-left: 20px; 6923 margin-bottom: 10px; 6924 6925 ${t.breakpoints.md} { 6926 max-width: 230px; 6927 margin-right: 15px; 6928 padding-left: 12px; 6929 } 6930 6931 > img { 6932 width: 14px; 6933 height: 14px; 6934 } 6935 & .navigation-link { 6936 max-height: fit-content; 6937 > h4 { 6938 font-size: 16px; 6939 color: ${t.colors.secondary10}; 6940 margin-top: 12px; 6941 margin-bottom: 15px; 6942 text-wrap: nowrap; 6943 font-family: ${t.fonts.familySecondary}; 6944 width: fit-content; 6945 font-weight: ${t.fonts.weightNormal}; 6946 } 6947 & a{ 6948 font-size:13px; 6949 // color: ${t.colors.footerPrimaryBg}; 6950 color: ${t.colors.secondary10}; 6951 margin-left: 4px; 6952 margin-bottom: 10px; 6953 text-wrap: nowrap; 6954 height: 24px; 6955 font-weight: normal; 6956 font-family: ${t.fonts.familySecondary}; 6957 width: fit-content; 6958 display: flex; 6959 gap: 10px; 6960 > div { 6961 overflow-y: hidden; 6962 width: 35px; 6963 > img { 6964 width: 24px; 6965 height: 24px; 6966 } 6967 } 6968 } 6969 } 6970 } 6971 & .accordion-navigation{ 6972 width:200px; 6973 span { 6974 padding: 0; 6975 } 6976 & .accordion-panel { 6977 background-color: ${t.colors.secondary13}; 6978 margin-top: 10px; 6979 & a{ 6980 text-decoration-color: ${t.colors.primary1}; 6981 text-decoration-thickness: 2px; 6982 margin-bottom: 5px; 6983 } 6984 } 6985 & .mantine-Accordion-item{ 6986 width: 100%; 6987 border:none; 6988 font-size:13px; 6989 padding-bottom:19px; 6990 margin-left: 4px; 6991 text-wrap: nowrap; 6992 gap: 10px; 6993 & button{ 6994 color: ${t.colors.secondary10}; 6995 padding: 0; 6996 display: flex; 6997 justify-content: space-between; 6998 width: 100%; 6999 } 7000 & .mantine-Accordion-content { 7001 padding:10px 10px; 7002 } 7003 } 7004 } 7005 `,content:` 7006 display: grid; 7007 grid-column: 2; 7008 `,contentWithoutSidebar:` 7009 display: grid; 7010 `,breadcrumbCSS:` 7011 padding: 12px 24px 12px 0px; 7012 & a { 7013 display: flex; 7014 align-items: center; 7015 gap: 8px; 7016 &:hover, &:active, &:focus { 7017 text-decoration: none; 7018 } 7019 & .link-text { 7020 text-decoration: none; 7021 border-bottom: 1px solid ${t.colors.primary8}; 7022 font-size: ${t.fonts.sizeH5}; 7023 font-weight: bold; 7024 } 7025 } 7026 `},CmsMultiCaseSelector:{main:` 7027 position: relative; 7028 display: grid; 7029 background: #FAF3E6; 7030 7031 &::before { 7032 content: ''; 7033 position: absolute; 7034 width: 100dvw; 7035 height: 100%; 7036 background: #FAF3E6; 7037 top: 0; 7038 left: calc(50% - 50dvw); 7039 } 7040 7041 ${t.breakpoints.md} { 7042 grid-gap: 24px; 7043 grid-template-columns: 1.28fr 1fr; 7044 align-items: center; 7045 padding: 0 40px; 7046 } 7047 7048 ${t.breakpoints.lg} { 7049 padding: 0 70px; 7050 } 7051 7052 .cms-image-container { 7053 position: relative; 7054 } 7055 7056 .mcs-main-row { 7057 display: grid; 7058 grid-gap: 8px; 7059 align-self: baseline; 7060 7061 h1 { 7062 color: ${t.colors.primary9}; 7063 margin: 0; 7064 } 7065 7066 .cart-button button { 7067 width: 100%; 7068 } 7069 7070 *:last-child { 7071 margin-bottom: 0; 7072 } 7073 7074 .star-icons { 7075 display: flex; 7076 7077 svg { 7078 width: 16px; 7079 height: 16px; 7080 } 7081 7082 & + span { 7083 display: none; 7084 } 7085 } 7086 } 7087 7088 .mcs-main__details { 7089 position: relative; 7090 display: grid; 7091 grid-gap: 24px; 7092 padding: 24px; 7093 7094 ${t.breakpoints.md} { 7095 padding: 50px 30px; 7096 } 7097 7098 ${t.breakpoints.lg} { 7099 padding: 50px; 7100 } 7101 } 7102 7103 .mcs-main-media { 7104 position: relative; 7105 } 7106 7107 .mcs-main-row--upsell { 7108 ${t.mixins.body2}; 7109 color: #494949; 7110 7111 > div { 7112 display: flex; 7113 align-items: center; 7114 gap: 16px; 7115 } 7116 7117 label, 7118 button { 7119 width: 100%; 7120 } 7121 7122 [type="checkbox"] {
7123 width: 20px; 7124 height: 20px; 7125 accent-color: #117B53; 7126 } 7127 7128 button span { 7129 width: 178px; 7130 white-space: nowrap; 7131 overflow: hidden; 7132 text-overflow: ellipsis; 7133 ${t.breakpoints.md} { 7134 width: auto; 7135 } 7136 } 7137 7138 button { 7139 img + span { 7140 margin-left: 8px; 7141 } 7142 } 7143 } 7144 7145 .mcs-main-row--active-info { 7146 ${t.mixins.body1}; 7147 } 7148 7149 .mcs-price-rating { 7150 display: flex; 7151 align-items: center; 7152 justify-content: space-between; 7153 } 7154 7155 .product-price__original { 7156 color: #767676; 7157 7158 + span { 7159 padding-left: 4px; 7160 } 7161 } 7162 7163 .product-price-sale { 7164 color: ${t.colors.textPrimaryBg}; 7165 } 7166 7167 .mcs-main-desc { 7168 padding-top: 24px; 7169 padding-bottom: 24px; 7170 7171 ${t.breakpoints.md} { 7172 padding-top: 28px; 7173 padding-bottom: 30px; 7174 } 7175 } 7176 7177 .mcs-main-desc span + section { 7178 margin-top: 16px; 7179 } 7180 7181 .mcs-main-desc p:last-child { 7182 margin-bottom: 0; 7183 } 7184 `,info:` 7185 position: relative; 7186 background: #fff !important; 7187 padding: 40px 16px; 7188 max-width: 1348px; 7189 margin: 0 auto; 7190 7191 &:before { 7192 content: ''; 7193 position: absolute; 7194 width: 100dvw; 7195 height: 100%; 7196 background: #ffffff; 7197 left: calc(50% - 50dvw); 7198 top: 0; 7199 } 7200 7201 ${t.breakpoints.md} { 7202 padding: 80px 24px; 7203 } 7204 7205 #panel-case-selector, 7206 .case-content-container { 7207 position: relative; 7208 } 7209 7210 .case-content-container .mantine-Tabs-tab { 7211 opacity: 0.3; 7212 7213 &[data-active] { 7214 opacity: 1; 7215 7216 &::after { 7217 content: none !important; 7218 } 7219 } 7220 } 7221 7222 .case-content-container .mantine-Tabs-panel { 7223 margin: 0; 7224 } 7225 7226 .case-content-container { 7227 margin-top: 30px; 7228 } 7229 7230 .point-text-container { 7231 top: 0 !important; 7232 left: 0; 7233 right: 0; 7234 bottom: 0; 7235 display: flex; 7236 align-items: center; 7237 justify-content: center; 7238 } 7239 .point-text-container .point { 7240 font-size: 12px !important; 7241 } 7242 .point-text, 7243 .rating-container { 7244 display: none !important; 7245 } 7246 7247 .main-title { 7248 margin: 0 !important; 7249 7250 a { 7251 color: inherit !important; 7252 } 7253 } 7254 7255 .web-description, 7256 [role="tabpanel"] .price { 7257 display: none; 7258 } 7259 7260 .case-content-details-section { 7261 display: grid; 7262 grid-gap: 0; 7263 margin-top: 0 !important; 7264 7265 ${t.breakpoints.md} { 7266 grid-template-columns: 1fr 1fr !important; 7267 grid-gap: 24px; 7268 } 7269 7270 .wine-details, 7271 .case-details { 7272 padding: 24px 16px; 7273 7274 ${t.breakpoints.md} { 7275 padding: 40px 0 0; 7276 } 7277 } 7278 7279 .case-image, 7280 .share-print { 7281 display: none; 7282 } 7283 7284 .sub-title-with-border { 7285 ${t.mixins.h3} 7286 font-family: ${t.fonts.familyPrimary}; 7287 border: none; 7288 } 7289 } 7290 7291 .case-content-container .mantine-Tabs-panel { 7292 padding: 24px 16px; 7293 7294 ${t.breakpoints.md} { 7295 padding: 40px 56px; 7296 } 7297 } 7298 7299 .header-container { 7300 padding-bottom: 16px; 7301 border-bottom: 1px solid #B79178; 7302 } 7303 7304 // Mobile Carousel Style 7305 .mantine-Carousel-root { 7306 padding-bottom: 24px; 7307 } 7308 7309 .mantine-Carousel-viewport { 7310 padding-bottom: 40px; 7311 } 7312 .mantine-Carousel-slide { 7313 .mantine-Tabs-tab { 7314 display: grid; 7315 grid-gap: 8px; 7316 width: 100%; 7317 height: 150px; 7318 7319 span { 7320 margin: 0; 7321 text-align: center; 7322 } 7323 7324 &[data-active] { 7325 border: none; 7326 } 7327 } 7328 } 7329
7330 .mantine-Carousel-control { 7331 position: absolute; 7332 left: 0; 7333 top: 50%; 7334 transform: translateY(-50%); 7335 7336 &:last-child { 7337 left: auto; 7338 right: 0; 7339 } 7340 } 7341 7342 .mantine-Carousel-indicators { 7343 position: static; 7344 transform: none; 7345 } 7346 `,caseSelectors:` 7347 .mcs-selector__header { 7348 display: flex; 7349 align-items: center; 7350 justify-content: space-between; 7351 7352 span { 7353 font-family: ${t.fonts.roboto}; 7354 font-size: 14px; 7355 font-weight: 700; 7356 line-height: 15.6px; 7357 text-align: left; 7358 7359 } 7360 7361 a { 7362 text-decoration: underline; 7363 } 7364 } 7365 7366 .mcs-selector__list { 7367 display: grid; 7368 grid-gap: 8px; 7369 7370 &.simple { 7371 display: flex; 7372 overflow-y: auto; 7373 padding-bottom: 10px; 7374 } 7375 7376 img + span { 7377 margin-left: 8px; 7378 } 7379 } 7380 `,caseSelector:` 7381 background: #FAF3E6; 7382 display: flex; 7383 align-items: center; 7384 padding: 8px 10px; 7385 outline: none; 7386 border: 1.5px solid #B79178; 7387 border-radius: 4px; 7388 box-shadow: none; 7389 7390 &[aria-selected="true"] { 7391 background: ${t.colors.white}; 7392 border-color: ${t.colors.primary9}; 7393 } 7394 7395 &.simple { 7396 border: 1px solid #BCBCBC; 7397 background: ${t.colors.white}; 7398 font-weight: 400; 7399 7400 &[aria-selected="true"] { 7401 background: #FEF5F8; 7402 color: ${t.colors.primary9}; 7403 } 7404 } 7405 7406 img { 7407 width: 84px !important; 7408 height: 43px !important; 7409 object-fit: contain; 7410 } 7411 `},CmsLink:{button:` 7412 &.full-width { 7413 width: 100%; 7414 button { 7415 width: 100%; 7416 text-align: center; 7417 } 7418 } 7419 &.stick-add-to-cart { 7420 .cart-button button { 7421 width: 100%; 7422 } 7423 position: fixed; 7424 border: none; 7425 bottom: 0; 7426 left: 0; 7427 width: 100%; 7428 padding: 0px; 7429 box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); 7430 z-index: 1; 7431 ${t.breakpoints.lg} { 7432 display: none; 7433 } 7434 } 7435 `},CmsRichText:{wrapper:` 7436 table { 7437 height: auto !important; 7438 max-width: 100%; 7439 display: block; 7440 overflow-x: auto; 7441 white-space: nowrap; 7442 padding-bottom: 10px; 7443 ${t.breakpoints.md} { 7444 display: table; 7445 overflow-x: visible; 7446 white-space: normal; 7447 } 7448 td, th { 7449 padding: 12px; 7450 width: auto !important; 7451 border: 1px solid transparent; 7452 &.richtext-background { 7453 display: table-cell; 7454 } 7455 } 7456 } 7457 `},CmsVoucherWidget:{main:` 7458 position: relative; 7459 padding: 80px 24px; 7460 display: flex; 7461 align-items: center; 7462 justify-content: center; 7463 7464 ${t.breakpoints.xxl} { 7465 padding: 5.55vw 24px; 7466 } 7467 7468 .cms-image-container img { 7469 position: absolute; 7470 left: 0; 7471 top: 0; 7472 height: 100%; 7473 width: 100%; 7474 object-fit: cover; 7475 } 7476 .voucher-widget__card { 7477 position: relative; 7478 padding: 60px 24px 32px; 7479 background: ${t.colors.white}; 7480 border-radius: 8px; 7481 display: grid; 7482 grid-gap: 24px; 7483 max-width: 496px; 7484 7485 button { 7486 text-transform: uppercase; 7487 letter-spacing: 0.03em; 7488 padding-top: 7px; 7489 padding-bottom: 7px; 7490 } 7491 7492 ${t.breakpoints.md} { 7493 grid-gap: 32px; 7494 padding: 60px 40px 40px; 7495 } 7496 } 7497 7498 .voucher-widget__text { 7499 display: grid; 7500 grid-gap: 6px; 7501 ${t.breakpoints.md} { 7502 grid-gap: 8px; 7503 } 7504 } 7505 7506 .voucher-widget__form, 7507 .voucher-widget__form form { 7508 display: grid; 7509 grid-gap: 24px; 7510 ${t.breakpoints.md} { 7511 grid-gap: 32px; 7512 } 7513 } 7514 7515 .voucher-widget__form .field-container input { 7516 height: 44px; 7517 } 7518 7519 .voucher-widget__form .field-container input:focus~label, 7520 .voucher-widget__form .field-container input:-webkit-autofill~label, 7521 .voucher-widget__form .field-container input:not(:placeholder-shown)~label { 7522 top: -5px; 7523 } 7524 7525 .voucher-widget__eyebrow { 7526 font-family: ${t.fonts.roboto}; 7527 font-weight: ${t.fonts.weightBold}; 7528 font-size: ${t.fonts.sizeLarge}; 7529 line-height: 1.4; 7530 text-transform: uppercase; 7531 } 7532 7533 h1.voucher-widget__headline { 7534 margin: 0; 7535 } 7536 7537 .voucher-widget__promo-text { 7538 position: absolute; 7539 left: 0; 7540 top: 16px; 7541 padding: 5px 8px; 7542 border-top-right-radius: 4px; 7543 border-bottom-right-radius: 4px; 7544 font-family: ${t.fonts.familySecondary}; 7545 background: ${t.colors.primary9}; 7546 color: ${t.colors.white}; 7547 7548 ${t.breakpoints.md} { 7549 padding: 6px 10px; 7550 } 7551 } 7552 7553 .voucher-widget__subcta * { 7554 font-size: ${t.fonts.sizeDefault} !important; 7555 7556 &:last-child { 7557 margin: 0 !important; 7558 } 7559 } 7560 .voucher-widget__subcta a { 7561 text-decoration: underline; 7562 } 7563 `},FooterDropDown:{main:` 7564 margin: 15px auto; 7565 7566 ${t.breakpoints.sm} { 7567 margin: 15px 15%; 7568 } 7569 7570 .mantine-Accordion-item { 7571 border: none; 7572 border-bottom: 1px solid #e0e0e0; 7573 background-color: transparent; 7574 7575 &[data-active] { 7576 background-color: transparent; 7577 } 7578 7579 .mantine-Accordion-label { 7580 font-weight: bold; 7581 font-size: 16px; 7582 color: #545454; 7583 } 7584 7585 .mantine-Accordion-content { 7586 color: #545454; 7587 } 7588 } 7589 7590 .logo { 7591 margin-top: 15px; 7592 text-align: center; 7593 } 7594 7595 a { 7596 text-decoration: underline; 7597 } 7598 `}})}},t=>{var e=e=>t(t.s=e);t.O(0,[1096,7417,6665,800,9915,1285,6576,3679,6403,8818,8820,6303,6023,4148,5141,1934,9226,9266,38,43
759803,4759,7949,9994,3295,8311,9108,7724,9500,3616,30,3816,6698,2582,4746,9723,9415,6554,5959,7415,8202,3974,1860,8391,2855,5773,2220,6735,8792],()=>(e(66768),e(75791))),_N_E=t.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.