/**
 * Urbangap Plugin — Public Stylesheet
 *
 * Aggregated styles for all custom elements provided by the plugin.
 * Each element is wrapped between visible delimiter comments so that
 * sections are easy to locate. When adding a new element, append a
 * new section at the bottom following the same pattern.
 *
 * Naming convention: all classes are prefixed with .urbangap- and
 * follow BEM ('.block__element--modifier').
 */


/* ============================================================
 * ELEMENT — Scroll Indicator
 * Class: Urbangap_Scroll_Indicator
 * File:  public/elements/class-urbangap-scroll-indicator.php
 * ============================================================ */

/* Safety: force position:relative on any WPBakery / Uncode row
   that contains a scroll indicator, in case the theme strips it. */
.vc_row:has(.urbangap-scroll-indicator),
.wpb_row:has(.urbangap-scroll-indicator),
.row-container:has(.urbangap-scroll-indicator) {
    position: relative;
}

.urbangap-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.urbangap-scroll-indicator-clickable {
    pointer-events: auto;
    cursor: pointer;
}

.urbangap-scroll-indicator-label {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.urbangap-scroll-indicator-clickable:hover .urbangap-scroll-indicator-label {
    color: rgba(255, 255, 255, 0.9);
}

.urbangap-scroll-indicator-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    transform-origin: top center;
    animation: urbangap-scroll-pulse 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes urbangap-scroll-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scaleY(0.6);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (max-width: 768px) {
    .urbangap-scroll-indicator {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .urbangap-scroll-indicator-line {
        animation: none;
        opacity: 0.6;
    }
}

/* End — Scroll Indicator
 * ============================================================ */


/* ============================================================
 * ELEMENT — Section Label
 * Class: Urbangap_Section_Label
 * File:  public/elements/class-urbangap-section-label.php
 * ============================================================ */

/* Brand palette as CSS variables: easy to override per-project
   without modifying the plugin. To rebrand, override these vars
   in the theme stylesheet (e.g. in :root or .urbangap-section-label). */
:root {
    --urbangap-section-label-color-default: #C4764E;     /* terracotta */
    --urbangap-section-label-color-gold: #C9A96E;        /* gold */
    --urbangap-section-label-color-gold-light: #D4BC8A;  /* gold light */
    --urbangap-section-label-font-size: 11px;
    --urbangap-section-label-letter-spacing: 3.5px;
    --urbangap-section-label-line-width: 36px;
    --urbangap-section-label-gap: 16px;
    --urbangap-section-label-margin-bottom: 28px;
}

.urbangap-section-label {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--urbangap-section-label-font-size);
    font-weight: 500;
    letter-spacing: var(--urbangap-section-label-letter-spacing);
    text-transform: uppercase;
    line-height: 1;
    display: flex !important; /* hardened: themes sometimes force block/inline on generic divs */
    align-items: center;
    gap: var(--urbangap-section-label-gap);
    margin-bottom: var(--urbangap-section-label-margin-bottom);
    width: 100%; /* ensure the flex container spans the column so justify-content works */
}

/* Alignment modifiers */
.urbangap-section-label-align-left {
    justify-content: flex-start !important;
    text-align: left;
}

.urbangap-section-label-align-center {
    justify-content: center !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Decorative line — color is currentColor so it inherits from the scheme */
.urbangap-section-label-line {
    flex: 0 0 var(--urbangap-section-label-line-width);
    height: 1px;
    background-color: currentColor;
}

.urbangap-section-label-no-line .urbangap-section-label-line {
    display: none;
}

/* Color scheme modifiers */
.urbangap-section-label-color-default {
    color: var(--urbangap-section-label-color-default);
}

.urbangap-section-label-color-gold {
    color: var(--urbangap-section-label-color-gold);
}

.urbangap-section-label-color-gold-light {
    color: var(--urbangap-section-label-color-gold-light);
}

/* When color_scheme === 'custom', color is set inline via the style attribute. */

/* End — Section Label
 * ============================================================ */


/* ============================================================
 * ELEMENT — Image Grid (1+2 asymmetric)
 * Class: Urbangap_Image_Grid
 * File:  public/elements/class-urbangap-image-grid.php
 * ============================================================ */

/* Per-instance defaults — overridden by inline style on each instance */
.urbangap-image-grid {
    --urbangap-image-grid-gap: 16px;
    --urbangap-image-grid-radius: 4px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--urbangap-image-grid-gap);
    aspect-ratio: 4 / 3;
    width: 100%;
}

/* Each cell: rounded corners, hidden overflow for the image cover */
.urbangap-image-grid-cell {
    position: relative;
    overflow: hidden;
    border-radius: var(--urbangap-image-grid-radius);
    background-color: rgba(0, 0, 0, 0.04); /* shows through if image is missing */
}

/* Images fill their cell completely, with cropping for aspect mismatches */
.urbangap-image-grid-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Placeholder shown when an attachment ID is missing or invalid */
.urbangap-image-grid-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.03),
        rgba(0, 0, 0, 0.03) 10px,
        rgba(0, 0, 0, 0.06) 10px,
        rgba(0, 0, 0, 0.06) 20px
    );
}

