/* ps-brand-page v1.4.6 */
/* =============================================================
   PS BRAND PAGE — brand landing page styles
   Namespace: .psf   (every UX Builder section carries class="psf")
   Enqueued by ps-brand-page.php; Inter is enqueued separately.
   Pair with: focal-brand-page-ux-builder.txt (paste via Text <> tab)
   ============================================================= */

/* ---------- Tokens, type + reset (on each .psf section) ---------- */
.psf{
  --psf-black:#000000;
  --psf-white:#ffffff;
  --psf-grey-100:#f2f2f2;
  --psf-grey-300:#d9d9d9;
  --psf-grey-400:#c6c6c6;
  --psf-grey-700:#555555;
  --psf-amber:#ffc95b;
  --psf-amber-hover:#f5bd45;
  --psf-amber-dark:#e0a838;
  --psf-coral:#ff566c;
  --psf-sale:#f7f7f7;
  --psf-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --psf-ease:cubic-bezier(0.22,1,0.36,1);
  --psf-gutter:45px;
  background:var(--psf-white);
  color:var(--psf-black);
  font-family:var(--psf-font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.psf-sec--content{padding-bottom:96px}

/* Per-brand accent overrides. The palette is all CSS variables, so a brand
   modifier class on the section is enough — no new stylesheet per brand.
   Add the class alongside .psf in the section's class attribute, e.g.
   class="psf psf--naim psf-sec psf-sec--hero"

.psf--naim{
  --psf-amber:#BRAND;
  --psf-amber-hover:#BRAND_LIGHTER;
  --psf-amber-dark:#BRAND_DARKER;
  --psf-coral:#BRAND_UNDERLINE;
}

   Logos are sized by height, so any aspect ratio works. Only an unusually
   wide wordmark needs a nudge:

.psf--naim .psf-hero__logo{height:34px}
*/
.psf *,.psf *::before,.psf *::after{box-sizing:border-box}
.psf h1,.psf h2,.psf h3,.psf p{margin:0;padding:0;width:auto;font-family:var(--psf-font);letter-spacing:normal;text-shadow:none}
.psf ul,.psf ol,.psf li,.psf figure{margin:0;padding:0}
.psf ul,.psf ol{list-style:none}
.psf li{margin:0 !important}
.psf img{display:block;max-width:100%;vertical-align:top}
.psf svg{display:block;max-width:100%}
.psf a{color:var(--psf-black);text-decoration:none}
.psf a:hover{color:var(--psf-grey-700)}
.psf a:focus-visible,.psf button:focus-visible{outline:2px solid var(--psf-amber-dark);outline-offset:2px}

/* ---------- Layout ---------- */
.psf-container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--psf-gutter)}

/* Opt-in: escape a constrained parent, e.g. the shop container on a product
   category page. A no-op when the parent is already full width. Uses 100vw,
   so if it produces a horizontal scrollbar, the page wrapper needs
   overflow-x: clip. */
.psf-sec--bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ---------- Shared bits ---------- */
.psf .psf-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.5}
.psf .psf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;font-family:var(--psf-font);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.04em;line-height:1;text-decoration:none;white-space:nowrap;border:none;border-radius:0;box-shadow:none;cursor:pointer;background:var(--psf-amber);color:var(--psf-black);transition:background 220ms var(--psf-ease),transform 140ms var(--psf-ease)}
.psf .psf-btn:hover{background:var(--psf-amber-hover);color:var(--psf-black)}
.psf .psf-btn:active{transform:translateY(1px)}
.psf .psf-btn--md{padding:16px 32px;min-height:52px}
.psf .psf-btn--lg{padding:20px 44px;min-height:63px;font-size:15px}
.psf .psf-btn--pill{border-radius:999px}
.psf .psf-btn--block{display:flex;width:100%}
.psf .psf-section-label{width:100%;font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.5;color:var(--psf-black);padding-bottom:12px;border-bottom:1px solid var(--psf-black)}

