Merge pull request #2114 from Automattic/add/seedlet

Adding Seedlet 1.0

seedlet/404.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * The template for displaying 404 pages (not found)
+ *
+ * @link https://codex.wordpress.org/Creating_an_Error_404_Page
+ *
+ * @package WordPress
+ * @subpackage Seedlet
+ * @since 1.0.0
+ */
+
+get_header();
+?>
+
+	<section id="primary" class="content-area">
+		<main id="main" class="site-main default-max-width">
+
+			<div class="error-404 not-found">
+				<header class="page-header">
+					<h1 class="page-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'seedlet' ); ?></h1>
+				</header><!-- .page-header -->
+
+				<div class="page-content">
+					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'seedlet' ); ?></p>
+					<?php get_search_form(); ?>
+				</div><!-- .page-content -->
+			</div><!-- .error-404 -->
+
+		</main><!-- #main -->
+	</section><!-- #primary -->
+
+<?php
+get_footer();

seedlet/LICENSE

@@ -0,0 +1,339 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc., <http://fsf.org/>
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    {description}
+    Copyright (C) {year}  {fullname}
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  {signature of Ty Coon}, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

seedlet/README.md

@@ -0,0 +1,136 @@
+# Seedlet
+
+Seedlet is a parent-theme with a built-in styling system for quickly creating Gutenberg-ready child-themes for WordPress. 
+
+## What does it do?
+
+When you reduce a theme design down to a set of systematic design decisions, you end up with something called a _Style Guide_. The Seedlet system works by taking the rules of a Style Guide and expressing them through carefully placed variables or _design tokens_ that influence the appearance of a WordPress site. This unifies the design decisions needed to style the aesthetic appearance of Gutenberg Blocks, the theme Header + Footer areas, WooCommerce, Jetpack and more. It also syncs styles between the editor and the frontend so that you don’t need to hand-write CSS for both. This greatly speeds up the Gutenberg theme development process and reduces the amount of manual styling that typically goes into developing a theme. 
+
+### What controls does the system come with?
+
+- **Fonts** - Font-family, size, weight, and line-height rules. 
+- **Colors** - Primary, secondary, background, foreground and border colors. 
+- **Spacing** - A default 8px vertical rhythm between all blocks and major components. It also includes utility spacing classes for negative margins.
+- **Responsive Logic** - Built-in responsive behavior across Blocks and Components.
+
+## How does it work?
+
+The system itself lives in the `/seedlet/sass` directory as a collection of Sass partials broken up by scope and hierarchy. The partials get compiled down to singular CSS files that live in the main Seedlet directory and cascade downward like so:
+
+**Frontend** 
+- `/seedlet/variables.css`
+- `/seedlet/style.css`
+
+**Editor** 
+- `/seedlet/variables-editor.css`
+- `/seedlet/style-editor.css`
+
+In each view, the variables are loaded first and then the stylesheet is loaded which applies the variables.
+
+## Quick start guide
+
+1. Clone / download this repository into the `wp-content/themes` directory of your WordPress site.
+2. `cd` into the `wp-content/themes/seedlet` directory and run `npm install`.
+3. Next, run `npm build child-theme` and go through the prompts. This will create a fresh Seedlet-based child-theme using the name you chose in the prompts (*The build tool is a work in progress. Follow the manual directions below to complete this step).
+4. Visit the WordPress admin, access the Themes page and activate the new child-theme. 
+5. Then, visit the frontend of your site and to see how it looks by default.
+6. Next, open `child-theme/variables.css` in a text editor, change one or more of the variables, save the file and then refresh the front end of your site to see how it affects the design. 
+7. Continue to add and/or remove variables based on the [full list of available variables in Seedlet](https://github.com/Automattic/themes-workspace/blob/add/variatheme/seedlet/variables.css).
+8. Once you’re variables are all set you can continue development like you would with any child-theme using `child-theme/style.css` to add any extra CSS you might need to accomplish a design. 
+
+#### Create a child-theme manually (*optional)
+
+To use the system, simply duplicate the `seedlet-child` theme directory and rename it `my-theme-name`. You’ll also want to do a search for `seedlet-child` strings and replace them with `my-theme-name` as follows:
+
+- Search for: `'seedlet-child'` and replace with: `'my-theme-name'` (with quotes).
+- Search for: `seedlet_child_` and replace with: `my_theme_name_`.
+- Search for: `Text Domain: seedlet-child` and replace with: `Text Domain: my-theme-name` in _style.css_.
+- Search for:  `seedlet-child` and replace with: `my_theme_name`.
+- Search for: `seedlet-child-` and replace with: `my-theme-name-`.
+
+(Soon this process will be replaced by a `theme-dev-util` that allows you to run a command and automatically produce a child theme with all the strings already replaced.)
+
+## Simple child-theme structure
+(See: `/seedlet-child`)
+
+Use this simple Seedlet child-theme example to familiarize yourself with the CSS-variables and to see how they influence the theme design when you change them. To start, open up the `/seedlet-child-simple/variables.css` file. Change any of the values, save the file, and refresh the frontend of your site to see the changes. To add more variables, view the [full list of available variables](https://github.com/Automattic/themes-workspace/blob/add/variatheme/seedlet/variables.css) from the Seedlet parent them and copy any variables you want in to your child theme. 
+The stylesheet structure for a child-theme cascades downward like this:
+
+### Frontend
+- `/seedlet/variables.css`
+- `/seedlet-child-simple/variables.css` (System overrides)
+- `/seedlet/style.css`
+- `/seedlet-child-simple/style.css` (Extra CSS)
+
+### Editor
+- `/seedlet/variables-editor.css`
+- `/seedlet-child-simple/variables-editor.css` (System overrides)
+- `/seedlet/style-editor.css`
+- `/seedlet-child-simple/style-editor.css` (Extra CSS)
+
+### System overrides
+
+A list of CSS-variables that override the variables in the child theme. This is where you tell the system to use the _Futura_ font-family instead of the _sans-serif_ default, for example. There’s no need to replace all of the variables here, only the ones you wish to actually change based on your theme design.
+
+**Seedlet parent theme font style** (`/seedlet/variables.css`)
+
+`:root { --global--font-family: sans-serif; }`
+
+**Seedlet child-theme font-style overrides** (`/seedlet-child/variables.css`)
+
+`:root { --global--font-family: "Futura", "Helvetica", sans-serif; }`
+
+### Extra CSS
+
+These should be supplemental styles that give the theme a unique appearance beyond what’s included with the Seedlet system defaults. Need to add a fixed header or add a box-shadow to your theme’s buttons? This is where those styles would go. When possible and appropriate, try to use Seedlet CSS-variables in this stylesheet so that the system retains its usefulness across the theme.
+
+## Advanced child-theme structure 
+(See: `/seedlet-child-advanced`)
+
+The Seedlet Child Advanced theme is an example of what a theme in production might look like using the Seedlet system. It primarily relies on CSS-variables like the simple version but it also takes advantage of other child theming techniques. 
+
+- A custom header and footer design by replacing the `header.php` and `footer.php` template parts.
+- Some examples of custom block styles which will likely be common in many Seedlet-based child-themes.
+- A customizer option that allows customers to choose a `header-image`.
+- Some example _Extra CSS_ in the `style.scss` file.
+- Introduces an example for how to change the responsive content widths (more on this in the next section).
+
+## Responsive content widths
+
+Usually, breakpoints are set based on common viewport sizes like mobile (320px), tablet (1024px), etc, but Seedlet takes a different approach. To understand how this approach effects the structure of the site, it’s best to think of the content-width variables as both breakpoints _and_ content-widths. When you choose a content-width based on your design, the related breakpoint will also change to make that layout possible and responsive. Responsive styles work around the specs of the design which is both less fragile and more flexible. 
+
+Check out this Codepen for a lo-fi example: [https://codepen.io/allancole/pen/zYGNWBJ](https://codepen.io/allancole/pen/zYGNWBJ) (make sure to resize the screen to see the effect in action). Notice how the actual content-width of the site jumps down a size when the viewport reaches a breakpoint. 
+
+Customizing the responsive content-width of a Seedlet Child Theme is also just as simple as changing a few variables. However, we can’t use CSS-variables directly in `@media` queries ([see here](https://www.w3.org/TR/css-variables-1/#using-variables)). Instead, Seedlet child-themes come with a `responsive.scss` file that overwrites _only_ the responsive styles of the Seedlet parent theme when compiled. 
+
+Here are the available variables for changing content widths in `responsive.scss`. 
+
+| Screensize        | Breakpoint Variable | Default Size | Description                                                                                                                                                                                            |
+|-------------------|---------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **Mobile & down** | `$flexwidth`        | 100%         | On small screens the max width is always set to 100% to maximize screen real estate.                                                                                                                   |
+| **Mobile & up**   | `$breakpoint_sm`    | 560px        | This can be any integer as long as it’s smaller than `$breakpoint_md`.                                                                                                                                 |
+| **Tablet & up**   | `$breakpoint_md`    | 640px        | This can be any integer as long as it’s smaller than `$breakpoint_lg` and larger than `$breakpoint_md`.                                                                                                |
+| **Laptop & up**   | `$breakpoint_lg`    | 750px        | **Important!**. This variable should always match the `$content_width` PHP variable set in `functions.php`. This number must be larger than `$breakpoint_md` and smaller than `$breakpoint_xl`. |
+| **Desktop & up**  | `$breakpoint_xl`    | 1024px       | This can be any integer as long as it’s smaller than `$breakpoint_xxl` and larger than `$breakpoint_lg`.                                                                                               |
+| **Wide & up**     | `$breakpoint_xxl`   | 1280px       | This can be any integer as long as it’s larger than `$breakpoint_xl`.                                                                                                                                  |
+
+Once you’ve set these variables to your liking in `/seedlet-child-advanced/responsive.scss`, run `npm run build` on the child-theme which will recompile `responsive.scss` and reset the CSS-variables for content-width in `responsive.css`.
+
+## To-Dos
+- [DONE] Explore responsive-logic overrides in the child theme.
+- [DONE] Introduce an advanced child theme example that uses block styles
+- [DONE] Audit how variables appear in the editor, the customizer, and the frontend.
+- Audit Seedlet system for excessive overridden rules
+- Integrate with the child-theme build tool.
+- Add Jetpack support?
+- Optimize responsive font-size styles.
+- Consider adding default fallbacks to top-level css-variables.
+- Create a demo.
+- Add a CSS-Variables polyfill or other fallback solution for older browsers.
+- [WIP] Create a ReadMe that describes how to use it.
+
+### License
+
+GNU General Public License v2 or later
+
+URI: LICENSE

seedlet/archive.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * The template for displaying archive pages
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package WordPress
+ * @subpackage Seedlet
+ * @since 1.0.0
+ */
+
+get_header();
+?>
+
+	<section id="primary" class="content-area">
+		<main id="main" class="site-main">
+
+		<?php if ( have_posts() ) : ?>
+
+			<header class="page-header default-max-width">
+				<?php
+					the_archive_title( '<h1 class="page-title">', '</h1>' );
+				?>
+			</header><!-- .page-header -->
+
+			<?php
+			// Start the Loop.
+			while ( have_posts() ) :
+				the_post();
+
+				/*
+				 * Include the Post-Format-specific template for the content.
+				 * If you want to override this in a child theme, then include a file
+				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
+				 */
+				get_template_part( 'template-parts/content/content-excerpt' );
+
+				// End the loop.
+			endwhile;
+
+			// Previous/next page navigation.
+			seedlet_the_posts_navigation();
+
+			// If no content, include the "No posts found" template.
+		else :
+			get_template_part( 'template-parts/content/content-none' );
+
+		endif;
+		?>
+		</main><!-- #main -->
+	</section><!-- #primary -->
+
+<?php
+get_footer();

seedlet/assets/css/print.css

@@ -0,0 +1,163 @@
+/*
+Theme Name: Varia
+
+Adding print support. The print styles are based on the the great work of
+Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
+*/
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Margins
+# Typography
+# Page breaks
+# Links
+# Visibility
+--------------------------------------------------------------*/
+@media print {
+	/* Margins */
+	@page {
+		margin: 2cm;
+	}
+	.entry {
+		margin-top: 1em;
+	}
+	.entry .entry-header, .site-footer .site-info {
+		margin: 0;
+	}
+	/* Fonts */
+	body {
+		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif);
+		line-height: 1.3;
+		background: #fff !important;
+		color: #000;
+	}
+	h1 {
+		font-size: 24pt;
+	}
+	h2,
+	h3,
+	h4,
+	.has-regular-font-size,
+	.has-large-font-size,
+	h2.author-title,
+	p.author-bio,
+	.comments-title, h3 {
+		font-size: 14pt;
+		margin-top: 25px;
+	}
+	/* Page breaks */
+	a {
+		page-break-inside: avoid;
+	}
+	blockquote {
+		page-break-inside: avoid;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		page-break-after: avoid;
+		page-break-inside: avoid;
+	}
+	img {
+		page-break-inside: avoid;
+		page-break-after: avoid;
+	}
+	table, pre {
+		page-break-inside: avoid;
+	}
+	ul, ol, dl {
+		page-break-before: avoid;
+	}
+	/* Links */
+	a:link, a:visited, a {
+		background: transparent;
+		font-weight: bold;
+		text-decoration: underline;
+		text-align: left;
+	}
+	a {
+		page-break-inside: avoid;
+	}
+	a[href^=http]:after {
+		content: " < " attr(href) "> ";
+	}
+	a:after > img {
+		content: "";
+	}
+	article a[href^="#"]:after {
+		content: "";
+	}
+	a:not(:local-link):after {
+		content: " < " attr(href) "> ";
+	}
+	/* Visibility */
+	.primary-navigation,
+	.site-title + .primary-navigation,
+	.social-navigation,
+	.site-branding-container:before,
+	.entry .entry-title:before,
+	.entry-footer,
+	.author-description:before,
+	.post-navigation,
+	.widget-area,
+	.comment-form-flex,
+	.comment-reply,
+	.comment .comment-metadata .edit-link {
+		display: none;
+	}
+	.entry .entry-content .wp-block-button .wp-block-button__link,
+	.entry .entry-content .button {
+		color: #000;
+		background: none;
+	}
+	/* Site Header (With Featured Image) */
+	.site-header.featured-image {
+		min-height: 0;
+	}
+	.site-header.featured-image .primary-navigation a,
+	.site-header.featured-image .primary-navigation a + svg,
+	.site-header.featured-image .social-navigation a,
+	.site-header.featured-image .site-title a,
+	.site-header.featured-image .site-featured-image a,
+	.site-header.featured-image .site-branding .site-title,
+	.site-header.featured-image .site-branding .site-description,
+	.site-header.featured-image .primary-navigation a:after,
+	.site-header.featured-image .primary-navigation .menu-wrapper > li.menu-item-has-children:after,
+	.site-header.featured-image .primary-navigation li,
+	.site-header.featured-image .social-navigation li,
+	.site-header.featured-image .entry-meta,
+	.site-header.featured-image .entry-title,
+	.site-header.featured-image#masthead .site-title a {
+		color: #000;
+		text-shadow: none;
+	}
+	.site-header.featured-image .site-featured-image .entry-header,
+	.site-header.featured-image .site-branding-container {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	.site-header.featured-image .site-featured-image .post-thumbnail img {
+		position: relative;
+		height: initial;
+		width: initial;
+		object-fit: none;
+		min-width: 0;
+		min-height: 0;
+		max-width: 100%;
+		margin-top: 1rem;
+	}
+	/* Remove image filters from featured image */
+	.image-filters-enabled *:after {
+		display: none !important;
+	}
+	.image-filters-enabled .site-header.featured-image .site-featured-image:before {
+		display: none;
+	}
+	.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
+		filter: none;
+	}
+}

seedlet/assets/css/style-editor-customizer.css

@@ -0,0 +1,3 @@
+/**
+ * These styles are generated by the Customizer and only loaded when a custom color scheme is active.
+ */

seedlet/assets/css/style-editor.css

@@ -0,0 +1,1526 @@
+/**
+ * These styles should be loaded by the Block Editor only
+ */
+/**
+ * Repsonsive Styles
+ */
+/**
+ * Required Variables
+ */
+/**
+ * Root Media Query Variables
+ */
+:root {
+	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
+	--responsive--aligndefault-width: 100%;
+	--responsive--alignwide-width: 100%;
+	--responsive--alignfull-width: 100%;
+	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
+	--responsive--alignright-margin: var(--global--spacing-horizontal);
+	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+}
+
+@media only screen and (min-width: 482px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 652px) {
+	:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 822px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+/**
+ * Extends
+ */
+.default-max-width {
+	max-width: var(--responsive--aligndefault-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wide-max-width {
+	max-width: var(--responsive--alignwide-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media only screen and (min-width: 482px) {
+	.full-max-width {
+		max-width: var(--responsive--alignfull-width);
+		width: auto;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+/**
+ * Output
+ */
+body {
+	--wp--typography--line-height: var(--global--line-height-body);
+	color: var(--global--color-foreground);
+	background-color: var(--global--color-background);
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-root);
+	font-weight: normal;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+.editor-post-title__block {
+	font-size: var(--global--font-size-root);
+}
+
+a {
+	border-bottom: 1px solid var(--global--color-secondary);
+	color: var(--global--color-primary);
+	text-decoration: none;
+}
+
+a:hover {
+	color: var(--global--color-primary-hover);
+}
+
+button,
+a {
+	cursor: pointer;
+}
+
+/**
+ * Elements
+ * - Styles for basic HTML elemants
+ */
+blockquote {
+	margin: 0;
+	padding: 0;
+}
+
+blockquote p {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height);
+}
+
+blockquote cite,
+blockquote footer {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-xs);
+	letter-spacing: var(--global--letter-spacing-xs);
+}
+
+blockquote > * {
+	margin-top: var(--global--spacing-unit);
+	margin-bottom: var(--global--spacing-unit);
+}
+
+blockquote > *:first-child {
+	margin-top: 0;
+}
+
+blockquote > *:last-child {
+	margin-bottom: 0;
+}
+
+blockquote.alignleft, blockquote.alignright {
+	padding-left: inherit;
+}
+
+blockquote.alignleft p, blockquote.alignright p {
+	font-size: var(--heading--font-size-h5);
+	max-width: inherit;
+	width: inherit;
+}
+
+blockquote.alignleft cite,
+blockquote.alignleft footer, blockquote.alignright cite,
+blockquote.alignright footer {
+	font-size: var(--global--font-size-xs);
+	letter-spacing: var(--global--letter-spacing-xs);
+}
+
+/* Media captions */
+figcaption,
+.wp-caption,
+.wp-caption-text {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-xs);
+	line-height: var(--global--font-line-height-xs);
+	margin-top: calc(0.5 * var(--global--spacing-unit));
+	margin-bottom: var(--global--spacing-unit);
+	text-align: center;
+}
+
+.alignleft figcaption,
+.alignright figcaption, .alignleft
+.wp-caption,
+.alignright
+.wp-caption, .alignleft
+.wp-caption-text,
+.alignright
+.wp-caption-text {
+	margin-bottom: 0;
+}
+
+/* WP Smiley */
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+.wp-block-a8c-blog-posts.image-aligntop .post-thumbnail {
+	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+}
+
+.wp-block-a8c-blog-posts.image-alignleft .post-thumbnail {
+	margin-right: var(--global--spacing-vertical);
+}
+
+.wp-block-a8c-blog-posts.image-alignright .post-thumbnail {
+	margin-left: var(--global--spacing-vertical);
+}
+
+.wp-block-a8c-blog-posts.image-alignbehind .post-has-image .entry-wrapper {
+	padding: var(--global--spacing-vertical);
+}
+
+.wp-block-a8c-blog-posts.image-alignbehind .post-has-image .cat-links {
+	color: var(--global--color-white);
+}
+
+.wp-block-a8c-blog-posts.image-alignbehind .post-has-image a:hover {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .article-section-title {
+	font-size: var(--global--font-size-base);
+	margin-top: 0;
+	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+}
+
+.wp-block-a8c-blog-posts article {
+	margin-bottom: calc(3 * var(--global--spacing-vertical));
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	vertical-align: middle;
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-wrapper > * {
+	/* Vertical margins logic between post details */
+	margin-top: var(--global--spacing-unit);
+	margin-bottom: var(--global--spacing-unit);
+}
+
+.wp-block-a8c-blog-posts .entry-wrapper > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-a8c-blog-posts .entry-wrapper > *:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: var(--global--color-primary);
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: var(--global--color-primary-hover);
+	text-decoration: underline;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .more-link {
+	display: block;
+	color: inherit;
+	margin-top: var(--global--spacing-unit);
+}
+
+.wp-block-a8c-blog-posts .more-link:after {
+	content: "\02192";
+	display: inline-block;
+	margin-left: 0.5em;
+}
+
+.wp-block-a8c-blog-posts .more-link:hover, .wp-block-a8c-blog-posts .more-link:active {
+	color: var(--global--color-primary-hover);
+	text-decoration: none;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:hover,
+[style*="background-color"] .wp-block-a8c-blog-posts .more-link:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .more-link:active,
+[style*="background-color"] .wp-block-a8c-blog-posts .more-link:active {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .cat-links {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta .byline:not(:last-child),
+.wp-block-a8c-blog-posts .cat-links .byline:not(:last-child) {
+	margin-right: var(--global--spacing-unit);
+}
+
+.wp-block-a8c-blog-posts .entry-meta .published + .updated,
+.wp-block-a8c-blog-posts .cat-links .published + .updated {
+	display: none;
+}
+
+.wp-block-a8c-blog-posts .entry-meta a,
+.wp-block-a8c-blog-posts .cat-links a {
+	color: currentColor;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-meta a:hover, .wp-block-a8c-blog-posts .entry-meta a:active,
+.wp-block-a8c-blog-posts .cat-links a:hover,
+.wp-block-a8c-blog-posts .cat-links a:active {
+	color: var(--global--color-primary-hover);
+	text-decoration: none;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:hover,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:hover, .has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta a:active,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta a:active, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:hover,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:hover,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links a:hover, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:active,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links a:active,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links a:active {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts + .button, .wp-block-search .wp-block-search__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:after, .wp-block-search .wp-block-search__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-a8c-blog-posts + .button:after, .wp-block-search .wp-block-search__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-a8c-blog-posts + .button:active, .wp-block-search .wp-block-search__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-search .has-focus.wp-block-search__button {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-a8c-blog-posts + .button {
+	display: inline-block;
+	font-size: var(--global--font-size-md);
+}
+
+.wp-block-a8c-blog-posts + .button:hover {
+	cursor: default;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts + .button,
+[style*="background-color"] .wp-block-a8c-blog-posts + .button {
+	background-color: transparent;
+	border: var(--button--border-width, 2px) solid currentColor;
+	color: currentColor;
+}
+
+.wp-block-button__link {
+	color: var(--button--color-text);
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	line-height: var(--button--line-height);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-button__link.is-style-outline,
+.is-style-outline .wp-block-button__link {
+	color: var(--button--color-background);
+	background: transparent;
+	border: 2px solid currentcolor;
+}
+
+.wp-block-button__link.is-style-squared,
+.is-style-squared .wp-block-button__link {
+	border-radius: 0;
+}
+
+div[data-type="core/button"] {
+	display: block;
+}
+
+.wp-block-cover,
+.wp-block-cover-image {
+	background-color: var(--cover--color-foreground);
+	min-height: var(--cover--height);
+	margin-top: inherit;
+	margin-bottom: inherit;
+}
+
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-cover .wp-block-cover-image-text,
+.wp-block-cover .wp-block-cover-text,
+.wp-block-cover .block-editor-block-list__block,
+.wp-block-cover-image .wp-block-cover__inner-container,
+.wp-block-cover-image .wp-block-cover-image-text,
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image .block-editor-block-list__block {
+	color: currentColor;
+}
+
+.wp-block-cover .wp-block-cover__inner-container a,
+.wp-block-cover .wp-block-cover-image-text a,
+.wp-block-cover .wp-block-cover-text a,
+.wp-block-cover .block-editor-block-list__block a,
+.wp-block-cover-image .wp-block-cover__inner-container a,
+.wp-block-cover-image .wp-block-cover-image-text a,
+.wp-block-cover-image .wp-block-cover-text a,
+.wp-block-cover-image .block-editor-block-list__block a {
+	color: currentColor;
+}
+
+.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover:not([class*='background-color']) .block-editor-block-list__block,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover-image:not([class*='background-color']) .block-editor-block-list__block {
+	color: var(--cover--color-background);
+}
+
+.wp-block-cover h2,
+.wp-block-cover-image h2 {
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height);
+	padding: 0;
+	max-width: inherit;
+	text-align: inherit;
+}
+
+.wp-block-cover h2.has-text-align-left,
+.wp-block-cover-image h2.has-text-align-left {
+	text-align: left;
+}
+
+.wp-block-cover h2.has-text-align-center,
+.wp-block-cover-image h2.has-text-align-center {
+	text-align: center;
+}
+
+.wp-block-cover h2.has-text-align-right,
+.wp-block-cover-image h2.has-text-align-right {
+	text-align: right;
+}
+
+.wp-block-file .wp-block-file__textlink {
+	border-bottom: 1px solid var(--global--color-secondary);
+	color: var(--global--color-primary);
+	text-decoration: none;
+}
+
+.wp-block-file .wp-block-file__button {
+	color: var(--button--color-text);
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	line-height: var(--button--line-height);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-gallery figcaption {
+	margin-bottom: 0;
+}
+
+.wp-block-group.has-background {
+	padding: var(--global--spacing-vertical);
+}
+
+.wp-block-group:not(.has-background) .wp-block-group__inner-container {
+	padding-left: var(--global--spacing-horizontal);
+	padding-right: var(--global--spacing-horizontal);
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
+	margin: 0;
+	width: 100%;
+}
+
+.wp-block-heading h1, h1, .h1,
+.wp-block-heading h2, h2, .h2,
+.wp-block-heading h3, h3, .h3,
+.wp-block-heading h4, h4, .h4,
+.wp-block-heading h5, h5, .h5,
+.wp-block-heading h6, h6, .h6 {
+	clear: both;
+	font-family: var(--heading--font-family);
+	font-weight: var(--heading--font-weight);
+}
+
+.wp-block-heading h1 strong, h1 strong, .h1 strong,
+.wp-block-heading h2 strong, h2 strong, .h2 strong,
+.wp-block-heading h3 strong, h3 strong, .h3 strong,
+.wp-block-heading h4 strong, h4 strong, .h4 strong,
+.wp-block-heading h5 strong, h5 strong, .h5 strong,
+.wp-block-heading h6 strong, h6 strong, .h6 strong {
+	font-weight: var(--heading--font-weight-strong);
+}
+
+.wp-block-heading h1, h1, .h1 {
+	font-size: var(--heading--font-size-h1);
+	letter-spacing: var(--heading--letter-spacing-h1);
+	line-height: var(--heading--line-height-h1);
+}
+
+.wp-block-heading h2, h2, .h2 {
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height-h2);
+}
+
+.wp-block-heading h3, h3, .h3 {
+	font-size: var(--heading--font-size-h3);
+	letter-spacing: var(--heading--letter-spacing-h3);
+	line-height: var(--heading--line-height-h3);
+}
+
+.wp-block-heading h4, h4, .h4 {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
+}
+
+.wp-block-heading h5, h5, .h5 {
+	font-size: var(--heading--font-size-h5);
+	letter-spacing: var(--heading--letter-spacing-h5);
+	line-height: var(--global--line-height-body-h5);
+}
+
+.wp-block-heading h6, h6, .h6 {
+	font-size: var(--heading--font-size-h6);
+	letter-spacing: var(--heading--letter-spacing-h6);
+	line-height: var(--global--line-height-body-h6);
+}
+
+.wp-block-heading h1[style*="--wp--typography--line-height"], h1[style*="--wp--typography--line-height"], .h1[style*="--wp--typography--line-height"],
+.wp-block-heading h2[style*="--wp--typography--line-height"], h2[style*="--wp--typography--line-height"], .h2[style*="--wp--typography--line-height"],
+.wp-block-heading h3[style*="--wp--typography--line-height"], h3[style*="--wp--typography--line-height"], .h3[style*="--wp--typography--line-height"],
+.wp-block-heading h4[style*="--wp--typography--line-height"], h4[style*="--wp--typography--line-height"], .h4[style*="--wp--typography--line-height"],
+.wp-block-heading h5[style*="--wp--typography--line-height"], h5[style*="--wp--typography--line-height"], .h5[style*="--wp--typography--line-height"],
+.wp-block-heading h6[style*="--wp--typography--line-height"], h6[style*="--wp--typography--line-height"], .h6[style*="--wp--typography--line-height"] {
+	line-height: var(--wp--typography--line-height);
+}
+
+/* Center image block by default in the editor */
+.wp-block-image > div {
+	text-align: center;
+}
+
+[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized {
+	margin: 0 auto;
+}
+
+.wp-block-latest-comments {
+	margin-left: 0;
+}
+
+.wp-block-latest-posts {
+	padding-left: 0;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li {
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts.is-grid > li {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-posts.is-grid > li:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts > li > * {
+	margin-top: calc(0.5 * var(--global--spacing-vertical));
+	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+}
+
+.wp-block-latest-posts > li > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-posts > li > *:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts > li > a {
+	font-family: var(--latest-posts--title-font-family);
+	font-size: var(--latest-posts--title-font-size);
+	font-weight: var(--heading--font-weight);
+	line-height: var(--global--line-height-heading);
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-xs);
+	line-height: var(--global--line-height-body);
+}
+
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
+	font-family: var(--latest-posts--description-font-family);
+	font-size: var(--latest-posts--description-font-size);
+	line-height: var(--global--line-height-body);
+}
+
+.gallery-item {
+	display: inline-block;
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+}
+
+.gallery-columns-2 .gallery-item {
+	max-width: 50%;
+}
+
+.gallery-columns-3 .gallery-item {
+	max-width: 33.33%;
+}
+
+.gallery-columns-4 .gallery-item {
+	max-width: 25%;
+}
+
+.gallery-columns-5 .gallery-item {
+	max-width: 20%;
+}
+
+.gallery-columns-6 .gallery-item {
+	max-width: 16.66%;
+}
+
+.gallery-columns-7 .gallery-item {
+	max-width: 14.28%;
+}
+
+.gallery-columns-8 .gallery-item {
+	max-width: 12.5%;
+}
+
+.gallery-columns-9 .gallery-item {
+	max-width: 11.11%;
+}
+
+.gallery-caption {
+	display: block;
+}
+
+ul,
+ol {
+	font-family: var(--list--font-family);
+	margin: var(--global--spacing-vertical) 0;
+	padding-left: calc( 2 * var(--global--spacing-horizontal));
+}
+
+ul.aligncenter,
+ol.aligncenter {
+	list-style-position: inside;
+	padding: 0;
+}
+
+ul.alignright,
+ol.alignright {
+	list-style-position: inside;
+	text-align: right;
+	padding: 0;
+}
+
+li > ul,
+li > ol {
+	margin: 0;
+}
+
+dt {
+	font-family: var(--definition-term--font-family);
+	font-weight: bold;
+}
+
+.wp-block-media-text .block-editor-inner-blocks {
+	padding-right: var(--global--spacing-horizontal);
+	padding-left: var(--global--spacing-horizontal);
+}
+
+.wp-block-media-text[style*="background-color"]:not(.has-background-background-color) a {
+	color: currentColor;
+}
+
+.wp-block-navigation .wp-block-navigation__container {
+	background: var(--global--color-background);
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
+	padding: var(--primary-nav--padding);
+}
+
+.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+.wp-block-navigation .has-child .wp-block-navigation__container {
+	box-shadow: var(--global--elevation);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
+	color: currentColor;
+}
+
+p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+}
+
+p.has-background {
+	padding: var(--global--spacing-unit);
+}
+
+p.has-background:not(.has-background-background-color) a {
+	color: currentColor;
+}
+
+.a8c-posts-list {
+	padding-left: 0;
+}
+
+.wp-block-pullquote {
+	padding: calc( 2 * var(--global--spacing-unit)) 0;
+	margin-left: 0;
+	margin-right: 0;
+	text-align: left;
+	border-top-color: var(--pullquote--border-color);
+	border-top-width: var(--pullquote--border-width);
+	border-bottom-color: var(--pullquote--border-color);
+	border-bottom-width: var(--pullquote--border-width);
+	color: var(--pullquote--color-foreground);
+}
+
+.wp-block-pullquote p {
+	font-family: var(--pullquote--font-family);
+	font-size: var(--pullquote--font-size);
+	font-style: var(--pullquote--font-style);
+	letter-spacing: var(--pullquote--letter-spacing);
+	line-height: var(--pullquote--line-height);
+	margin: 0;
+}
+
+.wp-block-pullquote a {
+	color: currentColor;
+}
+
+.wp-block-pullquote .wp-block-pullquote__citation,
+.wp-block-pullquote cite,
+.wp-block-pullquote footer {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-xs);
+}
+
+.wp-block-pullquote:not(.is-style-solid-color) {
+	background: none;
+}
+
+.wp-block-pullquote.is-style-solid-color {
+	background-color: var(--pullquote--color-foreground);
+	color: var(--pullquote--color-background);
+	padding: calc( 2 * var(--global--spacing-unit));
+}
+
+.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
+.wp-block-pullquote.is-style-solid-color.alignright blockquote {
+	padding-left: var(--global--spacing-unit);
+	padding-right: var(--global--spacing-unit);
+	max-width: inherit;
+}
+
+.wp-block-pullquote.is-style-solid-color blockquote {
+	margin: 0;
+	text-align: left;
+	max-width: 100%;
+}
+
+.wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
+.wp-block-pullquote.is-style-solid-color cite,
+.wp-block-pullquote.is-style-solid-color footer {
+	color: currentColor;
+}
+
+.wp-block[data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
+	padding: 0 calc( 2 * var(--global--spacing-unit));
+}
+
+.wp-block-quote {
+	border-left-color: var(--quote--border-color);
+	border-left-width: var(--quote--border-width);
+	margin: var(--global--spacing-vertical) 0;
+	padding-left: var(--global--spacing-horizontal);
+}
+
+.wp-block-quote p {
+	font-family: var(--quote--font-family);
+	font-size: var(--quote--font-size);
+	font-style: var(--quote--font-style);
+	line-height: var(--quote--line-height);
+}
+
+.wp-block-quote.is-large, .wp-block-quote.is-style-large {
+	border-left: var(--quote--border-width) solid var(--quote--border-color);
+	padding-left: var(--global--spacing-horizontal);
+	/* Resetting margins to match _block-container.scss */
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
+	font-size: var(--quote--font-size-large);
+	font-style: var(--quote--font-style-large);
+	line-height: var(--quote--line-height-large);
+}
+
+.wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right {
+	border-left: none;
+	border-right: var(--quote--border-width) solid var(--quote--border-color);
+}
+
+.wp-block-quote.has-text-align-right {
+	border-right: var(--quote--border-width) solid var(--quote--border-color);
+}
+
+.wp-block-quote.has-text-align-center {
+	border: none;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-quote,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-quote,
+[style*="background-color"]:not(.has-background-background-color) .wp-block-quote,
+.wp-block-cover[style*="background-image"] .wp-block-quote {
+	border-color: currentColor;
+}
+
+.wp-block-quote .wp-block-quote__citation {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-xs);
+}
+
+.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
+[style*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
+.wp-block-cover[style*="background-image"] .wp-block-quote .wp-block-quote__citation {
+	color: currentColor;
+}
+
+.wp-block-search {
+	display: flex;
+	max-width: var(--responsive--aligndefault-width);
+}
+
+.wp-block-search .wp-block-search__label {
+	font-weight: normal;
+}
+
+.wp-block-search .wp-block-search__input {
+	border: var(--form--border-width) solid var(--form--border-color);
+	border-radius: var(--form--border-radius);
+	font-family: var(--form--font-family);
+	font-size: var(--form--font-size);
+	line-height: var(--form--line-height);
+	max-width: inherit;
+	margin-right: calc( .66 * var(--global--spacing-horizontal));
+	padding: var(--form--spacing-unit);
+}
+
+.wp-block-search .wp-block-search__input:focus {
+	border-color: var(--form--border-color);
+}
+
+.wp-block-separator,
+hr {
+	border-bottom: var(--separator--height) solid var(--separator--border-color);
+	clear: both;
+}
+
+.wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
+hr[style*="text-align:right"],
+hr[style*="text-align: right"] {
+	border-right-color: var(--separator--border-color);
+}
+
+.wp-block-separator.is-style-wide,
+hr.is-style-wide {
+	border-bottom-width: var(--separator--height);
+}
+
+.wp-block-separator.is-style-dots,
+hr.is-style-dots {
+	border-bottom: none;
+}
+
+.wp-block-separator.is-style-dots.has-background, .wp-block-separator.is-style-dots.has-text-color,
+hr.is-style-dots.has-background,
+hr.is-style-dots.has-text-color {
+	background-color: transparent !important;
+}
+
+.wp-block-separator.is-style-dots.has-background:before, .wp-block-separator.is-style-dots.has-text-color:before,
+hr.is-style-dots.has-background:before,
+hr.is-style-dots.has-text-color:before {
+	color: currentColor !important;
+}
+
+.wp-block-separator.is-style-dots:before,
+hr.is-style-dots:before {
+	color: var(--separator--border-color);
+}
+
+.has-background:not(.has-background-background-color) .wp-block-separator,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-separator,
+[style*="background-color"]:not(.has-background-background-color) .wp-block-separator,
+.wp-block-cover[style*="background-image"] .wp-block-separator, .has-background:not(.has-background-background-color)
+hr,
+[class*="background-color"]:not(.has-background-background-color)
+hr,
+[style*="background-color"]:not(.has-background-background-color)
+hr,
+.wp-block-cover[style*="background-image"]
+hr {
+	border-color: currentColor;
+}
+
+table th,
+.wp-block-table th {
+	font-family: var(--heading--font-family);
+}
+
+table td,
+table th,
+.wp-block-table td,
+.wp-block-table th {
+	padding: calc( 0.5 * var(--global--spacing-unit));
+}
+
+pre.wp-block-verse {
+	padding: 0;
+}
+
+/**
+* Editor Post Title
+* - Needs a special styles
+*/
+.editor-post-title__block .editor-post-title__input {
+	color: var(--global--color-foreground);
+	font-family: var(--heading--font-family);
+	font-weight: var(--heading--font-weight);
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height);
+}
+
+.wp-block.block-editor-default-block-appender > textarea {
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-md);
+}
+
+.has-primary-color[class] {
+	color: var(--global--color-primary) !important;
+}
+
+.has-secondary-color[class] {
+	color: var(--global--color-secondary) !important;
+}
+
+.has-foreground-color[class] {
+	color: var(--global--color-foreground) !important;
+}
+
+.has-foreground-light-color[class] {
+	color: var(--global--color-foreground-light) !important;
+}
+
+.has-foreground-dark-color[class] {
+	color: var(--global--color-foreground-dark) !important;
+}
+
+.has-tertiary-color[class] {
+	color: var(--global--color-tertiary) !important;
+}
+
+.has-background-dark-color[class] {
+	color: var(--global--color-background-dark) !important;
+}
+
+.has-background-color[class] {
+	color: var(--global--color-background) !important;
+}
+
+.has-background:not(.has-background-background-color) a,
+.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
+	color: currentColor;
+}
+
+.has-primary-background-color[class] {
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background);
+}
+
+.has-primary-background-color[class] {
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background);
+}
+
+.has-secondary-background-color[class] {
+	background-color: var(--global--color-secondary) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-background-color[class] {
+	background-color: var(--global--color-foreground) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-light-background-color[class] {
+	background-color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-dark-background-color[class] {
+	background-color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-background);
+}
+
+.has-tertiary-background-color[class] {
+	background-color: var(--global--color-tertiary) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-dark-background-color[class] {
+	background-color: var(--global--color-background-dark) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-background-color[class] {
+	background-color: var(--global--color-background) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-white-background-color[class] {
+	background-color: var(--global--color-white) !important;
+	color: var(--global--color-secondary);
+}
+
+.has-black-background-color[class] {
+	background-color: var(--global--color-black) !important;
+	color: var(--global--color-primary);
+}
+
+.is-tiny-text,
+.has-tiny-font-size {
+	font-size: var(--global--font-size-xs);
+}
+
+.is-small-text,
+.has-small-font-size {
+	font-size: var(--global--font-size-sm);
+}
+
+.is-regular-text,
+.has-regular-font-size,
+.has-normal-font-size,
+.has-medium-font-size {
+	font-size: var(--global--font-size-md);
+}
+
+.is-large-text,
+.has-large-font-size {
+	font-size: var(--global--font-size-lg);
+	line-height: var(--global--line-height-heading);
+}
+
+.is-larger-text,
+.has-larger-font-size,
+.has-huge-font-size {
+	font-size: var(--global--font-size-xl);
+	line-height: var(--global--line-height-heading);
+}
+
+.has-drop-cap:not(:focus)::first-letter {
+	font-family: var(--heading--font-family);
+	font-size: calc(2 * var(--heading--font-size-h1));
+	font-weight: var(--heading--font-weight);
+}
+
+/**
+ * Spacing Overrides
+ */
+[data-block] {
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+[data-block] [data-block]:first-child {
+	margin-top: 0;
+}
+
+[data-block] [data-block]:nth-last-child(2) {
+	margin-bottom: 0;
+}
+
+/* 
+ * Custom gradients 
+*/
+.has-hard-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-hard-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-stripe-gradient-background {
+	background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
+}
+
+/* Block Alignments */
+.wp-block {
+	max-width: var(--responsive--aligndefault-width);
+}
+
+.wp-block[data-align="wide"], .wp-block.alignwide {
+	max-width: var(--responsive--alignwide-width);
+}
+
+.wp-block[data-align="full"], .wp-block.alignfull {
+	max-width: none;
+}
+
+.alignleft {
+	margin: 0;
+	margin-right: var(--global--spacing-horizontal);
+}
+
+.alignright {
+	margin: 0;
+	margin-left: var(--global--spacing-horizontal);
+}
+
+/**
+ * Vendor styles for the editor
+ */
+/**
+ * Jetpack editor styles
+ */
+/**
+ * Jetpack Block editor styles
+ */
+/* Gutter Options */
+.wp-block-jetpack-layout-grid,
+.wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none,
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-none);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small,
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-small);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium,
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-medium);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large,
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge,
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	grid-gap: var(--layout-grid--gutter-huge);
+}
+
+/* No Gutters Options */
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none {
+	padding-left: var(--layout-grid--gutter-none);
+	padding-right: var(--layout-grid--gutter-none);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small {
+	padding-left: var(--layout-grid--gutter-small);
+	padding-right: var(--layout-grid--gutter-small);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium {
+	padding-left: var(--layout-grid--gutter-medium);
+	padding-right: var(--layout-grid--gutter-medium);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large {
+	padding-left: var(--layout-grid--gutter-large);
+	padding-right: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge {
+	padding-left: var(--layout-grid--gutter-huge);
+	padding-right: var(--layout-grid--gutter-huge);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+/* Padding Options */
+.wp-block-jetpack-layout-grid {
+	padding-left: var(--layout-grid--gutter-large);
+	padding-right: var(--layout-grid--gutter-large);
+	/* Individual Column Options */
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column[style^="background-color"] {
+	margin-left: calc(var(--layout-grid--background-offset) * -1);
+	margin-right: calc(var(--layout-grid--background-offset) * -1);
+	padding-left: var(--layout-grid--background-offset);
+	padding-right: var(--layout-grid--background-offset);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__nowrap {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+/* Additional, user-set paddings. */
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-none {
+	padding: var(--layout-grid--gutter-none);
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-none.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-none[style^="background-color"] {
+	padding-top: var(--layout-grid--gutter-none);
+	padding-right: calc(var(--layout-grid--gutter-none) + var(--layout-grid--background-offset));
+	padding-bottom: var(--layout-grid--gutter-none);
+	padding-left: calc(var(--layout-grid--gutter-none) + var(--layout-grid--background-offset));
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-small {
+	padding: var(--layout-grid--gutter-small);
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-small.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-small[style^="background-color"] {
+	padding-top: var(--layout-grid--gutter-small);
+	padding-right: calc(var(--layout-grid--gutter-small) + var(--layout-grid--background-offset));
+	padding-bottom: var(--layout-grid--gutter-small);
+	padding-left: calc(var(--layout-grid--gutter-small) + var(--layout-grid--background-offset));
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-medium {
+	padding: var(--layout-grid--gutter-medium);
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-medium.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-medium[style^="background-color"] {
+	padding-top: var(--layout-grid--gutter-medium);
+	padding-right: calc(var(--layout-grid--gutter-medium) + var(--layout-grid--background-offset));
+	padding-bottom: var(--layout-grid--gutter-medium);
+	padding-left: calc(var(--layout-grid--gutter-medium) + var(--layout-grid--background-offset));
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-large {
+	padding: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-large.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-large[style^="background-color"] {
+	padding-top: var(--layout-grid--gutter-large);
+	padding-right: calc(var(--layout-grid--gutter-large) + var(--layout-grid--background-offset));
+	padding-bottom: var(--layout-grid--gutter-large);
+	padding-left: calc(var(--layout-grid--gutter-large) + var(--layout-grid--background-offset));
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-huge {
+	padding: var(--layout-grid--gutter-huge);
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-huge.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.wp-block-jetpack-layout-grid__padding-huge[style^="background-color"] {
+	padding-top: var(--layout-grid--gutter-huge);
+	padding-right: calc(var(--layout-grid--gutter-huge) + var(--layout-grid--background-offset));
+	padding-bottom: var(--layout-grid--gutter-huge);
+	padding-left: calc(var(--layout-grid--gutter-huge) + var(--layout-grid--background-offset));
+}
+
+/* Overlay grid */
+.wp-block-jetpack-layout-grid {
+	/* wpcom-overlay-grid is the classname targeting the grid overlay visual aid displayed in the editor */
+}
+
+.wp-block-jetpack-layout-grid .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-large);
+	padding-left: var(--layout-grid--gutter-large);
+	padding-right: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-none);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none .wpcom-overlay-grid {
+	padding-left: var(--layout-grid--gutter-none);
+	padding-right: var(--layout-grid--gutter-none);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-small);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small .wpcom-overlay-grid {
+	padding-left: var(--layout-grid--gutter-small);
+	padding-right: var(--layout-grid--gutter-small);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-medium);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium .wpcom-overlay-grid {
+	padding-left: var(--layout-grid--gutter-medium);
+	padding-right: var(--layout-grid--gutter-medium);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large .wpcom-overlay-grid {
+	padding-left: var(--layout-grid--gutter-large);
+	padding-right: var(--layout-grid--gutter-large);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge .wpcom-overlay-grid {
+	grid-gap: var(--layout-grid--gutter-huge);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge .wpcom-overlay-grid {
+	padding-left: var(--layout-grid--gutter-huge);
+	padding-right: var(--layout-grid--gutter-huge);
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge.wp-block-jetpack-layout-gutter__nowrap .wpcom-overlay-grid {
+	padding-left: 0;
+	padding-right: 0;
+}

seedlet/assets/css/style-woocommerce-rtl.css

@@ -0,0 +1,2058 @@
+/**
+ * Repsonsive Styles
+ */
+/**
+ * Required Variables
+ */
+/**
+ * Root Media Query Variables
+ */
+:root {
+	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
+	--responsive--aligndefault-width: 100%;
+	--responsive--alignwide-width: 100%;
+	--responsive--alignfull-width: 100%;
+	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
+	--responsive--alignright-margin: var(--global--spacing-horizontal);
+	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+}
+
+@media only screen and (min-width: 482px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 652px) {
+	:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 822px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+/**
+ * Extends
+ */
+.default-max-width {
+	max-width: var(--responsive--aligndefault-width);
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.wide-max-width {
+	max-width: var(--responsive--alignwide-width);
+	margin-right: auto;
+	margin-left: auto;
+}
+
+@media only screen and (min-width: 482px) {
+	.full-max-width {
+		max-width: var(--responsive--alignfull-width);
+		width: auto;
+		margin-right: auto;
+		margin-left: auto;
+	}
+}
+
+body[class*="woocommerce"] .entry-content > .woocommerce {
+	margin-right: auto;
+	margin-left: auto;
+	width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
+	max-width: var(--responsive--alignfull-width);
+}
+
+/**
+ * Output
+ */
+body[class*="woocommerce"] #page .site-content #respond input#submit,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt,
+body[class*="woocommerce"] #page .site-content a.button,
+body[class*="woocommerce"] #page .site-content a.button.alt,
+body[class*="woocommerce"] #page .site-content button.button,
+body[class*="woocommerce"] #page .site-content button.button.alt,
+body[class*="woocommerce"] #page .site-content input.button,
+body[class*="woocommerce"] #page .site-content input.button.alt,
+body[class*="woocommerce"] #page .site-content .cart .button,
+body[class*="woocommerce"] #page .site-content .cart input.button,
+body[class*="woocommerce"] #page .site-content a.added_to_cart,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:before,
+body[class*="woocommerce"] #page .site-content a.button:before,
+body[class*="woocommerce"] #page .site-content a.button.alt:before,
+body[class*="woocommerce"] #page .site-content button.button:before,
+body[class*="woocommerce"] #page .site-content button.button.alt:before,
+body[class*="woocommerce"] #page .site-content input.button:before,
+body[class*="woocommerce"] #page .site-content input.button.alt:before,
+body[class*="woocommerce"] #page .site-content .cart .button:before,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:before,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:before, body[class*="woocommerce"] #page .site-content #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:after,
+body[class*="woocommerce"] #page .site-content a.button:after,
+body[class*="woocommerce"] #page .site-content a.button.alt:after,
+body[class*="woocommerce"] #page .site-content button.button:after,
+body[class*="woocommerce"] #page .site-content button.button.alt:after,
+body[class*="woocommerce"] #page .site-content input.button:after,
+body[class*="woocommerce"] #page .site-content input.button.alt:after,
+body[class*="woocommerce"] #page .site-content .cart .button:after,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:after,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:after,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:before,
+body[class*="woocommerce"] #page .site-content a.button:before,
+body[class*="woocommerce"] #page .site-content a.button.alt:before,
+body[class*="woocommerce"] #page .site-content button.button:before,
+body[class*="woocommerce"] #page .site-content button.button.alt:before,
+body[class*="woocommerce"] #page .site-content input.button:before,
+body[class*="woocommerce"] #page .site-content input.button.alt:before,
+body[class*="woocommerce"] #page .site-content .cart .button:before,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:before,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:after,
+body[class*="woocommerce"] #page .site-content a.button:after,
+body[class*="woocommerce"] #page .site-content a.button.alt:after,
+body[class*="woocommerce"] #page .site-content button.button:after,
+body[class*="woocommerce"] #page .site-content button.button.alt:after,
+body[class*="woocommerce"] #page .site-content input.button:after,
+body[class*="woocommerce"] #page .site-content input.button.alt:after,
+body[class*="woocommerce"] #page .site-content .cart .button:after,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:after,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:after,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:active,
+body[class*="woocommerce"] #page .site-content a.button:active,
+body[class*="woocommerce"] #page .site-content button.button:active,
+body[class*="woocommerce"] #page .site-content input.button:active,
+body[class*="woocommerce"] #page .site-content .cart .button:active,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:active,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:active,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:hover,
+body[class*="woocommerce"] #page .site-content a.button:hover,
+body[class*="woocommerce"] #page .site-content button.button:hover,
+body[class*="woocommerce"] #page .site-content input.button:hover,
+body[class*="woocommerce"] #page .site-content .cart .button:hover,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:hover, body[class*="woocommerce"] #page .site-content #respond input#submit:focus,
+body[class*="woocommerce"] #page .site-content a.button:focus,
+body[class*="woocommerce"] #page .site-content button.button:focus,
+body[class*="woocommerce"] #page .site-content input.button:focus,
+body[class*="woocommerce"] #page .site-content .cart .button:focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:focus, body[class*="woocommerce"] #page .site-content #respond input.has-focus#submit,
+body[class*="woocommerce"] #page .site-content a.has-focus.button,
+body[class*="woocommerce"] #page .site-content button.has-focus.button,
+body[class*="woocommerce"] #page .site-content input.has-focus.button,
+body[class*="woocommerce"] #page .site-content .cart .has-focus.button,
+body[class*="woocommerce"] #page .site-content a.has-focus.added_to_cart,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a.has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
+	border-radius: 100%;
+	background-color: var(--global--color-alert-warning);
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-sm);
+	font-weight: 700;
+	font-family: var(--global--font-primary);
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	left: -0.5em;
+	right: auto;
+	margin: 0;
+	z-index: 9;
+}
+
+/**
+ * WooCommerce styles
+ */
+/**
+ * Element Imports
+ */
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page .woocommerce-breadcrumb {
+	margin-bottom: var(--global--spacing-vertical);
+	font-size: var(--global--font-size-base);
+	font-family: var(--global--font-primary);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
+	color: currentColor;
+}
+
+/**
+ * Notices
+ */
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info,
+body[class*="woocommerce"] #page .woocommerce-success,
+body[class*="woocommerce"] #page .woocommerce-error,
+body[class*="woocommerce"] #page .woocommerce-warning {
+	padding: var(--global--spacing-unit) calc(2 * var(--global--spacing-vertical)) var(--global--spacing-unit) var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+	background-color: var(--global--color-tertiary);
+	color: var(--global--color-foreground-dark);
+	border-top-color: var(--global--color-primary-default);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--message,
+body[class*="woocommerce"] #page .woocommerce-notice--info {
+	color: var(--global--color-foreground);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--success {
+	color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--error {
+	color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--warning {
+	color: var(--global--color-alert-warning);
+}
+
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info {
+	border-top-color: var(--global--color-alert-info);
+}
+
+body[class*="woocommerce"] #page .woocommerce-message:before,
+body[class*="woocommerce"] #page .woocommerce-info:before {
+	color: var(--global--color-alert-info);
+}
+
+body[class*="woocommerce"] #page .woocommerce-success {
+	border-top-color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-success:before {
+	color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-error {
+	border-top-color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-error:before {
+	color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-warning {
+	border-top-color: var(--global--color-alert-warning);
+}
+
+body[class*="woocommerce"] #page .woocommerce-warning:before {
+	color: var(--global--color-alert-warning);
+}
+
+/**
+ * Star ratings
+ */
+/**
+ * Password strength meter
+ */
+body[class*="woocommerce"] #page .woocommerce-password-strength {
+	text-align: center;
+	font-weight: 600;
+	padding: calc(0.5 * var(--wc--table--padding));
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
+	background-color: var(--global--color-alert-success);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.good {
+	background-color: var(--global--color-alert-warning);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.short {
+	background-color: var(--global--color-alert-error);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
+	background-color: var(--global--color-alert-error);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-hint {
+	font-size: var(--global--font-size-xs);
+}
+
+/**
+ * Remove Icon
+ */
+body[class*="woocommerce"] #page a.remove {
+	font-size: var(--global--font-size-lg);
+	font-family: sans-serif !important;
+	height: var(--global--font-size-md);
+	width: var(--global--font-size-md);
+	color: red !important;
+}
+
+body[class*="woocommerce"] #page a.remove:hover {
+	color: var(--global--color-background) !important;
+	background: red;
+}
+
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page small.note {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+	margin-top: var(--global--spacing-unit);
+}
+
+/**
+ * Star ratings
+ */
+body[class*="woocommerce"] #page .star-rating::before {
+	color: var(--wc--star-rating--color);
+	content: "\53\53\53\53\53";
+	opacity: 0.4;
+}
+
+body[class*="woocommerce"] #page .star-rating span {
+	color: var(--wc--star-rating--color);
+}
+
+body[class*="woocommerce"] #page p.stars a {
+	color: var(--wc--star-rating--color);
+}
+
+/**
+ * Tables
+ */
+body[class*="woocommerce"] #page table.shop_table {
+	border-collapse: collapse;
+	border: var(--wc--table--border-width) solid var(--wc--table--border-color);
+	border-radius: var(--wc--table--border-radius);
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page table.shop_table th {
+	padding: var(--wc--table--padding);
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page table.shop_table td {
+	border-top: none;
+	padding: var(--wc--table--padding);
+	word-break: break-word;
+}
+
+body[class*="woocommerce"] #page table.shop_table tr {
+	border-bottom: var(--wc--table--border-width) solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_table tfoot td,
+body[class*="woocommerce"] #page table.shop_table tfoot th,
+body[class*="woocommerce"] #page table.shop_table tbody th {
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes {
+	border-top-color: var(--wc--table--border-color);
+	border-top-style: solid;
+	margin-bottom: var(--global--spacing-vertical);
+	border-bottom: var(--wc--table--border-width) solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes th {
+	padding: calc(0.5 * var(--wc--table--padding));
+	border-bottom-color: var(--wc--table--border-color);
+	border-bottom-style: solid;
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td {
+	font-style: inherit;
+	border-bottom-color: var(--wc--table--border-color);
+	border-bottom-style: solid;
+	line-height: var(--global--line-height-body);
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td p {
+	margin: 0;
+	padding-top: calc(0.5 * var(--wc--table--padding));
+	padding-bottom: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) th {
+	background: var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page table.my_account_orders {
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page table.my_account_orders th,
+body[class*="woocommerce"] #page table.my_account_orders td {
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table td,
+body[class*="woocommerce"] #page table th {
+	border: inherit;
+}
+
+/**
+ * Block Imports
+ */
+/**
+ * Button
+ */
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce a.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce button.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce input.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled[disabled] {
+	cursor: not-allowed;
+}
+
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled[disabled]:hover {
+	background-color: var(--global--color-primary-default);
+}
+
+/**
+ * WooCommerce Block Grid
+ * - Used by:
+ *   .wp-block-product-new
+ *   .wp-block-product-best-sellers
+ *   .wp-block-product-on-sale
+ *   .wp-block-product-top-rated
+ *   .wp-block-product-categroy
+ *   .wp-block-products-by-attribute
+ */
+#content .wc-block-grid .wc-block-grid__product > *:not(:first-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:first-child) {
+	margin-top: var(--global--spacing-unit);
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(:last-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:last-child) {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(img):empty + *,
+#content .wc-block-grid .wc-block-grid__product-link > *:not(img):empty + * {
+	margin-top: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:last-child,
+#content .wc-block-grid .wc-block-grid__product-link > *:last-child {
+	margin-bottom: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:empty,
+#content .wc-block-grid .wc-block-grid__product-link > *:empty {
+	margin: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product-title {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-base);
+}
+
+#content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
+	color: var(--global--color-secondary);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price {
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price ins {
+	color: var(--global--color-alert-success);
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
+	left: calc(-0.5em + var(--global--spacing-unit));
+	margin: 0;
+}
+
+/**
+ * WooCommerce Featured Product
+ */
+#content .wc-block-featured-product .wc-block-featured-product__description:empty,
+#content .wc-block-featured-product .wc-block-featured-product__link:empty,
+#content .wc-block-featured-product .wc-block-featured-product__price:empty,
+#content .wc-block-featured-product .wc-block-featured-product__title:empty,
+#content .wc-block-featured-product .wc-block-featured-product__variation:empty {
+	padding: 0;
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price {
+	font-size: var(--global--font-size-xl);
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price ins {
+	text-decoration: none;
+}
+
+/**
+ * Components Imports
+ */
+/**
+ * Cart Collaterals
+ */
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr th {
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells > h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals p small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals p small {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table {
+	margin: 0 0 calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table th {
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table small {
+	color: var(--wc--mini-cart--color-count);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
+	color: var(--wc--star-rating--color);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-form,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-button,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-form {
+	margin-top: var(--wc--tabs--padding);
+}
+
+/**
+ * Mini-cart
+ */
+body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_cart {
+	display: inline-block;
+	text-decoration: none;
+}
+
+body[class*="woocommerce"] #page .woo-navigation > #toggle-cart {
+	right: 0;
+	top: 0;
+	left: auto;
+}
+
+body[class*="woocommerce"] #page .woo-navigation > #toggle-cart .open .svg-icon {
+	margin-right: 0;
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation > .woocommerce-menu-container {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(0);
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart {
+	right: auto;
+	left: 0;
+	z-index: 500;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .open {
+	display: none;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .close {
+	display: flex;
+	align-items: center;
+}
+
+@media only screen and (max-width: 481px) {
+	body[class*="woocommerce"].admin-bar.lock-scrolling #page .woo-navigation #toggle-cart {
+		top: 46px;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container {
+		background-color: var(--wc--mini-cart--color-background);
+		color: var(--wc--mini-cart--color-text);
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a,
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a:link,
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a:visited {
+		color: currentColor;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container .sub-menu {
+		margin-right: 0;
+	}
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation {
+		flex-direction: column;
+		margin-top: 0;
+	}
+	body[class*="woocommerce"] #page .woo-navigation #toggle-cart {
+		display: none;
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link {
+	display: none;
+	text-decoration: none;
+	line-height: 1;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link > *:not(:last-child) {
+	margin-left: calc(0.25 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
+	color: var(--wc--mini-cart--color-subtotal);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .woocommerce-cart-count {
+	color: var(--wc--mini-cart--color-count);
+	font-weight: normal;
+	white-space: nowrap;
+	display: inline-block;
+	vertical-align: bottom;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .svg-icon {
+	float: right;
+	height: var(--primary-nav--font-size);
+	width: var(--primary-nav--font-size);
+	vertical-align: middle;
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link {
+		align-items: center;
+		display: flex;
+		flex-wrap: nowrap;
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+	background-color: var(--wc--mini-cart--color-background);
+	color: var(--wc--mini-cart--color-text);
+	max-width: 100%;
+	padding: var(--primary-nav--padding) 0;
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+		max-width: calc(20 * var(--global--spacing-horizontal));
+		padding: var(--primary-nav--padding);
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
+	border-bottom: 1px solid var(--wc--mini-cart--color-border);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
+	border-top: 1px solid var(--wc--mini-cart--color-border);
+	padding-right: var(--global--spacing-horizontal);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:focus:not(.remove) {
+	background-color: transparent;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:focus {
+	text-decoration: none;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__total {
+	text-align: left;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons {
+	text-align: left;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
+	clear: left;
+	color: var(--wc--mini-cart--button-text-color);
+	background-color: var(--wc--mini-cart--button-background-color);
+	margin: 0;
+	float: left;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a {
+	clear: inherit;
+	float: inherit;
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2):not(:last-child),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a:not(:last-child) {
+	margin-left: calc(0.5 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+	margin-bottom: calc(0.5 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a.wcppec-cart-widget-button {
+	display: inline-block;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget p.buttons.wcppec-cart-widget-spb {
+	padding: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li a,
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li a {
+	padding: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li a:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-mini-cart__total {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li .quantity,
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li .quantity {
+	font-size: var(--global--font-size-base);
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
+		right: auto;
+		left: 0;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+		max-width: var(--wc--mini-cart--width);
+	}
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item:hover > ul:before,
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item.focus > ul:before,
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item.current-menu-item > ul:before {
+		margin-right: auto;
+		margin-left: var(--global--spacing-unit);
+	}
+}
+
+.woocommerce-cart #page .woocommerce-menu-item .sub-menu,
+.woocommerce-checkout #page .woocommerce-menu-item .sub-menu {
+	display: none;
+}
+
+/**
+ * Pagination
+ */
+body[class*="woocommerce"] #page .woocommerce-pagination {
+	margin: 0 calc(-0.66 * var(--global--spacing-unit));
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers {
+	border: none;
+	display: flex;
+	justify-content: start;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li > * {
+	display: block;
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-md);
+	font-weight: 600;
+	padding-right: calc(0.66 * var(--global--spacing-unit));
+	padding-left: calc(0.66 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li {
+	border: none;
+	float: inherit;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a {
+	text-decoration: unset;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li span.current,
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:hover,
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:focus {
+	background: transparent;
+	color: var(--global--color-foreground-default);
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+/**
+ * Product loops
+ */
+body[class*="woocommerce"] #page .woocommerce-products-header img {
+	display: block;
+}
+
+#woocommerce-wrapper .products ul,
+#woocommerce-wrapper ul.products,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells .products ul,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells .products ul,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products {
+	margin: 0;
+	padding: 0;
+}
+
+#woocommerce-wrapper ul.products li.product,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product {
+	text-align: center;
+}
+
+#woocommerce-wrapper ul.products li.product .star-rating,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .star-rating,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .star-rating {
+	font-size: var(--global--font-size-sm);
+	margin-right: auto;
+	margin-left: auto;
+}
+
+#woocommerce-wrapper ul.products li.product h3,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-product__title,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-category__title,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product h3,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-category__title,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product h3,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-category__title {
+	padding: inherit;
+	font-size: var(--global--font-size-base);
+}
+
+#woocommerce-wrapper ul.products li.product a img,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product a img,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product a img {
+	margin: inherit;
+}
+
+#woocommerce-wrapper ul.products li.product .woocommerce-placeholder,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder {
+	border-color: var(--global--color-border-default);
+}
+
+#woocommerce-wrapper ul.products li.product .button,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .button,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .button {
+	margin-top: inherit;
+}
+
+#woocommerce-wrapper ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .added_to_cart {
+	margin-top: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product .price,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
+	color: var(--global--color-primary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+#woocommerce-wrapper ul.products li.product .price del,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price del,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price del {
+	color: inherit;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+#woocommerce-wrapper ul.products li.product .price ins,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price ins,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+#woocommerce-wrapper ul.products li.product .price .from,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price .from,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price .from {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-alert-warning);
+}
+
+#woocommerce-wrapper ul.products li.product.sale a > .price ins,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins {
+	color: var(--global--color-alert-success);
+}
+
+/**
+ * Tabs
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Tabs
+	 */
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
+	padding-right: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
+	background-color: var(--global--color-tertiary);
+	border-color: var(--wc--tabs--border-color);
+	border-top-right-radius: var(--wc--tabs--border-radius);
+	border-top-left-radius: var(--wc--tabs--border-radius);
+	padding-right: 0;
+	padding-left: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
+	color: var(--global--color-foreground-light);
+	padding-right: var(--wc--tabs--padding);
+	padding-left: var(--wc--tabs--padding);
+	padding-top: calc(0.5 * var(--wc--tabs--padding));
+	padding-bottom: calc(0.5 * var(--wc--tabs--padding));
+	font-weight: normal;
+	border-bottom: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
+	color: var(--global--color-primary-hover);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
+	background-color: var(--global--color-background);
+	border-color: var(--wc--tabs--border-color);
+	border-bottom-color: var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
+	color: var(--global--color-foreground-dark);
+	text-shadow: inherit;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::before {
+	box-shadow: -2px 2px 0 var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::after {
+	box-shadow: 2px 2px 0 var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before, body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
+	border-color: var(--wc--tabs--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
+	box-shadow: -2px 2px 0 var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
+	box-shadow: 2px 2px 0 var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
+	border-bottom-color: var(--wc--tabs--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel h2,
+body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-lg);
+}
+
+/**
+ * Reviews
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Reviews
+	 */
+}
+
+body[class*="woocommerce"] #page #reviews h2 small {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+	margin: inherit;
+}
+
+body[class*="woocommerce"] #page #reviews h2 small a {
+	color: currentColor;
+}
+
+body[class*="woocommerce"] #page #reviews .comment-form .stars a {
+	border-bottom: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist {
+	padding-right: 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar {
+	padding: 0;
+	width: calc(1.5 * var(--global--spacing-vertical));
+	height: auto;
+	background: transparent;
+	border-color: var(--global--color-border-default);
+	margin: 0;
+	box-shadow: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
+	font-family: var(--global--font-primary);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
+	margin-right: calc(4 * var(--global--spacing-unit));
+	border: 1px solid var(--global--color-border);
+	border-radius: 4px;
+	padding: 1em 1em 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p {
+	margin: 0 0 1em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p.meta {
+	font-size: 0.83em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children {
+	list-style: none outside;
+	margin: 20px 50px 0 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .star-rating {
+	display: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
+	border: 1px solid var(--global--color-border);
+	border-radius: 4px;
+	padding: 1em 1em 0;
+	margin: 20px 50px 0 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
+	content: "";
+}
+
+/**
+ * Pagination
+ */
+body[class*="woocommerce"] .woocommerce-store-notice,
+body[class*="woocommerce"] p.demo_store {
+	background-color: var(--global--color-primary);
+	color: var(--global--color-background);
+	position: fixed;
+	top: auto;
+	bottom: 0;
+}
+
+/**
+ * Structure
+ */
+/**
+ * Vertical Space - 32px
+ */
+body[class*="woocommerce"] #page div.summary > *:not(:first-child),
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:first-child),
+body[class*="woocommerce"] #page .products.related > *:not(:first-child),
+body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:first-child) {
+	margin-top: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page div.summary > *:not(:last-child),
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:last-child),
+body[class*="woocommerce"] #page .products.related > *:not(:last-child),
+body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:last-child) {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page div.summary > *:empty + *,
+body[class*="woocommerce"] #page div.summary > .form-row-last,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:empty + *,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > .form-row-last,
+body[class*="woocommerce"] #page .products.related > *:empty + *,
+body[class*="woocommerce"] #page .products.related > .form-row-last,
+body[class*="woocommerce"] #page .up-sells > *:empty + *,
+body[class*="woocommerce"] #page .up-sells > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-order > .form-row-last,
+.woocommerce-account #page .entry-content .woocommerce > *:empty + *,
+.woocommerce-account #page .entry-content .woocommerce > .form-row-last {
+	margin-top: 0;
+}
+
+body[class*="woocommerce"] #page div.summary > *:not(img):empty,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(img):empty,
+body[class*="woocommerce"] #page .products.related > *:not(img):empty,
+body[class*="woocommerce"] #page .up-sells > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty,
+.woocommerce-account #page .entry-content .woocommerce > *:not(img):empty {
+	margin: 0;
+}
+
+/**
+ * Vertical Space - 16px
+ */
+#woocommerce-wrapper ul.products li.product a > *:not(:first-child),
+#woocommerce-wrapper ul.products li.product-category a > *:not(:first-child),
+body[class*="woocommerce"] #page ul.products li.product a > *:not(:first-child),
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:first-child) {
+	margin-top: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product a > .price,
+#woocommerce-wrapper ul.products li.product-category a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product-category a > .price,
+body[class*="woocommerce"] #page ul.products li.product a > *:not(:last-child),
+body[class*="woocommerce"] #page ul.products li.product a > .price,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(:last-child),
+body[class*="woocommerce"] #page ul.products li.product-category a > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .price,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .price,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > .price,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .price,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .price,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .price,
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-Address > .price,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .price,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > .price,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > .price,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > .price,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > .price,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order-downloads > .price,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order-details > .price,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-customer-details > .price {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product a > .form-row-last,
+#woocommerce-wrapper ul.products li.product-category a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product-category a > .form-row-last,
+body[class*="woocommerce"] #page ul.products li.product a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product a > .form-row-last,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product-category a > .form-row-last,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .form-row-last,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .form-row-last,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart > .form-row-last,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-Address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-products-header > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-customer-details > .form-row-last {
+	margin-top: 0;
+}
+
+#woocommerce-wrapper ul.products li.product a > *:empty,
+#woocommerce-wrapper ul.products li.product-category a > *:empty,
+body[class*="woocommerce"] #page ul.products li.product a > *:empty,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:empty,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:empty,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty,
+body[class*="woocommerce"] #page .woocommerce-Address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:empty,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:empty,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:empty,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:empty,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:empty {
+	margin: 0;
+}
+
+/**
+ * Page Imports
+ */
+/**
+ * Cart page
+ */
+body[class*="woocommerce"] #page table.shop_table td.product-remove {
+	border-width: 0;
+}
+
+@media only screen and (min-width: 822px) {
+	body[class*="woocommerce"] #page table.shop_table td.product-remove {
+		height: var(--global--font-size-sm);
+		width: var(--global--font-size-sm);
+	}
+}
+
+body[class*="woocommerce"] #page td.product-thumbnail {
+	width: calc(6 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page td.product-thumbnail img {
+	width: inherit;
+}
+
+body[class*="woocommerce"] #page td.product-name {
+	font-family: var(--global--font-primary);
+	font-weight: 700;
+}
+
+body[class*="woocommerce"] #page td.product-name a {
+	max-width: 50%;
+}
+
+body[class*="woocommerce"] #page td.product-name dl.variation dt,
+body[class*="woocommerce"] #page td.product-name dl.variation .wc-item-meta-label,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta dt,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta .wc-item-meta-label {
+	margin-left: calc(0.5 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page td.product-name p.backorder_notification {
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page td.product-quantity {
+	min-width: calc(5 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page table.cart td.actions .input-text {
+	width: inherit;
+	float: inherit;
+	padding: var(--global--spacing-unit);
+}
+
+/**
+ * Checkout page
+ */
+body[class*="woocommerce"] #page .woocommerce-order h2 {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
+	display: flex;
+	justify-content: space-between;
+	align-content: flex-start;
+	align-items: stretch;
+	border: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
+	border: none;
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	margin-left: 0;
+	padding: var(--wc--table--padding);
+	text-transform: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.email {
+	word-break: break-word;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
+	border-left: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:before, body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:after {
+	content: none !important;
+	display: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_coupon {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page form.checkout_coupon,
+body[class*="woocommerce"] #page form.login,
+body[class*="woocommerce"] #page form.register {
+	border-color: var(--wc--table--border-color);
+	padding: var(--wc--table--padding);
+	margin-top: inherit;
+	margin-bottom: inherit;
+	text-align: right;
+	border-radius: 0;
+}
+
+body[class*="woocommerce"] #page ul.order_details {
+	padding-right: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce-customer-details address {
+	border-radius: 0;
+	border-color: var(--global--color-border);
+	border-left-width: 1px;
+	border-bottom-width: 1px;
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart .product-thumbnail {
+	min-width: var(--global--spacing-horizontal);
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart img {
+	width: calc(2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
+	border-color: var(--global--color-border);
+	padding: calc(0.5 * var(--global--spacing-unit));
+	margin: 0 0 0 var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout {
+	padding: var(--global--spacing-vertical) 0;
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.checkout-button {
+	margin-bottom: var(--global--spacing-unit);
+	font-size: var(--global--font-size-md);
+	padding: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .checkout .create-account small {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment {
+	background: transparent;
+	border: var(--wc--table--border-width) solid var(--wc--table--border-color);
+	border-radius: var(--wc--table--border-radius);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods {
+	padding: var(--wc--table--padding);
+	border-bottom-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods li {
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods li input {
+	margin-left: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page #payment div.form-row {
+	padding: var(--wc--table--padding);
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box {
+	padding: calc(0.5 * var(--wc--table--padding));
+	margin-bottom: calc(0.5 * var(--wc--table--padding));
+	margin-top: calc(0.5 * var(--wc--table--padding));
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+	border-radius: var(--wc--table--border-radius);
+	line-height: var(--global--line-height-body);
+	background-color: var(--global--color-background-dark);
+	color: var(--global--color-foreground-dark);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box input.input-text,
+body[class*="woocommerce"] #page #payment div.payment_box textarea {
+	border-color: var(--wc--table--border-color);
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box ::-webkit-input-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
+	margin-left: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form {
+	margin-top: var(--wc--table--padding);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-number,
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-expiry,
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-cvc {
+	font-size: var(--global--font-size-sm);
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box span.help {
+	font-size: var(--global--font-size-sm);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .form-row {
+	margin: 0 0 var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box::before {
+	border-bottom-color: var(--global--color-background-dark);
+	/* arrow size / color */
+}
+
+body[class*="woocommerce"] #page #payment .payment_method_paypal .about_paypal {
+	float: left;
+	line-height: 52px;
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page #payment .payment_method_paypal img {
+	max-height: 52px;
+	vertical-align: middle;
+}
+
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
+	border-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
+	outline-color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .checkout h3 {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+}
+
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
+	border-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
+	outline-color: var(--global--color-alert-error);
+}
+
+/**
+ * Account page
+ */
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
+	line-height: var(--global--line-height-heading);
+	display: inline-table;
+}
+
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation + *:not(:first-child) {
+	margin-top: 0;
+}
+
+@media only screen and (min-width: 592px) {
+	body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+		width: 20%;
+	}
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
+	display: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
+	border: 1px solid var(--global--color-border);
+	padding: var(--global--spacing-unit);
+	border-radius: 3px;
+}
+
+@media only screen and (min-width: 592px) {
+	body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+		width: calc(80% - var(--global--spacing-horizontal));
+	}
+}
+
+body[class*="woocommerce"] #page .addresses .title h3 {
+	font-size: var(--global--font-size-base);
+}
+
+body[class*="woocommerce"] #page .addresses .title .edit {
+	line-height: 1;
+}
+
+.woocommerce-account .entry-content .woocommerce > h2,
+body[class*="woocommerce"] #page div[class*="woocommerce"] h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+/**
+ * Products Page
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Remove the bright yellow background on mark elements.
+	 */
+}
+
+body[class*="woocommerce"] #page mark {
+	background: transparent;
+}
+
+body[class*="woocommerce"] #page .woocommerce-result-count {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce-ordering {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce-ordering select {
+	vertical-align: top;
+}
+
+/**
+ * Single Product Page
+ */
+.single-product #page #woocommerce-wrapper div.product div.images {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images div.thumbnails {
+	padding-top: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
+	background-color: var(--global--color-background);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__image--placeholder {
+	border-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger {
+	font-size: var(--global--font-size-md);
+	background: var(--global--color-background);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
+	border-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::after {
+	background-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price {
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-xl);
+	line-height: var(--global--line-height-heading);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
+	color: currentColor;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-alert-warning);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary p.stock {
+	font-size: var(--global--font-size-base);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .stock {
+	color: var(--global--color-primary);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
+	color: red;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .entry-title + .woocommerce-product-rating {
+	margin-top: calc(-1 * var(--global--spacing-vertical));
+}
+
+.single-product #page #woocommerce-wrapper div.product .product_meta > * {
+	display: block;
+}
+
+.single-product #page #woocommerce-wrapper div.product > .onsale {
+	left: auto;
+	right: -0.5em;
+}
+
+.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
+.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
+	color: var(--global--color-alert-success);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.social {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+.single-product #page #woocommerce-wrapper div.product p.cart {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations td,
+.single-product #page #woocommerce-wrapper div.product form.cart .variations th {
+	line-height: var(--global--line-height-body);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations select {
+	margin-left: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations td.label {
+	padding-left: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .woocommerce-variation-description p {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .reset_variations {
+	font-size: var(--global--font-size-sm);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
+	padding-left: var(--global--spacing-unit);
+	padding-right: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .group_table td {
+	padding-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity,
+.single-product #page #woocommerce-wrapper div.product form.cart button {
+	float: inherit;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity.hidden,
+.single-product #page #woocommerce-wrapper div.product form.cart button.hidden {
+	display: none;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div {
+	text-align: right;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div .wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+/**
+ * Widget Imports
+ */
+/**
+ * Cart Widget
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Cart Widget product list
+	 */
+}
+
+body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
+	font-family: var(--global--font-primary);
+	line-height: var(--global--line-height-heading);
+}
+
+body[class*="woocommerce"] #page ul.cart_list li img,
+body[class*="woocommerce"] #page ul.product_list_widget li img {
+	margin-right: var(--global--spacing-unit);
+	width: calc(2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl,
+body[class*="woocommerce"] #page ul.product_list_widget li dl {
+	border-right-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl dt,
+body[class*="woocommerce"] #page ul.cart_list li dl dd,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dt,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dd {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
+	border-top: none;
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
+	border-bottom: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
+	border-top: 1px solid var(--wc--table--border-color);
+	padding: var(--global--spacing-unit) calc(2 * var(--global--spacing-horizontal)) var(--global--spacing-unit) 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li a.remove {
+	top: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a#woo_pp_ec_button {
+	padding: 0;
+}
+
+/**
+ * Filter by Price Widget
+ */
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-range,
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-handle {
+	background-color: var(--global--color-primary);
+}
+
+body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
+	background-color: var(--global--color-foreground-light);
+}
+
+/**
+ * Filter by Product List Widgets
+ */
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		flex: 0 1 auto;
+		margin-bottom: var(--global--spacing-vertical);
+		padding: 0;
+		width: calc((100% / 3) - var(--global--spacing-unit));
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li:nth-child(3n+2):last-child {
+		margin-right: calc(1.5 * var(--global--spacing-unit));
+		margin-left: auto;
+	}
+}

seedlet/assets/css/style-woocommerce.css

@@ -0,0 +1,2058 @@
+/**
+ * Repsonsive Styles
+ */
+/**
+ * Required Variables
+ */
+/**
+ * Root Media Query Variables
+ */
+:root {
+	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
+	--responsive--aligndefault-width: 100%;
+	--responsive--alignwide-width: 100%;
+	--responsive--alignfull-width: 100%;
+	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
+	--responsive--alignright-margin: var(--global--spacing-horizontal);
+	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+}
+
+@media only screen and (min-width: 482px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 652px) {
+	:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 822px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	:root {
+		--responsive--aligndefault-width: calc(652px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(822px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+/**
+ * Extends
+ */
+.default-max-width {
+	max-width: var(--responsive--aligndefault-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wide-max-width {
+	max-width: var(--responsive--alignwide-width);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@media only screen and (min-width: 482px) {
+	.full-max-width {
+		max-width: var(--responsive--alignfull-width);
+		width: auto;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+body[class*="woocommerce"] .entry-content > .woocommerce {
+	margin-left: auto;
+	margin-right: auto;
+	width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
+	max-width: var(--responsive--alignfull-width);
+}
+
+/**
+ * Output
+ */
+body[class*="woocommerce"] #page .site-content #respond input#submit,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt,
+body[class*="woocommerce"] #page .site-content a.button,
+body[class*="woocommerce"] #page .site-content a.button.alt,
+body[class*="woocommerce"] #page .site-content button.button,
+body[class*="woocommerce"] #page .site-content button.button.alt,
+body[class*="woocommerce"] #page .site-content input.button,
+body[class*="woocommerce"] #page .site-content input.button.alt,
+body[class*="woocommerce"] #page .site-content .cart .button,
+body[class*="woocommerce"] #page .site-content .cart input.button,
+body[class*="woocommerce"] #page .site-content a.added_to_cart,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:before,
+body[class*="woocommerce"] #page .site-content a.button:before,
+body[class*="woocommerce"] #page .site-content a.button.alt:before,
+body[class*="woocommerce"] #page .site-content button.button:before,
+body[class*="woocommerce"] #page .site-content button.button.alt:before,
+body[class*="woocommerce"] #page .site-content input.button:before,
+body[class*="woocommerce"] #page .site-content input.button.alt:before,
+body[class*="woocommerce"] #page .site-content .cart .button:before,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:before,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:before, body[class*="woocommerce"] #page .site-content #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:after,
+body[class*="woocommerce"] #page .site-content a.button:after,
+body[class*="woocommerce"] #page .site-content a.button.alt:after,
+body[class*="woocommerce"] #page .site-content button.button:after,
+body[class*="woocommerce"] #page .site-content button.button.alt:after,
+body[class*="woocommerce"] #page .site-content input.button:after,
+body[class*="woocommerce"] #page .site-content input.button.alt:after,
+body[class*="woocommerce"] #page .site-content .cart .button:after,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:after,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:after,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:before,
+body[class*="woocommerce"] #page .site-content a.button:before,
+body[class*="woocommerce"] #page .site-content a.button.alt:before,
+body[class*="woocommerce"] #page .site-content button.button:before,
+body[class*="woocommerce"] #page .site-content button.button.alt:before,
+body[class*="woocommerce"] #page .site-content input.button:before,
+body[class*="woocommerce"] #page .site-content input.button.alt:before,
+body[class*="woocommerce"] #page .site-content .cart .button:before,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:before,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:before,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:before,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:before,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content #respond input#submit.alt:after,
+body[class*="woocommerce"] #page .site-content a.button:after,
+body[class*="woocommerce"] #page .site-content a.button.alt:after,
+body[class*="woocommerce"] #page .site-content button.button:after,
+body[class*="woocommerce"] #page .site-content button.button.alt:after,
+body[class*="woocommerce"] #page .site-content input.button:after,
+body[class*="woocommerce"] #page .site-content input.button.alt:after,
+body[class*="woocommerce"] #page .site-content .cart .button:after,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:after,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:after,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:after,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:after,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:active,
+body[class*="woocommerce"] #page .site-content a.button:active,
+body[class*="woocommerce"] #page .site-content button.button:active,
+body[class*="woocommerce"] #page .site-content input.button:active,
+body[class*="woocommerce"] #page .site-content .cart .button:active,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:active,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:active,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+body[class*="woocommerce"] #page .site-content #respond input#submit:hover,
+body[class*="woocommerce"] #page .site-content a.button:hover,
+body[class*="woocommerce"] #page .site-content button.button:hover,
+body[class*="woocommerce"] #page .site-content input.button:hover,
+body[class*="woocommerce"] #page .site-content .cart .button:hover,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:hover, body[class*="woocommerce"] #page .site-content #respond input#submit:focus,
+body[class*="woocommerce"] #page .site-content a.button:focus,
+body[class*="woocommerce"] #page .site-content button.button:focus,
+body[class*="woocommerce"] #page .site-content input.button:focus,
+body[class*="woocommerce"] #page .site-content .cart .button:focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:focus, body[class*="woocommerce"] #page .site-content #respond input.has-focus#submit,
+body[class*="woocommerce"] #page .site-content a.has-focus.button,
+body[class*="woocommerce"] #page .site-content button.has-focus.button,
+body[class*="woocommerce"] #page .site-content input.has-focus.button,
+body[class*="woocommerce"] #page .site-content .cart .has-focus.button,
+body[class*="woocommerce"] #page .site-content a.has-focus.added_to_cart,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a.has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
+	border-radius: 100%;
+	background-color: var(--global--color-alert-warning);
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-sm);
+	font-weight: 700;
+	font-family: var(--global--font-primary);
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}
+
+/**
+ * WooCommerce styles
+ */
+/**
+ * Element Imports
+ */
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page .woocommerce-breadcrumb {
+	margin-bottom: var(--global--spacing-vertical);
+	font-size: var(--global--font-size-base);
+	font-family: var(--global--font-primary);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
+	color: currentColor;
+}
+
+/**
+ * Notices
+ */
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info,
+body[class*="woocommerce"] #page .woocommerce-success,
+body[class*="woocommerce"] #page .woocommerce-error,
+body[class*="woocommerce"] #page .woocommerce-warning {
+	padding: var(--global--spacing-unit) var(--global--spacing-vertical) var(--global--spacing-unit) calc(2 * var(--global--spacing-vertical));
+	margin-bottom: var(--global--spacing-vertical);
+	background-color: var(--global--color-tertiary);
+	color: var(--global--color-foreground-dark);
+	border-top-color: var(--global--color-primary-default);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--message,
+body[class*="woocommerce"] #page .woocommerce-notice--info {
+	color: var(--global--color-foreground);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--success {
+	color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--error {
+	color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--warning {
+	color: var(--global--color-alert-warning);
+}
+
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info {
+	border-top-color: var(--global--color-alert-info);
+}
+
+body[class*="woocommerce"] #page .woocommerce-message:before,
+body[class*="woocommerce"] #page .woocommerce-info:before {
+	color: var(--global--color-alert-info);
+}
+
+body[class*="woocommerce"] #page .woocommerce-success {
+	border-top-color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-success:before {
+	color: var(--global--color-alert-success);
+}
+
+body[class*="woocommerce"] #page .woocommerce-error {
+	border-top-color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-error:before {
+	color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .woocommerce-warning {
+	border-top-color: var(--global--color-alert-warning);
+}
+
+body[class*="woocommerce"] #page .woocommerce-warning:before {
+	color: var(--global--color-alert-warning);
+}
+
+/**
+ * Star ratings
+ */
+/**
+ * Password strength meter
+ */
+body[class*="woocommerce"] #page .woocommerce-password-strength {
+	text-align: center;
+	font-weight: 600;
+	padding: calc(0.5 * var(--wc--table--padding));
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
+	background-color: var(--global--color-alert-success);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.good {
+	background-color: var(--global--color-alert-warning);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.short {
+	background-color: var(--global--color-alert-error);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
+	background-color: var(--global--color-alert-error);
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-hint {
+	font-size: var(--global--font-size-xs);
+}
+
+/**
+ * Remove Icon
+ */
+body[class*="woocommerce"] #page a.remove {
+	font-size: var(--global--font-size-lg);
+	font-family: sans-serif !important;
+	height: var(--global--font-size-md);
+	width: var(--global--font-size-md);
+	color: red !important;
+}
+
+body[class*="woocommerce"] #page a.remove:hover {
+	color: var(--global--color-background) !important;
+	background: red;
+}
+
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page small.note {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+	margin-top: var(--global--spacing-unit);
+}
+
+/**
+ * Star ratings
+ */
+body[class*="woocommerce"] #page .star-rating::before {
+	color: var(--wc--star-rating--color);
+	content: "\53\53\53\53\53";
+	opacity: 0.4;
+}
+
+body[class*="woocommerce"] #page .star-rating span {
+	color: var(--wc--star-rating--color);
+}
+
+body[class*="woocommerce"] #page p.stars a {
+	color: var(--wc--star-rating--color);
+}
+
+/**
+ * Tables
+ */
+body[class*="woocommerce"] #page table.shop_table {
+	border-collapse: collapse;
+	border: var(--wc--table--border-width) solid var(--wc--table--border-color);
+	border-radius: var(--wc--table--border-radius);
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page table.shop_table th {
+	padding: var(--wc--table--padding);
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page table.shop_table td {
+	border-top: none;
+	padding: var(--wc--table--padding);
+	word-break: break-word;
+}
+
+body[class*="woocommerce"] #page table.shop_table tr {
+	border-bottom: var(--wc--table--border-width) solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_table tfoot td,
+body[class*="woocommerce"] #page table.shop_table tfoot th,
+body[class*="woocommerce"] #page table.shop_table tbody th {
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes {
+	border-top-color: var(--wc--table--border-color);
+	border-top-style: solid;
+	margin-bottom: var(--global--spacing-vertical);
+	border-bottom: var(--wc--table--border-width) solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes th {
+	padding: calc(0.5 * var(--wc--table--padding));
+	border-bottom-color: var(--wc--table--border-color);
+	border-bottom-style: solid;
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td {
+	font-style: inherit;
+	border-bottom-color: var(--wc--table--border-color);
+	border-bottom-style: solid;
+	line-height: var(--global--line-height-body);
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td p {
+	margin: 0;
+	padding-top: calc(0.5 * var(--wc--table--padding));
+	padding-bottom: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) th {
+	background: var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page table.my_account_orders {
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page table.my_account_orders th,
+body[class*="woocommerce"] #page table.my_account_orders td {
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page table td,
+body[class*="woocommerce"] #page table th {
+	border: inherit;
+}
+
+/**
+ * Block Imports
+ */
+/**
+ * Button
+ */
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce a.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce button.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled[disabled],
+body[class*="woocommerce"] #page .site-content .woocommerce input.button.disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled[disabled] {
+	cursor: not-allowed;
+}
+
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce #respond input#submit:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce a.button:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce button.button:disabled[disabled]:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button.disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled:hover,
+body[class*="woocommerce"] #page .site-content .woocommerce input.button:disabled[disabled]:hover {
+	background-color: var(--global--color-primary-default);
+}
+
+/**
+ * WooCommerce Block Grid
+ * - Used by:
+ *   .wp-block-product-new
+ *   .wp-block-product-best-sellers
+ *   .wp-block-product-on-sale
+ *   .wp-block-product-top-rated
+ *   .wp-block-product-categroy
+ *   .wp-block-products-by-attribute
+ */
+#content .wc-block-grid .wc-block-grid__product > *:not(:first-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:first-child) {
+	margin-top: var(--global--spacing-unit);
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(:last-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:last-child) {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(img):empty + *,
+#content .wc-block-grid .wc-block-grid__product-link > *:not(img):empty + * {
+	margin-top: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:last-child,
+#content .wc-block-grid .wc-block-grid__product-link > *:last-child {
+	margin-bottom: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:empty,
+#content .wc-block-grid .wc-block-grid__product-link > *:empty {
+	margin: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product-title {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-base);
+}
+
+#content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
+	color: var(--global--color-secondary);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price {
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price ins {
+	color: var(--global--color-alert-success);
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
+	right: calc(-0.5em + var(--global--spacing-unit));
+	margin: 0;
+}
+
+/**
+ * WooCommerce Featured Product
+ */
+#content .wc-block-featured-product .wc-block-featured-product__description:empty,
+#content .wc-block-featured-product .wc-block-featured-product__link:empty,
+#content .wc-block-featured-product .wc-block-featured-product__price:empty,
+#content .wc-block-featured-product .wc-block-featured-product__title:empty,
+#content .wc-block-featured-product .wc-block-featured-product__variation:empty {
+	padding: 0;
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price {
+	font-size: var(--global--font-size-xl);
+}
+
+#content .wc-block-featured-product .wc-block-featured-product__price ins {
+	text-decoration: none;
+}
+
+/**
+ * Components Imports
+ */
+/**
+ * Cart Collaterals
+ */
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr th {
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells > h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals p small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals p small {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table {
+	margin: 0 0 calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table th {
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table small {
+	color: var(--wc--mini-cart--color-count);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
+	color: var(--wc--star-rating--color);
+}
+
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-form,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-button,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-form {
+	margin-top: var(--wc--tabs--padding);
+}
+
+/**
+ * Mini-cart
+ */
+body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_cart {
+	display: inline-block;
+	text-decoration: none;
+}
+
+body[class*="woocommerce"] #page .woo-navigation > #toggle-cart {
+	left: 0;
+	top: 0;
+	right: auto;
+}
+
+body[class*="woocommerce"] #page .woo-navigation > #toggle-cart .open .svg-icon {
+	margin-left: 0;
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation > .woocommerce-menu-container {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(0);
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart {
+	left: auto;
+	right: 0;
+	z-index: 500;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .open {
+	display: none;
+}
+
+body[class*="woocommerce"].wc-navigation-open #page .woo-navigation #toggle-cart .close {
+	display: flex;
+	align-items: center;
+}
+
+@media only screen and (max-width: 481px) {
+	body[class*="woocommerce"].admin-bar.lock-scrolling #page .woo-navigation #toggle-cart {
+		top: 46px;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container {
+		background-color: var(--wc--mini-cart--color-background);
+		color: var(--wc--mini-cart--color-text);
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a,
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a:link,
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container a:visited {
+		color: currentColor;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-menu-container .sub-menu {
+		margin-left: 0;
+	}
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation {
+		flex-direction: column;
+		margin-top: 0;
+	}
+	body[class*="woocommerce"] #page .woo-navigation #toggle-cart {
+		display: none;
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link {
+	display: none;
+	text-decoration: none;
+	line-height: 1;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link > *:not(:last-child) {
+	margin-right: calc(0.25 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .woocommerce-cart-subtotal {
+	color: var(--wc--mini-cart--color-subtotal);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .woocommerce-cart-count {
+	color: var(--wc--mini-cart--color-count);
+	font-weight: normal;
+	white-space: nowrap;
+	display: inline-block;
+	vertical-align: bottom;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link .svg-icon {
+	float: left;
+	height: var(--primary-nav--font-size);
+	width: var(--primary-nav--font-size);
+	vertical-align: middle;
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-link {
+		align-items: center;
+		display: flex;
+		flex-wrap: nowrap;
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+	background-color: var(--wc--mini-cart--color-background);
+	color: var(--wc--mini-cart--color-text);
+	max-width: 100%;
+	padding: var(--primary-nav--padding) 0;
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+		max-width: calc(20 * var(--global--spacing-horizontal));
+		padding: var(--primary-nav--padding);
+	}
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list {
+	border-bottom: 1px solid var(--wc--mini-cart--color-border);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list li {
+	border-top: 1px solid var(--wc--mini-cart--color-border);
+	padding-left: var(--global--spacing-horizontal);
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:focus:not(.remove) {
+	background-color: transparent;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:focus {
+	text-decoration: none;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__total {
+	text-align: right;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons {
+	text-align: right;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
+	clear: right;
+	color: var(--wc--mini-cart--button-text-color);
+	background-color: var(--wc--mini-cart--button-background-color);
+	margin: 0;
+	float: right;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a {
+	clear: inherit;
+	float: inherit;
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2):not(:last-child),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a:not(:last-child) {
+	margin-right: calc(0.5 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+	margin-bottom: calc(0.5 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a.wcppec-cart-widget-button {
+	display: inline-block;
+}
+
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget p.buttons.wcppec-cart-widget-spb {
+	padding: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li a,
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li a {
+	padding: 0;
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li a:not(.remove),
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-mini-cart__total {
+	font-family: var(--primary-nav--font-family);
+	font-size: var(--primary-nav--font-size);
+}
+
+body[class*="woocommerce"] #page .woo-navigation ul.cart_list li .quantity,
+body[class*="woocommerce"] #page .woo-navigation ul.product_list_widget li .quantity {
+	font-size: var(--global--font-size-base);
+}
+
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
+		left: auto;
+		right: 0;
+	}
+	body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+		max-width: var(--wc--mini-cart--width);
+	}
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item:hover > ul:before,
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item.focus > ul:before,
+	body[class*="woocommerce"] #page .woo-navigation > div > ul > li.woocommerce-menu-item.current-menu-item > ul:before {
+		margin-left: auto;
+		margin-right: var(--global--spacing-unit);
+	}
+}
+
+.woocommerce-cart #page .woocommerce-menu-item .sub-menu,
+.woocommerce-checkout #page .woocommerce-menu-item .sub-menu {
+	display: none;
+}
+
+/**
+ * Pagination
+ */
+body[class*="woocommerce"] #page .woocommerce-pagination {
+	margin: 0 calc(-0.66 * var(--global--spacing-unit));
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers {
+	border: none;
+	display: flex;
+	justify-content: start;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li > * {
+	display: block;
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-md);
+	font-weight: 600;
+	padding-left: calc(0.66 * var(--global--spacing-unit));
+	padding-right: calc(0.66 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li {
+	border: none;
+	float: inherit;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a {
+	text-decoration: unset;
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li span.current,
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:hover,
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li a:focus {
+	background: transparent;
+	color: var(--global--color-foreground-default);
+}
+
+body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+/**
+ * Product loops
+ */
+body[class*="woocommerce"] #page .woocommerce-products-header img {
+	display: block;
+}
+
+#woocommerce-wrapper .products ul,
+#woocommerce-wrapper ul.products,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells .products ul,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells .products ul,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products {
+	margin: 0;
+	padding: 0;
+}
+
+#woocommerce-wrapper ul.products li.product,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product {
+	text-align: center;
+}
+
+#woocommerce-wrapper ul.products li.product .star-rating,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .star-rating,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .star-rating {
+	font-size: var(--global--font-size-sm);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#woocommerce-wrapper ul.products li.product h3,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-product__title,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-category__title,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product h3,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-category__title,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product h3,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__title,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-category__title {
+	padding: inherit;
+	font-size: var(--global--font-size-base);
+}
+
+#woocommerce-wrapper ul.products li.product a img,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product a img,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product a img {
+	margin: inherit;
+}
+
+#woocommerce-wrapper ul.products li.product .woocommerce-placeholder,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .woocommerce-placeholder {
+	border-color: var(--global--color-border-default);
+}
+
+#woocommerce-wrapper ul.products li.product .button,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .button,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .button {
+	margin-top: inherit;
+}
+
+#woocommerce-wrapper ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .added_to_cart {
+	margin-top: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product .price,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
+	color: var(--global--color-primary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+#woocommerce-wrapper ul.products li.product .price del,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price del,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price del {
+	color: inherit;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+#woocommerce-wrapper ul.products li.product .price ins,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price ins,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+#woocommerce-wrapper ul.products li.product .price .from,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price .from,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price .from {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-alert-warning);
+}
+
+#woocommerce-wrapper ul.products li.product.sale a > .price ins,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product.sale a > .price ins {
+	color: var(--global--color-alert-success);
+}
+
+/**
+ * Tabs
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Tabs
+	 */
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
+	padding-left: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
+	background-color: var(--global--color-tertiary);
+	border-color: var(--wc--tabs--border-color);
+	border-top-left-radius: var(--wc--tabs--border-radius);
+	border-top-right-radius: var(--wc--tabs--border-radius);
+	padding-left: 0;
+	padding-right: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
+	color: var(--global--color-foreground-light);
+	padding-left: var(--wc--tabs--padding);
+	padding-right: var(--wc--tabs--padding);
+	padding-top: calc(0.5 * var(--wc--tabs--padding));
+	padding-bottom: calc(0.5 * var(--wc--tabs--padding));
+	font-weight: normal;
+	border-bottom: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
+	color: var(--global--color-primary-hover);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
+	background-color: var(--global--color-background);
+	border-color: var(--wc--tabs--border-color);
+	border-bottom-color: var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
+	color: var(--global--color-foreground-dark);
+	text-shadow: inherit;
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::before {
+	box-shadow: 2px 2px 0 var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active::after {
+	box-shadow: -2px 2px 0 var(--global--color-background);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before, body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
+	border-color: var(--wc--tabs--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::before {
+	box-shadow: 2px 2px 0 var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li::after {
+	box-shadow: -2px 2px 0 var(--global--color-tertiary);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs::before {
+	border-bottom-color: var(--wc--tabs--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel h2,
+body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-lg);
+}
+
+/**
+ * Reviews
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Reviews
+	 */
+}
+
+body[class*="woocommerce"] #page #reviews h2 small {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+	margin: inherit;
+}
+
+body[class*="woocommerce"] #page #reviews h2 small a {
+	color: currentColor;
+}
+
+body[class*="woocommerce"] #page #reviews .comment-form .stars a {
+	border-bottom: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist {
+	padding-left: 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
+	color: var(--global--color-foreground-light);
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar {
+	padding: 0;
+	width: calc(1.5 * var(--global--spacing-vertical));
+	height: auto;
+	background: transparent;
+	border-color: var(--global--color-border-default);
+	margin: 0;
+	box-shadow: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
+	font-family: var(--global--font-primary);
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
+	margin-left: calc(4 * var(--global--spacing-unit));
+	border: 1px solid var(--global--color-border);
+	border-radius: 4px;
+	padding: 1em 1em 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p {
+	margin: 0 0 1em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p.meta {
+	font-size: 0.83em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children {
+	list-style: none outside;
+	margin: 20px 0 0 50px;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .star-rating {
+	display: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
+	border: 1px solid var(--global--color-border);
+	border-radius: 4px;
+	padding: 1em 1em 0;
+	margin: 20px 0 0 50px;
+}
+
+body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
+	content: "";
+}
+
+/**
+ * Pagination
+ */
+body[class*="woocommerce"] .woocommerce-store-notice,
+body[class*="woocommerce"] p.demo_store {
+	background-color: var(--global--color-primary);
+	color: var(--global--color-background);
+	position: fixed;
+	top: auto;
+	bottom: 0;
+}
+
+/**
+ * Structure
+ */
+/**
+ * Vertical Space - 32px
+ */
+body[class*="woocommerce"] #page div.summary > *:not(:first-child),
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:first-child),
+body[class*="woocommerce"] #page .products.related > *:not(:first-child),
+body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:first-child) {
+	margin-top: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page div.summary > *:not(:last-child),
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:last-child),
+body[class*="woocommerce"] #page .products.related > *:not(:last-child),
+body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:last-child) {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page div.summary > *:empty + *,
+body[class*="woocommerce"] #page div.summary > .form-row-last,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:empty + *,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > .form-row-last,
+body[class*="woocommerce"] #page .products.related > *:empty + *,
+body[class*="woocommerce"] #page .products.related > .form-row-last,
+body[class*="woocommerce"] #page .up-sells > *:empty + *,
+body[class*="woocommerce"] #page .up-sells > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-order > .form-row-last,
+.woocommerce-account #page .entry-content .woocommerce > *:empty + *,
+.woocommerce-account #page .entry-content .woocommerce > .form-row-last {
+	margin-top: 0;
+}
+
+body[class*="woocommerce"] #page div.summary > *:not(img):empty,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(img):empty,
+body[class*="woocommerce"] #page .products.related > *:not(img):empty,
+body[class*="woocommerce"] #page .up-sells > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty,
+.woocommerce-account #page .entry-content .woocommerce > *:not(img):empty {
+	margin: 0;
+}
+
+/**
+ * Vertical Space - 16px
+ */
+#woocommerce-wrapper ul.products li.product a > *:not(:first-child),
+#woocommerce-wrapper ul.products li.product-category a > *:not(:first-child),
+body[class*="woocommerce"] #page ul.products li.product a > *:not(:first-child),
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:first-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:first-child) {
+	margin-top: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product a > .price,
+#woocommerce-wrapper ul.products li.product-category a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product-category a > .price,
+body[class*="woocommerce"] #page ul.products li.product a > *:not(:last-child),
+body[class*="woocommerce"] #page ul.products li.product a > .price,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(:last-child),
+body[class*="woocommerce"] #page ul.products li.product-category a > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .price,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .price,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(:last-child),
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .price,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > .price,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .price,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .price,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .price,
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-Address > .price,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .price,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > .price,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .price,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > .price,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > .price,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-checkout > .price,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order-downloads > .price,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-order-details > .price,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-customer-details > .price {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+#woocommerce-wrapper ul.products li.product a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product a > .form-row-last,
+#woocommerce-wrapper ul.products li.product-category a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product-category a > .form-row-last,
+body[class*="woocommerce"] #page ul.products li.product a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product a > .form-row-last,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:not(img):empty + *,
+body[class*="woocommerce"] #page ul.products li.product-category a > .form-row-last,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .form-row-last,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .form-row-last,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart > .form-row-last,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > .form-row-last,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:not(img):empty + *,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-Address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-Address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-products-header > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(img):empty + *,
+body[class*="woocommerce"] #page .woocommerce-customer-details > .form-row-last {
+	margin-top: 0;
+}
+
+#woocommerce-wrapper ul.products li.product a > *:empty,
+#woocommerce-wrapper ul.products li.product-category a > *:empty,
+body[class*="woocommerce"] #page ul.products li.product a > *:empty,
+body[class*="woocommerce"] #page ul.products li.product-category a > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .variations > *:empty,
+body[class*="woocommerce"] #page div.product form.variations_form .single_variation_wrap > *:empty,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:empty,
+body[class*="woocommerce"] #page .woocommerce-EditAccountForm > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content > *:empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty,
+body[class*="woocommerce"] #page .woocommerce-Address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper > *:empty,
+body[class*="woocommerce"] #page .woocommerce-billing-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-column--billing-address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-shipping-fields > *:empty,
+body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:empty,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:empty,
+body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
+body[class*="woocommerce"] #page .woocommerce-order-downloads > *:empty,
+body[class*="woocommerce"] #page .woocommerce-order-details > *:empty,
+body[class*="woocommerce"] #page .woocommerce-customer-details > *:empty {
+	margin: 0;
+}
+
+/**
+ * Page Imports
+ */
+/**
+ * Cart page
+ */
+body[class*="woocommerce"] #page table.shop_table td.product-remove {
+	border-width: 0;
+}
+
+@media only screen and (min-width: 822px) {
+	body[class*="woocommerce"] #page table.shop_table td.product-remove {
+		height: var(--global--font-size-sm);
+		width: var(--global--font-size-sm);
+	}
+}
+
+body[class*="woocommerce"] #page td.product-thumbnail {
+	width: calc(6 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page td.product-thumbnail img {
+	width: inherit;
+}
+
+body[class*="woocommerce"] #page td.product-name {
+	font-family: var(--global--font-primary);
+	font-weight: 700;
+}
+
+body[class*="woocommerce"] #page td.product-name a {
+	max-width: 50%;
+}
+
+body[class*="woocommerce"] #page td.product-name dl.variation dt,
+body[class*="woocommerce"] #page td.product-name dl.variation .wc-item-meta-label,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta dt,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta .wc-item-meta-label {
+	margin-right: calc(0.5 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page td.product-name p.backorder_notification {
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page td.product-quantity {
+	min-width: calc(5 * var(--global--spacing-unit));
+}
+
+body[class*="woocommerce"] #page table.cart td.actions .input-text {
+	width: inherit;
+	float: inherit;
+	padding: var(--global--spacing-unit);
+}
+
+/**
+ * Checkout page
+ */
+body[class*="woocommerce"] #page .woocommerce-order h2 {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
+	display: flex;
+	justify-content: space-between;
+	align-content: flex-start;
+	align-items: stretch;
+	border: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
+	border: none;
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	margin-right: 0;
+	padding: var(--wc--table--padding);
+	text-transform: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.email {
+	word-break: break-word;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
+	border-right: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-md);
+	line-height: var(--global--line-height-heading);
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:before, body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:after {
+	content: none !important;
+	display: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_coupon {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page form.checkout_coupon,
+body[class*="woocommerce"] #page form.login,
+body[class*="woocommerce"] #page form.register {
+	border-color: var(--wc--table--border-color);
+	padding: var(--wc--table--padding);
+	margin-top: inherit;
+	margin-bottom: inherit;
+	text-align: left;
+	border-radius: 0;
+}
+
+body[class*="woocommerce"] #page ul.order_details {
+	padding-left: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce-customer-details address {
+	border-radius: 0;
+	border-color: var(--global--color-border);
+	border-right-width: 1px;
+	border-bottom-width: 1px;
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart .product-thumbnail {
+	min-width: var(--global--spacing-horizontal);
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart img {
+	width: calc(2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
+	border-color: var(--global--color-border);
+	padding: calc(0.5 * var(--global--spacing-unit));
+	margin: 0 var(--global--spacing-unit) 0 0;
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout {
+	padding: var(--global--spacing-vertical) 0;
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.checkout-button {
+	margin-bottom: var(--global--spacing-unit);
+	font-size: var(--global--font-size-md);
+	padding: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .checkout .create-account small {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment {
+	background: transparent;
+	border: var(--wc--table--border-width) solid var(--wc--table--border-color);
+	border-radius: var(--wc--table--border-radius);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods {
+	padding: var(--wc--table--padding);
+	border-bottom-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods li {
+	line-height: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page #payment ul.payment_methods li input {
+	margin-right: var(--global--line-height-body);
+}
+
+body[class*="woocommerce"] #page #payment div.form-row {
+	padding: var(--wc--table--padding);
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box {
+	padding: calc(0.5 * var(--wc--table--padding));
+	margin-bottom: calc(0.5 * var(--wc--table--padding));
+	margin-top: calc(0.5 * var(--wc--table--padding));
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+	border-radius: var(--wc--table--border-radius);
+	line-height: var(--global--line-height-body);
+	background-color: var(--global--color-background-dark);
+	color: var(--global--color-foreground-dark);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box input.input-text,
+body[class*="woocommerce"] #page #payment div.payment_box textarea {
+	border-color: var(--wc--table--border-color);
+	border-top-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box ::-webkit-input-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box :-moz-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box :-ms-input-placeholder {
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
+	margin-right: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form {
+	margin-top: var(--wc--table--padding);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-number,
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-expiry,
+body[class*="woocommerce"] #page #payment div.payment_box .wc-credit-card-form-card-cvc {
+	font-size: var(--global--font-size-sm);
+	padding: calc(0.5 * var(--wc--table--padding));
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box span.help {
+	font-size: var(--global--font-size-sm);
+	color: var(--global--color-foreground-light);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box .form-row {
+	margin: 0 0 var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box p:last-child {
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page #payment div.payment_box::before {
+	border-bottom-color: var(--global--color-background-dark);
+	/* arrow size / color */
+}
+
+body[class*="woocommerce"] #page #payment .payment_method_paypal .about_paypal {
+	float: right;
+	line-height: 52px;
+	font-size: var(--global--font-size-sm);
+}
+
+body[class*="woocommerce"] #page #payment .payment_method_paypal img {
+	max-height: 52px;
+	vertical-align: middle;
+}
+
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
+	border-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
+	outline-color: var(--global--color-alert-error);
+}
+
+body[class*="woocommerce"] #page .checkout h3 {
+	font-family: var(--global--font-primary);
+	font-size: var(--global--font-size-sm);
+	font-weight: bold;
+}
+
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
+	border-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
+	outline-color: var(--global--color-alert-error);
+}
+
+/**
+ * Account page
+ */
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
+	line-height: var(--global--line-height-heading);
+	display: inline-table;
+}
+
+body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation + *:not(:first-child) {
+	margin-top: 0;
+}
+
+@media only screen and (min-width: 592px) {
+	body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
+		width: 20%;
+	}
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+	width: 100%;
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
+	display: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
+	border: 1px solid var(--global--color-border);
+	padding: var(--global--spacing-unit);
+	border-radius: 3px;
+}
+
+@media only screen and (min-width: 592px) {
+	body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+		width: calc(80% - var(--global--spacing-horizontal));
+	}
+}
+
+body[class*="woocommerce"] #page .addresses .title h3 {
+	font-size: var(--global--font-size-base);
+}
+
+body[class*="woocommerce"] #page .addresses .title .edit {
+	line-height: 1;
+}
+
+.woocommerce-account .entry-content .woocommerce > h2,
+body[class*="woocommerce"] #page div[class*="woocommerce"] h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+/**
+ * Products Page
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Remove the bright yellow background on mark elements.
+	 */
+}
+
+body[class*="woocommerce"] #page mark {
+	background: transparent;
+}
+
+body[class*="woocommerce"] #page .woocommerce-result-count {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce-ordering {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce-ordering select {
+	vertical-align: top;
+}
+
+/**
+ * Single Product Page
+ */
+.single-product #page #woocommerce-wrapper div.product div.images {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images div.thumbnails {
+	padding-top: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
+	background-color: var(--global--color-background);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__image--placeholder {
+	border-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger {
+	font-size: var(--global--font-size-md);
+	background: var(--global--color-background);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::before {
+	border-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.images .woocommerce-product-gallery__trigger::after {
+	background-color: var(--global--color-border);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price {
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-xl);
+	line-height: var(--global--line-height-heading);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
+	color: currentColor;
+	opacity: 0.5;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
+	background: none;
+	font-weight: 700;
+	display: inline-block;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
+.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
+	font-size: var(--global--font-size-xs);
+	color: var(--global--color-alert-warning);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary p.stock {
+	font-size: var(--global--font-size-base);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .stock {
+	color: var(--global--color-primary);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .out-of-stock {
+	color: red;
+}
+
+.single-product #page #woocommerce-wrapper div.product div.summary .entry-title + .woocommerce-product-rating {
+	margin-top: calc(-1 * var(--global--spacing-vertical));
+}
+
+.single-product #page #woocommerce-wrapper div.product .product_meta > * {
+	display: block;
+}
+
+.single-product #page #woocommerce-wrapper div.product > .onsale {
+	right: auto;
+	left: -0.5em;
+}
+
+.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
+.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
+	color: var(--global--color-alert-success);
+}
+
+.single-product #page #woocommerce-wrapper div.product div.social {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
+	font-size: var(--global--font-size-lg);
+}
+
+.single-product #page #woocommerce-wrapper div.product p.cart {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations td,
+.single-product #page #woocommerce-wrapper div.product form.cart .variations th {
+	line-height: var(--global--line-height-body);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations select {
+	margin-right: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .variations td.label {
+	padding-right: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .woocommerce-variation-description p {
+	margin-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .reset_variations {
+	font-size: var(--global--font-size-sm);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
+	padding-right: var(--global--spacing-unit);
+	padding-left: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart .group_table td {
+	padding-bottom: var(--global--spacing-unit);
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity,
+.single-product #page #woocommerce-wrapper div.product form.cart button {
+	float: inherit;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity.hidden,
+.single-product #page #woocommerce-wrapper div.product form.cart button.hidden {
+	display: none;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div {
+	text-align: left;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div .wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+/**
+ * Widget Imports
+ */
+/**
+ * Cart Widget
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Cart Widget product list
+	 */
+}
+
+body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
+	font-family: var(--global--font-primary);
+	line-height: var(--global--line-height-heading);
+}
+
+body[class*="woocommerce"] #page ul.cart_list li img,
+body[class*="woocommerce"] #page ul.product_list_widget li img {
+	margin-left: var(--global--spacing-unit);
+	width: calc(2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl,
+body[class*="woocommerce"] #page ul.product_list_widget li dl {
+	border-left-color: var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl dt,
+body[class*="woocommerce"] #page ul.cart_list li dl dd,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dt,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dd {
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
+	border-top: none;
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
+	border-bottom: 1px solid var(--wc--table--border-color);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
+	border-top: 1px solid var(--wc--table--border-color);
+	padding: var(--global--spacing-unit) 0 var(--global--spacing-unit) calc(2 * var(--global--spacing-horizontal));
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li a.remove {
+	top: var(--global--spacing-unit);
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a#woo_pp_ec_button {
+	padding: 0;
+}
+
+/**
+ * Filter by Price Widget
+ */
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-range,
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-handle {
+	background-color: var(--global--color-primary);
+}
+
+body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
+	background-color: var(--global--color-foreground-light);
+}
+
+/**
+ * Filter by Product List Widgets
+ */
+@media only screen and (min-width: 482px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		flex: 0 1 auto;
+		margin-bottom: var(--global--spacing-vertical);
+		padding: 0;
+		width: calc((100% / 3) - var(--global--spacing-unit));
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li:nth-child(3n+2):last-child {
+		margin-left: calc(1.5 * var(--global--spacing-unit));
+		margin-right: auto;
+	}
+}

seedlet/assets/css/variables-editor.css

@@ -0,0 +1,217 @@
+/**
+ * These styles should be loaded by the Block Editor only
+ */
+/**
+ * Variable Configuration
+ * - Import all config files for display in
+ *   the editor, customizer, and front end.
+ */
+/* Blocks */
+/*
+ * Configure Components
+ * - Similar to Blocks but exist outside of the "current" editor context
+ */
+/**
+ * Variable configuration
+ * - import all vendor config files
+ */
+/**
+ * WooCommerce Variables
+ */
+/**
+ * Jetpack Variables
+ */
+body {
+	/* Globals */
+	/* Font Family */
+	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
+	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-code: monospace, monospace;
+	--global--font-ui: var(--global--font-secondary);
+	/* Font Size */
+	--global--font-size-root: 18px;
+	--global--font-size-ratio: 1.2;
+	--global--font-size-base: 1em;
+	--global--font-size-xs: 14px;
+	--global--font-size-sm: 16px;
+	--global--font-size-md: 18px;
+	--global--font-size-lg: 24px;
+	--global--font-size-xl: 28px;
+	--global--font-size-xxl: 32px;
+	--global--font-size-xxxl: 48px;
+	/* Line Height */
+	--global--line-height-base: 1;
+	--global--line-height-body: 1.7;
+	--global--line-height-heading: 1.3;
+	/* Colors */
+	--global--color-primary: #000000;
+	--global--color-primary-hover: #3C8067;
+	--global--color-secondary: #3C8067;
+	--global--color-secondary-hover: #336D58;
+	--global--color-black: black;
+	--global--color-white: white;
+	--global--color-foreground: #333333;
+	--global--color-foreground-light: #444444;
+	--global--color-foreground-dark: #000000;
+	--global--color-background: #FFFFFF;
+	--global--color-tertiary: #FAFBF6;
+	--global--color-background-dark: #DDDDDD;
+	--global--color-border: #EFEFEF;
+	--global--color-text-selection: #EBF2F0;
+	--global--color-alert-success: yellowgreen;
+	--global--color-alert-info: skyblue;
+	--global--color-alert-warning: gold;
+	--global--color-alert-error: salmon;
+	/* Spacing */
+	--global--spacing-unit: 20px;
+	--global--spacing-measure: unset;
+	--global--spacing-horizontal: 25px;
+	--global--spacing-vertical: 30px;
+	/* Elevation */
+	--global--elevation: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
+	/* Other */
+	--global--border-radius-sm: 9px;
+	--global--border-radius-md: 13.5px;
+	--global--border-radius-lg: 18px;
+	--global--border-radius-pill: 180px;
+	--global--border-radius-none: 0;
+	/* Elements */
+	--form--font-family: var(--global--font-secondary);
+	--form--font-size: var(--global--font-size-md);
+	--form--line-height: var(--global-line-height-body);
+	--form--color-text: var(--global--color-foreground);
+	--form--border-color: var(--global--color-border);
+	--form--border-width: 2px;
+	--form--border-radius: 0;
+	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	/* Blocks */
+	--button--color-text: var(--global--color-background);
+	--button--color-text-hover: var(--button--color-text);
+	--button--color-text-active: var(--button--color-text);
+	--button--color-background: var(--global--color-secondary);
+	--button--color-background-hover: var(--global--color-secondary-hover);
+	--button--color-background-active: var(--global--color-primary);
+	--button--font-family: var(--global--font-ui);
+	--button--font-size: var(--global--font-size-base);
+	--button--font-weight: normal;
+	--button--line-height: 1;
+	--button--border-width: 2px;
+	--button--border-radius: 4px;
+	--button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width));
+	--button--padding-horizontal: var(--global--spacing-horizontal);
+	--cover--height: calc( 15 * var(--global--spacing-vertical) );
+	--cover--color-foreground: var(--global--color-foreground-dark);
+	--cover--color-background: var(--global--color-tertiary);
+	--heading--font-family: var(--global--font-primary);
+	--heading--line-height: 1.3;
+	--heading--font-size-h6: var(--global--font-size-base);
+	--heading--font-size-h5: var(--global--font-size-md);
+	--heading--font-size-h4: var(--global--font-size-lg);
+	--heading--font-size-h3: var(--global--font-size-xl);
+	--heading--font-size-h2: var(--global--font-size-xxl);
+	--heading--font-size-h1: var(--global--font-size-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
+	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
+	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
+	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--line-height-h6: 1.3;
+	--heading--line-height-h5: 1.3;
+	--heading--line-height-h4: 1.3;
+	--heading--line-height-h3: var(--heading--line-height);
+	--heading--line-height-h2: var(--heading--line-height);
+	--heading--line-height-h1: var(--heading--line-height);
+	--heading--font-weight: normal;
+	--heading--font-weight-strong: 600;
+	--latest-posts--title-font-family: var(--heading--font-family);
+	--latest-posts--title-font-size: var(--heading--font-size-h3);
+	--latest-posts--description-font-family: var(--global--font-secondary);
+	--latest-posts--description-font-size: var(--global--font-size-sm);
+	--layout-grid--gutter-none: 0px;
+	--layout-grid--gutter-small: calc( var(--global--spacing-unit) / 2);
+	--layout-grid--gutter-medium: var(--global--spacing-unit);
+	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
+	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
+	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--list--font-family: var(--global--font-secondary);
+	--definition-term--font-family: var(--global--font-primary);
+	--pullquote--font-family: var(--global--font-primary);
+	--pullquote--font-size: var(--heading--font-size-h2);
+	--pullquote--font-style: italic;
+	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
+	--pullquote--line-height: var(--global--line-height-heading);
+	--pullquote--border-width: 0;
+	--pullquote--border-color: transparent;
+	--pullquote--color-foreground: var(--global--color-foreground);
+	--pullquote--color-background: var(--global--color-background);
+	--quote--border-color: var(--global--color-secondary);
+	--quote--border-width: 1px;
+	--quote--font-family: var(--global--font-secondary);
+	--quote--font-size: var(--global--font-size-md);
+	--quote--font-size-large: var(--global--font-size-lg);
+	--quote--font-style: normal;
+	--quote--font-style-large: normal;
+	--quote--line-height: var(--global--line-height-body);
+	--quote--line-height-large: 1.5;
+	--separator--border-color: var(--global--color-border);
+	--separator--height: 2px;
+	--separator--width: calc(6 * var(--global--spacing-horizontal));
+	--utilities--font-size-xs: var(--global--font-size-xs);
+	--utilities--font-size-sm: var(--global--font-size-sm);
+	--utilities--font-size-md: var(--global--font-size-md);
+	--utilities--font-size-lg: var(--global--font-size-lg);
+	--utilities--font-size-xl: var(--global--font-size-xl);
+	--utilities--font-size-xxl: var(--global--font-size-xxl);
+	--utilities--font-size-xxxl: var(--global--font-size-xxxl);
+	/* Components */
+	--branding--color-text: var(--global--color-foreground);
+	--branding--color-link: var(--global--color-primary);
+	--branding--color-link-hover: var(--global--color-primary-hover);
+	--branding--title--font-family: var(--global--font-primary);
+	--branding--title--font-size: calc( 1.25 * var(--heading--font-size-h1) );
+	--branding--title--font-size-mobile: var(--heading--font-size-h1);
+	--branding--title--font-weight: 700;
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--description--font-size: var(--global--font-size-sm);
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--logo--max-width: 120px;
+	--branding--logo--max-height: 120px;
+	--branding--logo--max-width-mobile: 96px;
+	--branding--logo--max-height-mobile: 96px;
+	--primary-nav--font-family: var(--global--font-secondary);
+	--primary-nav--font-family-mobile: var(--global--font-primary);
+	--primary-nav--font-size: var(--global--font-size-sm);
+	--primary-nav--font-size-mobile: var(--global--font-size-xxl);
+	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-lg);
+	--primary-nav--font-style: normal;
+	--primary-nav--font-style-sub-menu-mobile: italic;
+	--primary-nav--font-weight: normal;
+	--primary-nav--color-link: var(--global--color-primary);
+	--primary-nav--color-link-hover: var(--global--color-primary-hover);
+	--primary-nav--color-text: var(--global--color-foreground);
+	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit) );
+	--primary-nav--justify-content: center;
+	--social-nav--color-link: var(--global--color-foreground);
+	--social-nav--color-link-hover: var(--global--color-primary-hover);
+	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	/* Vendors */
+	--wc--wrapper-width: default;
+	--wc--table--border-color: var(--global--color-border);
+	--wc--table--border-radius: 0;
+	--wc--table--border-width: 1px;
+	--wc--table--padding: var(--global--spacing-unit);
+	--wc--tabs--border-color: var(--global--color-border);
+	--wc--tabs--border-radius: 10px;
+	--wc--tabs--border-width: 1px;
+	--wc--tabs--padding: var(--global--spacing-horizontal);
+	--wc--mini-cart--color-background: var(--global--color-background);
+	--wc--mini-cart--color-text: var(--global--color-foreground);
+	--wc--mini-cart--color-subtotal: var(--global--color-foreground);
+	--wc--mini-cart--color-count: var(--global--color-foreground-light);
+	--wc--mini-cart--color-border: var(--global--color-border);
+	--wc--mini-cart--button-text-color: var(--button--color-text);
+	--wc--mini-cart--button-background-color: var(--button--color-background);
+	--wc--mini-cart--width: calc(25 * var(--global--spacing-unit));
+	--wc--star-rating--color: var(--global--color-alert-warning);
+}

seedlet/assets/css/variables.css

@@ -0,0 +1,242 @@
+/**
+ * These styles should be loaded on the frontend-only
+ */
+/**
+ * Variable Configuration
+ * - Import all config files for display in
+ *   the editor, customizer, and front end.
+ */
+/* Blocks */
+/*
+ * Configure Components
+ * - Similar to Blocks but exist outside of the "current" editor context
+ */
+/**
+ * Variable configuration
+ * - import all vendor config files
+ */
+/**
+ * WooCommerce Variables
+ */
+/**
+ * Jetpack Variables
+ */
+:root {
+	/* Globals */
+	/* Font Family */
+	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
+	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-code: monospace, monospace;
+	--global--font-ui: var(--global--font-secondary);
+	/* Font Size */
+	--global--font-size-root: 18px;
+	--global--font-size-ratio: 1.2;
+	--global--font-size-base: 1em;
+	--global--font-size-xs: 14px;
+	--global--font-size-sm: 16px;
+	--global--font-size-md: 18px;
+	--global--font-size-lg: 24px;
+	--global--font-size-xl: 28px;
+	--global--font-size-xxl: 32px;
+	--global--font-size-xxxl: 48px;
+	/* Line Height */
+	--global--line-height-base: 1;
+	--global--line-height-body: 1.7;
+	--global--line-height-heading: 1.3;
+	/* Colors */
+	--global--color-primary: #000000;
+	--global--color-primary-hover: #3C8067;
+	--global--color-secondary: #3C8067;
+	--global--color-secondary-hover: #336D58;
+	--global--color-black: black;
+	--global--color-white: white;
+	--global--color-foreground: #333333;
+	--global--color-foreground-light: #444444;
+	--global--color-foreground-dark: #000000;
+	--global--color-background: #FFFFFF;
+	--global--color-tertiary: #FAFBF6;
+	--global--color-background-dark: #DDDDDD;
+	--global--color-border: #EFEFEF;
+	--global--color-text-selection: #EBF2F0;
+	--global--color-alert-success: yellowgreen;
+	--global--color-alert-info: skyblue;
+	--global--color-alert-warning: gold;
+	--global--color-alert-error: salmon;
+	/* Spacing */
+	--global--spacing-unit: 20px;
+	--global--spacing-measure: unset;
+	--global--spacing-horizontal: 25px;
+	--global--spacing-vertical: 30px;
+	/* Elevation */
+	--global--elevation: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
+	/* Other */
+	--global--border-radius-sm: 9px;
+	--global--border-radius-md: 13.5px;
+	--global--border-radius-lg: 18px;
+	--global--border-radius-pill: 180px;
+	--global--border-radius-none: 0;
+	/* Elements */
+	--form--font-family: var(--global--font-secondary);
+	--form--font-size: var(--global--font-size-md);
+	--form--line-height: var(--global-line-height-body);
+	--form--color-text: var(--global--color-foreground);
+	--form--border-color: var(--global--color-border);
+	--form--border-width: 2px;
+	--form--border-radius: 0;
+	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	/* Blocks */
+	--button--color-text: var(--global--color-background);
+	--button--color-text-hover: var(--button--color-text);
+	--button--color-text-active: var(--button--color-text);
+	--button--color-background: var(--global--color-secondary);
+	--button--color-background-hover: var(--global--color-secondary-hover);
+	--button--color-background-active: var(--global--color-primary);
+	--button--font-family: var(--global--font-ui);
+	--button--font-size: var(--global--font-size-base);
+	--button--font-weight: normal;
+	--button--line-height: 1;
+	--button--border-width: 2px;
+	--button--border-radius: 4px;
+	--button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width));
+	--button--padding-horizontal: var(--global--spacing-horizontal);
+	--cover--height: calc( 15 * var(--global--spacing-vertical) );
+	--cover--color-foreground: var(--global--color-foreground-dark);
+	--cover--color-background: var(--global--color-tertiary);
+	--heading--font-family: var(--global--font-primary);
+	--heading--line-height: 1.3;
+	--heading--font-size-h6: var(--global--font-size-base);
+	--heading--font-size-h5: var(--global--font-size-md);
+	--heading--font-size-h4: var(--global--font-size-lg);
+	--heading--font-size-h3: var(--global--font-size-xl);
+	--heading--font-size-h2: var(--global--font-size-xxl);
+	--heading--font-size-h1: var(--global--font-size-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
+	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
+	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
+	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--line-height-h6: 1.3;
+	--heading--line-height-h5: 1.3;
+	--heading--line-height-h4: 1.3;
+	--heading--line-height-h3: var(--heading--line-height);
+	--heading--line-height-h2: var(--heading--line-height);
+	--heading--line-height-h1: var(--heading--line-height);
+	--heading--font-weight: normal;
+	--heading--font-weight-strong: 600;
+	--latest-posts--title-font-family: var(--heading--font-family);
+	--latest-posts--title-font-size: var(--heading--font-size-h3);
+	--latest-posts--description-font-family: var(--global--font-secondary);
+	--latest-posts--description-font-size: var(--global--font-size-sm);
+	--layout-grid--gutter-none: 0px;
+	--layout-grid--gutter-small: calc( var(--global--spacing-unit) / 2);
+	--layout-grid--gutter-medium: var(--global--spacing-unit);
+	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
+	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
+	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--list--font-family: var(--global--font-secondary);
+	--definition-term--font-family: var(--global--font-primary);
+	--pullquote--font-family: var(--global--font-primary);
+	--pullquote--font-size: var(--heading--font-size-h2);
+	--pullquote--font-style: italic;
+	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
+	--pullquote--line-height: var(--global--line-height-heading);
+	--pullquote--border-width: 0;
+	--pullquote--border-color: transparent;
+	--pullquote--color-foreground: var(--global--color-foreground);
+	--pullquote--color-background: var(--global--color-background);
+	--quote--border-color: var(--global--color-secondary);
+	--quote--border-width: 1px;
+	--quote--font-family: var(--global--font-secondary);
+	--quote--font-size: var(--global--font-size-md);
+	--quote--font-size-large: var(--global--font-size-lg);
+	--quote--font-style: normal;
+	--quote--font-style-large: normal;
+	--quote--line-height: var(--global--line-height-body);
+	--quote--line-height-large: 1.5;
+	--separator--border-color: var(--global--color-border);
+	--separator--height: 2px;
+	--separator--width: calc(6 * var(--global--spacing-horizontal));
+	--utilities--font-size-xs: var(--global--font-size-xs);
+	--utilities--font-size-sm: var(--global--font-size-sm);
+	--utilities--font-size-md: var(--global--font-size-md);
+	--utilities--font-size-lg: var(--global--font-size-lg);
+	--utilities--font-size-xl: var(--global--font-size-xl);
+	--utilities--font-size-xxl: var(--global--font-size-xxl);
+	--utilities--font-size-xxxl: var(--global--font-size-xxxl);
+	/* Components */
+	--branding--color-text: var(--global--color-foreground);
+	--branding--color-link: var(--global--color-primary);
+	--branding--color-link-hover: var(--global--color-primary-hover);
+	--branding--title--font-family: var(--global--font-primary);
+	--branding--title--font-size: calc( 1.25 * var(--heading--font-size-h1) );
+	--branding--title--font-size-mobile: var(--heading--font-size-h1);
+	--branding--title--font-weight: 700;
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--description--font-size: var(--global--font-size-sm);
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--logo--max-width: 120px;
+	--branding--logo--max-height: 120px;
+	--branding--logo--max-width-mobile: 96px;
+	--branding--logo--max-height-mobile: 96px;
+	--primary-nav--font-family: var(--global--font-secondary);
+	--primary-nav--font-family-mobile: var(--global--font-primary);
+	--primary-nav--font-size: var(--global--font-size-sm);
+	--primary-nav--font-size-mobile: var(--global--font-size-xxl);
+	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-lg);
+	--primary-nav--font-style: normal;
+	--primary-nav--font-style-sub-menu-mobile: italic;
+	--primary-nav--font-weight: normal;
+	--primary-nav--color-link: var(--global--color-primary);
+	--primary-nav--color-link-hover: var(--global--color-primary-hover);
+	--primary-nav--color-text: var(--global--color-foreground);
+	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit) );
+	--primary-nav--justify-content: center;
+	--social-nav--color-link: var(--global--color-foreground);
+	--social-nav--color-link-hover: var(--global--color-primary-hover);
+	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	--entry-header--color: var(--global--color-primary);
+	--entry-header--color-link: currentColor;
+	--entry-header--color-hover: var(--global--color-primary-hover);
+	--entry-header--font-family: var(--heading--font-family);
+	--entry-header--font-size: var(--heading--font-size-h2);
+	--entry-content--font-family: var(--heading--font-size-h2);
+	--entry-meta--color: var(--global--color-foreground);
+	--entry-meta--color-link: currentColor;
+	--entry-meta--color-hover: var(--global--color-primary-hover);
+	--entry-meta--font-family: var(--global--font-primary);
+	--entry-meta--font-size: var(--global--font-size-xs);
+	--entry-author-bio--font-family: var(--heading--font-family);
+	--entry-author-bio--font-size: var(--heading--font-size-h3);
+	--comments--border-color: var(--global--color-border);
+	--footer--color-text: var(--global--color-foreground);
+	--footer--color-link: var(--global--color-primary);
+	--footer--color-link-hover: var(--global--color-primary-hover);
+	--footer--font-family: var(--global--font-primary);
+	--footer--font-size: var(--global--font-size-sm);
+	--pagination--color-text: var(--global--color-foreground);
+	--pagination--color-link: var(--global--color-primary);
+	--pagination--color-link-hover: var(--global--color-primary-hover);
+	--pagination--font-family: var(--global--font-secondary);
+	--pagination--font-size: var(--global--font-size-sm);
+	--pagination--font-weight: normal;
+	/* Vendors */
+	--wc--wrapper-width: default;
+	--wc--table--border-color: var(--global--color-border);
+	--wc--table--border-radius: 0;
+	--wc--table--border-width: 1px;
+	--wc--table--padding: var(--global--spacing-unit);
+	--wc--tabs--border-color: var(--global--color-border);
+	--wc--tabs--border-radius: 10px;
+	--wc--tabs--border-width: 1px;
+	--wc--tabs--padding: var(--global--spacing-horizontal);
+	--wc--mini-cart--color-background: var(--global--color-background);
+	--wc--mini-cart--color-text: var(--global--color-foreground);
+	--wc--mini-cart--color-subtotal: var(--global--color-foreground);
+	--wc--mini-cart--color-count: var(--global--color-foreground-light);
+	--wc--mini-cart--color-border: var(--global--color-border);
+	--wc--mini-cart--button-text-color: var(--button--color-text);
+	--wc--mini-cart--button-background-color: var(--button--color-background);
+	--wc--mini-cart--width: calc(25 * var(--global--spacing-unit));
+	--wc--star-rating--color: var(--global--color-alert-warning);
+}

seedlet/assets/js/customizer-validate-wcag-color-contrast.js

@@ -0,0 +1,213 @@
+/**
+ * @author Per Soderlind
+ * @link https://github.com/soderlind/2016-customizer-demo
+ * global wp, _validateWCAGColorContrastExports
+ * global validateContrastText
+ * exported validateWCAGColorContrast
+**/
+( function( $, api, exports ) {
+	var self = {
+		validate_color_contrast: []
+	};
+	if ( exports ) {
+		$.extend( self, exports );
+	}
+
+	var code = 'contrast_warning';
+
+	/**
+	 * Add contrast validation to a control if it is entitled (is a valid color control).
+	 *
+	 * @param {wp.customize.Control} setting                   - Control.
+	 * @param {wp.customize.Value}   setting.validationMessage - Validation message.
+	 * @return {boolean} Whether validation was added.
+	 */
+	self.addWCAGColorContrastValidation = function( setting ) {
+		var initialValidate;
+		if ( ! self.isColorControl( setting ) ) {
+			return false;
+		}
+
+		initialValidate = setting.validate;
+
+		/**
+		 * Wrap the setting's validate() method to do validation on the value to be sent to the server.
+		 *
+		 * @param {mixed} value   - New value being assigned to the setting.
+		 * @returns {*}
+		 */
+		setting.validate = function (value){
+			var failsWCAG = false;
+
+			_.each ( self.validate_color_contrast[setting.id], function( color_to_compare_id ){
+				var color_to_compare = $( '#customize-control-' + color_to_compare_id + ' .wp-color-result')[0].style.backgroundColor.match(/\d+/g);
+				var contrast	= self.rgb( [ parseInt(color_to_compare[0]), parseInt(color_to_compare[1]), parseInt(color_to_compare[2]) ], self.hexRgb( value ) );
+				var score		= self.score( contrast );
+				if ( score === 'Fail' ){
+					failsWCAG = true;
+				} 
+			});
+
+			if ( failsWCAG ){
+				var validationWarning = new api.Notification( code, { message: validateContrastText, type: 'warning' } );
+				setTimeout( function(){
+					self.custom_colors_setting.notifications.add( code, validationWarning );
+				}, 400);
+			} else {
+				setTimeout( function(){
+					self.custom_colors_setting.notifications.remove( code );
+				}, 400);
+			}
+
+			return value;
+		} 
+	};
+
+	/**
+	 * Return whether the setting is entitled (i.e. if it is a title or has a title).
+	 *
+	 * @param {wp.customize.Setting} setting - Setting.
+	 * @returns {boolean}
+	 */
+	self.isColorControl = function( setting ) {
+		return _.findKey( self.validate_color_contrast, function( key, value ) {
+			return value == setting.id;
+		} );
+	};
+
+	api.bind( 'add', function( setting ) {
+		self.addWCAGColorContrastValidation( setting );
+	} );
+
+	api( 'custom_colors_active', function( setting ) {
+		self.custom_colors_setting = setting;
+		setting.validate = function( value ) {
+			if ( value == 'default' ){
+				setting.notifications.remove( code );
+			}
+			return value;
+		}
+	});
+
+	self.sprintf = function( format ) {
+		for( var i=1; i < arguments.length; i++ ) {
+			format = format.replace( /%s/, arguments[i] );
+		}
+		return format;
+	};
+
+	/**
+	 * Methods used to calculate WCAG Color Contrast
+	 */
+
+	// from https://github.com/sindresorhus/hex-rgb
+	self.hexRgb = function (hex) {
+		if (typeof hex !== 'string') {
+			throw new TypeError('Expected a string');
+		}
+
+		hex = hex.replace(/^#/, '');
+
+		if (hex.length === 3) {
+			hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+		}
+
+		var num = parseInt(hex, 16);
+
+		return [num >> 16, num >> 8 & 255, num & 255];
+	};
+
+	// from https://github.com/tmcw/relative-luminance
+	// # Relative luminance
+	//
+	// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+	// https://en.wikipedia.org/wiki/Luminance_(relative)
+	// https://en.wikipedia.org/wiki/Luminosity_function
+	// https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients
+
+	// red, green, and blue coefficients
+	var rc = 0.2126,
+	  gc = 0.7152,
+	  bc = 0.0722,
+	  // low-gamma adjust coefficient
+	  lowc = 1 / 12.92;
+
+	self.adjustGamma = function( g ) {
+	  return Math.pow((g + 0.055) / 1.055, 2.4);
+	};
+
+	/**
+	 * Given a 3-element array of R, G, B varying from 0 to 255, return the luminance
+	 * as a number from 0 to 1.
+	 * @param {Array<number>} rgb 3-element array of a color
+	 * @returns {number} luminance, between 0 and 1
+	 * @example
+	 * var luminance = require('relative-luminance');
+	 * var black_lum = luminance([0, 0, 0]); // 0
+	 */
+	self.relativeLuminance = function (rgb) {
+	  var rsrgb = rgb[0] / 255;
+	  var gsrgb = rgb[1] / 255;
+	  var bsrgb = rgb[2] / 255;
+
+	  var r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma(rsrgb),
+	    g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma(gsrgb),
+	    b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma(bsrgb);
+
+	  return r * rc + g * gc + b * bc;
+	};
+
+
+	// from https://github.com/tmcw/wcag-contrast
+	/**
+	 * Get the contrast ratio between two relative luminance values
+	 * @param {number} a luminance value
+	 * @param {number} b luminance value
+	 * @returns {number} contrast ratio
+	 * @example
+	 * luminance(1, 1); // = 1
+	 */
+	self.luminance = function(a, b) {
+	  var l1 = Math.max(a, b);
+	  var l2 = Math.min(a, b);
+	  return (l1 + 0.05) / (l2 + 0.05);
+	};
+
+	/**
+	 * Get a score for the contrast between two colors as rgb triplets
+	 * @param {array} a
+	 * @param {array} b
+	 * @returns {number} contrast ratio
+	 * @example
+	 * rgb([0, 0, 0], [255, 255, 255]); // = 21
+	 */
+	self.rgb = function(a, b) {
+	  return self.luminance(self.relativeLuminance(a), self.relativeLuminance(b));
+	};
+
+	/**
+	 * Get a score for the contrast between two colors as hex strings
+	 * @param {string} a hex value
+	 * @param {string} b hex value
+	 * @returns {number} contrast ratio
+	 * @example
+	 * hex('#000', '#fff'); // = 21
+	 */
+	self.hex = function(a, b) {
+	  return self.rgb(self.hexRgb(a), self.hexRgb(b));
+	};
+
+	/**
+	 * Get a textual score from a numeric contrast value
+	 * @param {number} contrast
+	 * @returns {string} score
+	 * @example
+	 * score(10); // = 'AAA'
+	 */
+	self.score = function(contrast) {
+	  return contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : "Fail";
+	};
+
+	return self;
+
+} )( jQuery, wp.customize, _validateWCAGColorContrastExports );

seedlet/assets/js/primary-navigation.js

@@ -0,0 +1,36 @@
+/**
+ * File primary-navigation.js.
+ *
+ * Required to open and close the mobile navigation.
+ */
+
+( function() {
+	/**
+	 * Menu Toggle Behaviors
+	 *
+	 * @param {Element} element
+	 */
+	function menuToggleUI( toggleButtonID, navOpenClass = 'primary-navigation-open' ) {
+
+		var wrapper         = document.body;
+		var toggleButton    = document.getElementById( toggleButtonID );
+		var lockScrollClass = 'lock-scrolling';
+		var navOpenClass;
+
+		// Toggle click if it exists
+		toggleButton ?
+		toggleButton.onclick = function() {
+			wrapper.classList.toggle(navOpenClass);
+			wrapper.classList.toggle(lockScrollClass);
+		} : null;
+	}
+
+	/**
+	 * Run our menuToggleUI function on load
+	 */
+	window.addEventListener( 'load', function() {
+		menuToggleUI( 'toggle-menu', 'primary-navigation-open' );
+		menuToggleUI( 'toggle-cart', 'wc-navigation-open' );
+	});
+
+} )();

seedlet/assets/js/skip-link-focus-fix.js

@@ -0,0 +1,33 @@
+/**
+ * File skip-link-focus-fix.js.
+ *
+ * Helps with accessibility for keyboard only users.
+ *
+ * This is the source file for what is minified in the seedlet_skip_link_focus_fix() PHP function.
+ *
+ * Learn more: https://git.io/vWdr2
+ */
+( function() {
+	var isIe = /(trident|msie)/i.test( navigator.userAgent );
+
+	if ( isIe && document.getElementById && window.addEventListener ) {
+		window.addEventListener( 'hashchange', function() {
+			var id = location.hash.substring( 1 ),
+				element;
+
+			if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
+				return;
+			}
+
+			element = document.getElementById( id );
+
+			if ( element ) {
+				if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
+					element.tabIndex = -1;
+				}
+
+				element.focus();
+			}
+		}, false );
+	}
+} )();

seedlet/assets/sass/abstracts/_config.scss

@@ -0,0 +1,68 @@
+// Vertical Rhythm Multiplier
+$baseline-unit: 10px;
+
+// Typescale Multipliers
+$typescale-root: 18px; // Set 16px/1em default on html
+$typescale-base: 1em; // Set 1em default on body == $typescale-root;
+$typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
+
+@mixin global-variables() {
+	/* Font Family */
+	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
+	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-code: monospace, monospace;
+	--global--font-ui: var(--global--font-secondary);
+
+	/* Font Size */
+	--global--font-size-root: #{$typescale-root};
+	--global--font-size-ratio: #{$typescale-ratio};
+	--global--font-size-base: #{$typescale-base};
+	--global--font-size-xs: 14px;
+	--global--font-size-sm: 16px;
+	--global--font-size-md: 18px;
+	--global--font-size-lg: 24px;
+	--global--font-size-xl: 28px;
+	--global--font-size-xxl: 32px;
+	--global--font-size-xxxl: 48px;
+
+	/* Line Height */
+	--global--line-height-base: #{$typescale-base / ( $typescale-base * 0 + 1 )};
+	--global--line-height-body: 1.7;
+	--global--line-height-heading: 1.3;
+
+	/* Colors */
+	--global--color-primary: #000000;
+	--global--color-primary-hover: #3C8067;
+	--global--color-secondary: #3C8067;
+	--global--color-secondary-hover: #336D58;
+	--global--color-black: black;
+	--global--color-white: white;
+	--global--color-foreground: #333333;
+	--global--color-foreground-light: #444444;
+	--global--color-foreground-dark: #000000;
+	--global--color-background: #FFFFFF;
+	--global--color-tertiary: #FAFBF6;
+	--global--color-background-dark: #DDDDDD;
+	--global--color-border: #EFEFEF;
+	--global--color-text-selection: #EBF2F0;
+	--global--color-alert-success: yellowgreen;
+	--global--color-alert-info: skyblue;
+	--global--color-alert-warning: gold;
+	--global--color-alert-error: salmon;
+
+	/* Spacing */
+	--global--spacing-unit: #{2 * $baseline-unit}; // 20px
+	--global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width
+	--global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px
+	--global--spacing-vertical: #{3 * $baseline-unit}; // 30px.
+
+	/* Elevation */
+	--global--elevation: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
+
+	/* Other */
+	--global--border-radius-sm: #{0.5 * $typescale-root};
+	--global--border-radius-md: #{0.75 * $typescale-root};
+	--global--border-radius-lg: #{$typescale-root};
+	--global--border-radius-pill: #{10 * $typescale-root};
+	--global--border-radius-none: 0;
+}

seedlet/assets/sass/abstracts/_editor.scss

@@ -0,0 +1,5 @@
+// Abstracts
+// - Mixins, variables and functions
+
+@import "mixins";
+@import "functions";

seedlet/assets/sass/abstracts/_functions.scss

@@ -0,0 +1,180 @@
+// Remove the unit of a length
+// @param {Number} $number - Number to remove unit from
+// @return {Number} - Unitless number
+@function strip-unit($number) {
+	@if type-of($number) == 'number' and not unitless($number) {
+		@return $number / ($number * 0 + 1);
+	}
+
+	@return $number;
+}
+
+// ----
+// Sass (v3.3.14)
+// Compass (v1.0.0.rc.1)
+// ----
+
+@function pow($x, $y) {
+  $ret: 1;
+
+  @if $y > 0 {
+    @for $i from 1 through $y {
+        $ret: $ret * $x;
+    }
+  }
+
+  @else {
+    @for $i from $y to 0 {
+        $ret: $ret / $x;
+    }
+  }
+
+  @return $ret;
+}
+
+// Map deep get
+// @author Hugo Giraudel
+// @access public
+// @param {Map} $map - Map
+// @param {Arglist} $keys - Key chain
+// @return {*} - Desired value
+//
+// Example:
+// $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M");
+@function map-deep-get($map, $keys...) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+// ep set function to set a value in nested maps
+// uthor Hugo Giraudel
+// ccess public
+// aram {Map} $map - Map
+// aram {List} $keys -  Key chaine
+// aram {*} $value - Value to assign
+// eturn {Map}
+//
+// ample:
+// _prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px);
+@function map-deep-set($map, $keys, $value) {
+	$maps: ($map);
+	$result: null;
+
+	// If the last key is a map already
+	// Warn the user we will be overriding it with $value
+	@if type-of(nth($keys, -1)) == "map" {
+		@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+	}
+
+	// If $keys is a single key
+	// Just merge and return
+	@if length($keys) == 1 {
+		@return map-merge($map, ($keys: $value));
+	}
+
+	// Loop from the first to the second to last key from $keys
+	// Store the associated map to this key in the $maps list
+	// If the key doesn't exist, throw an error
+	@for $i from 1 through length($keys) - 1 {
+		$current-key: nth($keys, $i);
+		$current-map: nth($maps, -1);
+		$current-get: map-get($current-map, $current-key);
+		@if $current-get == null {
+			@error "Key `#{$key}` doesn't exist at current level in map.";
+		}
+		$maps: append($maps, $current-get);
+	}
+
+	// Loop from the last map to the first one
+	// Merge it with the previous one
+	@for $i from length($maps) through 1 {
+		$current-map: nth($maps, $i);
+		$current-key: nth($keys, $i);
+		$current-val: if($i == length($maps), $value, $result);
+		$result: map-merge($current-map, ($current-key: $current-val));
+	}
+
+	// Return result
+	@return $result;
+}
+
+// jQuery-style extend function
+// - Child themes can use this function to `reset` the values in
+//   config maps without editing the `master` Sass files.
+// - src: https://www.sitepoint.com/extra-map-functions-sass/
+// - About `map-merge()`:
+// - - only takes 2 arguments
+// - - is not recursive
+// @param {Map} $map - first map
+// @param {ArgList} $maps - other maps
+// @param {Bool} $deep - recursive mode
+// @return {Map}
+
+// Examples:
+
+// $grid-configuration-default: (
+// 	'columns': 12,
+// 	'layouts': (
+// 		'small': 800px,
+// 		'medium': 1000px,
+// 		'large': 1200px,
+// 	),
+// );
+
+// $grid-configuration-custom: (
+// 	'layouts': (
+// 		'large': 1300px,
+// 		'huge': 1500px
+// 	),
+// );
+
+// $grid-configuration-user: (
+// 	'direction': 'ltr',
+// 	'columns': 16,
+// 	'layouts': (
+// 		'large': 1300px,
+// 		'huge': 1500px
+// 	),
+// );
+
+// $deep: false
+// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user);
+// --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
+
+// $deep: true
+// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
+// --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
+
+@function map-extend($map, $maps.../*, $deep */) {
+	$last: nth($maps, -1);
+	$deep: $last == true;
+	$max: if($deep, length($maps) - 1, length($maps));
+
+	// Loop through all maps in $maps...
+	@for $i from 1 through $max {
+		// Store current map
+		$current: nth($maps, $i);
+
+		// If not in deep mode, simply merge current map with map
+		@if not $deep {
+			$map: map-merge($map, $current);
+		} @else {
+			// If in deep mode, loop through all tuples in current map
+			@each $key, $value in $current {
+
+				// If value is a nested map and same key from map is a nested map as well
+				@if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" {
+					// Recursive extend
+					$value: map-extend(map-get($map, $key), $value, true);
+				}
+
+				// Merge current tuple with map
+				$map: map-merge($map, ($key: $value));
+			}
+		}
+	}
+
+	@return $map;
+}

seedlet/assets/sass/abstracts/_mixins.scss

@@ -0,0 +1,40 @@
+// Responsive breakpoints mixin
+@mixin add_variables( $view: frontend ) {
+
+	@if frontend == $view {
+		:root {
+			@content;
+		}
+	}
+
+	@if editor == $view {
+		body {
+			@content;
+		}
+	}
+}
+
+// Crop Text Boundry
+// - Sets a fixed-width on content within alignwide and alignfull blocks
+@mixin crop-text($inset-line-height: 1) {
+
+	line-height: $inset-line-height;
+	$offset-top: calc(.5em * #{$inset-line-height} + -.38);
+	$offset-bottom: calc(.5em * #{$inset-line-height} + -.39);
+
+	&:before,
+	&:after {
+		content: '';
+		display: block;
+		height: 0;
+		width: 0;
+	}
+
+	&:before {
+		margin-bottom: -($offset-top);
+	}
+
+	&:after {
+		margin-top: -($offset-bottom);
+	}
+}

seedlet/assets/sass/abstracts/_style.scss

@@ -0,0 +1,6 @@
+// Abstracts
+// - Mixins, variables and functions
+
+@import "config";
+@import "mixins";
+@import "functions";

seedlet/assets/sass/base/_accessibility.scss

@@ -0,0 +1,38 @@
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+	&:focus {
+		background-color: var(--global--color-background);
+		border-radius: 3px;
+		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+		clip: auto !important;
+		clip-path: none;
+		color: var(--global--color-foreground);
+		display: block;
+		font-size: var(--global--font-size-md);
+		font-weight: bold;
+		height: auto;
+		left: 5px;
+		line-height: normal;
+		padding: 15px 23px 14px;
+		text-decoration: none;
+		top: 5px;
+		width: auto;
+		z-index: 100000; /* Above WP toolbar. */
+	}
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}

seedlet/assets/sass/base/_clearings.scss

@@ -0,0 +1,25 @@
+.clear:before,
+.clear:after,
+.entry-content:before,
+.entry-content:after,
+.comment-content:before,
+.comment-content:after,
+.site-header:before,
+.site-header:after,
+.site-content:before,
+.site-content:after,
+.site-footer:before,
+.site-footer:after {
+	content: "";
+	display: table;
+	table-layout: fixed;
+}
+
+.clear:after,
+.entry-content:after,
+.comment-content:after,
+.site-header:after,
+.site-content:after,
+.site-footer:after {
+	clear: both;
+}

seedlet/assets/sass/base/_editor.scss

@@ -0,0 +1,33 @@
+@import '../structure/responsive-logic';
+
+body {
+	--wp--typography--line-height: var(--global--line-height-body);
+	color: var(--global--color-foreground);
+	background-color: var(--global--color-background);
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-root);
+	font-weight: normal;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+// Set font size of title block the same as body.
+.editor-post-title__block {
+	font-size: var(--global--font-size-root);
+}
+
+// Links styles
+a {
+	border-bottom: 1px solid var(--global--color-secondary);
+	color: var(--global--color-primary);
+	text-decoration: none;
+
+	&:hover {
+		color: var(--global--color-primary-hover);
+	}
+}
+
+button,
+a {
+	cursor: pointer;
+}

seedlet/assets/sass/base/_extends.scss

@@ -0,0 +1,54 @@
+// Button Placeholder style
+// - Since buttons appear in various blocks,
+//   let’s use a placeholder to keep them all
+//   in-sync
+%button-style {
+	@include crop-text(var(--button--line-height));
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+
+	&:active {
+		color: var(--button--color-text-active);
+		background-color: var(--button--color-background-active);
+	}
+
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: var(--button--color-text-hover);
+		background-color: var(--button--color-background-hover);
+	}
+}
+
+// Onsale Placeholder style
+// - Since buttons appear in various blocks,
+//   let’s use a placeholder to keep them all
+//   in-sync
+%onsale-style {
+	border-radius: 100%;
+	background-color: var(--global--color-alert-warning);
+	color: var(--global--color-foreground-dark);
+	font-size: var(--global--font-size-sm);
+	font-weight: 700;
+	font-family: var(--global--font-primary);
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}

seedlet/assets/sass/base/_measure.scss

@@ -0,0 +1,22 @@
+// Measure
+// - The width of a line of text, in characters, is known as its measure.
+
+header *,
+main *,
+footer * {
+  max-width: var(--global--spacing-measure);
+}
+
+html,
+body,
+div,
+header,
+nav,
+article,
+figure,
+hr,
+main,
+section,
+footer {
+  max-width: none;
+}

seedlet/assets/sass/base/_normalize.scss

@@ -0,0 +1,254 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+// Document
+// ==========================================================================
+
+// 1. Correct the line height in all browsers.
+// 2. Prevent adjustments of font size after orientation changes in iOS.
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+// Sections
+// ==========================================================================
+
+// Remove the margin in all browsers.
+body {
+  margin: 0;
+}
+
+// Render the `main` element consistently in IE.
+main {
+  display: block;
+}
+
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Firefox, and Safari.
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+// Grouping content
+// ==========================================================================
+
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+  overflow: scroll;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+// Remove the gray background on active links in IE 10.
+a {
+  background-color: transparent;
+}
+
+// 1. Remove the bottom border in Chrome 57-
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+// Add the correct font weight in Chrome, Edge, and Safari.
+b,
+strong {
+  font-weight: bold;
+}
+
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+// Add the correct font size in all browsers.
+small {
+  font-size: 80%;
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Embedded content
+// ==========================================================================
+
+// Remove the border on images inside links in IE 10.
+img {
+  border-style: none;
+}
+
+// Forms
+// ==========================================================================
+
+// 1. Change the font styles in all browsers.
+// 2. Remove the margin in Firefox and Safari.
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+// Show the overflow in IE.
+// 1. Show the overflow in Edge.
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+// 1. Remove the inheritance of text transform in Firefox.
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+// Correct the inability to style clickable types in iOS and Safari.
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+// Remove the inner border and padding in Firefox.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+// Restore the focus styles unset by the previous rule.
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+// Correct the padding in Firefox.
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+// 3. Remove the padding so developers are not caught out when they zero out
+//    `fieldset` elements in all browsers.
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+progress {
+  vertical-align: baseline;
+}
+
+// Remove the default vertical scrollbar in IE 10+.
+textarea {
+  overflow: auto;
+}
+
+// 1. Add the correct box sizing in IE 10.
+// 2. Remove the padding in IE 10.
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+// Remove the inner padding in Chrome and Safari on macOS.
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+// Interactive
+// ==========================================================================
+
+// Add the correct display in Edge, IE 10+, and Firefox.
+details {
+  display: block;
+}
+
+// Add the correct display in all browsers.
+summary {
+  display: list-item;
+}
+
+// Misc
+// ==========================================================================
+
+// Add the correct display in IE 10+.
+template {
+  display: none;
+}
+
+// Add the correct display in IE 10.
+[hidden] {
+  display: none;
+}

seedlet/assets/sass/base/_reset.scss

@@ -0,0 +1,95 @@
+/**
+ * Reset specific elements to make them easier to style in other contexts.
+ */
+
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+form,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	padding: 0;
+	margin: 0;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Apply generic border-box to all elements.
+ * See:
+ * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+
+/**
+ * Apply border-box across the entire page.
+ */
+html {
+	box-sizing: border-box;
+}
+
+/**
+ * Relax the definition a bit, to allow components to override it manually.
+ */
+* {
+	&,
+	&::before,
+	&::after {
+		box-sizing: inherit;
+	}
+}
+
+// HTML resets
+html {
+	// Set mobile font-size to one step lower for mobile
+	font-size: calc(var(--global--font-size-root) / var(--global--font-size-ratio)); /* #{$typescale-root / $typescale-ratio}; */
+	font-family: var(--global--font-secondary);
+	line-height: var(--global--line-height-body);
+
+	// Set mobile and ^ font-size to normal root
+	@include media(mobile) {
+		font-size: var(--global--font-size-root);
+	}
+}
+
+// body resets
+body {
+	font-size: var(--global--font-size-base); /* #{$typescale-base}; */
+	font-weight: normal;
+	color: var(--global--color-foreground);
+	text-align: left;
+	background-color: var(--global--color-background);
+}
+
+// Links styles
+a {
+	border-bottom: 1px solid var(--global--color-secondary);
+	color: var(--global--color-primary);
+	text-decoration: none;
+
+	&:hover {
+		color: var(--global--color-primary-hover);
+	}
+}
+
+button,
+a {
+  cursor: pointer;
+}

seedlet/assets/sass/base/_style.scss

@@ -0,0 +1,12 @@
+/**
+ * Base
+ * - Reset the browser
+ */
+
+@import "extends";
+@import "normalize";
+@import "reset";
+@import "accessibility";
+@import "clearings";
+@import "measure";
+@import "text-selection";

seedlet/assets/sass/base/_text-selection.scss

@@ -0,0 +1,8 @@
+// Text selection background color
+
+::selection {
+	background-color: var(--global--color-text-selection);
+}
+::-moz-selection {
+	background-color: var(--global--color-text-selection);
+}

seedlet/assets/sass/blocks/_config.scss

@@ -0,0 +1,15 @@
+/**
+ * Variable Configuration
+ * - Import all config files for display in
+ *   the editor, customizer, and front end.
+ */
+
+@import "button/config";
+@import "cover/config";
+@import "heading/config";
+@import "latest-posts/config";
+@import "list/config";
+@import "pullquote/config";
+@import "quote/config";
+@import "separator/config";
+@import "utilities/config";

seedlet/assets/sass/blocks/_editor.scss

@@ -0,0 +1,32 @@
+// Block Styles for the Editor
+// - These styles replace key Gutenberg Block styles for fonts, colors, and
+//   spacing with CSS-variables overrides in the Block Editor
+// - In the future the Block styles may get compiled to individual .css
+//   files and conditionally loaded
+
+@import "blog-posts/editor";
+@import "button/editor";
+@import "code/editor";
+@import "cover/editor";
+@import "file/editor";
+@import "gallery/editor";
+@import "group/editor";
+@import "heading/editor";
+@import "image/editor";
+@import "latest-comments/editor";
+@import "latest-posts/editor";
+@import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
+@import "list/editor";
+@import "media-text/editor";
+@import "navigation/editor";
+@import "paragraph/editor";
+@import "posts-list/editor";
+@import "pullquote/editor";
+@import "quote/editor";
+@import "search/editor";
+@import "separator/editor";
+@import "slideshow/editor";
+@import "subscription/editor";
+@import "table/editor";
+@import "verse/editor";
+@import "utilities/editor"; // Import LAST to cascade properly

seedlet/assets/sass/blocks/_style.scss

@@ -0,0 +1,36 @@
+// Blocks
+// - These styles replace key Gutenberg Block styles with font, color, and
+//   spacing with CSS-variables overrides
+// - In the future the Block styles may get compiled to individual .css
+//   files and conditionally loaded
+
+@import "audio/style";
+@import "blog-posts/style";
+@import "button/style";
+@import "code/style";
+@import "columns/style";
+@import "cover/style";
+@import "file/style";
+@import "gallery/style";
+@import "group/style";
+@import "heading/style";
+@import "image/style";
+@import "latest-comments/style";
+@import "latest-posts/style";
+@import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
+@import "list/style";
+@import "media-text/style";
+@import "navigation/style";
+@import "paragraph/style";
+@import "posts-list/style";
+@import "pullquote/style";
+@import "quote/style";
+@import "search/style";
+@import "separator/style";
+@import "slideshow/style";
+@import "spacer/style";
+@import "subscription/style";
+@import "table/style";
+@import "verse/style";
+@import "video/style";
+@import "utilities/style"; // Import LAST to cascade properly

seedlet/assets/sass/blocks/audio/_style.scss

@@ -0,0 +1,9 @@
+.wp-block-audio {
+
+	min-width: inherit;
+
+	&.alignleft,
+	&.alignright {
+		min-width: 300px;
+	}
+}

seedlet/assets/sass/blocks/blog-posts/_editor.scss

@@ -0,0 +1,171 @@
+.wp-block-a8c-blog-posts {
+	&.image-aligntop {
+		.post-thumbnail {
+			margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+		}
+	}
+
+	&.image-alignleft {
+		.post-thumbnail {
+			margin-right: var(--global--spacing-vertical);
+		}
+	}
+
+	&.image-alignright {
+		.post-thumbnail {
+			margin-left: var(--global--spacing-vertical);
+		}
+	}
+
+	&.image-alignbehind .post-has-image {
+		 .entry-wrapper {
+			padding: var(--global--spacing-vertical);
+		}
+
+		.cat-links {
+			color: var(--global--color-white);
+		}
+
+		a:hover {
+			color: currentColor;
+		}
+	}
+
+	.article-section-title {
+		font-size: var(--global--font-size-base);
+		margin-top: 0;
+		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+	}
+
+	article {
+		margin-bottom: calc(3 * var(--global--spacing-vertical));
+	}
+
+	.post-thumbnail {
+		img {
+			vertical-align: middle;
+			width: auto;
+		}
+	}
+
+	.entry-wrapper > * {
+		/* Vertical margins logic between post details */
+		margin-top: var(--global--spacing-unit);
+		margin-bottom: var(--global--spacing-unit);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.entry-title {
+		a {
+			color: var(--global--color-primary);
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+
+
+			&:hover {
+				color: var(--global--color-primary-hover);
+				text-decoration: underline;
+			}
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+		}
+	}
+
+	.more-link {
+		display: block;
+		color: inherit;
+		margin-top: var(--global--spacing-unit);
+
+		&:after {
+			content: "\02192";
+			display: inline-block;
+			margin-left: 0.5em;
+		}
+
+		&:hover,
+		&:active {
+			color: var(--global--color-primary-hover);
+			text-decoration: none;
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+		}
+	}
+
+	.entry-meta,
+	.cat-links {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-sm);
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			color: currentColor;
+		}
+
+		.byline:not(:last-child) {
+			margin-right: var(--global--spacing-unit);
+		}
+
+		.published + .updated {
+			display: none;
+		}
+
+		a {
+			color: currentColor;
+			text-decoration: underline;
+
+			&:hover,
+			&:active {
+				color: var(--global--color-primary-hover);
+				text-decoration: none;
+
+				.has-background:not(.has-background-background-color) &,
+				[class*="background-color"]:not(.has-background-background-color) &,
+				[style*="background-color"] & {
+					color: currentColor;
+				}
+			}
+		}
+	}
+}
+
+// Add theme style to load-more button
+
+@import "../../base/extends";
+.wp-block-a8c-blog-posts + .button {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+	font-size: var(--global--font-size-md);
+
+	&:hover {
+		cursor: default;
+	}
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"] & {
+		background-color: transparent;
+		border: var(--button--border-width, 2px) solid currentColor;
+		color: currentColor;
+	}
+}

seedlet/assets/sass/blocks/blog-posts/_style.scss

@@ -0,0 +1,169 @@
+.wp-block-newspack-blocks-homepage-articles {
+
+	&.image-aligntop {
+		.post-thumbnail {
+			margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+		}
+	}
+
+	&.image-alignleft {
+		.post-thumbnail {
+			margin-right: var(--global--spacing-vertical);
+		}
+	}
+
+	&.image-alignright {
+		.post-thumbnail {
+			margin-left: var(--global--spacing-vertical);
+		}
+	}
+
+	&.image-alignbehind .post-has-image .entry-wrapper {
+		padding: var(--global--spacing-vertical);
+	}
+
+	&.is-grid article {
+		margin-top: 0;
+		margin-bottom: var(--global--spacing-vertical);
+
+		@include media(mobile) {
+			margin-bottom: calc(3 * var(--global--spacing-vertical));
+		}
+	}
+
+	.article-section-title {
+		font-size: var(--global--font-size-base);
+		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+
+		& + article {
+			margin-top: 0;
+		}
+	}
+
+	article {
+		display: block;
+
+		/* Vertical margins logic between posts */
+		margin-top: calc(2 * var(--global--spacing-vertical));
+		margin-bottom: calc(2 * var(--global--spacing-vertical));
+
+		@include media(mobile) {
+			margin-top: calc(3 * var(--global--spacing-vertical));
+			margin-bottom: calc(3 * var(--global--spacing-vertical));
+		}
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: calc(3 * var(--global--spacing-vertical));
+		}
+
+		.post-thumbnail img {
+			width: auto;
+		}
+
+		.entry-wrapper > * {
+			/* Vertical margins logic between post details */
+			margin-top: var(--global--spacing-unit);
+			margin-bottom: var(--global--spacing-unit);
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.entry-title {
+			a {
+				color: var(--global--color-primary);
+
+				.has-background:not(.has-background-background-color) &,
+				[class*="background-color"]:not(.has-background-background-color) &,
+				[style*="background-color"] & {
+					color: currentColor;
+				}
+
+				&:hover {
+					color: var(--global--color-primary-hover);
+					text-decoration: underline;
+
+					.has-background:not(.has-background-background-color) &,
+					[class*="background-color"]:not(.has-background-background-color) &,
+					[style*="background-color"] & {
+						color: currentColor;
+					}
+				}
+			}
+		}
+
+		.more-link {
+			@include media(mobile) {
+				margin-top: var(--global--spacing-unit);
+			}
+		}
+
+		.entry-meta,
+		.cat-links {
+			color: var(--global--color-foreground-light);
+			font-size: var(--global--font-size-sm);
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+
+			> span > * {
+				vertical-align: top;
+			}
+
+			.byline:not(:last-child) {
+				margin-right: var(--global--spacing-unit);
+			}
+
+			.published + .updated {
+				display: none;
+			}
+
+			a {
+				color: currentColor;
+				text-decoration: underline;
+
+				&:hover,
+				&:active {
+					color: var(--global--color-primary-hover);
+					text-decoration: none;
+
+					.has-background:not(.has-background-background-color) &,
+					[class*="background-color"]:not(.has-background-background-color) &,
+					[style*="background-color"] & {
+						color: currentColor;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Add theme style to load-more button
+
+@import "../../base/extends";
+button[data-load-more-btn],
+.button {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"] & {
+		background-color: transparent;
+		border: var(--button--border-width, 2px) solid currentColor;
+		color: currentColor;
+	}
+}

seedlet/assets/sass/blocks/button/_config.scss

@@ -0,0 +1,24 @@
+	/* Blocks */
+@mixin button-variables() {
+	// Colors
+	--button--color-text: var(--global--color-background);
+	--button--color-text-hover: var(--button--color-text);
+	--button--color-text-active: var(--button--color-text);
+	--button--color-background: var(--global--color-secondary);
+	--button--color-background-hover: var(--global--color-secondary-hover);
+	--button--color-background-active: var(--global--color-primary);
+
+	// Fonts
+	--button--font-family: var(--global--font-ui);
+	--button--font-size: var(--global--font-size-base);
+	--button--font-weight: normal;
+	--button--line-height: 1;
+
+	// Borders
+	--button--border-width: 2px;
+	--button--border-radius: 4px;
+
+	// Spacing
+	--button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width));
+	--button--padding-horizontal: var(--global--spacing-horizontal);
+}

seedlet/assets/sass/blocks/button/_editor.scss

@@ -0,0 +1,36 @@
+.wp-block-button__link {
+
+	color: var(--button--color-text);
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	line-height: var(--button--line-height);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: var(--button--color-text-hover);
+		background-color: var(--button--color-background-hover);
+	}
+
+	// Outline Style
+	&.is-style-outline,
+	.is-style-outline & {
+		color: var(--button--color-background);
+		background: transparent;
+		border: 2px solid currentcolor;
+	}
+
+	// Squared Style
+	&.is-style-squared,
+	.is-style-squared & {
+		border-radius: 0;
+	}
+}
+
+div[data-type="core/button"] {
+	display: block;
+}

seedlet/assets/sass/blocks/button/_style.scss

@@ -0,0 +1,49 @@
+/**
+ * Button
+ */
+button,
+.button,
+input[type="submit"],
+.wp-block-button__link {
+	// Extend button style
+	@extend %button-style;
+}
+
+/**
+ * Block Options
+ */
+.wp-block-button {
+
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	font-weight: var(--button--font-weight);
+	line-height: var(--button--line-height);
+
+	// Outline Style
+	&.is-style-outline {
+		border: none;
+
+		&.wp-block-button__link,
+		.wp-block-button__link {
+			color: var(--button--color-background);
+			background: transparent;
+			border: var(--button--border-width) solid currentcolor;
+			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+
+			&:active {
+				color: var(--button--color-background);
+			}
+
+			&:hover,
+			&:focus,
+			&.has-focus {
+				color: var(--button--color-background-hover);
+			}
+		}
+	}
+
+	// Squared Style
+	&.is-style-squared .wp-block-button__link {
+		border-radius: 0;
+	}
+}

seedlet/assets/sass/blocks/code/_style.scss

@@ -0,0 +1,10 @@
+.wp-block-code {
+	color: var(--global--color-foreground);
+	font-size: var(--global--font-size-sm);
+	padding: var(--global--spacing-unit);
+	border-color: var(--global--color-border);
+
+	pre {
+		color: var(--global--color-foreground);
+	}
+}

seedlet/assets/sass/blocks/columns/_style.scss

@@ -0,0 +1,47 @@
+.wp-block-columns {
+
+	.wp-block-column {
+		& > * {
+			margin-top: calc(0.66 * var(--global--spacing-vertical));
+			margin-bottom: calc(0.66 * var(--global--spacing-vertical));
+
+			@include media(mobile) {
+				margin-top: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.wp-block-column:not(:last-child) {
+		margin-bottom: calc(0.66 * var(--global--spacing-vertical));
+
+		@include media(mobile) {
+			margin-bottom: var(--global--spacing-vertical);
+		}
+
+		@include media(laptop) {
+			/* Resetting margins to match _block-container.scss */
+			margin-bottom: 0;
+		}
+	}
+
+	/**
+	 * Block Options
+	 */
+	&.alignfull {
+		padding-left: var(--global--spacing-unit);
+		padding-right: var(--global--spacing-unit);
+	}
+}

seedlet/assets/sass/blocks/cover/_config.scss

@@ -0,0 +1,5 @@
+@mixin cover-variables() {
+	--cover--height: calc( 15 * var(--global--spacing-vertical) );
+	--cover--color-foreground: var(--global--color-foreground-dark);
+	--cover--color-background: var(--global--color-tertiary);
+}

seedlet/assets/sass/blocks/cover/_editor.scss

@@ -0,0 +1,51 @@
+.wp-block-cover,
+.wp-block-cover-image {
+
+	background-color: var(--cover--color-foreground);
+	min-height: var(--cover--height);
+	margin-top: inherit;
+	margin-bottom: inherit;
+
+	.wp-block-cover__inner-container,
+	.wp-block-cover-image-text,
+	.wp-block-cover-text,
+	.block-editor-block-list__block {
+		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
+
+		a {
+			color: currentColor;
+		}
+	}
+
+	// Default & custom background-color
+	&:not([class*='background-color']){
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text,
+		.block-editor-block-list__block {
+			color: var(--cover--color-background);
+		}
+	}
+
+	// Treating H2 separately to account for legacy /core styles
+	h2 {
+		font-size: var(--heading--font-size-h2);
+		letter-spacing: var(--heading--letter-spacing-h2);
+		line-height: var(--heading--line-height);
+		padding: 0;
+		max-width: inherit; // undo opinionated styles
+		text-align: inherit;
+
+		&.has-text-align-left {
+			text-align: left;
+		}
+
+		&.has-text-align-center {
+			text-align: center;
+		}
+
+		&.has-text-align-right {
+			text-align: right;
+		}
+	}
+}

seedlet/assets/sass/blocks/cover/_style.scss

@@ -0,0 +1,92 @@
+.wp-block-cover,
+.wp-block-cover-image {
+
+	background-color: var(--cover--color-foreground);
+	min-height: var(--cover--height);
+	margin-top: inherit;
+	margin-bottom: inherit;
+
+	.wp-block-cover__inner-container,
+	.wp-block-cover-image-text,
+	.wp-block-cover-text {
+		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		a {
+			color: currentColor;
+		}
+	}
+
+	/* default & custom background-color */
+	&:not([class*='background-color']){
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
+			color: var(--cover--color-background);
+		}
+	}
+
+	/* Treating H2 separately to account for legacy /core styles */
+	h2 {
+		font-size: var(--heading--font-size-h2);
+		letter-spacing: var(--heading--letter-spacing-h2);
+		line-height: var(--heading--line-height);
+		max-width: inherit; // undo opinionated styles
+		text-align: inherit; // undo opinionated styles
+		padding: 0;
+
+		&.has-text-align-left {
+			text-align: left;
+		}
+
+		&.has-text-align-center {
+			text-align: center;
+		}
+
+		&.has-text-align-right {
+			text-align: right;
+		}
+	}
+
+	.wp-block-cover__inner-container {
+
+		width: calc(100% - calc( 2 * var(--global--spacing-vertical)));
+
+		& > * {
+			margin-top: calc( 0.666 * var(--global--spacing-vertical) );
+			margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
+
+			@include media(mobile) {
+				margin-top: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&.alignleft,
+	&.alignright {
+		margin-top: 0;
+
+		> * {
+			margin-top: calc(2 * var(--global--spacing-vertical));
+			margin-bottom: calc(2 * var(--global--spacing-vertical));
+			padding-left: var(--global--spacing-horizontal);
+			padding-right: var(--global--spacing-horizontal);
+			width: 100%;
+		}
+	}
+
+	&.has-left-content,
+	&.has-right-content {
+		justify-content: center;
+	}
+}

seedlet/assets/sass/blocks/file/_editor.scss

@@ -0,0 +1,26 @@
+.wp-block-file {
+
+	.wp-block-file__textlink {
+		border-bottom: 1px solid var(--global--color-secondary);
+		color: var(--global--color-primary);
+		text-decoration: none;
+	}
+
+	.wp-block-file__button {
+		color: var(--button--color-text);
+		font-weight: var(--button--font-weight);
+		font-family: var(--button--font-family);
+		font-size: var(--button--font-size);
+		line-height: var(--button--line-height);
+		background-color: var(--button--color-background);
+		border-radius: var(--button--border-radius);
+		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: var(--button--color-text-hover);
+			background-color: var(--button--color-background-hover);
+		}
+	}
+}

seedlet/assets/sass/blocks/file/_style.scss

@@ -0,0 +1,26 @@
+.wp-block-file {
+
+	// Undo Gutenberg hover defaults
+	a.wp-block-file__button:active,
+	a.wp-block-file__button:focus,
+	a.wp-block-file__button:hover,
+	a.wp-block-file__button:visited {
+		color: var(--button--color-text-hover);
+		opacity: inherit;
+	}
+
+	.wp-block-file__button {
+		// Extend button style
+		@extend %button-style;
+		display: inline-block;
+		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+	}
+
+	.entry-content &.alignleft {
+		@extend %responsive-alignleft;
+	}
+
+	.entry-content &.alignright {
+		@extend %responsive-alignright;
+	}
+}

seedlet/assets/sass/blocks/gallery/_editor.scss

@@ -0,0 +1,5 @@
+.wp-block-gallery {
+	figcaption {
+		margin-bottom: 0;
+	}
+}

seedlet/assets/sass/blocks/gallery/_style.scss

@@ -0,0 +1,27 @@
+.wp-block-gallery {
+
+	margin: 0;
+
+	.blocks-gallery-image,
+	.blocks-gallery-item {
+
+		figcaption {
+			margin: 0;
+			// Text color is always white to account for default gradient background
+			color: var(--global--color-white);
+			font: var(--global--font-size-sm);
+		}
+	}
+
+	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
+	& .blocks-gallery-image,
+	& .blocks-gallery-item {
+		width: calc( (100% - var(--global--spacing-unit)) / 2);
+	}
+
+	// Apply max-width to floated items that have no intrinsic width.
+	&.alignleft,
+	&.alignright {
+		max-width: 50%;
+	}
+}

seedlet/assets/sass/blocks/group/_editor.scss

@@ -0,0 +1,16 @@
+.wp-block-group {
+	&.has-background {
+		padding: var(--global--spacing-vertical);
+	}
+	&:not(.has-background) {
+		.wp-block-group__inner-container {
+			padding-left: var(--global--spacing-horizontal);
+			padding-right: var(--global--spacing-horizontal);
+		}
+	}
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
+	margin: 0;
+	width: 100%;
+}

seedlet/assets/sass/blocks/group/_style.scss

@@ -0,0 +1,39 @@
+.wp-block-group {
+
+	.wp-block-group__inner-container {
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: var(--global--spacing-horizontal);
+		padding-right: var(--global--spacing-horizontal);
+
+		> * {
+			margin-top: calc( 0.666 * var(--global--spacing-vertical) );
+			margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
+
+			&.alignfull {
+				@extend %responsive-alignfull-width-mobile;
+			}
+
+			@include media(mobile) {
+				margin-top: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&.has-background {
+		padding: calc( 0.666 * var(--global--spacing-vertical) );
+
+		@include media(mobile) {
+			padding: var(--global--spacing-vertical);
+		}
+	}
+}

seedlet/assets/sass/blocks/heading/_config.scss

@@ -0,0 +1,28 @@
+@mixin heading-variables() {
+	--heading--font-family: var(--global--font-primary);
+	--heading--line-height: 1.3;
+
+	--heading--font-size-h6: var(--global--font-size-base);
+	--heading--font-size-h5: var(--global--font-size-md);
+	--heading--font-size-h4: var(--global--font-size-lg);
+	--heading--font-size-h3: var(--global--font-size-xl);
+	--heading--font-size-h2: var(--global--font-size-xxl);
+	--heading--font-size-h1: var(--global--font-size-xxxl);
+
+	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
+	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
+	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
+	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
+	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+
+	--heading--line-height-h6: 1.3;
+	--heading--line-height-h5: 1.3;
+	--heading--line-height-h4: 1.3;
+	--heading--line-height-h3: var(--heading--line-height);
+	--heading--line-height-h2: var(--heading--line-height);
+	--heading--line-height-h1: var(--heading--line-height);
+
+	--heading--font-weight: normal;
+	--heading--font-weight-strong: 600;
+}

seedlet/assets/sass/blocks/heading/_editor.scss

@@ -0,0 +1,61 @@
+.wp-block-heading h1, h1, .h1,
+.wp-block-heading h2, h2, .h2,
+.wp-block-heading h3, h3, .h3,
+.wp-block-heading h4, h4, .h4,
+.wp-block-heading h5, h5, .h5,
+.wp-block-heading h6, h6, .h6 {
+	clear: both;
+	font-family: var(--heading--font-family);
+	font-weight: var(--heading--font-weight);
+
+	strong {
+		font-weight: var(--heading--font-weight-strong);
+	}
+}
+
+.wp-block-heading h1, h1, .h1 {
+	font-size: var(--heading--font-size-h1);
+	letter-spacing: var(--heading--letter-spacing-h1);
+	line-height: var(--heading--line-height-h1);
+}
+
+.wp-block-heading h2, h2, .h2 {
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height-h2);
+}
+
+.wp-block-heading h3, h3, .h3 {
+	font-size: var(--heading--font-size-h3);
+	letter-spacing: var(--heading--letter-spacing-h3);
+	line-height: var(--heading--line-height-h3);
+}
+
+.wp-block-heading h4, h4, .h4 {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
+}
+
+.wp-block-heading h5, h5, .h5 {
+	font-size: var(--heading--font-size-h5);
+	letter-spacing: var(--heading--letter-spacing-h5);
+	line-height: var(--global--line-height-body-h5);
+}
+
+.wp-block-heading h6, h6, .h6 {
+	font-size: var(--heading--font-size-h6);
+	letter-spacing: var(--heading--letter-spacing-h6);
+	line-height: var(--global--line-height-body-h6);
+}
+
+.wp-block-heading h1, h1, .h1,
+.wp-block-heading h2, h2, .h2,
+.wp-block-heading h3, h3, .h3,
+.wp-block-heading h4, h4, .h4,
+.wp-block-heading h5, h5, .h5,
+.wp-block-heading h6, h6, .h6 {
+	&[style*="--wp--typography--line-height"] {
+		line-height: var(--wp--typography--line-height);
+	}
+}

seedlet/assets/sass/blocks/heading/_style.scss

@@ -0,0 +1,50 @@
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+	clear: both;
+	font-family: var(--heading--font-family);
+	font-weight: var(--heading--font-weight);
+
+	strong {
+		font-weight: var(--heading--font-weight-strong);
+	}
+}
+
+h1, .h1 {
+	font-size: var(--heading--font-size-h1);
+	letter-spacing: var(--heading--letter-spacing-h1);
+	line-height: var(--heading--line-height-h1);
+}
+
+h2, .h2 {
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height-h2);
+}
+
+h3, .h3 {
+	font-size: var(--heading--font-size-h3);
+	letter-spacing: var(--heading--letter-spacing-h3);
+	line-height: var(--heading--line-height-h3);
+}
+
+h4, .h4 {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
+}
+
+h5, .h5 {
+	font-size: var(--heading--font-size-h5);
+	letter-spacing: var(--heading--letter-spacing-h5);
+	line-height: var(--heading--line-height-h5);
+}
+
+h6, .h6 {
+	font-size: var(--heading--font-size-h6);
+	letter-spacing: var(--heading--letter-spacing-h6);
+	line-height: var(--heading--line-height-h6);
+}

seedlet/assets/sass/blocks/image/_editor.scss

@@ -0,0 +1,9 @@
+/* Center image block by default in the editor */
+
+.wp-block-image > div {
+	text-align: center;
+}
+
+[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized {
+	margin: 0 auto;
+}

seedlet/assets/sass/blocks/image/_style.scss

@@ -0,0 +1,38 @@
+.wp-block-image {
+	text-align: center;
+
+	figcaption {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-xs);
+		line-height: var(--global--line-height-xs);
+		margin-top: calc(0.5 * var(--global--spacing-unit));
+		margin-bottom: var(--global--spacing-unit);
+		text-align: center;
+	}
+
+	.alignright {
+		margin-left: var(--global--spacing-horizontal);
+	}
+
+	.alignleft {
+		margin-right: var(--global--spacing-horizontal);
+	}
+}
+
+// Remove vertical margins from image block wrappers when floated
+.entry-content > *[class="wp-block-image"],
+.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
+	margin-top: 0;
+	margin-bottom: 0;
+
+	// Remove top margins from the following element when previous image block is floated
+	& + * {
+		margin-top: 0;
+	}
+}
+
+img {
+	height: auto;
+	max-width: 100%;
+	vertical-align: middle;
+}

seedlet/assets/sass/blocks/latest-comments/_editor.scss

@@ -0,0 +1,3 @@
+.wp-block-latest-comments {
+	margin-left: 0;
+}

seedlet/assets/sass/blocks/latest-comments/_style.scss

@@ -0,0 +1,35 @@
+.wp-block-latest-comments {
+	margin-left: 0;
+
+	.wp-block-latest-comments__comment {
+		font-size: var(--global--font-size-sm);
+		line-height: var(--global--line-height-body);
+
+		/* Vertical margins logic */
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.wp-block-latest-comments__comment-meta {
+		font-family: var(--heading--font-family);
+	}
+
+	.wp-block-latest-comments__comment-date {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-sm);
+	}
+
+	.wp-block-latest-comments__comment-excerpt p {
+		font-size: var(--global--font-size-sm);
+		line-height: var(--global--line-height-body);
+		margin: 0;
+	}
+}

seedlet/assets/sass/blocks/latest-posts/_config.scss

@@ -0,0 +1,6 @@
+@mixin latest-posts-variables() {
+	--latest-posts--title-font-family: var(--heading--font-family);
+	--latest-posts--title-font-size: var(--heading--font-size-h3);
+	--latest-posts--description-font-family: var(--global--font-secondary);
+	--latest-posts--description-font-size: var(--global--font-size-sm);
+}

seedlet/assets/sass/blocks/latest-posts/_editor.scss

@@ -0,0 +1,66 @@
+.wp-block-latest-posts {
+	padding-left: 0;
+
+	// Vertical margins logic
+	&:not(.is-grid) > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&.is-grid > li {
+		margin-bottom: var(--global--spacing-vertical);
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	& > li > * {
+		margin-top: calc(0.5 * var(--global--spacing-vertical));
+		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	// Post title
+	& > li > a {
+		font-family: var(--latest-posts--title-font-family);
+		font-size: var(--latest-posts--title-font-size);
+		font-weight: var(--heading--font-weight);
+		line-height: var(--global--line-height-heading);
+	}
+
+	// Post date
+	.wp-block-latest-posts__post-date {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-xs);
+		line-height: var(--global--line-height-body);
+
+		[class*="inner-container"] &,
+		.has-background & {
+			color: currentColor;
+		}
+	}
+
+	// Post content
+	.wp-block-latest-posts__post-excerpt,
+	.wp-block-latest-posts__post-full-content {
+		font-family: var(--latest-posts--description-font-family);
+		font-size: var(--latest-posts--description-font-size);
+		line-height: var(--global--line-height-body);
+	}
+}

seedlet/assets/sass/blocks/latest-posts/_style.scss

@@ -0,0 +1,95 @@
+.wp-block-latest-posts {
+	padding-left: 0;
+
+	// Vertical margins logic
+	&:not(.is-grid) > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&.is-grid {
+
+		& > li {
+			margin-bottom: var(--global--spacing-vertical);
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		// Remove bottom margins in grid columns
+		&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
+		&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
+		&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
+		&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
+		&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
+		&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
+		&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
+		&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
+		&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
+		&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
+			margin-bottom: 0;
+		}
+	}
+
+	& > li > * {
+		margin-top: calc(0.5 * var(--global--spacing-vertical));
+		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	// Post title
+	& > li > a {
+		font-family: var(--latest-posts--title-font-family);
+		font-size: var(--latest-posts--title-font-size);
+		font-weight: var(--heading--font-weight);
+		line-height: var(--global--line-height-heading);
+	}
+
+	// Post date
+	.wp-block-latest-posts__post-date {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-sm);
+		line-height: var(--global--line-height-body);
+
+		.entry-content [class*="inner-container"] &,
+		.entry-content .has-background & {
+			color: currentColor;
+		}
+	}
+
+	// Post content
+	.wp-block-latest-posts__post-excerpt,
+	.wp-block-latest-posts__post-full-content {
+		font-family: var(--latest-posts--description-font-family);
+		font-size: var(--latest-posts--description-font-size);
+		line-height: var(--global--line-height-body);
+	}
+
+	// Utility classes
+	&.alignfull {
+		padding-left: var(--global--spacing-unit);
+		padding-right: var(--global--spacing-unit);
+
+		.entry-content [class*="inner-container"] &,
+		.entry-content .has-background & {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+}

seedlet/assets/sass/blocks/legacy/_editor.scss

@@ -0,0 +1,46 @@
+.gallery {
+
+}
+
+.gallery-item {
+	display: inline-block;
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+
+	.gallery-columns-2 & {
+		max-width: 50%;
+	}
+
+	.gallery-columns-3 & {
+		max-width: 33.33%;
+	}
+
+	.gallery-columns-4 & {
+		max-width: 25%;
+	}
+
+	.gallery-columns-5 & {
+		max-width: 20%;
+	}
+
+	.gallery-columns-6 & {
+		max-width: 16.66%;
+	}
+
+	.gallery-columns-7 & {
+		max-width: 14.28%;
+	}
+
+	.gallery-columns-8 & {
+		max-width: 12.5%;
+	}
+
+	.gallery-columns-9 & {
+		max-width: 11.11%;
+	}
+}
+
+.gallery-caption {
+	display: block;
+}

seedlet/assets/sass/blocks/legacy/_style.scss

@@ -0,0 +1,50 @@
+.gallery {
+
+}
+
+.gallery-item {
+	display: inline-block;
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+
+	a {
+		display: block;
+	}
+
+	.gallery-columns-2 & {
+		max-width: 50%;
+	}
+
+	.gallery-columns-3 & {
+		max-width: 33.33%;
+	}
+
+	.gallery-columns-4 & {
+		max-width: 25%;
+	}
+
+	.gallery-columns-5 & {
+		max-width: 20%;
+	}
+
+	.gallery-columns-6 & {
+		max-width: 16.66%;
+	}
+
+	.gallery-columns-7 & {
+		max-width: 14.28%;
+	}
+
+	.gallery-columns-8 & {
+		max-width: 12.5%;
+	}
+
+	.gallery-columns-9 & {
+		max-width: 11.11%;
+	}
+}
+
+.gallery-caption {
+	display: block;
+}

seedlet/assets/sass/blocks/list/_config.scss

@@ -0,0 +1,4 @@
+@mixin list-variables() {
+	--list--font-family: var(--global--font-secondary);
+	--definition-term--font-family: var(--global--font-primary);
+}

seedlet/assets/sass/blocks/list/_editor.scss

@@ -0,0 +1,30 @@
+ul,
+ol {
+	font-family: var(--list--font-family);
+	margin: var(--global--spacing-vertical) 0;
+	padding-left: calc( 2 * var(--global--spacing-horizontal) );
+
+	// Utility classes
+	&.aligncenter {
+		list-style-position: inside;
+		padding: 0;
+	}
+
+	&.alignright {
+		list-style-position: inside;
+		text-align: right;
+		padding: 0;
+	}
+}
+
+li {
+	> ul,
+	> ol {
+		margin: 0;
+	}
+}
+
+dt {
+	font-family: var(--definition-term--font-family);
+	font-weight: bold;
+}

seedlet/assets/sass/blocks/list/_style.scss

@@ -0,0 +1,36 @@
+ul,
+ol {
+	font-family: var(--list--font-family);
+	margin: 0;
+	padding-left: calc(2 * var(--global--spacing-horizontal));
+
+	// Utility classes
+	&.aligncenter {
+		list-style-position: inside;
+		padding: 0;
+	}
+
+	&.alignright {
+		list-style-position: inside;
+		text-align: right;
+		padding: 0;
+	}
+}
+
+ul {
+	list-style-type: disc;
+}
+
+ol {
+	list-style-type: decimal;
+}
+
+dt {
+	font-family: var(--definition-term--font-family);
+	font-weight: bold;
+}
+
+dd {
+	margin: 0;
+	padding-left: calc(2 * var(--global--spacing-horizontal));
+}

seedlet/assets/sass/blocks/media-text/_editor.scss

@@ -0,0 +1,12 @@
+.wp-block-media-text {
+	.block-editor-inner-blocks {
+		padding-right: var(--global--spacing-horizontal);
+		padding-left: var(--global--spacing-horizontal);
+	}
+
+	&[style*="background-color"]:not(.has-background-background-color) {
+		a {
+			color: currentColor;
+		}
+	}
+}

seedlet/assets/sass/blocks/media-text/_style.scss

@@ -0,0 +1,48 @@
+.wp-block-media-text {
+
+	.wp-block-media-text__content {
+		padding: var(--global--spacing-horizontal);
+
+		@include media(tablet) {
+			padding: var(--global--spacing-vertical);
+		}
+
+		& > * {
+			margin-top: calc( 0.666 * var(--global--spacing-vertical) );
+			margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
+
+			@include media(mobile) {
+				margin-top: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&[class*="background-color"]:not(.has-background-background-color),
+	&[style*="background-color"] {
+		.wp-block-media-text__content {
+			a {
+				color: currentColor;
+			}
+		}
+	}
+
+	/**
+	 * Block Options
+	 */
+
+	&.is-stacked-on-mobile .wp-block-media-text__content {
+		@include media(mobile) {
+			padding-top: var(--global--spacing-vertical);
+			padding-bottom: var(--global--spacing-vertical);
+		}
+	}
+}

seedlet/assets/sass/blocks/navigation/_editor.scss

@@ -0,0 +1,38 @@
+.wp-block-navigation {
+    .wp-block-navigation__container {
+        background: var(--global--color-background);
+        padding: 0;
+    }
+
+    .wp-block-navigation-link {
+        .wp-block-navigation-link__content {
+            padding: var(--primary-nav--padding);
+        }
+
+        .wp-block-navigation-link__label {
+            font-family: var(--primary-nav--font-family);
+            font-size: var(--primary-nav--font-size);
+            font-weight: var(--primary-nav--font-weight);
+        }
+    }
+
+    .has-child {
+        .wp-block-navigation__container {
+            box-shadow: var(--global--elevation);
+        }
+    }
+    
+    &:not(.has-text-color){
+        .wp-block-navigation-link {
+            > a {
+                &:hover, &:focus {
+                    color: var(--primary-nav--color-link-hover);
+                }
+            }
+        }
+
+        .wp-block-navigation-link__content {
+            color: currentColor;
+        }
+    }
+}

seedlet/assets/sass/blocks/navigation/_style.scss

@@ -0,0 +1,84 @@
+.wp-block-navigation {
+    .wp-block-navigation-link {
+        padding: 0;
+
+        .wp-block-navigation-link__content {
+            padding: var(--primary-nav--padding);
+        }
+
+        .wp-block-navigation-link__label {
+            font-family: var(--primary-nav--font-family);
+            font-size: var(--primary-nav--font-size);
+            font-weight: var(--primary-nav--font-weight);
+        }
+    }
+
+    .wp-block-navigation-link__submenu-icon {
+        padding: 0;
+    }
+
+    // Top level navigation container.
+    > .wp-block-navigation__container {
+        .has-child {
+            .wp-block-navigation-link {
+                display: inherit;
+            }
+
+            .wp-block-navigation__container {
+                border: none;
+                left: 0;
+                margin-left: var(--primary-nav--padding);
+                min-width: max-content;
+                opacity: 0; 
+                padding: 0;
+                position: inherit;
+                top: inherit;
+
+                .wp-block-navigation-link {
+                    .wp-block-navigation-link__content {
+                        display: inline-block;
+                        padding: calc( 0.5 * var(--primary-nav--padding) ) var(--primary-nav--padding);
+                    }
+                }
+
+                .wp-block-navigation-link__submenu-icon {
+                    display: none;
+                }
+            }
+            &:hover, &:focus-within {
+                .wp-block-navigation__container {
+                    display: block;
+                    opacity: 1;
+                    visibility: visible;
+                }
+            }
+        }
+    }
+
+    > .wp-block-navigation__container {
+        > .has-child {
+            > .wp-block-navigation__container {
+                background: var(--global--color-background);
+                box-shadow: var(--global--elevation);
+                margin: 0;
+                padding: 0;
+                position: absolute;
+                top: 100%;
+            }
+        }
+    }
+    
+    &:not(.has-text-color){
+        .wp-block-navigation-link {
+            > a {
+                &:hover, &:focus {
+                    color: var(--primary-nav--color-link-hover);
+                }
+            }
+        }
+
+        .wp-block-navigation-link__content {
+            color: currentColor;
+        }
+    }
+}

seedlet/assets/sass/blocks/paragraph/_editor.scss

@@ -0,0 +1,11 @@
+p {
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+
+	&.has-background {
+		padding: var(--global--spacing-unit);
+
+		&:not(.has-background-background-color) a {
+			color: currentColor;
+		}
+	}
+}

seedlet/assets/sass/blocks/paragraph/_style.scss

@@ -0,0 +1,9 @@
+p {
+
+	line-height: var(--wp--typography--line-height, --global--line-height-body);
+
+	// inherits general font style set at <body>
+	&.has-background {
+		padding: var(--global--spacing-unit);
+	}
+}

seedlet/assets/sass/blocks/posts-list/_editor.scss

@@ -0,0 +1,3 @@
+.a8c-posts-list {
+	padding-left: 0;
+}

seedlet/assets/sass/blocks/posts-list/_style.scss

@@ -0,0 +1,73 @@
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	&:not(:last-child) {
+		margin-bottom: calc(3 * var(--global--spacing-vertical));
+	}
+}
+
+.a8c-posts-list-item__featured span {
+	color: var(--global--color-background);
+	background-color: var(--global--color-primary);
+	font-family: var(--global--font-primary);
+	font-weight: bold;
+	font-size: var(--global--font-size-sm);
+	line-height: 1;
+	padding: calc(0.5 * var(--global--spacing-unit)) calc(0.66 * var(--global--spacing-unit) );
+}
+
+.a8c-posts-list__item {
+	display: block;
+
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * var(--global--spacing-vertical));
+	margin-bottom: calc(3 * var(--global--spacing-vertical));
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	.entry > * {
+		/* Vertical margins logic between post details */
+		margin-top: var(--global--spacing-unit);
+		margin-bottom: var(--global--spacing-unit);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.a8c-posts-list-item__meta {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-sm);
+
+		a {
+			color: currentColor;
+
+			&:hover,
+			&:active {
+				color: var(--global--color-primary-hover);
+			}
+		}
+	}
+
+	.a8c-posts-list-item__edit-link {
+		margin-left: var(--global--spacing-unit);
+	}
+}
+
+.a8c-posts-list__view-all {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+}

seedlet/assets/sass/blocks/pullquote/_config.scss

@@ -0,0 +1,11 @@
+@mixin pullquote-variables() {
+	--pullquote--font-family: var(--global--font-primary);
+	--pullquote--font-size: var(--heading--font-size-h2);
+	--pullquote--font-style: italic;
+	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
+	--pullquote--line-height: var(--global--line-height-heading);
+	--pullquote--border-width: 0;
+	--pullquote--border-color: transparent;
+	--pullquote--color-foreground: var(--global--color-foreground);
+	--pullquote--color-background: var(--global--color-background);
+}

seedlet/assets/sass/blocks/pullquote/_editor.scss

@@ -0,0 +1,72 @@
+.wp-block-pullquote {
+	padding: calc( 2 * var(--global--spacing-unit) ) 0;
+	margin-left: 0;
+	margin-right: 0;
+	text-align: left;
+	// Theme?
+	border-top-color: var(--pullquote--border-color);
+	border-top-width: var(--pullquote--border-width);
+	border-bottom-color: var(--pullquote--border-color);
+	border-bottom-width: var(--pullquote--border-width);
+	color: var(--pullquote--color-foreground);
+
+	p {
+		font-family: var(--pullquote--font-family);
+		font-size: var(--pullquote--font-size);
+		font-style: var(--pullquote--font-style);
+		letter-spacing: var(--pullquote--letter-spacing);
+		line-height: var(--pullquote--line-height);
+		margin: 0;
+	}
+
+	a {
+		color: currentColor;
+	}
+
+	.wp-block-pullquote__citation,
+	cite,
+	footer {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-xs);
+	}
+
+	// Block Options
+	&:not(.is-style-solid-color) {
+		background: none;
+	}
+
+	&.is-style-solid-color {
+
+		background-color: var(--pullquote--color-foreground);
+		color: var(--pullquote--color-background);
+		padding: calc( 2 * var(--global--spacing-unit) );
+
+		&.alignleft blockquote,
+		&.alignright blockquote {
+			padding-left: var(--global--spacing-unit);
+			padding-right: var(--global--spacing-unit);
+			max-width: inherit;
+		}
+
+		blockquote {
+			margin: 0;
+			text-align: left;
+			max-width: 100%;
+		}
+
+		.wp-block-pullquote__citation,
+		cite,
+		footer {
+			color: currentColor;
+		}
+	}
+
+}
+
+.wp-block[data-align="full"] {
+	.wp-block-pullquote:not(.is-style-solid-color) {
+		blockquote {
+			padding: 0 calc( 2 * var(--global--spacing-unit));
+		}
+	}
+}

seedlet/assets/sass/blocks/pullquote/_style.scss

@@ -0,0 +1,83 @@
+.wp-block-pullquote {
+	padding: calc( 2 * var(--global--spacing-unit) ) 0;
+	margin-left: 0;
+	margin-right: 0;
+	text-align: left;
+	// Theme?
+	border-top-color: var(--pullquote--border-color);
+	border-top-width: var(--pullquote--border-width);
+	border-bottom-color: var(--pullquote--border-color);
+	border-bottom-width: var(--pullquote--border-width);
+	color: var(--pullquote--color-foreground);
+
+	p {
+		font-family: var(--pullquote--font-family);
+		font-size: var(--pullquote--font-size);
+		font-style: var(--pullquote--font-style);
+		letter-spacing: var(--pullquote--letter-spacing);
+		line-height: var(--pullquote--line-height);
+		margin: 0;
+	}
+
+	a {
+		color: currentColor;
+	}
+
+	.wp-block-pullquote__citation,
+	cite,
+	footer {
+		color: currentColor;
+		display: block;
+		font-size: var(--global--font-size-xs);
+		text-transform: none;
+	}
+
+	/**
+	 * Block Options
+	 */
+	&:not(.is-style-solid-color) {
+		background: none;
+	}
+
+    &.is-style-large {
+        border-left-color: var(--quote--border-color);
+        border-left-style: solid;
+		border-left-width: var(--quote--border-width);
+		font-style: normal;
+	}
+
+	&.alignwide > p,
+	&.alignwide blockquote {
+		max-width: var(--responsive--alignwide-width);
+
+	}
+	&.alignfull:not(.is-style-solid-color) > p,
+	&.alignfull:not(.is-style-solid-color) blockquote {
+		padding: 0 calc( 2 * var(--global--spacing-unit) );
+	}
+
+	&.is-style-solid-color {
+
+		background-color: var(--pullquote--color-foreground);
+		color: var(--pullquote--color-background);
+		padding: calc( 2 * var(--global--spacing-unit) );
+
+		blockquote {
+			max-width: inherit;
+		}
+
+		.wp-block-pullquote__citation,
+		cite,
+		footer {
+			color: currentColor;
+		}
+	}
+
+	.entry-content &.alignleft {
+		@extend %responsive-alignleft;
+	}
+
+	.entry-content &.alignright {
+		@extend %responsive-alignright;
+	}
+}

seedlet/assets/sass/blocks/quote/_config.scss

@@ -0,0 +1,11 @@
+@mixin quote-variables() {
+	--quote--border-color: var(--global--color-secondary);
+	--quote--border-width: 1px;
+	--quote--font-family: var(--global--font-secondary);
+	--quote--font-size: var(--global--font-size-md);
+	--quote--font-size-large: var(--global--font-size-lg);
+	--quote--font-style: normal;
+	--quote--font-style-large: normal;
+	--quote--line-height: var(--global--line-height-body);
+	--quote--line-height-large: 1.5;
+}

seedlet/assets/sass/blocks/quote/_editor.scss

@@ -0,0 +1,59 @@
+.wp-block-quote {
+	border-left-color: var(--quote--border-color);
+	border-left-width: var(--quote--border-width);
+	margin: var(--global--spacing-vertical) 0;
+	padding-left: var(--global--spacing-horizontal);
+
+	p {
+		font-family: var(--quote--font-family);
+		font-size: var(--quote--font-size);
+		font-style: var(--quote--font-style);
+		line-height: var(--quote--line-height);
+	}
+
+	&.is-large,
+	&.is-style-large {
+		border-left: var(--quote--border-width) solid var(--quote--border-color);
+		padding-left: var(--global--spacing-horizontal);
+		/* Resetting margins to match _block-container.scss */
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		p {
+			font-size: var(--quote--font-size-large);
+			font-style: var(--quote--font-style-large);
+			line-height: var(--quote--line-height-large);
+		}
+		&.has-text-align-right {
+			border-left: none;
+			border-right: var(--quote--border-width) solid var(--quote--border-color);
+		}
+	}
+
+	&.has-text-align-right {
+		border-right: var(--quote--border-width) solid var(--quote--border-color);
+	}
+
+	&.has-text-align-center {
+		border: none;
+	}
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"]:not(.has-background-background-color) &,
+	.wp-block-cover[style*="background-image"] & {
+			border-color: currentColor;
+	}
+
+	.wp-block-quote__citation {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-xs);
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"]:not(.has-background-background-color) &,
+		.wp-block-cover[style*="background-image"] & {
+			color: currentColor;
+		}
+	}
+}

seedlet/assets/sass/blocks/quote/_style.scss

@@ -0,0 +1,90 @@
+.wp-block-quote {
+	border-left: var(--quote--border-width) solid var(--quote--border-color);
+	margin: var(--global--spacing-vertical) 0;
+	padding-left: var(--global--spacing-horizontal);
+
+	& > * {
+		margin-top: var(--global--spacing-unit);
+		margin-bottom: var(--global--spacing-unit);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	p {
+		font-family: var(--quote--font-family);
+		font-size: var(--quote--font-size);
+		font-style: var(--quote--font-style);
+		line-height: var(--quote--line-height);
+	}
+
+	.wp-block-quote__citation,
+	cite,
+	footer {
+		color: var(--global--color-foreground-light);
+		font-size: var(--global--font-size-xs);
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] &,
+		.wp-block-cover[style*="background-image"] & {
+			color: currentColor;
+		}
+	}
+
+	/**
+	 * Block Options
+	 */
+	&.has-text-align-right {
+		border-left: none;
+		border-right: var(--quote--border-width) solid var(--quote--border-color);
+		padding-left: 0;
+		padding-right: var(--global--spacing-horizontal);
+	}
+	
+	&.has-text-align-center {
+		border: none;
+	}
+
+	&.is-style-large,
+	&.is-large {
+		/* Resetting margins to match _block-container.scss */
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+		padding-left: var(--global--spacing-horizontal);
+
+		&.has-text-align-right {
+			padding-left: 0;
+			padding-right: var(--global--spacing-horizontal);
+		}
+		
+		&.has-text-align-center {
+			padding: 0 var(--global--spacing-horizontal);
+		}
+
+		p {
+			font-size: var(--quote--font-size-large);
+			font-style: var(--quote--font-style-large);
+			line-height: var(--quote--line-height-large);
+		}
+
+		.wp-block-quote__citation,
+		cite,
+		footer {
+			color: var(--global--color-foreground-light);
+			font-size: var(--global--font-size-xs);
+		}
+	}
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"] &,
+	.wp-block-cover[style*="background-image"] & {
+		border-color: currentColor;
+	}
+}

seedlet/assets/sass/blocks/search/_editor.scss

@@ -0,0 +1,24 @@
+.wp-block-search {
+    display: flex;
+    max-width: var(--responsive--aligndefault-width);
+    .wp-block-search__label {
+        font-weight: normal;
+    }
+    .wp-block-search__input {
+        border: var(--form--border-width) solid var(--form--border-color);
+        border-radius: var(--form--border-radius);
+        font-family: var(--form--font-family);
+        font-size: var(--form--font-size);
+        line-height: var(--form--line-height);
+        max-width: inherit;
+        margin-right: calc( .66 * var(--global--spacing-horizontal) );
+        padding: var(--form--spacing-unit);
+
+        &:focus {
+            border-color: var(--form--border-color);
+        }
+    }
+    .wp-block-search__button {
+        @extend %button-style;
+    }
+}

seedlet/assets/sass/blocks/search/_style.scss

@@ -0,0 +1,21 @@
+.wp-block-search {
+    display: flex;
+    max-width: var(--responsive--aligndefault-width);
+    .wp-block-search__label {
+        font-weight: normal;
+    }
+    .wp-block-search__input {
+        border: var(--form--border-width) solid var(--form--border-color);
+        border-radius: var(--form--border-radius);
+        color: var(--form--color-text);
+        line-height: var(--global--line-height-body);
+        max-width: inherit;
+        margin-right: calc( .66 * var(--global--spacing-horizontal) );
+        padding: var(--form--spacing-unit);
+
+        &:focus {
+            color: var(--form--color-text);
+            border-color: var(--form--border-color);
+        }
+    }
+}

seedlet/assets/sass/blocks/separator/_config.scss

@@ -0,0 +1,5 @@
+@mixin separator-variables() {
+	--separator--border-color: var(--global--color-border);
+	--separator--height: 2px;
+	--separator--width: calc(6 * var(--global--spacing-horizontal));
+}

seedlet/assets/sass/blocks/separator/_editor.scss

@@ -0,0 +1,39 @@
+.wp-block-separator,
+hr {
+	border-bottom: var(--separator--height) solid var(--separator--border-color);
+	clear: both;
+
+	&[style*="text-align:right"],
+	&[style*="text-align: right"] {
+		border-right-color: var(--separator--border-color);
+	}
+
+	&.is-style-wide {
+		border-bottom-width: var(--separator--height);
+	}
+
+	&.is-style-dots {
+
+		border-bottom: none;
+
+		&.has-background,
+		&.has-text-color {
+			background-color: transparent !important;
+
+			&:before {
+				color: currentColor !important;
+			}
+		}
+
+		&:before {
+			color: var(--separator--border-color);
+		}
+	}
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"]:not(.has-background-background-color) &,
+	.wp-block-cover[style*="background-image"] & {
+		border-color: currentColor;
+	}
+}

seedlet/assets/sass/blocks/separator/_style.scss

@@ -0,0 +1,48 @@
+hr {
+	border-style: none;
+	border-bottom: var(--separator--height) solid var(--separator--border-color);
+	clear: both;
+	margin-left: auto;
+	margin-right: auto;
+
+	&.wp-block-separator {
+		border-bottom: var(--separator--height) solid var(--separator--border-color);
+
+		&:not(.is-style-wide):not(.is-style-dots) {
+			max-width: var(--separator--width);
+		}
+
+		/**
+		 * Block Options
+		 */
+		&.is-style-wide {
+			@extend %responsive-aligndefault-width;
+		}
+
+		&.is-style-dots {
+
+			&.has-background,
+			&.has-text-color {
+				background-color: transparent !important;
+
+				&:before {
+					color: currentColor !important;
+				}
+			}
+
+			&:before {
+				color: var(--separator--border-color);
+				font-size: var(--global--font-size-xl);
+				letter-spacing: var(--global--font-size-sm);
+				padding-left: var(--global--font-size-sm);
+			}
+		}
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] &,
+		.wp-block-cover[style*="background-image"] & {
+			border-color: currentColor;
+		}
+	}
+}

seedlet/assets/sass/blocks/slideshow/_style.scss

@@ -0,0 +1,6 @@
+.wp-block-jetpack-slideshow {
+	ul {
+		margin-left: 0;
+		margin-right: 0;
+	}
+}

seedlet/assets/sass/blocks/spacer/_style.scss

@@ -0,0 +1,12 @@
+.wp-block-spacer {
+	display: block;
+	// Remove vertical margins
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+
+	@include media(mobile-only) {
+		&[style] {
+			height: var(--global--spacing-unit) !important;
+		}
+	}
+}

seedlet/assets/sass/blocks/subscription/style.scss

@@ -0,0 +1,6 @@
+.jetpack_subscription_widget {
+  input[type="text"] {
+    padding: var(--elements--form-padding) !important;
+    width: 100% !important;
+  }
+}

seedlet/assets/sass/blocks/table/_editor.scss

@@ -0,0 +1,12 @@
+table,
+.wp-block-table {
+
+	th {
+		font-family: var(--heading--font-family);
+	}
+
+	td,
+	th {
+		padding: calc( 0.5 * var(--global--spacing-unit) );
+	}
+}

seedlet/assets/sass/blocks/table/_style.scss

@@ -0,0 +1,17 @@
+table,
+.wp-block-table {
+	width: 100%;
+	min-width: 240px;
+	border-collapse: collapse;
+
+	th {
+		font-family: var(--heading--font-family);
+	}
+
+	td,
+	th {
+		padding: calc( 0.5 * var(--global--spacing-unit) );
+		border: 1px solid;
+		word-break: break-all;
+	}
+}

seedlet/assets/sass/blocks/utilities/_config.scss

@@ -0,0 +1,9 @@
+@mixin utilities-variables() {
+	--utilities--font-size-xs: var(--global--font-size-xs);
+	--utilities--font-size-sm: var(--global--font-size-sm);
+	--utilities--font-size-md: var(--global--font-size-md);
+	--utilities--font-size-lg: var(--global--font-size-lg);
+	--utilities--font-size-xl: var(--global--font-size-xl);
+	--utilities--font-size-xxl: var(--global--font-size-xxl);
+	--utilities--font-size-xxxl: var(--global--font-size-xxxl);
+}

seedlet/assets/sass/blocks/utilities/_editor.scss

@@ -0,0 +1,242 @@
+/**
+* Editor Post Title
+* - Needs a special styles
+*/
+
+// Post title style
+.editor-post-title__block .editor-post-title__input {
+	color: var(--global--color-foreground);
+	font-family: var(--heading--font-family);
+	font-weight: var(--heading--font-weight);
+	font-size: var(--heading--font-size-h2);
+	letter-spacing: var(--heading--letter-spacing-h2);
+	line-height: var(--heading--line-height);
+}
+
+// Editor UI font styles
+.wp-block.block-editor-default-block-appender > textarea {
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-md);
+}
+
+// Gutenberg text color options
+.has-text-color {}
+
+.has-primary-color[class] {
+	color: var(--global--color-primary) !important;
+}
+
+.has-secondary-color[class] {
+	color: var(--global--color-secondary) !important;
+}
+
+.has-foreground-color[class] {
+	color: var(--global--color-foreground) !important;
+}
+
+.has-foreground-light-color[class] {
+	color: var(--global--color-foreground-light) !important;
+}
+
+.has-foreground-dark-color[class] {
+	color: var(--global--color-foreground-dark) !important;
+}
+
+.has-tertiary-color[class] {
+	color: var(--global--color-tertiary) !important;
+}
+
+.has-background-dark-color[class] {
+	color: var(--global--color-background-dark) !important;
+}
+
+.has-background-color[class] {
+	color: var(--global--color-background) !important;
+}
+
+// Gutenberg background-color options
+.has-background {
+	&:not(.has-background-background-color) a,
+	p, h1, h2, h3, h4, h5, h6 {
+		color: currentColor;
+	}
+}
+
+.has-primary-background-color[class] {
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background);
+}
+
+.has-primary-background-color[class] {
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background);
+}
+
+.has-secondary-background-color[class] {
+	background-color: var(--global--color-secondary) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-background-color[class] {
+	background-color: var(--global--color-foreground) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-light-background-color[class] {
+	background-color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-dark-background-color[class] {
+	background-color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-background);
+}
+
+.has-tertiary-background-color[class] {
+	background-color: var(--global--color-tertiary) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-dark-background-color[class] {
+	background-color: var(--global--color-background-dark) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-background-color[class] {
+	background-color: var(--global--color-background) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-white-background-color[class] {
+	background-color: var(--global--color-white) !important;
+	color: var(--global--color-secondary);
+}
+
+.has-black-background-color[class] {
+	background-color: var(--global--color-black) !important;
+	color: var(--global--color-primary);
+}
+
+// Gutenberg Font-size utility classes
+.is-tiny-text,
+.has-tiny-font-size {
+	font-size: var(--global--font-size-xs);
+}
+
+.is-small-text,
+.has-small-font-size {
+	font-size: var(--global--font-size-sm);
+}
+
+.is-regular-text,
+.has-regular-font-size,
+.has-normal-font-size,
+.has-medium-font-size {
+	font-size: var(--global--font-size-md);
+}
+
+.is-large-text,
+.has-large-font-size {
+	font-size: var(--global--font-size-lg);
+	line-height: var(--global--line-height-heading);
+}
+
+.is-larger-text,
+.has-larger-font-size,
+.has-huge-font-size {
+	font-size: var(--global--font-size-xl);
+	line-height: var(--global--line-height-heading);
+}
+
+// Drop cap
+.has-drop-cap:not(:focus)::first-letter {
+	font-family: var(--heading--font-family);
+	font-size: calc(2 * var(--heading--font-size-h1));
+	font-weight: var(--heading--font-weight);
+}
+
+/**
+ * Spacing Overrides
+ */
+
+[data-block] {
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+
+	[data-block]:first-child {
+		margin-top: 0;
+	}
+
+	// Needs to be the second-last child to avoid applying this to the appender. 
+	[data-block]:nth-last-child(2) {
+		margin-bottom: 0;
+	}
+}
+
+/* 
+ * Custom gradients 
+*/
+.has-hard-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-hard-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-stripe-gradient-background {
+	background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
+}
+
+/* Block Alignments */
+.wp-block {
+
+	// Gutenberg injects a rule that limits the max width of .wp-block to 580px
+	// This line overrides it to use the responsive spacing rules for default width content
+	max-width: var(--responsive--aligndefault-width);
+
+	// Use the theme's max-width for wide alignment.
+	&[data-align="wide"],
+	&.alignwide {
+		max-width: var(--responsive--alignwide-width);
+	}
+
+	&[data-align="full"],
+	&.alignfull {
+		max-width: none;
+	}
+}
+
+.alignleft {
+	margin: 0;
+	margin-right: var(--global--spacing-horizontal);
+}
+
+.alignright {
+	margin: 0;
+	margin-left: var(--global--spacing-horizontal);
+}

seedlet/assets/sass/blocks/utilities/_spacing-overrides.scss

@@ -0,0 +1,115 @@
+/*
+ * Margins
+ */
+
+.margin-top-none {
+	margin-top: 0 !important;
+}
+
+.margin-top-half {
+	margin-top: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.margin-top-default {
+	margin-top: var(--global--spacing-vertical) !important;
+}
+
+.margin-right-none {
+	/*rtl:ignore*/
+	margin-right: 0 !important;
+}
+
+.margin-right-half {
+	/*rtl:ignore*/
+	margin-right: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.margin-right-default {
+	/*rtl:ignore*/
+	margin-right: var(--global--spacing-vertical) !important;
+}
+
+.margin-bottom-none {
+	margin-bottom: 0 !important;
+}
+
+.margin-bottom-half {
+	margin-bottom: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.margin-bottom-default {
+	margin-bottom: var(--global--spacing-vertical) !important;
+}
+
+.margin-left-none {
+	/*rtl:ignore*/
+	margin-left: 0 !important;
+}
+
+.margin-left-half {
+	/*rtl:ignore*/
+	margin-left: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.margin-left-default {
+	/*rtl:ignore*/
+	margin-left: var(--global--spacing-vertical) !important;
+}
+
+/*
+ * Padding
+ */
+
+.padding-top-none {
+	padding-top: 0 !important;
+}
+
+.padding-top-half {
+	padding-top: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.padding-top-default {
+	padding-top: var(--global--spacing-vertical) !important;
+}
+
+.padding-right-none {
+	/*rtl:ignore*/
+	padding-right: 0 !important;
+}
+
+.padding-right-half {
+	/*rtl:ignore*/
+	padding-right: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.padding-right-default {
+	/*rtl:ignore*/
+	padding-right: var(--global--spacing-vertical) !important;
+}
+
+.padding-bottom-none {
+	padding-bottom: 0 !important;
+}
+
+.padding-bottom-half {
+	padding-bottom: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.padding-bottom-default {
+	padding-bottom: var(--global--spacing-vertical) !important;
+}
+
+.padding-left-none {
+	/*rtl:ignore*/
+	padding-left: 0 !important;
+}
+
+.padding-left-half {
+	/*rtl:ignore*/
+	padding-left: calc(0.5 * var(--global--spacing-vertical)) !important;
+}
+
+.padding-left-default {
+	/*rtl:ignore*/
+	padding-left: var(--global--spacing-vertical) !important;
+}

seedlet/assets/sass/blocks/utilities/_style.scss

@@ -0,0 +1,314 @@
+/* Block Alignments */
+
+/**
+ * .alignleft
+ */
+.alignleft {
+	/*rtl:ignore*/
+	text-align: left;
+	/*rtl:ignore*/
+	float: left;
+	margin-top: 0;
+	/*rtl:ignore*/
+	margin-right: var(--global--spacing-horizontal);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.entry-content > .alignleft {
+	@extend %responsive-alignleft-mobile;
+	@extend %responsive-alignleft;
+}
+
+/**
+ * .aligncenter
+ */
+.aligncenter {
+	clear: both;
+	display: block;
+	float: none;
+	margin-right: auto;
+	margin-left: auto;
+	text-align: center;
+}
+
+/**
+ * .alignright
+ */
+.alignright {
+	/*rtl:ignore*/
+	float: right;
+	margin-top: 0;
+	margin-bottom: var(--global--spacing-vertical);
+	/*rtl:ignore*/
+	margin-left: var(--global--spacing-horizontal);
+}
+
+.entry-content > .alignright {
+	@extend %responsive-alignright-mobile;
+	@extend %responsive-alignright;
+}
+
+// Make sure siblings of floated elements are top-aligned when nested
+.entry-content * > .alignleft + *,
+.entry-content * > .alignright + * {
+	margin-top: 0;
+}
+
+/**
+ * .aligndefault
+ */
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
+	@extend %responsive-aligndefault-width;
+}
+
+/**
+ * .alignwide
+ */
+.alignwide {
+	clear: both;
+}
+
+.entry-content > .alignwide {
+	@extend %responsive-alignwide-width;
+}
+
+.entry-content > .alignwide [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-width-nested;
+}
+
+/**
+ * .alignfull
+ */
+.alignfull {
+	clear: both;
+}
+
+.entry-content > .alignfull {
+	@extend %responsive-alignfull-width-mobile;
+	@extend %responsive-alignfull-width;
+}
+
+.entry-content > .alignfull [class*="inner-container"] > .alignwide {
+	@extend %responsive-alignwide-width-nested;
+}
+
+// Content alignment
+.has-left-content {
+	justify-content: flex-start;
+}
+
+.has-right-content {
+	justify-content: flex-end;
+}
+
+// Parallax
+.has-parallax {
+	background-attachment: fixed;
+}
+
+// Gutenberg text color options
+.has-text-color {}
+
+.has-primary-color[class] {
+	color: var(--global--color-primary) !important;
+}
+
+.has-secondary-color[class] {
+	color: var(--global--color-secondary) !important;
+}
+
+.has-foreground-color[class] {
+	color: var(--global--color-foreground) !important;
+}
+
+.has-foreground-light-color[class] {
+	color: var(--global--color-foreground-light) !important;
+}
+
+.has-foreground-dark-color[class] {
+	color: var(--global--color-foreground-dark) !important;
+}
+
+.has-tertiary-color[class] {
+	color: var(--global--color-tertiary) !important;
+}
+
+.has-background-dark-color[class] {
+	color: var(--global--color-background-dark) !important;
+}
+
+.has-background-color[class] {
+	color: var(--global--color-background) !important;
+}
+
+.has-white-color[class] {
+	color: var(--global--color-white) !important;
+}
+
+.has-black-color[class] {
+	color: var(--global--color-black) !important;
+}
+
+// Gutenberg background-color options
+.has-background {
+	&:not(.has-background-background-color) a,
+	p, h1, h2, h3, h4, h5, h6 {
+		color: currentColor;
+	}
+}
+
+.has-primary-background-color[class] {
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background);
+}
+
+.has-secondary-background-color[class] {
+	background-color: var(--global--color-secondary) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-background-color[class] {
+	background-color: var(--global--color-foreground) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-light-background-color[class] {
+	background-color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-background);
+}
+
+.has-foreground-dark-background-color[class] {
+	background-color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-background);
+}
+
+.has-tertiary-background-color[class] {
+	background-color: var(--global--color-tertiary) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-dark-background-color[class] {
+	background-color: var(--global--color-background-dark) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-background-background-color[class] {
+	background-color: var(--global--color-background) !important;
+	color: var(--global--color-foreground);
+}
+
+.has-white-background-color[class] {
+	background-color: var(--global--color-white) !important;
+	color: var(--global--color-secondary);
+}
+
+.has-black-background-color[class] {
+	background-color: var(--global--color-black) !important;
+	color: var(--global--color-primary);
+}
+
+// Gutenberg Font-size options
+:root {
+	.is-tiny-text,
+	.has-tiny-font-size {
+		font-size: var(--global--font-size-xs);
+	}
+
+	.is-small-text,
+	.has-small-font-size {
+		font-size: var(--global--font-size-sm);
+	}
+
+	.is-regular-text,
+	.has-regular-font-size,
+	.has-normal-font-size,
+	.has-medium-font-size {
+		font-size: var(--global--font-size-base);
+	}
+
+	.is-large-text,
+	.has-large-font-size {
+		font-size: var(--global--font-size-lg);
+		line-height: var(--global--line-height-heading);
+	}
+
+	.is-larger-text,
+	.has-larger-font-size,
+	.has-huge-font-size {
+		font-size: var(--global--font-size-xl);
+		line-height: var(--global--line-height-heading);
+	}
+}
+
+// Drop caps
+.has-drop-cap:not(:focus)::first-letter {
+	font-family: var(--heading--font-family);
+	font-size: calc(2 * var(--heading--font-size-h1));
+	font-weight: var(--heading--font-weight);
+	line-height: 0.66;
+	text-transform: uppercase;
+	font-style: normal;
+	float: left;
+	margin: 0.1em 0.1em 0 0;
+}
+
+.has-drop-cap:not(:focus)::after {
+	content: "";
+	display: table;
+	clear: both;
+	padding-top: 14px;
+}
+
+.desktop-only {
+	display: none;
+
+	@include media(mobile) {
+		display: block;
+	}
+}
+
+/**
+ * Spacing Overrides
+ */
+
+@import "spacing-overrides";
+
+/* 
+ * Custom gradients 
+*/
+.has-hard-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
+}
+
+.has-diagonal-gradient-background {
+	background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-diagonal-inverted-gradient-background {
+	background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-hard-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-hard-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
+}
+
+.has-horizontal-gradient-background {
+	background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-horizontal-inverted-gradient-background {
+	background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
+}
+
+.has-stripe-gradient-background {
+	background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
+}

seedlet/assets/sass/blocks/verse/_editor.scss

@@ -0,0 +1,3 @@
+pre.wp-block-verse {
+	padding: 0;
+}

seedlet/assets/sass/blocks/verse/_style.scss

@@ -0,0 +1,3 @@
+.wp-block-verse {
+	font-family: var(--entry-content--font-family);
+}