/* === LAYOUT VARIANT — large on the LEFT === */
.urbangap-image-grid-layout-1plus2-left .urbangap-image-grid-cell-large {
    grid-column: 1;
    grid-row: 1 / 3;
}

.urbangap-image-grid-layout-1plus2-left .urbangap-image-grid-cell-small-1 {
    grid-column: 2;
    grid-row: 1;
}

.urbangap-image-grid-layout-1plus2-left .urbangap-image-grid-cell-small-2 {
    grid-column: 2;
    grid-row: 2;
}

/* === LAYOUT VARIANT — large on the RIGHT === */
.urbangap-image-grid-layout-1plus2-right .urbangap-image-grid-cell-large {
    grid-column: 2;
    grid-row: 1 / 3;
}

.urbangap-image-grid-layout-1plus2-right .urbangap-image-grid-cell-small-1 {
    grid-column: 1;
    grid-row: 1;
}

.urbangap-image-grid-layout-1plus2-right .urbangap-image-grid-cell-small-2 {
    grid-column: 1;
    grid-row: 2;
}

/* === MOBILE — collapse to single column === */
@media (max-width: 768px) {
    .urbangap-image-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        aspect-ratio: auto;
    }

    .urbangap-image-grid-cell-large,
    .urbangap-image-grid-cell-small-1,
    .urbangap-image-grid-cell-small-2 {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
}

/* End — Image Grid
 * ============================================================ */


/* ============================================================
 * ELEMENT — Portrait Card
 * Class: Urbangap_Portrait_Card
 * File:  public/elements/class-urbangap-portrait-card.php
 * ============================================================ */

/* Brand colors used here (overridable in theme) */
:root {
    --urbangap-portrait-card-radius: 4px;
    --urbangap-portrait-card-padding: 24px;
    --urbangap-portrait-card-link-color: #D4BC8A; /* gold light */
}

.urbangap-portrait-card {
    position: relative;
    width: 100%;
    border-radius: var(--urbangap-portrait-card-radius);
    overflow: hidden;
    isolation: isolate; /* contains stacking context */
}

/* Media wrapper holds the image + gradient */
.urbangap-portrait-card-media {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Aspect ratio modifiers */
.urbangap-portrait-card-ratio-3-4 .urbangap-portrait-card-media { aspect-ratio: 3 / 4; }
.urbangap-portrait-card-ratio-2-3 .urbangap-portrait-card-media { aspect-ratio: 2 / 3; }
.urbangap-portrait-card-ratio-4-5 .urbangap-portrait-card-media { aspect-ratio: 4 / 5; }
.urbangap-portrait-card-ratio-1-1 .urbangap-portrait-card-media { aspect-ratio: 1 / 1; }

/* Image fills the media area with cover crop */
.urbangap-portrait-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.urbangap-portrait-card:hover .urbangap-portrait-card-image {
    transform: scale(1.05) translateZ(0);
}

/* Fallback placeholder if no image */
.urbangap-portrait-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #D4A87C 0%, #8B5E3C 100%);
}

/* Dark gradient overlay at the bottom — improves caption legibility */
.urbangap-portrait-card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        rgba(44, 40, 36, 0.7) 0%,
        rgba(44, 40, 36, 0.0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Caption sits on top of the gradient */
.urbangap-portrait-card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--urbangap-portrait-card-padding);
    z-index: 2;
    color: #fff;
}

