.hp-icon {
    font-size: 20px;
}

.wp-block-newspack-blocks-carousel {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.wp-block-newspack-blocks-carousel article .entry-wrapper {
    background: linear-gradient(
        15deg,
        rgba(300, 165, 50, 0.5),
        rgba(400, 200, 5, 0)
    );
}

.header-hero {
    display: none;
}

body.single-post .header-hero {
    display: block;
}

.site-content {
    padding: 2rem 0;
}




.hp-listing__attribute--directions a.hp-button.hp-button--primary.hp-field--url {
    background-color: #FF7926 !important;
    color: #FFFFFF !important;
    width: fit-content !important;
    text-align: center;
    display: inline-block;
    margin-top: 0 !important;
    border-radius: 9999px;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    box-sizing: border-box;
}

.hp-listing__attribute--directions a.hp-button.hp-button--primary.hp-field--url:hover {
    box-shadow: 0 5px 21px rgba(255, 121, 38, 0.35);
}

.apbLoadMore,
.loadMoreButton {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 20px;
}

button.loadMoreBtn {
    background-color: #ff7926 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    width: auto !important;
    height: auto !important;
}

button.loadMoreBtn:hover {
    box-shadow: 0 5px 21px rgba(255, 121, 38, 0.35) !important;
}

.hp-listing--view-page .hp-listing__topbar .hp-listing__attributes--primary {
    flex-grow: 1;
    text-align: center;
}

@media (max-width: 768px) {
    .hp-listing__attribute iframe[src*="youtube"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
    }
}


/* Fix HivePress filter covering the footer */
.hp-template--listings-view-page .inner-wrapper-sticky {
    position: static !important;
    transform: none !important;
}

/* Blog posts: match the other pages' layout */
body.single-post nav.hat-clay2{display:none!important}
body.single-post .site-content main.col-sm-8{width:100%;margin-left:0;float:none}
body.single-post .post__text{padding-top:30px}
/* Blog posts: higher-specificity overrides (theme .col-sm-8 has max-width:66.66%; nav rule above is outranked) */
html body.single-post nav.hat-clay2{display:none!important}
body.single-post .site-content main.col-sm-8{max-width:none;flex:0 0 100%;width:100%;margin-left:0;float:none}
/* Blog posts: icon row (theme .site-header nav rules are specificity 0,3,3) */
html body.single-post .site-header nav.hat-clay2.hat-clay2{display:none!important}

/* Comments & Leave a Reply headings: smaller */
html body.single-post #comments h2.content-title, html body.single-post #reply-title{font-size:1.25rem!important;font-weight:500!important;line-height:1.3!important}

/* Blog posts: consistent mobile banner */
@media (max-width:600px){
	body.single-post .header-hero{min-height:240px;padding-top:3rem;padding-bottom:1.5rem;display:flex;align-items:flex-end;background-position:center 40%}
	body.single-post .header-hero__content{width:100%}
}

/* Article-style header test: Living in Phuket only (body.postid-35374) */
body.postid-35374 .header-hero{display:block!important;min-height:0!important;height:auto!important;width:100%!important;margin:0!important;padding:50% 0 0!important;background-color:#fff!important;background-size:100% auto!important;background-position:top center!important;background-repeat:no-repeat!important;border-radius:15px!important;color:#171717!important;box-shadow:none!important;align-items:stretch!important}
body.postid-35374 .header-hero::before,body.postid-35374 .header-hero::after{content:none!important;display:none!important}
body.postid-35374 .header-hero__content{position:static!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;text-align:left!important;color:#171717!important}
body.postid-35374 .header-hero .post__categories{position:static!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:30px 0 0!important;padding:0!important;background:none!important;justify-content:flex-start!important}
body.postid-35374 .header-hero .post__categories a{display:inline-block!important;background:#ffd736!important;color:#171717!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:.08em!important;padding:5px 12px!important;border-radius:999px!important;margin:0!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.postid-35374 .header-hero .post__title{color:#171717!important;font-size:46px!important;line-height:1.15!important;font-weight:700!important;margin:16px 0 10px!important;text-shadow:none!important}
body.postid-35374 .header-hero .post__title a{color:#171717!important}
body.postid-35374 .header-hero .post__details,body.postid-35374 .header-hero .post__details a,body.postid-35374 .header-hero .post__details time{color:#666!important;font-size:14px!important;text-shadow:none!important}
@media (max-width:600px){
	body.postid-35374 .header-hero{padding-top:50%!important;padding-bottom:0!important;padding-left:0!important;padding-right:0!important}
	body.postid-35374 .header-hero .post__categories{margin-top:20px!important}
	body.postid-35374 .header-hero .post__title{font-size:30px!important}
	body.postid-35374 .header-hero .post__details a[href$="#respond"]{display:none!important}
}


/* Article header test (body.postid-35374 only): desktop width, text column, 2:1 image area */
body.postid-35374 .header-hero{max-width:1100px!important;margin:0 auto!important;padding-top:calc(min(100%,1100px)/2)!important}
body.postid-35374 .header-hero__content{max-width:560px!important;margin:0 auto!important}
@media (max-width:600px){body.postid-35374 .header-hero{max-width:none!important;padding-top:50%!important}body.postid-35374 .header-hero__content{max-width:none!important}}

/* Article header test (body.postid-35374): layout fixes */
body.postid-35374 .header-hero .container{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
body.postid-35374 .header-hero .row{margin:0!important}
body.postid-35374 .header-hero .col-sm-8{width:100%!important;max-width:560px!important;flex:0 0 100%!important;margin:0 auto!important;padding:0!important}
body.postid-35374 .header-hero{padding-top:calc(min(100%,1100px)/2)!important}
@media (max-width:600px){body.postid-35374 .header-hero{width:auto!important;max-width:none!important;margin:0 16px!important;padding-top:calc((100% - 32px)/2)!important}body.postid-35374 .header-hero .col-sm-8{max-width:none!important}}

body.postid-35374 .header-hero{width:1100px!important;max-width:none!important;margin-left:calc(50% - 550px)!important;margin-right:auto!important}
/* Article header test (body.postid-35374): final phone override 390px */
@media (max-width:600px){body.postid-35374 .header-hero{width:auto!important;margin:0 16px!important;padding-top:calc((100% - 32px)/2)!important;padding-bottom:0!important}}
/* Article header test (body.postid-35374): desktop text column = article body width (850px inside 1100px image); remove extra top space */
@media (min-width:601px){body.postid-35374 .header-hero .post__header{display:block!important;height:auto!important;min-height:0!important}body.postid-35374 .header-hero__content{max-width:850px!important}body.postid-35374 .header-hero .col-sm-8{max-width:850px!important;width:850px!important}}
/* Article header test (body.postid-35374): remove the extra top space above the pills (flex/height from theme wrappers) */
body.postid-35374 .header-hero__content,body.postid-35374 .header-hero .container,body.postid-35374 .header-hero .row,body.postid-35374 .header-hero .col-sm-8,body.postid-35374 .header-hero .post__header{height:auto!important;min-height:0!important;display:block!important;justify-content:flex-start!important;align-items:stretch!important;flex:none!important;padding-top:0!important}

body.postid-35374 .ht-intro,body.postid-35374 .ht-intro>*{max-width:none!important}
body.postid-35374 .ht-intro,body.postid-35374 .ht-intro>*{width:100%!important;margin-left:0!important;margin-right:0!important}
body.postid-35374 .header-hero{margin-top:40px!important}
body.postid-35374 .header-hero__content{max-width:none!important;width:100%!important;margin:0!important}
body.postid-35374 .header-hero .col-sm-8{max-width:none!important;width:100%!important;flex:0 0 100%!important;margin:0!important}
body.postid-35374 .header-hero .post__categories,body.postid-35374 .header-hero .post__title,body.postid-35374 .header-hero .post__details{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
@media (max-width:600px){body.postid-35374 .header-hero{margin-top:20px!important}}
@media (max-width:600px){body.postid-35374 .header-hero{margin-left:32px!important;margin-right:32px!important}}

/* Article header test (body.postid-35374): image as ::before with all 4 corners rounded, no overlay, text layout unchanged */
body.postid-35374 .header-hero{background-image:none!important;position:relative!important}
body.postid-35374 .header-hero::before{content:""!important;display:block!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:auto!important;aspect-ratio:2/1!important;margin:0!important;padding:0!important;transform:none!important;opacity:1!important;background:url(https://home-and-travel.com/wp-content/uploads/2026/10/phuket-town-hero-1600x800-2.jpg) center/cover no-repeat!important;border-radius:15px!important;z-index:0!important}
body.postid-35374 .header-hero__content{position:relative!important;z-index:1!important}

/* Article-style header: all blog posts (body.single-post). Each post's own feature image stays as the .header-hero background-image and is painted by ::before via background-image:inherit; the parent background is sized 0 so only the rounded ::before shows (4 rounded corners). Text sits below the image. body.postid-35374 rules above are unchanged. */
body.single-post .header-hero{display:block;position:relative;width:min(1100px,100% - 64px);max-width:none;min-height:0;height:auto;margin:40px auto 0;padding:calc(min(1100px,100% - 64px)/2) 0 0;background-color:#fff;background-size:0 0;background-repeat:no-repeat;border-radius:15px;color:#171717;box-shadow:none;align-items:stretch}
body.single-post .header-hero::before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:auto;width:auto;height:auto;aspect-ratio:2/1;margin:0;padding:0;transform:none;opacity:1;background-color:transparent;background-image:inherit;background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:15px;z-index:0}
body.single-post .header-hero__content{position:relative;z-index:1;inset:auto;transform:none;width:100%;max-width:none;padding:0;margin:0;text-align:left;color:#171717}
body.single-post .header-hero .container,body.single-post .header-hero .row{width:100%;max-width:none;padding:0;margin:0}
body.single-post .header-hero .col-sm-8{width:100%;max-width:none;flex:0 0 100%;margin:0;padding:0}
body.single-post .header-hero .post__header{display:block;height:auto;min-height:0;padding:0;flex:none}
body.single-post .header-hero .post__categories{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;background:none;justify-content:flex-start}
body.single-post .header-hero .post__categories a{display:inline-block;background:#ffd736;color:#171717;font-size:12px;font-weight:600;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:999px;margin:0;text-shadow:none}
body.single-post .header-hero .post__title{color:#171717;font-size:46px;line-height:1.15;font-weight:700;margin:16px 0 10px;width:100%;max-width:none;text-shadow:none}
body.single-post .header-hero .post__title a{color:#171717}
body.single-post .header-hero .post__details,body.single-post .header-hero .post__details a,body.single-post .header-hero .post__details time{color:#666;font-size:14px;text-shadow:none}
@media (max-width:600px){
body.single-post .header-hero{margin-top:20px;padding-bottom:0;padding-left:0;padding-right:0}
body.single-post .header-hero .post__categories{margin-top:20px}
body.single-post .header-hero .post__title{font-size:30px}
body.single-post .header-hero .post__details a[href$="#respond"]{display:none}
}
/* Article-style header: keep the 1rem bottom padding the theme gives the post header (matches the approved Phuket spacing) */
body.single-post .header-hero .post__header{padding-bottom:1rem}

/* Blog post body column: align the ht-* article wrappers with the article header-hero (1100px centred on desktop, 32px margin on phone). Scoped to single posts except Phuket (postid-35374), which is left untouched. */
body.single-post:not(.postid-35374) .post__text > [class^="ht-"],
body.single-post:not(.postid-35374) .post__text > [class*=" ht-"] {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
/* Body text: left-aligned on the same edge as the header, capped at ~850px for readability */
body.single-post:not(.postid-35374) .post__text > [class^="ht-"] :is(p, h2, h3, h4, ul, ol),
body.single-post:not(.postid-35374) .post__text > [class*=" ht-"] :is(p, h2, h3, h4, ul, ol) {
  max-width: 850px;
  margin-left: 0;
  margin-right: auto;
}
/* Keep centred call-out text centred */
body.single-post:not(.postid-35374) .post__text > [class^="ht-"] .ht-cta :is(p, h2, h3, h4),
body.single-post:not(.postid-35374) .post__text > [class*=" ht-"] .ht-cta :is(p, h2, h3, h4) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* Account pages: hide the category icon row (logged-in account area) */
html body.logged-in.woocommerce-account nav.hat-clay2,
html body.logged-in[class*="hp-template--user-"] nav.hat-clay2,
html body.logged-in.hp-template--user-account-page nav.hat-clay2,
html body.logged-in .site-header nav.hat-clay2.hat-clay2.hat-acct-hide{display:none!important}
html body.woocommerce-account .site-header nav.hat-clay2.hat-clay2{display:none!important}
html body[class*="hp-template--user-"] .site-header nav.hat-clay2.hat-clay2{display:none!important}
html body[class*="hp-template--listings-edit"] .site-header nav.hat-clay2.hat-clay2{display:none!important}
html body[class*="hp-template--messages"] .site-header nav.hat-clay2.hat-clay2{display:none!important}
/* Vendor account pages (hp-template--vendor-*): hide the category icon row nav.hat-clay2 */
html body[class*="hp-template--vendor"] .site-header nav.hat-clay2.hat-clay2{display:none!important}

/* Messages page (body.hp-template--messages-thread-page): remove the yellow accent bar above the title; add top space above the messages block (40px desktop, 24px phone). The doubled .hp-page selector outranks the theme's html body:not(.home) .hp-page{padding-top:0!important} */
body[class*="hp-template--messages"] .hp-page__title::before{display:none!important}
html body[class*="hp-template--messages"] .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body[class*="hp-template--messages"] .hp-page.hp-page{padding-top:24px!important}}

/* My Account pages (body.woocommerce-account): top space above the whole account block; ~30px gap between menu and content on desktop; side padding on phone */
body.woocommerce-account .woocommerce{padding-top:40px}
@media (min-width:768px){body.woocommerce-account .woocommerce-MyAccount-content{width:calc(100% - 30% - 30px)}}
@media (max-width:767px){body.woocommerce-account .woocommerce{padding-top:24px;padding-left:16px;padding-right:16px;box-sizing:border-box}}

/* Listings page (body.hp-template--listings-edit-page, hat-acct-listings): remove the yellow accent bar above the title and match the Messages page top spacing (40px desktop, 24px phone). */
body[class*="hp-template--listings-edit"] .hp-page__title::before{display:none!important}
html body.hat-acct-listings:not(#x) .hp-page{padding-top:40px!important}
@media (max-width:767px){html body.hat-acct-listings:not(#x) .hp-page{padding-top:24px!important}}
/* Settings & Calendar pages (hp-template--user-edit-settings-page, hp-template--vendor-calendar-page): remove the yellow accent bar above the title and match the Messages/Listings top spacing (40px desktop, 24px at max-width:767px). */
body[class*="hp-template--user-edit-settings-page"] .hp-page__title::before{display:none!important}
html body[class*="hp-template--user-edit-settings-page"]:not(#x) .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body[class*="hp-template--user-edit-settings-page"]:not(#x) .hp-page.hp-page{padding-top:24px!important}}
body[class*="hp-template--vendor-calendar-page"] .hp-page__title::before{display:none!important}
html body[class*="hp-template--vendor-calendar-page"]:not(#x) .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body[class*="hp-template--vendor-calendar-page"]:not(#x) .hp-page.hp-page{padding-top:24px!important}}
/* Listing edit pages (hp-template--listing-edit-page): hide yellow title accent bar; fix top spacing under header */
html body[class*="hp-template--listing-edit-page"] .hp-page__title::before{display:none!important}
html body[class*="hp-template--listing-edit-page"]:not(#x) .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body[class*="hp-template--listing-edit-page"]:not(#x) .hp-page.hp-page{padding-top:24px!important}}

/* Submit-listing pages: hide yellow accent bar above title; fix top spacing under header */
html body.hp-template--listing-submit-page:not(#hp-submit-listing-x) .hp-page__title::before {
    display: none !important;
}
html body.hp-template--listing-submit-page:not(#hp-submit-listing-x) .hp-page.hp-page {
    padding-top: 40px !important;
}
@media (max-width: 767px) {
    html body.hp-template--listing-submit-page:not(#hp-submit-listing-x) .hp-page.hp-page {
        padding-top: 24px !important;
    }
}


/* Header button: show "Add listing" instead of "Become a host" when logged in */
body.logged-in .site-header .hp-menu__item--listing-submit span{font-size:0!important}
body.logged-in .site-header .hp-menu__item--listing-submit span::after{content:"Add listing";font-size:1rem}
/* Header button label: no text leak on tablet/phone widths */
@media (max-width:768px){body.logged-in .site-header .hp-menu__item--listing-submit span::after{content:none!important}}
/* Submit-listing pages: hide the category icon row */
html body.hp-template--listing-submit-page .site-header nav.hat-clay2.hat-clay2{display:none!important}

/* Pills: comfortable spacing on Happenin' (calendar), Guides and Stories */
body.page-id-36005 #hat-hs{margin-bottom:0!important}
body.page-id-36005 .hat-events__filters{margin:24px 0 32px!important;gap:12px!important}
body.page-id-36005 .hat-events__row{gap:12px!important}
@media(max-width:700px){body.page-id-36005 .hat-events__filters{margin:24px 0 28px!important}}
:is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-search{margin:0 0 20px!important}
:is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-pills{gap:12px 10px!important;padding:4px 0 0!important;margin:0 0 32px!important}
@media (max-width:767px){:is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-pills{margin:0 0 28px!important}}

/* Override (same declarations as above, higher specificity): existing later rules on Guides/Stories were winning */
html :is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-search{margin:0 0 20px!important}
html :is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-pills{gap:12px 10px!important;padding:4px 0 0!important;margin:0 0 32px!important}
@media (max-width:767px){html :is(body.category.hat-guides-view,body.page-id-36357.hat-articles-page) .hat-guide-pills{margin:0 0 28px!important}}

/* Guides only, phones: pills-to-cards gap measured 22px (pills box ends at chip bottom), so nudge pill bottom margin to land on 28px */
@media (max-width:767px){html body.category.hat-guides-view .hat-guide-pills{margin:0 0 34px!important}}
/* Calendar Cards view (body.page-id-36005), phones (max-width:700px): cards hug their content so "See event" sits about 12px under the tags instead of being pushed to the bottom of the tallest card in the row. Row gap 16px on phones. */
@media (max-width:700px){
	html body.page-id-36005 .hat-events__grid{row-gap:16px!important;align-items:start!important}
	html body.page-id-36005 .hat-events__grid>.hat-event{align-self:start!important;min-height:0!important;height:auto!important}
	html body.page-id-36005 .hat-events__grid .hat-event__go{margin-top:12px!important;padding-top:0!important}
}
@media (max-width:767px){
html body.page-id-36357:not(#x) .site-header .header-navbar,html body.category.hat-guides-view:not(#x) .site-header .header-navbar,html body.page-id-22401:not(#x) .site-header .header-navbar,html body.page-id-319:not(#x) .site-header .header-navbar,html body.hp-template--listings-view-page:not(#x) .site-header .header-navbar{box-sizing:border-box!important;height:80px!important;min-height:80px!important;padding-top:4px!important;padding-bottom:0!important;align-items:center!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
html body.page-id-36357:not(#x) .site-header .header-logo .custom-logo,html body.category.hat-guides-view:not(#x) .site-header .header-logo .custom-logo,html body.page-id-22401:not(#x) .site-header .header-logo .custom-logo,html body.page-id-319:not(#x) .site-header .header-logo .custom-logo,html body.hp-template--listings-view-page:not(#x) .site-header .header-logo .custom-logo{width:150px!important;max-width:42vw!important;height:auto!important}
html body.page-id-36357:not(#x) nav.hat-clay2,html body.category.hat-guides-view:not(#x) nav.hat-clay2,html body.page-id-22401:not(#x) nav.hat-clay2,html body.page-id-319:not(#x) nav.hat-clay2,html body.hp-template--listings-view-page:not(#x) nav.hat-clay2{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:flex-start!important;gap:16px!important;width:auto!important;max-width:none!important;margin:4px 24px 0!important;padding:10px 16px 8px!important;box-sizing:border-box!important;background:transparent!important;overflow-x:auto!important;overflow-y:visible!important}
html body.page-id-319:not(#x) nav.hat-clay2,html body.hp-template--listings-view-page:not(#x) nav.hat-clay2{margin:4px 8px 0!important;max-width:calc(100% - 16px)!important}
html body.page-id-36357:not(#x) nav.hat-clay2 a,html body.category.hat-guides-view:not(#x) nav.hat-clay2 a,html body.page-id-22401:not(#x) nav.hat-clay2 a,html body.page-id-319:not(#x) nav.hat-clay2 a,html body.hp-template--listings-view-page:not(#x) nav.hat-clay2 a{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:4px 2px 0!important;margin:0!important;text-align:center!important;text-decoration:none!important;overflow:visible!important}
html body.page-id-36357:not(#x) nav.hat-clay2 img,html body.category.hat-guides-view:not(#x) nav.hat-clay2 img,html body.page-id-22401:not(#x) nav.hat-clay2 img,html body.page-id-319:not(#x) nav.hat-clay2 img,html body.hp-template--listings-view-page:not(#x) nav.hat-clay2 img{display:block!important;width:auto!important;height:28px!important;max-width:none!important;min-width:0!important;object-fit:contain!important;margin:0 auto 4px!important}
html body.page-id-36357:not(#x) nav.hat-clay2 span,html body.category.hat-guides-view:not(#x) nav.hat-clay2 span,html body.page-id-22401:not(#x) nav.hat-clay2 span,html body.page-id-319:not(#x) nav.hat-clay2 span,html body.hp-template--listings-view-page:not(#x) nav.hat-clay2 span{display:block!important;font-family:Poppins,sans-serif!important;font-size:13px!important;line-height:1.2!important;font-weight:600!important;white-space:nowrap!important;color:#0F1727!important}
}

/* Header parity with home (phones <=767px): non-home pages get the home header bar size: 80px tall, 8px/4px padding, centred items, logo 150px wide (max 42vw), hamburger 30x24, + button 33x28. Category icon row nav.hat-clay2 is not touched. */
@media (max-width:767px){
html body:not(.home):not(#x) .site-header .header-navbar{box-sizing:border-box!important;height:80px!important;min-height:80px!important;padding-top:8px!important;padding-bottom:4px!important;align-items:center!important}
html body:not(.home):not(#x) .site-header .header-navbar .header-logo .custom-logo{width:150px!important;max-width:42vw!important;height:auto!important}
html body:not(.home):not(#x) .site-header .header-navbar__burger{width:30px!important;height:24px!important}
html body:not(.home):not(#x) .site-header .hp-menu__item--listing-submit{width:33px!important;height:28px!important}
}

/* Hide the category icon row nav.hat-clay2 on standard WordPress pages (body.page), except home, calendar (36005), stories (36357), guides (category), properties/listings (319, 22401, listings-view) */
html body.page:not(.home):not(.page-id-36005):not(.page-id-36357):not(.page-id-319):not(.page-id-22401):not(.hat-guides-view):not(.hat-articles-page):not(.hp-template--listings-view-page):not(#x) .site-header nav.hat-clay2.hat-clay2{display:none!important}

/* Standard pages (body.page, same set as the icon-row hide rule): add space between the header and the first photo/content block, 40px desktop, 24px at max-width:767px (matches the account/settings pages' title spacing). */
html body.page:not(.home):not(.page-id-36005):not(.page-id-36357):not(.page-id-319):not(.page-id-22401):not(.hat-guides-view):not(.hat-articles-page):not(.hp-template--listings-view-page):not(.woocommerce-account):not(#x) .site-content{padding-top:40px!important}
@media (max-width:767px){html body.page:not(.home):not(.page-id-36005):not(.page-id-36357):not(.page-id-319):not(.page-id-22401):not(.hat-guides-view):not(.hat-articles-page):not(.hp-template--listings-view-page):not(.woocommerce-account):not(#x) .site-content{padding-top:24px!important}}

/* ===== HAT header icon row: stop entrance flash/jerk (appended 2026-10-11) ===== */
/* Fix 3: no entrance pop on the nav icons; hover/focus hop (hat-clay-hop) still works */
html body nav.hat-clay2 a:not(:hover):not(:focus-visible),
html body nav.hat-clay2 a:not(:hover):not(:focus-visible) img,
html body nav.hat-clay2 a:not(:hover):not(:focus-visible) span{animation:none!important;opacity:1!important}
/* Fix 2: reserve each icon's width from its PNG's natural ratio, so the icon does not change width when it loads */
html body nav.hat-clay2 a img[src*="for-rent.png"]{aspect-ratio:132/160}
html body nav.hat-clay2 a img[src*="for-sale.png"]{aspect-ratio:107/160}
html body nav.hat-clay2 a img[src*="hotels.png"]{aspect-ratio:123/160}
html body nav.hat-clay2 a img[src*="restaurants.png"]{aspect-ratio:126/160}
html body nav.hat-clay2 a img[src*="spas.png"]{aspect-ratio:146/160}
html body nav.hat-clay2 a img[src*="attractions.png"]{aspect-ratio:124/160}
html body nav.hat-clay2 a img[src*="happenin.png"]{aspect-ratio:129/160}
html body nav.hat-clay2 a img[src*="guides.png"]{aspect-ratio:160/133}
/* Fix 2: reserve the nav row height (measured final height, desktop only; hidden navs stay display:none) */
@media (min-width:701px){html body.home nav.hat-clay2{min-height:64px}html body:not(.home) nav.hat-clay2{min-height:68px}}

/* Fix 2 (mobile, <=700px): reserve the measured final nav row height (70px at 300% zoom) */
@media (max-width:700px){html body nav.hat-clay2{min-height:70px}}
/* Listing import pages (upload, process, complete) */
html body.hp-template--listing-import-page .site-header nav.hat-clay2.hat-clay2{display:none!important}
html body.hp-template--listing-import-page .hp-page__title::before{display:none!important}
html body.hp-template--listing-import-page:not(#x) .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body.hp-template--listing-import-page:not(#x) .hp-page.hp-page{padding-top:24px!important}}

/* 404 pages reached from logged-in member/submit URLs (/submit-listing/review/ and /submit-listing/payment/ do not exist): hide the category icon row nav.hat-clay2, same as the account and submit pages */
html body.logged-in.error404 .site-header nav.hat-clay2.hat-clay2{display:none!important}

/* ===== 2026-10-12: yellow accent bar above page titles - removed site-wide =====
 *    Theme rule (HivePress frontend .hp-page__title::before, #f1bd6c, 50x5px) drew a short yellow bar above page titles. */
html body .hp-page__title::before{display:none!important}

/* ===== 2026-10-12: Favorites page (body.hp-template--listings-favorite-page): hide icon row, 40px desktop / 24px phone top spacing. Harmless if the class never renders. ===== */
html body[class*="hp-template--listings-favorite-page"] .site-header nav.hat-clay2.hat-clay2{display:none!important}
html body[class*="hp-template--listings-favorite-page"]:not(#x) .hp-page.hp-page{padding-top:40px!important}
@media (max-width:767px){html body[class*="hp-template--listings-favorite-page"]:not(#x) .hp-page.hp-page{padding-top:24px!important}}

/* ===== 2026-10-12: login / register / lost-password (guest auth pages): top space between header and content = account pages (40px desktop, 24px at max-width:767px). Scoped to page IDs 22390, 14190, 22389 only. ===== */
html body.page-id-22390 .site-content,html body.page-id-14190 .site-content,html body.page-id-22389 .site-content{padding-top:40px!important}
@media (max-width:767px){html body.page-id-22390 .site-content,html body.page-id-14190 .site-content,html body.page-id-22389 .site-content{padding-top:24px!important}}

/* ===== 2026-10-12: yellow 50x5px accent bar (#f1bd6c, theme ::before) hidden on the login modal and centred content headings =====
 *    Theme rules that draw the bar: .hp-page__title::before (hidden above), .hp-section__title::before, .content-title::before (+ .content-title.has-text-align-center::before, same pseudo-element).
 *    The login modal title (h3.hp-modal__title) has no bar rule in the theme CSS; the rule below is a guard. Pills, buttons and other decorations are not touched. */
html body .hp-modal__title::before{display:none!important}
html body .content-title::before{display:none!important}
html body .hp-section__title::before{display:none!important}

/* ===== 2026-10-12: HOME header no layout change on scroll (phone + desktop). body.hat-scrolled keeps the icon row, desktop search bar, navbar min-height and hero padding at their normal values. .hat-scroll-search pill unchanged. ===== */
html body.home.hat-scrolled nav.hat-clay2,html body.home.hat-scrolled .site-header > nav.hat-clay2,html body.home.hat-scrolled .header-navbar__middle nav.hat-clay2{display:flex!important}
@media (min-width:701px){html body.home.hat-scrolled .hat-air-search{display:flex!important}html body.home.hat-scrolled .header-navbar{min-height:80px!important}}
html body.home.hat-scrolled .hat-hero{padding-top:8px!important}