/*
Theme Name:     Toyup Child Theme
Template:       toyup
Theme URI:      http://radiustheme.com/demo/wordpress/themes/toyup
Author:         RadiusTheme
Author URI:     http://radiustheme.com
Description:    Toyup is an Responsive Toy Store WooCommerce WordPress Theme.
Version:        1.3.39
Text Domain:    toyup
Tags: 			theme-options, featured-images, post-formats, one-column, two-columns, right-sidebar, custom-background, custom-header, editor-style, sticky-post, threaded-comments, translation-ready
License:   	  	Envato split License
License URI:  	https://themeforest.net/licenses/terms/regular
*/

/* =====================================================
   SUGGOII TYPOGRAPHY — WordPress drop-in
   ===================================================== */

/* 2. TOKENS */
:root {
  --font-display: "Gang of Three", "Archivo Black", Impact, sans-serif;
  --font-script:  "Caveat Brush", "Marker Felt", cursive;
  --font-ui:      "Archivo Black", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Brand core */
  --suggoii-red:    #FF0013;   /* spec */
  --suggoii-red-2:  #E60013;   /* in-use */
  --suggoii-yellow: #FFD31A;
  --suggoii-black:  #0C0C0C;
  --suggoii-white:  #FFFFFF;
  --suggoii-cream:  #F4EFE6;
  --suggoii-purple: #BF00FF;

  /* Neutrals */
  --ink-900: #0C0C0C;
  --ink-700: #222222;
  --ink-500: #555555;
  --ink-300: #9A9A9A;
  --ink-100: #E3E3E3;
  --paper:   #FFFFFF;
  --cream:   #F4EFE6;
  --cream-warm: #FBF6E9;

  /* Status */
  --success:    #1BB55C;
  --trustpilot: #00B67A;
  --ssl:        #003A70;
  --error-bg:   #FEEEEE;
}

/* ============================================================
   SUGGOII COLOR UTILITIES
   Background: .suggoii-brand-<color>
   Text:       .suggoii-brand-text-<color>
   ============================================================ */

/* --- BRAND CORE --------------------------------------------- */

/* Backgrounds */
.suggoii-brand-red       { background-color: var(--suggoii-red) !important; }
.suggoii-brand-red-2     { background-color: var(--suggoii-red-2) !important; }
.suggoii-brand-yellow    { background-color: var(--suggoii-yellow) !important; }
.suggoii-brand-black     { background-color: var(--suggoii-black) !important; }
.suggoii-brand-white     { background-color: var(--suggoii-white) !important; }
.suggoii-brand-cream     { background-color: var(--suggoii-cream) !important; }
.suggoii-brand-purple    { background-color: var(--suggoii-purple) !important; }

/* Text */
.suggoii-brand-text-red       { color: var(--suggoii-red) !important; }
.suggoii-brand-text-red-2     { color: var(--suggoii-red-2) !important; }
.suggoii-brand-text-yellow    { color: var(--suggoii-yellow) !important; }
.suggoii-brand-text-black     { color: var(--suggoii-black) !important; }
.suggoii-brand-text-white     { color: var(--suggoii-white) !important; }
.suggoii-brand-text-cream     { color: var(--suggoii-cream) !important; }
.suggoii-brand-text-purple    { color: var(--suggoii-purple) !important; }


/* --- NEUTRALS ----------------------------------------------- */

/* Backgrounds */
.suggoii-brand-ink-900      { background-color: var(--ink-900) !important; }
.suggoii-brand-ink-700      { background-color: var(--ink-700) !important; }
.suggoii-brand-ink-500      { background-color: var(--ink-500) !important; }
.suggoii-brand-ink-300      { background-color: var(--ink-300) !important; }
.suggoii-brand-ink-100      { background-color: var(--ink-100) !important; }
.suggoii-brand-paper        { background-color: var(--paper) !important; }
.suggoii-brand-cream-warm   { background-color: var(--cream-warm) !important; }

