/*
 Theme Name:   YR Online (GeneratePress Child Theme)
 Description:  Child theme for GeneratePress, customised for YR Online.
 Author:       Difference Design
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/**
 * @license
 * MyFonts Webfont Build ID 4136787, 2021-08-04T22:44:13-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FF Mark Web Pro Regular by FontFont
 * URL: https://www.myfonts.com/fonts/fontfont/mark/pro-regular/
 * Copyright: 2016 published by Monotype GmbH
 * 
 * Webfont: FF Mark Web Pro Medium by FontFont
 * URL: https://www.myfonts.com/fonts/fontfont/mark/pro-medium/
 * Copyright: 2013 published by FontShop International GmbH
 * 
 * Webfont: FF Mark Web Pro Bold by FontFont
 * URL: https://www.myfonts.com/fonts/fontfont/mark/pro-bold/
 * Copyright: 2013 published by FontShop International GmbH
 * 
 * 
 * 
 * © 2021 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3f1f534");

@font-face {
    font-family: 'Mark-Pro';
    src: url('assets/fonts/FFMarkWebProRegular.woff2') format('woff2'),
         url('assets/fonts/FFMarkWebProRegular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Mark-Pro';
    src: url('assets/fonts/FFMarkWebProMedium.woff2') format('woff2'),
         url('assets/fonts/FFMarkWebProMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Mark-Pro';
    src: url('assets/fonts/FFMarkWebProBold.woff2') format('woff2'),
         url('assets/fonts/FFMarkWebProBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: auto;
}

/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * gotham-condensed:
 *   - http://typekit.com/eulas/0000000000000000775aa92c
 *
 * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2026-03-30 00:03:06 UTC"}*/

@import url("https://p.typekit.net/p.css?s=1&k=xjx6kzz&ht=tk&f=59984&a=3204163&app=typekit&e=css");

@font-face {
    font-family:"gotham-condensed";
    src:url("https://use.typekit.net/af/b50fe4/0000000000000000775aa92c/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/b50fe4/0000000000000000775aa92c/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/b50fe4/0000000000000000775aa92c/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

/*** Sitewide variables ***/

:root {
    --black: #000000;
    --yr-grey-darkest: #404040;
    --yr-grey-mid: #d9d9d9;
    --yr-grey-light: #ececec;
    --yr-grey-lightest: #f5f5f5;
    --white: #ffffff;
    --yr-red: #ba141a;
    --yr-orange: #f05a22;
    --yr-yellow: #ffcb05;
    --yr-green: #76ad30;
}

/*** END: Sitewide variables ***/


/*** Fonts, Text ***/

html {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: subpixel-antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: black;
}

h1, h2, h3 {
    font-weight: 700;
}

h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}

/*** END: Fonts, Text ***/

.site-header {
    border-top: 2px solid var(--yr-yellow);
}

/* Widen the inner header to act 'alignwide' */
@media (min-width: 900px) {
    .site-header .inside-header {
        width: 95vw;
        max-width: 1640px;
        margin: 0 auto;
        padding: 0;
    }
}

/*** Product Detail Page ***/

/* 1. Transform the main Woo container into a Grid */
.woocommerce #content div.product, 
.woocommerce div.product, 
.woocommerce-page #content div.product, 
.woocommerce-page div.product {
    display: grid !important;
    grid-template-columns: 58% 1fr; /* Left column gets 58%, Right gets the rest */
    gap: 30px;
    align-items: start; /* Stops the right column from stretching vertically */
    
    /* 2. THE MAGIC: We updated the map to include accessories! */
    grid-template-areas:
        "gallery     summary"
        "tabs        summary"
        "custom-specs-table summary"
        "accessories summary"
        "related     related";
}

/* 3. Strip WooCommerce's default float layouts */
.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 4. Assign the WooCommerce blocks to our Grid Areas */
.woocommerce-product-gallery { 
    grid-area: gallery; 
}

/* The Sticky Right Column (Perfectly Constrained!) */
.summary.entry-summary { 
    grid-area: summary; 
    background: var(--yr-grey-lightest);
    border-radius: 8px;
    padding: 40px;
}

.woocommerce-tabs.wc-tabs-wrapper { 
    grid-area: tabs; 
    margin-top: 20px; 
}

.yr-accessories-wrapper {
    grid-area: accessories;
    width: 100%;
    margin-top: 20px;
}

.related.products { 
    grid-area: related; 
    margin-top: 60px;
}

/* 5. Mobile Responsiveness (Stacks everything perfectly) */
@media (max-width: 800px) {
    .woocommerce #content div.product, 
    .woocommerce div.product, 
    .woocommerce-page #content div.product, 
    .woocommerce-page div.product {
        grid-template-columns: 1fr;
        gap: 30px;
        /* Redrawing the map for mobile to stack exactly like your PDF! */
        grid-template-areas:
            "gallery"
            "summary"
            "tabs"
            "accessories"
            "related";
    }
}

.product-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    text-align: left;
    border: 0;
}