/* Title — two style variants */
.urbangap-portrait-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    color: #fff;
    margin: 0 0 4px 0;
    line-height: 1.15;
}

.urbangap-portrait-card-name-featured .urbangap-portrait-card-title {
    font-size: 28px;
    font-style: italic;
}

.urbangap-portrait-card-name-standard .urbangap-portrait-card-title {
    font-size: 22px;
    font-style: normal;
}

/* Subtitle — small uppercase tag below the title */
.urbangap-portrait-card-subtitle {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    display: block;
}

/* Optional CTA link */
.urbangap-portrait-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s ease;
}

.urbangap-portrait-card:hover .urbangap-portrait-card-link {
    color: var(--urbangap-portrait-card-link-color);
    gap: 10px;
}

.urbangap-portrait-card-link-arrow {
    transition: transform 0.3s ease;
}

.urbangap-portrait-card:hover .urbangap-portrait-card-link-arrow {
    transform: translateX(4px);
}

/* End — Portrait Card
 * ============================================================ */


/* ============================================================
 * ELEMENT — Service Card
 * Class: Urbangap_Service_Card
 * File:  public/elements/class-urbangap-service-card.php
 * ============================================================ */

:root {
    --urbangap-service-card-bg: #FAF6F1;          /* cream */
    --urbangap-service-card-radius: 4px;
    --urbangap-service-card-padding: 24px;
    --urbangap-service-card-title-color: #2C2824; /* charcoal */
    --urbangap-service-card-desc-color: #A99B8E;  /* text-muted */
}

.urbangap-service-card {
    display: block;
    padding: var(--urbangap-service-card-padding);
    background-color: var(--urbangap-service-card-bg);
    border-radius: var(--urbangap-service-card-radius);
    height: 100%; /* fills container height — useful inside equal-height grids */
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hover lift (applied always, even to non-linked cards, for a soft interactive feel) */
.urbangap-service-card:hover {
    transform: translateY(-3px) translateZ(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* When the card is wrapped in <a>, give it cursor: pointer explicitly */
.urbangap-service-card-linked {
    cursor: pointer;
}

.urbangap-service-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--urbangap-service-card-title-color);
    margin: 0 0 8px 0;
}

.urbangap-service-card-description {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--urbangap-service-card-desc-color);
    margin: 0;
}

/* End — Service Card
 * ============================================================ */


/* ============================================================
 * ELEMENT — Blockquote
 * Class: Urbangap_Blockquote
 * File:  public/elements/class-urbangap-blockquote.php
 * ============================================================ */

:root {
    --urbangap-blockquote-text-color: #8B3A3A;        /* burgundy */
    --urbangap-blockquote-border-color: #C9A96E;      /* gold */
    --urbangap-blockquote-author-color: #2C2824;
    --urbangap-blockquote-role-color: rgba(0, 0, 0, 0.5);
    --urbangap-blockquote-border-width: 2px;
    --urbangap-blockquote-padding-y: 32px;
    --urbangap-blockquote-padding-left: 28px;
}

.urbangap-blockquote {
    margin: 0;
    padding: var(--urbangap-blockquote-padding-y) 0
             var(--urbangap-blockquote-padding-y)
             var(--urbangap-blockquote-padding-left);
    border-left: var(--urbangap-blockquote-border-width) solid var(--urbangap-blockquote-border-color);
}

.urbangap-blockquote-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--urbangap-blockquote-text-color);
    margin: 0;
}

/* Size variants — only the text size changes; padding/border stay consistent */
.urbangap-blockquote-size-small .urbangap-blockquote-text {
    font-size: 18px;
    line-height: 1.6;
}

.urbangap-blockquote-size-medium .urbangap-blockquote-text {
    font-size: 22px;
    line-height: 1.55;
}

.urbangap-blockquote-size-large .urbangap-blockquote-text {
    font-size: 28px;
    line-height: 1.4;
}

/* Attribution block (only rendered when author is provided) */
.urbangap-blockquote-attribution {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.urbangap-blockquote-author {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--urbangap-blockquote-author-color);
}

.urbangap-blockquote-author::before {
    content: '— ';
    color: var(--urbangap-blockquote-role-color);
    margin-right: 2px;
}

