<!doctype html>
<html
  
  lang="en"
  dir="ltr"
>
  <head>



<meta charset="utf-8">
<meta
  http-equiv="X-UA-Compatible"
  content="IE=edge"
>
<meta
  name="viewport"
  content="width=device-width,initial-scale=1,viewport-fit=cover"
>
<meta
  name="theme-color"
  content=""
>

<meta
  property="og:site_name"
  content="Christopher&#39;s Rockin&#39; Store"
>
<meta
  property="og:url"
  content="https://rockinstore.com/"
>
<meta
  property="og:title"
  content="Christopher&#39;s Rockin&#39; Store"
>
<meta
  property="og:type"
  content="website"
>
<meta
  property="og:description"
  content="Christopher&#39;s Rockin&#39; Store"
><meta
  name="twitter:card"
  content="summary_large_image"
>
<meta
  name="twitter:title"
  content="Christopher&#39;s Rockin&#39; Store"
>
<meta
  name="twitter:description"
  content="Christopher&#39;s Rockin&#39; Store"
>

<title>
  Christopher's Rockin' Store
 &ndash; Christopher&#39;s Rockin&#39; Store</title>

<link
  rel="canonical"
  href="https://rockinstore.com/"
>


<link href="/cdn/shop/t/23/assets/overflow-list.css?v=16727044177065489451791786764" as="style" rel="preload">
<link href="/cdn/shop/t/23/assets/base.css?v=1608593463354239791791786764" rel="stylesheet" type="text/css" media="all" />





<link href="/cdn/fonts/raleway/raleway_n4.2c76ddd103ff0f30b1230f13e160330ff8b2c68a.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
<link href="/cdn/fonts/grandstander/grandstander_n6.8b88bd32f6210067a2288a1ce615bb7acf551358.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
<link href="/cdn/fonts/grandstander/grandstander_n7.ee1905249d385e58095fe48ba9ddb18e9cf5f872.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">
<link href="/cdn/fonts/grandstander/grandstander_n7.ee1905249d385e58095fe48ba9ddb18e9cf5f872.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload">


<script async crossorigin fetchpriority="high" src="/cdn/shopifycloud/importmap-polyfill/es-modules-shim.2.4.0.js"></script>
<script type="importmap">
  {
    "imports": {
      "@theme/overflow-list": "/cdn/shop/t/23/assets/overflow-list.js?v=46858356770684902511791786764",
      "@theme/component": "/cdn/shop/t/23/assets/component.js?v=175690430936884589731791786764",
      "@theme/dialog": "/cdn/shop/t/23/assets/dialog.js?v=144816527575655702281791786764",
      "@theme/events": "/cdn/shop/t/23/assets/events.js?v=164878410936539277451791786764",
      "@shopify/events": "https://cdn.shopify.com/storefront/standard-events.dev.js",
      "@theme/view-event-elements": "/cdn/shop/t/23/assets/view-event-elements.js?v=34258756885466567141791786765",
      "@theme/focus": "/cdn/shop/t/23/assets/focus.js?v=60436577539430446401791786764",
      "@theme/morph": "/cdn/shop/t/23/assets/morph.js?v=163551064521986254391791786764",
      "@theme/paginated-list": "/cdn/shop/t/23/assets/paginated-list.js?v=71290058904108491691791786764",
      "@theme/performance": "/cdn/shop/t/23/assets/performance.js?v=171015751390534793081791786764",
      "@theme/product-form": "/cdn/shop/t/23/assets/product-form.js?v=156247955454460663281791786764",
      "@theme/recently-viewed-products": "/cdn/shop/t/23/assets/recently-viewed-products.js?v=94729125001750262651791786765",
      "@theme/scrolling": "/cdn/shop/t/23/assets/scrolling.js?v=166966481516020134501791786765",
      "@theme/section-renderer": "/cdn/shop/t/23/assets/section-renderer.js?v=165897709872489896681791786765",
      "@theme/section-hydration": "/cdn/shop/t/23/assets/section-hydration.js?v=108434990705342316311791786765",
      "@theme/money-formatting": "/cdn/shop/t/23/assets/money-formatting.js?v=160151249720534550011791786764",
      "@theme/utilities": "/cdn/shop/t/23/assets/utilities.js?v=128964188705738871001791786765",
      "@theme/variant-picker": "/cdn/shop/t/23/assets/variant-picker.js?v=76692244208061220611791786765",
      "@theme/variant-resolution": "/cdn/shop/t/23/assets/variant-resolution.js?v=69293302205961280521791786765",
      "@theme/media-gallery": "/cdn/shop/t/23/assets/media-gallery.js?v=154207211298275592001791786764",
      "@theme/quick-add": "/cdn/shop/t/23/assets/quick-add.js?v=160295260742220749141791786765",
      "@theme/paginated-list-aspect-ratio": "/cdn/shop/t/23/assets/paginated-list-aspect-ratio.js?v=25254270272143792451791786764",
      "@theme/component-cart-items": "/cdn/shop/t/23/assets/component-cart-items.js?v=128607540178034746111791786764",
      "@theme/component-quantity-selector": "/cdn/shop/t/23/assets/component-quantity-selector.js?v=125177944711255157891791786764",
      "@theme/comparison-slider": "/cdn/shop/t/23/assets/comparison-slider.js?v=106705562947035711941791786764",
      "@theme/sticky-add-to-cart": "/cdn/shop/t/23/assets/sticky-add-to-cart.js?v=130489688094345781431791786765",
      "@theme/fly-to-cart": "/cdn/shop/t/23/assets/fly-to-cart.js?v=48483246440248933081791786764",
      "@theme/scroll-container": "/cdn/shop/t/23/assets/scroll-container.js?v=127018149358875384221791786765",
      "@theme/theme-drawer": "/cdn/shop/t/23/assets/theme-drawer.js?v=87991178686530867571791786765"
    }
  }
</script><script
  src="/cdn/shop/t/23/assets/standard-actions-override.js?v=171683365447094389611791786765"
  type="module"
></script>

<script
  src="/cdn/shop/t/23/assets/page-view-event.js?v=12823247316348680231791786764"
  type="module"
  defer
></script>



<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/utilities.js?v=128964188705738871001791786765"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/component.js?v=175690430936884589731791786764"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/section-renderer.js?v=165897709872489896681791786765"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/section-hydration.js?v=108434990705342316311791786765"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/morph.js?v=163551064521986254391791786764"
  fetchpriority="low"
>



<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/focus.js?v=60436577539430446401791786764"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/recently-viewed-products.js?v=94729125001750262651791786765"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/scrolling.js?v=166966481516020134501791786765"
  fetchpriority="low"
>
<link
  rel="modulepreload"
  href="/cdn/shop/t/23/assets/events.js?v=164878410936539277451791786764"
  fetchpriority="low"
>
<script
  src="/cdn/shop/t/23/assets/overflow-list.js?v=46858356770684902511791786764"
  type="module"
  fetchpriority="low"
></script>

  <script
    src="/cdn/shop/t/23/assets/quick-add.js?v=160295260742220749141791786765"
    type="module"
    fetchpriority="low"
  ></script>


  <script
    src="/cdn/shop/t/23/assets/cart-discount.js?v=131878396574145547181791786764"
    type="module"
    fetchpriority="low"
  ></script>


<script
  src="/cdn/shop/t/23/assets/dialog.js?v=144816527575655702281791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/variant-picker.js?v=76692244208061220611791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/product-card.js?v=80689566448612614681791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/product-form.js?v=156247955454460663281791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/fly-to-cart.js?v=48483246440248933081791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/accordion-custom.js?v=105323356731531709191791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/media.js?v=147729010330982515121791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/product-price.js?v=179333985604099329921791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/product-sku.js?v=28741104639155857071791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/product-inventory.js?v=7173209571153411411791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/show-more.js?v=94563802205717136101791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/slideshow.js?v=28306258147874261831791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/layered-slideshow.js?v=99078667042736475191791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/anchored-popover.js?v=41103074827070742301791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/floating-panel.js?v=151277338116891310371791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/video-background.js?v=25237992823806706551791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/component-quantity-selector.js?v=125177944711255157891791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/media-gallery.js?v=154207211298275592001791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/rte-formatter.js?v=40306132146590816021791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/volume-pricing.js?v=15442793518842484731791786765"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/price-per-item.js?v=10699834226661578971791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/volume-pricing-info.js?v=150538418000149674651791786765"
  type="module"
  fetchpriority="low"
></script>


  <script
    src="/cdn/shop/t/23/assets/localization.js?v=76602883968586766701791786764"
    type="module"
    fetchpriority="low"
  ></script>




<script
  src="/cdn/shop/t/23/assets/auto-close-details.js?v=58350291535404441581791786764"
  defer="defer"
></script>

<script>
  const supportsNativePopover = 'popover' in HTMLElement.prototype;
  const Theme = {
    supportsNativePopover,
    popoverPolyfillReady: supportsNativePopover
      ? Promise.resolve()
      : import("/cdn/shop/t/23/assets/popover-polyfill.js?v=119029313658895111201791786764").then(() => {}),
    translations: {
      placeholder_image: `Placeholder image`,
      added: `Added`,
      recipient_form_fields_visible: `Recipient form fields are now visible`,
      recipient_form_fields_hidden: `Recipient form fields are now hidden`,
      recipient_form_error: `There was an error with the form submission`,
      items_added_to_cart_one: `1 item added to cart`,
      items_added_to_cart_other: `{{ count }} items added to cart`,
      cart_count: `Total items in cart`,
    },
    routes: {
      cart_add_url: '/cart/add.js',
      cart_change_url: '/cart/change',
      cart_update_url: '/cart/update',
      cart_url: '/cart',
      predictive_search_url: '/search/suggest',
      search_url: '/search',
    },
    template: {
      name: 'index',
    },
  };
</script>
<style data-shopify>
@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/raleway/raleway_n4.2c76ddd103ff0f30b1230f13e160330ff8b2c68a.woff2") format("woff2"),
       url("/cdn/fonts/raleway/raleway_n4.c057757dddc39994ad5d9c9f58e7c2c2a72359a9.woff") format("woff");
}
@font-face {
  font-family: Raleway;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/raleway/raleway_n7.740cf9e1e4566800071db82eeca3cca45f43ba63.woff2") format("woff2"),
       url("/cdn/fonts/raleway/raleway_n7.84943791ecde186400af8db54cf3b5b5e5049a8f.woff") format("woff");
}
@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/raleway/raleway_i4.aaa73a72f55a5e60da3e9a082717e1ed8f22f0a2.woff2") format("woff2"),
       url("/cdn/fonts/raleway/raleway_i4.650670cc243082f8988ecc5576b6d613cfd5a8ee.woff") format("woff");
}
@font-face {
  font-family: Raleway;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/raleway/raleway_i7.6d68e3c55f3382a6b4f1173686f538d89ce56dbc.woff2") format("woff2"),
       url("/cdn/fonts/raleway/raleway_i7.ed82a5a5951418ec5b6b0a5010cb65216574b2bd.woff") format("woff");
}
@font-face {
  font-family: Grandstander;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/grandstander/grandstander_n6.8b88bd32f6210067a2288a1ce615bb7acf551358.woff2") format("woff2"),
       url("/cdn/fonts/grandstander/grandstander_n6.ba17995a9ecb9cc573f2a85a109a741fa3dfdfde.woff") format("woff");
}
@font-face {
  font-family: Grandstander;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/grandstander/grandstander_n7.ee1905249d385e58095fe48ba9ddb18e9cf5f872.woff2") format("woff2"),
       url("/cdn/fonts/grandstander/grandstander_n7.294050a826d47304455edb2c9dd5b1839597c1ef.woff") format("woff");
}
@font-face {
  font-family: Grandstander;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/grandstander/grandstander_i6.d725fcf8ff56c1cef916b467cfc5d6d22f99bb34.woff2") format("woff2"),
       url("/cdn/fonts/grandstander/grandstander_i6.91803beb394b23491d4fd5ae4dd363c187489ba1.woff") format("woff");
}
@font-face {
  font-family: Grandstander;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/cdn/fonts/grandstander/grandstander_i7.806813094b053a12b3373e61d39bef99dfba2956.woff2") format("woff2"),
       url("/cdn/fonts/grandstander/grandstander_i7.838b59594bef2ca6384f25d1868445c9d51262b8.woff") format("woff");
}


  :root {
    /* Safe area insets — non-zero on notched devices because meta-tags.liquid sets viewport-fit=cover */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);

    /* Page Layout */
    --sidebar-width: 25rem;
    --theme-drawer-width: 30rem;
    --narrow-content-width: 36rem;
    --normal-content-width: 42rem;
    --narrow-page-width: 90rem;
    --normal-page-width: 153.6rem;
    --wide-page-width: 153.6rem;

    /* Section Heights */
    --section-height-small: 15rem;
    --section-height-medium: 25rem;
    --section-height-large: 35rem;

    @media screen and (min-width: 40em) {
      --section-height-small: 40svh;
      --section-height-medium: 55svh;
      --section-height-large: 70svh;
    }

    @media screen and (min-width: 60em) {
      --section-height-small: 50svh;
      --section-height-medium: 65svh;
      --section-height-large: 80svh;
    }

    /* Letter spacing */
    --letter-spacing-sm: 0.06em;

    /* Font families */
    --font-body--family: Raleway, sans-serif;
    --font-body--style: normal;
    --font-body--weight: 400;
    --font-subheading--family: Grandstander, sans-serif;
    --font-subheading--style: normal;
    --font-subheading--weight: 600;
    --font-heading--family: Grandstander, sans-serif;
    --font-heading--style: normal;
    --font-heading--weight: 700;
    --font-accent--family: Grandstander, sans-serif;
    --font-accent--style: normal;
    --font-accent--weight: 700;

    /* Margin sizes */
    --font-heading--spacing: 0.25em;
    --font-h1--spacing: var(--font-heading--spacing);
    --font-h2--spacing: var(--font-heading--spacing);
    --font-h3--spacing: var(--font-heading--spacing);
    --font-h4--spacing: var(--font-heading--spacing);
    --font-h5--spacing: var(--font-heading--spacing);
    --font-h6--spacing: var(--font-heading--spacing);
    --font-paragraph--spacing: 0.5em;

    /** Z-Index / Layering */
    --layer-section-background: -2;
    --layer-lowest: -1;
    --layer-base: 0;
    --layer-flat: 1;
    --layer-raised: 2;
    --layer-heightened: 4;
    --layer-sticky: 8;
    --layer-window-overlay: 10;
    --layer-header-menu: 12;
    --layer-overlay: 16;
    --layer-menu-drawer: 18;
    --layer-temporary: 20;

    /* Max-width / Measure */
    --max-width--body-normal: 32.5em;
    --max-width--body-narrow: 22.75em;

    --max-width--heading-normal: 32.5em;
    --max-width--heading-narrow: 19.5em;

    --max-width--display-normal: 13em;
    --max-width--display-narrow: 9.75em;
    --max-width--display-tight: 3.25em;

    /* Letter-spacing / Tracking */
    --letter-spacing--display-tight: -0.03em;
    --letter-spacing--display-normal: 0em;
    --letter-spacing--display-loose: 0.03em;

    --letter-spacing--heading-tight: -0.03em;
    --letter-spacing--heading-normal: 0em;
    --letter-spacing--heading-loose: 0.03em;

    --letter-spacing--body-tight: -0.03em;
    --letter-spacing--body-normal: 0em;
    --letter-spacing--body-loose: 0.03em;

    /* Line height / Leading */
    --line-height: 1;

    --line-height--display-tight: 1;
    --line-height--display-normal: 1.1;
    --line-height--display-loose: 1.2;

    --line-height--heading-tight: 1.15;
    --line-height--heading-normal: 1.25;
    --line-height--heading-loose: 1.35;

    --line-height--body-tight: 1.2;
    --line-height--body-normal: 1.4;
    --line-height--body-loose: 1.6;

    /* Typography presets */
    --font-size--paragraph: 1.125rem;--font-size--h1: clamp(3.0rem, 7.2vw, 4.5rem);--font-size--h2: clamp(2.5rem, 4.8vw, 3.0rem);--font-size--h3: 2.25rem;--font-size--h4: 1.5rem;--font-size--h5: 1.125rem;--font-size--h6: 0.875rem;--font-paragraph--weight: 400;--font-paragraph--size: var(--font-size--paragraph);--font-paragraph--family: var(--font-body--family);--font-paragraph--style: var(--font-body--style);--font-paragraph--case: ;--font-paragraph--line-height: var(--line-height--body-loose);--font-h1--weight: var(--font-heading--weight);--font-h1--letter-spacing: var(--letter-spacing--heading-normal);--font-h1--size: var(--font-size--h1);--font-h1--family: var(--font-heading--family);--font-h1--style: var(--font-heading--style);--font-h1--case: uppercase;--font-h1--line-height: var(--line-height--display-tight);--font-h2--weight: var(--font-heading--weight);--font-h2--letter-spacing: var(--letter-spacing--heading-normal);--font-h2--size: var(--font-size--h2);--font-h2--family: var(--font-heading--family);--font-h2--style: var(--font-heading--style);--font-h2--case: uppercase;--font-h2--line-height: var(--line-height--display-loose);--font-h3--weight: var(--font-heading--weight);--font-h3--letter-spacing: var(--letter-spacing--heading-normal);--font-h3--size: var(--font-size--h3);--font-h3--family: var(--font-heading--family);--font-h3--style: var(--font-heading--style);--font-h3--case: uppercase;--font-h3--line-height: var(--line-height--display-loose);--font-h4--weight: var(--font-heading--weight);--font-h4--letter-spacing: var(--letter-spacing--heading-normal);--font-h4--size: var(--font-size--h4);--font-h4--family: var(--font-heading--family);--font-h4--style: var(--font-heading--style);--font-h4--case: none;--font-h4--line-height: var(--line-height--display-tight);--font-h5--weight: var(--font-subheading--weight);--font-h5--letter-spacing: var(--letter-spacing--heading-normal);--font-h5--size: var(--font-size--h5);--font-h5--family: var(--font-subheading--family);--font-h5--style: var(--font-subheading--style);--font-h5--case: none;--font-h5--line-height: var(--line-height--display-loose);--font-h6--weight: var(--font-subheading--weight);--font-h6--letter-spacing: var(--letter-spacing--heading-normal);--font-h6--size: var(--font-size--h6);--font-h6--family: var(--font-subheading--family);--font-h6--style: var(--font-subheading--style);--font-h6--case: none;--font-h6--line-height: var(--line-height--display-loose);

    /* Hardcoded font sizes */
    --font-size--3xs: 0.625rem;
    --font-size--2xs: 0.75rem;
    --font-size--xs: 0.8125rem;
    --font-size--sm: 0.875rem;
    --font-size--md: 1rem;
    --font-size--lg: 1.125rem;
    --font-size--xl: 1.25rem;
    --font-size--2xl: 1.5rem;
    --font-size--3xl: 2rem;
    --font-size--4xl: 2.5rem;
    --font-size--5xl: 3rem;
    --font-size--6xl: 3.5rem;

    /* Menu font sizes */
    --menu-font-sm--size: 0.875rem;
    --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14));
    --menu-font-md--size: 1rem;
    --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16));
    --menu-font-xl--size: 1.25rem;
    --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20));
    --menu-font-2xl--size: 1.75rem;
    --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28));

    /* Colors */
    --color-error: #8B0000;
    --color-success: #006400;
    --color-white: #FFFFFF;
    --color-white-rgb: 255 255 255;
    --color-instock: #3ED660;
    --color-lowstock: #EE9441;
    --color-outofstock: #C8C8C8;

    /* Opacity */
    --opacity-5: 0.05;
    --opacity-8: 0.08;
    --opacity-10: 0.1;
    --opacity-15: 0.15;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-85: 0.85;
    --opacity-90: 0.9;
    --opacity-subdued-text: 0.8;
    --opacity-muted-text: 0.6;

    --shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
    --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);

    /* Spacing */
    --margin-3xs: 0.125rem;
    --margin-2xs: 0.3rem;
    --margin-xs: 0.5rem;
    --margin-sm: 0.7rem;
    --margin-md: 0.8rem;
    --margin-lg: 1rem;
    --margin-xl: 1.25rem;
    --margin-2xl: 1.5rem;
    --margin-4xl: 2rem;
    --margin-6xl: 5rem;


    --padding-3xs: 0.125rem;
    --padding-2xs: 0.25rem;
    --padding-xs: 0.5rem;
    --padding-sm: 0.7rem;
    --padding-md: 0.8rem;
    --padding-lg: 1rem;
    --padding-xl: 1.25rem;
    --padding-2xl: 1.5rem;
    --padding-3xl: 1.75rem;
    --padding-4xl: 2rem;
    --padding-5xl: 3rem;
    --padding-6xl: 4rem;

    --gap-3xs: 0.125rem;
    --gap-2xs: 0.3rem;
    --gap-xs: 0.5rem;
    --gap-sm: 0.7rem;
    --gap-md: 0.9rem;
    --gap-lg: 1rem;
    --gap-xl: 1.25rem;
    --gap-2xl: 2rem;
    --gap-3xl: 3rem;

    --spacing-scale-md: 0.7;
    --spacing-scale-default: 1.0;

    /* Checkout buttons gap */
    --checkout-button-gap: 10px;

    /* Borders */
    --style-border-width: 1px;
    --style-border-radius-xs: 0.2rem;
    --style-border-radius-sm: 0.6rem;
    --style-border-radius-md: 0.8rem;
    --style-border-radius-50: 50%;
    --style-border-radius-lg: 1rem;
    --style-border-radius-pills: 40px;
    --style-border-radius-inputs: 8px;
    --style-border-radius-buttons-primary: 100px;
    --style-border-radius-buttons-secondary: 100px;
    --style-border-width-primary: 0px;
    --style-border-width-secondary: 0px;
    --style-border-width-inputs: 1px;
    --style-border-radius-popover: 8px;
    --style-border-popover: 1px solid #DFDFDF;
    --style-border-drawer: 1px solid #DFDFDF;
    --style-border-swatch-opacity: 10%;
    --style-border-swatch-width: 1px;
    --style-border-swatch-style: solid;

    /* Animation */
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
    --animation-speed-fast: 0.0625s;
    --animation-speed: 0.125s;
    --animation-speed-slow: 0.2s;
    --animation-speed-medium: 0.15s;
    --animation-easing: ease-in-out;
    --drawer-animation-speed: 0.2s;
    --animation-values: var(--animation-speed) var(--animation-easing);
    --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0);
    --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
    --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
    --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);
    /* Spring definitions suffixed with perceptual duration (d<ms>) and bounce (b<%>)*/
    --spring-d300-b0-easing: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%);
    --spring-d300-b0-duration: 0.4980s;
    --spring-d280-b0-easing: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%);
    --spring-d280-b0-duration: 0.4648s;
    --spring-d220-b0-easing: linear(
      0,
      0.0093 1.37%,
      0.0696 4.12%,
      0.4667 15.09%,
      0.6322 20.58%,
      0.6986 23.32%,
      0.7793 27.44%,
      0.8219 30.18%,
      0.8721,
      0.9089 38.42%,
      0.9427,
      0.9644,
      0.978 54.88%,
      0.9881 61.74%,
      0.9944 69.97%,
      0.998 80.95%,
      0.9996 98.78%
    );
    --spring-d220-b0-duration: 0.3818s;
    --spring-d180-b0-easing: linear(0, 0.0234, 0.0805 4.48%, 0.4865 15.68%, 0.6211 20.16%, 0.7696 26.88%, 0.8064 29.12%, 0.8646, 0.9063, 0.9358, 0.9563 47.04%, 0.9757, 0.9867 60.48%, 0.9941 69.44%, 0.9979 80.64%, 0.9996 98.56%);
    --spring-d180-b0-duration: 0.2988s;

    /* View transitions */
    /* View transition old */
    --view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut;

    /* View transition new */
    --view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition;

    /* Focus */
    --focus-outline-width: 0.09375rem;
    --focus-outline-offset: 0.2em;

    /* Badges */
    --badge-rectangle-padding-block: 1px;
    --badge-rectangle-padding-inline: 6px;
    @media screen and (min-width: 750px) {
      --badge-rectangle-padding-block: 4px;
      --badge-rectangle-padding-inline: 10px;
    }

    /* Icons */
    --icon-size-2xs: 0.6rem;
    --icon-size-xs: 0.85rem;
    --icon-size-sm: 1.25rem;
    --icon-size-md: 1.375rem;
    --icon-size-lg: 1.5rem;
    --icon-stroke-width: 1.5px;

    /* Input */
    --input-padding-y: 0.8rem;
    --input-padding-x: 0.8rem;
    --input-padding: var(--input-padding-y) var(--input-padding-x);
    --input-box-shadow-width: var(--style-border-width-inputs);
    --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border);
    --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border);
    --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --input-textarea-min-height: 55px;

    /* Checkbox */
    --checkbox-size: 22px;
    --checkbox-border-radius: 7px;
    --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    --checkbox-label-padding: 8px;

    @media screen and (min-width: 750px) {
      --checkbox-size: 16px;
      --checkbox-border-radius: 5px;
      --checkbox-label-padding: 6px;
    }

    /* Button size */
    --button-size-md: 36px;
    --button-size: var(--minimum-touch-target);
    --button-padding-inline: 24px;
    --button-padding-block: 16px;

    /* Button font-family */
    --button-font-family-primary: var(--font-accent--family);
    --button-font-family-secondary: var(--font-accent--family);

    /* Button text case */
    --button-text-case-primary: uppercase;
    --button-text-case-secondary: uppercase;

    /* Borders */
    --border-color: rgb(var(--color-border-rgb) / var(--opacity-50));
    --border-width-sm: 1px;
    --border-radius-sm: 0.25rem;

    /* Drawers */
    --drawer-header-desktop-top: 0rem;
    --drawer-padding: calc(var(--padding-sm) + 7px);
    --drawer-height: 100dvh;
    --drawer-width: 95vw;
    --drawer-max-width: 500px;

    /* Variant Picker Swatches */
    --variant-picker-swatch-width-unitless: 34;
    --variant-picker-swatch-height-unitless: 34;
    --variant-picker-swatch-width: 34px;
    --variant-picker-swatch-height: 34px;
    --variant-picker-swatch-radius: 32px;
    --variant-picker-border-width: 1px;
    --variant-picker-border-style: solid;
    --variant-picker-border-opacity: 10%;

    /* Variant Picker Buttons */
    --variant-picker-button-radius: 8px;
    --variant-picker-button-border-width: 1px;
    --variant-option-label-color: var(--color, var(--color-foreground));

    /* Slideshow */
    --slideshow-controls-icon: 2rem;
    --peek-next-slide-size: 3rem;

    /* Utilities */
    --backdrop-opacity: 0.15;
    --backdrop-color-rgb: var(--color-shadow-rgb);
    --minimum-touch-target: 44px;
    --disabled-opacity: 0.5;
    --skeleton-opacity: 0.025;

    /* Shapes */

    /* Buy buttons */
    --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm));

    /* Card image width and height variables */
    --card-width-small: 10rem;

    --height-small: 10rem;

    @media screen and (min-width: 750px) {
      --height-small: 17.5rem;
    }

    /* Modal */
    --modal-max-height: 65dvh;
    --quick-add-modal-height: min(38.5rem, 96vh);
    /* Centered dialog: reserve the larger side inset on both edges so a landscape
       notch cannot cover the close button. 2vw keeps the original 96vw gutter. */
    --quick-add-modal-width: min(
      54rem,
      calc(100vw - 2 * max(2vw, var(--safe-area-inset-left), var(--safe-area-inset-right)))
    );
    --quick-add-modal-gallery-width: 24rem;

    /* Card styles for search */
    --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10));

    /* Cart */
    --cart-primary-font-family: var(--font-body--family);
    --cart-primary-font-style: var(--font-body--style);
    --cart-primary-font-weight: var(--font-body--weight);
    --cart-secondary-font-family: var(--font-subheading--family);
    --cart-secondary-font-style: var(--font-subheading--style);
    --cart-secondary-font-weight: var(--font-subheading--weight);
  }

  .custom-color-quick-add {
    --quick-add-background: #fceb1f;
    --quick-add-foreground: #0070b8;
  }
