[data-palette="App"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:rgba(240,240,250,1);
--Alert:rgba(200,0,0,1);
--Available:rgba(0,160,65,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(220,220,220,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "App Typeface 3";
--Button:var(--px15) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:7px;
--Byline:var(--px15) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:3px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12)/130% "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(11,11,11,1);
--Header-Secondary:rgba(37,38,40,1);
--Heading:var(--px22) "App Typeface 1";
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:0.9;
--Image-Border-Size:0px;
--Image-Radius:10px;
--Image-Shadow:none;
--Line-Spacing:150%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--On-Alert:rgba(255,255,255,1);
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Selected:rgba(0,0,0,0.2);
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Very-Narrow:2px;
--Spacing-Very-Wide:20px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px16) "App Typeface 1";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px18) "App Typeface 1";
--Subtitle:var(--px17) "App Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(11,11,11,1);
--Surface-Secondary:rgba(145,145,145,1);
--Title:var(--px20) "App Typeface 3";
--Title-Case:normal;
--Unavailable:rgba(150,150,150,1);
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="App Logo"] {
--Active:rgba(255,255,255,1);
--Background-Primary:transparent;
--Background-Secondary:transparent;
--Highlight:rgba(255,255,255,0.1);
--Overlay:rgba(255,255,255,1);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="App Menu"] {
--Active:rgba(255,255,255,1);
--Active-Primary:rgba(255,255,255,1);
--Background-Primary:linear-gradient(var(--Nav-Background-Angle,180deg), rgba(235,235,235,1)
0%,rgba(235,235,235,1) 1px,rgba(47, 47, 47,1) 1px,rgba(47, 47, 47,1)
100%);;
--Footnote:var(--px14) "App Typeface 3";
--Highlight:rgba(255,255,255,1);
--Overlay:rgba(255,255,255,1);
--Page-Gutter:0;
--Surface-Primary:rgba(211,211,211,0.5) ;

}
[data-palette="App Header"] {
--Active-Primary:rgba(237,237,237,1);
--Active-Secondary:transparent;
--Background-Primary:linear-gradient(0deg, rgba(235,235,235,1) 0%,rgba(235,235,235,1) 1px,rgba(25,25,25,1) 1px,rgba(25,25,25,1) 100%);
--Background-Secondary:rgba(25,25,25,0.9);
--Header-Primary:rgba(11,11,11,1);
--Header-Secondary:rgba(33,3,33,1);
--Line-Spacing:130%;
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(211,211,211,1);
--Surface-Secondary:rgba(170,170,170,0.9);
--Title:var(--px20)/130% "App Typeface 1";

}
[data-palette="App Footer"] {
--Active-Primary:transparent;
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:#bb423e;
--Background-Secondary:transparent;
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Overlay"] {

}
[data-palette="Overlay Header"] {
--Background-Primary:linear-gradient(0deg, rgba(235,235,235,1)
0%,rgba(235,235,235,1) 1px,rgba(255,255,255,1) 1px,rgba(255,255,255,1)
100%);;
--Title:var(--px22)/130% "App Typeface 1";
--Title-Case:uppercase;

}
[data-palette="Editor"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:rgba(240,240,250,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px15) "App Typeface 3";
--Button:var(--px13) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:100px;
--Byline:var(--px13) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px12) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:0px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(0,0,0,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px11) "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Heading:var(--px22) "App Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:0px 0px 0px 1px rgba(0,0,0,0.1);
--Line-Spacing:170%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Very-Narrow:2px;
--Spacing-Very-Wide:20px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px12) "App Typeface 2";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px18) "App Typeface 1";
--Subtitle:var(--px17) "App Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(176,176,176,1);
--Title:var(--px20) "App Typeface 3";
--Title-Case:normal;
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="Editor Logo"] {
--Background-Primary:rgba(37,38,40,1);
--Background-Secondary:transparent;
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Editor Menu"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:rgba(240,240,250,1);
--Background-Primary:transparent;
--Background-Secondary:rgba(248,248,248,1);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(136,136,136,1);

}
[data-palette="Editor Banner"] {
--Active-Primary:rgba(88,88,88,1);
--Active-Secondary:rgba(236,236,236,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Header"] {
--Active-Primary:rgba(40,160,220,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Footer"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Popover"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(120,120,120,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Header-Primary:rgba(30,30,30,1);
--Header-Secondary:rgba(110,110,110,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(248,248,248,1);

}
[data-palette="Editor Popover Banner"] {
--Background-Primary:rgba(246,246,246,1);

}


@font-face {font-family:"App Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/4035399d606c6fe5b430f9a18889a363/Lato-Bold.ttf") format("truetype");}
@font-face {font-family:"App Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/9b24cccae80a98e96ad6f558a98478eb/Lato-Semibold.ttf") format("truetype");}
@font-face {font-family:"App Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/5d14391995929c6799688d83c870794a/Lato-Regular.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/4035399d606c6fe5b430f9a18889a363/Lato-Bold.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/9b24cccae80a98e96ad6f558a98478eb/Lato-Semibold.ttf") format("truetype");}
@font-face {font-family:"Editor Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/output/fonts/5d14391995929c6799688d83c870794a/Lato-Regular.ttf") format("truetype");}