.urbangap-blockquote-role {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--urbangap-blockquote-role-color);
    text-transform: uppercase;
}

/* End — Blockquote
 * ============================================================ */


/* ============================================================
 * ELEMENT — Artists Grid
 * Class: Urbangap_Artists_Grid
 * File:  public/elements/class-urbangap-artists-grid.php
 *
 * Note: each card inside is a Portrait Card, so its styling comes
 * from the Portrait Card section above. This stylesheet only handles
 * the grid layout.
 * ============================================================ */

.urbangap-artists-grid {
    display: grid;
    gap: 24px;
}

/* Column count variants — desktop */
.urbangap-artists-grid-columns-2 { grid-template-columns: repeat(2, 1fr); }
.urbangap-artists-grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
.urbangap-artists-grid-columns-4 { grid-template-columns: repeat(4, 1fr); }
.urbangap-artists-grid-columns-5 { grid-template-columns: repeat(5, 1fr); }

.urbangap-artists-grid-item {
    min-width: 0; /* prevents grid item overflow with long names */
}

.urbangap-artists-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* Responsive collapse:
 * - tablet (≤1024px): 4 and 5 cols become 2; 3 cols become 2
 * - mobile (≤600px):  all collapse to 1 col
 */
@media (max-width: 1024px) {
    .urbangap-artists-grid-columns-3,
    .urbangap-artists-grid-columns-4,
    .urbangap-artists-grid-columns-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .urbangap-artists-grid {
        grid-template-columns: 1fr !important;
    }
}

/* End — Artists Grid
 * ============================================================ */


/* ============================================================
 * ELEMENT — Products Grid
 * Class: Urbangap_Products_Grid
 * File:  public/elements/class-urbangap-products-grid.php
 * ============================================================ */

:root {
    --urbangap-product-card-radius: 4px;
    --urbangap-product-card-artist-color: #C4764E;   /* terracotta */
    --urbangap-product-card-name-color: #2C2824;     /* charcoal */
    --urbangap-product-card-price-color: #7A6E64;    /* text-light */
}

.urbangap-products-grid {
    width: 100%;
}

/* ----- Filter tabs ----- */
.urbangap-products-grid-filters {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.urbangap-products-grid-filter {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #A99B8E; /* text-muted */
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.urbangap-products-grid-filter:hover,
.urbangap-products-grid-filter.is-active {
    color: var(--urbangap-product-card-artist-color);
    border-bottom-color: var(--urbangap-product-card-artist-color);
}

/* ----- Items grid ----- */
.urbangap-products-grid-items {
    display: grid;
    gap: 32px;
}

.urbangap-products-grid-columns-2 .urbangap-products-grid-items { grid-template-columns: repeat(2, 1fr); }
.urbangap-products-grid-columns-3 .urbangap-products-grid-items { grid-template-columns: repeat(3, 1fr); }
.urbangap-products-grid-columns-4 .urbangap-products-grid-items { grid-template-columns: repeat(4, 1fr); }

.urbangap-products-grid-empty {
    text-align: center;
    padding: 40px;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* Hidden state for client-side filtering */
.urbangap-products-grid-item.is-hidden {
    display: none;
}

/* ----- Product Card ----- */
.urbangap-product-card {
    display: block;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.urbangap-product-card:hover {
    transform: translateY(-6px) translateZ(0);
}

/* Decorative media link — wraps the image and points to the product
 * permalink. Removed from tab navigation (we have the meta link below).
 * !important on color/text-decoration so the Uncode theme's link styles
 * don't bleed into the image area. */
.urbangap-product-card-media-link {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
    font-size: 0; /* kill any inline-gap under the image */
    line-height: 0;
}

/* Meta block link — the canonical product link for accessibility. The
 * artist/name/price colors are set on the children individually, so we
 * neutralize the link inheritance here. */
.urbangap-product-card-meta-link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    text-align: left;
}

.urbangap-product-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--urbangap-product-card-radius);
    overflow: hidden;
    margin-bottom: 18px;
    background: #f0ebe4; /* fallback while image loads */
    isolation: isolate;
}

/* The image must fill the square media area. We use absolute positioning so
 * it covers the whole box regardless of any height the theme tries to impose
 * on the wrapping <a> (WooCommerce/Uncode sometimes set width:auto/height
 * on product images, which broke the aspect-ratio fill). */
.urbangap-product-card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.urbangap-product-card:hover .urbangap-product-card-image {
    transform: scale(1.04) translateZ(0);
}

/* Hover action buttons — actual clickable <a> tags positioned over the media.
 * Each has its own destination (product page for "Acquista", WhatsApp for
 * "Prova in boutique") and intercepts the click thanks to z-index. */
.urbangap-product-card-actions {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2; /* above the media-link */
}

.urbangap-product-card:hover .urbangap-product-card-actions {
    opacity: 1;
    transform: translateY(0);
}

/* Make action buttons accessible via keyboard: when focused, show actions */
.urbangap-product-card-action:focus-visible {
    outline: 2px solid #C9A96E; /* gold */
    outline-offset: 2px;
}

.urbangap-product-card:focus-within .urbangap-product-card-actions {
    opacity: 1;
    transform: translateY(0);
}

.urbangap-product-card-action {
    flex: 1;
    text-align: center;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 3px;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.urbangap-product-card-action:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Charcoal pill — "Acquista". Force the white text color over any link
 * color the theme might set on <a> inside .vc_column-inner or similar. */
.urbangap-product-card-action-buy,
.urbangap-product-card-action-buy:hover,
.urbangap-product-card-action-buy:focus,
.urbangap-product-card-action-buy:visited {
    background-color: #2C2824 !important; /* charcoal */
    color: #FFFFFF !important;
    border: none;
}

/* Translucent pill — "Prova in boutique". Force dark text. */
.urbangap-product-card-action-try,
.urbangap-product-card-action-try:hover,
.urbangap-product-card-action-try:focus,
.urbangap-product-card-action-try:visited {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #2C2824 !important;
    border: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.urbangap-product-card-artist {
    display: block;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--urbangap-product-card-artist-color);
    margin-bottom: 6px;
}

.urbangap-product-card-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--urbangap-product-card-name-color);
    margin: 0 0 8px 0;
}

