/*
 * Aperture theme for Vintage Camera Deals (OpenCart 3.0.x)
 * Loaded after the stock default stylesheet. It only restyles the existing
 * Bootstrap 3 markup: no product data, titles, descriptions or checkout logic
 * are touched. Remove the two lines added to header.twig to switch it off.
 */
:root{
  --ap-bg:#e4e6e1;          /* brushed aluminium */
  --ap-panel:#f3f4f0;
  --ap-ink:#151815;
  --ap-muted:#5b615a;
  --ap-line:#c3c7bf;
  --ap-leather:#1d221f;     /* camera leatherette */
  --ap-leather-ink:#e9ece4;
  --ap-accent:#d9661b;      /* depth-of-field orange */
  --ap-accent-dk:#b5520f;
  --ap-yellow:#c9a414;
  --ap-blue:#2c66a8;
  --ap-red:#c3302a;         /* infrared index dot */
  --ap-film:#2a1f14;
  --ap-film-edge:#e7a640;
  --ap-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --ap-body:"IBM Plex Sans Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --ap-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --ap-plate:"Michroma","Eurostile",Arial,sans-serif;
}

/* ---------- base ---------- */
body{background:var(--ap-bg);color:var(--ap-ink);font-family:var(--ap-body);font-size:15px}
h1,h2,h3{font-family:var(--ap-display);font-weight:700;letter-spacing:.01em;color:var(--ap-ink)}
h1{font-size:2.6em}
a{color:var(--ap-blue)}
a:hover,a:focus{color:var(--ap-accent)}
.btn-primary{background:var(--ap-accent);border-color:var(--ap-accent-dk);background-image:none;text-shadow:none;font-weight:600;letter-spacing:.02em}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--ap-accent-dk);border-color:var(--ap-accent-dk)}
.btn-default{background-image:none;border-color:var(--ap-line)}
.breadcrumb{background:transparent;border:0;border-bottom:1px solid var(--ap-line);border-radius:0;font-family:var(--ap-mono);font-size:12px}
.breadcrumb>li{text-shadow:none}
#content{background:transparent}

/* ---------- top bar (currency, phone, account) ---------- */
#top{background:var(--ap-leather);border-bottom:0;margin:0;padding:4px 0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);background-size:4px 4px}
#top,#top a,#top .btn-link,#top-links a,#top-links li{color:var(--ap-leather-ink);text-shadow:none}
#top a:hover,#top .btn-link:hover{color:var(--ap-accent)}
#form-currency .btn-link strong{color:var(--ap-accent);font-family:var(--ap-mono)}
#top .dropdown-menu{border-radius:2px}

/* ---------- header ---------- */
header{background:var(--ap-leather);padding:14px 0 10px;border-top:1px solid rgba(255,255,255,.08)}
#logo{margin:0}
#logo img{max-height:70px;width:auto}
#search .form-control{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--ap-leather-ink);border-radius:3px 0 0 3px;box-shadow:none}
#search .form-control::placeholder{color:rgba(233,236,228,.55)}
#search .btn-lg{background:var(--ap-accent);border-color:var(--ap-accent-dk);color:#fff;text-shadow:none;background-image:none}
#cart>.btn{background:transparent;background-image:none;border:1px solid rgba(255,255,255,.2);color:var(--ap-leather-ink);font-family:var(--ap-mono);text-shadow:none;box-shadow:none}
#cart>.btn:hover{border-color:var(--ap-accent);color:var(--ap-accent)}

/* ---------- main menu ---------- */
#menu{background:var(--ap-leather);background-image:none;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;min-height:44px}
#menu .nav>li>a{color:var(--ap-leather-ink);text-shadow:none;font-weight:500;padding:12px 14px;border-bottom:3px solid transparent}
#menu .nav>li>a:hover,#menu .nav>li.open>a{background:transparent;border-bottom-color:var(--ap-accent);color:#fff}
#menu .dropdown-menu{background:var(--ap-panel);border-top:3px solid var(--ap-accent);border-radius:0}
#menu .dropdown-inner a{color:var(--ap-ink)}
#menu .dropdown-inner a:hover{background:var(--ap-bg);color:var(--ap-accent)}
#menu .see-all{background:var(--ap-leather);color:var(--ap-leather-ink)}
#menu #category{color:var(--ap-leather-ink);font-family:var(--ap-display);font-size:20px;text-shadow:none}
#menu .btn-navbar{background:var(--ap-accent);background-image:none;border-color:var(--ap-accent-dk)}

/* ---------- aperture hero (injected on the home page by aperture.js) ---------- */
.ap-hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:18px 0 24px;padding:20px;background:var(--ap-panel);border:1px solid var(--ap-line);border-radius:6px}
.ap-hero-text{flex:1 1 300px;min-width:0}
.ap-eyebrow{font-family:var(--ap-plate);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ap-muted);margin:0 0 8px}
.ap-hero h2{font-size:clamp(34px,5vw,62px);font-weight:900;text-transform:uppercase;line-height:1;margin:0}
.ap-hero h2 em{font-style:normal;color:var(--ap-accent)}
.ap-hero p{color:var(--ap-muted);max-width:44ch;margin:12px 0 16px}
.ap-lens{flex:0 1 380px;max-width:100%}
.ap-lens canvas{width:100%;height:auto;display:block}
.ap-ring input{width:100%;accent-color:var(--ap-accent)}
.ap-scale{display:flex;justify-content:space-between;font-family:var(--ap-mono);font-size:11px;color:var(--ap-muted)}
.ap-readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-family:var(--ap-mono);font-size:12px;color:var(--ap-muted);margin-top:4px}
.ap-readout b{color:var(--ap-accent);font-weight:500}

