[data-palette="App"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:rgba(48,28,117,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(255,255,255,1);
--Badge-Background:rgba(222,0,88,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(--px14) "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(255,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(--px14)/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:hue-rotate(20deg) brightness(150%);
--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.2;
--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(--px18) "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(100,100,100,1);
--Title:var(--px24) "App Typeface 1";
--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(11,11,11,1);
--Background-Primary:rgba(255,255,255,1);
--Footnote:var(--px14) "App Typeface 3";
--Highlight:rgba(255,255,255,1);
--Overlay:rgba(255,255,255,1);
--Page-Gutter:0;
--Surface-Primary:rgba(37,10,73,1);

}
[data-palette="App Header"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:transparent;
--Background-Primary:transparent;
--Background-Secondary:rgba(255,255,255,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(37,11,73,1);
--Surface-Secondary:rgba(170,170,170,0.9);
--Title:var(--px22) / 130% "App Typeface 1";

}
[data-palette="App Footer"] {
--Active-Primary:rgba(37,11,73,1);
--Active-Secondary:rgba(240,240,250,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(220,220,220,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(11,11,11,1);
--Surface-Secondary:rgba(145,145,145,1);

}
[data-palette="Overlay"] {
--Background-Primary:rgba(255,255,255,1);

}
[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/kijkato2-smfaqd/assets/knc2kf3m-6ydpx7/original") 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/kijkato2-smfaqd/assets/knc2kera-m1biw8/original") 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/kijkato2-smfaqd/assets/knc2kf3m-6ydpx7/original") format("truetype");}


.Product-Buy-Button {}
.Product-Buy-Button [data-field="Buy"] { display:block; }
.Product-Addon-L1 { display:flex; padding:5px; align-items:center; }
.Product-Addon-L1 > .Operator-Check { order:0; min-width:40px; max-width: 40px; padding:10px; }
.Product-Addon-L1 > [data-field="Title"] { flex:1; order:1; display:block;  }
.Product-Addon-L1 > [data-field="Price"] { flex:1; order:2; max-width:80px; display:block;}
.Product-Addon-L1 > [data-field="Price"] p {text-align: right;}
.Workflow-List-1 {
  display: grid; 
  grid-template-columns: auto minmax(100px, 1fr) 140px; 
  grid-template-rows: 23px; 
  gap: 0px 0px; 
  grid-template-areas: 
    "check title status" "check detail status";
  width:100%;
}
.Workflow-List-1 > .Operator-Check { grid-area: check; min-width:40px; max-width: 40px; padding:10px; }
.Workflow-List-1 [data-field="Workflow Title"] { 
  display:block; grid-area: title;  
font: var(--Body);
color: var(--Surface-Primary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Title"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}

.Workflow-List-1 [data-field="Workflow Detail"] { 
  display:block; grid-area: detail;  
font: var(--Caption);
color: var(--Surface-Secondary);
  padding:0px 2px;
}
.Workflow-List-1 [data-field="Workflow Detail"] p { 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;  
}

.Workflow-List-1 [data-field="Status"] { display:block; text-align:right; grid-area: status;
font: var(--Body);
color: var(--Surface-Primary);
}

.Workflow-List-1 [data-field="Status"] p { padding:10px; color:var(--Overlay-Primary); border-radius:5px; min-width:120px; text-align:center; background: var(--Option-Color,#777); }

.Workflow-List-1.Is-Current { 
background: var(--Active-Secondary);
box-shadow: 0px 0 0px 3px var(--Active-Secondary);
}
.PayOptions-F1 { display:flex; flex-direction: column; }
.PayOptions-F1 > * { display:block; margin:10px 10px 0px 10px; }
.PayOptions-F1 > [data-field="Title"] {display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.PayOptions-F1 > data[data-field] { display:block; }

/*** Card Payment Form ***/
.Pay-F1 { display:flex; flex-direction: column; }
.Pay-F1 [data-field="Card"] { display:block; }
/* Email as text */
.Pay-F1 data[data-field="Email"] { display:block; }
/* Email as input field */
.Pay-F1 div[data-field="Email"] { display:grid; }
.Pay-F1 [data-field="Confirm"] { display:block; }
.Pay-F1 [data-field="Resend"] { display:block; }

/* Purchase Variant Form */
.Purchase-F1 {display:grid; grid-gap:0; padding-top:var(--Spacing-Wide); grid-template-columns: [deliver-start] var(--Page-Gutter) [title-start variants-start addons-start quantity-start notes-start platform-pay-start confirm-start cancel-start pic-start desc-start] 1fr [pic-end desc-end cancel-end confirm-end platform-pay-end notes-end quantity-end variants-end addons-end title-end] var(--Page-Gutter) [deliver-end]; grid-template-rows:[title-start] auto [title-end pic-start] auto [pic-end desc-start] auto [desc-end deliver-start] auto [deliver-end variants-start] auto [variants-end addons-start] auto [addons-end quantity-start] auto [quantity-end notes-start] auto [notes-end platform-pay-start] auto [platform-pay-end confirm-start] auto [confirm-end cancel-start] auto [cancel-end] 1fr;}
.Purchase-F1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Purchase-F1 [data-field="Variants"] {grid-area: variants; padding-top:var(--Spacing-Narrow); display:block; font:var(--Body); color:var(--Surface-Primary);}
.Purchase-F1 [data-field="Addons"] {grid-area: addons; padding-top:var(--Spacing-Narrow); display:block; font:var(--Body); color:var(--Surface-Primary);}
.Purchase-F1 [data-field="Quantity"] {grid-area: quantity; display:block;}
.Purchase-F1 [data-field="Deliver"] {grid-area: deliver; display:block;}
.Purchase-F1 [data-field="Notes"] {grid-area: notes; display:grid; padding:var(--Spacing-Regular) 0;}
.Purchase-F1 [data-field="Platforms Pay"] {grid-area: platform-pay; display:block; }
.Purchase-F1 [data-field="Confirm"] {grid-area: confirm; display:block; padding-top:var(--Spacing-Wide);}
.Purchase-F1 [data-field="Cancel"] {grid-area: cancel; padding-top:var(--Spacing-Regular); display:block; }
.Purchase-F1 > [data-field="Pic"] {grid-area: pic; display:block;}
.Purchase-F1 > [data-field="Short Description"] {
  grid-area: desc; display:block;
  font: var(--Body);
  color: var(--Surface-Primary);
  padding-top:var(--Spacing-Wide);
  padding-bottom:var(--Spacing-Wide);
}

/*** Info Dialog Form ***/
.Info-F1 { display:flex; flex-direction: column; }
.Info-F1 [data-field="Title"] { display:block; }
.Info-F1 [data-field="Confirm"] { display:block; }


#App .richtext {-webkit-touch-callout: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;}


.Order-Item-L1 {
  font: var(--Body);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr;
  gap: var(--Spacing-Narrow) 0;
  grid-template-areas:
    "picture title qty"
    "picture subtitle price"
    "picture status .";
  padding:var(--Spacing-Regular) 0;
  border-bottom:var(--Divider-Narrow);
}
.Order-Item-L1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Sub-Subheading); }
.Order-Item-L1 [data-field="Variant Title"] { grid-area: subtitle; display: block; font: var(--Byline); }
.Order-Item-L1 [data-field="Picture"] {grid-area: picture; display: block; width:60px; --Picture-Aspect-Ratio:1/1; margin-right:var(--Spacing-Regular);}
.Order-Item-L1 [data-field="Picture"]:empty {display:none;}
.Order-Item-L1 [data-field="Status"] { grid-area: status; display: block; }
.Order-Item-L1 [data-field="Quantity"] { grid-area: qty; display: block; text-align:right; font:bold var(--Body);}
.Order-Item-L1 [data-field="Quantity"] p:before { content:'x '; }
.Order-Item-L1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Byline);}
.Product-Variant-F1 { 
  padding: 10px; 
  display:flex;
}

.Product-Variant-F1 > * { display:none; }

.Product-Variant-F1 > [data-field="Title"] { display:grid; flex:1;order:1;}

.Product-Variant-F1 > [data-field="Price"] { display:grid; flex:1; max-width:70px; order:2;}

.Product-Variant-F1 > [data-field="Picture"] { display:grid; max-width:120px; flex:1; order:0; padding-right:10px;}

.Product-Variant-F1 > .Operator-Menu { display:grid; order:3; }

.Product-Variant-F1 > .Import-Status { display:block; order:-1; flex:1; max-width:80px;}
.Shop-D3 .Card > [data-field="Orders"] { display:block; background:white; padding:10px 10px; }
.Shop-E3 > [data-field="Orders"] {display:block;}
/*
@Name: Shop Expanded with Action
*/
.Shop-E4 {display:grid; grid-template-columns: [picture-start] auto [picture-end title-start summary-start] 1fr [summary-end location-start] max-content [location-end title-end]; grid-template-rows:[picture-start title-start] 1fr [title-end summary-start location-start] 1fr [location-end summary-end picture-end]; grid-gap:0 var(--Spacing-Narrow);}
.Shop-E4 > [data-field="Title"] {grid-area:title; display:block; padding-top: var(--Spacing-Narrow); font:var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case); color: var(--Surface-Primary);}
.Shop-E4 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; --Image-Radius:1000px; grid-area:picture; display:block;}
.Shop-E4 > [data-field="Description"] {grid-area:summary; display:block; font:var(--Footnote); color: var(--Surface-Secondary);}
.Shop-E4 > [data-field="Distance"] {grid-area:location; display:block; font:var(--Footnote); color: var(--Surface-Secondary);}

.Shop-E4 > [data-field="Process Orders"] {grid-area:action; display:block;}


.Shop-E4 {grid-template-columns:[picture-start] 40px [picture-end title-start summary-start] 1fr [summary-end location-start] max-content [location-end title-end action-start] 70px [action-end]; grid-template-rows:[picture-start title-start action-start] auto [title-end picture-end summary-start location-start] 1fr [location-end summary-end] auto [action-end];}

.Shop-S1 { display: flex; flex-direction: row; font: var(--Body); color: var(--Surface-Primary); }
.Shop-S1 > [data-field="Picture"] { display: block; order: 0; border-radius:10px; max-width:30px; }
.Shop-S1 > [data-field="Title"] { display: block; order: 1; font:var(--Body); }
.Shop-S1 > [data-field="Description"] { display: block; order: 2; font:var(--Byline); }
.Shop-S1 > [data-field="Distance"] { display: block; order: 3; font:var(--Byline); }


.records-loader.has-more .loading-label {display:none;}
.records-loader.loading-more .more-label {display:none;}
.records-loader .loading-label {padding: 10px; text-align:center; color:#666; display:block;font-family: Helvetica, Arial;}
.records-loader .more-label {display: block;padding: 10px;background: #666;color: #fff;border-radius: 26px;font-family: Helvetica, Arial;}

.Action.Action-Shape-Switch > [data-field^="Label"],
.Action.Action-Shape-Switch.Is-Selected > [data-field^="Label"],
.Action.Action-Shape-None > [data-field^="Label"] ,
.Action.Action-Shape-None.Is-Selected > [data-field^="Label"] { color:var(--Surface-Primary); }
.Order-Item-E1 {
  font: var(--Body);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--Spacing-Narrow) 0;
  grid-template-areas:
    "picture title    qty   amend"
    "picture subtitle price amend"
    "picture addons   .     amend"
    "picture status   tax     amend"
    "picture usernote   .     amend"
    "picture shopnote .     amend";
  border-bottom:var(--Divider-Narrow);
}
.Order-Item-E1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Sub-Subheading); align-self:end;}
.Order-Item-E1 [data-field="Variant Title"] { grid-area: subtitle; display: block; font: var(--Byline); }
.Order-Item-E1 [data-field="Addon Titles"] { grid-area: addons; display: block; font: var(--Byline); }
.Order-Item-E1 [data-field="Addon Titles"] p:empty { display:none; }
.Order-Item-E1 [data-field="Addon Titles"] p:before { content:'Add: '; }
.Order-Item-E1 [data-field="Picture"] {grid-area: picture; display: block; width:50px; --Picture-Aspect-Ratio:1/1; margin-right:var(--Spacing-Regular); align-self:start;}
.Order-Item-E1 [data-field="Picture"]:empty {display:none;}
.Order-Item-E1 [data-field="Status"] { grid-area: status; display: block; }
.Order-Item-E1 [data-field="Quantity"] { grid-area: qty; display: block; text-align:right; font:bold var(--Body);}
.Order-Item-E1 [data-field="Quantity"] p:before { content:'x '; }

.Order-Item-E1 [data-field="Approved Quantity"] { grid-area: status; display: block; text-align:left; font:bold var(--Body);}
.Order-Item-E1 [data-field="Approved Quantity"] p:before { content:'Approved Quantity: '; }
.Order-Item-E1 [data-field="Approved Quantity"] p:empty { display:none; }

.Order-Item-E1 [data-field="Shop Adjusted Details"] { grid-area: shopnote; display: block; text-align:left; font:var(--Body);}
.Order-Item-E1 [data-field="Shop Adjusted Details"] p:before { content:'Shop Note: '; }
.Order-Item-E1 [data-field="Shop Adjusted Details"] p:empty { display:none; }

.Order-Item-E1 [data-field="Note"] { grid-area: usernote; display: block; text-align:left; font:var(--Body);}
.Order-Item-E1 [data-field="Note"] p:before { content:'Customer Note: '; }
.Order-Item-E1 [data-field="Note"] p:empty { display:none; }

.Order-Item-E1 [data-field="Tax"] { grid-area: tax; display: block; text-align:left; font:var(--Footnote);}
.Order-Item-E1 [data-field="Tax"] p:before { content:'Tax: '; }
.Order-Item-E1 [data-field="Tax"] p:empty { display:none; }


.Order-Item-E1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Byline);}
.Order-Item-E1 [data-field="Amend"] { grid-area: amend; display: flex; max-width:60px; justify-items:center; align-items:center; }
.Order-Item-E1 [data-field="Amend"] > div { margin-left:10px; max-width:60px; width: 60px; }
.Order-Item-E1 [data-field="Adjust"] { grid-area: amend; display: flex; max-width:60px; justify-items:center; align-items:center; }
.Order-Item-E1 [data-field="Adjust"] > div { margin-left:10px; max-width:60px; width: 60px; }
/*
@Name: Product Extended Listing 2
@Summary: Square picture post. Followed by title and description with right aligned buy button.
*/
.Product-E2 {
  display:grid;
  grid-template-areas:
  "picture picture"
  "title   title"
  "price   buy"
  ;  
  grid-template-columns:2fr max-content;
  grid-template-rows:auto auto 1fr; border-bottom: var(--Divider-Narrow);}
.Product-E2 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-self:start; justify-self:start;}
.XS.Product-E2 > [data-field="Title"] {font:bold  var(--Caption);}
.Product-E2 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E2 > [data-field="Price"] {grid-area:price; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E2 > [data-field="Price"] *:before {content:"From ";}
.Product-E2 > [data-field="Buy"] {grid-area:buy; display:block;} 
.Product-E2 > [data-field="Buy"] .Action {width:100%; height:100%; font:var(--Body);}
.Product-E2 > [data-field="Buy"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;} 
/*
@Name: Product Extended Listing 1
@Summary: Shop listing above square picture post. Followed by title and description with right aligned buy button.
*/
.Product-E1 {display:grid; grid-template-columns: [shop-start title-start picture-start description-start] 1fr [title-end buy-start] 120px [buy-end description-end picture-end title-end shop-end]; grid-template-rows:[shop-start] auto [shop-end picture-start] auto [picture-end title-start buy-start] 40px [buy-end title-end description-start] 1fr [description-end]; grid-gap: var(--Spacing-Regular) var(--Spacing-Narrow); border-bottom: var(--Divider-Narrow);}
.Product-E1 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-items:center;}
.Product-E1 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E1 > [data-field="Description"] {grid-area:description; display:block; font: var(--Footnote); color: var(--Surface-Secondary);}
.Product-E1 > [data-field="Shop"] {grid-area:shop; display:block;} 
.Product-E1 > [data-field="Buy"] {grid-area:buy; display:block;} 
.Product-E1 > [data-field="Buy"] .Action {width:100%; height:100%; font:var(--Body);}
.Product-E1 > [data-field="Buy"] .Action  > [data-field^="Label"] {font:var(--Body); text-transform:uppercase;} 