/* ----- Price (WooCommerce-rendered HTML) -----
 *
 * WooCommerce renders prices wrapped in nested tags (<del>, <ins>, <bdi>,
 * .woocommerce-Price-amount, .amount, .woocommerce-Price-currencySymbol)
 * and themes — Uncode included — apply their own font-size/family/display
 * to those internal elements, often via very specific selectors. To stay
 * consistent on the card we cascade typography onto every descendant of
 * .urbangap-product-card-price with !important. It's heavy-handed but
 * scoped, and it's the only reliable way to win the specificity battle
 * against the WooCommerce + theme combo. */

.urbangap-product-card-price {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--urbangap-product-card-price-color);
}

.urbangap-product-card-price,
.urbangap-product-card-price * {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--urbangap-product-card-price-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force del/ins to flow inline so the original price and the sale price
   sit on the same row. Theme defaults often set them to block. */
.urbangap-product-card-price del,
.urbangap-product-card-price ins {
    display: inline !important;
    background: transparent !important;
    text-decoration: none;
}

/* Strikethrough only on the original (deleted) price */
.urbangap-product-card-price del {
    text-decoration: line-through;
    opacity: 0.5;
    margin-right: 8px !important;
}

.urbangap-product-card-price ins {
    text-decoration: none;
    font-weight: 500 !important; /* slight emphasis on the active price */
}

/* Currency symbol — no extra spacing tweaks needed */
.urbangap-product-card-price .woocommerce-Price-currencySymbol {
    margin-right: 1px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .urbangap-products-grid-columns-3 .urbangap-products-grid-items,
    .urbangap-products-grid-columns-4 .urbangap-products-grid-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .urbangap-products-grid-items {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .urbangap-products-grid-filters {
        gap: 18px;
        margin-bottom: 28px;
    }
}

/* End — Products Grid
 * ============================================================ */


/* ============================================================
 * ELEMENT — Products Grid pagination (archive mode)
 * Shared visual language with the Stories pagination.
 * ============================================================ */

.urbangap-products-pagination {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}

.urbangap-products-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.urbangap-products-pagination-item {
    margin: 0;
    padding: 0;
}

.urbangap-products-pagination-item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #7A6E64;
    background: transparent;
    border: 1px solid #E8DDD3;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.urbangap-products-pagination-item .page-numbers:hover {
    border-color: #C4764E;
    color: #C4764E;
}

.urbangap-products-pagination-item .page-numbers.current {
    background: #C4764E;
    border-color: #C4764E;
    color: #FFFFFF;
}

.urbangap-products-pagination-item .page-numbers.dots {
    border-color: transparent;
}

/* End — Products Grid pagination
 * ============================================================ */


/* ============================================================
 * ELEMENT — Consultation Feature
 * Class: Urbangap_Consultation_Feature
 * File:  public/elements/class-urbangap-consultation-feature.php
 *
 * Designed for dark/gradient backgrounds. Icon color defaults to
 * gold-light; all text colors tuned for legibility on burgundy.
 * ============================================================ */

:root {
    --urbangap-consultation-feature-icon-color: #D4BC8A;  /* gold light */
    --urbangap-consultation-feature-icon-size: 28px;
    --urbangap-consultation-feature-title-color: #FFFFFF;
    --urbangap-consultation-feature-desc-color: rgba(255, 255, 255, 0.5);
}

.urbangap-consultation-feature {
    display: block;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    padding: 8px;
}

/* Linked variant: subtle lift on hover */
.urbangap-consultation-feature-linked {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.urbangap-consultation-feature-linked:hover {
    transform: translateY(-3px) translateZ(0);
}

.urbangap-consultation-feature-linked:hover .urbangap-consultation-feature-icon {
    color: #FFFFFF;
}

/* Icon wrapper — sizes the inline SVG and sets its color */
.urbangap-consultation-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--urbangap-consultation-feature-icon-size);
    height: var(--urbangap-consultation-feature-icon-size);
    color: var(--urbangap-consultation-feature-icon-color);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.urbangap-consultation-feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.urbangap-consultation-feature-title {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--urbangap-consultation-feature-title-color) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4;
}

