/**
 * Collection Guide – Frontend Styles
 *
 * Matches the live Sisyphus-Total look rather than the concept prototype.
 * Values come from two places:
 *
 *   Total's custom properties, set by the Customizer (inline #wpex-css):
 *     --wpex-body-color         #000     text
 *     --wpex-woo-price-color    #707070  prices
 *     --wpex-site-header-height 60px     sticky header, for scroll offset
 *     --wpex-el-margin-bottom            block rhythm
 *   plus Total's own .theme-button for the Explore button, so it keeps
 *   the theme's shape (--wpex-btn-border-radius, 6px) while its colours
 *   are set to the concept's saffron (--wccg-cta, below).
 *
 *   The Sisyphus-Total child theme's hardcoded palette (style.css), which
 *   has no custom properties of its own, so it is mirrored here once:
 *     #c1bcb8  hairline borders (parts grid, up-sells, customize columns)
 *     #e5e1dc  image wells (parts category page)
 *     #595047  secondary text (variation labels, product-tab links)
 *     #be8154  "selected" brass (selected swatch, active carousel dot)
 *
 * Type follows the site: Montserrat inherited from the body, light (300)
 * weights for large headings, uppercase product names and navigation.
 * Every var() carries a fallback so the guide still holds together if
 * the theme ever changes underneath it.
 */

.wccg {
    --wccg-ink: var(--wpex-body-color, #000);
    --wccg-muted: #595047;
    --wccg-line: #c1bcb8;
    --wccg-well: #e5e1dc;
    --wccg-accent: #be8154;
    --wccg-price: var(--wpex-woo-price-color, #707070);
    --wccg-raised: #fff;

    /* Explore button: the concept's saffron, with black text — white on
       this orange is only ~2.3:1, black is 8.6:1 (7.0:1 on hover). */
    --wccg-cta: #f08f00;
    --wccg-cta-hover: #d98000;
    --wccg-on-cta: #000;

    margin-bottom: var(--wpex-el-margin-bottom, 40px);
    color: var(--wccg-ink);

    /* Deep links scroll the guide into view; clear the sticky header. */
    scroll-margin-top: calc(var(--wpex-site-header-height, 60px) + 20px);
}

/* The theme must never un-hide a panel the script has hidden. */
.wccg [hidden] {
    display: none !important;
}

.wccg p {
    margin-top: 0;
}

/*
 * The child theme centres every paragraph on a page below 768px
 * (`.page p { text-align: center !important }`, style.css). Inside the
 * guide that leaves each card's title left-aligned over a centred
 * description, price and button, so the guide keeps its own alignment.
 * `div.wccg` outranks `.page p` on specificity; the empty state stays
 * centred on purpose.
 */
div.wccg p {
    text-align: start !important;
}
div.wccg .wccg-empty p {
    text-align: center !important;
}

/* ─── Group tabs ─── */
.wccg-tabs {
    display: flex;
    gap: 0 32px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--wccg-line);
    margin-bottom: 28px;
}
.wccg-tabs::-webkit-scrollbar {
    display: none;
}

.wccg .wccg-tab {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin: 0 0 -1px;
    padding: 12px 0;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--wccg-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.wccg .wccg-tab:hover {
    color: var(--wccg-ink);
}
.wccg .wccg-tab[aria-selected="true"] {
    color: var(--wccg-ink);
    border-bottom-color: var(--wccg-ink);
}
.wccg .wccg-tab:focus-visible {
    outline: 2px solid var(--wccg-accent);
    outline-offset: 2px;
}

/* ─── Tiles ─── */
.wccg-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(var(--wccg-tile-cols, 4), minmax(0, 1fr));
}
.wccg-tiles-1 { --wccg-tile-cols: 1; }
.wccg-tiles-2 { --wccg-tile-cols: 2; }
.wccg-tiles-3 { --wccg-tile-cols: 3; }
.wccg-tiles-4 { --wccg-tile-cols: 4; }

.wccg .wccg-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    appearance: none;
    width: 100%;
    margin: 0;
    padding: 18px 20px;
    text-align: left;
    font: inherit;
    color: var(--wccg-ink);
    background: transparent;
    border: 1px solid var(--wccg-line);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wccg .wccg-tile:hover {
    border-color: var(--wccg-ink);
}
.wccg .wccg-tile[aria-pressed="true"] {
    background: var(--wccg-raised);
    border-color: var(--wccg-accent);
    /* Doubles the border without changing the box size. */
    box-shadow: inset 0 0 0 1px var(--wccg-accent);
}
.wccg .wccg-tile:focus-visible {
    outline: 2px solid var(--wccg-accent);
    outline-offset: 2px;
}

.wccg-tile-label {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}
.wccg-tile-sub {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--wccg-muted);
}