/* Text */
.suggoii-brand-text-ink-900      { color: var(--ink-900) !important; }
.suggoii-brand-text-ink-700      { color: var(--ink-700) !important; }
.suggoii-brand-text-ink-500      { color: var(--ink-500) !important; }
.suggoii-brand-text-ink-300      { color: var(--ink-300) !important; }
.suggoii-brand-text-ink-100      { color: var(--ink-100) !important; }
.suggoii-brand-text-paper        { color: var(--paper) !important; }
.suggoii-brand-text-cream-warm   { color: var(--cream-warm) !important; }


/* --- STATUS ------------------------------------------------- */

/* Backgrounds */
.suggoii-brand-success      { background-color: var(--success) !important; }
.suggoii-brand-trustpilot   { background-color: var(--trustpilot) !important; }
.suggoii-brand-ssl          { background-color: var(--ssl) !important; }
.suggoii-brand-error-bg     { background-color: var(--error-bg) !important; }

/* Text */
.suggoii-brand-text-success      { color: var(--success) !important; }
.suggoii-brand-text-trustpilot   { color: var(--trustpilot) !important; }
.suggoii-brand-text-ssl          { color: var(--ssl) !important; }
.suggoii-brand-text-error-bg     { color: var(--error-bg) !important; }

/* ============================================================
   SUGGOII FONT-ONLY UTILITY CLASSES
   ============================================================ */

.font-display,
.font-display * {
    font-family: var(--font-display) !important;
}

.font-script,
.font-script * {
    font-family: var(--font-script) !important;
}

.font-ui,
.font-ui * {
    font-family: var(--font-ui) !important;
}

.font-body,
.font-body * {
    font-family: var(--font-body) !important;
}

/* 3. BASE BODY */
body,
.entry-content,
.post-content,
p,
li,
dd, dt,
input, textarea, select, button {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--suggoii-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lead paragraph (first <p> in a post, or .has-large-font-size) */
.entry-content > p:first-of-type,
.has-large-font-size,
.lead {
  font-size: 18px;
  line-height: 1.65;
}

/* Small / fine print */
small,
.has-small-font-size,
figcaption,
.wp-caption-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* 4. HEADINGS — Gang of Three (display) for H1, H3, H6 */
h1, .h1,
.entry-title,
.wp-block-post-title,
.wp-block-heading.is-style-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--suggoii-black);
  margin: 0 0 16px;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--suggoii-black);
  margin: 32px 0 12px;
}

h6, .h6 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--suggoii-black);
  margin: 24px 0 8px;
}

/* 5. HEADINGS — Caveat Brush (script) for H2, H4, H5 */
h2, .h2 {
  font-family: var(--font-script);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 400;
  color: var(--suggoii-red);
  margin: 40px 0 16px;
}

h4, .h4 {
  font-family: var(--font-script);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--suggoii-black);
  margin: 24px 0 10px;
}

h5, .h5 {
  font-family: var(--font-script);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--suggoii-black);
  margin: 20px 0 8px;
}

/* 6. UI BLOCKS — Archivo Black */
.wp-block-button__link,
button,
.button,
input[type="submit"],
.menu-item > a,
.nav-menu a,
.widget-title,
.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suggoii-red);
}

/* 7. INLINE / RICH TEXT */
.entry-content strong,
.entry-content b { font-weight: 700; }

.entry-content blockquote,
.wp-block-quote {
  font-family: var(--font-script);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  color: var(--suggoii-red);
  border-left: 4px solid var(--suggoii-yellow);
  padding: 16px 24px;
  margin: 32px 0;
  font-weight: 400;
}

.entry-content code,
.wp-block-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

/* 8. GUTENBERG BLOCK EDITOR (so editing experience matches frontend) */
.editor-styles-wrapper,
.editor-styles-wrapper p,
.editor-styles-wrapper li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
.editor-styles-wrapper h1 { font-family: var(--font-display); text-transform: uppercase; }
.editor-styles-wrapper h2 { font-family: var(--font-script); color: var(--suggoii-red); }
.editor-styles-wrapper h3 { font-family: var(--font-display); text-transform: uppercase; }
.editor-styles-wrapper h4 { font-family: var(--font-script); }
.editor-styles-wrapper h5 { font-family: var(--font-script); }
.editor-styles-wrapper h6 { font-family: var(--font-display); text-transform: uppercase; }

