/* ==========================================================================
Arrowheads Stores - look & feel refresh
Loaded AFTER styles.css. Keeps the existing colours/layout and polishes:
wider layout (+15%), readability, buttons, cards, forms, mobile.
To roll back: remove the enhance.css from includes/top_includes_css.php
========================================================================== */
:root{
--ah-ink:#1c1a12;
--ah-brand:#640909;
--ah-brand-dark:#470606;
--ah-brand-light:#820a06;
--ah-olive:#5f5b44;
--ah-olive-dark:#43402c;
--ah-sand:#dfdccb;
--ah-card:#eeebe3;
--ah-line:#c1bda3;
--ah-gold:#ffdf08;
--ah-ok:#1f7a1f;
--ah-radius:10px;
--ah-shadow:0 1px 3px rgba(40,34,10,.18);
--ah-shadow-hover:0 6px 18px rgba(40,34,10,.28);
}
/* ---------- Base typography ---------- */
html{ -webkit-text-size-adjust:100%; }
body{ font-size:16px; line-height:1.55; color:var(--ah-ink); -webkit-font-smoothing:antialiased; }
.text{ font-size:14px; }
.text12{ font-size:13px; }
.pageText{ font-size:15px; line-height:1.6; }
.pageBody{ padding:12px 0; }
.pageBody p{ margin:0 0 .9em; }
h1,.h1,h2,.h2,.pageBody H1,.pageBody H2{ font-family:Georgia,"Times New Roman",Times,serif; line-height:1.25; color:#1a1608; }
h1,.h1{ font-size:30px !important; margin:14px 0 12px; }
h2,.h2{ font-size:24px !important; margin:18px 0 10px; }
.pageBody ul li{ margin:2px 0; }
/* ---------- Links & keyboard focus ---------- */
a{ text-decoration:none; }
.pageBody a:not(.btn):not(.button2):hover,
.footer a:hover{ text-decoration:underline; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible{
outline:3px solid #e0a800 !important; outline-offset:2px; box-shadow:none;
}
:focus{ outline:0; }
/* ---------- Wider layout: 1000px -> 1150px (+15%) ---------- */
.mainContainer{ max-width:1150px; }
@media only screen and (min-width:992px){
/* header banner follows the new width and the left link panel stretches with it */
.mainContainer > .row.zeroMargin:nth-child(2){ display:flex; align-items:stretch; }
.mainContainer > .row.zeroMargin:nth-child(2):before,
.mainContainer > .row.zeroMargin:nth-child(2):after{ content:none; }
.mainContainer > .row.zeroMargin:nth-child(2) > .topHeaderBG{ float:none; }
.mainContainer > .row.zeroMargin:nth-child(2) > .topHeaderBG img.img-responsive{ width:100%; max-width:none; height:100%; object-fit:cover; display:block; }
.topHeaderLinks{ height:100%; }
.topHeaderLinks li{ padding:11px 0; font-size:100%; }
.topHeaderLinks li a{ font-size:12.5px; }
}
/* ---------- Top navigation ---------- */
.menu_bg ul li a,.navbar-brand{ font-size:92%; padding:6px 16px; letter-spacing:.2px; }
.menu_bg ul li a:hover,.nav>li>a:focus,.nav>li>a:hover{ transition:background-color .15s ease; }
.menu_bg ul li.active a,.menu_bg ul li a[aria-current]{ background-color:#d8d5c4; color:#43402c !important; border-radius:12px; }
/* ---------- Buttons ---------- */
.btn{ font-weight:600; transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active{ transform:translateY(1px); }
.btn-danger{ border-radius:20px; padding:6px 18px; }
.btn-sm,.btn-xs{ line-height:1.4; }
.btn-danger:hover,.btn-danger:focus{ background-color:var(--ah-olive-dark); border-color:#000; }
.btn-primary{ border-radius:20px; padding:6px 18px; }
.button2{ padding:7px 14px; font-size:13px; font-weight:600; transition:box-shadow .15s ease, filter .15s ease; }
.button2:hover{ filter:brightness(1.12); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.subscribeBtn{ border-radius:20px !important; }
/* ---------- Forms ---------- */
.form-control,.fields,.fields2,input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],select,textarea{
border-radius:6px;
}
.form-control{ height:38px; font-size:15px; border:1px solid #aeaa94; }
textarea.form-control{ height:auto; }
.form-control::placeholder{ color:#7b7762; }
.myform .row{ padding:5px 0; }
.myform .row label,label{ font-weight:600; }
.dark_row{ border-radius:6px; }
.dark_head{ padding:9px 12px; margin:10px 0 6px; font-size:15px; }
.sideRec input[type=text],.sideRec input[type=password],.sideRec input[type=email]{ height:36px; border-radius:6px; padding:6px 8px; }
.sideRec{ border-radius:var(--ah-radius); box-shadow:var(--ah-shadow); }
.sideRec a{ font-size:100%; }
.sideRec a:hover{ color:#fff !important; text-decoration:underline; }
.sideRec H3{ color:var(--ah-gold); }
/* status text that sat on dark olive was hard to read */
.green2{ color:var(--ah-ok); font-weight:700; }
.sideRec .green2,.sideRec .prod .green2,#featuredProducts .green2,.featuredProductsEle .green2{ color:#9be89b; }
/* ---------- Cards (products, stores, items) ---------- */
.prodBlock,.itemBlock,.imgBlock{ transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.prodBlock{ border-radius:var(--ah-radius); box-shadow:var(--ah-shadow); }
.prodBlock:hover{ transform:translateY(-3px); box-shadow:var(--ah-shadow-hover); }
.prodBlock .aboutPad{ font-size:14.5px; line-height:1.5; }
.itemBlock{ padding:10px; }
.itemBlock:hover{ transform:translateY(-3px); box-shadow:var(--ah-shadow-hover); }
.itemHead{ border-radius:8px 8px 0 0; padding:7px 8px; font-size:14px; background-color:var(--ah-brand); }
.itemBody{ border-radius:0 0 8px 8px; box-shadow:var(--ah-shadow); }
.itemThumb{ border-radius:6px; }
.thumb2,.imgBG img,.imgBG2 img{ border-radius:6px; }
.badge{ font-weight:600; background-color:var(--ah-olive-dark); }
.fa_block,.gray_grediant{ border-radius:var(--ah-radius); }
/* ---------- Search / filter bar on home ---------- */
.searchBtn{ height:38px; }
select.form-control{ cursor:pointer; }
/* ---------- Tables ---------- */
.table>thead>tr>th{ background:var(--ah-olive); color:#fff; border-color:var(--ah-olive-dark); }
.table-hover>tbody>tr:hover{ background-color:#d9d5c2; }
.gridTable td{ padding:7px; }
/* ---------- Pagination ---------- */
.pagination UL{ padding:20px 0; }
.pagination A,.pagination LI.currentpage{ border-radius:5px; padding:6px 10px; display:inline-block; min-width:34px; text-align:center; }
.pagination A{ transition:background-color .15s ease; }
/* ---------- Messages ---------- */
.red,.green,.storeAlert{ border-radius:8px; padding:10px 14px; }
/* ---------- Footer ---------- */
.footer{ border-radius:var(--ah-radius) var(--ah-radius) 0 0; }
.footer ul{ flex-wrap:wrap; padding:0; }
.footer ul li{ padding:2px 12px; font-size:92%; }
.footer a{ text-decoration:none; }
/* ---------- Back-to-top button (added by js/enhance.js) ---------- */
#ahToTop{
position:fixed; right:18px; bottom:18px; z-index:900; width:44px; height:44px; border:0; border-radius:50%;
background:var(--ah-brand); color:#fff; font-size:20px; line-height:44px; text-align:center; cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
#ahToTop.show{ opacity:.92; visibility:visible; }
#ahToTop:hover{ background:var(--ah-brand-dark); opacity:1; }
/* ---------- Mobile / small screens ---------- */
@media only screen and (max-width:991px){
body{ font-size:16px; overflow-x:hidden; }
h1,.h1{ font-size:26px !important; }
h2,.h2{ font-size:22px !important; }
.form-control,select,input[type=text],input[type=password],input[type=email],input[type=tel]{ font-size:16px; } /* stops iOS zoom on focus */
.btn,.button2{ min-height:40px; }
.navbar-nav>li>a{ padding:10px 16px; }
img{ max-width:100%; height:auto; }
table{ max-width:100%; }
.pageBody,.bodyContainer{ overflow-wrap:anywhere; }
}
@media only screen and (max-width:768px){
.footer ul li{ padding:6px 0; }
}
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; animation:none !important; }
}
@media print{
#ahToTop,.floatingBtn{ display:none !important; }
}
/* embedded widgets (Facebook etc.) must never push the page wider than the screen */
.leftSide iframe,.rightSide iframe,.adTable iframe{ max-width:100%; }
/* ==========================================================================
Alignment pass for the wider (1150px) layout
========================================================================== */
/* Logo lines up with the left edge of the header panel below it */
.mainContainer .logo{ text-align:left; padding-left:10px; margin:18px 0 8px; }
/* Sidebar: every block (cart, login, ads, featured) spans the full column width */
.leftSide{ padding-right:14px !important; }
.leftSide > td,.leftSide table{ width:100%; }
.leftSide .adTable img,.leftSide .adTable a{ display:block; width:100%; height:auto; max-width:none; }
.leftSide .adTable td{ padding:0; }
.leftSide .adTable{ margin:14px 0 !important; }
.leftSide .sideRec{ padding:12px 14px; }
.leftSide .sideRec .form-control{ width:100%; }
.leftSide .sideRec input[type=image]{ margin:8px 0 4px; }
/* Equal gutters for card grids (rows get -12px on the right, cards carry a 12px right margin) */
.row:has(> div > .prodBlock),
.row:has(> div > .itemBlock),
.row:has(> div > .imgBlock){ margin-right:-12px !important; }
.prodBlock,.imgBlock{ margin:0 12px 14px 0; }
.itemBlock{ padding:0 12px 14px 0; }
.itemBlock:hover{ transform:none; box-shadow:none; }
.itemBlock .itemHead,.itemBlock .itemBody{ transition:box-shadow .2s ease, transform .2s ease; }
.itemBlock:hover .itemBody{ box-shadow:var(--ah-shadow-hover); }
/* Store / product cards: picture area fills the card width, image centred */
p.imgBG,p.imgBG2{ max-width:none; width:100%; margin:0 0 10px; display:flex; align-items:center; justify-content:center; }
p.imgBG{ height:150px; }
p.imgBG2{ height:110px; }
img.imgBG,img.imgBG2{ max-width:100%; width:auto; height:100%; object-fit:contain; background:none; }
.prodBlock h3,.prodBlock .h3{ padding:12px 10px 8px; margin:0; line-height:1.3; }
.prodBlock .info{ padding:4px 8px 0; }
.prodBlock .aboutPad{ padding:10px 14px 14px; min-height:0; overflow-wrap:anywhere; word-break:break-word; }
.prodBlock .btn{ margin:4px 0 14px; }
/* Content column: consistent spacing between stacked sections */
.rightSide > h1,.rightSide > .h1{ margin-top:6px; }
.rightSide .row{ padding:3px 0; }
.rightSide .searchBtn{ height:38px; }
/* Home: two half-width columns (featured / random stores) keep the same top edge */
.rightSide .row > .col-md-6{ padding-left:0; padding-right:12px; }
.rightSide .row > .col-md-6 > h2,.rightSide .row > .col-md-6 > .h2{ margin-top:6px; }
/* Menu: even spacing, text vertically centred */
.menu_bg .navbar{ margin-bottom:0; min-height:0; border:0; }
.menu_bg ul.navbar-nav{ display:flex; flex-wrap:wrap; gap:2px; padding-top:10px; }
.menu_bg ul li a{ display:block; line-height:22px; }
/* Header left panel: same rounded look as the sidebar blocks */
.topHeaderLinks{ border-radius:var(--ah-radius); }
@media only screen and (max-width:991px){
.leftSide{ padding-right:0 !important; }
.row:has(> div > .prodBlock),.row:has(> div > .itemBlock),.row:has(> div > .imgBlock){ margin-right:0 !important; }
.prodBlock,.imgBlock{ margin:0 0 12px; }
.itemBlock{ padding:0 0 12px; }
.mainContainer .logo{ text-align:center; padding-left:0; }
.menu_bg ul.navbar-nav{ display:block; }
}
/* card text padding (needs to beat ".rightSide .row" above) */
.prodBlock .row.aboutPad{ padding:10px 16px 14px; }
.prodBlock .row.info{ padding:4px 10px 0; }
.prodBlock .row.info strong{ font-weight:700; }
/* narrower cards (two across inside the half-width home columns) */
.rightSide .col-md-6 .prodBlock .row.info{ font-size:13px; line-height:1.7; padding:4px 4px 0; }
.rightSide .col-md-6 .prodBlock .badge{ font-size:11px; padding:3px 6px; }
.rightSide .col-md-6 .prodBlock .row.aboutPad{ font-size:13px; padding:8px 8px 12px; }
.rightSide .col-md-6 .prodBlock h3{ font-size:14px; }
/* keep the original row padding on the product-detail info table (labels line up) */
.rightSide .row.light_row{ padding:6px 12px 8px; }
.rightSide .row.light_row2{ padding:4px 12px; font-size:13px; }
/* equal-height random store cards */
.rightSide .col-md-6 .prodBlock{ min-height:370px; }
.rightSide .row.light_row,.rightSide .row.light_row2{ padding-left:0; padding-right:0; }
.row.light_row > [class*="col-"],.row.light_row2 > [class*="col-"]{ padding-left:14px; padding-right:14px; }
/* ==========================================================================
Fix: card grids use a wrapping flex row (no float "snagging" on unequal heights)
and the top menu is vertically centred in its bar
========================================================================== */
@media only screen and (min-width:768px){
.row:has(> div > .prodBlock),
.row:has(> div > .itemBlock),
.row:has(> div > .imgBlock){ display:flex; flex-wrap:wrap; align-items:stretch; }
.row:has(> div > .prodBlock):before,.row:has(> div > .prodBlock):after,
.row:has(> div > .itemBlock):before,.row:has(> div > .itemBlock):after,
.row:has(> div > .imgBlock):before,.row:has(> div > .imgBlock):after{ content:none; display:none; }
.row:has(> div > .prodBlock) > div,
.row:has(> div > .itemBlock) > div,
.row:has(> div > .imgBlock) > div{ float:none; display:flex; flex-direction:column; }
.row > div > .prodBlock,.row > div > .imgBlock{ flex:1 1 auto; min-height:0 !important; }
.row > div > .itemBlock{ flex:1 1 auto; display:flex; flex-direction:column; }
.row > div > .itemBlock .itemBody{ flex:1 1 auto; }
}
/* top menu: equal space above and below the items; the extra bottom padding is the part hidden under the banner */
.menu_bg{ padding:8px 5px 30px; }
.menu_bg .navbar{ margin:0; }
.menu_bg ul.navbar-nav{ padding:0; margin:0; align-items:center; }
.menu_bg ul li a{ padding:6px 16px; line-height:22px; }
@media only screen and (max-width:991px){
.menu_bg{ padding:0 5px 22px; }
.menu_bg ul.navbar-nav{ padding:4px 0; }
}
/* pin the card button row to the bottom so "Browse Store" lines up across a row */
@media only screen and (min-width:768px){
.prodBlock{ display:flex; flex-direction:column; }
.prodBlock .row.aboutPad{ flex:1 1 auto; }
.prodBlock > div:last-child{ margin-top:auto; padding-bottom:6px; }
}
/* headings / clear-fix helpers sitting inside a card row take the full row, cards start on the next line */
.row:has(> div > .prodBlock) > :not([class*="col-"]),
.row:has(> div > .itemBlock) > :not([class*="col-"]),
.row:has(> div > .imgBlock) > :not([class*="col-"]){ flex:0 0 100%; max-width:100%; }
/* ==========================================================================
Modern cards (stores + products) and section headings
========================================================================== */
/* ---------- Headings: serif title with a short accent bar ---------- */
.rightSide h1,.rightSide .h1,.rightSide h2.h2,.rightSide > h2,.pageBody h1{ position:relative; letter-spacing:.2px; }
.rightSide h1:after,.rightSide .h1:after,.rightSide h2.h2:after,.rightSide > h2:after,.pageBody h1:after{
content:""; display:block; width:56px; height:3px; margin-top:8px; border-radius:3px;
background:linear-gradient(90deg,var(--ah-brand),#c8a64a);
}
.rightSide h1,.rightSide .h1{ margin:8px 0 16px; }
.rightSide h2.h2,.rightSide > h2{ margin:22px 0 14px; }
.rightSide .col-md-6 > h2.h2,.rightSide .col-md-6 > h2{ margin-top:10px; }
.rightSide #pagination h2:after{ display:none; }
/* ---------- Store / member cards ---------- */
.prodBlock{
display:flex; flex-direction:column; overflow:hidden; text-align:center;
background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px;
box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08);
}
.prodBlock:hover{ border-color:#bdb48f; box-shadow:0 10px 26px rgba(40,34,10,.22); transform:translateY(-4px); }
/* picture first, name under it */
.prodBlock > p.imgBG,.prodBlock > p.imgBG2{ order:1; margin:0; border-radius:0; background:#ebe6d3; height:170px; padding:10px; }
.prodBlock > p.imgBG2{ height:130px; }
.prodBlock > p img.imgBG,.prodBlock > p img.imgBG2{ border-radius:8px; max-height:100%; width:auto; max-width:100%; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.prodBlock > h3,.prodBlock > .h3{ order:2; padding:14px 14px 4px; font-size:17px; font-family:Georgia,"Times New Roman",serif; color:var(--ah-brand); }
.prodBlock > h3 strong,.prodBlock > .h3 strong{ font-weight:700; }
.prodBlock > .row.info{
order:3; display:flex; justify-content:center; flex-wrap:wrap; gap:6px 12px; padding:6px 12px 2px;
font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:#6b6550;
}
.prodBlock > .row.info br{ display:none; }
.prodBlock > .row.info strong{ font-weight:600; font-size:11px; }
.prodBlock .badge{ background:#e6dfc4; color:#3a3420; font-weight:700; font-size:12px; padding:3px 9px; border-radius:10px; letter-spacing:0; text-transform:none; }
.prodBlock > .row.aboutPad{ order:4; flex:1 1 auto; padding:8px 18px 12px; font-size:14px; line-height:1.5; color:#4a4533; }
.prodBlock > div:last-child{ order:5; margin-top:auto; padding:2px 16px 16px; }
.prodBlock > div:last-child .btn{ min-width:150px; margin:0; }
/* ---------- Product cards ---------- */
.itemBlock{ padding:0 12px 14px 0; }
.itemBlock .itemHead{
background:#f8f5ec; color:var(--ah-ink); border:1px solid #d9d3bb; border-bottom:0; border-radius:14px 14px 0 0;
padding:12px 14px 6px; min-height:0; max-height:none; font-size:15px; font-weight:700; line-height:1.3; text-align:center;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.itemBlock .itemBody{
background:#f8f5ec; border:1px solid #d9d3bb; border-top:0; border-radius:0 0 14px 14px; min-height:0; padding:4px 14px 16px;
box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08);
}
.itemBlock:hover .itemBody{ box-shadow:0 10px 26px rgba(40,34,10,.22); }
.itemBlock .itemThumb{ border:0; padding:0; border-radius:10px; background:#ebe6d3; max-height:150px; width:auto; max-width:100%; margin:6px auto 10px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.itemBlock .itemBody p{ margin:0 0 6px; }
/* price stands out, views are quiet */
.itemBlock .itemBody > p:first-of-type{ color:#6b6550; font-size:13px; }
.itemBlock .badge-price{ background:var(--ah-brand); color:#fff; font-size:15px; padding:5px 12px; border-radius:14px; }
.itemBlock .badge-views{ background:#e6dfc4; color:#3a3420; font-size:12px; padding:3px 9px; }
/* status as a pill */
.itemBlock .itemBody strong{ font-weight:600; font-size:12px; color:#6b6550; text-transform:uppercase; letter-spacing:.3px; }
.itemBlock .green2,.itemBlock .red2{ display:inline-block; padding:1px 10px; border-radius:12px; font-size:13px; margin-left:4px; }
.itemBlock .green2{ background:#dcf0dc; color:#17621f; }
.itemBlock b.red2{ background:#f6dada; color:#9a1212; }
.itemBlock .btn{ margin-top:6px; }
@media only screen and (max-width:991px){
.itemBlock{ padding:0 0 12px; }
.prodBlock > p.imgBG{ height:190px; }
}
/* ==========================================================================
Sidebar: Featured Products (cards instead of nested dark tables)
========================================================================== */
.featuredProductsEle{ margin-top:18px; }
.featuredProductsEle .feature_prod_heading{
background:none; padding:0; margin:0 0 12px; border-radius:0; text-align:left;
font-family:Georgia,"Times New Roman",serif; font-size:19px; color:#1a1608; letter-spacing:.2px;
}
.featuredProductsEle .feature_prod_heading strong{ font-weight:400; text-transform:none; }
.featuredProductsEle .feature_prod_heading:after{
content:""; display:block; width:56px; height:3px; margin-top:8px; border-radius:3px;
background:linear-gradient(90deg,var(--ah-brand),#c8a64a);
}
.fpList{ display:flex; flex-direction:column; gap:12px; }
.fpCard{
display:flex; gap:12px; align-items:stretch; padding:10px; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:12px;
box-shadow:0 1px 2px rgba(40,34,10,.12), 0 3px 10px rgba(40,34,10,.08); transition:box-shadow .2s ease, transform .2s ease;
}
.fpCard:hover{ box-shadow:0 8px 22px rgba(40,34,10,.22); transform:translateY(-2px); }
.fpThumb{ flex:0 0 84px; width:84px; height:84px; display:block; border-radius:8px; background:#ebe6d3; overflow:hidden; align-self:flex-start; }
.fpThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fpBody{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.fpTitle{
font-weight:700; font-size:14px; line-height:1.3; color:var(--ah-ink) !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.fpTitle,.fpTitle:hover,.fpTitle:focus{ text-decoration:none !important; transition:color .15s ease; }
.fpTitle:hover,.fpTitle:focus{ color:var(--ah-brand) !important; }
.fpMeta{ margin:6px 0 2px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.fpMeta .badge-price{ background:var(--ah-brand); color:#fff; font-size:13px; padding:3px 10px; border-radius:12px; }
.fpMeta .green2,.fpMeta .red2{ display:inline-block; padding:1px 9px; border-radius:11px; font-size:12px; margin:0; }
.fpMeta .green2{ background:#dcf0dc; color:#17621f; }
.fpMeta .red2{ background:#f6dada; color:#9a1212; }
.fpOffer{ font-size:11px; font-weight:700; color:#9a1212; text-transform:uppercase; letter-spacing:.3px; }
.fpFoot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fpViews{ font-size:12px; color:#6b6550; white-space:nowrap; }
.fpFoot .btn{ margin:0; padding:3px 12px; font-size:12px; }
/* the footer script moves this block under the ads on small screens: give it room there */
@media only screen and (max-width:991px){
.featuredProductsEle{ margin-top:8px; }
.fpList{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}
.fpBody,.fpTitle,.fpMeta,.fpFoot{ text-align:left; }
.fpThumb{ flex-basis:76px; width:76px; height:76px; }
.fpFoot{ flex-wrap:wrap; row-gap:6px; }
.fpFoot .btn{ white-space:nowrap; }
.fpCard{ padding:10px 12px 10px 10px; }
/* ==========================================================================
Featured Products: its own dark panel so it stands apart from the store cards
========================================================================== */
.featuredProductsEle{
background:linear-gradient(180deg,#6a6549 0%,#55513a 100%); border-radius:14px; padding:16px 14px 6px;
box-shadow:0 2px 10px rgba(40,34,10,.3); margin-top:20px;
}
.featuredProductsEle .feature_prod_heading{ color:var(--ah-gold); font-size:18px; letter-spacing:.8px; margin-bottom:14px; }
.featuredProductsEle .feature_prod_heading strong:before{ content:"\2605"; margin-right:8px; font-size:16px; color:var(--ah-gold); }
.featuredProductsEle .feature_prod_heading:after{ background:linear-gradient(90deg,var(--ah-gold),rgba(255,223,8,0)); width:72px; }
.fpList{ gap:12px; padding-bottom:10px; }
.fpCard{ background:#fffdf6; border:0; border-left:4px solid var(--ah-gold); border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.fpCard:hover{ box-shadow:0 8px 20px rgba(0,0,0,.5); }
/* ==========================================================================
Store / member card headings
========================================================================== */
.prodBlock{ border-top:3px solid var(--ah-brand); }
.prodBlock > h3,.prodBlock > .h3{
padding:16px 16px 2px; margin:0; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:.2px; color:#4a0707;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.prodBlock > h3 strong,.prodBlock > .h3 strong{ font-weight:700; }
.prodBlock > h3:after,.prodBlock > .h3:after{
content:""; display:block; width:36px; height:3px; margin:9px auto 0; border-radius:3px;
background:linear-gradient(90deg,var(--ah-brand),#c8a64a);
}
/* the smaller cards in the half-width home column */
.rightSide .col-md-6 .prodBlock > h3,.rightSide .col-md-6 .prodBlock > .h3{ font-size:16px; padding:12px 10px 0; }
/* ==========================================================================
Store cards v2: name overlays the picture (white on a dark gradient),
everything below is left-aligned. Replaces the centred serif heading.
========================================================================== */
.prodBlock{ border-top:1px solid #d9d3bb; text-align:left; position:relative; }
.prodBlock > h3,.prodBlock > .h3{
order:2; position:relative; z-index:2; margin:-68px 0 0; padding:30px 16px 12px; text-align:left;
font-family:Arial,Helvetica,sans-serif; font-size:19px; font-weight:700; line-height:1.2; letter-spacing:.2px; color:#fff;
background:linear-gradient(180deg,rgba(25,18,6,0) 0%,rgba(25,18,6,.78) 70%,rgba(25,18,6,.88) 100%);
text-shadow:0 1px 3px rgba(0,0,0,.6);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prodBlock > h3:after,.prodBlock > .h3:after{ content:none; }
.prodBlock > h3 strong,.prodBlock > .h3 strong{ color:#fff; font-weight:700; }
.prodBlock > p.imgBG,.prodBlock > p.imgBG2{ padding:10px 10px 44px; } /* leave room for the title strip */
.prodBlock > .row.info{ justify-content:flex-start; padding:12px 16px 2px; gap:6px 14px; }
.prodBlock > .row.aboutPad{ text-align:left; padding:8px 16px 12px; color:#4a4533; }
.prodBlock > div:last-child{ padding:2px 16px 16px; }
.prodBlock > div:last-child .btn{ display:block; width:100%; min-width:0; text-align:center; padding:8px 14px; font-size:13px; }
.rightSide .col-md-6 .prodBlock > h3,.rightSide .col-md-6 .prodBlock > .h3{ font-size:15px; padding:26px 12px 10px; margin-top:-60px; }
.rightSide .col-md-6 .prodBlock > .row.info{ padding:10px 12px 2px; }
.rightSide .col-md-6 .prodBlock > .row.aboutPad{ padding:6px 12px 10px; }
.rightSide .col-md-6 .prodBlock > div:last-child{ padding:2px 12px 12px; }
.prodBlock > h3,.prodBlock > .h3,.prodBlock h3 strong{ text-align:left !important; }
.prodBlock > p.imgBG{ height:196px; padding:12px 12px 54px; }
.prodBlock > p.imgBG2{ height:150px; padding:10px 10px 50px; }
.prodBlock > .row.info{ display:grid; grid-template-columns:max-content 1fr; gap:5px 10px; align-items:center; text-align:left; }
.prodBlock > .row.info .badge{ justify-self:start; }
/* meta lines: "UPDATED ON: [date]" / "TOTAL ITEMS: [n]" one per line, left aligned */
.prodBlock > .row.info{ display:block; line-height:2; }
.prodBlock > .row.info br{ display:inline; }
.prodBlock > .row.info strong{ display:inline-block; min-width:92px; }
.rightSide .col-md-6 .prodBlock > .row.info strong{ min-width:0; margin-right:4px; }
.rightSide .col-md-6 .prodBlock > .row.info{ line-height:2.1; }
/* ==========================================================================
Product cards v2: title overlays the top of the picture (matches the store cards)
========================================================================== */
.itemBlock{ position:relative; }
.itemBlock .itemHead{
position:absolute; top:0; left:0; right:12px; z-index:3; border:0; border-radius:14px 14px 0 0;
padding:12px 14px 26px; text-align:left; font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:700; line-height:1.25; letter-spacing:.2px;
color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
background:linear-gradient(180deg,rgba(25,18,6,.86) 0%,rgba(25,18,6,.72) 55%,rgba(25,18,6,0) 100%);
pointer-events:none;
}
.itemBlock .itemBody{ border:1px solid #d9d3bb; border-radius:14px; padding:0 14px 16px; overflow:hidden; }
.itemBlock .itemBody > div:first-child{
margin:0 -14px 12px; height:210px; padding:56px 12px 12px; background:#ebe6d3;
display:flex; align-items:center; justify-content:center;
}
.itemBlock .itemBody > div:first-child .itemThumb{ margin:0; max-height:100%; width:auto; max-width:100%; object-fit:contain; border-radius:8px; }
.itemBlock .itemBody > p,.itemBlock .itemBody > div:not(:first-child){ text-align:center; }
@media only screen and (max-width:991px){
.itemBlock .itemHead{ right:0; }
}
.itemBlock .itemBody > div:first-child{ height:226px; padding-top:70px; }
/* ==========================================================================
Section / page headings v2: bold sans-serif with a solid accent bar on the left
(replaces the serif title + small gradient underline)
========================================================================== */
.rightSide h1,.rightSide .h1,.rightSide h2.h2,.rightSide > h2,.pageBody h1{
font-family:Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.2px; line-height:1.2; color:#241f0e;
padding:3px 0 3px 14px; border-left:5px solid var(--ah-brand); border-radius:2px; position:static;
}
.rightSide h1:after,.rightSide .h1:after,.rightSide h2.h2:after,.rightSide > h2:after,.pageBody h1:after{ content:none; display:none; }
.rightSide h1,.rightSide .h1,.pageBody h1{ font-size:30px !important; margin:8px 0 18px; border-left-width:6px; }
.rightSide h2.h2,.rightSide > h2{ font-size:22px !important; margin:24px 0 16px; }
.rightSide .col-md-6 > h2.h2,.rightSide .col-md-6 > h2{ margin-top:10px; font-size:20px !important; }
/* the "Back" button next to a page title keeps its place */
/* ==========================================================================
Card titles v3: solid dark-red title bar above the picture (no gradients / overlays)
========================================================================== */
/* --- store / member cards --- */
.prodBlock{ border-top:1px solid #d9d3bb; }
.prodBlock > h3,.prodBlock > .h3{
order:1; position:static; z-index:auto; margin:0; padding:12px 16px; min-height:68px; text-align:left !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
font-family:Arial,Helvetica,sans-serif; font-size:17px; font-weight:700; line-height:1.3; letter-spacing:.1px;
color:#fff; text-shadow:none; background:var(--ah-brand); background-image:none;
}
.prodBlock > h3 strong,.prodBlock > .h3 strong{ color:#fff; }
.prodBlock > p.imgBG,.prodBlock > p.imgBG2{ order:2; padding:12px; height:180px; }
.prodBlock > p.imgBG2{ height:140px; padding:10px; }
.rightSide .col-md-6 .prodBlock > h3,.rightSide .col-md-6 .prodBlock > .h3{ margin:0; padding:10px 12px; min-height:58px; font-size:15px; }
/* --- product cards --- */
.itemBlock .itemHead{
position:static; right:auto; z-index:auto; pointer-events:auto; margin:0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
min-height:68px; padding:12px 16px; text-align:left; font-size:17px; line-height:1.3; text-shadow:none;
color:#fff; background:var(--ah-brand); background-image:none; border:0; border-radius:14px 14px 0 0;
}
.itemBlock .itemBody{ border-radius:0 0 14px 14px; border-top:0; }
.itemBlock .itemBody > div:first-child{ height:200px; padding:14px 12px; margin:0 -14px 12px; }
@media only screen and (max-width:991px){ .itemBlock .itemHead{ right:auto; } }
/* centre the title text vertically in the bar (1-line and 2-line names look the same) */
.prodBlock > h3,.prodBlock > .h3,.itemBlock .itemHead{ display:flex; align-items:center; -webkit-line-clamp:unset; max-height:68px; box-sizing:border-box; }
.rightSide .col-md-6 .prodBlock > h3,.rightSide .col-md-6 .prodBlock > .h3{ max-height:58px; }
/* ==========================================================================
Card buttons: site brown (so they don't blend with the dark-red title bars)
========================================================================== */
.prodBlock .btn-danger,.itemBlock .btn-danger,.fpCard .btn-danger{
background-color:#7a6a3f; border-color:#5a4d2c; color:#fff !important; background-image:none;
}
.prodBlock .btn-danger:hover,.prodBlock .btn-danger:focus,
.itemBlock .btn-danger:hover,.itemBlock .btn-danger:focus,
.fpCard .btn-danger:hover,.fpCard .btn-danger:focus{
background-color:#4a4126; border-color:#2f2916; box-shadow:0 2px 8px rgba(40,34,10,.4);
}
/* ==========================================================================
Member store page (store.php)
========================================================================== */
.storeBanner{ padding:6px 0 0; }
.storeBanner img{ width:100%; height:auto; border-radius:12px; box-shadow:var(--ah-shadow); display:block; }
.storeHero{
display:flex; gap:22px; align-items:center; padding:20px 22px; margin:6px 0 18px;
background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px;
box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08);
}
.storeLogo{ flex:0 0 132px; width:132px; height:132px; border-radius:12px; background:#ebe6d3; padding:6px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px #d9d3bb; }
.storeLogo img{ max-width:100%; max-height:100%; border-radius:8px; object-fit:contain; }
.storeInfo{ flex:1 1 auto; min-width:0; }
.rightSide .storeHero h1{ border-left:0; padding:0; margin:0 0 8px; font-size:30px !important; line-height:1.15; overflow-wrap:anywhere; }
.storeMeta{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px; }
.storeMeta > span{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; background:#e6dfc4; color:#3a3420; border-radius:14px; font-size:13px; font-weight:600; }
.storeMeta .fa{ color:var(--ah-brand); }
.storeHero .btn-danger{ background-color:#7a6a3f; border-color:#5a4d2c; padding:7px 16px; white-space:normal; text-align:left; line-height:1.35; }
.storeHero .btn-danger:hover{ background-color:#4a4126; border-color:#2f2916; }
.storeAbout{
position:relative; max-height:9.6em; overflow:hidden; padding:16px 20px; margin:0 0 6px;
background:#f8f5ec; border:1px solid #d9d3bb; border-radius:12px; line-height:1.6; font-size:15px; color:#3a3626; overflow-wrap:anywhere;
}
.storeAbout:not(.open):after{ content:""; position:absolute; left:0; right:0; bottom:0; height:44px; background:linear-gradient(180deg,rgba(248,245,236,0),#f8f5ec); pointer-events:none; }
.storeAbout.open{ max-height:none; }
.storeAboutToggle{ display:inline-block; margin:2px 0 4px 6px; padding:3px 14px; border-radius:14px; background:#e6dfc4; font-size:13px; font-weight:700; }
.storeAboutToggle:hover{ background:#d9d0ac; text-decoration:none; }
.rightSide h2.h2 .storeCount{ display:inline-block; vertical-align:middle; margin-left:8px; padding:2px 11px; border-radius:14px; background:#e6dfc4; color:#3a3420; font-size:14px; font-weight:700; letter-spacing:0; }
@media only screen and (max-width:767px){
.storeHero{ flex-direction:column; align-items:flex-start; padding:16px; }
.storeLogo{ flex-basis:auto; }
.rightSide .storeHero h1{ font-size:24px !important; }
}
.storeHero,.storeInfo,.storeMeta,.storeAbout,.storeHero .btn-danger{ text-align:left; }
.storeAbout{ justify-content:flex-start; }
/* long product / store names (3 lines) stay inside the title bar */
.prodBlock > h3,.prodBlock > .h3,.itemBlock .itemHead{ font-size:16px; padding-top:8px; padding-bottom:8px; line-height:1.28; }
.storeAboutToggle{ display:table; margin-left:2px; }
/* ==========================================================================
Single product page (detail.php)
========================================================================== */
.productPage{ margin-top:6px; }
.productPage > [class*="col-md-"]{ padding-left:10px; padding-right:10px; }
/* ---- left: pictures + buttons ---- */
.productMedia > .row:first-child{ position:relative; margin:0 0 10px; padding:0; }
.productMedia > .row:first-child a.highslide{ display:block; }
.productMedia > .row:first-child img.img-thumbnail,.productMedia > .row:first-child > img{
float:none !important; display:block; width:100%; height:auto; padding:8px; background:#fff;
border:1px solid #d9d3bb; border-radius:14px; box-shadow:0 2px 6px rgba(40,34,10,.15), 0 6px 18px rgba(40,34,10,.1);
}
.productMedia .newIcon{ position:absolute; top:-10px; left:-10px; margin:0; z-index:5; }
.productMedia > p:empty{ display:none; margin:0; }
.productMedia > .row:nth-child(3){ margin:0 0 6px; padding:0; }
.itemThumbs{ float:none; display:inline-block; margin:0 6px 8px 0; vertical-align:top; }
.itemThumbs img{ width:62px; height:62px; max-height:none; margin:0; object-fit:cover; border:2px solid #fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .15s ease, box-shadow .15s ease; }
.itemThumbs a:hover img{ transform:translateY(-2px); box-shadow:0 5px 12px rgba(0,0,0,.35); }
#buttonsRow{ margin:12px 0 0; padding:0; }
#buttonsRow .btn{ display:block; width:100%; margin:0 0 8px !important; padding:10px 16px; font-size:15px; text-align:center; white-space:normal; }
#buttonsRow > div:not(.modal):not(.paymentForm),#buttonsRow > div:not(.modal):not(.paymentForm) > form{ display:block !important; width:100%; text-align:center; }
#buttonsRow .btn-danger{ background-color:var(--ah-brand); border-color:var(--ah-brand-dark); }
#buttonsRow .btn-danger:hover{ background-color:var(--ah-olive-dark); border-color:#000; }
#buttonsRow a.btn-default,#buttonsRow a[href*="make_offer"]{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
.productMedia > .row:last-child{ margin-top:8px; text-align:center; color:#6b6550; }
.productMedia > .row:last-child .badge{ background:#e6dfc4; color:#3a3420; }
/* ---- right: details card ---- */
.productInfo{
background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px;
padding:18px 22px 14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08);
width:calc(66.666% - 20px); margin:0 10px;
}
.productInfo .row{ margin:0; }
.productInfo .light_row{ background:#eee9d8; border:0; border-radius:10px; margin:0 0 8px; padding:12px 6px; }
.productInfo .light_row [class*="col-"]{ padding-left:14px; padding-right:14px; }
.productInfo .light_row strong{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#6b6550; font-weight:700; margin-right:6px; }
.productInfo .light_row a{ font-weight:700; font-size:16px; }
.productInfo .light_row .badge{ background:var(--ah-brand); color:#fff; font-size:16px; line-height:1.2; padding:4px 12px; border-radius:14px; }
.productInfo .light_row .badge strong{ color:#fff; font-size:inherit; text-transform:none; letter-spacing:0; margin:0; }
.productInfo .green2,.productInfo b.red2{ display:inline-block; padding:3px 14px; border-radius:14px; font-size:14px; }
.productInfo .green2{ background:#dcf0dc; color:#17621f; }
.productInfo b.red2{ background:#f6dada; color:#9a1212; }
.productInfo .topBottomMargin{ margin:14px 0; }
.productInfo p{ font-size:16px; line-height:1.75; color:#2c2819; margin:0 0 .8em; }
.productInfo .st_sharethis_large,.productInfo [class^="st_"]{ margin-right:2px; }
/* disclaimer: calm note instead of bright red text */
.productInfo .row.red2{ color:#5a4d2c; }
.productInfo .row.red2 p{ font-size:13px; line-height:1.5; margin:0; padding:10px 14px; background:#f1ecd9; border-left:4px solid #c8a64a; border-radius:8px; }
.productInfo .row.red2 .badge{ background:#7a6a3f; color:#fff; }
.productVideo{ width:100%; max-width:760px; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; box-shadow:var(--ah-shadow); }
@media only screen and (max-width:991px){
.productInfo{ width:auto; margin:10px 0 0; padding:16px; }
.productMedia > .row:first-child img.img-thumbnail{ max-width:520px; }
}
.productInfo .light_row{ display:flex; align-items:center; flex-wrap:wrap; }
.productInfo .light_row:before,.productInfo .light_row:after{ content:none; display:none; }
.productInfo .light_row > [class*="col-"]{ float:none; }
.productInfo .light_row > .col-md-6{ flex:1 1 50%; max-width:50%; }
.productInfo .light_row > .col-md-12{ flex:1 1 100%; }
.rightSide .row > p.col-md-1{ text-align:right; padding-right:0; }
.rightSide .row > p.col-md-1 .backLink{ margin-top:20px; }
/* status column: offers note as a pill, offer button fits inside the card */
.productInfo .light_row > .col-md-6:last-child{ min-width:0; }
.productInfo .light_row .btn{ display:block; width:100%; margin-top:10px; padding:8px 12px; font-size:14px; white-space:normal; background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
.productInfo .light_row .btn:hover{ background:#4a4126; border-color:#2f2916; }
.productInfo .light_row span.red2,.productInfo .light_row span.green2[style]{
display:inline-block; margin-left:6px; padding:2px 10px; border-radius:12px; font-size:11px !important; font-weight:700;
background:#fff0c9; color:#7a5a00; text-transform:uppercase; letter-spacing:.3px;
}
/* reCAPTCHA on the product page: centred, spaced, and shown above the Add to Cart button */
#buttonsRow > div:not(.modal):not(.paymentForm) > form{ display:flex !important; flex-direction:column; align-items:stretch; }
#buttonsRow > div:not(.modal):not(.paymentForm) > form .Captcha{
order:-1; display:flex; justify-content:center; align-items:center; position:static !important;
margin:0 0 10px; padding:10px 0 !important; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:12px; overflow:hidden;
}
#buttonsRow > div:not(.modal):not(.paymentForm) > form .Captcha > div,#buttonsRow > div:not(.modal):not(.paymentForm) > form .Captcha iframe{ max-width:100%; }
#buttonsRow > div:not(.modal):not(.paymentForm) > form .topBottomMargin{ margin-top:0 !important; }
/* ==========================================================================
Image lightbox (js/lightbox.js) + zoom hint on the product photo
========================================================================== */
a.productZoom{ position:relative; display:block; cursor:zoom-in; }
a.productZoom:after{
content:"\f00e"; font-family:FontAwesome; position:absolute; right:16px; bottom:16px; width:34px; height:34px; line-height:34px;
text-align:center; border-radius:50%; background:rgba(25,18,6,.72); color:#fff; font-size:16px; transition:background .15s ease, transform .15s ease;
}
a.productZoom:hover:after{ background:var(--ah-brand); transform:scale(1.08); }
.itemThumbs a{ cursor:zoom-in; display:block; }
html.ahLb-lock,html.ahLb-lock body{ overflow:hidden; }
.ahLb{ display:none; position:fixed; inset:0; z-index:100000; background:rgba(15,12,6,.97); color:#fff; font-family:Arial,Helvetica,sans-serif; }
.ahLb.ahLb-open{ display:block; animation:ahLbIn .18s ease; }
@keyframes ahLbIn{ from{ opacity:0; } to{ opacity:1; } }
.ahLb-stage{ position:absolute; top:0; left:0; right:0; bottom:150px; display:flex; align-items:center; justify-content:center; padding:56px 72px 8px; overflow:hidden; }
.ahLb-img{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.6); cursor:zoom-in; transition:opacity .15s ease; background:#222; }
.ahLb-loading .ahLb-img{ opacity:.35; }
.ahLb-zoomed .ahLb-stage{ overflow:auto; align-items:flex-start; justify-content:flex-start; padding:56px 20px 8px; }
.ahLb-zoomed .ahLb-img{ max-width:none; max-height:none; cursor:zoom-out; margin:auto; }
.ahLb-close{ position:absolute; top:10px; right:14px; z-index:3; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:40px; cursor:pointer; }
.ahLb-nav{ position:absolute; top:calc(50% - 75px); z-index:3; width:52px; height:72px; margin-top:-36px; border:0; background:rgba(255,255,255,.1); color:#fff; font-size:46px; line-height:66px; cursor:pointer; border-radius:10px; transition:background .15s ease; }
.ahLb-prev{ left:12px; }
.ahLb-next{ right:12px; }
.ahLb-close:hover,.ahLb-nav:hover{ background:rgba(255,255,255,.28); }
.ahLb-bar{ position:absolute; left:0; right:0; bottom:92px; padding:6px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:15px; }
.ahLb-cap{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ahLb-cnt{ color:#cfc9b3; font-size:13px; white-space:nowrap; }
.ahLb-strip{ position:absolute; left:0; right:0; bottom:0; height:84px; padding:8px 16px; display:flex; gap:8px; justify-content:center; overflow-x:auto; background:rgba(0,0,0,.35); }
.ahLb-strip button{ flex:0 0 auto; width:68px; height:68px; padding:0; border:2px solid transparent; border-radius:8px; background:#111; opacity:.6; cursor:pointer; overflow:hidden; transition:opacity .15s ease, border-color .15s ease; }
.ahLb-strip button img{ width:100%; height:100%; object-fit:cover; display:block; }
.ahLb-strip button:hover{ opacity:1; }
.ahLb-strip button.on{ opacity:1; border-color:var(--ah-gold); }
@media only screen and (max-width:767px){
.ahLb-stage{ padding:52px 8px 8px; bottom:140px; }
.ahLb-nav{ width:40px; height:60px; font-size:36px; line-height:54px; }
.ahLb-prev{ left:4px; }
.ahLb-next{ right:4px; }
.ahLb-cap{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){ .ahLb.ahLb-open{ animation:none; } }
/* ==========================================================================
Card links: picture and title are clickable (same destination as the button)
========================================================================== */
a.cardLink{ text-decoration:none !important; }
.itemHead a.cardLink,.prodBlock > h3 a.cardLink,.prodBlock > h3 strong a.cardLink{ color:#fff !important; display:block; }
.itemHead a.cardLink:hover,.prodBlock > h3 a.cardLink:hover{ text-decoration:underline !important; }
.itemBody a.cardLink,.prodBlock > p a.cardLink{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:pointer; }
.itemBody > div:first-child a.cardLink{ width:auto; height:100%; max-width:100%; }
.itemBlock .itemThumb,.prodBlock > p img{ transition:transform .25s ease, box-shadow .25s ease; }
.itemBlock:hover .itemThumb,.prodBlock:hover > p img{ transform:scale(1.03); }
a.cardLink:focus-visible{ outline:3px solid #e0a800; outline-offset:2px; }
/* card title hover: no underline - the bar lightens and a small arrow slides in */
a.cardLink,a.cardLink:hover,a.cardLink:focus,.itemHead a.cardLink:hover,.prodBlock > h3 a.cardLink:hover{ text-decoration:none !important; }
.itemBlock .itemHead,.prodBlock > h3{ transition:background-color .18s ease; }
.itemBlock .itemHead a.cardLink,.prodBlock > h3 a.cardLink{ position:relative; padding-right:22px; }
.itemBlock .itemHead a.cardLink:after,.prodBlock > h3 a.cardLink:after{
content:"\f105"; font-family:FontAwesome; position:absolute; right:2px; top:50%; margin-top:-.55em; font-size:20px; line-height:1;
opacity:0; transform:translateX(-8px); transition:opacity .18s ease, transform .18s ease;
}
.itemBlock:hover .itemHead,.prodBlock:hover > h3,.itemBlock .itemHead:hover,.prodBlock > h3:hover{ background-color:#7d0d0d; }
.itemBlock:hover .itemHead a.cardLink:after,.prodBlock:hover > h3 a.cardLink:after,
.itemBlock .itemHead a.cardLink:focus:after,.prodBlock > h3 a.cardLink:focus:after{ opacity:1; transform:translateX(0); }
/* ---- product page: robust two-column layout + modal safety ---- */
@media only screen and (min-width:992px){
.productPage{ display:flex; flex-wrap:nowrap; align-items:flex-start; }
.productPage:before,.productPage:after{ content:none; display:none; }
.productPage > .productMedia{ float:none; flex:0 0 33.3333%; max-width:33.3333%; }
.productPage > .productInfo{ float:none; flex:1 1 0; width:auto; min-width:0; margin:0 10px; }
}
/* the "paying by PayPal?" pop-up stays a normal Bootstrap modal (hidden until opened) */
#buttonsRow .modal .btn{ display:inline-block; width:auto; margin:4px 6px 4px 0 !important; }
#buttonsRow .modal form{ display:block; }
#buttonsRow .modal .Captcha{ display:block; background:none; border:0; padding:12px 0 0 !important; }
/* zoom icon only on the big photo, not on the small thumbnails */
.itemThumbs a.productZoom:after{ content:none; display:none; }
/* ==========================================================================
Modern modal dialog (js/ah-modal.js) - replaces the Highslide iframe pop-ups
========================================================================== */
html.ahMd-lock,html.ahMd-lock body{ overflow:hidden; }
.ahMd{ display:none; position:fixed; inset:0; z-index:99990; align-items:center; justify-content:center; padding:18px; background:rgba(20,16,6,.62); backdrop-filter:blur(2px); font-family:Arial,Helvetica,sans-serif; }
.ahMd.ahMd-open{ display:flex; animation:ahMdFade .18s ease; }
@keyframes ahMdFade{ from{ opacity:0; } to{ opacity:1; } }
.ahMd-box{
width:100%; max-width:640px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
background:#f8f5ec; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.55); animation:ahMdRise .22s ease;
}
@keyframes ahMdRise{ from{ transform:translateY(14px) scale(.98); } to{ transform:none; } }
.ahMd-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 14px 22px; background:var(--ah-brand,#640909); color:#fff; }
.ahMd-title{ margin:0; font-family:Arial,Helvetica,sans-serif; font-size:19px !important; font-weight:700; line-height:1.25; color:#fff; border:0; padding:0; }
.ahMd-close{ flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:34px; cursor:pointer; transition:background .15s ease; }
.ahMd-close:hover{ background:rgba(255,255,255,.34); }
.ahMd-body{ position:relative; flex:1 1 auto; min-height:120px; background:#f8f5ec; overflow:hidden; }
.ahMd-frame{ display:block; width:100%; height:420px; border:0; background:#f8f5ec; }
.ahMd-spin{ display:none; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border:4px solid #d9d3bb; border-top-color:var(--ah-brand,#640909); border-radius:50%; animation:ahMdSpin .8s linear infinite; }
.ahMd-loading .ahMd-spin{ display:block; }
.ahMd-loading .ahMd-frame{ opacity:0; }
@keyframes ahMdSpin{ to{ transform:rotate(360deg); } }
@media only screen and (max-width:600px){
.ahMd{ padding:0; align-items:flex-end; }
.ahMd-box{ max-width:none !important; max-height:94vh; border-radius:16px 16px 0 0; }
}
@media (prefers-reduced-motion:reduce){ .ahMd.ahMd-open,.ahMd-box{ animation:none; } }
/* ---- the pages shown inside the dialog (make_offer, rent spot, ...): clean, no site chrome ---- */
body.inModal{ background:#f8f5ec !important; padding:16px 22px 22px; }
body.inModal .container,body.inModal .container-fluid{ width:auto; max-width:none; padding:0; }
body.inModal h1,body.inModal .h1{ display:none; }
body.inModal label{ font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.3px; color:#6b6550; }
body.inModal .btn,body.inModal input[type=submit],body.inModal input[type=button]{ border-radius:20px; }
body.inModal center{ display:block; text-align:left; }
body.inModal h2{ font-size:15px !important; font-weight:700; color:#6b6550; margin:0 0 14px !important; padding:0 0 10px !important; border-bottom:1px solid #d9d3bb; text-align:left; }
body.inModal .row{ margin-left:-8px !important; margin-right:-8px !important; padding:4px 0; }
body.inModal .form-control{ height:40px; border-radius:8px; }
body.inModal textarea.form-control{ height:auto; }
body.inModal .btn-danger{ background:var(--ah-brand,#640909); border-color:#470606; padding:9px 26px; font-weight:700; }
/* ==========================================================================
Shopping cart (cart.php)
========================================================================== */
.cartList{ background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.cartHead,.cartRow{ display:grid; grid-template-columns:84px minmax(0,1fr) 110px 70px 110px 110px; align-items:center; gap:0 14px; padding:0 18px; }
.cartHead{ min-height:44px; background:#e9e4cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.cartHead .cH-item{ grid-column:1 / 3; }
.cartHead .cH-price,.cartHead .cH-qty,.cartHead .cH-total{ text-align:center; }
.cartRow{ padding-top:14px; padding-bottom:14px; border-top:1px solid #e3ddc6; transition:background-color .15s ease; }
.cartHead + .cartRow{ border-top:0; }
.cartRow:hover{ background:#f1ecda; }
.cR-img{ display:block; width:84px; height:84px; border-radius:10px; background:#ebe6d3; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.cR-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cR-name{ min-width:0; font-size:16px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.cR-name a{ color:var(--ah-ink) !important; }
.cR-name a:hover{ color:var(--ah-brand) !important; text-decoration:underline; }
.cR-price,.cR-qty,.cR-total{ text-align:center; font-size:15px; }
.cR-total{ font-weight:700; font-size:17px; color:var(--ah-brand); }
.cR-act{ text-align:right; }
.cartRemove{ display:inline-block; padding:6px 12px; border-radius:16px; background:#ece6d0; color:#6b3a2a !important; font-size:13px; font-weight:600; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.cartRemove:hover{ background:#9a1212; color:#fff !important; text-decoration:none; }
.cartSummary{ margin:18px 0 8px; margin-left:auto; max-width:460px; padding:20px 22px; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.cS-line,.cS-total{ display:flex; justify-content:space-between; align-items:baseline; }
.cS-line{ font-size:14px; color:#6b6550; padding-bottom:10px; }
.cS-total{ padding:12px 0 16px; border-top:1px solid #e3ddc6; font-size:18px; }
.cS-total strong{ font-size:28px; color:var(--ah-brand); }
.cS-captcha{ display:flex; justify-content:center; margin:0 0 14px; padding:0 !important; }
.cS-actions{ display:flex; flex-direction:column; gap:10px; }
.cS-checkout{ width:100%; padding:12px 16px; font-size:17px; border-radius:24px; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.cS-checkout:hover{ background:var(--ah-olive-dark); border-color:#000; }
.cS-continue{ width:100%; padding:10px 16px; border-radius:24px; background:#e6dfc4; border:1px solid #cfc7a5; color:#3a3420 !important; }
.cS-continue:hover{ background:#d9d0ac; }
.cS-empty{ text-align:center; font-size:13px; color:#6b6550 !important; }
.cS-empty:hover{ color:#9a1212 !important; text-decoration:underline; }
.cartEmpty{ text-align:center; padding:48px 24px; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.cartEmptyIcon{ font-size:56px; color:#c8bf9b; }
.cartEmpty h2{ margin:14px 0 6px; text-align:center; }
.cartEmpty p{ margin:0 0 18px; color:#6b6550; text-align:center; }
@media only screen and (max-width:767px){
.cartHead{ display:none; }
.cartRow{ grid-template-columns:84px minmax(0,1fr); grid-template-areas:"img name" "img price" "qty qty" "total total" "act act"; gap:4px 14px; padding:16px; }
.cR-img{ grid-area:img; }
.cR-name{ grid-area:name; }
.cR-price{ grid-area:price; text-align:left; }
.cR-qty,.cR-total{ text-align:left; }
.cR-qty{ grid-area:qty; }
.cR-total{ grid-area:total; }
.cR-act{ grid-area:act; text-align:left; margin-top:6px; }
.cR-price:before,.cR-qty:before,.cR-total:before{ content:attr(data-label) ": "; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#6b6550; }
.cartSummary{ max-width:none; }
}
/* ==========================================================================
Checkout (buy.php)
========================================================================== */
.ckLayout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
.ckForm{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ckCard,.ckSummary{ background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px; padding:20px 22px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.ckCard{ border-top:4px solid var(--ah-brand); }
.rightSide h2.ckTitle{ display:flex; align-items:center; gap:10px; margin:0 0 16px !important; padding:0; border:0; font-size:19px !important; font-weight:700; color:#241f0e; }
.ckNum{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ah-brand); color:#fff; font-size:15px; line-height:30px; text-align:center; }
.ckGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.ckField{ min-width:0; }
.ckField label{ display:block; margin:0 0 5px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#6b6550; }
.ckOpt{ text-transform:none; font-weight:400; letter-spacing:0; }
.ckFull{ grid-column:1 / -1; }
.ckField .form-control{ width:100%; }
@media only screen and (min-width:600px){
.ckCity,.ckState,.ckZip{ grid-column:auto; }
.ckGrid:has(.ckCity){ grid-template-columns:2fr 1fr 1fr; }
}
.ckNote{ margin:14px 0 0; font-size:13px; line-height:1.5; color:#6b6550; }
.ckCaptcha{ display:flex; justify-content:flex-start; padding:0 !important; margin:0; }
.ckSubmit{ width:100%; margin-top:16px; padding:13px 18px; font-size:18px; border-radius:26px; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.ckSubmit:hover{ background:var(--ah-olive-dark); border-color:#000; }
.ckSummary{ position:sticky; top:14px; }
.ckItem{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid #e3ddc6; }
.ckSummary .ckTitle + .ckItem{ border-top:0; }
.ckItem img{ width:56px; height:56px; object-fit:cover; border-radius:8px; background:#ebe6d3; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ckItemName{ font-size:14px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.ckItemQty{ display:block; margin-top:2px; font-size:12px; font-weight:400; color:#6b6550; }
.ckItemPrice{ font-size:14px; font-weight:700; color:var(--ah-brand); white-space:nowrap; }
.ckTotal{ display:flex; justify-content:space-between; align-items:baseline; margin-top:6px; padding-top:14px; border-top:2px solid #d9d3bb; font-size:16px; }
.ckTotal strong{ font-size:26px; color:var(--ah-brand); }
.ckEdit{ display:inline-block; margin-top:12px; font-size:13px; font-weight:600; }
@media only screen and (max-width:991px){
.ckLayout{ grid-template-columns:1fr; }
.ckSummary{ position:static; order:-1; }
}
@media only screen and (max-width:599px){
.ckGrid{ grid-template-columns:1fr; }
.ckCard,.ckSummary{ padding:16px; }
}
.rightSide h2.ckTitle{ font-family:Arial,Helvetica,sans-serif; }
.ckItemName{ text-align:left; }
.ckItemPrice{ text-align:right; }
/* ==========================================================================
Footer
========================================================================== */
.siteFooter{ margin:30px 0 0 !important; padding:0 !important; background:linear-gradient(180deg,#6d0b0b 0%,#4c0707 100%); border:0; border-top:4px solid #c8a64a; border-radius:14px 14px 0 0; color:#e8cfcf; overflow:hidden; }
.ftCols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; padding:34px 36px 26px; text-align:left; }
.ftLogo{ font-family:Georgia,"Times New Roman",serif; font-size:26px; font-weight:700; color:#fff; line-height:1.15; }
.ftLogo span{ color:#e0b955; }
.ftLogo em{ display:block; margin-top:2px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-style:normal; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#d8b8b8; }
.ftBrand p{ margin:12px 0 16px; font-size:14px; line-height:1.6; color:#e0c4c4; text-align:left; }
.ftBtn{ display:inline-block; padding:8px 18px; border-radius:20px; background:#e0b955; color:#3b1b00 !important; font-weight:700; font-size:13px; text-decoration:none !important; transition:background .15s ease; }
.ftBtn:hover{ background:#f0cd73; }
.siteFooter h3{ margin:4px 0 14px; padding:0 0 10px; border-bottom:1px solid rgba(255,255,255,.18); font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#e0b955; text-align:left; }
.siteFooter .ftCol ul{ display:block; list-style:none; margin:0; padding:0; }
.siteFooter .ftCol ul li{ float:none; display:block; padding:0; margin:0 0 9px; border:0; font-size:14px; }
.siteFooter .ftCol ul li a{ color:#ecd6d6 !important; text-decoration:none; transition:color .15s ease, padding-left .15s ease; }
.siteFooter .ftCol ul li a:hover{ color:#fff !important; padding-left:4px; text-decoration:none; }
.ftBottom{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 36px; background:rgba(0,0,0,.22); font-size:13px; color:#d6b8b8; }
.siteFooter .ftTop{ color:#ecd6d6 !important; font-weight:600; text-decoration:none; }
.siteFooter .ftTop:hover{ color:#fff !important; text-decoration:underline; }
@media only screen and (max-width:991px){
.ftCols{ grid-template-columns:1fr 1fr; padding:26px 22px 18px; }
.ftBrand{ grid-column:1 / -1; }
.ftBottom{ padding:14px 22px; }
}
@media only screen and (max-width:520px){
.ftCols{ grid-template-columns:1fr; gap:22px; }
.ftBottom{ flex-direction:column; align-items:flex-start; }
}
/* ==========================================================================
Footer v2: background spans the whole page width, content stays in the 1150px container
========================================================================== */
.siteFooter{ display:block; width:100%; margin:34px 0 0 !important; border-radius:0; border-left:0; border-right:0; }
.siteFooter .ftCols{ max-width:1150px; margin:0 auto; padding:40px 18px 30px; }
.siteFooter .ftBottom{ padding-left:max(18px, calc((100% - 1150px) / 2 + 18px)); padding-right:max(18px, calc((100% - 1150px) / 2 + 18px)); }
@media only screen and (max-width:991px){
.siteFooter .ftCols{ padding:28px 18px 18px; }
.siteFooter .ftBottom{ padding-left:18px; padding-right:18px; }
}
/* full-bleed footer that works no matter how deeply it is nested: stretch to the viewport edges */
.siteFooter{ position:relative; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw) !important; box-sizing:border-box; }
html,body{ overflow-x:clip; }
/* ==========================================================================
Header v2: the dark banner band spans the whole page width, content stays in the container
========================================================================== */
.mainContainer > .row.zeroMargin:nth-child(2){
position:relative; background:#000501;
box-shadow:0 0 0 100vmax #000501; /* paint the band edge to edge */
clip-path:inset(0 -100vmax); /* ...but only sideways, not above/below the band */
}
/* thin gold rule along the bottom of the band, also edge to edge */
.mainContainer > .row.zeroMargin:nth-child(2):after{
content:"" !important; display:block !important; position:absolute; left:50%; bottom:0; width:100vw; margin-left:-50vw; height:3px;
background:linear-gradient(90deg,rgba(200,166,74,0),#c8a64a 20%,#c8a64a 80%,rgba(200,166,74,0)); pointer-events:none; z-index:2;
}
/* blend the banner picture into the dark band instead of ending in a hard edge */
.mainContainer > .row.zeroMargin:nth-child(2) > .zeroRightPad img{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
}
@media only screen and (max-width:991px){
.mainContainer > .row.zeroMargin:nth-child(2) > .zeroRightPad img{ -webkit-mask-image:none; mask-image:none; }
}
/* ==========================================================================
Home page - light polish only (spacing, list, "Just Posted" strip)
========================================================================== */
/* intro text: comfortable measure and line height */
.rightSide > .row.zeroPadding > p{ font-size:16px; line-height:1.7; color:#2c2819; }
/* the "relics" list: tidy columns, brand-coloured bullets */
.rightSide .row.zeroPadding > .row > .col-sm-3 > ul,
.rightSide .row.zeroPadding > .row > .col-sm-6 > ul{ margin:4px 0 8px; padding-left:22px; list-style:none; }
.rightSide .row.zeroPadding > .row > .col-sm-3 > ul li,
.rightSide .row.zeroPadding > .row > .col-sm-6 > ul li{ position:relative; margin:0 0 5px; font-size:15px; }
.rightSide .row.zeroPadding > .row > .col-sm-3 > ul li:before,
.rightSide .row.zeroPadding > .row > .col-sm-6 > ul li:before{ content:""; position:absolute; left:-16px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--ah-brand); }
/* "Just Posted" strip */
.rightSide .block{ background:#e9e4cf; border:1px solid #d1caa9; border-radius:12px; box-shadow:inset 0 1px 3px rgba(40,34,10,.15); }
#mycrawler2 img{ border-radius:6px; transition:transform .15s ease, box-shadow .15s ease; }
#mycrawler2 a:hover img{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.3); }
/* a little air between the home sections */
.rightSide .row.zeroPadding + .row.zeroPadding{ margin-top:6px; }
.rightSide .block + .row,.rightSide .block ~ .row{ margin-top:6px; }
/* "Sell your collection" image */
.rightSide .col-md-6.leftSide a img{ border-radius:12px; box-shadow:0 2px 8px rgba(40,34,10,.25); }
/* ==========================================================================
"Just Posted" scroller (js/ah-marquee.js)
========================================================================== */
.rightSide .block{ padding:10px 0 !important; overflow:hidden; }
.marquee{ position:relative; overflow:hidden; white-space:nowrap; }
.marquee.mqReady{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mqTrack{ display:flex; align-items:center; width:max-content; gap:10px; padding:0 5px; animation:ahMarq 90s linear infinite; will-change:transform; }
.marquee:hover .mqTrack,.marquee:focus-within .mqTrack{ animation-play-state:paused; }
@keyframes ahMarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mqTrack a{ flex:0 0 auto; display:block; line-height:0; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .15s ease, box-shadow .15s ease; }
.mqTrack a img{ display:block !important; height:84px !important; width:auto; padding:0 !important; border-radius:0; }
.mqTrack a:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 6px 14px rgba(0,0,0,.4); position:relative; z-index:2; }
.mqTrack a:focus-visible{ outline:3px solid #e0a800; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
.mqTrack{ animation:none; }
.marquee{ overflow-x:auto; }
.marquee.mqReady{ -webkit-mask-image:none; mask-image:none; }
}
/* ==========================================================================
Search / filter card (includes/search.php)
========================================================================== */
.rightSide .searchFilters{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin:0 0 16px !important; padding:14px !important;
background:#f1ecd9; border:1px solid #d9d3bb; border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.1);
}
.searchFilters:before,.searchFilters:after{ content:none !important; display:none !important; }
.searchFilters > .row{ display:contents; }
.searchFilters > .row > [class*="col-"]{ float:none; width:auto; padding:0 !important; min-width:0; }
.searchFilters form{ margin:0; }
.searchFilters .form-control,.searchFilters select.form-control{ height:44px; font-size:15px; border:1px solid #c9c2a2; border-radius:10px; background-color:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.05); }
.searchFilters select.form-control{
-webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer; color:#3a3626;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center;
}
.searchFilters select.form-control:hover,.searchFilters input.form-control:hover{ border-color:#a89f78; }
.searchFilters .input-group{ display:flex; width:100%; }
.searchFilters .input-group .form-control{ border-radius:10px 0 0 10px !important; flex:1 1 auto; }
.searchFilters .input-group-btn{ width:auto; display:block; }
.searchFilters .searchBtn{ height:44px; width:50px; margin:0 !important; border:1px solid #5a4d2c !important; border-radius:0 10px 10px 0 !important; background:#7a6a3f !important; color:#fff; font-size:16px; box-shadow:none; }
.searchFilters .searchBtn:hover{ background:#4a4126 !important; }
@media only screen and (max-width:767px){
.rightSide .searchFilters{ grid-template-columns:1fr; padding:12px !important; }
}
.searchFilters > .row:before,.searchFilters > .row:after{ content:none !important; display:none !important; }
/* ==========================================================================
Sidebar: cart bar, login form and "My Account" menu (includes/left.php)
========================================================================== */
/* cart bar */
.leftSide > table > tbody > tr:first-child > td.sideRec{ padding:0; border-radius:12px; background:#5f5b44; }
.leftSide > table > tbody > tr:first-child > td.sideRec a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; color:#fff !important; font-size:15px; border-radius:12px; transition:background-color .15s ease; }
.leftSide > table > tbody > tr:first-child > td.sideRec a:before{ content:"\f07a"; font-family:FontAwesome; font-size:17px; color:var(--ah-gold); }
.leftSide > table > tbody > tr:first-child > td.sideRec a:hover{ background:#4a4731; text-decoration:none; }
/* login panel */
.leftSide td.sideRec{ padding:16px 16px 14px; }
.leftSide td.sideRec .yellow_heading{ display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:0 0 10px !important; border-bottom:1px solid rgba(255,255,255,.18); font-size:14px; letter-spacing:1px; font-weight:700; color:var(--ah-gold); }
.leftSide td.sideRec td.yellow_heading:before,.leftSide td.sideRec div.yellow_heading:before{ content:"\f023"; font-family:FontAwesome; font-size:15px; }
.leftSide td.sideRec div.yellow_heading:before{ content:"\f007"; }
.loginLbl{ display:block; margin:8px 0 4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#d8d3b8; }
.leftSide td.sideRec .form-control{ width:100%; height:42px; padding:8px 12px; border:1px solid #8f8a6c; border-radius:9px; background:#fffdf6; color:#2c2819; font-size:15px; box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.leftSide td.sideRec .form-control:focus{ border-color:var(--ah-gold); box-shadow:0 0 0 3px rgba(255,223,8,.28); background:#fff; }
.loginBtn{ width:100%; margin:12px 0 4px; padding:10px 16px; font-size:15px; font-weight:700; border-radius:22px; background:var(--ah-brand); border-color:#2f0301; letter-spacing:.3px; }
.loginBtn:hover{ background:#8a1010; border-color:#000; }
.forgotLink{ display:inline-block; margin-top:6px; font-size:13px; color:#d8d3b8 !important; text-decoration:underline; text-underline-offset:3px; }
.forgotLink:hover{ color:#fff !important; }
.leftSide td.sideRec td{ border:0; }
/* logged-in: note callout, greeting, menu */
.acctNote{ margin:0 0 14px; padding:10px 12px; font-size:13px; line-height:1.55; color:#f3e9a8; background:rgba(0,0,0,.18); border-left:4px solid var(--ah-gold); border-radius:8px; }
.acctNote strong{ color:#fff; }
.leftSide td.sideRec hr{ display:none; }
.acctHello{ margin:0 0 4px; font-size:15px; color:#fff; }
.acctHello strong{ color:var(--ah-gold); }
.leftSide td.sideRec .loginLinks{ width:100%; border-collapse:separate; border-spacing:0 2px; }
.loginLinks td{ padding:0 !important; border-radius:8px; }
.loginLinks td:hover{ background:rgba(255,255,255,.12); border-radius:8px; }
.loginLinks td a{ display:flex; align-items:center; gap:10px; margin:0; padding:9px 10px; border:0; font-size:14px; color:#fff !important; text-decoration:none; }
.loginLinks td a .fa{ width:18px; text-align:center; color:var(--ah-gold); font-size:15px; }
.loginLinks td:hover a{ text-decoration:none; }
.loginLinks tr:last-child td{ margin-top:6px; }
.loginLinks tr:last-child td a{ margin-top:8px; padding:9px 10px; border-top:1px solid rgba(255,255,255,.18); border-radius:0 0 8px 8px; color:#ffb9b9 !important; }
.loginLinks tr:last-child td a .fa{ color:#ff9a9a; }
.loginLinks tr:last-child td:hover{ background:rgba(154,18,18,.5); }
.loginLinks tr:last-child td:hover a{ color:#fff !important; }
/* cart bar: keep the sentence as normal inline text with the icon in front */
.leftSide > table > tbody > tr:first-child > td.sideRec a{ display:block; text-align:center; }
.leftSide > table > tbody > tr:first-child > td.sideRec a:before{ display:inline-block; margin-right:8px; }
/* tighter menu rows */
.loginLinks td a{ padding:6px 10px; }
.loginLinks td{ height:auto !important; }
.loginLinks tr:last-child td a{ padding:8px 10px; margin-top:6px; }
/* login button: gold on the dark olive panel (the dark red one disappeared into it) */
.loginBtn,.loginBtn:focus{ background:#e0b955 !important; border-color:#b8923a !important; color:#2b1a00 !important; box-shadow:0 2px 0 #9c7a2b, 0 3px 8px rgba(0,0,0,.3); text-shadow:none; }
.loginBtn:hover{ background:#f0cd73 !important; border-color:#c9a244 !important; color:#2b1a00 !important; transform:translateY(-1px); box-shadow:0 3px 0 #9c7a2b, 0 6px 12px rgba(0,0,0,.35); }
.loginBtn:active{ transform:translateY(1px); box-shadow:0 1px 0 #9c7a2b; }
/* forgot-password link: no underline, quiet and centred under the button */
.leftSide td.sideRec .forgotLink{ display:block; margin-top:10px; text-align:center; font-size:13px; color:#cfc9ad !important; text-decoration:none !important; transition:color .15s ease; }
.leftSide td.sideRec .forgotLink:hover,.leftSide td.sideRec .forgotLink:focus{ color:var(--ah-gold) !important; text-decoration:none !important; }
/* ==========================================================================
My Account pages: data tables, tabs, buttons, forms
========================================================================== */
/* ---- data tables (gridTable / table) ---- */
.rightSide table.gridTable{ width:100%; border-collapse:separate; border-spacing:0; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.rightSide table.gridTable td{ border:0; border-bottom:1px solid #e6e0c9; padding:10px 8px; vertical-align:middle; font-size:14px; }
.rightSide table.gridTable td.dark_row{ background:#5f5b44; color:#fff; border:0; padding:13px 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.rightSide table.gridTable td.dark_row *{ font-size:inherit; font-weight:inherit; }
.rightSide table.gridTable td.light_row,.rightSide table.gridTable td.light_row2{ background:#f8f5ec; font-size:14px; }
.rightSide table.gridTable tr:nth-child(even) td.light_row,.rightSide table.gridTable tr:nth-child(even) td.light_row2{ background:#f3efe0; }
.rightSide table.gridTable tr:hover td.light_row,.rightSide table.gridTable tr:hover td.light_row2{ background:#ebe5cd; }
.rightSide table.gridTable tr:last-child td{ border-bottom:0; }
.rightSide table.gridTable td img{ border-radius:8px; }
.rightSide table.gridTable a{ font-weight:600; }
.rightSide table.gridTable td a.btn,.rightSide table.gridTable td .btn{ border-radius:14px; }
.rightSide table.gridTable .btn-default,.rightSide table.gridTable .btn-xs{ background:#ece6d0; border:1px solid #cfc7a5; color:#3a3420 !important; font-weight:700; padding:4px 10px; font-size:12px; line-height:1.3; }
.rightSide table.gridTable .btn-default:hover,.rightSide table.gridTable .btn-xs:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; text-decoration:none; }
.rightSide table.gridTable .btn-small{ font-size:12px; font-weight:700; color:#9a1212 !important; }
.rightSide table.gridTable input[type=checkbox]{ width:18px; height:18px; accent-color:var(--ah-brand); cursor:pointer; }
.rightSide .label{ display:inline-block; padding:4px 11px; border-radius:12px; font-size:12px; font-weight:700; letter-spacing:.2px; }
.rightSide .label-success{ background:#dcf0dc; color:#17621f; }
.rightSide .label-danger{ background:#f6dada; color:#9a1212; }
.rightSide .label-warning{ background:#fff0c9; color:#7a5a00; }
/* ---- toolbar buttons (Select All / Select None / Delete Selected, Update ...) ---- */
.rightSide .button2{ background:#7a6a3f; background-image:none; border:1px solid #5a4d2c; border-radius:18px; box-shadow:none; padding:7px 16px; font-size:13px; font-weight:700; color:#fff; }
.rightSide .button2:hover{ background:#4a4126; filter:none; box-shadow:0 2px 8px rgba(40,34,10,.35); }
.rightSide .button2[value*="Delete"]{ background:#9a1212; border-color:#640909; }
.rightSide .button2[value*="Delete"]:hover{ background:#640909; }
.floatingBtn{ right:24px !important; bottom:24px !important; opacity:1 !important; padding:12px 28px !important; font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
/* ---- tabs (Update Profile / Banner / Password / URL / PayPal / eBay) ---- */
.panelSubLinks{ padding:0 0 4px; margin:2px 0 18px; border-bottom:1px solid #d9d3bb; }
.panelSubLinks ul{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.panelSubLinks ul li{ float:none; margin:0; position:relative; }
.panelSubLinks ul li a{ display:block; padding:8px 16px; border:1px solid #d9d3bb; border-bottom:0; border-radius:10px 10px 0 0; background:#ece6d0; font-size:14px; font-weight:600; color:#3a3420 !important; text-decoration:none; transition:background .15s ease; }
.panelSubLinks ul li a:hover{ background:#e0d8b8; }
.panelSubLinks .selected a,.panelSubLinks ul li.selected a:hover{ background:#640909; border-color:#640909; color:#fff !important; }
/* ---- forms on account pages ---- */
.myform label{ font-weight:700; color:#3a3420; }
.myform .form-control,.myform select,.myform textarea,.myform input[type=text],.myform input[type=password],.myform input[type=file]{ border:1px solid #c9c2a2; border-radius:9px; background:#fffdf6; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
.myform input[type=file]{ padding:6px; background:#fff; }
.myform .dark_row.dark_head{ border-radius:10px; margin:18px 0 8px; font-size:15px; }
.myform input[type=submit],.myform .btn-danger{ border-radius:22px; padding:9px 26px; font-weight:700; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.myform input[type=submit]:hover,.myform .btn-danger:hover{ background:var(--ah-olive-dark); border-color:#000; }
.myform input[type=checkbox]{ accent-color:var(--ah-brand); width:16px; height:16px; vertical-align:-2px; margin-right:4px; }
.myform .input-group-addon{ background:#e6dfc4; border:1px solid #c9c2a2; border-radius:9px 0 0 9px; font-weight:700; color:#3a3420; }
/* bulk update: don't clip prices */
.rightSide table.gridTable input.form-control[name^="price"],.rightSide table.gridTable input.form-control[name^="sOrder"]{ min-width:72px; padding:6px 8px; }
.rightSide table.gridTable select.form-control{ padding-left:8px; }
.rightSide table.gridTable{ border-spacing:0 !important; }
.rightSide table.gridTable td.dark_row{ border-radius:0 !important; margin:0; }
.panelSubLinks ul li a{ padding:8px 12px; font-size:13px; }
.panelSubLinks ul{ gap:4px; }
.rightSide table.gridTable input[name^="price"],.rightSide table.gridTable input[name^="sOrder"]{ width:86px !important; min-width:86px !important; text-align:right; }
.rightSide table.gridTable input[name^="prodName"]{ min-width:170px; }
.rightSide table.gridTable input[name^="prod["]{ width:92px !important; min-width:92px !important; text-align:right; padding:6px 8px; }
.rightSide table.gridTable td{ overflow-wrap:anywhere; }
.rightSide table.gridTable td.dark_row{ overflow-wrap:normal; }
.rightSide table.gridTable td img{ max-width:130px; height:auto; }
/* "NEW" sticker sits on the corner of its tab instead of over the text */
.panelSubLinks ul li > img{ position:absolute !important; margin:0 !important; top:-14px; right:-10px; width:30px !important; pointer-events:none; }
/* labels line up with their fields */
.myform .row label{ padding:9px 0 0 0; }
/* ==========================================================================
Manage Products (my_account.php): list instead of a 10-column table
========================================================================== */
.mpTop{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.mpTop h1{ margin:6px 0 !important; }
.mpStats{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.mpStat{ display:flex; flex-direction:column; justify-content:center; padding:7px 16px; background:#f8f5ec; border:1px solid #d9d3bb; border-radius:12px; line-height:1.2; box-shadow:0 1px 2px rgba(40,34,10,.1); }
.mpStat span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.mpStat strong{ font-size:20px; color:var(--ah-brand); }
.mpStat a{ font-size:11px; color:#9a1212 !important; }
.mpAdd{ align-self:center; padding:9px 18px; border-radius:22px; font-weight:700; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.mpBar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 10px; }
.mpBarL{ display:flex; gap:8px; }
.mpList{ background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.mpHead,.mpRow{ display:grid; grid-template-columns:26px 72px minmax(0,1fr) 112px 70px 124px; gap:0 14px; align-items:center; padding:0 16px; }
.mpHead{ min-height:42px; background:#e9e4cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.mpHead .mpC-info{ grid-column:3; }
.mpRow{ padding-top:12px; padding-bottom:12px; border-top:1px solid #e6e0c9; transition:background-color .15s ease; }
.mpHead + .mpRow{ border-top:0; }
.mpRow:hover{ background:#f1ecd9; }
.mpDeleted{ background:#f6e3e3 !important; }
.mpC-chk{ margin:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mpC-chk input{ width:18px; height:18px; accent-color:var(--ah-brand); cursor:pointer; }
.mpC-img{ display:block; width:72px; height:72px; border-radius:10px; background:#ebe6d3; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.mpC-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.mpC-info{ min-width:0; }
.mpName{ display:block; font-size:15px; font-weight:700; line-height:1.3; color:var(--ah-ink) !important; overflow-wrap:break-word; }
.mpName:hover{ color:var(--ah-brand) !important; text-decoration:underline; }
.mpMeta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:12px; color:#6b6550; }
.mpMeta > span{ white-space:nowrap; }
.mpMeta > span:first-child{ font-weight:700; }
.mpFeat{ color:#8a6a00; font-weight:700; }
.mpFeat .fa{ color:#e0a800; }
.mpDel{ color:#9a1212; font-weight:700; }
.mpC-price{ text-align:left; }
.mpPrice{ font-size:16px; font-weight:700; color:var(--ah-brand); margin-bottom:3px; white-space:nowrap; }
.mpPrice img{ vertical-align:-3px; margin-left:4px; border-radius:0; }
.mpC-views{ text-align:center; line-height:1.25; }
.mpC-views strong{ display:block; font-size:15px; }
.mpC-views a{ font-size:11px; color:#9a1212 !important; }
.mpC-act{ display:flex; gap:6px; justify-content:flex-end; }
.mpBtn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#ece6d0; border:1px solid #cfc7a5; color:#3a3420 !important; font-size:15px; transition:background .15s ease, color .15s ease, transform .1s ease; }
.mpBtn:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; text-decoration:none; transform:translateY(-1px); }
.mpBtnOn{ background:#fff0c9; border-color:#e0b955; color:#b88400 !important; }
.mpBtnOn:hover{ background:#b88400; border-color:#8a6500; color:#fff !important; }
@media only screen and (max-width:767px){
.mpHead{ display:none; }
.mpRow{ grid-template-columns:26px 64px minmax(0,1fr); grid-template-areas:"chk img info" "chk img price" ". views act"; gap:6px 12px; padding:14px; }
.mpRow .mpC-chk{ grid-area:chk; align-self:start; padding-top:6px; }
.mpRow .mpC-img{ grid-area:img; width:64px; height:64px; }
.mpRow .mpC-info{ grid-area:info; }
.mpRow .mpC-price{ grid-area:price; display:flex; align-items:center; gap:10px; }
.mpRow .mpPrice{ margin:0; }
.mpRow .mpC-views{ grid-area:views; text-align:left; display:flex; gap:8px; align-items:baseline; }
.mpRow .mpC-views strong{ display:inline; }
.mpRow .mpC-act{ grid-area:act; }
}
/* wrap only genuinely long strings (emails etc.); never split short words letter by letter */
.rightSide table.gridTable td{ overflow-wrap:break-word; word-break:normal; }
.mpHead .mpC-img,.mpHead .mpC-chk{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; }
.mpPrice.mpDisp{ font-size:13px; font-weight:600; color:#6b6550; }
/* ==========================================================================
Manage Product Images (image_gallery.php)
========================================================================== */
.igTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.igTop h1{ margin:6px 0 4px !important; }
.igSub{ padding-left:20px; font-size:15px; color:#4a4533; }
.igSub .fa{ color:var(--ah-brand); margin-right:4px; }
.igSub small{ margin-left:6px; padding:2px 8px; border-radius:10px; background:#e6dfc4; font-weight:700; font-size:11px; }
.igBack{ margin-top:12px; padding:8px 16px; border-radius:20px; background:#ece6d0; border:1px solid #cfc7a5; font-size:14px; font-weight:700; color:#3a3420 !important; text-decoration:none !important; }
.igBack:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
.igUpload{ background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; padding:20px 22px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.rightSide h2.igH{ margin:0 0 4px !important; padding:0; border:0; font-size:18px !important; font-weight:700; font-family:Arial,Helvetica,sans-serif; color:#241f0e; }
.rightSide h2.igHcur{ margin:26px 0 12px !important; }
.igHint{ margin:0 0 14px; font-size:13px; line-height:1.5; color:#6b6550; }
.igSlots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.igSlot{ display:block; margin:0; padding:10px 12px 12px; background:#fffdf6; border:2px dashed #cfc7a5; border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.igSlot:hover{ border-color:var(--ah-brand); background:#fff; }
.igSlotN{ display:block; margin-bottom:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#6b6550; }
.igSlot input[type=file]{ width:100%; height:auto; padding:4px; font-size:12px; border:0; background:transparent; box-shadow:none; }
#previewContainer{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
#previewContainer:empty{ display:none; }
img.igPrev{ width:96px; height:96px; object-fit:cover; margin:0; border:3px solid #fff; border-radius:10px; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.igActions{ display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.igActions .btn{ padding:10px 28px; border-radius:22px; font-weight:700; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.igActions .btn:hover{ background:var(--ah-olive-dark); border-color:#000; }
#working{ font-size:13px; color:#6b6550; }
.igGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.igCard{ background:#f8f5ec; border:1px solid #d9d3bb; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); display:flex; flex-direction:column; }
.igMain{ border-color:#e0b955; box-shadow:0 0 0 2px #e0b955, 0 4px 14px rgba(40,34,10,.12); }
.igPic{ position:relative; height:170px; background:#ebe6d3; display:flex; align-items:center; justify-content:center; padding:8px; }
.igPic img{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.igBadge{ position:absolute; top:8px; left:8px; padding:3px 10px; border-radius:12px; background:#e0b955; color:#3b2500; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.igBtns{ display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
.igBtn{ flex:1 1 auto; text-align:center; padding:6px 10px; border-radius:16px; background:#ece6d0; border:1px solid #cfc7a5; font-size:12px; font-weight:700; color:#3a3420 !important; text-decoration:none !important; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.igBtn:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
.igBtn.igDel{ color:#9a1212 !important; }
.igBtn.igDel:hover{ background:#9a1212; border-color:#640909; color:#fff !important; }
.igEmpty{ text-align:center; padding:34px 20px; background:#f8f5ec; border:1px dashed #cfc7a5; border-radius:14px; color:#6b6550; }
.igEmpty .fa{ font-size:42px; color:#c8bf9b; }
.igEmpty p{ margin:8px 0 0; }
@media only screen and (max-width:767px){
.igSlots{ grid-template-columns:1fr 1fr; }
.igUpload{ padding:16px; }
}
@media only screen and (max-width:420px){ .igSlots{ grid-template-columns:1fr; } }
.igTop,.igTop > div,.igSub{ text-align:left; }
.igSub{ padding-left:20px; }
.igBtns{ flex-wrap:nowrap; }
.igBtn.igDel{ flex:0 0 auto; padding:6px 11px; }
.igBtn.igDel .igTxt{ display:none; }
.igBtn{ padding:6px 8px; }
/* ==========================================================================
Add / Edit Product (add_product.php): sectioned cards
========================================================================== */
.apCard{ margin:0 0 18px; padding:20px 24px 12px; background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.rightSide h2.apTitle{ display:flex; align-items:center; gap:10px; margin:0 0 14px !important; padding:0; border:0; font-family:Arial,Helvetica,sans-serif; font-size:19px !important; font-weight:700; color:#241f0e; }
.apTitle small{ font-size:13px; font-weight:400; color:#6b6550; }
.apNum{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ah-brand); color:#fff; font-size:15px; line-height:30px; text-align:center; }
h3.apSub{ margin:20px 0 10px; padding:0 0 6px; border-bottom:1px solid #e3ddc6; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#6b6550; }
.apCard > h2 + h3.apSub,.apCard > p + h3.apSub{ margin-top:4px; }
/* label column / field column inside the cards */
@media only screen and (min-width:768px){
.apCard .row > .col-sm-3{ width:22%; }
.apCard .row > .col-sm-6,.apCard .row > .col-md-6{ width:56%; }
.apCard .row > .col-sm-9{ width:78%; }
.apCard .row > .col-sm-3.text-left:empty,.apCard .row > .col-sm-3:not(:has(label)){ }
}
.apCard .row{ padding:5px 0; }
.apCard .row > .col-sm-3 label{ padding-top:9px; }
.apCard .form-control{ min-height:40px; }
.apCard textarea.form-control{ min-height:0; }
.apCard em{ display:block; margin-top:6px; font-size:12px; color:#6b6550; font-style:normal; }
/* option checkboxes become chips */
.apCard .row.topBottomMargin{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.apCard .row.topBottomMargin > div{ width:auto; float:none; padding:0; }
.apCard .row.topBottomMargin label,.apCard label[for="display_only"]{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 14px; border:1px solid #cfc7a5; border-radius:18px; background:#fffdf6; font-size:14px; cursor:pointer; }
.apCard label[for="display_only"]{ padding-top:7px !important; }
.apCard .row.topBottomMargin label:hover,.apCard label[for="display_only"]:hover{ border-color:var(--ah-brand); }
.apCard .priceDiv .input-group{ max-width:200px; }
.apCard .input-group-addon{ min-width:38px; }
/* image upload fields */
.apCard input[type=file].form-control{ padding:7px 10px; background:#fffdf6; border:2px dashed #cfc7a5; border-radius:10px; box-shadow:none; }
.apCard input[type=file].form-control:hover{ border-color:var(--ah-brand); }
#previewContainer{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 10px 22%; }
#previewContainer:empty{ display:none; }
/* submit bar */
.apSubmit{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 24px; background:#f1ecd9; border:1px solid #d9d3bb; border-radius:14px; }
.apSubmit .btn{ padding:11px 32px; border-radius:24px; font-weight:700; font-size:16px; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.apSubmit .btn:hover{ background:var(--ah-olive-dark); border-color:#000; }
.apSubmit input[value*="Additional Photos"]{ background:#7a6a3f; border-color:#5a4d2c; }
@media only screen and (max-width:767px){ .apCard{ padding:16px 14px 8px; } #previewContainer{ margin-left:0; } }
/* checkbox + label pairs: the chip is the container, label is plain text */
.apCard .row.topBottomMargin > div{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid #cfc7a5; border-radius:18px; background:#fffdf6; cursor:pointer; transition:border-color .15s ease; }
.apCard .row.topBottomMargin > div:hover{ border-color:var(--ah-brand); }
.apCard .row.topBottomMargin > div:has(input:checked){ background:#f3e3e3; border-color:var(--ah-brand); }
.apCard .row.topBottomMargin label,.apCard label[for="display_only"]{ display:inline; margin:0; padding:0 !important; border:0; background:none; font-size:14px; border-radius:0; }
.apCard label[for="display_only"]:hover{ border:0; }
.apCard .row.topBottomMargin > div > input,.apCard #display_only{ margin:0; }
.apCard .col-sm-9:has(#display_only) > div:last-child{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px !important; margin-top:2px; border:1px solid #cfc7a5; border-radius:18px; background:#fffdf6; }
/* use the full column width */
.rightSide > form[name="prod"]{ width:100%; }
.apCard,.apSubmit{ width:100%; max-width:none; }
.apCard .col-sm-9:has(#direct_purchase){ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.apCard .col-sm-9:has(#direct_purchase) a{ font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
/* image cards: equal-width action buttons (icon above label) that always fit the card */
.igBtns{ display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; padding:10px; flex-wrap:nowrap; }
.igBtn,.igBtn.igDel{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 4px; min-width:0; border-radius:12px; font-size:11px; line-height:1.2; white-space:nowrap; }
.igBtn .fa{ font-size:15px; }
.igBtn.igDel .igTxt{ display:inline; }
/* ==========================================================================
Add to Cart Log (cart_log.php)
========================================================================== */
.clNote{ margin:0 0 14px; padding:10px 14px; font-size:13px; line-height:1.5; color:#5a4d2c; background:#f1ecd9; border-left:4px solid #c8a64a; border-radius:8px; }
.clNote .fa{ margin-right:6px; color:#b88400; }
.clDanger{ background:#9a1212 !important; border-color:#640909 !important; }
.clDanger:hover{ background:#640909 !important; }
.clHead,.clRow{ display:grid; grid-template-columns:60px minmax(0,1fr) 170px 130px 40px; gap:0 14px; align-items:center; padding:0 16px; }
.clHead{ min-height:42px; background:#e9e4cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.clHead .clC-prod{ grid-column:2; }
.clRow{ padding-top:10px; padding-bottom:10px; border-top:1px solid #e6e0c9; transition:background-color .15s ease; }
.clHead + .clRow{ border-top:0; }
.clRow:hover{ background:#f1ecd9; }
.clC-img{ display:block; width:60px; height:60px; border-radius:10px; background:#ebe6d3; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.clC-img img{ width:100%; height:100%; max-width:none; object-fit:cover; display:block; border-radius:0 !important; }
a.clC-prod{ font-size:15px; font-weight:700; line-height:1.3; color:var(--ah-ink) !important; overflow-wrap:break-word; min-width:0; }
a.clC-prod:hover{ color:var(--ah-brand) !important; text-decoration:underline; }
a.clC-ip{ display:inline-flex; align-items:center; gap:6px; width:max-content; padding:4px 11px; border-radius:14px; background:#ece6d0; font-size:13px; font-weight:600; color:#3a3420 !important; font-variant-numeric:tabular-nums; }
a.clC-ip:hover{ background:#7a6a3f; color:#fff !important; text-decoration:none; }
a.clC-ip .fa{ color:var(--ah-brand); }
a.clC-ip:hover .fa{ color:#ffdf08; }
.clC-date{ font-size:14px; line-height:1.3; }
.clC-date small{ display:block; font-size:12px; color:#6b6550; }
.mpBtn.clC-act:hover{ background:#9a1212; border-color:#640909; color:#fff !important; }
@media only screen and (max-width:767px){
.clHead{ display:none; }
.clRow{ grid-template-columns:60px minmax(0,1fr) 40px; grid-template-areas:"img prod act" "img ip ip" "img date date"; gap:4px 12px; padding:12px 14px; }
.clRow .clC-img{ grid-area:img; align-self:start; }
.clRow a.clC-prod{ grid-area:prod; }
.clRow a.clC-ip{ grid-area:ip; }
.clRow .clC-date{ grid-area:date; }
.clRow .clC-act{ grid-area:act; }
}
a.clC-prod,.clRow .clC-date,.clHead span{ text-align:left; }
.clHead .clC-img{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; }
.clHead .clC-date,.clHead .clC-ip,.clHead .clC-prod{ font-size:12px; font-weight:700; letter-spacing:.5px; }
/* ==========================================================================
Manage Subscribers / Asked Questions / Sales History
========================================================================== */
.sbMsg{ margin:0 0 12px; }
.mpBtnDel:hover{ background:#9a1212 !important; border-color:#640909 !important; color:#fff !important; }
.mpBtnOk{ background:#dcf0dc; border-color:#a9d6a9; color:#17621f !important; }
.mpBtnOk:hover{ background:#17621f; border-color:#0f4515; color:#fff !important; }
/* --- subscribers --- */
.sbHead,.sbRow{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 110px 90px 84px; gap:0 14px; align-items:center; padding:0 18px; }
.sbHead,.orHead{ min-height:42px; background:#e9e4cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.sbRow{ padding-top:11px; padding-bottom:11px; border-top:1px solid #e6e0c9; transition:background-color .15s ease; }
.sbHead + .sbRow,.orHead + .orRow{ border-top:0; }
.sbRow:hover,.orRow:hover{ background:#f1ecd9; }
.sbName{ font-weight:700; overflow-wrap:anywhere; }
.sbMail{ font-size:14px; color:#3a3626; overflow-wrap:anywhere; }
.sbDate{ font-size:13px; color:#6b6550; }
.sbA,.orA{ display:flex; gap:6px; justify-content:flex-end; }
.sbHead .sbA,.orHead .orA{ display:block; text-align:right; }
/* --- questions --- */
.qaList{ display:flex; flex-direction:column; gap:12px; }
.qaCard{ padding:16px 20px 14px; background:#f8f5ec; border:1px solid #d9d3bb; border-left:4px solid var(--ah-brand); border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.qaHead{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.qaWho{ display:flex; gap:12px; align-items:center; min-width:0; }
.qaAvatar{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--ah-olive); color:#fff; font-size:18px; font-weight:700; line-height:42px; text-align:center; }
.qaWho strong{ font-size:16px; }
.qaContact{ display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:2px; font-size:13px; color:#6b6550; }
.qaContact .fa{ color:var(--ah-brand); margin-right:3px; }
.qaSide{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.qaDate{ padding:3px 11px; border-radius:12px; background:#e6dfc4; font-size:12px; font-weight:700; color:#3a3420; white-space:nowrap; }
.qaBody{ margin:12px 0 4px 54px; padding:12px 16px; background:#fffdf6; border:1px solid #e6e0c9; border-radius:10px; font-size:15px; line-height:1.6; color:#2c2819; overflow-wrap:anywhere; }
.qaReply{ display:inline-block; margin:6px 0 0 54px; padding:5px 14px; border-radius:16px; background:#ece6d0; border:1px solid #cfc7a5; font-size:13px; font-weight:700; color:#3a3420 !important; text-decoration:none !important; }
.qaReply:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
/* --- orders --- */
.orHead,.orRow{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) 100px 168px; gap:0 14px; align-items:center; padding:0 18px; }
.orRow{ padding-top:12px; padding-bottom:12px; border-top:1px solid #e6e0c9; transition:background-color .15s ease; }
.orWho strong{ display:block; font-size:15px; }
.orAddr{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:#6b6550; }
.orContact{ display:flex; flex-direction:column; gap:2px; font-size:13px; overflow-wrap:anywhere; }
.orContact .fa{ color:var(--ah-brand); margin-right:3px; }
.orDate{ font-size:14px; line-height:1.3; }
.orDate small{ display:block; font-size:12px; color:#6b6550; }
@media only screen and (max-width:767px){
.sbHead,.orHead{ display:none; }
.sbRow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name stat" "mail mail" "date act"; gap:4px 10px; padding:14px; }
.sbName{ grid-area:name; } .sbMail{ grid-area:mail; } .sbDate{ grid-area:date; } .sbStat{ grid-area:stat; text-align:right; } .sbRow .sbA{ grid-area:act; }
.orRow{ grid-template-columns:minmax(0,1fr); gap:6px; padding:14px; }
.orA{ justify-content:flex-start; margin-top:4px; }
.qaBody,.qaReply{ margin-left:0; }
.qaHead{ flex-wrap:wrap; }
}
/* left-align the new list blocks (a global rule centres /
text in places) */
.sbRow,.sbRow *,.sbHead span,.qaCard,.qaCard *,.orRow,.orRow *:not(.mpBtn):not(.fa),.orHead span{ text-align:left; }
.sbHead .sbA,.orHead .orA{ text-align:right; }
.sbStat{ text-align:left; }
.qaBody{ text-align:left !important; }
.qaWho > div{ text-align:left; }
.qaReply{ display:inline-block; }
@media only screen and (max-width:767px){ .sbRow .sbStat{ text-align:right; } }
.qaCard .qaAvatar{ text-align:center; }
/* ==========================================================================
Order detail (order_detail.php)
========================================================================== */
.odSub{ padding-left:20px; margin-top:2px; font-size:15px; color:#4a4533; }
.odSub .fa{ color:var(--ah-brand); margin-right:4px; }
.odTime{ margin-left:8px; padding:2px 9px; border-radius:10px; background:#e6dfc4; font-size:12px; font-weight:700; }
.odTools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.odGhost{ padding:8px 16px; border-radius:20px; background:#ece6d0; border:1px solid #cfc7a5; font-size:14px; font-weight:700; color:#3a3420 !important; text-decoration:none !important; }
.odGhost:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; }
.odLayout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.odCard{ background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; padding:18px 22px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.rightSide h2.odH{ margin:0 0 12px !important; padding:0; border:0; font-family:Arial,Helvetica,sans-serif; font-size:18px !important; font-weight:700; color:#241f0e; }
.odH small{ margin-left:6px; padding:2px 10px; border-radius:10px; background:#e6dfc4; font-size:12px; font-weight:700; }
.odItem{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:0 14px; align-items:center; padding:12px 0; border-top:1px solid #e6e0c9; }
.odH + .odItem{ border-top:0; }
.odImg{ display:block; width:64px; height:64px; border-radius:10px; background:#ebe6d3; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.odImg img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.odName{ font-size:15px; font-weight:700; line-height:1.3; text-align:left; overflow-wrap:anywhere; }
.odQty{ display:block; margin-top:3px; font-size:13px; font-weight:400; color:#6b6550; }
.odLine{ font-size:16px; font-weight:700; color:var(--ah-brand); white-space:nowrap; }
.odTotals{ margin-top:6px; padding-top:10px; border-top:2px solid #d9d3bb; }
.odTotals > div{ display:flex; justify-content:space-between; padding:4px 0; font-size:14px; color:#4a4533; }
.odTotals .odGrand{ margin-top:4px; padding-top:10px; border-top:1px solid #e6e0c9; font-size:16px; color:#241f0e; }
.odGrand strong{ font-size:26px; color:var(--ah-brand); }
.odWho{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.odWho strong{ font-size:17px; text-align:left; }
.odWho .qaAvatar{ text-align:center; }
.odDl{ margin:0; }
.odDl dt{ margin-top:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.odDl dd{ margin:2px 0 0; font-size:14px; line-height:1.45; text-align:left; overflow-wrap:anywhere; }
.odPay{ display:inline-block; padding:3px 12px; border-radius:12px; background:#e6dfc4; font-weight:700; font-size:13px; }
@media only screen and (max-width:991px){ .odLayout{ grid-template-columns:1fr; } }
@media only screen and (max-width:520px){ .odItem{ grid-template-columns:56px minmax(0,1fr); } .odLine{ grid-column:2; margin-top:4px; } .odImg{ width:56px; height:56px; } }
.odDl dt,.odDl dd{ text-align:left !important; }
.odTotals .odGrand{ align-items:baseline; }
.odTotals > div > span:first-child{ text-align:left; }
/* ==========================================================================
Edit order (edit_invoice.php)
========================================================================== */
.eiItems{ margin:0 0 14px; }
.eiHead,.eiRow{ display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:0 14px; align-items:center; }
.eiHead{ padding:0 0 6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.eiRow{ padding:6px 0; border-top:1px solid #e6e0c9; }
.eiHead + .eiRow{ border-top:0; }
.eiQty{ display:block; margin-top:3px; font-size:12px; color:#6b6550; }
@media only screen and (max-width:600px){ .eiHead{ display:none; } .eiRow{ grid-template-columns:1fr; gap:6px; } }
/* ==========================================================================
Product reports + Bulk update
========================================================================== */
.prHead,.prRow{ display:grid; grid-template-columns:56px minmax(0,1fr) 84px 84px 84px 100px; gap:0 12px; align-items:center; padding:0 16px; }
.prHead{ min-height:42px; background:#e9e4cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b6550; }
.prHead span:nth-child(n+3){ text-align:center; }
.prRow{ padding-top:10px; padding-bottom:10px; border-top:1px solid #e6e0c9; transition:background-color .15s ease; }
.prHead + .prRow{ border-top:0; }
.prRow:hover{ background:#f1ecd9; }
.prC-img{ display:block; width:56px; height:56px; border-radius:10px; background:#ebe6d3; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.prC-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
a.prC-name{ font-size:15px; font-weight:700; line-height:1.3; color:var(--ah-ink) !important; text-align:left; overflow-wrap:anywhere; }
a.prC-name:hover{ color:var(--ah-brand) !important; text-decoration:underline; }
.prNum{ text-align:center; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.prKw{ text-align:center; }
.prNone{ color:#b0a98a; }
a.prView{ display:inline-flex; flex-direction:row; gap:6px; padding:5px 14px; }
@media only screen and (max-width:767px){
.prHead{ display:none; }
.prRow{ grid-template-columns:56px repeat(3,minmax(0,1fr)); grid-template-areas:"img name name name" "img v c s" ". kw kw kw"; gap:4px 10px; padding:12px 14px; }
.prRow .prC-img{ grid-area:img; } .prRow .prC-name{ grid-area:name; }
.prRow .prNum:nth-of-type(1){ grid-area:v; } .prRow .prNum:nth-of-type(2){ grid-area:c; } .prRow .prNum:nth-of-type(3){ grid-area:s; }
.prRow .prKw{ grid-area:kw; text-align:left; }
.prNum{ text-align:left; font-size:14px; }
.prNum:before{ content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase; color:#6b6550; letter-spacing:.4px; }
}
/* bulk update: sticky header while scrolling a long list */
.buTable td.dark_row{ position:sticky; top:0; z-index:5; }
.rightSide .table-responsive:has(.buTable){ overflow:visible; }
.buTable td.light-row,.buTable td.dark-row{ background:#f8f5ec; border-bottom:1px solid #e6e0c9; padding:8px; vertical-align:middle; }
.buTable tr:nth-child(even) td.light-row,.buTable tr:nth-child(even) td.dark-row{ background:#f3efe0; }
.buTable tr:hover td.light-row,.buTable tr:hover td.dark-row{ background:#ebe5cd; }
.buTable td img.img-thumbnail{ width:44px; height:44px; object-fit:cover; padding:2px; border-radius:8px; }
.prHead .prC-img{ width:auto; height:auto; background:none; box-shadow:none; border-radius:0; }
/* bulk update: fit the card without fixed layout */
.rightSide table.buTable{ table-layout:auto; }
.buTable select.form-control{ width:100% !important; min-width:0; max-width:170px; }
.buTable input[name^="prodName"]{ min-width:150px; width:100% !important; }
.buTable input[name^="prod["],.buTable input[name^="sOrder"]{ width:82px !important; min-width:82px !important; }
.buTable td.dark_row,.buTable td.light-row,.buTable td.dark-row{ padding-left:6px; padding-right:6px; }
.buTable select.form-control{ padding-left:8px; padding-right:4px; font-size:14px; }
/* ==========================================================================
Bulk update: save bar + changed-row highlight
========================================================================== */
.buBar{ position:fixed; left:0; right:0; bottom:0; z-index:800; transform:translateY(110%); transition:transform .22s ease; pointer-events:none; }
.buBar.show{ transform:none; pointer-events:auto; }
.buBarIn{ max-width:1150px; margin:0 auto 14px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
background:#2f2a14; color:#fff; border:1px solid #6d6330; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.buCount{ font-size:15px; }
.buCount .fa{ color:#e0b955; margin-right:6px; }
.buCount strong{ font-size:20px; color:#ffdf08; margin:0 2px; }
.buBtns{ display:flex; align-items:center; gap:12px; }
.buDiscard{ padding:8px 14px; border:0; border-radius:18px; background:transparent; color:#e0d9b8; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.buDiscard:hover{ color:#fff; }
.buSave{ padding:10px 26px; border-radius:22px; font-weight:700; font-size:15px; background:#e0b955 !important; border-color:#b8923a !important; color:#2b1a00 !important; box-shadow:0 2px 0 #9c7a2b; }
.buSave:hover{ background:#f0cd73 !important; }
@media only screen and (max-width:767px){ .buBarIn{ margin:0 8px 8px; padding:10px 12px; } .buBtns{ width:100%; justify-content:space-between; } }
/* rows with unsaved edits */
.buTable tr.buChanged td.light-row,.buTable tr.buChanged td.dark-row{ background:#fff3c4 !important; box-shadow:inset 0 0 0 0 transparent; }
.buTable tr.buChanged td:first-child{ box-shadow:inset 4px 0 0 #e0b955; }
/* leave room so the bar never covers the last row / pagination */
.rightSide:has(.buBar){ padding-bottom:90px; }
/* edit order: product / price / shipping share one aligned two-column grid */
.eiRow{ align-items:center; }
.eiRow .form-control{ height:44px; margin:0; }
.eiPrice{ position:relative; }
.eiPrice .form-control{ padding-right:44px; text-align:right; }
.eiQty{ position:absolute; right:12px; top:50%; transform:translateY(-50%); margin:0; font-size:12px; font-weight:700; color:#6b6550; pointer-events:none; }
.eiPrice .form-control:focus + input + .eiQty{ color:var(--ah-brand); }
.eiShip{ margin-top:6px; padding-top:12px; border-top:2px solid #e6e0c9; }
.eiShip label{ margin:0; font-size:14px; font-weight:700; color:#3a3420; text-align:right; padding-right:4px; }
.eiShip .eiPrice .form-control{ padding-right:12px; }
.buToast{ position:fixed; left:50%; bottom:28px; z-index:900; transform:translate(-50%,30px); opacity:0; padding:14px 26px; border-radius:30px; background:#17621f; color:#fff; font-size:16px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.4); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.buToast.show{ opacity:1; transform:translate(-50%,0); }
.buToast .fa{ margin-right:6px; color:#b8f0b8; }
.buTable tr.buSaved td.light-row,.buTable tr.buSaved td.dark-row{ animation:buFlash 3.6s ease-out 1; }
@keyframes buFlash{ 0%,35%{ background:#c9efc9; } 100%{ background:inherit; } }
@media (prefers-reduced-motion:reduce){ .buTable tr.buSaved td{ animation:none; } }
/* ==========================================================================
Pagination (both implementations) + always-visible floating Update button
========================================================================== */
.pgNav,.pagination > ul{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:22px 0 8px; padding:0; list-style:none; }
.pgLink,.pagination > ul > li > a,.pagination > ul > li.currentpage{
display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:40px; height:40px; padding:0 14px; box-sizing:border-box;
border:1px solid #cfc7a5; border-radius:20px; background:#f8f5ec; color:#3a3420 !important; font-size:14px; font-weight:700; line-height:1; text-decoration:none !important;
transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
a.pgLink:hover,.pagination > ul > li > a:hover{ background:#7a6a3f; border-color:#5a4d2c; color:#fff !important; transform:translateY(-1px); }
.pgCur,.pagination > ul > li.currentpage{ background:var(--ah-brand); border-color:var(--ah-brand-dark); color:#fff !important; cursor:default; box-shadow:0 2px 6px rgba(100,9,9,.4); }
.pgGap{ padding:0 4px; color:#8a845f; font-weight:700; }
.pgInfo{ flex-basis:100%; text-align:center; margin-top:2px; font-size:12px; color:#6b6550; font-weight:400; }
.pagination > ul > li{ display:block; margin:0; padding:0; border:0; background:none; }
.pagination > ul > li.nextpage,.pagination > ul > li.previouspage{ margin:0; }
.pagination{ text-align:center; }
.pagination A,.pagination LI.currentpage{ padding:0 14px; }
.row .pgNav{ margin-left:0; }
@media only screen and (max-width:520px){
.pgLink,.pagination > ul > li > a,.pagination > ul > li.currentpage{ min-width:36px; height:36px; padding:0 10px; }
.pgNav .pgLink:not(.pgCur):not(.pgPrev):not(.pgNext){ display:none; } /* phones: Prev / current / Next only */
.pgNav .pgGap{ display:none; }
}
.buFloat{ position:fixed; right:24px; bottom:24px; z-index:790; display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border:1px solid #5a1010; border-radius:30px; background:var(--ah-brand); color:#fff; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.4); transition:transform .15s ease, opacity .2s ease, background .15s ease; }
.buFloat:hover{ background:var(--ah-olive-dark); transform:translateY(-2px); }
.buFloat.hide{ opacity:0; transform:translateY(20px); pointer-events:none; }
.buFloat:disabled{ opacity:.7; cursor:wait; }
.pgNav{ width:100%; }
.col-sm-8.pull-left:has(.pgNav),.col-sm-8:has(> strong > .pgNav){ float:none !important; width:100% !important; }
.row:has(.pgNav) .col-sm-4.pull-right{ float:none; width:auto; margin:0 0 0 auto; }
.pagination{ width:100%; }
/* ==========================================================================
Mobile sidebar: login / My Account collapses to a compact bar (js/enhance.js)
========================================================================== */
.sideToggle{ display:none; }
@media only screen and (max-width:767px){
.leftSide td.sideCollapsible{ padding:0 !important; }
.sideCollapsible > .sideToggle{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; border:0; border-radius:12px; background:transparent; color:#fff; font-size:15px; font-weight:700; text-align:left; cursor:pointer; }
.sideCollapsible > .sideToggle .fa:first-child{ color:var(--ah-gold); font-size:16px; }
.sideCollapsible > .sideToggle .sideChev{ margin-left:auto; font-size:20px; transition:transform .2s ease; }
.sideCollapsible.open > .sideToggle .sideChev{ transform:rotate(180deg); }
.sideCollapsible:not(.open) > *:not(.sideToggle){ display:none !important; }
.sideCollapsible.open{ padding:0 0 14px !important; }
.sideCollapsible.open > *:not(.sideToggle){ margin-left:16px; margin-right:16px; width:auto; }
.sideCollapsible.open > .sideToggle{ border-bottom:1px solid rgba(255,255,255,.18); border-radius:12px 12px 0 0; margin-bottom:12px; }
}
.pagination UL,.pagination > ul{ padding:0 !important; }
/* CMS pages (rules, policies, disclaimer): content pasted from Word/web carries inline white backgrounds and fixed colours */
.cmsContent,.cmsContent *{ background:transparent !important; background-color:transparent !important; }
.cmsContent [style*="color"]:not(a){ color:inherit !important; }
.cmsContent [style*="font-family"]{ font-family:inherit !important; }
.cmsContent p{ margin:0 0 12px; }
/* ==========================================================================
Signup / Forgot password: sectioned cards (suCard)
========================================================================== */
.suIntro{ margin:0 0 16px; color:#4a4631; font-size:14px; }
.suReq{ color:var(--ah-brand); font-weight:700; }
.suCard{ margin:0 0 18px; padding:20px 24px 22px; background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px; box-shadow:0 1px 2px rgba(40,34,10,.12), 0 4px 14px rgba(40,34,10,.08); }
.rightSide h2.suTitle{ display:flex; align-items:center; gap:10px; margin:0 0 16px !important; padding:0; border:0; font-family:Arial,Helvetica,sans-serif; font-size:18px !important; font-weight:700; color:#241f0e; }
.suNum{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--ah-brand); color:#fff; font-size:14px; line-height:28px; text-align:center; }
.suGrid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px 16px; }
.suSpan12{ grid-column:span 12; } .suSpan6{ grid-column:span 6; } .suSpan3{ grid-column:span 3; }
.suField label{ display:block; margin:0 0 5px; font-size:13px; font-weight:700; color:#3a3420; }
.suField .form-control{ min-height:42px; background:#fffdf6; border:1px solid #cfc7a5; border-radius:8px; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; }
.suField textarea.form-control{ min-height:0; }
.suField .form-control:focus{ border-color:var(--ah-brand); box-shadow:0 0 0 3px rgba(100,9,9,.15); }
.suHint{ display:block; margin-top:4px; font-size:12px; color:#6b6550; }
.suPrice{ display:flex; align-items:center; gap:20px; padding:16px 18px; background:#fffdf6; border:1px solid #e3ddc6; border-left:4px solid var(--ah-gold); border-radius:10px; }
.suPriceMain{ flex:0 0 auto; text-align:center; line-height:1.1; }
.suPriceAmt{ display:block; font-size:30px; font-weight:700; color:var(--ah-brand); }
.suPriceUnit{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#6b6550; }
.suPriceText{ font-size:14px; color:#3a3420; }
.suPriceText strong{ display:block; margin-bottom:2px; text-transform:uppercase; font-size:12px; letter-spacing:.5px; }
.suLegal{ margin:0 0 14px; padding:12px 14px; max-height:150px; overflow:auto; background:#fffdf6; border:1px solid #e3ddc6; border-radius:8px; font-size:13px; line-height:1.5; color:#4a4631; }
.suCheck{ display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; font-weight:400; font-size:14px; cursor:pointer; }
.suCheck input{ flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; }
.suCaptcha > label{ display:block; margin:0 0 6px; font-size:13px; font-weight:700; color:#3a3420; }
.suSubmit{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:4px 0 18px; }
.suCard .suSubmit{ margin:16px 0 0; }
.suSubmit .btn{ padding:11px 32px; border-radius:24px; font-weight:700; font-size:16px; background:var(--ah-brand); border-color:var(--ah-brand-dark); }
.suSubmit .btn:hover{ background:var(--ah-olive-dark); border-color:#000; }
.suLink{ font-size:14px; }
.fpCardBox{ max-width:520px; }
@media only screen and (max-width:767px){
.suCard{ padding:16px 14px 18px; }
.suSpan6,.suSpan3{ grid-column:span 12; }
.suGrid .suSpan3{ grid-column:span 6; }
.suPrice{ flex-direction:column; align-items:flex-start; gap:8px; }
.suSubmit .btn{ width:100%; }
}
/* ==========================================================================
Content pages (p-how-it-works, rules, policies...): headings inside the page text
========================================================================== */
.cmsContent h1,.cmsContent h2,.cmsContent h3,.cmsContent h4,.cmsContent h5{
font-family:Arial,Helvetica,sans-serif !important; font-weight:700 !important; line-height:1.25 !important; color:#241f0e !important;
text-align:left !important; text-transform:none !important; letter-spacing:-.1px;
}
.cmsContent h1{ font-size:26px !important; margin:30px 0 14px !important; }
.cmsContent h2{ font-size:22px !important; margin:30px 0 12px !important; padding:3px 0 3px 14px; border-left:5px solid var(--ah-brand); border-radius:2px; }
.cmsContent h3{ font-size:18px !important; margin:24px 0 8px !important; padding:0 0 6px; border-bottom:2px solid #e3ddc6; }
.cmsContent h4,.cmsContent h5{ font-size:15px !important; margin:18px 0 6px !important; text-transform:uppercase !important; letter-spacing:.6px; color:var(--ah-brand) !important; }
.cmsContent > :first-child{ margin-top:0 !important; }
.cmsContent h2 + p,.cmsContent h3 + p,.cmsContent h4 + p{ margin-top:0; }
@media only screen and (max-width:767px){
.cmsContent h1{ font-size:22px !important; }
.cmsContent h2{ font-size:19px !important; }
.cmsContent h3{ font-size:17px !important; }
}
/* ==========================================================================
Sitemap
========================================================================== */
.smPages{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 16px; }
.smPages li a{ display:block; padding:8px 12px; background:#fffdf6; border:1px solid #e3ddc6; border-radius:8px; font-weight:600; text-decoration:none; transition:border-color .15s ease; }
.smPages li a:hover{ border-color:var(--ah-brand); }
.smStores{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; align-items:start; }
.smStore{ background:#fffdf6; border:1px solid #e3ddc6; border-radius:10px; }
.smStore[open]{ border-color:var(--ah-brand); }
.smStore summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; cursor:pointer; list-style:none; }
.smStore summary::-webkit-details-marker{ display:none; }
.smStore summary:after{ content:"+"; flex:0 0 auto; font-weight:700; color:var(--ah-brand); }
.smStore[open] summary:after{ content:"\2212"; }
.smName{ flex:1 1 auto; min-width:0; font-weight:700; color:#241f0e; overflow-wrap:anywhere; }
.smCount{ flex:0 0 auto; padding:1px 9px; border-radius:12px; background:#e6dfc4; color:#3a3420; font-size:12px; font-weight:700; }
.smVisit{ display:block; margin:0 14px 6px; font-size:13px; font-weight:700; }
.smStore ul{ margin:0; padding:0 14px 12px 32px; max-height:260px; overflow:auto; font-size:13px; }
.smStore ul li{ padding:2px 0; }
/* PayPal "Please Provide The Information Below" popup: hidden until opened, centred card */
#buttonsRow .paymentForm{
position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; width:min(460px,92vw); max-height:90vh; overflow:auto;
padding:20px 22px 18px; background:#f8f5ec; border:1px solid #d9d3bb; border-top:4px solid var(--ah-brand); border-radius:14px;
box-shadow:0 0 0 100vmax rgba(28,26,18,.55), 0 12px 40px rgba(0,0,0,.4); z-index:1050;
}
.paymentForm .row{ margin:0 -8px; padding:0; }
.paymentForm .row .row{ margin:0 -8px 10px; }
.paymentForm [class*="col-"]{ padding:0 8px; }
.paymentForm .row:first-child > .row:first-child{ display:flex; align-items:flex-start; margin-bottom:12px; }
.paymentForm .row:first-child > .row:first-child > [class*="col-"]{ float:none; width:auto; }
.paymentForm .row:first-child > .row:first-child > .col-xs-10{ flex:1 1 auto; }
.paymentForm .row:first-child > .row:first-child > .col-xs-10 strong{ font-family:Arial,Helvetica,sans-serif; font-size:18px !important; line-height:1.3; color:#241f0e; text-align:left; display:block; }
.paymentForm .row:first-child > .row:first-child > .col-xs-2{ flex:0 0 auto; }
#buttonsRow .paymentForm .btn.btn-lg{ display:inline-block; width:auto; margin:0 !important; padding:2px 8px; font-size:20px; color:#6b6550; background:none; border:0; cursor:pointer; }
#buttonsRow .paymentForm .btn.btn-lg:hover{ color:var(--ah-brand); }
.paymentForm label{ display:block; margin:0 0 4px; font-size:13px; font-weight:700; text-align:left; color:#3a3420; }
.paymentForm .form-control{ min-height:40px; background:#fffdf6; border:1px solid #cfc7a5; border-radius:8px; box-shadow:none; }
.paymentForm .form-control:focus{ border-color:var(--ah-brand); box-shadow:0 0 0 3px rgba(100,9,9,.15); }
.paymentForm input[type=image]{ float:right; margin:8px 8px 0 0; }
@media only screen and (max-width:767px){
.paymentForm .col-md-4{ float:left; width:33.3333%; padding:0 4px; }
}