/* US main site: styles for pages carried over from WordPress (posts, info pages, the theme's store sidebar widgets) and
   the lists this build generates (blog lists, All Stores, Categories). Everything else comes from site.css (UK site)
   and the wp-*.css files (the live pages' own style blocks). */

/* Blog posts and info pages */
.wp-post-wrap { max-width: 880px; margin: 0 auto; padding-bottom: 40px; }
.wp-post .post-entry { background: #fff; border: 1px solid #ece6f2; border-radius: 14px; padding: 28px 32px; }
.wp-post .post-meta .tags-links a { display: inline-block; margin: 0 6px 8px 0; padding: 2px 10px; border-radius: 999px; background: #f3ecfa; color: #4b0082; font-size: 13px; text-decoration: none; }
.wp-post .post-title, .wp-post h1 { font-family: Marcellus, Georgia, serif; font-size: 34px; line-height: 1.2; margin: 4px 0 10px; color: #1d1530; text-wrap: balance; }
.wp-post .meta-line-2 { color: #6b6378; font-size: 14px; margin: 0 0 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.wp-post .meta-line-2 a { color: #4b0082; }
.wp-post .post-content, .wp-post .post-entry { font-size: 17px; line-height: 1.7; color: #221a2e; }
.wp-post .post-content h2 { font-size: 26px; line-height: 1.3; margin: 32px 0 12px; color: #1d1530; }
.wp-post .post-content h3 { font-size: 21px; margin: 26px 0 10px; color: #1d1530; }
.wp-post .post-content p, .wp-post .post-content li { margin: 0 0 14px; }
.wp-post .post-content ul, .wp-post .post-content ol { padding-left: 24px; margin: 0 0 16px; }
.wp-post .post-content a { color: #4b0082; text-decoration: underline; text-underline-offset: 2px; }
.wp-post img { max-width: 100%; height: auto; border-radius: 8px; }
.wp-post figure { margin: 20px 0; }
.wp-post figcaption { font-size: 13px; color: #6b6378; margin-top: 6px; }
.wp-post table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wp-post th, .wp-post td { border: 1px solid #e6dcf3; padding: 8px 10px; text-align: left; }
.wp-post .wp-block-table { overflow-x: auto; }
@media (max-width: 640px) { .wp-post .post-entry { padding: 18px 16px; } .wp-post .post-title, .wp-post h1 { font-size: 26px; } }

/* Blog lists */
.wp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 8px 0 40px; }
.wp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ece6f2; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s; }
.wp-card:hover { box-shadow: 0 10px 24px -12px rgba(75, 0, 130, .35); }
.wp-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #f6f1fb; }
.wp-card span { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.wp-card b { font-size: 16px; line-height: 1.35; color: #1d1530; }
.wp-card small { color: #6b6378; font-size: 13px; }
.wp-card em { font-style: normal; color: #4a4257; font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) { .wp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wp-cards { grid-template-columns: 1fr; } }

/* All Stores and Categories */
.az-list { list-style: none; margin: 0 0 24px; padding: 0; columns: 4 200px; column-gap: 24px; }
.az-list li { break-inside: avoid; padding: 4px 0; font-size: 15px; }
.az-list a { color: #1d1530; text-decoration: none; }
.az-list a:hover { color: #4b0082; text-decoration: underline; }
.az-list small { color: #8a8296; font-size: 12px; margin-left: 4px; }
.cat-grid { list-style: none; margin: 8px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cat-grid a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid #ece6f2; border-radius: 12px; color: #1d1530; text-decoration: none; }
.cat-grid a:hover { border-color: #4b0082; }
.cat-grid small { color: #6b6378; }
.crow-store { margin: 0 0 2px; font-size: 13px; color: #6b6378; }
.crow-store a { color: #4b0082; font-weight: 600; text-decoration: none; }

/* The theme's sidebar widgets (Similar Stores, Favourite stores, newsletter, Submit a Coupon), on store pages
   (.hmc-sp-rail) and on category / All Stores pages (.wp-side, boxed as on the UK site) */
.hmc-sp-rail .widget-title { margin: 0 0 10px; }
/* As on the live store pages: plain lists, a full-width newsletter box, a purple Submit a Coupon button. */
:is(.hmc-sp-rail, .wp-side) :is(.similar_stores, .Favourite_stores) { display: block; margin: 0 0 4px; }
:is(.hmc-sp-rail, .wp-side) :is(.similar_stores, .Favourite_stores) a { color: #4b0082; font-size: 14px; text-decoration: none; }
:is(.hmc-sp-rail, .wp-side) :is(.similar_stores, .Favourite_stores) a:hover { text-decoration: underline; }
.hmc-sp-rail .widget_newsletter .widget-title { text-align: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
:is(.hmc-sp-rail, .wp-side) .newsletter-box-wrapper .ui.input { display: flex; flex-direction: column; gap: 20px; }
:is(.hmc-sp-rail, .wp-side) .newsletter-box-wrapper input[type=email] { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #e3dde9; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
:is(.hmc-sp-rail, .wp-side) .newsletter-box-wrapper .subscribe-btn { width: 100%; }
:is(.hmc-sp-rail, .wp-side) .newsletter-box-wrapper .submit-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 4px; background: #4b0082; color: #fff !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
:is(.hmc-sp-rail, .wp-side) .head-page-btn { display: inline-block; padding: 12px 26px; border-radius: 4px; background: #4b0082; color: #fff !important; text-decoration: none; font-weight: 600; }
.wp-side .widget-title { margin: 0 0 12px; font-size: 15px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.wp-side .widget_newsletter { border: 1px solid var(--purple); border-radius: 0; text-align: center; padding: 40px 22px; }
.wp-side .widget_newsletter .widget-title { text-transform: none; letter-spacing: 0; font-size: 26px; line-height: 1.15; margin-bottom: 22px; }
.wp-side .textwidget p { margin: 0 0 14px; font-size: 13px; }
.wp-side .head-page-btn { padding: 9px 18px; border-radius: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }

/* Homepage banners: the partners' banners are 970x250 (about 3.9:1), so the slide has their shape; the UK's 16:5 box
   cut their sides off ("alkingPad", "GET $99 O"). */
.hero .hero-slide a:not(.hb) { aspect-ratio: 970 / 250; }

/* Homepage newsletter band: the sign-up opens the site's newsletter form (pop-up), so a button instead of the UK's
   email field */
.news-p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #efe4f7; }
.news-cta { display: flex; justify-content: flex-end; }
.news-btn { border: 0; background: #fff; color: var(--purple); font: inherit; font-size: 15px; font-weight: 700; padding: 13px 34px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s; }
.news-btn:hover, .news-btn:focus { background: #f1eaf7; }
@media (max-width: 640px) { .news-cta { justify-content: stretch; } .news-btn { width: 100%; } }

/* Blog cards: a photo of any shape fills the same box (tall product photos made some cards taller) */
.bl-photo { min-height: 0; }
.bl-photo > img { position: absolute; inset: 0; }
/* The store page's font (Montserrat, wp-store.css) is for the page itself; the menu keeps the site's font and one line. */
body.hmc-store-v2 .site-header .nav a, body.hmc-store-v2 .header-bar, body.hmc-store-v2 .header-bar button, body.hmc-store-v2 .site-footer :is(h3, a, p, li), body.hmc-store-v2 .footer-copy p { font-family: Marcellus, Georgia, serif !important; }
.site-header .nav a { white-space: nowrap; }
.hmc-sp-rail .clear { clear: both; }

/* Pages carried over whole (homepage, Buying Guides hub, Black Friday, info pages): the old theme's wrappers */
.wp-carried #content-wrap, .wp-carried .container-page { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wp-carried .post-entry { background: #fff; border-radius: 14px; }
.wp-carried img { max-width: 100%; height: auto; }