.elementor-kit-93{--e-global-color-primary:#E01B1B;--e-global-color-secondary:#FFBC3D;--e-global-color-text:#F2F0EB;--e-global-color-accent:#0F0F11;--e-global-color-inkpanel:#17171A;--e-global-color-inkhi:#1F1F23;--e-global-color-inkinset:#0A0A0C;--e-global-color-text2:#A8A49B;--e-global-color-text3:#726F68;--e-global-color-goldhi:#FFD280;--e-global-color-redhi:#FF2F2F;--e-global-color-hairline:rgba(242,240,235,0.12);--e-global-color-hairstr:rgba(242,240,235,0.22);--e-global-typography-primary-font-family:"Big Shoulders Display";--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:0.86em;--e-global-typography-primary-letter-spacing:-0.01em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.15em;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.14em;color:#F2F0EB;font-family:"Archivo", Sans-serif;font-size:15px;line-height:1.55em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-93 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   IMAGINE IT 3D - SITE STYLES
   --------------------------------------------------------------------------
   Everything below is safe to edit. Change a value in the BRAND SETTINGS
   block and it updates everywhere on the site at once.
   Do not delete the lines starting with -- : those are the settings.
   ========================================================================== */

:root {

  /* --- BRAND COLOURS ---------------------------------------------------
     Change these to restyle the whole site.                            */
  --ink:            #0f0f11;   /* main page background (near black)     */
  --ink-2:          #17171a;   /* cards, footer                         */
  --ink-3:          #1f1f23;   /* icon wells, hover panels              */
  --surface-inset:  #0a0a0c;   /* form fields, dropzones                */
  --bone:           #f2f0eb;   /* main text (off white)                 */
  --text-2:         #a8a49b;   /* body paragraphs                       */
  --text-3:         #726f68;   /* small labels, captions                */
  --signal-red:     #e01b1b;   /* buttons, sale prices, announcement    */
  --signal-red-hi:  #ff2f2f;   /* button colour on hover                */
  --gold:           #ffbc3d;   /* links, highlights, the accent word    */
  --gold-hi:        #ffd280;   /* gold on hover                         */

  /* --- LINES -----------------------------------------------------------
     Thin dividers. This site uses lines instead of drop shadows.       */
  --hairline:        rgba(242,240,235,.12);
  --hairline-strong: rgba(242,240,235,.22);

  /* --- BACKGROUNDS ------------------------------------------------------ */
  --gradient-panel:  linear-gradient(180deg,#1b1b20 0%,#121215 100%);
  --gradient-scrim:  linear-gradient(180deg,rgba(15,15,17,0) 0%,rgba(15,15,17,.72) 62%,#0f0f11 100%);
  --gradient-accent: linear-gradient(100deg,#e01b1b 0%,#ad0000 100%);

  /* --- PHOTO TREATMENT --------------------------------------------------
     Product photos sit slightly grey, then go full colour on hover.    */
  --img-rest:   grayscale(.28);
  --img-hover:  grayscale(0);
  --img-banner: grayscale(.4) brightness(.75);

  /* --- CORNERS ---------------------------------------------------------- */
  --r-card:    12px;   /* cards                    */
  --r-control: 8px;    /* buttons, inputs          */
  --r-badge:   3px;    /* badges, checkboxes       */
  --r-pill:    999px;  /* filter chips only        */

  /* --- FONTS (also set in Site Settings > Global Fonts) ----------------- */
  --font-display: 'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:    'Archivo',system-ui,sans-serif;
  --font-mono:    'IBM Plex Mono',ui-monospace,monospace;

  --ease: cubic-bezier(.2,.6,.2,1);
}


/* ==========================================================================
   REUSABLE STYLES
   To use one, open any element > Advanced > CSS Classes and type the name
   without the dot. Example: type  ii-label
   ========================================================================== */

/* Small uppercase caption in the typewriter font. */
.ii-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-3);
}

/* Prices, quantities, dimensions - keeps numbers aligned. */
.ii-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

/* Big condensed uppercase headline. */
.ii-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--bone);
}