.iPhoneXS.Rotation-None .Clip-View {
    aspect-ratio: 9/16;
    width: 385px;
    height: 812px;
  }
  body {background:rgba(0,0,0,1)!important;}

  .narrow .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article > header{background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0) 100%);}



  #App .Action {--On-Backdrop-Primary: var(--Overlay-Primary); --On-Backdrop-Accent: var(--Overlay-Primary); --On-Surface-Primary: var(--Overlay-Primary); --On-Surface-Primary-Selected: var(--Overlay-Primary); }

  #App #Navigation .Action [data-field^="Label"] { background:var(--Active-Primary); padding:0 var(--Spacing-Regular); border-radius:1000px; margin-top:2px;}
  #App #Navigation .Action [data-field="Label Selected"] {background:var(--Active-Secondary);}

  section.post.Tab-D1[data-xfeature="clips"] {
      scroll-behavior: smooth;
      scroll-snap-points-y: repeat(100vh);
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling:touch;
      -ms-overflow-style: none;
      scrollbar-width: none;
      padding: 5vh 0;
  }
  .narrow section.post.Tab-D1[data-xfeature="clips"] {
      padding: 0;
  }

  section.post.Tab-D1[data-xfeature="clips"]::-webkit-scrollbar {
    display: none;
  }

  main .Tab-D1 > .Card:before {border-radius:0; background:transparent;}

  .Clip-View {
    display:grid;
    grid-template-columns: 1fr [video-start title-start price-start logo-start] 65px [logo-end subtitle-start] minmax(250px,350px) [subtitle-end title-end share-start mute-start buy-start] 60px [buy-end mute-end share-end] var(--Spacing-Wide) [video-end] 1fr;
    grid-template-rows:[video-start mute-start ] 1fr [mute-end share-start] auto [logo-start subtitle-start] auto [logo-end subtitle-end share-end] auto [title-start buy-start] auto [title-end price-start ] auto [buy-end price-end] 10px [video-end];

    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
    margin:5vh 0;
    height: 80dvh;
   }

  .narrow .Clip-View {
    display:grid;
    grid-template-columns:[video-start title-start price-start logo-start] 65px [logo-end subtitle-start] 1fr [subtitle-end title-end share-start mute-start buy-start] 60px [buy-end mute-end share-end] var(--Spacing-Wide) [video-end];
    grid-template-rows:[video-start mute-start ] 1fr [mute-end share-start] auto [logo-start subtitle-start] auto [logo-end subtitle-end share-end] auto [title-start buy-start] auto [title-end price-start ] auto [buy-end price-end] 10px [video-end];
    height:100dvh;
    margin:0;
  }
  .narrow .Clip-View:first-child {margin:0;}

  .Clip-View [data-field="Title"] {
    grid-area:title;
    display:block;
    color: var(--Overlay-Primary);
    font:var(--Sub-Subheading);
    font-weight:bold;
    align-self:center;
    padding:var(--Spacing-Narrow) var(--Spacing-Wide);
  }
  .Clip-View [data-field="Subtitle"] {
    grid-area:subtitle;
    display:block;
    color: var(--Overlay-Primary);
    font:var(--Body);
    padding:0 var(--Spacing-Wide) 0 0;
    align-self:center;
  }

  .Clip-View [data-field="Pricing"] {
    grid-area:price;
    display:block;
    color: var(--Overlay-Secondary);
    font:var(--Caption);
    padding:0 var(--Spacing-Wide) var(--Spacing-Wide);
    align-self:start;
  }

  .Clip-View [data-field="Buy"] {
    grid-area:buy;
    display:block;
    align-self:start;
  }

  /* Buttons */
  .Clip-View .Mute-Action {
    grid-area:mute;
    display:block;
    align-self:end;
  }

  .Clip-View .Share-Action {
    grid-area:share;
    display:block;
    margin:var(--Spacing-Narrow) 0 0;
  }

  .Clip-View .Mute-Action .Action, .Clip-View .Share-Action .Action, .Clip-View [data-field="Buy"] .Action {
    --Icon-Width: 50px;
    --Glyph-Scale: 0.7;
    --On-Backdrop-Accent:rgba(255,255,255,1);
    --On-Surface-Primary:rgba(255,255,255,1);
    --Backdrop:rgba(48,28,117,0.4);
  }
  .Clip-View [data-field="Buy"] .Action {
    --Backdrop:linear-gradient(to bottom, rgba(221,0,87,1) 0%, rgba(246,86,146,1) 100% );
    margin-left:1px;
  }
  .Clip-View .Share-Action .Action {
  --Glyph-Scale: 0.5;
  }

  .Clip-View .Mute-Action .Action:after, .Clip-View .Share-Action .Action:after, .Clip-View [data-field="Buy"] .Action:after {
   outline:3px solid rgba(255,255,255,0.4);
  }


  .Clip-View .Logo, .Clip-View [data-field="Shop"] {
    grid-area:logo;
    border-radius:1000px;
    outline:3px solid rgba(255,255,255,0.4);
    display:block;
    background:#000;
    position: relative;
    margin:0 var(--Spacing-Regular) 0 var(--Spacing-Wide);
    aspect-ratio:1 / 1;
  }
  .Clip-View [data-field="Shop"] > div,
  .Clip-View [data-field="Shop"] > div > div,
  .Clip-View [data-field="Shop"] > div > div > div,
  .Clip-View [data-field="Shop"] > div > div > div > data
  {
     height: 100%;
  }

  .Clip-View .clip-video {
    grid-area:video;
    display:grid;
    position: relative;
    z-index:0;
    grid-template-columns:[video-start] 1fr [video-end];
    grid-template-rows:[video-start] 1fr [video-end];
    box-shadow:0 10px 20px 0px rgba(0, 0, 0, 0.5);
    border-radius:30px;
    overflow:hidden;
    width:100%;
    max-height: 80vh;
    margin: 0 auto;
    background:rgba(48,28,117,1);
  }
  .narrow .Clip-View .clip-video {
    box-shadow:none;
    border-radius:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    max-height: initial;
  }


  .Clip-View .clip-video:before {
    content:'';
    grid-area:video;
    position:absolute;
    display: block;
    width:100%;
    height:100%;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%);
    z-index:2;
    border-radius:30px;
    box-shadow:inset 0px 0px 0px 3px rgba(255,255,255,0.5);
  }
  .narrow .Clip-View .clip-video:before {
    border-radius:0;
    box-shadow:none;
  }

  .Clip-View .clip-video:after {
    content:'...';
    grid-area:video;
    position:absolute;
    display: block;
    z-index:0;
    justify-self:center;
    align-self:center;
    font:var(--Title);
    font-size:80px;
    width:80px;
    text-align:center;
    margin:0 auto;
    color:rgba(255,255,255,0.7);
    animation: scale-fade-in 0.75s linear infinite alternate;
  }

  .Clip-View .clip-video video {
    grid-area:video;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
    position:relative;
    z-index:1;
  }

  .Clip-View .clip-video img {
    grid-area:video;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }


  /* --------------------------------- Template Makeke ------------------------------ */
  /*
  @Name: Template Makeke
  */

  .Template-Makeke {display:grid; grid-area:template; width:100%; height:100%; --Max-Content-Width:750px;}
  .Template-Makeke {--Page-Gutter:20px;}


  /* Hide Content When Rendering */
  .Template-Makeke > * {--Scale-Position:1; animation:scale-fade-in var(--Slow) ease var(--Quick) 1 normal both running;}


  .Template-Makeke {--Header-Height:80px; --Logo-Width:var(--Header-Height);  --Logo-Height:var(--Header-Height); --Nav-Width:calc(80px + var(--Inset-Left)); --Nav-Width-Inset:var(--Nav-Width); --Nav-Height:100%; --Nav-Height-Inset:0px; --Nav-Background-Angle:-90deg; --Search-Icon-Width:40px; --Profile-Icon-Width:calc(35px + var(--Page-Gutter)); --Action-Line-Inside:var(--Action-Line-Right); --Action-Line-Outside:var(--Action-Line-Left); --Action-Line-Width:var(--Button-Line-Thickness); --Action-Line-Inside-Justify:end;  --Action-Line-Outside-Justify:start;}
  .Landscape-L .Template-Makeke, .Landscape-R .Template-Makeke {--Header-Height:50px;}
  .Template-Makeke {position:relative;
      grid-template-columns:[logo-start banner-start navigation-start main-start topnav-start] auto [logo-end] 1fr [topnav-end search-start] var(--Search-Icon-Width) [search-end profile-start] var(--Profile-Icon-Width) [profile-end main-end navigation-end banner-end];
      grid-template-rows:[banner-start navigation-start logo-start search-start profile-start main-start topnav-start] var(--Header-Height) [logo-end search-end profile-end banner-end topnav-end] 1fr [navigation-end main-end];
  }

  .Template-Makeke #Navigation {--Background-Primary:transparent; padding-top:var(--Inset-Top); width:100%; height:100%; }

  .Template-Makeke #Navigation .Action {opacity:0;}
  .wide.Template-Makeke #Navigation .Action {opacity:1;}

  .Template-Makeke #Navigation > div, .Template-Makeke #Navigation > div > ul, .Template-Makeke #Navigation > div > ul > li.Action {--Icon-Width: 50px; --Glyph-Scale: 0.8; padding:0; width:100%; height:100%; grid-template-columns:1fr minmax(auto,var(--Max-Content-Width)) 1fr; grid-template-rows: var(--Spacing-Wide) 50px 1fr;
  grid-template-areas:
  ". .    ."
  ". icon ."
  ". .    .";
  }
  .Template-Makeke #Navigation > div > ul > .Action > [data-field^="Icon"] {justify-self:start; align-items:center;}
  .Template-Makeke #Navigation > div > ul > .Action > [data-field^="Label"] {display:none;}

  /* --- Base Layout ---  */
  .Template-Makeke nav {grid-area:navigation; position:relative; z-index:1;}
  .Template-Makeke main {grid-area:main;}
  .Template-Makeke #Logo {

    grid-area:logo;
    z-index:4;
    padding:var(--Inset-Top) var(--Spacing-Regular) 0 calc( var(--Inset-Left) + var(--Spacing-Regular) );
    pointer-events:none;
    width:170px;
  }
  .Template-Makeke #Logo-Button [data-field="Icon Logo"] {--Glyph-Scale: 1;}

  .narrow.Template-Makeke #Logo {width:var(--Header-Height);}
  .narrow.Template-Makeke #Logo-Button [data-field="Icon Logo"] {--Glyph-Scale: 1;}

  /* --- Heading Nav Buttons ---  */
  .Template-Makeke #Heading-Nav {
    grid-area:topnav;
    z-index:4;
    pointer-events:none;
    height:var(--Nav-Height);
    margin-top: var(--Inset-Top);
  }

  .narrow .Template-Makeke #Heading-Nav {
    height:auto;
    margin-top: var(--Inset-Top);
  }


  .iPhoneXS #Heading-Nav > .Group-Type-Fit {margin-top: 0px; width:auto;}
  #Heading-Nav > .Group-Type-Fit ul {justify-content: end; padding-right:var(--Spacing-Narrow);}
  .Template-Makeke #Heading-Nav .Action {width:50px;}

  #Heading-Nav .Action {
    --Icon-Width: 50px;
    --Glyph-Scale: 0.7;
    pointer-events:auto;
  }

  #Profile-Button {
    position:relative;
    top:2px;
    --Icon-Width: 40px;
    --Glyph-Scale: 0.9;
  }

  /* --- Notifications ---  */
  .Template-Makeke .Notifications {grid-area: main; z-index: 4; align-self: start; margin: var(--Header-Height) var(--Spacing-Narrow) 0;}

  /* ------------------------------ Arrangement-Makeke ------------------------------ */
  /*
  @Name: Arrangement-Makeke
  @Summary: Vertical cards which push in from bottom to top in a stack.
  */

  /* Setup */
  .Arrangement-Makeke {--Page-Transition-Speed:var(--Quick); --Panel-Shadow:0px 5px 20px rgba(0,0,0,0.4), 0px 5px 5px rgba(0,0,0,0.6); --Panel-Radius:25px; z-index:1; pointer-events: none; transition-delay:calc( var(--Page-Transition-Speed) * 0.5 ); overflow:hidden; width:100%; height:100%;max-height:100vh; display: flex; justify-content: center;}
  .Arrangement-Makeke.Stack-Active {z-index:3;}
  .Arrangement-Makeke.Stack-Active article {pointer-events: auto;}

  .Arrangement-Makeke > article {--Cover-Height:200px; --Card-One-Indent:0px; --Card-Two-Indent:15px; position:absolute; top:var(--Header-Height); width:100%; height:calc( 100% -  var(--Header-Height,0px) ); z-index:0; display: grid; grid-template-columns:[panel-start header-start section-start footer-start cover-start] 1fr [cover-end footer-end section-end header-end panel-end]; grid-template-rows:[header-start] var(--Card-Offset,0px) [panel-start] var(--Header-Height) [header-end section-start cover-start] 1fr [section-end footer-start] auto [footer-end cover-end panel-end]; pointer-events:none; transition-duration: var(--Page-Transition-Speed); transition-property: opacity,transform; max-width:var(--Max-Content-Width);}
  .Arrangement-Makeke > article:before {content:""; grid-area:panel; background:var(--Background-Primary); box-shadow: var(--Panel-Shadow); border-radius:var(--Panel-Radius);}
  .Arrangement-Makeke > article.Layer-Root {grid-template-rows:[header-start] var(--Card-Offset,0px) [panel-start] calc( var(--Nav-Height-Inset,0px) + var(--Header-Height,0px) ) [header-end section-start cover-start] 1fr [section-end footer-start] auto [cover-end footer-end panel-end];}

  /* Card Offset */
  .Arrangement-Makeke > article {--Card-Offset:0px;}
  .Arrangement-Makeke > article.Layer-Root.Layer-Lvl2 + article.Layer-Lvl1,
  .Arrangement-Makeke > article.Layer-Lvl2,
  .Arrangement-Makeke > article:not(.Layer-Current).Layer-Root.Layer-Lvl1,
  .Arrangement-Makeke > article.Layer-Lvl1.Layer-Root + article.Layer-Lvl1 {--Card-Offset:calc( var(--Nav-Height-Inset) + var(--Card-One-Indent) );}
  .Arrangement-Makeke > article.Layer-Lvl1 {--Card-Offset:calc( var(--Nav-Height-Inset) + var(--Card-Two-Indent) );}
  .Arrangement-Makeke > article.Layer-Root {--Card-Offset:0px;}
  .Arrangement-Makeke > article:not(.Layer-Lvl1):not(.Layer-Lvl2):not(.Layer-Lvl3) {opacity:0!important;}
  .Arrangement-Makeke > article:not(.Layer-Lvl1):not(.Layer-Lvl2) > header {opacity:0;}

  /* Turn on pointer events for all Lvl1 Current Articles */
  .Arrangement-Makeke > article[class*="Layer-Lvl"].Layer-Current {pointer-events: auto;}

  /* ----- Internal Elements ----- */

  /* Cover */
  .Arrangement-Makeke article > [data-field="Cover"] {grid-area:cover; pointer-events:none; display: block; z-index:0; background: var(--Cover-Background);}
  .Arrangement-Makeke article > [data-field="Cover"] img {height:var(--Cover-Height); width:calc( 100% + var(--Page-Gutter) ); margin-left:calc( var(--Page-Gutter) * -0.5 );}
  .Arrangement-Makeke article > [data-field="Cover"]:after {z-index:1; height:var(--Cover-Height); visibility: visible; background:var(--Cover-Overlay);}
  .Arrangement-Makeke article > [data-field="Cover"]:empty {--Cover-Height:0px; display:none;}
  .Arrangement-Makeke article > [data-field="Cover"]:empty + section > .Card {--Cover-Height:0px;}


  /* Header */
  .Arrangement-Makeke article > header {grid-area:header; display:grid; z-index:2; font:var(--Title); text-transform:var(--Title-Case); color:var(--Surface-Primary); grid-template-columns:[button-start] auto [button-end title-start] auto [title-end] 1fr; grid-template-rows:[button-start] var(--Card-Offset,0px) [title-start] 1fr [title-end button-end]; align-items: center;}
  .Arrangement-Makeke > article > header > :not(.Action) {grid-area: title; z-index:1; display:flex; align-items: center; border-radius:var(--Panel-Radius) var(--Panel-Radius) 0 0;  height: var(--Header-Height); background:var(--Background-Primary); padding:var(--Inset-Top) var(--Page-Gutter) 0 var(--Page-Gutter); padding-right:calc(var(--Search-Icon-Width) + var(--Profile-Icon-Width) - var(--Page-Gutter)); outline-style:none; -moz-outline-style: none; /*! white-space:nowrap; */ overflow:hidden; text-overflow:ellipsis; -webkit-box-orient: vertical;}
  .Arrangement-Makeke > article > header > :not(.Action)::-moz-focus-inner {border:0;}

  /* Header Button */
  .Arrangement-Makeke > article > header .Action {margin-left:var(--Spacing-Regular); --Icon-Width: 50px;
  --Glyph-Scale: 0.7; grid-area:button; z-index:1; grid-template-columns:1fr [focus-start highlight-start icon-start] auto [icon-end highlight-end focus-end]; grid-template-rows:var(--Nav-Height-Inset) [focus-start highlight-start icon-start] auto [icon-end highlight-end focus-end];}
  .Arrangement-Makeke > article > header .Action [data-field="Icon Close"] svg {transform:scale( var(--Glyph-Scale) ); opacity:1;}
  .Arrangement-Makeke > article > header .Action [data-field="Icon Back"] svg {transform:scale( calc(var(--Glyph-Scale) * 0.25) );  opacity:0;}

  /* Section */
  .Arrangement-Makeke > article > section {grid-area:section; width:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch;}

  /* Footer */
  .Arrangement-Makeke article > footer {grid-area:footer; z-index:2; background: var(--Background-Secondary); border-radius: 0 0 var(--Panel-Radius) var(--Panel-Radius);}

  /* ----- Stack Animation States ----- */

  /* Initialise Out */
  .Arrangement-Makeke:not(.Stack-Active) > article {--Vertical-Position:50px; animation:vertical-fade-out calc( var(--Page-Transition-Speed) * 0.5 ) ease 0s 1 normal both running;}
  .Arrangement-Makeke:not(.Stack-Active) > article > header > .Action {--Scale-Position:0.25; animation:scale-fade-out calc( var(--Page-Transition-Speed) * 0.5 ) ease 0s 1 normal both running;}
  .Arrangement-Makeke:not(.Stack-Active) > article > [data-field="Cover"] {--Vertical-Position:25px; animation:vertical-fade-out calc( var(--Page-Transition-Speed) * 0.5 ) ease 0s 1 normal both running!important;}
  /* Initialise In */
  .Arrangement-Makeke.Stack-Init.Stack-Active > article {--Vertical-Position:50px; animation:vertical-fade-in calc( var(--Page-Transition-Speed) * 0.5 ) ease calc( var(--Page-Transition-Speed) * 0.5 ) 1 normal both running;}
  .Arrangement-Makeke.Stack-Init.Stack-Active > article > header > .Action {--Scale-Position:0.25; animation:scale-fade-in calc( var(--Page-Transition-Speed) * 0.5 ) ease calc( var(--Page-Transition-Speed) * 0.5 ) 1 normal both running;}
  .Arrangement-Makeke.Stack-Init.Stack-Active > article > [data-field="Cover"] {--Vertical-Position:25px; animation:vertical-fade-in calc( var(--Page-Transition-Speed) * 0.5 ) ease calc( var(--Page-Transition-Speed) * 0.5 ) 1 normal both running;}

  /* Push In */
  .Arrangement-Makeke.Stack-Push.Stack-Animating > article.Layer-Lvl1.Layer-Current {--Vertical-Position:75px; --Fade-Opacity:0; animation:vertical-fade-in var(--Page-Transition-Speed) ease-out 0s 1 normal both running;}
  .Arrangement-Makeke.Stack-Push.Stack-Animating > article.Layer-Root ~ article.Layer-Lvl3.Layer-Current,
  .Arrangement-Makeke.Stack-Push.Stack-Animating > article:not(.Layer-Lvl3).Layer-Root ~ article.Layer-Lvl2.Layer-Current {--Vertical-Position:75px; --Fade-Opacity:1; animation:vertical-fade-in var(--Page-Transition-Speed) ease-out 0s 1 normal both running;}

  /* Pop Out */
  .Arrangement-Makeke.Stack-Pop.Stack-Animating > article:not(.Layer-Current).Layer-Lvl1 {--Vertical-Position:75px; animation:vertical-fade-out var(--Page-Transition-Speed) ease-out 0s 1 normal both running;}
  .Arrangement-Makeke.Stack-Pop.Stack-Animating > article.Layer-Root ~ article.Layer-Lvl2.Layer-Current,
  .Arrangement-Makeke.Stack-Pop.Stack-Animating > article:not(.Layer-Lvl2).Layer-Root ~ article.Layer-Lvl1.Layer-Current {--Vertical-Position:-75px; --Fade-Opacity:1; animation:vertical-fade-in var(--Page-Transition-Speed) ease-out 0s 1 normal both running;}
  .Arrangement-Makeke.Stack-Pop.Stack-Animating > article.Layer-Lvl1.Layer-Root + article.Layer-Lvl1 {--Vertical-Position:75px!important;}

  /* Explore Card */
  .Arrangement-Makeke[data-top-article-palette="ExploreTab"] {z-index:0;}
  .Arrangement-Makeke[data-top-article-palette="ExploreTab"].Stack-Active {z-index:2;}
  .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article {height:100%;}

  .narrow .Arrangement-Makeke article, .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article {left:0; margin:0; max-width:100%;}

  .Arrangement-Makeke:not(.Stack-Active) {filter: blur(10px) brightness(90%);}

  .narrow .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article:before {background:rgba(0,0,0,1);}
  .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article {top:0;}

  /* Turn off animated slide in for Explore tab */
  .Arrangement-Makeke[data-top-article-palette="ExploreTab"]:not(.Stack-Active) > article, .Arrangement-Makeke.Stack-Init.Stack-Active[data-top-article-palette="ExploreTab"] > article {animation:none;}

  .Arrangement-Makeke[data-top-article-palette="ExploreTab"]  > article.Layer-Root {grid-template-rows:[panel-start section-start cover-start header-start] var(--Card-Offset,0px) calc( var(--Nav-Height-Inset,0px) + var(--Header-Height,0px) ) [header-end] 1fr [section-end footer-start] auto [cover-end footer-end panel-end];}

  .narrow .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article > header {background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
  .narrow .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article > header p {opacity:0;}

  .Arrangement-Makeke[data-top-article-palette="ExploreTab"] article header p {visibility:hidden;}

  /* Tab D1 Card Override */
  section.Tab-D1 > .Card {grid-template-rows: [title-start] auto [title-end subtitle-start] auto [subtitle-end card-start body-start] max-content [body-end] var(--Spacing-Wide) [card-end]}

  /* Action Override */
  .Action.Action-Shape-Circle > [data-field^="Label"] {
    color: var(--Surface-Primary);
  }

  .Arrangement-Makeke[data-top-article-palette="ExploreTab"] .Action.Action-Shape-Circle > [data-field^="Label"] {
    color: var(--On-Surface-Primary);
  }


  /* Modification to Shop-L1 */
  /*
  .Shop-L1 > [data-field="Picture"] {aspect-ratio:var(--Picture-Aspect-Ratio);}
  */

.Tab-D1 {}
.Tab-D1 > .Card > [data-field="Title"] { display:none; x-note:'This is from Tab-D1 Schema layout CSS.'; }
.Tab-D1 > .Card > [data-field="Subtitle"] { display:none; x-note:'This is from Tab-D1 Schema layout CSS.'; }
/*
@Name: Product Extended Listing 3
@Summary: Shop row listing, with Text layout. Title and description with right aligned buy button.
*/
.Product-E3 {display:grid;
grid-template-areas:
  'title buy'
  'price buy';
  
  
  grid-template-columns:1fr auto; grid-template-rows:auto 1fr; border-top: var(--Divider-Narrow); padding-top:var(--Spacing-Narrow)}
.Product-E3 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Sub-Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary); align-self:start; justify-self:start;}
.Product-E3 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:block;}
.Product-E3 > [data-field="Price"] {grid-area:price; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E3 > [data-field="Price"] *:before {content:"From ";}
.Product-E3 > [data-field="Buy"] {grid-area:buy; display:block; width:30px;} 

.Product-L1 {display: flex; flex-direction: column; font: var(--Body); color: var(--Surface-Primary); padding:10px; }
.Product-L1 > [data-field="Title"] { display: block; order: 1; font:var(--Heading); }
.Product-L1 > [data-field="Picture"] { display: block; order: 3; border-radius:10px; }
.Product-L1 > [data-field="Description"] { display: block; order: 4; font:var(--Byline); margin-top:10px; }
.Product-L1 > [data-field="Shop"] { display: block; order: 0;}

/*
@Name: Product Extended Listing 4
@Summary: Shop row listing, with Text layout. Title and description with right aligned buy button.
*/
.Product-E4 {display:grid; --Focus-Margin:0px;
grid-template-areas:
"title       buy"
"description buy";
grid-template-columns:1fr auto; grid-template-rows:auto 1fr; border-top: var(--Divider-Narrow); padding-top:var(--Spacing-Narrow)}
.Product-E4 > [data-field="Title"] {grid-area: title; display:flex; font: var(--Sub-Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Product-E4 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; align-self: flex-start; display:none;}
.Product-E4 > [data-field="Short Description"] {grid-area:description; display:block; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E4 > [data-field="Price"] {grid-area:price; display:none; font:var(--Caption); color:var(--Surface-Secondary); align-self:center;}
.Product-E4 > [data-field="Price"] *:before {content:"From ";}
.Product-E4 > [data-field="Buy"] {grid-area:buy; display:block; width:30px;} 

/*
@Name: Shop Listing 1
@Summary: Small Avatar on left followed by title. Location on right.
*/
.Shop-L1 {display:grid; grid-template-columns: [picture-start] auto [picture-end title-start summary-start] 1fr [summary-end location-start] max-content [location-end title-end]; grid-template-rows:[picture-start title-start] 1fr [title-end summary-start location-start] 1fr [location-end summary-end picture-end]; grid-gap:0 var(--Spacing-Narrow);}
.Shop-L1 > [data-field="Title"] {grid-area:title; display:block; padding-top: var(--Spacing-Narrow); font:var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case); color: var(--Surface-Primary);}
.Shop-L1 > [data-field="Picture"] {--Picture-Aspect-Ratio:1/1; --Image-Radius:1000px; grid-area:picture; display:block; aspect-ratio:var(--Picture-Aspect-Ratio);}
.Shop-L1 > [data-field="Description"] {grid-area:summary; display:block; font:var(--Footnote); color: var(--Surface-Secondary);}
.Shop-L1 > [data-field="Distance"] {grid-area:location; display:block; font:var(--Footnote); color: var(--Surface-Secondary);}

/* SM */
.SM.Shop-L1 {grid-template-columns: [title-start summary-start location-start] 1fr [picture-start] 8fr [picture-end] 1fr [location-end summary-end title-end];
grid-template-rows: [picture-start] auto [picture-end title-start] auto [title-end summary-start] auto [summary-end location-start] 1fr [location-end];
grid-gap: var(--Spacing-Narrow) var(--Spacing-Narrow);}


/* MD */
.MD.Shop-L1 {grid-template-columns:[picture-start] 40px [picture-end title-start summary-start] 1fr [summary-end location-start] max-content [location-end title-end]; grid-template-rows:[picture-start title-start] auto [title-end summary-start location-start] 1fr [location-end summary-end picture-end];}
#Template .Arrangement-1 > article {--Cover-Height: 120px;}

.Shop-D1 .Card {--Avatar-Size:100px; display:grid; min-height:100%; grid-template-columns:[card-start products-start related-start] var(--Page-Gutter) [avatar-start actions-start] var(--Avatar-Size) [avatar-end] var(--Spacing-Regular) [description-start address-start] 1fr [address-end description-end actions-end distance-end] var(--Page-Gutter) [products-end related-end card-end]; grid-template-rows:calc( var(--Cover-Height) - ( var(--Avatar-Size) * 0.5 ) ) [avatar-start  description-start] calc( var(--Avatar-Size) * 0.5 ) [ description-end card-start address-start] calc( var(--Avatar-Size) * 0.5 ) [address-end avatar-end] var(--Spacing-Regular) [address-start distance-start] auto [distance-end address-end  actions-start] auto [actions-end related-start] auto [related-end products-start] minmax(50vh,1fr) [products-end] var(--Spacing-Wide) [card-end];}
.Shop-D1 .Card:before {grid-area:card; display:block; background:var(--Background-Primary); content:"";}
.Shop-D1 .Card > [data-field="Title"] { }
.Shop-D1 .Card > [data-field="Picture"] {grid-area:avatar; display:block; border-radius:1000px;}
.Shop-D1 .Card > [data-collection="Actions"] { grid-area:actions; display:block; }
.Shop-D1 .Card > [data-field="Description"] {grid-area:description; display:block; align-self:end; padding: 0 0 var(--Spacing-Narrow); font:var(--Sub-Subheading); color:var(--Overlay-Primary);}
.Shop-D1 .Card > [data-field="Address"] {grid-area:address; display:block; padding:var(--Spacing-Regular) 0 0; font:var(--Caption); color:var(--Surface-Secondary);}
/*
.Shop-D1 .Card > [data-field="Distance"] {grid-area:distance; padding:var(--Spacing-Regular) 0 0 0; font:var(--Caption); color:var(--Surface-Secondary); display:block;}
Related Shops
*/
.Shop-D1 .Card > [data-field="Related Shops"] {grid-area:related;display:block;}
.Shop-D1 .Card > [data-field="Products"] {grid-area:products; display:grid; align-content: start;}
.Shop-D1 .Card [data-name="View Shop"] { display:none; }
.Order-E2 {
  display:grid;
  grid-template-columns:[time-start] 80px [time-end delivery-start id-start variants-start notes-start] auto [delivery-end status-start] 1fr [status-end variants-end notes-end id-end actions-start] 180px [actions-end];
  grid-template-rows:[time-start delivery-start status-start actions-start] auto [delivery-end status-end variants-start] auto [variants-end id-start] 1fr [id-end time-end actions-end notes-start] auto [notes-end];
  grid-gap:0 var(--Spacing-Regular);
}

.Order-E2 > [data-field="_ID"] {
  grid-area:id;
  display:block;
  font:var(--Footnote);
  color:var(--Surface-Secondary);
}
.Order-E2 > [data-field="_ID"] p:before {
  content:"Order #";
}

.Order-E2 > [data-field="Subtotal"] {grid-area:status; display:block; font:var(--Caption); color:var(--Surface-Primary); align-self:right;}
.Order-E2 > [data-field="Subtotal"] p:before {content:"Total: ";}

.Order-E2 > [data-field="Created On"] {grid-area:time; display:block; color:var(--Surface-Primary);}
.Order-E2 > [data-field="Created On"] time {display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;}
.Order-E2 > [data-field="Created On"] time span {display:none;}
{data-format-h-mm-a}
.Order-E2 > [data-field="Created On"] time [data-subset="Time"]:before {font:var(--Body); content:attr(data-format-h-mm-a);}
.Order-E2 > [data-field="Created On"] time [data-subset="Day"]:before {font:var(--Footnote); color:var(--Surface-Secondary); content:attr(data-format-ddd); margin-right:var(--Spacing-Narrow);}
.Order-E2 > [data-field="Created On"] time [data-subset="Day Of Month"]:before {font:var(--Footnote); color:var(--Surface-Secondary); content:attr(data-format-do);}

.Order-E2 > [data-field="Status"] {
  grid-area:status;
  align-self:center;
  justify-self:start;
  display:inline-block;
  font:var(--Caption);
  color:var(--Surface-Primary);
  background:var(--Background-Secondary);
  padding:1px var(--Spacing-Regular) 2px;
  border-radius:1000px;
}


.Order-E2 > [data-field="Delivery Notes"] {
  grid-area:delivery;
  display:block;
  font:var(--Sub-Subheading);
  color:var(--Surface-Primary);
}

.Order-E2 > [data-field="Items"] { 
  grid-area:variants;
  display:block;
}

.Order-E2 > [data-field="Subtotal"] { display:none; color:var(--Surface-Primary);}
.Order-E2 > [data-field="Subtotal"] p:before { content:"Total: "; }

.Order-E2 > [data-collection="Actions"] {
  grid-area:actions;
  justify-self:start;
  align-self:start;
  display:block;
}
.Order-E2 > [data-collection="Actions"] .Action {max-width:70px;}

.SM.Order-E2 {
  grid-template-columns:[time-start] 80px [time-end actions-start delivery-start id-start variants-start notes-start] auto [delivery-end status-start] 1fr [status-end variants-end id-end actions-end notes-end];
  grid-template-rows:[time-start delivery-start status-start] auto [delivery-end status-end variants-start] auto [variants-end id-start] auto [id-end time-end notes-start] auto [notes-end actions-start] 1fr [actions-end];
  grid-gap:0 var(--Spacing-Regular);
}
.SM.Order-E2 > [data-collection="Actions"] .Action {max-width:auto; width:120px;}

.Order-E2 > [data-collection="Actions"] [data-name="Edit"] { display: none; }
.Order-E2 > [data-collection="Actions"] [data-name="Print Order"] { display: none; }

.Order-E2 > [data-field="Notes"] { 
  grid-area:notes;
  display:block;
  font: var(--Footnote);
}
.Order-E2 > [data-field="Notes"] p:empty { 
  display:none;
}
.Order-E2 > [data-field="Notes"] p:before { 
  content:"Customer Notes: ";
  color: var(--Surface-Secondary);
  font-weight:bold;
}
.Order-E2 > [data-field="Notes"] p {
  text-overflow: ellipsis;
  word-wrap: anywhere;
  overflow: hidden;
  max-height: 80px;
}

.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="Picture"] {--Picture-Aspect-Ratio:1/1; grid-area:picture; display:block; margin:0 0 var(--Spacing-Regular);}
.Product-D1 .Card > [data-field="Picture"]:empty {display:none;}
.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-collection="Actions"] [data-name="Open"] {display:none;}
.Product-D1 .Card > [data-field="Content"] {grid-area:content; display:block; font:var(--Body); color:var(--Surface-Secondary);}