.Product-D1 .Card {--Image-Size:200px; display:grid;
grid-template-areas:
". .           .           ."
". picture     picture     ."
". description description ."
". summary     summary     ."
". price       buy         ."
". actions     actions     ."
". content     content     ."
". .           .           ."
;  
  
  min-height:100%; grid-template-columns:var(--Page-Gutter) 8fr auto var(--Page-Gutter); 
    grid-template-rows:var(--Spacing-Wide) auto auto auto auto auto auto minmax(var(--Spacing-Wide), 1fr);}
.Product-D1 .Card:before {grid-area:1 / 1 / -1 / -1; display:block; background:var(--Background-Primary); content:"";}
.Product-D1 .Card > [data-field="Image"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; display:block; margin:0 0 var(--Spacing-Regular);}
.Product-D1 .Card > [data-field="Image"]:empty {display:none;}
.Product-D1 .Card > [data-field="Image"] img { width:99%; }
.Product-D1 .Card > [data-field="XVariants"] { grid-area:image; display:block;}


.Product-D1 .Card > [data-field="Short Description"] {grid-area:description; display:block; font:var(--Body); color:var(--Surface-Secondary);}
.Product-D1 .Card > [data-field="Price"] {grid-area:price; display:block; align-self:center; font:var(--Sub-Subheading); color:var(--Surface-Primary);}
.Product-D1 .Card > [data-field="Price"] *:before {content:"From ";}
.Product-D1 .Card > [data-field="Buy"] {grid-area:buy; display:block; align-self:end;}
.Product-D1 .Card > [data-field="Buy"] .Action {width:80px; grid-template-columns:minmax(var(--Action-Left-Padding),1fr) auto auto auto auto minmax(var(--Action-Right-Padding),1fr);}
.Product-D1 .Card > [data-collection="Actions"] {grid-area:actions; display:block; }
.Product-D1 .Card > [data-collection="Actions"] [data-name="Buy"] {display:none;}
.Product-D1 .Card > [data-field="Content"] {grid-area:content; display:block; font:var(--Body); color:var(--Surface-Secondary);}


body, .Tab-D1 {scroll-behavior: smooth;}

.Group-Type-Scrolling-Row > :not(.Paging) {
overflow-x: scroll;
scroll-behavior: smooth;
overflow-y: hidden;
justify-content: flex-start;
scroll-snap-type: x mandatory;
}

.Shop-Feed-Item {
	--shop-gutter:15px;
	margin:40px 0 0;
	display:grid;
	grid-template-columns:[gallery-start tabs-start] var(--shop-gutter) [name-start tags-start] auto [name-end tags-end location-start] auto [location-end ] var(--shop-gutter) [tabs-end gallery-end];
	
	grid-template-rows:[name-start] auto [name-end tags-start location-start] auto [location-end tags-end gallery-start] auto [gallery-end tabs-start] auto [tabs-end];	
}
.Shop-Feed-Item [data-field="Title"] {
	grid-area:name;
	font:bold 20px Helvetica Neue;
	color:var(--charcoal);
	padding:0 0 5px;
    display:block;
}
.Shop-Feed-Item > [data-field="Subtitle"] {
	grid-area:tags;
	font:normal 12px Helvetica Neue;
	color:var(--gray);
	padding:0 0 5px;
    display:block;
}
.Shop-Feed-Item > [data-field="Location"] {
	grid-area:location;
	font:normal 12px Helvetica Neue;
	color:var(--gray);
	padding:0 0 15px 50px;
	text-align:right;
    display:block;
}

.Shop-Feed-Item > [data-field="Featured Products"] {
    --Number-Of-Columns:1;
	--Column-Gap:0px;
	--Column-Crop:0;
	--Page-Gutter:0px;
	--Image-Aspect-Ratio:1/1;
	margin-bottom:var(--Gallery-Image-Spacing);
	grid-area:gallery;
  display:block;
}

