/* HDC Shop Sidebar — v1.3.0 — WCAG 2.2 compliant
 *
 * Sizing base: 1rem = 100px (set via --master-font-size in global style.css)
 *
 *  px  →  rem
 *  8px  → 0.08rem
 *  10px → 0.10rem
 *  12px → 0.12rem
 *  14px → 0.14rem   (project minimum font size)
 *  16px → 0.16rem
 *  18px → 0.18rem
 *  20px → 0.20rem
 *  24px → 0.24rem
 *  32px → 0.32rem
 *  44px → 0.44rem
 *
 * Font sizes use global --size-* variables (defined in style.css) wherever
 * possible so sizing stays consistent with the rest of the site.
 *
 * Border widths and focus-outline widths stay in px — they are UI chrome
 * and should not scale with the root font size.
 */

/* ==========================================================================
   LOCAL VARIABLES
   Colours are HDC-specific overrides; spacing refs the 100px rem base.
   ========================================================================== */

.hdc-sidebar,
.hdc-controls-bar {
    --hdc-primary:       #7B1D1D;
    --hdc-primary-dark:  #641717;
    --hdc-border-ui:     #767676; /* 4.54:1 vs white — meets WCAG 1.4.11 (3:1) */
    --hdc-border-layout: #e0e0e0; /* structural / decorative only */
    --hdc-focus-colour:  #7B1D1D;
}

/* ==========================================================================
   SCREEN-READER ONLY UTILITY (WCAG 1.3.1, 3.3.2)
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   FOCUS VISIBLE (WCAG 2.4.7, 2.4.11)
   :focus-visible = keyboard only; :focus with outline:none = mouse only.
   ========================================================================== */

.hdc-search-input:focus,
.hdc-select:focus,
.hdc-go-btn:focus,
.hdc-view-btn:focus,
.hdc-categories-list a:focus {
    outline: none;
}

/* Light-background ring — 9.97:1 contrast vs white */
.hdc-search-input:focus-visible,
.hdc-select:focus-visible,
.hdc-categories-list a:focus-visible,
.hdc-view-btn:not(.active):focus-visible {
    outline: 3px solid var(--hdc-focus-colour);
    outline-offset: 2px;
}

/* Dark-background ring (brand-colour buttons) */
.hdc-go-btn:focus-visible,
.hdc-view-btn.active:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px var(--hdc-focus-colour);
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.hdc-sidebar {
    /* background: #fff; */
    /* border: 1px solid var(--hdc-border-layout); */
}

.hdc-sidebar-section {
    padding: 18px 0; /* 18px 20px */
    border-bottom: 1px solid var(--hdc-border-layout);
}
/* .hdc-sidebar-section:has(.hdc-search-btn) {
    display: flex;
    flex-direction: row-reverse;
} */
.hdc-sidebar-section:last-child {
    border-bottom: none;
}

.hdc-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.08rem; /* 8px */
    font-size: var(--size-3) !important; /* clamp(14px, 0.18rem, 18px) */
    font-weight: 600 !important;
    color: var(--colour-text, #333333) !important;
    margin: 0 0 0.14rem !important; /* 14px */
    padding: 0 !important;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    border: none !important;
}

.hdc-sidebar-title .hdc-icon {
    width: 16px;  /* 16px */
    height: 16px;
    color: var(--hdc-primary);
    flex-shrink: 0;
}

/* Search input
   Border: #767676 meets WCAG 1.4.11 (3:1) for the UI component boundary.
   min-height: 0.44rem (44px) — generous touch target, exceeds WCAG 2.5.8 (24px min). */
.hdc-search-input {
    display: block;
    width: 100%;
    padding: 8px 12px; /* 8px 12px */
    border: 1px solid var(--hdc-border-ui);
    border-radius: 0px;
    font-size: var(--size-2); /* clamp(14px, 0.16rem, 16px) */
    color: var(--colour-text, #333333);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s;
    min-height: 0.44rem; /* 44px */
}

.hdc-search-input:focus {
    border-color: var(--hdc-primary);
}

/* Placeholder: #767676 = 4.54:1 vs white — meets WCAG 1.4.3 */
.hdc-search-input::placeholder {
    color: #767676;
}

/* Categories list */
.hdc-categories-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hdc-categories-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* min-height: 0.44rem (44px) — exceeds WCAG 2.5.8 (24px minimum touch target) */
.hdc-categories-list li a {
    display: flex;
    align-items: center;
    min-height: 0.44rem; /* 44px */
    padding: 0.04rem 0;  /* 4px */
    color: var(--colour-text) !important;
    text-decoration: none !important;
    font-size: var(--size-2); /* clamp(14px, 0.16rem, 16px) */
    transition: var(--transition-fast, color 0.15s);
}

.hdc-categories-list li a:hover {
    color: var(--hdc-primary-dark) !important;
    text-decoration: underline !important;
}

.hdc-categories-list li.current-cat a {
    font-weight: 700;
    text-decoration: underline !important;
}

/* ==========================================================================
   CONTROLS BAR
   ========================================================================== */

.hdc-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.10rem; /* 10px */
    padding: 10px 14px; /* 10px 14px */
    background: #fff;
    border: 1px solid var(--hdc-border-layout);
    margin-bottom: 0.20rem; /* 20px */
    box-sizing: border-box;
}

