@layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-font-family-heading: "TESCO Modern", Arial, sans-serif; --ddsweb-theme-font-family-text: "TESCO Modern", Arial, sans-serif; } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-base-font-family: "TESCO Modern", Arial, sans-serif; --ddsweb-theme-base-font-size: var( --dds-typography-tokens-size-fontsize-16 ); --ddsweb-theme-base-hyphens: auto; --ddsweb-theme-base-line-height: 1.25; --ddsweb-theme-base-logo: default; --ddsweb-theme-base-outline: none; --ddsweb-theme-base-overflow-wrap: break-word; --ddsweb-theme-base-tap-highlight-color: transparent; --ddsweb-theme-base-transition-duration: 0.3s; --ddsweb-theme-base-rgb-opacity: 0.4; --ddsweb-theme-base-focus-outline-width: 3px; } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-branding-width: 121px; --ddsweb-theme-branding-height: 35px; } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-buttons-size-xs: var(--dds-sizing-size-24); --ddsweb-theme-buttons-size-sm: var(--dds-sizing-size-32); --ddsweb-theme-buttons-size-md: var(--dds-sizing-size-40); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-colors-active-rgb: var( --dds-interaction-colour-interactive-active-rgb ); --ddsweb-theme-colors-active: var( --dds-interaction-colour-interactive-active ); --ddsweb-theme-colors-background-base-rgb: var( --dds-background-colour-background-1-rgb ); --ddsweb-theme-colors-background-base: var( --dds-background-colour-background-1 ); --ddsweb-theme-colors-background-dark-rgb: var( --dds-background-colour-background-2-rgb ); --ddsweb-theme-colors-background-dark: var( --dds-background-colour-background-2 ); --ddsweb-theme-colors-background-darkest-rgb: var( --dds-background-colour-background-3-rgb ); --ddsweb-theme-colors-background-darkest: var( --dds-background-colour-background-3 ); --ddsweb-theme-colors-background-error-rgb: 248, 230, 230; --ddsweb-theme-colors-background-error: #f8e6e6; --ddsweb-theme-colors-background-info-rgb: var( --dds-messaging-colour-messaging-info-tint-rgb ); --ddsweb-theme-colors-background-info: var( --dds-messaging-colour-messaging-info-tint ); --ddsweb-theme-colors-background-success-rgb: 224, 240, 224; --ddsweb-theme-colors-background-success: #e0f0e0; --ddsweb-theme-colors-background-warning-rgb: var( --dds-messaging-colour-messaging-warning-tint-rgb ); --ddsweb-theme-colors-background-warning: var( --dds-messaging-colour-messaging-warning-tint ); --ddsweb-theme-colors-base-rgb: var( --dds-typography-colour-text-header-primary-rgb ); --ddsweb-theme-colors-base: var( --dds-typography-colour-text-header-primary ); --ddsweb-theme-colors-black-rgb: 0, 0, 0; --ddsweb-theme-colors-black: #000000; --ddsweb-theme-colors-disabled-base-rgb: var( --dds-line-colour-border-primary-rgb ); --ddsweb-theme-colors-disabled-base: var( --dds-line-colour-border-primary ); --ddsweb-theme-colors-disabled-with-background-rgb: var( --dds-interaction-colour-interactive-form-rgb ); --ddsweb-theme-colors-disabled-with-background: var( --dds-interaction-colour-interactive-form ); --ddsweb-theme-colors-error-rgb: 204, 51, 51; --ddsweb-theme-colors-error: #cc3333; --ddsweb-theme-colors-grayscale-rgb: var( --dds-interaction-colour-interactive-form-rgb ); --ddsweb-theme-colors-grayscale: var( --dds-interaction-colour-interactive-form ); --ddsweb-theme-colors-heading-rgb: var( --dds-typography-colour-text-header-primary-rgb ); --ddsweb-theme-colors-heading: var( --dds-typography-colour-text-header-primary ); --ddsweb-theme-colors-info-rgb: var( --dds-messaging-colour-messaging-info-rgb ); --ddsweb-theme-colors-info: var(--dds-messaging-colour-messaging-info); --ddsweb-theme-colors-info-messaging-rgb: var( --dds-messaging-colour-messaging-info-rgb ); --ddsweb-theme-colors-info-messaging: var( --dds-messaging-colour-messaging-info ); --ddsweb-theme-colors-inverse-rgb: var( --dds-interaction-colour-interactive-inverse-rgb ); --ddsweb-theme-colors-inverse: var( --dds-interaction-colour-interactive-inverse ); --ddsweb-theme-colors-lines-base-rgb: var( --dds-line-colour-border-primary-rgb ); --ddsweb-theme-colors-lines-base: var(--dds-line-colour-border-primary); --ddsweb-theme-colors-lines-light-rgb: var( --dds-line-colour-border-secondary-rgb ); --ddsweb-theme-colors-lines-light: var( --dds-line-colour-border-secondary ); --ddsweb-theme-colors-link-active-rgb: var( --dds-interaction-colour-interactive-active-rgb ); --ddsweb-theme-colors-link-active: var( --dds-interaction-colour-interactive-active ); --ddsweb-theme-colors-link-base-rgb: var( --dds-interaction-colour-interactive-default-rgb ); --ddsweb-theme-colors-link-base: var( --dds-interaction-colour-interactive-default ); --ddsweb-theme-colors-nutrition-green-rgb: var( --dds-nutrition-colour-nutri-green-rgb ); --ddsweb-theme-colors-nutrition-green: var( --dds-nutrition-colour-nutri-green ); --ddsweb-theme-colors-nutrition-red-rgb: var( --dds-nutrition-colour-nutri-red-rgb ); --ddsweb-theme-colors-nutrition-red: var( --dds-nutrition-colour-nutri-red ); --ddsweb-theme-colors-nutrition-yellow-rgb: var( --dds-nutrition-colour-nutri-amber-rgb ); --ddsweb-theme-colors-nutrition-yellow: var( --dds-nutrition-colour-nutri-amber ); --ddsweb-theme-colors-messaging-info-messaging-light-rgb: var( --dds-messaging-colour-messaging-info-tint-rgb ); --ddsweb-theme-colors-messaging-info-messaging-light: var( --dds-messaging-colour-messaging-info-tint ); --ddsweb-theme-colors-messaging-success-messaging-rgb: var( --dds-messaging-colour-messaging-success-tint-rgb ); --ddsweb-theme-colors-messaging-success-messaging: var( --dds-messaging-colour-messaging-success-tint ); --ddsweb-theme-colors-messaging-error-messaging-rgb: var( --dds-messaging-colour-messaging-error-tint-rgb ); --ddsweb-theme-colors-messaging-error-messaging: var( --dds-messaging-colour-messaging-error-tint ); --ddsweb-theme-colors-messaging-warning-messaging-rgb: var( --dds-messaging-colour-messaging-warning-tint-rgb ); --ddsweb-theme-colors-messaging-warning-messaging: var( --dds-messaging-colour-messaging-warning-tint ); --ddsweb-theme-colors-messaging-amber-messaging-rgb: var( --dds-messaging-colour-messaging-warning-rgb ); --ddsweb-theme-colors-messaging-amber-messaging: var( --dds-messaging-colour-messaging-warning ); --ddsweb-theme-colors-messaging-info-messaging-rgb: var( --dds-messaging-colour-messaging-info-rgb ); --ddsweb-theme-colors-messaging-info-messaging: var( --dds-messaging-colour-messaging-info ); --ddsweb-theme-colors-messaging-amend-messaging-rgb: var( --dds-messaging-colour-messaging-active-rgb ); --ddsweb-theme-colors-messaging-amend-messaging: var( --dds-messaging-colour-messaging-active ); --ddsweb-theme-colors-messaging-amend-messaging-light-rgb: var( --dds-messaging-colour-messaging-active-tint-rgb ); --ddsweb-theme-colors-messaging-amend-messaging-light: var( --dds-messaging-colour-messaging-active-tint ); --ddsweb-theme-colors-messaging-orange-rgb: var( --dds-messaging-colour-messaging-warning-rgb ); --ddsweb-theme-colors-messaging-orange: var( --dds-messaging-colour-messaging-warning ); --ddsweb-theme-colors-tag-fullstop-red-rgb: var( --dds-fullstop-colour-fullstop-rgb ); --ddsweb-theme-colors-tag-fullstop-red: var( --dds-fullstop-colour-fullstop ); --ddsweb-theme-colors-primary-rgb: var( --dds-typography-colour-text-header-secondary-rgb ); --ddsweb-theme-colors-primary: var( --dds-typography-colour-text-header-secondary ); --ddsweb-theme-colors-promo-rgb: var(--dds-value-colour-value-yellow-rgb); --ddsweb-theme-colors-promo: var(--dds-value-colour-value-yellow); --ddsweb-theme-colors-ratings-rgb: 252, 215, 0; --ddsweb-theme-colors-ratings: #fcd700; --ddsweb-theme-colors-secondary-rgb: 238, 28, 46; --ddsweb-theme-colors-secondary: #ee1c2e; --ddsweb-theme-colors-success-rgb: var( --dds-messaging-colour-messaging-success-rgb ); --ddsweb-theme-colors-success: var( --dds-messaging-colour-messaging-success ); --ddsweb-theme-colors-tesco-blue-rgb: var( --dds-background-colour-background-dark-primary-rgb ); --ddsweb-theme-colors-tesco-blue: var( --dds-background-colour-background-dark-primary ); --ddsweb-theme-colors-light-blue-rgb: 197, 214, 229; --ddsweb-theme-colors-light-blue: #c5d6e5; --ddsweb-theme-colors-tesco-red-rgb: var( --dds-fullstop-colour-fullstop-rgb ); --ddsweb-theme-colors-tesco-red: var(--dds-fullstop-colour-fullstop); --ddsweb-theme-colors-text-base-rgb: var( --dds-typography-colour-text-body-rgb ); --ddsweb-theme-colors-text-base: var(--dds-typography-colour-text-body); --ddsweb-theme-colors-text-dark-rgb: var( --dds-typography-colour-text-header-primary-rgb ); --ddsweb-theme-colors-text-dark: var( --dds-typography-colour-text-header-primary ); --ddsweb-theme-colors-orange-rgb: var( --dds-messaging-colour-messaging-warning-rgb ); --ddsweb-theme-colors-orange: var( --dds-messaging-colour-messaging-warning ); --ddsweb-theme-colors-white-rgb: var( --dds-background-colour-background-1-rgb ); --ddsweb-theme-colors-white: var(--dds-background-colour-background-1); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-font-size-next-text-xs: var( --dds-typography-tokens-size-fontsize-12 ); --ddsweb-theme-font-size-next-text-sm: var( --dds-typography-tokens-size-fontsize-14 ); --ddsweb-theme-font-size-next-text-md: var( --dds-typography-tokens-size-fontsize-16 ); --ddsweb-theme-font-size-next-text-lg: var( --dds-typography-tokens-size-fontsize-20 ); --ddsweb-theme-font-size-next-headline-sm: var( --dds-typography-tokens-size-fontsize-14 ); --ddsweb-theme-font-size-next-headline-md: var( --dds-typography-tokens-size-fontsize-16 ); --ddsweb-theme-font-size-next-headline-lg: var( --dds-typography-tokens-size-fontsize-20 ); --ddsweb-theme-font-size-next-headline-xl: var( --dds-typography-tokens-size-fontsize-24 ); --ddsweb-theme-font-size-next-headline-xxl: var( --dds-typography-tokens-size-fontsize-28 ); --ddsweb-theme-font-size-next-headline-xxxl: var( --dds-typography-tokens-size-fontsize-32 ); --ddsweb-theme-font-size-next-oversized-lg: var( --dds-typography-tokens-size-fontsize-40 ); --ddsweb-theme-font-size-next-oversized-xl: var( --dds-typography-tokens-size-fontsize-48 ); --ddsweb-theme-font-size-next-oversized-xxl: var( --dds-typography-tokens-size-fontsize-56 ); --ddsweb-theme-font-size-next-oversized-xxxl: var( --dds-typography-tokens-size-fontsize-64 ); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-font-size-xxx: var( --dds-typography-tokens-size-fontsize-12 ); --ddsweb-theme-font-size-xx: var( --dds-typography-tokens-size-fontsize-14 ); --ddsweb-theme-font-size-xs: var( --dds-typography-tokens-size-fontsize-16 ); --ddsweb-theme-font-size-sm: var( --dds-typography-tokens-size-fontsize-20 ); --ddsweb-theme-font-size-md: var( --dds-typography-tokens-size-fontsize-24 ); --ddsweb-theme-font-size-lg: var( --dds-typography-tokens-size-fontsize-28 ); --ddsweb-theme-font-size-xl: var( --dds-typography-tokens-size-fontsize-32 ); --ddsweb-theme-font-size-xxl: var( --dds-typography-tokens-size-fontsize-36 ); --ddsweb-theme-font-size-xxxl: var( --dds-typography-tokens-size-fontsize-40 ); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-font-weight-heading: var( --dds-typography-tokens-weight-sans-bold ); --ddsweb-theme-font-weight-text: var( --dds-typography-tokens-weight-sans-regular ); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-forms-small-field-diameter: var(--dds-sizing-size-24); --ddsweb-theme-forms-field-diameter: var(--dds-sizing-size-32); --ddsweb-theme-forms-field-height: var(--dds-sizing-size-40); --ddsweb-theme-forms-small-field-height: var(--dds-sizing-size-32); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-icons-background-sizes-xx: var(--dds-sizing-size-16); --ddsweb-theme-icons-background-sizes-xs: var(--dds-sizing-size-24); --ddsweb-theme-icons-background-sizes-sm: var(--dds-sizing-size-40); --ddsweb-theme-icons-background-sizes-xl: 70px; --ddsweb-theme-icons-background-sizes-xxxl: 120px; --ddsweb-theme-icons-sizes-base: 22px; --ddsweb-theme-icons-sizes-xx: 0.5; --ddsweb-theme-icons-sizes-xs: 0.666666667; --ddsweb-theme-icons-sizes-sm: 1; --ddsweb-theme-icons-sizes-xl: 1.85; --ddsweb-theme-icons-sizes-xxxl: 3.65; } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-line-height-next-heading: calc(1em + 0.25rem); --ddsweb-theme-line-height-next-text-sm: calc(1em + 0.25rem); --ddsweb-theme-line-height-next-text-md: calc(1em + 0.5rem); } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-line-height-heading-xs: 1.25; --ddsweb-theme-line-height-heading-sm: 1.2; --ddsweb-theme-line-height-heading-md: 1.17; --ddsweb-theme-line-height-heading-lg: 1.14; --ddsweb-theme-line-height-heading-xl: 1.13; --ddsweb-theme-line-height-text-xx: 1.57; --ddsweb-theme-line-height-text-xs: 1.5; --ddsweb-theme-line-height-text-sm: 1.4; } } } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-spacing-xxx: var(--dds-spacing-space-2); --ddsweb-theme-spacing-xx: var(--dds-spacing-space-4); --ddsweb-theme-spacing-xs: var(--dds-spacing-space-8); --ddsweb-theme-spacing-sm: var(--dds-spacing-space-12); --ddsweb-theme-spacing-md: var(--dds-spacing-space-16); --ddsweb-theme-spacing-lg: var(--dds-spacing-space-20); --ddsweb-theme-spacing-xl: var(--dds-spacing-space-24); --ddsweb-theme-spacing-xxl: var(--dds-spacing-space-28); --ddsweb-theme-spacing-xxxl: var(--dds-spacing-space-32); } } } @layer ddsweb-base { @layer ddsweb-tokens { :root { --dds-typography-colour-text-header-primary: #333333; --dds-typography-colour-text-body: #666666; --dds-typography-colour-text-on-dark: #ffffff; --dds-typography-colour-text-header-secondary: #00539f; --dds-typography-colour-text-header-primary-rgb: 51, 51, 51; --dds-typography-colour-text-body-rgb: 102, 102, 102; --dds-typography-colour-text-on-dark-rgb: 255, 255, 255; --dds-typography-colour-text-header-secondary-rgb: 0, 83, 159; --dds-interaction-colour-interactive-default: #00539f; --dds-interaction-colour-interactive-active: #007eb3; --dds-interaction-colour-interactive-inverse: #ffffff; --dds-interaction-colour-interactive-form: #666666; --dds-interaction-colour-interactive-error-form: #cc3333; --dds-interaction-colour-interactive-default-rgb: 0, 83, 159; --dds-interaction-colour-interactive-active-rgb: 0, 126, 179; --dds-interaction-colour-interactive-inverse-rgb: 255, 255, 255; --dds-interaction-colour-interactive-form-rgb: 102, 102, 102; --dds-interaction-colour-interactive-error-form-rgb: 204, 51, 51; --dds-line-colour-border-primary: #cccccc; --dds-line-colour-border-secondary: #e5e5e5; --dds-line-colour-border-primary-rgb: 204, 204, 204; --dds-line-colour-border-secondary-rgb: 229, 229, 229; --dds-background-colour-background-1: #ffffff; --dds-background-colour-background-2: #f6f6f6; --dds-background-colour-background-3: #e5e5e5; --dds-background-colour-background-dark-primary: #00539f; --dds-background-colour-background-dark-secondary: #002343; --dds-background-colour-background-1-rgb: 255, 255, 255; --dds-background-colour-background-2-rgb: 246, 246, 246; --dds-background-colour-background-3-rgb: 229, 229, 229; --dds-background-colour-background-dark-primary-rgb: 0, 83, 159; --dds-background-colour-background-dark-secondary-rgb: 0, 35, 67; --dds-messaging-colour-messaging-error: #cc3333; --dds-messaging-colour-messaging-error-tint: #f9e6e6; --dds-messaging-colour-messaging-warning: #bd5800; --dds-messaging-colour-messaging-warning-tint: #ffe4cc; --dds-messaging-colour-messaging-success: #008800; --dds-messaging-colour-messaging-success-tint: #dff4df; --dds-messaging-colour-messaging-info: #0074e0; --dds-messaging-colour-messaging-info-tint: #deefff; --dds-messaging-colour-messaging-active: #007eb3; --dds-messaging-colour-messaging-active-tint: #dcf0f9; --dds-messaging-colour-messaging-error-rgb: 204, 51, 51; --dds-messaging-colour-messaging-error-tint-rgb: 249, 230, 230; --dds-messaging-colour-messaging-warning-rgb: 189, 88, 0; --dds-messaging-colour-messaging-warning-tint-rgb: 255, 228, 204; --dds-messaging-colour-messaging-success-rgb: 0, 136, 0; --dds-messaging-colour-messaging-success-tint-rgb: 223, 244, 223; --dds-messaging-colour-messaging-info-rgb: 0, 116, 224; --dds-messaging-colour-messaging-info-tint-rgb: 222, 239, 255; --dds-messaging-colour-messaging-active-rgb: 0, 126, 179; --dds-messaging-colour-messaging-active-tint-rgb: 220, 240, 249; --dds-tables-colour-table-header: #e5e5e5; --dds-tables-colour-table-cell-1: #ffffff; --dds-tables-colour-table-cell-2: #f6f6f6; --dds-tables-colour-table-border: #e5e5e5; --dds-tables-colour-table-header-rgb: 229, 229, 229; --dds-tables-colour-table-cell-1-rgb: 255, 255, 255; --dds-tables-colour-table-cell-2-rgb: 246, 246, 246; --dds-tables-colour-table-border-rgb: 229, 229, 229; --dds-nutrition-colour-nutri-green: #b9d479; --dds-nutrition-colour-nutri-amber: #fdd285; --dds-nutrition-colour-nutri-red: #f08275; --dds-nutrition-colour-nutri-green-rgb: 185, 212, 121; --dds-nutrition-colour-nutri-amber-rgb: 253, 210, 133; --dds-nutrition-colour-nutri-red-rgb: 240, 130, 117; --dds-value-colour-value-yellow: #fcd700; --dds-value-colour-value-black: #000000; --dds-value-colour-value-yellow-rgb: 252, 215, 0; --dds-value-colour-value-black-rgb: 0, 0, 0; --dds-fullstop-colour-fullstop: #e81c2d; --dds-fullstop-colour-fullstop-rgb: 232, 28, 45; --dds-overlays-colour-overlay: #000000b3; --dds-overlays-colour-overlay-2: #ffffffcc; --dds-overlays-colour-overlay-rgba: rgba(0, 0, 0, 0.7); --dds-overlays-colour-overlay-2-rgba: rgba(255, 255, 255, 0.8); --dds-retain-colour-in-dark-mode-retain-interactive-default: #00539f; --dds-retain-colour-in-dark-mode-retain-interactive-active: #007eb3; --dds-retain-colour-in-dark-mode-retain-interactive-inverse: #ffffff; --dds-retain-colour-in-dark-mode-retain-value-yellow: #fcd700; --dds-retain-colour-in-dark-mode-retain-header-primary: #333333; --dds-retain-colour-in-dark-mode-retain-text-body: #666666; --dds-retain-colour-in-dark-mode-retain-brand-tesco: #00539f; --dds-retain-colour-in-dark-mode-retain-interactive-default-rgb: 0, 83, 159; --dds-retain-colour-in-dark-mode-retain-interactive-active-rgb: 0, 126, 179; --dds-retain-colour-in-dark-mode-retain-interactive-inverse-rgb: 255, 255, 255; --dds-retain-colour-in-dark-mode-retain-value-yellow-rgb: 252, 215, 0; --dds-retain-colour-in-dark-mode-retain-header-primary-rgb: 51, 51, 51; --dds-retain-colour-in-dark-mode-retain-text-body-rgb: 102, 102, 102; --dds-retain-colour-in-dark-mode-retain-brand-tesco-rgb: 0, 83, 159; --dds-typography-tokens-family-display: "Tesco Modern"; --dds-typography-tokens-family-oversize-heading: "Tesco Modern"; --dds-typography-tokens-family-heading: "Tesco Modern"; --dds-typography-tokens-family-body: "Tesco Modern"; --dds-typography-tokens-family-label: "Tesco Modern"; --dds-typography-tokens-family-links: "Tesco Modern"; --dds-typography-tokens-weight-sans-bold: Bold; --dds-typography-tokens-weight-sans-regular: Regular; --dds-typography-tokens-weight-sans-italic: Italic; --dds-typography-tokens-weight-serif-bold: Bold; --dds-typography-tokens-weight-serif-regular: Regular; --dds-typography-tokens-weight-serif-italic: Italic; --dds-typography-tokens-size-fontsize-64: 64px; --dds-typography-tokens-size-fontsize-56: 56px; --dds-typography-tokens-size-fontsize-48: 48px; --dds-typography-tokens-size-fontsize-40: 40px; --dds-typography-tokens-size-fontsize-32: 32px; --dds-typography-tokens-size-fontsize-28: 28px; --dds-typography-tokens-size-fontsize-24: 24px; --dds-typography-tokens-size-fontsize-20: 20px; --dds-typography-tokens-size-fontsize-16: 16px; --dds-typography-tokens-size-fontsize-14: 14px; --dds-typography-tokens-size-fontsize-12: 12px; --dds-typography-tokens-line-height-lineheight-68: 68px; --dds-typography-tokens-line-height-lineheight-60: 60px; --dds-typography-tokens-line-height-lineheight-52: 52px; --dds-typography-tokens-line-height-lineheight-44: 44px; --dds-typography-tokens-line-height-lineheight-36: 36px; --dds-typography-tokens-line-height-lineheight-32: 32px; --dds-typography-tokens-line-height-lineheight-28: 28px; --dds-typography-tokens-line-height-lineheight-24: 24px; --dds-typography-tokens-line-height-lineheight-22: 22px; --dds-typography-tokens-line-height-lineheight-20: 20px; --dds-typography-tokens-line-height-lineheight-18: 18px; --dds-typography-tokens-line-height-lineheight-16: 16px; --dds-spacing-space-0: 0px; --dds-spacing-space-4: 4px; --dds-spacing-space-8: 8px; --dds-spacing-space-12: 12px; --dds-spacing-space-16: 16px; --dds-spacing-space-20: 20px; --dds-spacing-space-24: 24px; --dds-spacing-space-28: 28px; --dds-spacing-space-32: 32px; --dds-spacing-space-36: 36px; --dds-spacing-space-40: 40px; --dds-spacing-space-48: 48px; --dds-spacing-space-56: 56px; --dds-spacing-space-60: 60px; --dds-spacing-space-72: 72px; --dds-spacing-space-80: 80px; --dds-spacing-space-2: 2px; --dds-sizing-size-0: 0px; --dds-sizing-size-2: 2px; --dds-sizing-size-4: 4px; --dds-sizing-size-8: 8px; --dds-sizing-size-12: 12px; --dds-sizing-size-16: 16px; --dds-sizing-size-20: 20px; --dds-sizing-size-24: 24px; --dds-sizing-size-28: 28px; --dds-sizing-size-32: 32px; --dds-sizing-size-36: 36px; --dds-sizing-size-40: 40px; --dds-sizing-size-48: 48px; --dds-sizing-size-56: 56px; --dds-sizing-size-60: 60px; --dds-sizing-size-64: 64px; --dds-sizing-size-72: 72px; --dds-sizing-size-80: 80px; --dds-border-radius-borderradius-0: 0px; --dds-border-radius-borderradius-4: 4px; --dds-border-radius-borderradius-8: 8px; --dds-border-radius-borderradius-12: 12px; --dds-border-radius-borderradius-16: 16px; --dds-border-radius-borderradius-20: 20px; --dds-border-radius-borderradius-24: 24px; --dds-border-radius-borderradius-28: 28px; --dds-border-radius-borderradius-32: 32px; --dds-border-radius-borderradius-36: 36px; --dds-border-radius-borderradius-40: 40px; --dds-strokeweight-strokeweight-1: 1px; --dds-strokeweight-strokeweight-1-half: 1.5px; --dds-strokeweight-strokeweight-2: 2px; --dds-strokeweight-strokeweight-3: 3px; --dds-dds-tokens-version: "dds-tokens-version: 1.0.0"; } } } @layer ddsweb-base, ddsweb-small-atoms, ddsweb-large-atoms, ddsweb-molecules, ddsweb-organisms, ddsweb-overrides; @layer ddsweb-base { @layer ddsweb-normalise, ddsweb-tokens, ddsweb-theme, ddsweb-theme-smaller, ddsweb-theme-fandf, ddsweb-fonts, ddsweb-foundation, dds-grid, ddsweb-helpers; } @layer ddsweb-small-atoms { @layer ddsweb-divider, ddsweb-heading, ddsweb-icon, ddsweb-icons, ddsweb-branding, ddsweb-label, ddsweb-logos, ddsweb-tag, ddsweb-text; } @layer ddsweb-large-atoms { @layer ddsweb-spinner, ddsweb-button, ddsweb-link, ddsweb-rating, ddsweb-responsive-image, ddsweb-card; } @layer ddsweb-molecules { @layer ddsweb-calendar, ddsweb-action-menu, ddsweb-messaging, ddsweb-fab, ddsweb-form-group, ddsweb-checkbox, ddsweb-checkbox-with-label, ddsweb-checkbox-group, ddsweb-text-input, ddsweb-time-input, ddsweb-textarea, ddsweb-textarea-group, ddsweb-date-input, ddsweb-date-picker, ddsweb-dropdown, ddsweb-filter-tabs, ddsweb-password-entry, ddsweb-password-entry-group, ddsweb-password-creation, ddsweb-radio-button, ddsweb-radio-button-with-label, ddsweb-radio-button-group, ddsweb-skip-to-content, ddsweb-multiselect-dropdown, ddsweb-toggle, ddsweb-progress-bar, ddsweb-breadcrumb, ddsweb-link-list, ddsweb-messaging-card, ddsweb-nutritional-info, ddsweb-page-action-control, ddsweb-product-header, ddsweb-pagination-bar, ddsweb-pagination, ddsweb-popover, ddsweb-search-input, ddsweb-segmented-controller, ddsweb-step-indicator, ddsweb-tabs-menu, ddsweb-tabs, ddsweb-accordion, ddsweb-colleague-table, ddsweb-table, ddsweb-footer, ddsweb-value-bar, ddsweb-value-tile, ddsweb-global-navigation, ddsweb-sidebar-panel, ddsweb-sidebar-navigation, ddsweb-toolkit-navigation, ddsweb-local-navigation, ddsweb-bottom-sheet; } @layer ddsweb-organisms { @layer ddsweb-colleague-news-tile, ddsweb-banner, ddsweb-carousel, ddsweb-consent-banner, ddsweb-content-group, ddsweb-content-stamps, ddsweb-context-card, ddsweb-cookies-notification, ddsweb-icon-stamps, ddsweb-modal, ddsweb-sidebar, ddsweb-rewards-tile, ddsweb-one-tile; } @layer ddsweb-base { @layer ddsweb-theme { :root { --ddsweb-theme-name: default; } } } :root { --ddsweb-theme-colors-transparent: transparent; --basket-tile-heading-line-clamp: 2; --basket-tile-heading-line-height: '20px'; } .WinBlOE4R26jura { max-height: 100%; display: flex; flex-flow: column; position: sticky; top: 0; background: var(--ddsweb-theme-colors-background-base); } .RQXRkTW1ae7gjmW { border: 1px solid var(--ddsweb-theme-colors-lines-base); border-top: 0; height: 100vh; max-width: 238px; } .UUi9KgF8DLTLm33 { height: calc(100vh - 57px); } .ZE01ge0L5kLXe5B { padding: var(--ddsweb-theme-spacing-lg) var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm); border-bottom: 1px solid var(--ddsweb-theme-colors-lines-base); } .LshDRtwO_oew0Kw { overflow-y: auto; background: var(--ddsweb-theme-colors-background-dark); word-break: break-word; flex: 1 1 0%; } .rIMbFOnRzxHBoqH { margin: 0; padding: 0; } .E0AGbaZkuo7r2GD { padding: var(--ddsweb-theme-spacing-sm); border-top: 1px solid var(--ddsweb-theme-colors-lines-base); background: var(--ddsweb-theme-colors-background-base); } :root { --basket-line-height-heading-xx: 1; } .EnhGdBQ8FKX5cSc { margin-top: var(--ddsweb-theme-spacing-sm); } .uCDOiElKvWEuExF { margin-bottom: var(--ddsweb-theme-spacing-xs); } .FzPCiNil0JX3gEB { padding-bottom: var(--ddsweb-theme-spacing-sm); } .V7Zwdn_CkiRBckL { margin-top: var(--ddsweb-theme-spacing-xx); background-color: var(--ddsweb-theme-colors-lines-light); } .jCQ90Q26kCTo2EM { display: flex; flex-direction: column; gap: var(--ddsweb-theme-spacing-sm); } .iUFQqGv41am4KhE { display: flex; align-items: center; gap: var(--ddsweb-theme-spacing-xs); } .epuVNzvI9S_psWF { line-height: var(--basket-line-height-heading-xx); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ddsweb-theme-spacing-xx); padding-bottom: var(--ddsweb-theme-spacing-xx); } .iI_Aq_7Hw1YNs2U { color: var(--ddsweb-theme-colors-primary); line-height: var(--ddsweb-theme-spacing-lg); } .J0FQalp9aMa3GnW { display: flex; justify-content: space-between; } .Gm2_0j9rLgLOSks { background: var(--ddsweb-theme-colors-promo); display: flex; justify-content: space-between; padding: var(--ddsweb-theme-spacing-sm); } .THPVXN0Dzo_ynkt { position: fixed; top: 0; right: 0; z-index: 11; border: 0; width: 388px; background-color: var(--ddsweb-theme-colors-background-base); transform: translateX(100%); } .THPVXN0Dzo_ynkt > div { width: inherit; } .tkg3qjZ3FpsMrVg { transform: translateX(0); } .THPVXN0Dzo_ynkt .ddsweb-sidebar-panel__header { position: sticky; top: 0; background-color: var(--ddsweb-theme-colors-background-base); z-index: 3; } .THPVXN0Dzo_ynkt .ddsweb-value-bar__terms { text-align: right; padding: 0; } @keyframes fDMX_wAo8GnbMtS { 0% { visibility: visible; opacity: 0; } 100% { opacity: 1; } } .mmTFS9A3hG5YD9G { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgb(var(--ddsweb-theme-colors-black-rgb), 0.7); z-index: 10; animation: fDMX_wAo8GnbMtS var(--ddsweb-theme-base-transition-duration) ease-in forwards; } .UIb4bEvQy0uMcbk { font-size: var(--ddsweb-theme-font-size-xs); padding: var(--ddsweb-theme-spacing-xs); height: fit-content; border-radius: calc(var(--ddsweb-theme-spacing-xxxl) * 2); width: 100%; } .wxDa7ZskFI3ikgV { display: block; margin-top: var(--ddsweb-theme-spacing-xx); } .OZulOF9x2vBcAVe { margin-bottom: var(--ddsweb-theme-spacing-md); } .wCK182ygCzmHqli { background-color: var(--ddsweb-theme-colors-transparent); padding-left: 0; padding-right: 0; } .HfVbqxvkJKF0SHo { color: var(--ddsweb-theme-colors-grayscale); } .HfVbqxvkJKF0SHo > a { color: var(--ddsweb-theme-colors-primary); } .SXA0VXx3E4QBtyj { text-decoration: revert; } .SXA0VXx3E4QBtyj:hover { text-decoration: none; } .hqZgQWoZGLEmRf4 { text-decoration: none; font-weight: var(--ddsweb-theme-font-weight-heading); display: inline-flex; padding-top: var(--ddsweb-theme-spacing-xs); } .hqZgQWoZGLEmRf4:focus { text-decoration: underline; } .HSiOWT8UsYA8LYI { margin-left: var(--ddsweb-theme-spacing-xs); margin-top: var(--ddsweb-theme-spacing-xxx); height: 18px; } .Y9jvjGVZBDHN3gJ { margin-left: 0; } .sqpeokQSxR2b49t { padding-top: var(--ddsweb-theme-spacing-sm); } .CAZ7BWZJ7Fc5WBP { color: var(--ddsweb-theme-colors-grayscale); font-weight: normal; } .FLgkiU79JnRlHAY { padding: var(--ddsweb-theme-spacing-sm); border-bottom: 1px solid var(--ddsweb-theme-colors-lines-base); } .xtczdQmagQdxl2J { display: flex; gap: var(--ddsweb-theme-spacing-xs); margin-bottom: var(--ddsweb-theme-spacing-sm); } .eqQ2ZH4yONB47lS { min-height: 40px; } .sndb2mtGohGF7ks { min-height: 49px; } .Orn5xf_q5lSPM9I { font-size: var(--ddsweb-theme-font-size-xx); margin-top: var(--ddsweb-theme-spacing-xs); } .FzM5wKcKAd9q6ww { background-color: var(--ddsweb-theme-colors-background-base); } .pFy_o7n6falHB1e { border-top: 1px solid var(--ddsweb-theme-colors-lines-base); } .VzLtZ_r3wIrJJyJ { padding: var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm) 0; } .ZSGdqORr6jC0kiO { border-bottom: 1px solid var(--ddsweb-theme-colors-lines-base); padding: var(--ddsweb-theme-spacing-lg) var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm); } .QJm4vzrLZlfuBwb { padding: var(--ddsweb-theme-spacing-xs) 0 var(--ddsweb-theme-spacing-sm) 0; } .jjOlDnCuSMpn91_ { display: flex; justify-content: space-between; gap: var(--ddsweb-theme-spacing-xs); } .jjOlDnCuSMpn91_ > :last-child { white-space: nowrap; } .NVW58NeHFzOykFz { margin-top: var(--ddsweb-theme-spacing-xs); } .aMiGzMLTQbqZ9Bw { display: flex; flex-direction: column; gap: var(--ddsweb-theme-spacing-sm); } @keyframes LekWQ9Ghgjchw1w { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes QN3m9zJJTeQMzAH { 0% { transform: scale(0); } 100% { transform: scale(1); } } .CcRlC0k1U5eYKVp { margin-bottom: var(--ddsweb-theme-spacing-lg); padding: 0 var(--ddsweb-theme-spacing-sm); font-weight: 300; font-size: var(--ddsweb-theme-font-size-next-text-sm); } .dPtMX5HRmg477Ln { text-align: center; padding: calc(var(--ddsweb-theme-spacing-md) * 3) var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm); } .dPtMX5HRmg477Ln.R0VEtglQIE2fMmF { animation: LekWQ9Ghgjchw1w 0.5s linear 0s 1; } .ywk5x4Ke7_ZxW7U { animation: QN3m9zJJTeQMzAH 0.25s linear 0s 1; } .A1RXcPVwzNwHyrd { border-left: 1px solid var(--ddsweb-theme-colors-lines-base); border-right: 1px solid var(--ddsweb-theme-colors-lines-base); height: 100vh; max-height: 100%; display: flex; flex-flow: column; position: sticky; top: 0; } .F4QRo9l29JvCjNA { background-color: var(--ddsweb-theme-colors-background-darkest); padding: var(--ddsweb-theme-spacing-xs); border-radius: 40px; display: inline-flex; color: var(--ddsweb-theme-colors-grayscale); } .TSkRNmKml5Key2C { background-color: var(--ddsweb-theme-colors-background-base); padding: var(--ddsweb-theme-spacing-sm); display: flex; flex-flow: column; gap: var(--ddsweb-theme-spacing-sm); } .TSkRNmKml5Key2C button { white-space: nowrap; width: 100%; } @media (max-width: 768px) { .TSkRNmKml5Key2C button { white-space: unset; height: auto; } } .VWzxoYn8fv6tMGs { padding-left: 0; margin: 0; } .DejTCAf1jhMfcmT { border-bottom: 1px solid var(--ddsweb-theme-colors-background-darkest); background: var(--ddsweb-theme-colors-background-base); display: block; } .eaGok5RG3IsRZua { width: 60px; min-height: 60px; background: var(--ddsweb-theme-colors-background-darkest); } .eaGok5RG3IsRZua a { display: inline; } .VrcJFYOlRptJLbj { overflow-wrap: break-word; font-size: var(--ddsweb-theme-font-size-xs); text-align: center; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; white-space: nowrap; } .aVA0DzeE8GdMX3u { display: grid; padding: var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm) 6px var(--ddsweb-theme-spacing-sm); grid-template-columns: 68px 40px min-content 1fr auto; grid-template-areas: 'image name name name remove' 'image price price price remove' 'image charges charges charges remove' 'image decrement number increment increment'; } .d6JbvSwCBF3ckxS { grid-template-areas: 'image name name name remove' 'image fnf fnf fnf remove' 'image price price price remove' 'image charges charges charges remove' 'image decrement number increment increment'; } .pulfkMg86fDVKpT { grid-area: increment; padding: var(--ddsweb-theme-spacing-xs) 0 6px; } .nwhivCs8wsHnvyC { grid-area: image; } .nwhivCs8wsHnvyC img { display: block; max-width: 60px; } .e7GubLloFQCaz5Y { grid-area: fnf; } .QHeIliSKhXXSAKw { grid-area: name; } .QHeIliSKhXXSAKw, .e7GubLloFQCaz5Y { max-height: calc( var(--basket-tile-heading-line-clamp) * var(--basket-tile-heading-line-height) ); width: calc(100% + var(--ddsweb-theme-spacing-xx)); } .APWLfdo9uVOpOtN { grid-area: remove; min-width: 30px; min-height: 20px; margin-left: var(--ddsweb-theme-spacing-xs); display: flex; justify-content: flex-end; } .hea6MNQz3KUxaBw { margin-left: var(--ddsweb-theme-spacing-xs); } .DIV5j2ftn2WyMIY { grid-area: number; margin: auto; padding: var(--ddsweb-theme-spacing-xs) 0 6px; text-align: center; } .gqZkBK3oKKKWVXx { grid-area: decrement; padding: var(--ddsweb-theme-spacing-xs) 0 6px; } .dZu70q7BzrLmSzy { grid-area: price; text-align: left; margin: var(--ddsweb-theme-spacing-xxx) 0; display: flex; justify-content: start; } .St2hQ0Kn1SDekMB { grid-area: charges; margin-top: 6px; } .zg1yW8_xRI6XfCF { font-size: var(--ddsweb-theme-font-size-xs); } .QFedSMKIRaHuAUf { text-decoration: none; } .QFedSMKIRaHuAUf:hover, .QFedSMKIRaHuAUf:focus { text-decoration: underline; } .KloCHJ3iiohlWjo { color: var(--ddsweb-theme-colors-primary); font-size: var(--ddsweb-theme-font-size-xx); line-height: var(--basket-tile-heading-line-height); overflow: hidden; white-space: initial; text-overflow: ellipsis; display: -webkit-box; line-clamp: var(--basket-tile-heading-line-clamp); -webkit-line-clamp: var( --basket-tile-heading-line-clamp ); /* number of lines to show */ -webkit-box-orient: vertical; } .Z5uNfL_siZ7gX_4 { margin: 0 var(--ddsweb-theme-spacing-sm); } /* this is only shown in lego tablet view */ .VjFKG7HDsxbjzMY { display: none; } /*# sourceMappingURL=1aab89734875637b40ce.css.map*/