.btn--withArrow-white:after{width:28px;height:20px;margin-top:-4px;display:inline-block;margin-left:8px;vertical-align:middle;content:"";background:url("data:image/svg+xml,%3csvg version='1.1' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath d='M1.28 17.92h28.16c0.707 0 1.28-0.573 1.28-1.28s-0.573-1.28-1.28-1.28h-28.16c-0.707 0-1.28 0.573-1.28 1.28s0.573 1.28 1.28 1.28z'%3e%3c/path%3e%3cpath d='M19.548 26.003c-0.485 0.515-0.46 1.325 0.055 1.809s1.325 0.46 1.809-0.055l10.24-10.88c0.464-0.493 0.464-1.262 0-1.755l-10.24-10.88c-0.485-0.515-1.295-0.539-1.809-0.055s-0.539 1.295-0.055 1.809l9.414 10.003-9.414 10.003z'%3e%3c/path%3e%3c/svg%3e") center center no-repeat;background-size:contain}

.darkBg h3{
    color: #fff;
}

.twoLineHeading h3{
    min-height: 52px;
}

@media (max-width: 768px) {
    .twoLineHeading h3{
        min-height: auto;
    }
}

.shadow-pink--img img{
    -webkit-box-shadow: 30px -16px 0px 0px #F3D7D9; 
    box-shadow: 30px -16px 0px 0px #F3D7D9;
}

.peopleGrid.withIcons .person__image img{
    margin: 0 auto;
    max-height: 166px;
    width: unset;
}

.peopleGrid.withIcons .person__image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 32px;
    min-height: 166px;
}

@media (min-width: 768px) {
    .imageProseRow--paddedProseWider2.imageProseRow--halfCols .imageProseRow__textCol__inner {
        max-width: 750px;
    }
    .imageProseRow--paddedProseWider2 .imageProseRow__textCol {
        width: 65%;
    }
    
    .imageProseRow--paddedProseWider2 .imageProseRow__imgCol {
        width: 35%;
    }
}

.imageProseRow--paddedProseWider2.imageProseRow--halfCols .imageProseRow__textCol {
    justify-content: flex-start;
}

/*addition gravity form class*/
#input_19_290_msdd{
    width: 100% !important;
}
.info-send-mail{
    padding: 0 0 10px 10px;
    background: #fff;
}
.info-send-mail .gfield label {
    position: absolute;
}
.your-select li{
cursor: pointer;
}
.tab-game-pieces .checked {
    background: #9c9496 !important;
}
.list-your-packaging.your-selectli.item-list:nth-child(4n+1),
.list-your-components.your-select li.item-list:nth-child(4n+1){
    clear: both;
}

.container.custom-bg-p{min-width: 980px;}
.board-game-gf_wrapper.gform_wrapper .popup-wrap{min-width: 766px;}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-left-lable{overflow: hidden;}
/*left lable and right input--- .gf-left-lable.gf_left_half */
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-left-lable .gfield_label,
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-left-lable .gfield_description{
	width: 20%;
    float: left;
    margin-right: 2%;
}
.gf-left-lable .ginput_container{
	width: 78% !important;
    float: left;
}
/*left lable and right input--- .gf-left-lable.gf_left_half */
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf_left_half.gf-left-lable .gfield_label{
	width: 30%;
    float: left;
    margin-right: 5%;
}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf_left_half.gf-left-lable .ginput_container:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm):not(.ginput_container_date):not(.ginput_quantity):not(.datepicker){
	width: 65% !important;
    float: left;
}
/*right lable and right input--- .gf-left-lable.gf_left_half */
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf_right_half.gf-left-lable .gfield_label{
	width: 30%;
    float: left;
    margin-right: 5%;
}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf_right_half.gf-left-lable .ginput_container:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm):not(.ginput_container_date):not(.ginput_quantity):not(.datepicker){
	width: 65% !important;
    float: left;
}
/*------components name*/
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-right-components {
	float: right;
    position: relative;
    display: block;
    width: 50%;
}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-right-components .gfield_label{
	width: 48%;
	float: left;
    margin-right: 2%;
}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-right-components .ginput_container {
    width: 50% !important;
    float: left;
    text-align: right;
}
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-right-components .ginput_container input{
	width: 100%;
}
/*hidden checkbox and radio button*/
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-hide-input .ginput_container_radio input,
.board-game-gf_wrapper.gform_wrapper .top_label li.gfield.gf-hide-input .ginput_container_checkbox input {
    visibility: hidden;
}

/*----[End]----*/