</style>






  <style data-shopify>
    .color-custom-popover,
    .color-custom-popover .text-block {
      /* Background */
      --color-background: #ffffff;
      --color-background-rgb: 255 255 255;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #0070b8;
        --color-rgb: 0 112 184;
        --color-foreground: #0070b8;
        --color-foreground-rgb: 0 112 184;
        --color-foreground-muted: rgb(0 112 184 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(0 112 184 / var(--opacity-subdued-text));
        --color-border: #DFDFDF;
        --color-border-rgb: 223 223 223;
      
    }

    
      .color-custom-popover {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(0 112 184 / var(--opacity-10));
        --input-disabled-border-color: rgb(0 112 184 / var(--opacity-5));
        --input-disabled-text-color: rgb(0 112 184 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(0 112 184 / var(--opacity-35-55));
      }
    

    .color-custom-popover {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>








  <style data-shopify>
    .color-custom-drawer,
    .color-custom-drawer .text-block {
      /* Background */
      --color-background: #ffffff;
      --color-background-rgb: 255 255 255;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #0070b8;
        --color-rgb: 0 112 184;
        --color-foreground: #0070b8;
        --color-foreground-rgb: 0 112 184;
        --color-foreground-muted: rgb(0 112 184 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(0 112 184 / var(--opacity-subdued-text));
        --color-border: #DFDFDF;
        --color-border-rgb: 223 223 223;
      
    }

    
      .color-custom-drawer {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(0 112 184 / var(--opacity-10));
        --input-disabled-border-color: rgb(0 112 184 / var(--opacity-5));
        --input-disabled-text-color: rgb(0 112 184 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(0 112 184 / var(--opacity-35-55));
      }
    

    .color-custom-drawer {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>








  <style data-shopify>
    .color-custom-badge-sale,
    .color-custom-badge-sale .text-block {
      /* Background */
      --color-background: #ed1b24;
      --color-background-rgb: 237 27 36;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #ffffff;
        --color-rgb: 255 255 255;
        --color-foreground: #ffffff;
        --color-foreground-rgb: 255 255 255;
        --color-foreground-muted: rgb(255 255 255 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(255 255 255 / var(--opacity-subdued-text));
        --color-border: #ffffff;
        --color-border-rgb: 255 255 255;
      
    }

    
      .color-custom-badge-sale {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(255 255 255 / var(--opacity-10));
        --input-disabled-border-color: rgb(255 255 255 / var(--opacity-5));
        --input-disabled-text-color: rgb(255 255 255 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(255 255 255 / var(--opacity-35-55));
      }
    

    .color-custom-badge-sale {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>








  <style data-shopify>
    .color-custom-badge-sold-out,
    .color-custom-badge-sold-out .text-block {
      /* Background */
      --color-background: #eef1ea;
      --color-background-rgb: 238 241 234;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #0070b8;
        --color-rgb: 0 112 184;
        --color-foreground: #0070b8;
        --color-foreground-rgb: 0 112 184;
        --color-foreground-muted: rgb(0 112 184 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(0 112 184 / var(--opacity-subdued-text));
        --color-border: #0070b8;
        --color-border-rgb: 0 112 184;
      
    }

    
      .color-custom-badge-sold-out {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(0 112 184 / var(--opacity-10));
        --input-disabled-border-color: rgb(0 112 184 / var(--opacity-5));
        --input-disabled-text-color: rgb(0 112 184 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(0 112 184 / var(--opacity-35-55));
      }
    

    .color-custom-badge-sold-out {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>



<style data-shopify>
  :root {
    --wrts-base-h1: 72px;
    --wrts-base-h2: 48px;
    --wrts-base-h3: 36px;
    --wrts-base-body: 18px;

    --font-size--h1: var(--wrts-base-h1);
    --font-size--h2: var(--wrts-base-h2);
    --font-size--h3: var(--wrts-base-h3);
    --font-size--paragraph: var(--wrts-base-body);

    --wrts-type-h1: var(--font-size--h1);
    --wrts-type-h2: var(--font-size--h2);
    --wrts-type-h3: var(--font-size--h3);
    --wrts-type-body: var(--font-size--paragraph);
    --wrts-type-hero-h1: var(--wrts-base-h1);
    --wrts-type-btn: clamp(16px, 1.15vw, 18px);

    --wrts-lh-h1: 1.14;
    --wrts-lh-h2: 1.375;
    --wrts-lh-h3: 1.5;
    --wrts-lh-body: 1.67;
    --wrts-lh-hero-h1: 1.25;
  }

  /* ≤1650: Clovis shrinks H2 only (48 → 40). Hero H1 stays full size. */
  @media screen and (max-width: 1650px) {
    :root {
      --font-size--h2: calc(var(--wrts-base-h2) * 40 / 48);
    }
  }

  /* ≤1199: H1 60, H2 33, H3 28; hero videotxt H1 45 */
  @media screen and (max-width: 1199px) {
    :root {
      --font-size--h1: calc(var(--wrts-base-h1) * 60 / 72);
      --font-size--h2: calc(var(--wrts-base-h2) * 33 / 48);
      --font-size--h3: calc(var(--wrts-base-h3) * 28 / 36);
      --wrts-type-hero-h1: calc(var(--wrts-base-h1) * 45 / 72);
      --wrts-lh-hero-h1: 1.33;
    }
  }

  /* ≤991: H1 50, H2 30; hero videotxt H1 34 */
  @media screen and (max-width: 991px) {
    :root {
      --font-size--h1: calc(var(--wrts-base-h1) * 50 / 72);
      --font-size--h2: calc(var(--wrts-base-h2) * 30 / 48);
      --wrts-type-hero-h1: calc(var(--wrts-base-h1) * 34 / 72);
      --wrts-lh-hero-h1: 1.35;
    }
  }

  /* ≤767: H2 26, H3 24, body 15; hero stays 34 */
  @media screen and (max-width: 767px) {
    :root {
      --font-size--h2: calc(var(--wrts-base-h2) * 26 / 48);
      --font-size--h3: calc(var(--wrts-base-h3) * 24 / 36);
      --font-size--paragraph: calc(var(--wrts-base-body) * 15 / 18);
      --wrts-type-hero-h1: calc(var(--wrts-base-h1) * 34 / 72);
    }
  }

  /* ≤575: H1 34, H2/H3 20; hero videotxt H1 20 */
  @media screen and (max-width: 575px) {
    :root {
      --font-size--h1: calc(var(--wrts-base-h1) * 34 / 72);
      --font-size--h2: calc(var(--wrts-base-h2) * 20 / 48);
      --font-size--h3: calc(var(--wrts-base-h3) * 20 / 36);
      --wrts-type-hero-h1: calc(var(--wrts-base-h1) * 20 / 72);
      --wrts-lh-hero-h1: 1.4;
    }
  }

  /* ≤480: H1 26; hero stays 20 */
  @media screen and (max-width: 480px) {
    :root {
      --font-size--h1: calc(var(--wrts-base-h1) * 26 / 72);
    }
  }
</style>
















<style data-shopify>
  /* Palette colors */
  :root {
    /* WRTS franchise brand tokens (Clovis reference) */
    --brand-blue: #0070b8;
    --brand-blue-rgb: 0 112 184;
    --brand-yellow: #fceb1f;
    --brand-yellow-rgb: 252 235 31;
    --brand-red: #ed1b24;
    --brand-red-rgb: 237 27 36;
    
      --brand-green: #4faf88;
      --brand-green-rgb: 79 175 136;
    
    --brand-black: #000000;
    --brand-black-rgb: 0 0 0;
    --brand-white: #ffffff;
    --brand-white-rgb: 255 255 255;

    --color-background: #ffffff;
    --color-background-rgb: 255 255 255;
    --color-foreground: #0070b8;
    --color-foreground-rgb: 0 112 184;
    --color-border: #0070b8;
    --color-border-rgb: 0 112 184;
    --palette-lightest: #ffffff;
    --palette-lightest-rgb: 255 255 255;
    --palette-darkest: #000000;
    --palette-darkest-rgb: 0 0 0;
    
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


    --color-primary-button-text: rgb(0 112 184 / 1.0);
    --color-primary-button-background: rgb(252 235 31 / 1.0);
    --color-primary-button-border: rgb(252 235 31 / 1.0);
    --color-primary-button-focus-outline: rgb(252 235 31);
    --color-primary-button-hover-text: rgb(0 0 0 / 1.0);
    --color-primary-button-hover-background: #fce906;
    --color-primary-button-hover-border: #fce906;

    --color-secondary-button-text: rgb(255 255 255 / 1.0);
    --color-secondary-button-background: rgb(0 112 184 / 1.0);
    --color-secondary-button-border: rgb(0 112 184 / 1.0);
    --color-secondary-button-hover-text: rgb(255 255 255 / 1.0);
    --color-secondary-button-hover-background: #0080d2;
    --color-secondary-button-hover-border: #0080d2;

    --color-input-background: rgb(255 255 255 / 1.0);
    --color-input-text: rgb(0 112 184 / 1.0);
    --color-input-text-rgb: 0 112 184;
    --color-input-border: rgb(223 223 223 / 1.0);

    --color-variant-background: rgb(255 255 255 / 1.0);
    --color-variant-border: rgb(223 223 223 / 1.0);
    --color-variant-text: rgb(0 112 184 / 1.0);
    --color-variant-text-rgb: 0 112 184;
    --color-variant-hover-background: #f2f2f2;
    --color-variant-hover-text: rgb(0 0 0 / 1.0);
    --color-variant-hover-border: #d2d2d2;

    --color-selected-variant-background: rgb(0 112 184 / 1.0);
    --color-selected-variant-border: rgb(0 112 184 / 1.0);
    --color-selected-variant-text: rgb(255 255 255 / 1.0);
    --color-selected-variant-text-rgb: 255 255 255;
    --color-selected-variant-hover-background: #0080d2;
    --color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
    --color-selected-variant-hover-border: #0080d2;

    --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
    --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --color-foreground-muted: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
    --color-foreground-subdued: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    --color-drawer-shadow-rgb: ;
    --color-popover-shadow-rgb: 0 112 184;

    /* Shadows */
    
    
      --shadow-blur: 20px;
      --shadow-popover: 0px 4px 20px rgb(var(--color-popover-shadow-rgb) / var(--opacity-15));
    
  }

  body {
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  /* WRTS Clovis wave textures — bottom strip, tile on X (.bg-primary blue / .bg-secondary green) */
  .bg-primary {
    background-color: var(--brand-blue, #0070b8) !important;
    background-image: url('/cdn/shop/t/23/assets/wrts-clovis-blue-texture.png?v=102523808410769297181791786765');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: contain;
  }

  .bg-secondary {
    background-color: var(--brand-green, #4faf88) !important;
    background-image: url('/cdn/shop/t/23/assets/wrts-clovis-green-texture.png?v=101170885268364819501791786765');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: contain;
  }
</style>


    <script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script><meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/83978944751/digital_wallets/dialog">
<meta id="in-context-paypal-metadata" data-shop-id="83978944751" data-venmo-supported="false" data-environment="production" data-locale="en_US" data-paypal-v4="true" data-currency="USD">
<link rel="ucp" href="/.well-known/ucp" version="2026-08-25"><script async="async" src="/checkouts/internal/preloads.js?locale=en-US"></script>
<link rel="preconnect" href="https://shop.app" crossorigin="anonymous">
<script async="async" src="https://shop.app/checkouts/internal/preloads.js?locale=en-US&shop_id=83978944751" crossorigin="anonymous"></script>
<script id="apple-pay-shop-capabilities" type="application/json">{"shopId":83978944751,"countryCode":"US","currencyCode":"USD","merchantCapabilities":["supports3DS"],"merchantId":"gid:\/\/shopify\/Shop\/83978944751","merchantName":"Christopher's Rockin' Store","requiredBillingContactFields":["postalAddress","email"],"requiredShippingContactFields":["postalAddress","email"],"shippingType":"shipping","supportedNetworks":["visa","masterCard","discover","amex","elo","jcb"],"total":{"type":"pending","label":"Christopher's Rockin' Store","amount":"1.00"},"shopifyPaymentsEnabled":true,"supportsSubscriptions":true}</script>
<script id="shopify-features" type="application/json">{"accessToken":"89e101fe442ab08ac4868db27c1c9e1e","betas":["rich-media-storefront-analytics"],"domain":"ageyab-kk.myshopify.com","predictiveSearch":true,"shopId":83978944751,"locale":"en"}</script>
<script>var Shopify = Shopify || {};
Shopify.shop = "ageyab-kk.myshopify.com";
Shopify.locale = "en";
Shopify.currency = {"active":"USD","rate":"1.0"};
Shopify.country = "US";
Shopify.theme = {"name":"Development (b466ac-6ae7da443f4b)","id":165128667375,"schema_name":"Horizon","schema_version":"4.2.0","theme_store_id":null,"role":"development"};
Shopify.theme.handle = "null";
Shopify.theme.style = {"id":null,"handle":null};
Shopify.cdnHost = "ageyab-kk.myshopify.com/cdn";
Shopify.routes = Shopify.routes || {};
Shopify.routes.root = "/";
Shopify.previewMode = true;
Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js";
Shopify.SignInWithShop = Shopify.SignInWithShop || {};
Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {};
Shopify.SignInWithShop.User.recognized = false;</script>
<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
<script>
  window.ShopifyPay = window.ShopifyPay || {};
  window.ShopifyPay.apiHost = "shop.app\/pay";
  window.ShopifyPay.redirectState = null;
</script>
<script>
  window.Shopify = window.Shopify || {};
  window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {};
  window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 };
  window.Shopify.SignInWithShop.eligible = true;
</script>
<script id="shop-js-analytics" type="application/json">{"pageType":"index"}</script>
<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
<script type="module">
  await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js");

  window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true});

</script>
<script>
  window.Shopify = window.Shopify || {};
  if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {};
  window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]};
</script>
<script id="hot-reload-client" src="/cdn/shopifycloud/theme-hot-reload/theme-hot-reload.js" defer crossorigin></script>
<script id="__st">var __st={"a":83978944751,"offset":-43200,"reqid":"46a17eae-dd9d-9ea2-abe6-adc746923579-1791793850","pageurl":"ageyab-kk.myshopify.com\/?_fd=0\u0026pb=0","u":"e43eea9cc29d","p":"home"};</script>
<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script><script crossorigin="anonymous" defer="defer" src="/cdn/shopifycloud/storefront/assets/shopify_pay/storefront-f0e26bdf.js?v=20250812"></script>
<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
<script>
  window.Shopify = window.Shopify || {};
  window.Shopify.MCP = window.Shopify.MCP || {};
  window.Shopify.MCP.enabled = true;
  window.Shopify.MCP.shop = "ageyab-kk.myshopify.com";
  window.Shopify.MCP.mcpEndpoint = "https:\/\/ageyab-kk.myshopify.com\/api\/mcp";
  window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n  - What is your return policy?\n  - What is your shipping policy?\n  - What is your phone number?\n  - What are your hours of operation?\"\nSet policy_types to also get the store's written policies (full text and URL).\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."},"policy_types":{"type":"array","items":{"type":"string","enum":["refund","shipping","privacy","terms_of_service","terms_of_sale","subscription","legal_notice","contact"]},"description":"Policy kinds to fetch, chosen from the user's question — e.g. [\"refund\"] for returns\/exchanges\/damaged items, [\"contact\"] for phone\/hours\/address. Include every kind the question touches. Omit it to get only FAQ answers."}},"required":["query"]}}];
</script>
<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/ageyab-kk.myshopify.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-f427de6a.js","sha256-ypGF+5vIq4Psw4WG7nsVtdd\/TCfsJWnrNuACdqLCElY=");})();
</script>
<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}};
</script>
<script data-source-attribution="shopify.dynamic_checkout.buyer_consent">
  function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent);
</script>
<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}}));
</script>
<link id="shopify-accelerated-checkout-styles" rel="stylesheet" media="screen" href="/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css" crossorigin="anonymous">
<style id="shopify-accelerated-checkout-cart">
        #shopify-buyer-consent {
  margin-top: 1em;
  display: inline-block;
  width: 100%;
}

#shopify-buyer-consent.hidden {
  display: none;
}

#shopify-subscription-policy-button {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

#shopify-subscription-policy-button::before {
  box-shadow: none;
}

      </style>
<link rel="stylesheet" media="screen" href="/cdn/shop/t/23/compiled_assets/styles.css?v=32289038754471612621791786773">
<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
  <!-- BEGIN app block: shopify://apps/microsoft-clarity/blocks/brandAgents_js/31c3d126-8116-4b4a-8ba1-baeda7c4aeea -->





<!-- END app block --><!-- BEGIN app block: shopify://apps/microsoft-clarity/blocks/clarity_js/31c3d126-8116-4b4a-8ba1-baeda7c4aeea -->


<!-- END app block --><link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 83978944751,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "index"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
<script>
  window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || [];
</script>
<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 83978944751,storefrontBaseUrl: "https://rockinstore.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://ageyab-kk.myshopify.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab"],webPixelsConfigList: [{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"Christopher's Rockin' Store","paymentSettings":{"currencyCode":"USD"},"myshopifyDomain":"ageyab-kk.myshopify.com","countryCode":"US","storefrontUrl":"https:\/\/rockinstore.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[{"id":"9650169938159","handle":"wrts-black-socks-xs","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50910949638383","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650174787823","handle":"wrts-blue-socks-adult-l","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50911083430127","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650171707631","handle":"wrts-gray-socks-s","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50911064064239","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650159354095","handle":"wrts-green-socks-xxs","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50910870831343","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650179178735","handle":"wrts-purple-socks-adult-xxl","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50911090147567","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650155847919","handle":"wrts-red-socks-xxxs","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50910816764143","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]},{"id":"9650174263535","handle":"wrts-yellow-socks-adult-s","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"50911069798639","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}],"purchasingCompany":null},},"https://ageyab-kk.myshopify.com/cdn","7ec887c8w14f9f074p854094e1m1370c602",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"pixelHelper":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"165128667375","themePublished":"false","eventMetadataId":"eb8af181-88fb-46ab-94cd-a24368ec5983","pageType":"home","shopId":"83978944751","storefrontBaseUrl":"https:\/\/rockinstore.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\"]","isMerchantRequest":"false","hashVersion":"7ec887c8w14f9f074p854094e1m1370c602","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script><script>
  window.ShopifyAnalytics = window.ShopifyAnalytics || {};
  window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
  window.ShopifyAnalytics.meta.currency = 'USD';
  var meta = {"page":{"pageType":"home","requestId":"46a17eae-dd9d-9ea2-abe6-adc746923579-1791793850"}};
  for (var attr in meta) {
    window.ShopifyAnalytics.meta[attr] = meta[attr];
  }
</script>
<script class="analytics">
  (function () {
    var customDocumentWrite = function(content) {
      var jquery = null;

      if (window.jQuery) {
        jquery = window.jQuery;
      } else if (window.Checkout && window.Checkout.$) {
        jquery = window.Checkout.$;
      }

      if (jquery) {
        jquery('body').append(content);
      }
    };

    var hasLoggedConversion = function(token) {
      if (token) {
        return document.cookie.indexOf('loggedConversion=' + token) !== -1;
      }
      return false;
    }

    var setCookieIfConversion = function(token) {
      if (token) {
        var twoMonthsFromNow = new Date(Date.now());
        twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2);

        document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow;
      }
    }

    var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || [];
    window.ShopifyAnalytics.lib.trekkie = window.trekkie;
    if (trekkie.integrations) {
      return;
    }
    trekkie.methods = [
      'identify',
      'page',
      'ready',
      'track',
      'trackForm',
      'trackLink'
    ];
    trekkie.factory = function(method) {
      return function() {
        var args = Array.prototype.slice.call(arguments);
        args.unshift(method);
        trekkie.push(args);
        if (method == 'track' || method == 'page') {
          var pageUrl;
          try {
            pageUrl = window.location.href;
          } catch (e) {}
          var pageReferrer;
          try {
            pageReferrer = document.referrer;
          } catch (e) {}
          try {
            if (window.__TREKKIE_SHIM_QUEUE == null) {
              window.__TREKKIE_SHIM_QUEUE = [];
            }
            window.__TREKKIE_SHIM_QUEUE.push({
              from: 'trekkie-stub',
              method: method,
              args: args.slice(1),
              pageContext: {
                url: pageUrl,
                referrer: pageReferrer
              }
            });
          } catch (e) {
            // no-op
          }
        }
        return trekkie;
      };
    };
    for (var i = 0; i < trekkie.methods.length; i++) {
      var key = trekkie.methods[i];
      trekkie[key] = trekkie.factory(key);
    }
    trekkie.load = function(config) {
      trekkie.config = config || {};
      trekkie.config.initialDocumentCookie = document.cookie;
      var first = document.getElementsByTagName('script')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onerror = function(e) {
  var scriptFallback = document.createElement('script');
  scriptFallback.type = 'text/javascript';
  scriptFallback.onerror = function(error) {
          var Monorail = {
      produce: function produce(monorailDomain, schemaId, payload) {
        var currentMs = new Date().getTime();
        var event = {
          schema_id: schemaId,
          payload: payload,
          metadata: {
            event_created_at_ms: currentMs,
            event_sent_at_ms: currentMs
          }
        };
        return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event));
      },
      sendRequest: function sendRequest(endpointUrl, payload) {
        // Try the sendBeacon API
        if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) {
          var blobData = new window.Blob([payload], {
            type: 'text/plain'
          });

          if (window.navigator.sendBeacon(endpointUrl, blobData)) {
            return true;
          } // sendBeacon was not successful

        } // XHR beacon

        var xhr = new XMLHttpRequest();

        try {
          xhr.open('POST', endpointUrl);
          xhr.setRequestHeader('Content-Type', 'text/plain');
          xhr.send(payload);
        } catch (e) {
          console.log(e);
        }

        return false;
      },
      isIos12: function isIos12() {
        return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1;
      }
    };
    Monorail.produce('monorail-edge.shopifysvc.com',
      'trekkie_storefront_load_errors/1.1',
      {shop_id: 83978944751,
      theme_id: 165128667375,
      app_name: "storefront",
      context_url: window.location.href,
      source_url: "/cdn/s/trekkie.storefront.51e69540e15035ae012ec8cc42e8f9cd792233a0.min.js"});

  };
  scriptFallback.async = true;
  scriptFallback.src = '/cdn/s/trekkie.storefront.51e69540e15035ae012ec8cc42e8f9cd792233a0.min.js';
  first.parentNode.insertBefore(scriptFallback, first);
};
script.async = true;
script.src = '/cdn/s/trekkie.storefront.51e69540e15035ae012ec8cc42e8f9cd792233a0.min.js';
first.parentNode.insertBefore(script, first);

    };
    trekkie.load(
      {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":83978944751,"isMerchantRequest":null,"themeId":165128667375,"themeCityHash":"14493667653890544558","contentLanguage":"en","currency":"USD","eventMetadataId":"eb8af181-88fb-46ab-94cd-a24368ec5983"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}}
    );

    var loaded = false;
    trekkie.ready(function() {
      if (loaded) return;
      loaded = true;

      window.ShopifyAnalytics.lib = window.trekkie;

      var originalDocumentWrite = document.write;
      document.write = customDocumentWrite;
      try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {};
      document.write = originalDocumentWrite;

      var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/)
      var token = match? match[1]: undefined;
      if (!hasLoggedConversion(token)) {
        setCookieIfConversion(token);
        
      }
    });

    window.ShopifyAnalytics.lib.page(null,{"pageType":"home","requestId":"46a17eae-dd9d-9ea2-abe6-adc746923579-1791793850","shopifyEmitted":true});

    var eventsListenerScript = document.createElement('script');
    eventsListenerScript.async = true;
    eventsListenerScript.src = "/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js";
    document.getElementsByTagName('head')[0].appendChild(eventsListenerScript);
})();</script>
<script
  defer
  src="/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.10.1.min.js"
  data-application="storefront-renderer"
  data-shop-id="83978944751"
  data-render-region="gcp-us-central1"
  data-page-type="index"
  data-theme-instance-id="165128667375"
  data-theme-name="Horizon"
  data-theme-version="4.2.0"
  data-monorail-region="shop_domain"
  data-resource-timing-sampling-rate="10"
  data-shs="true"
  data-shs-beacon="true"
  data-shs-export-with-fetch="true"
  data-shs-logs-sample-rate="1"
  data-shs-beacon-endpoint="/api/collect"
></script>
<script src="https://cdn.shopify.com/storefront/web-components/account.js" type="module" crossorigin fetchpriority="low" async></script><script id="shopify-customer-account-data" type="application/json">{"customer":null,"shop":{"id":"83978944751","customerAccountTranslations":[{"key":"account_menu.signed_out_state.sheet_title","value":"Sign in or create account"},{"key":"account_menu.signed_out_state.section_divider","value":"More ways to sign in"},{"key":"account_menu.signed_out_state.alternate_divider","value":"OR"},{"key":"account_menu.signed_out_state.email_field_label","value":"Email"},{"key":"account_menu.signed_out_state.orders_button","value":"Orders"},{"key":"account_menu.signed_out_state.profile_button","value":"Profile"},{"key":"account_menu.signed_out_state.shop_login_button","value":"Sign in with Shop"},{"key":"account_menu.signed_out_state.continue_with_google","value":"Continue with Google"},{"key":"account_menu.signed_out_state.continue_with_facebook","value":"Continue with Facebook"},{"key":"account_menu.signed_out_state.marketing_consent_label","value":"Email me with news and offers"},{"key":"account_menu.signed_in_state.greeting_with_name","value":"Hi, {{first_name}}"},{"key":"account_menu.signed_in_state.greeting_without_name","value":"Account"},{"key":"account_menu.signed_in_state.orders_button","value":"Orders"},{"key":"account_menu.signed_in_state.profile_button","value":"Profile"},{"key":"account_menu.location_picker.sheet_title","value":"Locations"},{"key":"account_menu.location_picker.search_field_placeholder","value":"Search"},{"key":"account_menu.aria_labels.close_menu","value":"Close menu"},{"key":"account_menu.aria_labels.back_to_main_menu","value":"Back to main menu from {{title}}"},{"key":"account_menu.aria_labels.open_submenu","value":"{{title}}, opens submenu"},{"key":"account_menu.aria_labels.loading_menu","value":"Loading menu"},{"key":"account_menu.aria_labels.loading","value":"Loading"},{"key":"account_menu.aria_labels.account","value":"Account"},{"key":"account_menu.aria_labels.sign_in_with_email","value":"Sign in with email"},{"key":"account_menu.aria_labels.sign_in","value":"Sign in"}],"socialLoginProviders":[{"handle":"Shop"}],"legacyCustomerAccounts":false,"signInLinksVisible":true,"b2bEnabled":false,"marketingConsentSigninEnabled":true,"marketingConsentPreselected":true},"visitor":{"country":"US","language":"en"}}</script>
<meta name="shopify-y" content="be29e195-fb70-4c07-8ba5-940a0bb7fd0c" data-expiration="1823351451000"><meta name="shopify-s" content="62bd1315-a558-4f56-b01f-a4c32b56fd52" data-expiration="1791795651000"></head>

  <body class="page-width-normal card-hover-effect-none">
    <a
  class="skip-to-content-link button-secondary"
  href="#MainContent"
>
  Skip to content
</a>




    

<theme-drawer id="chat-drawer">
  <dialog
    ref="panel"
    class="theme-drawer__dialog chat-drawer"
  >
    <shopify-chat
      mode="standalone"
      mode-switch
    ></shopify-chat>
  </dialog>
</theme-drawer>

