@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, ddsweb-back-to-top; } @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 { --spacing-40: 40px; --spacing-48: 48px; } .template-wrapper:has([data-mfe='mfe-promotions']), .template-content:has([data-mfe='mfe-promotions']) { max-width: 1512px; margin: 0 auto } body { font-family: var(--ddsweb-theme-base-font-family); } .cZdAP2KXq9aufMI:not(:empty):not(:has(> div:empty)) { margin-top: var(--spacing-48) } .QABtfvtIAbnN9uE:has(.ddsweb-back-to-top__btt-container) { display: contents; } .InTIB141HAsbwBe { grid-area: rating; margin-bottom: var(--ddsweb-theme-spacing-xs); } .g9jplR5Th7Bbw2d { width: 254px; height: 100%; display: flex !important; flex-direction: column; justify-content: space-between; } .rxct1aIgPXvBHes { --ddsweb-heading-color: var(--ddsweb-theme-colors-link-base); } .F0Ih7iSkFvLMzar { display: flex; justify-content: center; } .CxxHlADrlF_hoGh { position: relative; } .oi78Rwvn71yPqRT :hover { text-decoration: underline !important; } .AqCksbetudwMyrh { margin-top: var(--ddsweb-theme-spacing-sm); } .CxxHlADrlF_hoGh > div { z-index: 0; } .bnnhtY65TECAGlJ { margin-top: var(--ddsweb-theme-spacing-xs); } .bnnhtY65TECAGlJ > div { margin-bottom: var(--ddsweb-theme-spacing-sm); } .Yzd0Dr7Pvy39GUl { position: absolute; right: var(--ddsweb-theme-spacing-sm); top: var(--ddsweb-theme-spacing-sm); path { fill: var(--ddsweb-theme-colors-grayscale); stroke: var(--ddsweb-theme-colors-grayscale); } } .omnfBfaEASf3X9g { margin-bottom: var(--ddsweb-theme-spacing-xs); padding: 0; text-decoration: none; } .omnfBfaEASf3X9g h3 { font-size: var(--ddsweb-theme-spacing-md); } .omnfBfaEASf3X9g h3:hover, .omnfBfaEASf3X9g:focus { text-decoration: underline; } .ubeLxuJP8lQ4fB9 p { display: block; } .YV3sNev9rJXAcGo { display: flex; flex-direction: column; gap: var(--ddsweb-theme-spacing-xs); margin-bottom: var(--ddsweb-theme-spacing-xs); } .AqCksbetudwMyrh svg { max-width: 100%; } .YV3sNev9rJXAcGo .ddsweb-value-bar__content-text[class*='singleLineEllipse'] { white-space: initial; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } @media (min-width: 756px) { .AqCksbetudwMyrh { margin-bottom: var(--ddsweb-theme-spacing-sm); margin-top: 0; } .wc0OPemFtLTHG9y { margin-bottom: var(--ddsweb-theme-spacing-sm); } } @keyframes bmRh4WbXinHI4jq { 0% { background-color: var(--ddsweb-theme-colors-background-darkest); } 50% { background-color: var(--ddsweb-theme-colors-background-base); } 100% { background-color: var(--ddsweb-theme-colors-background-darkest); } } @keyframes I55mQ7cRv8h0huj { 0% { background-color: var(--ddsweb-theme-colors-background-darkest); } 50% { background-color: var(--ddsweb-theme-colors-background-dark); } 100% { background-color: var(--ddsweb-theme-colors-background-darkest); } } .IBdgXuUXflrINBL { animation-name: bmRh4WbXinHI4jq; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; height: 136px; width: 136px; margin: 0 auto var(--ddsweb-theme-spacing-lg) auto; } .I55mQ7cRv8h0huj { animation-name: I55mQ7cRv8h0huj; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } .GoKAKGdPfnNUV5l { height: var(--ddsweb-theme-spacing-md); width: 214px; margin-bottom: var(--ddsweb-theme-spacing-xs); } .cKTb6VngcH06z1n { height: var(--ddsweb-theme-spacing-md); width: 124px; } .C1RKRzndExqZLsg { display: inline-block; height: var(--spacing-40); width: 108px; border-radius: var(--ddsweb-theme-spacing-lg); } .kcgwpixAyKwnGvw { width: 254px; height: 425px; border: 1px solid var(--ddsweb-theme-colors-background-darkest); padding: var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-xxxl); display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 756px) { .kcgwpixAyKwnGvw { height: 495px; } } .uyXTCQw16GJKSzD { margin-bottom: var(--ddsweb-theme-spacing-md); height: 112px; } .OxVVq1pwVKTVGQA { display: flex; height: 76px; align-items: flex-end; justify-content: space-between; } .E_5NHle2neGlnwX { background-color: var(--ddsweb-theme-colors-background-darkest); display: inline-block; height: var(--spacing-40); width: 94px; margin-right: var(--ddsweb-theme-spacing-sm); } ._1D15Bp0jfUk4PjX .ddsweb-carousel__item-container > section { height: 100%; word-wrap: break-word; } @media (max-width: 503px) { ._1D15Bp0jfUk4PjX .ddsweb-carousel__title { font-size: var(--ddsweb-theme-font-size-md); } } .Rs0xnzfRfhwIGT9 { margin-top: var(--spacing-48); } @media (max-width: 755px) { .Rs0xnzfRfhwIGT9 { margin-top: var(--ddsweb-theme-spacing-xxxl); } } .F0GUJX7cwT4fVO_ .ddsweb-carousel__item-count, .F0GUJX7cwT4fVO_ .ddsweb-carousel__container-navigation, .F0GUJX7cwT4fVO_ .ddsweb-carousel__control-side { display: none; } @media (max-width: 503px) { .hKnnnDkiWlF36wr { font-size: var(--ddsweb-theme-font-size-sm); } } .gQtpHeQFXcDGaHC { display: flex; align-items: center; justify-content: center; margin-top: var(--ddsweb-theme-spacing-sm); } .gQtpHeQFXcDGaHC.VIHzcNyVvNZ3wGG { height: 425px; } .gQtpHeQFXcDGaHC.V7wnjIxkTzMmpcH { height: 236px; } @media (min-width: 756px) { .gQtpHeQFXcDGaHC.V7wnjIxkTzMmpcH { height: 306px; } .gQtpHeQFXcDGaHC.VIHzcNyVvNZ3wGG { height: 495px; } } .JJ7RGdqMwg9xDHx { margin-top: var(--spacing-48); } @media (max-width: 755px) { .JJ7RGdqMwg9xDHx { margin-top: var(--ddsweb-theme-spacing-xxxl); } } .Vc3Vjn1WwywvrXC { border: 1px solid var(--ddsweb-theme-colors-lines-base); padding: var(--ddsweb-theme-spacing-lg) var(--ddsweb-theme-spacing-md); margin-top: var(--ddsweb-theme-spacing-xxxl); @media (min-width: 756px) { margin-top: var(--spacing-48); } } .emz_l5Vjlf5Np2l { height: 66px; margin-top: var(--ddsweb-theme-spacing-xs); } .emz_l5Vjlf5Np2l .ddsweb-rating-interactive__hint-label { margin-top: var(--ddsweb-theme-spacing-xs); } .Vc3Vjn1WwywvrXC .ddsweb-heading { font-size: var(--ddsweb-theme-font-size-xs); } .LTvPq_9xWQo9doi { margin-top: var(--ddsweb-theme-spacing-lg); } div:has(.LTvPq_9xWQo9doi) + div > * { margin-top: var(--ddsweb-theme-spacing-lg) !important; } .aZXcXoBlzj2cRYb { width: 60px; height: 60px; margin-top: var(--ddsweb-theme-spacing-xxxl); @media (min-width: 756px) { margin-top: var(--spacing-48); } span { width: 20px; height: 24px; display: flex; align-items: center; } } .ddsweb-back-to-top__btt-container { width: 60px; height: 60px; } .qGEej3gm6yhIlYS { width: 128px; height: 128px; } .Iy9HvIIO9qGThK7 { width: 100%; justify-content: center; text-decoration: none; padding: 0 var(--ddsweb-theme-spacing-xs); } .Iy9HvIIO9qGThK7:hover, .Iy9HvIIO9qGThK7:focus { text-decoration: underline; } .u_4OVrYSRZT3ZSm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; text-align: center; margin-top: var(--ddsweb-theme-spacing-xx); } @media (max-width: 1260px) { .qGEej3gm6yhIlYS { width: 64px; height: 64px; } } .V2OJGLUOMavIMDE { margin-top: var(--ddsweb-theme-spacing-md); } .V2OJGLUOMavIMDE .ddsweb-carousel__content-container { gap: var(--ddsweb-theme-spacing-xx); } .V2OJGLUOMavIMDE .ddsweb-carousel__item-container { width: 144px; white-space: normal; flex-shrink: 0; } .V2OJGLUOMavIMDE .ddsweb-carousel__item-count { display: none; } .V2OJGLUOMavIMDE .ddsweb-carousel__control-side { display: none; } .Gy2kY7vf1Dxc2hj .ddsweb-carousel__control-right { display: none; } .V2OJGLUOMavIMDE .ddsweb-carousel__control-side { height: 144px; } @media (max-width: 1260px) { .V2OJGLUOMavIMDE .ddsweb-carousel__item-container { width: 92px; } .V2OJGLUOMavIMDE .ddsweb-carousel__control-side button { align-self: flex-start; margin-top: 16px; } } @media screen and (min-width: 756px) { .V2OJGLUOMavIMDE:not(.Gy2kY7vf1Dxc2hj) .ddsweb-carousel__control-side { display: flex; } .V2OJGLUOMavIMDE .ddsweb-carousel__control-bottom { display: none; } } @media (max-width: 503px) { .V2OJGLUOMavIMDE .ddsweb-carousel__title { font-size: var(--ddsweb-theme-font-size-md); } } @keyframes _4ceZIUW757V_TOW { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .wCoFZIJ4z8Jjpw4 { display: flex; flex-direction: column; align-items: center; gap: var(--ddsweb-theme-spacing-xs); } .k0jvCk4pOliDc78 { width: 128px; height: 128px; border-radius: 50%; background: var(--ddsweb-theme-colors-background-dark); background-image: linear-gradient( to right, var(--ddsweb-theme-colors-background-dark) 0%, var(--ddsweb-theme-colors-background-darkest) 20%, var(--ddsweb-theme-colors-background-dark) 40%, var(--ddsweb-theme-colors-background-dark) 100% ); background-repeat: no-repeat; background-size: 200px 100%; } .PwZL0As_LwdNOyO { width: 80%; height: var(--ddsweb-theme-spacing-lg); border-radius: var(--ddsweb-theme-spacing-xx); background: var(--ddsweb-theme-colors-background-dark); background-image: linear-gradient( to right, var(--ddsweb-theme-colors-background-dark) 0%, var(--ddsweb-theme-colors-background-darkest) 20%, var(--ddsweb-theme-colors-background-dark) 40%, var(--ddsweb-theme-colors-background-dark) 100% ); background-repeat: no-repeat; background-size: 200px 100%; } @media (prefers-reduced-motion: no-preference) { .PwZL0As_LwdNOyO { animation: _4ceZIUW757V_TOW 1s infinite linear; } .k0jvCk4pOliDc78 { animation: _4ceZIUW757V_TOW 1s infinite linear; } } @media (max-width: 1260px) { .k0jvCk4pOliDc78 { width: 64px; height: 64px; } } .dYjYDppyysLHNil { margin-top: var(--ddsweb-theme-spacing-xxxl); } @media (min-width: 756px) { .dYjYDppyysLHNil { margin-top: var(--spacing-48); } } div:has(h1.dYjYDppyysLHNil) + div > * { margin-top: var(--ddsweb-theme-spacing-md) !important; } @media (min-width: 504px) { h1.dYjYDppyysLHNil { font-size: var(--ddsweb-theme-font-size-next-oversized-lg); } } .erLRg_3TGcBUJCC { margin-top: var(--ddsweb-theme-spacing-xxxl); @media (min-width: 756px) { margin-top: var(--spacing-48); } } .erLRg_3TGcBUJCC .ddsweb-carousel__item-container { display: inline-flex; white-space: normal; } .erLRg_3TGcBUJCC .ddsweb-grid__column { margin-bottom: 12px; } @media (max-width: 503px) { .erLRg_3TGcBUJCC .ddsweb-heading { font-size: var(--ddsweb-theme-font-size-md); } } .LgvEP62w3f27SX2 { background: transparent; } .LgvEP62w3f27SX2 .ddsweb-responsive-image__image { min-height: auto; aspect-ratio: 16 / 9; } .UYUe90LsfAN7bGp { display: flex; align-items: center; justify-content: center; height: 495px; } @media (max-width: 755px) { .UYUe90LsfAN7bGp { height: 425px; } } .dkk6CSSK_bRRdLa { padding: 0 var(--ddsweb-theme-spacing-sm) var(--ddsweb-theme-spacing-xxxl) var(--ddsweb-theme-spacing-sm); } .blJca4Grhg3ZAmk { margin-top: var(--ddsweb-theme-spacing-lg); } div:has(.blJca4Grhg3ZAmk) + div > * { margin-top: var(--ddsweb-theme-spacing-lg) !important; } .LP2aWoKxuyQ_z2Z { display: none; } .qIa9XEo7ksBVMuK { display: flex; align-items: center; width: 100%; /* change it to justify-content once we uncomment sort changes */ justify-content: flex-end; margin-top: var(--ddsweb-theme-spacing-md); padding-right: var(--ddsweb-theme-spacing-sm); } .J7RnG7EtQWBIteR { display: none; } @media (min-width: 1008px) { .LP2aWoKxuyQ_z2Z { display: flex; align-items: center; gap: var(--ddsweb-theme-spacing-lg); } .ALr5817PH8mpHM2, .cydAEUiLEStmQ9i { display: none; } .J7RnG7EtQWBIteR { color: var(--ddsweb-theme-colors-grayscale); display: block; line-height: 2; margin: var(--ddsweb-theme-spacing-xs) 0; } } .pSEyVSJFneY4aZC { color: var(--Text-Palette-Header-Grey, var(--Typography-colour-text-header-primary, #333)); } .ypH_q7qlRCADzp7 { display: grid; list-style-type: none; padding: 0 0 var(--ddsweb-theme-spacing-md); margin: 0; width: 100%; } .uAfJYTGykj2tCeC > div { width: 100%; border: none; box-shadow: 1px 1px 0 0 var(--ddsweb-theme-colors-lines-base), 1px 0 0 0 var(--ddsweb-theme-colors-lines-base) inset, 0 1px 0 0 var(--ddsweb-theme-colors-lines-base) inset; } @media (max-width: 503px) { .uAfJYTGykj2tCeC { width: 100%; height: 100%; display: grid; grid-template-rows: subgrid; grid-row: span 10; } .uAfJYTGykj2tCeC > div { display: grid !important; height: 100%; grid-template-areas: 'offersash offersash action-icon' 'image title title' 'image rating rating' 'image variations variations' 'image deliverymessage deliverymessage' 'image details details' 'image buy-box buy-box' 'messaging messaging messaging' 'save-for-later save-for-later save-for-later' 'footer footer footer' 'promotion promotion promotion' 'preferences preferences preferences'; grid-template-rows: subgrid; grid-row: span 10; padding: var(--ddsweb-theme-spacing-md); box-shadow: none; } .uAfJYTGykj2tCeC > div > div > div { min-height: auto; } .uAfJYTGykj2tCeC > div > div, .uAfJYTGykj2tCeC > div > section { display: contents; } .ypH_q7qlRCADzp7 > li { border-top: 1px solid var(--ddsweb-theme-colors-lines-base); position: relative; width: calc(100% + 30px); left: -15px; box-sizing: border-box; margin: 0; padding: 0; } .ypH_q7qlRCADzp7 > li:is(:last-child) { border-bottom: 1px solid var(--ddsweb-theme-colors-lines-base); } .ypH_q7qlRCADzp7 > li > div > div { box-shadow: none; } } .yH47qTAtXd40IGn { display: grid; grid-template-rows: subgrid; grid-row: span 10; } ul.ypH_q7qlRCADzp7 { gap: normal; } @media (min-width: 504px) { .ypH_q7qlRCADzp7 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1008px) { .ypH_q7qlRCADzp7 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1260px) { .ypH_q7qlRCADzp7 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1512px) { .ypH_q7qlRCADzp7 { grid-template-columns: repeat(5, 1fr); } } .lxQpR50szUpJ2r7{ color: var(--ddsweb-theme-colors-base); font-weight: bold; } .lNRKp59JGwHITsv { display: none !important; } @media (min-width: 756px) { .lNRKp59JGwHITsv { display: flex !important; } } .ddsweb-pagination__navigation{ align-items: flex-end; flex-direction: column; } @media (min-width: 756px) { .ZJKf8GlBJumFyxn { display: none; } } .prWnUOKTYYsgFC0 { margin: 0 var(--ddsweb-theme-spacing-md); } .prWnUOKTYYsgFC0 > * { margin-bottom: var(--ddsweb-theme-spacing-lg); } /*# sourceMappingURL=82fd2c9a2f12dafcd301.css.map*/