.page-template-custom-board-game-tp{
    background: #f6f6f6;
}
.custom-bg-p .proseWrap {
    text-align: center;
    margin-bottom: 55px;
}
.custom-bg-p .proseWrap h1 {
    font-weight: 600;
    font-size: 2.5rem;
}
.custom-bg-p .line-form h2 {
    display: none;
}
.custom-bg-p .line-form {
    background: #ccc;
    padding: 0 !important;
    border: none;
    height: 1px;
}
.page-id-5303.admin-bar .siteHeader {
    top: 30px;
}
.popup-wrap.wrap-hidden {
    display: none;
    position: fixed !important;
    top: 50px;
    width: 80%;
    left: 0;
    z-index: 1001;
    background: #fff;
    margin: 0 auto !important;
    padding-right: 0;
    height: 85%;
    position: fixed;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px !important;
}
.option-chosen input {
    display: none !important;
}
.overlay-popup {
    background-color: rgba(0, 0, 0, 0.7);
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.close-popup {
    position: fixed;
    width: 80%;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    height: 2px;
    margin: 0 auto;
}
.close-popup .btn-close {
    background: url(../images/close.svg) no-repeat;
    font-size: 25px;
    border: none;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 20px;
    position: absolute;
    right: 26px;
    top: -15px;
    background-size: cover;
    cursor: pointer;
}
.siteHeader {
    background: #fff;
}
.hidden-line {
    display: none;
}
.gform_wrapper form.board-game-gf {
    margin-bottom: 70px;
    overflow: hidden;
}
.board-game-gf .game-components img,.board-game-gf .packaging-options img {
    width: 100% !important;
    height: 70px !important;
}
.board-game-gf .packaging-options {
    clear: both;
}
.packaging-options .ginput_container ul.gfield_checkbox li label, .game-components .ginput_container ul.gfield_checkbox li label {
    font-size: 0.6em;
}
.board-game-gf .game-components, .board-game-gf .packaging-options {
    width: 50%;
    float: left;
    clear: none !important;    
    border-right: solid 1px #e8e8eb;
}
.board-game-gf .game-components .gfield_checkbox, .board-game-gf .packaging-options .gfield_checkbox{
    width: 100% !important;
}
.board-game-gf .your-game-components, .board-game-gf .your-packaging {
    width: 50%;
    float: right;
    clear: none !important;
    padding-right: 0 !important;
    padding-left: 16px;
}
.board-game-gf .game-components ul li, .board-game-gf .packaging-options ul li {
    width: 25%;
    float: left;
    text-align: center;
    font-weight: 600;
    color: #000;
}
.board-game-gf .game-components ul li:nth-child(4n+1) {
    clear: both;
}
.board-game-gf .board-game-left {
    float: left;
    width: 68%;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(244, 241, 241, 0.5);
    border: solid 1px #e8e8eb;
    padding: 20px;
}
.board-game-gf .board-game-right {
    float: right;
    width: 30%;
    clear: none !important;
    margin-top: 0 !important;
    padding-right: 0;
}

.board-game-gf .board-game-right .col-box {
    margin: 0 0 24px;
    padding: 24px !important;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(244, 241, 241, 0.5);
    border: solid 1px #e8e8eb;
    text-align: center;
    margin-top: 0 !important;
}
.board-game-gf #secHeading h1 {
    color: black;
    font-size: 16pt;
    font-weight: bold;
    padding: 20px 0;
    padding-top: 0;
}
.board-game-gf .gform_footer {
    display: none;
}
.board-game-gf .customize-cal {
    float: right;
}
.board-game-gf .customize-cal a {
    line-height: 56px;
    height: 60px;
    font-size: 18px;
    font-weight: 500;
    color: #b70013;
    border-color: #b70013;
    border: 1px solid;
    border-radius: 4px;
    display: inline-block;
    padding: 0 40px;
}
.board-game-gf .customize-cal a:hover {
    background: #b70013;
    color: #fff;
}
.board-game-gf .dont-see-what .dont-see-content {
    width: 70%;
    float: left;
}
.board-game-gf .nav-popup-btn .cancel-btn,.board-game-gf .nav-popup-btn-update .remove-btn {
    float: left;
}
.board-game-gf .nav-popup-btn .cancel-btn a,.board-game-gf .nav-popup-btn-update .remove-btn a {
    border-radius: 4px;
    background: url(/calculator/images/board-quote/PRL-X_cancel.png) 8px 9px no-repeat #F00;
    color: #fff;
    font-size: 18px;
    border: none;
    padding: 10px 10px 10px 40px;
    font-weight: 600;
}
.board-game-gf .nav-popup-btn,.board-game-gf .nav-popup-btn-update {
    margin-top: 40px;
}
.board-game-gf .nav-popup-btn .add-btn,.board-game-gf .nav-popup-btn-update .update-btn{
    float: right;
}
.board-game-gf .nav-popup-btn .add-btn a,.board-game-gf .nav-popup-btn-update .update-btn a{
    border-radius: 4px;
    background: url(/calculator/images/board-quote/PRL-Add.png) 8px 6px no-repeat #F00;
    color: #fff;
    font-size: 18px;
    border: none;
    padding: 10px 10px 10px 46px;
    font-weight: 600;
}
body .gform_wrapper .board-game-gf div.gform_body ul.gform_fields li.gfield.gfield_html ul.your-select {
    margin-left: 0 !important;
    list-style-type: none !important;
    overflow: hidden;
}
body .gform_wrapper .board-game-gf div.gform_body ul.gform_fields li.gfield.gfield_html ul.your-select li{
    list-style-type: none !important;   
}
.board-game-gf .your-select .item-list {
    width: 25%;
    text-align: center;
    float: left;
    padding: 0 10px !important;
}
.board-game-gf .your-select .item-list label {
    font-size: .6em;
    font-weight: 600;
    color: #000;
}
.board-game-gf .popup-wrap ul {
    overflow: hidden;
}
.board-game-gf .popup-wrap .bg-2-column ul li {
    width: 50%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .popup-wrap .bg-3-column ul li {
    width: 33.33%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .popup-wrap .bg-4-column ul li {
    width: 25%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .popup-wrap .bg-5-column ul li {
    width: 20%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .popup-wrap .bg-6-column ul li {
    width: 16.66%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .popup-wrap .bg-7-column ul li {
    width: 14.28%;
    float: left;
    padding: 0 5px !important;
}
.board-game-gf .rq-field {
    color: #e00700;
}
.board-game-gf .printing-price {
    display: none;
}
.board-game-gf .printing-price #secHeading h1 {
    font-size: 12pt;
    text-align: left;
}
.board-game-gf .printing-price .postcode {
    margin-bottom: 30px;
}
.board-game-gf .printing-price .postcode input {
    border-radius: 3px;
    background-color: #fff;
    box-shadow: inset 0 1px 3px 0 #b9bac5;
    width: 100%;
    padding: 10px 15px !important;
    border: none;
}
.total-price div hr{
	margin: 10px 0;
}
.printing-price #secHeading h1 {
    padding-bottom: 10px;
}
.board-game-gf .printing-price .total-price {
    text-align: left;
}
.board-game-gf .tab-plastic, .board-game-gf .tab-glass, .board-game-gf .tab-accessories {
    display: none;
    margin-bottom: 0 !important;
}  
body .gform_wrapper div.gform_body ul.gform_fields li.gfield.gfield_html ul.tab-game-pieces {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}
.board-game-gf .tab-game-pieces li {
    display: inline-block;
    padding: 8px 29px 8px;
    padding-left: 29px !important;
    background: #e6e7e9 url(/calculator/images/board-quote/right-border-normal.jpg) no-repeat right top;
    margin-left: -3px !important;
    position: relative;
    font-weight: 600;
    color: #000;
    cursor: pointer;
}
.board-game-gf .tab-game-pieces li.active {
    background: #fff;
    border: 1px solid #ddd;
    margin-left: 0 !important;
    border-bottom: none;
}
.board-game-gf .tab-game-pieces li.active:after {
    background: #fff url(/calculator/images/board-quote/right-border.jpg) no-repeat right top;
    content: "";
    height: 24px;
    width: 27px;
    position: absolute;
    right: 0;
    top: -1px;
}
.board-game-gf .tab-game-pieces li.active:before {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0px 18px 18px 0;
    border-color: transparent #fff transparent transparent;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -1px;
    z-index: 10;
    top: -1px;
}
.board-game-gf .hide-label label.gfield_label {
    display: none;
}
.board-game-gf .tab-gpieces{ 
    border: 1px solid #e5e5e5;
    margin-top: -9px !important;
    padding: 20px;
}
/*.board-game-gf .popup-wrap input[type="radio"], .board-game-gf .popup-wrap input[type="checkbox"] {
    display: none !important;
}*/
.board-game-gf .popup-wrap h5, .board-game-gf .popup-wrap h6, .board-game-gf .popup-wrap label.gfield_label {
    font-weight: normal;
    color: #000;
    font-size: 18px;
}
.board-game-gf .popup-wrap b {
    font-size: 13px;
    color: #000;
}
.board-game-gf .title-component {
    margin-bottom: 30px;
}
.board-game-gf .title-component h5{
    font-weight: 600;
}
.board-game-gf .left-title-main {
    float: left;
    clear: none !important;
    width: 120px !important;
}
.board-game-gf .left-title-main a {
    display: block;
    text-decoration: underline;
    color: #000;
    font-weight: 600;
    font-size: 14px;
}
.board-game-gf .left-title-main h5 {
    font-weight: 600;
}
.board-game-gf .main-cl-1 {
    float: left;
    width: calc(100% - 120px);
    clear: none !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    text-align: center; 
}
.board-game-gf .popup-wrap input[type="radio"] + label img,.board-game-gf .popup-wrap input[type="checkbox"] + label img {
    border: 5px solid #fff;
}
.board-game-gf .popup-wrap input[type="radio"]:checked + label img,.board-game-gf .popup-wrap input[type="checkbox"]:checked + label img {
    border: 5px solid #dd1f27;
}
body .gform_wrapper form.board-game-gf div.gform_body ul.gform_fields li.gfield.gfield_html ol.stepsBar {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
body .gform_wrapper form.board-game-gf div.gform_body ul.gform_fields li.gfield.gfield_html ol.stepsBar li {
    list-style-type: none !important;
}
.board-game-gf .stepsBar a:before {
    width: 36px;
    height: 36px;
}
.board-game-gf .extra-fields h2.gsection_title, .board-game-gf .existing-fields h2.gsection_title {
    color: #ff8000;
}

/* /// HUB STYLES ////////// */
/* Global Hub Styles */
.hub .proseWrap h2 a, .hub .proseWrap h4 a{
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit;
}

.hub .asideMainLayout {
    align-items: flex-start;
}

.hub .asideMainLayout__aside {
    background: #F6F6F6;
    margin-left: 60px;
    min-width: 300px;
    padding: 6px 24px;
}

.hub .asideMainLayout__aside .widget{
    padding: 18px 0 0 0;
}

.hub .asideMainLayout__aside .widget h3{
    margin-bottom: 12px;
}

.hub .asideMainLayout__aside .widget p{
    font-size: 14px;
    line-height: 20px;
    margin: 12px 0 16px 0;
}

.hub .asideMainLayout__aside .widget p img{
    float: left;
    margin-right: 18px;
}

.hub .asideMainLayout__aside .widget a.textLink{
    font-size: 16px;
}

.hub .asideMainLayout__aside .widget li{
    margin: 12px 0;
}

/* HUB ARTICLE */
.page-template-template-single-hub .hub.subheader,
.tax-page_categories .hub.subheader,
.hub.subheader{
    background: #343448;
    color: #fff;
    padding: 18px 0;
}
.page-template-template-single-hub .hub.subheader h5,
.tax-page_categories .hub.subheader h5,
.hub.subheader h5{
    font-size: 18px;
    margin-right: 12px;
}

.page-template-template-single-hub .hub.subheader a,
.tax-page_categories .hub.subheader a,
.hub.subheader a{
    color: #ffffff;
}

.page-template-template-single-hub .hub.subheader .container a:nth-child(2),
.tax-page_categories .hub.subheader .container a:nth-child(2),
.hub.subheader .container a:nth-child(2){
    font-size: 16px;
    font-weight: normal;
    margin-right: 12px;
    opacity: .6;
}

.hub.subheader .container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

@media (min-width: 768px){
    .hub.subheader.centered .container {
        justify-content: center;
    }
}

@media (max-width: 768px){
    .hub.subheader.centered .container a:nth-child(n+2){
        margin-top: 7px;
    }
}

/* 992 or smaller */
@media (max-width: 992px){
    .page-template-template-single-hub .hub .asideMainLayout__aside,
    .tax-page_categories .hub .asideMainLayout__aside
     {
        min-width: 250px;
    }
}

/* 768 or smaller */
@media (max-width: 768px){ 
    .page-template-template-single-hub .hub .asideMainLayout__aside{
        margin-left: 0;
        margin-top: 75px;
    }
    .page-template-template-single-hub .hub .asideMainLayout__aside .widget p {
        font-size: 16px;
    }
}

/* ///////////// HUB HOMEPAGE */
.tax-page_categories .hub-home .asideMainLayout {
    margin-top: 0;
}

.page-template-template-home-hub .top .asideMainLayout__main h2,
.hub-home .top .asideMainLayout__main h2
{
    margin-top: 32px;
}

.page-template-template-home-hub .top .asideMainLayout__aside,
.hub-home .top .asideMainLayout__aside{
    background: none;
    /* min-width: 535px; */
    width: 45%;
}

.page-template-template-home-hub .top .asideMainLayout__aside section,
.hub-home .top .asideMainLayout__aside section{
    clear: both;
    float: left;
    margin-bottom: 40px;
}

.page-template-template-home-hub .top .asideMainLayout__aside p,
.hub-home .top .asideMainLayout__aside p{
    font-size: 16px;
    margin-bottom: 15px !important;
    margin-top: 5px;
}

.page-template-template-home-hub .top .asideMainLayout__aside a.img,
.hub-home .top .asideMainLayout__aside a.img{
    float: left;
}

.page-template-template-home-hub .top .asideMainLayout__aside img,
.hub-home .top .asideMainLayout__aside img{
    float: left;
    margin-right: 18px;
    margin: 0 18px 0 0;
}

.page-template-template-home-hub .featured-categories h2:nth-of-type(1n),
.hub-home .featured-categories h2:nth-of-type(1n){
    margin-top: 0;
}

.page-template-template-home-hub .featured-categories .proseWrap > section,
.hub-home .featured-categories .proseWrap > section{
    margin: 80px 0;
}

.page-template-template-home-hub .featured-categories .proseWrap .categoriesGrid section,
.hub-home .featured-categories .proseWrap .categoriesGrid section{
    padding-bottom: 0;
}

.page-template-template-home-hub .featured-categories .categoriesGrid section p,
.hub-home .featured-categories .categoriesGrid section p{
    margin-bottom: 0 !important;
}

.page-template-template-home-hub section.term-lists .page_categories-custom-playing-cards,
.page-template-template-home-hub section.term-lists .page_categories-custom-board-games,
.page-template-template-home-hub section.term-lists .page_categories-featured-page,
.hub-home section.term-lists .page_categories-custom-playing-cards,
.hub-home section.term-lists .page_categories-custom-board-games,
.hub-home section.term-lists .page_categories-featured-page{
    display: none;
}

.page-template-template-home-hub .cardsSection h2,
.hub-home .cardsSection h2{
    color: #343448;
    font-size: 28px;
    font-weight: bold;    
    line-height: 1.2;
    margin-bottom: 25px;
    text-align: left;
}

@media (min-width: 767px){
    .page-template-template-home-hub .categoriesGrid--large > *,
    .hub-home .categoriesGrid--large > *{
        min-width: 50%;
        max-width: 50%;
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
    }

    .page-template-template-home-hub .paddedSection--compact:nth-of-type(2n),
    .hub-home .paddedSection--compact:nth-of-type(2n),
    .tax-page_categories .paddedSection--compact.term-lists{
        padding-top: 0;
    }
}


@media (max-width: 767px){
    .page-template-template-home-hub .top .asideMainLayout__aside,
    .hub-home .top .asideMainLayout__aside{
        float: left;
        margin-top: 8px;
        margin-bottom: 16px;
        padding: 0;
        width: 100%;
    }
    
    .page-template-template-home-hub .top .asideMainLayout__aside section,
    .hub-home .top .asideMainLayout__aside section{
        margin-bottom: 24px;
    }
    
    .page-template-template-home-hub .featured-categories .proseWrap > section,
    .hub-home .featured-categories .proseWrap > section{
        margin: 40px 0;
    }
    
    .page-template-template-home-hub .categoriesGrid--large > * ,
    .hub-home .categoriesGrid--large > * {
        min-width: 50%;
        max-width: 50%;
    }
    
    .proseWrap .categoriesGrid {
        margin-bottom: 4px;
    }
    .hub .asideMainLayout__aside {
        margin-left: 0;
        margin-top: 40px;
    }
}

.page-template-template-home-hub .row .asideMainLayout__main .article,
.hub-home .row .asideMainLayout__main .article{
    max-width: 300px;
}
.page-template-template-home-hub .cardsSection .container,
.hub-home .cardsSection .container{
    padding-top: 65px;
/*     text-align: center; */
}

/* Hub Callout on project-types page */
.page-id-46 .hub-callout {
    flex-basis: 50%;   
    max-width: 50%;
    border: 7px solid #f8f8f8;
    box-sizing: border-box;
  font-size: 15px;
  line-height: 1.6;
    /* margin: 49px 0 7% 0; */
    margin-top: 49px;
  padding: 34px;
  text-align: center;
  vertical-align: baseline;
}

.page-id-46 .hub-callout a.categoriesGridItem img{
    display: none;
}

.page-id-46 .hub-callout .detailedCategoryGridItem__title{
    border-width: 0;
    box-sizing: border-box;
  color: #343448;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .0007em;
  line-height: 1.3;
  margin: 0 auto;
  max-width: 464px;
  padding: 0;
  vertical-align: baseline;
}

.page-id-46 .hub-callout .detailedCategoryGridItem__lead{
    border-width: 0;
    box-sizing: border-box;
  font-size: 100%;
  margin: 24px auto 2em;
  max-width: 464px;
  padding: 0;
  vertical-align: baseline;
}

.page-id-46 .hub-callout a.detailedCategoryGridItem__link{
    background-color: #e2071d;
  background-image: linear-gradient(-180deg,#e2071d 0%,#cf0c1f 100%);
  border: 1px solid #d71f32;
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  height: 38px;
  line-height: 36px;
  margin: 24px auto 0;
  max-width: 464px;
  min-width: 134px;
  padding: 0 13px;
  text-align: center;
    text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
}

.tax-page_categories .asideMainLayout {
    margin-top: 24px;
}

@media (max-width: 1024px) and (min-width: 376px){
.tax-page_categories .projectBlocksGrid > * {
        min-width: 50%;
        max-width: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }
}

/* HOME PAGE DIRECT LINKS SECTION */
.halfColsSection.calloutDirectLinks {
    background: #f6f6f6 url("https://printninja.com/wp-content/uploads/2020/01/tokens-gray-1.jpg") right center no-repeat padding-box !important;
    background-size: 318px auto !important;
    display: flex;
    flex-wrap: wrap;
}

.halfColsSection.calloutDirectLinks .proseWrap ul{
    list-style-type: none;
    margin-left: 0;
}

.halfColsSection.calloutDirectLinks .proseWrap.sectionLeaderText {
    margin-bottom: 0;
    min-height: 0;
    padding-top: 50px;
    width: 100%;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap {
    display: flex;
    flex-direction: column;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap .products {
    display: inherit;
    /* flex-direction: row; */
    justify-content: space-between;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap .products div{
    display: inherit;
    flex-direction: column;
    margin-top: 0;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap .products div a{
    margin-top: 0;
    text-align: center;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap .kickstarter {
    display: flex; 
    align-items: center;
}

.halfColsSection.calloutDirectLinks .col1 .proseWrap .kickstarter div{
    margin-left: 20px;
    margin-top: 0;
}

.halfColsSection.calloutDirectLinks .col2 {
    width: 35%;
}

@media (max-width: 1024px)  and (min-width: 768px){
    .halfColsSection.calloutDirectLinks {
        background-image: none !important;
    }
    .halfColsSection.calloutDirectLinks .col2 {
        width: 50%;
    }
}

@media (max-width: 768px) and (min-width: 414px) {
    .halfColsSection.calloutDirectLinks .col2 {
        width: 50%;
    }
    .halfColsSection.calloutDirectLinks {
        background-position: right bottom !important;
    }
}

@media (max-width: 414px) {
    .halfColsSection.calloutDirectLinks .col2 {
        width: 100%;
    }
    .halfColsSection.calloutDirectLinks {
        background-image: none !important;
    }
}

@media(min-width: 992px){
    .siteNavMiscActions.smartButton ul li{
        margin-left: 19px;
    }
}

@media(max-width: 991px){
    .siteNavMiscActions.smartButton ul li{
        margin-top:15px
    }
}



/* ============================================
   FAQ Section Styles v2
   Used on product pages (comic, booklet, etc.)
   ============================================ */

.pn-faq {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    padding-top: 10px;
}

.pn-faq > h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #e8e8eb;
    line-height: 1.3;
}

.pn-faq .pn-faq-item {
    padding: 24px 0 20px 0 !important;
    border-bottom: 1px solid #eaeaec;
    margin-top: 0 !important;
}

.pn-faq .pn-faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}

.pn-faq .pn-faq-item h3 {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #343448 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 8px;
    line-height: 1.4;
}

.pn-faq .pn-faq-item p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #525263 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pn-faq .pn-faq-item p a {
    color: #240298 !important;
    text-decoration: underline !important;
    font-weight: 500;
}

.pn-faq .pn-faq-item p a:hover {
    color: #f03a33 !important;
}

/* Specs table on booklet/card game pages */
.pn-specs-table {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

.pn-specs-table > h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.3;
}

.pn-specs-table table {
    width: 100%;
    border-collapse: collapse;
}

.pn-specs-table table th {
    background: #343448 !important;
    color: #fff !important;
    padding: 12px 16px !important;
    text-align: left;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 !important;
}

.pn-specs-table table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #e8e8eb;
    font-size: 1rem !important;
    color: #525263 !important;
    margin: 0 !important;
}

.pn-specs-table table tr:nth-child(even) td {
    background: #f7f7f8;
}

.pn-specs-table table td:first-child {
    font-weight: 600 !important;
    color: #343448 !important;
    width: 35%;
}

@media (max-width: 768px) {
    .pn-faq > h2,
    .pn-specs-table > h2 {
        font-size: 22px !important;
    }

    .pn-faq .pn-faq-item h3 {
        font-size: 1.05rem !important;
    }

    .pn-specs-table table td,
    .pn-specs-table table th {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }
}


/* Blog Grid Card Styles */
.detailedCategoryGridItem {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}
.detailedCategoryGridItem:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important;
}
.detailedCategoryGridItem .categoriesGridItem {
    display: block !important;
    overflow: hidden !important;
}
.detailedCategoryGridItem .categoriesGridItem img {
    border-radius: 8px 8px 0 0 !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
}
.detailedCategoryGridItem .detailedCategoryGridItem__title {
    padding: 0 20px !important;
    margin: 16px 0 8px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #343448 !important;
    line-height: 1.3 !important;
}
.detailedCategoryGridItem .detailedCategoryGridItem__lead {
    padding: 0 20px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #525263 !important;
}
.detailedCategoryGridItem .detailedCategoryGridItem__link {
    padding: 0 20px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #240298 !important;
    text-decoration: none !important;
}
.detailedCategoryGridItem .detailedCategoryGridItem__link:hover {
    text-decoration: underline !important;
}


/* ========================================
   Sample Pack Pages
   ======================================== */

/* Hero */
.pn-sample-hero {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 40px auto !important;
}
.pn-sample-hero h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-bottom: 12px !important;
}
.pn-sample-hero p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #525263 !important;
    margin-bottom: 0 !important;
}

/* Product Grid */
.pn-sample-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
@media (max-width: 991px) {
    .pn-sample-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}
@media (max-width: 575px) {
    .pn-sample-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
    }
}

/* Product Card */
.pn-sample-card {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.pn-sample-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Card Image */
.pn-sample-card__image {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    background: #f5f5f7 !important;
}
.pn-sample-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Card Body */
.pn-sample-card__body {
    padding: 20px 24px 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.pn-sample-card__body h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}
.pn-sample-card__body p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #525263 !important;
    margin: 0 0 16px 0 !important;
    flex: 1 !important;
}

/* Price */
.pn-sample-card__price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-bottom: 16px !important;
}
.pn-sample-card__price small {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #707081 !important;
}

/* Buttons */
.pn-sample-card__btn {
    display: inline-block !important;
    width: 100% !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
    border: none !important;
}
.pn-sample-card__btn--cart {
    background: #d71f32 !important;
    color: #fff !important;
}
.pn-sample-card__btn--cart:hover {
    background: #b8192a !important;
    color: #fff !important;
    text-decoration: none !important;
}
.pn-sample-card__btn--learn {
    background: transparent !important;
    color: #240298 !important;
    border: 2px solid #240298 !important;
}
.pn-sample-card__btn--learn:hover {
    background: #240298 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Hide the plugin's default product box styling inside our cards */
.pn-sample-card .wp_cart_product_display_box_wrapper,
.pn-sample-card .wp_cart_product_display_box {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
}
.pn-sample-card .wp_cart_product_thumbnail,
.pn-sample-card .wp_cart_product_name,
.pn-sample-card .wp_cart_product_description,
.pn-sample-card .wp_cart_product_price {
    display: none !important;
}
.pn-sample-card .wp_cart_product_display_bottom {
    padding: 0 !important;
    margin: 0 !important;
}
.pn-sample-card .wp_cart_product_button {
    padding: 0 !important;
    margin: 0 !important;
}
.pn-sample-card .wp_cart_button_wrapper {
    margin: 0 !important;
}
/* Style the add-to-cart form button - hide image, use wrapper as styled button */
.pn-sample-card .wp-cart-button-form {
    margin: 0 !important;
}
.pn-sample-card .wp_cart_button_wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    background: #d71f32 !important;
    border-radius: 6px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    overflow: hidden !important;
}
.pn-sample-card .wp_cart_button_wrapper::after {
    content: "Add to Cart" !important;
    display: block !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-family: "Work Sans", sans-serif !important;
    pointer-events: none !important;
}
.pn-sample-card .wp_cart_button_wrapper:hover {
    background: #b8192a !important;
}
.pn-sample-card .wp_cart_button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Back link for individual pages */
.pn-sample-back {
    display: inline-block !important;
    margin-bottom: 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #240298 !important;
    text-decoration: none !important;
}
.pn-sample-back:hover {
    text-decoration: underline !important;
    color: #240298 !important;
}

/* Section label */
.pn-sample-section-label {
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #707081 !important;
    margin-bottom: 8px !important;
}

/* Divider between standard and deluxe */
.pn-sample-divider {
    text-align: center !important;
    margin: 40px 0 32px !important;
    position: relative !important;
}
.pn-sample-divider::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #e8e8eb !important;
}
.pn-sample-divider span {
    background: #f7f7f8 !important;
    padding: 0 20px !important;
    position: relative !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #707081 !important;
}