<script type="module">
  const chatDrawer = document.querySelector('#chat-drawer');
  const shopifyChat = document.querySelector('shopify-chat');

  document.addEventListener('theme-drawer:open', (event) => {
    if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return;
    shopifyChat?.setAttribute('mode', 'managed');
  });

  document.addEventListener('theme-drawer:close', (event) => {
    if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return;
    // If mode is still managed, this is a theme-initiated close (backdrop /
    // Escape) — close the chat so the FAB appears. If mode is already
    // standalone, the close was triggered by an undock (enter-standalone sets
    // mode before closing the drawer) — leave the chat open as a floating panel.
    if (shopifyChat?.getAttribute('mode') === 'managed') {
      shopifyChat?.removeAttribute('open');
    }
    shopifyChat?.setAttribute('mode', 'standalone');
  });

  document.addEventListener('shopify-chat:enter-managed', () => {
    // Captured at event-fire time — the dock-transition animation hint below
    // depends on state as it was when the event was dispatched.
    const isStandaloneAndOpen = shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone';

    // The activator-click path (FAB click on desktop with stored
    // preferredMode=managed) dispatches enter-managed *before* calling show(),
    // so the chat's `open` attribute at event time understates the imminent
    // outcome. Defer to a microtask: by then show() (if any) has run, and we
    // can distinguish the viewport-driven mobile→desktop transition that left
    // a minimized FAB (chat stays closed → don't open an empty drawer) from
    // an activator click (chat just opened → open the drawer).
    queueMicrotask(() => {
      if (!shopifyChat?.hasAttribute('open') && !chatDrawer?.hasAttribute('open')) {
        return;
      }
      chatDrawer?.open?.(isStandaloneAndOpen ? { enter: 'inline-start' } : undefined);
    });
  });

  document.addEventListener('shopify-chat:enter-standalone', () => {
    shopifyChat?.setAttribute('mode', 'standalone');
    chatDrawer?.close?.();
  });

  document.addEventListener('shopify-chat:close', () => {
    if (shopifyChat?.getAttribute('mode') === 'managed') {
      chatDrawer?.close?.();
    }
  });

  document.addEventListener('megaMenu:hover', () => {
    if (shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone') {
      shopifyChat?.removeAttribute('open');
    }
  });

  // After the chat upgrades it self-restores its preferred mode from
  // sessionStorage. Reconcile any mismatch with the theme-drawer's state
  // — the drawer is the source of truth for which mode the chat should
  // be in (open → managed, closed → standalone).
  customElements.whenDefined('shopify-chat').then(() => {
    const mode = chatDrawer?.hasAttribute('open') ? 'managed' : 'standalone';
    if (shopifyChat?.getAttribute('mode') !== mode) {
      // When switching managed → standalone (e.g. narrow viewport skipped
      // drawer restore), also close the chat so it renders as the FAB
      // rather than an open standalone panel.
      if (mode === 'standalone' && shopifyChat?.hasAttribute('open')) {
        shopifyChat?.removeAttribute('open');
      }
      shopifyChat?.setAttribute('mode', mode);
    }
  });
</script>




    <div class="page-wrapper">
      <div id="header-group">
        <!-- BEGIN sections: header-group -->
<header id="shopify-section-sections--23473579229423__header_section" class="shopify-section shopify-section-group-header-group header-section">






<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "Christopher\u0026#39;s Rockin\u0026#39; Store",
    
      "logo": "https:\/\/ageyab-kk.myshopify.com\/cdn\/shop\/files\/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229\u0026width=500",
    
    "url": "https:\/\/ageyab-kk.myshopify.com"
  }
</script>

<header-component
  id="header-component"
  class="header header--collapse-row-paddings"
  data-theme-color="rgb(0 112 184)"
  data-bubble-style="custom"
  
  
    sticky="always"
  
  data-skip-node-update
  data-scroll-direction="none"
  
  
  
  style="
    --color-background-top-row: rgba(0 112 184 / 1.0);
    --color-background-bottom-row: rgba(0 112 184 / 1.0);
    
    
      --cart-bubble-background: #fceb1f;
      --cart-bubble-text: #0070b8;
    
    
  "
>
  <div class="header__underlay header__underlay-closed"></div>
  <div
    class="header__underlay header__underlay-open"
  ></div><span class="visually-hidden">Christopher&#39;s Rockin&#39; Store</span><div class="wrts-header-desktop" ref="headerRowTop">
    <div class="wrts-header-desktop__inner">
      <div class="wrts-header-desktop__logo-col">
        




<a
  
  href="/"
  class="size-style spacing-style header-logo"
  style="
    --size-style-width: ;--size-style-height: ;
    --padding-block-start: 0px;--padding-block-end: 0px;
    --font-family: var(--font-body--family);
    --font-style: var(--font-body--style);
    --font-weight: 600;
    --wrts-header-logo-width: 250px;
    --wrts-header-logo-width-mobile: 96px;
  "
  
>
  

  <span
    
    data-testid="header-logo"
  >
    
  
  
  
  

  

  

  

  <img src="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=64&amp;v=1791285229" alt="Christopher&amp;#39;s Rockin&amp;#39; Store - Home" width="196" height="64" class="header-logo__image" srcset="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=64&amp;v=1791285229 1x, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=128&amp;v=1791285229 2x, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=192&amp;v=1791285229 3x" style="--header-logo-image-width: 197px;--header-logo-image-width-mobile: 135px; --header-logo-image-height: 64px; --header-logo-image-height-mobile: 44px;">


  </span>

  
</a>





      </div>
      <div class="wrts-header-desktop__right-col">
        <div class="wrts-header-desktop__top-row">
          

<div class="wrts-header-contact" aria-label="Store contact and social links">
  <div class="wrts-header-contact__details">
    
      <span class="wrts-header-contact__item wrts-header-contact__hours">MON – FRI: 8AM – 7PM PT</span>
    

    
      <span class="wrts-header-contact__separator" aria-hidden="true">|</span>
    

    
      <span class="wrts-header-contact__item wrts-header-contact__hours">SAT – SUN: 8AM – 2PM PT</span>
    

    
      <span class="wrts-header-contact__separator" aria-hidden="true">|</span>
      <a class="wrts-header-contact__item wrts-header-contact__phone" href="tel:5599998341" aria-label="Call 559-999-8341">
        <svg class="wrts-header-contact__phone-icon" viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true">
          <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/>
        </svg>
        <span>559-999-8341</span>
      </a>
    

    <span class="wrts-header-contact__separator" aria-hidden="true">|</span>

    <div class="wrts-header-contact__social" aria-label="Social media">
      
        <a href="https://www.facebook.com/werockclovis/" aria-label="Facebook" target="_blank" rel="noopener noreferrer" class="wrts-header-contact__social-link wrts-social-fb">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
          </svg>
        </a>
      

      
        <a href="https://www.instagram.com/werockclovis/" aria-label="Instagram" target="_blank" rel="noopener noreferrer" class="wrts-header-contact__social-link wrts-social-ig">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
          </svg>
        </a>
      

      
        <a href="https://www.youtube.com/@werockclovis" aria-label="YouTube" target="_blank" rel="noopener noreferrer" class="wrts-header-contact__social-link wrts-social-yt">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
          </svg>
        </a>
      

      
        <a href="https://www.tiktok.com/@werockclovis" aria-label="TikTok" target="_blank" rel="noopener noreferrer" class="wrts-header-contact__social-link wrts-social-tt">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
            <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.24 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
          </svg>
        </a>
      
    </div>
  </div>
</div>



        </div>
        <div class="wrts-header-desktop__bottom-row">
          



<div
      class="wrts-header-menu-fonts"
      style="--menu-top-level-font-family: var(--font-heading--family);
--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-heading--style); --menu-top-level-font-weight: var(--font-heading--weight); --menu-top-level-font-case:none;

  --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height:
  var(--menu-font-sm--line-height);

--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
"
    >
      


  <nav
    class="wrts-header-menu"
    style="--wrts-nav-gap: 18px;"
    aria-label="Primary"
  >
    <ul class="wrts-header-nav list-unstyled" role="list">
      
        
          <li class="wrts-header-nav__item">
            <a
              href="/"
              class="wrts-header-nav__link wrts-header-nav__link--active"
              
                aria-current="page"
              
            >
              <span>Home</span>
            </a>
          </li>
        
          <li class="wrts-header-nav__item">
            <a
              href="/collections/all"
              class="wrts-header-nav__link"
              
            >
              <span>Catalog</span>
            </a>
          </li>
        
          <li class="wrts-header-nav__item">
            <a
              href="/pages/contact"
              class="wrts-header-nav__link"
              
            >
              <span>Contact</span>
            </a>
          </li>
        
      

      
        <li class="wrts-header-nav__item wrts-header-nav__item--account">
          
            <div class="wrts-header-nav__account account-button color-custom-popover">
              <shopify-store store-domain="https://ageyab-kk.myshopify.com" country="US" language="en"></shopify-store>
<shopify-account>
                <span
                  slot="signed-out-avatar"
                  class="wrts-header-nav__link wrts-header-nav__account-label"
                >
                  Account
                </span>
              </shopify-account>
            </div>
          
        </li>
      
    </ul>
  </nav>




    </div>

  

<style data-shopify>
  .header__underlay {
    --color-submenu: rgb(255 255 255);
  }
</style>




          <span class="wrts-header-nav-divider" aria-hidden="true">|</span>
          
          
          
          <a href="/collections/all" class="wrts-shop-socks-btn">
            <span>Shop socks</span>
            <span class="wrts-arrow" aria-hidden="true">➔</span>
          </a>
          <div class="wrts-header-desktop__actions">
            
  <search-button
    class="search-action search-action--hidden-on-drawer"
  >
    <button
      on:click="#search-modal/showDialog"
      class="button-unstyled header-actions__action"
      aria-label="Search"
      aria-haspopup="dialog"
    >
      <span class="hidden">
        Search
      </span>

      <span class="svg-wrapper ">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>

      </span>
    </button>
  </search-button>




            

<script
  type="module"
  src="/cdn/shop/t/23/assets/cart-icon.js?v=182298098913558123731791786764"
  fetchpriority="low"
></script>





<header-actions
  
>
  
    
    <div
      class="account-button header-actions__action mobile:hidden color-custom-popover"
    >
      <shopify-account
        
      >
        
          <span
            slot="signed-out-avatar"
            class="account-button__text header-actions__text-style hidden"
          >
            Account
          </span>

          <span
            slot="signed-out-avatar"
            class=""
            aria-hidden="true"
          >
            
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="15"
    height="17"
    viewBox="0 0 15 17"
    fill="none"
    slot="signed-out-avatar"
    class="account-button__icon"
  >
    <path
      stroke="currentColor"
      stroke-linejoin="round"
      stroke-width="var(--icon-stroke-width)"
      d="M10.375 3.813a3.063 3.063 0 1 1-6.125 0 3.063 3.063 0 0 1 6.125 0ZM7.313 9.5c-3.667 0-6.24 2.691-6.563 6.125h13.125C13.552 12.191 10.979 9.5 7.312 9.5Z"
    />
  </svg>

          </span>
        
      </shopify-account>
    </div>
  

  
    <button
      class="header-actions__action button-unstyled"
      on:click="#cart-drawer/toggle"
      aria-haspopup="dialog"
      aria-expanded="false"
      aria-controls="cart-drawer"
      aria-label="Cart"
      aria-describedby="cart-bubble-text"
      data-testid="cart-drawer-trigger"
    >
      
  <cart-icon
    class="header-actions__cart-icon header-actions__cart-icon--has-cart"
    data-testid="cart-icon"
  >
    <span class="hidden">
      Cart
    </span>

    <span
      class="svg-wrapper "
      aria-hidden="true"
    >
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="M1.75 2.75h2.1l2.1 10.1a1.8 1.8 0 0 0 1.76 1.43h7.61a1.8 1.8 0 0 0 1.74-1.34l1.19-4.69H5.02M8 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm8 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>

    </span>

    

<div
  ref="cartBubble"
  class="cart-bubble"
  style="--cart-bubble-background-fallback: #0070b8; --cart-bubble-text-fallback: #ffffff;"
  
  
    data-maintain-ratio
  
>
  <span class="cart-bubble__background"></span>
  <span
    ref="cartBubbleText"
    id="cart-bubble-text"
    class="cart-bubble__text"
  >
    <span
      class="cart-bubble__text-count"
      ref="cartBubbleCount"
      aria-hidden="true"
      data-testid="cart-bubble"
    >
0</span>
  </span>
</div>



  </cart-icon>

    </button>
  

  <span
    ref="liveRegion"
    class="visually-hidden"
    role="status"
    data-testid="cart-count-live-region"
  ></span>
</header-actions>

<script
  type="module"
  src="/cdn/shop/t/23/assets/header-actions.js?v=157135685635924702181791786764"
  fetchpriority="low"