/* ---------- product cards as a contact sheet ---------- */
.product-layout .product-thumb{background:var(--ap-film);border:0;border-radius:3px;padding-top:18px;position:relative;overflow:hidden;color:#f1ebe0}
.product-layout .product-thumb::before{content:"";position:absolute;left:0;right:0;top:4px;height:9px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,#e9e1d3 9px 19px,transparent 19px 26px);opacity:.85}
.product-thumb .image{padding:0 8px;background:transparent}
.product-thumb .image img{background:#fff;border-radius:2px}
.product-thumb .caption{padding:0 12px;min-height:150px}
.product-thumb .caption h4 a{color:#f1ebe0;font-family:var(--ap-body);font-weight:500;font-size:14px;line-height:1.3}
.product-thumb .caption h4 a:hover{color:var(--ap-film-edge)}
.product-thumb .caption p{color:rgba(241,235,224,.75)}
.product-thumb .price{color:var(--ap-film-edge);font-family:var(--ap-mono);font-size:15px}
.product-thumb .price-new{color:var(--ap-film-edge)}
.product-thumb .price-old{color:rgba(241,235,224,.5)}
.product-thumb .price-tax{color:rgba(241,235,224,.5)}
.product-thumb .button-group{background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.12)}
.product-thumb .button-group button{background:transparent;color:#f1ebe0;border-left-color:rgba(255,255,255,.12)}
.product-thumb .button-group button:hover{background:var(--ap-accent);color:#fff}
.product-thumb .ap-frame-no{position:absolute;top:2px;right:10px;font-family:var(--ap-mono);font-size:10px;color:var(--ap-film-edge);background:var(--ap-film);padding:0 4px;z-index:1}
/* negatives that develop on hover, only where a mouse can hover */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ap-sheet .product-thumb .image img{filter:invert(1) hue-rotate(180deg) sepia(.3);transition:filter .7s ease}
  .ap-sheet .product-thumb:hover .image img,.ap-sheet .product-thumb:focus-within .image img{filter:none}
}

/* ---------- product page: loupe and data plate ---------- */
#product-product .thumbnails>li:first-child>a{position:relative;display:block;cursor:zoom-in}
.ap-loupe{position:absolute;width:170px;height:170px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;
  box-shadow:0 0 0 4px var(--ap-leather),0 0 0 6px #8b9087,0 12px 30px rgba(0,0,0,.4);display:none;z-index:5}
#product-product h1{font-family:var(--ap-body);font-weight:600;font-size:24px;line-height:1.3;letter-spacing:0}
#product-product .col-sm-4>ul.list-unstyled:first-of-type{border:1.5px solid var(--ap-ink);border-radius:4px;padding:10px 12px;
  font-family:var(--ap-mono);font-size:13px;background:linear-gradient(180deg,transparent,rgba(127,127,127,.06))}
#product-product .col-sm-4>ul.list-unstyled:first-of-type li{padding:2px 0}
#product-product .col-sm-4>ul.list-unstyled h2{font-family:var(--ap-display);font-size:42px;color:var(--ap-ink)}
#product-product #button-cart{background:var(--ap-accent);border-color:var(--ap-accent-dk);background-image:none}
.nav-tabs>li.active>a{border-top:3px solid var(--ap-accent)}

/* ---------- shutter blink on add to cart ---------- */
.ap-shutter{position:fixed;inset:0;pointer-events:none;z-index:9999;display:flex;align-items:center;justify-content:center}
.ap-shutter i{width:180vmax;height:180vmax;border-radius:50%;box-shadow:0 0 0 100vmax #000;opacity:0}
.ap-shutter.go i{animation:apSnap .38s ease}
@keyframes apSnap{0%{opacity:.85;transform:scale(1)}45%{transform:scale(0);opacity:.9}100%{transform:scale(1);opacity:0}}

/* ---------- footer ---------- */
footer{background:var(--ap-leather);color:var(--ap-leather-ink);border-top:0;margin-top:30px}
footer h5{font-family:var(--ap-plate);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ap-film-edge)}
footer a{color:var(--ap-leather-ink)}
footer a:hover{color:var(--ap-accent)}
footer hr{border-top-color:rgba(255,255,255,.12);border-bottom:0}

/* ---------- checkout: colours only, layout untouched ---------- */
#checkout-checkout .panel-default>.panel-heading{background:var(--ap-panel);border-color:var(--ap-line)}
#checkout-checkout .panel-title{font-family:var(--ap-body);font-weight:600}

@media (max-width:767px){
  .ap-hero{padding:14px}
  .product-thumb .caption{min-height:0}
}
@media (prefers-reduced-motion:reduce){.ap-shutter.go i{animation:none}}