/* ---------- Breadcrumb ---------- */
.psf .psf-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0;font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.5;color:var(--psf-grey-700)}
.psf .psf-breadcrumb li{display:flex;gap:8px;align-items:center}
.psf .psf-breadcrumb li + li::before{content:"/"}
.psf .psf-breadcrumb a{color:var(--psf-grey-700)}
.psf .psf-breadcrumb a:hover{color:var(--psf-black)}
.psf .psf-breadcrumb .psf-current{color:var(--psf-black)}

/* ---------- Hero ---------- */
.psf .psf-hero{position:relative;width:100%;height:620px;background:var(--psf-grey-100);overflow:hidden}
.psf .psf-hero__media{position:absolute;inset:0}
.psf .psf-hero__media img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 55%}
.psf .psf-hero__inner{position:relative;height:100%;padding-bottom:56px;display:flex;align-items:flex-end}
.psf .psf-hero__panel{width:480px;max-width:100%;background:var(--psf-black);color:var(--psf-white);padding:40px 44px 44px;display:flex;flex-direction:column;gap:16px}
.psf .psf-hero__eyebrow{color:var(--psf-grey-300)}
.psf .psf-hero__title{margin:4px 0 0;line-height:0;color:var(--psf-white)}
.psf .psf-hero__logo{height:50px;width:auto;max-width:100%}
/* Shown in place of the logo when no readable SVG is found for the brand. */
.psf .psf-hero__wordmark{display:block;font-size:34px;font-weight:700;line-height:1;letter-spacing:0.02em;text-transform:uppercase;color:inherit}
.psf .psf-hero__lede{font-size:17px;line-height:1.5;color:var(--psf-grey-300)}
.psf .psf-hero__actions{display:flex;align-items:center;gap:20px;margin-top:10px}
.psf .psf-hero__count{font-size:14px;color:var(--psf-grey-400)}

/* ---------- Category nav ---------- */
.psf .psf-cat-nav{width:100%;background:var(--psf-grey-100);border-bottom:1px solid var(--psf-grey-300)}
.psf .psf-cat-nav__inner{display:flex;flex-wrap:wrap;align-items:center;column-gap:40px}
.psf .psf-cat-nav__title{margin-right:auto;padding:22px 0;color:var(--psf-grey-700)}
.psf .psf-cat-nav__list{display:flex;flex-wrap:wrap;column-gap:40px}
.psf .psf-cat-nav__link{display:flex;gap:8px;align-items:center;min-height:64px;font-size:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;line-height:1.5}
.psf .psf-cat-nav__count{font-weight:400;color:var(--psf-grey-700)}