></script>



          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="wrts-header-mobile">
    <div class="wrts-header-mobile__inner">
      <div class="wrts-header-mobile__left">
        



    <div
      class="header__drawer"
      ref="headerDrawerContainer"
      data-hydration-key="header-drawer-mobile"
      
    >
      







  <style data-shopify>
    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu-1,
    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu-1 .text-block {
      /* Background */
      --color-background: #ffffff;
      --color-background-rgb: 255 255 255;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #0070b8;
        --color-rgb: 0 112 184;
        --color-foreground: #0070b8;
        --color-foreground-rgb: 0 112 184;
        --color-foreground-muted: rgb(0 112 184 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(0 112 184 / var(--opacity-subdued-text));
        --color-border: var(--palette-darkest);
        --color-border-rgb: var(--palette-darkest-rgb);
      
    }

    
      .color-custom-AUkhSb1FWbmJrNWFEV__header-menu-1 {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(0 112 184 / var(--opacity-10));
        --input-disabled-border-color: rgb(0 112 184 / var(--opacity-5));
        --input-disabled-text-color: rgb(0 112 184 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(0 112 184 / var(--opacity-35-55));
      }
    

    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu-1 {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>



<script
  src="/cdn/shop/t/23/assets/header-drawer.js?v=161843931184522591451791786764"
  type="module"
  fetchpriority="low"
></script>

<header-drawer
  class="header-drawer "
  style="--menu-image-border-radius: 0px; --resource-card-corner-radius: 0px;"
>
  <details
    id="Details-menu-drawer-container"
    data-skip-node-update="true"
    class="menu-drawer-container"
    ref="details"
    scroll-lock
  >
    <summary
      class="header__icon header__icon--menu header__icon--summary"
      aria-label="Menu"
      on:click="/toggle"
    >
      <span class="svg-wrapper header-drawer-icon header-drawer-icon--open"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 3.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/>
  <path d="M1 10.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/>
</svg>
</span>
      <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
    </summary>
    <div
      ref="menuDrawer"
      class="
        menu-drawer
        menu-drawer--wrts
        
          color-custom-AUkhSb1FWbmJrNWFEV__header-menu-1
        
      "
    >
      

<div class="wrts-drawer-wrapper">
  <!-- Top Bar: Close (X) on left, Logo in center, Search & Cart on right -->
  <div class="wrts-drawer-top-bar">
    <button
      type="button"
      class="wrts-drawer-top-bar__close"
      aria-label="Close"
      on:click="/close"
    >
      <svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none" aria-hidden="true">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>

    <a href="/" class="wrts-drawer-top-bar__logo" aria-label="Christopher&#39;s Rockin&#39; Store">
      
        <img src="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=360" alt="Christopher&#39;s Rockin&#39; Store" srcset="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=180 180w, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=360 360w" width="360" height="117" loading="eager" class="wrts-drawer-top-bar__logo-img">
      
    </a>

    <div class="wrts-drawer-top-bar__actions">
      <button
        type="button"
        class="wrts-drawer-top-bar__action-btn wrts-drawer-top-bar__search"
        aria-label="Search"
        aria-haspopup="dialog"
        on:click="/closeAndShowSearch"
      >
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
      </button>

      <a href="/cart" class="wrts-drawer-top-bar__action-btn wrts-drawer-top-bar__cart" aria-label="Cart">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
        <span class="wrts-drawer-cart-badge">0</span>
      </a>
    </div>
  </div>

  <!-- Drawer Body -->
  <div class="wrts-drawer-content">
    <!-- Navigation Cards (Strictly NO icons beside links) -->
    <nav class="wrts-drawer-nav-cards" aria-label="Primary">
      
        
          <a
            class="wrts-drawer-card-item wrts-drawer-card-item--active"
            href="/"
            
              aria-current="page"
            
          >
            <span class="wrts-drawer-card-label">Home</span>
            <span class="wrts-drawer-card-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </span>
          </a>
        
          <a
            class="wrts-drawer-card-item"
            href="/collections/all"
            
          >
            <span class="wrts-drawer-card-label">Catalog</span>
            <span class="wrts-drawer-card-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </span>
          </a>
        
          <a
            class="wrts-drawer-card-item"
            href="/pages/contact"
            
          >
            <span class="wrts-drawer-card-label">Contact</span>
            <span class="wrts-drawer-card-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </span>
          </a>
        
      
    </nav>

    
      <a class="wrts-drawer-cta-pill" href="/collections/all">
        <span class="wrts-cta-rays wrts-cta-rays--left" aria-hidden="true">
          <svg viewBox="0 0 24 16" width="16" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <line x1="22" y1="3" x2="14" y2="7"></line>
            <line x1="22" y1="8" x2="10" y2="8"></line>
            <line x1="22" y1="13" x2="14" y2="9"></line>
          </svg>
        </span>
        <span>Shop socks ➔</span>
        <span class="wrts-cta-rays wrts-cta-rays--right" aria-hidden="true">
          <svg viewBox="0 0 24 16" width="16" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <line x1="2" y1="3" x2="10" y2="7"></line>
            <line x1="2" y1="8" x2="14" y2="8"></line>
            <line x1="2" y1="13" x2="10" y2="9"></line>
          </svg>
        </span>
      </a>
    

    <!-- Store Hours & Call Info Card -->
    <div class="wrts-drawer-info-card">
      <div class="wrts-drawer-info-row">
        <div class="wrts-drawer-info-icon-circle">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
        </div>
        <div class="wrts-drawer-info-content">
          <div class="wrts-drawer-info-title">STORE HOURS</div>
          
            <div class="wrts-drawer-info-line">MON – FRI: 8AM – 7PM PT</div>
          
          
            <div class="wrts-drawer-info-line">SAT – SUN: 8AM – 2PM PT</div>
          
        </div>
      </div>

      <div class="wrts-drawer-info-divider" aria-hidden="true"></div>

      <div class="wrts-drawer-info-row">
        <div class="wrts-drawer-info-icon-circle wrts-icon-yellow">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
            <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/>
            <path d="M16.5 4c2.2.4 4 2.2 4.4 4.4M15.5 8c1 .2 1.8 1 2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>
          </svg>
        </div>
        <div class="wrts-drawer-info-content">
          <div class="wrts-drawer-info-title">GIVE US A CALL</div>
          <a href="tel:5599998341" class="wrts-drawer-info-phone">559-999-8341</a>
        </div>
      </div>
    </div>

    <!-- Social Media Footer: FOLLOW THE FUN -->
    <div class="wrts-drawer-footer">
      <div class="wrts-drawer-footer-heading" aria-hidden="true">
        <span class="wrts-footer-line"></span>
        <span class="wrts-footer-label">FOLLOW THE FUN</span>
        <span class="wrts-footer-line"></span>
      </div>

      <div class="wrts-drawer-socials" aria-label="Social media links">
        
          <a href="https://www.facebook.com/werockclovis/" aria-label="Facebook" target="_blank" rel="noopener noreferrer" class="wrts-drawer-social-btn">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </a>
        
        
          <a href="https://www.instagram.com/werockclovis/" aria-label="Instagram" target="_blank" rel="noopener noreferrer" class="wrts-drawer-social-btn">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
          </a>
        
        
          <a href="https://www.youtube.com/@werockclovis" aria-label="YouTube" target="_blank" rel="noopener noreferrer" class="wrts-drawer-social-btn">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
          </a>
        
        
          <a href="https://www.tiktok.com/@werockclovis" aria-label="TikTok" target="_blank" rel="noopener noreferrer" class="wrts-drawer-social-btn">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.24 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
          </a>
        
      </div>
    </div>
  </div>
</div>



<div class="menu-drawer__brand-bar">
        <button
          class="menu-drawer__brand-toggle focus-inset"
          type="button"
          aria-label="Close"
          on:click="/close"
        ><span class="menu-drawer__brand-hamburger" aria-hidden="true">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <span class="menu-drawer__brand-toggle-label">Menu</span>
        </button>
      </div>
      <button
        class="button close-button menu-drawer__close-button focus-inset"
        type="button"
        aria-label="Close"
        on:click="/close"
      >
        <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
      </button>
      <nav
        class="menu-drawer__navigation"
        style="--menu-top-level-font-family: var(--font-heading--family);
--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-heading--style); --menu-top-level-font-weight: var(--font-heading--weight); --menu-top-level-font-case:none;

  --menu-top-level-font-size: var(--menu-font-2xl--size); --menu-top-level-font-line-height:
  var(--menu-font-2xl--line-height);

--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

--menu-parent-font-family: var(--font-heading--family); --menu-parent-font-style:
var(--font-heading--style); --menu-parent-font-weight: var(--font-heading--weight); --menu-parent-font-case:
none;

    --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height:
    var(--menu-font-sm--line-height); --menu-parent-font-color: var(--color-foreground-subdued);
    --menu-parent-active-font-color: var(--color-foreground);
  
--menu-child-font-family: var(--font-heading--family); --menu-child-font-style:var(--font-heading--style); --menu-child-font-weight: var(--font-heading--weight); --menu-child-font-case:
none;

    --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height);
    --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: var(--color-foreground-subdued);
  

        "
        aria-label="Primary"
      >
        <ul
          class="menu-drawer__menu has-submenu"
          role="list"
        >
            
            

              <li
                style="--menu-drawer-animation-index: 1;"
                class="menu-drawer__list-item--deep menu-drawer__list-item--divider"
              >
                
<a
                    id="HeaderDrawer-home"
                    href="/"
                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
                    
                      aria-current="page"
                    
                  >
                    <span class="menu-drawer__menu-item-text wrap-text">Home</span>
                  </a>
                
              </li>
              <li
                style="--menu-drawer-animation-index: 2;"
                class="menu-drawer__list-item--deep menu-drawer__list-item--divider"
              >
                
<a
                    id="HeaderDrawer-catalog"
                    href="/collections/all"
                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
                    
                  >
                    <span class="menu-drawer__menu-item-text wrap-text">Catalog</span>
                  </a>
                
              </li>
              <li
                style="--menu-drawer-animation-index: 3;"
                class="menu-drawer__list-item--deep menu-drawer__list-item--divider"
              >
                
<a
                    id="HeaderDrawer-contact"
                    href="/pages/contact"
                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element"
                    
                  >
                    <span class="menu-drawer__menu-item-text wrap-text">Contact</span>
                  </a>
                
              </li>
        </ul>
      </nav>
      <div
        class="menu-drawer__utility-links menu-drawer__animated-element"
        style="--menu-drawer-animation-index: 3;"
      >
        
          <a href="/account" class="menu-drawer__account desktop:hidden">
            <span class="svg-wrapper" aria-hidden="true">
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="6.5" r="2.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m5.172 14.591-.437.786a.588.588 0 0 0 .514.873h9.502a.588.588 0 0 0 .514-.873l-.437-.786a5.523 5.523 0 0 0-9.656 0"/></svg>

            </span>
            Account
          </a>
        
        
        </div>

      
    </div>
    <div
      class="menu-drawer__backdrop"
      on:click="header-drawer/close"
    ></div>
  </details>
</header-drawer>



    </div>

  

<style data-shopify>
  .header__underlay {
    --color-submenu: rgb(255 255 255);
  }
</style>




      </div>
      <div class="wrts-header-mobile__center">
        




<a
  
  href="/"
  class="size-style spacing-style header-logo"
  style="
    --size-style-width: ;--size-style-height: ;
    --padding-block-start: 0px;--padding-block-end: 0px;
    --font-family: var(--font-body--family);
    --font-style: var(--font-body--style);
    --font-weight: 600;
    --wrts-header-logo-width: 250px;
    --wrts-header-logo-width-mobile: 96px;
  "
  
>
  

  <span
    
    data-testid="header-logo"
  >
    
  
  
  
  

  

  

  

  <img src="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=64&amp;v=1791285229" alt="Christopher&amp;#39;s Rockin&amp;#39; Store - Home" width="196" height="64" class="header-logo__image" srcset="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=64&amp;v=1791285229 1x, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=128&amp;v=1791285229 2x, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?height=192&amp;v=1791285229 3x" style="--header-logo-image-width: 197px;--header-logo-image-width-mobile: 135px; --header-logo-image-height: 64px; --header-logo-image-height-mobile: 44px;">


  </span>

  
</a>





      </div>
      <div class="wrts-header-mobile__right">
        
  <search-button
    class="search-action search-action--hidden-on-drawer"
  >
    <button
      on:click="#search-modal/showDialog"
      class="button-unstyled header-actions__action"
      aria-label="Search"
      aria-haspopup="dialog"
    >
      <span class="hidden">
        Search
      </span>

      <span class="svg-wrapper ">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>

      </span>
    </button>
  </search-button>




        

<script
  type="module"
  src="/cdn/shop/t/23/assets/cart-icon.js?v=182298098913558123731791786764"
  fetchpriority="low"
></script>





<header-actions
  
>
  
    
    <div
      class="account-button header-actions__action mobile:hidden color-custom-popover"
    >
      <shopify-account
        
      >
        
          <span
            slot="signed-out-avatar"
            class="account-button__text header-actions__text-style hidden"
          >
            Account
          </span>

          <span
            slot="signed-out-avatar"
            class=""
            aria-hidden="true"
          >
            
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="15"
    height="17"
    viewBox="0 0 15 17"
    fill="none"
    slot="signed-out-avatar"
    class="account-button__icon"
  >
    <path
      stroke="currentColor"
      stroke-linejoin="round"
      stroke-width="var(--icon-stroke-width)"
      d="M10.375 3.813a3.063 3.063 0 1 1-6.125 0 3.063 3.063 0 0 1 6.125 0ZM7.313 9.5c-3.667 0-6.24 2.691-6.563 6.125h13.125C13.552 12.191 10.979 9.5 7.312 9.5Z"
    />
  </svg>

          </span>
        
      </shopify-account>
    </div>
  

  
    <button
      class="header-actions__action button-unstyled"
      on:click="#cart-drawer/toggle"
      aria-haspopup="dialog"
      aria-expanded="false"
      aria-controls="cart-drawer"
      aria-label="Cart"
      aria-describedby="cart-bubble-text"
      data-testid="cart-drawer-trigger"
    >
      
  <cart-icon
    class="header-actions__cart-icon header-actions__cart-icon--has-cart"
    data-testid="cart-icon"
  >
    <span class="hidden">
      Cart
    </span>

    <span
      class="svg-wrapper "
      aria-hidden="true"
    >
      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="M1.75 2.75h2.1l2.1 10.1a1.8 1.8 0 0 0 1.76 1.43h7.61a1.8 1.8 0 0 0 1.74-1.34l1.19-4.69H5.02M8 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm8 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>

    </span>

    

<div
  ref="cartBubble"
  class="cart-bubble"
  style="--cart-bubble-background-fallback: #0070b8; --cart-bubble-text-fallback: #ffffff;"
  
  
    data-maintain-ratio
  
>
  <span class="cart-bubble__background"></span>
  <span
    ref="cartBubbleText"
    id="cart-bubble-text"
    class="cart-bubble__text"
  >
    <span
      class="cart-bubble__text-count"
      ref="cartBubbleCount"
      aria-hidden="true"
      data-testid="cart-bubble"
    >
0</span>
  </span>
</div>



  </cart-icon>

    </button>
  

  <span
    ref="liveRegion"
    class="visually-hidden"
    role="status"
    data-testid="cart-count-live-region"
  ></span>
</header-actions>

<script
  type="module"
  src="/cdn/shop/t/23/assets/header-actions.js?v=157135685635924702181791786764"
  fetchpriority="low"
></script>



      </div>
    </div>
  </div>

  <div class="visually-hidden" aria-hidden="true" style="display:none!important;">
    



    




  <style data-shopify>
    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu,
    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu .text-block {
      /* Background */
      --color-background: #ffffff;
      --color-background-rgb: 255 255 255;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #0070b8;
        --color-rgb: 0 112 184;
        --color-foreground: #0070b8;
        --color-foreground-rgb: 0 112 184;
        --color-foreground-muted: rgb(0 112 184 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(0 112 184 / var(--opacity-subdued-text));
        --color-border: var(--palette-darkest);
        --color-border-rgb: var(--palette-darkest-rgb);
      
    }

    
      .color-custom-AUkhSb1FWbmJrNWFEV__header-menu {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(0 112 184 / var(--opacity-10));
        --input-disabled-border-color: rgb(0 112 184 / var(--opacity-5));
        --input-disabled-text-color: rgb(0 112 184 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(0 112 184 / var(--opacity-35-55));
      }
    

    .color-custom-AUkhSb1FWbmJrNWFEV__header-menu {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }
  </style>



    

    <header-menu
      ref="headerMenu"
      class="header-menu"
      
      data-hydration-key="header-menu"
      data-skip-node-update
    >
      <div class="header-menu__inner">
        <nav
          class="menu-list"
          aria-label="Primary"
          style="--menu-top-level-font-family: var(--font-heading--family);
--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-heading--style); --menu-top-level-font-weight: var(--font-heading--weight); --menu-top-level-font-case:none;

  --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height:
  var(--menu-font-sm--line-height);

--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
"
        >
          <ul class="wrts-header-nav list-unstyled" role="list">
            
              <li class="wrts-header-nav__item">
                <a href="/" class="menu-list__link">
                  <span class="menu-list__link-title">Home</span>
                </a>
              </li>
            
              <li class="wrts-header-nav__item">
                <a href="/collections/all" class="menu-list__link">
                  <span class="menu-list__link-title">Catalog</span>
                </a>
              </li>
            
              <li class="wrts-header-nav__item">
                <a href="/pages/contact" class="menu-list__link">
                  <span class="menu-list__link-title">Contact</span>
                </a>
              </li>
            
          </ul>
          
          <overflow-list
  
    ref="overflowMenu"
  
  
    class="overflow-menu color-custom-AUkhSb1FWbmJrNWFEV__header-menu"
  
  
    minimum-items="2"
  
  
    data-testid="header-menu-overflow-list"
  
  
    data-skip-node-update
  
>
  <template shadowrootmode="open">
    <link href="/cdn/shop/t/23/assets/overflow-list.css?v=16727044177065489451791786764" rel="stylesheet" type="text/css" media="all" />

    <ul part="list">
      <slot></slot>
      <slot
        name="more"
        part="more"
        hidden
        
      >
        <li
          part="more"
        >
          <button
            class="button"
            type="button"
            tabindex="0"
            
          >
            More
          </button>
        </li>
      </slot>
      <li
        part="placeholder"
        hidden
      ></li>
    </ul>

    <div part="overflow">
      <ul part="overflow-list">
        <slot name="overflow"></slot>
      </ul>
    </div>
  </template>

  
      
        <li
          class="menu-list__list-item"
          on:blur="/deactivate"
          on:pointerenter="/activate"
          on:pointerleave="/deactivate"
        ><a
            href="/"
            data-skip-node-update="true"
            class="menu-list__link menu-list__link--active"
            
              aria-current="page"
            
            ref="menuitem"
          >
            <span class="menu-list__link-title">Home</span>
          </a></li>
      
        <li
          class="menu-list__list-item"
          on:blur="/deactivate"
          on:pointerenter="/activate"
          on:pointerleave="/deactivate"
        ><a
            href="/collections/all"
            data-skip-node-update="true"
            class="menu-list__link"
            
            ref="menuitem"
          >
            <span class="menu-list__link-title">Catalog</span>
          </a></li>
      
        <li
          class="menu-list__list-item"
          on:blur="/deactivate"
          on:pointerenter="/activate"
          on:pointerleave="/deactivate"
        ><a
            href="/pages/contact"
            data-skip-node-update="true"
            class="menu-list__link"
            
            ref="menuitem"
          >
            <span class="menu-list__link-title">Contact</span>
          </a></li>
      
      <li
        class="menu-list__list-item"
        slot="more"
        on:blur="/deactivate"
        on:pointerenter="/activate"
        on:pointerleave="/deactivate"
      >
        <button
          class="menu-list__link button-unstyled"
          aria-haspopup="true"
          aria-expanded="false"
          ref="menuitem"
          on:click="/toggle"
          data-testid="header-menu-more-button"
          data-skip-node-update
        >
          <span class="menu-list__link-title">More</span>
        </button>
      </li>
    
</overflow-list>

        </nav>
      </div>

      <script
        src="/cdn/shop/t/23/assets/header-menu.js?v=1177411761452820701791786764"
        type="module"
        fetchpriority="low"
      ></script>
    </header-menu>


<style data-shopify>
  .header__underlay {
    --color-submenu: rgb(255 255 255);
  }
</style>




  </div>

  
</header-component>

<script
  src="/cdn/shop/t/23/assets/header.js?v=146686092481561649561791786764"
  type="module"
></script>

<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  /* WRTS HEADER STYLING */
  #header-component {
    width: 100% !important;
    background-color: var(--brand-blue, #0070b8) !important;
    position: relative;
    z-index: 100;
  }

  .header-section {
    width: 100% !important;
    background-color: var(--brand-blue, #0070b8) !important;
  }

  /* Desktop Header */
  @media screen and (min-width: 990px) {
    .wrts-header-mobile {
      display: none !important;
    }

    .wrts-header-desktop {
      display: block !important;
      width: 100%;
      background-color: var(--brand-blue, #0070b8);
    }

    .wrts-header-desktop__inner {
      width: 100%;
      max-width: 1536px;
      margin-inline: auto;
      padding: 6px clamp(16px, 2.5vw, 40px) 10px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      column-gap: clamp(24px, 3.5vw, 60px);
    }

    .wrts-header-desktop__logo-col {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
    }

    .wrts-header-desktop__logo-col .header-logo {
      display: flex;
      align-items: center;
      padding: 0;
      text-decoration: none;
    }

    .wrts-header-desktop__logo-col .header-logo__image {
      width: min(var(--wrts-header-logo-width, 240px), 100%);
      height: auto;
      max-height: 72px;
      object-fit: contain;
      display: block;
    }

    .wrts-header-desktop__right-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      min-width: 0;
    }

    .wrts-header-desktop__top-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }

    .wrts-header-desktop__bottom-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(10px, 1.2vw, 18px);
      min-width: 0;
    }

    .wrts-header-nav-divider {
      color: rgba(255, 255, 255, 0.45);
      font-size: 14px;
      font-weight: 300;
      user-select: none;
      margin-inline: 2px;
    }

    .wrts-shop-socks-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 18px;
      border-radius: 9999px !important;
      background-color: var(--brand-yellow, #fceb1f);
      color: var(--brand-blue, #0070b8);
      font-family: 'Hogfish', var(--font-heading--family), sans-serif;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.1;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 0.03em;
      border: 2px solid transparent !important;
      outline: none !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .wrts-shop-socks-btn:hover {
      background-color: var(--brand-blue, #0070b8) !important;
      color: #ffffff !important;
      border-color: transparent !important;
      outline: none !important;
      transform: translateY(-1px);
    }

    .wrts-header-desktop__actions {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      color: #ffffff;
      padding-inline-end: 12px;
      margin-inline-end: 4px;
    }

    .wrts-header-desktop__actions .header-actions {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0;
    }

    .wrts-header-desktop__actions .search-action,
    .wrts-header-desktop__actions .search-action__button,
    .wrts-header-desktop__actions .search-modal__button,
    .wrts-header-desktop__actions .account-button,
    .wrts-header-desktop__actions .header-actions__link,
    .wrts-header-desktop__actions cart-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: #ffffff;
      cursor: pointer;
      padding: 0;
      text-decoration: none;
    }

    .wrts-header-desktop__actions svg {
      width: 20px;
      height: 20px;
      color: #ffffff;
      stroke: currentColor;
      fill: none;
    }

    .wrts-header-desktop__actions .header-actions__cart-icon svg {
      fill: currentColor;
      stroke: none;
    }
  }

  /* Mobile Header */
  @media screen and (max-width: 989px) {
    .wrts-header-desktop {
      display: none !important;
    }

    .wrts-header-mobile {
      display: block !important;
      width: 100%;
      background-color: var(--brand-blue, #0070b8);
    }

    .wrts-header-mobile__inner {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 16px;
      display: grid;
      grid-template-columns: 44px 1fr 76px;
      align-items: center;
      min-height: 54px;
    }

    .wrts-header-mobile__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .wrts-header-mobile__left .header__icon--summary {
      color: #ffffff;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
    }

    .wrts-header-mobile__left svg {
      width: 24px;
      height: 24px;
      stroke: #ffffff;
    }

    .wrts-header-mobile__center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wrts-header-mobile__center .header-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding: 0;
    }

    .wrts-header-mobile__center .header-logo__image {
      max-height: 38px;
      width: auto;
      max-width: 170px;
      object-fit: contain;
      display: block;
    }

    .wrts-header-mobile__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      color: #ffffff;
      padding-inline-end: 8px;
    }

    .wrts-header-mobile__right .header-actions {
      display: inline-flex;
      align-items: center;
      margin: 0;
    }

    .wrts-header-mobile__right .search-action,
    .wrts-header-mobile__right .search-action__button,
    .wrts-header-mobile__right .search-modal__button,
    .wrts-header-mobile__right cart-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: #ffffff;
      padding: 0;
      width: 30px;
      height: 30px;
      cursor: pointer;
      text-decoration: none;
    }

    .wrts-header-mobile__right svg {
      width: 20px;
      height: 20px;
      color: #ffffff;
      stroke: currentColor;
    }

    .wrts-header-mobile__right .header-actions__cart-icon svg {
      fill: currentColor;
      stroke: none;
    }
  }

  /* Universal Cart Badge & Icon */
  .header-actions,
  header-actions,
  .header-actions__action,
  .action__cart,
  button[data-testid="cart-drawer-trigger"],
  .header-actions__cart-icon,
  cart-icon {
    position: relative !important;
    overflow: visible !important;
  }

  .header-actions__cart-icon svg,
  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    mask: none !important;
    -webkit-mask: none !important;
  }

  .header-actions__cart-icon cart-bubble,
  .header-actions__cart-icon .cart-bubble,
  cart-bubble.cart-bubble,
  .cart-bubble {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    inset-inline-end: -5px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    background-color: var(--brand-yellow, #fceb1f) !important;
    color: var(--brand-blue, #0070b8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    overflow: visible !important;
  }

  .header-actions__cart-icon .cart-bubble .cart-bubble__background,
  .cart-bubble .cart-bubble__background {
    display: none !important;
  }

  .header-actions__cart-icon .cart-bubble__text,
  .header-actions__cart-icon .cart-bubble__text-count,
  #cart-bubble-text,
  .cart-bubble__text-count {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--brand-blue, #0070b8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
  }
</style>




  <script type="module">
    import { hydrate } from '@theme/section-hydration';
    const url = new URL(window.location.href);
    url.searchParams.delete('page');
    hydrate('sections--23473579229423__header_section', url);
  </script>



</header>
<!-- END sections: header-group -->
      </div>

      <script>
        /**
         * Sets `--header-height` and `--header-group-height` to measured values before first paint.
         *
         * A few CSS rules position content relative to the header at first paint — a hero sized to
         * the remaining viewport, a transparent header's negative margin. Without a measured value
         * those rules use the `60px` fallback from `sections/header.liquid`, and the content visibly
         * jumps once `header.js` corrects the values after load.
         *
         * Measuring forces layout mid-parse, so it only runs where a consuming rule exists.
         * Callers opt in: the transparent-header branch below, or `snippets/measure-header-heights.liquid`,
         * which any new first-paint consumer must render too.
         *
         * Measures once per page; after load, header.js's ResizeObservers keep the values fresh.
         * The group-height walk mimics calculateHeaderGroupHeight() in utilities.js — keep them
         * in sync.
         */
        window.measureHeaderHeights = (function () {
          let measured = false;

          return function measureHeaderHeights() {
            if (measured) return;

            const header = document.querySelector('#header-component');
            const headerGroup = document.querySelector('#header-group');

            if (!header || !headerGroup) return;
            measured = true;

            const headerHeight = header.offsetHeight;

            let headerGroupHeight = 0;
            for (const element of headerGroup.children) {
              if (element instanceof HTMLElement) headerGroupHeight += element.offsetHeight;
            }

            /**
             * A transparent header is absolutely positioned, so the loop above counts its section
             * wrapper as 0px. When a section follows it in the group, header.liquid pushes that
             * section down by the header's height using a margin, which offsetHeight also
             * excludes — so the header's height has to be added back manually.
             */
            if (header.hasAttribute('transparent') && header.parentElement?.nextElementSibling) {
              headerGroupHeight += headerHeight;
            }

            document.body.style.setProperty('--header-height', `${headerHeight}px`);
            document.body.style.setProperty('--header-group-height', `${headerGroupHeight}px`);
          };
        })();

        /**
         * Transparent-header rules consume the measured heights at first paint on every
         * template, so the transparent case opts in globally here instead of per-section.
         */
        if (document.querySelector('#header-component')?.hasAttribute('transparent')) {
          measureHeaderHeights();
        }

        /**
         * Sets `--top-row-height`, consumed by the header underlays and submenus. Deferred to a
         * rAF so the height read doesn't force layout mid-parse, and scoped to the
         * header, where all consumers live, so the write only invalidates the header subtree.
         * Mimics the `--top-row-height` write in updateHeaderHeights() in utilities.js
         */
        (function setTopRowHeight() {
          const header = document.querySelector('#header-component');
          const headerTopRow = header?.querySelector('.header__row--top');
          if (!headerTopRow) return;

          window.requestAnimationFrame(function () {
            header.style.setProperty('--top-row-height', `${headerTopRow.getBoundingClientRect().height}px`);
          });
        })();

        /**
         * Sets `--transparent-header-offset-boolean` when the first section must offset itself
         * under a transparent header. The non-offset case relies on the `0` default declared in
         * sections/header.liquid — unlike updateTransparentHeaderOffset() in utilities.js, which
         * re-runs on editor changes and must write '0' to reset a previously written '1'.
         */
        (function updateTransparentHeaderOffset() {
          const header = document.querySelector('#header-component');
          const headerSection = document.querySelector('#header-group .header-section');
          if (!headerSection || !header?.hasAttribute('transparent')) return;

          const hasImmediateSection = headerSection.nextElementSibling?.classList.contains('shopify-section');
          if (!hasImmediateSection) {
            document.body.style.setProperty('--transparent-header-offset-boolean', '1');
          }
        })();

        /**
         * Sets the initial menu style (inline menu vs. drawer) on the header component.
         * Mimics setHeaderMenuStyle() in utilities.js
         */
        (function setHeaderMenuStyle() {
          const headerComponent = document.querySelector('#header-component');
          if (headerComponent) {
            const isTouchDevice = 'ontouchstart' in window && navigator.maxTouchPoints > 0;
            const overflowList = headerComponent.querySelector('overflow-list');
            const hasReachedMinimum = overflowList && overflowList.hasAttribute('minimum-reached');
            headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu';
          }
        })();
      </script>

      <main
        id="MainContent"
        class="content-for-layout"
        role="main"
        data-page-transition-enabled="false"
        data-product-transition="false"
        data-template="index"
      >
        <section id="shopify-section-template--23473579426031__wrts_clovis_hero" class="shopify-section wrts-clovis-hero-wrapper"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  .wrts-hero-section-template--23473579426031__wrts_clovis_hero {
    position: relative;
    width: 100%;
    background-color: #0070b8;
    overflow: hidden;
  }

  .wrts-hero__container {
    /* Match .wrts-header-desktop__inner (1536px + clamp gutter) */
    max-width: 1536px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px) clamp(16px, 2.5vw, 40px) clamp(24px, 3vw, 40px);
    box-sizing: border-box;
    display: grid;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    
        grid-template-columns: 1fr 1fr;
    
  }

  .wrts-hero__content {
    grid-column: 1;
    grid-row: 1;
  }

  .wrts-hero__media {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .wrts-hero__badges-grid {
    grid-column: 1;
    grid-row: 2;
  }

  /* Left Column */
  .wrts-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    z-index: 2;
  }

  .wrts-hero__eyebrow {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 14px 0;
    display: inline-block;
  }

  .wrts-hero__heading {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: var(--wrts-type-hero-h1);
    font-weight: 400;
    line-height: var(--wrts-lh-hero-h1, 1.25);
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 18px 0;
    text-wrap: balance;
  }

  .wrts-hero__heading em,
  .wrts-hero__heading strong,
  .wrts-hero__heading .accent-yellow {
    font-style: normal;
    font-weight: 400;
    color: #fceb1f;
  }

  .wrts-hero__subheading {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    /* Slightly under body so supporting copy doesn't compete with hero H1 */
    font-size: calc(var(--wrts-type-body) * 15 / 18);
    line-height: 1.55;
    color: #ffffff;
    opacity: 0.95;
    margin: 0 0 clamp(24px, 3vw, 36px) 0;
    max-width: 580px;
    text-wrap: pretty;
  }

  /* CTAs: Horizon .button / .button-secondary (snippets/wrts-global-styles.liquid) */
  .wrts-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 0;
  }

  .wrts-hero__actions .button,
  .wrts-hero__actions .button-secondary {
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 700;
  }

  .wrts-hero__actions .button-secondary {
    --button-color: #ffffff;
    --button-background-color: transparent;
    --button-border-color: #ffffff;
    --button-border-width: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .wrts-hero__actions .button-secondary:hover {
      --button-color: #fceb1f;
      --button-background-color: transparent;
      --button-border-color: #fceb1f;
    }
  }

  /* Interchangeable Badges Row */
  .wrts-hero__badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: 620px;
    margin-top: 0;
    align-self: start;
  }

  .wrts-hero-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    color: #ffffff;
    padding: 0 clamp(8px, 1.5vw, 16px);
  }

  .wrts-hero-badge:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
  }

  .wrts-hero-badge__icon-wrap {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .wrts-hero-badge__icon-svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .wrts-hero-badge__icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .wrts-hero-badge__label {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: clamp(12px, 0.95vw, 13px);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
  }

  /* Right Column (Hero Picture) */
  .wrts-hero__media {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
  }

  .wrts-hero__image {
    width: 100%;
    height: auto;
    max-height: 580px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
  }

  /* Bottom Yellow Wave Ribbon */
  .wrts-hero-wave-wrapper {
    position: relative;
    width: 100%;
    background-color: #fceb1f;
    padding: 0 0 clamp(16px, 2vw, 24px);
    overflow: hidden;
  }

  .wrts-hero-wave-svg {
    display: block;
    width: 100%;
    height: clamp(32px, 4vw, 56px);
    margin-top: -1px;
  }

  .wrts-hero-wave-content {
    max-width: 1536px;
    margin: 0 auto;
    padding: 4px clamp(16px, 2.5vw, 40px) 0;
    text-align: center;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(14px, 1.7vw, 24px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0070b8;
    line-height: 1.2;
  }

  @media screen and (max-width: 989.98px) {
    .wrts-hero__container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }

    .wrts-hero__content {
      align-items: center;
      text-align: center;
      padding: 0 clamp(20px, 4vw, 40px) clamp(8px, 2vw, 16px);
    }

    .wrts-hero__subheading {
      margin-left: auto;
      margin-right: auto;
    }

    .wrts-hero__actions {
      justify-content: center;
      margin-bottom: 0;
      gap: 14px;
    }

    .wrts-hero__actions .button,
    .wrts-hero__actions .button-secondary {
      font-size: 15px;
      min-height: 42px;
    }

    .wrts-hero__content,
    .wrts-hero__media,
    .wrts-hero__badges-grid {
      grid-column: 1;
      grid-row: auto;
    }

    /* Full-bleed hero image: mask fades pixels into blue (no white edge gap) */
    .wrts-hero__media {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: -1px;
      margin-bottom: -1px;
      border-radius: 0;
      overflow: hidden;
      background-color: #0070b8;
    }

    .wrts-hero__badges-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      max-width: none;
      width: 100%;
      margin: 0;
      padding: clamp(16px, 4vw, 28px) clamp(8px, 2vw, 16px) clamp(20px, 4vw, 32px);
      box-sizing: border-box;
    }

    .wrts-hero-badge {
      padding: 0 6px;
    }

    .wrts-hero-badge__icon-wrap {
      width: 28px;
      height: 28px;
    }

    .wrts-hero-badge__icon-svg,
    .wrts-hero-badge__icon-img {
      width: 24px;
      height: 24px;
    }

    .wrts-hero-badge__label {
      font-size: 11px;
      line-height: 1.2;
    }

    .wrts-hero__image {
      width: 100%;
      max-height: none;
      height: 250px;
      min-height: 250px;
      max-height: 250px;
      object-fit: cover;
      object-position: bottom center;
      border-radius: 0;
      /* Safari: -webkit-mask required; fades image edge into section blue */
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 18%,
        #000 82%,
        transparent 100%
      );
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
  }

  @media screen and (min-width: 991px) {
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__heading {
      font-size: calc(var(--wrts-type-hero-h1) * 0.78);
    }
  }

  @media screen and (min-width: 990px) {
    /* Desktop: image is a right-half background layer with soft blue blend into copy */
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__container {
      position: relative;
      isolation: isolate;
      direction: ltr;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;
      column-gap: 0;
      row-gap: clamp(16px, 2vw, 28px);
      padding-inline: clamp(16px, 2.5vw, 40px);
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__content,
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__badges-grid {
      grid-column: 1;
      min-width: 0;
      max-width: 100%;
      direction: ltr;
      text-align: start;
      position: relative;
      z-index: 2;
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__content {
      align-items: flex-start;
      padding-inline-end: clamp(12px, 2vw, 28px);
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__media {
      /* auto placement → containing block is .wrts-hero__container padding box
         (not a single grid track). Width 50% = half of that container. */
      position: absolute;
      z-index: 0;
      grid-column: auto;
      grid-row: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;
      width: 50%;
      max-width: 50%;
      height: auto;
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      pointer-events: none;
    }

    /* Soft blend on both edges into section blue — keep fades short so the panel stays visible */
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__media::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        to right,
        #0070b8 0%,
        rgba(0, 112, 184, 0.65) 6%,
        rgba(0, 112, 184, 0.2) 14%,
        transparent 22%,
        transparent 78%,
        rgba(0, 112, 184, 0.2) 86%,
        rgba(0, 112, 184, 0.65) 94%,
        #0070b8 100%
      );
    }

    [dir='rtl'] .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__media::after {
      background: linear-gradient(
        to left,
        #0070b8 0%,
        rgba(0, 112, 184, 0.65) 6%,
        rgba(0, 112, 184, 0.2) 14%,
        transparent 22%,
        transparent 78%,
        rgba(0, 112, 184, 0.2) 86%,
        rgba(0, 112, 184, 0.65) 94%,
        #0070b8 100%
      );
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__image {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: center;
      border-radius: 0;
      /* Safari: -webkit-mask required; soft left + right edges into blue */
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      );
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }

    [dir='rtl'] .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__image {
      -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to left,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      );
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero-badge:not(:first-child) {
      border-left: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.4);
    }
  }

  @media screen and (min-width: 750px) {
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__container {
      min-height: 0;
      height: auto;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 989.98px) {
    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__container {
      padding-block-end: 0 !important;
      padding-bottom: 0 !important;
    }

    .wrts-hero-section-template--23473579426031__wrts_clovis_hero .wrts-hero__image {
      height: min(75vw, 500px);
      min-height: 250px;
      max-height: 500px;
      object-position: bottom center;
    }
  }

  @media screen and (max-width: 600px) {
    .wrts-hero__actions {
      flex-direction: column;
      width: 100%;
      align-items: stretch;
    }

    .wrts-hero__actions .button,
    .wrts-hero__actions .button-secondary {
      width: 100%;
    }

    .wrts-hero__image {
      aspect-ratio: 5 / 4;
      min-height: 240px;
    }
  }
</style>

<div class="wrts-hero-section-template--23473579426031__wrts_clovis_hero" id="wrts-clovis-hero">
  <div class="wrts-hero__container">
    <!-- Left Column: texts, buttons, interchangeable badges -->
    <div class="wrts-hero__content"><div class="wrts-hero__eyebrow">WRTS GRIP SOCKS</div><h1 class="wrts-hero__heading">
        For every climb, swing & slide, <strong>Grip socks for kids Of all abilities.</strong>
      </h1><div class="wrts-hero__subheading">WRTS-branded grip socks for families and locations. No minimum order, competitive pricing, and reliable availability to keep the play going.</div><div class="wrts-hero__actions"><a
            href="/collections/all"
            class="button"
          >
            SHOP GRIP SOCKS
          </a></div>
    </div>

    <!-- Right Column: Picture -->
    <div class="wrts-hero__media"><img
          src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/Colorful_Kids_Gym_Adventure_wearing_WRTS_socks.png?v=1791184215"
          alt="Children playing in a sensory gym wearing WRTS grip socks"
          class="wrts-hero__image"
          loading="eager"
          fetchpriority="high"
          width="1200"
          height="800"
        ></div>

    <!-- Icon badges: private theme block _wrts-hero-badge -->
    <div class="wrts-hero__badges-grid">
      <div class="wrts-hero-badge" >
    <div class="wrts-hero-badge__icon-wrap"><svg class="wrts-hero-badge__icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg></div><p class="wrts-hero-badge__label">No Minimum Order</p></div>

<div class="wrts-hero-badge" >
    <div class="wrts-hero-badge__icon-wrap"><svg class="wrts-hero-badge__icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
            <line x1="12" y1="22.08" x2="12" y2="12"></line>
          </svg></div><p class="wrts-hero-badge__label">Stocked &amp; Ready</p></div>
<div class="wrts-hero-badge" >
    <div class="wrts-hero-badge__icon-wrap"><svg class="wrts-hero-badge__icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
          </svg></div><p class="wrts-hero-badge__label">WRTS Branded</p></div>

    </div>
  </div>

  <!-- Bottom Yellow Wave Banner with Editable Text --><div class="wrts-hero-wave-wrapper">
      <svg class="wrts-hero-wave-svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
        <path fill="#0070b8" d="M0,0 L0,32 C360,65 1080,-5 1440,32 L1440,0 Z"></path>
      </svg>
      <div class="wrts-hero-wave-content">
        ONE SOCK FOR EVERY SIZE OF ADVENTURE.
      </div>
    </div></div>


</section><section id="shopify-section-template--23473579426031__wrts_clovis_features" class="shopify-section wrts-clovis-features-section"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<div class="wrts-clovis-home wrts-clovis-home--features" id="wrts-clovis-features">
  <div class="wrts-clovis-home__features bg-primary" aria-label="Shop and ordering options">
    <div
      class="wrts-clovis-home__feature-grid"
      style="--padding-block-start: max(20px, calc(var(--spacing-scale) * 48px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 48px));"
    >
      <article class="wrts-clovis-home__feature" ><a class="wrts-clovis-home__feature-image-link" href="/collections/all" aria-label="Grip Socks">
      <img class="wrts-clovis-home__feature-image" src="/cdn/shop/t/23/assets/wrts-clovis-home-1100.webp?v=171419395171157056701791786765" width="1100" height="619" alt="Child playing in a gym wearing grip socks." loading="lazy">
    </a><h2>Grip Socks</h2><p>WRTS grip socks for every size of adventure.</p><a class="button" href="/collections/all">Shop now</a></article>


<article class="wrts-clovis-home__feature wrts-clovis-home__feature--coming-soon" ><div class="wrts-clovis-home__feature-image-link" aria-label="Coming Soon">
      <img class="wrts-clovis-home__feature-image" src="/cdn/shop/t/23/assets/wrts-feature-shirts-coming-soon.webp?v=120488247492064984221791786765" width="1672" height="941" alt="Children wearing colorful WRTS shirts in a sensory gym." loading="lazy">
    </div><h2>Coming Soon</h2><p>Coming soon — WRTS shirts are on the way!</p><span class="button" aria-disabled="true">Coming Soon</span></article>



    </div>
  </div>
</div>

<style data-shopify>
  .wrts-clovis-home__features { color: #fff; }
  .wrts-clovis-home__feature-grid {
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3.5vw, 50px);
    margin: auto;
    padding-block: var(--padding-block-start, var(--wrts-home-space, 48px))
      var(--padding-block-end, var(--wrts-home-space, 48px));
    padding-inline: var(--page-margin);
  }
  .wrts-clovis-home__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  .wrts-clovis-home__feature-image-link { display: block; width: 100%; }
  .wrts-clovis-home__feature--coming-soon {
    position: relative;
  }
  .wrts-clovis-home__feature--coming-soon .wrts-clovis-home__feature-image-link {
    position: relative;
    overflow: hidden;
  }
  .wrts-clovis-home__feature--coming-soon .wrts-clovis-home__feature-image-link::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    color: #000;
    font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif;
    font-size: clamp(42px, 7vw, 96px);
    font-weight: 700;
    line-height: 0.8;
    text-shadow:
      0 2px 0 #fff,
      0 -2px 0 #fff,
      2px 0 0 #fff,
      -2px 0 0 #fff;
    pointer-events: none;
  }
  .wrts-clovis-home__feature-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.9;
    object-fit: cover;
    border: 5px solid #fff;
  }
  /* Clovis feature titles (Open Play / Parties / Classes) use H3 scale. */
  .wrts-clovis-home__feature h2 {
    margin: 7px 0 12px;
    color: #fff;
    font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif;
    font-size: var(--wrts-type-h3);
    font-weight: 400;
    line-height: var(--wrts-lh-h3, 1.5);
    text-transform: uppercase;
  }
  .wrts-clovis-home__feature p {
    flex: 1;
    max-width: 34ch;
    margin: 0 0 28px;
    font-size: calc(var(--wrts-type-body) * 0.82);
    line-height: 1.45;
  }
  /* Feature CTAs use Horizon .button — snippets/wrts-global-styles.liquid */

  @media screen and (max-width: 989px) {
    .wrts-clovis-home__feature-grid { gap: 22px; }
  }
  @media screen and (max-width: 749px) {
    .wrts-clovis-home__feature-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      padding-inline: 20px;
    }
  }