.urbangap-consultation-feature-description {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    line-height: 1.6;
    color: var(--urbangap-consultation-feature-desc-color) !important;
    margin: 0 !important;
}

/* End — Consultation Feature
 * ============================================================ */


/* ============================================================
 * ELEMENT — Stories Grid
 * Class: Urbangap_Stories_Grid
 * File:  public/elements/class-urbangap-stories-grid.php
 *
 * Editorial asymmetric layout: 3-column grid with different widths
 * (1.2fr / 0.8fr / 1fr) and per-position aspect ratios that repeat
 * every three cards (4:3, 3:4, 1:1).
 * ============================================================ */

:root {
    --urbangap-story-card-tag-color: #C4764E;     /* terracotta */
    --urbangap-story-card-title-color: #2C2824;   /* charcoal */
    --urbangap-story-card-excerpt-color: #A99B8E; /* text-muted */
    --urbangap-story-card-radius: 4px;
}

.urbangap-stories-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 32px;
    align-items: start;
}

.urbangap-stories-grid-empty {
    text-align: center;
    padding: 40px;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* ----- Story Card ----- */
.urbangap-story-card {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* GPU layer promotion: keeps the lift animation on the compositor
       thread instead of re-rasterizing the card (and its image) on hover */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.urbangap-story-card:hover {
    transform: translateY(-4px) translateZ(0);
}

.urbangap-story-card-media {
    border-radius: var(--urbangap-story-card-radius);
    overflow: hidden;
    margin-bottom: 20px;
    background: #f0ebe4;
    /* New stacking context so border-radius clipping survives the
       child image's GPU-composited scale */
    isolation: isolate;
}

/* Per-position aspect ratios — repeats every 3 cards */
.urbangap-story-card:nth-child(3n+1) .urbangap-story-card-media { aspect-ratio: 4 / 3; }
.urbangap-story-card:nth-child(3n+2) .urbangap-story-card-media { aspect-ratio: 3 / 4; }
.urbangap-story-card:nth-child(3n)   .urbangap-story-card-media { aspect-ratio: 1 / 1; }

.urbangap-story-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.urbangap-story-card:hover .urbangap-story-card-image {
    transform: scale(1.04) translateZ(0);
}

.urbangap-story-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #C4946E, #8B6B4A);
}

.urbangap-story-card-tag {
    display: block;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--urbangap-story-card-tag-color) !important;
    margin-bottom: 10px;
}