.product-specs-table th,
.product-specs-table td {
    padding: 10px 6px;
    border: 0;
    font-weight: normal;
    text-box: trim-both cap alphabetic;
}

.product-specs-table th {
    width: 50%;
    border-right: 8px solid white;
    font-weight: 500;
}

.product-specs-table td {
    text-align: center;
}

.product-specs-table tbody tr:nth-child(even) {
    background-color: var(--yr-grey-lightest);
}

.product-specs-table tbody tr:hover {
    background-color: var(--yr-grey-light);
    transition: background-color 0.2s ease;
}

.product-specs-table td.is-included,
.product-specs-table td.is-built-in {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,0C5.8780003,0,3.8430004.8430004,2.3430004,2.3430004S0,5.8780003,0,8c0,2.1210003.8430004,4.1560001,2.3430004,5.6560001,1.5,1.5010004,3.5349998,2.3439999,5.6569996,2.3439999,2.1210003,0,4.1560001-.8429995,5.6560001-2.3439999,1.5009995-1.5,2.3439999-3.5349998,2.3439999-5.6560001,0-2.1219997-.8430004-4.1569996-2.3439999-5.6569996-1.5-1.5-3.5349998-2.3430004-5.6560001-2.3430004M12.1560001,6.7810001l-4.8000002,4.4000001c-.316.29-.803.2789998-1.1059999-.0240002l-2.3999996-2.4000001c-.1540003-.1489997-.2420006-.3540001-.2440004-.5679998-.0019999-.2150002.0830002-.4210005.2340002-.573.1520004-.1520004.3579998-.2360001.573-.2340002s.4200001.0900002.5679998.2440004l1.8580003,1.8589997,4.2359996-3.8829999c.3250008-.2989998.8310003-.2770004,1.1300001.0489998.2989998.3249998.2770004.8310003-.0489998,1.1300001Z' fill='%23ba141a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
}

/* The 'Built-in' Checkmark + Text Combo */
.product-specs-table td.is-built-in {
    background-position: left calc(50% - 20px) center;
    padding-left: 42px; 
}

.woocommerce div.product .product_title {
    text-box: trim-both cap alphabetic;
}

article.product ul {
    margin-left: 0;
    padding-left: 1em;
}

article.product ul li {
    padding-left: 1em;
    margin-bottom: 0.25em;
}

article.product ul li:last-child {
    margin-bottom: 0;
}

article.product ul li::marker {
    color: var(--yr-yellow);
}

/* Hide QTY selector on single product pages only */
.woocommerce div.product form.cart .quantity {
    display: none !important;
}

/* The Main Card */
.yr-branch-stock-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* The Header */
.yr-stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h3.yr-stock-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--yr-grey-darkest);
    display: flex;
    align-items: center;
    background-image: url('assets/images/Branch-Stock-Grey.svg');
    background-position: left center;
    background-size: 30px;
    background-repeat: no-repeat;
    padding-left: 45px;
    line-height: 2;
}

.yr-expand-icon {
    all: unset;
    cursor: pointer;
    display: flex;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.999999 20'%3E%3Cpolygon points='8.625 0 8.625 8.7299995 0 8.7299995 0 11.3409996 8.625 11.3409996 8.625 20 11.3039999 20 11.3039999 11.3409996 19.999999 11.3409996 19.999999 8.7299995 11.3039999 8.7299995 11.3039999 0 8.625 0' fill='%23404040'/%3E%3C/svg%3E");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.yr-expand-btn.is-active .yr-expand-icon {
    transform: rotate(45deg);
}

.yr-collapsed-content {
    display: none;
}

.yr-stock-list {
    margin-top: 20px;
}

