/*
 * Generic theme base -- NOT WooCommerce-specific (see woocommerce-base.css for that).
 * Enqueued first, before tokens.css/global.css. Previously this baseline came for free
 * from the Storefront parent theme's own style.css (this theme was a "Storefront child
 * theme"); now that the theme is standalone, it owns this layer itself. Curated (not a
 * full copy) from Storefront 4.6.2's compiled style.css -- only the rules this theme's
 * own markup/content can actually reach are ported; anything scoped to Storefront-only
 * markup this theme never emits (.site-header, .col-full, .content-area/.widget-area
 * float grid, .error404 columns, etc.) is left out entirely. See
 * docs/superpowers/specs/2026-08-04-remove-storefront-dependency-design.md.
 */

/* Load-bearing: every width/padding calculation across global.css/homepage.css/
   product.css/etc. assumes border-box sizing -- global.css's own ".myc-content
   {box-sizing:content-box}" is an explicit opt-OUT of this default, which only makes
   sense if border-box is the sitewide default in the first place. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* The UA's 8px body margin: it used to be zeroed by WordPress' global-styles, which the myc
   plugin dequeues on storefront pages (AssetCleanupHooks) -- QA NEW-47. */
body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* WP core convention (WCAG "skip link"/visually-hidden text) -- used directly by the
   promo bar's marquee (template-parts/global/site-header.php). WordPress core CSS
   doesn't ship this on the frontend by itself; themes are expected to define it. */
.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;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 0;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  display: block;
  font-weight: 700;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 1em 1.618em;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
  outline: none;
}

/* Baseline typography for any element inside the_content() (blog body, WP Pages) or
   WooCommerce-generated markup this theme doesn't otherwise style -- font-family/color
   already come from html body/tokens.css, this only sets sizing/spacing so unstyled
   headings/lists/quotes inside editor content don't fall back to bare browser defaults. */
h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 700;
  margin: 0 0 .55em;
}

h1 { font-size: 2.2em; line-height: 1.2; }
h2 { font-size: 1.8em; line-height: 1.25; }
h3 { font-size: 1.5em; line-height: 1.3; }
h4 { font-size: 1.25em; line-height: 1.35; }
h5 { font-size: 1.1em; line-height: 1.4; }
h6 { font-size: 1em; line-height: 1.4; }

p { margin: 0 0 1.4em; }

ul, ol { margin: 0 0 1.4em 1.4em; padding: 0; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; }

blockquote {
  margin: 0 0 1.4em;
  padding: 0 1em;
  border-left: 3px solid rgba(0, 0, 0, .08);
  font-style: italic;
}

a { color: inherit; }

/* WP editor alignment classes -- can appear in any post/page content. */
.alignleft { display: inline; float: left; margin-right: 1em; }
.alignright { display: inline; float: right; margin-left: 1em; }
.aligncenter { clear: both; display: block; margin: 0 auto; }

.wp-caption { margin-bottom: 1em; max-width: 100%; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption .wp-caption-text { text-align: left; font-style: italic; padding: .5em 0; }

.gallery { margin-bottom: 1em; display: flex; flex-wrap: wrap; }
.gallery-item { padding: 4px; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.333%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-6 .gallery-item { width: 16.666%; }
.gallery-caption { margin: 0; text-align: center; font-size: .875em; }

/* Buttons/form fields base -- checkout form fields and the native WP comment form
   (myc_v3_display_comments()) render through this before any reskin colors it. */
button, input, select, textarea { font-size: 100%; margin: 0; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
  border: 0;
  border-radius: 0;
  background-color: #43454b;
  color: #fff;
  cursor: pointer;
  padding: .6em 1.4em;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  -webkit-appearance: none;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
  padding: .6em;
  background-color: #f2f2f2;
  color: #43454b;
  border: 0;
  -webkit-appearance: none;
  box-sizing: border-box;
  font-weight: 400;
}

textarea { width: 100%; vertical-align: top; }

label { font-weight: 400; }

input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  margin: 0 0 0 .4em;
}

fieldset {
  padding: 1.4em;
  border: 1px solid rgba(0, 0, 0, .08);
  margin: 1.4em 0;
}

fieldset legend {
  font-weight: 600;
  padding: 0 .5em;
}

/* Cart/checkout/MyAccount order tables base -- cart.css/checkout.css already fully
   restyle their own specific tables; this is the fallback for the ones they don't
   (MyAccount order history/view). */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.4em;
}

table td, table th {
  padding: 1em 1.4em;
  text-align: left;
  vertical-align: top;
}

table th { font-weight: 600; }

/* Core WP pagination markup (the_posts_pagination()/paginate_links()) -- the blog
   listing itself uses its own AJAX "load more" (inc/blog-archive.php), but MyAccount's
   order-history pagination and any other core-rendered archive fall back to this. */
.pagination, .woocommerce-pagination {
  padding: 1em 0;
  text-align: center;
  clear: both;
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 4px;
}

.pagination .page-numbers li,
.woocommerce-pagination .page-numbers li {
  display: inline-block;
}

.pagination .page-numbers li .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
  display: inline-block;
  padding: .3em .9em;
  background-color: rgba(0, 0, 0, .025);
  color: #43454b;
}

.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
  background-color: var(--myc-ink, #254462);
  color: #fff;
}

/* sidebar-1 (blog widget area) -- the only registered sidebar in this theme
   (functions.php). */
.widget { margin: 0 0 2.4em; }
.widget .widget-title { font-size: 1.3em; margin-bottom: 1em; font-weight: 700; }
.widget ul { margin-left: 0; list-style: none; }
.widget ul ul { margin-left: 1.4em; }

/* Native WP comment form/thread -- page.php's myc_v3_display_comments() only, a
   low-traffic path with no dedicated design spec; this is a reasonable baseline, not a
   bespoke design. */
#comments { padding-top: 2.4em; }
#comments .comments-title { margin-bottom: 1em; }
#comments .comment-list { list-style: none; margin-left: 0; }
#comments .comment-list .comment-content { padding-bottom: 1.4em; margin-bottom: 1.4em; border-bottom: 1px solid rgba(0, 0, 0, .08); }
#comments .comment-list .comment-meta .avatar { margin-bottom: .5em; max-width: 48px; height: auto; }
#respond { clear: both; padding: 1.4em; background-color: rgba(0, 0, 0, .0125); }
#respond .comment-form-author input,
#respond .comment-form-email input,
#respond .comment-form-url input { width: 100%; }