.hdc-results-count {
    font-size: var(--size-1); /* clamp(14px, 0.16rem, 16px) */
    color: var(--colour-text, #333333);
    white-space: nowrap;
}

.hdc-controls-right {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    width: 100%;
    gap: 0.08rem; /* 8px */
}

/* Sort / Filter form */
.hdc-sort-filter-form {
    display: flex;
    align-items: center;
    gap: 8px; /* 8px */
    row-gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-wrap: wrap;
}

.hdc-control-label {
    display: flex;
    align-items: center;
    gap: 0.04rem; /* 4px */
    font-size: var(--size-1); /* clamp(14px, 0.16rem, 16px) — was 13px, below minimum */
    color: var(--colour-text, #333333);
    margin: 0;
    font-weight: normal;
    flex-wrap: wrap;
}

/* Select border: --hdc-border-ui meets WCAG 1.4.11 */
.hdc-select {
    padding: 5px 8px; /* 5px 8px */
    border: 1px solid var(--hdc-border-ui);
    border-radius: 0px;
    font-size: var(--size-1); /* clamp(14px, 0.16rem, 16px) */
    color: var(--colour-text, #333333);
    background: #fff;
    cursor: pointer;
    height: auto;
    line-height: 1.4;
    min-height: 32px; /* 32px — meets WCAG 2.5.8 */
}

.hdc-select:focus {
    border-color: var(--hdc-primary);
}

/* Go button */
.hdc-go-btn {
    padding: 4px 16px; /* 6px 16px */
    background: var(--hdc-primary);
    color: #fff !important;
    border: none;
    border-radius: 0px;
    font-size: var(--size-1); /* clamp(14px, 0.16rem, 16px) */
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast, background 0.15s);
    line-height: 1.6;
    min-height: 0.32rem; /* 32px — meets WCAG 2.5.8 */
}

.hdc-go-btn:hover {
    background: var(--hdc-primary-dark);
}

/* Grid / List toggle */
.hdc-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.02rem; /* 2px */
}

.hdc-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem; /* 5px */
    padding: 6px 12px; /* 6px 12px */
    background: #fff;
    border: 1px solid var(--hdc-border-ui);
    border-radius: 0px;
    font-size: var(--size-1); /* clamp(14px, 0.16rem, 16px) */
    color: var(--colour-text, #333333);
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s);
    line-height: 1.4;
    min-height: 0.32rem; /* 32px — meets WCAG 2.5.8 */
}

.hdc-view-btn svg {
    width: 10px;  /* 14px */
    height: 10px;
    flex-shrink: 0;
}

.hdc-view-btn.active,
.hdc-view-btn:hover {
    background: var(--hdc-primary);
    color: #fff;
    border-color: var(--hdc-primary);
}


@media screen and (max-width:1000px) {
    .hdc-controls-right {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
}
@media screen and (max-width:600px){
    .hdc-control-label {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }
    .hdc-select {
        width: 100%;
    }
}

/* ==========================================================================
   ADD TO CART — PRODUCT LOOP
   ========================================================================== */

ul.products li.product .button.add_to_cart_button,
ul.products li.product .added_to_cart.wc-forward,
ul.products li.product .button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.06rem; /* 6px */
    width: 100%;
    padding: 8px 16px; /* 8px 16px */
    margin-top: 0.10rem;      /* 10px */
    background: var(--hdc-primary, #7B1D1D);
    color: #fff !important;
    font-size: var(--size-2, clamp(14px, 0.16rem, 16px));
    font-weight: 400;
    text-decoration: none !important;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: var(--transition-fast, background 0.15s);
    min-height: 44px; /* 44px — meets WCAG 2.5.8 */
    box-sizing: border-box;
}
ul.products li.product .button::after {
    display: none !important;
}
ul.products li.product .button.add_to_cart_button::before {
    content: '+';
    font-size: 1.2em;
    line-height: 1;
}

ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product .added_to_cart.wc-forward:hover,
ul.products li.product .button:hover {
    background: var(--hdc-primary-dark, #641717) !important;
    color: #fff !important;
}

/* Focus ring on the Add to Cart button (WCAG 2.4.7) */
ul.products li.product .button.add_to_cart_button:focus {
    outline: none;
}

ul.products li.product .button.add_to_cart_button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px var(--hdc-primary, #7B1D1D);
}

/* Loading state */
ul.products li.product .button.add_to_cart_button.loading {
    opacity: 0.7;
    cursor: wait;
}

/* "View cart" link that appears after adding */
ul.products li.product .added_to_cart.wc-forward {
    background: var(--colour-secondary, #35403F);
    margin-top: 0.05rem; /* 5px */
    width: fit-content;
}

/* ==========================================================================
   PRODUCT LOOP — GRID / LIST VIEWS
   ========================================================================== */

body.hdc-view-grid ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
}

body.hdc-view-list ul.products {
    display: block !important;
}

body.hdc-view-list ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 0.15rem !important; /* 15px */
    padding: 0.16rem !important;       /* 16px */
    background: #fff;
    border: 1px solid var(--hdc-border-layout);
    border-radius: 4px;
    box-sizing: border-box;
    gap: 0.20rem; /* 20px */
    column-gap: 60px !important;
}

body.hdc-view-list ul.products li.product > a:first-child {
    flex-shrink: 0;
}

body.hdc-view-list ul.products li.product img {
    width: 1.30rem !important;  /* 130px */
    height: 1.30rem !important;
    object-fit: contain;
    display: block;
}

body.hdc-view-list ul.products li.product .woocommerce-loop-product__title,
body.hdc-view-list ul.products li.product h2 {
    text-align: left !important;
    font-size: var(--size-2) !important; /* clamp(14px, 0.16rem, 16px) */
    margin-top: 0 !important;
}

body.hdc-view-list ul.products li.product .price {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    margin-left: auto !important;
}
body.hdc-view-list ul.products li.product .button, body.hdc-view-list ul.products li.product .add_to_cart_button {
    margin-bottom: auto;
}

body.hdc-view-list ul.products li.product .button,
body.hdc-view-list ul.products li.product .add_to_cart_button {
    display: inline-block;
}

body.hdc-view-list ul.products li.product .product-info-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.08rem; /* 8px */
}