</style>


</section><section id="shopify-section-template--23473579426031__wrts_clovis_products" class="shopify-section wrts-clovis-products-section-wrap"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  .wrts-clovis-products-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
    
      background-image: none;
    
    --wrts-products-padding-top: 48px;
    --wrts-products-padding-bottom: 48px;
    padding-top: var(--wrts-home-space, var(--wrts-products-padding-top, 48px));
    padding-bottom: var(--wrts-home-space, var(--wrts-products-padding-bottom, 48px));
    color: #ffffff;
  }

  .wrts-clovis-products__container {
    max-width: var(--page-width, 1536px);
    margin: 0 auto;
    padding: 0 var(--page-margin);
    box-sizing: border-box;
  }

  .wrts-clovis-products__header {
    text-align: center;
    margin: 0 auto clamp(28px, 4vw, 44px);
    max-width: 840px;
  }

  .wrts-clovis-products__eyebrow {
    color: #fceb1f;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
  }

  .wrts-clovis-products__heading {
    color: #0070b8;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: var(--wrts-type-h2);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 14px 0;
    text-wrap: balance;
  }

  .wrts-clovis-products__heading strong,
  .wrts-clovis-products__heading em,
  .wrts-clovis-products__heading .highlight-yellow {
    font-style: normal;
    font-weight: inherit;
    color: var(--brand-yellow, #fceb1f);
  }

  .wrts-clovis-products__body {
    color: #0070b8;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: var(--wrts-type-body);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 680px;
    text-wrap: pretty;
    opacity: 0.95;
  }

  .wrts-clovis-products__body p {
    margin: 0;
  }

  /* Wide layout — flex wrap so every row (including partial) stays centered */
  .wrts-clovis-products__grid {
    --wrts-products-grid-gap: clamp(10px, 1.2vw, 16px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--wrts-products-grid-gap);
  }

  .wrts-clovis-products__grid > .wrts-product-card {
    flex: 0 1 280px;
    width: 100%;
    min-width: 230px;
    max-width: 280px;
  }

  /* Card */
  .wrts-product-card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: clamp(14px, 1.4vw, 18px) clamp(8px, 1vw, 12px) clamp(14px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 30, 80, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
  }

  .wrts-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 30, 80, 0.16);
  }

  .wrts-product-card__media-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;
    overflow: hidden;
    text-decoration: none;
    background-color: rgba(0,0,0,0);
    border-radius: 8px;
  }

  .wrts-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: transparent;
    transition: transform 0.3s ease;
  }

  .wrts-product-card:hover .wrts-product-card__image {
    transform: scale(1.04);
  }

  .wrts-clovis-products__mascot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
  }

  .wrts-clovis-products__mascot-img {
    max-width: 95px;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .wrts-product-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%;
  }

  .wrts-product-card__title-link {
    text-decoration: none;
    color: #0070b8;
    width: 100%;
  }.wrts-product-card__title {
    color: #0070b8;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .wrts-product-card__price-wrap {
    margin-bottom: 6px;
  }

  .wrts-product-card__price {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0070b8;
  }

  .wrts-product-card__price--sale {
    color: #ed1b24;
  }

  .wrts-product-card__price--compare {
    text-decoration: line-through;
    color: #888888;
    margin-left: 4px;
    font-weight: normal;
  }

  /* Size badge + Age row */
  .wrts-product-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 10px;
    min-height: 24px;
  }

  .wrts-product-card__size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 8px;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 44px;
  }

  .wrts-product-card__age-label {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0070b8;
  }

  .wrts-product-card__form-wrapper {
    width: 100%;
    margin-top: auto;
  }

  /* Inline Quantity Selector + Yellow Button */
  .wrts-product-card__actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  wrts-card-quantity.wrts-product-card__qty-pill,
  .wrts-product-card__qty-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid #0070b8;
    border-radius: 8px;
    padding: 1px 4px;
    background: #ffffff;
    height: 34px;
    width: 76px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
  }

  .wrts-product-card__qty-btn {
    background: transparent;
    border: none;
    color: #0070b8;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
  }

  .wrts-product-card__qty-btn:hover {
    color: #005088;
  }

  .wrts-product-card__qty-val {
    width: 24px;
    border: none;
    text-align: center;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0070b8;
    -moz-appearance: textfield;
    padding: 0;
    background: transparent;
  }

  .wrts-product-card__qty-val::-webkit-outer-spin-button,
  .wrts-product-card__qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ATC uses Horizon .button tokens; compact sizing for card row */
  .wrts-product-card .button {
    flex: 1 1 100px;
    min-width: 0;
    min-height: 34px;
    width: auto;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  wrts-card-form, .wrts-product-card__form-wrapper product-form-component { display: block; width: 100%; }
  .wrts-product-card__qty-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .wrts-product-card__qty-btn:focus-visible, .wrts-product-card__qty-val:focus-visible { outline: 2px solid #0070b8; outline-offset: 2px; }

  /* Bottom CTA */
  .wrts-clovis-products__cta-wrap {
    text-align: center;
    margin-top: clamp(36px, 4vw, 56px);
  }

  .wrts-clovis-products__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 38px;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    background-color: transparent;
    color: #ffffff;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .wrts-clovis-products__cta:hover {
    background-color: #ffffff;
    color: #ffffff;
  }

  /* Tertiary size-guide link under the list */
  .wrts-clovis-products__size-link {
    display: inline-block;
    margin-top: 14px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #ffffff;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  .wrts-clovis-products__size-link:hover,
  .wrts-clovis-products__size-link:focus-visible {
    color: var(--brand-yellow, #fceb1f);
    background: transparent;
  }

  /* Responsive breakpoints */
  @media screen and (max-width: 1199px) {
    .wrts-clovis-products__grid {
      --wrts-products-grid-gap: 12px;
    }
  }

  /* Tablet: keep three cards per row, still centered */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .wrts-clovis-products__grid > .wrts-product-card {
      flex: 0 0 calc((100% - 2 * var(--wrts-products-grid-gap)) / 3);
      width: auto;
      min-width: 0;
      max-width: none;
    }
  }

  .wrts-product-card .button {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    text-transform: uppercase;
  }

  .wrts-product-card__qty-btn {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
  }

  @media screen and (max-width: 749px) {
    .wrts-clovis-products__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      overflow: visible;
      justify-content: stretch;
    }

    .wrts-clovis-products__grid > .wrts-product-card {
      flex: none;
      width: auto;
      min-width: 0;
      max-width: none;
    }

    .wrts-product-card {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
      padding: 14px 4px;
      text-align: left;
      box-shadow: none;
      border-radius: 0;
      background-color: transparent;
    }

    .wrts-product-card:hover {
      transform: none;
      box-shadow: none;
    }

    .wrts-product-card:not(:last-child)::after {
      content: '';
      grid-column: 1 / -1;
      display: block;
      width: 100%;
      height: 14px;
      margin-top: 10px;
      background-image: url('https://cdn.shopify.com/s/files/1/0839/7894/4751/files/curl_divider.jpg?v=1791189916');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% auto;
      pointer-events: none;
    }

    .wrts-product-card__media-link {
      width: 88px;
      height: 88px;
      aspect-ratio: auto;
      margin: 0;
    }

    .wrts-product-card__content {
      align-items: flex-start;
      min-width: 0;
      gap: 0;
    }

    .wrts-product-card__title {
      font-size: 15px;
      margin-bottom: 2px;
      -webkit-line-clamp: 2;
    }

    .wrts-product-card__price-wrap {
      margin-bottom: 4px;
    }

    .wrts-product-card__meta-row {
      justify-content: flex-start;
      margin: 2px 0 8px;
    }

    .wrts-product-card__form-wrapper {
      margin-top: 0;
    }

    .wrts-product-card__actions-row {
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 8px;
    }

    .wrts-product-card__qty-pill {
      width: 72px;
      height: 36px;
    }

    .wrts-product-card .button {
      flex: 1 1 auto;
      min-height: 36px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .wrts-clovis-products__eyebrow {
      font-size: 15px;
    }
  }
</style>

<div class="wrts-clovis-products-section" id="wrts-clovis-products-template--23473579426031__wrts_clovis_products">
  <div class="wrts-clovis-products__container"><div class="wrts-clovis-products__header"><h2 class="wrts-clovis-products__heading">OUR WRTS GRIP SOCKS</h2><div class="wrts-clovis-products__body"><p>One sock for every size. Easy to identify. Easy to reorder.</p></div></div>

    <div class="wrts-clovis-products__grid"><div class="wrts-product-card" data-product-id="9650155847919" style="order: 1;">
            <a href="/products/wrts-red-socks-xxxs" class="wrts-product-card__media-link" aria-label="WRTS Red Socks (XXXS)"><img
                  src="/cdn/shop/files/WRTS_socks_red_XXXS.png?v=1791206797&width=400"
                  alt="WRTS Red Socks (XXXS)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-red-socks-xxxs" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Red Socks (XXXS)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #ed1b24; color: #ffffff;">XXXS</span><span class="wrts-product-card__age-label">Ages 1–2</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650155847919-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650155847919" data-product-url="/products/wrts-red-socks-xxxs" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650155847919" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50910816764143">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Red Socks (XXXS)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650155847919" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650159354095" style="order: 2;">
            <a href="/products/wrts-green-socks-xxs" class="wrts-product-card__media-link" aria-label="WRTS Green Socks (XXS)"><img
                  src="/cdn/shop/files/WRTS_Grip_Socks_Green_XXS.png?v=1791207226&width=400"
                  alt="WRTS Green Socks (XXS)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-green-socks-xxs" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Green Socks (XXS)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #00b050; color: #ffffff;">XXS</span><span class="wrts-product-card__age-label">Ages 2–4</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650159354095-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650159354095" data-product-url="/products/wrts-green-socks-xxs" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650159354095" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50910870831343">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Green Socks (XXS)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650159354095" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650169938159" style="order: 3;">
            <a href="/products/wrts-black-socks-xs" class="wrts-product-card__media-link" aria-label="WRTS Black Socks (XS)"><img
                  src="/cdn/shop/files/WRTS_Grip_Socks_XS_Black.png?v=1791207165&width=400"
                  alt="WRTS Black Socks (XS)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-black-socks-xs" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Black Socks (XS)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #111111; color: #ffffff;">XS</span><span class="wrts-product-card__age-label">Ages 4–6</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650169938159-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650169938159" data-product-url="/products/wrts-black-socks-xs" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650169938159" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50910949638383">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Black Socks (XS)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650169938159" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650171707631" style="order: 4;">
            <a href="/products/wrts-gray-socks-s" class="wrts-product-card__media-link" aria-label="WRTS Gray Socks (S)"><img
                  src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_55_07_PM.png?v=1790672241&width=400"
                  alt="WRTS Gray Socks (S)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-gray-socks-s" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Gray Socks (S)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #c5c9ce; color: #0070b8;">S</span><span class="wrts-product-card__age-label">Ages 6–8</span></div>
<div class="wrts-product-card__form-wrapper"><div class="wrts-product-card__actions-row">
                    <div class="wrts-product-card__qty-pill" aria-hidden="true">
                      <button type="button" class="wrts-product-card__qty-btn" disabled tabindex="-1">−</button>
                      <input type="number" value="1" min="1" class="wrts-product-card__qty-val" disabled tabindex="-1" aria-hidden="true">
                      <button type="button" class="wrts-product-card__qty-btn" disabled tabindex="-1">+</button>
                    </div>
                    <button type="button" class="button" disabled>
                      Sold out
                    </button>
                  </div></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650174263535" style="order: 5;">
            <a href="/products/wrts-yellow-socks-adult-s" class="wrts-product-card__media-link" aria-label="WRTS Yellow Socks (Adult S)"><img
                  src="/cdn/shop/files/WRTS_Grip_Socks_Adult_S.png?v=1791206986&width=400"
                  alt="WRTS Yellow Socks (Adult S)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-yellow-socks-adult-s" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Yellow Socks (Adult S)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #fceb1f; color: #0070b8;">Adult S</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650174263535-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650174263535" data-product-url="/products/wrts-yellow-socks-adult-s" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650174263535" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50911069798639">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Yellow Socks (Adult S)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650174263535" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650174787823" style="order: 6;">
            <a href="/products/wrts-blue-socks-adult-l" class="wrts-product-card__media-link" aria-label="WRTS Blue Socks (Adult L)"><img
                  src="/cdn/shop/files/WRTS_Socks_Adult_L_Blue.png?v=1791206945&width=400"
                  alt="WRTS Blue Socks (Adult L)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-blue-socks-adult-l" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Blue Socks (Adult L)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span class="wrts-product-card__price--sale">$0.42</span>
                      <span class="wrts-product-card__price--compare">$1.28</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #0070b8; color: #ffffff;">Adult L</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650174787823-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650174787823" data-product-url="/products/wrts-blue-socks-adult-l" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650174787823" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50911083430127">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Blue Socks (Adult L)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650174787823" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div><div class="wrts-product-card" data-product-id="9650179178735" style="order: 7;">
            <a href="/products/wrts-purple-socks-adult-xxl" class="wrts-product-card__media-link" aria-label="WRTS Purple Socks (Adult XXL)"><img
                  src="/cdn/shop/files/WRTS_Socks_Adult_XXL.png?v=1791206904&width=400"
                  alt="WRTS Purple Socks (Adult XXL)"
                  class="wrts-product-card__image"
                  loading="lazy"
                  width="400"
                  height="400"
                ></a>

            <div class="wrts-product-card__content">
              <a href="/products/wrts-purple-socks-adult-xxl" class="wrts-product-card__title-link">
                <h3 class="wrts-product-card__title">WRTS Purple Socks (Adult XXL)</h3>
              </a><div class="wrts-product-card__price-wrap">
                  <div class="wrts-product-card__price"><span>$0.42</span></div>
                </div><div class="wrts-product-card__meta-row">
      <span class="wrts-product-card__size-badge" style="background-color: #7c3aed; color: #ffffff;">Adult XXL</span></div>
<div class="wrts-product-card__form-wrapper"><wrts-card-form>
                  <product-form-component id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650179178735-component" data-section-id="template--23473579426031__wrts_clovis_products" data-product-id="9650179178735" data-product-url="/products/wrts-purple-socks-adult-xxl" on:submit="/handleSubmit"><form method="post" action="/cart/add" id="WrtsProductForm-template--23473579426031__wrts_clovis_products-9650179178735" accept-charset="UTF-8" class="wrts-product-form js-wrts-form" enctype="multipart/form-data" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="id" ref="variantId" value="50911090147567">
                    <div class="wrts-product-card__actions-row">
                      <wrts-card-quantity class="wrts-product-card__qty-pill">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-down aria-label="Decrease quantity">−</button>
                        <input type="number" name="quantity" value="1" min="1" step="1" class="wrts-product-card__qty-val js-qty-val" aria-label="Quantity for WRTS Purple Socks (Adult XXL)">
                        <button type="button" class="wrts-product-card__qty-btn" data-quantity-up aria-label="Increase quantity">+</button>
                      </wrts-card-quantity>
                      <button
                        type="submit"
                        name="add"
                        class="button js-wrts-add-btn"
                        ref="addToCartButton"
                      >
                        ADD TO CART
                      </button>
                    </div>
                    <span ref="liveRegion" class="visually-hidden" role="status" aria-live="polite"></span>
                    <span ref="addToCartTextError" class="hidden" role="alert"></span><input type="hidden" name="product-id" value="9650179178735" /><input type="hidden" name="section-id" value="template--23473579426031__wrts_clovis_products" /></form></product-form-component>
                  </wrts-card-form></div>
            </div>
          </div></div></div>
</div>

<script src="/cdn/shop/t/23/assets/wrts-card-controls.js?v=3580245999737698551791786765" type="module"></script>


</section><section id="shopify-section-template--23473579426031__wrts_graphic_play" class="shopify-section wrts-graphic-play-wrapper"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  .wrts-graphic-play-template--23473579426031__wrts_graphic_play {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--wrts-home-space, 48px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrts-graphic-play__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }

  .wrts-graphic-play__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.9) contrast(1.05);
  }

  /* Subtle blue color tint overlay */
  .wrts-graphic-play__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 90, 165, 0.42) 0%, rgba(0, 70, 140, 0.52) 100%);
    pointer-events: none;
  }

  .wrts-graphic-play__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--page-width, 1536px);
    margin: 0 auto;
    padding: 0 var(--page-margin);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  /* Center blue card with blur transition into the background */
  .wrts-graphic-play__card {
    position: relative;
    background-color: rgba(0, 112, 184, 0.94);
    box-shadow: 0 0 60px 40px rgba(0, 112, 184, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 36px;
    padding: clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 64px);
    max-width: 820px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
  }

  .wrts-graphic-play__heading {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: var(--wrts-type-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 16px 0;
    text-wrap: balance;
  }

  .wrts-graphic-play__heading em,
  .wrts-graphic-play__heading strong,
  .wrts-graphic-play__heading .highlight-yellow {
    font-style: normal;
    color: #fceb1f;
  }

  .wrts-graphic-play__subheading {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: calc(var(--wrts-type-body) * 0.875);
    line-height: 1.5;
    color: #ffffff;
    opacity: 0.96;
    margin: 0 auto clamp(28px, 3.5vw, 40px) auto;
    max-width: 620px;
    text-wrap: pretty;
  }

  /* 4 Pill Badges Grid */
  .wrts-graphic-play__pills {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .wrts-graphic-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background-color: #ffffff;
    color: #0070b8;
    border-radius: 9999px;
    padding: 10px 20px;
    box-shadow: 0 3px 12px rgba(0, 30, 80, 0.12);
    text-align: left;
    box-sizing: border-box;
  }

  .wrts-graphic-pill__icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .wrts-graphic-pill__icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.8;
  }

  .wrts-graphic-pill__text {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 700;
    color: #005894;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
  }

  @media screen and (max-width: 640px) {
    .wrts-graphic-play__card {
      border-radius: 24px;
      padding: 28px 18px;
      box-shadow: 0 0 40px 25px rgba(0, 112, 184, 0.9);
    }

    .wrts-graphic-play__pills {
      gap: 10px;
    }

    .wrts-graphic-pill {
      padding: 8px 16px;
    }
  }
</style>

<div class="wrts-graphic-play-template--23473579426031__wrts_graphic_play" id="wrts-graphic-play">
  <!-- Subtle blue color tinted background photo -->
  <div class="wrts-graphic-play__bg"><img
        src="/cdn/shop/t/23/assets/wrts-play-hero-actual-v2-1000.webp?v=51404224581423843871791786765"
        alt="Kids playing in sensory gym"
        class="wrts-graphic-play__bg-img"
        loading="lazy"
        width="1400"
        height="800"
      ><div class="wrts-graphic-play__bg-overlay"></div>
  </div>

  <div class="wrts-graphic-play__container">
    <!-- Center blue filled container with blur transition -->
    <div class="wrts-graphic-play__card">
      <h2 class="wrts-graphic-play__heading">
        Made for <strong>Real Play.</strong>
      </h2><p class="wrts-graphic-play__subheading">Designed for safety, comfort, and inclusive play, our grip socks help keep kids moving at WRTS locations everywhere.</p><div class="wrts-graphic-play__pills">
        <!-- Pill 1: Non-slip grip soles -->
        <div class="wrts-graphic-pill">
          <div class="wrts-graphic-pill__icon" style="background-color: #0070b8;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
          <span class="wrts-graphic-pill__text">Non-slip grip soles</span>
        </div>

        <!-- Pill 2: Comfortable fit -->
        <div class="wrts-graphic-pill">
          <div class="wrts-graphic-pill__icon" style="background-color: #00b050;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
          <span class="wrts-graphic-pill__text">Comfortable fit</span>
        </div>

        <!-- Pill 3: Durable for daily play -->
        <div class="wrts-graphic-pill">
          <div class="wrts-graphic-pill__icon" style="background-color: #f59e0b;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
          <span class="wrts-graphic-pill__text">Durable for daily play</span>
        </div>

        <!-- Pill 4: WRTS branded -->
        <div class="wrts-graphic-pill">
          <div class="wrts-graphic-pill__icon" style="background-color: #ed1b24;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
          <span class="wrts-graphic-pill__text">WRTS branded</span>
        </div>
      </div>
    </div>
  </div>
</div>


</section><div id="shopify-section-template--23473579426031__wrts_cro_comparison" class="shopify-section"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<section
  class="wrts-clovis-home wrts-cro-compare bg-secondary"
  aria-labelledby="wrts-compare-title-template--23473579426031__wrts_cro_comparison"
  style="--padding-block-start: max(20px, calc(var(--spacing-scale) * 48px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 48px));"
>
  <div class="wrts-cro-compare__inner">
    <div class="wrts-cro-compare__intro">
      
      
        <h2 id="wrts-compare-title-template--23473579426031__wrts_cro_comparison">
          Why businesses <span class="wrts-cro-compare__highlight">love us</span>
        </h2>
      
      <p>A quick look at what makes these grip socks easier to choose and reorder.</p>
    </div>
    <div class="wrts-cro-compare__board">
      <div class="wrts-cro-compare__head">
        <span></span><span>WRTS Socks</span><span>Generic</span>
      </div>
      <ul class="wrts-cro-compare__rows">
        <li class="wrts-cro-compare__row" >
  <span class="wrts-cro-compare__label">Front desk grab-&amp;-go</span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--ours">
    <span class="wrts-cro-compare__mobile-label">WRTS Socks</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--yes" aria-hidden="true">✓</span>
    <span>Ready for families at your location</span>
  </span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--generic">
    <span class="wrts-cro-compare__mobile-label">Generic</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--no" aria-hidden="true">×</span>
    <span>Buy elsewhere</span>
  </span>
</li>


<li class="wrts-cro-compare__row" >
  <span class="wrts-cro-compare__label">No minimum</span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--ours">
    <span class="wrts-cro-compare__mobile-label">WRTS Socks</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--yes" aria-hidden="true">✓</span>
    <span>Order only what you need</span>
  </span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--generic">
    <span class="wrts-cro-compare__mobile-label">Generic</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--no" aria-hidden="true">×</span>
    <span>Minimums may apply</span>
  </span>
</li>


<li class="wrts-cro-compare__row" >
  <span class="wrts-cro-compare__label">Same size system</span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--ours">
    <span class="wrts-cro-compare__mobile-label">WRTS Socks</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--yes" aria-hidden="true">✓</span>
    <span>Familiar WRTS sock sizes</span>
  </span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--generic">
    <span class="wrts-cro-compare__mobile-label">Generic</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--no" aria-hidden="true">×</span>
    <span>Different sizing</span>
  </span>
</li>


<li class="wrts-cro-compare__row" >
  <span class="wrts-cro-compare__label">Parents can buy here</span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--ours">
    <span class="wrts-cro-compare__mobile-label">WRTS Socks</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--yes" aria-hidden="true">✓</span>
    <span>Shop directly online</span>
  </span>
  <span class="wrts-cro-compare__value wrts-cro-compare__value--generic">
    <span class="wrts-cro-compare__mobile-label">Generic</span>
    <span class="wrts-cro-compare__mark wrts-cro-compare__mark--no" aria-hidden="true">×</span>
    <span>No direct WRTS shop</span>
  </span>
</li>



      </ul>
      <p class="wrts-cro-compare__footnote">Generic products and seller policies vary. Check each product page for current sizes, availability, and delivery options.</p>
    </div>
  </div>
</section>

