/*
    Base colors
    --colour-primary: var(--e-global-color-primary);
    --colour-secondary: var(--e-global-color-secondary);
    --colour-text: var(--e-global-color-text);
    --colour-highlight: var(--e-global-color-accent);
    --colour-transparent: var(--e-global-color-bb538e9);
    --colour-white: var(--e-global-color-6d76ede);
    --colour-black: var(--e-global-color-e5036a3);
    
    Grey scale
    --colour-grey-050: var(--e-global-color-059fb0d);
    --colour-grey-100: var(--e-global-color-ba3c86b);
    --colour-grey-200: var(--e-global-color-09f7db5);
    --colour-grey-300: var(--e-global-color-9400f5b);
    --colour-grey-400: var(--e-global-color-125071d);
    --colour-grey-500: var(--e-global-color-da76217);
    --colour-grey-600: var(--e-global-color-d4dd4f0);
    --colour-grey-700: var(--e-global-color-b956fa2);
    --colour-grey-800: var(--e-global-color-6455446);
    --colour-grey-900: var(--e-global-color-5b7711a);
    --colour-grey-950: var(--e-global-color-c70cd3a);
    
    Primary variations
    --colour-primary-050: var(--e-global-color-cef1a2c);
    --colour-primary-100: var(--e-global-color-4aebc41);
    --colour-primary-200: var(--e-global-color-d9b30b3);
    --colour-primary-300: var(--e-global-color-7cc0346);
    --colour-primary-400: var(--e-global-color-fe174df);
    --colour-primary-500: var(--e-global-color-4383d73);
    --colour-primary-600: var(--e-global-color-41c3694);
    --colour-primary-700: var(--e-global-color-d96f3a9);
    --colour-primary-800: var(--e-global-color-361a3a4);
    --colour-primary-900: var(--e-global-color-9f7f180);
    --colour-primary-950: var(--e-global-color-82dc0dd);
    
    Secondary variations
    --colour-secondary-050: var(--e-global-color-6f90f2f);
    --colour-secondary-100: var(--e-global-color-cd3e5f8);
    --colour-secondary-200: var(--e-global-color-d486826);
    --colour-secondary-300: var(--e-global-color-c90fb5c);
    --colour-secondary-400: var(--e-global-color-25ce7e7);
    --colour-secondary-500: var(--e-global-color-49a15df);
    --colour-secondary-600: var(--e-global-color-e510d2c);
    --colour-secondary-700: var(--e-global-color-6316dd3);
    --colour-secondary-800: var(--e-global-color-e2d0c98);
    --colour-secondary-900: var(--e-global-color-a99c1e1);
    --colour-secondary-950: var(--e-global-color-8c48576);
    
    Feedback colors
    --colour-feedback-error: var(--e-global-color-4e3cb89);
    --colour-feedback-warning: var(--e-global-color-0540424);
    --colour-feedback-success: var(--e-global-color-3897f3d);
*/


/* =================================================================
   TEXT - Utility Classes
   ================================================================= */
    .font-uppercase *    { text-transform: uppercase; }
    .font-lowercase *    { text-transform: lowercase; }
    .font-capitalize *   { text-transform: capitalize; }
    .font-straight *     { text-transform: normal; }
    .font-underline *    { text-decoration-line: underline; }
    .font-line-through * { text-decoration-line: line-through; } /* fixed typo */
    .font-italic *       { font-style: italic; }
    .font-normal *       { font-style: normal; }
    .font-reset *        { font-style: normal; text-transform: normal; text-decoration: none; }

    .font-weight-100 * { font-weight: 100 !important; }
    .font-weight-200 * { font-weight: 200 !important; }
    .font-weight-300 * { font-weight: 300 !important; }
    .font-weight-400 * { font-weight: 400 !important; }
    .font-weight-500 * { font-weight: 500 !important; }
    .font-weight-600 * { font-weight: 600 !important; }
    .font-weight-700 * { font-weight: 700 !important; }
    .font-weight-800 * { font-weight: 800 !important; }
    .font-weight-900 * { font-weight: 900 !important; }

    .font-spacing-2xs { letter-spacing: -0.032em; }
    .font-spacing-xs  { letter-spacing: -0.027em; }
    .font-spacing-s   { letter-spacing: -0.022em; }
    .font-spacing-m   { letter-spacing: 0; }
    .font-spacing-l   { letter-spacing: 0.022em; }
    .font-spacing-xl  { letter-spacing: 0.027em; }
    .font-spacing-2xl { letter-spacing: 0.032em; }