/* ========================================
   Checkout Page Overrides
   ======================================== */
.pn-checkout-wrap {
    max-width: 800px !important;
    margin: 0 auto !important;
}
.pn-checkout-wrap h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Override plugin cart table */
.pn-checkout-wrap .wp_cart_checkout_table,
.pn-checkout-wrap table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e8eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
.pn-checkout-wrap table th,
.pn-checkout-wrap table td {
    padding: 14px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #e8e8eb !important;
    font-size: 14px !important;
}
.pn-checkout-wrap table th {
    background: #f7f7f8 !important;
    font-weight: 600 !important;
    color: #343448 !important;
}
.pn-checkout-wrap table tr:last-child td {
    border-bottom: none !important;
}

/* PayPal button wrapper */
.pn-checkout-wrap .wp_cart_checkout_button_area {
    text-align: center !important;
    margin-top: 24px !important;
}
.pn-checkout-wrap input[name="submit"] {
    border-radius: 6px !important;
}

/* Individual page detail section */
.pn-sample-detail {
    max-width: 800px !important;
    margin: 0 auto !important;
}
.pn-sample-detail h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-bottom: 12px !important;
}
.pn-sample-detail p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #525263 !important;
}
.pn-sample-detail img {
    border-radius: 8px !important;
    margin: 16px 0 !important;
}
.pn-sample-detail .pn-sample-card__price {
    margin-top: 16px !important;
}

/* Learn more link under Add to Cart */
.pn-sample-card__learn {
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #240298 !important;
    text-decoration: none !important;
}
.pn-sample-card__learn:hover {
    text-decoration: underline !important;
    color: #240298 !important;
}

