/* Tcpl_PartnerPortal storefront styling: landing page, header logo, checkout office-delivery. */

.tcpl-partner-page {
    max-width: 1000px;
    margin: 0 auto;
}

/* Landing page hero (Content: Feature of the month, Featured Collection, Promo Banner, Why buy, Highlights, FAQ
   below reuse Tcpl_ShopDesign's own home section templates as-is via Block\Home\Partner\* — see that module's
   view/frontend/templates/home/. Only this hero wrapper is new; .tc-banner itself is already fully designed
   (components/_banner.less). Not full-bleed here (unlike the site homepage's .cms-index-index override) — this
   page's content column width is used instead: same --container-home (1200px) the sections below it
   (.tc-top-categories etc.) already constrain themselves to, so its edges line up with theirs instead of
   falling back to Magento's raw default .page-main width (1240px, ~40px wider, misaligned on both sides). */
.tc-partner-hero {
    max-width: var(--container-home);
    margin: 0 auto 32px;
}

.tc-partner-hero .tc-banner + .tc-banner {
    margin-top: 16px;
}

/* "Our Partners" directory page (partner/list.phtml) hero — a plain page title + intro, unrelated to any one
   partner's own landing page. */
.tcpl-partner-hero {
    text-align: center;
    padding: 48px 24px;
    margin-bottom: 32px;
    background: var(--surface);
    border-radius: var(--r-xl);
}

.tcpl-partner-hero__inner {
    max-width: 720px;
    margin: 0 auto;
}

.tcpl-partner-hero__title {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 500;
    color: var(--ink);
}

.tcpl-partner-hero__header-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Individual partner landing page: per-visitor greeting + admin-configured header text — Tcpl/shop tokens, so
   they sit under the new Hero/Top Categories/etc. sections (above) without a style seam. The old boxed partner
   identity strip that used to sit here too (logo + name repeated as a big heading) is gone: the site header
   already shows the partner's own logo (Block\Partner\HeaderLogo) and the page <title>/new banner Hero section
   already carry the branding, so repeating both again here was pure duplication. */
.tcpl-partner-greeting {
    margin-bottom: 12px;
    font-size: 14px;
    text-align: center;
    color: var(--ink-2);
}

.tcpl-partner-greeting:empty {
    display: none;
}

.tcpl-partner-header-text {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    color: var(--ink-2);
}

/* Generic content sections (Terms & Conditions) */
.tcpl-partner-section {
    margin-bottom: 40px;
}

.tcpl-partner-section__title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: var(--ink);
}

/* Partner directory listing */
.tcpl-partner-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.tcpl-partner-list__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    min-height: 220px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    text-align: center;
    color: #201f1f;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tcpl-partner-list__card:hover {
    border-color: #ff5501;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.tcpl-partner-list__logo {
    display: block;
    max-width: 180px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 16px;
}

.tcpl-partner-list__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #201f1f;
}

.tcpl-partner-list__name {
    font-weight: 600;
}

.tcpl-partner-list__empty {
    text-align: center;
    padding: 24px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

/* Terms & conditions */
.tcpl-partner-terms {
    padding: 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.tcpl-partner-terms__content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Header logos: shared container holding the partner logo (logo1) then the default store logo
   (logo2) — see partner_common.xml. Flex keeps order and vertical alignment deterministic
   regardless of the default theme's ".logo { float: left }" rule. partner.css only loads on
   partner pages, so these overrides are naturally scoped there and don't affect the default site
   header. The !important flags below are necessary, not stylistic: Luma's css/styles-l.css
   (desktop, min-width:768px) declares equal-specificity ".header.content"/".logo"/".logo img"
   rules and is always injected into <head> AFTER this file — by design, since it layers
   desktop-only overrides on top of the mobile-first base — so a plain override here would lose
   the cascade on desktop viewports no matter what order we declare things in this file. */
.header.content {
    padding: 10px 20px 10px !important;
}

.tcpl-partner-header-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 48px;
}

/* Both logos share the same max-height so neither dominates, regardless of each image's own
   natural aspect ratio. Scoped to this container only — the default store logo keeps its normal
   theme-controlled size everywhere else on the site. */
.tcpl-partner-header-logos .logo {
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.tcpl-partner-header-logos .logo img {
    max-height: 48px !important;
    width: auto;
    height: auto;
}

.tcpl-partner-header-logo {
    display: flex;
    align-items: center;
}

.tcpl-partner-header-logo__image {
    display: block;
    max-height: 48px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Category page: keep product links visually identical to default Luma listing (no overrides
   needed — core catalog CSS already applies since we reuse Magento\Catalog\Block\Product\ListProduct). */

/* Checkout: office-delivery choice (see js/view/office-delivery.js) */
.tcpl-office-delivery {
    margin-bottom: 20px;
}

.tcpl-office-delivery .control {
    margin-bottom: 8px;
}

.tcpl-office-delivery label {
    margin-inline-end: 16px;
    font-weight: 600;
}

.tcpl-office-delivery__select .select {
    max-width: 320px;
}

/*
 * While an office address is selected for a customer who has saved addresses, the inline shipping form is
 * shown (see js/view/office-delivery.js / template/office-delivery.html) instead of core's saved-address list
 * and "New Address" popup button - the office selector renders a .tcpl-office-form-mode marker to signal it.
 */
#checkout-step-shipping:has(.tcpl-office-form-mode) .shipping-address-items,
#checkout-step-shipping:has(.tcpl-office-form-mode) .new-address-popup,
#checkout-step-shipping:has(.tcpl-office-form-mode) #co-shipping-form .field.choice {
    display: none; /* the last one: core's "Save in address book" box, which the inline path ignores anyway */
}