.hdc-incl-gst {
    font-size: 0.75em;
    font-weight: normal;
    opacity: 0.7;
    font-style: italic;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.woocommerce-pagination {
    margin-top: 0.32rem;
    width: 100%;
}

.woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.06rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
}

.woocommerce #page-container nav.woocommerce-pagination ul li a,
.woocommerce #page-container nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    min-height: 44px;
    padding: 0 12px;
    font-size: var(--size-2, clamp(14px, 0.16rem, 16px));
    font-weight: 500;
    color: var(--hdc-primary, #7B1D1D);
    background: #fff;
    border: 1px solid var(--hdc-border-ui, #767676);
    border-radius: 0;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

.woocommerce #page-container nav.woocommerce-pagination ul li span.current {
    background: var(--hdc-primary, #7B1D1D);
    color: #fff;
    border-color: var(--hdc-primary, #7B1D1D);
    cursor: default;
}

.woocommerce #page-container nav.woocommerce-pagination ul li a.page-numbers:hover {
    background: var(--hdc-primary, #7B1D1D);
    color: #fff;
    border-color: var(--hdc-primary, #7B1D1D);
}

.woocommerce #page-container nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
    outline: 2px solid var(--hdc-focus-colour, #7B1D1D);
    outline-offset: 2px;
}


.hdc-search-form {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.hdc-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: var(--hdc-primary);
    color: #fff;
    border: 1px solid var(--hdc-primary);
    border-left: none;
    border-radius: 0;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: var(--transition-fast, background 0.15s);
    flex-shrink: 0;
}

.hdc-search-btn svg {
    width: 16px;
    height: 16px;
}

.hdc-search-btn:hover {
    background: var(--hdc-primary-dark);
    border-color: var(--hdc-primary-dark);
}

.hdc-search-btn:focus {
    outline: none;
}

@media (max-width: 600px) {

  .hdc-controls-bar button[type="submit"],
  .hdc-controls-bar input[type="submit"] {
    width: 100%;
  }
}

.hdc-view-list.woocommerce ul.products li.product a img {
    max-height: 150px;
    min-height: 150px;
}
.hdc-view-list.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: flex;
    width: 70%;
    align-items: center;
    column-gap: 60px;
}


@media screen and (max-width:800px) {
    body.hdc-view-list ul.products li.product .price {
        margin-left: 0px !important;
    }
    .hdc-view-list.woocommerce ul.products li.product a.woocommerce-loop-product__link {
        flex-direction: column;
        width: 50%;
        align-items: center;
    }
    .hdc-view-list.woocommerce ul.products li.product a img,
    .hdc-view-list.woocommerce ul.products li.product .et_shop_image {
        width: 100% !important;
    }
}
@media screen and (max-width:600px) {
    .hdc-view-list .woocommerce.columns-3 ul.products li.product {
        flex-direction: column !important;
    }
    .hdc-view-list.woocommerce ul.products li.product a.woocommerce-loop-product__link {
        width: 100%;
    }
    body.hdc-view-list ul.products li.product .button, body.hdc-view-list ul.products li.product .add_to_cart_button {
        margin-left: auto;
        margin-right: auto;
    }
}