button.yr-full-row-trigger {
    all: unset;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

button.yr-full-row-trigger:hover {
    opacity: 0.8;
}

button.yr-full-row-trigger:hover .yr-button-text {
    text-decoration: underline;
}

button.yr-full-row-trigger:focus-visible {
    outline: 2px solid rgb(0, 95, 204);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Ensure mouse clicks don't trigger the outline just in case older browsers get confused */
button.yr-full-row-trigger:focus:not(:focus-visible) {
    outline: none;
}

/* The Grid Rows */
.yr-stock-row {
    display: grid;
    grid-template-columns: 190px auto 80px;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.yr-stock-row:last-child {
    margin-bottom: 0;
}

/* Typography */
.yr-city-name {
    font-size: 16px;
    color: var(--yr-grey-darkest);
}
.yr-status-text {
    font-size: 12px;
    color: var(--yr-grey-darkest);
    text-align: left;
}

/* The Beautiful Pill Bars */
.yr-stock-bars {
    display: flex;
    gap: 8px;
}

.yr-bar {
    height: 10px;
    width: 33%;
    border-radius: 99px;
    background-color: var(--yr-grey-light);
    transition: background-color 0.3s ease;
}

/* The Logic Colors */
.yr-bar.red {
    background-color: var(--yr-red);
}

.yr-bar.yellow {
    background-color: var(--yr-yellow);
}

.yr-bar.green {
    background-color: var(--yr-green);
}

.yr-accessories-wrapper {
    background: #fff;
    padding-top: 20px;
}
.yr-accessories-title {
    font-size: 18px;
    margin-bottom: 5px;
    color: var(--yr-grey-darkest);
}
.yr-accessories-desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}
.yr-accessories-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.yr-accessories-table th {
    background: #f9f9f9;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #444;
    border-bottom: 2px solid var(--yr-grey-light);
}
.yr-accessories-table td {
    padding: 12px;
    border-bottom: 1px solid var(--yr-grey-lightest);
    vertical-align: middle;
}
.yr-accessories-table td a {
    color: #2c3e50;
    font-weight: 500;
    text-decoration: none;
}
.yr-accessories-table td a:hover {
    color: #3498db;
}
.yr-accessories-table td code {
    background: #f4f4f4;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #d35400;
}

@media (min-width: 900px) {
    .alignwide {
        width: 95vw;
        max-width: 1640px;
        margin: 0 auto;
        padding: 0;
    }
    
/* Widen the main product info (Alignwide) */
    body.single-product .site.grid-container {
        width: 95vw;
        max-width: 1640px;
        margin: 0 auto;
    }
}

.single-product div.product .summary.entry-summary {
    position: relative;
    overflow: visible !important;
}

/* 2. Style the floating badge */
.product-callout {
    position: absolute;
    top: -30px;
    left: 0;
    z-index: 5;
    height: 30px;
    width: auto;
}

.product-callout .callout-badge {
    background-color: var(--yr-red);
    color: white;
    font-family: "gotham-condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 12px;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    letter-spacing: 0.5px;
    height: 30px !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
}

.product-callout::after {
    content: '';
    background-color: var(--yr-red);
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8,8V0h-.0515456C3.5588909,0,0,3.5565524,0,7.9452624v.0547376h8Z' fill='%23f3f4f4'/%3E%3C/svg%3E");
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: -8px;
    left: 0;
}

.callout-color-red .callout-badge,
.product-callout.callout-color-red::after {
    background-color: var(--yr-red);
}

.callout-color-orange .callout-badge,
.product-callout.callout-color-orange::after {
    background-color: var(--yr-orange);
}

.callout-color-yellow .callout-badge,
.product-callout.callout-color-yellow::after {
    background-color: var(--yr-yellow);
    color: black;
}

.callout-color-green .callout-badge,
.product-callout.callout-color-green::after {
    background-color: #76ad30;
}

.callout-color-dark_grey .callout-badge,
.product-callout.callout-color-dark_grey::after {
    background-color: var(--yr-grey-darkest);
}

.callout-color-black .callout-badge,
.product-callout.callout-color-black::after {
    background-color: black;
}

.sidebar-delivery-note {
    background-image: url('assets/images/Delivery-Truck-Grey.svg');
    background-position: left center;
    background-size: 30px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.sidebar-delivery-note p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/*** END: Product Detail Page ***/



/*** Woo Cart and Checkout ***/

/* 1. Turn the entire checkout form into a Grid */
form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 55% 1fr; /* Left side form, Right side cart */
    gap: 60px;
    align-items: start;
}

/* 2. Strip the old-school floats and widths */
.woocommerce-checkout .col2-set {
    width: 100% !important;
    float: none !important;
}

/* 3. Stack the Billing and Shipping forms vertically on the left */
.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 30px;
}

/* 1. Style the brand new Right Column Wrapper */
.yr-sticky-order-column {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    
    /* Make the whole column sticky! */
    position: sticky;
    top: 40px;
    transform: translateZ(0); 
    will-change: transform;
}

/* 2. Reset the H3 margin so it sits flush at the top of the gray box */
.yr-sticky-order-column h3#order_review_heading {
    margin-top: 0;
    padding-top: 0;
    border: none;
}

/* 6. Mobile Responsiveness */
@media (max-width: 800px) {
    form.woocommerce-checkout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    #order_review {
        position: static; /* Turn off sticky on mobile */
    }
}

/*** END: Woo Cart and Checkout ***/