/* Club House Market: look reproduced from the previous site (measured from live render). Original code. */

@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/NotoSerif-Regular.woff') format('woff'); }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/NotoSerif-Bold.woff') format('woff'); }
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.woff2') format('woff2'), url('../fonts/fontawesome-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

:root {
    --brown: #523e2a;
    --taupe: #756657;
    --gold: #fac611;
    --orange: #f47d43;
    --text: #777;
    --bar: 90px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
}
img { max-width: 100%; height: auto; }
a { color: var(--orange); }
a:hover { color: var(--brown); }

/* ---------- top bar ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: var(--bar);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px;
    background: var(--brown);
}
body.home .topbar { background: rgba(0, 0, 0, .5); }
.brand img { display: block; height: 57px; width: 211px; margin: 0; }
.topbar { justify-content: flex-start; }
.mainnav { margin-left: auto; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 44px; }
.mainnav li { margin: 0; }
.mainnav a {
    color: #fff; text-decoration: none; text-transform: uppercase;
    letter-spacing: 1px; font-size: 16px; padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.mainnav a:hover, .mainnav .active > a, .mainnav .current > a { border-bottom-color: var(--gold); color: #fff; }
.navtoggle, .burger { display: none; }

/* ---------- hero (homepage) ---------- */
.hero {
    position: relative;
    height: 71vw; max-height: 1000px; min-height: 560px;
    background: #2a1d12 url('../images/s3bkg.jpg') center / cover no-repeat fixed;
    text-align: center;
}
.hero-inner { padding-top: calc(var(--bar) + 132px); }
.hero img { display: block; margin: 0 auto; }
.hero .inset1 { width: 622px; }
.hero .inset2 { width: 622px; margin-top: 2%; }
.hero .inset3 { width: 359px; margin-top: 1.5%; }
.social { margin-top: 5%; display: flex; justify-content: center; gap: 14px; }
.scircle {
    width: 54px; height: 54px; border-radius: 50%;
    background: #fff; color: #222; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
}
.scircle:hover { background: var(--gold); color: #222; }
.fa { font-family: 'FontAwesome'; font-style: normal; font-size: 28px; line-height: 1; }

/* Logo entrance (replays each time the hero scrolls back into view): top drops in, middle zooms in, bottom floats up */
@keyframes logo-drop  { from { opacity: 0; transform: translateY(-200px); } to { opacity: 1; transform: none; } }
@keyframes logo-zoom  { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes logo-float { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes logo-fade  { from { opacity: .5; } to { opacity: 1; } }
.hero.play .inset1 { animation: logo-drop .6s ease-in .4s backwards; }
.hero.play .inset2 { animation: logo-zoom .66s ease .2s backwards; }
.hero.play .inset3 { animation: logo-float .4s ease-in .6s backwards; }
.hero.play .social { animation: logo-fade .66s ease 1s backwards; }
@media (prefers-reduced-motion: reduce) { .hero.play * { animation: none !important; } }

/* ---------- homepage rows ---------- */
.hrow { display: flex; background: var(--brown); }
.hrow .txt, .hrow .pic { flex: 0 0 50%; min-height: 33.2vw; }
.hrow .pic { background-size: cover; background-position: center; }
.hrow .txt { position: relative; display: flex; justify-content: center; padding: 76px 40px 50px; text-align: center; color: #fff; }
.hrow .txt-in { width: 100%; max-width: 560px; }
.hrow h2 {
    margin: 0 0 20px; padding-bottom: 12px;
    font-weight: 400; font-size: 52px; line-height: 1.15;
    text-transform: uppercase; color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .7);
}
.hrow p { margin: 0 0 10px; font-size: 17px; letter-spacing: 1.2px; line-height: 1.55; color: #fff; }
.hrow a { color: var(--gold); }
.hrow .txt::after {
    content: ''; position: absolute; top: 46%; right: -30px;
    border-style: solid; border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent var(--brown);
    z-index: 2;
}
.hrow.flip .txt { order: 2; }
.hrow.flip .pic { order: 1; }
.hrow.flip .txt::after {
    right: auto; left: -30px; border-width: 30px 30px 30px 0;
    border-color: transparent var(--brown) transparent transparent;
}

/* ---------- inner pages ---------- */
body.inner .page { padding-top: calc(var(--bar) + 30px); padding-bottom: 60px; max-width: 1140px; margin: 0 auto; padding-left: 20px; padding-right: 20px; min-height: 70vh; }
.page-cols { display: flex; gap: 40px; }
.page-main { flex: 1 1 auto; min-width: 0; }
.page-side { flex: 0 0 260px; }
.page-side:empty { display: none; }
/* Typography as on the old site: Noto Serif Regular throughout, headings never bold */
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif', Georgia, 'Times New Roman', serif; color: var(--brown); font-weight: 400; line-height: 1; }
h1 { font-size: 42px; }
h2 { font-size: 36px; letter-spacing: -1px; }
h3 { font-size: 24px; letter-spacing: -1px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
.btn { font-family: inherit; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; }
/* Button size as on the old site (Bootstrap 2: 4px 12px, 14px/20px); no full-width buttons */
.page-main .btn:not(.btn-icon):not(.btn-sm):not(.btn-link) { padding: 4px 12px; font-size: 14px; line-height: 20px; }
.page-main .btn.w-100, .page-main .btn.btn-lg:not(.btn-icon) { width: auto !important; flex: 0 0 auto; padding: 4px 12px !important; font-size: 14px !important; line-height: 20px; }
.page-main .d-grid { justify-items: start; }
.page-main .j2commerce-cart-buttons .btn.w-100 { flex: 0 0 auto; }
.btn-primary { --bs-btn-bg: var(--brown); --bs-btn-border-color: var(--brown); --bs-btn-hover-bg: var(--orange); --bs-btn-hover-border-color: var(--orange); --bs-btn-active-bg: var(--orange); --bs-btn-active-border-color: var(--orange); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #9c8f82; --bs-btn-disabled-border-color: #9c8f82; }
/* btn btn-success: the old site's green gradient button (Bootstrap 2 look). btn-outline-primary is not used on this site: it gets the same look. */
.btn.btn-success, .btn.btn-outline-primary {
    color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); text-transform: none; letter-spacing: 0;
    background-color: #5bb75b; background-image: linear-gradient(to bottom, #62c462, #51a351); background-repeat: repeat-x;
    border: 1px solid; border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
}
.btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active, .btn.btn-success.active,
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus, .btn.btn-outline-primary:active, .btn.btn-outline-primary.active {
    color: #fff; background-color: #51a351; background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-position: 0 -15px; transition: background-position .1s linear;
}
.btn.btn-success:disabled, .btn.btn-success.disabled, .btn.btn-outline-primary:disabled, .btn.btn-outline-primary.disabled { color: #fff; background-color: #51a351; opacity: .65; }
input[type=submit] {
    background: var(--brown); color: #fff; border: 0; padding: 9px 20px;
    font-family: inherit; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
input[type=submit]:hover { background: var(--orange); }
.j2commerce-product-list .product-list-row > div { margin-bottom: 28px; }
.j2commerce-product-list img { max-width: 100%; height: auto; }
/* Shop list cards as on the old site: big light-brown name, bold grey price, no image border, compact buttons */
.product-title, .product-title a { color: #a38d77; text-decoration: none; }
.product-title a:hover { color: var(--brown); }
.j2commerce-product-list .product-title { font-size: 36px; line-height: 1; letter-spacing: -1px; margin: 0 0 8px; }
.j2commerce-product-list .sale-price { font-size: 28px !important; font-weight: 700 !important; color: #777; line-height: 1.2 !important; }
.j2commerce-product-list img.border { border: 0 !important; }
.j2commerce-product-list .btn.w-100 { width: auto !important; padding: 4px 12px; font-size: 14px; }
.j2commerce-product-list .j2commerce-cart-buttons .input-group { width: auto; flex-wrap: nowrap; }
.j2commerce-product-list .j2commerce-cart-buttons .flex-fill { flex: 0 0 auto !important; padding: 4px 12px; font-size: 14px; }
.j2commerce-product-list .qty-input { width: 56px; flex: 0 0 56px; padding: 4px 8px; }
.j2commerce-product-list .j2commerce-price-sku-container { margin-bottom: 10px !important; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
    font-family: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #cfc7bd; border-radius: 0; max-width: 100%;
}
table { border-collapse: collapse; max-width: 100%; }
.alert, .alert-message { padding: 10px 14px; border: 1px solid #cfc7bd; background: #f6f2ec; margin-bottom: 16px; }
.breadcrumb, ul.mod-breadcrumbs { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }

/* checkout has no menu item, so its page heading would read "Home" */
body.view-checkout .page-header { display: none; }

/* ---------- article with a full-height side image (About, Payment): photo fills left, text flows right ---------- */
body.inner .page:has(figure.item-image) { max-width: none; padding: var(--bar) 0 0; min-height: 0; }
body.inner .page:has(figure.item-image) .page-cols { display: block; }
.com-content-article:has(figure.item-image) { display: flex; align-items: flex-start; }
.com-content-article figure.item-image { flex: 0 0 38%; margin: 0; position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); }
.com-content-article figure.item-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.com-content-article:has(figure.item-image) .com-content-article__body { flex: 1 1 auto; min-width: 0; padding: 36px 40px 60px 32px; }
.com-content-article__body .dropcap { float: left; font-size: 64px; line-height: .9; margin: 6px 8px 0 0; color: var(--taupe); font-family: Georgia, serif; }

/* ---------- footer ---------- */
.foot { background: var(--taupe); color: #fff; text-align: center; padding: 38px 20px 30px; font-size: 12px; line-height: 1.7; }
.foot p { margin: 0 0 14px; color: #fff; }
.foot .by img { margin-top: 4px; }
.foot a { color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
    .topbar { padding: 0 18px; }
    .burger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 10px; margin-left: auto; }
    .burger span { display: block; width: 28px; height: 3px; background: #fff; }
    .mainnav { display: none; position: absolute; top: var(--bar); left: 0; right: 0; background: var(--brown); padding: 10px 18px 20px; }
    .navtoggle:checked ~ .mainnav { display: block; }
    .mainnav ul { flex-direction: column; gap: 4px; }
    .mainnav a { display: block; padding: 10px 0; }
    .hero { height: auto; min-height: 640px; background-attachment: scroll; background-image: url('../images/mobile_s3bkg.jpg'); padding-bottom: 60px; }
    .hero .inset1, .hero .inset2 { width: 92%; max-width: 622px; }
    .hero .inset3 { width: 62%; max-width: 359px; }
    .hrow { flex-direction: column; }
    .hrow .txt, .hrow .pic { flex: 0 0 auto; width: 100%; min-height: 0; }
    .hrow .pic { height: 62vw; min-height: 220px; }
    .hrow .txt, .hrow.flip .txt { order: 0; padding: 50px 22px 40px; }
    .hrow .pic, .hrow.flip .pic { order: 1; }
    .hrow .txt::after, .hrow.flip .txt::after { display: none; }
    .hrow h2 { font-size: 36px; }
    .hrow p { font-size: 16px; }
    .page-cols { flex-direction: column; }
    .page-side { flex-basis: auto; }
    .com-content-article:has(figure.item-image) { display: block; }
    .com-content-article figure.item-image { position: static; height: 62vw; min-height: 220px; }
    .com-content-article:has(figure.item-image) .com-content-article__body { padding: 24px 18px 40px; }
}