.Shop-Feed-Item > [data-field="Featured Products Tabs"] {
	--Number-Of-Columns:3;
	--Column-Gap:var(--Gallery-Image-Spacing);
	--Column-Crop:0.7;
	--Page-Gutter:0px;
	--Image-Aspect-Ratio:3/2;
	grid-area:tabs;
  display:block;
}



/*
@Name: Article Extended 5
@Summary: No title subtitle or cover 
*/
.Article-E5 {display:grid; grid-template-columns:[content-start] auto [content-end]; grid-template-rows:[content-start] auto [content-end];}
.Article-E5 > [data-field="Content"] {grid-area: content; display:block; font: var(--Body); color: var(--Surface-Primary); background:#FEE; outline:1px dotted red;}


.Article-L2 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; 
grid-template-columns: [focus-start title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end picture-start] 1fr [picture-end focus-end]; 
grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; 
border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;
}
.Article-L2 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L2 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L2 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Summary"] p:last-child {padding-bottom: 0;}
.Product-Shop-Tab { display:block; }

.Product-Shop-Tab [data-field="Image"] { display:block; }

.Product-Shop-Tab [data-field="Image"] img {display:block; width:100%; height:100%; aspect-ratio:var(--Image-Aspect-Ratio); object-fit:cover;}






.Product-Shop-Feature {
	--item-gutter:15px;
	display:grid;
	grid-template-columns:[image-start content-start] var(--item-gutter) [title-start subtitle-start] 1fr [subtitle-end title-end add-start] auto [add-end] var(--item-gutter) [content-end image-end];
	grid-template-rows:[image-start] 1fr [content-start]  var(--item-gutter) [title-start add-start] auto [title-end  subtitle-start] auto [subtitle-end add-end] var(--item-gutter) [content-end image-end];
}
.Product-Shop-Feature:after {
	content:"";
	grid-area:content;
	background:linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	z-index:1;
}
.Product-Shop-Feature > [data-field="Title"] {
	grid-area:title;
	z-index:2;
	font:bold 18px Helvetica Neue;
	color:#FFFFFF;
	padding:0 0 5px;
  display:block;
}
.Product-Shop-Feature > [data-field="Subtitle"] {
	grid-area:subtitle;
	z-index:2;
	font:normal 14px Helvetica Neue;
	color:#FFFFFF;
  display:block;
}	
.Product-Shop-Feature > button {
	grid-area:add;
	z-index:2;
	background:var(--dark-purple);
	color:#FFFFFF;
	font:bold 14px Helvetica Neue;
	text-transform:uppercase;
	padding:0 25px;
	margin:3px 0;
	border-radius:1000px;
	min-height:45px;
	align-self:end;
}
.Product-Shop-Feature > [data-field="Image"] {
	grid-area:image;
	z-index:0;
  display:block;
}

.Product-Shop-Feature > [data-field="Image"] img {display:block; width:100%; height:100%; aspect-ratio:var(--Image-Aspect-Ratio); object-fit:cover;}

/*
@Name: Article Listing 1
@Summary: Image on left, title, subtitle and summary on right.
*/
.Article-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Article-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L1 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L1 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD */
.MD.Article-L1 {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Article-L1 > [data-field="Summary"] {font: var(--Body);}

/* SM */
.SM.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Article-L1 > [data-field="Summary"] {display: none;}

/* XS */
.XS.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Article-L1 > [data-field="Subtitle"] {display: none;}
.XS.Article-L1 > [data-field="Summary"] {display: none;}
/*
@Name: Article Detail 1
@Summary: Cover picture at top with Title and Subtitle overlayed on the cover. Rest of content below in a card.
*/
.Article-D1 > .Card {display:grid; grid-template-columns:[title-start subtitle-start card-start actions-start content-start related-start] auto [content-end actions-end card-end subtitle-end title-end related-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end related-start] auto [related-end] var(--Spacing-Wide) [card-end];}
.Article-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:-1; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Subtitle"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary);}
.Article-D1 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}

/* Actions */
.Article-D1 > .Card > [data-collection="Actions"] {grid-area: actions;}

/* Meta */
.Article-D1 > .Card > [data-field="Meta"] {grid-area: meta; padding: 0 var(--Page-Gutter);}
.Article-D1  > .Card >[data-field="Meta"] [data-field="Duration"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-D1 > .Card > [data-field="Meta"] [data-field="Updated"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); padding-right: var(--Spacing-Regular);}

/* Content */
.Article-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter);}
.Article-D1  > .Card > [data-field="Related"] {grid-area: related; display: block;}