.Profile-Clips [data-field="My Area"] { display:block; }
.Product-Open-Button {}
.Product-Open-Button [data-field="Open"] { display:block; width: 50px; }
.Shop-S2 { display: flex; flex-direction: row; font: var(--Body); color: var(--Surface-Primary); }
.Shop-S2 > [data-field="Picture"] { display: block; order: 3; border-radius:10px; max-width:30px; }
.Shop-S2 > [data-field="Title"] { display: block; order: 2; font:var(--Body); }
.Shop-S2 > [data-field="Description"] { display: block; order: 1; font:var(--Byline); }
.Shop-S2 > [data-field="Distance"] { display: block; order: 0; font:var(--Byline); }


.ProductTest-L1 { display: flex; flex-direction: column; ont: var(--Body); color: var(--Surface-Primary); padding:10px; }
.ta-field="Title"] { display: block;
  order: 1; font:var(--Heading); }
.ProductTest-L1 > [data-field="Picture"] { display: block;
  order: 3; border-radius:10px; }
.ProductTest-L1 > [data-field="Description"] { 
  display: block;
  order: 4; font:var(--Byline); margin-top:10px; }
.ProductTest-L1 > [data-field="Shop"] { display: block;
  order: 0; }


.Shop-Just-Picture [data-field="Picture"] {
  display:block;
  overflow:hidden;
  border-radius: 50px;
}