/* =================================================================
   JETENGINE/CROCOBLOCK - Widget Enhancements
   ================================================================= */

/* Testimonial
   Default widget lacks wrapper padding controls
   ACSS variables ensure consistent spacing across site */
.jet-testimonials__content {
    padding: var(--space-xl); /* Main content padding */
    gap: var(--space-3xs); /* Element spacing within testimonial */
}

/* JetFilters
   Removes the focus effect when its selected */
.jet-select__control:focus,
.jet-select__control:focus-visible,
.jet-select__control:focus-within,
.jet-sorting-select:focus,
.jet-sorting-select:focus-visible,
.jet-sorting-select:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* ================================================================
   WOOCOMMERCE BASE TWEAKS
   ================================================================ */

/* Sale price - Removes underline to improve readability */
.product-item-standard .product-price ins { text-decoration: none; }

/* Regular price - Sets a neutral colour, reduces size and improves readability */
.product-item-standard .product-price del {
    color: var(--e-global-color-9400f5b);
    font-weight: normal;
    font-size: 0.74em;
    text-decoration: none;
}

/* Finds and inverts regular and sale price order to improve presentation consistency */
.product-item-standard .product-price .jet-listing-dynamic-field__content:has(del):has(ins) {   
    display: flex;
    flex-direction: row-reverse;
    column-gap: 0.3em;
}

/* Hides "in stock" label */
.product-item-standard .product-stock:has(.in-stock) { display: none; }

/* Stock label as a margin below that shouldn't */
.product-item-standard .product-stock p { margin-bottom: 0; }

/**
* PRODUCT LISTING IMAGE STRETCHING
* ================================
* Forces JetEngine Dynamic Image widgets to fill their container wrapper
* with consistent 4:3 aspect ratio for product grid layouts
* 
* Structure:
* .wrapper-image (container)
*   └── .product-image (widget)
*       └── .jet-listing-dynamic-image__img (actual image)
* 
* Usage: Apply .wrapper-image to container and .product-image to widget
*/

/* Main image container - sets 4:3 aspect ratio and positioning context */
.wrapper-image {
  position: relative;
  width: 100%;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
}

/* Force Elementor and JetEngine containers to fill wrapper dimensions */
.wrapper-image .elementor-widget-container,
.wrapper-image .jet-listing-dynamic-image {
  width: 100%;
  height: 100%;
}

/* Dynamic image widget - stretch image to fill container with proper aspect ratio */
.image-featured .jet-listing-dynamic-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =================================================================
   TYPOGRAPHY - Responsive Vertical Text
   ================================================================= */

/* Vertical Heading - Mobile-First Approach
   90-degree rotation using writing-mode
   Reverts to horizontal on mobile for readability */
.responsive-vertical-heading { writing-mode: vertical-rl; }

/* Mobile Override - Horizontal Text Below 768px
   Improves mobile UX and prevents layout issues */
@media (max-width: 768px) { .responsive-vertical-heading { writing-mode: horizontal-tb; } }

/* Upside-Down Vertical Text - 180° Rotation
   Combines writing-mode with transform for full rotation
   White-space and overflow prevent text wrapping issues */
.vertical-heading {
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Full 180-degree flip */
    white-space: nowrap; /* Prevents text wrapping */
    display: inline-block; /* Maintains transform capability */
    overflow: visible; /* Ensures rotated text stays visible */
}