/* ─── Panel heading ─── */
.wccg-panel {
    margin-top: 44px;
}
/* A single-tile group has no picker: the panel follows the tabs directly. */
.wccg-group--single .wccg-panel {
    margin-top: 0;
}

.wccg-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
}

.wccg .wccg-panel-title {
    margin: 0 0 6px;
    font-size: clamp(28px, 2rem + 1vw, 40px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wccg-ink);
}
.wccg .wccg-panel-sub {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    color: var(--wccg-muted);
}
.wccg .wccg-count {
    margin: 0;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wccg-muted);
}
.wccg .wccg-panel-intro {
    max-width: 62ch;
    margin: 14px 0 0;
    line-height: 1.6;
    color: var(--wccg-muted);
}

/* Intros may carry internal links (category descriptions, kses'd). */
.wccg .wccg-panel-intro a,
.wccg .wccg-faq-a a {
    color: var(--wccg-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Count and "View all" sit together at the right of the panel heading. */
.wccg-panel-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}
.wccg .wccg-archive {
    margin: 0;
}
.wccg .wccg-archive-link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wccg-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.wccg .wccg-archive-link:hover {
    color: var(--wccg-accent);
}
.wccg .wccg-archive-link:focus-visible {
    outline: 2px solid var(--wccg-accent);
    outline-offset: 2px;
}

/* ─── Hero ─── */
.wccg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-top: 24px;
    border: 1px solid var(--wccg-line);
}

.wccg-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wccg-well);
    border-right: 1px solid var(--wccg-line);
}
.wccg-hero-media img {
    display: block;
    width: 100%;
    height: auto;
}

.wccg-hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
}

.wccg .wccg-eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wccg-accent);
}
.wccg .wccg-hero-title {
    margin: 0 0 16px;
    font-size: clamp(24px, 1.25rem + 1vw, 32px);
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--wccg-ink);
}
.wccg .wccg-hero-summary {
    margin: 0 0 20px;
    line-height: 1.6;
}
.wccg-hero .wccg-price {
    font-size: 22px;
    margin: 0 0 24px;
}
.wccg .wccg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.wccg .wccg-explore {
    /* Total's .theme-button reads these, so hover and active follow. */
    --wpex-btn-bg: var(--wccg-cta);
    --wpex-btn-color: var(--wccg-on-cta);
    --wpex-hover-btn-bg: var(--wccg-cta-hover);
    --wpex-hover-btn-color: var(--wccg-on-cta);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .75em 1.6em;
}
.wccg .wccg-explore:focus-visible {
    outline: 2px solid var(--wccg-accent);
    outline-offset: 2px;
}

/* ─── Price (shared) ─── */
.wccg .wccg-price {
    font-weight: 300;
    color: var(--wccg-price);
}

/* ─── Grid ───
 * Collapsed hairlines, the same trick the child theme uses on the parts
 * grid: every card has a full border and is pulled up and left by 1px,
 * and the list is padded by 1px to make room.
 */
.wccg .wccg-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0 0;
    padding: 1px 0 0 1px;
}

.wccg .wccg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: -1px 0 0 -1px;
    padding: 16px;
    border: 1px solid var(--wccg-line);
    transition: background-color .15s ease;
}
.wccg .wccg-card:hover {
    background: var(--wccg-raised);
}
.wccg .wccg-card:focus-within {
    outline: 2px solid var(--wccg-accent);
    outline-offset: -2px;
    z-index: 1;
}