.Order-Item-S1 {
  display: grid;
  grid-template-columns:[quantity-start] 30px [quantity-end title-start] auto [title-end variant-start] auto [variant-end addons-start] 1fr [addons-end price-start] 80px [price-end];
  grid-template-rows:[quantity-start title-start variant-start price-start addons-start] auto [price-end variant-end title-end quantity-end addons-end];
  grid-gap:var(--Spacing-Regular) var(--Spacing-Regular);
}
.Order-Item-S1 [data-field="Picture"] { display: none; }
.Order-Item-S1 [data-field="Product Title"] { grid-area: title; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Variant Title"] { grid-area: variant; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Addon Titles"] { grid-area: addons; display: block; font: var(--Caption);}
.Order-Item-S1 [data-field="Status"] { grid-area: status; display: block; font:var(--Footnote); background:var(--Background-Secondary); border-radius:1000px; padding:1px var(--Spacing-Narrow);}
.Order-Item-S1 [data-field="Quantity"] { grid-area: quantity; display: flex; flex-flow:row nowrap; justify-content:space-between; font:var(--Caption); font-weight:bold;}
.Order-Item-S1 [data-field="Quantity"]:after {content:"x"; font-weight:normal;}
.Order-Item-S1 [data-field="Subtotal"] { grid-area: price; display: block; text-align:right; font:var(--Caption);}
.ProductVariant-L1 { display:flex; padding:5px; align-items:center; }
.ProductVariant-L1 > .Operator-Check { order:0; min-width:40px; max-width: 40px; padding:10px; }
.ProductVariant-L1 > [data-field="Title"] { flex:1; order:1; display:block;  }
.ProductVariant-L1 > [data-field="Price"] { flex:1; order:2; max-width:80px; display:block;}
.ProductVariant-L1 > [data-field="Price"] p {text-align: right;}
.Order-D1 { font:var(--Body); }
.Order-D1 .Card > data { margin:var(--Spacing-Narrow) var(--Spacing-Regular); }

