/* ============================================================
   Brian Carter Cellars — wine capsule card styles
   Upload as File 6 (replaces previous override.css)
   These classes let the product descriptions stay tiny so
   OrderPort doesn't truncate them. (then HARD-refresh)
   ============================================================ */

/* ---- the capsule card ---- */
.bcc{
  max-width:400px;width:100%;margin:0 auto;box-sizing:border-box;
  background:#faf6ec;border:1px solid #e3d6bf;border-top:3px solid #5b1722;
  padding:26px 28px 24px;color:#2b1418;
  font-family:Georgia,'Times New Roman',serif;line-height:1.55;
}
.bcc-wide{max-width:760px;border-top-width:4px;padding:34px 40px 32px;line-height:1.6}

.bcc-eyebrow{
  font-family:Arial,Helvetica,sans-serif;font-size:9.5px;letter-spacing:2px;
  font-weight:700;color:#a8702f;text-transform:uppercase;margin-bottom:9px;
}
.bcc-wide .bcc-eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:10px}

.bcc-name{font-size:33px;line-height:1;color:#5b1722;margin:0 0 4px;letter-spacing:.5px}
.bcc-wide .bcc-name{font-size:44px;margin-bottom:14px}

.bcc-style{font-style:italic;font-size:13px;color:#7e2330;margin-bottom:14px}

.bcc-rule{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.bcc-rule:before,.bcc-rule:after{content:"";height:1px;flex:1;background:#d8c39a}
.bcc-rule span{width:5px;height:5px;background:#a8702f;transform:rotate(45deg);flex:none}

.bcc p{margin:0 0 12px;font-size:12.5px;color:#34201f}
.bcc-wide p{font-size:15px;margin:0 0 16px}
.bcc-note{font-style:italic !important;color:#6a4a36 !important}

.bcc-h{
  font-family:Arial,Helvetica,sans-serif;font-size:9.5px;letter-spacing:2px;
  font-weight:700;color:#5b1722;text-transform:uppercase;margin:6px 0 9px;
}

.bcc-bar{display:flex;width:100%;height:10px;border-radius:5px;overflow:hidden;margin-bottom:13px}
.bcc-bar span{display:block}

.bcc-leg{display:flex;flex-wrap:wrap;gap:7px 18px;font-family:Arial,Helvetica,sans-serif}
.bcc-leg span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#34201f;white-space:nowrap}
.bcc-leg i{width:9px;height:9px;border-radius:2px;flex:none;display:block}
.bcc-leg b{color:#5b1722}

.bcc-acc{
  border-top:1px solid #ece0c8;padding-top:11px;margin-top:16px;
  font-family:Arial,Helvetica,sans-serif;font-size:10.5px;line-height:1.7;color:#6a4a36;
}
.bcc-acc b{color:#a8702f}

.bcc-btn{
  display:inline-flex;align-items:center;gap:10px;background:#5b1722;color:#faf6ec;
  text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:11px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border-radius:3px;
}

/* ============================================================
   PATIO THEME — White & Rosé wines
   Same markup as the red cards; just add the class:
     <div class="bcc bcc-patio"> … </div>
     <div class="bcc bcc-wide bcc-patio"> … </div>  (intro)
   Bright, sunlit accents. Recommended chip / bar colors:
     WHITES (citrus + herb, reads clearly non-pink):
       #e8a81c gold   #82af3b green   #efc524 lemon
       #4f9d6b mint   #c3c24a chartreuse
     ROSÉS (bright, saturated pinks):
       #f2899e blush  #ec5d78 rosé    #d93f5e deep   #f4b3c2 pale
   ============================================================ */
.bcc-patio{
  background:#fdf9f1;
  border:1px solid #ecdcc4;
  border-top:3px solid #e8866f;
}
.bcc-wide.bcc-patio{border-top-width:4px}
.bcc-patio .bcc-eyebrow{color:#c0892a}
.bcc-patio .bcc-name{color:#c75549}
.bcc-patio .bcc-style{color:#d35a76}
.bcc-patio .bcc-rule:before,
.bcc-patio .bcc-rule:after{background:#f0d4ad}
.bcc-patio .bcc-rule span{background:#e8866f}
.bcc-patio .bcc-h{color:#c75549}
.bcc-patio .bcc-leg b{color:#c75549}
.bcc-patio .bcc-note{color:#7a6a52 !important}
.bcc-patio .bcc-acc{border-top-color:#efe0c8}
.bcc-patio .bcc-acc b{color:#c0892a}
.bcc-patio .bcc-btn{background:#c75549;color:#fdf9f1}
   Fixed-width image column on the left; title, card and cart
   all indented by the same amount so they line up on every row,
   regardless of how big the bottle thumbnail is.
   Wrapped in a min-width query so phones don't get the 175px
   indent (which was shoving the whole card to the right edge). */
@media (min-width:700px){
  .productItem .pi-content{overflow:hidden !important}
  .productItem .prod-img{
    float:left !important;
    width:115px !important;min-width:115px !important;max-width:115px !important;
    text-align:center !important;
  }
  .productItem .prod-img img{max-width:100px !important;height:auto !important}
  .productItem .prod-summary,
  .productItem .uc.addToCart{
    float:none !important;
    margin-left:135px !important;
  }
}

/* ---- mobile: stack image above, card FULL WIDTH, nothing floated ----
   Root cause of the squished/clipped card: the theme floats .prod-img
   and gives .prod-summary `overflow:hidden`, so the summary collapses
   into a narrow column beside the float and then clips the wine name.
   We clear the float, restore full width, and un-clip the summary. */
@media (max-width:820px){
  .productItem,
  .productItem .pi-content,
  .productItem .prod-summary,
  .productItem .uc.addToCart{
    width:100% !important;max-width:100% !important;
    float:none !important;clear:both !important;
    margin-left:0 !important;margin-right:0 !important;
    box-sizing:border-box !important;
  }
  /* the actual clip + collapse fix */
  .productItem .prod-summary{overflow:visible !important;display:block !important}
  .productItem .prod-img{
    float:none !important;clear:both !important;
    width:auto !important;max-width:100% !important;
    text-align:center !important;margin:0 0 14px !important;
  }
  .productItem .prod-img img{max-width:130px !important;height:auto !important}

  .bcc,.bcc-wide{
    max-width:100% !important;width:100% !important;
    padding-left:22px !important;padding-right:22px !important;
  }
  /* on a narrow column a long single-word name must shrink + wrap,
     never overflow and clip */
  .bcc-name{font-size:27px !important;overflow-wrap:anywhere !important;word-break:break-word !important}
  .bcc-eyebrow{letter-spacing:1.5px !important}
  .bcc p,.bcc-leg span,.bcc-acc{overflow-wrap:break-word !important}
}

/* ============================================================
   BRAND CHROME — aligns the OrderPort theme with the
   Brian Carter Cellars palette (Bordeaux / cream / gold).
   Targets the theme's real selectors (from ws-style / cms /
   shop-left-menu). !important is used so these win regardless
   of CSS load order.
       Bordeaux #5b1722 · deep #4a1019 · gold #a8702f
       cream #faf6ec · warm border #e3d6bf · soft tint #f3ece0
   ============================================================ */

/* --- global links: blue -> Bordeaux, hover gold --- */
a{color:#5b1722 !important}
a:hover{color:#a8702f !important}

/* protect the capsule call-to-action buttons from the link rule */
.bcc-btn,.bcc-btn:hover{color:#faf6ec !important}
.bcc-patio .bcc-btn,.bcc-patio .bcc-btn:hover{color:#fdf9f1 !important}

/* --- top navigation --- */
.main-nav a{color:#5b1722 !important}
.main-nav a:hover{color:#a8702f !important}
/* --- dropdown sub-menus: light estate panel, items visible by default --- */
.sub-menu{
  background-color:#faf6ec !important;
  border:1px solid #e3d6bf !important;
  box-shadow:0 8px 24px rgba(43,20,24,0.14) !important;
  padding:6px 0 !important;
}
.sub-menu a{color:#5b1722 !important;background:transparent !important}
.sub-menu a:hover{color:#a8702f !important;background:#f3ece0 !important;opacity:1 !important}

/* --- cart / sign-in status bar (top right) --- */
#authStatus,#authStatus *{color:#5b1722 !important}
#authStatus a:hover{color:#a8702f !important}

/* --- every black section header -> Bordeaux ---
   Shopping Summary, cart header, left-menu header,
   account / checkout / basket headers, product tabs --- */
.ui-widget-header,
.activeCart .cartHeader,
.shop-left-menu .menu-header,
#accountContent .header,
#checkout .header,
#basket .header,
#tabs-product ul a,
#tabs-product .ui-tabs-nav a{
  background:#5b1722 !important;
  color:#faf6ec !important;
}
.lnkSignOut{color:#faf6ec !important}

/* product-detail tabs: hover / active stay light with Bordeaux text */
#tabs-product ul a:hover,
#tabs-product .ui-tabs-nav a:hover,
#tabs-product .ui-tabs-nav .ui-state-active a,
#tabs-product .ui-tabs-nav li.ui-tabs-selected a{
  background:#faf6ec !important;
  color:#5b1722 !important;
}

/* --- buttons: Bordeaux outline that fills on hover --- */
.btn{
  border:2px solid #5b1722 !important;
  color:#5b1722 !important;
  background:transparent !important;
  font-family:Raleway,sans-serif !important;
}
.btn:hover{
  background:#5b1722 !important;
  color:#faf6ec !important;
  border-color:#5b1722 !important;
}

/* --- left category menu --- */
.shop-left-menu a{color:#5b1722 !important;border-left:3px solid transparent}
.shop-left-menu a:hover{background:#f3ece0 !important}
.shop-left-menu a.selected{
  background:#f3ece0 !important;color:#5b1722 !important;
  font-weight:700;border-left-color:#a8702f !important;
}

/* --- product titles above each capsule --- */
.prod-name a,.prod-name{color:#5b1722 !important}

/* --- warm the divider lines from cool grey to brand tan --- */
.productItem{border-bottom-color:#e3d6bf !important}
.rule{border-color:#e3d6bf !important}

/* --- case-discount note: harsh red -> Bordeaux --- */
h2.anounce{color:#5b1722 !important}

/* --- inputs: brand focus ring --- */
input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus,
.txt:focus{border-color:#5b1722 !important;outline:none !important}

/* ============================================================
   PRO SHOP LAYOUT — estate / old-world pass (desktop ≥1000px)
   Centered logo on top, centered nav beneath, two-up product
   cards. Scoped to ≥1000px so the mobile hamburger menu and
   single-column stack are left untouched.
   ============================================================ */
@media (min-width:1000px){

  /* --- header: stack logo over a centered nav --- */
  .header-main{
    position:relative !important;
    max-width:1280px !important;margin:0 auto !important;
    display:flex !important;flex-direction:column !important;
    -webkit-box-orient:vertical !important;-webkit-box-direction:normal !important;
    -webkit-box-align:center !important;-ms-flex-align:center !important;align-items:center !important;
    padding:20px 24px 0 !important;
  }
  .logo-wrap{
    position:static !important;width:auto !important;height:auto !important;
    left:auto !important;top:auto !important;
    -webkit-box-flex:0 !important;-ms-flex:0 0 auto !important;flex:0 0 auto !important;
    -webkit-box-pack:center !important;-ms-flex-pack:center !important;justify-content:center !important;
    margin:0 0 4px !important;
  }
  .logo-wrap .logo{padding-left:0 !important}
  .logo-wrap .logo img{height:115px !important}

  .site-nav{
    width:100% !important;max-width:100% !important;
    margin:0 !important;
  }
  .main-nav{
    -webkit-box-pack:center !important;-ms-flex-pack:center !important;justify-content:center !important;
    border-top:1px solid #e3d6bf !important;
    margin-top:8px !important;
  }
  .main-nav a{
    line-height:normal !important;
    padding:16px 22px !important;
    font-size:16px !important;
    letter-spacing:1.5px !important;
    text-transform:uppercase !important;
    color:#5b1722 !important;
    font-family:"Libre Caslon Text",serif !important;
  }
  .main-nav a:hover{color:#a8702f !important}
}