.urbangap-story-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--urbangap-story-card-title-color) !important;
    margin: 0 0 10px 0 !important;
}

.urbangap-story-card-excerpt {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    color: var(--urbangap-story-card-excerpt-color) !important;
    margin: 0 !important;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .urbangap-stories-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Third card of each editorial row spans full width (as the mockup) */
    .urbangap-story-card:nth-child(3n) {
        grid-column: 1 / -1;
    }
    .urbangap-story-card:nth-child(3n) .urbangap-story-card-media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .urbangap-stories-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .urbangap-story-card:nth-child(n) .urbangap-story-card-media {
        aspect-ratio: 4 / 3;
    }
}

/* ----- Pagination (archive mode) ----- */
.urbangap-stories-pagination {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}

.urbangap-stories-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.urbangap-stories-pagination-item {
    margin: 0;
    padding: 0;
}

.urbangap-stories-pagination-item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #7A6E64; /* text-light */
    background: transparent;
    border: 1px solid #E8DDD3; /* sand */
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.urbangap-stories-pagination-item .page-numbers:hover {
    border-color: #C4764E; /* terracotta */
    color: #C4764E;
}

.urbangap-stories-pagination-item .page-numbers.current {
    background: #C4764E; /* terracotta */
    border-color: #C4764E;
    color: #FFFFFF;
}

.urbangap-stories-pagination-item .page-numbers.dots {
    border-color: transparent;
}

/* End — Stories Grid
 * ============================================================ */


/* ============================================================
 * ELEMENT — Archive Header
 * Class: Urbangap_Archive_Header
 * File:  public/elements/class-urbangap-archive-header.php
 *
 * Context-aware header. Two branches:
 *   .urbangap-archive-header-artist   → photo + name + origin + bio (2-col grid)
 *   .urbangap-archive-header-generic  → title + description
 *
 * Text COLOR (name, bio, title, description) is intentionally NOT set here:
 * it is inherited from the column Skin (Light/Dark) of the wrapping Uncode
 * column. Only the accent color (label + origin) is controlled, via the
 * .urbangap-archive-header-accent-{terracotta|gold} modifier.
 * ============================================================ */

/* Accent color resolved from the modifier class */
.urbangap-archive-header-accent-terracotta { --urbangap-ah-accent: #C4764E; } /* terracotta */
.urbangap-archive-header-accent-gold       { --urbangap-ah-accent: #D4BC8A; } /* gold light */

/* ----- Artist branch (2-column profile) ----- */
.urbangap-archive-header-artist {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.urbangap-archive-header-photo {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    isolation: isolate;
}

.urbangap-archive-header-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.urbangap-archive-header-photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #D4A87C 0%, #8B5E3C 100%);
}

/* Name: only typography is forced; color is inherited from the Skin */
.urbangap-archive-header-name {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem) !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0 !important;
}

/* Origin: accent-colored (Skin doesn't manage this) */
.urbangap-archive-header-origin {
    display: block;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--urbangap-ah-accent);
    margin-bottom: 32px;
}

/* Bio: typography forced, color inherited from Skin */
.urbangap-archive-header-bio p {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.85 !important;
    margin: 0 0 18px 0 !important;
}

.urbangap-archive-header-bio p:last-child {
    margin-bottom: 0 !important;
}

/* ----- Generic branch (category / tag / shop) ----- */
.urbangap-archive-header-generic {
    max-width: 760px;
}

.urbangap-archive-header-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem) !important;
    font-weight: 300 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0 !important;
}

.urbangap-archive-header-description {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.8 !important;
}

.urbangap-archive-header-description p {
    margin: 0 0 14px 0;
}

.urbangap-archive-header-description p:last-child {
    margin-bottom: 0;
}