/* Center deluxe cards grid */
.pn-sample-grid--center {
    grid-template-columns: repeat(2, minmax(0, 340px)) !important;
    justify-content: center !important;
}
@media (max-width: 575px) {
    .pn-sample-grid--center {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Price note (refundable etc) */
.pn-sample-card__price-note {
    font-size: 13px !important;
    color: #707081 !important;
    margin-top: -12px !important;
    margin-bottom: 16px !important;
}

/* Center PayPal checkout buttons */
.pn-checkout-wrap #wpsc_paypal_button_1,
.shopping_cart #wpsc_paypal_button_1 {
    margin: 16px auto 0 auto !important;
}
.pn-checkout-wrap .wpsc_checkout_form_standard,
.shopping_cart .wpsc_checkout_form_standard {
    text-align: center !important;
}
.pn-checkout-wrap .wpsc_cart_title {
    text-align: center !important;
}
.pn-checkout-wrap .wpsc-pp-button-spinner-container {
    text-align: center !important;
}

/* Hide duplicate cart title from plugin */
.pn-checkout-wrap .wpsc_cart_title {
    display: none !important;
}
.pn-checkout-wrap .wspsc_cart_header_image {
    display: none !important;
}

/* Reduce top spacing on sample pack pages */
.pn-sample-hero-section.paddedSection {
    padding-top: 40px !important;
}
@media (max-width: 767px) {
    .pn-sample-hero-section.paddedSection {
        padding-top: 24px !important;
    }
}

/* Ensure learn more links are clickable above cart overlay */
.pn-sample-card__learn {
    position: relative !important;
    z-index: 2 !important;
}
.pn-sample-card .wp_cart_product_display_box_wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   Homepage: tighten gap between hero and "Outstanding Quality" section
   ======================================== */
.home .pageBanner + .paddedSection {
    padding: 0 !important;
}
.home .promptSection {
    padding-top: 40px !important;
}
@media (max-width: 767px) {
    .home .promptSection {
        padding-top: 24px !important;
    }
}


/* ========================================
   Sample Pack Individual Page Layout
   ======================================== */

/* Page wrapper - clean single column */
.pn-sp {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Back link */
.pn-sp .pn-sample-back {
    display: inline-block !important;
    margin-bottom: 32px !important;
}

/* Hero image */
.pn-sp__hero-img {
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 32px !important;
}
.pn-sp__hero-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
}

/* Title */
.pn-sp h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.25 !important;
}
@media (max-width: 575px) {
    .pn-sp h1 {
        font-size: 26px !important;
    }
}

/* Intro text */
.pn-sp__intro {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: #525263 !important;
    margin-bottom: 24px !important;
}

/* Price + CTA row */
.pn-sp__cta {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    padding: 20px 24px !important;
    background: #f7f7f8 !important;
    border-radius: 8px !important;
}
.pn-sp__cta-price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    white-space: nowrap !important;
}
.pn-sp__cta-price small {
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #707081 !important;
    margin-top: 2px !important;
}
.pn-sp__cta .wp_cart_product_display_box_wrapper,
.pn-sp__cta .wp_cart_product_display_box {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.pn-sp__cta .wp_cart_product_thumbnail,
.pn-sp__cta .wp_cart_product_display_bottom .wp_cart_product_name,
.pn-sp__cta .wp_cart_product_display_bottom .wp_cart_product_description,
.pn-sp__cta .wp_cart_product_display_bottom .wp_cart_product_price {
    display: none !important;
}
.pn-sp__cta .wp_cart_product_button {
    padding: 0 !important;
    margin: 0 !important;
}
.pn-sp__cta .wp_cart_button_wrapper {
    display: inline-block !important;
    position: relative !important;
    background: #d71f32 !important;
    border-radius: 6px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.pn-sp__cta .wp_cart_button_wrapper::after {
    content: "Add to Cart" !important;
    display: block !important;
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-family: "Work Sans", sans-serif !important;
    pointer-events: none !important;
}
.pn-sp__cta .wp_cart_button_wrapper:hover {
    background: #b8192a !important;
}
.pn-sp__cta .wp_cart_button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}
.pn-sp__cta .wp-cart-button-form {
    margin: 0 !important;
}
@media (max-width: 575px) {
    .pn-sp__cta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .pn-sp__cta .wp_cart_button_wrapper {
        width: 100% !important;
    }
    .pn-sp__cta .wp_cart_button_wrapper::after {
        display: block !important;
    }
}

/* Section headings */
.pn-sp h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin: 40px 0 16px 0 !important;
    line-height: 1.3 !important;
}
.pn-sp h2:first-of-type {
    margin-top: 0 !important;
}

/* Body text */
.pn-sp p,
.pn-sp li {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #525263 !important;
}
.pn-sp ul {
    padding-left: 20px !important;
    margin-bottom: 24px !important;
}
.pn-sp li {
    margin-bottom: 6px !important;
}

/* Video embed */
.pn-sp__video {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin: 24px 0 32px 0 !important;
}
.pn-sp__video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Image gallery */
.pn-sp__gallery {
    margin: 32px 0 !important;
}
.pn-sp__gallery-item {
    margin-bottom: 32px !important;
}
.pn-sp__gallery-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
}
.pn-sp__gallery-item figcaption,
.pn-sp__gallery-caption {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #707081 !important;
    font-style: italic !important;
    margin-top: 10px !important;
}

/* Divider */
.pn-sp__divider {
    border: none !important;
    border-top: 1px solid #e8e8eb !important;
    margin: 40px 0 !important;
}

/* Instagram / free section */
.pn-sp__free {
    background: #f0edff !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin: 32px 0 !important;
}
.pn-sp__free h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #240298 !important;
    margin: 0 0 8px 0 !important;
}
.pn-sp__free p {
    font-size: 14px !important;
    color: #525263 !important;
    margin: 0 !important;
}

/* Browse all link */
.pn-sp__browse-all {
    display: block !important;
    text-align: center !important;
    padding: 16px !important;
    margin: 40px 0 0 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #240298 !important;
    text-decoration: none !important;
    border: 2px solid #240298 !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.pn-sp__browse-all:hover {
    background: #240298 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Pricing table for deluxe packs */
.pn-sp__pricing-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e8e8eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 16px 0 24px 0 !important;
}
.pn-sp__pricing-table th,
.pn-sp__pricing-table td {
    padding: 12px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #e8e8eb !important;
    font-size: 15px !important;
    color: #343448 !important;
}
.pn-sp__pricing-table th {
    background: #f7f7f8 !important;
    font-weight: 600 !important;
}
.pn-sp__pricing-table tr:last-child td {
    border-bottom: none !important;
}

/* Deluxe form styling */
.pn-sp__form-section {
    margin: 40px 0 !important;
    padding: 32px !important;
    background: #f7f7f8 !important;
    border-radius: 10px !important;
}
.pn-sp__form-section h2 {
    margin-top: 0 !important;
}
.pn-sp__form-section .gform_wrapper {
    margin: 0 !important;
}

/* TrustPilot section - consistent */
.pn-sp__trustpilot {
    margin: 48px 0 0 0 !important;
    padding-top: 40px !important;
    border-top: 1px solid #e8e8eb !important;
}
.pn-sp__trustpilot-label {
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #707081 !important;
    margin-bottom: 16px !important;
}

/* Sample pack page banner — tighter height */
.pageBanner--samplePack .imageProseRow__imgCol {
    height: auto !important;
    max-height: 480px !important;
}
.pageBanner--samplePack .imageProseRow__imgCol .imgWrap img {
    height: auto !important;
    max-height: 420px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 767px) {
    .pageBanner--samplePack .imageProseRow__imgCol {
        max-height: 300px !important;
    }
}

/* Sample pack detail hero - simple centered approach */
.pn-sp-hero {
    text-align: center !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 40px 24px 0 !important;
}
.pn-sp-hero img {
    max-width: 500px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    margin-bottom: 28px !important;
}
.pn-sp-hero h1 {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin-bottom: 14px !important;
}
.pn-sp-hero p {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: #525263 !important;
    max-width: 680px !important;
    margin: 0 auto 24px !important;
}
@media (max-width: 575px) {
    .pn-sp-hero h1 { font-size: 26px !important; }
    .pn-sp-hero img { max-width: 320px !important; }
}

/* Add breathing room between image prose rows in sample pack pages */
.pn-sp-content .imageProseRow {
    margin-bottom: 24px !important;
}

/* Fix CTA section layout */
.pn-sp__cta {
    flex-wrap: wrap !important;
}
.pn-sp__note {
    text-align: center !important;
    font-size: 14px !important;
    color: #707081 !important;
    margin-top: 16px !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pn-sp__browse-wrap {
    text-align: center !important;
    margin-top: 28px !important;
}

/* Sample pack hero - image background with purple tint */
.pn-sp-hero-banner {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 80px 24px !important;
    text-align: center !important;
    overflow: hidden !important;
}
.pn-sp-hero-banner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(to right, rgba(164,163,188,0.88), rgba(81,80,112,0.92)) !important;
    z-index: 1 !important;
}
.pn-sp-hero-banner > * {
    position: relative !important;
    z-index: 2 !important;
}
.pn-sp-hero-banner h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 16px 0 !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pn-sp-hero-banner p {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.9) !important;
    max-width: 620px !important;
    margin: 0 auto 28px !important;
}
.pn-sp-hero-banner .btn {
    background: #d71f32 !important;
    border-color: #d71f32 !important;
    color: #fff !important;
}
.pn-sp-hero-banner .btn:hover {
    background: #b8192a !important;
    border-color: #b8192a !important;
}
@media (max-width: 575px) {
    .pn-sp-hero-banner {
        padding: 50px 20px !important;
    }
    .pn-sp-hero-banner h1 {
        font-size: 26px !important;
    }
}

/* Fix CTA pricing section - center everything */
.pn-sp__cta {
    justify-content: center !important;
    text-align: center !important;
}
.pn-sp__cta-price {
    text-align: center !important;
}

/* Stacked CTA - price on top, button below, both bigger */
.pn-sp__cta--stacked {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 32px 24px !important;
}
.pn-sp__cta--stacked .pn-sp__cta-price {
    font-size: 36px !important;
}
.pn-sp__cta--stacked .pn-sp__cta-price small {
    font-size: 15px !important;
    margin-top: 4px !important;
}
.pn-sp__cta--stacked .wp_cart_button_wrapper::after {
    padding: 14px 48px !important;
    font-size: 17px !important;
}

/* Center the "want one for free" blurb */
.pn-sp__free--centered {
    text-align: center !important;
}
.pn-sp__free--centered h3 {
    text-align: center !important;
}
.pn-sp__free--centered p {
    text-align: center !important;
}

/* Fix: force center on free blurb with higher specificity */
.paddedSection .pn-sp__free.pn-sp__free--centered,
.paddedSection .pn-sp__free.pn-sp__free--centered h3,
.paddedSection .pn-sp__free.pn-sp__free--centered p {
    text-align: center !important;
}

