/* Add spacing between product gallery thumbnails */
.woocommerce div.product .flex-control-thumbs {
    display: flex;
    gap: 12px;           /* Increase or decrease this value */
    flex-wrap: wrap;
    margin-top: 20px;
}
/* Product meta */
.wp-block-woocommerce-product-meta .wp-block-group {
    display: grid !important;
    grid-template-columns: 90px 1fr;
    row-gap: 12px;
    column-gap: 20px;
}

/* Category row */
.wp-block-woocommerce-product-meta .taxonomy-product_cat{
    grid-column: 1 / span 2;
    display:grid;
    grid-template-columns:subgrid;
}

/* Tags row */
.wp-block-woocommerce-product-meta .taxonomy-product_tag{
    grid-column: 1 / span 2;
    display:grid;
    grid-template-columns:subgrid;
}

/* Keep the tags inline */
.wp-block-woocommerce-product-meta .taxonomy-product_tag a,
.wp-block-woocommerce-product-meta .taxonomy-product_tag .wp-block-post-terms__separator{
    display:inline;
}
/* ==========================
   Single Product Gallery
   ========================== */

/* Space between main image and thumbnails */
.woocommerce-product-gallery .flex-viewport {
    margin-bottom: 18px;
}

/* One row of thumbnails */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Each thumbnail */
.woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 calc((100% - 48px) / 5) !important;
    width: auto !important;
    margin: 0 !important;
}

/* Thumbnail images */
.woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%;
    height: auto;
    display: block;
}
/* ==========================================================
   WOOD & GRAIN HANDMADE
   Brand Colours
   ========================================================== */

:root{
    --wg-bg:#3a3a3a;
    --wg-light:#ffebd6;
    --wg-dark:#3a3a3a;
    --wg-gold:#d3af6d;
    --wg-border:#8d7a63;
}

/* ==========================================================
   CHECKOUT HEADINGS
   ========================================================== */

.wc-block-components-title,
.wc-block-components-checkout-step__title{
    color:var(--wg-light)!important;
}

/* ==========================================================
   GENERAL TEXT
   ========================================================== */

.wc-block-checkout,
.wc-block-checkout p,
.wc-block-checkout label,
.wc-block-checkout span,
.wc-block-checkout legend,
.wc-block-checkout address{
    color:var(--wg-light);
}

/* ==========================================================
   ORDER SUMMARY
   ========================================================== */

.wc-block-components-order-summary,
.wc-block-components-totals-item,
.wc-block-components-product-name,
.wc-block-components-order-summary-item__description{
    color:var(--wg-light);
}

/* ==========================================================
   LINKS
   ========================================================== */

.wc-block-checkout a{
    color:var(--wg-light);
}

.wc-block-checkout a:hover{
    color:white;
}

/* ==========================================================
   INPUT FIELDS
   ========================================================== */

.wc-block-checkout input,
.wc-block-checkout textarea,
.wc-block-checkout select{

    background:#ffffff;
    color:var(--wg-dark)!important;

    border:1px solid var(--wg-border);
}

/* Placeholder */

.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder{

    color:#666;
}

/* Floating labels */

.wc-block-components-text-input label{

    color:var(--wg-dark)!important;
}

/* ==========================================================
   SELECT BOXES
   ========================================================== */

.wc-blocks-components-select__select{

    color:var(--wg-dark)!important;
}

/* ==========================================================
   RADIO BUTTONS
   ========================================================== */

.wc-block-components-radio-control__label{

    color:var(--wg-light)!important;
}

/* ==========================================================
   CHECKBOX LABELS
   ========================================================== */

.wc-block-components-checkbox__label{

    color:var(--wg-light)!important;
}

/* ==========================================================
   PAYMENT BOXES
   ========================================================== */

.wc-block-components-radio-control__option{

    border:1px solid var(--wg-border)!important;
}

/* ==========================================================
   PLACE ORDER BUTTON
   ========================================================== */

.wc-block-components-button{

    background:var(--wg-gold)!important;

    color:white!important;

    border-radius:6px;
}

.wc-block-components-button:hover{

    filter:brightness(1.05);
}

/* ==========================================================
   ORDER TOTALS
   ========================================================== */

.wc-block-components-formatted-money-amount{

    color:var(--wg-light)!important;
}

/* ==========================================================
   SEPARATORS
   ========================================================== */

.wc-block-checkout hr{

    border-color:var(--wg-border)!important;
}
/* Related Products Add to Cart Button */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button a,
.wp-block-woocommerce-product-button .wp-block-button__link,
.related .add_to_cart_button,
.related .button {
    background-color: #c8a25b !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    transition: 0.2s ease;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-product-button a:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover,
.related .add_to_cart_button:hover,
.related .button:hover {
    background-color: #b18d4a !important;
    color: #ffffff !important;
}
/* Make Shop page buttons only as wide as their content */
.wc-block-product .wp-block-button,
.wc-block-grid__product .wp-block-button {
    width: auto !important;
    display: flex;
    justify-content: center;
}
/* Product Collection - shrink button container */
.wp-block-woocommerce-product-button {
    display: flex !important;
    justify-content: center !important;
}
/* Selected Pickup / Ship */
.wc-block-checkout__shipping-method-option--selected {
    color: #3f3b39 !important;
}

.wc-block-checkout__shipping-method-option--selected
.wc-block-checkout__shipping-method-option-title {
    color: #3f3b39 !important;
}

.wc-block-checkout__shipping-method-option--selected
.wc-block-checkout__shipping-method-option-icon {
    fill: #3f3b39 !important;
}
.wc-block-checkout__shipping-method-option--selected svg,
.wc-block-checkout__shipping-method-option--selected svg path {
    fill: #3f3b39 !important;
}
/* Country/Region & Province labels */
.wc-blocks-components-select__label {
    color: #6b625b !important;
    opacity: 1 !important;
}