/* Put <em> around ONE word in a heading to make it gold. One per page. */
.ii-display em { font-style: normal; color: var(--gold); }

/* Standard card: dark panel, thin line, lifts slightly on hover. */
.ii-card {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: border-color .14s var(--ease), transform .14s var(--ease);
}
.ii-card:hover { border-color: var(--gold); transform: translateY(-1px); }

/* Recessed card, for sidebars and callouts. */
.ii-inset {
  background: var(--surface-inset);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

/* A single thin divider line above an element. */
.ii-hair { border-top: 1px solid var(--hairline); }

/* Product photo: grey at rest, full colour on hover. */
.ii-photo img {
  filter: var(--img-rest);
  transition: filter .32s var(--ease);
}
.ii-photo:hover img { filter: var(--img-hover); }


/* ==========================================================================
   SITEWIDE RULES - leave these alone unless you know why
   ========================================================================== */

/* Gold outline when tabbing with a keyboard (accessibility). */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Highlight colour when selecting text. */
::selection { background: var(--gold); color: var(--ink); }

/* This design uses lines, never drop shadows. Removes WooCommerce defaults. */
.woocommerce ul.products li.product,
.woocommerce div.product { box-shadow: none; }

/* Respect visitors who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* The IMAGINE IT 3D logo, set in live type (there is no logo image file).
   Used on a Heading widget containing:  IMAGINE IT<sup>3D</sup>          */
.ii-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.ii-wordmark sup {
  font-size: .43em;
  letter-spacing: .04em;
  color: var(--gold);
  vertical-align: super;
  margin-left: .16em;
}

/* ==========================================================================
   HEADER FIXES
   ========================================================================== */

/* Links inside the logo and the phone number should take the colour of the
   text around them, not the site link colour. Without this the logo shows
   red and the phone number shows gold.                                    */
.ii-wordmark,
.ii-wordmark a,
.ii-wordmark a:hover { color: var(--bone); }
.ii-label a,
.ii-label a:hover { color: inherit; }

/* Announcement bar: kill the default paragraph spacing so the text sits
   properly centred in the red strip.                                      */
.ii-announce p { margin: 0; line-height: 1; }

/* Square icon buttons in the header (search and cart).                     */
.ii-iconbtn .elementor-search-form__toggle,
.ii-iconbtn .elementor-menu-cart__toggle .elementor-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-control);
  color: var(--bone);
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.ii-iconbtn .elementor-search-form__toggle:hover,
.ii-iconbtn .elementor-menu-cart__toggle .elementor-button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Hide the cart subtotal text - the header shows the icon only. */
.ii-iconbtn .elementor-button-text { display: none; }