/* ============================================================
   Suggoii buttons — works on .button, .elementor-button,
   .elementor-button-link
   ============================================================ */

.button,
.elementor-button,
.elementor-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2.5px solid var(--suggoii-black);
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s, background .12s;
  box-shadow: var(--shadow-sticker, 0 6px 0 0 var(--suggoii-black));
  background: #fff;
  color: var(--suggoii-black);
}

/* Lift / press */
.button:hover, .button:focus-visible,
.elementor-button:hover, .elementor-button:focus-visible,
.elementor-button-link:hover, .elementor-button-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 0 var(--suggoii-black);
  outline: none;
  color: var(--suggoii-black);
}
.button:active,
.elementor-button:active,
.elementor-button-link:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 0 var(--suggoii-black);
}
.button:disabled, .button[aria-disabled="true"],
.elementor-button:disabled, .elementor-button[aria-disabled="true"],
.elementor-button-link:disabled, .elementor-button-link[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-sticker, 0 6px 0 0 var(--suggoii-black));
}

/* --- Color variants ----------------------------------------- */
.button-red,
.elementor-button.button-red,
.elementor-button-link.button-red {
  background: var(--suggoii-red);
  color: #fff;
}
.button-red:hover,
.elementor-button.button-red:hover,
.elementor-button-link.button-red:hover { color: #fff; }

.button-yellow,
.elementor-button.button-yellow,
.elementor-button-link.button-yellow {
  background: var(--suggoii-yellow);
  color: var(--suggoii-black);
}

.button-black,
.elementor-button.button-black,
.elementor-button-link.button-black {
  background: var(--suggoii-black);
  color: var(--suggoii-yellow);
}
.button-black:hover,
.elementor-button.button-black:hover,
.elementor-button-link.button-black:hover { color: var(--suggoii-yellow); }

.button-cream,
.elementor-button.button-cream,
.elementor-button-link.button-cream {
  background: var(--suggoii-cream, #F4EFE6);
  color: var(--suggoii-black);
}

/* --- Ghost (no shadow / no fill) ---------------------------- */
.button-ghost,
.elementor-button.button-ghost,
.elementor-button-link.button-ghost {
  background: transparent;
  box-shadow: none;
}
.button-ghost:hover, .button-ghost:focus-visible,
.elementor-button.button-ghost:hover,
.elementor-button-link.button-ghost:hover {
  background: #F6F3EC;
  transform: none;
  box-shadow: none;
}
.button-ghost:active,
.elementor-button.button-ghost:active,
.elementor-button-link.button-ghost:active {
  transform: none;
  box-shadow: none;
}

/* --- Sizes -------------------------------------------------- */
.button-lg,
.elementor-button.button-lg,
.elementor-button-link.button-lg {
  padding: 18px 32px;
  font-size: 15px;
}
.button-sm,
.elementor-button.button-sm,
.elementor-button-link.button-sm {
  padding: 10px 18px;
  font-size: 11px;
  border-width: 2px;
  box-shadow: 0 4px 0 0 var(--suggoii-black);
}
.button-sm:hover, .button-sm:focus-visible,
.elementor-button.button-sm:hover,
.elementor-button-link.button-sm:hover {
  box-shadow: 0 6px 0 0 var(--suggoii-black);
}
.button-sm:active,
.elementor-button.button-sm:active,
.elementor-button-link.button-sm:active {
  box-shadow: 0 1px 0 0 var(--suggoii-black);
}

/* --- Full-width modifier ----------------------------------- */
.button-block,
.elementor-button.button-block,
.elementor-button-link.button-block { width: 100%; }

/* Strip Elementor's inner-text wrapper styling so our padding wins */
.elementor-button .elementor-button-text,
.elementor-button-link .elementor-button-text {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.elementor-button .elementor-button-content-wrapper,
.elementor-button-link .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* WP/Elementor link reset */
a.button, a.elementor-button, a.elementor-button-link { text-decoration: none; }
a.button:hover, a.elementor-button:hover, a.elementor-button-link:hover { text-decoration: none; }


/* ============================================================
   PARENT-WRAPPER VARIANTS
   For Elementor widgets (and any wrapper) where the class is
   applied to the OUTER element. Targets the inner button/anchor.
   Use these on Elementor button widgets, Add to Cart wrappers,
   or any container that holds a .button / .elementor-button /
   .elementor-button-link / <a> / <button>.
   Example: <div class="button-ghost-parent">...<a>...</a></div>
   ============================================================ */

/* --- COLOR PARENTS ----------------------------------------- */
.button-red-parent .button,
.button-red-parent .elementor-button,
.button-red-parent .elementor-button-link,
.button-red-parent > a,
.button-red-parent > button {
  background: var(--suggoii-red) !important;
  color: #fff !important;
}
.button-red-parent .button:hover,
.button-red-parent .elementor-button:hover,
.button-red-parent .elementor-button-link:hover,
.button-red-parent > a:hover,
.button-red-parent > button:hover { color: #fff !important; }

.button-yellow-parent .button,
.button-yellow-parent .elementor-button,
.button-yellow-parent .elementor-button-link,
.button-yellow-parent > a,
.button-yellow-parent > button {
  background: var(--suggoii-yellow) !important;
  color: var(--suggoii-black) !important;
}

.button-black-parent .button,
.button-black-parent .elementor-button,
.button-black-parent .elementor-button-link,
.button-black-parent > a,
.button-black-parent > button {
  background: var(--suggoii-black) !important;
  color: var(--suggoii-yellow) !important;
}
.button-black-parent .button:hover,
.button-black-parent .elementor-button:hover,
.button-black-parent .elementor-button-link:hover,
.button-black-parent > a:hover,
.button-black-parent > button:hover { color: var(--suggoii-yellow) !important; }

.button-cream-parent .button,
.button-cream-parent .elementor-button,
.button-cream-parent .elementor-button-link,
.button-cream-parent > a,
.button-cream-parent > button {
  background: var(--suggoii-cream, #F4EFE6) !important;
  color: var(--suggoii-black) !important;
}


/* --- GHOST PARENT (no shadow / no fill) -------------------- */
.button-ghost-parent .button,
.button-ghost-parent .elementor-button,
.button-ghost-parent .elementor-button-link,
.button-ghost-parent > a,
.button-ghost-parent > button {
  background: transparent !important;
  box-shadow: none !important;
}
.button-ghost-parent .button:hover,
.button-ghost-parent .button:focus-visible,
.button-ghost-parent .elementor-button:hover,
.button-ghost-parent .elementor-button:focus-visible,
.button-ghost-parent .elementor-button-link:hover,
.button-ghost-parent .elementor-button-link:focus-visible,
.button-ghost-parent > a:hover,
.button-ghost-parent > a:focus-visible,
.button-ghost-parent > button:hover,
.button-ghost-parent > button:focus-visible {
  background: #F6F3EC !important;
  transform: none !important;
  box-shadow: none !important;
}
.button-ghost-parent .button:active,
.button-ghost-parent .elementor-button:active,
.button-ghost-parent .elementor-button-link:active,
.button-ghost-parent > a:active,
.button-ghost-parent > button:active {
  transform: none !important;
  box-shadow: none !important;
}


/* --- SIZE PARENTS ------------------------------------------ */
.button-lg-parent .button,
.button-lg-parent .elementor-button,
.button-lg-parent .elementor-button-link,
.button-lg-parent > a,
.button-lg-parent > button {
  padding: 18px 32px !important;
  font-size: 15px !important;
}

.button-sm-parent .button,
.button-sm-parent .elementor-button,
.button-sm-parent .elementor-button-link,
.button-sm-parent > a,
.button-sm-parent > button {
  padding: 10px 18px !important;
  font-size: 11px !important;
  border-width: 2px !important;
  box-shadow: 0 4px 0 0 var(--suggoii-black) !important;
}
.button-sm-parent .button:hover,
.button-sm-parent .button:focus-visible,
.button-sm-parent .elementor-button:hover,
.button-sm-parent .elementor-button:focus-visible,
.button-sm-parent .elementor-button-link:hover,
.button-sm-parent .elementor-button-link:focus-visible,
.button-sm-parent > a:hover,
.button-sm-parent > button:hover {
  box-shadow: 0 6px 0 0 var(--suggoii-black) !important;
}
.button-sm-parent .button:active,
.button-sm-parent .elementor-button:active,
.button-sm-parent .elementor-button-link:active,
.button-sm-parent > a:active,
.button-sm-parent > button:active {
  box-shadow: 0 1px 0 0 var(--suggoii-black) !important;
}


/* --- FULL-WIDTH PARENT ------------------------------------- */
.button-block-parent .button,
.button-block-parent .elementor-button,
.button-block-parent .elementor-button-link,
.button-block-parent > a,
.button-block-parent > button { width: 100% !important; }


.header-pop{
    box-shadow: none !important;
}


/* ============================================================
MAIN NAVBAR STYLES
============================================================ */


/* Smaller laptops (MacBook, etc.) — 50% width */
.main-menu-sub-menu-parent {
  width: 50% !important;
}

/* Bigger desktops — 30% width */
@media (min-width: 1800px) {
  .main-menu-sub-menu-parent {
    width: 30% !important;
  }
}

/* ============================================================
   1. Row layout — 4 cols by-anime, 3 cols collectibles
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-submenu-items-collectibles .rtsb-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-submenu-items-by-anime .rtsb-row > .rtsb-col-grid,
.header-submenu-items-collectibles .rtsb-row > .rtsb-col-grid {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .header-submenu-items-by-anime .rtsb-row,
  .header-submenu-items-collectibles .rtsb-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
   2. Tile (each card)
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  background: #F4EFE6 !important;
  background-color: #F4EFE6 !important;
  border: 2px solid #0C0C0C !important;
  border-radius: 12px !important;

  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  isolation: isolate;

  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

/* by-anime tile — taller, equal height for 2-line series names */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid {
  min-height: 86px !important;
  padding: 12px 14px !important;
}

/* collectibles tile — content-driven, tighter */
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid {
  min-height: 0 !important;
  padding: 10px 12px !important;
}


/* ============================================================
   3. Accent dot (by-anime only)
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid::before {
  content: "" !important;
  display: block !important;
  position: relative !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #E60013 !important;
  border: 1.5px solid #0C0C0C !important;
  margin: 0 0 8px 0 !important;
  z-index: 2;
  pointer-events: none;
  transition: transform .15s ease, background .15s ease;
}

.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid::before {
  display: none !important;
  content: none !important;
}


/* ============================================================
   4. Title text
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid .rtsb-grid-title,
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid h3,
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid a,
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid span,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid .rtsb-grid-title,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid h3,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid a,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid span {
  position: relative;
  z-index: 1;
  font-family: "Archivo Black", "Arial Black", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #0C0C0C !important;
  text-decoration: none !important;
}


/* ============================================================
   5. Optional image base
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid img,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid img {
  position: relative;
  z-index: 1;
  transition: transform .15s ease;
}


/* ============================================================
   6. Hover
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:hover,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 #0C0C0C !important;
  background: #F4EFE6 !important;
}

.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:hover::before {
  transform: scale(1.3);
}


/* ============================================================
   7. Press / 8. Focus
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:active,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 0 #0C0C0C !important;
}

.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:focus-visible,
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:focus-visible {
  outline: 3px solid #FFD31A !important;
  outline-offset: 3px !important;
}


/* ============================================================
   9. Per-tile accent dot palette (by-anime only)
   ============================================================ */
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 1)::before { background: #E60013 !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 2)::before { background: #FF9A1C !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 3)::before { background: #1BB55C !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 4)::before { background: #BF00FF !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 5)::before { background: #8B6F47 !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 6)::before { background: #00B5D8 !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 7)::before { background: #FFD31A !important; }
.header-submenu-items-by-anime .rtsb-row .rtsb-col-grid:nth-child(8n + 8)::before { background: #FF7AA8 !important; }


/* ============================================================
   10. Inner wrapper — TWO-COLUMN grid for collectibles
   Col 1: icon (spans 2 rows) · Col 2: title (row 1) + count (row 2)
   ============================================================ */
.header-submenu-items-collectibles .rtsb-category-item {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  justify-items: start !important;
  height: 100% !important;
  width: 100% !important;
}

/* by-anime stays single-column flex */
.header-submenu-items-by-anime .rtsb-category-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: 100% !important;
  width: 100% !important;
}

/* Make .rtsb-product-img invisible to layout */
.header-submenu-items-collectibles .rtsb-product-img {
  display: contents !important;
}

.header-submenu-items-collectibles .rtsb-product-img figure {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.header-submenu-items-collectibles .rtsb-product-img .category-title,
.header-submenu-items-collectibles .rtsb-product-img h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

.header-submenu-items-collectibles .product-count {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: -2px 0 0 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  color: #777 !important;
}

.header-submenu-items-by-anime .product-count {
  font-size: 11px !important;
  color: #777 !important;
}

.header-submenu-items-by-anime .category-title,
.header-submenu-items-collectibles .category-title {
  font-size: 13px !important;
}

.header-submenu-items-by-anime .category-wrapper,
.header-submenu-items-collectibles .category-wrapper {
  border-bottom: 0 !important;
}


/* ============================================================
   11. Collectibles — icon chip styling
   ============================================================ */
.header-submenu-items-collectibles .rtsb-product-img figure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1 !important;

  border-radius: 10px !important;
  border: 2px solid #0C0C0C !important;
  box-shadow: inset 0 0 0 1.5px #fff !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: #E60013 !important;
  transition: transform .15s ease, background .15s ease !important;
}

.header-submenu-items-collectibles .rtsb-product-img figure .rtsb-img-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header-submenu-items-collectibles .rtsb-product-img figure img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  aspect-ratio: 1 / 1 !important;

  display: block !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;

  transition: transform .15s ease !important;
}

.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:hover .rtsb-product-img figure {
  transform: rotate(-4deg) scale(1.05);
}

.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:hover .rtsb-product-img figure img {
  transform: scale(1.08);
}

.header-submenu-items-by-anime .rtsb-product-img{
    column-gap: 0 !important;
}
/* ============================================================
   12. Collectibles — per-tile chip color cycle (every 6)
   ============================================================ */
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 1) .rtsb-product-img figure { background: #FF9A1C !important; }
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 2) .rtsb-product-img figure { background: #8B6F47 !important; }
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 3) .rtsb-product-img figure { background: #E60013 !important; }
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 4) .rtsb-product-img figure { background: #FFD31A !important; }
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 5) .rtsb-product-img figure { background: #FF7AA8 !important; }
.header-submenu-items-collectibles .rtsb-row .rtsb-col-grid:nth-child(6n + 6) .rtsb-product-img figure { background: #1BB55C !important; }

/* ============================================================
LOGIN POPUP STYLES
============================================================ */

.main-auth-popup{
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);  /* Safari */
}
.main-auth-popup .dialog-widget-content {
  background-color: transparent;
  border-radius: 20px !important;
  box-shadow: 0px 10px 0 0 #0C0C0C !important;
  overflow: visible !important;
}

/* ============================================================
   Suggoii — Auth modal styling (.main-auth-popup)
   - Tabs: pill segmented control (Elementor nested-tabs)
   - Close: white circle button with hard ink shadow
   ============================================================ */


/* ------------------------------------------------------------
   1. Tab strip container — cream pill with ink border
   ------------------------------------------------------------ */
.main-auth-popup .e-n-tabs-heading {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: 0 !important;
  background: #F4EFE6 !important;
  border: 2.5px solid #0C0C0C !important;
  border-radius: 999px !important;
  padding: 4px !important;
  margin: 0 auto 24px !important;
  width: auto !important;
  max-width: 360px !important;
  min-width: 280px !important;
  overflow: hidden !important;
}

/* Hide Elementor-injected scroll arrows */
.main-auth-popup .e-n-tabs-heading::before,
.main-auth-popup .e-n-tabs-heading::after {
  display: none !important;
}


/* ------------------------------------------------------------
   2. Each tab button — inactive state
   ------------------------------------------------------------ */
.main-auth-popup .e-n-tab-title {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 9px 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;

  font-family: "Archivo Black", "Arial Black", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #666 !important;
  text-align: center !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
}

.main-auth-popup .e-n-tab-title::before,
.main-auth-popup .e-n-tab-title::after {
  display: none !important;
  content: none !important;
}

.main-auth-popup .e-n-tab-title .e-n-tab-title-text {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  display: block !important;
  line-height: 1 !important;
}


/* ------------------------------------------------------------
   3. Active tab — black fill, yellow text
   ------------------------------------------------------------ */
.main-auth-popup .e-n-tab-title[aria-selected="true"],
.main-auth-popup .e-n-tab-title.e-active {
  background: #0C0C0C !important;
  color: #FFD31A !important;
}

.main-auth-popup .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.main-auth-popup .e-n-tab-title.e-active .e-n-tab-title-text {
  color: #FFD31A !important;
}


/* ------------------------------------------------------------
   4. Hover (inactive only) + focus
   ------------------------------------------------------------ */
.main-auth-popup .e-n-tab-title:not([aria-selected="true"]):hover {
  color: #0C0C0C !important;
  background: rgba(12, 12, 12, .06) !important;
}

.main-auth-popup .e-n-tab-title:focus-visible {
  outline: 2px solid #E60013 !important;
  outline-offset: 2px !important;
}


/* ------------------------------------------------------------
   5. Tab content panel — strip Elementor defaults
   ------------------------------------------------------------ */
.main-auth-popup .e-n-tabs-content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}


/* ============================================================
   6. Close button — white circle, ink border, hard shadow
   Adjust the selector below to match whichever class your
   close button uses inside .main-auth-popup.
   ============================================================ */
.main-auth-popup .auth-popup-close,
.main-auth-popup .popup-close,
.main-auth-popup .modal-close,
.main-auth-popup [aria-label="Close"],
.main-auth-popup .close-button,
.main-auth-popup button.close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #fff !important;
  background-color: #fff !important;
  border: 2px solid #0C0C0C !important;
  border-radius: 999px !important;

  color: #0C0C0C !important;
  font-size: 14px !important;
  line-height: 1 !important;

  cursor: pointer !important;
  box-shadow: 0 2px 0 0 #0C0C0C !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

/* Icon / × glyph inside the close button */
.main-auth-popup .auth-popup-close svg,
.main-auth-popup .popup-close svg,
.main-auth-popup .modal-close svg,
.main-auth-popup [aria-label="Close"] svg,
.main-auth-popup .close-button svg,
.main-auth-popup button.close svg,
.main-auth-popup .auth-popup-close i,
.main-auth-popup .popup-close i,
.main-auth-popup .modal-close i,
.main-auth-popup [aria-label="Close"] i,
.main-auth-popup .close-button i,
.main-auth-popup button.close i {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  color: #0C0C0C !important;
  fill: #0C0C0C !important;
  stroke: #0C0C0C !important;
}

/* Hover — lift + bigger shadow */
.main-auth-popup .auth-popup-close:hover,
.main-auth-popup .popup-close:hover,
.main-auth-popup .modal-close:hover,
.main-auth-popup [aria-label="Close"]:hover,
.main-auth-popup .close-button:hover,
.main-auth-popup button.close:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 0 0 #0C0C0C !important;
  background: #FFD31A !important;
}

/* Press — squish back down */
.main-auth-popup .auth-popup-close:active,
.main-auth-popup .popup-close:active,
.main-auth-popup .modal-close:active,
.main-auth-popup [aria-label="Close"]:active,
.main-auth-popup .close-button:active,
.main-auth-popup button.close:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 0 #0C0C0C !important;
}

/* Focus ring */
.main-auth-popup .auth-popup-close:focus-visible,
.main-auth-popup .popup-close:focus-visible,
.main-auth-popup .modal-close:focus-visible,
.main-auth-popup [aria-label="Close"]:focus-visible,
.main-auth-popup .close-button:focus-visible,
.main-auth-popup button.close:focus-visible {
  outline: 2px solid #E60013 !important;
  outline-offset: 3px !important;
}

.main-popup-auth-form .button{
    box-shadow: 0 6px 0 0 #0C0C0C !important;
}
.main-popup-auth-form .login, .main-popup-auth-form .register{
    margin-top: 0 !important;
}

.suggoii-hero-background {
  position: relative;
  background-color: #E60013;
  overflow: hidden;
  isolation: isolate; /* keeps ::before / ::after behind content */
}

/* Diagonal yellow stripe (right side) */
.suggoii-hero-background::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 30%;
  height: 140%;
  background: #FFD31A;
  transform: rotate(12deg);
  transform-origin: center;
  z-index: -2;
  pointer-events: none;
}