/* Editor-only note (builder preview, no archive context) */
.urbangap-archive-header-editor-note {
    padding: 24px;
    border: 1px dashed rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    font-size: 13px;
    font-style: italic;
    opacity: 0.7;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .urbangap-archive-header-artist {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .urbangap-archive-header-photo {
        max-width: 420px;
    }
}

/* End — Archive Header
 * ============================================================ */


/* ============================================================
 * ELEMENT — Product Artist Badge
 * Class: Urbangap_Product_Artist_Badge
 * ============================================================ */

.urbangap-product-artist-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.urbangap-product-artist-badge-name {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C4764E; /* terracotta */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.urbangap-product-artist-badge-name::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C4764E;
}

.urbangap-product-artist-badge-link {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.urbangap-product-artist-badge-link:hover {
    opacity: 1;
}

.urbangap-product-artist-badge-arrow {
    transition: transform 0.3s ease;
}

.urbangap-product-artist-badge-link:hover .urbangap-product-artist-badge-arrow {
    transform: translateX(3px);
}

/* End — Product Artist Badge
 * ============================================================ */


/* ============================================================
 * ELEMENT — Trust Signals
 * Class: Urbangap_Trust_Signals
 * ============================================================ */

.urbangap-trust-signals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.urbangap-trust-signals-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: inherit;
}

.urbangap-trust-signals-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #C9A96E; /* gold */
}

.urbangap-trust-signals-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* End — Trust Signals
 * ============================================================ */


/* ============================================================
 * ELEMENT — Product CTA (WhatsApp)
 * Class: Urbangap_Product_CTA
 * ============================================================ */

.urbangap-product-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.urbangap-product-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 18px;
    border-radius: 3px;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    line-height: 1.2;
}

.urbangap-product-cta-btn:hover {
    transform: translateY(-2px);
}

/* Both CTAs use the "ghost" terracotta look to sit below the dark
   WooCommerce add-to-cart button without competing with it. */
.urbangap-product-cta-try,
.urbangap-product-cta-try:visited,
.urbangap-product-cta-advice,
.urbangap-product-cta-advice:visited {
    background-color: transparent !important;
    color: #C4764E !important;
    border: 1px solid #C4764E !important;
}

.urbangap-product-cta-try:hover,
.urbangap-product-cta-advice:hover {
    background-color: #C4764E !important;
    color: #FFFFFF !important;
}

/* On narrow product columns, stack the two CTAs */
@media (max-width: 480px) {
    .urbangap-product-cta {
        grid-template-columns: 1fr;
    }
}

/* End — Product CTA
 * ============================================================ */


/* ============================================================
 * ELEMENT — Product Artist Story
 * Class: Urbangap_Product_Artist_Story
 *
 * Horizontal narrative block (photo + bio + link). Text color is
 * inherited from the column Skin; only the accent (label/link) is
 * controlled, plus layout.
 * ============================================================ */

.urbangap-product-artist-story-accent-terracotta { --urbangap-pas-accent: #C4764E; }
.urbangap-product-artist-story-accent-gold       { --urbangap-pas-accent: #D4BC8A; }

.urbangap-product-artist-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Image side control via order */
.urbangap-product-artist-story-image-right .urbangap-product-artist-story-media {
    order: 2;
}

.urbangap-product-artist-story-media {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    isolation: isolate;
}

.urbangap-product-artist-story-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.urbangap-product-artist-story-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #C4764E, #8B5E3C);
}

.urbangap-product-artist-story-name {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem) !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    margin: 0 0 18px 0 !important;
}

.urbangap-product-artist-story-bio p {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.85 !important;
    margin: 0 0 16px 0 !important;
}

.urbangap-product-artist-story-bio p:last-child {
    margin-bottom: 0 !important;
}

.urbangap-product-artist-story-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--urbangap-pas-accent);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.urbangap-product-artist-story-link:hover {
    gap: 12px;
}

.urbangap-product-artist-story-arrow {
    transition: transform 0.3s ease;
}

.urbangap-product-artist-story-link:hover .urbangap-product-artist-story-arrow {
    transform: translateX(3px);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .urbangap-product-artist-story {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Keep image on top regardless of side setting on mobile */
    .urbangap-product-artist-story-image-right .urbangap-product-artist-story-media {
        order: 0;
    }
}

/* End — Product Artist Story
 * ============================================================ */


/* ============================================================
 * Add new element CSS sections below this line.
 * Follow the same template:
 *
 * /* ============================================================
 *  * ELEMENT — Name
 *  * Class: Urbangap_Class_Name
 *  * File:  public/elements/class-urbangap-class-name.php
 *  * ============================================================ /
 * ... CSS rules ...
 * /* End — Name
 *  * ============================================================ /
 * ============================================================ */