/* ---------- Content shell ---------- */
.psf .psf-content{padding-top:80px;display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.psf .psf-about{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:24px}
.psf .psf-new{--psf-cols:2;--psf-gap:24px;flex:1.6 1 640px;min-width:0;display:flex;flex-direction:column;gap:24px}

/* ---------- About ---------- */
.psf .psf-about__title{font-size:35px;line-height:1.15;font-weight:700;text-transform:uppercase;color:var(--psf-black)}
.psf .psf-about__body{font-size:16px;line-height:1.65;color:var(--psf-grey-700)}
.psf .psf-link-underline{align-self:flex-start;font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.5;border-bottom:2px solid var(--psf-coral);padding-bottom:4px}
.psf .psf-dealer{margin-top:16px;border-top:1px solid var(--psf-grey-300);padding-top:24px;display:flex;flex-direction:column;gap:6px}
.psf .psf-dealer .psf-dealer__title{font-size:15px;letter-spacing:0.1em;color:var(--psf-black)}
.psf .psf-dealer__body{font-size:15px;line-height:1.6;color:var(--psf-grey-700)}
.psf .psf-dealer__link{align-self:flex-start;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.5;text-decoration:underline;text-underline-offset:4px}

/* ---------- New from Focal / carousel ---------- */
.psf .psf-new__head{display:flex;align-items:flex-end;gap:24px}
.psf .psf-new__head .psf-section-label{flex:1 1 auto}
.psf .psf-carousel__controls{display:flex;gap:8px;padding-bottom:8px}
.psf .psf-carousel__btn{width:44px;height:44px;min-height:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--psf-black);border-radius:999px;box-shadow:none;line-height:1;font-size:0;cursor:pointer;transition:opacity 220ms var(--psf-ease)}
.psf .psf-carousel__btn svg{width:18px;height:18px}
.psf .psf-carousel__btn--prev{background:var(--psf-white);color:var(--psf-black)}
.psf .psf-carousel__btn--next{background:var(--psf-black);color:var(--psf-white)}
.psf .psf-carousel__btn.is-disabled{opacity:0.35;cursor:default}
.psf .psf-carousel__track{display:flex;gap:var(--psf-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 20px}
.psf .psf-carousel__track::-webkit-scrollbar{display:none}
.psf .psf-carousel__item{display:flex;flex:0 0 calc((100% - (var(--psf-cols) - 1) * var(--psf-gap)) / var(--psf-cols));scroll-snap-align:start}
.psf .psf-carousel__item--more{display:flex}
.psf .psf-carousel__progress{display:block;position:relative;height:2px;background:var(--psf-grey-300)}
.psf .psf-carousel__bar{position:absolute;top:0;left:0;height:2px;width:45%;background:var(--psf-black);transition:left 200ms var(--psf-ease),width 200ms var(--psf-ease)}
/* Nothing to scroll: the script adds is-static and the furniture goes away. */
.psf .psf-new.is-static .psf-carousel__controls,
.psf .psf-new.is-static .psf-carousel__progress{display:none}

/* Cards per row on desktop. The mobile carousel below overrides all of
   these back to a horizontal scroll track. */
.psf .psf-new--cols-3{--psf-cols:3}
.psf .psf-new--cols-4{--psf-cols:4}

/* Empty state, e.g. an on-sale block with nothing on sale */
.psf .psf-empty{background:var(--psf-grey-100);padding:32px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.psf .psf-empty__text{font-size:16px;line-height:1.6;color:var(--psf-grey-700);max-width:60ch}

/* ---------- Product card ---------- */
.psf .psf-card{position:relative;display:flex;flex-direction:column;width:100%;background:var(--psf-white);box-shadow:0 10px 20px rgba(0,0,0,0.10);overflow:hidden}
.psf .psf-card__media{position:relative;aspect-ratio:1 / 1;background:var(--psf-grey-100);display:flex;align-items:center;justify-content:center;overflow:hidden}
.psf .psf-card__media img{width:85%;height:85%;object-fit:contain;mix-blend-mode:multiply}
.psf .psf-card__media.is-empty{background:var(--psf-grey-100)}
.psf .psf-card__media.is-empty img{display:none}
.psf .psf-card__body{padding:20px 16px 16px;display:flex;flex-direction:column;gap:4px}
.psf .psf-card__category{font-size:14px;font-weight:400;line-height:1.5;color:var(--psf-grey-700)}
.psf .psf-card__name{font-size:20px;font-weight:700;line-height:1.2;color:var(--psf-black)}
.psf .psf-card__name a{color:inherit}
.psf .psf-card__footer{margin-top:auto;padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.psf .psf-price{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--psf-grey-100);font-weight:700;font-size:20px;letter-spacing:0.04em;line-height:1.5;padding:18px 24px;text-align:center}

/* ---------- View-all tile (mobile) ---------- */
.psf .psf-more{width:100%;background:var(--psf-grey-100);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:24px}
.psf .psf-more__label{font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.4}
.psf .psf-more__icon{width:44px;height:44px;border-radius:999px;background:var(--psf-amber);color:var(--psf-black);display:flex;align-items:center;justify-content:center}
.psf .psf-more__icon svg{width:18px;height:18px}

/* ---------- WooCommerce price markup inside .psf-price ---------- */
.psf .psf-price{flex-wrap:wrap}
.psf .psf-price__label{font-weight:700}
/* flex so a was/now pair lays out as a row rather than running together */
.psf .psf-price__value{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.psf .psf-price del{font-weight:400;opacity:0.5}
.psf .psf-price ins{text-decoration:none;background:none;color:var(--psf-sale);font-weight:700}
.psf .psf-price .woocommerce-Price-amount{font-weight:inherit;color:inherit}
.psf .psf-price .woocommerce-Price-currencySymbol{font-weight:inherit}

/* ---------- Woo product image inside the card ---------- */
.psf .psf-card__media img{width:85%;height:85%;max-width:85%;object-fit:contain;mix-blend-mode:multiply;transition:transform 420ms var(--psf-ease)}
.psf .psf-card__media .woocommerce-placeholder{mix-blend-mode:normal}

/* Sale badge: Flatsome renders and styles it, we only anchor it in the card
   and keep it above the image. mix-blend-mode stays off it. */
.psf .psf-card__media > .badge-container{z-index:2;margin:0;mix-blend-mode:normal}

/* ---------- Whole card clickable ---------- */
/* The product name's anchor is stretched over the card, so the image and
   body are clickable without a second link in the markup or the tab order.
   The footer sits above it so the button and price stay independent. */
.psf .psf-card__name a::after{content:"";position:absolute;inset:0;z-index:1}
.psf .psf-card__footer{position:relative;z-index:2}

/* ---------- Image zoom on hover / keyboard focus / tap ---------- */
.psf .psf-card:hover .psf-card__media img,
.psf .psf-card:focus-within .psf-card__media img,
.psf .psf-card:active .psf-card__media img{transform:scale(1.07)}

@media (prefers-reduced-motion:reduce){
  .psf .psf-card:hover .psf-card__media img,
  .psf .psf-card:focus-within .psf-card__media img,
  .psf .psf-card:active .psf-card__media img{transform:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .psf{--psf-gutter:32px}
  .psf .psf-content{gap:56px}
  .psf .psf-about,.psf .psf-new{flex-basis:100%}
  .psf .psf-new--cols-3,
  .psf .psf-new--cols-4{--psf-cols:2}
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .psf{--psf-gutter:16px}
  .psf-sec--content{padding-bottom:56px}
  .psf .psf-breadcrumb ol{padding:16px 0}
  .psf .psf-hero{height:auto;background:none;overflow:visible}
  .psf .psf-hero__media{position:relative;inset:auto;height:300px;background:var(--psf-grey-100);overflow:hidden}
  .psf .psf-hero__media img{object-position:70% 50%}
  .psf .psf-hero__inner{height:auto;padding:0;display:block}
  .psf .psf-hero__panel{width:100%;padding:28px 16px 32px;gap:14px}
  .psf .psf-hero__logo{height:38px}
  .psf .psf-hero__wordmark{font-size:26px}
  .psf .psf-hero__lede{font-size:16px}
  .psf .psf-hero__actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:6px}
  .psf .psf-hero__actions .psf-btn{display:flex;width:100%}
  .psf .psf-hero__count{text-align:center}
  .psf .psf-cat-nav__inner{display:block;padding:0}
  .psf .psf-cat-nav__title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .psf .psf-cat-nav__list{flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
  .psf .psf-cat-nav__list::-webkit-scrollbar{display:none}
  .psf .psf-cat-nav__list li{flex:0 0 auto}
  .psf .psf-cat-nav__link{gap:6px;min-height:44px;padding:0 16px;background:var(--psf-white);border:1px solid var(--psf-grey-300);border-radius:999px;font-size:13px;white-space:nowrap}
  .psf .psf-content{padding-top:40px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:24px}
  .psf .psf-new{order:1;flex:none;gap:20px}
  .psf .psf-about{order:2;flex:none;gap:20px}
  .psf .psf-about__title{font-size:24px;line-height:1.2}
  .psf .psf-dealer{margin-top:12px;padding-top:20px}
  .psf .psf-new__head{gap:12px}
  .psf .psf-empty{padding:24px 20px}
  .psf .psf-new{--psf-gap:16px}
  .psf .psf-carousel__track{scroll-padding-left:16px;margin:0 -16px;padding:4px 16px 20px}
  .psf .psf-carousel__item{flex:0 0 290px;width:290px}
  .psf .psf-carousel__item--more{flex:0 0 200px;width:200px}
}

@media (prefers-reduced-motion:reduce){
  .psf *,.psf *::before,.psf *::after{transition-duration:0.01ms !important}
}