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