/* Yellow circle with black border (bottom-left) */
.suggoii-hero-background::after {
  content: "";
  position: absolute;
  bottom: -3%;
  left: -4%;
  width: 22%;
  aspect-ratio: 1 / 1;
  background: #FFD31A;
  border: 4px solid #0C0C0C;
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
}

/* Make sure the container is tall enough on mobile */
@media (max-width: 768px) {
  .suggoii-hero-background::before { width: 40%; right: -8%; }
  .suggoii-hero-background::after  { width: 28%; }
}

.suggoii-breadcrumb-styling * {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

.suggoii-checkout-breadcrumb-styling {
    color: #0c0c0c !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}

.suggoii-shop-filters .rtsb-product-filters{
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
}
.suggoii-main-shop-listing .view-mode ul{
    display: none;
}
.suggoii-store-products .filter-item{
    border: 2px solid var(--suggoii-black) !important;
}
.suggoii-store-products .remove-filter .rtsb-icon{
    border: 2px solid var(--suggoii-black) !important;
    background-color: var(--suggoii-red) !important;
}
.suggoii-store-products .filter-name,
.suggoii-store-products .filter-name *{
    font-family: "Inter", Sans-serif !important;
    font-size: 15px !important;
    color: var(--suggoii-black) !important;
}
.suggoii-store-products .rtsb-clear-filters{
    font-family: "Inter", Sans-serif !important;
    font-size: 15px !important;
    color: var(--suggoii-black) !important;
}
.suggoii-store-products .rtsb-clear-filters:hover {
    color: var(--suggoii-red) !important;
}
.suggoii-products-search .rt-product-grid{
    border: 2px solid var(--suggoii-black) !important;
    border-radius: 20px !important;
    box-shadow: rgb(12, 12, 12) 0px 4px 0px 0px !important;
    padding: 0 !important;
}
.suggoii-products-search .rt-product-thumb{
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 2px solid var(--suggoii-black) !important;
    margin-bottom: 10px !important;
}
.suggoii-products-search .product-cat,
.suggoii-products-search .product-cat a{
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(230, 0, 19) !important;
}
.suggoii-products-search .rt-title,
.suggoii-products-search .rt-title a{
    font-family: "Archivo Black", sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    margin: 2px 0px 0px;
    line-height: 1.15;
    color: rgb(12, 12, 12);
}
.suggoii-products-search .price,
.suggoii-products-search .price *{
    margin-top: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: 15px;
    color: rgb(12, 12, 12);
}
.suggoii-products-search .orderby{
    border: 2px solid var(--suggoii-black) !important;
    color: var(--suggoii-black) !important;
    border-radius: 20px !important;
}
.suggoii-products-search .view-mode ul{
    display: none;
}
.suggoii-product-archive-page .elementor-widget-woocommerce-archive-description,
.suggoii-product-archive-page .elementor-widget-woocommerce-archive-description *{
    color: #fff;
}
.suggoii-store-products .rtsb-load-more button,
.suggoii-product-archive-page .rtsb-load-more button{
    box-shadow: rgb(12, 12, 12) 0px 4px 0px 0px !important;
}
.suggoii-store-products .rtsb-load-more button:hover,
.suggoii-product-archive-page .rtsb-load-more button:hover{
    box-shadow: rgb(12, 12, 12) 0px 8px 0px 0px !important;
}
.suggoii-mini-cart .elementor-menu-cart__main{
    padding: 0 !important;
}
.woocommerce a.added_to_cart {
    display: none !important;
}
.suggoii-shop-result-count * {
    color: var(--suggoii-black) !important;
    font-size: 12px !important;
}