/* Cart item count bubble. */
.ii-iconbtn .elementor-button-icon [data-counter] {
  background: var(--signal-red);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* ==========================================================================
   PRODUCT CARD  (Templates > Theme Builder > Product Card)
   ========================================================================== */

/* Square photo well. */
.ii-photo { aspect-ratio: 1 / 1; }
.ii-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NEW / POPULAR badge sitting on the photo. */
.ii-badge ul,
.ii-badge li { margin: 0; padding: 0; list-style: none; }
.ii-badge .elementor-icon-list-text,
.ii-badge a {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  background: var(--signal-red);
  color: var(--bone);
  border-radius: var(--r-badge);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Hide the badge entirely when the product has no tag. */
.ii-badge:not(:has(.elementor-icon-list-text)) { display: none; }

/* Product name - body font, not the display font. */
.ii-card-title,
.ii-card-title a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  color: var(--bone);
  margin: 0;
}
.ii-card-title a:hover { color: var(--gold); }

/* Price - typewriter font, aligned digits. */
.ii-price .woocommerce-Price-amount,
.ii-price .amount {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
/* Sale price: old price struck through and greyed, new price in red. */
.ii-price del .woocommerce-Price-amount {
  color: var(--text-3);
  font-size: 13px;
  text-decoration: line-through;
}
.ii-price ins { text-decoration: none; }
.ii-price ins .woocommerce-Price-amount { color: var(--signal-red); }
/* Empty photo well: show a placeholder until a product image is uploaded. */
.ii-photo:not(:has(img))::after {
  content: "PRODUCT PHOTO";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-3);
}

/* ==========================================================================
   CART PANEL + SMALL HEADER FIXES
   ========================================================================== */

/* Paragraph spacing inside small mono labels - keeps the phone number and
   similar one-liners vertically centred in their row.                     */
.ii-label p { margin: 0; line-height: 1; }

/* --- Slide-out cart panel ------------------------------------------------
   WooCommerce ships this panel white. Repaint it to match the site.     */
.elementor-menu-cart__container,
.elementor-menu-cart__main {
  background-color: var(--ink) !important;
  color: var(--bone);
  border-left: 1px solid var(--hairline);
}
.elementor-menu-cart__container { background-color: rgba(15,15,17,.72) !important; }

.elementor-menu-cart__main *,
.elementor-menu-cart__main a { color: var(--bone); }

.elementor-menu-cart__product {
  border-bottom: 1px solid var(--hairline) !important;
}
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--bone);
}
.elementor-menu-cart__product-price,
.elementor-menu-cart__subtotal,
.elementor-menu-cart__subtotal .woocommerce-Price-amount {
  font-family: var(--font-mono);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.elementor-menu-cart__subtotal { border-top: 1px solid var(--hairline); }

/* Remove-item x */
.elementor-menu-cart__product-remove,
.elementor-menu-cart__product .remove {
  color: var(--text-3) !important;
  border: 0 !important;
}
.elementor-menu-cart__product-remove:hover,
.elementor-menu-cart__product .remove:hover { color: var(--signal-red) !important; }

/* Close button */
.elementor-menu-cart__close-button { color: var(--bone) !important; }

/* View Cart / Checkout buttons */
.elementor-menu-cart__footer-buttons .elementor-button {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-control);
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--hairline-strong);
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { border-color: var(--gold); }
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--signal-red);
  color: var(--bone);
  border: 1px solid transparent;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { background: var(--signal-red-hi); }

/* Empty-cart message */
.elementor-menu-cart__empty-message { color: var(--text-2); font-family: var(--font-body); }

/* --- Header: vertical centring for one-line mono text --------------------
   The Text Editor widget wraps content in a <p>. Zeroing the margin is not
   enough on its own - the widget box also has to centre its contents.   */
.ii-inline,
.ii-inline .elementor-widget-container {
  display: flex;
  align-items: center;
  height: 100%;
}
.ii-inline p { margin: 0; line-height: 1; }


/* --- Compact header nav (tablet + mobile) --------------------------------
   Full-width dropdown panel rather than a small floating menu.          */
.ii-compact-nav .elementor-nav-menu--dropdown {
  background-color: var(--ink);
  border-top: 1px solid var(--hairline);
}
.ii-compact-nav .elementor-nav-menu--dropdown a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.ii-compact-nav .elementor-menu-toggle {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-control);
  width: 36px;
  height: 36px;
  padding: 0;
}
.ii-compact-nav .elementor-menu-toggle:hover { border-color: var(--gold); }

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* Keep body copy to a comfortable reading width. */
.ii-measure { max-width: 47ch; }

/* Buttons: uppercase, tracked, square-ish corners. */
.ii-btn .elementor-button {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-control);
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .08s var(--ease);
}
.ii-btn .elementor-button:hover { transform: translateY(-1px); }
.ii-btn:not(.ii-btn-outline) .elementor-button:hover { background-color: var(--signal-red-hi); }
.ii-btn-outline .elementor-button:hover { border-color: var(--gold); }

/* Static ticker strip - spaced out like the scrolling original. */
.ii-ticker-static p { letter-spacing: .18em; }

/* Stat row: hairline between columns, not just above and below. */
.ii-stat-col + .ii-stat-col { border-left: 1px solid var(--hairline); padding-left: 24px; }

@media (max-width: 767px) {
  .ii-stat-col + .ii-stat-col { border-left: 0; padding-left: 0; }
}/* End custom CSS */