/* Tighten padding: TrustPilot section */
.pn-sp-content + .paddedSection {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Tighten padding: CTA/price section */
.paddedSection .pn-sp__cta--stacked {
    padding: 24px 24px !important;
    background: transparent !important;
}

/* Tighten the lightgray CTA section itself */
.pn-sp__cta--stacked + .pn-sp__note {
    margin-top: 8px !important;
}

/* OVERRIDE: center free blurb, tighten padding - max specificity */
section.paddedSection .container .pn-sp__free--centered {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
section.paddedSection .container .pn-sp__free--centered h3 {
    text-align: center !important;
}
section.paddedSection .container .pn-sp__free--centered p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* OVERRIDE: tighten TrustPilot section padding */
section.paddedSection.pn-sp-content + section.paddedSection {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* OVERRIDE: tighten lightgray CTA section */
section.paddedSection.bg--lightgray {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}
section.paddedSection.bg--lightgray .pn-sp__cta--stacked {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* ========================================
   Sample pack detail pages - consistent section spacing
   Tighten ALL paddedSection gaps on these pages
   ======================================== */

/* Hero followed by first content section - no double padding */
.pn-sp-hero-banner + section.paddedSection {
    padding-top: 60px !important;
}

/* Content section (What's inside) */
section.paddedSection.pn-sp-content {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* TrustPilot section - right after content */
section.paddedSection.pn-sp-content + section.paddedSection {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* Lightgray CTA/price section */
section.paddedSection.bg--lightgray {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Free blurb section - after lightgray */
section.paddedSection.bg--lightgray + section.paddedSection {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* Other Sample Packs grid section - last before footer */
section.paddedSection.bg--lightgray + section.paddedSection + section.paddedSection {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
}


/* ========================================
   Sample pack final tweaks
   ======================================== */

/* Bigger section header titles (What's inside, What our customers say, Other Sample Packs) */
section.paddedSection .sectionLeaderText h2,
section.paddedSection .centeredSectionheader,
section.paddedSection .smallSectionHeader {
    font-size: 32px !important;
}

/* Bigger price in CTA */
.pn-sp__cta--stacked .pn-sp__cta-price {
    font-size: 42px !important;
}
.pn-sp__cta--stacked .pn-sp__cta-price small {
    font-size: 16px !important;
}

/* Bigger add to cart button in CTA */
.pn-sp__cta--stacked .wp_cart_button_wrapper::after {
    padding: 16px 56px !important;
    font-size: 18px !important;
}

/* Sample cards - price small text sits below price on its own line */
.pn-sample-card__price {
    line-height: 1.3 !important;
}
.pn-sample-card__price small {
    display: block !important;
    margin-top: 4px !important;
}


/* ========================================
   Deluxe Sample Pack - Hero Inline Form v3
   Two-column landing page layout
   ======================================== */

/* Hero becomes a two-column layout */
.pn-sp-hero-banner.pn-sp-hero-banner--landing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 56px !important;
    text-align: left !important;
    padding: 72px 56px !important;
    min-height: 0 !important;
    max-width: none !important;
}

/* Hero text — left column */
.pn-sp-hero-banner--landing .pn-sp-hero-text {
    flex: 1 1 42% !important;
    max-width: 460px !important;
    min-width: 300px !important;
}
.pn-sp-hero-banner--landing .pn-sp-hero-text h1 {
    text-align: left !important;
    font-size: 38px !important;
    line-height: 1.15 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}
.pn-sp-hero-banner--landing .pn-sp-hero-text p {
    text-align: left !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Form container — right column, always visible */
.pn-sp-hero-banner--landing .pn-sp-hero-form {
    display: block !important;
    flex: 1 1 50% !important;
    max-width: 480px !important;
    min-width: 340px !important;
    margin: 0 !important;
    text-align: left !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    animation: pnSlideIn 0.4s ease forwards !important;
}
@keyframes pnSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Step containers */
.pn-sp-hero-form .pn-form-step {
    display: none !important;
}
.pn-sp-hero-form .pn-form-step.is-active {
    display: block !important;
    animation: pnSlideIn 0.3s ease forwards !important;
}

/* Step indicator */
.pn-form-steps-indicator {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.pn-form-steps-indicator span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.3) !important;
    transition: background 0.3s ease !important;
}
.pn-form-steps-indicator span.is-active {
    background: #fff !important;
}
.pn-form-steps-indicator span.is-complete {
    background: rgba(255,255,255,0.6) !important;
}

/* Step title */
.pn-form-step-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}

/* Form wrapper reset */
.pn-sp-hero-form .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.pn-sp-hero-form .gform_heading {
    display: none !important;
}

/* Form fields — single column in the hero to avoid cramming */
.pn-sp-hero-form .gform_fields,
.pn-sp-hero-form ul.gform_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pn-sp-hero-form .gfield {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Email confirm field — stack vertically */
.pn-sp-hero-form .ginput_complex.ginput_container_email {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.pn-sp-hero-form .ginput_complex.ginput_container_email .ginput_left,
.pn-sp-hero-form .ginput_complex.ginput_container_email .ginput_right,
.pn-sp-hero-form .ginput_complex .gform-grid-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Input styling */
.pn-sp-hero-form input[type="text"],
.pn-sp-hero-form input[type="email"],
.pn-sp-hero-form input[type="tel"],
.pn-sp-hero-form select,
.pn-sp-hero-form textarea {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}
.pn-sp-hero-form input::placeholder,
.pn-sp-hero-form textarea::placeholder {
    color: rgba(255,255,255,0.45) !important;
}
.pn-sp-hero-form input:focus,
.pn-sp-hero-form select:focus,
.pn-sp-hero-form textarea:focus {
    border-color: #fff !important;
    outline: none !important;
    background: rgba(255,255,255,0.16) !important;
}
.pn-sp-hero-form select {
    appearance: auto !important;
}
.pn-sp-hero-form select option {
    color: #343448 !important;
    background: #fff !important;
}
.pn-sp-hero-form textarea {
    min-height: 70px !important;
    resize: vertical !important;
}

/* Labels */
.pn-sp-hero-form .gfield_label,
.pn-sp-hero-form label {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    display: block !important;
}
/* Hide sub-labels (e.g. "Enter Email", "Confirm Email") */
.pn-sp-hero-form .ginput_complex label,
.pn-sp-hero-form .ginput_container_address label {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    margin-top: 3px !important;
}
.pn-sp-hero-form .gfield_required {
    color: #ff6b6b !important;
}

/* Radio and checkbox styling */
.pn-sp-hero-form .gfield_radio label,
.pn-sp-hero-form .gfield_checkbox label {
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
.pn-sp-hero-form .gchoice {
    margin-bottom: 6px !important;
}

/* Address sub-fields — stack in hero */
.pn-sp-hero-form .ginput_container_address {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.pn-sp-hero-form .ginput_container_address > span {
    display: block !important;
}
.pn-sp-hero-form .ginput_container_address > span:first-child,
.pn-sp-hero-form .ginput_container_address > span:nth-child(2) {
    grid-column: 1 / -1 !important;
}

/* Navigation buttons */
.pn-form-nav {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    gap: 12px !important;
}
.pn-form-nav button {
    padding: 11px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    font-family: "Work Sans", sans-serif !important;
}
.pn-form-nav .pn-form-back {
    background: transparent !important;
    color: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}
.pn-form-nav .pn-form-back:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
.pn-form-nav .pn-form-next {
    background: #d71f32 !important;
    color: #fff !important;
    flex: 1 !important;
}
.pn-form-nav .pn-form-next:hover {
    background: #b8192a !important;
}

/* Hide default Gravity submit until last step */
.pn-sp-hero-form .gform_footer,
.pn-sp-hero-form .gform_page_footer {
    display: none !important;
}
.pn-form-step.is-active .pn-form-submit-wrap .gform_footer {
    display: block !important;
}
.pn-sp-hero-form .gform_footer input[type="submit"],
.pn-sp-hero-form .gform_footer button.gform_button {
    width: 100% !important;
    /* size from padding, not the generic v1.319 .btn metrics */
    min-width: 0 !important;
    height: auto !important;
    line-height: normal !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: #d71f32 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    font-family: "Work Sans", sans-serif !important;
}
.pn-sp-hero-form .gform_footer input[type="submit"]:hover,
.pn-sp-hero-form .gform_footer button.gform_button:hover {
    background: #b8192a !important;
}

/* Responsive — stack on mobile */
@media (max-width: 900px) {
    .pn-sp-hero-banner.pn-sp-hero-banner--landing {
        flex-direction: column !important;
        padding: 48px 24px !important;
        gap: 32px !important;
    }
    .pn-sp-hero-banner--landing .pn-sp-hero-text {
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }
    .pn-sp-hero-banner--landing .pn-sp-hero-text h1,
    .pn-sp-hero-banner--landing .pn-sp-hero-text p {
        text-align: center !important;
    }
    .pn-sp-hero-banner--landing .pn-sp-hero-form {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .pn-form-steps-indicator {
        justify-content: center !important;
    }
    .pn-form-step-title {
        text-align: center !important;
    }
}

/* Responsive video embed for sample pack pages */
.pn-sp-video {
    max-width: 720px !important;
    margin: 0 auto !important;
}
.pn-sp-video__wrap {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}
.pn-sp-video__wrap iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Yoast Breadcrumbs (Mar 2026) */
.pn-breadcrumbs {
    font-size: 13px !important;
    color: #525263 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}
.pn-breadcrumbs a {
    color: #d00d22 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.pn-breadcrumbs a:hover {
    color: #343448 !important;
    text-decoration: underline !important;
}
.pn-breadcrumbs .breadcrumb_last {
    color: #525263 !important;
    font-weight: 400 !important;
}

/* Breadcrumbs bar above banner */
.pn-breadcrumbs-bar {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #e5e5e7 !important;
    padding: 10px 0 !important;
}





/* Sidebar nav — tieredNav style */
.pn-sidebar-nav {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #343448 !important;
}
.pn-sidebar-nav__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #343448 !important;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    border-bottom: none !important;
}
.pn-sidebar-nav__title a {
    color: #343448 !important;
    text-decoration: none !important;
}
.pn-sidebar-nav__title a:hover {
    color: #d00d22 !important;
}

/* Section toggles — tieredNav style */
.pn-sidebar-nav__section {
    margin: 7px 0 0 !important;
}
.pn-sidebar-nav__toggle {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #343448 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}
.pn-sidebar-nav__toggle:hover {
    color: #d00d22 !important;
}
.pn-sidebar-nav__arrow {
    display: inline-block !important;
    width: 12px !important;
    transition: transform 0.2s !important;
    font-weight: 400 !important;
}
.pn-sidebar-nav__section--open > .pn-sidebar-nav__toggle .pn-sidebar-nav__arrow {
    transform: rotate(90deg) !important;
}

/* Nav lists — tieredNav style */
.pn-sidebar-nav__list {
    list-style: none !important;
    margin: 0 0 0 20px !important;
    padding: 0 !important;
}
.pn-sidebar-nav__section--nested {
    margin: 7px 0 0 !important;
}
.pn-sidebar-nav__section--nested > .pn-sidebar-nav__toggle {
    font-size: 13px !important;
    padding: 4px 10px !important;
    font-weight: 400 !important;
}
.pn-sidebar-nav__section--nested .pn-sidebar-nav__list {
    margin-left: 20px !important;
}
.pn-sidebar-nav__link {
    display: block !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    color: #525263 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    transition: color 0.15s, background-color 0.15s !important;
}
.pn-sidebar-nav__link:hover {
    color: #d00d22 !important;
}
.pn-sidebar-nav__link--active {
    color: #240298 !important;
    font-weight: 600 !important;
    background-color: #f7f7f8 !important;
    border-right: 4px solid #8471c5 !important;
}


/* end of custom.css */



/* RC inline breadcrumbs */
.pn-breadcrumbs--inline {
    margin: 20px 0 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.67 !important;
}
.pn-breadcrumbs--inline a {
    font-weight: 400 !important;
}

/* RC post meta (under title) */
.pn-rc-meta {
    font-size: 13px !important;
    color: #707081 !important;
    margin: 4px 0 24px !important;
    letter-spacing: 0.3px !important;
}

/* Glossary / bottom items separator */
.pn-sidebar-nav__list--bottom {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(151, 151, 151, 0.31) !important;
    margin-left: 0 !important;
}

/* Mobile sidebar: collapsible */
@media (max-width: 767px) {
    .pn-sidebar-nav {
        border: 1px solid #e8e8eb !important;
        background: #f7f7f8 !important;
        border-radius: 6px !important;
        padding: 0 !important;
    }
    .pn-sidebar-nav__title {
        padding: 12px 15px !important;
        margin: 0 !important;
        cursor: pointer !important;
        position: relative !important;
    }
    .pn-sidebar-nav__title::after {
        content: "\25BC" !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 10px !important;
        color: #707081 !important;
        transition: transform 0.2s !important;
    }
    .pn-sidebar-nav.pn-sidebar-nav--mobile-open .pn-sidebar-nav__title::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    .pn-sidebar-nav__body {
        display: none !important;
    }
    .pn-sidebar-nav--mobile-open .pn-sidebar-nav__body {
        display: block !important;
        padding: 0 15px 12px !important;
        border-top: 1px solid #e8e8eb !important;
    }
    .asideMainLayout__aside {
        order: 1 !important;
    }
    .asideMainLayout__main {
        order: 0 !important;
    }
    .asideMainLayout__aside__inner {
        border-right: 0 !important;
    }
}


/* RC cross-section navigation */
.pn-sidebar-nav__sections { margin-bottom: 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid #e8e8eb !important; }
.pn-sidebar-nav__sections-title { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #8e8ea0 !important; margin: 0 0 8px !important; padding: 0 10px !important; font-weight: 600 !important; }
.pn-sidebar-nav__sections-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pn-sidebar-nav__sections-link { display: block !important; padding: 5px 10px !important; font-size: 13px !important; color: #525263 !important; text-decoration: none !important; border-radius: 4px !important; line-height: 1.4 !important; }
.pn-sidebar-nav__sections-link:hover { color: #343448 !important; background: #f7f7f8 !important; text-decoration: none !important; }
.pn-sidebar-nav__sections-link--active { color: #343448 !important; font-weight: 600 !important; background: #f0eef8 !important; }



/* Linked toggle: looks identical to plain toggle but is a link */
.pn-sidebar-nav__toggle--linked { text-decoration: none !important; color: inherit !important; }
.pn-sidebar-nav__toggle--linked:hover { text-decoration: none !important; }

/* RC hub page — horizontal image rows */
.pn-rc-hub-row { display: flex !important; align-items: stretch !important; border: 1px solid #e8e8eb !important; border-radius: 10px !important; overflow: hidden !important; text-decoration: none !important; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important; margin-bottom: 20px !important; background: #fff !important; }
.pn-rc-hub-row:hover { border-color: #8471c5 !important; box-shadow: 0 4px 16px rgba(132,113,197,0.10) !important; text-decoration: none !important; transform: translateY(-2px) !important; }
.pn-rc-hub-row__img { flex: 0 0 220px !important; overflow: hidden !important; background: #f0eef8 !important; }
.pn-rc-hub-row__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.3s !important; }
.pn-rc-hub-row:hover .pn-rc-hub-row__img img { transform: scale(1.04) !important; }
.pn-rc-hub-row__body { flex: 1 !important; padding: 24px 28px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.pn-rc-hub-row__title { font-size: 20px !important; color: #343448 !important; margin: 0 0 6px !important; font-weight: 600 !important; }
.pn-rc-hub-row__desc { font-size: 14px !important; color: #525263 !important; margin: 0 0 10px !important; line-height: 1.55 !important; }
.pn-rc-hub-row__cta { font-size: 13px !important; color: #8471c5 !important; font-weight: 600 !important; }
@media (max-width: 600px) {
    .pn-rc-hub-row { flex-direction: column !important; }
    .pn-rc-hub-row__img { flex: none !important; height: 160px !important; }
    .pn-rc-hub-row__body { padding: 20px !important; }
}

/* Learn More link grid — product pages */
.pn-learn-more { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }
.pn-learn-more > h2 { font-size: 28px !important; font-weight: 700 !important; color: #343448 !important; margin-bottom: 24px !important; margin-top: 0 !important; }
.pn-learn-more__grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 32px !important; }
.pn-learn-more__col h3 { font-size: 16px !important; font-weight: 700 !important; color: #343448 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-bottom: 12px !important; margin-top: 0 !important; padding-bottom: 8px !important; border-bottom: 2px solid #d00d22 !important; }
.pn-learn-more__col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pn-learn-more__col ul li { padding: 6px 0 !important; border-bottom: 1px solid #f0f0f2 !important; margin: 0 !important; }
.pn-learn-more__col ul li:last-child { border-bottom: none !important; }
.pn-learn-more__col ul li a { color: #525263 !important; text-decoration: none !important; font-size: 15px !important; transition: color 0.15s !important; }
.pn-learn-more__col ul li a:hover { color: #d00d22 !important; }
.pn-learn-more__col ul li a[target="_blank"]::after { content: " \2197" !important; font-size: 12px !important; color: #aaa !important; }
@media (max-width: 768px) {
    .pn-learn-more__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (min-width: 769px) and (max-width: 991px) {
    .pn-learn-more__grid { grid-template-columns: 1fr 1fr !important; }
}
/* 3-item blurb grid: display as 3 equal columns instead of 2+1 */
@media (min-width: 768px) {
    .smallBlurbsGroup__grid > .smallBlurb:first-child:nth-last-child(3),
    .smallBlurbsGroup__grid > .smallBlurb:first-child:nth-last-child(3) ~ .smallBlurb {
        min-width: 33.333% !important;
        max-width: 33.333% !important;
        flex-basis: 33.333% !important;
    }
}

/* Alert/warning shortcode inside image prose rows — tighten text size */
.imageProseRow .alert p,
.proseWrap .alert p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
.imageProseRow .alert,
.proseWrap .alert {
    padding: 12px 16px !important;
    margin-top: 16px !important;
    border-radius: 4px;
}

/* ── Blog Page Redesign (April 2026) ── */

/* Hero */
.pn-blog-hero {
    background: #343448 !important;
    padding: 56px 40px 72px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.pn-blog-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 50% 120%, rgba(208,13,34,0.12) 0%, transparent 60%) !important;
    pointer-events: none !important;
}
.pn-blog-hero__label {
    display: inline-block !important;
    background: rgba(208,13,34,0.15) !important;
    color: #f87171 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}
.pn-blog-hero__title {
    color: #fff !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    line-height: 1.15 !important;
    margin: 0 0 14px !important;
    position: relative !important;
}
.pn-blog-hero__subtitle {
    color: rgba(255,255,255,0.6) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* Featured Post */
.pn-blog-featured {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    text-decoration: none !important;
    color: inherit !important;
    margin-top: -40px !important;
    margin-bottom: 48px !important;
    position: relative !important;
    z-index: 2 !important;
    transition: box-shadow 0.2s !important;
}
.pn-blog-featured:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
    text-decoration: none !important;
    color: inherit !important;
}
.pn-blog-featured__img {
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
}
.pn-blog-featured__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}
.pn-blog-featured:hover .pn-blog-featured__img img {
    transform: scale(1.03) !important;
}
.pn-blog-featured__body {
    padding: 40px 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.pn-blog-featured__tag {
    display: inline-block !important;
    background: #fef2f2 !important;
    color: #d00d22 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 16px !important;
    width: fit-content !important;
}
.pn-blog-featured__title {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 14px !important;
    color: #343448 !important;
}
.pn-blog-featured__excerpt {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #525263 !important;
    margin: 0 0 24px !important;
}
.pn-blog-featured__meta {
    font-size: 13px !important;
    color: #9b9bab !important;
    font-weight: 500 !important;
}

/* Section Header */
.pn-blog-section-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
    padding-top: 8px !important;
}
.pn-blog-section-header h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    color: #343448 !important;
    margin: 0 !important;
}

/* Post Grid */
.pn-blog-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin-bottom: 48px !important;
}

/* Post Card */
.pn-blog-card {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
}
.pn-blog-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    color: inherit !important;
}
.pn-blog-card__img {
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
}
.pn-blog-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}
.pn-blog-card:hover .pn-blog-card__img img {
    transform: scale(1.04) !important;
}
.pn-blog-card__body {
    padding: 22px 24px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.pn-blog-card__tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #d00d22 !important;
    margin-bottom: 10px !important;
}
.pn-blog-card__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    color: #343448 !important;
    margin: 0 0 10px !important;
}
.pn-blog-card__excerpt {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #6b6b7b !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.pn-blog-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f0f0f4 !important;
}
.pn-blog-card__date {
    font-size: 12px !important;
    color: #9b9bab !important;
    font-weight: 500 !important;
}
.pn-blog-card__read {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d00d22 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: gap 0.15s !important;
}
.pn-blog-card:hover .pn-blog-card__read {
    gap: 7px !important;
}
.pn-blog-card__read svg {
    width: 14px !important;
    height: 14px !important;
}

/* Responsive */
@media (max-width: 900px) {
    .pn-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .pn-blog-featured { grid-template-columns: 1fr !important; }
    .pn-blog-featured__body { padding: 28px !important; }
}
@media (max-width: 600px) {
    .pn-blog-grid { grid-template-columns: 1fr !important; }
    .pn-blog-hero__title { font-size: 28px !important; }
    .pn-blog-hero { padding: 40px 20px 52px !important; }
}

/* ------------------------------------------------------------------ */
/*  Expanded Footer (added 2026-04-24)                                */
/* ------------------------------------------------------------------ */
.siteFooter--expanded { padding: 56px 0 0 !important; }
.siteFooter--expanded .container { max-width: 1280px !important; }

.pn-footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1.1fr 0.9fr 0.9fr 0.9fr !important;
    gap: 44px !important;
    padding-bottom: 40px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Brand column */
.pn-footer-brand .pn-footer-logo {
    width: 200px !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
}
.pn-footer-tagline {
    font-size: 13.5px !important;
    color: #a0a0b0 !important;
    line-height: 1.6 !important;
    margin: 0 0 18px !important;
}
.pn-footer-social {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    display: flex !important;
    gap: 10px !important;
}
.pn-footer-social li { margin: 0 !important; }
.pn-footer-social a {
    width: 34px !important;
    height: 34px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.08) !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}
.pn-footer-social a:hover { background: #d00d22 !important; }
.pn-footer-social svg { fill: #fff !important; }

.pn-footer-trustpilot { margin-top: 8px !important; }
.pn-footer-trustpilot .trustpilot-widget { min-height: 24px !important; }

/* Contact column */
.pn-footer-contact .pn-footer-block {
    font-size: 13px !important;
    color: #a0a0b0 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}
.pn-footer-contact .pn-footer-block strong {
    color: #e6e6ec !important;
    font-weight: 500 !important;
}
.pn-footer-contact-btn {
    display: inline-block !important;
    padding: 8px 14px !important;
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.pn-footer-contact-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* Nav columns */
.pn-footer-heading {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.pn-footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
.pn-footer-list li { margin: 0 !important; }
.pn-footer-list a {
    color: #a0a0b0 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    transition: color 0.15s ease !important;
}
.pn-footer-list a:hover { color: #fff !important; }

/* Override the existing siteFooter__copyRow to sit below our grid cleanly */
.siteFooter--expanded .siteFooter__copyRow {
    padding: 20px 0 28px !important;
    margin: 0 !important;
    border-top: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .pn-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}
@media (max-width: 600px) {
    .pn-footer-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------ */
/*  Related Products / Cross-Sell Block (added 2026-04-27)             */
/* ------------------------------------------------------------------ */
.pn-related {
    background: #f4f4f6 !important;
    padding: 64px 24px 72px !important;
}
.pn-related__wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.pn-related__header {
    text-align: center !important;
    margin-bottom: 40px !important;
}
.pn-related__header h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
}
.pn-related__header p {
    font-size: 15px !important;
    color: #525263 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}
.pn-related__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}
.pn-related__card {
    background: #fff !important;
    border: 1px solid #e0e0e4 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.pn-related__card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    border-color: #d00d22 !important;
    text-decoration: none !important;
}
.pn-related__img {
    aspect-ratio: 4 / 3 !important;
    background: #eee !important;
    overflow: hidden !important;
}
.pn-related__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.pn-related__body {
    padding: 16px 18px 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.pn-related__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 6px !important;
}
.pn-related__desc {
    font-size: 13.5px !important;
    color: #525263 !important;
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.45 !important;
}
@media (max-width: 900px) {
    .pn-related__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
    .pn-related__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   How to Bleed series — Part 2 ("Think About Book Design")
   Editorial layout for post 78098 and future parts in the series.
   Scoped under .pn-htb2; safe to remove if the series is deprecated.
   v1.310 — added 2026-05-21
   ============================================================ */
.pn-htb2 { color: #222; line-height: 1.65; font-size: 17px; }
.pn-htb2 p { margin: 0 0 18px 0; }
.pn-htb2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ----- kicker + byline ----- */
.pn-htb2 .pn-htb2-kicker { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: #d00d22; margin: 0 0 4px 0; font-weight: 600; }
.pn-htb2 .pn-htb2-byline { font-style: italic; color: #555; display: block; margin: 0 0 28px 0; }

/* ----- hero ----- */
.pn-htb2 .pn-htb2-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin: 0 0 32px 0; background: #faf6ee; padding: 28px; border-radius: 4px; }
.pn-htb2 .pn-htb2-hero img { width: 100%; height: auto; display: block; }
.pn-htb2 .pn-htb2-hero-text { font-size: 21px; line-height: 1.4; color: #343448; font-family: Georgia, "Times New Roman", serif; }
.pn-htb2 .pn-htb2-hero-text strong { color: #d00d22; }
@media (max-width: 640px) { .pn-htb2 .pn-htb2-hero { grid-template-columns: 1fr; } }

/* ----- TOC callout ----- */
.pn-htb2 .pn-htb2-toc { background: #f8f8f8; border-left: 4px solid #d00d22; padding: 20px 24px; margin: 24px 0; }
.pn-htb2 .pn-htb2-toc strong { display: block; margin-bottom: 8px; }
.pn-htb2 .pn-htb2-toc ul { margin: 0; padding-left: 18px; }
.pn-htb2 .pn-htb2-toc li { margin: 4px 0; }

/* ----- section opener (static red kicker above each H2) ----- */
.pn-htb2 .pn-htb2-section { position: relative; margin-top: 56px; padding-top: 8px; }
.pn-htb2 .pn-htb2-section-tag { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: #d00d22; margin: 0 0 6px 0; }
.pn-htb2 h2 { font-family: Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.2; margin: 4px 0 20px 0; color: #1a1a2e; letter-spacing: -0.5px; }
.pn-htb2 h3 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.3; margin: 32px 0 12px 0; color: #1a1a2e; }

/* ----- drop cap on lead paragraph of each section ----- */
.pn-htb2 .pn-htb2-lead::first-letter { float: left; font-family: Georgia, serif; font-size: 64px; line-height: 0.85; font-weight: 700; color: #d00d22; padding: 6px 10px 0 0; margin-top: 2px; }

/* ----- component grid panel ----- */
.pn-htb2 .pn-htb2-deliverables { background: #faf6ee; border-radius: 4px; padding: 24px 24px 20px 24px; margin: 24px 0 28px 0; }
.pn-htb2 .pn-htb2-deliverables-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: #d00d22; margin: 0 0 4px 0; }
.pn-htb2 .pn-htb2-deliverables-title { font-family: Georgia, serif; font-weight: 700; font-size: 18px; color: #1a1a2e; margin: 0 0 16px 0; }
.pn-htb2 .pn-htb2-deliverables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 14px; align-items: end; }
@media (min-width: 720px) {
  .pn-htb2 .pn-htb2-deliverables[data-count="4"] .pn-htb2-deliverables-grid { grid-template-columns: repeat(4, 1fr); }
  .pn-htb2 .pn-htb2-deliverables[data-count="5"] .pn-htb2-deliverables-grid { grid-template-columns: repeat(5, 1fr); }
  .pn-htb2 .pn-htb2-deliverables[data-count="6"] .pn-htb2-deliverables-grid { grid-template-columns: repeat(6, 1fr); }
  .pn-htb2 .pn-htb2-deliverables[data-count="7"] .pn-htb2-deliverables-grid { grid-template-columns: repeat(7, 1fr); }
}
.pn-htb2 .pn-htb2-deliverables-grid figure { margin: 0; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pn-htb2 .pn-htb2-deliverables-grid img { width: 100%; max-width: 130px; height: auto; display: block; }
.pn-htb2 .pn-htb2-deliverables-grid figcaption { font-size: 12px; font-weight: 600; color: #555; margin-top: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ----- captioned photos ----- */
.pn-htb2 figure.pn-htb2-photo { margin: 28px auto; max-width: 520px; text-align: center; }
.pn-htb2 figure.pn-htb2-photo img { max-width: 100%; height: auto; display: block; margin: 0 auto; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-radius: 2px; }
.pn-htb2 figure.pn-htb2-photo figcaption { font-style: italic; font-size: 14px; color: #666; margin-top: 12px; line-height: 1.5; }

/* ----- pull quote ----- */
.pn-htb2 .pn-htb2-pullquote { font-family: Georgia, serif; font-size: 26px; line-height: 1.3; color: #1a1a2e; border-top: 2px solid #d00d22; border-bottom: 2px solid #d00d22; padding: 24px 0; margin: 36px 0; text-align: center; font-style: italic; }

/* ----- inline mid-post CTA ----- */
.pn-htb2 .pn-htb2-inline-cta { background: #1a1a2e; color: #fff; padding: 20px 24px; margin: 32px 0; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.pn-htb2 .pn-htb2-inline-cta p { margin: 0; color: #fff; }
.pn-htb2 .pn-htb2-inline-cta a { background: #d00d22; color: #fff; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-weight: 700; white-space: nowrap; }

/* ----- ornamental divider ----- */
.pn-htb2 .pn-htb2-rule { text-align: center; color: #d00d22; letter-spacing: 12px; margin: 40px 0; font-size: 14px; }

/* ----- TL;DR recap card ----- */
.pn-htb2 .pn-htb2-tldr { background: #1a1a2e; color: #fff; padding: 32px; margin: 40px 0; border-radius: 4px; }
.pn-htb2 .pn-htb2-tldr-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: #ffb3bd; margin: 0 0 6px 0; }
.pn-htb2 .pn-htb2-tldr h3 { color: #fff; margin: 0 0 20px 0; font-size: 24px; }
.pn-htb2 .pn-htb2-tldr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }
.pn-htb2 .pn-htb2-tldr-col { background: rgba(255,255,255,0.06); padding: 20px; border-radius: 4px; display: flex; flex-direction: column; }
.pn-htb2 .pn-htb2-tldr-col h4 { color: #fff; font-family: Georgia, serif; font-size: 18px; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.pn-htb2 .pn-htb2-tldr-col dl { margin: 0; }
.pn-htb2 .pn-htb2-tldr-col dt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #ffb3bd; font-weight: 700; margin-top: 10px; }
.pn-htb2 .pn-htb2-tldr-col dt:first-child { margin-top: 0; }
.pn-htb2 .pn-htb2-tldr-col dd { margin: 4px 0 0 0; font-size: 14px; line-height: 1.5; color: #f0f0f0; }

/* ----- bottom CTA ----- */
.pn-htb2 .pn-htb2-cta { background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 4px; padding: 28px; margin: 36px 0; text-align: center; }
.pn-htb2 .pn-htb2-cta-title { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; color: #1a1a2e; }
.pn-htb2 .pn-htb2-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.pn-htb2 .pn-htb2-cta-buttons a { padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 700; color: #fff; }
.pn-htb2 .pn-htb2-cta-primary { background: #d00d22; }
.pn-htb2 .pn-htb2-cta-secondary { background: #343448; }

/* ----- author bio ----- */
.pn-htb2 .pn-htb2-bio { display: flex; gap: 20px; align-items: flex-start; margin: 32px 0 24px 0; }
.pn-htb2 .pn-htb2-bio-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.pn-htb2 .pn-htb2-bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- series navigation ----- */
.pn-htb2 .pn-htb2-series { background: #faf6ee; padding: 28px; border-radius: 4px; margin-top: 24px; }
.pn-htb2 .pn-htb2-series-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #d00d22; font-weight: 700; margin: 0 0 4px 0; }
.pn-htb2 .pn-htb2-series-title { font-weight: 700; font-size: 18px; margin: 0 0 16px 0; color: #1a1a2e; font-family: Georgia, serif; }
.pn-htb2 .pn-htb2-series ol { list-style: none; margin: 0; padding: 0; }
.pn-htb2 .pn-htb2-series li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.pn-htb2 .pn-htb2-series-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.pn-htb2 .pn-htb2-series-num-on { background: #d00d22; color: #fff; }
.pn-htb2 .pn-htb2-series-num-off { background: #e5e5e5; color: #555; }
.pn-htb2 .pn-htb2-series-here { color: #888; font-size: 14px; font-style: italic; }

/* ============================================================
   Scroll-driven progressive enhancement
   Fades + slides images and panels into view as the user scrolls.
   Browsers without animation-timeline support just see static layout.
   ============================================================ */
@supports (animation-timeline: view()) {
  @keyframes htb2-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pn-htb2 figure.pn-htb2-photo,
  .pn-htb2 .pn-htb2-deliverables,
  .pn-htb2 .pn-htb2-pullquote,
  .pn-htb2 .pn-htb2-inline-cta,
  .pn-htb2 .pn-htb2-tldr,
  .pn-htb2 .pn-htb2-hero img { animation: htb2-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pn-htb2 * { animation: none !important; }
}

/* ----- v1.311 patch: CTA button display + slightly more breathing room ----- */
.pn-htb2 .pn-htb2-cta-buttons a { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; white-space: nowrap !important; }
.pn-htb2 p { margin: 0 0 22px 0 !important; }
.pn-htb2 ol, .pn-htb2 ul { margin: 0 0 22px 0 !important; }

/* === How to Bleed series — Part 3 polish 2026-06-05 === */
/* 01 — frame each deliverables sketch as a polaroid-style card so the JPEG white background reads as intentional */
.pn-htb2 .pn-htb2-deliverables-grid figure img {
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  box-sizing: border-box;
}
/* General — restore numbered/bulleted list indentation that the theme reset flattened */
.pn-htb2 ol, .pn-htb2 ul { padding-left: 28px; margin: 12px 0 18px 0; }

/* 01b — enforce uniform polaroid card size so the row reads as a clean grid regardless of source sketch aspect ratio */
.pn-htb2 .pn-htb2-deliverables-grid figure img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  max-width: 130px;
}

/* 04b — inline CTA: cancel the global p-margin !important so flex align-items:center actually centers the visible text on the buttonline */
.pn-htb2 .pn-htb2-inline-cta p { margin: 0 !important; }

/* 06b — nullify any wpautop-injected <p> margins INSIDE TL;DR columns; force grid stretch */
.pn-htb2 .pn-htb2-tldr-col p { margin: 0 !important; display: inline; }
.pn-htb2 .pn-htb2-tldr-col { align-self: stretch !important; }

/* 04c — equalize line-height between inline-CTA <p> text and <a> button so flex centerline matches visual centerline */
.pn-htb2 .pn-htb2-inline-cta p { line-height: 1.4 !important; }
.pn-htb2 .pn-htb2-inline-cta a { line-height: 1.4 !important; }

/* === ROOT CAUSE FIX 2026-06-05 ===
   Theme app.css adds  for vertical prose rhythm,
   but it leaks into flex/grid layout containers and breaks alignment (pushes CTA buttons
   down 24px, makes TL;DR Cards card 24px taller than its siblings). Cancel inside known
   layout containers; prose paragraphs keep their rhythm via the existing v1.311 !important. */
.pn-htb2 .pn-htb2-tldr-grid > * + *,
.pn-htb2 .pn-htb2-inline-cta > * + *,
.pn-htb2 .pn-htb2-cta > * + *,
.pn-htb2 .pn-htb2-cta-buttons > * + *,
.pn-htb2 .pn-htb2-deliverables-grid > * + *,
.pn-htb2 .pn-htb2-deliverables > * + *,
.pn-htb2 .pn-htb2-hero > * + *,
.pn-htb2 .pn-htb2-tldr-col > * + * { margin-top: 0 !important; }

/* ---------------------------------------------------------------------------
   v1.319 (2026-09-23) — Gravity Forms 3.1.1 submit button
   GF 2.9+ renders the submit as <button>, not <input type="submit">. app.css
   resets every bare <button> to no background/border/padding, and GF's own
   legacy CSS only styles input.button / input[type=submit] — so after the
   2026-09-15 update to GF 3.1.1 every submit on the site rendered as plain
   black text. This re-applies .btn + .btn--primary from app.css in an
   element-agnostic form, so it survives the next markup change too.
   !important is required: custom.css loads AFTER app.css but BEFORE all four
   gravityforms stylesheets.
   NOTE ON SPECIFICITY — deliberately kept at (0,2,1), i.e. no .gform_wrapper
   ancestor, so the two existing per-form overrides still win on their own:
     .pn-sp-hero-form .gform_footer button.gform_button  (0,3,1) — sample packs
     body #gform_submit_button_17                        (1,0,1) — artwork form
   --------------------------------------------------------------------------- */
.gform_footer button.gform_button,
.gform_page_footer button.gform_button,
.gform_page_footer button.gform_next_button,
.gform_page_footer button.gform_previous_button {
	display: inline-block !important;
	width: auto !important;
	min-width: 134px !important;
	height: 38px !important;
	padding: 0 13px !important;
	line-height: 36px !important;
	border: 1px solid #d71f32 !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	color: #fff !important;
	background-color: #e2071d !important;
	background-image: linear-gradient(-180deg, #e2071d 0%, #cf0c1f 100%) !important;
}
.gform_footer button.gform_button:active,
.gform_page_footer button.gform_button:active {
	background: #8c000e !important;
}
.gform_footer button.gform_button[disabled],
.gform_page_footer button.gform_button[disabled] {
	opacity: 0.4 !important;
	background: #d32022 !important;
}

/* Calculators drive their GF submit programmatically and have their own visible
   controls ("Send and Save", "Continue and Minimize Menu"), so these must keep
   the plain app.css button reset — branding them would put a stray red Submit
   next to the real button. 25 is also visibility:hidden from the plugin CSS.
   ID selectors (1,0,0) beat the generic rule above on specificity alone. */
#gform_submit_button_25,
#gform_submit_button_26,
#gform_submit_button_30 {
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	line-height: inherit !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-weight: inherit !important;
	color: inherit !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* ------------------------------------------------------------------ */
/*  Product links on knowledge pages (added 2026-09-29)                */
/*  [ninja_product_cta] and [ninja_product_grid], inc/product-links.php */
/*  Scoped under .pn-plink-*; renders inside .proseWrap, so every rule  */
/*  is !important and the owl margin (.proseWrap * + *) is cancelled.   */
/* ------------------------------------------------------------------ */
.pn-plink-cta *, .pn-plink-grid * { margin: 0 !important; box-sizing: border-box !important; }
.pn-plink-cta a, .pn-plink-grid a,
.pn-plink-cta a:hover, .pn-plink-grid a:hover { text-decoration: none !important; }
.pn-plink-cta img, .pn-plink-grid img { display: block !important; max-width: none !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; box-shadow: none !important; }
.pn-plink-cta picture, .pn-plink-grid picture { display: contents !important; }

/* Inline CTA: a compact, quiet box inside the body copy. Name on its own line, one line
   of description, and the same red button as the grid. The grid at the end is the loud one. */
.pn-plink-cta { margin: 28px 0 !important; container-type: inline-size !important; }
.pn-plink-cta__link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 18px 12px 12px !important;
    background: #f4f4f6 !important;
    border: 1px solid #e8e8eb !important;
    border-radius: 6px !important;
    color: inherit !important;
    transition: border-color 0.2s ease !important;
}
.pn-plink-cta__link:hover { border-color: #d00d22 !important; }
.pn-plink-cta__img { flex: 0 0 60px !important; width: 60px !important; height: 60px !important; border-radius: 4px !important; overflow: hidden !important; background: #e8e8eb !important; }
.pn-plink-cta__body { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.pn-plink-cta__title { display: block !important; font-size: 16.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #343448 !important; }
.pn-plink-cta__text { display: block !important; font-size: 14.5px !important; line-height: 1.45 !important; color: #525263 !important; }
.pn-plink-cta__btn {
    flex: 0 0 auto !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    background: #d00d22 !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease !important;
}
.pn-plink-cta__btn::after { content: " \2192" !important; }
.pn-plink-cta__link:hover .pn-plink-cta__btn { background: #b00b1d !important; }

/* Narrow column (half-width text beside an image, or a phone): stack the button under
   the text. Keyed to the box's own width, not the screen, because many knowledge pages put
   body copy in a half-width column. */
@container (max-width: 560px) {
    .pn-plink-cta__link { flex-wrap: wrap !important; row-gap: 10px !important; padding: 12px !important; }
    .pn-plink-cta__img { flex-basis: 52px !important; width: 52px !important; height: 52px !important; align-self: flex-start !important; }
    .pn-plink-cta__body { flex-basis: calc(100% - 66px) !important; }
    .pn-plink-cta__btn { margin-left: 66px !important; }
}

/* Grid */
.pn-plink-grid { margin: 48px 0 32px !important; padding-top: 32px !important; border-top: 1px solid #e0e0e4 !important; }
.pn-plink-grid__heading { font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #343448 !important; margin-bottom: 16px !important; }
.pn-plink-grid__cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
.pn-plink-grid--1 .pn-plink-grid__cards { grid-template-columns: minmax(0, 1fr) !important; }
.pn-plink-grid__card {
    display: flex !important;
    align-items: stretch !important;
    background: #fff !important;
    border: 1px solid #e0e0e4 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    color: inherit !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.pn-plink-grid__card:hover { transform: translateY(-2px) !important; border-color: #d00d22 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }
.pn-plink-grid__img { flex: 0 0 116px !important; width: 116px !important; min-height: 100px !important; background: #e8e8eb !important; overflow: hidden !important; }
.pn-plink-grid__body { flex: 1 1 auto !important; min-width: 0 !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.pn-plink-grid__title { display: block !important; font-size: 16.5px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #343448 !important; }
.pn-plink-grid__desc { display: block !important; flex: 1 !important; font-size: 13.5px !important; line-height: 1.45 !important; color: #525263 !important; }
.pn-plink-grid__more {
    display: inline-block !important;
    align-self: flex-start !important;
    margin-top: 10px !important;
    padding: 7px 14px !important;
    background: #d00d22 !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    transition: background-color 0.2s ease !important;
}
.pn-plink-grid__card:hover .pn-plink-grid__more { background: #b00b1d !important; }
.pn-plink-grid__more::after { content: " \2192" !important; }

/* Grid panel: the whole block is one colored panel so it stands out at the end of the
   article, while the cards inside stay white and readable. color="light" (grid default),
   color="red" or color="navy". The inline CTA defaults to light; color="navy" fills it instead. */
.pn-plink-grid.pn-plink--red, .pn-plink-grid.pn-plink--navy, .pn-plink-grid.pn-plink--light {
    padding: 28px 28px 30px !important;
    border-top: 0 !important;
    border-radius: 8px !important;
}
.pn-plink-grid.pn-plink--navy { background: #343448 !important; }
.pn-plink-grid.pn-plink--red { background: #d00d22 !important; }
.pn-plink-grid.pn-plink--light { background: #f4f4f6 !important; }
.pn-plink-grid.pn-plink--navy .pn-plink-grid__heading, .pn-plink-grid.pn-plink--red .pn-plink-grid__heading { color: #fff !important; }
.pn-plink-grid.pn-plink--red .pn-plink-grid__card { border-color: #fff !important; }
.pn-plink-grid.pn-plink--red .pn-plink-grid__card:hover { border-color: #343448 !important; box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important; }
.pn-plink-grid.pn-plink--navy .pn-plink-grid__card { border-color: #fff !important; }
.pn-plink-grid.pn-plink--navy .pn-plink-grid__card:hover { border-color: #d00d22 !important; box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important; }

.pn-plink-cta.pn-plink--navy .pn-plink-cta__link { background: #343448 !important; border-color: #343448 !important; }
.pn-plink-cta.pn-plink--navy .pn-plink-cta__link:hover { border-color: #d00d22 !important; }
.pn-plink-cta.pn-plink--navy .pn-plink-cta__title { color: #fff !important; }
.pn-plink-cta.pn-plink--navy .pn-plink-cta__text { color: rgba(255,255,255,0.8) !important; }

/* Editor-only warning for a bad slug */
.pn-plink-warning { margin: 16px 0 !important; padding: 10px 14px !important; background: #fff4e5 !important; border: 1px dashed #c77700 !important; color: #7a4a00 !important; font-size: 13px !important; }

@media (max-width: 600px) {
    .pn-plink-cta__link { flex-wrap: wrap !important; row-gap: 10px !important; padding: 12px !important; }
    .pn-plink-cta__img { flex-basis: 52px !important; width: 52px !important; height: 52px !important; align-self: flex-start !important; }
    .pn-plink-cta__body { flex-basis: calc(100% - 66px) !important; }
    .pn-plink-cta__btn { margin-left: 66px !important; }
    .pn-plink-grid__cards { grid-template-columns: minmax(0, 1fr) !important; }
    .pn-plink-grid__img { flex-basis: 96px !important; width: 96px !important; }
    .pn-plink-grid.pn-plink--red, .pn-plink-grid.pn-plink--navy, .pn-plink-grid.pn-plink--light { padding: 20px 14px 22px !important; }
}