1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2855],{99649:(o,t,e)=>{e.d(t,{lH:()=>p,Xf:()=>r.X,Zp:()=>s,ls:()=>a.l,n4:()=>d,vu:()=>l});var i=e(72076),n=e(28280),r=e(85194),a=e(37740);let s=o=>({Cart:{MiniCart:` 2 z-index: 16777216; 3 position:relative; 4 5 .mantine-Modal-inner { 6 padding:0; 7 justify-content: end; 8 bottom:0; 9 } 10 11 .mantine-Modal-content { 12 border-radius: 0; 13 min-height: 100vh; 14 min-width:100vw; 15 ${o.breakpoints.md}{ 16 max-width:482px; 17 min-width:auto; 18 } 19 .mantine-Modal-header { 20 padding: 21.5px 32px ; 21 ${o.breakpoints.sm}{ 22 padding: 21px 32px ; 23 } 24 border-bottom:1px solid #BCBCBC; 25 } 26 .mantine-Modal-close { 27 outline: 0; 28 color: ${o.colors.primary8}; 29 width: auto; 30 svg { 31 width: 32px !important; 32 height: 32px !important; 33 } 34 } 35 36 .mini-cart-title { 37 font-size:20px; 38 line-height:24px; 39 font-weight:500; 40 color: ${o.colors.primary8}; 41 font-family: ${o.fonts.familyTertiary}; 42 margin:18px 0; 43 ${o.breakpoints.md} { 44 font-size:18px; 45 line-height:23.5px; 46 } 47 } 48 } 49 50 .mantine-Modal-title { 51 margin-bottom:0 !important; 52 } 53 .mantine-Modal-body { 54 padding:0; 55 padding: 0 16px !important; 56 ${o.breakpoints.sm}{ 57 padding: 0 32px 32px 32px !important; 58 } 59 } 60 61 .mini-cart-header { 62 display: flex; 63 -webkit-box-align: center; 64 align-items: center; 65 gap: 8px; 66 i { 67 color:#006E1A; 68 } 69 h3{ 70 margin: auto; 71 } 72 } 73 74 .wrapper { 75 .product-image , .product-image> div{ 76 min-width: 164px; 77 height: 164px; 78 margin: auto 0; 79 80 img { 81 width: 100%; 82 height: 100%; 83 object-fit: cover; 84 } 85 86 ${o.breakpoints.sm} { 87 min-width: 254px; 88 height: 254px; 89 } 90 91 ${o.breakpoints.md} { 92 min-width: 216px; 93 height: 216px; 94 } 95 } 96 } 97 98 .wrapper { 99 display:flex; 100 align-items: center; 101 margin:24px 0; 102 gap:16px; 103 h2 { 104 margin:0; 105 } 106 107 .product-image { 108 position:relative; 109 } 110 } 111 112 .product-great-pick{ 113 color: ${o.colors.grey60}; 114 margin: 8px 0 !important; 115 text-align:left; 116 } 117 118 .product-detail-text { 119 text-align: left; 120 color: ${o.colors.primary8}; 121 .checkout-item-qty { 122 color:#006E1A; 123 } 124 h5 { 125 margin-bottom: 8px !important; 126 } 127 } 128 129 .price-section { 130 display:flex; 131 gap:4px; 132 align-items: center; 133 padding: 0 0 8px 0; 134 margin-bottom: 0px; 135 } 136 137 .price-section h6 { 138 margin: 0; 139 font-family: ${o.fonts.familyTertiary}; 140 } 141 142 .price-section .strike { 143 ${o.mixins.h7} 144 color:${o.colors.grey60}; 145 text-decoration-line: line-through; 146 } 147 148 .price-section .strike+.sale-price { 149 color: ${o.colors.primary1} 150 } 151 152 .price-section .strike+.member-price { 153 color:${o.colors.textUnlimitedBg}; 154 } 155 156 .member-savings { 157 font-size: 14px; 158 font-weight: ${o.fonts.weightMediumPlus}; 159 line-height: 16px; 160 color: ${o.colors.textUnlimitedBg}; 161 letter-spacing: 0.02em; 162 margin: 0px; 163 } 164 165 .case-details { 166 font-size: 20px; 167 font-weight: 500; 168 line-height: 24px; 169 color: #20513B; 170 } 171 172 .num-bottles { 173 font-size: 16px; 174 font-weight: 400; 175 line-height: 22.4px; 176 text-align: left; 177 margin-bottom: 8px; 178 color:${o.colors.grey60}; 179 } 180 181 .light-grey { 182 color: ${o.colors.grey60}; 183 } 184 185 .gift-tablet { 186 display: none; 187 ${o.breakpoints.sm}{ 188 display: flex; 189 align-items: center; 190 gap: 8px; 191 padding: 12px; 192 } 193 ${o.breakpoints.md}{ 194 display: none; 195 } 196 } 197 198 .gift-other-device { 199 display: flex; 200 gap: 8px; 201 align-items: center; 202 padding: 12px; 203 ${o.breakpoints.sm}{ 204 display:none; 205 } 206 ${o.breakpoints.md}{ 207 display: flex; 208 gap: 8px; 209 align-items: center; 210 padding: 12px; 211 } 212 } 213 214 .gift-other-device h4, .gift-tablet h4 { 215 margin-bottom:0px; 216 text-transform: none; 217 } 218 219 h4 { 220 font-size: 16px; 221 font-weight: 400; 222 margin:0; 223 line-height: 22.4px; 224 font-family: ${o.fonts.familySecondary}; 225 color:${o.colors.primary8}; 226 .cart-link { 227 font-weight: 500; 228 line-height: 19.2px; 229 text-decoration:underline; 230 margin-left: 8px; 231 float:none; 232 font-size: 16px; 233 } 234 235 .cart-link:hover, a:hover { 236 text-decoration: none; 237 } 238 } 239 240 .button-container { 241 display:flex; 242 gap:16px; 243 flex-direction: column; 244 padding-top: 24px; 245 ${o.breakpoints.sm}{ 246 flex-direction: row; 247 margin-bottom:32px; 248 } 249 ${o.breakpoints.md}{ 250 flex-direction: column; 251 } 252 a, button { 253 width:100%; 254 text-decoration: none; 255 } 256 257 button { 258 font-weight: ${o.fonts.weightMediumPlus}; 259 cursor:pointer; 260 letter-spacing: 0.02em; 261 height:44px; 262 display:flex; 263 align-items: center; 264 justify-content: space-around; 265 } 266 } 267 268 .continue-shopping { 269 display: grid; 270 margin-bottom: 24px; 271 justify-content: center; 272 } 273 274 .continue-shopping-text { 275 text-decoration: underline; 276 letter-spacing: 0.02em; 277 line-height:16px; 278 margin-left: 8px; 279 text-transform: uppercase; 280 font-weight: ${o.fonts.weightMediumPlus}; 281 margin: 12px; 282 transition: text-decoration 0.3s ease; /* Smooth transition for text-decoration */ 283 cursor: pointer; 284 } 285 .continue-shopping .continue-shopping-text:hover { 286 text-decoration: none; /* Remove underline on hover */ 287 } 288 289 .tax{ 290 text-align: center; 291 & .tax-info{ 292 display: inline-block; 293 color: ${o.colors.grey60}; 294 font-family: ${o.fonts.familySecondary}; 295 font-size: 12px; 296 font-weight: ${o.fonts.weightNormal}; 297 line-height: 15.6px; 298 text-align: center; 299 text-transform: none; 300 } 301 } 302 303 .desktop { 304 display:none; 305 ${o.breakpoints.sm}{ 306 display:grid; 307 justify-content: space-around; 308 width: 100%; 309 } 310 } 311 312 .button-link { 313 background: none; 314 border: none; 315 padding: 0; 316 } 317 318 .mobile { 319 display:grid; 320 margin: 16px 0; 321 ${o.breakpoints.sm}{ 322 display:none; 323 } 324 } 325 326 @keyframes slideInFromRight { 327 from { 328 transform: translateX(100%); 329 } 330 to { 331 transform: translateX(0); 332 } 333 } 334 @keyframes slideOutToRight { 335 from { 336 transform: translateX(0); 337 } 338 to { 339 transform: translateX(100%); 340 } 341 } 342 `,productItemsTrending:` 343 .auc-Recommend .auc-Recommend-title { 344 font-family: ${o.fonts.familyPrimary}; 345 color: ${o.colors.primary8}; 346 margin: 16px 0; 347 } 348 .trending-products-carousel.miniCart { 349 margin-bottom: 24px; 350 ${o.breakpoints.sm}{ 351 margin-bottom: 40px; 352 } 353 ${o.breakpoints.md}{ 354 margin-bottom: 24px; 355 } 356 357 .product-image-container img { 358 height:100%; 359 width:100%; 360 } 361 362 .price span { 363 font-size: 14px; 364 color: ${o.colors.black}; 365 } 366
367 .mantine-Carousel-controls .mantine-Carousel-control { 368 border-radius: 50%; 369 svg { 370 width: 21px !important; 371 height: 21px !important; 372 } 373 } 374 } 375 .price-per-litre { 376 font-size: 10px; 377 margin-left: 10px; 378 font-weight: 300; 379 color: inherit; 380 } 381 `}}),p=o=>({WinePlanCarousel:{controls:` 382 width: 100%; 383 margin-bottom: 10px; 384 top: 90px; 385 ${o.breakpoints.sm} { 386 top: calc(50% - 3rem); 387 } 388 ${o.breakpoints.lg} { 389 .flex-products & { 390 left: -30px; // -30px shifts controls left; +60px widens to cover extra space on both sides. 391 width: calc(100% + 60px); // Extend controls beyond the carousel container to visually align with the product grid. 392 } 393 } 394 `,control:` 395 height: 36px; 396 width: 36px; 397 `,viewport:` 398 padding-bottom: 24px; 399 `,indicators:` 400 bottom: 5px; 401 `,indicator:` 402 border-radius: 50%; 403 width: 12px; 404 height: 12px; 405 background: #BCBCBC; 406 opacity: 1; 407 &[data-active] { 408 background: ${o.colors.grey50}; 409 } 410 `},Membership:{wrapper:` 411 & .accordion-navigation{ 412 width:200px; 413 span { 414 padding: 0; 415 } 416 & .accordion-panel { 417 background-color: #FCFBF9; 418 margin-top: 10px; 419 padding: 10px 2px 2px 20px; 420 } 421 & .mantine-Accordion-item{ 422 width: 100%; 423 border:none; 424 margin-bottom: 10px; 425 font-size:14px; 426 color: #333333; 427 margin-left: 4px; 428 margin-top: 4px; 429 margin-bottom: 10px; 430 text-wrap: nowrap; 431 gap: 10px; 432 & button{ 433 padding: 0; 434 display: flex; 435 justify-content: space-between; 436 width: 100%; 437 } 438 } 439 } 440 margin-left: 0; 441 margin-right: 0; 442 background: ${o.colors.white}; 443 display:flex; 444 .membership-layout { 445 width:100%; 446 padding: 10px; 447 margin-left:0px; 448 ${o.breakpoints.xs} { 449 padding:20px; 450 } 451 452 .error-message{ 453 padding: 0 25px 15px 0; 454 } 455 .init-loader{ 456 display:flex; 457 margin-left: 45%; 458 margin-top: 20%; 459 } 460 .loader{ 461 position: fixed; 462 left: 0; 463 top: 0; 464 height: 100%; 465 width: 100%; 466 display: flex; 467 align-items: center; 468 justify-content: center; 469 z-index: 9999; 470 &.full-page-loader{ 471 background-color: rgb(0 0 0 / 36%); 472 } 473 } 474 .card-container { 475 display:flex; 476 gap: 24px; 477 flex-wrap: wrap; 478 flex-direction: row; 479 480 481 .cancel-membership { 482 width: 100%; 483 display:flex; 484 font-size:14px; 485 font-weight: ${o.fonts.weightNormal}; 486 margin-bottom:0; 487 align-items:center; 488 .cancel-membership-checkbox{ 489 appearance: none; 490 491 width: 19px; 492 height: 19px; 493 box-shadow: none; 494 border-radius: 4px; 495 border: 1px solid; 496 color: ${o.colors.black}; 497 498 margin-right:10px; 499 cursor:pointer; 500 &:checked{ 501 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, ${o.colors.svgCheckboxBg})'/%3E%3Cpath id='Vector' d='M14 5L7.125 12L4 8.81818' stroke='var(--checkbox-stroke-color, ${o.colors.svgCheckboxStroke})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A"); 502 color: transparent; 503 } 504 &.disable{ 505 pointer-events: none;
506 cursor: not-allowed; 507 } 508 } 509 .cancel-membership-text{ 510 width:100%; 511 } 512 } 513 514 .update-visible { 515 display: block; 516 } 517 518 .update-hidden { 519 display: none; 520 } 521 522 523 .membership-card { 524 width:420px; 525 height:260px; 526 background:white; 527 padding:24px; 528 display:flex; 529 flex-direction:column; 530 border: 1px solid ${o.colors.secondary9}; 531 border-radius: 4px; 532 h2{ 533 margin-top: 0; 534 } 535 h3{ 536 font-family: ${o.fonts.familySecondary}; 537 text-transform: none; 538 } 539 .card-heading{ 540 font-size: 22px; 541 ${o.breakpoints.lg} { 542 font-size:28px; 543 } 544 font-family: ${o.fonts.familyTertiary}; 545 font-weight: ${o.fonts.weightNormal}; 546 547 } 548 549 .cancel-save-offer-cta { 550 text-decoration:underline; 551 margin: auto; 552 } 553 554 .card-details{ 555 display:flex; 556 align-items:center; 557 .card-details-number{ 558 padding-left:10px; 559 } 560 561 } 562 .membership-status{ 563 font-size:40px; 564 font-family: ${o.fonts.familyPrimary}; 565 color:${o.colors.primary1}; 566 text-transform:uppercase; 567 line-height: 52px; 568 margin:auto; 569 570 } 571 .change-payment-card{ 572 display:flex; 573 font-size:16px; 574 font-weight: ${o.fonts.weightNormal}; 575 margin:auto; 576 margin-bottom:0; 577 align-items:center; 578 579 } 580 .cancel-membership.disable{ 581 cursor: not-allowed; 582 } 583 584 .enroll-data{ 585 display:grid; 586 grid-template-columns: 0.7fr 1fr; 587 588 h3{ 589 font-family: ${o.fonts.familySecondary}; 590 font-weight:${o.fonts.weightNormal}; 591 font-size:16px; 592 line-height: 24px; 593 } 594 .date{ 595 font-weight: ${o.fonts.weightBold}; 596 padding-left: 10px; 597 } 598 } 599 600 .last-payment-row{ 601 display:grid; 602 grid-template-columns: 0.7fr 1fr; 603 604 h3{ 605 font-family: ${o.fonts.familySecondary}; 606 font-weight:${o.fonts.weightNormal}; 607 font-size:16px; 608 line-height: 24px; 609 } 610 .payment-date{ 611 font-size:16px; 612 font-weight:${o.fonts.weightBold}; 613 padding-left: 10px; 614 .loaderContainer{ 615 justify-content: start; 616 div{ 617 width: 21px; 618 height: 21px; 619 } 620 } 621 } 622 } 623 624 } 625 .saving{ 626 font-family: ${o.fonts.familyTertiary}; 627 align-items:center; 628 text-align: center; 629 .saving-price{ 630 padding:20px; 631 display: grid; 632 633 634 .card-heading{ 635 margin:0; 636 font-family: ${o.fonts.familyPrimary}; 637 font-weight: ${o.fonts.weightNormal}; 638 font-size: 50px; 639 ${o.breakpoints.md} { 640 font-size: 44px; 641 } 642 ${o.breakpoints.lg} { 643 font-size: 60px; 644 } 645 color:${o.colors.primary1}; 646 } 647 .year-note{ 648 font-size: 18px; 649 font-family: ${o.fonts.familyTertiary}; 650 } 651 color: ${o.colors.grey60}; 652 } 653 .static-data{ 654 font-family: ${o.fonts.familyTertiary}; 655 656 font-weight: ${o.fonts.weightMedium}; 657 font-size: 18px; 658 color: ${o.colors.grey60}; 659 padding: 20px 0px; 660 } 661 .static-note{ 662 display: grid; 663 font-family: ${o.fonts.familySecondary}; 664 font-weight: ${o.fonts.weightNormal}; 665 font-size: ${o.fonts.sizeLarge}; 666 color: ${o.colors.black}; 667 margin: auto; 668 margin-bottom: 20px; 669 font-weight: ${o.fonts.weightNormal}; 670 font-size: ${o.fonts.sizeLarge}; 671 line-height: 22.4px; 672 } 673 } 674 .faq-card{ 675 width:100%; 676 ${o.breakpoints.xl} { 677 width:854px; 678 } 679 height:auto; 680 display:flex; 681 flex-direction: row; 682 .left-faq{ 683 width: 40%; 684 .view-all-faq{ 685 font-size:16px; 686 margin-top: 10%; 687 ${o.breakpoints.xs} { 688 padding:2px 5px; 689 font-size:14px; 690 } 691 ${o.breakpoints.sm} { 692 padding:10px; 693 } 694 ${o.breakpoints.md} { 695 padding: 7.5px 22px; 696 } 697 698 } 699 } 700 .right-faq{ 701 width: 60%; 702 } 703 .faq-question{ 704 margin-bottom:24px; 705 text-decoration:underline; 706 display:block; 707 font-weight: ${o.fonts.weightNormal}; 708 line-height:22px; 709 font-size: ${o.fonts.sizeLarge}; 710 &.active{ 711 font-weight: ${o.fonts.weightBold}; 712 } 713 } 714 .faq-question-right.heading{ 715 margin-top:12%; 716 margin-bottom:24px; 717 font-weight: ${o.fonts.weightBold}; 718 } 719 .vertical-line { 720 width: 1px; 721 background-color: ${o.colors.grey20}; /* Adjust the color as needed */ 722 margin: 5% 16px 10% 16px; 723 } 724 725 } 726 // footer banner 727 .footer-banner{ 728 width: 100%; 729 & div{ 730 margin:0; 731 } 732 & .description{ 733 overflow: hidden; 734 text-overflow: ellipsis; 735 display: -webkit-box; 736 -webkit-line-clamp: 3; 737 -webkit-box-orient: vertical; 738 } 739 & .banner-button{ 740 bottom: 0; 741 margin-bottom: 18px; 742 position:absolute; 743 } 744 } 745 } 746 } 747 .bread-crumb-list{ 748 display:flex; 749 & a{ 750 font-size:11px; 751 ${o.breakpoints.sm} { 752 font-size:16px; 753 } 754 } 755 .slash{ 756 padding:12px; 757 } 758 }
759 .title-icon{ 760 display:flex; 761 justify-content:center; 762 } 763 .hub-page-no-plan{ 764 width:80%; 765 h1{ 766 margin-left:10px; 767 } 768 h1{ 769 font-size: 40px; 770 } 771 .no-plan-message{ 772 background:${o.colors.specialLight};; 773 padding: 10px; 774 margin:10px; 775 } 776 } 777 `,Sidebar:` 778 background:white; 779 padding-left: 5%; 780 display:none; 781 ${o.breakpoints.md} { 782 display:flex; 783 } 784 .membership-sidebar{ 785 background: white; 786 padding-left:40px; 787 height:100%; 788 789 & div{ 790 margin:0; 791 padding:0; 792 } 793 794 & .navigation-link{ 795 ${o.breakpoints.xs} { 796 width:260px; 797 } 798 > h4{ 799 font-size:28px; 800 font-family: ${o.fonts.familyTertiary}; 801 // margin-bottom: 24px; 802 color:${o.colors.primary1}; 803 margin-bottom: ${o.space.lg}; 804 margin-top: ${o.space.lg}; 805 } 806 & a{ 807 font-size:18px; 808 margin-bottom:18px; 809 line-height:24px; 810 } 811 } 812 }`,pageWrapper:` 813 & .intro-text{ 814 ${o.mixins.h5} 815 font-size: ${o.fonts.sizeLarger}; 816 text-align: center; 817 margin-top: 16px; 818 margin-bottom: 16px; 819 line-height: 200%; 820 ${o.breakpoints.sm} { 821 font-size: ${o.fonts.sizeLarger}; 822 } 823 } 824 .top-section .widget-container > div { 825 margin: 0; 826 } 827 .bottom-section{ 828 .widget-cms-column > div{ 829 margin: 0; 830 } 831 .widget-cms-column{ 832 .banner-wrapper { 833 height: 100%; 834 } 835 .banner { 836 margin: 0; 837 ${o.breakpoints.md} { 838 overflow: hidden; 839 } 840 p span { 841 font-size: 16px; 842 } 843 h3 span { 844 line-height: 29.4px; 845 ${o.breakpoints.md} { 846 line-height: 33px; 847 } 848 } 849 .banner-image-wrapper { 850 order: 1; 851 ${o.breakpoints.md} { 852 align-self: center; 853 order: 2; 854 } 855 ${o.breakpoints.lg} { 856 max-height: 250px; 857 } 858 } 859 .banner-content-wrapper { 860 order: 2; 861 ${o.breakpoints.md} { 862 order: 1; 863 } 864 } 865 .banner-bg-img { 866 height: 115px; 867 ${o.breakpoints.sm} { 868 height: 250px; 869 } 870 ${o.breakpoints.lg} { 871 height: 100%; 872 } 873 } 874 .banner-button { 875 padding: 0; 876 } 877 .banner-button a{ 878 padding: 7px 16px; 879 min-width: 180px; 880 font-weight: ${o.fonts.weightMediumPlus}; 881 font-size: 12px; 882 line-height: 14px; 883 &:active, &:focus { 884 text-decoration: none; 885 } 886 } 887 .cms-image-container { 888 width: 100%; 889 height: 100%; 890 img { 891 height: 100%; 892 object-fit: cover; 893 } 894 } 895 } 896 & .banner-info { 897 ${o.breakpoints.md} { 898 padding: 24px; 899 } 900 width: 100%; 901 padding: 16px; 902 } 903 .banner-content { 904 text-align: center; 905 padding: 0; 906 ${o.breakpoints.sm} { 907 text-align: initial; 908 padding: initial; 909 } 910 } 911 } 912 913 } 914 .payment-method { 915 .mantine-Accordion-item::after { 916 content: ""; 917 left: -16px; 918 right: -16px; 919 height: 1px; 920 background-color: ${o.colors.secondary9}; 921 position: absolute; 922 ${o.breakpoints.sm} { 923 left: 0px; 924 right: 0px; 925 } 926 } 927 } 928 `},MembershipRebranding:{container:` 929 & .no-plan-message{ 930 margin:40px 0; 931 & p { 932 font-family: ${o.fonts.roboto}; 933 font-weight: ${o.fonts.weightBold}; 934 } 935 } 936 937 .loader{ 938 position: fixed; 939 left: 0; 940 top: 0; 941 height: 100%; 942 width: 100%; 943 display: flex; 944 align-items: center; 945 justify-content: center; 946 z-index: 9999; 947 &.full-page-loader{ 948 background-color: rgb(0 0 0 / 36%); 949 } 950 } 951 `,layout:` 952 margin-top: 24px; 953 ${o.breakpoints.sm} { 954 margin-top: 40px; 955 } 956 & .membership-details{ 957 display: grid; 958 grid-template-columns: 1fr; 959 justify-content: center; 960 gap: 16px; 961 & > div{ 962 flex: 1; 963 } 964 ${o.breakpoints.sm} { 965 grid-template-columns: 1fr 1fr; 966 gap: 24px; 967 } 968 } 969 970 971 & .renew-layout { 972 margin-bottom: 24px; 973 ${o.breakpoints.sm} { 974 margin-bottom: 40px; 975 } 976 .cancel-membership { 977 width: 100%; 978 display:flex; 979 font-size:14px; 980 font-weight: ${o.fonts.weightNormal}; 981 margin-bottom:0; 982 gap: 16px; 983 align-items: flex-start; 984 ${o.breakpoints.sm} { 985 align-items:center; 986 } 987 .cancel-membership-checkbox{ 988 appearance: none; 989 width: 19px; 990 height: 19px; 991 box-shadow: none; 992 border-radius: 4px; 993 border: 1px solid; 994 color: ${o.colors.black}; 995 margin-right:10px; 996 cursor:pointer; 997 &:checked{ 998 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, ${o.colors.svgCheckboxBg})'/%3E%3Cpath id='Vector' d='M14 5L7.125 12L4 8.81818' stroke='var(--checkbox-stroke-color, ${o.colors.svgCheckboxStroke})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A"); 999 color: transparent; 1000 } 1001 &.disable{ 1002 pointer-events: none;
1003 cursor: not-allowed; 1004 } 1005 } 1006 .cancel-membership-text{ 1007 width:100%; 1008 font-family: ${o.fonts.roboto}; 1009 font-weight: ${o.fonts.weightNormal}; 1010 font-size: ${o.fonts.sizeH4}; 1011 color: ${o.colors.primary8}; 1012 } 1013 } 1014 .update-visible { 1015 display: block; 1016 1017 button.unlimited-modal-primary-cta { 1018 cursor: pointer; 1019 width: 100%; 1020 background-color: #117B53; 1021 color: ${o.colors.btnsPrimaryColor}; 1022 ${o.breakpoints.sm} { 1023 width: auto; 1024 } 1025 1026 :hover { 1027 background-color: #094B32; 1028 color: ${o.colors.btnsPrimaryColor}; 1029 } 1030 } 1031 } 1032 1033 .update-hidden { 1034 display: none; 1035 } 1036 } 1037 `,membershipOffers:` 1038 border: 1px solid ${o.colors.secondary15}; 1039 padding-left: 24px; 1040 display: grid; 1041 grid-template-columns: 0.75fr 1fr; 1042 gap: 8px; 1043 .membership-offers { 1044 padding: 24px 0; 1045 } 1046 .membership-offers-subtitle { 1047 color: ${o.colors.textUnlimitedBg}; 1048 margin: 14px 0; 1049 } 1050 .offers-message { 1051 ${o.mixins.body1}; 1052 font-weight: ${o.fonts.weightBold}; 1053 margin-bottom: 14px; 1054 max-width: 75%; 1055 } 1056 button.shop-now-button { 1057 cursor: pointer; 1058 padding: 7px 16px; 1059 min-width: 150px; 1060 font-weight: ${o.fonts.weightMediumPlus}; 1061 text-transform: uppercase; 1062 font-size: 12px; 1063 line-height: 14px; 1064 } 1065 .membership-image { 1066 background-size: cover; 1067 background-repeat: no-repeat; 1068 background-position: center; 1069 ${o.breakpoints.lg} { 1070 clip-path: polygon(0% 20%, 30% 0%, 100% 0%, 100% 60%, 60% 90%, 0% 75%); 1071 } 1072 } 1073 `,membershipStatus:` 1074 border: 1px solid ${o.colors.secondary15}; 1075 padding: 24px; 1076 h1.membership-status { 1077 font-family: ${o.fonts.oswald}; 1078 font-weight: ${o.fonts.weightMedium}; 1079 color: ${o.colors.textUnlimitedBg}; 1080 } 1081 .year-note { 1082 font-family: ${o.fonts.oswald}; 1083 font-weight: ${o.fonts.weightMedium}; 1084 font-size: ${o.fonts.sizeLarge}; 1085 padding-left: 8px; 1086 color: ${o.colors.textUnlimitedBg}; 1087 position: relative; 1088 top: -3px; 1089 } 1090 .saving-instruction { 1091 font-family: ${o.fonts.roboto}; 1092 padding-top: 8px; 1093 font-weight: ${o.fonts.weightNormal}; 1094 font-size: ${o.fonts.sizeLarge}; 1095 } 1096 .saving-note { 1097 font-family: ${o.fonts.roboto}; 1098 font-weight: ${o.fonts.weightNormal}; 1099 font-size: ${o.fonts.sizeH5}; 1100 color: ${o.colors.secondary15}; 1101 margin-top: 12px; 1102 } 1103 .price-section { 1104 display: flex; 1105 align-items: baseline; 1106 } 1107 .membership-status-title { 1108 font-family: ${o.fonts.noto}; 1109 font-weight: ${o.fonts.weightMediumPlus}; 1110 .savings-title { 1111 text-transform: capitalize; 1112 } 1113 } 1114 .membership-subscription-title { 1115 font-family: ${o.fonts.roboto}; 1116 font-weight: 700; 1117 font-size: ${o.fonts.sizeLarge}; 1118 padding-top: 10px; 1119 } 1120 .enroll-info { 1121 margin-top: 12px; 1122 font-family: ${o.fonts.roboto}; 1123 font-weight: ${o.fonts.weightBold}; 1124 font-size: ${o.fonts.sizeLarge}; 1125 & .date { 1126 font-weight: ${o.fonts.weightNormal}; 1127 font-size: ${o.fonts.sizeLarge}; 1128 padding-right: 8px; 1129 } 1130 } 1131 `,payment:` 1132 margin-top: 24px; 1133 ${o.breakpoints.sm} { 1134 margin-top: 40px; 1135 } 1136 .payment-title{ 1137 font-family: ${o.fonts.noto}; 1138 font-weight: ${o.fonts.weightMediumPlus}; 1139 } 1140 .last-payment-row{ 1141 display: flex; 1142 font-family: ${o.fonts.roboto}; 1143 font-size: ${o.fonts.sizeLarge}; 1144 color:${o.colors.primary8}; 1145 gap: 4px; 1146 } 1147 .last-payment-title{ 1148 font-weight: ${o.fonts.weightNormal}; 1149 padding-right: 4px; 1150 } 1151 .payment-date{ 1152 font-weight: ${o.fonts.weightBold}; 1153 .loaderContainer div {
1154 width: 20px; 1155 height: 20px; 1156 border-width: 2px; 1157 } 1158 } 1159 `,paymentMethod:` 1160 margin: 24px 0; 1161 .single-frequency-text { 1162 font-family: ${o.fonts.roboto}; 1163 font-size: ${o.fonts.sizeH4}; 1164 } 1165 .accordion-content { 1166 display: flex; 1167 align-items: center; 1168 justify-content: space-between; 1169 } 1170 .card-details { 1171 display: flex; 1172 align-items: center; 1173 gap: 16px; 1174 } 1175 .card-number { 1176 ${o.mixins.body1} 1177 color:${o.colors.primary8}; 1178 } 1179 .change-payment-card a { 1180 font-weight: ${o.fonts.weightMediumPlus}; 1181 font-size: ${o.fonts.sizeH5}; 1182 color:${o.colors.primary8}; 1183 word-break: normal; 1184 } 1185 .subscription-option-accordion { 1186 .mantine-Accordion-item { 1187 border-bottom: none; 1188 } 1189 } 1190 `},MyAccount:{deliveryStepperWrapper:` 1191 margin-top: 50px; 1192 display: flex; 1193 justify-content: space-between; 1194 margin-bottom: 20px; 1195 width: 100%; 1196 1197 .stepper-item { 1198 position: relative; 1199 display: flex; 1200 flex-direction: column; 1201 align-items: center; 1202 flex: 1; 1203 1204 @media (max-width: 768px) { 1205 font-size: 12px; 1206 } 1207 1208 &::before { 1209 position: absolute; 1210 content: ""; 1211 border-bottom: 1px solid #BCBCBC; 1212 width: 100%; 1213 top: 8px; 1214 left: -50%; 1215 z-index: 2; 1216 } 1217 1218 &::after { 1219 position: absolute; 1220 content: ""; 1221 border-bottom: 1px solid #BCBCBC; 1222 width: 100%; 1223 top: 8px; 1224 left: 50%; 1225 z-index: 2; 1226 } 1227 1228 .step-counter { 1229 position: relative; 1230 z-index: 5; 1231 display: flex; 1232 justify-content: center; 1233 align-items: center; 1234 width: 16px; 1235 height: 16px; 1236 border-radius: 50%; 1237 background: #ffffff; 1238 border: 1px solid ${o.colors.secondary15}; 1239 margin-bottom: 6px; 1240 } 1241 1242 &.active { 1243 color: #006E1A; 1244 1245 .step-counter { 1246 background: #ffffff; 1247 border: 1px solid #006E1A; 1248 1249 .step-counter-inner { 1250 background: #006E1A; 1251 width: 12px; 1252 height: 12px; 1253 border-radius: 50%; 1254 } 1255 } 1256 1257 1258 } 1259 1260 &:first-of-type::before { 1261 content: none; 1262 } 1263 1264 &:last-child::after { 1265 content: none; 1266 } 1267 } 1268 `,yourFutureDelivery:` 1269 margin: 50px auto 30px; 1270 display: flex; 1271 align-items: center; 1272 justify-content: center; 1273 flex-direction: column; 1274 width: 100%; 1275 1276 .delivery-heading { 1277 width: fit-content; 1278 font-size: 24px; 1279 margin: auto; 1280 ${o.breakpoints.sm} { 1281 font-size:34px; 1282 } 1283 1284 font-family: ${o.fonts.familyPrimary}; 1285 } 1286 1287 .delivery-text { 1288 font-size: 12px; 1289 font-family: ${o.fonts.familySecondary}; 1290 margin:auto; 1291 1292 ${o.breakpoints.sm} { 1293 font-size:16px; 1294 } 1295 } 1296 1297 .change-delivery-notification { 1298 display: flex; 1299 flex-wrap: wrap; 1300 justify-content: space-between; 1301 align-items: center; 1302 background-color: #f8f5ec; 1303 padding: 12px; 1304 border-radius: 6px; 1305 width: 100%; 1306 margin-top: 24px; 1307 1308 .left { 1309 display: flex; 1310 align-items: center; 1311 1312 .notification-text { 1313 font-size: 12px; 1314 margin-left: 8px; 1315 1316 ${o.breakpoints.sm} { 1317 font-size:16px; 1318 } 1319 } 1320 } 1321 1322 .notification-action { 1323 background: none; 1324 border: none; 1325 text-decoration: underline; 1326 font-size: 12px; 1327 font-weight: 500; 1328 cursor: pointer; 1329 ${o.breakpoints.sm} { 1330 font-size:16px; 1331 } 1332 } 1333 } 1334 1335 .packing { 1336 background-color: #B3CFE5; 1337 } 1338 .inDelivery { 1339 background-color: #B3CFE5; 1340 } 1341 `,wrapper:` 1342 display: grid; 1343 ${o.breakpoints.md} { 1344 grid-template-columns:380px 1fr; 1345 } 1346 `,sideBar:` 1347 display:none; 1348 ${o.breakpoints.md} { 1349 display:grid; 1350 } 1351 padding: 50px 10px 30px 45px; 1352 & div{ 1353 margin:0; 1354 padding:0; 1355 } 1356 & .navigation-link{ 1357 ${o.breakpoints.xs} { 1358 width:260px; 1359 } 1360 a{ 1361 font-size: ${o.fonts.sizeLarge}; 1362 margin-bottom: 18px; 1363 font-family: ${o.fonts.familySecondary}; 1364 line-height: 22.4px; 1365 color: ${o.colors.grey50}; 1366 1367 } 1368 h4{ 1369 font-size:30px; 1370 color:${o.colors.primary1}; 1371 font-family: ${o.fonts.familyTertiary}; 1372 margin: 20px 0px; 1373 } 1374 } 1375 & .myaccount-sidebar{ 1376 padding:10px; 1377 1378 } 1379 `,winePlan:` 1380 display: grid; 1381 1382 .error-message { 1383 margin-top:16px; 1384 padding:18px; 1385 background-color:${o.colors.errorLight}; 1386 color:${o.colors.error}; 1387 } 1388 1389 .delay-delivery-button { 1390 display: flex; 1391 gap: 8px; 1392 align-items: center; 1393 margin-bottom: 30px; 1394 button.cancel-tertiary-cta { 1395 margin: 0; 1396 } 1397 } 1398 1399 button.cancel-tertiary-cta { 1400 cursor: pointer; 1401 padding: 0px; 1402 text-decoration: underline; 1403 text-underline-offset: 4px; 1404 border:none; 1405 font-weight: ${o.fonts.weightNormal}; 1406 font-size: ${o.fonts.sizeDefault}; 1407 text-align: left; 1408 background-color: transparent; 1409 color: ${o.colors.black}; 1410 &:hover { 1411 text-decoration: underline; 1412 color: ${o.colors.black}; 1413 background-color: transparent; 1414 border: none; 1415 } 1416 width: fit-content; 1417 margin-bottom: 20px; 1418 ${o.breakpoints.sm} { 1419 width: fit-content; 1420 margin-bottom: 30px; 1421 } 1422 } 1423 1424 .spinner { 1425 min-height: 50px; 1426 position: relative; 1427 margin-top: 50px; 1428 } 1429 .payment-method { 1430 margin: 0; 1431 &:last-of-type{ 1432 margin-bottom: 40px; 1433 .mantine-Accordion-item::after { 1434 content: ""; 1435 left: -16px; 1436 right: -16px; 1437 height: 1px; 1438 background-color: ${o.colors.secondary9}; 1439 position: absolute; 1440 ${o.breakpoints.sm} { 1441 left: 0px; 1442 right: 0px; 1443 } 1444 } 1445 } 1446 } 1447 .subscription-option{ 1448 h6{ 1449 font-size:26px; 1450 } 1451 .loadIcon { 1452 margin: 10px 0; 1453 } 1454 } 1455 .case-details{ 1456 display: grid; 1457 margin-top:${o.space.xl2}; 1458 gap:${o.space.xl}; 1459 ${o.breakpoints.xs} { 1460 grid-template-columns: 1fr; 1461 } 1462 ${o.breakpoints.sm} { 1463 grid-template-columns:0.8fr 1fr; 1464 } 1465 1466 .case-image{ 1467 display: grid; 1468 justify-content:end; 1469 position:relative; 1470 width:90px; 1471 height:82px; 1472 justify-self: flex-end; 1473 @media (min-width: 360px) { 1474 display:none; 1475 } 1476 ${o.breakpoints.sm} { 1477 display: grid; 1478 width:164px; 1479 height:146px; 1480 } 1481 ${o.breakpoints.md} { 1482 display: grid; 1483 width:146px; 1484 height:130px; 1485 } 1486 ${o.breakpoints.lg} { 1487 display: grid; 1488 width:174px; 1489 height:156px; 1490 } 1491 ${o.breakpoints.xl} { 1492 display: grid; 1493 width:190px; 1494 height:170px; 1495 } 1496 ${o.breakpoints.xxl} { 1497 display: grid; 1498 width:260px; 1499 height:233px; 1500 } 1501 } 1502 .personalized-section { 1503 margin: 8px 0 0; 1504 ${o.mixins.body3} 1505 font-weight: ${o.fonts.weightMediumPlus}; 1506 color:#006E1A; 1507 background: ${o.colors.secondary16}; 1508 padding: 4px 12px; 1509 border-radius: 12px; 1510 } 1511 .case-info{ 1512 display: flex; 1513 flex-direction: column; 1514 padding-top: 1.15rem; 1515 align-items: start; 1516 .scheme-name{ 1517 font-size:24px; 1518 font-weight: ${o.fonts.weightMediumPlus}; 1519 ${o.breakpoints.sm} { 1520 font-size:30px; 1521 1522 } 1523 ${o.breakpoints.xxl} { 1524 font-size:34px; 1525 text-transform: uppercase; 1526 } 1527 1528 1529 font-family: ${o.fonts.familyPrimary}; 1530 line-height: 35.7px; 1531 1532 1533 } 1534 .case-price-info{ 1535 font-size: 18px; 1536 font-weight: ${o.fonts.weightBold}; 1537 ${o.breakpoints.sm} { 1538 font-size: 22px; 1539 font-weight: ${o.fonts.weightMediumPlus}; 1540 } 1541 1542 display:flex; 1543 flex-direction: column; 1544 ${o.breakpoints.sm} { 1545 align-items:center; 1546 flex-direction: row; 1547 margin-top:${o.space.xs}; 1548 } 1549 padding:10px 0px; 1550 .case-price{ 1551 line-height: 26.4px; 1552 } 1553 .case-saving-price{ 1554 margin-top:${o.space.xs}; 1555 ${o.breakpoints.sm} { 1556 margin-top:0; 1557 margin-left:${o.space.xs}; 1558 } 1559 1560 color: ${o.colors.primary1}; 1561 background: ${o.colors.primary5}; 1562 border-radius:16px; 1563 padding:4px 10px; 1564 width: fit-content; 1565 font-size: 12px; 1566 1567 } 1568 .case-discount-price{ 1569 margin-top:${o.space.xs}; 1570 ${o.breakpoints.sm} { 1571 margin-top:0; 1572 margin-left:${o.space.xs}; 1573 } 1574 1575 color: ${o.colors.secondary6}; 1576 background: ${o.colors.secondary16}; 1577 border-radius:16px; 1578 padding:8px; 1579 width: fit-content; 1580 font-size: 12px; 1581 1582 } 1583 } 1584 .case-standard-price{ 1585 color: ${o.colors.grey60}; 1586 padding-bottom:13px; 1587 font-size: 16px; 1588 1589 } 1590 .case-bottle-count{ 1591 font-size: 16px; 1592 color: ${o.colors.grey50}; 1593 font-weight: ${o.fonts.weightNormal}; 1594 1595 } 1596 .case-swap-links { 1597 display: flex; 1598 margin-top: 8px; 1599 gap: 4px; 1600 flex-direction: column; 1601 ${o.breakpoints.xs} { 1602 width: 100%; 1603 } 1604 ${o.breakpoints.sm} { 1605 flex-direction: row; 1606 width: fit-content; 1607 } 1608 ${o.breakpoints.md} { 1609 width: fit-content; 1610 } 1611 ${o.breakpoints.xl} { 1612 width: fit-content; 1613 } 1614 ${o.breakpoints.xxl} { 1615 width: fit-content; 1616 } 1617 } 1618 .case-not-select-container{ 1619 display: flex; 1620 flex-direction: column; 1621 align-items: start; 1622 .coming-soon-heading { 1623 color: ${o.colors.grey50}; 1624 margin: 0; 1625 padding:13px 0px; 1626 } 1627 .case-not-select-notes{ 1628 font-size: ${o.fonts.sizeH4}; 1629 1630 } 1631 .take-case{ 1632 width:190px; 1633 margin:13px 0px; 1634 font-size: 14px; 1635 font-weight: ${o.fonts.weightMediumPlus}; 1636 border-radius: 4px; 1637 } 1638 } 1639 } 1640 1641 } 1642 .bottles-details-wrapper{ 1643 display:grid; 1644 margin-top: ${o.space.xl}; 1645 .header{ 1646 font-size: 18px; 1647 font-weight: ${o.fonts.weightMediumPlus}; 1648 font-family: ${o.fonts.familyTertiary}; 1649 1650 } 1651 .case-update { 1652 ${o.mixins.body2} 1653 margin-top: 12px; 1654 display: flex; 1655 gap: 8px; 1656 align-items: center; 1657 color:#006E1A; 1658 & i { 1659 font-size: 18px; 1660 } 1661 } 1662 .product-row{ 1663 display:flex; 1664 align-items: center; 1665 .arrow-slide { 1666 background:white; 1667 border-radius:15px; 1668 cursor: pointer; 1669 ${o.breakpoints.xs} { 1670 position: absolute; 1671 z-index: 1; 1672 &.right{ 1673 right:25px; 1674 } 1675 } 1676 ${o.breakpoints.sm}{ 1677 position: relative; 1678 &.right{ 1679 margin:auto; 1680 margin-right: 0px; 1681 } 1682 } 1683 } 1684 1685 .bottles-details { 1686 1687 display: grid; 1688 1689 .bottle-container { 1690 display: grid; 1691 grid-auto-flow: column; /* Arrange items in a single row */ 1692 grid-auto-columns: minmax(293.33px, 1fr); /* Define minimum and maximum column sizes */ 1693 overflow-x: auto; /* Enable horizontal scrolling */ 1694 white-space: nowrap; /* Prevent line breaks */ 1695 gap: 10px; /*space between grid items */ 1696 padding: 20px; 1697 scrollbar-width: none; 1698 1699 1700 .product-card { 1701 display: flex; 1702 position: relative; 1703 flex-direction: column; 1704 align-items: center; 1705 padding: 15px; 1706 white-space: normal; 1707 height:100%; 1708 &.gift-card{ 1709 border: 1px solid ${o.colors.secondary9}; 1710 border-radius: 4px; 1711 background: none; 1712 & .gift-tag{ 1713 justify-content: start; 1714 position: absolute; 1715 display:flex; 1716 gap:7px; 1717 background-color: ${o.colors.grey00}; 1718 padding:10px; 1719 border-radius: 4px; 1720 font-weight:700; 1721 font-size:16px; 1722 z-index:1; 1723 } 1724 } 1725 & .product-details-parent{ 1726 height:auto; 1727 ${o.breakpoints.sm}{ 1728 height:100%; 1729 } 1730 } 1731 .product-details{ 1732 margin:
1732 auto; 1733 margin-bottom: 0; 1734 display: flex; 1735 flex-direction: column; 1736 align-items: center; 1737 height:100%; 1738 ${o.breakpoints.sm} { 1739 align-items: start; 1740 } 1741 .product-name{ 1742 font-size: 18px; 1743 font-weight: ${o.fonts.weightMediumPlus}; 1744 margin: 18px 0 15px 0; 1745 font-family: ${o.fonts.familyTertiary}; 1746 margin-top: 10px; 1747 &.single-line{ 1748 max-height: 4em; 1749 overflow: hidden; 1750 text-overflow: ellipsis; 1751 display: -webkit-box; 1752 -webkit-line-clamp: 2; 1753 -webkit-box-orient: vertical; 1754 //margin-top: -8.1px; 1755 } 1756 } 1757 .product-count{ 1758 color: ${o.colors.grey60}; 1759 font-size: 16px; 1760 font-weight: ${o.fonts.weightNormal}; 1761 padding-bottom: 15px; 1762 align-items: center; 1763 display: flex; 1764 margin-top:auto; 1765 } 1766 1767 .product-label,.mobile-product-label{ 1768 display:none; 1769 ${o.breakpoints.sm} { 1770 display:block; 1771 cursor:pointer; 1772 } 1773 background:none; 1774 border:none; 1775 color: ${o.colors.grey50}; 1776 font-size: 16px; 1777 font-weight: ${o.fonts.weightNormal}; 1778 padding-top: 10px; 1779 padding-bottom: 2px; 1780 width: fit-content; 1781 box-shadow: inset 0 -1px 0 0 black; 1782 cursor:pointer; 1783 1784 } 1785 .mobile-product-label{ 1786 display:block; 1787 ${o.breakpoints.sm} { 1788 display:none; 1789 cursor:pointer; 1790 } 1791 } 1792 &.non-wine-gift{ 1793 .product-label,.product-count,.wine-rating{ 1794 visibility: hidden; 1795 } 1796 1797 } 1798 } 1799 .product-name{ 1800 font-size: 18px; 1801 font-weight: ${o.fonts.weightMediumPlus}; 1802 font-family: ${o.fonts.familyTertiary}; 1803 padding: 16px; 1804 } 1805 .image-container { 1806 display: flex; 1807 justify-content: center; 1808 1809 .image-size { 1810 position: relative; 1811 width: 48px; 1812 height: 180px; 1813 1814 ${o.breakpoints.lg} { 1815 width: 120px; 1816 height: 220px; 1817 } 1818 } 1819 } 1820 } 1821 } 1822 } 1823 } 1824 `,winePlanProductImage:` 1825 width: 100%; 1826 .product-image-container { 1827 position: relative; 1828 padding: 16px 0; 1829 margin-bottom: 13px; 1830 background-color: ${o.colors.bgColors.LWCream}; 1831 .label-card { 1832 display: none; 1833 position: absolute; 1834 top: 0; 1835 left: 0; 1836 width: 100%; 1837 background: rgb(248, 245, 239); 1838 color: black; 1839 padding: 10px; 1840 box-sizing: border-box; 1841 z-index: 1; 1842 height: 180px; 1843 flex-direction: column; 1844 justify-content: center; 1845 align-items: start; 1846 1847 ${o.breakpoints.lg} { 1848 height: 220px; 1849 } 1850 1851 .label-row { 1852 margin-left: 20%; 1853 1854 ${o.breakpoints.lg} { 1855 margin-left: 0; 1856 } 1857 1858 i { 1859 padding: 5px; 1860 } 1861 1862 display: grid; 1863 grid-template-columns: auto 1fr; 1864 align-items: center; 1865 padding:8px; 1866 } 1867 } 1868 1869 &:hover .label-card { 1870 display: flex; 1871 } 1872 1873 .image-container { 1874 display: flex; 1875 justify-content: center; 1876 background-color: ${o.colors.bgColors.LWCream}; 1877 1878 .image-size { 1879 position: relative; 1880 width: 48px; 1881 height: 180px; 1882 1883 ${o.breakpoints.lg} { 1884 width: 120px; 1885 height: 220px; 1886 } 1887 } 1888 1889 &.gift-image { 1890 .image-size { 1891 width: 220px; 1892 } 1893 } 1894 1895 } 1896 } 1897 `,accordion:` 1898 .mantine-UnstyledButton-root { 1899 padding: 0; 1900 ${o.breakpoints.sm} { 1901 padding: 0 16px; 1902 } 1903 } 1904 .mantine-Accordion-content { 1905 padding: 1rem 0; 1906 padding-top: calc(0.625rem / 2); 1907 ${o.breakpoints.sm} { 1908 padding: 1rem; 1909 padding-top: calc(0.625rem / 2); 1910 } 1911 } 1912 .mantine-Accordion-label { 1913 padding: 24px 0; 1914 } 1915 .subscription-option-accordion{ 1916 position: relative; 1917 .mantine-Accordion-item { 1918 border: none; 1919 } 1920 .mantine-Accordion-item::before { 1921 content: ""; 1922 left: -16px; 1923 right: -16px; 1924 height: 1px; 1925 background-color: ${o.colors.secondary9}; 1926 position: absolute; 1927 ${o.breakpoints.sm} { 1928 left: 0px; 1929 right: 0px; 1930 } 1931 } 1932 transform: rotate(0deg); 1933 &.single-frequency{ 1934 & .mantine-Accordion-chevron { 1935 visibility: hidden; 1936 } 1937 } 1938 & .accordion-heading{ 1939 display:flex; 1940 1941 align-items: center; 1942 gap: 16px; 1943 .accordion-heading-text{ 1944 font-size:16px; 1945 font-weight: ${o.fonts.weightBold}; 1946 font-family: ${o.fonts.familySecondary}; 1947 } 1948 .single-frequency-text{ 1949 color:${o.colors.lwDrGray}; 1950 display: none; 1951 ${o.breakpoints.sm} { 1952 display: initial; 1953 } 1954 } 1955 } 1956 & .option-heading{ 1957 margin-top:10px; 1958 margin-bottom:20px; 1959 font-size:16px; 1960 font-weight: ${o.fonts.weightNormal}; 1961 1962 } 1963 & .choosing-weeks{ 1964 // display:flex; 1965 display: grid; 1966 grid-auto-flow: row; 1967 grid-auto-columns: minmax(150px, 1fr); /* Define minimum and maximum column sizes */ 1968 gap:20px; 1969 align-items: unset; 1970 ${o.breakpoints.md} { 1971 grid-template-columns: repeat(3, 1fr); 1972 &.choosing-frequency{ 1973 width:80%; 1974 } 1975 // grid-auto-flow: column; 1976 } 1977 .weeks-chip { 1978 //padding: 20px !important; 1979 border-radius: 0; 1980 width: auto; 1981 height: auto; 1982 padding: 10px; 1983 border: 1px solid ${o.colors.secondary9}; 1984 border-radius: 2px; 1985 display:flex; 1986 align-items: center; 1987 // justify-content: center; 1988 cursor:pointer; 1989 font-size:16px; 1990 font-weight: ${o.fonts.weightNormal}; 1991 &.active{ 1992 border: 2px solid ${o.colors.primary8}; 1993 1994 font-weight: ${o.fonts.weightBold}; 1995 font-family: ${o.fonts.familySecondary}; 1996 1997 } 1998 .icon{ 1999 position: absolute; 2000 // margin-left:10px; 2001 i:before{
2002 color:${o.colors.btnsPrimaryBg};; 2003 } 2004 } 2005 .frequency-varient{ 2006 margin: auto; 2007 padding:0 25px; 2008 width: 100%; 2009 display: flex; 2010 justify-content: center; 2011 2012 } 2013 2014 } 2015 2016 } 2017 & .notes{ 2018 display:flex; 2019 align-items:center; 2020 gap:10px; 2021 color:${o.colors.secondary12}; 2022 margin-top: 20px; 2023 .notes-text{ 2024 2025 } 2026 } 2027 & .update-section{ 2028 display:flex; 2029 margin-top: 20px; 2030 justify-content:end; 2031 .clear { 2032 background: none; 2033 font-size: ${o.fonts.sizeLarge}; 2034 line-height: ${o.fonts.lineHeightDefault}; 2035 text-decoration-line: underline; 2036 2037 cursor: pointer; 2038 border: none; 2039 box-shadow: none; 2040 &:hover { 2041 background: none; 2042 color: #000; 2043 text-decoration-line: underline; 2044 } 2045 } 2046 .update{ 2047 width: 10rem; 2048 ${o.breakpoints.sm}{ 2049 width:250px; 2050 } 2051 } 2052 } 2053 } 2054 `,winePlanModalWrapper:` 2055 & .mantine-Modal-inner{ 2056 bottom: unset; 2057 top: 10rem; 2058 ${o.breakpoints.lg} { 2059 bottom: 0; 2060 top: 0; 2061 } 2062 } 2063 & .mantine-Paper-root{ 2064 padding:20px; 2065 & h2.mantine-Modal-title{ 2066 font-size: 30px; 2067 font-weight: 500; 2068 } 2069 .frequency-weeks{ 2070 font-size: 16px; 2071 margin:20px 0px; 2072 .bold{ 2073 font-weight: ${o.fonts.weightMediumPlus}; 2074 } 2075 } 2076 .notes{ 2077 margin-bottom:20px 2078 } 2079 .close{ 2080 display:flex; 2081 justify-content:end; 2082 button{ 2083 width:190px; 2084 } 2085 } 2086 } 2087 `,unlimitedModalWrapper:` 2088 .mantine-Modal-title { 2089 font-size: 28px; 2090 font-weight: ${o.fonts.weightMediumPlus}; 2091 margin-bottom: 0 !important; 2092 2093 ${o.breakpoints.sm} { 2094 font-size: 30px; 2095 } 2096 } 2097 2098 .mantine-Modal-header { 2099 align-items: center; 2100 padding-top: 20px; 2101 } 2102 2103 .mantine-Modal-body { 2104 padding-bottom: 0; 2105 display: flex; 2106 flex-direction: column; 2107 justify-content: space-between; 2108 height: 100%; 2109 } 2110 2111 .mantine-Modal-content { 2112 position: absolute; 2113 padding: 12px; 2114 padding-top: 0; 2115 bottom: 0; 2116 width: 100%; 2117 min-height: fit-content; 2118 border-radius: 8px 8px 0 0; 2119 box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); 2120 display: flex; 2121 flex-direction: column; 2122 gap: 12px; 2123 2124 ${o.breakpoints.sm} { 2125 position: relative; 2126 max-width: 728px; 2127 width: 100%; 2128 height: fit-content; 2129 padding: 24px; 2130 border-radius: 8px; 2131 box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); 2132 top: 20%; 2133 } 2134 } 2135 2136 .unlimited-modal-content-wrapper { 2137 justify-content: space-between; 2138 gap: 32px; 2139 ${o.breakpoints.sm} { 2140 justify-content: space-evenly; 2141 } 2142 2143 .unlimited-icons{ 2144 display:flex; 2145 align-items: center; 2146 .notes { 2147 margin-left: 10px; 2148 } 2149 i { 2150 color: #20513B; 2151 } 2152 } 2153 2154 .unlimited-offers-content { 2155 padding: 10px 20px; 2156 background-size: contain; 2157 background-position: center; 2158 background-repeat: no-repeat; 2159 height: 70px; 2160 background-image: url("/next/images/unlimited-offer-bg.png"); 2161 display: flex; 2162 justify-content: center; 2163 align-items: center; 2164 gap: 10px; 2165 color: white; 2166 text-align: center; 2167 font-size: 24px; 2168 font-style: bold; 2169 } 2170 } 2171 2172 .unlimited-modal-cta-wrapper { 2173 justify-content: center; 2174 flex-direction: column-reverse; 2175 margin-top: 20px; 2176 ${o.breakpoints.sm} { 2177 flex-direction: row; 2178 justify-content: flex-end; 2179 margin-top: auto; 2180 } 2181 } 2182 2183 button.unlimited-modal-primary-cta { 2184 cursor: pointer; 2185 width: 100%; 2186 background-color: #117B53;
2187 color: ${o.colors.btnsPrimaryColor}; 2188 ${o.breakpoints.sm} { 2189 width: auto; 2190 } 2191 2192 :hover { 2193 background-color: #094B32; 2194 color: ${o.colors.btnsPrimaryColor}; 2195 } 2196 } 2197 2198 button.unlimited-modal-tertiary-cta { 2199 cursor: pointer; 2200 text-decoration: underline; 2201 background-color: transparent; 2202 border: none; 2203 color: ${o.colors.black}; 2204 &:hover { 2205 text-decoration: none; 2206 color: ${o.colors.black}; 2207 background-color: transparent; 2208 border: none; 2209 } 2210 width: 100%; 2211 ${o.breakpoints.sm} { 2212 width: auto; 2213 } 2214 } 2215 `,cancelWineplanSubscriptionModalWrapper:` 2216 .mantine-Modal-title { 2217 font-size: 28px; 2218 font-weight: ${o.fonts.weightMedium}; 2219 margin-bottom: 0 !important; 2220 .heading-notes{ 2221 font-size: 14px; 2222 font-family: ${o.fonts.roboto}; 2223 font-weight: ${o.fonts.weightLight}; 2224 line-height:130%; 2225 text-transform: none; 2226 letter-spacing: normal; 2227 } 2228 ${o.breakpoints.sm} { 2229 font-size: 30px; 2230 } 2231 } 2232 2233 .mantine-Modal-header { 2234 align-items: flex-start; 2235 padding-top: 20px; 2236 } 2237 2238 .mantine-Modal-body { 2239 padding-bottom: 0; 2240 display: flex; 2241 flex-direction: column; 2242 justify-content: space-between; 2243 height: calc(100vh - 200px); 2244 ${o.breakpoints.sm} 2245 { 2246 height: 100%; 2247 } 2248 } 2249 2250 .mantine-Modal-content { 2251 position: absolute; 2252 padding: 12px; 2253 padding-top: 0; 2254 top: 0; 2255 bottom:0; 2256 width:100%; 2257 height:100%; 2258 border-radius: 8px 8px 0 0; 2259 box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); 2260 display: flex; 2261 flex-direction: column; 2262 gap: 12px; 2263 2264 ${o.breakpoints.sm} { 2265 position: relative; 2266 max-width: 728px; 2267 width: 100%; 2268 height: fit-content; 2269 padding: 24px; 2270 border-radius: 8px; 2271 box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); 2272 top: 5%; 2273 bottom: auto; 2274 } 2275 } 2276 2277 .mantine-Radio-radio{ 2278 position:relative; 2279 background-color:transparent; 2280 &:checked{ 2281 border-color: #117B53; 2282 } 2283 } 2284 2285 .mantine-Radio-radio::before, 2286 .mantine-Radio-radio::after{ 2287 position:absolute; 2288 content:''; 2289 height:10px; 2290 width: 10px; 2291 background: transparent; 2292 border-radius:50%; 2293 background-color: transparent; 2294 } 2295 2296 .mantine-Radio-radio:checked::before, 2297 .mantine-Radio-radio:checked::after{ 2298 background-color: #117B53; 2299 } 2300 2301 .wineplan-modal-content-wrapper { 2302 flex:1; 2303 overflow-y: scroll; 2304 justify-content: flex-start; 2305 gap: 32px; 2306 ${o.breakpoints.sm} { 2307 flex: initial; 2308 overflow-y: visible; 2309 padding-bottom: 0; 2310 justify-content: space-evenly; 2311 } 2312 .wineplan-icons{ 2313 padding: 16px 16px 16px 0; 2314 height: 94px; 2315 display:flex; 2316 align-items: flex-start; 2317 ${o.breakpoints.sm} 2318 { 2319 height: 76px; 2320 padding: 16px 24px 16px 0; 2321 } 2322 i { 2323 color: #222222; 2324 } 2325 .notes { 2326 margin-left: 16px; 2327 font-family: ${o.fonts.roboto}; 2328 } 2329 .notes-heading{ 2330 font-weight: ${o.fonts.weightBold}; 2331 font-size: 16px; 2332 font-family: ${o.fonts.roboto}; 2333 margin-left: 16px; 2334 } 2335 } 2336 2337 .wineplan-modal-cta-wrapper { 2338 position: absolute; 2339 padding-bottom: 20px; 2340 width:90%; 2341 bottom: 0; 2342 background-color: white; 2343 padding: 20px; 2344 justify-content: center; 2345 flex-direction: column; 2346 ${o.breakpoints.sm} { 2347 position: relative; 2348 width: 100%; 2349 padding: 0; 2350 flex-direction: row; 2351 justify-content: flex-end; 2352 } 2353 &.single-button{ 2354 justify-content: center; 2355 left:0; 2356 width: 100%; 2357 box-shadow:0px -5px 40px #00141E1A, 0px 10px 20px #00141E33; 2358 ${o.breakpoints.sm}{ 2359 box-shadow: none; 2360 } 2361 } 2362 } 2363 2364 button.wineplan-modal-primary-cta { 2365 cursor: pointer; 2366 width: 100%; 2367 background-color: #117B53;
2368 color: ${o.colors.btnsPrimaryColor}; 2369 ${o.breakpoints.sm} { 2370 width: 220px; 2371 } 2372 2373 :hover { 2374 background-color: #094B32; 2375 color: ${o.colors.btnsPrimaryColor}; 2376 } 2377 } 2378 2379 button.wineplan-modal-tertiary-cta { 2380 cursor: pointer; 2381 background-color: transparent; 2382 color: ${o.colors.black}; 2383 &:hover { 2384 color: ${o.colors.black}; 2385 background-color: transparent; 2386 } 2387 width: 100%; 2388 ${o.breakpoints.sm} { 2389 width: 220px; 2390 } 2391 &.disabled{ 2392 background-color: #BCBCBC; 2393 } 2394 } 2395 2396 .cancel-reasons { 2397 justify-content: space-around; 2398 flex: 1; 2399 gap: 16px; 2400 .radio-group{ 2401 border: 1px solid #BCBCBC; 2402 border-radius: 4px; 2403 width: 100%; 2404 height: 68px; 2405 ${o.breakpoints.sm} 2406 { 2407 height: 58px; 2408 } 2409 } 2410 .label{ 2411 flex:1; 2412 font-weight: ${o.fonts.weightNormal}; 2413 font-size: ${o.fonts.sizeH4}; 2414 font-family: ${o.fonts.roboto}; 2415 letter-spacing: 0%; 2416 line-height: 140%; 2417 } 2418 .radio-group:has(input[type="radio"]:checked){ 2419 border: 1px solid #222222; 2420 label{ 2421 font-weight: ${o.fonts.weightBold}; 2422 } 2423 } 2424 } 2425 2426 .coupon-container{ 2427 height: 179px; 2428 width: fit-content; 2429 gap:32px; 2430 padding: 32px; 2431 ${o.breakpoints.sm} { 2432 gap: 16px; 2433 height: 68px; 2434 width: 664px; 2435 padding: 0; 2436 } 2437 } 2438 2439 .coupon{ 2440 position:relative; 2441 background-color: #004D86; 2442 height:68px; 2443 width:193px; 2444 border-radius: 4px; 2445 justify-content: center; 2446 color: #ffffff; 2447 .mantine-Text-root{ 2448 font-family: Oswald; 2449 font-weight: ${o.fonts.weightMedium}; 2450 letter-spacing: -4%; 2451 line-height: 105%; 2452 font-size:30px; 2453 border-left:10px; 2454 } 2455 } 2456 2457 .coupon::before, 2458 .coupon::after{ 2459 content: ''; 2460 position: absolute; 2461 width: 20.53px; 2462 height: 20px; 2463 top: 50%; /* Center vertically */ 2464 background-color: #ffffff; 2465 transform: translateY(-50%); 2466 border-radius: 50%; 2467 } 2468 2469 .coupon::before{ 2470 left: -10.55px; 2471 } 2472 2473 .coupon::after{ 2474 left: 182.72px; 2475 } 2476 2477 .coupon-notes{ 2478 text-weight: ${o.fonts.weightBold}; 2479 font-size: 30px; 2480 font-family: Oswald; 2481 letter-spacing: -2%; 2482 line-height:110.00000000000001% 2483 } 2484 .features-grid{ 2485 2486 } 2487 .features-card{ 2488 height: 221px; 2489 border: 1px solid #BCBCBC; 2490 border-radius: 4px; 2491 padding: 24px; 2492 width: 99%; 2493 ${o.breakpoints.sm} 2494 { 2495 width: 49%; 2496 padding: 17px; 2497 height:181px; 2498 } 2499 } 2500 .feature-title{ 2501 font-size: 16px; 2502 font-weight: ${o.fonts.weightBold}; 2503 font-family: ${o.fonts.roboto}; 2504 letter-spacing: 0%; 2505 line-height: 140%; 2506 } 2507 .feature-description{ 2508 letter-spacing: 0%; 2509 line-height: 130%; 2510 font-family: ${o.fonts.roboto}; 2511 font-size:14px; 2512 font-weight: ${o.fonts.weightNormal} 2513 } 2514 .feature-button{ 2515 width: 100%; 2516 border-radius: 1px; 2517 height: 43px; 2518 padding: 0 2519 } 2520 .feedback-text-area{ 2521 resize: none; 2522 width: 100%; 2523 border: 1px solid ${o.colors.black}; 2524 & + label { 2525 color: ${o.colors.secondary15}; 2526 top: 20px; 2527 } 2528 } 2529 .feedback-notes{ 2530 margin-top: 32px; 2531 } 2532 .tick-circle{ 2533 height: 40px; 2534 background-color: ${o.colors.secondary16}; 2535 border-radius: 50%; 2536 display: flex; 2537 align-items: center; 2538 justify-content: center; 2539 flex: 0 0 40px; 2540 } 2541 `,delayCaseModalModalWrapper:{wrapper:` 2542 .mantine-Modal-inner { 2543 z-index: 9999; 2544 } 2545 section.mantine-Paper-root { 2546 min-height: -webkit-fill-available; 2547 } 2548 .mantine-Modal-content { 2549 position: fixed; 2550 top: 0; 2551 left: 0; 2552 width: 100%; 2553 min-height: 100vh; 2554 border-radius: 0; 2555 & .mantine-Modal-body { 2556 padding: 0rem 24px; 2557 } 2558 }
2559 .modal-content { 2560 position: relative; 2561 display: flex; 2562 flex-direction: column; 2563 height: 100vh; 2564 } 2565 .delivery-content { 2566 position: relative; 2567 flex: 1; 2568 .title { 2569 ${o.mixins.body1} 2570 font-weight: ${o.fonts.weightBold}; 2571 padding-bottom: 1rem; 2572 text-align: center; 2573 } 2574 } 2575 .title-content { 2576 display: flex; 2577 background: #FFF; 2578 padding-top: 32px; 2579 z-index: 100; 2580 align-items: center; 2581 position: sticky; 2582 top: 0; 2583 width: 100%; 2584 & i { 2585 margin-bottom: 16px; 2586 cursor: pointer; 2587 } 2588 .title { 2589 flex: 1; 2590 text-align: center; 2591 margin-right: 24px; 2592 } 2593 } 2594 .subtitle { 2595 ${o.mixins.body1} 2596 padding: 1rem 0; 2597 span { 2598 font-weight: ${o.fonts.weightBold}; 2599 } 2600 } 2601 .delay-caseoption-container { 2602 .delay-caseoption-details { 2603 display: flex; 2604 align-items: center; 2605 border: 1px solid ${o.colors.secondary9}; 2606 cursor: pointer; 2607 padding: 8px 16px; 2608 margin: 8px 0; 2609 &.selected { 2610 border: 1px solid ${o.colors.primary8}; 2611 } 2612 .delay-caseoption-week { 2613 font-weight: ${o.fonts.weightBold}; 2614 } 2615 } 2616 .delay-caseoption-checkmark { 2617 color: green; 2618 margin-right: 8px; 2619 } 2620 } 2621 .button-container { 2622 text-align: right; 2623 padding: 16px 0; 2624 background: #FFF; 2625 z-index: 100; 2626 align-items: center; 2627 position: sticky; 2628 bottom: 0; 2629 width: 100%; 2630 & button { 2631 cursor: pointer; 2632 } 2633 .submit-button { 2634 width: 100%; 2635 padding: 16px; 2636 text-transform: uppercase;
2637 background: ${o.colors.btnsPrimaryBg}; 2638 .mantine-Button-icon { 2639 width: 16px; 2640 } 2641 &:disabled{ 2642 background-color: ${o.colors.grey00}; 2643 color: ${o.colors.grey70}; 2644 } 2645 } 2646 } 2647 `},changeDeliveryDateModalWrapper:{wrapper:` 2648 .mantine-Modal-inner { 2649 z-index: 9999; 2650 .error{ 2651 margin-top:16px; 2652 padding:18px; 2653 background-color:${o.colors.errorLight}; 2654 color:${o.colors.error}; 2655 } 2656 } 2657 .spinner { 2658 min-height: 150px; 2659 position: relative; 2660 margin-top: 70px; 2661 } 2662 .no-options { 2663 ${o.mixins.body1} 2664 padding: 32px; 2665 text-align: center; 2666 } 2667 .delay-case-option-content { 2668 margin-top: 12px; 2669 .delay-case-option-header { 2670 display: flex; 2671 align-items: center; 2672 margin-top: 12px; 2673 gap: 12px; 2674 ${o.mixins.body1} 2675 .delay-caseoption-week { 2676 font-weight: ${o.fonts.weightBold}; 2677 } 2678 } 2679 .delay-case-selected-option { 2680 flex: 1; 2681 .mantine-Menu-dropdown { 2682 max-height: 200px; 2683 overflow-y: scroll; 2684 padding: 0.75rem; 2685 margin-top: -9px; 2686 border-color: ${o.colors.secondary9}; 2687 .mantine-Menu-itemLabel { 2688 overflow: hidden; 2689 text-overflow: ellipsis; 2690 white-space: nowrap; 2691 } 2692 } 2693 } 2694 .delay-caseoption-container { 2695 display: flex; 2696 align-items: center; 2697 border: 1px solid ${o.colors.secondary9}; 2698 cursor: pointer; 2699 padding: 8px; 2700 justify-content: space-between; 2701 .delay-caseoption-details { 2702 flex: 1; 2703 } 2704 .delay-caseoption-checkmark { 2705 margin-right: 8px; 2706 color: green; 2707 } 2708 } 2709 .delay-caseoption-menu { 2710 display: flex; 2711 align-items: center; 2712 gap: 8px; 2713 cursor: pointer; 2714 justify-content: space-between; 2715 .delay-caseoption-menu-details { 2716 flex: 1; 2717 } 2718 .delay-caseoption-menu-checkmark { 2719 margin-right: 8px; 2720 color: green; 2721 } 2722 } 2723 } 2724 .choose-date-option-content { 2725 margin-top: 12px; 2726 .choose-date-option-title { 2727 display: flex; 2728 align-items: center; 2729 margin-top: 12px; 2730 gap: 12px; 2731 ${o.mixins.body1} 2732 .choose-date-date { 2733 font-weight: ${o.fonts.weightBold}; 2734 } 2735 } 2736 .choose-date-option-subtitle { 2737 margin-top: 12px; 2738 color: ${o.colors.secondary12}; 2739 ${o.mixins.body1} 2740 .choose-date-date { 2741 padding-left: 8px; 2742 } 2743 } 2744 .choose-date-calendar { 2745 .mantine-MonthLevel-monthLevel { 2746 margin: auto; 2747 } 2748 .mantine-Day-day.weekend { 2749 color: ${o.colors.primary5}; 2750 } 2751 margin-top: 12px; 2752 } 2753 } 2754 .send-now-option-content { 2755 display: flex; 2756 align-items: center; 2757 margin-top: 12px; 2758 gap: 12px; 2759 ${o.mixins.body1} 2760 .send-now-date { 2761 font-weight: ${o.fonts.weightBold}; 2762 } 2763 } 2764 .mantine-Modal-content { 2765 position: fixed; 2766 top: 0; 2767 left: 0; 2768 width: 100%; 2769 border-radius: 0; 2770 ${o.breakpoints.sm} { 2771 border-radius: 12px; 2772 position: static; 2773 } 2774 & .mantine-Modal-body { 2775 padding: 0rem 24px; 2776 } 2777 }
2778 .modal-content { 2779 position: relative; 2780 display: flex; 2781 flex-direction: column; 2782 ${o.breakpoints.sm} { 2783 padding: 0 16px; 2784 display: block; 2785 height: 520px; 2786 } 2787 } 2788 .delivery-content { 2789 position: relative; 2790 flex: 1; 2791 } 2792 .title-content { 2793 display: flex; 2794 justify-content: space-between; 2795 background: #FFF; 2796 padding-top: 32px; 2797 z-index: 100; 2798 align-items: center; 2799 position: sticky; 2800 top: 0; 2801 width: 100%; 2802 & i { 2803 margin-bottom: 16px; 2804 cursor: pointer; 2805 } 2806 } 2807 .subtitle { 2808 ${o.mixins.body1} 2809 span { 2810 font-weight: ${o.fonts.weightBold}; 2811 } 2812 } 2813 .option { 2814 padding: 16px; 2815 border: 1px solid ${o.colors.secondary9}; 2816 margin: 16px 0; 2817 display: flex; 2818 align-items: flex-start; 2819 label { 2820 ${o.mixins.body1} 2821 cursor: pointer; 2822 display: inline-block; 2823 width: 100%; 2824 } 2825 input { 2826 appearance:none; 2827 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7.5" fill="white" stroke="%23BCBCBC"/></svg>'); 2828 background-size: 16px; 2829 width: 16px; 2830 height: 16px; 2831 position: relative; 2832 top: 3px; 2833 &:checked { 2834 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7.5" fill="white" stroke="${encodeURIComponent(o.colors.primary1)}"/><circle cx="7.99935" cy="8.00002" r="5.33333" fill="${encodeURIComponent(o.colors.primary1)}"/></svg>'); 2835 } 2836 /* Green color for "Choose a specific day" radio button */ 2837 &#deliveryDate:checked { 2838 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7.5" fill="white" stroke="${encodeURIComponent(o.colors.secondary17||"#388e3c")}"/><circle cx="7.99935" cy="8.00002" r="5.33333" fill="${encodeURIComponent(o.colors.secondary17||"#388e3c")}"/></svg>'); 2839 } 2840 } 2841 &.active{ 2842 border: 1px solid ${o.colors.primary8}; 2843 label { 2844 font-weight: ${o.fonts.weightBold}; 2845 } 2846 } 2847 } 2848 .option-details { 2849 margin-left: 16px; 2850 flex: 1; 2851 } 2852 .button-container { 2853 text-align: right; 2854 padding: 16px 0; 2855 background: #FFF; 2856 z-index: 100; 2857 align-items: center; 2858 position: sticky; 2859 bottom: 0; 2860 width: 100%; 2861 & button { 2862 cursor: pointer; 2863 } 2864 .cancel-button { 2865 background: transparent; 2866 color: ${o.colors.primary8}; 2867 border: none; 2868 border-radius: 0; 2869 padding: 0 16px; 2870 display: none; 2871 span { 2872 border-bottom: 1px solid ${o.colors.primary8}; 2873 ${o.mixins.body1} 2874 } 2875 ${o.breakpoints.sm} { 2876 display: inline-block; 2877 } 2878 } 2879 .submit-button { 2880 width: 100%; 2881 padding: 16px; 2882 text-transform: uppercase;
2883 background: ${o.colors.btnsPrimaryBg}; 2884 ${o.breakpoints.sm} { 2885 width: 180px; 2886 margin-left: 16px; 2887 } 2888 .mantine-Button-icon { 2889 width: 16px; 2890 } 2891 &:disabled{ 2892 background-color: ${o.colors.grey00}; 2893 color: ${o.colors.grey70}; 2894 } 2895 } 2896 } 2897 `},deliveryDateConfirmationModalWrapper:{wrapper:` 2898 .mantine-Modal-content { 2899 min-width: 70%; 2900 position: fixed; 2901 top: 0; 2902 left: 0; 2903 width: 100%; 2904 min-height: 100vh; 2905 border-radius: 0; 2906 ${o.breakpoints.sm} { 2907 min-width: 60%; 2908 border-radius: 12px; 2909 position: static; 2910 min-height: initial; 2911 } 2912 & .mantine-Modal-body { 2913 padding: 0rem 1rem ; 2914 } 2915 } 2916 .modal-content { 2917 position: relative; 2918 text-align: center; 2919 ${o.breakpoints.sm} { 2920 padding: 0 16px; 2921 text-align: initial; 2922 } 2923 } 2924 .delivery-content { 2925 position: relative; 2926 .delivery-icon { 2927 display: inline-block; 2928 padding: 1rem; 2929 background: #C3E9CF; 2930 border-radius: 3rem; 2931 margin: 48px 0; 2932 i { 2933 border: 1px solid ${o.colors.grey60}; 2934 padding: 5px; 2935 border-radius: 3rem; 2936 } 2937 ${o.breakpoints.sm} { 2938 display: none; 2939 } 2940 } 2941 .title { 2942 margin-bottom: 24px; 2943 ${o.breakpoints.sm} { 2944 display: none; 2945 } 2946 } 2947 .split { 2948 display: none; 2949 ${o.breakpoints.sm} { 2950 display: inline; 2951 } 2952 } 2953 .subtitle-details { 2954 display: block; 2955 padding-top: 16px; 2956 ${o.breakpoints.sm} { 2957 display: inline; 2958 } 2959 } 2960 } 2961 .title-content { 2962 display: flex; 2963 justify-content: flex-end; 2964 background: #FFF; 2965 padding-top: 32px; 2966 z-index: 100; 2967 align-items: center; 2968 position: sticky; 2969 top: 0; 2970 width: 100%; 2971 & i { 2972 margin-bottom: 16px; 2973 cursor: pointer; 2974 } 2975 .title { 2976 display: none; 2977 ${o.breakpoints.sm} { 2978 display: block; 2979 } 2980 } 2981 ${o.breakpoints.sm} { 2982 justify-content: space-between; 2983 } 2984 } 2985 .subtitle { 2986 ${o.mixins.body1} 2987 span { 2988 font-weight: ${o.fonts.weightBold}; 2989 } 2990 } 2991 .information-text { 2992 ${o.mixins.body1} 2993 padding:16px 0; 2994 color: ${o.colors.secondary15}; 2995 .spinner { 2996 display: inline-block; 2997 margin-left: 8px; 2998 position: relative; 2999 top: 7px; 3000 } 3001 } 3002 .button-container { 3003 text-align: right; 3004 padding: 16px 0; 3005 background: #FFF; 3006 z-index: 100; 3007 align-items: center; 3008 position: sticky; 3009 bottom: 0; 3010 width: 100%; 3011 & button { 3012 cursor: pointer; 3013 } 3014 .submit-button { 3015 width: 100%; 3016 text-transform: uppercase; 3017 ${o.breakpoints.sm} { 3018 width: 180px; 3019 margin-left: 16px; 3020 } 3021 .mantine-Button-icon { 3022 width: 16px; 3023 } 3024 } 3025 } 3026 `},deliveryResetConfirmationModalWrapper:{wrapper:` 3027 .mantine-Modal-content { 3028 min-width: 70%; 3029 position: fixed; 3030 top: 0; 3031 left: 0; 3032 width: 100%; 3033 min-height: 100vh; 3034 border-radius: 0; 3035 ${o.breakpoints.sm} { 3036 min-width: 60%; 3037 border-radius: 12px; 3038 position: static; 3039 min-height: initial; 3040 } 3041 & .mantine-Modal-body { 3042 padding: 0rem 1rem ; 3043 } 3044 }
3045 .modal-content { 3046 position: relative; 3047 text-align: center; 3048 ${o.breakpoints.sm} { 3049 padding: 0 16px; 3050 text-align: initial; 3051 } 3052 } 3053 .delivery-content { 3054 position: relative; 3055 .subtitle { 3056 ${o.mixins.body1} 3057 padding-bottom: 24px; 3058 color: ${o.colors.secondary15}; 3059 } 3060 } 3061 .title-content { 3062 display: flex; 3063 justify-content: flex-end; 3064 background: #FFF; 3065 padding-top: 32px; 3066 z-index: 100; 3067 align-items: center; 3068 position: sticky; 3069 top: 0; 3070 width: 100%; 3071 & i { 3072 margin-bottom: 16px; 3073 cursor: pointer; 3074 } 3075 ${o.breakpoints.sm} { 3076 justify-content: space-between; 3077 } 3078 } 3079 .button-container { 3080 text-align: right; 3081 padding: 16px 0; 3082 background: #FFF; 3083 z-index: 100; 3084 align-items: center; 3085 position: sticky; 3086 bottom: 0; 3087 width: 100%; 3088 border-radius: 2px; 3089 & button { 3090 cursor: pointer; 3091 } 3092 .cancel-button { 3093 background: transparent; 3094 color: ${o.colors.primary8}; 3095 border: ${o.colors.primary8} solid 1px; 3096 margin-bottom: 16px; 3097 width: 100%; 3098 text-transform: uppercase; 3099 ${o.breakpoints.sm} { 3100 width: auto; 3101 margin-right: 16px; 3102 } 3103 } 3104 .submit-button { 3105 width: 100%; 3106 text-transform: uppercase; 3107 ${o.breakpoints.sm} { 3108 width: auto; 3109 margin-left: 0; 3110 } 3111 .mantine-Button-icon { 3112 width: 16px; 3113 } 3114 } 3115 } 3116 `},pushbackSaveOfferModalWrapper:{wrapper:` 3117 .mantine-Modal-content { 3118 position: fixed; 3119 top: 0; 3120 left: 0; 3121 width: 100%; 3122 min-height: 100vh; 3123 border-radius: 0; 3124 ${o.breakpoints.sm} { 3125 border-radius: 12px; 3126 min-width: 50%; 3127 position: static; 3128 min-height: initial; 3129 } 3130 3131 }
3132 .modal-content { 3133 position: relative; 3134 display: flex; 3135 flex-direction: column; 3136 height: 100vh; 3137 ${o.breakpoints.sm} { 3138 padding: 16px; 3139 display: block; 3140 height: initial; 3141 } 3142 } 3143 display: flex; 3144 justify-content: space-between; 3145 background: #FFF; 3146 padding-top: 32px; 3147 z-index: 100; 3148 align-items: center; 3149 position: sticky; 3150 top: 0; 3151 width: 100%; 3152 & i { 3153 cursor: pointer; 3154 } 3155 & .title-content { 3156 display: flex; 3157 background: #FFF; 3158 z-index: 100; 3159 position: sticky; 3160 top: 0; 3161 width: 100%; 3162 & i {margin-bottom: 16px; 3163 cursor: pointer; 3164 } 3165 .title { 3166 3167 ${o.breakpoints.sm} { 3168 display: block; 3169 } 3170 } 3171 ${o.breakpoints.sm} { 3172 justify-content: space-between; 3173 } 3174 } 3175 } 3176 .pushback-save-modal-content-wrapper { 3177 .offer-notes{ 3178 font-family: ${o.fonts.familySecondary}; 3179 font-weight: ${o.fonts.weightNormal}; 3180 margin-top: 4px; 3181 } 3182 justify-content: space-between; 3183 3184 ${o.breakpoints.sm} { 3185 justify-content: space-evenly; 3186 } 3187 3188 .unlimited-icons{ 3189 display:flex; 3190 align-items: center; 3191 .notes { 3192 margin-left: 10px; 3193 } 3194 i { 3195 color: #20513B; 3196 } 3197 } 3198 3199 .pushback-save-offers-content{ 3200 gap: 10px; 3201 flex-direction: column; 3202 width:100%; 3203 ${o.breakpoints.md} { 3204 flex-direction: row; 3205 } 3206 3207 3208 .offer-batch { 3209 padding: 10px 30px; 3210 background-size: contain; 3211 background-position: center; 3212 background-repeat: no-repeat; 3213 height: 68px; 3214 background-image: url("/next/images/cancel-save-offer-bg.png"); 3215 display: flex; 3216 justify-content: center; 3217 align-items: center; 3218 gap: 10px; 3219 color: white; 3220 text-align: center; 3221 .offer-batch-text{ 3222 font-family: ${o.fonts.familyPrimary} !important; 3223 font-size: ${o.fonts.fontSize24}; 3224 ${o.breakpoints.xl} { 3225 font-size: ${o.fonts.fontSize30}; 3226 } 3227 font-weight: ${o.fonts.weightMedium}; 3228 } 3229 } 3230 .offer-right-content{ 3231 font-family: ${o.fonts.familyPrimary} !important; 3232 font-size: ${o.fonts.fontSize24}; 3233 ${o.breakpoints.xl} { 3234 font-size: ${o.fonts.fontSize30}; 3235 } 3236 3237 font-weight: ${o.fonts.weightMedium}; 3238 } 3239 } 3240 .push-save-modal-cta-wrapper{ 3241 button.pushback-save-modal-primary-cta{ 3242 order: 1; 3243 } 3244 button.pushback-save-modal-tertiary-cta{ 3245 order: 2; 3246 font-size: ${o.fonts.fontSize16}; 3247 } 3248 ${o.breakpoints.sm} { 3249 button.pushback-save-modal-primary-cta{ 3250 order: 2; 3251 } 3252 button.pushback-save-modal-tertiary-cta{ 3253 order: 1; 3254 } 3255 } 3256 justify-content: end; 3257 3258 button.pushback-save-modal-primary-cta { 3259 cursor: pointer; 3260 width: 100%; 3261 ${o.breakpoints.sm} { 3262 width: auto; 3263 } 3264 3265 :hover { 3266 background-color: #094B32;
3267 color: ${o.colors.btnsPrimaryColor}; 3268 } 3269 } 3270 3271 button.pushback-save-modal-tertiary-cta { 3272 cursor: pointer; 3273 text-decoration: underline; 3274 background-color: transparent; 3275 border: none; 3276 color: ${o.colors.black}; 3277 &:hover { 3278 text-decoration: none; 3279 color: ${o.colors.black}; 3280 background-color: transparent; 3281 border: none; 3282 } 3283 width: 100%; 3284 ${o.breakpoints.sm} { 3285 width: auto; 3286 } 3287 } 3288 } 3289 `},winePlanBeyondLabel:` 3290 & .mantine-Modal-close{ 3291 color: ${o.colors.primary8}; 3292 &:focus { 3293 outline: none; 3294 } 3295 } 3296 .mantine-Modal-inner { 3297 z-index: 9999; 3298 background-color: rgba(0, 0, 0, 0.2); 3299 3300 } 3301 & .mantine-Modal-header{ 3302 padding-bottom: 5px; 3303 & h2.mantine-Modal-title{ 3304 font-family: ${o.fonts.oswald}; 3305 font-size: 34px; 3306 font-weight: 500; 3307 line-height: 35.7px; 3308 letter-spacing: -0.03em; 3309 text-align: left; 3310 3311 } 3312 } 3313 .header-container { 3314 display:flex; 3315 flex-direction:column; 3316 .wine-rating{ 3317 display: flex; 3318 align-items: center; 3319 gap:10px; 3320 margin-bottom: 15px; 3321 .star-icons{ 3322 margin-top: 0.4rem; 3323 } 3324 .review-count{ 3325 cursor:pointer; 3326 text-decoration: underline; 3327 & a{ 3328 text-decoration: none; 3329 } 3330 } 3331 } 3332 .appellation-name{ 3333 font-size: 22px; 3334 text-transform: capitalize; 3335 } 3336 .web-description { 3337 // font-size:16px; 3338 ${o.mixins.body1} 3339 margin-bottom: 10px; 3340 } 3341 } 3342 .beyond-label-case-details{ 3343 margin-top: 20px; 3344 text-align: left; 3345 @media (min-width: 768px) { 3346 display: grid; 3347 grid-template-columns: 2fr 1fr 2fr; 3348 } 3349 3350 & .sub-title-with-border { 3351 font-family: ${o.fonts.familyTertiary}; 3352 font-size: 30px; 3353 font-style: normal; 3354 text-transform: capitalize; 3355 font-weight: ${o.fonts.weightMediumPlus}; 3356 line-height: 120%; /* 36px */ 3357 letter-spacing: -0.3px; 3358 padding-bottom: 10px; 3359 border-bottom: 1px solid #ccc; 3360 margin-bottom: 25px; 3361 3362 } 3363 & ul{ 3364 gap:15px; 3365 li{ 3366 font-size: 16px; 3367 display: grid; 3368 grid-template-columns: 0.1fr 1fr; 3369 } 3370 } 3371 .image-container{ 3372 display:flex; 3373 justify-content: center; 3374 .image-size { 3375 position:relative; 3376 width:120px; 3377 height: 370px; 3378 text-align: center; 3379 } 3380 } 3381 3382 } 3383 & .case-details{ 3384 & .item-title { 3385 font-family: ${o.fonts.familySecondary}; 3386 ${o.mixins.h8} 3387 ~.item-sub-title{ 3388 font-size: 16px; 3389 } 3390 } 3391 3392 } 3393 & .wine-details{ 3394 font-family: ${o.fonts.familySecondary}; 3395 font-size: 16px; 3396 font-weight: ${o.fonts.weightNormal}; 3397 line-height: 22.4px; 3398 text-align: left; 3399 } 3400 // mobile 3401 & .mantine-Accordion-item{ 3402 box-shadow: 0px -1px 0px 0px ${o.colors.secondary14} inset; 3403 border-bottom: none; 3404 } 3405 & .mantine-Accordion-label { 3406 font-weight: ${o.fonts.weightBold}; 3407 font-size: ${o.fonts.sizeLarge}; 3408 font-family: ${o.fonts.familyTertiary}; 3409 } 3410 & .product-details-mobile-view{ 3411 display:block; 3412 ${o.breakpoints.sm} { 3413 display:none; 3414 } 3415 & .mantine-Accordion-chevron{ 3416 & svg{ 3417 width: 3rem !important; 3418 height: 3rem !important; 3419 } 3420 } 3421 .description{ 3422 margin:15px 0px; 3423 font-family: ${o.fonts.familySecondary}; 3424 font-size: ${o.fonts.fontSize16}; 3425 3426 font-weight: ${o.fonts.weightNormal}; 3427 3428 text-align: center; 3429 box-shadow: 0px -1px 0px 0px ${o.colors.secondary14} inset; 3430 border-radius: 3px; 3431 } 3432 & .see-more-description{ 3433 background: none; 3434 color: ${o.colors.grey50}; 3435 line-height: 24px; 3436 font-size: ${o.fonts.sizeH4}; 3437 padding: 0; 3438 text-decoration-line: underline; 3439 cursor: pointer; 3440 margin: 15px 0; 3441 box-shadow: none; 3442 border: none; 3443 font-weight: 500; 3444 font-family: ${o.fonts.familySecondary}; 3445 } 3446 3447 3448 3449 & .image-container { 3450 &.about-producer { 3451 position: relative; 3452 min-height: 300px; 3453 } 3454 } 3455 3456 } 3457 3458 .product-details{ 3459 text-align:center; 3460 3461 .product-name{ 3462 font-size: 18px; 3463 font-weight: ${o.fonts.weightMediumPlus}; 3464 margin: 18px 0 15px 0; 3465 font-family: ${o.fonts.familyTertiary}; 3466 margin-top: 10px; 3467 } 3468 .product-count{ 3469 color: ${o.colors.grey60}; 3470 font-size: 16px; 3471 font-weight: ${o.fonts.weightNormal}; 3472 padding-bottom: 15px; 3473 align-items: center; 3474 display: flex; 3475 justify-content: center; 3476 3477 } 3478 } 3479 `,manageAddress:{headerWrapper:` 3480 &.header { 3481 text-align: center; 3482 margin-bottom: ${o.space.lg}; 3483 } 3484 .header-title { 3485 text-transform: uppercase; 3486 } 3487 .header-information { 3488 ${o.mixins.body1} 3489 span { 3490 font-weight: ${o.fonts.weightMediumPlus}; 3491 } 3492 } 3493 `,wrapper:` 3494 .loading-page { 3495 margin: 2rem 0; 3496 } 3497 .add-new-address { 3498 margin: 24px 0 0; 3499 cursor: pointer; 3500 width: 100%; 3501 font-weight: ${o.fonts.weightMediumPlus}; 3502 line-height: initial; 3503 text-transform: uppercase; 3504 ${o.breakpoints.sm} { 3505 width: initial; 3506 } 3507 } 3508 .add-address-success { 3509 display: flex; 3510 align-items: center; 3511 gap: 8px; 3512 margin: 12px; 3513 background: #C3E9CF; 3514 padding: 12px; 3515 border-radius: 4px; 3516 font-size: ${o.fonts.sizeSmall}; 3517 font-weight: ${o.fonts.weightMedium}; 3518 } 3519 `,userDefaultAddress:` 3520 .addresses { 3521 display: flex; 3522 gap: 16px; 3523 flex-direction: column; 3524 ${o.breakpoints.sm} { 3525 width: initial; 3526 flex-direction: row; 3527 } 3528 } 3529 `,defaultAddress:` 3530 &.address-section { 3531 background-color: ${o.colors.primary3}; 3532 flex: 1; 3533 padding: 24px; 3534 } 3535 .loading { 3536 margin: 24px 0; 3537 } 3538 .name { 3539 ${o.mixins.body1} 3540 font-weight: ${o.fonts.weightBold}; 3541 } 3542 .address { 3543 display: flex; 3544 flex-direction: column; 3545 gap: 8px; 3546 } 3547 .line1, .line2, .instructions { 3548 ${o.mixins.body1} 3549 } 3550 .instructions span{ 3551 font-weight: ${o.fonts.weightBold}; 3552 } 3553 & a { 3554 padding: 12px 0; 3555 display: inline-block; 3556 &:hover, &:active, &:focus { 3557 text-decoration: none; 3558 } 3559 & .link-text { 3560 text-decoration: none; 3561 border-bottom: 1px solid ${o.colors.primary8}; 3562 font-size: ${o.fonts.sizeH5}; 3563 font-weight: bold; 3564 text-transform: uppercase; 3565 } 3566 } 3567 `,postalAddressSelector:` 3568 .address-content { 3569 padding: 0 24px; 3570 } 3571 .address-selector { 3572 display: flex; 3573 align-items: center; 3574 margin: 12px 0; 3575 gap: 12px; 3576 ${o.mixins.body1} 3577 } 3578 .result-count { 3579 ${o.mixins.body1} 3580 font-weight: ${o.fonts.weightBold}; 3581 } 3582 .mantine-Menu-item { 3583 color: ${o.colors.secondary15}; 3584 } &:focus { 3585 outline: none; 3586 } 3587 .address-selector-container{ 3588 flex: 1; 3589 } 3590 .address-selector-title { 3591 color: #767676; 3592 }
3593 .mantine-Menu-dropdown { 3594 max-height: 200px; 3595 overflow-y: scroll; 3596 width: calc(100% - 70px) !important; 3597 .mantine-Menu-itemLabel { 3598 overflow: hidden; 3599 text-overflow: ellipsis; 3600 white-space: nowrap; 3601 } &:focus { 3602 outline: none; 3603 } 3604 } 3605 .address-selector-container { 3606 display: flex; 3607 align-items: center; 3608 border: 1px solid ${o.colors.secondary9}; 3609 cursor: pointer; 3610 padding: 8px; 3611 justify-content: space-between; 3612 .delay-caseoption-details { 3613 flex: 1; 3614 } 3615 .address-selector-menu-checkmark { 3616 margin-right: 8px; 3617 color: green; 3618 } 3619 } 3620 .address-selector-menu { 3621 display: flex; 3622 align-items: center; 3623 gap: 16px; 3624 white-space: normal; 3625 cursor: pointer; 3626 justify-content: space-between; 3627 .delay-caseoption-menu-details { 3628 flex: 1; 3629 } 3630 .address-selector-menu-checkmark { 3631 margin-right: 8px; 3632 color: green; 3633 } 3634 } 3635 `,addAddressModalWrapper:` 3636 .noResultsError { 3637 display: flex; 3638 align-items: center; 3639 gap: 8px; 3640 margin-bottom: 24px; 3641 background: ${o.colors.primary7}; 3642 padding: 12px; 3643 border-radius: 4px; 3644 font-size: ${o.fonts.sizeSmall}; 3645 font-weight: ${o.fonts.weightMedium}; 3646 } 3647 .mantine-Modal-inner { 3648 z-index: 9999; 3649 } 3650 .mantine-Modal-content { 3651 position: fixed; 3652 top: 150px; 3653 left: 0; 3654 width: 100%; 3655 height: calc(100vh - 150px); 3656 scrollbar-color: ${o.colors.grey40} transparent; 3657 ${o.breakpoints.sm} { 3658 border-radius: 12px; 3659 min-width: min(90%, 725px); 3660 position: static; 3661 min-height: initial; 3662 height: initial; 3663 } 3664 & .mantine-Modal-body { 3665 padding: 0; 3666 } 3667 }
3668 .modal-content { 3669 display: flex; 3670 flex-direction: column; 3671 ${o.breakpoints.sm} { 3672 display: block; 3673 } 3674 .postal-text { 3675 ${o.mixins.body1} 3676 margin-bottom: 24px; 3677 } 3678 .content-section { 3679 padding: 0 24px; 3680 ${o.breakpoints.sm} { 3681 padding: 0 32px; 3682 } 3683 } 3684 .form-collapsed ~ div .address-content { 3685 padding: 24px 24px; 3686 ${o.breakpoints.sm} { 3687 padding: 0 24px 24px; 3688 } 3689 } 3690 .form-collapsed { 3691 .button-container { 3692 position: absolute; 3693 bottom: 0; 3694 width: calc(100% - 48px); 3695 ${o.breakpoints.sm} { 3696 position: static; 3697 width: initial; 3698 } 3699 } 3700 } 3701 .title-content { 3702 padding: 0 24px; 3703 ${o.breakpoints.sm} { 3704 padding: 32px 32px 0; 3705 } 3706 display: flex; 3707 background: #FFF; 3708 padding-top: 32px; 3709 align-items: center; 3710 z-index: 100; 3711 position: sticky; 3712 top: 0; 3713 width: 100%; 3714 & i { 3715 margin-bottom: 16px; 3716 cursor: pointer; 3717 } 3718 .title { 3719 flex: 1; 3720 margin-right: 24px; 3721 } 3722 } 3723 .submit-address { 3724 position: sticky; 3725 margin: 0; 3726 bottom: 0; 3727 left: 0; 3728 padding: 10px 24px; 3729 z-index: 2; 3730 background: white; 3731 box-shadow: 0px -5px 40px 0px #00141E1A; 3732 box-shadow: 0px 10px 20px 0px #00141E33; 3733 ${o.breakpoints.sm} { 3734 box-shadow: none; 3735 padding: 10px 32px 32px; 3736 } 3737 .mantine-Grid-col { 3738 margin-bottom: 8px; 3739 } 3740 } 3741 .button-container { 3742 display: flex; 3743 align-items: center; 3744 justify-content: flex-end; 3745 margin: 16px 0; 3746 gap: 8px; 3747 flex-direction: column-reverse; 3748 ${o.breakpoints.sm} { 3749 box-shadow: none; 3750 flex-direction: initial; 3751 margin: 32px 0; 3752 gap: 24px; 3753 } 3754 & button { 3755 cursor: pointer; 3756 } 3757 .add-manual-address { 3758 padding: 1rem; 3759 cursor: pointer; 3760 text-decoration: underline; 3761 } 3762 .submit-button { 3763 width: 100%; 3764 padding: 16px; 3765 text-transform: uppercase;
3766 background: ${o.colors.btnsPrimaryBg}; 3767 ${o.breakpoints.sm} { 3768 width: 180px; 3769 margin-left: 16px; 3770 } 3771 .mantine-Button-icon { 3772 width: 16px; 3773 } 3774 &:disabled{ 3775 background-color: ${o.colors.grey00}; 3776 color: ${o.colors.grey70}; 3777 } 3778 } 3779 } 3780 } 3781 `,addAddressForm:` 3782 .submit-button { 3783 width: 100%; 3784 padding: 16px; 3785 margin: 0 7px; 3786 text-transform: uppercase; 3787 background: ${o.colors.btnsPrimaryBg}; 3788 .mantine-Button-icon { 3789 width: 16px; 3790 } 3791 &:disabled{ 3792 background-color: ${o.colors.grey00}; 3793 color: ${o.colors.grey70}; 3794 } 3795 } 3796 .mantine-InputWrapper-label span.required { 3797 color: ${o.colors.primary9}; 3798 } 3799 .mantine-InputWrapper-label span.optional { 3800 color: ${o.colors.secondary15}; 3801 } 3802 .add-address-error { 3803 display: flex; 3804 align-items: center; 3805 gap: 8px; 3806 margin: 12px; 3807 background: ${o.colors.primary7}; 3808 padding: 12px; 3809 border-radius: 4px; 3810 font-size: ${o.fonts.sizeSmall}; 3811 font-weight: ${o.fonts.weightMedium}; 3812 } 3813 .mantine-InputWrapper-error { 3814 color: #AA182B; 3815 } 3816 .mantine-Input-input[data-invalid] { 3817 color: #AA182B; 3818 border-color: #AA182B; 3819 } 3820 .update-all-delivery-checkbox{ 3821 margin-right:10px; 3822 & input:checked{ 3823 border-color: ${o.colors.secondary6}; 3824 background-color: ${o.colors.secondary6}; 3825 } 3826 } 3827 .add-address-form-section { 3828 padding: 0 24px; 3829 margin: 0; 3830 margin-bottom: 16px; 3831 ${o.breakpoints.sm} { 3832 margin: 0; 3833 padding: 0 32px; 3834 } 3835 } 3836 `,addAddressConfirmationModalWrapper:{wrapper:` 3837 .mantine-Modal-content { 3838 min-width: 70%; 3839 position: fixed; 3840 top: 150px; 3841 left: 0; 3842 width: 100%; 3843 height: calc(100vh - 150px); 3844 ${o.breakpoints.sm} { 3845 min-width: min(90%, 725px); 3846 border-radius: 12px; 3847 position: static; 3848 height: initial; 3849 } 3850 & .mantine-Modal-body { 3851 padding: 0rem; 3852 } 3853 }
3854 .modal-content { 3855 position: relative; 3856 text-align: center; 3857 ${o.breakpoints.sm} { 3858 padding: 0; 3859 text-align: initial; 3860 } 3861 } 3862 .delivery-content { 3863 position: relative; 3864 .delivery-icon { 3865 display: inline-block; 3866 padding: 1rem; 3867 background: #C3E9CF; 3868 border-radius: 3rem; 3869 margin: 48px 0; 3870 i { 3871 border: 1px solid ${o.colors.grey60}; 3872 padding: 5px; 3873 border-radius: 3rem; 3874 } 3875 ${o.breakpoints.sm} { 3876 display: none; 3877 } 3878 } 3879 .title { 3880 margin-bottom: 24px; 3881 ${o.breakpoints.sm} { 3882 display: none; 3883 } 3884 } 3885 .split { 3886 display: none; 3887 ${o.breakpoints.sm} { 3888 display: inline; 3889 } 3890 } 3891 .subtitle-details { 3892 display: block; 3893 padding-top: 16px; 3894 ${o.breakpoints.sm} { 3895 display: inline; 3896 } 3897 } 3898 } 3899 .content-section { 3900 position: fixed; 3901 top: 45%; 3902 left: 50%; 3903 transform: translate(-50%, -50%); 3904 overflow: hidden; 3905 padding: 0 24px; 3906 ${o.breakpoints.sm} { 3907 padding: 0 32px; 3908 } 3909 width: 100%; 3910 ${o.breakpoints.sm} { 3911 position: static; 3912 transform: initial; 3913 width: initial; 3914 } 3915 } 3916 .title-content { 3917 display: flex; 3918 justify-content: flex-end; 3919 background: #FFF; 3920 padding: 32px 24px 0; 3921 ${o.breakpoints.sm} { 3922 padding: 32px 32px 0; 3923 } 3924 z-index: 100; 3925 align-items: center; 3926 position: sticky; 3927 top: 0; 3928 width: 100%; 3929 & i { 3930 margin-bottom: 16px; 3931 cursor: pointer; 3932 } 3933 .title { 3934 display: none; 3935 ${o.breakpoints.sm} { 3936 display: block; 3937 } 3938 } 3939 ${o.breakpoints.sm} { 3940 justify-content: space-between; 3941 } 3942 } 3943 .subtitle { 3944 ${o.mixins.body1} 3945 span { 3946 font-weight: ${o.fonts.weightBold}; 3947 } 3948 } 3949 .button-container { 3950 text-align: center; 3951 padding: 32px 0; 3952 background: #FFF; 3953 z-index: 100; 3954 align-items: center; 3955 position: sticky; 3956 bottom: 0; 3957 width: 100%; 3958 ${o.breakpoints.sm} { 3959 text-align: right; 3960 padding: 16px 0; 3961 } 3962 & button { 3963 cursor: pointer; 3964 } 3965 .submit-button { 3966 text-transform: uppercase; 3967 width: 180px; 3968 ${o.breakpoints.sm} { 3969 margin-left: 16px; 3970 } 3971 .mantine-Button-icon { 3972 width: 16px; 3973 } 3974 } 3975 } 3976 `},addressBook:` 3977 .address-book-addresses { 3978 position: relative; 3979 display: grid; 3980 grid-template-columns: 1fr; 3981 gap: 0; 3982 ${o.breakpoints.sm} { 3983 grid-template-columns: 1fr 1fr; 3984 gap: 16px; 3985 } 3986 } 3987 .address-section { 3988 margin: 16px 0; 3989 ${o.breakpoints.sm} { 3990 margin: 32px 0; 3991 } 3992 } 3993 .address-book-subtitle { 3994 display: flex; 3995 margin: 16px 0; 3996 gap: 8px; 3997 } 3998 .address-book-card { 3999 border: none; 4000 ${o.breakpoints.sm} { 4001 border: 1px solid ${o.colors.secondary9}; 4002 } 4003 position: relative; 4004 }
4005 .address-divider { 4006 border-bottom: 1px solid ${o.colors.secondary9}; 4007 position: absolute; 4008 left: -16px; 4009 right: -16px; 4010 display: block; 4011 top: 0; 4012 ${o.breakpoints.sm} { 4013 display: none; 4014 } 4015 } 4016 .address-book-subtitle-text { 4017 ${o.mixins.body1} 4018 & a { 4019 text-decoration: underline; 4020 margin: 4px; 4021 ${o.mixins.body1} 4022 font-weight: ${o.fonts.weightMedium}; 4023 } 4024 } 4025 `,addressBookCard:` 4026 &.address-book-card-section { 4027 height: 100%; 4028 padding: 24px 0; 4029 display: flex; 4030 flex-direction: column; 4031 justify-content: space-around; 4032 ${o.breakpoints.sm} { 4033 padding: 24px; 4034 } 4035 } 4036 .address-card-divider { 4037 border-bottom: 1px solid ${o.colors.secondary9}; 4038 position: absolute; 4039 left: -16px; 4040 right: -16px; 4041 display: block; 4042 bottom: 0; 4043 ${o.breakpoints.sm} { 4044 display: none; 4045 } 4046 } 4047 .loader { 4048 margin-top: 24px; 4049 & .loaderContainer { 4050 justify-content: flex-start; 4051 & div { 4052 width: 20px; 4053 height: 20px; 4054 border-width: 3px; 4055 } 4056 } 4057 } 4058 .name { 4059 ${o.mixins.body1} 4060 font-weight: ${o.fonts.weightBold}; 4061 } 4062 .address { 4063 display: flex; 4064 flex-direction: column; 4065 gap: 8px; 4066 flex: 1; 4067 } 4068 .line1, .line2, .instructions { 4069 ${o.mixins.body1} 4070 } 4071 .instructions span{ 4072 font-weight: ${o.fonts.weightBold}; 4073 } 4074 .delivery-address-change { 4075 cursor: pointer; 4076 text-decoration: underline; 4077 display: inline-block; 4078 text-transform: uppercase; 4079 margin: 16px 0 0; 4080 ${o.mixins.body1} 4081 font-weight: ${o.fonts.weightMediumPlus}; 4082 font-size: 14px; 4083 ${o.breakpoints.sm} { 4084 margin: 24px 0 16px; 4085 } 4086 } 4087 `,collectFromStore:` 4088 margin: 16px 0; 4089 ${o.breakpoints.sm} { 4090 margin: 32px 0; 4091 } 4092 h6.title { 4093 margin-bottom: 16px; 4094 ${o.breakpoints.sm} { 4095 margin-bottom: 24px; 4096 } 4097 } 4098 .store-form-fields { 4099 display: flex; 4100 gap: 16px; 4101 flex-direction: column; 4102 .mantine-Input-input { 4103 height: 40px; 4104 } 4105 ${o.breakpoints.sm} { 4106 flex-direction: row; 4107 } 4108 } 4109 .store-form-field{ 4110 flex: 1; 4111 } 4112 .store-address-error { 4113 display: flex; 4114 align-items: flex-start; 4115 gap: 8px; 4116 margin-top: 8px; 4117 background: #B3CFE5; 4118 padding: 12px; 4119 border-radius: 4px; 4120 font-size: ${o.fonts.sizeSmall}; 4121 font-weight: ${o.fonts.weightMedium}; 4122 a { 4123 text-decoration: none; 4124 border-bottom: 1px solid ${o.colors.primary8}; 4125 font-weight: ${o.fonts.weightMediumPlus}; 4126 &:hover { 4127 text-decoration: 4128 } 4129 } 4130 } 4131 .submit-button { 4132 padding: 12px 24px; 4133 height: 40px; 4134 text-transform: uppercase;
4135 background: ${o.colors.btnsPrimaryBg}; 4136 width: 100%; 4137 .mantine-Button-icon { 4138 width: 16px; 4139 } 4140 ${o.breakpoints.sm} { 4141 width: initial; 4142 } 4143 &:disabled{ 4144 background-color: ${o.colors.grey00}; 4145 color: ${o.colors.grey70}; 4146 } 4147 } 4148 `,shopAddress:` 4149 &.address-section { 4150 padding-top: 16px; 4151 } 4152 .title { 4153 ${o.mixins.body1} 4154 font-weight: ${o.fonts.weightBold}; 4155 margin-bottom: 8px; 4156 } 4157 .address { 4158 ${o.mixins.body1} 4159 margin-bottom: 16px; 4160 } 4161 `,paymentMethod:` 4162 margin-bottom: 16px; 4163 ${o.breakpoints.sm} { 4164 margin-bottom: 24px; 4165 } 4166 .payment-message { 4167 ${o.mixins.body1} 4168 margin-bottom: 16px; 4169 ${o.breakpoints.sm} { 4170 margin-bottom: 24px; 4171 } 4172 span { 4173 font-weight: ${o.fonts.weightBold}; 4174 } 4175 } 4176 `,paymentCard:` 4177 padding: 16px 16px 12px; 4178 display: flex; 4179 background: ${o.colors.primary3}; 4180 border-radius: 8px; 4181 flex-direction: column; 4182 justify-content: initial; 4183 align-items: flex-start; 4184 ${o.breakpoints.sm} { 4185 flex-direction: row; 4186 align-items: center; 4187 justify-content: space-between; 4188 padding: 0 12px; 4189 border-radius: 2px; 4190 } 4191 ${o.mixins.body1} 4192 .card-details { 4193 display: flex; 4194 gap: 8px; 4195 align-items: flex-start; 4196 padding-bottom: 16px; 4197 flex-wrap: wrap; 4198 ${o.breakpoints.sm} { 4199 align-items: center; 4200 padding-bottom: 0; 4201 } 4202 } 4203 .card-details-icon { 4204 ${o.breakpoints.sm} { 4205 position: relative; 4206 top: 3px; 4207 } 4208 } 4209 .change-payment-card a { 4210 font-weight: ${o.fonts.weightMediumPlus}; 4211 font-size: ${o.fonts.sizeH5}; 4212 color:${o.colors.primary8}; 4213 word-break: normal; 4214 border-bottom: 1px solid ${o.colors.black}; 4215 } 4216 .card-type { 4217 font-weight: ${o.fonts.weightBold}; 4218 } 4219 .card-info { 4220 display: flex; 4221 gap: 8px; 4222 flex-direction: column; 4223 ${o.breakpoints.sm} { 4224 flex-direction: row; 4225 } 4226 } 4227 .card-number-info { 4228 display: flex; 4229 gap: 8px; 4230 flex-direction: row; 4231 } 4232 `,winePlanCard:` 4233 margin-bottom: 16px; 4234 gap: 4px; 4235 flex-direction: column; 4236 ${o.breakpoints.sm} { 4237 margin-bottom: 24px; 4238 gap: 6px; 4239 flex-direction: row; 4240 } 4241 display: flex; 4242 .wine-plan-amount { 4243 background-color: ${o.colors.bgColors.whiteWine}; 4244 padding: 32px 16px; 4245 border-bottom-left-radius: 12px; 4246 border-bottom-right-radius: 12px; 4247 ${o.breakpoints.sm} { 4248 padding: 32px; 4249 border-radius: 0; 4250 } 4251 display: flex; 4252 flex: 1; 4253 flex-direction: column; 4254 justify-content: center; 4255 align-items: center; 4256 gap: 8px; 4257 } 4258 h4.wine-plan-balance { 4259 text-align: center; 4260 font-size: ${o.fonts.sizeH3}; 4261 margin-bottom: 8px; 4262 ${o.breakpoints.sm} { 4263 font-size: ${o.fonts.sizeH9}; 4264 margin-bottom: 16px; 4265 } 4266 span { 4267 color: ${o.colors.primary9}; 4268 } 4269 } 4270 .wine-plan-opt { 4271 .mantine-Checkbox-label { 4272 ${o.mixins.body2} 4273 } 4274 } 4275 .wine-plan-opt-checkbox{ 4276 margin-right:10px; 4277 border-color: ${o.colors.secondary6}; 4278 & input{ 4279 border-color: ${o.colors.secondary15}; 4280 } 4281 & input:checked{ 4282 border-color: ${o.colors.secondary6}; 4283 background-color: ${o.colors.secondary6}; 4284 } 4285 } 4286 .wine-plan-logo { 4287 flex: 1; 4288 align-self: center; 4289 img { 4290 width: 100%; 4291 ${o.breakpoints.sm} { 4292 width: 100%; 4293 } 4294 } 4295 } 4296 `}
4296,swapSubscription:{wrapper:` 4297 .swap-subscription-success { 4298 display: flex; 4299 align-items: center; 4300 gap: 8px; 4301 background: #C3E9CF; 4302 padding: 12px; 4303 border-radius: 4px; 4304 margin: 12px 0; 4305 font-size: ${o.fonts.sizeSmall}; 4306 font-weight: ${o.fonts.weightMedium}; 4307 ${o.breakpoints.sm} { 4308 margin: 12px; 4309 } 4310 } 4311 `,swapCaseLinks:` 4312 .links-wrapper { 4313 display: flex; 4314 gap: 12px; 4315 a, div.flex-link{ 4316 cursor: pointer; 4317 text-decoration: none; 4318 padding: 7px 16px; 4319 text-transform: uppercase; 4320 border: 1px solid ${o.colors.primary8}; 4321 border-radius: 4px; 4322 ${o.mixins.body3} 4323 font-weight: ${o.fonts.weightMediumPlus}; 4324 line-height: 14px; 4325 text-align:center; 4326 width: 100%; 4327 } 4328 } 4329 `,headerWrapper:` 4330 &.header { 4331 text-align: left; 4332 margin-top: ${o.space.lg}; 4333 margin-bottom: ${o.space.lg}; 4334 ${o.breakpoints.sm} { 4335 text-align: center; 4336 margin-top: 0; 4337 } 4338 } 4339 .header-title { 4340 text-transform: uppercase; 4341 } 4342 .header-information { 4343 ${o.mixins.body1} 4344 span { 4345 font-weight: ${o.fonts.weightMediumPlus}; 4346 } 4347 } 4348 `,caseOptionsAccordion:` 4349 margin-top: 8px; 4350 button.mantine-UnstyledButton-root { 4351 padding: initial; 4352 } 4353 `,filterWrapper:` 4354 margin: 32px 0; 4355 display: flex; 4356 flex-wrap: wrap; 4357 justify-content: space-between; 4358 &.filter-web { 4359 display: none; 4360 ${o.breakpoints.md} { 4361 display: flex; 4362 } 4363 } 4364 &.filter-mobile { 4365 margin: 16px 0; 4366 border: 1px solid ${o.colors.primary8}; 4367 border-radius: 2px; 4368 display: flex; 4369 ${o.breakpoints.md} { 4370 display: none; 4371 } 4372 } 4373 .filter-section { 4374 display: flex; 4375 gap: 16px; 4376 } 4377 .filter { 4378 button { 4379 border: 1px solid ${o.colors.secondary9}; 4380 padding: 8px 16px; 4381 color: ${o.colors.primary8}; 4382 ${o.mixins.body1} 4383 span { 4384 height: fit-content; 4385 } 4386 } 4387 button.selected { 4388 border: 1px solid ${o.colors.primary8}; 4389 font-weight: ${o.fonts.weightBold}; 4390 } 4391 } 4392 .quantity-selector { 4393 .quantity-selector-button { 4394 border: 1px solid ${o.colors.secondary9}; 4395 ${o.mixins.body1} 4396 color: ${o.colors.facetCheckboxColor}; 4397 .quantity-label { 4398 font-weight: ${o.fonts.weightBold}; 4399 color: ${o.colors.primary8}; 4400 } 4401 } 4402 } 4403 .quantity-selector-mobile { 4404 flex: 1; 4405 .quantity-selector-button { 4406 width: 100%; 4407 border: none; 4408 ${o.mixins.body1} 4409 color: ${o.colors.primary8}; 4410 .quantity-label { 4411 font-weight: ${o.fonts.weightBold}; 4412 color: ${o.colors.primary8}; 4413 } 4414 } 4415 .mantine-Button-label { 4416 display: flex; 4417 justify-content: space-between; 4418 width: 100%; 4419 } 4420 } 4421 .filter-section-mobile { 4422 flex: 1; 4423 .filter-section-button { 4424 width: 100%; 4425 border: none; 4426 border-radius: 0; 4427 border-right: 1px solid ${o.colors.primary8}; 4428 ${o.mixins.body1} 4429 color: ${o.colors.primary8}; 4430 .quantity-label { 4431 font-weight: ${o.fonts.weightBold}; 4432 color: ${o.colors.primary8}; 4433 } 4434 } 4435 .mantine-Button-label { 4436 display: flex; 4437 justify-content: space-between; 4438 width: 100%; 4439 } 4440 } 4441 `,selectCaseType:` 4442 margin-top: 16px; 4443 ${o.breakpoints.sm} { 4444 margin-bottom: 24px; 4445 } 4446 display: flex; 4447 justify-content: space-between; 4448 .case-type-selection { 4449 display: flex; 4450 gap: 12px; 4451 flex: 1; 4452 align-items: center; 4453 & div { 4454 padding: 5px 12px; 4455 display: inline-block; 4456 border: 1px solid ${o.colors.unlimitedButtonColor}; 4457 ${o.mixins.body1} 4458 height: fit-content; 4459 border-radius: 16px; 4460 cursor: pointer; 4461 &.selected { 4462 background: ${o.colors.unlimitedButtonColor}; 4463 color: #FFF; 4464 } 4465 } 4466 } 4467 `,caseOptionPrice:` 4468 display: flex; 4469 gap: 8px; 4470 margin-bottom: 12px; 4471 ${o.breakpoints.sm} { 4472 margin-bottom: 16px; 4473 } 4474 align-items: center; 4475 .discount-price { 4476 ${o.mixins.body3} 4477 font-weight: ${o.fonts.weightMediumPlus}; 4478 color: #D7363B; 4479 background-color: #fbeaea; 4480 padding: 4px 10px; 4481 border-radius: 16px; 4482 } 4483 h6.base-price { 4484 margin-bottom: 0; 4485 } 4486 `,caseOptions:` 4487 .lazy-load-item-placeholder { 4488 height: 300px; 4489 ${o.breakpoints.sm} { 4490 height: 200px; 4491 } 4492 } 4493 .case-types { 4494 .subscription-option-accordion .mantine-Accordion-item::before { 4495 content: initial; 4496 } 4497 } 4498 .case-details { 4499 position: relative; 4500 margin-bottom: 24px; 4501 &::after { 4502 position: absolute; 4503 content: ""; 4504 border-bottom: 1px solid #BCBCBC; 4505 width: calc(100% + 32px); 4506 bottom: 0; 4507 left: -16px; 4508 z-index: 2; 4509 ${o.breakpoints.sm} { 4510 width: 100%; 4511 left: 0; 4512 } 4513 } 4514 } 4515 .case-description { 4516 margin-top: 12px; 4517 } 4518 .case-fequency { 4519 ${o.mixins.body1} 4520 margin-bottom: 12px; 4521 ${o.breakpoints.sm} { 4522 margin-bottom: 16px; 4523 } 4524 } 4525 .case-information { 4526 margin-top: 8px; 4527 padding: 0; 4528 ${o.breakpoints.sm} { 4529 margin-top: 0; 4530 padding: 0 16px 0 12px; 4531 } 4532 flex: 1; 4533 } 4534 .select-subscription { 4535 display: none; 4536 align-self: flex-end; 4537 ${o.breakpoints.lg} { 4538 display: initial; 4539 } 4540 .select-subscription-button { 4541 font-weight: ${o.fonts.weightMediumPlus}; 4542 border-radius: 2px; 4543 cursor: pointer; 4544 } 4545 } 4546 .select-subscription-medium-screen { 4547 display: none; 4548 align-self: flex-end; 4549 ${o.breakpoints.sm} { 4550 display: initial; 4551 } 4552 ${o.breakpoints.lg} { 4553 display: none; 4554 } 4555 .select-subscription-button { 4556 font-weight: ${o.fonts.weightMediumPlus}; 4557 border-radius: 2px; 4558 cursor: pointer; 4559 } 4560 } 4561 .select-subscription-mobile { 4562 padding-bottom: 24px; 4563 ${o.breakpoints.sm} { 4564 display: none; 4565 } 4566 .select-subscription-button { 4567 font-weight: ${o.fonts.weightMediumPlus}; 4568 cursor: pointer; 4569 } 4570 } 4571 .case-option { 4572 position: relative; 4573 display: flex; 4574 flex-direction: column; 4575 ${o.breakpoints.sm} { 4576 margin-top: 0; 4577 flex-direction: row; 4578 } 4579 .case-image { 4580 height: 250px; 4581 width: calc(100% + 32px); 4582 text-align: center; 4583 position: relative; 4584 left: -16px; 4585 ${o.breakpoints.sm} { 4586 height: 180px; 4587 width: 180px; 4588 position: static; 4589 } 4590 ${o.breakpoints.md} { 4591 height: 220px; 4592 width: 220px; 4593 } 4594 text-align: center; 4595 img { 4596 width: 100%; 4597 height: 100%; 4598 object-fit: cover; 4599 ${o.breakpoints.sm} { 4600 width: auto; 4601 } 4602 &.default{ 4603 width: auto; 4604 } 4605 } 4606 } 4607 } 4608 `,swapSubscriptionConfirmationModalWrapper:{wrapper:` 4609 .mantine-Modal-content { 4610 min-width: 70%; 4611 position: fixed; 4612 top: 150px; 4613 left: 0; 4614 width: 100%; 4615 height: calc(100vh - 150px); 4616 ${o.breakpoints.sm} {
4617 min-width: min(90%, 725px); 4618 border-radius: 12px; 4619 position: static; 4620 height: initial; 4621 } 4622 & .mantine-Modal-body { 4623 padding: 0rem; 4624 } 4625 } 4626 .modal-content { 4627 position: relative; 4628 text-align: center; 4629 ${o.breakpoints.sm} { 4630 padding: 0; 4631 text-align: initial; 4632 } 4633 } 4634 .subscription-content { 4635 position: relative; 4636 .subscription-icon { 4637 display: inline-block; 4638 padding: 1rem; 4639 background: #C3E9CF; 4640 border-radius: 3rem; 4641 margin: 48px 0; 4642 i { 4643 border: 1px solid ${o.colors.grey60}; 4644 padding: 5px; 4645 border-radius: 3rem; 4646 } 4647 ${o.breakpoints.sm} { 4648 display: none; 4649 } 4650 } 4651 .title { 4652 margin-bottom: 24px; 4653 ${o.breakpoints.sm} { 4654 display: none; 4655 } 4656 } 4657 .split { 4658 display: none; 4659 ${o.breakpoints.sm} { 4660 display: inline; 4661 } 4662 } 4663 .subtitle-details { 4664 display: block; 4665 padding-top: 16px; 4666 ${o.breakpoints.sm} { 4667 display: inline; 4668 } 4669 } 4670 } 4671 .content-section { 4672 position: fixed; 4673 top: 45%; 4674 left: 50%; 4675 transform: translate(-50%, -50%); 4676 overflow: hidden; 4677 padding: 0 24px; 4678 ${o.breakpoints.sm} { 4679 padding: 0 32px; 4680 } 4681 width: 100%; 4682 ${o.breakpoints.sm} { 4683 position: static; 4684 transform: initial; 4685 width: initial; 4686 } 4687 } 4688 .title-content { 4689 display: flex; 4690 justify-content: flex-end; 4691 background: #FFF; 4692 padding: 32px 24px 0; 4693 ${o.breakpoints.sm} { 4694 padding: 32px 32px 0; 4695 } 4696 z-index: 100; 4697 align-items: center; 4698 position: sticky; 4699 top: 0; 4700 width: 100%; 4701 & i { 4702 margin-bottom: 16px; 4703 cursor: pointer; 4704 } 4705 .title { 4706 display: none; 4707 ${o.breakpoints.sm} { 4708 display: block; 4709 } 4710 } 4711 ${o.breakpoints.sm} { 4712 justify-content: space-between; 4713 } 4714 } 4715 .subtitle { 4716 ${o.mixins.body1} 4717 span { 4718 font-weight: ${o.fonts.weightBold}; 4719 } 4720 } 4721 .button-container { 4722 text-align: center; 4723 padding: 32px 0; 4724 background: #FFF; 4725 z-index: 100; 4726 align-items: center; 4727 position: sticky; 4728 bottom: 0; 4729 width: 100%; 4730 ${o.breakpoints.sm} { 4731 text-align: right; 4732 padding: 16px 0; 4733 } 4734 & button { 4735 cursor: pointer; 4736 } 4737 .submit-button { 4738 text-transform: uppercase; 4739 width: 180px; 4740 ${o.breakpoints.sm} { 4741 margin-left: 16px; 4742 } 4743 .mantine-Button-icon { 4744 width: 16px; 4745 } 4746 } 4747 } 4748 `},swapSubscriptionModalWrapper:` 4749 .mantine-Modal-content { 4750 position: fixed; 4751 top: 0; 4752 left: 0; 4753 min-width: 100vw; 4754 min-height: 100vh; 4755 ${o.breakpoints.sm} { 4756 position: initial; 4757 min-width: min(90%, 828px); 4758 min-height: initial; 4759 } 4760 } 4761 .mantine-Modal-body { 4762 padding: 0; 4763 ${o.breakpoints.sm} { 4764 padding: 0 32px; 4765 } 4766 } 4767 .case-description-mobile { 4768 ${o.mixins.body1} 4769 padding: 10px 16px 16px; 4770 ${o.breakpoints.sm} { 4771 display: none; 4772 } 4773 } 4774 .title-content { 4775 padding-top: 24px; 4776 padding-bottom: 16px; 4777 padding-left: 16px; 4778 padding-right: 16px; 4779 display: flex; 4780 align-items: center; 4781 justify-content: space-between; 4782 ${o.breakpoints.sm} { 4783 padding-top: 32px; 4784 padding-left: 0; 4785 padding-right: 0; 4786 } 4787 } 4788 .close-image { 4789 margin-bottom: 16px; 4790 } 4791 .button-container { 4792 .back-link { 4793 order: 2; 4794 min-width: 100%; 4795 ${o.breakpoints.sm} { 4796 order: 1; 4797 min-width: 180px; 4798 } 4799 cursor: pointer; 4800 padding: 16px; 4801 4802 text-align: center; 4803 & > div { 4804 ${o.mixins.body1} 4805 border-bottom: 1px solid ${o.colors.primary8}; 4806 display: inline; 4807 } 4808 } 4809 display: flex; 4810 align-items: center; 4811 justify-content: end; 4812 flex-direction: column; 4813 gap: 8px; 4814 padding: 16px 24px; 4815 position: sticky; 4816 margin: 0; 4817 bottom: 0; 4818 left: 0; 4819 z-index: 2; 4820 background: white; 4821 box-shadow: 0px -5px 40px 0px #00141E1A; 4822 ${o.breakpoints.sm} { 4823 flex-direction: row; 4824 gap: 24px; 4825 padding: 0 0 32px; 4826 position: static; 4827 box-shadow: none; 4828 } 4829 & button { 4830 cursor: pointer; 4831 } 4832 .submit-button { 4833 padding: 12px 24px; 4834 min-width: 100%; 4835 text-transform: uppercase;
4836 background: ${o.colors.btnsPrimaryBg}; 4837 order: 1; 4838 ${o.breakpoints.sm} { 4839 order: 2; 4840 min-width: initial; 4841 } 4842 .mantine-Button-icon { 4843 width: 16px; 4844 } 4845 &:disabled{ 4846 background-color: ${o.colors.grey00}; 4847 color: ${o.colors.grey70}; 4848 } 4849 &:hover{ 4850 background-color: ${o.colors.btnsPrimaryHoverBg}; 4851 } 4852 } 4853 } 4854 .swap-subscription-error { 4855 display: flex; 4856 align-items: center; 4857 gap: 8px; 4858 margin: 12px; 4859 background: ${o.colors.primary7}; 4860 padding: 12px; 4861 border-radius: 4px; 4862 font-size: ${o.fonts.sizeSmall}; 4863 font-weight: ${o.fonts.weightMedium}; 4864 } 4865 `,SwapSubscriptionModalPaymentDetailsWrapper:` 4866 margin-bottom: 16px; 4867 display: flex; 4868 flex-direction: column; 4869 gap: 8px; 4870 border-bottom: 1px solid ${o.colors.secondary9}; 4871 ${o.breakpoints.sm} { 4872 gap: 12px; 4873 } 4874 h6.payment-details-title { 4875 margin-bottom: 0; 4876 } 4877 .payment-details-subtitle { 4878 ${o.mixins.body1} 4879 } 4880 .payment-card { 4881 background: none; 4882 padding: 0; 4883 margin-bottom: 16px; 4884 ${o.breakpoints.sm} { 4885 margin-bottom: 12px; 4886 } 4887 } 4888 .card-details-icon svg { 4889 width: 24px; 4890 height: 24px; 4891 } 4892 `,swapSubscriptionModalTermsWrapper:` 4893 padding-left: 16px; 4894 padding-right: 16px; 4895 ${o.breakpoints.sm} { 4896 padding-left: 0; 4897 padding-right: 0; 4898 } 4899 padding-bottom: 16px; 4900 .terms-message { 4901 padding-bottom: 16px; 4902 ${o.mixins.body1} 4903 ${o.breakpoints.sm} { 4904 padding-bottom: 0; 4905 } 4906 span { 4907 font-weight: ${o.fonts.weightBold}; 4908 } 4909 } 4910 .terms-link { 4911 display: none; 4912 ${o.breakpoints.sm} { 4913 display: block; 4914 padding: 16px 0; 4915 } 4916 a { 4917 ${o.mixins.body1} 4918 text-decoration: underline; 4919 } 4920 } 4921 .terms-link-mobile { 4922 ${o.breakpoints.sm} { 4923 display: none; 4924 } 4925 padding: 16px 0; 4926 text-align: center; 4927 a { 4928 ${o.mixins.body1} 4929 text-decoration: underline; 4930 } 4931 } 4932 .terms-personalize-message-text { 4933 ${o.mixins.body1} 4934 } 4935 .terms-personalize-message { 4936 & > div { 4937 padding: 12px; 4938 background: #B3CFE5; 4939 color: #222; 4940 border-radius: 4px; 4941 span { 4942 display: flex; 4943 gap: 8px; 4944 i { 4945 padding-top: 2px; 4946 } 4947 } 4948 } 4949 } 4950 `,swapSubscriptionModalCaseDetailsWrapper:` 4951 padding-left: 16px; 4952 padding-right: 16px; 4953 ${o.breakpoints.sm} { 4954 padding-left: 0; 4955 padding-right: 0; 4956 } 4957 .case-image{ 4958 width: 150px; 4959 height: 150px; 4960 text-align: center; 4961 ${o.breakpoints.sm} { 4962 width: 230px; 4963 height: 230px; 4964 } 4965 & img { 4966 width: auto; 4967 height: 100%; 4968 } 4969 } 4970 .case-option { 4971 display: flex; 4972 gap: 16px; 4973 padding-bottom: 16px; 4974 ${o.breakpoints.sm} { 4975 gap: 24px; 4976 } 4977 } 4978 .case-information { 4979 padding-top: 8px; 4980 gap: 8px; 4981 display: flex; 4982 flex-direction: column; 4983 h6 { 4984 margin-bottom: 0; 4985 } 4986 } 4987 .case-description { 4988 display: none; 4989 ${o.mixins.body1} 4990 ${o.breakpoints.sm} { 4991 display: block; 4992 } 4993 } 4994 .case-fequency { 4995 ${o.mixins.body1} 4996 ~ div { 4997 margin-bottom: 0; 4998 } 4999 } 5000 h6.base-price { 5001 ${o.mixins.h8} 5002 } 5003 `},flexModalWrapper:{wrapper:` 5004 .mantine-Modal-inner { 5005 z-index: 9999; 5006 .error{ 5007 margin-top:16px; 5008 padding:18px; 5009 background-color:${o.colors.errorLight}; 5010 color:${o.colors.error}; 5011 } 5012 } 5013 5014 .mantine-Modal-content { 5015 position: fixed; 5016 top: 0; 5017 left: 0; 5018 width: 100%; 5019 min-height: 100vh; 5020 border-radius: 0; 5021 & .mantine-Modal-body { 5022 padding: 0rem; 5023 } 5024 } 5025
5026 .modal-content { 5027 position: relative; 5028 display: flex; 5029 flex-direction: column; 5030 padding: 0; 5031 ${o.breakpoints.sm} { 5032 display: block; 5033 height: initial; 5034 } 5035 } 5036 .sidebar { 5037 min-width: 200px; 5038 display: none; 5039 ${o.breakpoints.lg} { 5040 display: block; 5041 } 5042 input[type="radio"] { 5043 display: none; 5044 } 5045 .user-filter-label { 5046 display: flex; 5047 gap: 8px; 5048 padding-bottom: 18px; 5049 ${o.mixins.body1} 5050 } 5051 } 5052 .result { 5053 flex: 1; 5054 min-height: 70vh; 5055 } 5056 .hits-container { 5057 @media (min-width: 768px) and (max-width: 1229px) { 5058 margin-bottom: 100px; 5059 } 5060 } 5061 .content { 5062 display: flex; 5063 min-height: 100vh; 5064 gap: 24px; 5065 .loading-indicator { 5066 margin-top: 1rem; 5067 } 5068 ${o.breakpoints.sm} { 5069 padding: 0 32px; 5070 } 5071 ${o.breakpoints.xxl} { 5072 padding: 0 120px; 5073 } 5074 } 5075 .search-content { 5076 ${o.breakpoints.sm} { 5077 padding: 0 24px; 5078 } 5079 } 5080 .title-container { 5081 flex: 1; 5082 text-align: center; 5083 .title { 5084 margin-bottom: 8px; 5085 text-align: left; 5086 font-size: ${o.fonts.sizeH2}; 5087 ${o.breakpoints.sm} { 5088 text-align: center; 5089 } 5090 } 5091 .sub-title { 5092 ${o.mixins.body2} 5093 text-align: left; 5094 margin-top: 16px; 5095 ${o.breakpoints.sm} { 5096 ${o.mixins.body1} 5097 text-align: center; 5098 margin-top: 0; 5099 } 5100 } 5101 } 5102 .title-content { 5103 display: flex; 5104 justify-content: space-between; 5105 background: #FFF; 5106 padding: 16px; 5107 z-index: 100; 5108 align-items: baseline; 5109 position: sticky; 5110 top: 0; 5111 width: 100%; 5112 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,rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem; 5113 & i { 5114 margin-bottom: 16px; 5115 cursor: pointer; 5116 } 5117 ${o.breakpoints.sm} { 5118 padding: 32px 64px; 5119 align-items: center; 5120 } 5121 } 5122 .ais-Hits-item{ 5123 box-shadow: none; 5124 padding: 1.5rem 0; 5125 height: 100%; 5126 justify-content: center; 5127 ${o.breakpoints.lg} { 5128 justify-content: start; 5129 } 5130 } 5131 div.clear-refinements-container { 5132 button { 5133 border: none; 5134 } 5135 } 5136 .ais-Hits-list { 5137 gap: 12px; 5138 display: grid; 5139 grid-template-columns: 1fr 1fr; 5140 align-items: baseline; 5141 ${o.breakpoints.sm} { 5142 gap: 24px; 5143 } 5144 ${o.breakpoints.md} { 5145 grid-template-columns: 1fr 1fr; 5146 } 5147 ${o.breakpoints.lg} { 5148 grid-template-columns: 1fr 1fr 1fr; 5149 } 5150 ${o.breakpoints.xl} { 5151 grid-template-columns: 1fr 1fr 1fr; 5152 } 5153 ${o.breakpoints.xxl} { 5154 grid-template-columns: 1fr 1fr 1fr 1fr; 5155 } 5156 } 5157 .search { 5158 .search-sort-box { 5159 display: flex; 5160 justify-content: space-between; 5161 gap: 8px; 5162 padding: 0 16px; 5163 ${o.breakpoints.sm} { 5164 gap: 16px; 5165 padding: 0; 5166 } 5167 } 5168 .toolbar-start { 5169 display: none; 5170 ${o.breakpoints.lg} { 5171 display: block; 5172 } 5173 } 5174 .mobile-filter-block { 5175 display: flex; 5176 order: 2; 5177 ${o.breakpoints.sm} { 5178 order: 1; 5179 flex: 1; 5180 } 5181 ${o.breakpoints.lg} { 5182 display: none; 5183 } 5184 .mobile-filter-box { 5185 cursor: pointer; 5186 flex: 1; 5187 background-color: initial; 5188 border: 1px solid ${o.colors.primary8}; 5189 border-radius: 4px 0 0 4px; 5190 padding: 9px 12px; 5191 height: 40px; 5192 ${o.breakpoints.sm} { 5193 border-radius: 5px 0 0 5px; 5194 padding: 1px 6px; 5195 height: initial; 5196 } 5197 span { 5198 display: none; 5199 ${o.breakpoints.sm} { 5200 display: inline; 5201 } 5202 } 5203 .applied-filter-red-dot-icon { 5204 display: inline-block; 5205 width: 9px; 5206 height: 9px; 5207 background-color: #D7363B; 5208 border-radius: 50%; 5209 position: relative; 5210 left: 25px; 5211 bottom: 10px; 5212 border: 1.5px solid #FFFFFF; 5213 ${o.breakpoints.sm} { 5214 left: 40px; 5215 } 5216 } 5217 } 5218 .mobile-sort-box { 5219 flex: 1; 5220 .mobile-sorting-wrapper { 5221 .action-trigger { 5222 width: 100%; 5223 background-color: initial; 5224 border: 1px solid ${o.colors.primary8}; 5225 border-radius: 0 5px 5px 0; 5226 border-left: 0; 5227 padding: 9px 12px; 5228 height: 40px; 5229 } 5230 } 5231 .results { 5232 .options { 5233 border-radius: 0 5px 5px 0; 5234 border-left-width: 0; 5235 } 5236 .label { 5237 display: none; 5238 ${o.breakpoints.lg} { 5239 display: block; 5240 } 5241 } 5242 } 5243 } 5244 } 5245 .search-box-wrapper { 5246 display: flex; 5247 gap: 16px; 5248 flex: 1; 5249 order: 1; 5250 ${o.breakpoints.sm} { 5251 order: 2; 5252 } 5253 ${o.breakpoints.lg} { 5254 justify-content: flex-end; 5255 } 5256 .ais-SearchBox { 5257 flex: 1; 5258 ${o.breakpoints.lg} { 5259 flex: initial; 5260 } 5261 } 5262 .desktop-sort-box{ 5263 display: none; 5264 ${o.breakpoints.lg} { 5265 display: block; 5266 } 5267 } 5268 .toolbar-start { 5269 flex: 1; 5270 align-self: center; 5271 display: none; 5272 ${o.breakpoints.lg} { 5273 display: block; 5274 } 5275 .clear-refinements { 5276 border: none; 5277 } 5278 } 5279 .ais-SearchBox-input { 5280 border: 1px solid ${o.colors.primary8}; 5281 border-radius: 4px; 5282 height: 40px; 5283 padding: 4px 12px; 5284 box-shadow: none; 5285 ${o.breakpoints.sm} { 5286 width: 240px; 5287 padding: 11px 16px; 5288 } 5289 } 5290 .ais-SearchBox-form::before { 5291 left: initial; 5292 right: 4px; 5293 left: initial; 5294 } 5295 } 5296 `},mobileFilterModal:{wrapper:` 5297 input[type="radio"] { 5298 display: none; 5299 } 5300 div.clear-refinements-container { 5301 display: flex; 5302 button { 5303 border: none; 5304 } 5305 } 5306 .user-filter-label { 5307 display: flex; 5308 gap: 8px; 5309 padding-bottom: 18px; 5310 ${o.mixins.body1} 5311 } 5312 .mantine-Modal-inner { 5313 align-items: flex-start; 5314 justify-content: flex-start; 5315 padding: 0; 5316 z-index: 9999; 5317 } 5318 .mantine-Modal-content { 5319 min-height: 100vh; 5320 min-width: 100vw; 5321 ${o.breakpoints.sm} { 5322 min-width: initial; 5323 } 5324 } 5325 .mantine-Modal-overlay { 5326 z-index: 9999; 5327 } 5328 .mantine-Modal-body { 5329 padding: 32px 16px 16px; 5330 } 5331 .button-container { 5332 position: sticky; 5333 bottom: 0px; 5334 background: white; 5335 padding: 16px 0; 5336 display: flex; 5337 gap: 10px; 5338 button { 5339 width: 100%; 5340 padding: 12px 16px; 5341 text-transform: uppercase; 5342 ${o.mixins.body2} 5343 font-weight: ${o.fonts.weightMediumPlus}; 5344 line-height: 16px; 5345 } 5346 } 5347 .title-content { 5348 display: flex; 5349 justify-content: space-between; 5350 background: #FFF; 5351 align-items: center; 5352 position: sticky; 5353 z-index: 100; 5354 top: 0; 5355 width: 100%; 5356 & i { 5357 margin-bottom: 16px; 5358 cursor: pointer; 5359 } 5360 } 5361 `},flexFooterModalWrapper:{wrapper:` 5362 position: sticky; 5363 bottom: 0; 5364 left: 0; 5365 min-height: 196px; 5366 background: #FFF; 5367 padding: 24px 32px; 5368 box-shadow: 0px -5px 40px 0px rgba(0, 20, 30, 0.1), 0px 10px 20px 0px rgba(0, 20, 30, 0.2); 5369 gap: 20px; 5370 justify-content: space-between; 5371 display: none; 5372 ${o.breakpoints.lg} { 5373 display: flex; 5374 } 5375 ${o.breakpoints.xxl} { 5376 padding: 24px 100px; 5377 }
5378 .mantine-Carousel-controls { 5379 padding-left: 0; 5380 padding-right: 0; 5381 } 5382 .mantine-Carousel-indicator { 5383 bottom: 0; 5384 } 5385 .save-changes-section { 5386 min-width: 260px; 5387 display: flex; 5388 gap: 12px; 5389 flex-direction: column; 5390 .error-message { 5391 max-width: 260px; 5392 } 5393 .tablet-count-error-message { 5394 display: none; 5395 ${o.breakpoints.md} { 5396 display: block; 5397 } 5398 ${o.breakpoints.lg} { 5399 display: none; 5400 } 5401 } 5402 .desktop-count-error-message { 5403 display: none; 5404 ${o.breakpoints.lg} { 5405 display: block; 5406 } 5407 } 5408 } 5409 .flex-products { 5410 flex: 1; 5411 position: relative; 5412 overflow: hidden; 5413 ${o.breakpoints.lg} { 5414 padding: 0 42px; 5415 .mantine-Carousel-slide { 5416 display: flex; 5417 justify-content: center; 5418 } 5419 } 5420 .image-bg { 5421 position: relative; 5422 } 5423 } 5424 .product-hover { 5425 position: absolute; 5426 top: 0; 5427 height: 100%; 5428 display: flex; 5429 flex-direction: column; 5430 } 5431 .flex-product-skeleton { 5432 width: 108px; 5433 min-height: 148px; 5434 .product-title { 5435 margin-top: 8px; 5436 ${o.mixins.body3} 5437 color: ${o.colors.secondary12}; 5438 display: -webkit-box; 5439 -webkit-line-clamp: 2; 5440 -webkit-box-orient: vertical; 5441 text-align: center; 5442 5443 } 5444 .image-container { 5445 position: relative; 5446 width: 108px; 5447 height: 108px; 5448 padding: 6px; 5449 margin: auto; 5450 } 5451 } 5452 .flex-product{ 5453 width: 108px; 5454 min-height: 148px; 5455 &.product-hover { 5456 .image-container { 5457 filter: opacity(0.2); 5458 } 5459 .product-title { 5460 display: none; 5461 } 5462 } 5463 .image-bg { 5464 position: relative; 5465 } 5466 .product-quantity { 5467 display: flex; 5468 gap: 10px; 5469 align-items: center; 5470 ${o.mixins.body1} 5471 .btn { 5472 padding: 12px; 5473 line-height: 0; 5474 border-radius: 100px; 5475 } 5476 } 5477 .product-full-title { 5478 ${o.mixins.body3} 5479 flex: 1; 5480 display: flex; 5481 justify-content: center; 5482 flex-direction: column; 5483 text-align: center; 5484 } 5485 .image-container { 5486 position: relative; 5487 width: 108px; 5488 height: 108px; 5489 padding: 6px; 5490 } 5491 .count { 5492 position: absolute; 5493 right: 0; 5494 top: 2px; 5495 ${o.mixins.body3} 5496 font-weight: ${o.fonts.weightMediumPlus}; 5497 padding: 2px 6px; 5498 background: ${o.colors.unlimitedButtonColor}; 5499 color: #fff; 5500 border-radius: 10px; 5501 } 5502 .product-title { 5503 margin-top: 8px; 5504 ${o.mixins.body3} 5505 display: -webkit-box; 5506 -webkit-line-clamp: 2; 5507 -webkit-box-orient: vertical; 5508 text-align: center; 5509 overflow: hidden; 5510 } 5511 } 5512 .price-section { 5513 display: flex; 5514 gap: 4px; 5515 flex-direction: column; 5516 } 5517 .bottle-price { 5518 display: flex; 5519 gap: 16px; 5520 align-items: baseline; 5521 .discount { 5522 ${o.mixins.body2}
5523 color: ${o.colors.btnsTertiaryBg}; 5524 font-weight: ${o.fonts.weightBold}; 5525 } 5526 .price { 5527 margin-bottom: 0; 5528 } 5529 } 5530 .bottle-count { 5531 ${o.mixins.body1} 5532 color: ${o.colors.secondary15}; 5533 } 5534 .submit-button { 5535 width: 100%; 5536 padding: 16px; 5537 text-transform: uppercase; 5538 ${o.mixins.body2} 5539 font-weight: ${o.fonts.weightMediumPlus}; 5540 line-height: 16px; 5541 background: ${o.colors.btnsPrimaryBg}; 5542 .mantine-Button-icon { 5543 width: 16px; 5544 } 5545 &:disabled{ 5546 background-color: ${o.colors.grey00}; 5547 color: ${o.colors.grey70}; 5548 } 5549 &:focus,&:hover { 5550 background-color: ${o.colors.btnsPrimaryHoverBg}; 5551 color: ${o.colors.btnsPrimaryHoverColor}; 5552 } 5553 } 5554 `},flexMobileFooterModalWrapper:{wrapper:` 5555 position: sticky; 5556 bottom: 0; 5557 left: 0; 5558 background: #FFF; 5559 padding: 12px 16px; 5560 box-shadow: 0px -5px 40px 0px rgba(0, 20, 30, 0.1), 0px 10px 20px 0px rgba(0, 20, 30, 0.2); 5561 gap: 16px; 5562 justify-content: space-between; 5563 display: flex; 5564 flex-direction: column; 5565 ${o.breakpoints.lg} { 5566 flex-direction: row; 5567 } 5568 ${o.breakpoints.lg} { 5569 padding: 12px 32px; 5570 } 5571 ${o.breakpoints.lg} { 5572 display: none; 5573 } 5574 .bottle-count { 5575 display: none; 5576 } 5577 .save-changes-button-container { 5578 display: flex; 5579 flex-direction: column; 5580 } 5581 .save-changes-section { 5582 min-width: 260px; 5583 display: flex; 5584 gap: 12px; 5585 flex-direction: row; 5586 align-items: center; 5587 flex: 1; 5588 justify-content: space-between; 5589 .tablet-count-error-message{ 5590 display: none; 5591 ${o.breakpoints.sm} { 5592 padding-bottom: 12px; 5593 display: block; 5594 } 5595 } 5596 .desktop-count-error-message { 5597 display: none; 5598 } 5599 .error-message { 5600 max-width: 260px; 5601 } 5602 } 5603 .bottle-price { 5604 display: flex; 5605 align-items: baseline; 5606 flex-direction: column; 5607 gap: 8px; 5608 ${o.breakpoints.sm} { 5609 gap: 12px; 5610 flex-direction: row; 5611 } 5612 .discount { 5613 ${o.mixins.body2}
5614 color: ${o.colors.btnsTertiaryBg}; 5615 font-weight: ${o.fonts.weightMediumPlus}; 5616 font-size: 12px; 5617 ${o.breakpoints.sm} { 5618 font-size: 14px; 5619 font-weight: ${o.fonts.weightBold}; 5620 } 5621 } 5622 .price { 5623 margin-bottom: 0; 5624 } 5625 } 5626 .submit-button { 5627 padding: 12px 24px; 5628 text-transform: uppercase; 5629 ${o.mixins.body2} 5630 font-weight: ${o.fonts.weightMediumPlus}; 5631 line-height: 16px; 5632 background: ${o.colors.btnsPrimaryBg}; 5633 .mantine-Button-icon { 5634 width: 16px; 5635 } 5636 &:disabled{ 5637 background-color: ${o.colors.grey00}; 5638 color: ${o.colors.grey70}; 5639 } 5640 &:focus,&:hover { 5641 background-color: ${o.colors.btnsPrimaryHoverBg}; 5642 color: ${o.colors.btnsPrimaryHoverColor}; 5643 } 5644 } 5645 `},floatingCartWrapper:{wrapper:` 5646 position: absolute; 5647 bottom: 100px; 5648 left: 0; 5649 background: #fff; 5650 width: 344px; 5651 padding: 0 16px 12px 32px; 5652 box-shadow: 0px -5px 40px 0px #00141E1A; 5653 box-shadow: 0px 10px 20px 0px #00141E33; 5654 max-height: 200px; 5655 transition: max-height 0.4s ease; 5656 overflow: scroll; 5657 display: none; 5658 ${o.breakpoints.sm} { 5659 display: block; 5660 } 5661 &.expanded { 5662 max-height: calc(100vh - 250px); 5663 } 5664 .bottle-cart-count { 5665 ${o.mixins.body1} 5666 color: ${o.colors.secondary15}; 5667 } 5668 .header { 5669 display: flex; 5670 justify-content: space-between; 5671 align-items: center; 5672 margin-bottom: 16px; 5673 position: sticky; 5674 top: 0px; 5675 background: white; 5676 padding: 12px 0; 5677 cursor: pointer; 5678 z-index: 200; 5679 } 5680 .image { 5681 width: 40px; 5682 height: 48px; 5683 position: relative; 5684 } 5685 .flex-items { 5686 display: flex; 5687 justify-content: space-between; 5688 } 5689 .image { 5690 width: 40px; 5691 height: 48px; 5692 position: relative; 5693 } 5694 .more-items { 5695 background-image: url(/next/images/default_images/bottle_empty.png); 5696 width: 40px; 5697 height: 48px; 5698 background-size: cover; 5699 display: flex; 5700 align-items: center; 5701 justify-content: center; 5702 background-position: center; 5703 } 5704 `},mobileFloatingCartWrapper:{wrapper:` 5705 .mantine-Modal-inner { 5706 z-index: 9999; 5707 height: 80%; 5708 pointer-events: none; 5709 background-color: rgba(0, 0, 0, 0.2); 5710 padding-bottom: 2dvh; 5711 } 5712 section.mantine-Paper-root { 5713 min-width: 100vw; 5714 height:calc(100vh - 166px); 5715 box-shadow: none; 5716 } 5717 .mantine-Modal-body { 5718 padding: 0px 16px; 5719 } 5720 .mantine-Modal-header { 5721 padding: 0; 5722 } 5723 .mantine-Modal-content { 5724 margin-top: 17vh; 5725 margin-bottom: 46px; 5726 ${o.breakpoints.sm}{ 5727 margin-top: 0; 5728 } 5729 } 5730 .header { 5731 display: flex; 5732 justify-content: space-between; 5733 align-items: center; 5734 position: sticky; 5735 top: 0px; 5736 background: white; 5737 padding: 10px 16px; 5738 cursor: pointer; 5739 z-index: 200; 5740 .header-text { 5741 margin-bottom: 0; 5742 } 5743 } 5744 .image { 5745 width: 40px; 5746 height: 48px; 5747 position: relative; 5748 } 5749 .flex-items { 5750 display: flex; 5751 justify-content: space-between; 5752 } 5753 .image { 5754 width: 40px; 5755 height: 48px; 5756 position: relative; 5757 } 5758 `},floatingCartExpandedProductWrapper:{wrapper:` 5759 display: flex; 5760 gap: 12px; 5761 padding: 12px 0; 5762 border-bottom: 1px solid ${o.colors.secondary9}; 5763 :last-child { 5764 border:none; 5765 } 5766 ${o.breakpoints.sm} 5767 { 5768 :last-child { 5769 border: default; 5770 } 5771 } 5772 .image-container { 5773 width: 84px; 5774 height: 84px; 5775 position: relative; 5776 ${o.breakpoints.sm} { 5777 width: 96px; 5778 height: 96px; 5779 } 5780 } 5781 .count { 5782 position: absolute; 5783 right: 0; 5784 top: 2px; 5785 ${o.mixins.body3} 5786 font-weight: ${o.fonts.weightMediumPlus}; 5787 padding: 2px 6px; 5788 background: ${o.colors.unlimitedButtonColor}; 5789 color: #fff; 5790 border-radius: 10px; 5791 } 5792 .image-bg { 5793 position: relative; 5794 } 5795 .product-details { 5796 display: flex; 5797 flex-direction: column; 5798 gap: 12px; 5799 } 5800 .cart-count { 5801 ${o.mixins.body1} 5802 padding: 0 10px; 5803 } 5804 .product-quantity { 5805 display: flex; 5806 align-items: center; 5807 gap: 8px; 5808 button { 5809 border-radius: 16px; 5810 padding: 0; 5811 width: 32px; 5812 height: 32px; 5813 border-color: ${o.colors.secondary9} 5814 } 5815 button:focus { 5816 padding: 0; 5817 border-color: ${o.colors.secondary9}; 5818 border-width: 1px; 5819 } 5820 i { 5821 font-size: 16px; 5822 } 5823 } 5824 `},flexMobileFooterWrapper:{wrapper:` 5825 display: flex; 5826 z-index: 1; 5827 justify-content: space-between; 5828 ${o.breakpoints.sm} { 5829 display: none; 5830 } 5831 .mobile-summary-section { 5832 display: flex; 5833 gap: 8px; 5834 align-items: center; 5835 } 5836 .mobile-bottle-count { 5837 ${o.mixins.body2} 5838 color: ${o.colors.secondary15}; 5839 } 5840 .mini-bottle-count { 5841 ${o.mixins.body2} 5842 color: #AA182B; 5843 display: flex; 5844 align-items: center; 5845 gap: 4px; 5846 } 5847 .view-all { 5848 ${o.mixins.body2} 5849 color: ${o.colors.secondary15}; 5850 display: flex; 5851 align-items: center; 5852 gap: 4px; 5853 } 5854 `},flexMinimumCountWrapper:{wrapper:` 5855 &.mini-bottle-count { 5856 ${o.mixins.body2} 5857 color: #AA182B; 5858 display: flex; 5859 align-items: center; 5860 gap: 4px; 5861 } 5862 `},confirmCloseConfirmationModalWrapper:{wrapper:` 5863 .mantine-Modal-inner { 5864 z-index: 9999; 5865 background-color: rgba(0, 0, 0, 0.2); 5866 } 5867 .mantine-Modal-content { 5868 min-width: 700px; 5869 box-shadow: 0px 30px 60px 0px #341F001A; 5870 border-radius: 16px; 5871 } 5872 .title-content { 5873 display: flex; 5874 justify-content: space-between; 5875 margin-top: 32px; 5876 align-items: center; 5877 } 5878 .close-content { 5879 margin-bottom: 16px; 5880 } 5881 .mantine-Modal-body { 5882 padding: 0 32px; 5883 } 5884 .changes-content { 5885 ${o.mixins.body1} 5886 } 5887 .content-section { 5888 display: flex; 5889 flex-direction: column; 5890 gap: 32px; 5891 } 5892 button.cancel-button { 5893 border: 1px solid ${o.colors.black}; 5894 font-weight: 600; 5895 &:hover { 5896 background: inherit; 5897 color: inherit; 5898 } 5899 } 5900 .button-container { 5901 display: flex; 5902 gap: 24px; 5903 justify-content: flex-end; 5904 padding-bottom: 32px; 5905 } 5906 .submit-button:focus { 5907 background-color: ${o.colors.secondary6}; 5908 color: #FFF; 5909 } 5910 `},confirmCloseConfirmationMobileWrapper:{wrapper:` 5911 .title-content { 5912 display: flex; 5913 justify-content: space-between; 5914 align-items: center; 5915 } 5916 .changes-content { 5917 ${o.mixins.body1} 5918 text-align: left; 5919 } 5920 .button-container { 5921 position: absolute; 5922 bottom: 16px; 5923 display: flex; 5924 flex-direction: column; 5925 gap: 8px; 5926 width: calc(100% - 40px); 5927 & button { 5928 font-weight: ${o.fonts.weightMediumPlus}; 5929 } 5930 .submit-button:focus { 5931 background-color: ${o.colors.secondary6}; 5932 color: #FFF; 5933 } 5934 } 5935 .close-content { 5936 margin-bottom: 16px; 5937 } 5938 .mantine-Modal-inner { 5939 z-index: 9999; 5940 } 5941 section.mantine-Paper-root { 5942 border-top-left-radius: 12px; 5943 border-top-right-radius: 12px; 5944 padding: 24px; 5945 } 5946 .mantine-Modal-overlay { 5947 z-index: 9999; 5948 } 5949 .mantine-Modal-content { 5950 min-width: 70%; 5951 position: fixed; 5952 top: 150px; 5953 left: 0; 5954 width: 100%; 5955 height: calc(100vh - 150px); 5956 & .mantine-Modal-body { 5957 padding: 0rem; 5958 } 5959 }
5960 .modal-content { 5961 text-align: center; 5962 } 5963 `},fetchProductLoaderModalWrapper:{wrapper:` 5964 .mantine-Modal-inner { 5965 z-index: 9999; 5966 } 5967 .mantine-Modal-content { 5968 flex: initial; 5969 box-shadow: none; 5970 } 5971 svg { 5972 stroke: ${o.colors.btnsTertiaryBg}; 5973 } 5974 `},selectedRadio:` 5975 ${o.icons["radio-selected"]} 5976 :before { 5977 ${o.mixins.iconBase} 5978 line-height:0; 5979 font-size:18px; 5980 font-weight:${o.fonts.weightBold} !important; 5981 color:${o.colors.secondary6}; 5982 5983 } 5984 `,unselectedRadio:` 5985 ${o.icons.radio} 5986 :before { 5987 ${o.mixins.iconBase} 5988 line-height:0; 5989 font-size:18px; 5990 font-weight:${o.fonts.weightBold} !important; 5991 color:transparent; 5992 -webkit-text-stroke: 0.5px ${o.colors.secondary7}; 5993 text-stroke: 0.5px ${o.colors.secondary7}; 5994 }`,productHitWrapper:{wrapper:` 5995 &.hit-product { 5996 width: 100%; 5997 height: 100%; 5998 display: flex; 5999 flex-direction: column; 6000 } 6001 .image-bg { 6002 background: ${o.colors.primary3}; 6003 } 6004 .image-container { 6005 width: 100%; 6006 height: 290px; 6007 position: relative; 6008 } 6009 .image img { 6010 padding: 16px; 6011 } 6012 .hit-content { 6013 display: flex; 6014 flex-direction: column; 6015 gap: 8px; 6016 flex: 1; 6017 padding: 8px 16px 0; 6018 ${o.breakpoints.sm} { 6019 padding: 0; 6020 gap: 24px; 6021 } 6022 } 6023 .title, .image-bg { 6024 cursor: pointer; 6025 } 6026 .case-update { 6027 ${o.mixins.body3} 6028 font-weight: ${o.fonts.weightMediumPlus}; 6029 color:#006E1A; 6030 background: ${o.colors.secondary16}; 6031 padding: 4px; 6032 border-radius: 12px; 6033 width: max-content; 6034 display: flex; 6035 gap: 8px; 6036 align-items: center; 6037 position: absolute; 6038 top: 1rem; 6039 left: 0.5rem; 6040 ${o.breakpoints.sm} { 6041 padding: 4px 12px; 6042 } 6043 span { 6044 display: none; 6045 ${o.breakpoints.sm} { 6046 display: inline; 6047 } 6048 } 6049 } 6050 .title-container { 6051 padding-top: 0; 6052 display: flex; 6053 flex-direction: column; 6054 gap: 4px; 6055 ${o.breakpoints.sm} { 6056 padding-top: 12px; 6057 } 6058 .title { 6059 ${o.mixins.body1} 6060 text-align: left; 6061 } 6062 .product-description { 6063 ${o.mixins.body2} 6064 color: ${o.colors.secondary15}; 6065 } 6066 .product-description-content { 6067 gap: 6px; 6068 align-items: center; 6069 flex-flow: wrap; 6070 display: none; 6071 ${o.breakpoints.sm} { 6072 display: flex; 6073 } 6074 span.seperator { 6075 width: 4px; 6076 height: 4px; 6077 background: ${o.colors.secondary9}; 6078 border-radius: 4px; 6079 } 6080 } 6081 } 6082 .info-container { 6083 display: flex; 6084 flex-direction: column; 6085 gap: 12px; 6086 .rating { 6087 display: flex; 6088 gap: 4px; 6089 align-items: center; 6090 } 6091 .reviews { 6092 ${o.mixins.body1} 6093 position: relative; 6094 top: -2px; 6095 } 6096 .addToCase-container button{ 6097 cursor: pointer; 6098 text-decoration: none; 6099 padding: 7px 16px; 6100 text-transform: uppercase; 6101 border: 1px solid ${o.colors.primary8}; 6102 border-radius: 4px; 6103 ${o.mixins.body1} 6104 font-weight: ${o.fonts.weightMediumPlus}; 6105 font-size: ${o.fonts.sizeSmall}; 6106 line-height: 14px; 6107 text-align:center; 6108 color: initial; 6109 &:hover {
6110 background-color: ${o.colors.btnsPrimaryHoverBg}; 6111 color: ${o.colors.btnsPrimaryHoverColor}; 6112 } 6113 ${o.breakpoints.sm} { 6114 font-size: ${o.fonts.fontSize16}; 6115 line-height: 16px; 6116 padding: 12px 24px; 6117 } 6118 } 6119 .product-quantity { 6120 display: flex; 6121 align-items: center; 6122 gap: 8px; 6123 .cart-count { 6124 ${o.mixins.body1} 6125 padding: 0 4px; 6126 } 6127 button { 6128 border-radius: 16px; 6129 padding: 0; 6130 width: 32px; 6131 height: 32px; 6132 border-color: ${o.colors.secondary9} 6133 } 6134 button:focus { 6135 padding: 0; 6136 border-color: ${o.colors.secondary9}; 6137 border-width: 1px; 6138 } 6139 button:hover { 6140 background-color: #fff; 6141 color: initial; 6142 } 6143 i { 6144 font-size: 16px; 6145 } 6146 } 6147 } 6148 .price-container { 6149 display: flex; 6150 gap: 4px; 6151 flex-direction: column; 6152 ${o.mixins.body2} 6153 ${o.breakpoints.sm} { 6154 flex-direction: row; 6155 } 6156 .price-value-text { 6157 display: flex; 6158 gap: 4px; 6159 } 6160 .price-value-discounted { 6161 font-weight: ${o.fonts.weightBold}; 6162 } 6163 .price-value-actual-strike { 6164 text-decoration: line-through; 6165 } 6166 } 6167 `}}}),l=(o,t)=>{let e="#CF004F",r="#00193C",a="#F8F5EF",s="#FFCFD5",p="#E2004D",l="#7A0040",d="#ABC7AB",c="#203C5D",g="#FFA8A1",x="#0B400A",m="#B1927B",f="#117B53",b="#094B32",h={primary0:"#51B1FF",primary1:e,primary2:r,primary3:a,primary4:"#B1070D",primary5:"#F5DEE6",primary6:e,primary7:s,primary8:"#222222",primary9:p,secondary1:l,secondary2:m,secondary3:d,secondary4:c,secondary5:g,secondary6:f,secondary7:x,secondary8:l,secondary9:"#BCBCBC",secondary10:"#333333",secondary11:"#666666",secondary12:"#004D86",secondary13:"#FCFBF9",secondary14:"#DBDBDB",secondary15:"#616161",secondary16:"#C3E9CF",secondary17:"#006E1A",btnsPrimaryBg:f,btnsPrimaryColor:o.colors.white,btnsPrimaryHoverBg:b,btnsPrimaryHoverColor:o.colors.white,btnsSecondaryBg:o.colors.white,btnsSecondaryColor:o.colors.black,btnsSecondaryHoverBg:b,btnsSecondaryHoverColor:o.colors.white,btnsTertiaryBg:e,btnsTertiaryColor:o.colors.white,btnsTertiaryBorder:e,btnsTertiaryHoverBg:"#8B0035",btnsTertiaryHoverColor:o.colors.white,unlimitedButtonColor:"#112b4b",facetCheckboxColor:"#767676",facetLabelColor:"#303030",svgCheckboxBg:"%23117B53",svgCheckboxStroke:"%23FFFFFF",savingsTextColor:e,textPrimaryBg:p,textUnlimitedBg:"#009F8E",textUnlimitedHoverBg:"#00797F",unlimitedModalBg:"#FAF3E6",linkPrimaryColor:o.colors.black,linkSecondaryColor:e,linkTertiaryColor:f,lWHUELWBlue:"#D7E0EE",lwDrGray:"#00000099",headerCartBtn:f,headerCartBtnSmall:f,headerSignInBtnSmall:r,footerPrimaryBg:e,footerGuidelinesFillColor:e,footerIconFillColor:o.colors.black,footerdrinkaware:o.colors.black,bgColors:{LWPink:e,LWDarkBlue:r,LWCream:a,LWPurple:l,LWSand:m,LWLightGreen:d,LWBlue:c,LWPeach:g,LWCTAGreen:f,LWDarkGreen:x,whiteWine:"#E6EFF7",redWine:l,roseWine:"#FBE6F1",champagneAndSparkling:"#674F3E",dessert:"#55002D",fortifiedWine:"#D5BFB1",wineBox:"#C896B1",lwlightError:s}},u=t?.oswald??"'Oswald', sans-serif",y=t?.roboto??"'Roboto', sans-serif",$=t?.noto??"'Noto Serif', serif",w="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:h,fonts:{familyPrimary:u,familySecondary:y,familyTertiary:$,sizeRoot:w,sizeSmall:"12px",sizeDefault:w,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:$,headerMainNavSubTitle:$,styleItalic:"italic",roboto:y,noto:$,oswald:u},space:{xs:"4px",sm:"8px",md:"10px",lg:"16px",xl:"24px",xl2:"32px",xl3:"48px",xl4:"64px"}}},d=o=>{let t=` 6168 display: inline-block; 6169 font-size: ${o.fonts.sizeDefault}; 6170 border-radius: 5px; 6171 //custom line-height and vertical pad for correct icon fit
6172 line-height: 26px; 6173 padding: 12px 24px; 6174 border-width: 0; 6175 border-style: solid; 6176 6177 :hover{ 6178 text-decoration: none; 6179 cursor: pointer; 6180 } 6181 6182 :focus:hover { 6183 color: ${o.colors.btnsSecondaryColor} !important; 6184 } 6185 6186 i.icon-left { 6187 font-size: ${o.fonts.lineHeightDefault}; 6188 transform: translate(-6px); 6189 } 6190 `,e=` 6191 display: inline; 6192 font-size: inherit; 6193 background:none; 6194 border-width: 0; 6195 padding: 0; 6196 text-decoration: none; 6197 text-underline-offset: ${o.space.xs}; 6198 font-weight: inherit; 6199 align-self: auto; 6200 6201 :hover, :focus{ 6202 text-decoration: underline; 6203 background-color: transparent; 6204 cursor: pointer; 6205 } 6206 6207 &[aria-disabled="true"] { 6208 pointer-events: none; 6209 color: ${o.colors.grey40}; 6210 } 6211 6212 `;return{h8:` 6213 font-family: ${o.fonts.familySecondary}; 6214 font-size: ${o.fonts.fontSize16}; 6215 font-weight: ${o.fonts.weightBold}; 6216 line-height: ${o.fonts.fontLineHeight130}; 6217 letter-spacing: ${o.fonts.fontLetterSpacing6}; 6218 ${o.breakpoints.sm} { 6219 font-size: ${o.fonts.fontSize18}; 6220 } 6221 span { 6222 line-height: ${o.fonts.fontLineHeight130}; 6223 } 6224 `,body1:` 6225 font-family: ${o.fonts.familySecondary}; 6226 font-size: ${o.fonts.fontSize16}; 6227 font-weight: ${o.fonts.weightNormal}; 6228 line-height: ${o.fonts.fontLineHeight140}; 6229 letter-spacing: ${o.fonts.fontLetterSpacing5}; 6230 span { 6231 line-height: ${o.fonts.fontLineHeight140}; 6232 } 6233 `,body2:` 6234 font-family: ${o.fonts.familySecondary}; 6235 font-size: ${o.fonts.fontSize14}; 6236 font-weight: ${o.fonts.weightNormal}; 6237 line-height: ${o.fonts.fontLineHeight130}; 6238 letter-spacing: ${o.fonts.fontLetterSpacing5}; 6239 span { 6240 line-height: ${o.fonts.fontLineHeight130}; 6241 } 6242 `,btnPrimary:` 6243 ${t}
6244 background-color: ${o.colors.btnsPrimaryBg}; 6245 color: ${o.colors.btnsPrimaryColor}; 6246 border-width: 2px; 6247 border-color: transparent; 6248 6249 &.desktop-sticky-content:hover, :hover{ 6250 background-color: ${o.colors.btnsPrimaryHoverBg}; 6251 color: ${o.colors.white}; 6252 } 6253 &.desktop-sticky-content:focus, :focus{ 6254 background-color: ${o.colors.white}; 6255 color: ${o.colors.black}; 6256 border-color: ${o.colors.primary0}; 6257 } 6258 &.desktop-sticky-content:disabled, :disabled{ 6259 background-color: ${o.colors.grey00}; 6260 color: ${o.colors.grey70}; 6261 } 6262 `,btnPrimaryUnlimited:` 6263 ${t} 6264 background-color: ${o.colors.textUnlimitedBg}; 6265 color: ${o.colors.btnsPrimaryColor}; 6266 border-width: 2px; 6267 border-color: transparent; 6268 6269 &.desktop-sticky-content:hover, :hover{ 6270 background-color: ${o.colors.textUnlimitedHoverBg}; 6271 color: ${o.colors.white}; 6272 } 6273 &.desktop-sticky-content:focus, :focus{ 6274 background-color: ${o.colors.white}; 6275 color: ${o.colors.black}; 6276 border-color: ${o.colors.primary0}; 6277 } 6278 &.desktop-sticky-content:disabled, :disabled{ 6279 background-color: ${o.colors.grey00}; 6280 color: ${o.colors.grey70}; 6281 } 6282 `,btnSecondary:` 6283 ${t}
6284 background-color: ${o.colors.btnsSecondaryBg}; 6285 color: ${o.colors.btnsSecondaryColor}; 6286 border-width: 1px; 6287 border-color: ${o.colors.btnsSecondaryColor}; 6288 &.desktop-sticky-content:hover, :hover{ 6289 background-color: ${o.colors.btnsSecondaryHoverBg}; 6290 color: ${o.colors.btnsSecondaryHoverColor}; 6291 } 6292 &.desktop-sticky-content:focus, :focus{ 6293 background-color: ${o.colors.white}; 6294 color: ${o.colors.black}; 6295 border-color: ${o.colors.primary0}; 6296 border-width: 2px; 6297 padding: 6.5px 21px; 6298 } 6299 &.desktop-sticky-content:disabled, :disabled{ 6300 background-color: ${o.colors.grey00}; 6301 border: none; 6302 color: ${o.colors.grey70}; 6303 } 6304 `,btnTransparent:` 6305 ${t} 6306 background-color: transparent; 6307 color: ${o.colors.btnsSecondaryColor}; 6308 border-width: 1px; 6309 border-color: ${o.colors.btnsSecondaryColor}; 6310 &.desktop-sticky-content:hover, :hover{ 6311 background-color: ${o.colors.btnsSecondaryHoverBg}; 6312 color: ${o.colors.btnsSecondaryHoverColor}; 6313 } 6314 &.desktop-sticky-content:focus, :focus{ 6315 background-color: ${o.colors.white}; 6316 color: ${o.colors.black}; 6317 border-color: ${o.colors.primary0}; 6318 border-width: 2px; 6319 padding: 6.5px 21px; 6320 } 6321 &.desktop-sticky-content:disabled, :disabled{ 6322 background-color: ${o.colors.grey00}; 6323 border: none; 6324 color: ${o.colors.grey70}; 6325 } 6326 `,btnTertiary:` 6327 ${t}
6328 background-color: ${o.colors.btnsTertiaryBg}; 6329 color: ${o.colors.btnsTertiaryColor}; 6330 border-width: 1px; 6331 border-color: ${o.colors.btnsTertiaryBorder}; 6332 6333 :hover{ 6334 background-color: ${o.colors.btnsTertiaryHoverBg}; 6335 color: ${o.colors.btnsTertiaryHoverColor}; 6336 } 6337 :focus{ 6338 background-color: ${o.colors.white}; 6339 color: ${o.colors.black}; 6340 border-color: ${o.colors.primary0}; 6341 border-width: 2px; 6342 padding: 6.5px 21px; 6343 } 6344 :disabled{ 6345 background-color: ${o.colors.grey00}; 6346 color: ${o.colors.grey30}; 6347 } 6348 `,btnPill:` 6349 ${t} 6350 box-sizing: border-box; 6351 color: #112B4B; 6352 display: flex; 6353 flex-direction: row; 6354 justify-content: center; 6355 align-items: center; 6356 padding: 5px 12px; 6357 background: none; 6358 width: 65px; 6359 height: 32px; 6360 border: 1px solid ${o.colors.grey60}; 6361 border-radius: 16px; 6362 6363 &:hover { 6364 cursor: pointer; 6365 } 6366 6367 &.active { 6368 background-color: #112B4B; 6369 color: ${o.colors.white}; 6370 } 6371 6372 `,linkPrimary:` 6373 ${e} 6374 color: ${o.colors.linkPrimaryColor}; 6375 `,linkSecondary:` 6376 ${e} 6377 color: ${o.colors.linkSecondaryColor}; 6378 `,linkTertiary:` 6379 ${e} 6380 color: ${o.colors.linkTertiaryColor}; 6381 `,clearRefinements:` 6382 background: none; 6383 color: ${o.colors.black}; 6384 font-size: ${o.fonts.sizeLarge}; 6385 line-height: ${o.fonts.lineHeightDefault}; 6386 text-decoration-line: underline; 6387 padding: 0; 6388 margin: 0 0 16px 0; 6389 cursor: pointer; 6390 border: none; 6391 box-shadow: none; 6392 &:hover { 6393 background: none; 6394 color: ${o.colors.black}; 6395 text-decoration-line: underline; 6396 } 6397 `,btnInvisible:` 6398 ${t} 6399 background-color: transparent; 6400 border: none; 6401 &:hover { 6402 background: none; 6403 } 6404 `,btnZeroStyle:` 6405 background-color: transparent; 6406 border: none; 6407 &:hover, &:active, &:focus { 6408 background: none; 6409 } 6410 `}}}}]);
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.