.wccg-card-media {
    /* The product photos' own proportion (768x692, and the same shape at
       1500x1352), so they fill the frame without being cropped. A square
       frame trimmed about 5% off each side. A photo of another shape is
       still cropped to fit (object-fit: cover below). */
    aspect-ratio: 768 / 692;
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--wccg-well);
    border: 1px solid var(--wccg-line);
}
.wccg-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wccg .wccg-card-cat {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wccg-muted);
}
.wccg .wccg-card-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.3;
    text-transform: uppercase;
}
.wccg .wccg-card-title a {
    color: var(--wccg-ink);
    text-decoration: none;
}
.wccg .wccg-card-title a:focus {
    outline: none; /* The card's :focus-within ring replaces it. */
}
/* One tab stop, whole card clickable. */
.wccg .wccg-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.wccg .wccg-card-summary {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wccg-muted);
}
.wccg-card .wccg-price {
    margin: auto 0 0;
    font-size: 16px;
}

/* Whatever hooks into wccg_card_actions (the Compare button) has to sit
   above the title link's stretched ::after, or it could not be clicked. */
.wccg-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* The card button (Settings → Card Button Label): the Explore button's
   saffron, a size down so it suits a card. */
.wccg .wccg-card-button {
    --wpex-btn-bg: var(--wccg-cta);
    --wpex-btn-color: var(--wccg-on-cta);
    --wpex-hover-btn-bg: var(--wccg-cta-hover);
    --wpex-hover-btn-color: var(--wccg-on-cta);
    padding: .6em 1.2em;
    font-size: 13px;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}
.wccg .wccg-card-button:focus-visible {
    outline: 2px solid var(--wccg-accent);
    outline-offset: 2px;
}

/* Visually hidden, still read by screen readers. */
.wccg-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Empty state ─── */
.wccg-empty {
    margin-top: 24px;
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--wccg-line);
}
.wccg .wccg-empty-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wccg .wccg-empty-text {
    margin: 0;
    color: var(--wccg-muted);
}
.wccg .wccg-empty-link {
    margin: 16px 0 0;
}
.wccg .wccg-empty-link a {
    color: var(--wccg-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── FAQ ───
 * Always expanded: the answers are the page's answer-ready copy, so they
 * stay in the rendered text rather than behind toggles. Hairline rules
 * between items, same as the grid.
 */
.wccg-faq {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--wccg-line);
}

.wccg .wccg-faq-title {
    margin: 0 0 12px;
    font-size: clamp(28px, 2rem + 1vw, 40px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wccg-ink);
}

.wccg-faq-list {
    max-width: 820px;
}

.wccg-faq-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--wccg-line);
}
.wccg-faq-item:last-child {
    border-bottom: 0;
}

.wccg .wccg-faq-q {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.35;
    color: var(--wccg-ink);
}

.wccg .wccg-faq-a {
    line-height: 1.65;
    color: var(--wccg-muted);
}
.wccg .wccg-faq-a p,
.wccg .wccg-faq-a ul,
.wccg .wccg-faq-a ol {
    margin: 0 0 12px;
}
.wccg .wccg-faq-a > :last-child {
    margin-bottom: 0;
}
.wccg .wccg-faq-a ul,
.wccg .wccg-faq-a ol {
    padding-left: 1.25em;
}

/* ─── Store-manager notices ─── */
.wccg-admin-notice {
    margin: 16px 0 0;
    padding: 8px 12px;
    font-size: 14px;
    color: #5b4a00;
    background: #fff8e5;
    border-left: 3px solid #ffb900;
}

/* ─── Responsive — breakpoints follow the child theme (959 / 767) ─── */
@media (max-width: 959px) {
    .wccg .wccg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wccg-tiles-3,
    .wccg-tiles-4 {
        --wccg-tile-cols: 2;
    }
}

@media (max-width: 767px) {
    .wccg-tabs {
        gap: 0 24px;
        margin-bottom: 20px;
    }
    .wccg .wccg-tab {
        font-size: 14px;
    }
    .wccg-tiles {
        gap: 8px;
    }
    .wccg-tiles-2,
    .wccg-tiles-3,
    .wccg-tiles-4 {
        --wccg-tile-cols: 2;
    }
    .wccg .wccg-tile {
        padding: 14px;
    }
    .wccg-panel {
        margin-top: 32px;
    }
    .wccg-panel-meta {
        align-items: flex-start;
        text-align: left;
    }
    .wccg-faq {
        margin-top: 48px;
        padding-top: 32px;
    }
    .wccg-hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .wccg-hero-media {
        border-right: 0;
        border-bottom: 1px solid var(--wccg-line);
    }
}

@media (max-width: 479px) {
    .wccg .wccg-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wccg *,
    .wccg *::before,
    .wccg *::after {
        transition: none !important;
    }
}