#App .Order-D1, #App .Order-D1 *, #App .Order-D1 .Card, #App .Order-D1 .Card > data, #App .Order-D1 .Card > data * , #App .Order-D1 .Card > data p , #App .Order-D1 .Card > data p * {-webkit-touch-callout: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

.Order-D1 .Card [data-field="Items"] { display:block; }
.Order-D1 .Card [data-field="Status"] { display:block; }
.Order-D1 .Card [data-field="Status"] p:before { content:"Status: "; color:#888; }
.Order-D1 .Card [data-collection="Actions"] { display:block; }
.Order-D1 .Card [data-collection="Actions"] [data-name="Problem"] { display:none; }
.Order-D1 .Card [data-collection="Actions"] [data-name="Edit"] { display: none; }

.Order-D1 .Card > [data-field="_ID"] { display:block; }
.Order-D1 .Card > [data-field="_ID"] p:before { content:"ID #"; }
.Order-D1 .Card > [data-field="Ticket"] { display:block; }
.Order-D1 .Card > [data-field="Ticket"] p:before { content:"Order "; }
.Order-D1 .Card > [data-field="Ticket"] p { font-weight:bold; }
.Order-D1 .Card > [data-field="Created On"] { display:block;  }
.Order-D1 .Card > [data-field="Delivery Notes"] { display:block; color:#888; order:5;}
.Order-D1 .Card > [data-field="Delivery Notes"] p:before { content:"For: "; color:#333; }
.Order-D1 .Card > [data-field="Delivery Variant"] { display:block; color:#888; order:5;}
.Order-D1 .Card > [data-field="Delivery Variant"] p:before { content:"Delivery Type: "; color:#333; }
.Order-D1 .Card > [data-field="Delivery Variant"] p:empty { display:none; }

.Order-D1 .Card > [data-field="Itemstotal"] { display:block; color:#888; order:10; }
.Order-D1 .Card > [data-field="Itemstotal"] p:before { content:"Subtotal (items): "; color:#888; }

.Order-D1 .Card > [data-field="Subtotal"] { display:block; color:#888; order:11; }
.Order-D1 .Card > [data-field="Subtotal"] p:before { content:"Subtotal (items + delivery): "; color:#888; }
.Order-D1 .Card > [data-field="Customer Fee"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Customer Fee"] p:before { content:"Customer Fee: "; color:#888; }
.Order-D1 .Card > [data-field="Total Chargable"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Total Chargable"] p:before { content:"Total: "; color:#888; }
.Order-D1 .Card > [data-field="Discount Amount"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Discount Amount"] p:before { content:"Discount: "; color:#888; }


.Order-D1 .Card > [data-field="Delivery Fee"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Delivery Fee"] p:before { content:"Delivery Fee: "; color:#888; }
.Order-D1 .Card > [data-field="Delivery Fee"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Delivery Address"] { display:block; color:#888; order:9; }
.Order-D1 .Card > [data-field="Delivery Address"] p:before { content:"Delivery Address: "; color:#888; display:block; }
.Order-D1 .Card > [data-field="Delivery Address"] p:empty { display:none; }



.Order-D1 .Card > [data-field="Refund Request Details"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Refund Request Details"] p:before { content:"Refund Request Details: "; color:#888; }
.Order-D1 .Card > [data-field="Refund Request Details"] p:empty { display:none; }

.Order-D1 .Card > [data-field="Shop Cancel Reason"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Reason"] p:before { content:"Order Unavailable Reason: "; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Reason"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Shop Cancel Details"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Details"] p:before { content:"Order Unavailable Details: "; color:#888; }
.Order-D1 .Card > [data-field="Shop Cancel Details"] p:empty { display:none; }


.Order-D1 .Card > [data-field="Cash Accepted"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Cash Accepted"] p:before { content:"Cash Accepted: "; color:#888; }
.Order-D1 .Card > [data-field="Cash Accepted"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Cash Overpaid"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Cash Overpaid"] p:before { content:"Cash Overpaid: "; color:#888; }
.Order-D1 .Card > [data-field="Cash Overpaid"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Cash Returned"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Cash Returned"] p:before { content:"Cash Returned: "; color:#888; }
.Order-D1 .Card > [data-field="Cash Returned"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Notes"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Notes"] p:before { content:"Customer Notes: "; color:#888; font-weight:bold; }
.Order-D1 .Card > [data-field="Notes"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Estimated Delivery Date"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Estimated Delivery Date"] p:before { content:"Estimated Delivery Date: "; color:#888; font-weight:bold; }
.Order-D1 .Card > [data-field="Estimated Delivery Date"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Tracking Number"] { display:block; color:#888; }
.Order-D1 .Card > [data-field="Tracking Number"] p:before { content:"Tracking Number: "; color:#888; font-weight:bold; }
.Order-D1 .Card > [data-field="Tracking Number"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Customer Email"] { display:block; color:#666; }
.Order-D1 .Card > [data-field="Customer Email"] p:before { content:"Customer Email: "; color:#888; }
.Order-D1 .Card > [data-field="Customer Email"] p:empty { display:none; }
.Order-D1 .Card > [data-field="Customer Phone"] { display:block; color:#666; }
.Order-D1 .Card > [data-field="Customer Phone"] p:before { content:"Customer Phone: "; color:#888; }
.Order-D1 .Card > [data-field="Customer Phone"] p:empty { display:none; }

.Order-L1 { display: flex; }
.Order-L1 > [data-field="_ID"] { display: block; order: 1; font:var(--Byline); flex: 1; }
.Order-L1 > [data-field="_ID"]:before { content:'Order #'; color:#888; }
.Order-L1 > [data-field="Created On"] { display: block; order: 3; font:var(--Byline); margin:5px; }
.Order-L1 > [data-field="Status"] { display: block; order: 4; font:var(--Byline); margin:5px; background:#666; color: #fff; padding:5px; min-width:80px; text-align:center; }

.Product-Variant-E1 > * { display:block; }
/* --- --- */
.Order-E1 {
	display:grid;
	grid-template-areas:
    "shop        shop       "
    "ticket      status     "
	"deliver     time       "
    "order-items order-items"
	"id          total      "
	".           fee        "
	".           discount   "
	".           chargable  "
    "actions     actions    ";
	border-bottom:var(--Divider-Narrow);
}

/* --- Order ID --- */
.Order-E1 > [data-field="_ID"] {
	grid-area:id;
	display:block;
	font:var(--Caption);
	color:var(--Surface-Secondary);
}
.Order-E1 > [data-field="_ID"] p:before {
	content:"Order ID: ";
	font-weight:bold;
}

/* --- Ticket Number --- */
.Order-E1 > [data-field="Ticket"] {
  grid-area:ticket;
  display:block;
  font:var(--Subheading);
  color:var(--Surface-Primary);
  font-weight:normal;
}
.Order-E1 > [data-field="Ticket"] p:before {
	content:"Order: ";
}
.Order-E1 > [data-field="Ticket"] p:empty {
	display:none;
}

/* --- Time --- */
/* TODO: Add last updated status time + add mins ago */
.Order-E1 > [data-field="Created On"] {
	grid-area:time;
	display:block;
	font:var(--Caption);
	text-align:right;
	color:var(--Surface-Secondary);
}

/* --- Shop --- */
.Order-E1 > [data-field="Shop"] {
	grid-area:shop;
	display:block;
}

/* --- Status --- */
.Order-E1 > [data-field="Status"] {
	grid-area:status;
  	display:inline-block;
	align-self:start;
	justify-self:end;
	color:var(--Overlay-Primary);
	font:var(--Caption);
	text-transform:capitalize;
	background:var(--Status-Color);
	border-radius:4px;
	min-width:90px;
	padding:0 var(--Spacing-Narrow);
	text-align:center;
	line-height:18px;
}

/* === STATUS COLORS - Move To Theme === */
:root {
--Status-Red:rgb(208,53,19);
--Status-Orange:rgb(233,113,12);
--Status-Yellow:rgb(240,173,2);
--Status-Green:rgb(44,160,11);
--Status-Turquoise:rgb(37,196,184);
--Status-Blue:rgb(27,141,195);
--Status-Purple:rgb(160,11,136);
--Status-Gray:rgb(175,175,175);
}
/* === STATUS States - Move To CSS === */
[data-values-status="placed"] {
  --Status-Color:var(--Status-Blue);
}
[data-values-status="cash required"] {
  --Status-Color:var(--Status-Blue);
}
[data-values-status="confirmed"] {
  --Status-Color:var(--Status-Orange);
}
[data-values-status="unavailable"] {
  --Status-Color:var(--Status-Red);
}
[data-values-status="cancelled"] {
  --Status-Color:var(--Status-Red);
}
[data-values-status="collected"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="delivered"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="cash returned"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="served"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="refund requested"] {
  --Status-Color:var(--Status-Blue);
}
[data-values-status="refund processed"] {
  --Status-Color:var(--Status-Green);
}
[data-values-status="refund cancelled"] {
  --Status-Color:var(--Status-Orange);
}
/* --- Deliver To --- */
.Order-E1 > [data-field="Delivery Notes"] {
	grid-area:deliver;
  	display:block;
	font:var(--Body);
	color:var(--Surface-Primary);
}
.Order-E1 > [data-field="Delivery Notes"] p:before { content:"For: ";}
.Order-E1 > [data-field="Delivery Notes"] p:empty {  display:none; }


/* --- Order Items --- */
.Order-E1 > [data-field="Items"] {
	grid-area:order-items;
	display:block;
}

/* --- Total --- */
.Order-E1 > [data-field="Subtotal"] {
	grid-area:total;
	align-self:end;
	display:block;
	font:var(--Body);
	font-weight:bold;
	color:var(--Surface-Primary);
	text-align:right;
}
.Order-E1 > [data-field="Subtotal"] p:before { content:"Subtotal: ";}

.Order-E1 > [data-field="Customer Fee"] {
	grid-area:fee;
	align-self:end;
	display:block;
	font:var(--Caption);
	font-weight:bold;
	color:var(--Surface-Primary);
	text-align:right;
}
.Order-E1 > [data-field="Customer Fee"] p:before { content:"Fee: ";}
.Order-E1 > [data-field="Customer Fee"] p:empty {display:none;}

.Order-E1 > [data-field="Discount Amount"] {
	grid-area:discount;
	align-self:end;
	display:block;
	font:var(--Caption);
	font-weight:bold;
	color:var(--Surface-Primary);
	text-align:right;
}
.Order-E1 > [data-field="Discount Amount"] p:before { content:"Discount: ";}
.Order-E1 > [data-field="Discount Amount"] p:empty {display:none;}

.Order-E1 > [data-field="Total Chargable"] {
	grid-area:chargable;
	align-self:end;
	display:block;
	font:var(--Caption);
	font-weight:bold;
	color:var(--Surface-Primary);
	text-align:right;
}
.Order-E1 > [data-field="Total Chargable"] p:before { content:"Total: ";}
.Order-E1 > [data-field="Total Chargable"] p:empty {display:none;}

/* --- Actions --- */
.Order-E1 > [data-collection="Actions"] {
	grid-area:actions;
	display:block; 
}
.Order-E1 > [data-collection="Actions"] [data-name="Edit"] { display: none; }
.Order-E1 > [data-collection="Actions"] [data-name="Print Order"] { display: none; }



.Area-Clips {
display:block;
}
.Area-Clips [data-field="Clips"] {
display:block;
}