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