<style data-shopify>
  /* Texture via shared .bg-secondary (same contain/bottom layout as blue .bg-primary) */
  .wrts-cro-compare {
    color: #fff;
    overflow: hidden;
    padding-block: var(--padding-block-start, var(--wrts-home-space, 48px))
      var(--padding-block-end, var(--wrts-home-space, 48px));
  }
  .wrts-cro-compare__inner {
    max-width: 1440px;
    margin: auto;
    padding-inline: var(--wrts-home-gutter, var(--page-margin, clamp(24px, 4vw, 60px)));
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .wrts-cro-compare__intro { text-align: center; margin: 0; }
  .wrts-cro-compare__highlight { color: var(--wrts-yellow); }
  .wrts-cro-compare__eyebrow { margin: 0 0 8px; color: var(--wrts-yellow); font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; font-size: 20px; text-transform: uppercase; }
  .wrts-cro-compare h2 { margin: 0 auto 8px; max-width: none; color: #fff; font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; font-size: 40px; font-weight: 400; line-height: 1.4; text-transform: uppercase; }
  .wrts-cro-compare__intro > p:not(.wrts-cro-compare__eyebrow) { max-width: 60ch; margin: 0 auto; color: #fff; font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: 18px; line-height: 1.67; }
  .wrts-cro-compare__board { position: relative; background: #fff; color: var(--wrts-blue); border: 4px solid #fff; overflow: hidden; }
  .wrts-cro-compare__head { display: none; }
  /* Consistent card structure at every viewport size. */
  .wrts-cro-compare__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid rgba(0, 112, 184, .18); align-items: stretch; }
  .wrts-cro-compare__label { grid-column: 1 / -1; padding: 12px 14px; background: var(--wrts-blue); color: #fff; font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; font-size: 17px; line-height: 1.2; text-transform: uppercase; text-align: center; }
  @media (min-width: 990px) {
    .wrts-cro-compare__head { display: grid !important; grid-template-columns: minmax(190px, .75fr) repeat(2, minmax(0, 1fr)); }
    .wrts-cro-compare__head > span { padding: 14px 18px; }
    .wrts-cro-compare__head > span:first-child { background: var(--wrts-blue); }
    .wrts-cro-compare__row { grid-template-columns: minmax(190px, .75fr) repeat(2, minmax(0, 1fr)); }
    .wrts-cro-compare__label { grid-column: auto; padding: 16px 18px; text-align: left; background: transparent; color: var(--wrts-blue); }
  }
  @media (min-width: 601px) and (max-width: 989px) {
    .wrts-cro-compare__head { display: none !important; }
    .wrts-cro-compare__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wrts-cro-compare__label { grid-column: 1 / -1; padding: 12px 14px; text-align: center; background: var(--wrts-blue); color: #fff; }
    .wrts-cro-compare__mobile-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  }
  .wrts-cro-compare__value { grid-template-columns: auto minmax(0, 1fr); gap: 12px; border-left: 0; padding: 14px 16px; text-align: left; font-size: 17px; line-height: 1.45; }
  .wrts-cro-compare__value + .wrts-cro-compare__value { border-left: 1px solid rgba(0, 112, 184, .2); }
  .wrts-cro-compare__mark { width: 34px; height: 34px; font-size: 24px; flex-basis: 34px; }
  .wrts-cro-compare__rows { display: grid; gap: 8px; }
  .wrts-cro-compare__row + .wrts-cro-compare__row { border-top: 1px solid rgba(0, 112, 184, .18); }
  .wrts-cro-compare__label { font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; }
  .wrts-cro-compare__head { background: var(--wrts-blue); color: #fff; font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; font-size: 20px; text-align: center; text-transform: uppercase; }
  .wrts-cro-compare__head > span { padding: 17px 13px; }
  .wrts-cro-compare__head > span:nth-child(2) { color: var(--wrts-yellow); }
  .wrts-cro-compare__rows { margin: 0; padding: 0; list-style: none; }
  .wrts-cro-compare__row + .wrts-cro-compare__row { border-top: 2px solid rgba(0, 112, 184, .2); }
  .wrts-cro-compare__label, .wrts-cro-compare__value { align-self: center; font-weight: 800; }
  .wrts-cro-compare__value { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .wrts-cro-compare__value--ours { background: #e4f3fb; font-weight: 700; }
  .wrts-cro-compare__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-family: 'Hogfish', var(--wrts-display), var(--font-heading--family), sans-serif; font-size: 24px; line-height: 1; flex: 0 0 34px; }
  .wrts-cro-compare__mark--yes { background: var(--wrts-yellow); color: var(--wrts-blue); }
  .wrts-cro-compare__mark--no { background: #fff; color: var(--wrts-red, #ed1b24); border: 2px solid currentColor; }
  .wrts-cro-compare__footnote { margin: 0; padding: 16px 20px; border-top: 2px solid rgba(0, 112, 184, .2); font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: 13px; line-height: 1.45; }
  .wrts-cro-compare__mobile-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  @media (max-width: 900px) {
    .wrts-cro-compare__inner { grid-template-columns: 1fr; }
  }
  @media (max-width: 600px) {
    .wrts-cro-compare__inner { padding-inline: clamp(16px, 4vw, 24px); gap: 16px; }
    .wrts-cro-compare h2 { font-size: 20px; line-height: 1.5; }
    .wrts-cro-compare__intro > p:not(.wrts-cro-compare__eyebrow) { font-size: 14px; line-height: 1.35; }
    .wrts-cro-compare__board { background: #fff; border: 3px solid #fff; overflow: hidden; }
    .wrts-cro-compare__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wrts-cro-compare__label { grid-column: 1 / -1; padding: 7px 10px; font-size: 13px; text-align: center; }
    .wrts-cro-compare__value { gap: 6px; padding: 7px 8px; font-size: 12px; line-height: 1.2; }
    .wrts-cro-compare__mark { width: 20px; height: 20px; font-size: 15px; flex-basis: 20px; }
    .wrts-cro-compare__rows { display: grid; gap: 8px; }
    .wrts-cro-compare__footnote { margin: 0; background: #fff; border-top: 2px solid rgba(0, 112, 184, .2); padding: 12px 14px; font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: 11px; }
  }
</style>


</div><section id="shopify-section-template--23473579426031__wrts_size_guide_banner" class="shopify-section wrts-size-guide-banner-wrapper"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  .wrts-size-banner-template--23473579426031__wrts_size_guide_banner {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding: var(--wrts-home-space, 48px) 0;
    overflow: hidden;
  }

  .wrts-size-banner__container {
    /* Match .wrts-header-desktop__inner (1536px + clamp gutter) */
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2.5vw, 40px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: center;
  }

  /* Left Side: Clean Content Without Whiskers */
  .wrts-size-banner__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .wrts-size-banner__heading {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    color: #0070b8;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .wrts-size-banner__subheading {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.45;
    color: #0070b8;
    opacity: 0.95;
    margin: 0 0 24px 0;
    max-width: 440px;
  }

  .wrts-size-banner__btn-row {
    display: flex;
    justify-content: flex-start;
    padding: 0;
  }

  .wrts-size-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 9999px;
    background-color: #fceb1f;
    color: #0070b8;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .wrts-size-banner__btn:hover {
    background-color: var(--brand-blue, #0070b8) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
  }

  /* Right Side: 7 Socks Lineup with Badges */
  .wrts-size-banner__graphic {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 4 columns: row 1 has 4 socks, row 2 has 3 socks aligned under cols 1-3 */
  .wrts-size-banner__lineup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    align-items: end;
    gap: clamp(14px, 2vw, 24px);
    width: 100%;
    max-width: 720px;
  }

  .wrts-size-banner__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
    max-width: 140px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  a.wrts-size-banner__item:focus-visible {
    outline: 3px solid var(--brand-yellow, #fceb1f);
    outline-offset: 4px;
    border-radius: 8px;
  }

  .wrts-size-banner__sock-wrap {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .wrts-size-banner__sock-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
  }

  .wrts-size-banner__item:hover .wrts-size-banner__sock-img {
    transform: translateY(-4px);
  }

  .wrts-size-banner__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 96px;
    padding: 4px 6px;
    border-radius: 9999px;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(10px, 0.9vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
  }

  .wrts-size-banner__image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wrts-size-banner__picture {
    width: 100%;
    display: block;
  }

  .wrts-size-banner__responsive-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .wrts-size-banner__composite {
    width: 100%;
    height: auto;
    display: block;
    max-width: 780px;
  }

  @media screen and (max-width: 900px) {
    .wrts-size-banner__container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 28px;
    }

    .wrts-size-banner__content {
      align-items: center;
      text-align: center;
    }

    .wrts-size-banner__subheading {
      margin-left: auto;
      margin-right: auto;
    }

    .wrts-size-banner__btn-row {
      justify-content: center;
    }

    .wrts-size-banner__lineup {
      gap: 12px;
    }

    .wrts-size-banner__item {
      max-width: 110px;
    }
  }
</style>

<div class="wrts-size-banner-template--23473579426031__wrts_size_guide_banner" id="wrts-size-guide-banner">
  <div class="wrts-size-banner__container">
    <!-- Left Column: Heading, Subheading, Button -->
    <div class="wrts-size-banner__content">
      <h2 class="wrts-size-banner__heading">
        Every size has its color.
      </h2><div class="wrts-size-banner__subheading">
          <p>Seven sizes. Seven colors.<br/>Easy to identify at a glance.</p>
        </div><div class="wrts-size-banner__btn-row">
          <a
            href="/pages/size-guide"
            class="wrts-size-banner__btn"
            id="wrts-size-guide-link"
          >
            VIEW SIZE GUIDE
          </a>
        </div></div>

    <!-- Right Column: 7 Sock lineup with badges -->
    <div class="wrts-size-banner__graphic"><div class="wrts-size-banner__lineup"><a href="/products/wrts-red-socks-xxxs" class="wrts-size-banner__item" aria-label="Shop XXXS Red Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_socks_red_XXXS.png?v=1791206797"
                alt="XXXS Red Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #ed1b24; color: #ffffff;">XXXS</span>
          </a>

          <a href="/products/wrts-green-socks-xxs" class="wrts-size-banner__item" aria-label="Shop XXS Green Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_Grip_Socks_Green_XXS.png?v=1791207226"
                alt="XXS Green Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #00b050; color: #ffffff;">XXS</span>
          </a>

          <a href="/products/wrts-black-socks-xs" class="wrts-size-banner__item" aria-label="Shop XS Black Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_Grip_Socks_XS_Black.png?v=1791207165"
                alt="XS Black Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #111827; color: #ffffff;">XS</span>
          </a>

          <a href="/products/wrts-gray-socks-s" class="wrts-size-banner__item" aria-label="Shop S White Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_grip_socks_white_S.png?v=1791207024"
                alt="S White Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #9ca3af; color: #ffffff;">S</span>
          </a>

          <a href="/products/wrts-yellow-socks-adult-s" class="wrts-size-banner__item" aria-label="Shop Adult S Yellow Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_Grip_Socks_Adult_S.png?v=1791206986"
                alt="Adult S Yellow Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #fceb1f; color: #0070b8;">Adult S</span>
          </a>

          <a href="/products/wrts-blue-socks-adult-l" class="wrts-size-banner__item" aria-label="Shop Adult L Blue Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_Socks_Adult_L_Blue.png?v=1791206945"
                alt="Adult L Blue Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #0070b8; color: #ffffff;">Adult L</span>
          </a>

          <a href="/products/wrts-purple-socks-adult-xxl" class="wrts-size-banner__item" aria-label="Shop Adult XXL Purple Grip Socks">
            <div class="wrts-size-banner__sock-wrap">
              <img
                src="https://cdn.shopify.com/s/files/1/0839/7894/4751/files/WRTS_Socks_Adult_XXL.png?v=1791206904"
                alt="Adult XXL Purple Grip Socks"
                class="wrts-size-banner__sock-img"
                loading="lazy"
                width="264"
                height="264"
              >
            </div>
            <span class="wrts-size-banner__badge" style="background-color: #7c3aed; color: #ffffff;">Adult XXL</span>
          </a>
        </div></div>
  </div>

</div>

<script>
  (function() {
    // If /pages/size-chart 404s because the merchant hasn't published the handle yet, check availability or fallback
    var btn = document.getElementById('wrts-size-guide-link');
    if (btn) {
      btn.addEventListener('click', function(e) {
        var href = btn.getAttribute('href');
        if (!href || href === '#' || href === '') {
          e.preventDefault();
          window.location.href = '/pages/size-guide';
        }
      });
    }
  })();
</script>


</section><section id="shopify-section-template--23473579426031__wrts_clovis_franchise" class="shopify-section wrts-clovis-franchise-section"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<div class="wrts-clovis-home wrts-clovis-home--franchise" id="wrts-clovis-franchise">
  <div
    class="wrts-clovis-home__franchise bg-primary"
    style="--padding-block-start: max(20px, calc(var(--spacing-scale) * 48px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 48px));"
  >
    











  <div class=" spacing-style text-block text-block--ATGZiTUVwY2NaTHJsV__heading h2    text-block--align-center  "  style="    --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px;              --color: #ffffff;      --color-rgb: 255 255 255;        --width: 100%;    --max-width: var(--max-width--body-normal);          --text-align: center;          ">
    <h2>Bring WRTS socks to <strong>your location</strong></h2>
  </div>


















  <rte-formatter class=" spacing-style text-block text-block--AVjlIa052RkNhQ3dKW__paragraph paragraph    text-block--align-center rte   "  style="    --padding-block-start: 0px; --padding-block-end:16px; --padding-inline-start:0px; --padding-inline-end:0px;              --color: #ffffff;      --color-rgb: 255 255 255;        --width: 100%;    --max-width: var(--max-width--body-normal);          --text-align: center;          ">
    <p>Make grab-and-go easy at your front desk—no minimum order, the same familiar WRTS size system, and a simple way for parents to shop online.</p>
  </rte-formatter>















<a
  
    href="/collections/all"
  
  class="
    size-style
    button
    button--AcTg3SnROTmkyMVVFW__cta
  "
  style="--size-style-width: fit-content;--size-style-height: ;--size-style-width-mobile: fit-content; --size-style-width-mobile-min: fit-content;"
>
  Shop socks
</a>




  </div>
</div>

<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  /* Texture via shared .bg-primary (paired with green .bg-secondary) */
  .wrts-clovis-home__franchise {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Block padding from Horizon spacing-style; gutters stay page-margin */
    padding-block: var(--padding-block-start, var(--wrts-home-space, 48px))
      var(--padding-block-end, var(--wrts-home-space, 48px));
    padding-inline: var(--page-margin);
    color: #fff;
    text-align: center;
  }
  .wrts-clovis-home__franchise .text-block,
  .wrts-clovis-home__franchise .group-block {
    width: 100%;
    max-width: 58ch;
  }
  /* Match FAQ / newsletter / products section title + body type */
  .wrts-clovis-home__franchise h1,
  .wrts-clovis-home__franchise h2,
  .wrts-clovis-home__franchise h3 {
    margin: 0 0 14px;
    color: #fff;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: var(--wrts-type-h2, var(--font-h2--size));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .wrts-clovis-home__franchise .text-block.h2 {
    --font-h2--family: 'Hogfish', sans-serif;
    font-family: 'Hogfish', sans-serif;
    font-weight: 700;
    font-size: var(--wrts-type-h2, var(--font-h2--size));
  }
  .wrts-clovis-home__franchise .text-block.h2 > * {
    font-family: 'Hogfish', sans-serif;
  }
  .wrts-clovis-home__franchise h2 strong,
  .wrts-clovis-home__franchise h2 em,
  .wrts-clovis-home__franchise .text-block strong,
  .wrts-clovis-home__franchise .text-block em,
  .wrts-clovis-home__franchise .highlight-yellow {
    font-style: normal;
    font-weight: inherit;
    color: var(--brand-yellow, #fceb1f);
  }
  .wrts-clovis-home__franchise p {
    margin: 0 auto;
    color: #fff;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: calc(var(--wrts-type-body, var(--font-paragraph--size)) * 0.875);
    line-height: 1.45;
    max-width: 680px;
    text-wrap: pretty;
    opacity: 0.95;
  }
  .wrts-clovis-home__franchise .text-block.paragraph {
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: calc(var(--wrts-type-body, var(--font-paragraph--size)) * 0.875);
  }
  /* Primary/secondary buttons: snippets/wrts-global-styles.liquid (Horizon .button) */
  .wrts-clovis-home__franchise .button:focus-visible,
  .wrts-clovis-home__franchise a.button:focus-visible,
  .wrts-clovis-home__franchise .button-secondary:focus-visible {
    outline: 3px solid var(--brand-yellow, #fceb1f);
    outline-offset: 3px;
  }
  .wrts-clovis-home__franchise .text-block + .text-block {
    margin-top: 0;
  }

  @media screen and (max-width: 749px) {
    .wrts-clovis-home__franchise { padding-inline: 24px; }
  }
</style>


</section><section id="shopify-section-template--23473579426031__wrts_home_faq" class="shopify-section"><div
  id="faqs"
  class="wrts-home-faq bg-secondary"
  style="--padding-block-start: max(20px, calc(var(--spacing-scale) * 48px));--padding-block-end: max(20px, calc(var(--spacing-scale) * 48px));"
>
  <div class="wrts-home-faq__inner">
    <div class="wrts-home-faq__intro">
      










<div
  class="
    group-block
    group-block--height-fit
    group-block--width-fill
    border-style
    spacing-style
    size-style
    
    
  "
  style="
    
--border-width: 1px; --border-style: none; --border-color:
rgb(var(--color-border-rgb) / 1.0); --border-radius: 0px; 

    --padding-block-start: 0px;--padding-block-end: 0px;--padding-inline-start: 0px;--padding-inline-end: 0px;
    --size-style-width: 100%;--size-style-height: fit;--size-style-width-mobile: 100%; --size-style-width-mobile-min: 5rem;
    
  "
  
  data-testid="group-block"
><div class="group-block__media-wrapper">
    






    
  </div>

  <div
    class="
      group-block-content
      
      layout-panel-flex
      layout-panel-flex--column
       mobile-column
    "
    style="--flex-direction: column; --flex-wrap: nowrap; --flex-wrap-mobile: wrap;

--gap: 12px;

--horizontal-alignment: center; --vertical-alignment: center;
--vertical-alignment-mobile: center;
"
  >
  











  <div class=" spacing-style text-block text-block--AK2orMndHQklqKy8re__heading h2    text-block--align-center  "  style="    --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px;              --color: #ffffff;      --color-rgb: 255 255 255;        --width: 100%;    --max-width: var(--max-width--body-normal);          --text-align: center;          ">
    <h2>Frequently Asked <strong>Questions</strong></h2>
  </div>


















  <rte-formatter class=" spacing-style text-block text-block--AUnIrc2NtbE5YUnF4b__subtitle paragraph    text-block--align-center rte   "  style="    --padding-block-start: 0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px;              --color: #ffffff;      --color-rgb: 255 255 255;        --width: 100%;    --max-width: var(--max-width--body-normal);          --text-align: center;          ">
    <p>Quick answers to help you find what you need.</p>
  </rte-formatter>







</div>
</div>






    </div>
    <div class="wrts-home-faq__items">
      
  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>Why choose WRTS grip socks for play?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>WRTS-branded grip socks have non-slip grip soles for play. Choose the right fit and follow your play location’s rules; grip socks do not replace supervision.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>How do I choose the right size?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>Start with our <a href="/pages/size-guide">size guide</a> and compare it with the size shown on the product before ordering. If you are unsure which size to choose, <a href="/pages/contact">contact us</a> for help.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>What sizes and colors are available?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>Our homepage shows seven sizes in seven colors to help you identify each size. See the <a href="/pages/size-guide">size guide</a> for the range, and check the product listing for the size, color and current availability before ordering.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>How should the socks fit?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>Choose a size that feels comfortable without bunching or feeling too tight. Check the fit before play, and use the <a href="/pages/size-guide">size guide</a> rather than choosing by color alone. <a href="/pages/contact">Contact us</a> if you need help deciding.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>How do I care for my grip socks?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>Follow the care instructions supplied with your socks. If you cannot find them, <a href="/pages/contact">contact us</a> before choosing a wash or drying method.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>Can I use these at my WRTS location?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>These are WRTS-branded grip socks for families and locations. Check with the WRTS location you plan to visit about its current sock and play requirements before your visit.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>Can I order for a group or WRTS franchise?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>For group or franchise orders, <a href="/pages/contact">get in touch</a> with the sizes and quantities you need. We can help you discuss your order before you buy.</p></div>
    
  </details>




  <details class="wrts-home-faq__row"  >
    <summary class="wrts-home-faq__question">
      <span>What shipping options and fulfillment timing apply?</span>
      <span class="wrts-home-faq__icon" aria-hidden="true"></span>
    </summary>
    
      <div class="wrts-home-faq__answer rte"><p>Enter your delivery address at checkout to see the shipping options available for your order. For fulfillment timing, international delivery questions or a time-sensitive order, <a href="/pages/contact">contact us</a> before purchasing.</p></div>
    
  </details>




    </div>
  </div>
</div>

<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  /* Texture via shared .bg-secondary (same contain/bottom layout as blue .bg-primary) */
  .wrts-home-faq {
    color: #fff;
    padding-block: var(--padding-block-start, 48px) var(--padding-block-end, 48px);
  }
  .wrts-home-faq__inner { width: 100%; max-width: 960px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; }
  .wrts-home-faq__intro { text-align: center; margin-bottom: 28px; }
  .wrts-home-faq__intro h2 { color: #fff; font-family: 'Hogfish', var(--font-heading--family), sans-serif; font-weight: 700; font-size: var(--wrts-type-h2, var(--font-h2--size)); text-transform: uppercase; }
  .wrts-home-faq__intro h2 strong,
  .wrts-home-faq__intro h2 em,
  .wrts-home-faq__intro .text-block strong,
  .wrts-home-faq__intro .text-block em,
  .wrts-home-faq__intro .highlight-yellow {
    font-style: normal;
    font-weight: inherit;
    color: var(--brand-yellow, #fceb1f);
  }
  .wrts-home-faq__intro p { color: #fff; font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: calc(var(--wrts-type-body, var(--font-paragraph--size)) * 0.875); }
  .wrts-home-faq__items { display: grid; gap: 10px; }
  .wrts-home-faq__row { min-width: 0; background: #fff; border-radius: 12px; color: var(--brand-blue, #0070b8); }
  .wrts-home-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 16px 20px; list-style: none; cursor: pointer; font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: var(--wrts-type-body, var(--font-paragraph--size)); font-weight: 700; line-height: 1.4; }
  .wrts-home-faq__question > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .wrts-home-faq__question::-webkit-details-marker { display: none; }
  .wrts-home-faq__question::marker { content: ''; }
  .wrts-home-faq__question:focus-visible { outline: 3px solid var(--brand-blue, #0070b8); outline-offset: 3px; border-radius: 12px; }
  .wrts-home-faq__icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
  .wrts-home-faq__icon::before, .wrts-home-faq__icon::after { content: ''; position: absolute; background: currentColor; width: 14px; height: 2px; top: 8px; left: 2px; }
  .wrts-home-faq__icon::after { transform: rotate(90deg); }
  .wrts-home-faq__row[open] .wrts-home-faq__icon::after { display: none; }
  .wrts-home-faq__answer { padding: 0 20px 20px; color: var(--brand-blue, #0070b8); font-family: var(--font-body--family), 'Raleway', sans-serif; font-size: calc(var(--wrts-type-body, var(--font-paragraph--size)) * 0.875); line-height: 1.6; overflow-wrap: anywhere; }
  .wrts-home-faq__answer p { margin: 0 0 12px; font-family: inherit; font-size: inherit; }
  .wrts-home-faq__intro .text-block.h2 {
    --font-h2--family: 'Hogfish', sans-serif;
    font-family: 'Hogfish', sans-serif;
    font-weight: 700;
  }
  .wrts-home-faq__intro .text-block.h2 > * {
    font-family: 'Hogfish', sans-serif;
  }
  .wrts-home-faq__intro .text-block.paragraph { font-family: var(--font-body--family), 'Raleway', sans-serif; }
  .wrts-home-faq__answer p:last-child { margin-bottom: 0; }
  .wrts-home-faq__answer a { color: inherit; text-decoration: underline; }
  .wrts-home-faq__answer a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  @media (max-width: 749px) {
    .wrts-home-faq__intro { margin-bottom: 20px; }
    .wrts-home-faq__question { padding: 14px 12px; gap: 12px; }
    .wrts-home-faq__answer { padding: 0 12px 16px; }
  }
</style>

<script src="/cdn/shop/t/23/assets/wrts-faq.js?v=64812883876875560841791786765" type="module"></script>


</section>

        
        
      </main>

      <footer>
        <!-- BEGIN sections: footer-group -->
<section id="shopify-section-sections--23473579196655__wrts_footer" class="shopify-section shopify-section-group-footer-group wrts-footer-wrapper"><style data-shopify>
  .wrts-clovis-home {
    --wrts-blue: var(--brand-blue, #0070b8);
    --wrts-yellow: var(--brand-yellow, #fceb1f);
    --wrts-green: var(--brand-green, #4faf88);
    /* Hogfish first — theme --font-heading--family is still Grandstander */
    --wrts-display: 'Hogfish', var(--font-heading--family), sans-serif;
    color: #000;
    font-family: var(--font-body--family);
  }
  .wrts-clovis-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    min-height: 54px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--wrts-yellow);
    color: var(--wrts-blue);
    font-family: var(--wrts-display);
    /* Clovis .wrtsbtn / .yellowbtn: 18px Hogfish */
    font-size: var(--wrts-type-btn, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .wrts-clovis-home__button:hover {
      border-color: #fff;
      background: #3289cf;
      color: #fff;
      text-decoration: none;
    }
  }
  .wrts-clovis-home__button:focus-visible {
    border-color: #fff;
    background: #3289cf;
    color: #fff;
  }
  .wrts-clovis-home a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Universal pill-shaped buttons for current & future sections */
  .button,
  .button-secondary,
  .button-custom,
  .wrts-clovis-home__button,
  .wrts-product-card__btn,
  .wrts-collection-card__btn,
  .add-to-cart-button,
  a.button,
  button.button,
  .quick-add__button,
  .btn-pill {
    border-radius: 9999px !important;
  }

  :root {
    --page-width: 1536px !important;
    --normal-page-width: 153.6rem !important;
    --wide-page-width: 153.6rem !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-width-normal,
  body.page-width-wide,
  body.page-width-narrow,
  body.page-width-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  #MainContent,
  .content-for-layout,
  .shopify-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section--page-width,
  .wrts-clovis-container,
  .wrts-cro-container,
  .wrts-sc__container,
  .wrts-sc-hero__container,
  .wrts-clovis-products__container,
  .wrts-collection-grid__container,
  .wrts-fit-guide__container,
  .wrts-clovis-home__container,
  .wrts-newsletter__container,
  .wrts-footer__inner,
  .wrts-graphic-play__container,
  .wrts-size-banner__container,
  .wrts-hero__container {
    max-width: 1536px !important;
    margin-inline: auto !important;
  }
</style>


<style data-shopify>
  @font-face {
    font-family: 'Hogfish';
    src: url('/cdn/shop/t/23/assets/hogfish-webfont.woff2?v=27124259453810069641791786764') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }

  .wrts-footer-sections--23473579196655__wrts_footer {
    --wrts-footer-blue: #0070b8;
    --wrts-footer-yellow: #fceb1f;
    --wrts-footer-red: #ed1b24;
    --wrts-footer-text: #ffffff;
    position: relative;
    width: 100%;
    background-color: var(--wrts-footer-blue);
    color: var(--wrts-footer-text);
    overflow: hidden;
    
      background-image: url('/cdn/shop/t/23/assets/wrts-clovis-blue-texture.png?v=102523808410769297181791786765');
      background-repeat: repeat-x;
      background-position: bottom center;
      background-size: contain;
    
  }

  .wrts-footer__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page-width, 1536px);
    margin: 0 auto;
    padding: 48px var(--page-margin) 40px;
    box-sizing: border-box;
  }

  /* —— Newsletter —— */
  .wrts-footer__newsletter {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px;
  }

  .wrts-footer__heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
  }

  .wrts-footer__heading {
    margin: 0;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(28px, 8vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--wrts-footer-text);
    text-wrap: balance;
  }

  .wrts-footer__heading em,
  .wrts-footer__heading strong {
    font-style: normal;
    font-weight: inherit;
    color: var(--wrts-footer-yellow);
  }

  .wrts-footer__subheading {
    margin: 0 0 20px;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: calc(var(--wrts-type-body, 15px) * 0.875);
    line-height: 1.45;
    color: var(--wrts-footer-text);
    opacity: 0.95;
    text-wrap: pretty;
  }

  .wrts-footer__form {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 10px;
  }

  .wrts-footer__input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .wrts-footer__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 12px 16px;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 1.3;
  }

  .wrts-footer__input::placeholder {
    color: #6b7280;
    opacity: 0.9;
  }

  .wrts-footer__input:focus-visible {
    outline: 3px solid var(--wrts-footer-yellow);
    outline-offset: 2px;
  }

  .wrts-footer__btn {
    flex: 0 0 auto;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 10px;
    background-color: var(--wrts-footer-yellow);
    color: var(--wrts-footer-blue);
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .wrts-footer__btn:hover {
      background-color: var(--color-primary-button-hover-background, #3289cf);
      color: var(--color-primary-button-hover-text, #ffffff);
    }
  }

  .wrts-footer__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }

  .wrts-footer__form-note {
    margin: 8px 0 0;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--wrts-footer-text);
    opacity: 0.85;
  }

  .wrts-footer__form-success {
    margin: 10px 0 0;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--wrts-footer-yellow);
  }

  .wrts-footer__form-error {
    margin: 10px 0 0;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--wrts-footer-yellow);
  }

  /* —— Deco row: slogan + socks —— */
  .wrts-footer__deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 5vw, 40px);
    margin: 8px auto 28px;
    max-width: 520px;
  }

  .wrts-footer__deco-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
  }

  .wrts-footer__doodle {
    width: 28px;
    height: 28px;
  }

  .wrts-footer__doodle--star {
    color: var(--wrts-footer-yellow);
  }

  .wrts-footer__doodle--heart {
    color: var(--wrts-footer-red);
    position: absolute;
    top: -4px;
    right: -2px;
    z-index: 2;
  }

  .wrts-footer__slogan {
    margin: 0;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wrts-footer-text);
    text-align: center;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  .wrts-footer__slogan-rule {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 5px;
    margin: 6px auto 0;
    border: none;
    border-radius: 999px;
    background: var(--wrts-footer-red);
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  .wrts-footer__socks-wrap {
    position: relative;
    flex: 0 0 auto;
  }

  .wrts-footer__socks {
    position: relative;
    width: clamp(110px, 32vw, 160px);
  }

  .wrts-footer__socks-burst {
    position: absolute;
    inset: -8% -10%;
    pointer-events: none;
    color: var(--wrts-footer-yellow);
    z-index: 0;
  }

  .wrts-footer__socks-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  .wrts-footer__logo { display: block; width: min(200px, 100%); margin: 16px auto; color: inherit; }
  .wrts-footer__logo img { display: block; width: 100%; height: auto; }

  /* —— Brand block —— */
  .wrts-footer__brand {
    text-align: center;
    padding-top: 8px;
    margin: 0 auto 28px;
    max-width: 420px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  .wrts-footer__brand-script {
    margin: 22px 0 4px;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    color: var(--wrts-footer-red);
  }

  .wrts-footer__brand-line {
    margin: 0;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wrts-footer-text);
  }

  .wrts-footer__brand-store {
    margin: 2px 0 12px;
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(28px, 8vw, 40px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wrts-footer-yellow);
  }

  .wrts-footer__brand-desc {
    margin: 0 0 20px;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--wrts-footer-text);
    opacity: 0.95;
  }

  /* —— Social —— */
  .wrts-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
  }

  /* Compact icon pills — beat sitewide .button min-width/min-height */
  .wrts-footer__social-link.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 7px;
    font-family: 'Hogfish', var(--button-font-family-primary), sans-serif;
    font-size: inherit;
    text-transform: uppercase;
    text-decoration: none;
  }

  .wrts-footer__social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .wrts-footer__social-link:focus-visible {
    outline: 3px solid var(--wrts-footer-yellow);
    outline-offset: 3px;
  }

  /* —— Static footer navigation —— */
  .wrts-footer__menus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 20px 0 28px;
    text-align: center;
  }

  .wrts-footer__menu-label {
    margin: 0 0 6px;
    color: var(--wrts-footer-text);
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Static menu label is not a native details/summary disclosure. */
  .wrts-footer__menu-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--wrts-footer-text);
    -webkit-user-select: none;
    user-select: none;
  }

  .wrts-footer__menu-summary:focus-visible {
    outline: 3px solid var(--wrts-footer-yellow);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrts-footer__menu-chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--wrts-footer-text);
    transition: transform 0.2s ease;
  }

  .wrts-footer__menu[open] .wrts-footer__menu-chevron {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .wrts-footer__menu-panel {
    padding: 0 0 8px;
  }

  .wrts-footer__menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wrts-footer__menu-list li + li {
    margin-top: 4px;
  }

  .wrts-footer__menu-list a {
    color: var(--wrts-footer-text);
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    opacity: 0.9;
  }

  .wrts-footer__menu-list a:hover {
    text-decoration: underline;
    opacity: 1;
  }

  .wrts-footer__menu-list a:focus-visible {
    outline: 2px solid var(--wrts-footer-yellow);
    outline-offset: 3px;
  } 

  /* —— Bottom —— */
  .wrts-footer__bottom {
    text-align: center;
  }

  .wrts-footer__payments {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }

  .wrts-footer__payments li {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 3px solid var(--wrts-footer-text);
    border-radius: 6px;
    padding: 0;
    min-height: 0;
  }

  .wrts-footer__payments li[hidden] { display: none; }
  .wrts-footer__payment-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 3px;
    font-family: var(--font-body--family), sans-serif;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
  }

  .wrts-footer__payments .icon {
    width: auto;
    height: 20px;
    display: block;
  }

  .wrts-footer__copyright {
    margin: 0 0 18px;
    font-family: var(--font-body--family), 'Raleway', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: var(--wrts-footer-text);
    opacity: 0.9;
  }

  .wrts-footer__copyright a {
    color: inherit;
    text-decoration: none;
  }

  .wrts-footer__closing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
  }

  .wrts-footer__closing-text {
    font-family: 'Hogfish', var(--font-heading--family), sans-serif;
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wrts-footer-text);
  }

  /* —— Desktop —— */
  @media screen and (min-width: 750px) {
    .wrts-footer__newsletter {
      margin-bottom: 36px;
    }

    .wrts-footer__heading {
      font-size: clamp(36px, 3.5vw, 48px);
    }

    .wrts-footer__form {
      max-width: 560px;
    }

    .wrts-footer__input {
      font-size: 16px;
      padding: 14px 18px;
    }

    .wrts-footer__btn {
      font-size: 17px;
      padding: 14px 28px;
    }

    .wrts-footer__deco {
      margin-bottom: 36px;
      max-width: 640px;
    }

    .wrts-footer__brand {
      margin-bottom: 36px;
    }

    /* Static menu groups remain stacked on wider screens. */
    .wrts-footer__menus {
      gap: 6px;
      padding-top: 16px;
      margin-top: 8px;
    }

    .wrts-footer__menu {
      width: 100%;
      max-width: 360px;
      border-bottom: none;
    }

    .wrts-footer__menu-list li + li {
      margin-top: 4px;
    }
  }
</style>

<div class="wrts-footer-sections--23473579196655__wrts_footer" id="wrts-footer">
  <div class="wrts-footer__inner"><div class="wrts-footer__newsletter"><div class="wrts-footer__heading-row">
          <p class="wrts-footer__heading"><em>Be the First</em> to Know!</p>
        </div><p class="wrts-footer__subheading">Sign up for product updates, new designs, exclusive offers, and everything WRTS socks.</p><form method="post" action="/contact#WrtsFooterNewsletter" id="WrtsFooterNewsletter" accept-charset="UTF-8" class="wrts-footer__form"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="contact[tags]" value="newsletter">
        <div class="wrts-footer__input-group">
          <input
            type="email"
            name="contact[email]"
            class="wrts-footer__input"
            value=""
            placeholder="Enter your email address"
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            required
            aria-label="Email address"
          >
          <button type="submit" class="wrts-footer__btn" name="commit">
            SUBSCRIBE
          </button>
        </div></form><p class="wrts-footer__form-note">No spam. Just the good stuff.</p></div><div class="wrts-footer__brand"><a href="/" class="wrts-footer__logo"><img src="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=600" alt="Christopher&#39;s Rockin&#39; Store" srcset="/cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=200 200w, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=300 300w, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=400 400w, /cdn/shop/files/Christopher_s_Rockin_Store_Logo_84769033-c0d6-4715-8b7f-38e26b16c804.png?v=1791285229&amp;width=600 600w" width="600" height="196" loading="lazy">
</a><p class="wrts-footer__brand-desc">Official WRTS-branded socks for gyms, franchises, and families.</p><ul class="wrts-footer__social"><li>
                <a
                  class="button wrts-footer__social-link"
                  href="https://www.facebook.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Facebook"
                >
                  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 18v-7h2.4l.4-3h-2.8V6.2c0-.9.3-1.5 1.5-1.5h1.5V2.1c-.3 0-1.2-.1-2.2-.1C10.1 2 8.5 3.4 8.5 6v2H6v3h2.5v7z"/></svg>
                </a>
              </li><li>
                <a
                  class="button wrts-footer__social-link"
                  href="https://www.instagram.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Instagram"
                >
                  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="14" height="14" rx="4" fill="none" stroke="currentColor" stroke-width="2.2"/>
                      <circle cx="10" cy="10" r="3.4" fill="none" stroke="currentColor" stroke-width="2.2"/>
                      <circle cx="14.4" cy="5.6" r="1.2"/></svg>
                </a>
              </li><li>
                <a
                  class="button wrts-footer__social-link"
                  href="https://www.tiktok.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Tiktok"
                >
                  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">


<path d="M10.511 1.705h2.74s-.157 3.51 3.795 3.768v2.711s-2.114.129-3.796-1.158l.028 5.606A5.073 5.073 0 1 1 8.213 7.56h.708v2.785a2.298 2.298 0 1 0 1.618 2.205L10.51 1.705Z" /></svg>
                </a>
              </li></ul></div><nav class="wrts-footer__menus" aria-label="Footer"><div class="wrts-footer__menu">
          <p class="wrts-footer__menu-label">Shop</p>
          <div class="wrts-footer__menu-panel">
            <ul class="wrts-footer__menu-list"></ul>
          </div>
        </div><div class="wrts-footer__menu">
          <p class="wrts-footer__menu-label">About</p>
          <div class="wrts-footer__menu-panel">
            <ul class="wrts-footer__menu-list"></ul>
          </div>
        </div><div class="wrts-footer__menu">
          <p class="wrts-footer__menu-label">Support</p>
          <div class="wrts-footer__menu-panel">
            <ul class="wrts-footer__menu-list"></ul>
          </div>
        </div></nav><div class="wrts-footer__bottom"><span class="visually-hidden">Payment methods</span>
        <ul class="wrts-footer__payments" role="list" data-payment-overflow><li><svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" fill="none" aria-labelledby="pi-american_express"><title id="pi-american_express">American Express</title><rect x=".5" y=".5" width="37" height="23" rx="2.5" stroke="#000" stroke-opacity=".07" fill="none"/><path d="M35 0H3C1.3 0 0 1.3 0 3V21C0 22.7 1.4 24 3 24H35C36.7 24 38 22.7 38 21V3C38 1.3 36.6 0 35 0Z" fill="#0071CE" style="fill:#0071CE;fill:color(display-p3 0.0000 0.4431 0.8078);fill-opacity:1;"/><path d="M3 0.5H35C36.3348 0.5 37.5 1.58692 37.5 3V21C37.5 22.4239 36.4239 23.5 35 23.5H3C1.66524 23.5 0.5 22.4131 0.5 21V3C0.5 1.57614 1.57614 0.5 3 0.5Z" stroke="black" stroke-opacity="0.07" style="stroke:black;stroke-opacity:0.07;"/><path d="M25.8662 6.33203V3H31L31.8662 5.5332L32.7334 3H37V14.2002H36.7998L34.8672 16.2656L36.7998 18.3594H37V21.2666H33.5996L31.9336 19.3994L30.2002 21.2666H19.4668V12.666H16L20.2666 3H24.4004L25.8662 6.33203ZM20.5996 20.2656H27V18.5322H22.666V17.3994H26.8662V15.666H22.666V14.5322H27V12.7988H20.5996V20.2656ZM30.5332 16.5322L27 20.2656H29.5996L31.8662 17.8662L34.0664 20.2656H36.7324L33.1992 16.4658L36.7324 12.7988H34.1328L31.8662 15.1992L29.7324 12.7988H27L30.5332 16.5322ZM17.666 11.7324H19.9326L20.5332 10.1992H23.999L24.666 11.7324H26.999L23.666 4.19922H20.999L17.666 11.7324ZM33.5996 4.19922L31.9326 8.86621L30.1992 4.19922H27V11.666H29.0664V6.39941L31 11.666H32.7998L34.7324 6.39941V11.666H36.7324V4.13281L33.5996 4.19922ZM23.2656 8.46582H21.2656L22.2656 5.99902L23.2656 8.46582Z" fill="white" style="fill:white;fill-opacity:1;"/></svg>
</li><li><svg class="icon icon--full-color" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" x="0" y="0" width="38" height="24" viewBox="0 0 165.521 105.965" xml:space="preserve" aria-labelledby="pi-apple_pay"><title id="pi-apple_pay">Apple Pay</title><path fill="#000" d="M150.698 0H14.823c-.566 0-1.133 0-1.698.003-.477.004-.953.009-1.43.022-1.039.028-2.087.09-3.113.274a10.51 10.51 0 0 0-2.958.975 9.932 9.932 0 0 0-4.35 4.35 10.463 10.463 0 0 0-.975 2.96C.113 9.611.052 10.658.024 11.696a70.22 70.22 0 0 0-.022 1.43C0 13.69 0 14.256 0 14.823v76.318c0 .567 0 1.132.002 1.699.003.476.009.953.022 1.43.028 1.036.09 2.084.275 3.11a10.46 10.46 0 0 0 .974 2.96 9.897 9.897 0 0 0 1.83 2.52 9.874 9.874 0 0 0 2.52 1.83c.947.483 1.917.79 2.96.977 1.025.183 2.073.245 3.112.273.477.011.953.017 1.43.02.565.004 1.132.004 1.698.004h135.875c.565 0 1.132 0 1.697-.004.476-.002.952-.009 1.431-.02 1.037-.028 2.085-.09 3.113-.273a10.478 10.478 0 0 0 2.958-.977 9.955 9.955 0 0 0 4.35-4.35c.483-.947.789-1.917.974-2.96.186-1.026.246-2.074.274-3.11.013-.477.02-.954.022-1.43.004-.567.004-1.132.004-1.699V14.824c0-.567 0-1.133-.004-1.699a63.067 63.067 0 0 0-.022-1.429c-.028-1.038-.088-2.085-.274-3.112a10.4 10.4 0 0 0-.974-2.96 9.94 9.94 0 0 0-4.35-4.35A10.52 10.52 0 0 0 156.939.3c-1.028-.185-2.076-.246-3.113-.274a71.417 71.417 0 0 0-1.431-.022C151.83 0 151.263 0 150.698 0z" /><path fill="#FFF" d="M150.698 3.532l1.672.003c.452.003.905.008 1.36.02.793.022 1.719.065 2.583.22.75.135 1.38.34 1.984.648a6.392 6.392 0 0 1 2.804 2.807c.306.6.51 1.226.645 1.983.154.854.197 1.783.218 2.58.013.45.019.9.02 1.36.005.557.005 1.113.005 1.671v76.318c0 .558 0 1.114-.004 1.682-.002.45-.008.9-.02 1.35-.022.796-.065 1.725-.221 2.589a6.855 6.855 0 0 1-.645 1.975 6.397 6.397 0 0 1-2.808 2.807c-.6.306-1.228.511-1.971.645-.881.157-1.847.2-2.574.22-.457.01-.912.017-1.379.019-.555.004-1.113.004-1.669.004H14.801c-.55 0-1.1 0-1.66-.004a74.993 74.993 0 0 1-1.35-.018c-.744-.02-1.71-.064-2.584-.22a6.938 6.938 0 0 1-1.986-.65 6.337 6.337 0 0 1-1.622-1.18 6.355 6.355 0 0 1-1.178-1.623 6.935 6.935 0 0 1-.646-1.985c-.156-.863-.2-1.788-.22-2.578a66.088 66.088 0 0 1-.02-1.355l-.003-1.327V14.474l.002-1.325a66.7 66.7 0 0 1 .02-1.357c.022-.792.065-1.717.222-2.587a6.924 6.924 0 0 1 .646-1.981c.304-.598.7-1.144 1.18-1.623a6.386 6.386 0 0 1 1.624-1.18 6.96 6.96 0 0 1 1.98-.646c.865-.155 1.792-.198 2.586-.22.452-.012.905-.017 1.354-.02l1.677-.003h135.875" /><g><g><path fill="#000" d="M43.508 35.77c1.404-1.755 2.356-4.112 2.105-6.52-2.054.102-4.56 1.355-6.012 3.112-1.303 1.504-2.456 3.959-2.156 6.266 2.306.2 4.61-1.152 6.063-2.858" /><path fill="#000" d="M45.587 39.079c-3.35-.2-6.196 1.9-7.795 1.9-1.6 0-4.049-1.8-6.698-1.751-3.447.05-6.645 2-8.395 5.1-3.598 6.2-.95 15.4 2.55 20.45 1.699 2.5 3.747 5.25 6.445 5.151 2.55-.1 3.549-1.65 6.647-1.65 3.097 0 3.997 1.65 6.696 1.6 2.798-.05 4.548-2.5 6.247-5 1.95-2.85 2.747-5.6 2.797-5.75-.05-.05-5.396-2.101-5.446-8.251-.05-5.15 4.198-7.6 4.398-7.751-2.399-3.548-6.147-3.948-7.447-4.048" /></g><g><path fill="#000" d="M78.973 32.11c7.278 0 12.347 5.017 12.347 12.321 0 7.33-5.173 12.373-12.529 12.373h-8.058V69.62h-5.822V32.11h14.062zm-8.24 19.807h6.68c5.07 0 7.954-2.729 7.954-7.46 0-4.73-2.885-7.434-7.928-7.434h-6.706v14.894z" /><path fill="#000" d="M92.764 61.847c0-4.809 3.665-7.564 10.423-7.98l7.252-.442v-2.08c0-3.04-2.001-4.704-5.562-4.704-2.938 0-5.07 1.507-5.51 3.82h-5.252c.157-4.86 4.731-8.395 10.918-8.395 6.654 0 10.995 3.483 10.995 8.89v18.663h-5.38v-4.497h-.13c-1.534 2.937-4.914 4.782-8.579 4.782-5.406 0-9.175-3.222-9.175-8.057zm17.675-2.417v-2.106l-6.472.416c-3.64.234-5.536 1.585-5.536 3.95 0 2.288 1.975 3.77 5.068 3.77 3.95 0 6.94-2.522 6.94-6.03z" /><path fill="#000" d="M120.975 79.652v-4.496c.364.051 1.247.103 1.715.103 2.573 0 4.029-1.09 4.913-3.899l.52-1.663-9.852-27.293h6.082l6.863 22.146h.13l6.862-22.146h5.927l-10.216 28.67c-2.34 6.577-5.017 8.735-10.683 8.735-.442 0-1.872-.052-2.261-.157z" /></g></g></svg>
</li><li><svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-diners_club"><title id="pi-diners_club">Diners Club</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path d="M12 12v3.7c0 .3-.2.3-.5.2-1.9-.8-3-3.3-2.3-5.4.4-1.1 1.2-2 2.3-2.4.4-.2.5-.1.5.2V12zm2 0V8.3c0-.3 0-.3.3-.2 2.1.8 3.2 3.3 2.4 5.4-.4 1.1-1.2 2-2.3 2.4-.4.2-.4.1-.4-.2V12zm7.2-7H13c3.8 0 6.8 3.1 6.8 7s-3 7-6.8 7h8.2c3.8 0 6.8-3.1 6.8-7s-3-7-6.8-7z" fill="#3086C8"/></svg></li><li><svg class="icon icon--full-color" viewBox="0 0 38 24" width="38" height="24" role="img" aria-labelledby="pi-discover" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="pi-discover">Discover</title><path fill="#000" opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#fff"/><path d="M3.57 7.16H2v5.5h1.57c.83 0 1.43-.2 1.96-.63.63-.52 1-1.3 1-2.11-.01-1.63-1.22-2.76-2.96-2.76zm1.26 4.14c-.34.3-.77.44-1.47.44h-.29V8.1h.29c.69 0 1.11.12 1.47.44.37.33.59.84.59 1.37 0 .53-.22 1.06-.59 1.39zm2.19-4.14h1.07v5.5H7.02v-5.5zm3.69 2.11c-.64-.24-.83-.4-.83-.69 0-.35.34-.61.8-.61.32 0 .59.13.86.45l.56-.73c-.46-.4-1.01-.61-1.62-.61-.97 0-1.72.68-1.72 1.58 0 .76.35 1.15 1.35 1.51.42.15.63.25.74.31.21.14.32.34.32.57 0 .45-.35.78-.83.78-.51 0-.92-.26-1.17-.73l-.69.67c.49.73 1.09 1.05 1.9 1.05 1.11 0 1.9-.74 1.9-1.81.02-.89-.35-1.29-1.57-1.74zm1.92.65c0 1.62 1.27 2.87 2.9 2.87.46 0 .86-.09 1.34-.32v-1.26c-.43.43-.81.6-1.29.6-1.08 0-1.85-.78-1.85-1.9 0-1.06.79-1.89 1.8-1.89.51 0 .9.18 1.34.62V7.38c-.47-.24-.86-.34-1.32-.34-1.61 0-2.92 1.28-2.92 2.88zm12.76.94l-1.47-3.7h-1.17l2.33 5.64h.58l2.37-5.64h-1.16l-1.48 3.7zm3.13 1.8h3.04v-.93h-1.97v-1.48h1.9v-.93h-1.9V8.1h1.97v-.94h-3.04v5.5zm7.29-3.87c0-1.03-.71-1.62-1.95-1.62h-1.59v5.5h1.07v-2.21h.14l1.48 2.21h1.32l-1.73-2.32c.81-.17 1.26-.72 1.26-1.56zm-2.16.91h-.31V8.03h.33c.67 0 1.03.28 1.03.82 0 .55-.36.85-1.05.85z" fill="#231F20"/><path d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint0_linear)"/><path opacity=".65" d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint1_linear)"/><path d="M36.57 7.506c0-.1-.07-.15-.18-.15h-.16v.48h.12v-.19l.14.19h.14l-.16-.2c.06-.01.1-.06.1-.13zm-.2.07h-.02v-.13h.02c.06 0 .09.02.09.06 0 .05-.03.07-.09.07z" fill="#231F20"/><path d="M36.41 7.176c-.23 0-.42.19-.42.42 0 .23.19.42.42.42.23 0 .42-.19.42-.42 0-.23-.19-.42-.42-.42zm0 .77c-.18 0-.34-.15-.34-.35 0-.19.15-.35.34-.35.18 0 .33.16.33.35 0 .19-.15.35-.33.35z" fill="#231F20"/><path d="M37 12.984S27.09 19.873 8.976 23h26.023a2 2 0 002-1.984l.024-3.02L37 12.985z" fill="#F48120"/><defs><linearGradient id="pi-paint0_linear" x1="21.657" y1="12.275" x2="19.632" y2="9.104" gradientUnits="userSpaceOnUse"><stop stop-color="#F89F20"/><stop offset=".25" stop-color="#F79A20"/><stop offset=".533" stop-color="#F68D20"/><stop offset=".62" stop-color="#F58720"/><stop offset=".723" stop-color="#F48120"/><stop offset="1" stop-color="#F37521"/></linearGradient><linearGradient id="pi-paint1_linear" x1="21.338" y1="12.232" x2="18.378" y2="6.446" gradientUnits="userSpaceOnUse"><stop stop-color="#F58720"/><stop offset=".359" stop-color="#E16F27"/><stop offset=".703" stop-color="#D4602C"/><stop offset=".982" stop-color="#D05B2E"/></linearGradient></defs></svg></li><li><svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-google_pay"><title id="pi-google_pay">Google Pay</title><path d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000" opacity=".07"/><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF"/><path d="M18.093 11.976v3.2h-1.018v-7.9h2.691a2.447 2.447 0 0 1 1.747.692 2.28 2.28 0 0 1 .11 3.224l-.11.116c-.47.447-1.098.69-1.747.674l-1.673-.006zm0-3.732v2.788h1.698c.377.012.741-.135 1.005-.404a1.391 1.391 0 0 0-1.005-2.354l-1.698-.03zm6.484 1.348c.65-.03 1.286.188 1.778.613.445.43.682 1.03.65 1.649v3.334h-.969v-.766h-.049a1.93 1.93 0 0 1-1.673.931 2.17 2.17 0 0 1-1.496-.533 1.667 1.667 0 0 1-.613-1.324 1.606 1.606 0 0 1 .613-1.336 2.746 2.746 0 0 1 1.698-.515c.517-.02 1.03.093 1.49.331v-.208a1.134 1.134 0 0 0-.417-.901 1.416 1.416 0 0 0-.98-.368 1.545 1.545 0 0 0-1.319.717l-.895-.564a2.488 2.488 0 0 1 2.182-1.06zM23.29 13.52a.79.79 0 0 0 .337.662c.223.176.5.269.785.263.429-.001.84-.17 1.146-.472.305-.286.478-.685.478-1.103a2.047 2.047 0 0 0-1.324-.374 1.716 1.716 0 0 0-1.03.294.883.883 0 0 0-.392.73zm9.286-3.75l-3.39 7.79h-1.048l1.281-2.728-2.224-5.062h1.103l1.612 3.885 1.569-3.885h1.097z" fill="#5F6368"/><path d="M13.986 11.284c0-.308-.024-.616-.073-.92h-4.29v1.747h2.451a2.096 2.096 0 0 1-.9 1.373v1.134h1.464a4.433 4.433 0 0 0 1.348-3.334z" fill="#4285F4"/><path d="M9.629 15.721a4.352 4.352 0 0 0 3.01-1.097l-1.466-1.14a2.752 2.752 0 0 1-4.094-1.44H5.577v1.17a4.53 4.53 0 0 0 4.052 2.507z" fill="#34A853"/><path d="M7.079 12.05a2.709 2.709 0 0 1 0-1.735v-1.17H5.577a4.505 4.505 0 0 0 0 4.075l1.502-1.17z" fill="#FBBC04"/><path d="M9.629 8.44a2.452 2.452 0 0 1 1.74.68l1.3-1.293a4.37 4.37 0 0 0-3.065-1.183 4.53 4.53 0 0 0-4.027 2.5l1.502 1.171a2.715 2.715 0 0 1 2.55-1.875z" fill="#EA4335"/></svg>
</li><li><svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" fill="none" aria-labelledby="pi-master"><title id="pi-master">Mastercard</title><rect x=".5" y=".5" width="37" height="23" rx="2.5" stroke="#000" stroke-opacity=".07" fill="none"/><path d="M35 0H3C1.3 0 0 1.3 0 3V21C0 22.7 1.4 24 3 24H35C36.7 24 38 22.7 38 21V3C38 1.3 36.6 0 35 0Z" fill="#1C1C1C" style="fill:#1C1C1C;fill:color(display-p3 0.1098 0.1098 0.1098);fill-opacity:1;"/><path d="M35 1C36.1 1 37 1.9 37 3V21C37 22.1 36.1 23 35 23H3C1.9 23 1 22.1 1 21V3C1 1.9 1.9 1 3 1H35Z" fill="#232323" style="fill:#232323;fill:color(display-p3 0.1373 0.1373 0.1373);fill-opacity:1;"/><path d="M14.6364 19.2727C18.8538 19.2727 22.2727 15.8538 22.2727 11.6364C22.2727 7.41892 18.8538 4 14.6364 4C10.4189 4 7 7.41892 7 11.6364C7 15.8538 10.4189 19.2727 14.6364 19.2727Z" fill="#EB001B" style="fill:#EB001B;fill:color(display-p3 0.9216 0.0000 0.1059);fill-opacity:1;"/><path d="M23.3637 19.2727C27.5811 19.2727 31 15.8538 31 11.6364C31 7.41892 27.5811 4 23.3637 4C19.1462 4 15.7273 7.41892 15.7273 11.6364C15.7273 15.8538 19.1462 19.2727 23.3637 19.2727Z" fill="#F79E1B" style="fill:#F79E1B;fill:color(display-p3 0.9686 0.6196 0.1059);fill-opacity:1;"/><path d="M22.2727 11.6362C22.2727 9.01797 20.9637 6.72706 19 5.41797C17.0364 6.83615 15.7273 9.12706 15.7273 11.6362C15.7273 14.1452 17.0364 16.5452 19 17.8543C20.9637 16.5452 22.2727 14.2543 22.2727 11.6362Z" fill="#FF5F00" style="fill:#FF5F00;fill:color(display-p3 1.0000 0.3725 0.0000);fill-opacity:1;"/></svg>
</li><li><svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" width="38" height="24" role="img" aria-labelledby="pi-paypal"><title id="pi-paypal">PayPal</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path fill="#003087" d="M23.9 8.3c.2-1 0-1.7-.6-2.3-.6-.7-1.7-1-3.1-1h-4.1c-.3 0-.5.2-.6.5L14 15.6c0 .2.1.4.3.4H17l.4-3.4 1.8-2.2 4.7-2.1z"/><path fill="#3086C8" d="M23.9 8.3l-.2.2c-.5 2.8-2.2 3.8-4.6 3.8H18c-.3 0-.5.2-.6.5l-.6 3.9-.2 1c0 .2.1.4.3.4H19c.3 0 .5-.2.5-.4v-.1l.4-2.4v-.1c0-.2.3-.4.5-.4h.3c2.1 0 3.7-.8 4.1-3.2.2-1 .1-1.8-.4-2.4-.1-.5-.3-.7-.5-.8z"/><path fill="#012169" d="M23.3 8.1c-.1-.1-.2-.1-.3-.1-.1 0-.2 0-.3-.1-.3-.1-.7-.1-1.1-.1h-3c-.1 0-.2 0-.2.1-.2.1-.3.2-.3.4l-.7 4.4v.1c0-.3.3-.5.6-.5h1.3c2.5 0 4.1-1 4.6-3.8v-.2c-.1-.1-.3-.2-.5-.2h-.1z"/></svg></li><li><svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" aria-labelledby="pi-shopify_pay"><title id="pi-shopify_pay">Shop Pay</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000"/><path d="M35.889 0C37.05 0 38 .982 38 2.182v19.636c0 1.2-.95 2.182-2.111 2.182H2.11C.95 24 0 23.018 0 21.818V2.182C0 .982.95 0 2.111 0H35.89z" fill="#5A31F4"/><path d="M9.35 11.368c-1.017-.223-1.47-.31-1.47-.705 0-.372.306-.558.92-.558.54 0 .934.238 1.225.704a.079.079 0 00.104.03l1.146-.584a.082.082 0 00.032-.114c-.475-.831-1.353-1.286-2.51-1.286-1.52 0-2.464.755-2.464 1.956 0 1.275 1.15 1.597 2.17 1.82 1.02.222 1.474.31 1.474.705 0 .396-.332.582-.993.582-.612 0-1.065-.282-1.34-.83a.08.08 0 00-.107-.035l-1.143.57a.083.083 0 00-.036.111c.454.92 1.384 1.437 2.627 1.437 1.583 0 2.539-.742 2.539-1.98s-1.155-1.598-2.173-1.82v-.003zM15.49 8.855c-.65 0-1.224.232-1.636.646a.04.04 0 01-.069-.03v-2.64a.08.08 0 00-.08-.081H12.27a.08.08 0 00-.08.082v8.194a.08.08 0 00.08.082h1.433a.08.08 0 00.081-.082v-3.594c0-.695.528-1.227 1.239-1.227.71 0 1.226.521 1.226 1.227v3.594a.08.08 0 00.081.082h1.433a.08.08 0 00.081-.082v-3.594c0-1.51-.981-2.577-2.355-2.577zM20.753 8.62c-.778 0-1.507.24-2.03.588a.082.082 0 00-.027.109l.632 1.088a.08.08 0 00.11.03 2.5 2.5 0 011.318-.366c1.25 0 2.17.891 2.17 2.068 0 1.003-.736 1.745-1.669 1.745-.76 0-1.288-.446-1.288-1.077 0-.361.152-.657.548-.866a.08.08 0 00.032-.113l-.596-1.018a.08.08 0 00-.098-.035c-.799.299-1.359 1.018-1.359 1.984 0 1.46 1.152 2.55 2.76 2.55 1.877 0 3.227-1.313 3.227-3.195 0-2.018-1.57-3.492-3.73-3.492zM28.675 8.843c-.724 0-1.373.27-1.845.746-.026.027-.069.007-.069-.029v-.572a.08.08 0 00-.08-.082h-1.397a.08.08 0 00-.08.082v8.182a.08.08 0 00.08.081h1.433a.08.08 0 00.081-.081v-2.683c0-.036.043-.054.069-.03a2.6 2.6 0 001.808.7c1.682 0 2.993-1.373 2.993-3.157s-1.313-3.157-2.993-3.157zm-.271 4.929c-.956 0-1.681-.768-1.681-1.783s.723-1.783 1.681-1.783c.958 0 1.68.755 1.68 1.783 0 1.027-.713 1.783-1.681 1.783h.001z" fill="#fff"/></svg>
</li><li><svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 38 24" width="38" height="24" fill="none" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><rect x=".5" y=".5" width="37" height="23" rx="2.5" stroke="#000" stroke-opacity=".07" fill="none"/><path d="M35 0H3C1.3 0 0 1.3 0 3V21C0 22.7 1.4 24 3 24H35C36.7 24 38 22.7 38 21V3C38 1.3 36.6 0 35 0Z" fill="#142FBD" style="fill:#142FBD;fill:color(display-p3 0.0784 0.1843 0.7412);fill-opacity:1;"/><path d="M35 1C36.1 1 37 1.9 37 3V21C37 22.1 36.1 23 35 23H3C1.9 23 1 22.1 1 21V3C1 1.9 1.9 1 3 1H35Z" fill="#1532CB" style="fill:#1532CB;fill:color(display-p3 0.0824 0.1961 0.7961);fill-opacity:1;"/><path d="M29.5944 10.2167H29.2778C28.8556 11.2722 28.5389 11.8 28.2222 13.3833H30.2278C29.9111 11.8 29.9111 11.0611 29.5944 10.2167V10.2167ZM32.6556 16.4444H30.8611C30.7556 16.4444 30.7556 16.4444 30.65 16.3389L30.4389 15.3889L30.3333 15.1778H27.8C27.6944 15.1778 27.5889 15.1778 27.5889 15.3889L27.2722 16.3389C27.2722 16.4444 27.1667 16.4444 27.1667 16.4444H24.95L25.1611 15.9167L28.2222 8.73889C28.2222 8.21111 28.5389 8 29.0667 8H30.65C30.7556 8 30.8611 8 30.8611 8.21111L32.3389 15.0722C32.4444 15.4944 32.55 15.8111 32.55 16.2333C32.6556 16.3389 32.6556 16.3389 32.6556 16.4444V16.4444ZM18.5111 16.1278L18.9333 14.2278C19.0389 14.2278 19.1444 14.3333 19.1444 14.3333C19.8833 14.65 20.6222 14.8611 21.3611 14.7556C21.5722 14.7556 21.8889 14.65 22.1 14.5444C22.6278 14.3333 22.6278 13.8056 22.2056 13.3833C21.9944 13.1722 21.6778 13.0667 21.3611 12.8556C20.9389 12.6444 20.5167 12.4333 20.2 12.1167C18.9333 11.0611 19.3556 9.58333 20.0944 8.84444C20.7278 8.42222 21.0444 8 21.8889 8C23.1556 8 24.5278 8 25.1611 8.21111H25.2667C25.1611 8.84444 25.0556 9.37222 24.8444 10.0056C24.3167 9.79444 23.7889 9.58333 23.2611 9.58333C22.9444 9.58333 22.6278 9.58333 22.3111 9.68889C22.1 9.68889 21.9944 9.79444 21.8889 9.9C21.6778 10.1111 21.6778 10.4278 21.8889 10.6389L22.4167 11.0611C22.8389 11.2722 23.2611 11.4833 23.5778 11.6944C24.1056 12.0111 24.6333 12.5389 24.7389 13.1722C24.95 14.1222 24.6333 14.9667 23.7889 15.6C23.2611 16.0222 23.05 16.2333 22.3111 16.2333C20.8333 16.2333 19.6722 16.3389 18.7222 16.0222C18.6167 16.2333 18.6167 16.2333 18.5111 16.1278V16.1278ZM14.8167 16.4444C14.9222 15.7056 14.9222 15.7056 15.0278 15.3889C15.5556 13.0667 16.0833 10.6389 16.5056 8.31667C16.6111 8.10556 16.6111 8 16.8222 8H18.7222C18.5111 9.26667 18.3 10.2167 17.9833 11.3778C17.6667 12.9611 17.35 14.5444 16.9278 16.1278C16.9278 16.3389 16.8222 16.3389 16.6111 16.3389L14.8167 16.4444ZM5 8.21111C5 8.10556 5.21111 8 5.31667 8H8.90556C9.43333 8 9.85556 8.31667 9.96111 8.84444L10.9111 13.4889C10.9111 13.5944 10.9111 13.5944 11.0167 13.7C11.0167 13.5944 11.1222 13.5944 11.1222 13.5944L13.3389 8.21111C13.2333 8.10556 13.3389 8 13.4444 8H15.6611C15.6611 8.10556 15.6611 8.10556 15.5556 8.21111L12.2833 15.9167C12.1778 16.1278 12.1778 16.2333 12.0722 16.3389C11.9667 16.4444 11.7556 16.3389 11.5444 16.3389H9.96111C9.85556 16.3389 9.75 16.3389 9.75 16.1278L8.06111 9.58333C7.85 9.37222 7.53333 9.05556 7.11111 8.95C6.47778 8.63333 5.31667 8.42222 5.10556 8.42222L5 8.21111Z" fill="white" style="fill:white;fill-opacity:1;"/></svg>
</li></ul><p class="wrts-footer__copyright">
        &copy; 2026

          Christopher's Rockin' Store. All rights reserved.
      </p><p class="wrts-footer__closing">
          <span class="wrts-footer__closing-text"><span style="color: var(--wrts-footer-yellow)">Play.</span>
Belong.
<span style="color: var(--wrts-footer-yellow)">Thrive.</span>
</span>
        </p></div>
  </div>
</div>

<script src="/cdn/shop/t/23/assets/wrts-payment-overflow.js?v=173546525500972337371791786765" type="module"></script>


</section>
<!-- END sections: footer-group -->
      </footer>
    </div>

    

    <div
      id="shopify-section-cart-drawer-section"
      class="shopify-section"
    >
  

  <script
    type="module"
    src="/cdn/shop/t/23/assets/cart-drawer.js?v=141815296725803318961791786764"
    fetchpriority="low"
  ></script>

  

  <theme-drawer
    id="cart-drawer"
    data-skip-node-update
  >
    <dialog
      ref="panel"
      class="theme-drawer__dialog color-custom-drawer"
      aria-labelledby="cart-drawer-heading"
      cart-summary-sticky="true"
    >
      <cart-drawer-component
        
      >
        <template id="empty-cart-template">
          
    <div
      class="cart-drawer__content"
      aria-label="Cart"
    >
      <h2
        class="theme-drawer__title h4"
        id="cart-drawer-heading"
      >
        Your cart is empty
      </h2>

      <div class="cart-drawer__items">
        









<script
  src="/cdn/shop/t/23/assets/component-cart-items.js?v=128607540178034746111791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/component-cart-quantity-selector.js?v=168493463479860323171791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/volume-pricing-info.js?v=150538418000149674651791786765"
  type="module"
  fetchpriority="low"
></script>




<div
  
  class="cart-items__wrapper cart-items__wrapper--drawer-empty"
  
    data-cart-drawer-empty
  
  style=""
>
  
<p>
        Have an account? <a href="https://rockinstore.com/customer_authentication/redirect?locale=en&region_country=US">Log in</a> to check out faster.
      </p><a
      class="button cart-items__empty-button"
      href="/collections/all"
    >
      <span class="button-text">
        Continue shopping
      </span>
    </a></div>



      </div>
    </div>
  
        </template>

        <div
          class="cart-drawer__inner cart-drawer--empty"
          data-hydration-key="cart-drawer-inner"
        ><div class="theme-drawer__header">
              <button
                on:click="#cart-drawer/close"
                class="theme-drawer__close-button cart-drawer__close-button--empty"
                type="button"
                aria-label="Close"
              >
                <span class="svg-wrapper"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
</svg>
</span>
              </button>
            </div>
          

<cart-items-component
  class="cart-items-component"
  
    data-drawer
    view-event-trigger="dialog"
  
  data-section-id="cart-drawer-section"
  view-event-payload="{&quot;context&quot;:null,&quot;cart&quot;:null}"
>
  

    <div
      class="cart-drawer__content"
      aria-label="Cart"
    >
      <h2
        class="theme-drawer__title h4"
        id="cart-drawer-heading"
      >
        Your cart is empty
      </h2>

      <div class="cart-drawer__items">
        









<script
  src="/cdn/shop/t/23/assets/component-cart-items.js?v=128607540178034746111791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/component-cart-quantity-selector.js?v=168493463479860323171791786764"
  type="module"
  fetchpriority="low"
></script>
<script
  src="/cdn/shop/t/23/assets/volume-pricing-info.js?v=150538418000149674651791786765"
  type="module"
  fetchpriority="low"
></script>




<div
  
  class="cart-items__wrapper cart-items__wrapper--drawer-empty"
  
    data-cart-drawer-empty
  
  style=""
>
  
<p>
        Have an account? <a href="https://rockinstore.com/customer_authentication/redirect?locale=en&region_country=US">Log in</a> to check out faster.
      </p><a
      class="button cart-items__empty-button"
      href="/collections/all"
    >
      <span class="button-text">
        Continue shopping
      </span>
    </a></div>



      </div>
    </div>
  

</cart-items-component>



        </div>
      </cart-drawer-component>
    </dialog>
  </theme-drawer>

  
    </div>
  


    






<script
  type="module"
  src="/cdn/shop/t/23/assets/theme-drawer.js?v=87991178686530867571791786765"
  fetchpriority="low"
></script>

<script>
  /* Runs synchronously during HTML parsing — opens the correct drawer on first
     paint if navigation state was saved, so it renders with the rest of the page. */
  (function () {
    var drawerIds = (sessionStorage.getItem('theme-drawer-open') || '').split(',').filter(Boolean);
    if (!drawerIds.length) return;

    // Only restore on wide viewports (squeeze mode). On narrow viewports the
    // drawer is a modal overlay — let it start closed after navigation rather
    // than re-opening a fullscreen dialog the user may have left behind.
    if (!window.matchMedia('(min-width: 990px)').matches) return;

    var dialogs = [];
    for (var i = 0; i < drawerIds.length; i++) {
      var drawer = document.getElementById(drawerIds[i]);
      if (!drawer) continue;

      drawer.setAttribute('open', '');

      // Set [open] directly so the CSS slide-in applies without triggering
      // the browser's dialog focusing steps — on wide viewports the drawer is
      // a sidebar, not a modal, so focus should stay where it is.
      // The instant class suppresses the slide-in transition for the initial restore.
      // Set --drawer-stack-order so z-index layering matches the original order.
      drawer.style.setProperty('--drawer-stack-order', String(i + 1));

      var dialog = drawer.querySelector('dialog');
      if (dialog) {
        dialog.setAttribute('open', '');
        dialog.classList.add('theme-drawer__dialog-instant');
        dialogs.push(dialog);
      }

      // Let each drawer type handle its own restore (e.g. shopify-chat mode).
      // Synchronous dispatch — listeners attached during earlier parsing run immediately.
      drawer.dispatchEvent(new CustomEvent('theme-drawer:restoring'));
    }

    // Squeeze disabled: drawers open as a full modal overlay
    var pageWrapper = document.querySelector('.page-wrapper');
    if (pageWrapper) {
      pageWrapper.classList.remove('page-wrapper--drawer-open');
    }

    // Re-enable transitions after one paint so the instant state is rendered first.
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        if (pageWrapper) pageWrapper.style.transition = '';
        for (var j = 0; j < dialogs.length; j++) {
          dialogs[j].classList.remove('theme-drawer__dialog-instant');
        }
      });
    });
  })();
</script>

<script
  type="module"
>
  const pageWrapper = document.querySelector('.page-wrapper');

  // Drawers open as overlay — never squeeze page content
  document.addEventListener('theme-drawer:open', () => {
    pageWrapper?.classList.remove('page-wrapper--drawer-open');
  });

  document.addEventListener('theme-drawer:close', () => {
    pageWrapper?.classList.remove('page-wrapper--drawer-open');
  });

  // ── State persistence ──
  // Store open drawer IDs sorted by their visual stack order so
  // the restore script can recreate the same z-index layering.
  function persistDrawerState() {
    const openDrawers = Array.from(document.querySelectorAll('theme-drawer[open]:not([no-persist])'));
    if (!openDrawers.length) {
      sessionStorage.removeItem('theme-drawer-open');
      return;
    }

    openDrawers.sort((a, b) => {
      const orderA = Number(a.style.getPropertyValue('--drawer-stack-order') || 0);
      const orderB = Number(b.style.getPropertyValue('--drawer-stack-order') || 0);
      return orderA - orderB;
    });

    sessionStorage.setItem('theme-drawer-open', openDrawers.map((d) => d.id).join(','));
  }

  document.addEventListener('theme-drawer:open', persistDrawerState);
  document.addEventListener('theme-drawer:close', persistDrawerState);
</script>


    










<script
  src="/cdn/shop/t/23/assets/dialog.js?v=144816527575655702281791786764"
  type="module"
></script>

<script
  src="/cdn/shop/t/23/assets/predictive-search.js?v=34228036626877155831791786764"
  type="module"
  fetchpriority="low"
></script>

<dialog-component
  id="search-modal"
  class="search-modal"
  
>
  <dialog
    ref="dialog"
    on:click="/closeDialogOnClickOutside"
    on:keydown="/closeDialogOnEscapePress"
    class="search-modal__content dialog-modal"
    scroll-lock
    aria-labelledby="search-modal-heading"
  >
    <h2
      id="search-modal-heading"
      class="visually-hidden"
    >
      Search
    </h2>
    <predictive-search-component
      class="predictive-search color-custom-popover"
      style="--product-corner-radius: 8px; --card-corner-radius: 8px;"
      data-section-id="predictive-search"
      data-testid="search-component--modal"
      role="search"
      aria-label="Search"
    >
      <form
        action="/search"
        method="get"
        role="search"
        class="predictive-search-form"
        ref="form"
        on:keydown="/onSearchKeyDown"
      >
        <div
          class="predictive-search-form__header"
        >
          <div class="predictive-search-form__header-inner">
            <label
              for="cmdk-input"
              class="visually-hidden"
            >Search</label>
            <input
              class="search-input"
              id="cmdk-input"
              type="search"
              name="q"
              role="combobox"
              aria-expanded="false"
              aria-owns="predictive-search-results"
              aria-controls="predictive-search-results"
              aria-haspopup="listbox"
              aria-autocomplete="list"
              autocomplete="off"
              placeholder="Search"
              ref="searchInput"
              on:input="/search"
              on:keydown="/onSearchKeyDown"
            >
            <input
              name="options[prefix]"
              type="hidden"
              value="last"
            >
            <span class="svg-wrapper predictive-search__icon">
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg>

            </span>
            <button
              type="button"
              class="button-unstyled predictive-search__reset-button"
              ref="resetButton"
              hidden
              on:click="/resetSearch"
            >
              Clear
            </button>
          </div>
          <button
            type="button"
            class="button predictive-search__close-modal-button"
            aria-label="Close dialog"
            on:click="dialog-component/closeDialog"
            ref="closeModalButton"
          >
            <span class="svg-wrapper">
              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
</svg>

            </span>
          </button>
        </div>

        <div class="predictive-search-form__content-wrapper">
          <div
            class="predictive-search-form__content"
            ref="predictiveSearchResults"
            on:click="/handleModalClick"
          >
            

<div
  id="predictive-search-results"
  class="predictive-search-dropdown"
  role="listbox"
  aria-expanded="true"
  style="--color-shadow: rgb(var(--color-foreground-rgb) / 0.1);"
>
  
    <div class="predictive-search-results__inner">
      
      
        
        
        
          <div
  id="predictive-search-products"
  class="predictive-search-results__products"
  
    data-testid="products-list-default--modal"
  
>
  
    <h4 class="predictive-search-results__title">
      Products
    </h4>
    <ul
      class="predictive-search-results__list predictive-search-results__wrapper-products list-unstyled"
    >
      
      
        <li
          class="predictive-search-results__card predictive-search-results__card--product"
          ref="resultsItems[]"
        >
          
<product-component
    class="resource-card__wrapper"
    
    
      view-event-payload="{&quot;product&quot;:{&quot;id&quot;:9650169938159,&quot;title&quot;:&quot;WRTS Black Socks (XS)&quot;,&quot;handle&quot;:&quot;wrts-black-socks-xs&quot;,&quot;selectedVariant&quot;:null},&quot;context&quot;:&quot;search&quot;,&quot;selectedOptions&quot;:[]}"
    
  ><div
  class="resource-card"
  data-resource-type="product"
>
  <a
    class="resource-card__link"
    href="/products/wrts-black-socks-xs"
  >
    <span class="visually-hidden">
      WRTS Black Socks (XS)
    </span>
  </a>
  <div
    class="resource-card__media"
    style="--resource-card-aspect-ratio: 4 / 5;"
    
  >
      
      

        <img src="/cdn/shop/files/WRTS_Grip_Socks_XS_Black.png?v=1791207165&amp;width=500" alt="" srcset="/cdn/shop/files/WRTS_Grip_Socks_XS_Black.png?v=1791207165&amp;width=240 240w, /cdn/shop/files/WRTS_Grip_Socks_XS_Black.png?v=1791207165&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;">

          <img src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_03_50_41_PM.png?v=1790668338&amp;width=500" alt="WRTS Black Socks (XS)" srcset="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_03_50_41_PM.png?v=1790668338&amp;width=240 240w, /cdn/shop/files/ChatGPT_Image_Sep_29_2026_03_50_41_PM.png?v=1790668338&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="40808641528047" style="object-position: 50.0% 50.0%;">
</div>

  <div class="resource-card__content">
    <p class="resource-card__title paragraph">WRTS Black Socks (XS)</p>

    
      

<div ref="priceContainer">
  
    
    
      <span class="price"
        ><bdi>$0.42</bdi></span
      >
    
  
</div>
    
  </div>
</div></product-component>

        </li>
      
        <li
          class="predictive-search-results__card predictive-search-results__card--product"
          ref="resultsItems[]"
        >
          
<product-component
    class="resource-card__wrapper"
    
    
      view-event-payload="{&quot;product&quot;:{&quot;id&quot;:9650174787823,&quot;title&quot;:&quot;WRTS Blue Socks (Adult L)&quot;,&quot;handle&quot;:&quot;wrts-blue-socks-adult-l&quot;,&quot;selectedVariant&quot;:null},&quot;context&quot;:&quot;search&quot;,&quot;selectedOptions&quot;:[]}"
    
  ><div
  class="resource-card"
  data-resource-type="product"
>
  <a
    class="resource-card__link"
    href="/products/wrts-blue-socks-adult-l"
  >
    <span class="visually-hidden">
      WRTS Blue Socks (Adult L)
    </span>
  </a>
  <div
    class="resource-card__media"
    style="--resource-card-aspect-ratio: 4 / 5;"
    
  >
      
      

        <img src="/cdn/shop/files/WRTS_Socks_Adult_L_Blue.png?v=1791206945&amp;width=500" alt="" srcset="/cdn/shop/files/WRTS_Socks_Adult_L_Blue.png?v=1791206945&amp;width=240 240w, /cdn/shop/files/WRTS_Socks_Adult_L_Blue.png?v=1791206945&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;">

          <img src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_06_58_42_PM.png?v=1790679560&amp;width=500" alt="WRTS Blue Socks (Adult L)" srcset="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_06_58_42_PM.png?v=1790679560&amp;width=240 240w, /cdn/shop/files/ChatGPT_Image_Sep_29_2026_06_58_42_PM.png?v=1790679560&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="40809773957359" style="object-position: 50.0% 50.0%;">
</div>

  <div class="resource-card__content">
    <p class="resource-card__title paragraph">WRTS Blue Socks (Adult L)</p>

    
      

<div ref="priceContainer">
  
    
    
      
        <span class="price-item__group price-item--regular compare-at-price">
          <span class="visually-hidden">Regular price&nbsp;</span>
          <bdi>$1.28</bdi>
        </span>
        <span class="price-item__group price">
          <span class="visually-hidden">Sale price&nbsp;</span>
          <bdi>$0.42</bdi>
        </span>
      
    
  
</div>
    
  </div>
</div></product-component>

        </li>
      
        <li
          class="predictive-search-results__card predictive-search-results__card--product"
          ref="resultsItems[]"
        >
          
<product-component
    class="resource-card__wrapper"
    
    
      view-event-payload="{&quot;product&quot;:{&quot;id&quot;:9650171707631,&quot;title&quot;:&quot;WRTS Gray Socks (S)&quot;,&quot;handle&quot;:&quot;wrts-gray-socks-s&quot;,&quot;selectedVariant&quot;:null},&quot;context&quot;:&quot;search&quot;,&quot;selectedOptions&quot;:[]}"
    
  ><div
  class="resource-card"
  data-resource-type="product"
>
  <a
    class="resource-card__link"
    href="/products/wrts-gray-socks-s"
  >
    <span class="visually-hidden">
      WRTS Gray Socks (S)
    </span>
  </a>
  <div
    class="resource-card__media"
    style="--resource-card-aspect-ratio: 4 / 5;"
    
  >
      
      

        <img src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_55_07_PM.png?v=1790672241&amp;width=500" alt="" srcset="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_55_07_PM.png?v=1790672241&amp;width=240 240w, /cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_55_07_PM.png?v=1790672241&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;">

          <img src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_47_38_PM_8ecfda24-95bc-4844-87c0-f7b6c116cf1c.png?v=1790673278&amp;width=500" alt="WRTS Gray Socks (S)" srcset="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_47_38_PM_8ecfda24-95bc-4844-87c0-f7b6c116cf1c.png?v=1790673278&amp;width=240 240w, /cdn/shop/files/ChatGPT_Image_Sep_29_2026_04_47_38_PM_8ecfda24-95bc-4844-87c0-f7b6c116cf1c.png?v=1790673278&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="40809147728111" style="object-position: 50.0% 50.0%;">
</div>

  <div class="resource-card__content">
    <p class="resource-card__title paragraph">WRTS Gray Socks (S)</p>

    
      

<div ref="priceContainer">
  
    
    
      <span class="price"
        ><bdi>$0.42</bdi></span
      >
    
  
</div>
    
  </div>
</div></product-component>

        </li>
      
        <li
          class="predictive-search-results__card predictive-search-results__card--product"
          ref="resultsItems[]"
        >
          
<product-component
    class="resource-card__wrapper"
    
    
      view-event-payload="{&quot;product&quot;:{&quot;id&quot;:9650159354095,&quot;title&quot;:&quot;WRTS Green Socks (XXS)&quot;,&quot;handle&quot;:&quot;wrts-green-socks-xxs&quot;,&quot;selectedVariant&quot;:null},&quot;context&quot;:&quot;search&quot;,&quot;selectedOptions&quot;:[]}"
    
  ><div
  class="resource-card"
  data-resource-type="product"
>
  <a
    class="resource-card__link"
    href="/products/wrts-green-socks-xxs"
  >
    <span class="visually-hidden">
      WRTS Green Socks (XXS)
    </span>
  </a>
  <div
    class="resource-card__media"
    style="--resource-card-aspect-ratio: 4 / 5;"
    
  >
      
      

        <img src="/cdn/shop/files/WRTS_Grip_Socks_Green_XXS.png?v=1791207226&amp;width=500" alt="" srcset="/cdn/shop/files/WRTS_Grip_Socks_Green_XXS.png?v=1791207226&amp;width=240 240w, /cdn/shop/files/WRTS_Grip_Socks_Green_XXS.png?v=1791207226&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image" sizes="auto" ref="" style="object-position: 50.0% 50.0%;">

          <img src="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_02_54_14_PM.png?v=1790664945&amp;width=500" alt="WRTS Green Socks (XXS)" srcset="/cdn/shop/files/ChatGPT_Image_Sep_29_2026_02_54_14_PM.png?v=1790664945&amp;width=240 240w, /cdn/shop/files/ChatGPT_Image_Sep_29_2026_02_54_14_PM.png?v=1790664945&amp;width=352 352w" width="500" height="500" loading="lazy" class="resource-card__image resource-card__image--secondary" sizes="auto" ref="" data-media-id="40808416772335" style="object-position: 50.0% 50.0%;">
</div>

  <div class="resource-card__content">
    <p class="resource-card__title paragraph">WRTS Green Socks (XXS)</p>

    
      

<div ref="priceContainer">
  
    
    
      <span class="price"
        ><bdi>$0.42</bdi></span
      >
    
  
</div>
    
  </div>
</div></product-component>

        </li>
      
    </ul>
  
</div>

        
      
    </div>
  
</div>

          </div>

          <div class="predictive-search-form__footer">
            <button
              class="button predictive-search__search-button"
              ref="viewAllButton"
            >
              View all
            </button>
          </div>
        </div>
      </form>
    </predictive-search-component>
  </dialog>
</dialog-component>




    
      <script
  src="/cdn/shop/t/23/assets/gift-card-recipient-form.js?v=170482155849799299241791786764"
  type="module"
  fetchpriority="low"
></script>




<quick-add-dialog id="quick-add-dialog">
  <dialog
    class="quick-add-modal dialog-modal color-custom-popover"
    ref="dialog"
    scroll-lock
  >
    <button
      ref="closeButton"
      on:click="/closeDialog"
      class="button button-unstyled close-button quick-add-modal__close"
      aria-label="Close dialog"
    ><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/>
</svg>
</button>

    <product-component
      id="quick-add-modal-content"
      class="quick-add-modal__content"
      view-event-trigger="dialog"
    ></product-component>
  </dialog>
</quick-add-dialog>














    
  <script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
</body>
</html>
